/* PF41 UI layer: sticky header polish, mobile drawer + bottom bar, unified 44px buttons, compact plan cards. Presentation only (Blade/CSS): loaded after pf41.css, uses its tokens (--bg --surface --border --brand --text ...), RTL/LTR safe through logical properties. */ /* ---------- Header (sticky is set in pf41.css; keep it above content and readable over scrolling pages) ---------- */ .pf41-reference-header{box-shadow:0 1px 0 color-mix(in srgb,var(--border) 70%,transparent),0 6px 18px -14px rgba(0,0,0,.35)} .pf41-ref-nav a{min-height:44px} .pf41-ref-nav a[aria-current="page"]{font-weight:800} .pf41-ref-nav a:focus-visible,.pf41-bottom-nav a:focus-visible,.btn:focus-visible,.btn-outline:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* ---------- Unified buttons: 44px touch height, hover / active / loading ---------- */ .btn,.btn-outline,.btn-danger,.pf41-ref-account,.pf41-ref-login,button.btn,a.btn{ box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px; padding-block:10px;line-height:1.3;cursor:pointer;text-decoration:none; transition:filter .15s,transform .15s,border-color .15s,background-color .15s,box-shadow .15s} .btn:hover,.pf41-ref-account:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn:active,.btn-outline:active,.btn-danger:active{transform:translateY(0);filter:brightness(.96)} .btn-outline:hover{border-color:var(--brand)} .pf41-ref-theme,.pf41-reference-header .ss-toggle,.pf41-reference-header .pf41-language-menu summary,.pf41-ref-mobile>summary{min-width:44px;min-height:44px;height:44px} .btn[disabled],.btn[aria-disabled="true"],.btn-outline[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;filter:none} .is-loading{position:relative;pointer-events:none;color:transparent!important} .is-loading>*{visibility:hidden} .is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%; border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:var(--brand,#14c8b4);border-inline-color:var(--brand,#14c8b4);animation:pf41-spin .7s linear infinite} .btn.is-loading::after{border-color:rgba(4,26,24,.25);border-top-color:#041a18} @keyframes pf41-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.is-loading::after{animation-duration:1.8s}.btn:hover{transform:none}} /* ---------- Mobile / tablet: drawer + bottom bar ---------- */ .pf41-bottom-nav{display:none} .pf41-drawer-head,.pf41-drawer-backdrop{display:none} @media(max-width:1200px){ /* A backdrop-filter on the header would make the fixed drawer relative to the header instead of the viewport. */ .pf41-reference-header{backdrop-filter:none;background:color-mix(in srgb,var(--bg) 97%,transparent)} .pf41-ref-mobile[open]{position:static} .pf41-ref-mobile[open] .pf41-drawer-backdrop{display:block;position:fixed;inset:0;z-index:88;border:0;padding:0;background:rgba(3,10,18,.55);cursor:pointer} .pf41-ref-mobile .pf41-ref-mobile-menu{position:fixed;inset-block:0;inset-inline-end:0;top:0;z-index:89;width:min(320px,86vw);max-height:none;height:100dvh; border-radius:0;border-width:0;border-inline-start-width:1px;padding:0 10px 90px;overflow-y:auto;overscroll-behavior:contain; box-shadow:-18px 0 40px -18px rgba(0,0,0,.45);transform:translateX(0);animation:pf41-drawer-in .22s ease-out} [dir="rtl"] .pf41-ref-mobile .pf41-ref-mobile-menu{box-shadow:18px 0 40px -18px rgba(0,0,0,.45);animation-name:pf41-drawer-in-rtl} .pf41-ref-mobile:not([open]) .pf41-ref-mobile-menu{display:none} .pf41-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px;padding:0 4px;margin-bottom:6px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1} .pf41-drawer-head strong{font-size:17px;letter-spacing:.04em} .pf41-drawer-close{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface-2,var(--surface));color:var(--text);font-size:22px;line-height:1;cursor:pointer} .pf41-ref-mobile-menu a{min-height:48px} } @keyframes pf41-drawer-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}} @keyframes pf41-drawer-in-rtl{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}} @media(max-width:900px){ body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))} .pf41-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;inset-inline:0;bottom:0;z-index:60; background:color-mix(in srgb,var(--bg) 97%,transparent);border-top:1px solid var(--border);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px)); box-shadow:0 -8px 22px -16px rgba(0,0,0,.5)} .pf41-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:4px 2px;border-radius:12px; color:var(--text-2);font-size:11px;font-weight:700;text-decoration:none;line-height:1.2;text-align:center;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent} .pf41-bottom-nav a span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pf41-bottom-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .pf41-bottom-nav a:active{background:var(--surface-2,var(--surface))} .pf41-bottom-nav a[aria-current="page"]{color:var(--brand);background:color-mix(in srgb,var(--brand) 11%,transparent)} .pf41-ref-account,.pf41-ref-login{display:none} } /* ---------- Compact plan cards (/pricing) ---------- */ .subscription-plan-card{gap:10px;padding:18px} .subscription-plan-card h2{font-size:20px} .subscription-plan-card .plan-desc{margin:0;font-size:13px;line-height:1.6;color:var(--muted);flex:0 1 auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .subscription-plan-price strong{font-size:22px;font-variant-numeric:tabular-nums} .subscription-plan-card .btn,.subscription-plan-card .btn-outline{width:100%} /* Price and the call to action first; description and the feature list follow. */ .subscription-plan-card>h2{order:0}.subscription-plan-card>.subscription-plan-price{order:1}.subscription-plan-card>.plan-quote{order:2} .subscription-plan-card>.btn,.subscription-plan-card>.btn-outline{order:3}.subscription-plan-card>.plan-desc{order:4}.subscription-plan-card>.plan-more{order:5} .plan-more{border-top:1px solid var(--border);padding-top:8px} .plan-more>summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text-2);list-style:none} .plan-more>summary::-webkit-details-marker{display:none} .plan-more>summary::after{content:"+";font-size:18px;color:var(--brand)} .plan-more[open]>summary::after{content:"–"} .plan-more .plan-highlights{margin-top:4px} .subscription-plan-comparison{max-width:100%} @media(min-width:851px){.subscription-plan-card{padding:20px}} @media(max-width:580px){.subscription-plan-grid{gap:12px}.plan-toolbar{gap:10px}.plan-coupon input{width:100%;min-height:44px}.plan-coupon{width:100%}} /* ---------- Never scroll the page sideways ---------- */ html,body{max-width:100%;overflow-x:clip} img,video,svg{max-width:100%} @media(max-width:480px){ .pf41-ref-pulse{overflow-x:auto} input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]),select,textarea{max-width:100%;min-height:44px;font-size:16px} } /* Filter chips and small action buttons share the same 44px touch height. */ .sort-btn,.pf41-notify,.theme-toggle{min-height:44px} .sort-btn,.pf41-notify{display:inline-flex;align-items:center;justify-content:center;gap:6px} .pf41-ref-actions{flex-wrap:nowrap} /* ===================================================================================================== PF41 design pass (2026-10-25): one dark financial palette, header aligned with the content column, pill navigation, richer price cards, skeletons and light motion. Presentation only. All colours below are the single source for the site; pf41.css derives its other tokens from these. ===================================================================================================== */ :root,[data-theme="dark"]{ --bg:#070F1C; --bg-2:#0B1626; --surface:#0F1B30; --surface-2:#16253F; --border:#223250; --border-2:#34486F; --text:#EAF1FB; --text-2:#A6B5CE; --text-3:#8797B3; /* AA on --surface: 12.6 / 7.2 / 5.4 */ --brand:#19D3BE; --brand-2:#0FAE9C; --brand-soft:rgba(25,211,190,.13); --up:#2FD67B; --up-soft:rgba(47,214,123,.15); --down:#FF5C6C; --down-soft:rgba(255,92,108,.15); --warn:#F5B942; --warn-soft:rgba(245,185,66,.14); --shadow:0 1px 0 rgba(255,255,255,.035) inset,0 10px 28px rgba(0,0,0,.32); --pf-positive-rgb:47,214,123; --pf-negative-rgb:255,92,108; --pf-cyan-rgb:25,211,190; --grad:linear-gradient(120deg,var(--brand),var(--brand-2)); --brand-gradient:linear-gradient(90deg,var(--brand),var(--brand-2)); --pf41-header-h:64px; --pf41-gutter:24px; --pf41-max:1440px; } [data-theme="dark"] body{ background-color:var(--bg); background-image:radial-gradient(900px 480px at 85% -8%,rgba(25,211,190,.09),transparent 62%),linear-gradient(180deg,#08111F 0%,#060D19 100%); background-repeat:no-repeat;background-attachment:scroll;min-height:100vh} [data-theme="dark"] .pf41-card,[data-theme="dark"] .pf41-coin{background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%);border-color:var(--border)} [data-theme="dark"] .pf41-ref-logo i{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#04201C} /* ---------- Header = content column: same width, same gutters, RTL and LTR ---------- */ .pf41-ref-wrap,.pf41-wrap{box-sizing:border-box;width:min(var(--pf41-max),calc(100% - 2*var(--pf41-gutter)));max-width:var(--pf41-max);margin-inline:auto;padding-inline:0} .pf41-reference-header{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.3) blur(10px);position:sticky;top:0;z-index:70} @media(max-width:1200px){.pf41-reference-header{backdrop-filter:none}} @media(max-width:700px){:root,[data-theme]{--pf41-gutter:14px}} /* ---------- Top menu: pill tabs with icon + label, filled active state, 44px touch ---------- */ .pf41-ref-nav{gap:6px} .pf41-ref-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:999px; color:var(--text-2);font-size:13.5px;font-weight:700;white-space:nowrap;transition:background-color .16s,color .16s,border-color .16s,transform .16s} .pf41-ref-nav a .pf41-nav-icon{display:inline-grid;place-items:center;width:18px;height:18px;flex:none} .pf41-ref-nav a .pf41-nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pf41-ref-nav a:hover{background:var(--surface-2);border-color:var(--border-2);color:var(--text);transform:translateY(-1px)} .pf41-ref-nav a[aria-current="page"]{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 55%,transparent);color:var(--brand);box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 12%,transparent) inset} .pf41-ref-nav a:active{transform:none} /* ---------- Price cards (home): price, change, 24h sparkline, high / low / volume ---------- */ .pf41-coin{display:flex;flex-direction:column;gap:8px;transition:transform .16s,border-color .16s,box-shadow .16s;min-width:0} .pf41-coin:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:var(--shadow)} .pf41-coin-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font:600 10.5px/1.3 'JetBrains Mono',ui-monospace,monospace;color:var(--text-2)} .pf41-coin-meta i{font-style:normal;color:var(--text-3);margin-inline-end:3px} .pf41-coin .pf41-spark polyline{stroke-width:1.6} .pf41-pill.up{color:var(--up);background:var(--up-soft)}.pf41-pill.down{color:var(--down);background:var(--down-soft)} .pf41-value.up,.up.pf41-value,.chg.up,.positive{color:var(--up)}.pf41-value.down,.down.pf41-value,.chg.down,.negative{color:var(--down)} /* Price flash (live-pulse.js toggles .lp-up / .lp-down for 800 ms on the price cell only). */ @keyframes pf41-flash-up{0%{background:var(--up-soft);box-shadow:0 0 0 3px var(--up-soft)}100%{background:transparent;box-shadow:0 0 0 3px transparent}} @keyframes pf41-flash-down{0%{background:var(--down-soft);box-shadow:0 0 0 3px var(--down-soft)}100%{background:transparent;box-shadow:0 0 0 3px transparent}} .lp-up{animation:pf41-flash-up .8s ease-out;border-radius:6px}.lp-down{animation:pf41-flash-down .8s ease-out;border-radius:6px} /* ---------- Skeleton while a chart / block loads ---------- */ @keyframes pf41-shimmer{0%{background-position:-240px 0}100%{background-position:240px 0}} .is-skeleton,.fc-status:not(:empty):not(.is-error){background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);background-size:480px 100%;animation:pf41-shimmer 1.2s linear infinite;border-radius:8px} /* ---------- Light page entrance (cards fade in once) ---------- */ @keyframes pf41-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .pf41-card,.wm-tile,.subscription-plan-card{animation:pf41-rise .35s ease-out both} @media(prefers-reduced-motion:reduce){ .pf41-card,.wm-tile,.subscription-plan-card,.lp-up,.lp-down,.is-skeleton,.fc-status{animation:none!important} .pf41-ref-nav a,.pf41-coin{transition:none}.pf41-ref-nav a:hover,.pf41-coin:hover{transform:none} .lp-up{background:var(--up-soft)}.lp-down{background:var(--down-soft)} } /* Medium desktops: tighter pills first (icons stay), icons give way only on the narrowest desktop widths. */ @media(min-width:1201px) and (max-width:1480px){ .pf41-ref-nav{gap:2px} .pf41-ref-nav a{padding:0 9px;gap:6px;font-size:12.5px} .pf41-reference-header .site-search{flex:0 1 130px;min-width:100px} .pf41-ref-hdr{gap:10px} .pf41-ref-actions{gap:6px} } @media(min-width:1201px) and (max-width:1240px){.pf41-ref-nav a .pf41-nav-icon{display:none}} } /* Wide content pages that set their own narrower inline max-width (pricing, account, simulator…) share the header's column. */ .wrap[style*="max-width:1000px"],.wrap[style*="max-width:960px"],.wrap[style*="max-width:900px"],.wrap[style*="max-width:1180px"]{max-width:var(--pf41-max)!important;width:min(var(--pf41-max),calc(100% - 2*var(--pf41-gutter)))!important;padding-inline:0!important} /* One card surface everywhere in dark mode (older page-level tokens fall back to the palette), and grids that fill their row. */ html[data-theme="dark"]{--card:var(--surface);--card-hover:var(--surface-2);--line:var(--border);--line-soft:var(--border);--pf-card:var(--surface)} html[data-theme="dark"] .pf41-extra-card,html[data-theme="dark"] .pf41-opportunities,html[data-theme="dark"] .cb-card{background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%);border-color:var(--border)} @media(min-width:901px){.cb{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}} /* Arabic labels are wider: drop the nav icons earlier so the actions (login) never leave the column. */ @media(min-width:1201px) and (max-width:1560px){html[lang="ar"] .pf41-ref-nav a .pf41-nav-icon{display:none}html[lang="ar"] .pf41-ref-nav a{padding:0 9px}} @media(min-width:1201px) and (max-width:1560px){html[lang="ar"] .pf41-ref-nav a{padding:0 7px;font-size:12px}html[lang="ar"] .pf41-reference-header .site-search{flex:0 1 100px;min-width:90px}html[lang="ar"] .pf41-ref-hdr{gap:8px}} /* Guests on medium desktops: Log in stays in the bar; "get started" is one click further (login page / drawer) so the bar never overflows the column. */ @media(min-width:1201px) and (max-width:1560px){.pf41-ref-actions a.pf41-ref-account[href="/register"]{display:none}} /* The action cluster keeps its natural width; the nav is the part that gives way. */ .pf41-ref-actions{flex:none} .pf41-ref-nav{flex:0 1 auto;min-width:0} /* ===================================================================================================== One palette for every page. design-system.css and the layout's inline