/* ========================================================================== Noor design system (fresh restyle). Brand greens seeded from the Next.js app/globals.css, re-tokenized. Per-app accent themes override --brand-*. Reused by all app agents — see docs/DJANGO-FOUNDATION.md for the class kit. ========================================================================== */ :root { /* Brand palette — vivid, confident green for contrast (not dim). */ --brand: #0e7d50; --brand-dark: #0a5738; --brand-tint: #d7f0e1; --gold: #bd8f2c; --gold-light: #e3ba55; /* Neutrals — darker ink + secondary text + borders for readability. */ --ink: #0f1c16; --muted: #43514a; --bg: #f4f7f4; --card: #ffffff; --line: #cfd8d2; --line-2: #e5ebe7; /* softer hairline for card borders & dividers */ /* Radius / shadow / spacing */ --radius-sm: 12px; --radius: 18px; --radius-lg: 26px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(20,32,27,.04), 0 3px 10px rgba(20,32,27,.05); --shadow-md: 0 6px 18px rgba(20,32,27,.08), 0 22px 48px rgba(20,32,27,.08); --shadow-lg: 0 10px 30px rgba(20,32,27,.10), 0 34px 70px rgba(20,32,27,.10); --ring: 0 0 0 3px rgba(15,123,81,.18); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-10: 72px; --sp-12: 104px; /* Type — base font is "Exo 2" (matches community.waraka.ai), admin-overridable via the Appearance settings (see base.html injecting --font-ui / --fs-base). */ --font-ui: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Noto Sans Ethiopic", "Noto Naskh Arabic", "Helvetica Neue", Arial, sans-serif; /* Fluid type scale — bigger, tighter display sizes (Meta-inspired), responsive without media queries via clamp(). */ --fs-sm: 0.92rem; --fs-base: 1.06rem; --fs-md: 1.2rem; --fs-h3: 1.6rem; --fs-h2: clamp(1.85rem, 3.2vw, 2.5rem); --fs-h1: clamp(2.4rem, 5vw, 3.6rem); --fs-display: clamp(2.9rem, 6.2vw, 4.6rem); --maxw: 1600px; } /* Per-app accent themes: set class on (e.g. class="theme-connect"). */ .theme-connect { --brand:#1a4fd0; --brand-dark:#0e3792; --brand-tint:#dde6fb; --ring:0 0 0 3px rgba(26,79,208,.24); } .theme-amana { --brand:#6d28d9; --brand-dark:#4c1d95; --brand-tint:#ece0fc; --ring:0 0 0 3px rgba(109,40,217,.24); } .theme-academy { --brand:#0b6580; --brand-dark:#084552; --brand-tint:#d8ecf1; --ring:0 0 0 3px rgba(11,101,128,.24); } .theme-research{ --brand:#372cb8; --brand-dark:#272192; --brand-tint:#e2dffa; --ring:0 0 0 3px rgba(55,44,184,.24); } .theme-consult { --brand:#9a4708; --brand-dark:#78350f; --brand-tint:#f8dcbf; --ring:0 0 0 3px rgba(154,71,8,.26); } .theme-opportunities { --brand:#be123c; --brand-dark:#8f0d2d; --brand-tint:#fbe0e6; --ring:0 0 0 3px rgba(190,18,60,.24); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ---- Per-app arabesque motif (used by the header accent + opt-in .arabesque) ---- */ :root { --app-pattern: url("img/pattern.9bb45d552dae.svg"); } /* org / green */ body.theme-connect { --app-pattern: url("img/pattern-connect.38ea4541b694.svg"); } body.theme-amana { --app-pattern: url("img/pattern-amana.70f3f1c75fdb.svg"); } body.theme-academy { --app-pattern: url("img/pattern-academy.2458099a7020.svg"); } body.theme-research { --app-pattern: url("img/pattern-research.75f4f31d8023.svg"); } body.theme-consult { --app-pattern: url("img/pattern-consult.a7602bfcda13.svg"); } /* Opt-in: drop class="arabesque" on any opaque box to give it the framework motif. */ .arabesque { background-image: var(--app-pattern); background-repeat: repeat; } /* Header menubar: themed motif faded in from the right, below the nav (decorative). */ .site-header::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--app-pattern); background-repeat: repeat; -webkit-mask-image: linear-gradient(to right, transparent 32%, #000 100%); mask-image: linear-gradient(to right, transparent 32%, #000 100%); } .site-header > .container { position: relative; z-index: 1; } [dir="rtl"] { direction: rtl; } a { color: var(--brand-dark); text-decoration: none; } a:hover { text-decoration: underline; } h1,h2,h3 { line-height: 1.1; color: var(--ink); font-weight: 800; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { text-wrap: pretty; } /* Display utility for hero headlines — the biggest, tightest type on the page. */ .display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; } .eyebrow { display:inline-block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark); } .lead { font-size: var(--fs-md); color: var(--muted); line-height: 1.5; max-width: 62ch; } img { max-width: 100%; height: auto; } /* Layout — content spans 90% of the viewport (capped at --maxw on huge screens). */ .container { width: 90%; max-width: var(--maxw); margin: 0 auto; } .stack > * + * { margin-top: var(--sp-4); } .section { padding: clamp(40px, 6vw, 72px) 0; } .section-lg { padding: clamp(56px, 9vw, 104px) 0; } .grid { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* Skip link */ .skip-link { position:absolute; left:-999px; top:8px; background:#fff; color:var(--brand-dark); padding:8px 14px; border-radius:8px; z-index:100; } .skip-link:focus { left:8px; } /* ---- Top nav ---- */ .site-header { background: var(--card); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: saturate(1.15) blur(12px); backdrop-filter: saturate(1.15) blur(12px); border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(20,32,27,.03), 0 6px 20px rgba(20,32,27,.05); position: sticky; top: 0; z-index: 40; } .nav { display:flex; align-items:center; gap:var(--sp-4); padding: var(--sp-3) 0; } .nav .brand { display:inline-flex; align-items:center; gap:10px; font-weight: 800; color: var(--brand-dark); font-size: var(--fs-md); } .nav .brand:hover { text-decoration:none; } .brand-mark { width:38px; height:38px; flex:0 0 auto; display:block; } .brand-name { display:flex; flex-direction:column; line-height:1.15; } .nav .brand small { display:block; font-weight:500; color: var(--muted); font-size:.72rem; } .nav .spacer { flex: 1; } .nav a.navlink { color: var(--ink); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 1.25rem; font-weight: 600; } .nav a.navlink:hover { background: var(--brand-tint); text-decoration: none; } .nav a.navlink-admin { color: var(--brand-dark); background: var(--brand-tint); font-weight: 700; } .nav a.navlink-admin:hover { background: var(--brand); color: #fff; } .nav a.navlink-guide { color: #7a5c10; background: #fbf3df; border: 1px solid #ecd9a6; font-weight: 700; } .nav a.navlink-guide:hover { background: var(--gold); color: #3a2c07; } .nav a.navlink-support { color: #a3203a; background: #fde7ec; border: 1px solid #f5c2ce; font-weight: 700; } .nav a.navlink-support:hover, .nav a.navlink-support.active { background: #a3203a; color: #fff; border-color: #a3203a; } /* Grouped dropdown trigger in the primary nav (e.g. "Apps"). Looks like a navlink. */ .nav .nav-menu { position: relative; display: inline-flex; } .nav button.navlink-menu { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 1.25rem; font-weight: 600; font-family: inherit; background: transparent; border: 0; cursor: pointer; } .nav button.navlink-menu:hover { background: var(--brand-tint); } .nav button.navlink-menu.active { background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; } .nav-menu .caret { width: .68em; height: .68em; flex: 0 0 auto; transition: transform .15s ease; } .nav button.navlink-menu[aria-expanded="true"] .caret { transform: rotate(180deg); } /* Open the dropdown aligned to the trigger's start edge (not the right). */ .nav-menu-panel { inset-inline-start: 0; inset-inline-end: auto; padding: 10px; } /* Invisible bridge across the 6px gap so hover doesn't drop as the pointer travels from the trigger into the panel. */ .nav-menu-panel::before { content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px; } /* Apps mega-menu — Meta-inspired: a roomy grid whose columns scale 2 → 3 → 4 → 6 with the number of apps (--cols is set inline from the app count). */ /* width:max-content makes the panel wrap the whole grid (both columns) instead of collapsing to one column's shrink-to-fit width behind the narrow trigger. */ .nav-mega { width: max-content; min-width: 320px; max-width: min(94vw, 760px); } .nav-mega-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(210px, 1fr)); gap: 2px 8px; } .nav-mega-grid a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--ink); } .nav-mega-grid a:hover { background: var(--brand-tint); text-decoration: none; } .nav-mega-grid a[aria-current="page"] { color: var(--brand-dark); background: var(--brand-tint); } .nmg-label { display: block; font-size: 1.12rem; font-weight: 700; line-height: 1.25; } .nmg-sub { display: block; margin-top: 2px; font-size: .82rem; font-weight: 500; color: var(--muted); line-height: 1.25; } .nav-mega-grid a:hover .nmg-sub { color: var(--ink-soft, var(--muted)); } /* Research menu — a simple list of project names (titles may wrap). */ .nav-research-panel { min-width: 230px; max-width: 320px; } .nav-research-panel a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; padding: 9px 12px; } .nav-research-panel .nav-menu-all { margin-top: 6px; border-top: 1px solid var(--line-2); padding-top: 11px; font-weight: 700; color: var(--brand-dark); } /* Toggle for the mobile nav panel. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-start: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); cursor: pointer; flex: 0 0 auto; } .nav-toggle:hover { background: var(--brand-tint); } .nav-toggle:focus-visible { outline: none; box-shadow: var(--ring); } .nav-toggle-icon { width: 24px; height: 24px; } /* Wrapper that holds the primary nav + admin + language + auth menus. */ .nav-panel { display: flex; align-items: center; gap: var(--sp-4); flex: 1; } .nav-panel .spacer { flex: 1; } /* Current page indicator in the main nav. */ .nav a.navlink.active, .nav a.navlink[aria-current="page"] { background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; } /* Mobile nav: stack links under a hamburger toggle. */ @media (max-width: 860px) { .nav { flex-wrap: wrap; } .nav-toggle { display: inline-flex; } .nav-panel { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--sp-2); padding-top: var(--sp-3); } .nav-panel.is-open { display: flex; } .nav-panel .spacer { flex: none; } .nav-panel nav { display: flex; flex-direction: column; gap: var(--sp-2); } .nav-panel a.navlink, .nav-panel .navlink-admin, .nav-panel > .btn { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: var(--sp-3) var(--sp-4); width: 100%; text-align: start; } /* Make the dropdown triggers inside the mobile panel full-width rows. */ .nav-panel .notif-btn, .nav-panel .avatar-chip, .nav-panel .menu > .btn { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); min-height: 44px; padding: var(--sp-3) var(--sp-4); width: 100%; text-align: start; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; } .nav-panel .notif-btn:hover, .nav-panel .avatar-chip:hover, .nav-panel .menu > .btn:hover { background: var(--brand-tint); text-decoration: none; } .nav-panel .notif-btn:focus-visible, .nav-panel .avatar-chip:focus-visible, .nav-panel .menu > .btn:focus-visible { outline: none; box-shadow: var(--ring); } /* Keep the dropdown panels in-flow on mobile so they expand the panel. */ .nav-panel .menu, .nav-panel .notif { width: 100%; } .nav-panel .menu-panel, .nav-panel .notif-panel { position: static; width: 100%; min-width: auto; max-width: none; margin-top: var(--sp-2); box-shadow: none; border-radius: var(--radius-sm); } /* Grouped nav dropdown ("Apps") as a full-width row inside the mobile panel. */ .nav-panel .nav-menu { width: 100%; } .nav-panel button.navlink-menu { width: 100%; justify-content: space-between; min-height: 44px; padding: var(--sp-3) var(--sp-4); } .nav-panel .nav-menu-panel a { padding-inline-start: calc(var(--sp-4) + var(--sp-3)); } /* Mega-menu collapses to a single full-width column in the mobile panel. */ .nav-panel .nav-mega { width: auto; min-width: 0; max-width: none; padding: 4px; } .nav-panel .nav-mega-grid { grid-template-columns: 1fr; } .nav-panel .nav-mega-grid a { white-space: normal; } .nav-panel .nav-menu-panel::before { display: none; } } /* ---- Buttons ---- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:var(--radius-pill); border:1px solid transparent; font: inherit; font-weight:700; font-size:1.02rem; line-height:1.1; cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease; background: var(--brand); color:#fff; box-shadow: var(--shadow-sm); } .btn:hover { background: var(--brand-dark); text-decoration:none; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn:focus-visible { outline:none; box-shadow: var(--ring); } .btn-outline { background:transparent; color:var(--brand-dark); border-color:var(--line); box-shadow:none; } .btn-outline:hover { background:var(--brand-tint); border-color:var(--brand); box-shadow:none; } .btn-ghost { background:transparent; color:var(--ink); box-shadow:none; } .btn-ghost:hover { background:var(--brand-tint); box-shadow:none; } .btn-gold { background: var(--gold); color:#3a2c07; } .btn-sm { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; font-size: var(--fs-sm); box-shadow:none; } .btn[disabled] { opacity:.55; cursor:not-allowed; } /* ---- Cards ---- */ .card { background:var(--card); border:1px solid var(--line-2, var(--line)); border-radius:var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); transition: box-shadow .2s ease, transform .2s ease; } .card-hover { cursor: pointer; } .card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } /* ---- Badges ---- */ .badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--radius-pill); font-size:.72rem; font-weight:700; background:var(--brand-tint); color:var(--brand-dark); } .badge-gold { background:#fcf3e3; color:#7a5a14; } .badge-muted { background:#eef1ef; color:var(--muted); } .badge-danger { background:#fdeaea; color:#a12626; } /* ---- Tables ---- */ .table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); } table.table { width:100%; border-collapse:collapse; background:var(--card); } table.table th, table.table td { padding:10px 14px; text-align:start; border-bottom:1px solid var(--line); font-size:var(--fs-sm); } table.table th { background:#f2f6f3; font-weight:700; color:var(--muted); } table.table tr:last-child td { border-bottom:none; } /* ---- Forms ---- */ .field { margin-bottom: var(--sp-4); } .field label { display:block; font-weight:600; font-size:var(--fs-sm); margin-bottom:6px; } .input, .select, .textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font: inherit; background:#fff; color:var(--ink); } .input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); } .textarea { min-height:110px; resize:vertical; } .help { color:var(--muted); font-size:.8rem; margin-top:4px; } .form-error { color:#a12626; font-size:var(--fs-sm); } /* ---- Flash messages ---- */ .flashes { margin: var(--sp-4) 0; } .flash { padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:8px; font-size:var(--fs-sm); border:1px solid var(--line); } .flash.success { background:#eafaf1; border-color:#bde9cd; color:#1c6b41; } .flash.error, .flash.danger { background:#fdeaea; border-color:#f3c6c6; color:#a12626; } .flash.info { background:#eef4fb; border-color:#cfe0f3; color:#1f4e83; } .flash.warning { background:#fdf6e3; border-color:#f0e2b8; color:#856404; } /* ---- Auth menu / language switcher ---- */ .menu { position:relative; } .menu-panel { position:absolute; inset-inline-end:0; top:calc(100% + 6px); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); min-width:190px; padding:6px; z-index:50; } .menu-panel a, .menu-panel button { display:block; width:100%; text-align:start; padding:8px 12px; border-radius:var(--radius-sm); background:none; border:none; font:inherit; color:var(--ink); cursor:pointer; } .menu-panel a:hover, .menu-panel button:hover { background:var(--brand-tint); text-decoration:none; } .avatar-chip { display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--card); cursor:pointer; } .avatar { width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; } /* ---- Footer ---- */ .site-footer { border-top:1px solid var(--line); background:var(--card); margin-top: var(--sp-8); padding: var(--sp-6) 0; color:var(--muted); font-size:var(--fs-sm); } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); align-items: start; } .footer-grid h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); margin: 0 0 var(--sp-3); } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .footer-grid a { color: var(--ink); } .footer-grid a:hover { color: var(--brand-dark); } .footer-brand .brand { align-items: flex-start; gap: 10px; margin-bottom: var(--sp-3); } .footer-brand .brand small { color: var(--muted); } .footer-brand .text-muted { margin: 0; } .footer-bottom { border-top: 1px solid var(--line); margin-top: var(--sp-6); padding-top: var(--sp-5); text-align: center; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); } .footer-bottom { text-align: start; } } /* ---- Empty / loading states ---- */ .empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--card); } .empty-state-icon { font-size: 2.5rem; margin-bottom: var(--sp-3); line-height: 1; } .empty-state-title { font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-2); } .empty-state-hint { color: var(--muted); margin: 0; } .loading-state { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-8); color: var(--muted); } .loading-state::before { content: ""; width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Hero (home) ---- */ .hero { background: linear-gradient(135deg, var(--brand-tint), #fff); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px); border:1px solid var(--line-2); } /* ---- Recommend button state ---- */ .recommend.on { background: var(--gold); color:#3a2c07; } /* ---- Share bar ---- */ .share-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } /* ---- Ad slot ---- */ .ad-slot { border:1px dashed var(--line); border-radius:var(--radius); padding:var(--sp-4); background:#fbfdfb; font-size:var(--fs-sm); color:var(--muted); text-align:center; } /* ---- Pagination ---- */ .pagination { display:flex; gap:6px; align-items:center; justify-content:center; margin:var(--sp-5) 0; } .pagination a, .pagination span { padding:6px 12px; border-radius:var(--radius-sm); border:1px solid var(--line); font-size:var(--fs-sm); } .pagination .current { background:var(--brand); color:#fff; border-color:var(--brand); } .text-muted { color: var(--muted); } .text-center { text-align:center; } /* Header notification bell */ .notif { position: relative; display: inline-flex; } .notif-btn { position: relative; background: transparent; border: 0; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 6px; border-radius: var(--radius-pill); color: inherit; } .notif-btn:hover { background: var(--brand-tint); } .notif-btn:focus-visible { outline: none; box-shadow: var(--ring); } .notif-badge { position: absolute; top: 0; inset-inline-end: 0; transform: translate(35%, -20%); background: #d64545; color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 1; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .notif-badge.zero { display: none; } .notif-panel { min-width: 300px; max-width: 360px; max-height: 72vh; overflow-y: auto; padding: 0; } .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); } .notif-markall { background: transparent; border: 0; color: var(--brand-dark); font-size: var(--fs-sm); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); } .notif-markall:hover { background: var(--brand-tint); } .notif-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; } .notif-item:hover { background: var(--bg); text-decoration: none; } .notif-item.unread { background: var(--brand-tint); } .notif-ic { font-size: 1.1rem; flex: 0 0 auto; } .notif-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .notif-title { font-weight: 600; font-size: var(--fs-sm); } .notif-body { color: var(--muted); font-size: var(--fs-sm); } .notif-empty { padding: 18px 14px; text-align: center; } .notif-all { display: block; text-align: center; padding: 10px; font-size: var(--fs-sm); color: var(--brand-dark); border-top: 1px solid var(--line); } /* (Removed: framework arabesque motif on boxes/cards/hero — it reduced text readability. The subtle faded header-menubar accent is kept.) */ /* Hide Alpine-controlled elements before Alpine boots, preventing flashes. */ [x-cloak] { display: none !important; } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Screen-reader-only / visually-hidden utility. */ .visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }