collapsible (.sfj-disclosure) */
.sfj-disclosure {
background: var(--sfj-surface);
border: 1px solid var(--sfj-hairline);
border-radius: 12px;
overflow: hidden;
transition: border-color var(--sfj-duration) var(--sfj-ease);
}
.sfj-disclosure:hover {
border-color: rgba(21, 125, 200, 0.25);
}
.sfj-disclosure__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.35rem;
color: var(--sfj-ink);
font-weight: 600;
font-size: 1.02rem;
cursor: pointer;
list-style: none;
transition: color var(--sfj-duration) var(--sfj-ease);
}
.sfj-disclosure__summary::-webkit-details-marker {
display: none;
}
.sfj-disclosure__summary:hover,
.sfj-disclosure[open] .sfj-disclosure__summary {
color: var(--sfj-accent);
}
.sfj-disclosure__chevron {
flex-shrink: 0;
color: var(--sfj-mute);
transition: transform var(--sfj-duration-md) var(--sfj-ease);
}
.sfj-disclosure[open] .sfj-disclosure__chevron {
transform: rotate(180deg);
}
.sfj-disclosure__body {
padding: 0 1.35rem 1.25rem;
color: var(--sfj-ink-soft);
}
/* CTA panel */
.sfj-panel {
background: var(--sfj-surface-soft);
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-xl);
padding: var(--sfj-space-7);
text-align: center;
}
@media (min-width: 577px) {
.sfj-panel {
padding: var(--sfj-space-10);
}
}
/* Constrained, centered body copy (kit.CTAPanel Body). */
.sfj-panel__body {
max-width: 520px;
margin-inline: auto;
}
.sfj-panel__actions {
margin-top: var(--sfj-space-6);
display: flex;
gap: var(--sfj-space-3);
justify-content: center;
flex-wrap: wrap;
}
/* Person card (about page) */
.sfj-person {
display: grid;
grid-template-columns: 1fr;
gap: var(--sfj-space-6);
padding-block: var(--sfj-space-8);
border-bottom: 1px solid var(--sfj-hairline);
align-items: start;
}
.sfj-person:last-child {
border-bottom: 0;
}
@media (min-width: 768px) {
.sfj-person {
grid-template-columns: 1fr 220px;
gap: var(--sfj-space-10);
}
.sfj-person__photo {
order: 0;
max-width: 220px;
}
}
.sfj-person__name {
font-size: var(--sfj-text-3xl);
font-weight: 600;
color: var(--sfj-ink);
margin: 0 0 0.25rem;
letter-spacing: -0.015em;
}
.sfj-person__role {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: var(--sfj-track-eyebrow);
text-transform: uppercase;
color: var(--sfj-accent);
margin-bottom: var(--sfj-space-4);
}
.sfj-person__photo {
width: 100%;
max-width: 180px;
order: -1;
border-radius: var(--sfj-radius-lg);
overflow: hidden;
background: var(--sfj-surface-tint);
aspect-ratio: 1 / 1;
}
.sfj-person__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ===========================================================
8. Comparison table + tab switcher
=========================================================== */
.sfj-tabs {
display: inline-flex;
background: var(--sfj-surface-tint);
border-radius: var(--sfj-radius-pill);
padding: 4px;
gap: 2px;
}
.sfj-tabs__btn {
border: 0;
background: transparent;
color: var(--sfj-ink-soft);
font-family: inherit;
font-weight: 600;
font-size: 0.95rem;
padding: 0.55rem 1.4rem;
border-radius: var(--sfj-radius-pill);
cursor: pointer;
transition:
background-color var(--sfj-duration) var(--sfj-ease),
color var(--sfj-duration) var(--sfj-ease);
}
.sfj-tabs__btn:hover {
color: var(--sfj-accent);
}
.sfj-tabs__btn[aria-selected="true"],
.sfj-tabs__btn.is-active {
background: #ffffff;
color: var(--sfj-accent);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
/* Panels owned by kit.Tabs (chrome.js toggles data-tab → data-panel
via the hidden attribute; .sfj-tabs__panel is a hook class only). */
.sfj-tabs__panels {
margin-top: var(--sfj-space-4);
}
.sfj-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--sfj-surface);
border-radius: var(--sfj-radius-lg);
overflow: hidden;
border: 1px solid var(--sfj-hairline);
}
.sfj-table thead th {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sfj-mute);
background: var(--sfj-surface-soft);
border-bottom: 1px solid var(--sfj-hairline);
padding: 0.95rem 1rem;
text-align: left;
white-space: nowrap;
}
.sfj-table tbody td {
padding: 0.95rem 1rem;
font-size: 0.97rem;
color: var(--sfj-ink-soft);
border-bottom: 1px solid var(--sfj-hairline);
vertical-align: middle;
font-variant-numeric: tabular-nums;
}
.sfj-table tbody tr:last-child td {
border-bottom: 0;
}
.sfj-table tbody tr.is-ours td {
background: rgba(21, 125, 200, 0.04);
color: var(--sfj-ink);
}
.sfj-table .is-ours-price {
color: var(--sfj-accent-strong);
font-weight: 700;
}
.sfj-table .is-savings {
color: var(--sfj-savings);
font-weight: 600;
}
/* Inline country flag (used in sammenligning Eierskap column).
Use .sfj-flag-cell on the | 's inner span to keep flag + label
on one visual run; inline-flex with nowrap prevents the flag
from getting orphaned above the text when the cell is narrow. */
.sfj-flag {
display: inline-block;
vertical-align: -3px;
margin-right: 0.5rem;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
flex-shrink: 0;
}
.sfj-flag-cell {
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.sfj-flag-cell .sfj-flag {
margin-right: 0;
}
/* ===========================================================
9. Forms
=========================================================== */
.sfj-form-card {
background: var(--sfj-surface);
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-xl);
padding: var(--sfj-space-6);
}
@media (min-width: 577px) {
.sfj-form-card {
padding: var(--sfj-space-8);
}
}
.sfj-field {
margin-bottom: var(--sfj-space-4);
}
.sfj-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--sfj-ink);
margin-bottom: 0.4rem;
}
.sfj-input,
.sfj-textarea,
.sfj-select {
width: 100%;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
padding: 0.7rem 0.9rem;
font-family: inherit;
font-size: var(--sfj-text-base);
color: var(--sfj-ink);
background: var(--sfj-surface);
transition:
border-color var(--sfj-duration) var(--sfj-ease),
box-shadow var(--sfj-duration) var(--sfj-ease);
}
.sfj-input:focus,
.sfj-textarea:focus,
.sfj-select:focus {
border-color: var(--sfj-accent);
box-shadow: var(--sfj-shadow-focus);
outline: none;
}
.sfj-input::placeholder,
.sfj-textarea::placeholder {
color: var(--sfj-mute);
}
.sfj-textarea {
resize: vertical;
min-height: 7rem;
}
/* Drop the native select chrome so the control matches .sfj-input
exactly (same height + border), then draw our own chevron. */
.sfj-select {
appearance: none;
-webkit-appearance: none;
padding-right: 2.6rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.9rem center;
background-size: 1rem;
}
/* Number inputs render native spinners that break the field rhythm;
strip them so they read like every other .sfj-input. */
.sfj-input[type="number"] {
appearance: textfield;
-webkit-appearance: textfield;
}
.sfj-input[type="number"]::-webkit-outer-spin-button,
.sfj-input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* kit.SearchBox rides on .sfj-input; the extra class only hides
webkit's unstylable native clear button. */
.sfj-searchbox::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
/* ===========================================================
10. Hero + subhero
=========================================================== */
.sfj-hero {
position: relative;
overflow: hidden;
isolation: isolate;
min-height: 480px;
padding-top: 76px;
display: flex;
align-items: center;
color: #ffffff;
}
@media (min-width: 577px) {
.sfj-hero {
min-height: 540px;
padding-top: 80px;
}
}
@media (min-width: 992px) {
.sfj-hero {
min-height: 620px;
padding-top: 0;
}
}
/* Photo arrives as style="--sfj-hero-bg:url('…')" (kit hero.go). */
.sfj-hero__bg {
position: absolute;
inset: 0;
background-image: var(--sfj-hero-bg, none);
background-size: cover;
background-position: center;
z-index: 0;
}
.sfj-hero__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(8, 22, 45, 0.55) 0%,
rgba(8, 22, 45, 0.65) 100%
);
}
@media (min-width: 992px) {
.sfj-hero__scrim {
background:
linear-gradient(
90deg,
var(--sfj-scrim-deep) 0%,
var(--sfj-scrim-mid) 45%,
var(--sfj-scrim-soft) 75%,
rgba(8, 22, 45, 0.15) 100%
),
linear-gradient(
180deg,
rgba(8, 22, 45, 0.15) 0%,
rgba(8, 22, 45, 0.35) 100%
);
}
}
.sfj-hero__inner {
position: relative;
z-index: 2;
width: 100%;
padding-block: var(--sfj-space-20);
}
.sfj-hero__title {
font-size: 2rem;
line-height: var(--sfj-leading-tight);
letter-spacing: var(--sfj-track-tight);
font-weight: 600;
color: #ffffff;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
margin: 0 0 1.1rem;
}
/* "lokale" accent word - light sky over dark hero, with an
underline rule that matches production .hero-title .accent. */
.sfj-hero__title .sfj-accent {
color: var(--sfj-accent-on-dark);
position: relative;
white-space: nowrap;
}
.sfj-hero__title .sfj-accent::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--sfj-accent-on-dark);
border-radius: 2px;
}
.sfj-hero__lede {
font-size: 1.15rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
max-width: 560px;
margin: 0 0 1.75rem;
}
.sfj-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
margin-bottom: 1.5rem;
}
/* Copy column width is a custom property so callers can override it
(kit hero.go sets --sfj-hero-copy-max inline). */
.sfj-hero__copy {
max-width: var(--sfj-hero-copy-max, 640px);
}
.sfj-hairline.sfj-hero__rule {
max-width: 560px;
margin-block: var(--sfj-space-6);
}
@media (min-width: 577px) {
.sfj-hero__title {
font-size: 2.6rem;
}
}
@media (min-width: 992px) {
.sfj-hero__title {
font-size: var(--sfj-text-7xl);
}
}
/* Subhero - simpler, no photo by default */
.sfj-subhero {
position: relative;
padding: 5.75rem 0 2.5rem;
background: var(--sfj-surface);
border-bottom: 1px solid var(--sfj-hairline);
overflow: hidden;
}
@media (min-width: 577px) {
.sfj-subhero {
padding: 6.5rem 0 3rem;
}
}
@media (min-width: 992px) {
.sfj-subhero {
padding: 5.5rem 0 4rem;
}
}
.sfj-subhero__title {
font-size: 1.8rem;
line-height: 1.1;
letter-spacing: -0.022em;
font-weight: 600;
color: var(--sfj-ink);
margin: var(--sfj-space-4) 0 var(--sfj-space-4);
}
@media (min-width: 577px) {
.sfj-subhero__title {
font-size: 2.2rem;
}
}
@media (min-width: 992px) {
.sfj-subhero__title {
font-size: var(--sfj-text-6xl);
}
}
.sfj-subhero__lede {
font-size: var(--sfj-text-lg);
line-height: 1.55;
color: var(--sfj-ink-soft);
max-width: 620px;
margin: 0;
}
/* Subhero - photo variant */
.sfj-subhero--photo {
background: var(--sfj-surface-dark);
border-bottom: 0;
color: #ffffff;
}
.sfj-subhero--photo .sfj-subhero__title {
color: #ffffff;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.sfj-subhero--photo .sfj-subhero__lede {
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}
.sfj-subhero__bg {
position: absolute;
inset: 0;
background-image: var(--sfj-hero-bg, none);
background-size: cover;
background-position: center;
z-index: 0;
opacity: 0.85;
}
.sfj-subhero__scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
var(--sfj-scrim-deep) 0%,
rgba(8, 22, 45, 0.5) 60%,
rgba(8, 22, 45, 0.3) 100%
),
linear-gradient(180deg, rgba(8, 22, 45, 0.2) 0%, rgba(8, 22, 45, 0.4) 100%);
}
.sfj-subhero__inner {
position: relative;
z-index: 2;
}
/* ===========================================================
11. Nav + footer chrome
=========================================================== */
.sfj-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sfj-space-6);
padding-block: var(--sfj-space-4);
}
.sfj-nav__brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.sfj-nav__brand img {
height: 52px;
width: auto;
display: block;
}
@media (min-width: 601px) {
.sfj-nav__brand img {
height: 72px;
}
}
.sfj-nav__links {
display: none;
gap: var(--sfj-space-6);
list-style: none;
padding: 0;
margin: 0;
align-items: center;
}
.sfj-nav__link {
color: var(--sfj-ink);
font-weight: 500;
font-size: 0.97rem;
text-decoration: none;
transition: color var(--sfj-duration) var(--sfj-ease);
}
.sfj-nav__link:hover,
.sfj-nav__link.is-active {
color: var(--sfj-accent);
}
.sfj-footer {
background: var(--sfj-surface);
border-top: 1px solid var(--sfj-hairline);
padding-block: var(--sfj-space-12);
font-size: 0.95rem;
color: var(--sfj-ink-soft);
}
.sfj-footer a {
color: inherit;
transition: color var(--sfj-duration) var(--sfj-ease);
}
.sfj-footer a:hover {
color: var(--sfj-accent);
}
/* Footer brand column + bottom strip (kit nav.go Footer). The __social
rule pins hover too, suppressing the footer-standard accent hover. */
.sfj-footer__logo {
height: 44px;
width: auto;
display: block;
margin-bottom: var(--sfj-space-4);
}
.sfj-footer__tagline {
max-width: 360px;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sfj-space-6);
align-items: start;
}
.footer-col h6 {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--sfj-ink);
margin-bottom: var(--sfj-space-3);
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--sfj-space-2);
}
@media (min-width: 721px) {
.footer-grid {
grid-template-columns: 2fr 1fr 1fr;
gap: var(--sfj-space-8);
}
}
.sfj-footer a.sfj-footer__social,
.sfj-footer a.sfj-footer__social:hover {
color: var(--sfj-ink-soft);
}
.sfj-footer__bottom {
margin-top: var(--sfj-space-10);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--sfj-space-4);
}
.sfj-footer__bottom p {
margin: 0;
}
.sfj-footer__socials {
display: flex;
gap: var(--sfj-space-3);
}
/* Floating back-to-top button; chrome.js queries '.back-top' and
toggles .is-visible past 600px scroll, so the class name stays
unprefixed. */
.back-top {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 60;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--sfj-radius-pill);
background: var(--sfj-accent);
color: #ffffff;
box-shadow: var(--sfj-shadow-float);
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition:
opacity var(--sfj-duration) var(--sfj-ease),
transform var(--sfj-duration) var(--sfj-ease),
background var(--sfj-duration) var(--sfj-ease);
}
.back-top.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.back-top:hover {
background: var(--sfj-accent-strong);
}
/* ===========================================================
12. Utilities
=========================================================== */
.sfj-stack-1 > * + * {
margin-top: var(--sfj-space-1);
}
.sfj-stack-2 > * + * {
margin-top: var(--sfj-space-2);
}
.sfj-stack-3 > * + * {
margin-top: var(--sfj-space-3);
}
.sfj-stack-4 > * + * {
margin-top: var(--sfj-space-4);
}
.sfj-stack-6 > * + * {
margin-top: var(--sfj-space-6);
}
.sfj-stack-8 > * + * {
margin-top: var(--sfj-space-8);
}
.sfj-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--sfj-space-3);
align-items: center;
}
/* Trust strip - inline checks + labels under a hero */
.sfj-trust {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
color: var(--sfj-ink-soft);
font-size: 0.95rem;
font-weight: 500;
}
.sfj-trust__item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.sfj-trust__item svg {
color: var(--sfj-accent);
flex-shrink: 0;
}
.sfj-trust--on-dark {
color: rgba(255, 255, 255, 0.92);
}
.sfj-trust--on-dark .sfj-trust__item svg {
color: var(--sfj-accent-on-dark);
}
/* Icon helpers - sized presets */
.sfj-icon {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: -0.18em;
color: currentColor;
flex-shrink: 0;
}
.sfj-icon--sm {
width: 16px;
height: 16px;
}
.sfj-icon--lg {
width: 24px;
height: 24px;
}
.sfj-icon--xl {
width: 40px;
height: 40px;
}
/* Long-form prose */
.sfj-prose {
max-width: 760px;
font-family: var(--sfj-font-sans);
}
.sfj-prose h2,
.sfj-prose h3 {
font-size: 1.4rem;
font-weight: 600;
color: var(--sfj-ink);
letter-spacing: -0.012em;
margin: 2.25rem 0 0.85rem;
}
.sfj-prose h2:first-child,
.sfj-prose h3:first-child {
margin-top: 0;
}
.sfj-prose p {
font-size: var(--sfj-text-md);
line-height: var(--sfj-leading-prose);
color: var(--sfj-ink-soft);
margin: 0 0 1rem;
}
.sfj-prose a {
color: var(--sfj-accent-strong);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(21, 125, 200, 0.3);
}
.sfj-prose a:hover {
color: var(--sfj-accent-strong);
border-bottom-color: var(--sfj-accent);
}
.sfj-prose ul,
.sfj-prose ol {
padding-left: 1.25rem;
list-style-position: outside;
margin: 0 0 1rem;
}
.sfj-prose li {
font-size: var(--sfj-text-md);
line-height: var(--sfj-leading-prose);
color: var(--sfj-ink-soft);
margin-bottom: 0.4rem;
}
/* -----------------------------------------------------------
Subpage helpers
Added for the full-site UI kit: subhero eyebrow positioning,
coverage cards, product-row helpers, contact list, social
tile, mobile-nav burger + slideout.
----------------------------------------------------------- */
/* Subhero eyebrow gets its own bottom-margin slot. */
.sfj-subhero__eyebrow {
margin-bottom: var(--sfj-space-4);
}
/* Inverse status pill (green dot) - used on utbygging "ferdig". */
.sfj-status--green {
background: var(--sfj-success-soft);
border-color: rgba(21, 200, 29, 0.2);
color: var(--sfj-success-text);
}
.sfj-status--green .sfj-status__dot {
background: #1cc815;
box-shadow: 0 0 0 0 rgba(28, 200, 21, 0.55);
}
/* Coverage card - utbygging.html lists each project as a card */
.sfj-coverage-card {
background: var(--sfj-surface);
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-xl);
padding: var(--sfj-space-8);
height: 100%;
}
.sfj-coverage-card__title {
font-size: 1.7rem;
font-weight: 600;
color: var(--sfj-ink);
letter-spacing: -0.015em;
margin: 0 0 var(--sfj-space-4);
}
.sfj-coverage-card__addresses {
font-size: 0.92rem;
color: var(--sfj-ink-soft);
line-height: 1.6;
margin: 0 0 var(--sfj-space-6);
word-break: break-word;
}
.sfj-coverage-card__addresses strong {
color: var(--sfj-ink);
font-weight: 600;
}
/* Product / showcase row title + tag (alternative to .sfj-h3) */
.sfj-product__tag {
display: inline-block;
font-size: var(--sfj-text-xs);
font-weight: 700;
letter-spacing: var(--sfj-track-eyebrow);
text-transform: uppercase;
color: var(--sfj-accent);
margin-bottom: var(--sfj-space-3);
}
.sfj-product__title {
font-size: 1.6rem;
line-height: 1.2;
letter-spacing: var(--sfj-track-tighter);
font-weight: 600;
color: var(--sfj-ink);
margin: 0 0 var(--sfj-space-4);
}
@media (min-width: 992px) {
.sfj-product__title {
font-size: var(--sfj-text-4xl);
}
}
/* Inline contact list (mail / phone, used in borettslag + om-oss) */
.sfj-contact-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: var(--sfj-space-5);
}
.sfj-contact-item {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.4rem 0;
color: var(--sfj-ink);
font-size: 1.02rem;
font-weight: 500;
text-decoration: none;
transition: color var(--sfj-duration) var(--sfj-ease);
}
.sfj-contact-item svg {
color: var(--sfj-accent);
flex-shrink: 0;
width: 20px;
height: 20px;
}
.sfj-contact-item:hover {
color: var(--sfj-accent);
}
/* Hours table (in contact section) */
.sfj-hours {
margin-top: var(--sfj-space-7);
}
.sfj-hours__label {
font-size: var(--sfj-text-xs);
font-weight: 700;
letter-spacing: var(--sfj-track-eyebrow);
text-transform: uppercase;
color: var(--sfj-mute);
margin-bottom: var(--sfj-space-3);
}
.sfj-hours__list {
list-style: none;
padding: 0;
margin: 0;
max-width: 320px;
}
.sfj-hours__list li {
display: flex;
justify-content: space-between;
padding: 0.4rem 0;
font-size: 0.97rem;
color: var(--sfj-ink-soft);
border-bottom: 1px solid var(--sfj-hairline);
font-variant-numeric: tabular-nums;
}
.sfj-hours__list li:last-child {
border-bottom: 0;
}
/* Person card (used on om-oss) inherits .sfj-person; add bio + email */
.sfj-person__copy {
min-width: 0;
}
.sfj-person__bio {
color: var(--sfj-ink-soft);
}
.sfj-person__bio p {
margin-bottom: var(--sfj-space-4);
}
.sfj-person__email {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--sfj-accent);
font-weight: 600;
text-decoration: none;
margin-top: var(--sfj-space-3);
border-bottom: 1px solid rgba(21, 125, 200, 0.3);
transition: border-color var(--sfj-duration) var(--sfj-ease);
}
.sfj-person__email svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.sfj-person__email:hover {
border-bottom-color: var(--sfj-accent);
}
/* -----------------------------------------------------------
Mobile navigation
- .sfj-nav__burger button (visible <992px)
- .sfj-nav__panel slide-in drawer
----------------------------------------------------------- */
.sfj-nav__burger {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
color: var(--sfj-ink);
cursor: pointer;
}
.sfj-nav__burger:hover {
color: var(--sfj-accent);
border-color: var(--sfj-accent);
}
.sfj-nav__panel {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
z-index: 100;
display: none;
align-items: stretch;
justify-content: flex-end;
}
.sfj-nav__panel[data-open="true"] {
display: flex;
}
.sfj-nav__panel-inner {
background: var(--sfj-surface);
width: min(100%, 320px);
padding: var(--sfj-space-8) var(--sfj-space-6);
display: flex;
flex-direction: column;
gap: var(--sfj-space-2);
overflow-y: auto;
animation: sfj-slide-in 0.2s var(--sfj-ease);
}
@keyframes sfj-slide-in {
from {
transform: translateX(20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.sfj-nav__panel-close {
align-self: flex-end;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
color: var(--sfj-ink);
cursor: pointer;
margin-bottom: var(--sfj-space-4);
}
.sfj-nav__panel ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sfj-space-1);
}
.sfj-nav__panel a {
display: block;
padding: 0.85rem 0;
color: var(--sfj-ink);
font-size: 1.1rem;
font-weight: 500;
border-bottom: 1px solid var(--sfj-hairline);
transition: color var(--sfj-duration) var(--sfj-ease);
}
.sfj-nav__panel a:hover,
.sfj-nav__panel a.is-active {
color: var(--sfj-accent);
}
.sfj-nav__panel .sfj-btn {
width: 100%;
margin-top: var(--sfj-space-6);
}
/* Hide the desktop CTA until the breakpoint (the burger/drawer carry
the small-screen nav). */
.sfj-nav__cta-desktop {
display: none;
}
/* Toggle desktop links / burger at the breakpoint */
@media (min-width: 992px) {
.sfj-nav__links {
display: flex;
}
.sfj-nav__burger {
display: none;
}
.sfj-nav__cta-desktop {
display: inline-flex;
}
}
@media (min-width: 992px) {
.sfj-nav__panel {
display: none !important;
}
}
/* ===========================================================
13. App shell — sidebar + topbar + content
(FiberDB admin / CRM. Marketing pages don't use this.)
=========================================================== */
.sfj-app {
display: grid;
grid-template-columns: 1fr;
min-height: 100vh;
background: var(--sfj-surface-soft);
}
/* ----- Sidebar (mobile: off-canvas drawer. desktop: sticky 240px column,
restored in the min-width:992 block below.) ----- */
.sfj-sidebar {
background: #ffffff;
border-right: 1px solid var(--sfj-hairline);
padding: 1.25rem 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 60;
width: 280px;
align-self: start;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.2s var(--sfj-ease);
box-shadow: 0 0 0 0 rgba(15, 23, 42, 0);
}
.sfj-app[data-drawer="open"] .sfj-sidebar {
transform: translateX(0);
box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.25);
}
.sfj-app[data-drawer="open"] .sfj-sidebar__scrim {
display: block;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.4);
z-index: 55;
animation: sfj-fade-in 0.15s var(--sfj-ease);
}
.sfj-sidebar__brand {
display: flex;
align-items: center;
padding: 0 0.5rem;
min-width: 0;
}
.sfj-sidebar__brand img {
width: 100%;
height: auto;
max-height: 40px;
display: block;
}
/* Two logo lockups live in the brand link: the full wordmark and an S-only
mark used in the collapsed icon-rail. CSS swaps between them.
The selectors below are deliberately scoped to .sfj-sidebar__brand so they
beat the generic `.sfj-sidebar__brand img` rule above. */
.sfj-sidebar__brand .sfj-sidebar__brand-full {
display: block;
}
.sfj-sidebar__brand .sfj-sidebar__brand-mark {
display: none;
}
/* Brand row holds logo + the collapse toggle on desktop. */
.sfj-sidebar__brand-row {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.sfj-sidebar__brand-row .sfj-sidebar__brand {
flex: 1;
min-width: 0;
}
.sfj-sidebar__collapse {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: var(--sfj-radius-md);
border: 1px solid var(--sfj-hairline);
background: #ffffff;
color: var(--sfj-mute);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
color var(--sfj-duration) var(--sfj-ease),
border-color var(--sfj-duration) var(--sfj-ease),
background-color var(--sfj-duration) var(--sfj-ease);
}
.sfj-sidebar__collapse:hover {
color: var(--sfj-accent);
border-color: var(--sfj-accent);
background: var(--sfj-accent-soft);
}
.sfj-sidebar__collapse svg {
width: 14px;
height: 14px;
transform: rotate(180deg);
transition: transform var(--sfj-duration) var(--sfj-ease);
}
/* When collapsed, the chevron points the other way (to expand). */
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__collapse svg {
transform: rotate(0deg);
}
/* Scrim that appears behind the open drawer on mobile. */
.sfj-sidebar__scrim {
display: none;
}
.sfj-sidebar__env {
margin: 0 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--sfj-accent-soft);
border-radius: var(--sfj-radius-md);
color: var(--sfj-accent-strong);
font-size: 0.78rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sfj-sidebar__env--prod {
background: rgba(28, 200, 21, 0.13);
color: var(--sfj-success-text);
}
.sfj-sidebar__env--staging {
background: rgba(180, 83, 9, 0.1);
color: var(--sfj-warning);
}
.sfj-sidebar__env-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.sfj-sidebar__group {
display: flex;
flex-direction: column;
gap: 1px;
}
.sfj-sidebar__group-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sfj-mute);
padding: 0.75rem 0.75rem 0.4rem;
}
.sfj-sidebar__link {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.5rem 0.75rem;
border-radius: var(--sfj-radius-md);
color: var(--sfj-ink-soft);
font-size: 0.93rem;
font-weight: 500;
text-decoration: none;
transition:
background-color var(--sfj-duration) var(--sfj-ease),
color var(--sfj-duration) var(--sfj-ease);
position: relative;
}
.sfj-sidebar__link svg {
width: 18px;
height: 18px;
color: var(--sfj-mute);
flex-shrink: 0;
transition: color var(--sfj-duration) var(--sfj-ease);
}
.sfj-sidebar__link:hover {
background: rgba(15, 23, 42, 0.035);
color: var(--sfj-ink);
}
.sfj-sidebar__link:hover svg {
color: var(--sfj-ink);
}
.sfj-sidebar__link.is-active {
background: var(--sfj-accent-soft);
color: var(--sfj-accent-strong);
font-weight: 600;
}
.sfj-sidebar__link.is-active svg {
color: var(--sfj-accent);
}
.sfj-sidebar__link-count {
margin-left: auto;
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
color: var(--sfj-mute);
background: var(--sfj-surface-tint);
padding: 0.05rem 0.45rem;
border-radius: var(--sfj-radius-pill);
font-weight: 600;
}
.sfj-sidebar__link.is-active .sfj-sidebar__link-count {
background: #ffffff;
color: var(--sfj-accent-strong);
}
.sfj-sidebar__spacer {
flex: 1;
}
.sfj-sidebar__user {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 0.75rem;
border-top: 1px solid var(--sfj-hairline);
margin-top: 0.5rem;
}
.sfj-sidebar__user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--sfj-accent-soft);
color: var(--sfj-accent-strong);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
}
.sfj-sidebar__user-name {
font-size: 0.88rem;
color: var(--sfj-ink);
font-weight: 600;
line-height: 1.2;
}
.sfj-sidebar__user-role {
font-size: 0.74rem;
color: var(--sfj-mute);
}
/* ----- Collapsed sidebar (icon-rail). Triggered by data-sidebar="collapsed"
on .sfj-app. Persisted across pages via localStorage in chrome.js.
Default state for FiberDB is COLLAPSED.
Scoped to desktop — on mobile the sidebar is an off-canvas drawer and
the collapse distinction doesn't apply. ----- */
@media (min-width: 992px) {
.sfj-app[data-sidebar="collapsed"] {
grid-template-columns: 64px 1fr;
}
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar {
padding: 1rem 0.4rem 0.75rem;
gap: 0.65rem;
overflow: hidden;
}
/* In collapsed mode the brand row stacks: small icon-mark + toggle below. */
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__brand-row {
flex-direction: column;
gap: 0.4rem;
padding: 0;
}
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__brand {
padding: 0;
width: 36px;
height: 36px;
overflow: hidden;
}
.sfj-app[data-sidebar="collapsed"]
.sfj-sidebar__brand
.sfj-sidebar__brand-full {
display: none;
}
.sfj-app[data-sidebar="collapsed"]
.sfj-sidebar__brand
.sfj-sidebar__brand-mark {
display: block;
width: 100%;
height: 100%;
max-height: none;
object-fit: contain;
}
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__env-label,
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__group-label,
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__link-label,
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__link-count,
.sfj-app[data-sidebar="collapsed"]
.sfj-sidebar__user
> div:not(.sfj-sidebar__user-avatar) {
display: none;
}
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__env {
padding: 0.45rem;
justify-content: center;
margin: 0 0.1rem;
}
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__group {
padding: 0.25rem 0;
border-top: 1px solid var(--sfj-hairline);
}
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__group:first-of-type {
border-top: 0;
}
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__link {
justify-content: center;
padding: 0.55rem;
border-radius: var(--sfj-radius-md);
position: relative;
}
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__link svg {
margin: 0;
}
.sfj-app[data-sidebar="collapsed"] .sfj-sidebar__user {
padding: 0.5rem;
justify-content: center;
}
}
/* ----- Main content area ----- */
.sfj-main {
min-width: 0;
display: flex;
flex-direction: column;
}
.sfj-topbar {
height: 56px;
background: #ffffff;
border-bottom: 1px solid var(--sfj-hairline);
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 1rem;
position: sticky;
top: 0;
z-index: 20;
}
@media (min-width: 992px) {
.sfj-topbar {
padding: 0 1.5rem;
gap: 1rem;
}
}
.sfj-topbar__burger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
color: var(--sfj-ink);
cursor: pointer;
flex-shrink: 0;
}
.sfj-topbar__burger:hover {
color: var(--sfj-accent);
border-color: var(--sfj-accent);
}
.sfj-topbar__burger svg {
width: 18px;
height: 18px;
}
@media (min-width: 992px) {
.sfj-topbar__burger {
display: none;
}
}
.sfj-topbar__breadcrumbs {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 0.4rem;
font-size: 0.88rem;
color: var(--sfj-mute);
}
.sfj-topbar__breadcrumbs a {
color: var(--sfj-ink-soft);
text-decoration: none;
transition: color var(--sfj-duration) var(--sfj-ease);
}
.sfj-topbar__breadcrumbs a:hover {
color: var(--sfj-accent);
}
.sfj-topbar__breadcrumbs .sep {
color: var(--sfj-mute);
opacity: 0.5;
}
.sfj-topbar__breadcrumbs .curr {
color: var(--sfj-ink);
font-weight: 500;
}
.sfj-topbar__spacer {
flex: 1;
}
.sfj-topbar__search {
position: relative;
display: none;
flex: 1;
min-width: 0;
max-width: 560px;
margin-left: auto;
}
.sfj-topbar__search input {
width: 100%;
height: 34px;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
padding: 0 0.75rem 0 2rem;
font-family: inherit;
font-size: 0.88rem;
background: var(--sfj-surface-soft);
color: var(--sfj-ink);
transition:
border-color var(--sfj-duration) var(--sfj-ease),
box-shadow var(--sfj-duration) var(--sfj-ease),
background-color var(--sfj-duration) var(--sfj-ease);
}
.sfj-topbar__search input::placeholder {
color: var(--sfj-mute);
}
.sfj-topbar__search input:focus {
background: #ffffff;
border-color: var(--sfj-accent);
box-shadow: var(--sfj-shadow-focus);
outline: none;
}
.sfj-topbar__search svg {
position: absolute;
left: 0.6rem;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--sfj-mute);
pointer-events: none;
}
.sfj-topbar__kbd {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
border: 1px solid var(--sfj-hairline);
border-radius: 5px;
padding: 0.1rem 0.4rem;
font-family: var(--sfj-font-mono);
font-size: 0.72rem;
color: var(--sfj-mute);
pointer-events: none;
}
.sfj-topbar__icon-btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
background: transparent;
border-radius: var(--sfj-radius-md);
color: var(--sfj-ink-soft);
cursor: pointer;
transition:
background-color var(--sfj-duration) var(--sfj-ease),
color var(--sfj-duration) var(--sfj-ease),
border-color var(--sfj-duration) var(--sfj-ease);
position: relative;
}
.sfj-topbar__icon-btn:hover {
background: var(--sfj-surface-tint);
color: var(--sfj-ink);
}
.sfj-topbar__icon-btn svg {
width: 18px;
height: 18px;
}
.sfj-topbar__icon-btn .badge {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
background: var(--sfj-accent);
border: 2px solid #ffffff;
border-radius: 50%;
}
.sfj-content {
padding: 1.25rem 1rem 3rem;
max-width: 1320px;
width: 100%;
box-sizing: border-box;
}
.sfj-content--narrow {
max-width: 880px;
}
.sfj-content--full {
padding: 0;
max-width: none;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/* ----- Desktop: restore the sticky 240px sidebar column; the off-canvas
drawer (incl. its data-drawer open + scrim rules) is the mobile base. ----- */
@media (min-width: 992px) {
.sfj-content {
padding: 2rem 2rem 4rem;
}
.sfj-app {
grid-template-columns: 240px 1fr;
}
.sfj-sidebar {
position: sticky;
left: auto;
bottom: auto;
z-index: auto;
width: auto;
transform: none;
transition: none;
box-shadow: none;
}
.sfj-app[data-drawer="open"] .sfj-sidebar {
transform: none;
box-shadow: none;
}
.sfj-app[data-drawer="open"] .sfj-sidebar__scrim {
display: none;
}
.sfj-topbar__search {
display: block;
}
}
@keyframes sfj-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ===========================================================
14. Page header — data-app title with status + actions
=========================================================== */
.sfj-page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.sfj-page-head__title {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.sfj-page-head__title h1 {
font-size: 1.5rem;
font-weight: 600;
color: var(--sfj-ink);
letter-spacing: -0.018em;
line-height: 1.15;
margin: 0;
}
.sfj-page-head__sub {
color: var(--sfj-ink-soft);
font-size: 0.92rem;
line-height: 1.5;
margin: 0.4rem 0 0;
max-width: 720px;
}
@media (min-width: 992px) {
.sfj-page-head {
gap: 1.5rem;
margin-bottom: 1.75rem;
}
.sfj-page-head__title h1 {
font-size: 1.75rem;
}
.sfj-page-head__sub {
font-size: 0.96rem;
}
}
.sfj-page-head__id {
font-family: var(--sfj-font-mono);
font-size: 0.78rem;
color: var(--sfj-mute);
background: var(--sfj-surface-tint);
padding: 0.18rem 0.5rem;
border-radius: 6px;
font-weight: 500;
}
.sfj-page-head__actions {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
/* ===========================================================
15. Panel card — sectioned card with title bar
(Used everywhere for grouped data: detail pages, forms,
admin landing, audit log.)
=========================================================== */
.sfj-panel-card {
background: #ffffff;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-lg);
margin-bottom: 1.25rem;
overflow: hidden;
}
.sfj-panel-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1.25rem;
border-bottom: 1px solid var(--sfj-hairline);
}
.sfj-panel-card__head h2,
.sfj-panel-card__head h3 {
font-size: 1rem;
font-weight: 600;
color: var(--sfj-ink);
letter-spacing: -0.005em;
margin: 0;
line-height: 1.3;
}
.sfj-panel-card__sub {
font-size: 0.86rem;
color: var(--sfj-mute);
margin: 0.15rem 0 0;
}
.sfj-panel-card__head-actions {
display: flex;
gap: 0.4rem;
align-items: center;
}
.sfj-panel-card__body {
padding: 1.25rem;
}
.sfj-panel-card__body--flush {
padding: 0;
}
.sfj-panel-card__body--tight {
padding: 0.75rem 1.25rem;
}
.sfj-panel-card__foot {
border-top: 1px solid var(--sfj-hairline);
padding: 0.8rem 1.25rem;
background: var(--sfj-surface-soft);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-size: 0.85rem;
color: var(--sfj-ink-soft);
}
/* Faresone — danger zone */
.sfj-panel-card--danger {
border-color: rgba(185, 28, 28, 0.45);
}
.sfj-panel-card--danger .sfj-panel-card__head {
background: var(--sfj-danger);
border-bottom-color: var(--sfj-danger);
color: #ffffff;
}
.sfj-panel-card--danger .sfj-panel-card__head h2,
.sfj-panel-card--danger .sfj-panel-card__head h3 {
color: #ffffff;
}
.sfj-danger-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1rem 0;
border-bottom: 1px solid var(--sfj-hairline);
}
.sfj-danger-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.sfj-danger-row:first-child {
padding-top: 0;
}
.sfj-danger-row__copy {
min-width: 0;
}
.sfj-danger-row__title {
font-weight: 600;
color: var(--sfj-ink);
font-size: 0.97rem;
margin: 0;
}
.sfj-danger-row__body {
font-size: 0.88rem;
color: var(--sfj-mute);
margin: 0.15rem 0 0;
}
/* ===========================================================
16. Key-value description list — detail-page table rows
=========================================================== */
/* KVProps.Cols binds --sfj-kv-cols; the var() in the mobile override
keeps a custom Cols winning there too, matching the old
always-wins inline style. */
.sfj-kv {
display: grid;
grid-template-columns: var(--sfj-kv-cols, 1fr);
gap: 0;
}
.sfj-kv > dt,
.sfj-kv > dd {
padding: 0.7rem 0;
border-bottom: 1px solid var(--sfj-hairline);
margin: 0;
}
.sfj-kv > dt {
font-size: 0.85rem;
color: var(--sfj-mute);
font-weight: 500;
}
.sfj-kv > dd {
font-size: 0.95rem;
color: var(--sfj-ink);
font-weight: 500;
word-break: break-word;
}
.sfj-kv > dt:last-of-type,
.sfj-kv > dd:last-of-type {
border-bottom: 0;
}
.sfj-kv--compact > dt,
.sfj-kv--compact > dd {
padding: 0.45rem 0;
font-size: 0.88rem;
}
/* Mobile base: term/desc stack — labels sit tight above their value with
no row hairline. Desktop restores the two-column grid below. */
.sfj-kv > dt {
padding-bottom: 0.15rem;
border-bottom: 0;
}
.sfj-kv > dd {
padding-top: 0.1rem;
}
@media (min-width: 561px) {
.sfj-kv {
grid-template-columns: var(--sfj-kv-cols, 180px 1fr);
}
.sfj-kv > dt {
padding-bottom: 0.7rem;
border-bottom: 1px solid var(--sfj-hairline);
}
.sfj-kv > dd {
padding-top: 0.7rem;
}
.sfj-kv--compact > dt,
.sfj-kv--compact > dd {
padding: 0.45rem 0;
}
}
/* ===========================================================
17. Semantic status pills
(Inline status chips for table rows, list items, page
headers. Use these — not the eyebrow chip — for data
status. Eyebrows are for marketing-section kickers.)
=========================================================== */
.sfj-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.18rem 0.6rem;
border-radius: var(--sfj-radius-pill);
font-size: 0.76rem;
font-weight: 600;
line-height: 1.4;
background: var(--sfj-surface-tint);
color: var(--sfj-ink-soft);
border: 1px solid transparent;
white-space: nowrap;
}
.sfj-pill__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.sfj-pill--success {
background: rgba(12, 154, 38, 0.1);
color: #0a7b1f;
}
.sfj-pill--warning {
background: rgba(180, 83, 9, 0.1);
color: #92400e;
}
.sfj-pill--danger {
background: rgba(185, 28, 28, 0.08);
color: #991b1b;
}
.sfj-pill--info {
background: var(--sfj-accent-soft);
color: var(--sfj-accent-strong);
}
.sfj-pill--neutral {
background: rgba(15, 23, 42, 0.06);
color: var(--sfj-ink);
}
.sfj-pill--muted {
background: transparent;
color: var(--sfj-mute);
border-color: var(--sfj-hairline);
}
.sfj-pill--lg {
padding: 0.3rem 0.75rem;
font-size: 0.82rem;
}
/* ===========================================================
18. Data table — dense, sortable list view
(For internal lists. The marketing .sfj-table is rounded,
padded, and conversion-oriented; this one is dense and
scannable for thousand-row tables.)
=========================================================== */
.sfj-dtable-wrap {
overflow-x: auto;
}
/* Marketing comparison table: scroll wide content inside its own box on
narrow screens rather than overflowing the page. */
.sfj-table-wrap {
overflow-x: auto;
}
.sfj-dtable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.9rem;
}
.sfj-dtable thead th {
background: var(--sfj-surface-soft);
border-bottom: 1px solid var(--sfj-hairline);
color: var(--sfj-mute);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.55rem 0.85rem;
text-align: left;
white-space: nowrap;
vertical-align: middle;
/* Per-column width via DTableColumn.Width (th style="--sfj-col-w:"). */
width: var(--sfj-col-w, auto);
}
.sfj-dtable thead th.is-sortable {
cursor: pointer;
user-select: none;
}
.sfj-dtable thead th.is-sortable:hover {
color: var(--sfj-ink);
}
.sfj-dtable thead th .sort-i {
display: inline-block;
margin-left: 0.25rem;
color: var(--sfj-mute);
opacity: 0.6;
}
.sfj-dtable thead th.is-sorted .sort-i {
color: var(--sfj-accent);
opacity: 1;
}
.sfj-dtable tbody td {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid var(--sfj-hairline);
color: var(--sfj-ink);
font-variant-numeric: tabular-nums;
vertical-align: middle;
}
.sfj-dtable tbody tr:hover td {
background: rgba(21, 125, 200, 0.025);
}
.sfj-dtable tbody tr:last-child td {
border-bottom: 0;
}
/* Full-width placeholder row when the table has no data (kit.DTable).
Two classes so the colour beats the .sfj-dtable tbody td ink. */
.sfj-dtable td.sfj-dtable__empty {
text-align: center;
color: var(--sfj-mute);
padding: 2rem 1rem;
}
.sfj-dtable td.num,
.sfj-dtable th.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.sfj-dtable td.mute {
color: var(--sfj-mute);
}
.sfj-dtable td.id {
font-family: var(--sfj-font-mono);
color: var(--sfj-mute);
font-size: 0.82rem;
}
.sfj-dtable td.actions {
text-align: right;
white-space: nowrap;
}
.sfj-dtable a.cell-link {
color: var(--sfj-ink);
font-weight: 500;
border-bottom: 1px solid transparent;
text-decoration: none;
transition:
color var(--sfj-duration) var(--sfj-ease),
border-color var(--sfj-duration) var(--sfj-ease);
}
.sfj-dtable a.cell-link:hover {
color: var(--sfj-accent);
border-bottom-color: var(--sfj-accent);
}
.sfj-dtable .row-checkbox {
width: 36px;
padding-right: 0;
}
/* Compact row icon-button — inline edit/delete inside cells. */
.sfj-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid var(--sfj-hairline);
border-radius: 6px;
color: var(--sfj-mute);
cursor: pointer;
transition:
color var(--sfj-duration) var(--sfj-ease),
border-color var(--sfj-duration) var(--sfj-ease),
background-color var(--sfj-duration) var(--sfj-ease);
}
.sfj-icon-btn svg {
width: 14px;
height: 14px;
}
.sfj-icon-btn:hover {
color: var(--sfj-accent);
border-color: var(--sfj-accent);
background: var(--sfj-accent-soft);
}
.sfj-icon-btn--danger:hover {
color: var(--sfj-danger);
border-color: var(--sfj-danger);
background: rgba(185, 28, 28, 0.06);
}
/* ===========================================================
19. List filter bar
=========================================================== */
.sfj-filter-bar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--sfj-hairline);
background: var(--sfj-surface-soft);
}
.sfj-filter-bar__search {
flex: 1;
min-width: 240px;
position: relative;
}
.sfj-filter-bar__search svg {
position: absolute;
left: 0.65rem;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--sfj-mute);
pointer-events: none;
}
.sfj-filter-bar__search input {
width: 100%;
height: 34px;
padding: 0 0.85rem 0 2rem;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
font-family: inherit;
font-size: 0.9rem;
background: #ffffff;
color: var(--sfj-ink);
transition:
border-color var(--sfj-duration) var(--sfj-ease),
box-shadow var(--sfj-duration) var(--sfj-ease);
}
.sfj-filter-bar__search input:focus {
border-color: var(--sfj-accent);
box-shadow: var(--sfj-shadow-focus);
outline: none;
}
.sfj-filter-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
height: 32px;
padding: 0 0.7rem;
background: #ffffff;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
color: var(--sfj-ink-soft);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition:
border-color var(--sfj-duration) var(--sfj-ease),
color var(--sfj-duration) var(--sfj-ease);
}
.sfj-filter-chip:hover {
border-color: var(--sfj-accent);
color: var(--sfj-accent);
}
.sfj-filter-chip.is-active {
background: var(--sfj-accent-soft);
border-color: var(--sfj-accent);
color: var(--sfj-accent-strong);
}
.sfj-filter-chip svg {
width: 14px;
height: 14px;
}
.sfj-filter-chip .count {
margin-left: 0.2rem;
font-variant-numeric: tabular-nums;
color: var(--sfj-mute);
font-weight: 600;
}
.sfj-filter-chip.is-active .count {
color: var(--sfj-accent);
}
.sfj-filter-bar__sep {
width: 1px;
height: 20px;
background: var(--sfj-hairline);
margin: 0 0.25rem;
}
/* ===========================================================
20. Quick-stat tiles
=========================================================== */
.sfj-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.sfj-stat {
background: #ffffff;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
padding: 0.9rem 1rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.sfj-stat__label {
font-size: 0.78rem;
color: var(--sfj-mute);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.sfj-stat__value {
font-size: 1.55rem;
font-weight: 600;
color: var(--sfj-ink);
letter-spacing: -0.018em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.sfj-stat__delta {
font-size: 0.8rem;
color: var(--sfj-mute);
margin-top: 0.1rem;
}
.sfj-stat__delta--up {
color: var(--sfj-success-text);
}
.sfj-stat__delta--down {
color: var(--sfj-danger);
}
/* ===========================================================
21. Address status grid — FiberDB landing
=========================================================== */
.sfj-addrgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 4px;
padding: 0.5rem;
background: var(--sfj-surface-soft);
border-radius: var(--sfj-radius-md);
}
.sfj-addrgrid__cell {
background: #ffffff;
border-radius: 6px;
padding: 0.4rem 0.6rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
color: var(--sfj-ink);
border-left: 3px solid transparent;
cursor: pointer;
transition:
background-color var(--sfj-duration) var(--sfj-ease),
transform var(--sfj-duration) var(--sfj-ease);
}
.sfj-addrgrid__cell:hover {
background: rgba(21, 125, 200, 0.04);
transform: translateX(1px);
}
.sfj-addrgrid__cell-num {
font-weight: 700;
color: var(--sfj-ink);
min-width: 24px;
font-variant-numeric: tabular-nums;
}
.sfj-addrgrid__cell-letter {
margin-left: -0.3rem;
color: var(--sfj-mute);
font-weight: 500;
}
.sfj-addrgrid__cell-state {
margin-left: auto;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--sfj-mute);
font-weight: 600;
}
.sfj-addrgrid__cell--planned {
border-left-color: #cbd5e1;
}
.sfj-addrgrid__cell--planned .sfj-addrgrid__cell-state {
color: #64748b;
}
.sfj-addrgrid__cell--interest {
border-left-color: #b45309;
background: rgba(180, 83, 9, 0.04);
}
.sfj-addrgrid__cell--interest .sfj-addrgrid__cell-state {
color: #92400e;
}
.sfj-addrgrid__cell--ordered {
border-left-color: var(--sfj-accent);
background: rgba(21, 125, 200, 0.04);
}
.sfj-addrgrid__cell--ordered .sfj-addrgrid__cell-state {
color: var(--sfj-accent-strong);
}
.sfj-addrgrid__cell--installed {
border-left-color: #0c9a26;
background: rgba(12, 154, 38, 0.05);
}
.sfj-addrgrid__cell--installed .sfj-addrgrid__cell-state {
color: #0a7b1f;
}
.sfj-addrgrid__cell--blocked {
border-left-color: #b91c1c;
background: rgba(185, 28, 28, 0.04);
}
.sfj-addrgrid__cell--blocked .sfj-addrgrid__cell-state {
color: #991b1b;
}
.sfj-addrgrid-legend {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
margin-top: 0.75rem;
font-size: 0.82rem;
color: var(--sfj-mute);
}
.sfj-addrgrid-legend__item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.sfj-addrgrid-legend__swatch {
width: 12px;
height: 12px;
border-radius: 3px;
background: #cbd5e1;
}
/* Legend swatch state colours mirror the cell border colours above. */
.sfj-addrgrid-legend__swatch--planned {
background: #cbd5e1;
}
.sfj-addrgrid-legend__swatch--interest {
background: var(--sfj-warning);
}
.sfj-addrgrid-legend__swatch--ordered {
background: var(--sfj-accent);
}
.sfj-addrgrid-legend__swatch--installed {
background: var(--sfj-success);
}
.sfj-addrgrid-legend__swatch--blocked {
background: var(--sfj-danger);
}
/* ===========================================================
22. Audit log timeline
=========================================================== */
.sfj-audit {
list-style: none;
padding: 0;
margin: 0;
}
.sfj-audit__item {
position: relative;
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 0.85rem;
padding: 0.9rem 0;
border-bottom: 1px solid var(--sfj-hairline);
align-items: start;
}
.sfj-audit__item:last-child {
border-bottom: 0;
}
.sfj-audit__dot {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--sfj-accent-soft);
color: var(--sfj-accent-strong);
display: flex;
align-items: center;
justify-content: center;
}
.sfj-audit__dot svg {
width: 14px;
height: 14px;
}
.sfj-audit__dot--success {
background: rgba(12, 154, 38, 0.12);
color: #0a7b1f;
}
.sfj-audit__dot--danger {
background: rgba(185, 28, 28, 0.1);
color: #991b1b;
}
.sfj-audit__dot--neutral {
background: rgba(15, 23, 42, 0.06);
color: var(--sfj-ink-soft);
}
.sfj-audit__body {
min-width: 0;
font-size: 0.9rem;
color: var(--sfj-ink);
line-height: 1.5;
}
.sfj-audit__body strong {
font-weight: 600;
}
.sfj-audit__body .who {
color: var(--sfj-accent-strong);
font-weight: 500;
}
.sfj-audit__body .what {
display: inline-block;
margin-right: 0.4rem;
font-family: var(--sfj-font-mono);
font-size: 0.78rem;
background: var(--sfj-surface-tint);
color: var(--sfj-ink-soft);
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sfj-audit__meta {
font-size: 0.8rem;
color: var(--sfj-mute);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ===========================================================
23. Inline banners — info / warning / success / danger
=========================================================== */
.sfj-banner {
display: flex;
gap: 0.75rem;
padding: 0.85rem 1.1rem;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
background: var(--sfj-surface);
color: var(--sfj-ink-soft);
font-size: 0.92rem;
line-height: 1.45;
align-items: flex-start;
}
.sfj-banner__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--sfj-mute);
margin-top: 0.05rem;
}
.sfj-banner__title {
color: var(--sfj-ink);
font-weight: 600;
font-size: 0.95rem;
margin: 0;
}
.sfj-banner__body {
margin: 0.15rem 0 0;
}
.sfj-banner__close {
margin-left: auto;
background: transparent;
border: 0;
color: var(--sfj-mute);
cursor: pointer;
padding: 0.15rem;
line-height: 0;
}
.sfj-banner__close:hover {
color: var(--sfj-ink);
}
.sfj-banner--info {
background: var(--sfj-accent-soft);
border-color: rgba(21, 125, 200, 0.25);
color: var(--sfj-accent-strong);
}
.sfj-banner--info .sfj-banner__icon {
color: var(--sfj-accent);
}
.sfj-banner--info .sfj-banner__title {
color: var(--sfj-accent-strong);
}
.sfj-banner--warning {
background: rgba(180, 83, 9, 0.08);
border-color: rgba(180, 83, 9, 0.25);
color: #92400e;
}
.sfj-banner--warning .sfj-banner__icon,
.sfj-banner--warning .sfj-banner__title {
color: #92400e;
}
.sfj-banner--success {
background: rgba(12, 154, 38, 0.08);
border-color: rgba(12, 154, 38, 0.25);
color: #0a7b1f;
}
.sfj-banner--success .sfj-banner__icon,
.sfj-banner--success .sfj-banner__title {
color: #0a7b1f;
}
.sfj-banner--danger {
background: rgba(185, 28, 28, 0.06);
border-color: rgba(185, 28, 28, 0.25);
color: #991b1b;
}
.sfj-banner--danger .sfj-banner__icon,
.sfj-banner--danger .sfj-banner__title {
color: #991b1b;
}
/* ===========================================================
24. Additional button variants — neutral / danger / success
(Sit alongside .sfj-btn--primary / --outline / --ghost
from section 3; same sizing, just different semantics.)
=========================================================== */
.sfj-btn--neutral {
background: var(--sfj-ink);
border-color: var(--sfj-ink);
color: #ffffff;
}
.sfj-btn--neutral:hover,
.sfj-btn--neutral:focus {
background: #1e293b;
border-color: #1e293b;
color: #ffffff;
}
.sfj-btn--danger {
background: var(--sfj-surface);
border-color: rgba(185, 28, 28, 0.45);
color: var(--sfj-danger);
}
.sfj-btn--danger:hover,
.sfj-btn--danger:focus {
background: var(--sfj-danger);
border-color: var(--sfj-danger);
color: #ffffff;
}
.sfj-btn--danger-solid {
background: var(--sfj-danger);
border-color: var(--sfj-danger);
color: #ffffff;
}
.sfj-btn--danger-solid:hover,
.sfj-btn--danger-solid:focus {
background: #991b1b;
border-color: #991b1b;
color: #ffffff;
}
.sfj-btn--success {
background: var(--sfj-success);
border-color: var(--sfj-success);
color: #ffffff;
}
.sfj-btn--success:hover,
.sfj-btn--success:focus {
background: #0a7b1f;
border-color: #0a7b1f;
color: #ffffff;
}
/* Segmented control — pill-shaped multi-button toggle. */
.sfj-segmented {
display: inline-flex;
background: #ffffff;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
padding: 3px;
gap: 2px;
}
.sfj-segmented button {
border: 0;
background: transparent;
color: var(--sfj-ink-soft);
font-family: inherit;
font-weight: 500;
font-size: 0.85rem;
padding: 0.35rem 0.75rem;
border-radius: 6px;
cursor: pointer;
transition:
background-color var(--sfj-duration) var(--sfj-ease),
color var(--sfj-duration) var(--sfj-ease);
}
.sfj-segmented button:hover {
color: var(--sfj-ink);
}
.sfj-segmented button[aria-selected="true"],
.sfj-segmented button.is-active {
background: var(--sfj-accent-soft);
color: var(--sfj-accent-strong);
font-weight: 600;
}
/* ===========================================================
25. Form extras — grid, help text, switch, checkbox
=========================================================== */
.sfj-form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem 1.25rem;
}
.sfj-form-grid .span-2 {
grid-column: auto;
}
@media (min-width: 641px) {
.sfj-form-grid {
grid-template-columns: repeat(2, 1fr);
}
.sfj-form-grid .span-2 {
grid-column: 1 / -1;
}
}
.sfj-field-help {
font-size: 0.8rem;
color: var(--sfj-mute);
margin-top: 0.3rem;
line-height: 1.45;
}
.sfj-field-help a {
color: var(--sfj-accent-strong);
}
.sfj-field-error {
font-size: 0.8rem;
color: var(--sfj-danger);
margin-top: 0.3rem;
}
.sfj-input.is-error,
.sfj-textarea.is-error,
.sfj-select.is-error {
border-color: var(--sfj-danger);
}
.sfj-input.is-error:focus {
box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}
/* Toggle switch */
.sfj-switch {
display: inline-flex;
align-items: center;
gap: 0.65rem;
cursor: pointer;
}
.sfj-switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.sfj-switch__track {
width: 36px;
height: 20px;
border-radius: 999px;
background: var(--sfj-hairline-strong);
position: relative;
transition: background-color var(--sfj-duration) var(--sfj-ease);
flex-shrink: 0;
}
.sfj-switch__thumb {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
transition: transform var(--sfj-duration) var(--sfj-ease);
}
.sfj-switch input:checked + .sfj-switch__track {
background: var(--sfj-accent);
}
.sfj-switch input:checked + .sfj-switch__track .sfj-switch__thumb {
transform: translateX(16px);
}
.sfj-switch__label {
font-size: 0.9rem;
color: var(--sfj-ink);
}
/* Native checkbox / radio wrapper for stacked options. */
.sfj-check {
display: inline-flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.92rem;
color: var(--sfj-ink);
cursor: pointer;
line-height: 1.4;
}
.sfj-check input {
margin: 0.18rem 0 0;
width: 16px;
height: 16px;
accent-color: var(--sfj-accent);
}
.sfj-check__hint {
display: block;
font-size: 0.82rem;
color: var(--sfj-mute);
margin-top: 0.15rem;
}
/* ===========================================================
26. Order configurator — product option cards + summary
=========================================================== */
.sfj-config {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: start;
}
@media (min-width: 992px) {
.sfj-config {
grid-template-columns: minmax(0, 1fr) 360px;
}
}
.sfj-config__group {
margin-bottom: 1.5rem;
}
.sfj-config__group-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.sfj-config__group-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--sfj-ink);
letter-spacing: -0.01em;
margin: 0;
flex-shrink: 0;
white-space: nowrap;
}
.sfj-config__group-hint {
color: var(--sfj-mute);
font-size: 0.85rem;
margin: 0;
text-align: right;
}
.sfj-product-options {
display: grid;
gap: 0.6rem;
}
.sfj-product-options--cols {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sfj-product-option {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.95rem 1.1rem;
background: #ffffff;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
cursor: pointer;
transition:
border-color var(--sfj-duration) var(--sfj-ease),
box-shadow var(--sfj-duration) var(--sfj-ease),
background-color var(--sfj-duration) var(--sfj-ease);
position: relative;
}
.sfj-product-option:hover {
border-color: rgba(21, 125, 200, 0.45);
}
.sfj-product-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.sfj-product-option__radio {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--sfj-hairline-strong);
flex-shrink: 0;
position: relative;
transition: border-color var(--sfj-duration) var(--sfj-ease);
}
.sfj-product-option__radio::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--sfj-accent);
opacity: 0;
transform: scale(0.4);
transition:
opacity var(--sfj-duration) var(--sfj-ease),
transform var(--sfj-duration) var(--sfj-ease);
}
.sfj-product-option__copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.sfj-product-option__title {
font-weight: 600;
color: var(--sfj-ink);
font-size: 0.98rem;
}
.sfj-product-option__sub {
color: var(--sfj-mute);
font-size: 0.85rem;
}
.sfj-product-option__price {
font-weight: 600;
color: var(--sfj-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-size: 0.95rem;
}
.sfj-product-option__price .unit {
color: var(--sfj-mute);
font-weight: 500;
font-size: 0.82rem;
}
.sfj-product-option.is-selected {
border-color: var(--sfj-accent);
background: linear-gradient(180deg, rgba(21, 125, 200, 0.04), #ffffff 80%);
box-shadow: 0 0 0 1px rgba(21, 125, 200, 0.45);
}
.sfj-product-option.is-selected .sfj-product-option__radio {
border-color: var(--sfj-accent);
}
.sfj-product-option.is-selected .sfj-product-option__radio::after {
opacity: 1;
transform: scale(1);
}
.sfj-product-option__badge {
background: var(--sfj-accent-soft);
color: var(--sfj-accent-strong);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.15rem 0.45rem;
border-radius: var(--sfj-radius-pill);
margin-left: 0.6rem;
}
/* Order summary panel (sticks in the side column). */
.sfj-summary {
background: #ffffff;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-lg);
overflow: hidden;
position: sticky;
top: 80px;
}
.sfj-summary__head {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--sfj-hairline);
}
.sfj-summary__head h3 {
font-size: 1rem;
font-weight: 600;
color: var(--sfj-ink);
margin: 0;
}
.sfj-summary__addr {
color: var(--sfj-mute);
font-size: 0.85rem;
margin: 0.15rem 0 0;
}
.sfj-summary__group {
padding: 0.85rem 1.25rem;
}
.sfj-summary__group + .sfj-summary__group {
border-top: 1px solid var(--sfj-hairline);
}
.sfj-summary__group-title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--sfj-mute);
margin: 0 0 0.5rem;
}
.sfj-summary__line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.25rem 0;
font-size: 0.9rem;
color: var(--sfj-ink-soft);
}
.sfj-summary__line .label {
color: var(--sfj-ink-soft);
}
.sfj-summary__line .val {
color: var(--sfj-ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.sfj-summary__total {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0.75rem 1.25rem;
border-top: 1px solid var(--sfj-hairline);
background: var(--sfj-surface-soft);
}
.sfj-summary__total .label {
font-size: 0.9rem;
color: var(--sfj-ink);
font-weight: 600;
}
.sfj-summary__total .val {
font-size: 1.4rem;
color: var(--sfj-ink);
font-weight: 700;
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
}
.sfj-summary__cta {
padding: 1rem 1.25rem 1.25rem;
}
/* ===========================================================
27. Min side portal extras — customer-facing app chrome
(Different shell to FiberDB: centered max-width, top
nav only, no sidebar.)
=========================================================== */
.sfj-portal {
background: var(--sfj-surface);
min-height: 100vh;
}
.sfj-portal__header {
background: #ffffff;
border-bottom: 1px solid var(--sfj-hairline);
}
.sfj-portal__inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 1.5rem;
}
.sfj-portal__nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
gap: 0.75rem;
}
.sfj-portal__brand img {
height: 52px;
width: auto;
display: block;
}
@media (min-width: 601px) {
.sfj-portal__nav {
height: 80px;
}
.sfj-portal__brand img {
height: 72px;
}
}
.sfj-portal__nav-links {
display: none;
align-items: center;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
/* Right cluster of the portal nav: links + avatar + burger. */
.sfj-portal__nav-right {
display: flex;
align-items: center;
gap: var(--sfj-space-3);
}
.sfj-portal__nav-burger {
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
color: var(--sfj-ink);
cursor: pointer;
}
.sfj-portal__nav-burger svg {
width: 18px;
height: 18px;
}
/* Mobile base: burger-toggled links open as an absolute dropdown card.
Desktop (min-width:601) collapses this back to the inline link row. */
.sfj-portal__nav-links.is-open {
display: flex;
position: absolute;
right: 1rem;
top: 56px;
background: #ffffff;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0.5rem;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
box-shadow: var(--sfj-shadow-card);
z-index: 30;
min-width: 200px;
}
.sfj-portal__nav-links.is-open a {
text-align: left;
padding: 0.7rem 0.85rem;
}
@media (min-width: 601px) {
.sfj-portal__nav-links {
display: flex;
}
.sfj-portal__nav-burger {
display: none;
}
.sfj-portal__nav-links.is-open {
position: static;
right: auto;
top: auto;
background: transparent;
flex-direction: row;
align-items: center;
gap: 0.5rem;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
z-index: auto;
min-width: auto;
}
.sfj-portal__nav-links.is-open a {
text-align: left;
padding: 0.55rem 0.85rem;
}
}
.sfj-portal__nav-links a {
display: inline-block;
color: var(--sfj-ink-soft);
text-decoration: none;
padding: 0.55rem 0.85rem;
border-radius: var(--sfj-radius-md);
font-weight: 500;
font-size: 0.96rem;
transition:
color var(--sfj-duration) var(--sfj-ease),
background-color var(--sfj-duration) var(--sfj-ease);
}
.sfj-portal__nav-links a:hover {
color: var(--sfj-accent);
}
.sfj-portal__nav-links a.is-active {
background: var(--sfj-accent-soft);
color: var(--sfj-accent-strong);
font-weight: 600;
}
.sfj-portal__page {
padding: 1.5rem 0 3rem;
}
@media (min-width: 601px) {
.sfj-portal__page {
padding: 2.5rem 0 4rem;
}
}
.sfj-portal__page-head {
margin-bottom: 1.75rem;
}
.sfj-portal__page-head h1 {
font-size: 1.65rem;
font-weight: 600;
color: var(--sfj-ink);
letter-spacing: -0.018em;
margin: 0 0 0.4rem;
}
@media (min-width: 601px) {
.sfj-portal__page-head h1 {
font-size: 2rem;
}
}
.sfj-portal__page-head p {
color: var(--sfj-ink-soft);
font-size: 1.05rem;
margin: 0;
}
/* Hero usage strip on the dashboard. */
.sfj-usage {
display: grid;
grid-template-columns: 1fr;
gap: 0;
background: #ffffff;
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-lg);
overflow: hidden;
}
/* Mobile base: columns stack with horizontal hairlines between them.
Desktop (min-width:768) lays them side by side with vertical dividers. */
.sfj-usage > * + * {
border-top: 1px solid var(--sfj-hairline);
border-left: 0 !important;
}
@media (min-width: 768px) {
.sfj-usage {
grid-template-columns: 1.4fr 1fr 1fr;
}
.sfj-usage > * + * {
border-top: 0;
border-left: 1px solid var(--sfj-hairline) !important;
}
}
.sfj-usage__col {
padding: 1.4rem 1.5rem;
border-left: 1px solid var(--sfj-hairline);
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: space-between;
}
.sfj-usage__col:first-child {
border-left: 0;
background: linear-gradient(
135deg,
var(--sfj-accent-soft) 0%,
transparent 60%
);
}
.sfj-usage__label {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--sfj-mute);
}
.sfj-usage__value {
font-size: 1.7rem;
font-weight: 600;
color: var(--sfj-ink);
letter-spacing: -0.018em;
line-height: 1.1;
}
.sfj-usage__value .unit {
font-size: 0.95rem;
color: var(--sfj-mute);
font-weight: 500;
margin-left: 0.25rem;
}
.sfj-usage__hint {
font-size: 0.85rem;
color: var(--sfj-mute);
}
/* Linear gauge used on Min side speed cards. */
.sfj-gauge {
width: 100%;
height: 8px;
background: var(--sfj-surface-tint);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.sfj-gauge__fill {
position: absolute;
inset: 0 auto 0 0;
/* Fill percentage rides as style="--sfj-gauge:NN%" on the root. */
width: var(--sfj-gauge, 0%);
background: linear-gradient(90deg, var(--sfj-accent) 0%, #34a3e0 100%);
border-radius: 999px;
}
/* ===========================================================
28. Pagination + misc utilities
=========================================================== */
.sfj-pagination {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
}
.sfj-pagination button,
.sfj-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 30px;
padding: 0 0.55rem;
border: 1px solid var(--sfj-hairline);
background: #ffffff;
color: var(--sfj-ink-soft);
border-radius: 6px;
font-family: inherit;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.sfj-pagination button:hover {
color: var(--sfj-accent);
border-color: var(--sfj-accent);
}
.sfj-pagination .is-current {
background: var(--sfj-accent);
border-color: var(--sfj-accent);
color: #ffffff;
font-weight: 600;
}
.sfj-pagination .dots {
border: 0;
background: transparent;
cursor: default;
color: var(--sfj-mute);
}
.sfj-flex {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sfj-flex--between {
justify-content: space-between;
}
.sfj-flex--wrap {
flex-wrap: wrap;
}
/* Gap / margin / padding utilities live in §35 on the --sfj-space scale. */
/* ── Semantic colour utilities — used by components.
No raw text-size / font-weight utilities exposed; pick a
semantic component (Body, Lede, Muted, H1..H4) instead. */
.sfj-text-mute {
color: var(--sfj-mute);
}
.sfj-text-ink {
color: var(--sfj-ink);
}
.sfj-text-ink-soft {
color: var(--sfj-ink-soft);
}
.sfj-text-accent {
color: var(--sfj-accent-strong);
}
.sfj-text-danger {
color: var(--sfj-danger);
}
.sfj-text-success {
color: var(--sfj-success-text);
}
.sfj-text-warning {
color: var(--sfj-warning);
}
.sfj-text-on-dark {
color: #ffffff;
}
.sfj-text-center {
text-align: center;
}
.sfj-text-right {
text-align: right;
}
.sfj-text-left {
text-align: left;
}
.sfj-mono {
font-family: var(--sfj-font-mono);
font-size: 0.85rem;
}
.sfj-divider {
height: 1px;
background: var(--sfj-hairline);
margin: 1rem 0;
}
/* ── Accessibility utilities ── */
/* Skip-to-content link: off-screen until focused, then pinned to the
top-left above all chrome so keyboard users can bypass the nav. */
.sfj-skip-link {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
transform: translateY(-120%);
padding: 0.6rem 1rem;
background: var(--sfj-surface);
color: var(--sfj-accent-strong);
font-weight: 600;
border-radius: 0 0 var(--sfj-radius-md) 0;
outline: 2px solid var(--sfj-accent);
outline-offset: 2px;
transition: transform var(--sfj-duration) var(--sfj-ease);
}
.sfj-skip-link:focus,
.sfj-skip-link:focus-visible {
transform: translateY(0);
}
/* Screen-reader-only: removed from the visual flow but kept in the
accessibility tree (the standard sr-only clip pattern). */
.sfj-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Required-field marker (the asterisk after a label). The margin
unifies the LabelText and Field markers. */
.sfj-required {
color: var(--sfj-danger);
margin-left: 2px;
}
/* ===========================================================
29. Avatars + badges
=========================================================== */
/* Initials / photo chip (kit.Avatar). */
.sfj-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
font-size: 0.85rem;
font-weight: 600;
background: linear-gradient(
135deg,
var(--sfj-accent),
var(--sfj-accent-strong)
);
color: #ffffff;
border-radius: 50%;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.01em;
}
.sfj-avatar--sm {
width: 24px;
height: 24px;
font-size: 0.7rem;
}
.sfj-avatar--lg {
width: 48px;
height: 48px;
font-size: 1.1rem;
}
.sfj-avatar--xl {
width: 64px;
height: 64px;
font-size: 1.4rem;
}
.sfj-avatar--muted {
background: var(--sfj-surface-tint);
color: var(--sfj-mute);
}
.sfj-avatar--business {
border-radius: 6px;
}
.sfj-avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* Numeric counter / dot indicator (kit.Badge). */
.sfj-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 0.7rem;
font-weight: 700;
background: var(--sfj-accent);
color: #ffffff;
border-radius: 9px;
}
.sfj-badge--danger {
background: var(--sfj-danger);
}
.sfj-badge--success {
background: var(--sfj-success);
}
.sfj-badge--neutral {
background: var(--sfj-mute);
}
.sfj-badge--dot {
display: inline-block;
width: 8px;
height: 8px;
min-width: 0;
padding: 0;
border-radius: 50%;
}
/* ===========================================================
30. Loading + progress — spinner, progress bar, skeleton
=========================================================== */
/* CSS-only brand spinner (kit.Spinner). */
.sfj-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--sfj-hairline);
border-top-color: var(--sfj-accent);
border-radius: 50%;
animation: sfj-spin 0.7s linear infinite;
}
.sfj-spinner--sm {
width: 12px;
height: 12px;
}
.sfj-spinner--lg {
width: 24px;
height: 24px;
}
.sfj-spinner--xl {
width: 40px;
height: 40px;
}
@keyframes sfj-spin {
to {
transform: rotate(360deg);
}
}
/* Loader — spinner + label, the one inline "fetching…" unit (.sfj-loader) */
.sfj-loader {
display: flex;
align-items: center;
gap: var(--sfj-space-3);
color: var(--sfj-mute);
}
.sfj-loader--center {
justify-content: center;
padding: var(--sfj-space-6);
}
.sfj-loader__text {
color: var(--sfj-ink-soft);
}
/* Linear progress (kit.ProgressBar); fill width via --sfj-progress. */
.sfj-progress__track {
height: 6px;
background: var(--sfj-surface-tint);
border-radius: 999px;
overflow: hidden;
}
.sfj-progress__fill {
height: 100%;
width: var(--sfj-progress, 0%);
background: var(--sfj-accent);
transition: width 0.3s;
}
.sfj-progress--success .sfj-progress__fill {
background: var(--sfj-success);
}
.sfj-progress--warning .sfj-progress__fill {
background: var(--sfj-warning);
}
.sfj-progress--danger .sfj-progress__fill {
background: var(--sfj-danger);
}
.sfj-progress__meta {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--sfj-mute);
margin-top: 0.25rem;
}
/* Shimmer placeholder (kit.Skeleton); dims via --sfj-skel-w/-h. */
.sfj-skel {
display: block;
width: var(--sfj-skel-w, 100%);
height: var(--sfj-skel-h, 1em);
background: linear-gradient(
90deg,
var(--sfj-surface-tint),
var(--sfj-surface-soft),
var(--sfj-surface-tint)
);
background-size: 200% 100%;
animation: sfj-skel 1.2s ease-in-out infinite;
border-radius: 6px;
}
@keyframes sfj-skel {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* ===========================================================
31. Empty state
(kit.EmptyState — illustration + copy + CTA. Title/body
scoped under .sfj-empty so they beat the .sfj-h4 /
element-reset margins regardless of fold position.)
=========================================================== */
.sfj-empty {
text-align: center;
padding: 3rem 1.5rem;
color: var(--sfj-mute);
}
.sfj-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: var(--sfj-surface-tint);
border-radius: 50%;
color: var(--sfj-mute);
margin-bottom: 1rem;
}
.sfj-empty .sfj-empty__title {
margin: 0 0 0.5rem;
}
.sfj-empty .sfj-empty__body {
margin: 0 auto;
max-width: 380px;
color: var(--sfj-mute);
font-size: 0.92rem;
line-height: 1.5;
}
.sfj-empty__cta {
margin-top: 1.25rem;
}
/* ===========================================================
32. Dialog — modal + backdrop
(kit.Dialog — a shown via the [open] attribute,
panel width via --sfj-dialog-w.)
=========================================================== */
.sfj-dialog {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.45);
padding: 1rem;
}
.sfj-dialog[open] {
display: flex;
}
.sfj-dialog__panel {
background: var(--sfj-surface);
border-radius: var(--sfj-radius-lg);
max-width: min(var(--sfj-dialog-w, 520px), 92vw);
width: 100%;
box-shadow: var(--sfj-shadow-3);
}
.sfj-dialog__head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--sfj-hairline);
}
.sfj-dialog__title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--sfj-ink);
}
.sfj-dialog__body {
padding: 1.25rem;
}
.sfj-dialog__foot {
padding: 1rem 1.25rem;
border-top: 1px solid var(--sfj-hairline);
background: var(--sfj-surface-soft);
display: flex;
justify-content: flex-end;
gap: 0.6rem;
}
/* ===========================================================
33. Step indicator — wizard progress rail
(kit.StepIndicator — port of the hand-rolled bestilling
configurator rail. --todo items and __label spans are
hook classes with default styling.)
=========================================================== */
.sfj-steps {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sfj-space-3);
margin: 0 0 var(--sfj-space-8);
padding: 0;
list-style: none;
}
.sfj-steps__item {
display: inline-flex;
align-items: center;
gap: var(--sfj-space-2);
font-size: 0.92rem;
color: var(--sfj-ink-soft);
}
/* Items after the first stretch so the hairline connector fills the
space between steps. */
.sfj-steps__item + .sfj-steps__item {
flex: 1;
}
.sfj-steps__item + .sfj-steps__item::before {
content: "";
flex: 1 1 0;
height: 1px;
background: var(--sfj-hairline);
margin-right: 0.25rem;
}
.sfj-steps__num {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid var(--sfj-hairline);
background: var(--sfj-surface);
color: var(--sfj-mute);
font-weight: 600;
}
.sfj-steps__item--done .sfj-steps__num {
background: var(--sfj-success);
border-color: var(--sfj-success);
color: #ffffff;
}
.sfj-steps__item--current .sfj-steps__num {
background: var(--sfj-accent);
border-color: var(--sfj-accent);
color: #ffffff;
}
/* ===========================================================
34. Auth page — pre-auth split screen
(kit.AuthPage: photo aside (bg via --sfj-auth-bg) + form
column. Demo content inside the aside is styled in §38.)
=========================================================== */
.sfj-auth {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
}
.sfj-auth__aside {
position: relative;
display: none;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
color: #ffffff;
overflow: hidden;
}
.sfj-auth__aside::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--sfj-auth-bg, none);
background-position: center;
background-size: cover;
}
.sfj-auth__aside::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(15, 23, 42, 0.7),
rgba(12, 94, 154, 0.5)
);
}
.sfj-auth__aside > * {
position: relative;
z-index: 1;
}
.sfj-auth__main {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
background: var(--sfj-surface);
}
@media (min-width: 881px) {
.sfj-auth {
grid-template-columns: 1fr 1fr;
}
.sfj-auth__aside {
display: flex;
}
}
/* ===========================================================
35. Stack + spacing primitives — stacks, spacers, token scale
(kit spacing.go: VStack/HStack/Inline/Group/Grow/Center/
SizeBox + Spacer/HSpacer and the gap/margin/padding
utilities, all on the --sfj-space 1..8 scale.)
=========================================================== */
.sfj-vstack {
display: flex;
flex-direction: column;
}
.sfj-vstack--align-start {
align-items: flex-start;
}
.sfj-vstack--align-center {
align-items: center;
}
.sfj-vstack--align-end {
align-items: flex-end;
}
.sfj-hstack {
display: flex;
flex-direction: row;
align-items: center;
}
.sfj-hstack--align-start {
align-items: flex-start;
}
.sfj-hstack--align-end {
align-items: flex-end;
}
.sfj-hstack--align-baseline {
align-items: baseline;
}
.sfj-hstack--align-stretch {
align-items: stretch;
}
.sfj-hstack--justify-center {
justify-content: center;
}
.sfj-hstack--justify-end {
justify-content: flex-end;
}
.sfj-hstack--justify-between {
justify-content: space-between;
}
.sfj-hstack--justify-around {
justify-content: space-around;
}
.sfj-hstack--justify-evenly {
justify-content: space-evenly;
}
.sfj-hstack--wrap {
flex-wrap: wrap;
}
.sfj-inline {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.sfj-group {
display: flex;
align-items: center;
}
.sfj-grow {
flex: 1 1 auto;
}
.sfj-center {
margin-inline: auto;
text-align: center;
max-width: var(--sfj-center-max, none);
}
.sfj-sizebox {
flex-shrink: 0;
width: var(--sfj-sizebox-w, auto);
height: var(--sfj-sizebox-h, auto);
}
/* Fixed gaps on the --sfj-space scale (kit.Spacer / kit.HSpacer). */
.sfj-spacer-1 {
height: var(--sfj-space-1);
}
.sfj-spacer-2 {
height: var(--sfj-space-2);
}
.sfj-spacer-3 {
height: var(--sfj-space-3);
}
.sfj-spacer-4 {
height: var(--sfj-space-4);
}
.sfj-spacer-5 {
height: var(--sfj-space-5);
}
.sfj-spacer-6 {
height: var(--sfj-space-6);
}
.sfj-spacer-7 {
height: var(--sfj-space-7);
}
.sfj-spacer-8 {
height: var(--sfj-space-8);
}
.sfj-hspacer-1 {
display: inline-block;
width: var(--sfj-space-1);
}
.sfj-hspacer-2 {
display: inline-block;
width: var(--sfj-space-2);
}
.sfj-hspacer-3 {
display: inline-block;
width: var(--sfj-space-3);
}
.sfj-hspacer-4 {
display: inline-block;
width: var(--sfj-space-4);
}
.sfj-hspacer-5 {
display: inline-block;
width: var(--sfj-space-5);
}
.sfj-hspacer-6 {
display: inline-block;
width: var(--sfj-space-6);
}
.sfj-hspacer-7 {
display: inline-block;
width: var(--sfj-space-7);
}
.sfj-hspacer-8 {
display: inline-block;
width: var(--sfj-space-8);
}
/* Spacing utilities — full 1..8 scale on --sfj-space tokens
(plus the 0 margin/padding resets). */
.sfj-gap-1 {
gap: var(--sfj-space-1);
}
.sfj-gap-2 {
gap: var(--sfj-space-2);
}
.sfj-gap-3 {
gap: var(--sfj-space-3);
}
.sfj-gap-4 {
gap: var(--sfj-space-4);
}
.sfj-gap-5 {
gap: var(--sfj-space-5);
}
.sfj-gap-6 {
gap: var(--sfj-space-6);
}
.sfj-gap-7 {
gap: var(--sfj-space-7);
}
.sfj-gap-8 {
gap: var(--sfj-space-8);
}
.sfj-mt-0 {
margin-top: 0;
}
.sfj-mt-1 {
margin-top: var(--sfj-space-1);
}
.sfj-mt-2 {
margin-top: var(--sfj-space-2);
}
.sfj-mt-3 {
margin-top: var(--sfj-space-3);
}
.sfj-mt-4 {
margin-top: var(--sfj-space-4);
}
.sfj-mt-5 {
margin-top: var(--sfj-space-5);
}
.sfj-mt-6 {
margin-top: var(--sfj-space-6);
}
.sfj-mt-7 {
margin-top: var(--sfj-space-7);
}
.sfj-mt-8 {
margin-top: var(--sfj-space-8);
}
.sfj-mb-0 {
margin-bottom: 0;
}
.sfj-mb-1 {
margin-bottom: var(--sfj-space-1);
}
.sfj-mb-2 {
margin-bottom: var(--sfj-space-2);
}
.sfj-mb-3 {
margin-bottom: var(--sfj-space-3);
}
.sfj-mb-4 {
margin-bottom: var(--sfj-space-4);
}
.sfj-mb-5 {
margin-bottom: var(--sfj-space-5);
}
.sfj-mb-6 {
margin-bottom: var(--sfj-space-6);
}
.sfj-mb-7 {
margin-bottom: var(--sfj-space-7);
}
.sfj-mb-8 {
margin-bottom: var(--sfj-space-8);
}
.sfj-p-0 {
padding: 0;
}
.sfj-p-1 {
padding: var(--sfj-space-1);
}
.sfj-p-2 {
padding: var(--sfj-space-2);
}
.sfj-p-3 {
padding: var(--sfj-space-3);
}
.sfj-p-4 {
padding: var(--sfj-space-4);
}
.sfj-p-5 {
padding: var(--sfj-space-5);
}
.sfj-p-6 {
padding: var(--sfj-space-6);
}
.sfj-p-7 {
padding: var(--sfj-space-7);
}
.sfj-p-8 {
padding: var(--sfj-space-8);
}
.sfj-px-1 {
padding-inline: var(--sfj-space-1);
}
.sfj-px-2 {
padding-inline: var(--sfj-space-2);
}
.sfj-px-3 {
padding-inline: var(--sfj-space-3);
}
.sfj-px-4 {
padding-inline: var(--sfj-space-4);
}
.sfj-px-5 {
padding-inline: var(--sfj-space-5);
}
.sfj-px-6 {
padding-inline: var(--sfj-space-6);
}
.sfj-px-7 {
padding-inline: var(--sfj-space-7);
}
.sfj-px-8 {
padding-inline: var(--sfj-space-8);
}
.sfj-py-1 {
padding-block: var(--sfj-space-1);
}
.sfj-py-2 {
padding-block: var(--sfj-space-2);
}
.sfj-py-3 {
padding-block: var(--sfj-space-3);
}
.sfj-py-4 {
padding-block: var(--sfj-space-4);
}
.sfj-py-5 {
padding-block: var(--sfj-space-5);
}
.sfj-py-6 {
padding-block: var(--sfj-space-6);
}
.sfj-py-7 {
padding-block: var(--sfj-space-7);
}
.sfj-py-8 {
padding-block: var(--sfj-space-8);
}
/* ===========================================================
36. Inline text extras — icon rows, kbd, quote
=========================================================== */
/* Shared icon+text used by Ul (Marker "check"), CheckList and
IconedList. */
.sfj-iconrow {
display: flex;
gap: 0.6rem;
align-items: flex-start;
margin-bottom: 0.4rem;
color: var(--sfj-ink-soft);
}
/* Keyboard hint chip (kit.Kbd; pairs with .sfj-mono). */
.sfj-kbd {
border: 1px solid var(--sfj-hairline);
border-radius: 4px;
padding: 2px 5px;
background: var(--sfj-surface-tint);
}
/* Pull-quote with accent leading edge (kit.Quote). */
.sfj-quote {
border-left: 3px solid var(--sfj-accent);
padding-left: 1rem;
color: var(--sfj-ink-soft);
font-style: italic;
margin: 1rem 0;
}
/* ===========================================================
37. Gallery chrome — code panels, syntax tokens, scrim demo
(Disclosure stack under every gallery preview: usage
snippet, implementation, Props table, rendered HTML/CSS.)
=========================================================== */
.sfj-codepanels {
display: grid;
gap: 0.5rem;
margin-top: 1rem;
}
.sfj-codepanel__docs {
font-family: var(--sfj-font-mono);
font-size: 0.75rem;
color: var(--sfj-ink-soft);
background: var(--sfj-surface-soft);
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
padding: 0.5rem 0.75rem;
}
.sfj-codepanel__docs-label {
display: inline-block;
font-weight: 600;
color: var(--sfj-accent);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.66rem;
margin-right: 0.3rem;
}
.sfj-codepanel__note {
font-family: var(--sfj-font-mono);
font-size: 0.72rem;
color: var(--sfj-mute);
padding: 0.2rem 0.25rem;
}
.sfj-codepanel {
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-md);
background: var(--sfj-surface-soft);
overflow: hidden;
}
.sfj-codepanel__summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.9rem;
font-family: var(--sfj-font-mono);
font-size: 0.78rem;
color: var(--sfj-mute);
user-select: none;
}
.sfj-codepanel__summary::-webkit-details-marker {
display: none;
}
.sfj-codepanel__summary::before {
content: "\203A";
display: inline-block;
transition: transform 0.15s ease;
color: var(--sfj-mute);
font-size: 1rem;
line-height: 1;
}
.sfj-codepanel[open] .sfj-codepanel__summary::before {
transform: rotate(90deg);
}
.sfj-codepanel__summary:hover {
color: var(--sfj-ink);
}
.sfj-codepanel__body {
position: relative;
border-top: 1px solid var(--sfj-hairline);
}
.sfj-codepanel__pre {
margin: 0;
padding: 1rem 1.1rem;
overflow: auto;
background: var(--sfj-surface-tint);
}
.sfj-codepanel__code {
font-family: var(--sfj-font-mono);
font-size: 0.78rem;
line-height: 1.6;
color: var(--sfj-ink-soft);
white-space: pre;
tab-size: 4;
}
.sfj-codepanel__copy {
position: absolute;
top: 0.55rem;
right: 0.6rem;
z-index: 1;
font-family: var(--sfj-font-mono);
font-size: 0.68rem;
color: var(--sfj-mute);
background: var(--sfj-surface);
border: 1px solid var(--sfj-hairline);
border-radius: var(--sfj-radius-pill);
padding: 0.2rem 0.65rem;
cursor: pointer;
}
.sfj-codepanel__copy:hover {
color: var(--sfj-ink);
border-color: var(--sfj-hairline-strong);
}
.sfj-codepanel__copy.is-copied {
color: var(--sfj-success);
border-color: var(--sfj-success);
}
.sfj-codepanel__props {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
}
.sfj-codepanel__th {
text-align: left;
padding: 0.45rem 0.9rem;
border-bottom: 1px solid var(--sfj-hairline);
color: var(--sfj-mute);
font-weight: 600;
background: var(--sfj-surface-tint);
}
.sfj-codepanel__td {
padding: 0.4rem 0.9rem;
border-bottom: 1px solid var(--sfj-hairline);
color: var(--sfj-ink-soft);
vertical-align: top;
}
.sfj-codepanel__td--name {
font-family: var(--sfj-font-mono);
color: var(--sfj-ink);
font-weight: 600;
white-space: nowrap;
}
.sfj-codepanel__td--type {
font-family: var(--sfj-font-mono);
color: var(--sfj-accent-strong);
white-space: nowrap;
}
/* Code-panel syntax tokens (.tok-*) — emitted by the gallery's
Go/HTML/CSS highlighters (gallery/highlight.go, gallery/markup.go). */
.sfj-codepanel .tok-kw {
color: var(--sfj-accent);
font-weight: 600;
}
.sfj-codepanel .tok-str {
color: #0a7d4f;
}
.sfj-codepanel .tok-num {
color: var(--sfj-warning);
}
.sfj-codepanel .tok-comment {
color: var(--sfj-mute);
font-style: italic;
}
.sfj-codepanel .tok-fn {
color: var(--sfj-ink);
font-weight: 600;
}
.sfj-codepanel .tok-ident {
color: var(--sfj-ink-soft);
}
/* HTML tokens */
.sfj-codepanel .tok-tag {
color: var(--sfj-ink);
font-weight: 600;
}
.sfj-codepanel .tok-attr {
color: var(--sfj-ink-soft);
}
.sfj-codepanel .tok-attrval {
color: #0a7d4f;
}
.sfj-codepanel .tok-class {
color: var(--sfj-accent);
font-weight: 600;
}
/* CSS tokens */
.sfj-codepanel .tok-sel {
color: var(--sfj-accent);
font-weight: 600;
}
.sfj-codepanel .tok-prop {
color: var(--sfj-ink);
}
.sfj-codepanel .tok-val {
color: var(--sfj-ink-soft);
}
/* Scrim specimen — the Colour foundations band's scrim-over-photo
strip. The photo URL is mount-prefix dependent, so it arrives as
the --sfj-scrim-demo-bg custom property (set inline via kit.Asset). */
.sfj-scrim-demo {
display: flex;
border-radius: var(--sfj-radius-lg);
overflow: hidden;
background-image: var(--sfj-scrim-demo-bg);
background-size: cover;
background-position: center;
}
/* ===========================================================
38. Demo helpers — Min side portal
(gallery/pages/minside; minside-shaped pieces stay
demo-local in Go but their CSS lives here.)
=========================================================== */
/* Dashboard grid + product cards (ported from index.go's deleted
inline |