/* ============================================================================= MakeCred — design system ============================================================================= Hand-written, no build step: shared hosting has no asset pipeline and this stays small enough not to need one. Dark is the default. Light is opt-in via [data-theme="light"] on , set by the toggle and persisted in localStorage. Deliberately NOT keyed to prefers-color-scheme — the site has a preferred look, and the visitor can override it. ========================================================================== */ :root { /* --- Dark (default) --------------------------------------------------- */ --bg: #0d1117; --bg-raised: #161b22; --surface: #1c2128; --surface-hover: #22272e; --border: #2d333b; --border-strong: #444c56; --fg: #e6edf3; --fg-muted: #909dab; --fg-subtle: #6e7681; /* Sampled from the logo: it runs #309cfc (azure) through #3c6cf0 to #4848e4 (indigo). The bright end is the accent on dark, since it has to carry contrast against #0d1117. */ --accent: #309cfc; --accent-hover: #62b6ff; --accent-quiet: rgba(48, 156, 252, .14); /* Dark text on the accent, not white — #309cfc is light enough that white would fail contrast on buttons. */ --on-accent: #06182b; --success: #3fb950; --success-quiet: rgba(63, 185, 80, .13); --danger: #f85149; --danger-quiet: rgba(248, 81, 73, .13); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 12px rgba(0, 0, 0, .35); /* --- Scales ----------------------------------------------------------- */ --radius-sm: 5px; --radius: 8px; --radius-lg: 14px; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Widened from 68rem: the nav outgrew a narrower header once moderation, ratings and suggestions were added, and wrapped to a second line on desktop. */ --container: 78rem; color-scheme: dark; } :root[data-theme="light"] { --bg: #ffffff; --bg-raised: #f6f8fa; --surface: #ffffff; --surface-hover: #f6f8fa; --border: #d8dee4; --border-strong: #b8c0c8; --fg: #1f2328; --fg-muted: #5c6570; --fg-subtle: #818b98; /* The indigo end of the same gradient. The azure is too light to read as body-text links on white. */ --accent: #2b5fe3; --accent-hover: #1e46b5; --accent-quiet: rgba(43, 95, 227, .10); --on-accent: #ffffff; --success: #1a7f37; --success-quiet: rgba(26, 127, 55, .1); --danger: #cf222e; --danger-quiet: rgba(207, 34, 46, .1); --shadow-sm: 0 1px 2px rgba(31, 35, 40, .08); --shadow-md: 0 4px 14px rgba(31, 35, 40, .1); color-scheme: light; } /* --- Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; margin: 0 0 .6rem; } h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 650; } h2 { font-size: 1.25rem; font-weight: 600; margin-top: 2.5rem; } h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1.75rem; } p { margin: 0 0 1rem; } code, .mono { font-family: var(--font-mono); font-size: .875em; } code { background: var(--bg-raised); border: 1px solid var(--border); padding: .1em .4em; border-radius: var(--radius-sm); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .muted { color: var(--fg-muted); } .subtle { color: var(--fg-subtle); font-size: .875rem; } /* --- Header --------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } /* color-mix is widely supported but not universal; this is the fallback. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .site-header { background: var(--bg); } } .header-inner { max-width: var(--container); margin: 0 auto; padding: .75rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 650; font-size: 1.02rem; letter-spacing: -.02em; color: var(--fg); margin-right: auto; } .brand:hover { color: var(--fg); text-decoration: none; } /* Sized by height so any aspect ratio works. The artwork is cropped to its content, so this is the height you actually see — the original files carried ~20% transparent margin, which made the logo render small and indented. */ .brand-logo { height: 2.25rem; width: auto; display: block; } .brand-logo-light { display: none; } :root[data-theme="light"] .brand-logo-light { display: block; } :root[data-theme="light"] .brand-logo-dark { display: none; } .brand-mark { width: 1.6rem; height: 1.6rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent), var(--accent-hover)); display: grid; place-items: center; color: var(--on-accent); font-size: .8rem; font-weight: 700; flex: none; } .site-nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; } .site-nav a { color: var(--fg-muted); padding: .35rem .5rem; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 500; white-space: nowrap; } .site-nav a:hover { color: var(--fg); background: var(--surface-hover); text-decoration: none; } .nav-divider { width: 1px; align-self: stretch; background: var(--border); margin: .2rem .4rem; } .who { color: var(--fg-subtle); font-size: .85rem; padding-left: .3rem; } .theme-toggle { background: none; border: 1px solid var(--border); color: var(--fg-muted); width: 2rem; height: 2rem; padding: 0; border-radius: var(--radius-sm); cursor: pointer; display: grid; place-items: center; font-size: .95rem; line-height: 1; } .theme-toggle:hover { color: var(--fg); border-color: var(--border-strong); background: var(--surface-hover); } /* One glyph per theme, swapped by the attribute rather than by script. */ .theme-toggle .icon-light { display: none; } :root[data-theme="light"] .theme-toggle .icon-light { display: block; } :root[data-theme="light"] .theme-toggle .icon-dark { display: none; } /* --- Layout --------------------------------------------------------------- */ main { flex: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: 2.25rem 1.5rem 4rem; } .site-footer { border-top: 1px solid var(--border); background: var(--bg-raised); color: var(--fg-subtle); font-size: .85rem; } .footer-inner { max-width: var(--container); margin: 0 auto; padding: 1.75rem 1.5rem; } .footer-inner p { margin: 0 0 .4rem; } .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .page-head h1 { margin: 0; } /* --- Messages ------------------------------------------------------------- */ .flash { padding: .7rem 1rem; border-radius: var(--radius); margin: 0 0 1.25rem; border: 1px solid transparent; font-size: .93rem; } .flash-success { background: var(--success-quiet); border-color: var(--success); color: var(--success); } .flash-error { background: var(--danger-quiet); border-color: var(--danger); color: var(--danger); } /* --- Buttons -------------------------------------------------------------- */ button, .button { font: inherit; font-size: .93rem; font-weight: 550; padding: .5rem 1rem; border: 1px solid transparent; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; line-height: 1.4; transition: background .12s ease, border-color .12s ease, color .12s ease; } button:hover, .button:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; } .button.ghost, button.ghost { background: var(--surface); color: var(--fg); border-color: var(--border-strong); } .button.ghost:hover, button.ghost:hover { background: var(--surface-hover); color: var(--fg); border-color: var(--accent); } button.link { background: none; border: none; color: var(--accent); padding: 0; font-weight: 500; font-size: .9rem; } button.link:hover { background: none; color: var(--accent-hover); text-decoration: underline; } button.link.danger { color: var(--danger); } form.inline { display: inline; } /* --- Cards & tiles -------------------------------------------------------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .85rem; margin: 1.5rem 0 2rem; } .tile { display: flex; flex-direction: column; gap: .1rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .tile-count { font-size: 1.75rem; font-weight: 650; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tile-label { font-size: .82rem; color: var(--fg-muted); } .links { padding-left: 0; list-style: none; margin: 0 0 1rem; } .links li { padding: .55rem 0; border-bottom: 1px solid var(--border); } .links li:last-child { border-bottom: none; } /* --- Tables --------------------------------------------------------------- */ .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin: 1rem 0 1.5rem; } table { border-collapse: collapse; width: 100%; font-size: .93rem; } th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--border); white-space: nowrap; } thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); font-weight: 600; background: var(--bg-raised); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--surface-hover); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.actions { display: flex; gap: .8rem; align-items: center; font-size: .88rem; } /* --- Badges --------------------------------------------------------------- */ .badge { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .03em; padding: .15rem .5rem; margin-right: .2rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--fg-muted); background: var(--bg-raised); white-space: nowrap; } a.badge:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } .badge-accent { color: var(--accent); border-color: var(--accent); background: var(--accent-quiet); } .badge-success { color: var(--success); border-color: var(--success); background: var(--success-quiet); } /* --- Forms ---------------------------------------------------------------- */ .stack { display: flex; flex-direction: column; gap: 1.15rem; } .narrow { max-width: 34rem; } label { display: flex; flex-direction: column; gap: .35rem; font-weight: 550; font-size: .92rem; } label.checkbox { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; font-size: .93rem; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], textarea, select { font: inherit; font-size: .95rem; padding: .55rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-raised); color: var(--fg); width: 100%; } input::placeholder, textarea::placeholder { color: var(--fg-subtle); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-quiet); } textarea { resize: vertical; min-height: 5rem; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: auto; } .hint { font-weight: 400; font-size: .82rem; color: var(--fg-subtle); line-height: 1.5; } .field-error { font-weight: 500; font-size: .82rem; color: var(--danger); } .has-error input, .has-error select, .has-error textarea { border-color: var(--danger); } .form-actions { display: flex; align-items: center; gap: 1rem; margin-top: .25rem; } fieldset { display: flex; flex-direction: column; gap: .7rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 1rem 1.15rem 1.25rem; margin: 0; } legend { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); padding: 0 .4rem; } fieldset.has-error { border-color: var(--danger); } /* --- Machine laser rows --------------------------------------------------- */ .laser-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .3rem 0; } .laser-row .checkbox { flex: 1 1 10rem; min-width: 0; } .laser-watts { display: flex; align-items: center; gap: .35rem; } .laser-watts input { width: 5.5rem; padding: .35rem .5rem; } .laser-watts .unit { color: var(--fg-subtle); font-size: .85rem; } .laser-watts.has-error input { border-color: var(--danger); } .laser-row .field-error { flex: 1 0 100%; } /* A cell worth a second look — never a verdict, so it warns rather than alarms. */ .flagged { color: var(--accent); font-weight: 600; } /* Sortable table headers. Inherit the header's own styling so the table does not suddenly look like a page full of links. */ .sort-link { color: inherit; text-decoration: none; white-space: nowrap; } .sort-link:hover { color: var(--accent); text-decoration: none; } .sort-link.is-active { color: var(--fg); } .thumb-cell { width: 4rem; padding-right: 0; } .thumb-cell img { width: 3.5rem; height: 2.6rem; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); } .thumb-cell-empty { color: var(--fg-subtle); } /* --- Search & filters ----------------------------------------------------- */ .search-bar, .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 1.25rem 0; } .search-bar input[type="search"] { flex: 1 1 18rem; } .filter-bar select { width: auto; flex: 0 1 auto; min-width: 9rem; font-size: .9rem; } /* --- Profile list --------------------------------------------------------- */ .profile-list { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .7rem; } .profile-list li { padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; transition: border-color .12s ease, background .12s ease; } .profile-list li:hover { border-color: var(--border-strong); background: var(--surface-hover); } .profile-list li { gap: .9rem; flex-wrap: nowrap; } .profile-thumb { flex: none; width: 5.5rem; height: 4rem; border-radius: var(--radius); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border); display: grid; place-items: center; } .profile-thumb img { width: 100%; height: 100%; object-fit: cover; } .profile-thumb-empty { color: var(--fg-subtle); font-size: 1.2rem; } /* min-width:0 lets a long title ellipsize instead of forcing the row wider. */ .profile-card-body { flex: 1 1 auto; min-width: 0; } .profile-card-title { display: block; font-weight: 600; font-size: 1.02rem; color: var(--fg); } .profile-card-title:hover { color: var(--accent); text-decoration: none; } .profile-list .meta { display: block; color: var(--fg-muted); font-size: .87rem; } @media (max-width: 30rem) { .profile-thumb { width: 4rem; height: 3rem; } } /* --- Profile page --------------------------------------------------------- */ .profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; color: var(--fg-muted); font-size: .9rem; margin-bottom: 1.25rem; } .rating { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin: 1.5rem 0 2rem; } .rating p { margin: 0; margin-right: auto; } .rating .hint { flex: 1 0 100%; } .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; margin: 1rem 0 1.5rem; } .setting { padding: .8rem .95rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .setting-label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-subtle); font-weight: 600; margin-bottom: .15rem; } .setting-value { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; } .setting-unit { font-size: .8rem; color: var(--fg-muted); font-family: var(--font-sans); font-weight: 400; } .setting.is-core { border-left: 3px solid var(--accent); } .disclosure { font-size: .82rem; color: var(--fg-subtle); border-left: 3px solid var(--border-strong); padding-left: .8rem; } /* --- Images --------------------------------------------------------------- */ img { max-width: 100%; height: auto; display: block; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin: 1.5rem 0 2rem; } .gallery figure { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .gallery figcaption { padding: .55rem .75rem; font-size: .84rem; color: var(--fg-muted); border-top: 1px solid var(--border); } .image-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem; margin: 1rem 0 2rem; } .image-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); padding-bottom: .6rem; } .image-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: .6rem; } .image-card form { padding: 0 .7rem; } .image-card-form { display: flex; gap: .4rem; align-items: center; margin-bottom: .5rem; } .image-card-form input { font-size: .85rem; padding: .35rem .5rem; } input[type="file"] { font: inherit; font-size: .9rem; padding: .5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-raised); color: var(--fg-muted); width: 100%; } /* --- Avatars & account ---------------------------------------------------- */ .avatar { border-radius: 50%; object-fit: cover; flex: none; } .avatar-lg { width: 5rem; height: 5rem; } .avatar-placeholder { display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--on-accent); font-weight: 650; font-size: 1.9rem; } .account-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin-bottom: 1.5rem; } .account-head p { margin: 0 0 .25rem; } /* Default avatar size, used inline beside handles. */ .avatar { width: 1.5rem; height: 1.5rem; font-size: .7rem; } .byline { display: inline-flex; align-items: center; gap: .4rem; } .comment-head .avatar { width: 1.75rem; height: 1.75rem; } .comment-photos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; } .comment-photos img { width: 8rem; height: 6rem; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); } .results-gallery figcaption { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } /* --- Home hero ------------------------------------------------------------ */ .hero { padding: 1rem 0 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; } .hero h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin-bottom: .5rem; } .hero p { color: var(--fg-muted); font-size: 1.05rem; max-width: 42rem; margin-bottom: 1.25rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; } /* --- Comments ------------------------------------------------------------- */ .comment-list { list-style: none; padding: 0; margin: 1.25rem 0 2rem; display: grid; gap: .7rem; } .comment { padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } /* A comment linked to a rating is emphasised — bolder, with a badge — because someone who actually tried the settings is worth more than someone who did not. It is NOT reordered: the list stays chronological so the thread reads in the order it happened. */ .comment-rated { border-left: 3px solid var(--accent); background: var(--bg-raised); } .comment-rated .comment-body { font-size: 1.02rem; } .comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; font-size: .9rem; } .comment-head strong { font-weight: 600; } .comment-body { white-space: normal; overflow-wrap: anywhere; } /* --- Reports -------------------------------------------------------------- */ .report { padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin-bottom: .8rem; } .report-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; } .report-details { margin: 0 0 .75rem; } .report-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .report-actions input { flex: 1 1 14rem; font-size: .88rem; padding: .4rem .6rem; } .bulk-bar { position: sticky; top: 3.6rem; z-index: 10; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); margin-bottom: .8rem; } .bulk-bar .checkbox { flex: 0 0 auto; } .bulk-check { flex: none; } /* --- Empty states --------------------------------------------------------- */ .empty { padding: 2.5rem 1.5rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--fg-muted); } .empty p { margin-bottom: .75rem; } .empty p:last-child { margin-bottom: 0; } /* --- Small screens -------------------------------------------------------- */ @media (max-width: 40rem) { .header-inner { padding: .65rem 1rem; gap: .75rem; } main { padding: 1.5rem 1rem 3rem; } .brand span:not(.brand-mark) { display: none; } .site-nav { width: 100%; order: 3; } .nav-divider { display: none; } td.actions { gap: .6rem; } }