/* ============================================================================
berm.css — the BermTools design system (tokens + components).
ONE stylesheet shared by every app on the server; a restyle = edit this file.
LOOK (v2): bright "workshop paper" — warm off-white surfaces, ink text, vivid
but grounded accents, condensed industrial display type for app titles.
Deliberately NOT the generic dark-gradient dashboard look.
USAGE (any app page):
<- BEFORE app style.css
Apps keep identity by overriding ONE var: :root { --accent: var(--c-green); }
Components are prefixed .b-* to avoid collisions. Mobile-first; 760px breakpoint.
========================================================================== */
@font-face {
font-family: "Big Shoulders";
src: url("/assets/fonts/big-shoulders-500.woff2") format("woff2");
font-weight: 500; font-display: swap;
}
@font-face {
font-family: "Big Shoulders";
src: url("/assets/fonts/big-shoulders-700.woff2") format("woff2");
font-weight: 700; font-display: swap;
}
:root {
/* ---- palette: warm paper + ink ---- */
--bg: #f3efe6; /* page: warm paper */
--surface: #fdfcf8; /* cards / panels: warm near-white */
--surface-2: #eae4d6; /* raised/inputs/hovers: deeper paper */
--line: #d8d0bd; /* borders: sandy */
--text: #23272d; /* ink */
--muted: #7b766a; /* warm gray */
/* accent family — apps override --accent with one of these (or anything) */
--c-blue: #2557d6;
--c-cyan: #0c8fa8;
--c-green: #178f52;
--c-orange: #e06d1f;
--c-red: #d6404f;
--c-purple: #6d3fd4;
--c-yellow: #c79410;
--accent: var(--c-blue);
/* status */
--ok: #178f52;
--warn: #c79410;
--err: #d6404f;
/* shape + type */
--radius: 8px;
--radius-sm: 6px;
--shadow: 0 2px 12px rgba(74, 60, 28, .10);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-display: "Big Shoulders", "Avenir Next Condensed", "Arial Narrow", var(--font);
}
/* ---- base ---- */
.b-reset, body[data-berm-app] {
font-family: var(--font);
background: var(--bg);
color: var(--text);
margin: 0;
-webkit-text-size-adjust: 100%;
}
/* ============================ shared header =============================== */
/* berm.js injects: home button + app title (display face) + Report issue. */
.b-header {
display: flex; align-items: center; gap: .65rem;
padding: .5rem .9rem;
background: var(--surface);
border-bottom: 3px solid var(--accent); /* each app's color stripe */
position: sticky; top: 0; z-index: 50;
}
.b-home {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: var(--radius-sm);
background: var(--surface-2); border: 1px solid var(--line);
color: var(--accent); text-decoration: none;
transition: border-color .15s, transform .1s;
}
.b-home:hover { border-color: var(--accent); transform: translateY(-1px); }
.b-home svg { width: 19px; height: 19px; }
.b-header-title {
font-family: var(--font-display);
font-weight: 700; font-size: 1.35rem;
letter-spacing: .045em; text-transform: uppercase;
}
.b-header-spacer { flex: 1; }
.b-report {
margin-left: auto;
font-size: .78rem; font-weight: 600; color: var(--muted);
text-decoration: none; border: 1px solid var(--line);
padding: .3rem .65rem; border-radius: 999px; background: var(--surface);
cursor: pointer; font-family: var(--font);
}
.b-report:hover { color: var(--accent); border-color: var(--accent); }
/* ============================== buttons ================================== */
.b-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
padding: .55rem 1rem; border: none; border-radius: var(--radius-sm);
background: var(--accent); color: #fff;
font-family: var(--font); font-size: .92rem; font-weight: 650;
cursor: pointer; text-decoration: none;
transition: filter .15s, transform .1s;
}
.b-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.b-btn:active { transform: none; }
.b-btn:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.b-btn--ok { background: var(--ok); }
.b-btn--danger { background: var(--err); }
.b-btn--ghost {
background: transparent; border: 1px solid var(--line); color: var(--text);
}
.b-btn--ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.b-btn--sm { padding: .35rem .7rem; font-size: .8rem; }
/* =============================== toggle ================================== */
.b-toggle { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .92rem; }
.b-toggle input { display: none; }
.b-toggle span {
width: 42px; height: 24px; border-radius: 12px; background: var(--surface-2);
border: 1px solid var(--line); position: relative; flex: none; transition: background .18s;
}
.b-toggle span::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
border-radius: 50%; background: #fff; border: 1px solid var(--line); box-sizing: border-box;
transition: transform .18s;
}
.b-toggle input:checked + span { background: var(--accent); border-color: var(--accent); }
.b-toggle input:checked + span::after { transform: translateX(18px); border-color: transparent; }
/* ========================= segmented control ============================= */
/* Inset-chip segmented control (iOS style): the selected state is a floating chip
inside a padded track. There are NO shared rounded corners between chip and track,
so corner-mismatch/clipping bugs (Safari inline-flex overflow) are impossible by
construction. (Feedback loop: "CSS issue on the split buttons", Spacer Cadet.) */
.b-seg {
display: inline-flex; gap: 2px; padding: 3px;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface-2);
/* Global overflow guard: if a layout squeezes a seg below its natural width,
wrap the chips onto a second line instead of overflowing the container
(chips look fine wrapped; bleeding over a card edge never does). */
max-width: 100%; flex-wrap: wrap; box-sizing: border-box;
}
.b-seg > button {
padding: .4rem .85rem; border: none; background: transparent; color: var(--muted);
font-family: var(--font); font-size: .88rem; font-weight: 600; cursor: pointer;
border-radius: calc(var(--radius-sm) - 3px);
}
.b-seg > button:hover { color: var(--text); }
.b-seg > button.on { background: var(--accent); color: #fff; }
/* ============================ inputs/forms ================================ */
.b-input, .b-select, .b-textarea {
width: 100%; box-sizing: border-box;
padding: .6rem .7rem; border-radius: var(--radius-sm);
border: 1px solid var(--line); background: #fff; color: var(--text);
font-family: var(--font); font-size: .95rem;
}
.b-input:focus, .b-select:focus, .b-textarea:focus {
outline: 2px solid var(--accent); outline-offset: -1px;
}
.b-label { display: block; font-size: .76rem; color: var(--muted); margin: .8rem 0 .3rem;
text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.b-range { accent-color: var(--accent); width: 100%; }
/* =============================== cards =================================== */
.b-card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 1rem 1.2rem;
}
.b-card--pop { box-shadow: var(--shadow); }
/* ============================ pills/badges ================================ */
.b-pill {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .76rem; font-weight: 650; padding: .22rem .65rem; border-radius: 999px;
border: 1px solid var(--line); color: var(--muted); background: var(--surface);
}
.b-pill--ok { color: var(--ok); border-color: var(--ok); background: rgba(23,143,82,.09); }
.b-pill--warn { color: var(--warn); border-color: var(--warn); background: rgba(199,148,16,.10); }
.b-pill--err { color: var(--err); border-color: var(--err); background: rgba(214,64,79,.09); }
/* ============================== progress ================================== */
.b-progress { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.b-progress > span { display: block; height: 100%; background: var(--accent);
border-radius: 4px; transition: width .4s; }
.b-progress > span.warn { background: var(--warn); }
.b-progress > span.err { background: var(--err); }
/* =============================== tables =================================== */
.b-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.b-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.b-table th {
text-align: left; padding: .5rem .6rem; color: var(--muted);
font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
border-bottom: 2px solid var(--line);
}
.b-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--surface-2); }
.b-table tr:hover td { background: rgba(37,87,214,.045); }
/* ============================= app grid =================================== */
.b-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .9rem; }
.b-app {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1rem .5rem; text-align: center; text-decoration: none; color: var(--text);
transition: border-color .15s, transform .12s, box-shadow .15s;
}
.b-app:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.b-app .icon {
width: 46px; height: 46px; border-radius: 10px; margin: 0 auto .5rem;
background: var(--surface-2); display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; overflow: hidden;
}
.b-app .icon img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; }
.b-app .name { font-size: .8rem; font-weight: 600; }
/* ============================ misc helpers ================================ */
.b-muted { color: var(--muted); }
.b-display { font-family: var(--font-display); font-weight: 700;
text-transform: uppercase; letter-spacing: .045em; }
.b-spin {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--surface-2); border-top-color: var(--accent);
animation: b-rot .8s linear infinite; display: inline-block;
}
@keyframes b-rot { to { transform: rotate(360deg); } }
/* ====================== report-issue modal (berm.js) ====================== */
.b-fb-overlay {
position: fixed; inset: 0; background: rgba(35,39,45,.45); z-index: 200;
display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.b-fb-modal {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); width: 100%; max-width: 420px; padding: 1.2rem 1.3rem;
font-family: var(--font); color: var(--text);
max-height: calc(100vh - 2rem); overflow-y: auto;
}
.b-fb-modal h3 { margin: 0 0 .25rem; font-family: var(--font-display); font-weight: 700;
text-transform: uppercase; letter-spacing: .045em; font-size: 1.15rem; }
.b-fb-modal .sub { color: var(--muted); font-size: .8rem; margin: 0 0 .8rem; }
.b-fb-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.b-fb-drop {
border: 2px dashed var(--line); border-radius: var(--radius-sm);
padding: 1rem .8rem; text-align: center; color: var(--muted); font-size: .85rem;
cursor: pointer; transition: border-color .15s, background .15s; background: #fff;
}
.b-fb-drop:hover, .b-fb-drop.drag { border-color: var(--accent); color: var(--accent);
background: rgba(37,87,214,.04); }
.b-fb-drop .thumb { display: flex; align-items: center; gap: .6rem; text-align: left; }
.b-fb-drop .thumb img { width: 52px; height: 52px; object-fit: cover;
border-radius: 6px; border: 1px solid var(--line); flex: none; }
.b-fb-drop .thumb .meta { font-size: .8rem; color: var(--text); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.b-fb-drop .thumb button { margin-left: auto; }
/* multi-screenshot grid (the report widget accepts several images) */
.b-fb-drop.has-shots { padding: .55rem; text-align: left; cursor: default; }
.b-fb-shots { display: flex; flex-wrap: wrap; gap: .55rem; }
.b-fb-shot { position: relative; width: 64px; }
.b-fb-shot .b-anno-target { display: block; width: 64px; height: 64px; padding: 0; border: 0;
background: none; cursor: pointer; position: relative; }
.b-fb-shot .b-anno-target img { width: 64px; height: 64px; object-fit: cover;
border-radius: 6px; border: 1px solid var(--line); display: block; }
/* the mark-up badge, scoped + sized for the small multi-shot thumbnail (beats the global rule) */
.b-fb-shot .b-anno-badge { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px;
border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
display: flex; align-items: center; justify-content: center; }
.b-fb-shot .b-anno-badge svg { width: 12px; height: 12px; }
/* the file input is driven entirely by the drop box — keep it hidden no matter what */
#bfb-shot { display: none !important; }
.b-fb-shot-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
font-size: .72rem; line-height: 1; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center; }
.b-fb-shot-x:hover { color: var(--err); border-color: var(--err); }
.b-fb-shot-meta { display: block; font-size: .62rem; color: var(--muted); text-align: center; margin-top: .12rem; }
.b-fb-shot-add { width: 64px; height: 64px; border: 2px dashed var(--line); border-radius: 6px;
background: #fff; color: var(--muted); cursor: pointer; font-family: var(--font);
display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1.1; }
.b-fb-shot-add span { font-size: .6rem; }
.b-fb-shot-add:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) {
.b-card { padding: .85rem .9rem; }
.b-btn { padding: .65rem 1rem; }
.b-header { padding: .45rem .65rem; }
.b-header-title { font-size: 1.2rem; }
}