/* ========================================================================== SIMON OS — UI KIT v1.0 Classic Mac mono design system -------------------------------------------------------------------------- Sections: 1. Tokens 2. Base / reset 3. Desktop (app shell) 4. Menu bar 5. Window 6. Buttons 7. Desktop icons 8. Form elements 9. Utilities ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Colour — 1-bit first, greys only when dithering isn't practical */ --ink: #000000; --paper: #ffffff; --accent: #000000; --accent-text: #000000; /* darker accent variant, safe for small text */ --grey-25: #e8e8e8; --grey-50: #aaaaaa; /* The desktop "grey" is a 1-bit checkerboard dither, not a flat colour */ --dither-50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000'/%3E%3Crect x='1' width='1' height='1' fill='%23fff'/%3E%3Crect y='1' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E"); --dither-25: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23fff'/%3E%3Crect width='1' height='1' fill='%23000'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23000'/%3E%3C/svg%3E"); /* Type */ --font-pixel: "Silkscreen", "Courier New", monospace; --font-body: "Jersey 15", "Geneva", "Helvetica Neue", "Helvetica", "Arial", sans-serif; /* Chicago-style bitmap body */ --text-xs: 0.625rem; /* 10px — labels, menu items */ --text-sm: 0.9375rem; /* 15px — secondary body (Jersey 15 native size) */ --text-md: 1.0625rem; /* 17px — body */ --text-lg: 1.25rem; /* 20px — window titles, h2 */ --text-xl: 1.75rem; /* 28px — page title */ /* Space (8px base grid, pixel-snapped) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; /* Structure */ --line: 2px; /* universal border weight */ --radius: 6px; /* soft rect, used sparingly */ --shadow-hard: 4px 4px 0 var(--ink); --menubar-h: 48px; /* Desktop surface */ --desktop-bg: var(--dither-50); --desktop-size: 2px 2px; } /* -------------------------------------------------------------------------- 1b. THEME: TWIN POLE — corporate-leisure sunset skin Apply with -------------------------------------------------------------------------- */ [data-theme="twin-pole"] { --ink: #3d2817; /* espresso brown */ --paper: #f6e7ce; /* sun-bleached cream */ --accent: #ff6a5c; /* coral */ --accent-text: #b23726; /* 4.97:1 on paper */ --grey-25: #eeddc0; --grey-50: #b39c7d; --desktop-bg: linear-gradient(180deg, #ffe3b3 0%, #ffb37a 45%, #ff7f8e 80%, #e96a9c 100%); --desktop-size: auto; } /* THEME: MR BLUE SKY — sunny day blues */ [data-theme="mr-blue-sky"] { --ink: #16324f; /* deep sky navy */ --paper: #eef7ff; /* cloud white-blue */ --accent: #1d4e89; --accent-text: #1d4e89; /* navy blue */ --grey-25: #d7e9f8; --grey-50: #7fa8c9; --desktop-bg: linear-gradient(180deg, #e3f3ff 0%, #a8d8f8 45%, #5aaeea 100%); --desktop-size: auto; } /* THEME: FROGGIE — luigi / tree frog greens */ [data-theme="froggie"] { --ink: #16351c; /* deep forest */ --paper: #eef8e8; /* pale mint */ --accent: #45b649; --accent-text: #2f7a35; /* luigi green */ --grey-25: #d9edd0; --grey-50: #86ab7d; --desktop-bg: linear-gradient(180deg, #e2f6c8 0%, #8ed081 45%, #3f9e4d 100%); --desktop-size: auto; } /* THEME: STARDUST — happy pale yellows, emoji-star gold */ [data-theme="stardust"] { --ink: #4d3b12; /* toasted brown */ --paper: #fffdf0; /* starlight cream */ --accent: #ffcc33; /* star gold */ --accent-text: #8a6b00; /* 4.91:1 on paper */ --grey-25: #f5ecc8; --grey-50: #b3a15f; --desktop-bg: linear-gradient(180deg, #fffbe0 0%, #ffec8a 50%, #ffd34d 100%); --desktop-size: auto; } /* THEME: PANTS — aqua / turquoise */ [data-theme="pants"] { --ink: #0f3d38; /* deep teal */ --paper: #eafaf6; /* sea foam */ --accent: #14b8a6; --accent-text: #0f7d6e; /* turquoise */ --grey-25: #d2efe8; --grey-50: #6fa89e; --desktop-bg: linear-gradient(180deg, #d9f8f0 0%, #7fdcd0 45%, #25a99b 100%); --desktop-size: auto; } /* THEME: SMASHING PUMPKINS — light bright pumpkin, claude orange */ [data-theme="smashing-pumpkins"] { --ink: #4a2410; /* dark rust */ --paper: #fdf1e5; /* light peach cream */ --accent: #d97757; --accent-text: #b0512c; /* claude orange */ --grey-25: #f6e0cc; --grey-50: #c39274; --desktop-bg: linear-gradient(180deg, #ffe9cf 0%, #ffbf8f 45%, #f0955c 80%, #d97757 100%); --desktop-size: auto; } /* -------------------------------------------------------------------------- 2. BASE / RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; color: var(--ink); background: var(--paper); } h1, h2, h3, .pixel { font-family: var(--font-pixel); font-weight: 400; line-height: 1.3; letter-spacing: 0; } h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-lg); } h3 { font-size: var(--text-md); } p + p { margin-top: var(--sp-3); } /* Avoid single-word last lines (orphans) in running text */ p, .feed__sub { text-wrap: pretty; } a { color: var(--ink); } a:hover { background: var(--ink); color: var(--paper); text-decoration: none; } ::selection { background: var(--ink); color: var(--paper); } svg.px { shape-rendering: crispEdges; image-rendering: pixelated; display: block; } /* -------------------------------------------------------------------------- 3. DESKTOP — app shell with dithered grey background -------------------------------------------------------------------------- */ .desktop { min-height: 100vh; min-height: 100dvh; background-image: var(--desktop-bg); background-size: var(--desktop-size); background-attachment: fixed; image-rendering: pixelated; padding: calc(var(--menubar-h) + var(--sp-4)) var(--sp-3) var(--sp-5); position: relative; overflow: hidden; } /* -------------------------------------------------------------------------- 4. MENU BAR — fixed top strip with live clock -------------------------------------------------------------------------- */ .menubar { position: fixed; top: 0; left: 0; right: 0; height: var(--menubar-h); background: var(--paper); border-bottom: var(--line) solid var(--ink); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3); font-family: var(--font-pixel); font-size: var(--text-xs); z-index: 100; text-transform: lowercase; } .menubar__logo { display: flex; align-items: center; color: var(--accent); } button.menubar__item { background: none; border: 0; font: inherit; cursor: pointer; color: inherit; } .menubar__item { text-decoration: none; padding: 2px 6px; } .menubar__item:hover, .menubar__item[aria-current="true"] { background: var(--ink); color: var(--paper); } .menubar__spacer { flex: 1; } /* Drop-down menu (system 7 label-menu style) */ .menubar__menu { position: relative; } /* Popup-menu control (system 7 select) */ .select { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-pixel); font-size: var(--text-xs); text-transform: lowercase; color: var(--ink); background: var(--paper); border: var(--line) solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 3px var(--sp-2); cursor: pointer; } .select:hover { background: var(--grey-25); } .select:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); } .select__arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; flex: none; margin-left: auto; /* arrow hugs the right; label stays left with the caption */ } .menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--paper); border: var(--line) solid var(--ink); box-shadow: var(--shadow-hard); min-width: 190px; padding: var(--sp-1) 0; z-index: 300; } .menu__item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); font-family: var(--font-pixel); font-size: var(--text-xs); text-transform: lowercase; text-align: left; color: var(--ink); background: none; border: 0; cursor: pointer; } .menu__item:hover, .menu__item:focus-visible { background: var(--ink); color: var(--paper); outline: none; } .menu__check { width: 12px; flex: none; visibility: hidden; } .menu__item[aria-checked="true"] .menu__check { visibility: visible; } .menu__chip { width: 14px; height: 14px; border: var(--line) solid var(--ink); flex: none; image-rendering: pixelated; } .menu__item:hover .menu__chip { border-color: var(--paper); } .menubar__clock { white-space: nowrap; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 5. WINDOW — chrome with striped title bar, hard shadow -------------------------------------------------------------------------- */ .window { background: var(--paper); border: var(--line) solid var(--ink); box-shadow: var(--shadow-hard); max-width: 620px; } .window--draggable { position: absolute; /* never taller than the viewport: body scrolls internally instead */ display: flex; flex-direction: column; max-height: calc(100dvh - var(--menubar-h) - var(--sp-5)); } .window--draggable .window__titlebar { cursor: grab; flex: none; } .window--draggable .window__titlebar:active { cursor: grabbing; } .window--draggable .window__statusbar { flex: none; } .window--draggable > .window__body { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink) var(--paper); } .window--draggable > .window__body::-webkit-scrollbar { width: 12px; } .window--draggable > .window__body::-webkit-scrollbar-track { background: var(--paper); border-left: var(--line) solid var(--ink); } .window--draggable > .window__body::-webkit-scrollbar-thumb { background: var(--ink); } .window__titlebar { display: flex; align-items: center; gap: var(--sp-2); border-bottom: var(--line) solid var(--ink); padding: 6px var(--sp-2); background: repeating-linear-gradient( to bottom, var(--paper) 0, var(--paper) 3px, var(--ink) 3px, var(--ink) 4px ); background-clip: content-box; user-select: none; -webkit-user-select: none; touch-action: none; min-height: 32px; } .window__control { width: 14px; height: 14px; border: var(--line) solid var(--ink); background: var(--paper); box-shadow: 0 0 0 5px var(--paper); /* gap between control and title stripes */ flex: none; cursor: pointer; padding: 0; } .window__control:active { background: var(--ink); } .window__title { font-family: var(--font-pixel); font-size: var(--text-xs); background: var(--paper); padding: 2px var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; text-transform: lowercase; } .window__body { padding: var(--sp-4); } .window__statusbar { border-top: var(--line) solid var(--ink); padding: var(--sp-1) var(--sp-2); font-family: var(--font-pixel); font-size: var(--text-xs); display: flex; justify-content: space-between; gap: var(--sp-2); text-transform: lowercase; } /* -------------------------------------------------------------------------- 6. BUTTONS -------------------------------------------------------------------------- */ .btn { font-family: var(--font-pixel); font-size: var(--text-xs); color: var(--ink); background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); cursor: pointer; text-decoration: none; display: inline-block; text-transform: lowercase; } .btn:hover { background: var(--ink); color: var(--paper); } .btn:active { transform: translate(1px, 1px); } /* Default action: classic double-ring */ .btn--default { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); } /* -------------------------------------------------------------------------- 7. DESKTOP ICONS — pixel art + label, inverts on hover -------------------------------------------------------------------------- */ .icon-grid { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .icon { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); width: 88px; text-decoration: none; text-align: center; } .icon:hover { background: none; color: var(--ink); } .icon__art { width: 48px; height: 48px; image-rendering: pixelated; } .icon__label { font-family: var(--font-pixel); font-size: var(--text-xs); background: var(--paper); padding: 1px 5px; text-transform: lowercase; } .icon:hover .icon__label, .icon:focus-visible .icon__label { background: var(--ink); color: var(--paper); } .icon__art { color: var(--ink); } /* Hidden windows */ .window[hidden] { display: none; } /* -------------------------------------------------------------------------- 7b. FEED LIST — track / article / career rows inside windows -------------------------------------------------------------------------- */ .feed { list-style: none; } .feed__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px dotted var(--ink); } .feed__item:last-child { border-bottom: 0; } .feed__main { min-width: 0; } .feed__title { font-size: var(--text-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.feed__title { text-decoration: none; display: block; } a.feed__title:hover { background: var(--ink); color: var(--paper); } .feed__sub { font-size: var(--text-sm); color: var(--accent-text); } .feed__meta { font-family: var(--font-pixel); font-size: var(--text-xs); white-space: nowrap; text-transform: lowercase; flex: none; } .feed-note { font-family: var(--font-pixel); font-size: var(--text-xs); text-transform: lowercase; } /* Feed extras — venue lines with pin, action button */ .feed__venue { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--accent-text); margin-top: 2px; } .feed__venue .pin { flex: none; } .feed__btn { margin-top: var(--sp-2); } /* EYEBROW — the smallest pixel level: section labels, stat labels, table sections. One named level so every window titles its groups the same way. */ .eyebrow { font-family: var(--font-pixel); font-size: var(--text-xs); text-transform: lowercase; font-weight: 400; margin-bottom: var(--sp-1); } /* -------------------------------------------------------------------------- 7d. STATS — profile numbers with value-first hierarchy -------------------------------------------------------------------------- */ .stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .stat { display: flex; flex-direction: column; } .stat__value { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.1; font-variant-numeric: tabular-nums; } .stat__label { font-family: var(--font-pixel); font-size: var(--text-xs); text-transform: lowercase; margin-top: var(--sp-1); } /* -------------------------------------------------------------------------- 7d-2. STAT GRID — titled groups of stats with dividing lines -------------------------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; } .stat-grid__cell { padding: var(--sp-3); } .stat-grid__cell + .stat-grid__cell { border-left: 1px dotted var(--ink); } .stat-grid__title { font-family: var(--font-pixel); font-size: var(--text-xs); text-transform: lowercase; margin-bottom: var(--sp-3); } @media (max-width: 640px), (pointer: coarse) { .stat-grid { grid-template-columns: 1fr; } .stat-grid__cell + .stat-grid__cell { border-left: 0; border-top: 1px dotted var(--ink); } } /* -------------------------------------------------------------------------- 7e. TABS — classic Mac folder tabs -------------------------------------------------------------------------- */ .tabs { display: flex; gap: var(--sp-1); border-bottom: var(--line) solid var(--ink); margin: var(--sp-3) 0; } .tab { font-family: var(--font-pixel); font-size: var(--text-xs); text-transform: lowercase; color: var(--ink); background: var(--grey-25); border: var(--line) solid var(--ink); border-radius: var(--radius) var(--radius) 0 0; padding: 5px 10px; margin-bottom: calc(-1 * var(--line)); cursor: pointer; } .tab:hover { background: var(--paper); } .tab[aria-selected="true"] { background: var(--paper); border-bottom-color: var(--paper); } /* -------------------------------------------------------------------------- 7c. TABLE — pixel headers, dotted rows -------------------------------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table th { font-family: var(--font-pixel); font-size: var(--text-xs); font-weight: 700; text-align: left; text-transform: lowercase; background: var(--grey-25); border-bottom: var(--line) solid var(--ink); padding: var(--sp-1) var(--sp-2); } .table td { padding: 6px var(--sp-2); border-bottom: 1px dotted var(--ink); vertical-align: top; } .table tr:last-child td { border-bottom: 0; } .table .table__dates { font-family: var(--font-pixel); font-size: var(--text-xs); text-transform: lowercase; white-space: nowrap; } /* Section header row spanning the table */ .table .table__section th { border-top: var(--sp-3) solid transparent; /* spacing above, outside the fill */ background-clip: padding-box; border-bottom: var(--line) solid var(--ink); } .table .table__section:first-child th { border-top-width: var(--sp-1); } /* Scrollable window region with 1-bit scrollbar */ .window__scroll { max-height: 460px; /* tall enough that the next item peeks, hinting scroll */ overflow-y: auto; padding-right: var(--sp-3); /* keeps overlay scrollbars off the content */ scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--ink) var(--paper); } .window__scroll::-webkit-scrollbar { width: 12px; } .window__scroll::-webkit-scrollbar-track { background: var(--paper); border-left: var(--line) solid var(--ink); } .window__scroll::-webkit-scrollbar-thumb { background: var(--ink); } .blink { animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } /* -------------------------------------------------------------------------- 8. FORM ELEMENTS -------------------------------------------------------------------------- */ .field { font-family: var(--font-body); font-size: var(--text-sm); border: var(--line) solid var(--ink); background: var(--paper); padding: var(--sp-2); width: 100%; } .field:focus { outline: var(--line) solid var(--ink); outline-offset: 2px; } .label { font-family: var(--font-pixel); font-size: var(--text-xs); display: block; margin-bottom: var(--sp-1); text-transform: lowercase; } /* -------------------------------------------------------------------------- 9. UTILITIES -------------------------------------------------------------------------- */ .divider { border: 0; border-top: var(--line) solid var(--ink); margin: var(--sp-4) 0; } .divider--dotted { border-top-style: dotted; } .dither-panel { background-image: var(--dither-25); background-size: 4px 4px; image-rendering: pixelated; border: var(--line) solid var(--ink); padding: var(--sp-3); } /* Framed retro image (block, centred) */ .img-frame { display: block; margin: 0 auto; max-width: 100%; height: auto; border: var(--line) solid var(--ink); image-rendering: pixelated; } /* Dithered portrait / retro image */ .about-photo { float: right; width: 140px; height: auto; margin: 0 0 var(--sp-3) var(--sp-3); border: var(--line) solid var(--ink); image-rendering: pixelated; } @media (max-width: 640px), (pointer: coarse) { .about-photo { float: none; display: block; margin: 0 auto var(--sp-3); } } /* NOTE: grey-50 sits around 2.3:1 on paper — decorative use only. Never use .muted for text; use .small or accent-text instead. */ .muted { color: var(--grey-50); } .small { font-size: var(--text-sm); } .center { text-align: center; } /* Focus visibility */ :focus-visible { outline: var(--line) solid var(--ink); outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* Mobile */ @media (max-width: 640px), (pointer: coarse) { .window { max-width: 100%; } .window--draggable { position: relative; left: 0 !important; top: 0 !important; display: block; max-height: none; /* stacked flow: the page scrolls, not the window */ } .window--draggable > .window__body { overflow-y: visible; } .icon-grid { justify-content: center; } /* Menubar: row 1 = logo + name + clock, row 2 = full-width theme select */ .menubar { position: sticky; top: 0; height: auto; flex-wrap: wrap; gap: var(--sp-2); row-gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); } .menubar__menu { order: 10; width: 100%; } .menubar__menu .select { width: 100%; } .menubar__menu .menu { width: 100%; } .desktop { padding-top: var(--sp-4); } }