/* * styles.css - SG Plate Checksum Calculator * Methodology : BEM (Block__Element--Modifier) * Theming : CSS custom properties switched via [data-theme] on * Palette : Solarized (Ethan Schoonover) * https://ethanschoonover.com/solarized/ * * Solarized colour reference * -------------------------- * base03 #002b36 base02 #073642 base01 #586e75 base00 #657b83 * base0 #839496 base1 #93a1a1 base2 #eee8d5 base3 #fdf6e3 * yellow #b58900 orange #cb4b16 red #dc322f magenta #d33682 * violet #6c71c4 blue #268bd2 cyan #2aa198 green #859900 * * Light-mode role assignments (mosioc guide): * backgrounds -> base3, base2 * primary text -> base01 * secondary -> base00 * deemphasised -> base0 <- --muted in light * highlight bg -> base2, base3 * * Dark-mode role assignments: * backgrounds -> base03, base02 * primary text -> base1 * secondary -> base0 * deemphasised -> base00 <- --muted in dark */ /* -- Reset ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* -- Custom properties ---------------------------------------------- */ :root { /* Typography */ --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', 'Cascadia Code', 'Fira Mono', monospace; /* -- Solarized Light tokens ------------------------------------ */ --bg: #eee8d5; /* base2 - page background */ --surface: #fdf6e3; /* base3 - card surface */ --surface-2: #e8e2ce; /* base2 darkened - subtle inset areas */ --border: #d4cdb8; --border-focus: #268bd2; /* blue */ --text: #586e75; /* base01 - primary content text */ --text-2: #657b83; /* base00 - secondary content text */ --muted: #839496; /* base0 - deemphasised / placeholder */ --accent: #268bd2; /* blue - info, links, focus */ --accent-dim: #dceefa; /* blue tint background */ --accent-text: #1a6fa8; /* blue darkened for text on dim bg */ --ok: #859900; /* green - success */ --ok-bg: #eef2cc; --err: #dc322f; /* red - error */ --err-bg: #fce8e7; --warn: #b58900; /* yellow - warning (reserved series) */ --warn-bg: #fdf5d0; --plate-border: #073642; /* base02 - strong border for plate */ --plate-bg: #fdf6e3; /* base3 */ --plate-stripe: #268bd2; /* blue */ --check-color: #268bd2; /* blue */ --pill-border: #657b83; /* base00 */ --pill-accent: #268bd2; /* blue */ --shadow: 0 1px 3px rgba(7, 54, 66, 0.10), 0 4px 14px rgba(7, 54, 66, 0.07); /* Transition durations - edit here to change globally */ --t-theme: 0.25s; /* theme switch: bg, color, border */ --t-ui: 0.15s; /* UI interactions: hover, focus, click */ /* Header uses base02 teal regardless of page theme */ --header-bg: #073642; /* base02 */ --header-border: #0a4555; --header-text: #fdf6e3; /* base3 */ --header-muted: #93a1a1; /* base1 */ --header-btn-bg: #0a4555; --header-btn-hover: #0e5060; } /* -- Solarized Dark tokens ------------------------------------------ */ [data-theme="dark"] { --bg: #002b36; /* base03 - page background */ --surface: #073642; /* base02 - card surface */ --surface-2: #0a3f4e; /* base02 lightened - subtle inset */ --border: #0e4f60; --border-focus: #268bd2; /* blue */ --text: #93a1a1; /* base1 - primary content text */ --text-2: #839496; /* base0 - secondary content text */ --muted: #657b83; /* base00 - deemphasised / comments */ --accent: #268bd2; /* blue */ --accent-dim: #042535; /* blue dark tint background */ --accent-text: #6ab4e8; /* blue lightened for dark bg */ --ok: #859900; /* green */ --ok-bg: #0f1800; --err: #dc322f; /* red */ --err-bg: #200808; --warn: #b58900; /* yellow */ --warn-bg: #1a1200; --plate-border: #93a1a1; /* base1 */ --plate-bg: #002b36; /* base03 */ --plate-stripe: #268bd2; /* blue */ --check-color: #2aa198; /* cyan - "Success/code" per guide */ --pill-border: #586e75; /* base01 */ --pill-accent: #2aa198; /* cyan */ --shadow: 0 1px 4px rgba(0, 0, 0, 0.50), 0 6px 20px rgba(0, 0, 0, 0.40); --header-bg: #002b36; /* base03 */ --header-border: #073642; /* base02 */ --header-text: #93a1a1; /* base1 */ --header-muted: #839496; /* base0 */ --header-btn-bg: #073642; --header-btn-hover: #0a3f4e; } /* -- Utility -------------------------------------------------------- */ /* Screen-reader only - visually hidden but accessible */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -- Base ----------------------------------------------------------- */ body { font-family: var(--font-sans); background: var(--bg); color: var(--text); min-height: 100vh; transition: background var(--t-theme), color var(--t-theme); } /* ==================================================================== BLOCKS ==================================================================== */ /* -- site-header ---------------------------------------------------- */ .site-header { background: var(--header-bg); border-bottom: 1px solid var(--header-border); padding: 0 1.5rem; height: 52px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); position: sticky; top: 0; z-index: 10; } .site-header__left { display: flex; align-items: center; gap: 12px; } .site-header__badge { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; background: var(--accent); color: var(--header-bg); padding: 3px 9px; border-radius: 4px; } .site-header__title { font-size: 14px; font-weight: 500; color: var(--header-muted); letter-spacing: 0.01em; } .site-header__theme-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--header-border); background: var(--header-btn-bg); color: var(--header-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t-ui), color var(--t-ui); flex-shrink: 0; } .site-header__theme-btn:hover { background: var(--header-btn-hover); color: var(--header-text); } .site-header__theme-btn svg { width: 16px; height: 16px; } /* Sun/moon icon shows CURRENT theme state, not the toggle target */ /* Light mode -> sun visible (you are in light mode) */ /* Dark mode -> moon visible (you are in dark mode) */ .site-header__icon--sun { display: block; } .site-header__icon--moon { display: none; } [data-theme="dark"] .site-header__icon--sun { display: none; } [data-theme="dark"] .site-header__icon--moon { display: block; } /* -- layout --------------------------------------------------------- */ .layout { max-width: 1120px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; } .layout__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.25rem; align-items: start; } /* min-width: 0 prevents grid blowout on long content */ .layout__col { min-width: 0; } /* -- card ----------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; box-shadow: var(--shadow); transition: background var(--t-theme), border-color var(--t-theme); } .card__label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.875rem; } .card__label--spaced { margin-top: 0.75rem; } .card__label--tight { margin: 0 0 3px; } .card__note { font-size: 13px; color: var(--text-2); line-height: 1.65; margin-bottom: 0.75rem; } /* -- plate-form ----------------------------------------------------- */ .plate-form__input-wrap { position: relative; display: flex; align-items: center; } .plate-form__input { width: 100%; font-family: var(--font-mono); font-size: 26px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 2.75rem 0.55rem 1rem; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); outline: none; transition: border-color var(--t-ui), background var(--t-theme); caret-color: var(--accent); } .plate-form__input::placeholder { color: var(--border); font-weight: 400; } .plate-form__input:focus { border-color: var(--border-focus); background: var(--surface); } .plate-form__clear { position: absolute; right: 10px; width: 24px; height: 24px; border: none; background: transparent; color: var(--muted); cursor: pointer; display: none; /* shown via JS by removing `hidden` -> display:flex */ align-items: center; justify-content: center; border-radius: 4px; padding: 0; transition: color var(--t-ui); } /* JS removes the `hidden` attr; we re-enable flex here */ .plate-form__clear:not([hidden]) { display: flex; } .plate-form__clear:hover { color: var(--text); } .plate-form__clear svg { width: 14px; height: 14px; } .plate-form__hint { font-size: 12px; color: var(--muted); margin-top: 0.6rem; line-height: 1.65; } .plate-form__hint code { font-family: var(--font-mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; color: var(--text-2); } .plate-form__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.875rem; align-items: center; } .plate-form__chips-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: 2px; } /* -- chip ----------------------------------------------------------- */ .chip { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; padding: 4px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; color: var(--text-2); letter-spacing: 0.05em; transition: background var(--t-ui), border-color var(--t-ui), color var(--t-ui); white-space: nowrap; } .chip:hover { background: var(--accent); border-color: var(--accent); color: var(--surface); /* base3 / base02 - both contrast well on blue */ } /* -- plate-display -------------------------------------------------- */ .plate-display { background: var(--plate-bg); border: 2.5px solid var(--plate-border); border-radius: 8px; padding: 1rem 2rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-bottom: 0.875rem; transition: background var(--t-theme), border-color var(--t-theme); } /* Blue/teal left-edge stripe - decorative plate detail */ .plate-display::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--plate-stripe); transition: background var(--t-theme); } .plate-display__number { font-family: var(--font-mono); font-size: 34px; font-weight: 500; letter-spacing: 0.12em; color: var(--text); } .plate-display__number .chk { color: var(--check-color); } /* -- banner --------------------------------------------------------- */ .banner { display: flex; align-items: flex-start; gap: 10px; padding: 0.7rem 0.9rem; border-radius: 8px; font-size: 13.5px; line-height: 1.5; margin-bottom: 0.6rem; } .banner:last-child { margin-bottom: 0; } .banner__icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 700; margin-top: 1px; } .banner--ok { background: var(--ok-bg); color: var(--ok); } .banner--ok .banner__icon { background: var(--ok); color: var(--ok-bg); } .banner--err { background: var(--err-bg); color: var(--err); } .banner--err .banner__icon { background: var(--err); color: var(--err-bg); } .banner--info { background: var(--accent-dim); color: var(--accent-text); } .banner--info .banner__icon { background: var(--accent); color: var(--surface); } .banner--warn { background: var(--warn-bg); color: var(--warn); border-left: 3px solid var(--warn); } .banner--warn .banner__icon { background: var(--warn); color: var(--surface); } /* -- wildcard-results ----------------------------------------------- */ .wildcard-results__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 0.875rem; } .wildcard-results__count { font-size: 12px; color: var(--muted); } .wildcard-results__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; max-height: 380px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .wildcard-results__grid::-webkit-scrollbar { width: 3px; } .wildcard-results__grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .wildcard-results__overflow { font-size: 11.5px; color: var(--muted); margin-top: 0.6rem; } /* -- download-btn --------------------------------------------------- */ .download-btn { font-family: var(--font-sans); font-size: 12px; font-weight: 500; padding: 5px 13px; background: var(--text); color: var(--surface); border: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: opacity var(--t-ui); } .download-btn:hover { opacity: 0.8; } .download-btn svg { width: 12px; height: 12px; flex-shrink: 0; } /* -- plate-pill ----------------------------------------------------- */ .plate-pill { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.07em; padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--pill-border); border-radius: 6px; text-align: center; color: var(--text); } .plate-pill__check { color: var(--pill-accent); } /* -- algo ----------------------------------------------------------- */ .algo__table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; } .algo__table th, .algo__table td { padding: 5px 10px; border: 1px solid var(--border); text-align: center; } .algo__table td { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); } .algo__table thead th { background: var(--surface-2); font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } /* -- check-map ------------------------------------------------------ */ .check-map { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.6rem; } .check-map__cell { font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: 4px 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text-2); min-width: 38px; text-align: center; } .check-map__index { display: block; font-size: 9px; color: var(--muted); font-weight: 400; margin-top: 1px; } /* -- collapsible (details/summary) --------------------------------- */ .collapsible { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 0.5rem; transition: border-color var(--t-theme); } .collapsible:last-child { margin-bottom: 0; } .collapsible[open] { border-color: var(--border-focus); } .collapsible__summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 0.6rem 0.875rem; cursor: pointer; user-select: none; background: var(--surface-2); transition: background var(--t-ui); } .collapsible__summary::-webkit-details-marker, .collapsible__summary::marker { display: none; } .collapsible__summary:hover { background: var(--border); } .collapsible__desc { font-size: 11.5px; color: var(--muted); } .collapsible__count { font-size: 11px; color: var(--muted); margin-left: auto; margin-right: 6px; white-space: nowrap; } .collapsible__chevron { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; transition: transform var(--t-ui); } .collapsible[open] .collapsible__chevron { transform: rotate(180deg); } .collapsible__body { padding: 0.75rem 0.875rem 0.875rem; } /* -- exc-badge ------------------------------------------------------ */ .exc-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } .exc-badge--skipped { background: var(--err-bg); color: var(--err); border: 1px solid var(--err); } .exc-badge--reserved { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); } .exc-badge--special { background: var(--accent-dim); color: var(--accent-text); border: 1px solid var(--accent); } /* -- exc-table ------------------------------------------------------ */ .exc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .exc-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 5px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .exc-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-2); line-height: 1.5; } .exc-table tr:last-child td { border-bottom: none; } .exc-table tr:hover td { background: var(--surface-2); } .exc-table__prefix-cell { width: 90px; } .exc-table__prefix { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; } /* -- result-lta-link ------------------------------------------------- */ .result-lta-link { display: inline-block; margin-top: 0.6rem; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--accent); background: none; border: none; border-bottom: 1px solid transparent; padding: 0; cursor: pointer; transition: border-color var(--t-ui), color var(--t-ui); } .result-lta-link:hover { border-bottom-color: var(--accent); } .result-lta-link--copied { color: var(--ok); border-bottom-color: transparent; cursor: default; } /* -- site-footer ---------------------------------------------------- */ .site-footer { text-align: center; padding: 1.25rem 1.5rem 2rem; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 0.5rem; line-height: 1.6; } /* -- Responsive ----------------------------------------------------- */ @media (max-width: 800px) { .layout__cols { grid-template-columns: 1fr; } } @media (max-width: 480px) { .layout { padding: 1.25rem 0.875rem 3rem; } .plate-form__input { font-size: 20px; } .plate-display { padding: 0.875rem 1.25rem; } .plate-display__number { font-size: 26px; } }