/* ==========================================================================
spff.dev /useful — Complete Stylesheet (merged)
Palette: brand #2a7fff, brand-dark #195dcc, white
========================================================================== */
/* --- CSS variables --- */
:root{
--brand:#2a7fff;
--brand-dark:#195dcc;
--bg:#ffffff;
--text:#0f172a;
--muted:#6b7280;
--border:#e5e7eb;
--surface-1:#ffffff;
--surface-2:#f7f7f9;
--shadow:0 8px 24px rgba(0,0,0,.08);
--radius:16px;
--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--sans:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Helvetica Neue", Helvetica, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
@media (prefers-color-scheme: dark){
:root{
--bg:#0b1020;
--text:#e5e7eb;
--muted:#9ca3af;
--border:#1f2937;
--surface-1:#111831;
--surface-2:#0e152b;
--shadow:0 8px 24px rgba(0,0,0,.35);
}
}
/* --- Base --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--sans);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre,samp{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
/* --- Layout --- */
.container{max-width:1100px;margin:0 auto;padding:24px}
@media (min-width:1400px){ .container{max-width:1200px} }
.grid{display:grid;gap:16px;grid-template-columns:1fr;align-items:start}
@media (min-width:860px){ .grid{grid-template-columns:.85fr 1.15fr} } /* results get a bit more space */
@media (min-width:1400px){ .grid{grid-template-columns:.8fr 1.2fr} }
.lead{margin-top:4px;color:var(--muted)}
.breadcrumbs{font-size:14px;color:var(--muted);margin:4px 0 12px}
.breadcrumbs span{opacity:.6;margin:0 6px}
/* --- Cards --- */
.card{
background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);
padding:18px 16px;box-shadow:var(--shadow)
}
.card h2{margin:0 0 10px 0;font-size:18px}
/* --- Buttons --- */
/* --- Buttons (blue by default) --- */
.btn{
appearance:none;
border:1px solid var(--brand);
background:var(--brand);
color:#fff;
padding:9px 12px;
border-radius:12px;
font-weight:600;
cursor:pointer;
transition:transform .02s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn:active{transform:translateY(1px)}
/* Keep secondary/ghost variants if you ever need them */
.btn.secondary{background:#eef5ff;border-color:#dbeafe;color:#0b3b7a}
@media (prefers-color-scheme: dark){
.btn.secondary{background:#0f224a;border-color:#133068;color:#cfe0ff}
}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
/* Micro size used for "My TZ" */
.btn.micro{padding:5px 8px;font-size:12px;border-radius:10px}
/* --- Inputs --- */
.field{margin:12px 0}
.field label{display:block;font-weight:600;margin-bottom:6px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type="number"], select{
background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:10px;
padding:8px 10px;min-width:5rem
}
input[type="range"]{width:100%}
input[type="checkbox"], input[type="radio"], input[type="range"]{accent-color:var(--brand)}
label.chip{
display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);
border:1px solid var(--border);border-radius:999px;padding:8px 10px;user-select:none
}
label.chip input{accent-color:var(--brand)}
/* --- Results list --- */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.list-item{display:flex;gap:10px;align-items:center;justify-content:space-between}
.list-item code{
font-family:var(--mono);background:var(--surface-2);border:1px solid var(--border);
border-radius:12px;padding:10px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow-x:auto
}
.list-item .btn{flex:0 0 auto}
/* --- Meter chip --- */
.meter{
display:inline-flex;align-items:center;justify-content:center;gap:.5ch;
padding:6px 10px;border-radius:999px;font-weight:700;min-width:84px;text-align:center
}
.meter-bad{background:#b00020;color:#fff}
.meter-weak{background:#f08a1f;color:#000}
.meter-good{background:#2aa84a;color:#fff}
/* --- Actions bar (top) --- */
.actions-bar{
display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:6px
}
.actions-bar .btns{display:flex;gap:8px;flex-wrap:nowrap;flex:1 1 auto;min-width:0}
.actions-bar .btns .btn{white-space:nowrap;flex:0 0 auto}
.actions-bar .strength{display:flex;align-items:center;gap:8px;white-space:nowrap;flex:0 0 auto}
/* Small entropy line below the bar */
.entropy-note{margin:6px 0 10px;color:var(--muted);font-size:12px;text-align:right}
/* Hide strength + entropy note in Diceware mode */
section.card:has(input[name="mode"][value="passphrase"]:checked) .actions-bar .strength{display:none}
section.card:has(input[name="mode"][value="passphrase"]:checked) .entropy-note{display:none}
/* --- Header & Footer for _partials markup -------------------------------
----------------------------------------------------------------------- */
body > header{
background:linear-gradient(180deg, rgba(42,127,255,.10), transparent);
border-bottom:1px solid var(--border);
width:100%;
}
.header-bar{
max-width:1200px;margin:0 auto;padding:14px 24px;
display:flex;align-items:center;gap:16px;
}
.header-bar .brand{
display:inline-flex;align-items:center;gap:.6ch;
font-family:var(--sans);font-weight:800;letter-spacing:.2px;font-size:18px;
}
.header-bar .brand a{color:inherit;text-decoration:none}
.header-bar .brand a:hover{text-decoration:underline}
.header-bar .brand .brand-dot{
width:.6em;height:.6em;border-radius:50%;background:var(--brand);display:inline-block;
box-shadow:0 0 0 2px rgba(42,127,255,.15)
}
.header-bar .spacer{flex:1 1 auto}
.header-bar nav a{
padding:6px 8px;border-radius:8px;color:inherit;text-decoration:none
}
.header-bar nav a:hover{text-decoration:underline}
.header-bar nav a[aria-current="page"]{background:rgba(42,127,255,.12);text-decoration:none}
footer.footer{
border-top:1px solid var(--border);width:100%;padding:16px 24px;margin-top:24px;
font-size:14px;color:var(--muted);
display:flex;align-items:center;justify-content:center;gap:10px;
}
footer.footer a{color:inherit;text-decoration:none}
footer.footer a:hover{text-decoration:underline}
@media (prefers-color-scheme: dark){
.header-bar nav a[aria-current="page"]{background:rgba(42,127,255,.18)}
}
/* --- Utilities --- */
.muted{color:var(--muted)}
.tiny{font-size:12px}
code{border-radius:6px;padding:0 .25em}
/* About spacing */
.grid + details.card{ margin-top:16px }
main > .card + .card,
main > .card + details.card,
main > details.card + .card { margin-top:16px }
/* Dark tweaks */
@media (prefers-color-scheme: dark){
.list-item code{background:#0b1226}
.btn.secondary{background:#0f224a;border-color:#133068;color:#cfe0ff}
}
/* Focus ring color */
a:focus-visible{outline-color:var(--brand-dark)}
/* Time tool: dynamic grid with fewer gaps */
.time-grid{
display:grid;
gap:16px;
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
align-items:start; /* keep tops aligned even with different heights */
}
/* Micro button for “My TZ” */
.btn.micro{
padding:5px 8px;
font-size:12px;
border-radius:10px;
}
/* Quick pick chip buttons */
.quick-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.quick-row .chip-btn{
border:1px solid var(--border);
background:var(--surface-2);
padding:6px 10px;
border-radius:999px;
font-size:12px;
cursor:pointer;
}
.quick-row .chip-btn:hover{filter:brightness(0.98)}
/* Utilities (CSP-friendly) */
.fw-700{font-weight:700}
.tabnums{font-variant-numeric:tabular-nums}
.ml-auto{margin-left:auto}
.tr{text-align:right}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.fx-1{flex:1 1 0%}
.cursor-pointer{cursor:pointer}
/* Utilities already present… adding masonry + quick-row refinements */
/* Masonry layout: tightly pack cards without gaps */
.time-masonry{
column-width: 360px; /* target column width, browser chooses count */
column-gap: 16px;
}
.time-masonry .card{
display: inline-block;
width: 100%;
break-inside: avoid;
margin: 0 0 16px;
}
/* Quick picks row spacing now that buttons are .btn.micro */
.quick-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
/* Masonry (already added); list styling for countdowns */
.count-list{ list-style:none; padding:0; margin:8px 0 0 0; display:flex; flex-direction:column; gap:8px; }
.count-row{ border:1px solid var(--border); border-radius:12px; padding:10px; background:var(--surface-1); }
/* Ensure small buttons align nicely in rows */
.row .btn.micro{ align-self:center; }