/* ---------------------------------------------------------------------- */ /* cuinotes — custom theme (dark + light), replacing Material's defaults */ /* ---------------------------------------------------------------------- */ /* IMPORTANT: these two blocks target [data-md-color-scheme="default"|"slate"] ONLY -- never combined with :root in the same selector list. :root always matches regardless of which scheme is active, so pairing it with [data-md-color-scheme="default"] made the "light" declarations apply to unconditionally; combined with !important (needed below) that tied in specificity against the "slate" block on the very element the scheme attribute lives on, and the light values won every time regardless of source order -- children inherited the wrong (light) values even while itself measured correctly, because the tie was resolved per property occurrence, not per element. Keeping each scheme in its own attribute-only selector removes the tie entirely. */ [data-md-color-scheme="default"] { /* !important is required here: mkdocs-material injects a SEPARATE, later-loaded palette..min.css chunk (generated for the primary/accent choice in mkdocs.yml) that redeclares some of these same custom properties -- without !important, that stylesheet's declarations can win over this file's for properties it also sets. */ --md-primary-fg-color: #FFFFFF !important; --md-primary-fg-color--light: #F0F2F5 !important; --md-primary-fg-color--dark: #E2E5EB !important; --md-primary-bg-color: #14181F !important; --md-primary-bg-color--light: #14181F !important; --md-accent-fg-color: #0C8C76 !important; --md-accent-fg-color--transparent: rgba(12, 140, 118, 0.10) !important; --md-accent-bg-color: #FFFFFF !important; --md-default-fg-color: #14181F !important; --md-default-fg-color--light: #4B5565 !important; --md-default-fg-color--lighter: #7A8496 !important; --md-default-fg-color--lightest: #E2E5EB !important; --md-default-bg-color: #FFFFFF !important; --md-typeset-color: #14181F !important; --md-code-bg-color: #F5F6F8 !important; --md-code-fg-color: #1C212B !important; --md-footer-bg-color: #0B0E14 !important; --md-footer-bg-color--dark: #06080C !important; --md-footer-fg-color: #ECEFF4 !important; --md-footer-fg-color--light: rgba(236, 239, 244, 0.7) !important; --md-footer-fg-color--lighter: rgba(236, 239, 244, 0.45) !important; /* cuinotes design tokens */ --cu-bg: #FFFFFF; --cu-surface: #F7F8FA; --cu-surface-alt: #F0F2F5; --cu-border: #E2E5EB; --cu-border-soft: #D8DCE3; --cu-text: #14181F; --cu-muted: #4B5565; --cu-faint: #7A8496; --cu-teal: #0C8C76; --cu-teal-fill: #12B394; --cu-purple: #6C4FF5; --cu-orange: #B9720E; --cu-on-accent: #06110D; --cu-header-bg: rgba(255, 255, 255, 0.86); } [data-md-color-scheme="slate"] { --md-primary-fg-color: #090C12 !important; --md-primary-fg-color--light: #232B3D !important; --md-primary-fg-color--dark: #06080C !important; --md-primary-bg-color: #ECEFF4 !important; --md-primary-bg-color--light: #ECEFF4 !important; --md-accent-fg-color: #35E7C4 !important; --md-accent-fg-color--transparent: rgba(53, 231, 196, 0.14) !important; --md-accent-bg-color: #06110D !important; --md-default-fg-color: #ECEFF4 !important; --md-default-fg-color--light: #94A1B8 !important; --md-default-fg-color--lighter: #5B6577 !important; --md-default-fg-color--lightest: #1F2733 !important; --md-default-bg-color: #090C12 !important; --md-typeset-color: #C9D1E0 !important; --md-code-bg-color: #0C1017 !important; --md-code-fg-color: #C9D1E0 !important; --md-footer-bg-color: #060810 !important; --md-footer-bg-color--dark: #030408 !important; --md-footer-fg-color: #ECEFF4 !important; --md-footer-fg-color--light: rgba(236, 239, 244, 0.7) !important; --md-footer-fg-color--lighter: rgba(236, 239, 244, 0.45) !important; --cu-bg: #090C12; --cu-surface: #10151F; --cu-surface-alt: #0C1017; --cu-border: #1F2733; --cu-border-soft: #232B3D; --cu-text: #ECEFF4; --cu-muted: #94A1B8; --cu-faint: #5B6577; --cu-teal: #35E7C4; --cu-teal-fill: #35E7C4; --cu-purple: #9C8CFF; --cu-orange: #F5B067; --cu-on-accent: #06110D; --cu-header-bg: rgba(9, 12, 18, 0.86); } :root { --wdb-radius: 0.65rem; --cu-font-display: "Space Grotesk", "Sora", sans-serif; } /* ---- Global type ---------------------------------------------------- */ .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-header__title, .md-nav__title, .cu-font-display { font-family: var(--cu-font-display); letter-spacing: -0.01em; } .md-typeset h1 { font-weight: 700; } .md-typeset h2 { font-weight: 600; } .md-typeset h3, .md-typeset h4 { font-weight: 600; } .md-typeset { line-height: 1.7; } .md-typeset code { background-color: var(--cu-surface-alt); color: var(--cu-text); border-radius: 4px; } /* ---- Header ----------------------------------------------------------- */ .md-header, .md-header--shadow, .md-header[data-md-state="shadow"] { background-color: var(--cu-header-bg) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--cu-text) !important; border-bottom: 1px solid var(--cu-border); box-shadow: none !important; } .md-header__title, .md-header__button, .md-header__topic { color: var(--cu-text); } .md-header__option .md-icon, .md-search__icon, .md-header__button.md-icon svg { color: var(--cu-faint); } .md-search__form { background-color: var(--cu-surface); border: 1px solid var(--cu-border-soft); border-radius: 8px; } .md-search__form:hover { background-color: var(--cu-surface-alt); } .md-search__input { color: var(--cu-text); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; } .md-search__input::placeholder { color: var(--cu-faint); opacity: 1; } /* ---- Tabs (top-level nav bar) ------------------------------------------ */ .md-tabs { background-color: var(--cu-header-bg) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--cu-border); color: var(--cu-muted); } .md-tabs__link { color: var(--cu-muted); font-weight: 500; opacity: 1; } .md-tabs__link--active, .md-tabs__link:hover { color: var(--cu-text); } .md-tabs__submenu { background: var(--cu-surface); border: 1px solid var(--cu-border); } .md-tabs__submenu li a { color: var(--cu-muted); opacity: 1; } .md-tabs__submenu li a:hover { background: var(--cu-surface-alt); color: var(--cu-teal); } /* ---- Primary (left) navigation sidebar --------------------------------- */ .md-nav { font-size: 0.72rem; } .md-nav__title { color: var(--cu-faint); font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; background-color: transparent; box-shadow: none; } .md-nav--primary .md-nav__title[for="__drawer"] { background-color: var(--cu-bg); color: var(--cu-text); box-shadow: 0 0 0 1px var(--cu-border); } .md-sidebar--primary .md-nav__item > .md-nav__link, .md-sidebar--secondary .md-nav__item > .md-nav__link { color: var(--cu-muted); border-left: 2px solid transparent; border-radius: 0 6px 6px 0; transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease; } .md-sidebar--primary .md-nav__link:hover { color: var(--cu-text); background-color: var(--cu-surface); } .md-sidebar--primary .md-nav__link--active, .md-sidebar--primary .md-nav__item .md-nav__link--active { color: var(--cu-text); font-weight: 600; background-color: var(--md-accent-fg-color--transparent); border-left-color: var(--cu-teal); } .md-sidebar--secondary .md-nav__link--active { color: var(--cu-teal); font-weight: 600; } .md-nav__icon { color: var(--cu-faint); } .md-sidebar__scrollwrap { scrollbar-color: var(--cu-border-soft) transparent; } /* ---- Breadcrumb (navigation.path) -------------------------------------- */ .md-path { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; color: var(--cu-faint); } .md-path__link { color: var(--cu-faint); } .md-path__link:hover, .md-path__item:last-child .md-path__link { color: var(--cu-text); } /* ---- Admonitions -------------------------------------------------------- Recolor onto the three accent hues used across cuinotes: teal (tip), purple (note/abstract), orange (warning), plus a muted red for danger. */ .md-typeset .admonition, .md-typeset details { border-radius: var(--wdb-radius); border-width: 1px; background-color: var(--cu-surface); } .md-typeset .admonition-title, .md-typeset summary { font-family: var(--cu-font-display); font-weight: 600; } .md-typeset .note > .admonition-title, .md-typeset .abstract > .admonition-title { background-color: rgba(108, 79, 245, 0.10); } [data-md-color-scheme="slate"] .md-typeset .note > .admonition-title, [data-md-color-scheme="slate"] .md-typeset .abstract > .admonition-title { background-color: rgba(156, 140, 255, 0.10); } .md-typeset .note, .md-typeset .abstract { border-color: var(--cu-purple); } .md-typeset .note > .admonition-title::before, .md-typeset .abstract > .admonition-title::before { background-color: var(--cu-purple); } .md-typeset .tip > .admonition-title, .md-typeset .example > .admonition-title { background-color: var(--md-accent-fg-color--transparent); } .md-typeset .tip, .md-typeset .example { border-color: var(--cu-teal); } .md-typeset .tip > .admonition-title::before, .md-typeset .example > .admonition-title::before { background-color: var(--cu-teal); } .md-typeset .warning > .admonition-title { background-color: rgba(185, 114, 14, 0.10); } [data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title { background-color: rgba(245, 176, 103, 0.12); } .md-typeset .warning { border-color: var(--cu-orange); } .md-typeset .warning > .admonition-title::before { background-color: var(--cu-orange); } /* ---- Code blocks ---------------------------------------------------- */ .md-typeset .highlight, .md-typeset pre { border-radius: var(--wdb-radius); } .md-typeset .highlighttable .filename, .md-typeset span.filename { font-family: "JetBrains Mono", monospace; color: var(--cu-faint); background-color: var(--cu-surface); border-bottom: 1px solid var(--cu-border); } .md-clipboard { color: var(--cu-faint); } .md-clipboard:hover { color: var(--cu-teal); } /* ---- Tables ---------------------------------------------------------- */ .md-typeset table:not([class]) { border: 1px solid var(--cu-border); border-radius: var(--wdb-radius); overflow: hidden; } .md-typeset table:not([class]) th { background-color: var(--cu-surface-alt); color: var(--cu-text); font-family: var(--cu-font-display); font-weight: 600; border-bottom: 2px solid var(--cu-teal); } .md-typeset table:not([class]) tr:nth-child(even) { background-color: var(--cu-surface); } /* ---- Buttons (real .md-button usage, if any) --------------------------- */ .md-typeset .md-button { font-family: var(--cu-font-display); font-weight: 600; border-radius: 8px; border-color: var(--cu-border-soft); color: var(--cu-text); } .md-typeset .md-button--primary { background-color: var(--cu-teal-fill); border-color: var(--cu-teal-fill); color: var(--cu-on-accent); } /* ---- Footer (prev/next + copyright bar) -------------------------------- */ .md-footer-meta { background-color: var(--md-footer-bg-color--dark); } .md-footer__link { border: 1px solid rgba(236, 239, 244, 0.12); border-radius: 10px; padding: 0.6rem 0.9rem; margin: 0.6rem; transition: border-color 0.12s ease, background-color 0.12s ease; } .md-footer__link:hover { background-color: rgba(236, 239, 244, 0.06); border-color: var(--cu-teal); } .md-footer__direction { font-family: "JetBrains Mono", monospace; text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.06em; } .md-footer__title { font-family: var(--cu-font-display); font-weight: 600; } /* ---- Top nav tab dropdown menus ----------------------------------------- */ /* Pairs with overrides/partials/tabs-item.html, which adds .md-tabs__submenu markup for any top-level tab with more than one child. Desktop only -- .md-tabs itself is hidden below the tablet breakpoint, where the drawer sidebar already lists everything, so no touch/click handling is needed. */ .md-tabs__item--dropdown { position: relative; } /* Material sets .md-tabs { overflow: auto } so the tab bar can scroll horizontally when tabs overflow it -- that same rule clips our vertical dropdown regardless of the submenu's own positioning. Setting only overflow-y: visible while leaving overflow-x: auto does NOT work here: per the CSS Overflow spec, when overflow-x and overflow-y differ and neither is "clip", a "visible" value on one axis is force- computed to "auto" -- which still clips. So this drops horizontal scrolling on the tab bar entirely (6 top-level tabs fit comfortably at any width wide enough to show .md-tabs at all -- it's hidden below the tablet breakpoint regardless) in favor of the dropdown actually working. */ .md-tabs, .md-tabs__list { overflow: visible; } /* .md-tabs__list also sets `contain: content`, which forces paint clipping at its own bounds independent of `overflow` -- must be lifted too, or the dropdown stays invisible no matter what overflow says. */ .md-tabs__list { contain: none; } .md-tabs__submenu { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 15rem; max-height: 75vh; overflow-y: auto; margin: 0; padding: 0.4rem 0; list-style: none; border-radius: 0 0 var(--wdb-radius) var(--wdb-radius); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } .md-tabs__item--dropdown:hover .md-tabs__submenu, .md-tabs__item--dropdown:focus-within .md-tabs__submenu { opacity: 1; visibility: visible; transform: translateY(0); } .md-tabs__submenu li a { display: block; padding: 0.5rem 1.1rem; font-size: 0.7rem; line-height: 1.3; text-decoration: none; white-space: nowrap; } /* ---- Mermaid diagrams: keep them comfortably sized and centered -------- */ .md-typeset .mermaid { display: flex; justify-content: center; margin: 1.2rem 0; } /* ---- Content images: frame screenshots so they stand out from body text */ .md-typeset img { display: block; box-sizing: border-box; max-width: 100%; margin: 1.5rem auto; padding: 8px; border: 1px solid var(--cu-border); border-radius: var(--wdb-radius); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); background: var(--cu-bg); } /* Logos/icons that happen to sit inside typeset content (rare) shouldn't get the screenshot treatment -- opt out with this class if ever needed. */ .md-typeset img.wdb-bare { display: inline; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; background: none; } /* ---- Live CSS demos: a screenshot-style frame for genuinely running, embedded HTML/CSS examples (animations, transitions, hover effects) that a static image can't show. Same framing as .md-typeset img above, so a live demo sits in the page exactly like a screenshot would. */ .wdb-live-demo { display: block; box-sizing: border-box; max-width: 100%; margin: 1.5rem auto; padding: 28px; border: 1px solid var(--cu-border); border-radius: var(--wdb-radius); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); background: var(--cu-bg); text-align: center; } .wdb-live-demo .wdb-live-caption { margin: 16px 0 0; font-size: 0.75rem; font-style: italic; color: var(--cu-faint); } /* ---- Lecture chapter nav badge ------------------------------------------ */ .wdb-lecture-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1.5rem; } .wdb-lecture-meta span { font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--cu-surface); border: 1px solid var(--cu-border); } /* ======================================================================= */ /* Homepage — hero, stats, course cards, features, authors, activity, CTA */ /* ======================================================================= */ /* The homepage hides navigation + toc (see docs/index.md front matter) so it can break out of Material's centered, max-width reading column and run full-bleed edge to edge, like a real landing page. Each inner band (.cu-hero, .cu-stats, .cu-section, .cu-cta) re-centers its own content at a comfortable reading width -- only the OUTER page shell goes full width here. :has() support is required for this rule; without it the homepage still reads fine, just at Material's normal content width. */ .md-grid:has(.cu-page) { max-width: 100%; } .md-content:has(.cu-page) { max-width: none; } .md-content__inner:has(.cu-page) { margin: 0; padding: 0; } .md-content__inner:has(.cu-page)::before { display: none; } .cu-page { margin: -1.2rem 0 -3rem; } .cu-section { max-width: 62rem; margin: 0 auto; padding: 3.6rem 1.4rem 0; } .cu-section-label { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 600; color: var(--cu-purple); letter-spacing: 0.06em; text-transform: uppercase; } .cu-section-title { font-family: var(--cu-font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.01em; margin: 0.5rem 0 0; color: var(--cu-text); } .cu-section-sub { margin: 0.7rem 0 0; font-size: 0.95rem; color: var(--cu-muted); max-width: 36rem; line-height: 1.65; } /* ---- Hero ---- */ .cu-hero { background-image: radial-gradient(circle, var(--cu-border) 1px, transparent 1px); background-size: 26px 26px; border-bottom: 1px solid var(--cu-border); } .cu-hero-inner { max-width: 62rem; margin: 0 auto; padding: 3.6rem 1.4rem; display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; } .cu-hero-copy { flex: 1 1 22rem; min-width: 0; } .cu-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: var(--cu-purple); background: rgba(108, 79, 245, 0.08); border: 1px solid rgba(108, 79, 245, 0.25); border-radius: 20px; padding: 0.35rem 0.85rem; margin-bottom: 1.5rem; } [data-md-color-scheme="slate"] .cu-hero-badge { background: rgba(156, 140, 255, 0.10); border-color: rgba(156, 140, 255, 0.25); } .cu-hero-badge .cu-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cu-teal); flex: none; } .cu-hero h1 { margin: 0; font-family: var(--cu-font-display); font-weight: 700; font-size: 2.6rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--cu-text); } .cu-hero h1 .cu-accent { color: var(--cu-teal); } .cu-hero-lede { margin: 1.3rem 0 0; font-size: 1.05rem; line-height: 1.65; color: var(--cu-muted); max-width: 32rem; } .cu-hero-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.9rem; flex-wrap: wrap; } /* .md-typeset a.cu-btn (not just .cu-btn): Material's own ".md-typeset a" rule colors every link with the accent color, at (0,1,1) specificity -- a single class here loses that tie-break and a teal-on-teal button text goes invisible. The compound selector below matches its specificity. */ .md-typeset a.cu-btn, .cu-btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--cu-font-display); font-weight: 600; font-size: 0.88rem; padding: 0.75rem 1.4rem; border-radius: 8px; border: 1px solid var(--cu-border-soft); color: var(--cu-text); text-decoration: none; } .cu-btn:hover { border-color: var(--cu-teal); } .md-typeset a.cu-btn-primary, .cu-btn-primary { background: var(--cu-teal-fill); border-color: var(--cu-teal-fill); color: var(--cu-on-accent); } .cu-btn-primary:hover { filter: brightness(1.06); border-color: var(--cu-teal-fill); } .cu-terminal { flex: 1 1 22rem; max-width: 26rem; width: 100%; border-radius: 12px; overflow: hidden; background: var(--cu-surface-alt); border: 1px solid var(--cu-border); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.16); } [data-md-color-scheme="slate"] .cu-terminal { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); } .cu-terminal-bar { height: 38px; background: var(--cu-surface); display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--cu-border); } .cu-terminal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cu-border-soft); } .cu-terminal-title { flex: 1; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: var(--cu-faint); } .cu-terminal-body { padding: 1.2rem 1.3rem 1.4rem; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; line-height: 2; color: var(--cu-muted); overflow-x: auto; } .cu-terminal-body .cu-prompt { color: var(--cu-teal); } .cu-terminal-body .cu-cmd { color: var(--cu-text); } .cu-terminal-body .cu-dim { color: var(--cu-faint); } .cu-cursor { display: inline-block; width: 7px; height: 13px; background: var(--cu-teal); margin-left: 2px; vertical-align: -2px; } /* ---- Stats ---- */ .cu-stats { border-bottom: 1px solid var(--cu-border); } .cu-stats-inner { max-width: 62rem; margin: 0 auto; padding: 1.8rem 1.4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; } .cu-stat { padding-right: 1rem; border-right: 1px solid var(--cu-border); } .cu-stat:last-child { border-right: none; } .cu-stat-num { font-family: var(--cu-font-display); font-weight: 700; font-size: 1.7rem; color: var(--cu-text); } .cu-stat-num.cu-accent { color: var(--cu-teal); } .cu-stat-label { font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--cu-faint); text-transform: uppercase; margin-top: 0.25rem; } /* ---- Course cards ---- */ .cu-cards-3, .cu-features-3, .cu-authors-2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; margin-top: 2.4rem; } .cu-authors-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* .cu-card is a
, not an -- python-markdown's md_in_html treats as an inline element, and using it as a block-level flow container (wrapping a heading + paragraph) makes it emit the tag TWICE: once as an empty auto-wrapped

, once as the real block. Cards use the same div-plus-stretched-link overlay pattern as the old .wdb-card. */ .cu-card { position: relative; background: var(--cu-surface); border: 1px solid var(--cu-border); border-radius: 14px; padding: 1.5rem; display: block; color: var(--cu-text); transition: border-color 0.12s ease, transform 0.12s ease; } .cu-card-link { position: absolute; inset: 0; border-radius: inherit; } /* md_in_html auto-wraps the empty overlay anchor in its own

(it's the first line inside the card div) -- collapse that wrapper's margin so it doesn't add a blank gap above the card's real content. */ .cu-card > p:first-child:has(> .cu-card-link:only-child) { margin: 0; } .cu-card:hover { border-color: var(--cu-teal); transform: translateY(-2px); } .cu-card-top { display: flex; align-items: flex-start; justify-content: space-between; } .cu-chip { font-family: "JetBrains Mono", monospace; font-size: 0.66rem; font-weight: 600; border-radius: 6px; padding: 0.2rem 0.55rem; } .cu-chip-teal { color: var(--cu-teal); background: var(--md-accent-fg-color--transparent); } .cu-chip-purple { color: var(--cu-purple); background: rgba(108, 79, 245, 0.10); } .cu-chip-orange { color: var(--cu-orange); background: rgba(185, 114, 14, 0.10); } [data-md-color-scheme="slate"] .cu-chip-purple { background: rgba(156, 140, 255, 0.12); } [data-md-color-scheme="slate"] .cu-chip-orange { background: rgba(245, 176, 103, 0.12); } .cu-icon-badge { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; } .cu-card h3 { margin: 1rem 0 0; font-family: var(--cu-font-display); font-weight: 600; font-size: 1.15rem; } .cu-card p { margin: 0.5rem 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--cu-muted); } .cu-card-foot { margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--cu-border); display: flex; align-items: center; justify-content: space-between; } .cu-card-foot span { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; color: var(--cu-faint); } .cu-card-foot .cu-go { font-family: var(--cu-font-display); font-weight: 600; font-size: 0.78rem; color: var(--cu-teal); } /* ---- Features ---- */ .cu-feature-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .cu-feature h3 { margin: 1rem 0 0; font-family: var(--cu-font-display); font-weight: 600; font-size: 1.02rem; } .cu-feature p { margin: 0.5rem 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--cu-muted); } /* ---- Authors ---- */ .cu-author-card { display: flex; align-items: center; gap: 1.1rem; cursor: default; } .cu-author-card:hover { border-color: var(--cu-border); transform: none; } .cu-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--cu-font-display); font-weight: 700; font-size: 1.05rem; } .cu-avatar-teal { background: var(--md-accent-fg-color--transparent); border: 1px solid var(--cu-teal); color: var(--cu-teal); } .cu-avatar-purple { background: rgba(108, 79, 245, 0.10); border: 1px solid var(--cu-purple); color: var(--cu-purple); } [data-md-color-scheme="slate"] .cu-avatar-purple { background: rgba(156, 140, 255, 0.12); } .cu-author-name { font-family: var(--cu-font-display); font-weight: 600; font-size: 1.02rem; } .cu-author-role { margin-top: 0.25rem; font-size: 0.8rem; color: var(--cu-muted); line-height: 1.5; } /* ---- Activity ---- */ .cu-activity { margin-top: 1.8rem; border: 1px solid var(--cu-border); border-radius: 12px; overflow: hidden; } .cu-activity-row { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; background: var(--cu-surface); border-bottom: 1px solid var(--cu-border); } .cu-activity-row:last-child { border-bottom: none; } .cu-activity-hash { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: var(--cu-teal); flex: none; width: 4.6rem; } .cu-activity-msg { font-size: 0.84rem; color: var(--cu-text); } /* ---- CTA ---- */ .cu-cta { margin-top: 3.6rem; border-top: 1px solid var(--cu-border); border-bottom: 1px solid var(--cu-border); background: var(--cu-surface); text-align: center; padding: 3.2rem 1.4rem; } .cu-cta h2 { margin: 0; font-family: var(--cu-font-display); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.01em; color: var(--cu-text); } .cu-cta p { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--cu-muted); } .cu-cta .cu-hero-actions { justify-content: center; margin-top: 1.5rem; } /* ---- Responsive: stack everything below tablet width ------------------- */ @media screen and (max-width: 59.9375em) { .cu-hero-inner { padding: 2.6rem 1.2rem; gap: 2rem; } .cu-hero h1 { font-size: 2rem; } .cu-stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cu-stat:nth-child(2) { border-right: none; } .cu-cards-3, .cu-features-3 { grid-template-columns: 1fr; } .cu-authors-2 { grid-template-columns: 1fr; } .cu-section { padding: 2.6rem 1.2rem 0; } } @media screen and (max-width: 30em) { .cu-stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .cu-hero-badge { font-size: 0.66rem; } .cu-hero h1 { font-size: 1.7rem; } .cu-btn { width: 100%; justify-content: center; } .cu-hero-actions { flex-direction: column; align-items: stretch; } .cu-cta .cu-hero-actions { flex-direction: row; } }