/* ========================================================================== Projet Serval — components.css Reusable, static UI patterns extracted from the page markup. Dynamic (JS-computed) styles, one-off positioning and `style-hover` stay inline. ========================================================================== */ /* --- Layout ------------------------------------------------------------- */ .section { max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter); } .band { border-top: 1px solid var(--line-soft); background: var(--panel-3); } /* Diagonal amber accent bar. Transparent gaps let any surface show through, so a single class replaces the old per-background variants. */ .stripe { height: 5px; background: repeating-linear-gradient(135deg, var(--amber) 0 13px, transparent 13px 26px); } /* Full-height page wrapper */ .page-root { position: relative; min-height: 100vh; background: var(--bg); } /* --- Top navigation shell ----------------------------------------------- */ /* Transparent over the hero, turns solid + hairline once scrolled. */ .site-header { transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; background: transparent; border-bottom: 1px solid transparent; } html.header-scrolled .site-header { background: rgba(20, 20, 13, .92); backdrop-filter: blur(8px); border-bottom-color: var(--line); } .nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--gutter); } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } /* Minimal text FR / EN switch */ .lang-toggle { display: flex; align-items: center; gap: 7px; font-family: var(--f-body); font-size: 12px; font-weight: 500; letter-spacing: .08em; } .lang-toggle button { background: none; border: none; padding: 2px 1px; cursor: pointer; font: inherit; letter-spacing: inherit; color: var(--muted); transition: color .15s ease; } .lang-toggle button:hover { color: var(--ink); } /* Smooth FR / EN swap. The dc-runtime wraps every interpolated text value in , so those spans are exactly the bits of copy that change with the language. On switch, lang-transition.js flips .lang-switching on , which replays this fade on all of them at once — turning the hard text swap into a soft one. Reduced-motion users just get the instant swap. */ @keyframes lang-fade { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } } .lang-switching .sc-interp { animation: lang-fade .35s ease both; } @media (prefers-reduced-motion: reduce) { .lang-switching .sc-interp { animation: none; } } .burger { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; } /* --- Brand / logo ------------------------------------------------------- */ .logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .logo-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; } .logo-mark::before { content: ""; position: absolute; inset: 0; transform: rotate(45deg); border: 1.5px solid var(--amber); border-radius: 4px; } .logo-mark-sm { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; } .logo-mark-sm::before { content: ""; position: absolute; inset: 0; transform: rotate(45deg); border: 2px solid var(--amber); } /* Single-diamond 34px mark (admin sidebar) */ .logo-mark-1 { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; } .logo-mark-1::before { content: ""; position: absolute; inset: 0; transform: rotate(45deg); border: 2px solid var(--amber); } .logo-s { position: relative; font-family: var(--f-brand); font-weight: 600; font-size: 13px; color: var(--amber); } .logo-s-sm { font-size: 12px; } .brand-col { display: flex; flex-direction: column; line-height: 1.05; } .brand-sup { font-size: 8.5px; letter-spacing: .34em; color: #8a856f; font-weight: 600; font-family: var(--f-body); margin-bottom: 3px; } .brand-name { font-family: var(--f-brand); font-size: 17px; font-weight: 600; letter-spacing: .16em; color: var(--ink); } /* --- Navigation --------------------------------------------------------- */ .nav-link { font-family: var(--f-body); text-transform: uppercase; font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--muted); transition: color .15s ease; } .nav-link:hover { color: var(--ink); } .nav-link.is-active { color: var(--amber); } /* Hamburger */ .burger-bar { width: 22px; height: 2px; background: var(--ink); display: block; } /* Mobile fullscreen menu */ .mobile-menu { position: fixed; inset: 0; z-index: 55; background: rgba(12, 12, 7, .98); backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 40px; } .mnav-link { font-family: var(--f-brand); text-transform: uppercase; font-size: 26px; font-weight: 600; letter-spacing: .08em; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); } .mnav-link:hover { color: var(--ink); } .mnav-link:last-child { border-bottom: none; } .mnav-link.is-active { color: var(--ink); } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; border: none; } .btn-primary { background: var(--amber); color: #14140d; } .btn-primary:hover { background: var(--amber-bright); } .btn-ghost { background: none; border: 1px solid rgba(232, 227, 214, .26); color: var(--ink); font-weight: 500; } .btn-ghost:hover { border-color: var(--amber); color: var(--amber); } /* Compact nav download button — outline, fills on hover */ .btn-dl { display: flex; align-items: center; gap: 8px; background: transparent; color: var(--amber); border: 1px solid rgba(232, 163, 23, .55); border-radius: 3px; font-family: var(--f-brand); font-weight: 500; font-size: 12px; letter-spacing: .1em; padding: 8px 16px; cursor: pointer; text-transform: uppercase; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn-dl:hover { background: var(--amber); color: #14140d; border-color: var(--amber); } /* Square icon button (edit / delete / pin / close in toolbars) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; cursor: pointer; color: var(--ink); } .icon-btn:hover { border-color: var(--amber); color: var(--amber); } .icon-btn-danger:hover { background: rgba(192, 57, 43, .15); border-color: transparent; color: #e0796d; } /* Table action buttons (admin) */ .tbl-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: 1px solid rgba(232, 227, 214, .18); color: var(--muted); cursor: pointer; font-size: 12px; } .tbl-btn:hover { border-color: var(--amber); color: var(--amber); } .tbl-btn-danger { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: 1px solid rgba(192, 57, 43, .5); color: #d9604f; cursor: pointer; font-size: 12px; } .tbl-btn-danger:hover { background: rgba(192, 57, 43, .15); } /* Modal close (absolute, top-right) */ .modal-close { position: absolute; top: 20px; right: 18px; width: 34px; height: 34px; border: 1px solid rgba(232, 227, 214, .18); background: none; color: var(--ink); cursor: pointer; font-size: 16px; } .modal-close:hover { border-color: var(--amber); color: var(--amber); } /* --- Small text / chips ------------------------------------------------- */ /* Muted monospace caption (media placeholders, meta) */ .mono-xs { font-family: var(--f-mono); font-size: 11px; color: var(--muted-2); } .sep { color: var(--muted-3); } /* Stencil kicker badge with a leading amber triangle */ .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-stencil); font-size: 12px; letter-spacing: .16em; color: var(--amber); border: 1px solid var(--amber-line); padding: 5px 12px; margin-bottom: 18px; } .kicker::before { content: ""; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } /* Stencil kicker label inside modals */ .modal-kicker { font-family: var(--f-stencil); font-size: 12px; letter-spacing: .14em; color: var(--amber); margin-bottom: 10px; } /* Spec chip (mono, bordered) */ .spec { font-family: var(--f-mono); font-size: 11px; color: #b3ad8a; border: 1px solid rgba(232, 227, 214, .16); padding: 4px 9px; letter-spacing: .04em; }