/* ========================================================================= ANAC eServices — design system (2026) Loaded LAST, after bootstrap / os-style / style-index / custom.css, so it can neutralise the legacy theme. Everything is scoped under `.anac-ui` (set on ) to keep the Filament / Voyager back-office untouched. ========================================================================= */ :root { --anac-navy: #0F2C52; --anac-navy-deep: #0A1F3B; --anac-navy-hover: #123E70; --anac-link: #1D5A9E; --anac-bg: #F4F5F7; --anac-surface: #FFFFFF; --anac-ink: #1C2530; --anac-ink-soft: #33475B; --anac-muted: #6B7280; --anac-muted-2: #4B5563; --anac-label: #8B93A1; --anac-border: #E7EAF0; --anac-border-input: #DDE1E7; --anac-tint: #F4F7FB; --anac-tint-border: #E1E9F3; --anac-danger: #B0231F; --anac-green: #008751; --anac-yellow: #FCD116; --anac-red: #E8112B; --anac-shadow: 0 8px 24px rgba(15, 44, 82, 0.10); --anac-shadow-lg: 0 12px 32px rgba(15, 44, 82, 0.16); --anac-font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ------------------------------------------------------------------------- Legacy reset — style-index.css declares `* { font-size:12px; font-family: montserrat }` and pins the old fixed navbar. Undo it inside .anac-ui. ------------------------------------------------------------------------- */ html { background-color: var(--anac-bg); } body.anac-ui { margin: 0; padding-top: 0; width: 100%; background: var(--anac-bg); color: var(--anac-ink); font-family: var(--anac-font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } body.anac-ui * { font-family: var(--anac-font); font-size: inherit; box-sizing: border-box; } body.anac-ui .fa, body.anac-ui [class^="fa-"], body.anac-ui [class*=" fa-"] { font-family: FontAwesome; } body.anac-ui a { color: var(--anac-link); text-decoration: none; } body.anac-ui a:hover { color: var(--anac-navy-hover); text-decoration: underline; } /* `:where()` keeps these base rules at zero specificity for the element part, so any single component class below can still override them. */ body.anac-ui :where(h1) { font-size: 44px; } body.anac-ui :where(h2) { font-size: 26px; } body.anac-ui :where(h3) { font-size: 22px; } body.anac-ui :where(h4) { font-size: 18px; } body.anac-ui :where(h5) { font-size: 15.5px; } body.anac-ui :where(h6) { font-size: 14px; } body.anac-ui :where(h1, h2, h3, h4, h5, h6) { color: var(--anac-ink); font-weight: 700; line-height: 1.25; margin: 0 0 12px; } body.anac-ui small { font-size: 13px; } .anac-container { max-width: 1240px; margin: 0 auto; padding: 0 40px; width: 100%; } /* ------------------------------------------------------------------------- Header ------------------------------------------------------------------------- */ /* Must out-specify style-index.css's `body #app header` (1,0,2), which pins a fixed 97px navy bar — hence the `#app` in the selector. */ body.anac-ui #app .anac-header { position: static; z-index: auto; height: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 40px; background: var(--anac-surface); color: var(--anac-ink); text-align: left; } .anac-header--app { border-bottom: 1px solid var(--anac-border); } .anac-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .anac-brand img { height: 56px; width: auto; display: block; } .anac-header--app .anac-brand img { height: 48px; } .anac-nav { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; justify-content: flex-end; } .anac-header--app .anac-nav { gap: 22px; } .anac-nav a, .anac-nav .anac-nav-link { color: var(--anac-ink); font-weight: 600; font-size: 15px; background: none; border: none; padding: 0; cursor: pointer; } .anac-nav a:hover, .anac-nav .anac-nav-link:hover { color: var(--anac-navy-hover); text-decoration: none; } .anac-header--app .anac-nav a, .anac-header--app .anac-nav .anac-nav-link { font-size: 14px; } .anac-nav-sep { width: 1px; height: 24px; background: #E2E5EA; } .anac-nav-greeting { font-size: 14px; color: var(--anac-muted-2); font-weight: 400; } .anac-nav-greeting b { color: var(--anac-ink); font-weight: 700; } .anac-nav-logout { color: var(--anac-danger) !important; font-weight: 600; } .anac-nav-logout:hover { color: #8C1B18 !important; } /* Navy pill call to action used in the header */ .anac-nav .anac-btn-solid { background: var(--anac-navy); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; } .anac-nav .anac-btn-solid:hover { background: var(--anac-navy-hover); color: #fff; text-decoration: none; } /* Bénin flag stripe */ .anac-flagbar { height: 3px; background: linear-gradient(90deg, var(--anac-green) 33%, var(--anac-yellow) 33% 66%, var(--anac-red) 66%); } .anac-flagbar--thick { height: 4px; } .anac-burger { display: none; background: none; border: 1px solid var(--anac-border-input); border-radius: 8px; padding: 8px 12px; cursor: pointer; color: var(--anac-ink); font-size: 18px; line-height: 1; } /* ------------------------------------------------------------------------- Hero + tracking bar (public home) ------------------------------------------------------------------------- */ .anac-hero { background: var(--anac-navy); padding: 64px 40px 110px; text-align: center; } .anac-hero-inner { max-width: 1240px; margin: 0 auto; } .anac-hero-eyebrow { display: inline-block; padding: 6px 14px; background: rgba(255, 255, 255, 0.08); border-radius: 100px; color: #B9CBE4; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 20px; } body.anac-ui .anac-hero h1 { color: #fff; font-size: 44px; font-weight: 800; line-height: 1.15; margin: 0 0 16px; } body.anac-ui .anac-hero p { color: #C4D2E4; font-size: 18px; max-width: 640px; margin: 0 auto; line-height: 1.6; } .anac-tracker-wrap { max-width: 1240px; margin: -58px auto 0; padding: 0 40px; position: relative; z-index: 2; } .anac-tracker { background: #fff; border-radius: 14px; box-shadow: var(--anac-shadow-lg); padding: 26px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .anac-tracker-copy { flex: 1; min-width: 260px; } .anac-tracker-title { font-weight: 700; font-size: 15px; color: var(--anac-ink); margin-bottom: 4px; } .anac-tracker-sub { font-size: 13px; color: var(--anac-muted); } .anac-tracker .anac-input { flex: 1; min-width: 200px; margin-bottom: 0; } .anac-tracker-result { flex-basis: 100%; } .anac-tracker-result:empty { display: none; } /* ------------------------------------------------------------------------- Sections & service cards ------------------------------------------------------------------------- */ .anac-section { max-width: 1240px; margin: 0 auto; padding: 70px 40px 90px; } body.anac-ui .anac-section-title { font-size: 26px; font-weight: 700; margin: 0 0 6px; } body.anac-ui .anac-section-sub { color: var(--anac-muted); font-size: 15px; margin: 0 0 36px; } .anac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; } .anac-grid--compact { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; } .anac-service { background: #fff; border: 1px solid var(--anac-border); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow 0.15s, transform 0.15s; } .anac-service:hover { box-shadow: var(--anac-shadow); transform: translateY(-2px); } .anac-service-title { font-weight: 700; font-size: 15.5px; margin-bottom: 6px; color: var(--anac-ink); } body.anac-ui .anac-service-title a { color: inherit; } .anac-service-desc { color: var(--anac-muted); font-size: 13.5px; line-height: 1.5; } .anac-service-desc p { margin: 0; font-size: inherit; color: inherit; } .anac-service-link { margin-top: auto; font-weight: 600; font-size: 13.5px; } .anac-grid--compact .anac-service { padding: 20px; gap: 12px; } .anac-grid--compact .anac-service-title { font-size: 14.5px; } .anac-grid--compact .anac-service-desc { font-size: 13px; } .anac-grid--compact .anac-service-link { font-size: 13px; } /* ------------------------------------------------------------------------- Application shell — sticky sidebar + content ------------------------------------------------------------------------- */ .anac-shell { display: flex; align-items: flex-start; max-width: 1320px; margin: 0 auto; padding: 32px 40px; gap: 28px; } .anac-page { max-width: 980px; padding-top: 32px; padding-bottom: 48px; } .anac-page--wide { max-width: 1240px; } .anac-content { flex: 1; min-width: 0; } /* Centred, readable column for single-form pages (register, password reset…) */ .anac-narrow { max-width: 760px; margin: 0 auto; width: 100%; } /* Legacy views wrap their content in bootstrap columns (col-md-9, col-md-8…). Inside the shell those must span the full content column. */ .anac-content > .col-md-3, .anac-content > .col-md-4, .anac-content > .col-md-6, .anac-content > .col-md-8, .anac-content > .col-md-9, .anac-content > .col-md-10, .anac-content > .col-md-11, .anac-content > .col-md-12, .anac-page > .col-md-3, .anac-page > .col-md-4, .anac-page > .col-md-6, .anac-page > .col-md-8, .anac-page > .col-md-9, .anac-page > .col-md-12 { flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; } /* ------------------------------------------------------------------------- Sidebar ------------------------------------------------------------------------- */ .anac-sidebar { width: 270px; flex-shrink: 0; position: sticky; top: 24px; } .anac-sidebar-group { margin-bottom: 22px; } .anac-sidebar-label { font-size: 11.5px; font-weight: 700; color: var(--anac-label); letter-spacing: 0.06em; text-transform: uppercase; padding: 0 4px 8px; } .anac-sidebar-list { background: #fff; border: 1px solid var(--anac-border); border-radius: 10px; overflow: hidden; list-style: none; margin: 0; padding: 0; } .anac-sidebar-list li, .anac-sidebar-list .nav-item { list-style: none; margin: 0; padding: 0; background: none; /* the legacy mobile rules centre `.nav li` */ text-align: left; } .anac-sidebar-list li > a, .anac-sidebar-list .nav-link { display: block; padding: 11px 14px; font-size: 13.5px; color: var(--anac-ink-soft); font-weight: 500; line-height: 1.4; text-align: left; border-bottom: 1px solid #F0F2F5; text-decoration: none; } .anac-sidebar-list > li:last-child > a { border-bottom: none; } .anac-sidebar-list li > a:hover, .anac-sidebar-list .nav-link:hover { background: var(--anac-tint); color: var(--anac-navy); text-decoration: none; } .anac-sidebar-list li > a.is-active { background: #EAF0F8; color: var(--anac-navy); font-weight: 700; } /* Nested submenus rendered by menu() */ .anac-sidebar-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #F0F2F5; } .anac-sidebar-list ul li > a { padding-left: 28px; font-size: 13px; color: var(--anac-muted-2); } /* ------------------------------------------------------------------------- Cards (bootstrap .card is reused across ~45 legacy views) ------------------------------------------------------------------------- */ body.anac-ui .card { background: #fff; border: 1px solid var(--anac-border); border-radius: 14px; box-shadow: none; margin-bottom: 24px; overflow: hidden; } body.anac-ui .card-header { height: auto !important; background: #fff; border-bottom: 1px solid var(--anac-border); padding: 18px 26px; font-size: 19px; font-weight: 700; color: var(--anac-ink); line-height: 1.3; } body.anac-ui .card-header a { color: inherit; } body.anac-ui .card-body { padding: 26px !important; font-size: 14px; color: var(--anac-ink-soft); } body.anac-ui .card-footer { background: #fff; border-top: 1px solid var(--anac-border); padding: 16px 26px; font-size: 13.5px; font-weight: 600; } /* The legacy fixed-height helpers fought the old 3-per-row card grid. */ body.anac-ui .col-md-8 .col-md-4 .equiv-body, body.anac-ui .col-md-12 .col-md-3 .equiv-body { height: auto !important; } /* Panel used by a few form views */ body.anac-ui .anac-panel { background: #fff; border: 1px solid var(--anac-border); border-radius: 14px; overflow: hidden; } body.anac-ui .anac-panel-head { padding: 20px 26px; border-bottom: 1px solid var(--anac-border); } body.anac-ui .anac-panel-head h2 { font-size: 19px; font-weight: 700; margin: 0; } body.anac-ui .anac-panel-body { padding: 26px; } body.anac-ui .anac-panel-foot { padding: 18px 26px; border-top: 1px solid var(--anac-border); display: flex; gap: 12px; justify-content: flex-end; } /* Legacy views build their intro/action bar with the bootstrap utility stack `shadow p-3 mb-3 bg-white rounded` — give it the design's note / action look. */ body.anac-ui .card-body > .shadow.bg-white.rounded { background: var(--anac-tint) !important; border: 1px solid var(--anac-tint-border); border-radius: 10px !important; box-shadow: none !important; padding: 16px 18px !important; margin-bottom: 22px !important; font-size: 13.5px; color: #3E4C5E; line-height: 1.6; } body.anac-ui .card-body > .shadow.bg-white.rounded a { font-weight: 600; } /* `form/create.blade.php` nests an empty .card-footer inside .card-body. */ body.anac-ui .card-body > .card-footer:empty { display: none; } /* Informational note block */ .anac-note { background: var(--anac-tint); border: 1px solid var(--anac-tint-border); border-radius: 10px; padding: 16px 18px; font-size: 13.5px; color: #3E4C5E; line-height: 1.6; margin-bottom: 26px; } /* ------------------------------------------------------------------------- Forms ------------------------------------------------------------------------- */ body.anac-ui label, body.anac-ui .col-form-label { display: block; font-weight: 600; font-size: 13.5px; color: var(--anac-ink); margin-bottom: 6px; text-align: left !important; } body.anac-ui .form-control, body.anac-ui .anac-input, body.anac-ui input[type="text"], body.anac-ui input[type="email"], body.anac-ui input[type="password"], body.anac-ui input[type="number"], body.anac-ui input[type="date"], body.anac-ui input[type="tel"], body.anac-ui input[type="url"], body.anac-ui select, body.anac-ui textarea { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--anac-border-input); border-radius: 8px; font-size: 14px; color: var(--anac-ink); background: #fff; outline: none; height: auto; box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; } body.anac-ui textarea { resize: vertical; } body.anac-ui .form-control:focus, body.anac-ui .anac-input:focus, body.anac-ui input:focus, body.anac-ui select:focus, body.anac-ui textarea:focus { border-color: var(--anac-navy); box-shadow: 0 0 0 3px rgba(15, 44, 82, 0.10); } body.anac-ui input::placeholder, body.anac-ui textarea::placeholder { color: #9AA3B1; font-style: normal; } body.anac-ui input[type="checkbox"], body.anac-ui input[type="radio"] { width: 15px; height: 15px; padding: 0; margin: 0 8px 0 0; vertical-align: middle; } body.anac-ui .form-group { margin-bottom: 20px; } /* The legacy theme tints and boxes
; the card already provides the surface the form-builder fields sit on. */ body.anac-ui .card-body fieldset, body.anac-ui .card-body legend { background: transparent; border: none; padding: 0; margin: 0; } /* Radio / checkbox rows: the form-builder emits `