microdash/styles.css

/* === Config-driven Ultra-compact 4-up • full-bleed header, crisp icons, tight bright glow === */

:root{
    /* fonts */
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono",
    "DejaVu Sans Mono", "Courier New", monospace;
    --sans: Inter, "Inter var", "InterVariable", "Public Sans",
    "Noto Sans", "Liberation Sans", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* greys + ink (JS can override) */
    --bg0:#202020; --panel:#121212; --tile:#202020;
    --ink:#f2f2f2; --ink-dim:#a9a9a9;

    /* accents (JS can override) */
    --blue:#3a85ff;   --blue-rgb:58,133,255;
    --green:#1fc66e;  --green-rgb:31,198,110;
    --red:#ff3f5d;    --red-rgb:255,63,93;
    --yellow:#ffdb33; --yellow-rgb:255,219,51;

    /* glow intensity/shape (JS can override) */
    --glow-core: 3px;
    --glow-blur: 7px;
    --glow-core-a: .95;
    --glow-outer-a: .64;

    /* layout (JS can override) */
    --page-max:2400;
    --gap-sec:14px;    /* between sections */
    --gap-item:10px;   /* between tiles */

    /* NEW: grid controls */
    --grid-cols: 6;       /* columns in section grid */
    --tile-colspan: 2;    /* default span for a tile (→ 3 per row with 6 cols) */

    --section-min:300px;
    --section-basis:320px;
    --section-max:340px;
    --tile-h:62px;

    /* header bg (JS overrides via --topbar-bg) */
    --topbar-bg:#101010;

    /* NEW: typography knobs */
    --section-title-px: 22;
    --item-label-px: 12;

    /* NEW: icon box size */
    --icon-box-pct: 85%;

    /* radii & shadows */
    --radius-sec:4px; --radius-tile:3px;
    --shadow-soft:0 2px 8px rgba(0,0,0,.30);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; color:var(--ink); background:var(--bg0);
    font:11.5px/1.35 var(--sans);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ================= HEADER (full-bleed) ================= */
.topbar{
    background:var(--topbar-bg);
    width:100%;
    margin:0 0 16px;
    padding:16px 18px;
    display:flex; align-items:center; gap:18px;
    box-sizing:border-box;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{ width:66px; height:66px; border-radius:12px; overflow:hidden; display:grid; place-items:center; }
.logo img{ width:100%; height:100%; object-fit:contain; image-rendering:auto; -ms-interpolation-mode:bicubic; }
.titles h1{ margin:0; font-weight:800; font-family:var(--mono); font-size:36px; line-height:1; letter-spacing:.2px }
.titles p{  margin:4px 0 0 0; color:#b8b8b8; font:italic 400 16px/1.25 var(--sans) }
.search{margin-left:auto}
.search input{
    width:360px; max-width:50vw;
    padding:10px 14px; border-radius:10px;
    background:#181818; color:var(--ink); border:none;
}

/* ================= SECTIONS ================= */
.wrap{
    /* FIX: use calc() so unitless --page-max is multiplied by px */
    max-width: min(95vw, calc(var(--page-max) * 1px));
    margin:0 auto 18px; padding:0 6px;
    display:flex; flex-wrap:wrap; gap:var(--gap-sec); align-items:flex-start;
}
.section{
    flex:1 1 var(--section-basis);
    min-width: var(--section-min);
    max-width: var(--section-max);
    background:var(--panel); border-radius:var(--radius-sec); overflow:hidden;
}

/* Section headers (monospace, configurable size) */
.section .head{
    display:flex; align-items:center; gap:8px; padding:8px 10px;
    font-weight:900; font-family:var(--mono); line-height:1;
    font-size: calc(var(--section-title-px) * 1px);
    letter-spacing:.08px; color:#0a0a0a;
}
.section .gear{margin-left:auto; opacity:.6; font-size:12px}

/* default accent by index */
.section[data-accent="1"] .head{ background:var(--blue); }
.section[data-accent="2"] .head{ background:var(--green); }
.section[data-accent="3"] .head{ background:var(--red); }
.section[data-accent="4"] .head{ background:var(--yellow); }

/* custom per-section accent */
.section.custom-accent .head{ background:var(--accent); }

/* === STRICT GRID INSIDE EACH SECTION === */
.grid{
    display:grid;
    gap:var(--gap-item);
    padding:var(--gap-item);
    background:var(--panel);

    /* NEW: 6-track grid by default */
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    grid-auto-rows: var(--tile-h);
    grid-auto-flow: row;
}

/* Default tile span (→ 3 per row with 6 cols) */
.tile{ grid-column: span var(--tile-colspan); }

.tile{
    position:relative;
    background:var(--tile);
    border:none; border-radius:var(--radius-tile);
    box-shadow:var(--shadow-soft);
    transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease;

    display:grid;
    grid-template-areas:"title" "icon";
    grid-template-rows: 44% 56%;
    padding:5px;

    color:var(--ink);
    text-decoration:none;
}
.tile:link, .tile:visited, .tile:hover, .tile:active{
    color:var(--ink); text-decoration:none;
}
.tile:hover{ transform:translateY(-1px); }

/* Hover underglow: tighter + brighter, config controlled */
.section[data-accent="1"] .tile:hover{
    box-shadow:
    0 2px 7px rgba(0,0,0,.24),
    0 0 var(--glow-core) rgba(var(--blue-rgb), var(--glow-core-a)),
    0 0 var(--glow-blur) rgba(var(--blue-rgb), var(--glow-outer-a));
}
.section[data-accent="2"] .tile:hover{
    box-shadow:
    0 2px 7px rgba(0,0,0,.24),
    0 0 var(--glow-core) rgba(var(--green-rgb), var(--glow-core-a)),
    0 0 var(--glow-blur) rgba(var(--green-rgb), var(--glow-outer-a));
}
.section[data-accent="3"] .tile:hover{
    box-shadow:
    0 2px 7px rgba(0,0,0,.24),
    0 0 var(--glow-core) rgba(var(--red-rgb), var(--glow-core-a)),
    0 0 var(--glow-blur) rgba(var(--red-rgb), var(--glow-outer-a));
}
.section[data-accent="4"] .tile:hover{
    box-shadow:
    0 2px 7px rgba(0,0,0,.24),
    0 0 var(--glow-core) rgba(var(--yellow-rgb), var(--glow-core-a)),
    0 0 var(--glow-blur) rgba(var(--yellow-rgb), var(--glow-outer-a));
}

/* custom-accent hover */
.section.custom-accent .tile:hover{
    box-shadow:
    0 2px 7px rgba(0,0,0,.24),
    0 0 var(--glow-core) rgba(var(--accent-rgb), var(--glow-core-a)),
    0 0 var(--glow-blur) rgba(var(--accent-rgb), var(--glow-outer-a));
}

/* Item title (white, normal case, configurable size) */
.tile > div:nth-child(2){ grid-area:title; display:grid; place-items:start center; text-align:center; }
.label{
    margin:0;
    font-family:var(--sans);
    font-weight:700; font-style:normal;
    letter-spacing:.05px; line-height:1.1;
    font-size: calc(var(--item-label-px) * 1px);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    color:var(--ink); text-decoration:none;
}
.sub{ display:none; }

/* Icon block — big & crisp (configurable box size) */
.icon{
    grid-area:icon; place-self:end center;
    width: var(--icon-box-pct); height: var(--icon-box-pct);
    display:flex; align-items:center; justify-content:center;
    font-size:clamp(24px, 9vw, 48px);
    line-height:1; margin-bottom:4px; background:none;
}
.icon img, .icon svg{
    display:block; max-width:100%; max-height:100%;
    object-fit:contain; image-rendering:auto; -ms-interpolation-mode:bicubic;
    transform: scale(var(--icon-scale, 1)); transform-origin:center bottom;
}
.icon svg{ shape-rendering:geometricPrecision; text-rendering:optimizeLegibility }

/* Status dot */
.dot{
    --ok:#00e676; --down:#ff3d57;
    position:absolute; left:5px; bottom:5px;
    width:7px; height:7px; border-radius:50%; background:var(--ok);
}
.dot.down{ background:var(--down); }

/* Focus states (accessibility) */
.section[data-accent="1"] .tile:focus-visible{ outline:2px solid var(--blue);   outline-offset:2px; }
.section[data-accent="2"] .tile:focus-visible{ outline:2px solid var(--green);  outline-offset:2px; }
.section[data-accent="3"] .tile:focus-visible{ outline:2px solid var(--red);    outline-offset:2px; }
.section[data-accent="4"] .tile:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }
.section.custom-accent .tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    * { transition: none !important; }
    .tile:hover{ transform:none; }
}