/* public/site.css * * Shared chrome styling for the Pinbluu public site (header nav, footer, * language switcher). Injected by site.js. * * TWO THEMES * - Default: translucent white-on-colour, for the gradient landing page. * - Add on white pages (privacy, terms, wallet) * to get dark text on a white bar instead. * * RTL: everything uses logical properties / flex, and site.js sets dir="rtl" * on for Arabic, so the layout mirrors automatically. */ :root { --pb-ocean: #0891B2; --pb-ocean-dark: #0E7490; --pb-ink: #0C1A25; --pb-muted: #5B7C8D; --pb-border: #D1E9EC; } /* ── Header ──────────────────────────────────────────────────────────────── */ .pb-header { width: 100%; position: relative; z-index: 50; } .pb-header-inner { max-width: 1100px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 20px; } .pb-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -0.5px; flex-shrink: 0; } .pb-brand-mark { width: 22px; height: 22px; border-radius: 7px; background: #fff; position: relative; flex-shrink: 0; } .pb-brand-mark::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--pb-ocean); } /* Nav links. margin-inline-start:auto pushes the nav away from the brand and flips correctly in RTL (unlike margin-left). */ .pb-nav { margin-inline-start: auto; display: flex; gap: 4px; flex-wrap: wrap; } .pb-nav a { color: rgba(255,255,255,0.88); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 8px; transition: background 0.15s, color 0.15s; white-space: nowrap; } .pb-nav a:hover { background: rgba(255,255,255,0.15); color: #fff; } .pb-nav a.active { background: rgba(255,255,255,0.2); color: #fff; } /* ── Language switcher ───────────────────────────────────────────────────── */ .pb-lang { position: relative; flex-shrink: 0; } .pb-lang-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 9px; cursor: pointer; transition: background 0.15s; } .pb-lang-btn:hover { background: rgba(255,255,255,0.24); } .pb-lang-menu { position: absolute; inset-inline-end: 0; /* right in LTR, left in RTL */ top: calc(100% + 6px); min-width: 150px; background: #fff; border-radius: 11px; box-shadow: 0 10px 32px rgba(0,0,0,0.18); list-style: none; margin: 0; padding: 6px; display: none; } .pb-lang-menu.open { display: block; } .pb-lang-menu li { list-style: none; } .pb-lang-menu button { display: block; width: 100%; text-align: start; /* left in LTR, right in RTL */ background: none; border: none; font: inherit; font-size: 14px; color: var(--pb-ink); padding: 9px 12px; border-radius: 7px; cursor: pointer; } .pb-lang-menu button:hover { background: #F0FDFA; } .pb-lang-menu button.active { background: #E0F7FA; color: var(--pb-ocean); font-weight: 700; } /* ── Light theme (white pages: privacy, terms, wallet) ───────────────────── */ .pb-header--light { background: #fff; border-bottom: 1px solid var(--pb-border); } .pb-header--light .pb-brand { color: var(--pb-ink); } .pb-header--light .pb-brand-mark { background: var(--pb-ocean); } .pb-header--light .pb-brand-mark::after { background: #fff; } .pb-header--light .pb-nav a { color: var(--pb-muted); } .pb-header--light .pb-nav a:hover { background: #F0FDFA; color: var(--pb-ocean); } .pb-header--light .pb-nav a.active { background: #E0F7FA; color: var(--pb-ocean); } .pb-header--light .pb-lang-btn { background: #F0FDFA; border-color: var(--pb-border); color: var(--pb-muted); } .pb-header--light .pb-lang-btn:hover { background: #E0F7FA; color: var(--pb-ocean); } /* ── Footer ──────────────────────────────────────────────────────────────── */ .pb-footer { width: 100%; margin-top: auto; padding: 28px 24px; color: rgba(255,255,255,0.85); } .pb-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; } .pb-footer-brand { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .pb-footer-brand strong { font-size: 15px; color: #fff; font-weight: 800; } .pb-footer-nav { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; } .pb-footer-nav a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 13px; font-weight: 600; } .pb-footer-nav a:hover { color: #fff; text-decoration: underline; } .pb-footer-rights { width: 100%; font-size: 12px; opacity: 0.75; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.18); } .pb-footer--light { color: var(--pb-muted); background: #fff; border-top: 1px solid var(--pb-border); } .pb-footer--light .pb-footer-brand strong { color: var(--pb-ink); } .pb-footer--light .pb-footer-nav a { color: var(--pb-muted); } .pb-footer--light .pb-footer-nav a:hover { color: var(--pb-ocean); } .pb-footer--light .pb-footer-rights { border-top-color: var(--pb-border); } /* ── Arabic typography ───────────────────────────────────────────────────── */ /* Arabic reads better with slightly more line-height and a font stack that prefers a proper Arabic face. */ html[lang="ar"] body { font-family: "SF Arabic", "Segoe UI", "Noto Naskh Arabic", Tahoma, sans-serif; line-height: 1.75; } html[lang="ar"] .pb-brand-text { letter-spacing: 0; } /* ── Small screens ───────────────────────────────────────────────────────── */ @media (max-width: 640px) { .pb-header-inner { flex-wrap: wrap; gap: 12px; padding: 14px 16px; } .pb-nav { margin-inline-start: 0; order: 3; width: 100%; justify-content: center; } .pb-lang { margin-inline-start: auto; } .pb-nav a { padding: 7px 10px; font-size: 13px; } .pb-footer-inner { flex-direction: column; align-items: flex-start; } .pb-footer-nav { margin-inline-start: 0; } } /* ── Business portal additions ───────────────────────────────────────────── */ .pb-brand-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; background: #E0F7FA; color: #0891B2; padding: 3px 7px; border-radius: 5px; margin-inline-start: 2px; }