/* * Home B ("gradients & rings") -- the redesigned public home page. * Source design: honest2/Honest Home Redesign.html, variant "Home B". * * Almost all styling lives inline in resources/views/home-b/*.blade.php exactly as in the design * file; this sheet only carries what inline styles cannot: the keyframes, a scoped reset (the * legacy Mobirise/Bootstrap theme this site also loads restyles bare h1/h2/a/button/section), the * dropdown / hover / focus states, and the narrow-window behaviour. */ /* ---------- scoped reset against the legacy theme ---------- */ .hb, .hb * { box-sizing: border-box; } .hb { font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif; color: #2D3A55; background: #FFFFFF; line-height: 1.6; min-width: 0; overflow-x: clip; text-align: start; -webkit-font-smoothing: antialiased; } .hb h1, .hb h2, .hb h3, .hb h4, .hb p, .hb figure, .hb blockquote { text-transform: none; letter-spacing: normal; } .hb h1, .hb h2, .hb h3, .hb h4 { font-style: normal; word-break: normal; } .hb a { text-decoration: none; } .hb a:hover { text-decoration: none; } .hb button, .hb input { font-family: inherit; } .hb button { line-height: 1.4; } .hb section { padding: 0; margin: 0; } .hb svg { display: inline-block; overflow: visible; } .hb img { max-width: 100%; } .hb [hidden] { display: none !important; } /* ---------- animations from the design ---------- */ @keyframes hbRingFill { from { stroke-dashoffset: var(--circ); } } @keyframes hbFloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes hbRise { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes hbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes hbMarqueeRtl { from { transform: translateX(0); } to { transform: translateX(50%); } } .hb .ring-anim { animation: hbRingFill 1.8s cubic-bezier(.2, .7, .2, 1) both; } .hb .float-a { animation: hbFloaty 5s ease-in-out infinite; } .hb .float-b { animation: hbFloaty 6s ease-in-out -2s infinite; } .hb .bar-anim { transform-origin: bottom; animation: hbRise 1.2s cubic-bezier(.2, .7, .2, 1) both; } @media (prefers-reduced-motion: reduce) { .hb .ring-anim, .hb .float-a, .hb .float-b, .hb .bar-anim, .hb .hb-marquee-track { animation: none !important; } } /* ---------- interaction states (the design file is static, these are the live equivalents) ---------- */ .hb a, .hb button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease; } .hb a:focus-visible, .hb button:focus-visible, .hb input:focus-visible { outline: 3px solid #28C7F7; outline-offset: 2px; } .hb .hb-lift:hover { transform: translateY(-4px); } .hb .hb-press:hover { transform: translateY(-2px); } .hb .hb-nav-link:hover { background: rgba(255, 255, 255, .18); } .hb .hb-slide-chip:hover { background: rgba(255, 255, 255, .28) !important; } /* ---------- nav dropdowns (nav items that have children) ---------- */ .hb .hb-nav-item { position: relative; } .hb .hb-nav-item > .hb-nav-link { display: inline-block; border-radius: 999px; } .hb .hb-dropdown { position: absolute; z-index: 40; top: calc(100% + 8px); inset-inline-start: 0; min-width: 220px; background: #FFFFFF; color: #2D3A55; border-radius: 22px; padding: 8px; box-shadow: 0 20px 44px rgba(0, 50, 20, .28); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .hb .hb-nav-item:hover > .hb-dropdown, .hb .hb-nav-item:focus-within > .hb-dropdown, .hb .hb-nav-item.is-open > .hb-dropdown { opacity: 1; visibility: visible; transform: none; } .hb .hb-dropdown a { display: block; color: #2D3A55; border-radius: 14px; padding: 10px 14px; font-size: 14px; font-weight: 500; white-space: nowrap; } .hb .hb-dropdown a:hover { background: #EAF3FF; color: #1A56E8; } .hb .hb-quick { position: relative; } .hb .hb-quick .hb-dropdown { inset-inline-start: auto; inset-inline-end: 0; } .hb .hb-quick.is-open .hb-dropdown { opacity: 1; visibility: visible; transform: none; } /* ---------- hero slides ---------- */ .hb .hb-slide { display: none; } .hb .hb-slide.is-active { display: block; animation: hbFade .5s ease both; } @keyframes hbFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- market tabs / news tabs ---------- */ .hb .hb-tab-panel[hidden] { display: none !important; } .hb [role="tab"] { cursor: pointer; } /* ---------- ticker (news pill) ---------- */ .hb .hb-marquee { overflow: hidden; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .hb[dir="rtl"] .hb-marquee-track { animation-name: hbMarqueeRtl; } .hb .hb-marquee-track { display: inline-flex; gap: 56px; will-change: transform; animation: hbMarquee var(--hb-marquee-dur, 60s) linear infinite; } .hb .hb-marquee.is-paused .hb-marquee-track, .hb .hb-marquee:hover .hb-marquee-track { animation-play-state: paused; } .hb .hb-marquee a { color: inherit; } .hb .hb-marquee a:hover { color: #1A56E8; } /* ---------- loading skeleton for async cards ---------- */ .hb .hb-skeleton { background: linear-gradient(90deg, #EEF2FA 25%, #F7F9FD 50%, #EEF2FA 75%); background-size: 200% 100%; animation: hbShimmer 1.4s linear infinite; border-radius: 999px; } @keyframes hbShimmer { to { background-position: -200% 0; } } /* ---------- stale market data (>15 min) -- same contract as the older widgets ---------- */ /* mute only the figures (not the white cards, which would wash out over the green) */ .hb [data-stale="true"] [data-hb-price], .hb [data-stale="true"] [data-hb-pct] { opacity: .65; } /* ---------- narrow windows (phones are served /mobile; this is for tablets & small desktop windows) ---------- */ @media (max-width: 991.98px) { .hb h1.hb-h1 { font-size: 44px !important; } .hb h2.hb-h2 { font-size: 32px !important; } } @media (max-width: 575.98px) { .hb h1.hb-h1 { font-size: 34px !important; } .hb h2.hb-h2 { font-size: 26px !important; } .hb .hb-pad-lg { padding-inline: 20px !important; } } /* ---------- LTR (English) ---------- */ .hb[dir="ltr"] .hb-flip { transform: scaleX(-1); } /* ---------------------------------------------------------------- ring gauge states (set by home-b.js) */ .hb .hb-ring.is-na .hb-ring-arc, .hb .hb-ring.is-norange .hb-ring-arc { display: none; } .hb .hb-ring.is-na .hb-ring-track { stroke: #DCE4F3; stroke-dasharray: 6 8; } @media (prefers-reduced-motion: reduce) { .hb .hb-ring-arc { transition: none !important; } } /* The design's own round "smart assistant" button drives the existing chatbot widget, so the widget's default launcher is hidden on this page (it stays in the DOM and clickable by script). */ body.hb-home #chatbot-toggle { visibility: hidden; } body.hb-home { background: #FFFFFF; } /* ---------------------------------------------------------------- inherit the design's base type from .hb The legacy theme sets its own line-height / font-family on bare tags; the design simply inherits 1.6 and IBM Plex Sans Arabic from its root. Icon elements () are excluded so Font Awesome / Bootstrap Icons keep their own icon font. */ .hb div, .hb span, .hb a, .hb p, .hb b, .hb strong, .hb label, .hb li, .hb td, .hb th, .hb h1, .hb h2, .hb h3, .hb h4, .hb blockquote, .hb figcaption, .hb button, .hb input { line-height: inherit; } .hb h1, .hb h2, .hb h3, .hb h4 { margin-top: 0; } .hb p { margin-bottom: 0; } /* ---------------------------------------------------------------- legacy floating widgets The shared partial also drops a WhatsApp circle and a notification bell on every page. Home B has its own WhatsApp / assistant buttons (bottom-left), so the duplicates are hidden here. */ body.hb-home .notification-container, body.hb-home div[style*="bottom: 180px"][style*="right: 30px"] { display: none !important; } /* ---------------------------------------------------------------- more legacy-theme resets */ .hb footer { padding: 0; margin: 0; border: 0; } .hb blockquote { border: 0; padding: 0; margin: 0; font-style: normal; quotes: none; background: none; } .hb blockquote::before, .hb blockquote::after { content: none; } .hb figure { margin: 0; } /* ---------------------------------------------------------------- typography vs. the legacy theme custom.css forces a site font on EVERY element with `font-family: var(--arabic-font|--english-font) !important` (Cairo / DM Serif Text, admin-configurable) -- which beats even inline styles. Home B uses IBM Plex Sans Arabic for body text and Cairo for headings and numbers, so this rule out-ranks the legacy selectors (they are ~7 classes deep; this is 9) and picks the face from the --hb-font custom property: unset = body face, set inline to Cairo where the design uses Cairo (a custom property is inherited exactly like font-family was). icon elements are excluded so Font Awesome / Bootstrap Icons keep their icon fonts. */ .hb.hb.hb.hb.hb.hb.hb.hb.hb, .hb.hb.hb.hb.hb.hb.hb.hb.hb *:not(i) { font-family: var(--hb-font, 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif) !important; } /* ---------------------------------------------------------------- team portraits The uploaded photos are tall full-body shots; a plain cover-crop shows a tiny figure off-centre. Anchor to the top (faces), centre horizontally, and zoom in to head-and-shoulders. */ .hb .hb-team-photo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 6%; transform: scale(1.7); transform-origin: 50% 14%; max-width: none; } /* ================================================================ INNER PAGES (layouts.app / layouts.single_page) Everything that is not the home page keeps its own Blade content; this block restyles the shared Bootstrap components inside
with the Home B design language (pill buttons, rounded white cards, blue/green/orange gradients, Cairo headings, IBM Plex Sans Arabic body). The header and footer are the Home B ones (home-b/inner-top, home-b/footer). */ body.hb-inner-page { background: #F7F9FD !important; display: block !important; min-height: 0 !important; } body.hb-home .hb-inner { position: relative; margin-top: -8px; padding: 8px 0 72px; color: #2D3A55; background: #F7F9FD; } .hb-inner > section, .hb-inner .inner-page { padding-top: 0; } /* typography: beat the legacy !important font rule (see the .hb block above) */ .hb-inner.hb-inner.hb-inner.hb-inner.hb-inner.hb-inner.hb-inner.hb-inner.hb-inner, .hb-inner.hb-inner.hb-inner.hb-inner.hb-inner.hb-inner.hb-inner.hb-inner.hb-inner *:not(i):not(.fas):not(.far):not(.fab):not(.fa) { font-family: var(--hb-font, 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif) !important; } .hb-inner h1, .hb-inner h2, .hb-inner h3, .hb-inner h4, .hb-inner h5, .hb-inner h6, .hb-inner .h1, .hb-inner .h2, .hb-inner .h3, .hb-inner .h4, .hb-inner .display-1, .hb-inner .display-2, .hb-inner .display-3, .hb-inner .display-4, .hb-inner .display-5, .hb-inner .display-6, .hb-inner .btn, .hb-inner .badge, .hb-inner th { --hb-font: 'Cairo', sans-serif; } .hb-inner h1, .hb-inner h2, .hb-inner h3, .hb-inner h4, .hb-inner h5, .hb-inner h6 { color: #2D3A55; font-weight: 800; line-height: 1.3; } .hb-inner p, .hb-inner li, .hb-inner td { line-height: 1.8; } .hb-inner a:not([class*="btn"]):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item) { color: #1A56E8; text-decoration: none; } .hb-inner a:not([class*="btn"]):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item):hover { color: #1236C7; } /* the white content card single_page / app wrap pages in */ .hb-inner .bg-white.shadow-sm.rounded, .hb-inner .bg-white.shadow-sm.rounded-3 { border-radius: 32px !important; border: 0; box-shadow: 0 20px 50px rgba(31, 60, 120, .12) !important; } /* buttons: pills with the design's gradients */ .hb-inner .btn { border: 0; border-radius: 999px; font-weight: 700; padding: .6rem 1.5rem; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .hb-inner .btn:hover { transform: translateY(-2px); filter: brightness(1.04); } .hb-inner .btn-sm { padding: .4rem 1.1rem; } .hb-inner .btn-lg { padding: .85rem 2.2rem; } .hb-inner .btn-primary, .hb-inner .btn-info { background: linear-gradient(225deg, #1236C7, #1A56E8); color: #fff; box-shadow: 0 10px 20px rgba(26, 86, 232, .3); } .hb-inner .btn-success { background: linear-gradient(225deg, #067A33, #18B455); color: #fff; box-shadow: 0 10px 20px rgba(11, 148, 64, .3); } .hb-inner .btn-warning { background: #F5A623; color: #2B1A00; box-shadow: 0 10px 20px rgba(240, 138, 0, .3); } .hb-inner .btn-danger { background: linear-gradient(225deg, #C62828, #E53935); color: #fff; } .hb-inner .btn-secondary, .hb-inner .btn-light { background: #F0F4FB; color: #2D3A55; } .hb-inner .btn-dark { background: #0E1B3D; color: #fff; } .hb-inner .btn-outline-primary, .hb-inner .btn-outline-secondary, .hb-inner .btn-outline-success, .hb-inner .btn-outline-dark { background: #fff; box-shadow: inset 0 0 0 2px currentColor; } .hb-inner .btn-outline-primary { color: #1A56E8; } .hb-inner .btn-outline-success { color: #0B8A3E; } .hb-inner .btn-outline-secondary, .hb-inner .btn-outline-dark { color: #2D3A55; } .hb-inner .btn-outline-primary:hover { background: #1A56E8; color: #fff; } .hb-inner .btn-outline-success:hover { background: #0B8A3E; color: #fff; } /* cards, alerts, list groups, accordions, modals */ .hb-inner .card { border: 0; border-radius: 28px; box-shadow: 0 14px 36px rgba(31, 60, 120, .10); overflow: hidden; } .hb-inner .card-header, .hb-inner .card-footer { background: #F4F8FF; border: 0; } .hb-inner .alert { border: 0; border-radius: 20px; } .hb-inner .list-group-item { border-color: #E9EEF8; } .hb-inner .accordion-item { border: 0; border-radius: 22px !important; box-shadow: 0 10px 28px rgba(31, 60, 120, .08); margin-bottom: 12px; overflow: hidden; } .hb-inner .accordion-button:not(.collapsed) { background: #EAF3FF; color: #1A56E8; box-shadow: none; } .hb-inner .badge { border-radius: 999px; padding: .45em .9em; } .hb-inner .modal-content { border: 0; border-radius: 28px; } /* forms */ .hb-inner .form-control, .hb-inner .form-select, .hb-inner textarea, .hb-inner input[type="text"], .hb-inner input[type="email"], .hb-inner input[type="password"], .hb-inner input[type="tel"], .hb-inner input[type="search"] { background-color: #F0F4FB; border: 1px solid transparent; border-radius: 18px; padding: .75rem 1.1rem; color: #2D3A55; } .hb-inner .form-control:focus, .hb-inner .form-select:focus { background-color: #fff; border-color: #28C7F7; box-shadow: 0 0 0 4px rgba(40, 199, 247, .22); } .hb-inner .form-label, .hb-inner label { font-weight: 600; color: #2D3A55; } .hb-inner .form-check-input:checked { background-color: #1A56E8; border-color: #1A56E8; } /* tables */ .hb-inner .table { --bs-table-bg: transparent; border-collapse: separate; border-spacing: 0 6px; } .hb-inner .table thead th { background: #F4F8FF; color: #5A6683; border: 0; font-size: 13px; } .hb-inner .table tbody td { background: #fff; border-top: 1px solid #E9EEF8; border-bottom: 1px solid #E9EEF8; } .hb-inner .table-responsive { border-radius: 22px; } /* pagination, breadcrumbs, nav tabs */ .hb-inner .pagination .page-link { border: 0; margin: 0 3px; border-radius: 999px !important; color: #1A56E8; background: #EAF3FF; min-width: 40px; text-align: center; } .hb-inner .pagination .page-item.active .page-link { background: linear-gradient(225deg, #1236C7, #1A56E8); color: #fff; } .hb-inner .breadcrumb { background: transparent; } .hb-inner .nav-tabs, .hb-inner .nav-pills { border: 0; gap: 4px; } .hb-inner .nav-tabs .nav-link, .hb-inner .nav-pills .nav-link { border: 0; border-radius: 999px; color: #5A6683; background: #F0F4FB; padding: .5rem 1.2rem; } .hb-inner .nav-tabs .nav-link.active, .hb-inner .nav-pills .nav-link.active { background: linear-gradient(225deg, #1236C7, #1A56E8); color: #fff; } .hb-inner img { max-width: 100%; } /* off-screen honeypot fields (left:-9999px) otherwise widen the page in RTL */ html:has(body.hb-home), body.hb-home { overflow-x: hidden; } /* the top-bar stock strip is an LTR marquee even on the RTL page */ .hb[dir="rtl"] .hb-marquee[dir="ltr"] .hb-marquee-track { animation-name: hbMarquee; } /* ---- Inner pages v2 ----------------------------------------------------------------------------- The legacy inner views colour everything through their own theme variables (lime --accent-green, --primary-light #DEEEA9, ...), each re-declared on :root. Redeclaring them on the
wrapper wins over :root for everything inside, so every inner page picks up the Home B palette at once. */ body.hb-inner-page .hb-inner.hb-inner { --accent-green: #0B9440; --accent-green-light: #EAF7EF; --accent-light-green: #EAF7EF; --accent-mint: #EAF7EF; --accent-lime: #EAF7EF; --accent-light: #EAF3FF; --accent-orange: #F5A623; --accent-orange-dark: #E08E0B; --accent-loly: #F5A623; --accent-yes: #EAF3FF; --accent-yes-dark: #C6D6F5; --accent-no: #C6D6F5; --accent-empty: #FFFFFF; --primary: #1A56E8; --primary-dark: #1236C7; --primary-light: #EAF3FF; --primary-color: #1A56E8; --primary-rgb: 26, 86, 232; --secondary-color: #F5A623; --dark-bg: #0E1B3D; --darker-bg: #0A1430; --card-bg: #FFFFFF; --text-primary: #2D3A55; --text-dark: #2D3A55; --text-secondary: #5A6683; --text-muted: #7A86A3; --text-medium: #5A6683; --shadow-soft: 0 14px 36px rgba(31, 60, 120, .10); --shadow-hover: 0 20px 44px rgba(31, 60, 120, .16); } body.hb-inner-page .hb-inner { padding-top: 24px; } @media (max-width: 900px) { .hb .hb-inner-ring { display: none; } } .hb-inner .hb { background: transparent; } /* Legacy "hero-section" cards (indices, dividend banks...): their

/lead moved to the header band, so whatever is left (live index chips, notes) becomes a plain white card -- or disappears when empty. */ .hb-inner .container-fluid[style*="margin-top: 80px"] { margin-top: 0 !important; } .hb-inner .hero-section.bg-gradient { background: #FFFFFF !important; color: #2D3A55 !important; border-radius: 28px !important; box-shadow: 0 14px 36px rgba(31, 60, 120, .10) !important; padding: 28px 24px !important; } .hb-inner .hero-section.bg-gradient .text-white, .hb-inner .hero-section.bg-gradient.text-white { color: #2D3A55 !important; } .hb-inner .hero-section:not(:has(.container > *)) { display: none !important; }