/* ========================================================================= Component layer ========================================================================= Depends on tokens.css. Nothing here hardcodes a colour: every value comes from a --fb-* token, so Nightfall costs nothing extra. Load order (see annuaire/templates/annuaire/base.html): bootstrap.css → tokens.css → components.css → {vendor_css} → main.css Vendor re-skins (leaflet, family-chart) deliberately live in main.css instead of here: they have to win against the vendor stylesheets, which load after this file. Sections 1 Base & typography 2 The eaves rule — the one device that unifies every view 3 The ridge 4 App shell: sidebar, brand block, content column 5 Cards: person, place, post, document 6 Page furniture: toolbars, chips, empty states, alerts, pagination 7 Archetype D — record detail 8 Archetype E — long-form 9 Archetype F — canvas tools 10 Archetype G — forms 11 Archetype H — threshold (auth) 12 Archetype I — tabular 13 Archetype J — destructive confirm 14 Motion & focus 15 Archetype A — hub 16 Category tree (documents) 17 Stock-Bootstrap seams ========================================================================= */ /* ========================================================================= 1. Base & typography ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--fb-parchment); color: var(--fb-ink); font-family: var(--fb-font-body); font-size: var(--fb-text-base); line-height: var(--fb-leading-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .fb-display { font-family: var(--fb-font-display); color: var(--fb-ink); margin: 0 0 var(--fb-sp-3); text-wrap: balance; } h1 { font-size: var(--fb-text-h1); font-weight: 700; line-height: var(--fb-leading-tight); letter-spacing: -0.012em; } h2 { font-size: var(--fb-text-h2); font-weight: 600; line-height: var(--fb-leading-snug); } h3 { font-size: var(--fb-text-h3); font-weight: 600; line-height: 1.4; letter-spacing: 0.005em; } .fb-display { font-size: var(--fb-text-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; } p { margin: 0 0 var(--fb-sp-3); } p:last-child { margin-bottom: 0; } a { color: var(--fb-ember); text-decoration-color: color-mix(in srgb, var(--fb-ember) 35%, transparent); text-underline-offset: 0.16em; } a:hover { color: var(--fb-alpenglow); text-decoration-color: currentColor; } /* Inline SVG glyphs from the {% icon %} tag. They inherit colour via currentColor and sit on the text baseline rather than above it. */ .fb-icon { display: inline-block; vertical-align: -0.18em; flex: none; } /* Meta lines: authorship, dates, counts, captions. */ .fb-meta { font-size: var(--fb-text-sm); color: var(--fb-bark); line-height: 1.5; margin: 0; } /* Small-caps section label. Replaces the ad-hoc bold-uppercase used today in the sidebar, table heads, and form legends — one class for all three. */ .fb-eyebrow { font-size: var(--fb-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--fb-tracking-eyebrow); color: var(--fb-bark); margin: 0; } /* ========================================================================= 2. The eaves rule ------------------------------------------------------------------------- The emails put a 2px ink rule over a 1px hairline directly beneath the ridge, echoing the fascia trim under a chalet roof. On the web that same double rule becomes the page-header device: a short alpenglow stub above a full-width hairline. One class, applied to every view's

block, is what makes forty templates read as one product. ========================================================================= */ .fb-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--fb-sp-4); padding-bottom: var(--fb-sp-4); margin-bottom: var(--fb-sp-5); position: relative; } .fb-page-head::before, .fb-page-head::after { content: ""; position: absolute; left: 0; bottom: 0; } .fb-page-head::before { /* the stub */ width: 56px; height: 3px; background: var(--fb-alpenglow); border-radius: 2px; z-index: 1; } .fb-page-head::after { /* the hairline */ width: 100%; height: 1px; background: var(--fb-border); } .fb-page-head__titles { min-width: 0; } .fb-page-head__titles h1 { margin-bottom: var(--fb-sp-1); } .fb-page-head__lede { font-size: var(--fb-text-sm); color: var(--fb-bark); max-width: var(--fb-measure-max); margin: 0; } .fb-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--fb-sp-2); align-items: center; } /* The eaves device on its own, with no title attached — used where a heading block has already been written out by hand (long-form articles put the byline between the title and the rule). */ .fb-rule { position: relative; height: 3px; margin-bottom: var(--fb-sp-5); } .fb-rule::before, .fb-rule::after { content: ""; position: absolute; left: 0; bottom: 0; } .fb-rule::before { width: 56px; height: 3px; background: var(--fb-alpenglow); border-radius: 2px; z-index: 1; } .fb-rule::after { width: 100%; height: 1px; background: var(--fb-border); } /* Section rule inside a page — same grammar, quieter. */ .fb-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fb-sp-4); margin: var(--fb-sp-6) 0 var(--fb-sp-4); padding-bottom: var(--fb-sp-2); border-bottom: 1px solid var(--fb-border); } .fb-section-head h2 { margin: 0; } /* ========================================================================= 3. The ridge ------------------------------------------------------------------------- Drawn as SVG here rather than the emails' bordered-triangle hack, because nothing on the web needs to survive Outlook. Same three-uneven-peaks silhouette, same layering (slate-mist behind, spruce in front, snowcap on the tallest), and the two pines from favicon.svg — the only pre-existing brand asset — planted at the base so the icon and the app share a mark. It appears in exactly three places: the sidebar brand block, the threshold card header, and as a watermark in empty states. A ridge on every page would be wallpaper; three placements make it a signature. ========================================================================= */ .fb-ridge { display: block; width: 100%; height: auto; background: var(--fb-sky); } .fb-ridge__far { fill: var(--fb-slate-mist); } .fb-ridge__near { fill: var(--fb-spruce); } .fb-ridge__snow { fill: var(--fb-snowcap); } .fb-ridge__pine { fill: color-mix(in srgb, var(--fb-spruce) 72%, #000); } /* The eaves line as it appears under a ridge (not under a page title). */ .fb-eaves { height: 3px; background: var(--fb-ink); border-bottom: 1px solid var(--fb-border); } .fb-wordmark { font-family: var(--fb-font-display); font-size: var(--fb-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--fb-tracking-wordmark); color: var(--fb-ink); text-decoration: none; white-space: nowrap; } /* ========================================================================= 4. App shell ========================================================================= */ .fb-layout { display: flex; min-height: 100vh; align-items: stretch; } /* The offcanvas host. Bootstrap's .offcanvas-lg is display:flex below the lg breakpoint and a plain block above it; the sidebar panel inside does the actual styling, so this element only has to get out of the way and not introduce padding of its own. */ .fb-sidebar-host { flex-shrink: 0; } @media (min-width: 992px) { .fb-sidebar-host .offcanvas-body { padding: 0; overflow: visible; } .fb-sidebar-host .offcanvas-header { display: none; } } .fb-sidebar { width: var(--fb-sidebar-w); flex-shrink: 0; background: var(--fb-panel); border-right: 1px solid var(--fb-border); display: flex; flex-direction: column; min-height: 100vh; } @media (min-width: 992px) { .fb-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } } /* Inside the mobile offcanvas the panel is already the drawer — it must not carry its own border or a fixed width. */ @media (max-width: 991.98px) { .fb-sidebar { width: 100%; border-right: 0; min-height: 0; } } /* --- Brand block: the email header, transplanted ------------------------ */ .fb-brand { display: block; background: var(--fb-sky); position: relative; text-decoration: none; } /* Reserves the vertical room the absolutely-positioned wordmark occupies, so the ridge starts below it rather than behind it. */ .fb-brand__spacer { display: block; height: 34px; } .fb-brand__name { position: absolute; top: var(--fb-sp-4); left: 0; right: 0; text-align: center; } .fb-brand .fb-ridge { height: 62px; } /* --- Identity pill ------------------------------------------------------ */ .fb-identity { display: flex; align-items: center; gap: var(--fb-sp-3); margin: var(--fb-sp-3); padding: var(--fb-sp-1) var(--fb-sp-3); background: var(--fb-card); border: 1px solid var(--fb-border); border-radius: var(--fb-radius); text-decoration: none; color: var(--fb-ink); transition: border-color var(--fb-dur-fast) var(--fb-ease); } .fb-identity:hover { border-color: var(--fb-alpenglow); color: var(--fb-ink); } .fb-identity img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--fb-border); } .fb-identity__text { min-width: 0; display: grid; } .fb-identity__name { font-weight: 600; font-size: var(--fb-text-sm); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-identity__role { font-size: var(--fb-text-xs); color: var(--fb-bark); } /* --- Nav ---------------------------------------------------------------- */ /* The nav scrolls, the foot below it does not: a nav taller than the viewport used to push the theme toggle and logout below the fold on a 768p laptop, reachable only through an unaffordanced nested scroll. */ .fb-nav { padding: 0 var(--fb-sp-3) var(--fb-sp-4); flex: 1 1 auto; min-height: 0; overflow-y: auto; } .fb-nav__group { margin-top: var(--fb-sp-4); } .fb-nav__label { padding: 0 var(--fb-sp-3) var(--fb-sp-1); } .fb-nav ul { list-style: none; margin: 0; padding: 0; } .fb-nav a, .fb-nav__logout { display: block; width: 100%; text-align: left; padding: var(--fb-sp-1) var(--fb-sp-3); margin-bottom: 1px; border: 0; border-left: 3px solid transparent; border-radius: 0 var(--fb-radius-sm) var(--fb-radius-sm) 0; background: none; font: inherit; font-size: 0.875rem; color: var(--fb-ink); text-decoration: none; cursor: pointer; transition: background var(--fb-dur-fast) var(--fb-ease), border-color var(--fb-dur-fast) var(--fb-ease); } .fb-nav a:hover, .fb-nav__logout:hover { background: color-mix(in srgb, var(--fb-card) 70%, transparent); border-left-color: var(--fb-border-strong); color: var(--fb-ink); } /* Today the sidebar has no active state at all — you cannot tell which page you are on. This is that state. */ .fb-nav a[aria-current="page"] { background: var(--fb-card); border-left-color: var(--fb-alpenglow); font-weight: 600; color: var(--fb-ink); } .fb-nav__foot { flex: 0 0 auto; margin: 0 var(--fb-sp-3); padding: var(--fb-sp-3) 0; border-top: 1px solid var(--fb-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fb-sp-2); } .fb-nav__logout-form { margin: 0; } /* The nav's own rule above turns every descendant link into a full-width nav row; the foot's buttons and links are ordinary inline controls. */ .fb-nav__foot a { display: inline-flex; width: auto; border-left: 0; padding: 0.25rem 0.625rem; } /* On mobile the sidebar is the offcanvas drawer, which scrolls as one piece -- a nested scrolling nav there would trap the foot instead of revealing it. */ @media (max-width: 991.98px) { .fb-nav { overflow-y: visible; } } /* --- Content column ----------------------------------------------------- */ .fb-content { flex: 1; min-width: 0; /* keep: wide canvases must scroll inside, not push the shell */ padding: var(--fb-sp-6) var(--fb-sp-6) var(--fb-sp-8); } .fb-content__inner { max-width: var(--fb-content-max); margin: 0 auto; } .fb-footer { margin-top: var(--fb-sp-8); text-align: center; font-size: var(--fb-text-xs); color: var(--fb-bark); } /* --- Search form --------------------------------------------------------- Mounted twice (annuaire/_search_form.html): in .fb-topbar (mobile) and at the top of .fb-sidebar's