/* ========================================================== SouqFollow — Top Navbar Shell Theme Bootstrap 3 (navbar-default / navbar-static-top) Same design system as the app shell: warm sand surfaces, orange as the only strong accent, borders instead of shadows, Cairo for headings/navigation, Tajawal for body text, JetBrains Mono for the balance figure. The single signature element is a thin solid ribbon along the top edge of the page. Shell only — navbar (authenticated and guest), notifications wrapper, page background. The {{ content }} block itself is not styled here. ========================================================== */ :root { /* Brand */ --sf-primary: #F59A23; --sf-primary-hover: #E88712; --sf-primary-active: #D97706; --sf-primary-soft: #FFF4E5; /* Warm neutrals */ --sf-text: #241F18; --sf-muted: #746C60; --sf-bg: #FAF7F2; --sf-card: #FFFFFF; --sf-border: #E9E2D8; --sf-navbar-height: 64px; --sf-ribbon-height: 3px; /* Type */ --sf-font-display: "Cairo", "Segoe UI", sans-serif; --sf-font-body: "Tajawal", "Segoe UI", sans-serif; --sf-font-mono: "JetBrains Mono", ui-monospace, monospace; } /* ---------------------------------------------------------- Dark mode (applied via [data-theme="dark"] on , since Bootstrap 3 has no built-in color-mode attribute) ---------------------------------------------------------- */ [data-theme="dark"] { --sf-text: #F1EAE0; --sf-muted: #A89C8C; --sf-bg: #17140F; --sf-card: #1E1912; --sf-border: #2E2820; --sf-primary-soft: rgba(245, 154, 35, .14); } /* ---------------------------------------------------------- Base ---------------------------------------------------------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100vh; background: var(--sf-bg); color: var(--sf-text); font-family: var(--sf-font-body); padding-top: var(--sf-ribbon-height); } a { color: var(--sf-primary-active); } a:hover, a:focus { color: var(--sf-primary-hover); } /* Signature: a single thin solid ribbon at the top edge of every page, authenticated or guest. */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--sf-ribbon-height); z-index: 1040; background: var(--sf-primary); } /* ---------------------------------------------------------- Navbar — shared (authenticated + guest) ---------------------------------------------------------- */ .navbar-default { min-height: var(--sf-navbar-height); margin-bottom: 0; background-color: var(--sf-card); border: none; border-bottom: 1px solid var(--sf-border); box-shadow: none; } .navbar-default .navbar-brand { height: var(--sf-navbar-height); padding-top: 18px; padding-bottom: 18px; color: var(--sf-text); font-family: var(--sf-font-display); font-weight: 700; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: var(--sf-text); } .navbar-default .navbar-brand img { max-height: 30px; width: auto; } /* Toggle button (mobile) */ .navbar-default .navbar-toggle { border-color: var(--sf-border); } .navbar-default .navbar-toggle .icon-bar { background-color: var(--sf-muted); } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: var(--sf-primary-soft); border-color: var(--sf-primary-soft); } .navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar { background-color: var(--sf-primary-active); } /* Nav links */ .navbar-default .navbar-nav > li > a { height: var(--sf-navbar-height); padding-top: 22px; padding-bottom: 22px; color: var(--sf-muted); font-family: var(--sf-font-display); font-weight: 500; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: var(--sf-primary-active); background-color: transparent; } .navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li.active > a:focus { color: var(--sf-primary-active); background-color: var(--sf-primary-soft); font-weight: 700; } .navbar-icon { margin-inline-end: .4em; } /* Currency / balance control */ .dropdown-currencies > .dropdown-toggle { display: inline-flex; align-items: center; gap: .4em; height: auto; padding-top: 0; padding-bottom: 0; } .dropdown-currencies .badge { color: var(--sf-primary-active); background-color: var(--sf-primary-soft); font-family: var(--sf-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; border-radius: .4rem; padding: .35em .6em; } .dropdown-currencies .caret { border-top-color: var(--sf-muted); } /* Dropdown menus */ .navbar-default .dropdown-menu { background-color: var(--sf-card); border: 1px solid var(--sf-border); border-radius: .5rem; box-shadow: none; padding: .4rem; } .navbar-default .dropdown-menu > li > a { color: var(--sf-text); font-family: var(--sf-font-body); border-radius: .35rem; } .navbar-default .dropdown-menu > li > a:hover, .navbar-default .dropdown-menu > li > a:focus { color: var(--sf-text); background-color: var(--sf-bg); } .navbar-default .dropdown-menu > li.active > a, .navbar-default .dropdown-menu > li.active > a:hover, .navbar-default .dropdown-menu > li.active > a:focus { color: var(--sf-primary-active); background-color: var(--sf-primary-soft); } .dropdown-max-height { max-height: 320px; overflow-y: auto; } /* ---------------------------------------------------------- RTL adjustments ---------------------------------------------------------- */ .rtl-navbar .navbar-nav { float: right; } .rtl-navbar .navbar-right { float: left !important; } .rtl-navbar .navbar-toggle { float: left; margin-right: 0; margin-left: 15px; } .rtl-navbar .dropdown-menu { right: auto; left: 0; text-align: right; } /* ---------------------------------------------------------- Notifications ---------------------------------------------------------- */ #notify-wrapper { position: fixed; top: calc(var(--sf-ribbon-height) + 12px); right: 16px; left: auto; z-index: 1090; min-width: min(360px, calc(100vw - 2rem)); background-color: var(--sf-card); color: var(--sf-text); border: 1px solid var(--sf-border); border-inline-start: 3px solid var(--sf-primary); border-radius: .6rem; box-shadow: none; } .rtl-navbar ~ #notify-wrapper, [dir="rtl"] #notify-wrapper { right: auto; left: 16px; } /* ---------------------------------------------------------- Accessibility ---------------------------------------------------------- */ a:focus-visible, button:focus-visible, .navbar-toggle:focus-visible, .dropdown-toggle:focus-visible { outline: 2px solid var(--sf-primary-active); outline-offset: 2px; } /* ---------------------------------------------------------- Mobile refinements ---------------------------------------------------------- */ @media (max-width: 767px) { .navbar-default .navbar-nav > li > a { height: auto; padding-top: 12px; padding-bottom: 12px; } .navbar-default .navbar-nav > li.active > a { border-radius: .4rem; } }