/* ============================================================ THEME: retro-mac (v2 — experimental, additive, toggleable) ------------------------------------------------------------ Classic System-7 / Platinum window chrome — pinstriped title bars, close boxes, square corners, hard drop shadows, beveled push-buttons, inverted selection — but rendered in the house navy/parchment palette so it marries the engraving plates instead of fighting them. Activated by `` (currently tutorials.html and skills-vault.html). To roll back on a page: drop the body class + the to this file. Nothing here leaks to other pages/themes. Top nav is explicitly excluded from this theme — see note below. ============================================================ */ .theme-retro-mac { /* Geneva is a real font on macOS (the lab runs on a Mac), so the chrome renders authentically there; graceful fallbacks elsewhere. */ --retro-ui: "Geneva", "Chicago", Verdana, "Helvetica Neue", sans-serif; --retro-shadow: 3px 3px 0 rgba(27,47,74,.78); --retro-line: var(--ink); } /* Classic 50%-gray desktop, recolored: faint dither behind the feed band. */ .theme-retro-mac section.band { background-image: repeating-conic-gradient(var(--frame-faint) 0% 25%, transparent 0% 50%); background-size: 4px 4px; } /* Top nav intentionally left OUT of this theme (Human's call, 2026-07-01) — the site-wide nav bar always uses the plain site.css style from the homepage, even on retro-mac pages. Only the content below the nav (cards, filters, timeline, skill-category windows) gets the theme. */ /* Facet labels (Path / Level) pick up the chrome font. */ .theme-retro-mac .filter-label { font-family: var(--retro-ui); letter-spacing: .1em; color: var(--ink); } /* ---- filter row → beveled push-buttons --------------------------- */ .theme-retro-mac .filter-tag { font-family: var(--retro-ui); text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 9px; /* the rounded System-7 button */ padding: 5px 16px; box-shadow: inset 1.5px 1.5px 0 #ffffff, inset -1.5px -1.5px 0 var(--frame-soft), 1px 1px 0 rgba(27,47,74,.35); } /* "All" is the default action → the classic heavy default-button ring. */ .theme-retro-mac .filter-tag[data-filter="all"] { outline: 2px solid var(--ink); outline-offset: 2px; } .theme-retro-mac .filter-tag:hover { background: var(--bg); } /* Pressed/selected → inverted bevel + filled, like a depressed Mac button. */ .theme-retro-mac .filter-tag.is-active { color: var(--paper); background: var(--ink); box-shadow: inset 1.5px 1.5px 0 rgba(0,0,0,.35), inset -1.5px -1.5px 0 var(--frame); } /* ---- tutorial cards → classic Mac windows ------------------------ */ .theme-retro-mac .tutorial-card { border: 2px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: var(--retro-shadow); overflow: hidden; } .theme-retro-mac .tutorial-card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(27,47,74,.85); } /* Title bar: the iconic 6-line pinstripe strip, sits above the plate. */ .theme-retro-mac .tutorial-card::before { content: ""; display: block; height: 21px; flex: 0 0 21px; border-bottom: 2px solid var(--ink); background-image: repeating-linear-gradient( to bottom, var(--frame) 0, var(--frame) 1px, var(--paper) 1px, var(--paper) 3px ); background-position: 0 4px; background-repeat: repeat-x; background-size: 100% 13px; } /* Close box, top-left, drawn over the title bar. */ .theme-retro-mac .tutorial-card::after { content: ""; position: absolute; top: 5px; left: 8px; width: 11px; height: 11px; background: var(--paper); border: 1.5px solid var(--ink); } .theme-retro-mac .tutorial-card .plate { border-bottom: 2px solid var(--ink); border-radius: 0; } /* Tag chips inside the window pick up the square, bevel-less Mac look. */ .theme-retro-mac .tutorial-card .tag { font-family: var(--retro-ui); letter-spacing: .04em; border-radius: 0; border-color: var(--ink); color: var(--ink); } /* ---- month separators → beveled window-title tabs ---------------- */ .theme-retro-mac .month-separator.divider { margin: 0 0 18px; } .theme-retro-mac .month-separator.divider::before, .theme-retro-mac .month-separator.divider::after { display: none; } .theme-retro-mac .month-separator span { font-family: var(--retro-ui); letter-spacing: .12em; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 0; padding: 5px 16px; box-shadow: inset 1.5px 1.5px 0 #fff, inset -1.5px -1.5px 0 var(--frame-soft), 2px 2px 0 rgba(27,47,74,.4); } /* ---- timeline rail → mini list window with inverted selection ---- */ .theme-retro-mac .timeline-rail { border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--retro-shadow); padding: 0 0 8px; } /* Title bar for the rail window. */ .theme-retro-mac .timeline-rail::before { content: "Timeline"; display: block; font-family: var(--retro-ui); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--ink); padding: 4px 0 3px; border-bottom: 2px solid var(--ink); background-image: repeating-linear-gradient( to bottom, var(--frame) 0, var(--frame) 1px, var(--paper) 1px, var(--paper) 3px ); } .theme-retro-mac .timeline-line { padding: 10px 8px 0; gap: 4px; } .theme-retro-mac .timeline-line::before { display: none; } /* drop the vertical engraving line */ .theme-retro-mac .timeline-tick { font-family: var(--retro-ui); text-transform: none; letter-spacing: 0; font-size: .78rem; width: 100%; border-radius: 0; padding: 4px 8px; } .theme-retro-mac .timeline-tick span { width: 7px; height: 7px; border-radius: 0; /* square bullet */ border-color: var(--ink); background: var(--paper); box-shadow: none; } /* Selected month = classic inverted list row (navy fill, paper text). */ .theme-retro-mac .timeline-tick.is-active { background: var(--ink); color: var(--paper); } .theme-retro-mac .timeline-tick.is-active span { background: var(--paper); border-color: var(--paper); } /* ---- empty-state line → tidy mono inside the window feel --------- */ .theme-retro-mac .tutorial-empty { font-family: var(--retro-ui); text-transform: none; letter-spacing: .02em; } /* ---- skills vault categories → wide classic Mac windows ---------- */ .theme-retro-mac .skill-category { position: relative; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: var(--retro-shadow); overflow: hidden; } .theme-retro-mac .skill-category::before { content: ""; grid-column: 1 / -1; display: block; height: 21px; border-bottom: 2px solid var(--ink); background-image: repeating-linear-gradient( to bottom, var(--frame) 0, var(--frame) 1px, var(--paper) 1px, var(--paper) 3px ); background-position: 0 4px; background-repeat: repeat-x; background-size: 100% 13px; } .theme-retro-mac .skill-category::after { content: ""; position: absolute; top: 5px; left: 8px; width: 11px; height: 11px; background: var(--paper); border: 1.5px solid var(--ink); } .theme-retro-mac .skill-category .plate { border-right: 2px solid var(--ink); } .theme-retro-mac .skill-category h3, .theme-retro-mac .skill-item a { font-family: var(--retro-ui); letter-spacing: 0; text-transform: none; } .theme-retro-mac .skill-item a:focus-visible { background: var(--ink); color: var(--paper); box-shadow: none; } @media (max-width: 760px) { .theme-retro-mac .skill-category .plate { border-right: 0; border-bottom: 2px solid var(--ink); } }