/* Carso Cybernetics brand theme for The DIY AI School — Oxblood & Brass. * Default = the CERTIFICATE (light): parchment ground, bold ruby-ink headings, gold-foil hairlines. * data-theme="noir" on = the PLAQUE (dark): blue-black ground, engraved brass, oxblood hairlines. * Maps the site's existing variables (--color-*, --accent-color, --card-bg, ...) onto brand tokens so * every template inherits the brand without per-page edits. Canon: ~/carso-cybernetics-cortex/DESIGN-CANON.md */ :root { /* brand tokens — certificate */ --carso-ground: #f2ede0; --carso-surface: #fffdf6; --carso-ink: #171310; --carso-body: #332c25; --carso-muted: #6d6358; --carso-ruby: #8e1f32; /* oxblood as INK — the light theme's voice */ --carso-ruby-deep: #6e1522; --carso-garnet: #c75f6b; /* hover / interactive */ --carso-foil: #b8962e; /* gold foil hairlines (solid) */ --carso-foil-gradient: linear-gradient(90deg, #f0d9a8 0%, #c9a24e 50%, #7d5d1e 100%); --carso-line: rgba(110, 21, 34, 0.28); --carso-line-soft: rgba(0, 0, 0, 0.10); --carso-serif: "Didot", "Bodoni 72", "Bodoni MT", "Hoefler Text", Garamond, "Times New Roman", serif; --carso-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --carso-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* the site's own variables, remapped */ --color-primary: var(--carso-ruby); --color-secondary: var(--carso-muted); --color-accent: var(--carso-garnet); --color-bg: var(--carso-ground); --color-bg-alt: #ebe4d3; --color-bg-card: var(--carso-surface); --color-text: var(--carso-ink); --color-text-muted: var(--carso-muted); --color-text-inverse: #ffffff; --color-border: var(--carso-line); --text-color: var(--carso-ink); --border-color: var(--carso-line); --text-muted: var(--carso-muted); --accent-color: var(--carso-ruby); --bg-color: var(--carso-ground); --card-bg: var(--carso-surface); --card-text: var(--carso-body); --card-text-muted: var(--carso-muted); --input-text: var(--carso-ink); --input-bg: #ffffff; --input-border: var(--carso-line); --input-placeholder: #9a9084; --font-primary: var(--carso-sans); --font-weight-light: 300; --font-weight-normal: 400; --font-weight-bold: 700; --spacing-unit: 8px; /* legacy theme-picker variables (widget removed; kept so nothing breaks) */ --theme-toggle-bg: var(--carso-ruby); --theme-toggle-color: #fff; --theme-menu-bg: var(--carso-surface); --theme-menu-border: var(--carso-line); --theme-menu-title: var(--carso-ink); --theme-option-bg: var(--carso-ground); --theme-option-border: var(--carso-line); --theme-option-text: var(--carso-ink); --theme-option-hover: var(--carso-garnet); --theme-option-active: var(--carso-ruby); --theme-option-active-bg: rgba(142, 31, 50, 0.10); color-scheme: light; } /* ---------- the plaque (noir) ---------- */ :root[data-theme="noir"] { --carso-ground: #0b0e14; --carso-surface: #12161d; --carso-ink: #e7ecf2; --carso-body: #c6cfda; --carso-muted: #9aa4b2; --carso-ruby: #d4b25e; /* on noir, small type goes BRASS, never oxblood (contrast rule) */ --carso-ruby-deep: #6e1522; --carso-garnet: #c75f6b; --carso-foil: #d4b25e; --carso-foil-gradient: linear-gradient(90deg, #f9edc4 0%, #d4b25e 46%, #7d5d1e 100%); --carso-line: rgba(142, 36, 51, 0.45); --carso-line-soft: rgba(255, 255, 255, 0.10); --color-bg-alt: #0f131a; --color-text-inverse: #0b0e14; --input-bg: rgba(0, 0, 0, 0.35); --input-placeholder: #6b7480; --theme-option-active-bg: rgba(142, 36, 51, 0.25); color-scheme: dark; } /* ---------- ground + type ---------- */ html, body { background: var(--carso-ground); color: var(--carso-body); font-family: var(--carso-sans); line-height: 1.65; } body::before { display: none !important; } /* kill any theme's decorative background layer */ h1, h2, h3, h4, h5, h6, .site-title, .section-title, .dashboard-title { font-family: var(--carso-serif); font-weight: 700; color: var(--carso-ruby); letter-spacing: 0.04em; line-height: 1.15; } h1, .site-title { text-transform: uppercase; letter-spacing: 0.10em; } :root[data-theme="noir"] h1, :root[data-theme="noir"] h2, :root[data-theme="noir"] h3, :root[data-theme="noir"] .site-title { font-weight: 300; } a { color: var(--carso-ruby); text-decoration-color: var(--carso-line); text-underline-offset: 3px; } a:hover { color: var(--carso-garnet); } strong, b { color: var(--carso-ink); } code, pre, kbd, .mono { font-family: var(--carso-mono); } pre { background: var(--carso-surface); border: 1px solid var(--carso-line-soft); } hr { border: 0; height: 1px; background: var(--carso-foil-gradient); } ::selection { background: rgba(142, 31, 50, 0.18); } /* ---------- the lockup (seal + wordmark) ---------- */ .site-header { text-align: center; padding: 1.6rem 1rem 1rem; border-bottom: 1px solid var(--carso-line); position: relative; } .site-header::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 220px; height: 1px; transform: translateX(-50%); background: var(--carso-foil-gradient); } .carso-lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 0.55rem; text-decoration: none; } .carso-lockup:hover { color: inherit; } .carso-lockup .seal { width: 64px; height: 64px; display: block; } .carso-lockup .seal-noir { display: none; } :root[data-theme="noir"] .carso-lockup .seal-noir { display: block; } :root[data-theme="noir"] .carso-lockup .seal-parchment { display: none; } .carso-lockup .wordmark { font-family: var(--carso-serif); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing: 0.16em; padding-left: 0.16em; text-transform: uppercase; color: var(--carso-ruby); line-height: 1; } :root[data-theme="noir"] .carso-lockup .wordmark { font-weight: 300; } .carso-lockup .byline { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--carso-sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; color: var(--carso-muted); } .carso-lockup .byline::before, .carso-lockup .byline::after { content: ""; width: 28px; height: 1px; background: var(--carso-foil-gradient); } .site-title { margin: 0; } .site-tagline { margin: 0.9rem 0 0; font-family: var(--carso-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.30em; text-transform: uppercase; color: var(--carso-garnet); } /* ---------- navigation ---------- */ .site-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.4rem; padding: 0; margin: 1.1rem 0 0; } .site-nav a, .nav-link { font-family: var(--carso-sans); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--carso-body); text-decoration: none; padding: 0.3rem 0; border-bottom: 1px solid transparent; } .site-nav a:hover, .nav-link:hover, .site-nav a.active { color: var(--carso-ruby); border-bottom-color: var(--carso-foil); } .site-nav .fas, .site-nav .fa { display: none; } /* no icon soup in the nav */ /* ---------- plaques: buttons and cards ---------- */ button, .btn, .button, input[type="submit"], input[type="button"], a.button, .login-tab, .cta, .submit-btn, .login-btn { font-family: var(--carso-sans); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--carso-ruby); background: transparent; border: 1px solid var(--carso-ruby-deep); border-radius: 3px; padding: 0.75rem 1.4rem; cursor: pointer; transition: color .18s, border-color .18s, box-shadow .18s, background .18s; } button:hover, .btn:hover, .button:hover, input[type="submit"]:hover, a.button:hover, .cta:hover, .submit-btn:hover, .login-btn:hover { color: var(--carso-garnet); border-color: var(--carso-garnet); box-shadow: 0 0 0 3px rgba(199, 95, 107, 0.16); } :root[data-theme="noir"] button, :root[data-theme="noir"] .btn, :root[data-theme="noir"] .button, :root[data-theme="noir"] input[type="submit"], :root[data-theme="noir"] .login-tab { background: rgba(0, 0, 0, 0.25); color: #d4b25e; border-color: rgba(142, 36, 51, 0.6); } .login-tab.active, .btn.active { background: var(--carso-ruby); color: #fff; border-color: var(--carso-ruby); } :root[data-theme="noir"] .login-tab.active { background: rgba(142, 36, 51, 0.35); color: #f9edc4; } .card, .login-container, .signup-container, .dashboard-card, .class-card, .program-card, .content-card, .message-box, .info-box { background: var(--carso-surface); border: 1px solid var(--carso-line); border-radius: 4px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 30px rgba(20, 10, 5, 0.06); } :root[data-theme="noir"] .card, :root[data-theme="noir"] .login-container, :root[data-theme="noir"] .signup-container, :root[data-theme="noir"] .dashboard-card, :root[data-theme="noir"] .class-card, :root[data-theme="noir"] .event-card, :root[data-theme="noir"] .resource-card { box-shadow: none; background: rgba(0, 0, 0, 0.25); } /* ---------- forms ---------- */ input, select, textarea { font-family: var(--carso-sans); color: var(--input-text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 3px; padding: 0.7rem 0.85rem; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--carso-ruby); box-shadow: 0 0 0 3px rgba(142, 31, 50, 0.14); } label { font-family: var(--carso-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--carso-muted); } .error-message { background: rgba(142, 31, 50, 0.08); border: 1px solid var(--carso-line); color: var(--carso-ruby); border-radius: 3px; } .error-message.visible { display: block; } /* ---------- tables ---------- */ table { border-collapse: collapse; } th { font-family: var(--carso-sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--carso-muted); border-bottom: 1px solid var(--carso-line); } td { border-bottom: 1px solid var(--carso-line-soft); } /* ---------- footer ---------- */ footer, .site-footer { border-top: 1px solid var(--carso-line); color: var(--carso-muted); font-size: 0.85rem; } /* ---------- retire upstream chrome ---------- */ .theme-picker, #theme-selector, #theme-toggle, #theme-menu { display: none !important; } /* ---------- theme switch (noir / certificate) ---------- */ .carso-theme-switch { position: fixed; right: 14px; bottom: 14px; z-index: 50; font-family: var(--carso-sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--carso-muted); background: var(--carso-surface); border: 1px solid var(--carso-line); border-radius: 3px; padding: 0.45rem 0.7rem; cursor: pointer; } .carso-theme-switch:hover { color: var(--carso-ruby); border-color: var(--carso-ruby); box-shadow: none; } /* ---------- homepage hero line ---------- */ .carso-hero { text-align: center; max-width: 760px; margin: 2.2rem auto 0.5rem; padding: 0 1.2rem; } .carso-lead { font-family: var(--carso-serif); font-size: clamp(1.15rem, 2.3vw, 1.55rem); font-weight: 400; line-height: 1.4; color: var(--carso-ink); margin: 0; } .carso-lead strong { color: var(--carso-ruby); font-weight: 700; } .carso-lead-sub { margin: 0.9rem auto 0; max-width: 620px; font-family: var(--carso-sans); font-size: 0.95rem; line-height: 1.55; color: var(--carso-muted); } /* ---------- plaque enforcement (page-level styles load after this file; specificity wins) ---------- */ body .submit-btn, body .login-btn, body .btn-primary, body .cta-button, body button[type="submit"], body input[type="submit"] { background: transparent !important; color: var(--carso-ruby) !important; border: 1px solid var(--carso-ruby-deep) !important; border-radius: 3px !important; font-family: var(--carso-sans) !important; font-weight: 700 !important; font-size: 0.82rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; box-shadow: none !important; transform: none !important; } body .submit-btn:hover, body .login-btn:hover, body .btn-primary:hover, body button[type="submit"]:hover, body input[type="submit"]:hover { color: var(--carso-garnet) !important; border-color: var(--carso-garnet) !important; box-shadow: 0 0 0 3px rgba(199, 95, 107, 0.16) !important; opacity: 1 !important; } :root[data-theme="noir"] body .submit-btn, :root[data-theme="noir"] body button[type="submit"], :root[data-theme="noir"] body input[type="submit"] { background: rgba(0, 0, 0, 0.25) !important; color: #d4b25e !important; border-color: rgba(142, 36, 51, 0.6) !important; } body .login-tab { background: transparent !important; color: var(--carso-muted) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; } body .login-tab.active { background: transparent !important; color: var(--carso-ruby) !important; border-bottom: 2px solid var(--carso-foil) !important; } body .login-tab .fas, body .submit-btn .fas, body .site-nav .fas, body .nav-link .fas { display: none !important; } body .cookie-consent-banner, body #cookie-consent-banner { display: none !important; } /* ---------- no images (TK, 2026-09-09): class cards are plaques, text only ---------- */ .class-image, .event-image, .resource-image, .card-image, .program-image, .hero-image, img[src*="storage.googleapis.com/multiverse-page-images"], img[src*="multiverse-page-images"] { display: none !important; } .class-card, .event-card, .resource-card, article.class-card { background: var(--carso-surface) !important; background-image: none !important; border: 1px solid var(--carso-line) !important; border-radius: 4px !important; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 30px rgba(20, 10, 5, 0.06); transition: border-color .18s, box-shadow .18s; } .class-card:hover, .event-card:hover, .resource-card:hover { border-color: var(--carso-garnet) !important; box-shadow: 0 0 0 3px rgba(199, 95, 107, 0.14); transform: none !important; } :root[data-theme="noir"] .class-card, :root[data-theme="noir"] .event-card, :root[data-theme="noir"] .resource-card { background: rgba(0, 0, 0, 0.25) !important; box-shadow: none; } .class-card .class-link, .event-card .event-link, .resource-card .resource-link { display: block; padding: 0; color: inherit; text-decoration: none; } .class-card .class-content, .event-card .event-content, .resource-card .resource-content { padding: 1.4rem 1.4rem 1.5rem !important; position: static !important; background: none !important; } .class-card .class-title, .class-card h3, .class-card h2, .event-card h3, .event-card .event-title, .resource-card h3, .resource-card .resource-title { color: var(--carso-ruby) !important; font-family: var(--carso-serif); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; text-shadow: none; margin: 0.35rem 0 0; } :root[data-theme="noir"] .class-card .class-title, :root[data-theme="noir"] .class-card h3, :root[data-theme="noir"] .event-card h3, :root[data-theme="noir"] .resource-card h3 { color: #d4b25e !important; font-weight: 300; } .class-card .class-audience, .event-card .class-audience, .resource-card .class-audience { color: var(--carso-garnet) !important; font-family: var(--carso-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; text-shadow: none; margin: 0 0 0.3rem; } .class-card .event-meta, .event-card .event-meta, .resource-card .event-meta { color: var(--carso-muted) !important; font-family: var(--carso-mono); font-size: 0.78rem; text-shadow: none; margin: 0; } .class-card .class-title::after, .event-card h3::after, .resource-card h3::after { content: ""; display: block; width: 44px; height: 1px; margin-top: 0.8rem; background: var(--carso-foil-gradient); }