/* YAMS Archival & Memory Storage Theme */ :root { --retro-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } /* Light Mode: "Archival Card Catalog & Blueprint" */ [data-md-color-scheme="default"] { --md-primary-fg-color: #3b5b75 !important; /* blueprint/archival blue */ --md-primary-fg-color--text: #ffffff !important; --md-primary-bg-color: #fbf9f4 !important; /* warm archival paper */ --md-accent-fg-color: #3b5b75 !important; --md-default-bg-color: #fbf9f4 !important; --md-default-fg-color: #2b2e30 !important; /* ink charcoal */ --md-code-bg-color: #f3eee3 !important; --md-code-fg-color: #1a1a1a !important; --md-typeset-color: #2b2e30 !important; --md-typeset-a-color: #2b577a !important; --retro-border-color: #4a5c68; --retro-accent-color: #2b577a; --retro-header-bg: #ece7db; --retro-sidebar-bg: #fbf9f4; --retro-table-header-bg: #ece7db; --retro-hover-bg: rgba(43, 87, 122, 0.08); --retro-card-bg: #f4efe4; } /* Dark Mode: "Silicon Substrate & Core Memory" */ [data-md-color-scheme="slate"] { --md-primary-fg-color: #121620 !important; /* deep silicon dark blue */ --md-primary-fg-color--text: #dfb147 !important; /* silicon gold */ --md-primary-bg-color: #0e1117 !important; --md-accent-fg-color: #dfb147 !important; --md-default-bg-color: #0e1117 !important; --md-default-fg-color: #d2d8e0 !important; /* clean silver text */ --md-code-bg-color: #131822 !important; --md-code-fg-color: #e2b755 !important; --md-typeset-color: #d2d8e0 !important; --md-typeset-a-color: #dfb147 !important; --retro-border-color: #dfb147; /* silicon copper/gold */ --retro-accent-color: #dfb147; --retro-header-bg: #121620; --retro-sidebar-bg: #0e1117; --retro-table-header-bg: #121620; --retro-hover-bg: rgba(223, 177, 71, 0.12); --retro-card-bg: #131822; } /* Clean, readable grid layout */ body, html { font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* Custom fonts for headings and monospace highlights */ .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 { font-family: var(--retro-font-mono) !important; font-weight: 700 !important; color: var(--md-default-fg-color); letter-spacing: -0.01em; } /* Headers: clean, structured, resembling ledger card or memory block */ .md-header { border-bottom: 2px solid var(--retro-border-color) !important; background-color: var(--retro-header-bg) !important; box-shadow: none !important; } .md-header__title, .md-header__button, .md-header__source { color: var(--md-default-fg-color) !important; } /* Navigation tabs look like storage index tabs */ .md-tabs { background-color: var(--retro-header-bg) !important; border-bottom: 1px solid var(--retro-border-color) !important; box-shadow: none !important; } .md-tabs__link { font-family: var(--retro-font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--md-default-fg-color) !important; border-right: 1px solid rgba(120, 130, 140, 0.2); padding: 0 1.2rem !important; } .md-tabs__link--active, .md-tabs__link:hover { color: var(--retro-accent-color) !important; background-color: var(--retro-hover-bg); } /* Side navigation - directory structure styling */ .md-nav { font-family: var(--retro-font-mono); } .md-nav__link--active { color: var(--retro-accent-color) !important; font-weight: 700; border-left: 2px solid var(--retro-accent-color); padding-left: 6px !important; } .md-nav__link:hover { color: var(--retro-accent-color) !important; } /* Content panel */ .md-content { border-left: 1px solid var(--retro-border-color); padding-left: 1.5rem !important; } @media screen and (max-width: 76.25em) { .md-content { border-left: none; padding-left: 0.5rem !important; } } /* Memory block / Card index container styling for code blocks */ .md-typeset pre > code { background-color: var(--md-code-bg-color) !important; border: 1px solid var(--retro-border-color) !important; border-radius: 4px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05) !important; padding: 1em !important; } [data-md-color-scheme="slate"] .md-typeset pre > code { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25) !important; } /* Admonition data cards */ .md-typeset .admonition, .md-typeset details { border: 1px solid var(--retro-border-color) !important; border-left: 4px solid var(--retro-accent-color) !important; border-radius: 4px; background-color: var(--retro-card-bg) !important; box-shadow: 2px 2px 0 rgba(0,0,0,0.03) !important; } [data-md-color-scheme="slate"] .md-typeset .admonition { box-shadow: 2px 2px 0 rgba(0,0,0,0.15) !important; } .md-typeset .admonition-title, .md-typeset summary { font-family: var(--retro-font-mono) !important; background-color: var(--retro-header-bg) !important; color: var(--md-default-fg-color) !important; border-bottom: 1px solid var(--retro-border-color) !important; font-weight: bold; } /* Blocky registers / storage cell tables */ .md-typeset table { border: 1px solid var(--retro-border-color) !important; border-collapse: collapse; margin: 1.5em 0; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.04) !important; border-radius: 4px; overflow: hidden; } [data-md-color-scheme="slate"] .md-typeset table { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important; } .md-typeset th { background-color: var(--retro-table-header-bg) !important; border-bottom: 2px solid var(--retro-border-color) !important; font-family: var(--retro-font-mono); font-weight: 700; color: var(--md-default-fg-color) !important; } .md-typeset td { border-bottom: 1px solid rgba(120, 130, 140, 0.15) !important; font-family: var(--retro-font-mono); font-size: 0.85rem; } /* Retro buttons (blocky toggle style) */ .md-button, .md-typeset .md-button--primary { font-family: var(--retro-font-mono); background-color: var(--retro-header-bg) !important; color: var(--md-default-fg-color) !important; border: 2px solid var(--retro-border-color) !important; border-radius: 4px !important; box-shadow: 3px 3px 0 var(--retro-border-color) !important; transition: transform 0.08s, box-shadow 0.08s; font-weight: 700; } .md-button:hover, .md-typeset .md-button--primary:hover { background-color: var(--retro-hover-bg) !important; box-shadow: 1px 1px 0 var(--retro-border-color) !important; transform: translate(2px, 2px); } .md-button:active { box-shadow: none !important; transform: translate(3px, 3px); } /* Search block */ .md-search__form { background-color: var(--md-code-bg-color) !important; border: 1px solid var(--retro-border-color) !important; border-radius: 4px !important; } .md-search__input { font-family: var(--retro-font-mono) !important; color: var(--md-default-fg-color) !important; } .md-search__icon { color: var(--md-default-fg-color) !important; } /* Footer structure */ .md-footer { border-top: 2px solid var(--retro-border-color) !important; background-color: var(--retro-header-bg) !important; } .md-footer-meta { background-color: var(--retro-header-bg) !important; } /* Announcement tape readout */ .md-banner { background-color: var(--retro-header-bg) !important; color: var(--md-default-fg-color) !important; border-bottom: 2px solid var(--retro-border-color) !important; font-family: var(--retro-font-mono); font-size: 0.8rem; } .md-banner a { color: var(--retro-accent-color) !important; text-decoration: underline; } /* Ensure Mermaid diagrams fit retro color scheme */ .mermaid { background-color: var(--md-code-bg-color) !important; border: 1px solid var(--retro-border-color) !important; border-radius: 4px; padding: 1rem; margin: 1.5em 0; display: flex; justify-content: center; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05) !important; } [data-md-color-scheme="slate"] .mermaid { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25) !important; }