/* ============================================================================ SeeFOP - WINDOWS 95 A CFOP workbench dressed as a mid-90s application: teal desktop, a maximised silver window with a navy title bar, raised/sunken bevels, a beveled Start taskbar with a live clock. The GAN-style cube is the document inside. ---------------------------------------------------------------------------- PRESERVED (consumed by JS / Three.js / SVG diagrams - do not rename): --s-U..--s-L, --plastic ............ cube + groove colours (diagrams, thumbnails) --signal ........................... 3D arrow colour (read by app.js arrowColor()) --arrow-x .......................... tooltip arrow position (set by JS) --i ................................ chapter stagger index (set by JS) .scene/.cube-rotator/.cube/.layer-group/.cubie/.cubie-face/.sticker/.s-* .................................. CSS-3D skeleton for renderStatic thumbnails ============================================================================ */ /* ---------- vendored type: Pixelated MS Sans Serif (offline, file://) ---------- */ @font-face { font-family: "Pixelated MS Sans Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/ms-sans-serif.woff2") format("woff2"); } @font-face { font-family: "Pixelated MS Sans Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/ms-sans-serif.woff2") format("woff2"); } @font-face { font-family: "Pixelated MS Sans Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/ms-sans-serif-bold.woff2") format("woff2"); } @font-face { font-family: "Pixelated MS Sans Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/fonts/ms-sans-serif-bold.woff2") format("woff2"); } @font-face { font-family: "Pixelated MS Sans Serif"; font-style: normal; font-weight: 800; font-display: swap; src: url("vendor/fonts/ms-sans-serif-bold.woff2") format("woff2"); } /* CJK + Devanagari fallbacks for ja / ko / hi - the pixel font has no glyphs there. Prepended onto the font stack only for those scripts (i18n.js sets ), so other locales keep the Win95 look. */ @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/noto-sans-jp-400.woff2") format("woff2"); } @font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/noto-sans-kr-400.woff2") format("woff2"); } @font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/noto-sans-devanagari-400.woff2") format("woff2"); } @font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/noto-sans-sc-400.woff2") format("woff2"); } html[data-script="jp"] { --font-ui: "Noto Sans JP", "Pixelated MS Sans Serif", system-ui, sans-serif; --font-mono: "Noto Sans JP", "Pixelated MS Sans Serif", monospace; } html[data-script="kr"] { --font-ui: "Noto Sans KR", "Pixelated MS Sans Serif", system-ui, sans-serif; --font-mono: "Noto Sans KR", "Pixelated MS Sans Serif", monospace; } html[data-script="deva"] { --font-ui: "Noto Sans Devanagari", "Pixelated MS Sans Serif", system-ui, sans-serif; --font-mono: "Noto Sans Devanagari", "Pixelated MS Sans Serif", monospace; } html[data-script="zh"] { --font-ui: "Noto Sans SC", "Pixelated MS Sans Serif", system-ui, sans-serif; --font-mono: "Noto Sans SC", "Pixelated MS Sans Serif", monospace; } :root { /* cube + groove - READ BY JS (diagrams.js SVGs + renderStatic thumbnails). KEEP. These are the pre-JS defaults; applyPalette() overwrites them at startup. Match the default palette. */ --s-U: #f2d216; --s-D: #f7f7f2; --s-F: #2bb673; --s-B: #2d8fd5; --s-R: #ef8f2a; --s-L: #e44d42; --plastic: #20222b; /* type - one bitmap system font, like the real thing */ --font-ui: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Geneva, system-ui, sans-serif; --font-mono: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Geneva, system-ui, sans-serif; /* Win95 system palette */ --ground: #008080; /* the teal desktop */ --paper: #c0c0c0; /* silver - window + control face */ --paper-2: #c0c0c0; /* silver panels (editable areas go white explicitly) */ --stage-bg: #c0c0c0; /* cube client area */ --field: #ffffff; /* white sunken fields / lists */ /* cube backdrop: a soft lit "studio" pool so the cube does not float on flat grey */ --stage-1: #d3dbe4; --stage-2: #aab4c2; --stage-3: #7c8694; --stage-vig: rgba(16, 22, 40, .22); /* the win95 cube viewport: a flat teal desktop field (dithered live by the WebGL post pass) */ --vp-1: #008080; --vp-2: #008080; --ink: #000000; /* black text */ --ink-2: #000000; /* keep readable black on silver */ --ink-3: #404040; /* dim labels */ /* "borders" are mostly bevels; these are the flat dividers / single hairlines */ --line: #808080; --line-2: #000000; /* navy is the accent: title bars, selection highlight, 3D arrows */ --signal: #000080; --signal-ink: #000080; --signal-soft: #d4d8f0; /* faint selected wash */ --good: #008000; /* DOS green */ --good-dot: #04b404; --outline: #2b3a55; /* muted ink-navy for the cube's dashed slot/cross guides (read by cube3d) */ /* legacy aliases consumed by inline styles (help-modal keycaps) */ --accent-soft: #dfdfdf; --accent-text: #000000; --grid: transparent; /* no engineering grid */ --grid-major: transparent; --scrim: rgba(0, 0, 64, .28); --r-lg: 0; --r-md: 0; --r-sm: 0; /* sharp corners everywhere */ /* the bevels that make the look (4-layer inset technique) */ --bevel-out: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; /* raised control */ --bevel-in: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; /* pressed control */ --bevel-win: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff; /* raised window/panel */ --bevel-field: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; /* sunken white field */ --title-grad: linear-gradient(90deg, #000080 0%, #1084d0 100%); --shadow: none; --shadow-soft: none; --canvas-shadow: none; } /* dark theme: a midnight desktop + a deep-slate cube backdrop. Windows stay silver. */ :root[data-theme="dark"] { --ground: #1a1a2e; --scrim: rgba(0, 0, 0, .5); --good: #04b404; --outline: #9fb3d6; /* lighter steel-blue guides for the dark cube backdrop */ --stage-1: #4c5564; --stage-2: #353d49; --stage-3: #1f242d; --stage-vig: rgba(0, 0, 0, .42); --vp-1: #008080; --vp-2: #008080; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-ui); font-size: 11px; color: var(--ink); background: var(--ground); height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; -webkit-font-smoothing: none; transition: background-color .2s ease; } /* subtle assembly on load */ @keyframes rise { from { opacity: 0; } to { opacity: 1; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } /* ---------- title bar (the app's caption) ---------- */ .appbar { flex: 0 0 30px; display: flex; align-items: center; gap: 8px; padding: 0 3px 0 5px; margin: 3px 3px 0; background: var(--title-grad); color: #fff; animation: rise .25s ease both; position: relative; z-index: 8; /* lift above the workspace so the language dropdown isn't clipped (modals are z-9) */ } .brand { display: flex; align-items: baseline; gap: 7px; font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: none; color: #fff; } .brand-mark { font-size: 15px; color: #fff; transform: none; } .brand-tag { font-size: 11px; letter-spacing: 0; font-weight: 400; color: #cfd6f7; } .brand-tag::before { content: "- "; } .appbar-status { display: flex; align-items: center; gap: 12px; margin-left: auto; padding-right: 4px; } .status { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 11px; letter-spacing: 0; text-transform: none; color: #e6e8ff; padding: 0; background: transparent; box-shadow: none; } .status::before { content: ""; width: 7px; height: 7px; border-radius: 0; background: #c0c0c0; box-shadow: var(--bevel-field); } .status[data-state="solved"] { color: #b6f0b6; box-shadow: none; background: transparent; } .status[data-state="solved"]::before { background: var(--good-dot); } .status[data-state="scrambled"] { color: #ffe08a; background: transparent; box-shadow: none; } .status[data-state="scrambled"]::before { background: #ffcf3a; } .movecount { font-size: 11px; color: #dfe2ff; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; } /* caption buttons on the title bar (method / theme / help) */ .appbar .iconbtn, .method-btn { height: 22px; min-width: 22px; border: none; background: #c0c0c0; color: #000; box-shadow: var(--bevel-out); border-radius: 0; cursor: pointer; font-family: var(--font-ui); display: inline-grid; place-items: center; transition: none; } .appbar .iconbtn { width: 22px; font-size: 13px; padding: 0; } .method-btn { padding: 0 9px; font-weight: 700; font-size: 11px; letter-spacing: 0; text-transform: none; } .appbar .iconbtn:hover, .method-btn:hover { background: #c0c0c0; color: #000; } .appbar .iconbtn:active, .method-btn:active { box-shadow: var(--bevel-in); } /* appbar language picker - a custom Win95 combobox (native