/* Theme Name: Bisaat — بِسَاط Theme URI: https://bisaat.sa/ Author: دِراية الذكية للتقنيات (Deraya Smart Technologies) Author URI: https://bisaat.sa/ Description: قالب ووردبريس عربي (RTL) لمنصة بِسَاط التدريبية — مبني من موقع بِسَاط الثابت بنفس التصميم والهوية. يتضمن قوالب جاهزة للصفحات، قوائم تنقّل قابلة للتحرير، نظام استقبال طلبات (Leads) داخل لوحة التحكم، وخيارات تخصيص للهوية وروابط الحث على الإجراء. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bisaat Tags: rtl-language-support, custom-menu, custom-logo, translation-ready, one-column, full-width-template هذا الملف مطلوب من ووردبريس للتعرّف على القالب فقط. أنماط الموقع الفعلية موجودة في: assets/css/tokens.css, base.css, components.css, pages.css */ /* ========================================================================= WordPress-specific styling The design system lives in assets/css/. Everything below only styles markup that WordPress itself produces — the editor output, the login form inside the modal, pagination, alignments and accessibility helpers. ========================================================================= */ /* --- Reading surface ----------------------------------------------------- The site's is dark by design; every designed section paints its own light background. Plain content pages (the legal pages, and anything the client writes in the editor) have no such section, so they need their own surface — without it the dark body colour showed through and the text was unreadable, which is how the original static legal pages looked. ------------------------------------------------------------------------- */ .bisaat-page-main { padding-top: calc(72px + var(--space-10)); padding-bottom: var(--space-16); background: var(--color-neutral-50); min-height: 70vh; } .bisaat-page-surface { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-8); box-shadow: var(--shadow-sm); color: var(--color-neutral-800); } .bisaat-page-surface h1, .bisaat-page-surface h2, .bisaat-page-surface h3, .bisaat-page-surface h4 { color: var(--color-primary-900); } @media (max-width: 640px) { .bisaat-page-surface { padding: var(--space-6) var(--space-4); } } /* --- Editor (post/page content) ----------------------------------------- */ .bisaat-editor-content { line-height: var(--leading-relaxed); color: var(--color-neutral-800); } .bisaat-editor-content > * + * { margin-top: var(--space-4); } .bisaat-editor-content h2 { font-size: var(--font-h3); margin-top: var(--space-10); } .bisaat-editor-content h3 { font-size: var(--font-h4); margin-top: var(--space-8); } .bisaat-editor-content ul, .bisaat-editor-content ol { padding-inline-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); } .bisaat-editor-content ul { list-style: disc; } .bisaat-editor-content ol { list-style: decimal; } .bisaat-editor-content img, .bisaat-editor-content .wp-block-image img { max-width: 100%; height: auto; border-radius: var(--radius-lg); } .bisaat-editor-content blockquote { border-inline-start: 3px solid var(--color-accent-500); padding-inline-start: var(--space-5); color: var(--color-neutral-600); } .bisaat-editor-content table { width: 100%; border-collapse: collapse; } .bisaat-editor-content th, .bisaat-editor-content td { border: 1px solid var(--color-neutral-200); padding: var(--space-3); text-align: start; } .bisaat-editor-content a { text-decoration: underline; } /* Core block alignments */ .alignwide { max-width: 1100px; margin-inline: auto; } .alignfull { max-width: none; } .aligncenter { display: block; margin-inline: auto; } .alignright { float: right; margin-inline-start: var(--space-5); } .alignleft { float: left; margin-inline-end: var(--space-5); } /* --- Login form inside the dark modal ----------------------------------- */ #loginModal .modal-dialog form { display: flex; flex-direction: column; gap: var(--space-4); } #loginModal label { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 6px; color: #FFF; } #loginModal input[type="text"], #loginModal input[type="password"], #loginModal input[type="email"] { width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; color: #FFF; font-family: inherit; font-size: 0.95rem; } #loginModal .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: normal; margin: 0; } #loginModal .login-submit input[type="submit"] { width: 100%; padding: 13px 20px; border: 0; border-radius: 999px; background: #FFF; color: var(--color-primary-900); font-family: inherit; font-size: 1rem; font-weight: bold; cursor: pointer; } /* --- Pagination ---------------------------------------------------------- */ .nav-links { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; } .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); color: var(--color-neutral-700); font-weight: 500; } .nav-links .page-numbers.current, .nav-links .page-numbers:hover { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #FFF; } /* --- Accessibility & admin bar ------------------------------------------ */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed !important; top: 12px; inset-inline-start: 12px; width: auto; height: auto; clip: auto; padding: 12px 20px; background: #FFF; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 100000; } /* The WP admin bar overlaps the sticky header for logged-in users. */ .admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } } /* ========================================================================= FAQ page accordion faq.html shipped with `.accordion-*` markup that had no CSS anywhere in the design system (the home page uses the separate `.kajabi-faq-*` family), so the page rendered as stacked unstyled boxes. These rules give it the same look as the home page's FAQ, on the light surface this page uses. ========================================================================= */ .faq-controls { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); } .faq-toggle-all-btn { background: transparent; border: 1px solid var(--border-dark-medium); border-radius: 999px; padding: 8px 18px; color: var(--text-dark-secondary); font-family: inherit; font-size: var(--font-body-sm); font-weight: 500; cursor: pointer; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .faq-toggle-all-btn:hover { color: var(--color-white); border-color: rgba(255, 255, 255, 0.4); } .accordion { display: flex; flex-direction: column; } .accordion-item { border-bottom: 1px solid var(--border-dark-medium); } .accordion-item:first-child { border-top: 1px solid var(--border-dark-medium); } .accordion-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; background: transparent; border: none; outline: none; cursor: pointer; color: var(--color-white); font-family: var(--font-family-primary); font-size: var(--font-h4); font-weight: var(--font-weight-semibold); text-align: right; transition: color var(--duration-fast) var(--ease-out); } .accordion-header:hover { color: #A5B4FC; } .accordion-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--text-dark-secondary); transition: transform var(--duration-normal) var(--ease-base), color var(--duration-fast) var(--ease-out); } .accordion-item.active .accordion-icon { transform: rotate(180deg); color: var(--color-white); } .accordion-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } .accordion-item.active .accordion-content { opacity: 1; } .accordion-body { padding-bottom: var(--space-6); color: var(--text-dark-secondary); font-size: var(--font-body); line-height: var(--leading-relaxed); } /* ========================================================================= Forms The design system never defined the `.form-*` family, even though the markup, the validation script and the modal dialogs all use it — which is why the booking form and the pricing modal rendered as bare browser controls. These rules complete the set, in both the light (page) and dark (modal) contexts. ========================================================================= */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); } .form-label { font-size: var(--font-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-neutral-800); } .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 16px; font-family: inherit; font-size: 0.95rem; color: var(--color-neutral-900, #0F172A); background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .form-textarea { min-height: 120px; resize: vertical; } .form-select { /* Keep the native arrow on the correct side in RTL. */ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-neutral-500) 50%), linear-gradient(135deg, var(--color-neutral-500) 50%, transparent 50%); background-position: 18px calc(50% + 2px), 23px calc(50% + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-start: 40px; } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-neutral-500); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(70, 85, 229, 0.15); } .form-error { min-height: 1em; font-size: 0.8rem; color: #DC2626; } .form-group.has-error .form-input, .form-group.has-error .form-select, .form-group.has-error .form-textarea { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); } /* The spam trap must be unreachable but not `display:none`, which some bots detect and skip. */ .honeypot-field { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* --- Forms on the dark modal surface ------------------------------------ */ .modal-dialog .form-label { color: #FFF; } .modal-dialog .form-input, .modal-dialog .form-select, .modal-dialog .form-textarea { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #FFF; } .modal-dialog .form-input::placeholder, .modal-dialog .form-textarea::placeholder { color: rgba(255, 255, 255, 0.45); } .modal-dialog .form-select option { color: #0F172A; } .modal-dialog .form-input:focus, .modal-dialog .form-select:focus, .modal-dialog .form-textarea:focus { border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); } /* --- Modal header / body ------------------------------------------------ */ .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } .modal-title { font-size: 1.35rem; font-weight: bold; color: #FFF; margin: 0; } .modal-body { display: flex; flex-direction: column; } /* ========================================================================= Button variants the design system references but never defined `.btn-accent` (the primary CTA on the booking form, pricing modal, courses and sites pages) and `.btn-pill` (rounded CTAs on the courses, sites and 404 pages) had no rules, so those buttons fell back to the browser default. ========================================================================= */ .btn-accent { background-color: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-white); box-shadow: 0 4px 16px rgba(70, 85, 229, 0.28); } .btn-accent:hover { background-color: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(70, 85, 229, 0.34); } .btn-accent:disabled, .btn-accent[disabled] { opacity: 0.6; transform: none; cursor: not-allowed; } .btn-pill { border-radius: 999px; } /* ========================================================================= Mobile drawer pages.css slides the drawer with `transition: inset-inline-end`. Chrome never completes a transition on that logical inset in an RTL document, so the drawer keeps its closed value and the mobile menu simply never appears — the hamburger dims the page and nothing slides in. Pinning the drawer to the inline-end edge and animating a transform instead gives the identical motion on a property that reliably animates. ========================================================================= */ .mobile-drawer { inset-inline-end: 0; transform: translateX(-110%); transition: transform var(--duration-normal, 260ms) var(--ease-base, cubic-bezier(0.16, 1, 0.3, 1)); will-change: transform; } .mobile-drawer.open { inset-inline-end: 0; transform: translateX(0); } /* The theme renders RTL; keep the drawer on the correct side if a child theme or translation ever switches the document to LTR. */ html:not([dir="rtl"]) .mobile-drawer { transform: translateX(110%); } html:not([dir="rtl"]) .mobile-drawer.open { transform: translateX(0); } /* ========================================================================= Pricing page pricing.html was built against a `.pricing-*` component family that was never written into the design system — 21 classes with no rules anywhere. The result: the four plans rendered as full-width stacked images with no card, no grid and no price styling, and the monthly/annual control showed as a bare browser checkbox. These rules complete that family. The plans sit on the dark page background, so the cards themselves are white — which is what the markup's inline `--color-neutral-700` body text was written for. ========================================================================= */ /* --- Badge variants referenced by the markup ----------------------------- */ .badge-blue { background: var(--color-accent-100); color: var(--color-accent-700); } .badge-cream { background: rgba(255, 255, 255, 0.08); color: var(--color-white); border: 1px solid rgba(255, 255, 255, 0.18); } .badge-gold-filled { background: linear-gradient(135deg, #D4A24C, #B8862F); color: #2A1E06; } .badge-success { background: rgba(22, 163, 74, 0.14); color: #16A34A; border: 1px solid rgba(22, 163, 74, 0.3); } /* The Saudi flag rendered at its natural size and swallowed the badge text. */ .flag-icon-sa { width: 18px; height: auto; border-radius: 2px; flex-shrink: 0; } /* --- Monthly / annual switch -------------------------------------------- */ .pricing-billing-toggle-wrapper { display: flex; justify-content: center; } .pricing-billing-toggle { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: center; padding: 10px 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-dark-medium); border-radius: var(--radius-pill); } .toggle-label { font-size: var(--font-body-sm); font-weight: var(--font-weight-medium); color: var(--text-dark-secondary); cursor: pointer; transition: color var(--duration-fast) var(--ease-out); } .toggle-label.active { color: var(--color-white); font-weight: var(--font-weight-bold); } .billing-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; } .billing-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .billing-slider { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.22); border-radius: 999px; transition: background var(--duration-fast) var(--ease-out); } .billing-slider::before { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; background: var(--color-white); border-radius: 50%; transition: transform var(--duration-normal) var(--ease-base); } .billing-switch input:checked + .billing-slider { background: var(--color-accent-700); } /* RTL: the knob travels toward the inline-end edge. */ .billing-switch input:checked + .billing-slider::before { transform: translateX(-20px); } html:not([dir="rtl"]) .billing-switch input:checked + .billing-slider::before { transform: translateX(20px); } .billing-switch input:focus-visible + .billing-slider { outline: 2px solid var(--color-white); outline-offset: 2px; } /* --- The plan grid ------------------------------------------------------- */ .pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; } @media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobile: the four cards become a swipeable row — one centred card with the neighbours peeking — instead of a very long vertical stack. */ @media (max-width: 640px) { .pricing-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 10px; /* Bleed to the viewport edge so the peek is visible, then pad the ends so the first and last card can still centre. 13vw a side minus the gap and the neighbour's scale leaves ~35px of visible card — a real peek. */ margin-inline: calc(var(--space-4) * -1); padding-inline: 13vw; scroll-padding-inline: 13vw; padding-bottom: var(--space-4); scrollbar-width: none; -ms-overflow-style: none; } .pricing-grid::-webkit-scrollbar { display: none; } .pricing-grid .pricing-card { flex: 0 0 74vw; width: 74vw; scroll-snap-align: center; scroll-snap-stop: always; } /* The ribbon needs headroom the grid row no longer provides. */ .pricing-grid { padding-top: 14px; } } .pricing-card { position: relative; display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: transform var(--duration-normal) var(--ease-base), box-shadow var(--duration-normal) var(--ease-base); } .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .pricing-card h3 { font-size: var(--font-h4); color: var(--color-primary-900); margin-bottom: var(--space-1); } /* The plan the page is steering people toward. */ .pricing-card-featured { border: 2px solid var(--color-accent-700); box-shadow: 0 12px 40px rgba(70, 85, 229, 0.28); } .pricing-badge-ribbon { position: absolute; top: 0; inset-inline-end: var(--space-5); transform: translateY(-50%); z-index: 2; padding: 6px 16px; background: var(--color-accent-700); color: var(--color-white); border-radius: var(--radius-pill); font-size: var(--font-caption); font-weight: var(--font-weight-bold); white-space: nowrap; box-shadow: 0 4px 14px rgba(70, 85, 229, 0.4); } /* --- Card image header --------------------------------------------------- */ .pricing-card-preview { position: relative; margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4); height: 150px; overflow: hidden; border-start-start-radius: calc(var(--radius-xl) - 1px); border-start-end-radius: calc(var(--radius-xl) - 1px); } .pricing-card-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .pricing-card-preview-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--space-3); background: linear-gradient(to top, rgba(9, 12, 28, 0.85) 0%, rgba(9, 12, 28, 0.15) 55%, transparent 100%); } .pricing-card-preview-tag { font-size: var(--font-caption); font-weight: var(--font-weight-bold); color: var(--color-white); } /* --- Price --------------------------------------------------------------- */ .pricing-card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--color-neutral-200); } .pricing-prefix { font-size: 0.78rem; color: var(--color-neutral-500); } .pricing-amount { font-family: var(--font-family-mono); font-size: 2rem; font-weight: var(--font-weight-bold); line-height: 1; color: var(--color-primary-900); } .pricing-unit { font-size: 0.8rem; color: var(--color-neutral-600); } /* The button pins to the bottom of every card so all four line up — this has to live on the button, not the price row: the enterprise plan shows "تسعير مخصص" in a plain div and has no .pricing-card-price at all. */ .pricing-card > .btn { margin-top: auto; padding-top: 12px; padding-bottom: 12px; } .pricing-card > .btn:not(:first-child) { margin-block-start: var(--space-4); } /* ========================================================================= Section-header badges .section-header is a flex column, so its badge needs align-self to stay a pill instead of stretching the full width. The designed markup carried that as an inline style on each badge; making the copy editable moved the text into a field, so the rule lives here instead — one place, all sections. ========================================================================= */ .section-header .badge { align-self: center; margin-bottom: var(--space-1); } /* ========================================================================= CTA hover — sectors section and the closing call to action Both were requested to hover like `.btn-outline-dark`: the button inverts to a light surface with dark text. Since these sit on dark sections, the invert reads as a deliberate lift rather than a colour shift. ========================================================================= */ .innovations-section .btn:hover, .prefooter-section .btn:not(.btn-outline-white):hover { background-color: var(--bg-light-muted); border-color: var(--text-light-primary); color: var(--text-light-primary); transform: translateY(-2px); box-shadow: none; } /* ========================================================================= Products showcase — slider The six panels were tab-switched: one visible, five display:none, so nothing signalled that more existed. They now sit in a snapping track at ~82% width, so the next panel peeks in and the section reads as a slider. The tab buttons stay as controls; they scroll the track instead of toggling visibility. ========================================================================= */ .products-slider { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: var(--space-4); /* Room for the peeking neighbour without clipping card shadows. */ margin-inline: calc(var(--space-2) * -1); padding-inline: var(--space-2); } .products-slider::-webkit-scrollbar { display: none; } /* Every panel is present now — the tab CSS hid all but the active one. */ .products-slider .products-tab-panel, .products-slider .products-tab-panel.active, .products-slider .products-tab-panel.is-exiting { display: block; animation: none; flex: 0 0 82%; width: 82%; opacity: 0.4; scroll-snap-align: center; /* `always` forbids a smooth scroll from passing intermediate snap points, so a tab click more than one slide away got trapped on the next panel. */ scroll-snap-stop: normal; transition: opacity var(--duration-normal) var(--ease-base); pointer-events: auto; } .products-slider .products-tab-panel.active { opacity: 1; } @media (max-width: 900px) { .products-slider .products-tab-panel, .products-slider .products-tab-panel.active { flex: 0 0 88%; width: 88%; } } /* ========================================================================= Products showcase — let the visual fill its card .product-showcase-visual carried padding and a top border that made sense when the text block sat above it. That block is gone, so the padding just framed the visual in empty space and the border separated nothing. ========================================================================= */ .product-showcase-visual { padding: 0; border-top: 0; } @media (min-width: 992px) { .product-showcase-visual { padding: 0; } } /* With the padding gone the card is only a frame, so drop its chrome too and let the visual's own rounded corners carry the shape. */ .products-slider .product-showcase-card { background: transparent; border: 0; box-shadow: none; } /* ========================================================================= Pricing — plan cards and comparison matrix (rebuilt content) Adds the pieces the new plan data needs: an icon chip, annual-price notes, a savings chip, per-plan feature lists with "جديد" flags, and the icon vocabulary the comparison table uses (available / not / partial / add-on). ========================================================================= */ .pricing-save-note { margin-top: var(--space-3); font-size: var(--font-body-sm); color: var(--text-dark-secondary); } /* --- Plan card additions ------------------------------------------------- */ .pricing-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; margin-bottom: var(--space-3); background-color: var(--color-accent-100); background-repeat: no-repeat; background-position: center; background-size: 22px 22px; } /* Inline SVG keeps these self-contained — no extra requests, no icon font. */ .pricing-icon--message { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234655E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } .pricing-icon--cap { background-color: #DCFCE7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5Z'/%3E%3Cpath d='M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3C/svg%3E"); } .pricing-icon--layers { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234655E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 12 9 5 9-5'/%3E%3Cpath d='m3 17 9 5 9-5'/%3E%3C/svg%3E"); } .pricing-icon--building { background-color: #FFEDD5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EA580C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E"); } .pricing-card-desc { font-size: 0.85rem; color: var(--color-neutral-600); min-height: 52px; margin-top: var(--space-2); } .pricing-amount--text { font-family: var(--font-family-primary); font-size: 1.5rem; } .pricing-annual-note { font-size: 0.8rem; color: var(--color-neutral-500); margin-top: 4px; } .pricing-save-chip { align-self: flex-start; margin-top: 8px; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(22, 163, 74, 0.12); color: #16A34A; font-size: 0.75rem; font-weight: var(--font-weight-semibold); } .pricing-cta { margin-top: var(--space-4); } /* --- Per-plan feature list ---------------------------------------------- */ .pricing-features { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-neutral-200); } .pricing-features h4 { font-size: 0.85rem; color: var(--color-primary-900); margin-bottom: var(--space-3); } .pricing-features ul { display: flex; flex-direction: column; gap: 8px; } .pricing-features li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 0.8rem; line-height: 1.6; color: var(--color-neutral-700); } /* The bullet leads in the reading direction. */ .pricing-features li > span::before { content: "•"; color: var(--color-accent-700); margin-inline-end: 6px; } .pricing-new { flex-shrink: 0; padding: 1px 7px; border-radius: var(--radius-sm, 6px); background: #FFEDD5; color: #C2410C; font-size: 0.65rem; font-style: normal; font-weight: var(--font-weight-bold); } /* --- Comparison matrix --------------------------------------------------- */ .comparison-table th[scope="row"] { text-align: start; font-weight: var(--font-weight-medium); } .cmp-label { display: block; font-size: var(--font-body-sm); color: var(--color-neutral-800); } .cmp-hint { display: block; margin-top: 2px; font-size: 0.7rem; font-weight: var(--font-weight-regular); color: var(--color-neutral-500); } .comparison-table td { text-align: center; vertical-align: middle; } .cmp-mark { display: inline-block; font-size: 1.05rem; line-height: 1; font-weight: var(--font-weight-bold); } .cmp-yes { color: #16A34A; } .cmp-no { color: var(--color-neutral-300, #CBD5E1); } /* Partial support reads as a half-filled dot rather than a third glyph. */ .cmp-partial { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #F59E0B; background: #FCD34D; } .cmp-addon { display: inline-block; padding: 3px 9px; border-radius: var(--radius-sm, 6px); background: var(--color-accent-100); color: var(--color-accent-700); font-size: 0.7rem; font-weight: var(--font-weight-bold); } .cmp-stack { display: flex; flex-direction: column; gap: 2px; font-size: 0.72rem; font-weight: var(--font-weight-semibold); color: var(--color-neutral-800); } .comparison-table .comparison-category { text-align: start; background: var(--color-neutral-100); color: var(--color-primary-900); } /* ========================================================================= Book-a-demo page Two columns on a dark section: the form on a white card (its native ground, matching the pricing cards), and what the session covers alongside it. ========================================================================= */ .demo-section { padding-bottom: var(--space-16); } .demo-intro { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--space-10); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .demo-intro h1 { font-size: var(--font-display-2); } .demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--space-8); align-items: start; } @media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } } /* --- Form card ----------------------------------------------------------- */ .demo-form-card { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-md); } .demo-form-card h2 { font-size: var(--font-h4); color: var(--color-primary-900); margin-bottom: var(--space-5); } .demo-form-card .req { color: #DC2626; } .demo-form-note { margin-top: var(--space-4); font-size: 0.75rem; color: var(--color-neutral-500); text-align: center; } /* --- Session topics ------------------------------------------------------ */ .demo-topics { padding: var(--space-2) var(--space-2) 0; /* A column, so the duration badge and the heading each get their own line. As inline-blocks they shared one, which put the badge in the leading (rightmost) RTL position and made it read as the heading. */ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .demo-duration { display: inline-block; padding: 7px 16px; border-radius: var(--radius-pill); background: var(--color-accent-700); color: var(--color-white); font-size: var(--font-body-sm); font-weight: var(--font-weight-semibold); } .demo-topics-title { margin: 0; font-size: var(--font-h3); color: var(--color-white); /* The underline in the reference, without a decorative element. Block-level so it starts its own line; fit-content so the rule hugs the text. */ padding-bottom: var(--space-2); border-bottom: 3px solid var(--color-accent-500); display: block; width: fit-content; } .demo-topics-list { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; } .demo-topics-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-dark-secondary); font-size: var(--font-body); line-height: var(--leading-relaxed); } /* Check mark drawn in CSS so the list needs no icon markup or image. */ .demo-topics-list li::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; border-radius: 6px; background-color: var(--color-accent-700); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px 13px; } /* ========================================================================= Light content pages The site body is near-black, which suits the home page's full-bleed sections. The pricing and booking pages are mostly white cards, tables and form fields, so on that ground they read as slabs floating in a void with punishing contrast. These pages run on a light surface instead: same brand, same components, far calmer — and it matches the reference designs. ========================================================================= */ body.bisaat-light-page { background-color: var(--color-neutral-50); color: var(--color-neutral-800); } /* The header is 92–98% white over the page behind it, so on a dark body it picked up a grey cast. On the light ground it resolves to clean white. */ .bisaat-light-page .site-header, .bisaat-light-page .site-header.scrolled { background: var(--color-white); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--color-neutral-200); } .bisaat-light-page .bisaat-page-main { background: transparent; } /* Page-level headings sit on the dark ground; everything inside a white card sets its own colour and is untouched by these. */ .bisaat-light-page > *:not(.demo-shell) h1, .bisaat-light-page #comparison > .text-center h2 { color: var(--color-white); } .bisaat-light-page .pricing-card h3, .bisaat-light-page .demo-form-card h2 { color: var(--color-primary-900); } .bisaat-light-page main > section > .text-center > .lead, .bisaat-light-page main > section > h1 + .lead, .bisaat-light-page #comparison .lead { color: var(--text-dark-secondary); } .bisaat-light-page main > section > h1, .bisaat-light-page section > h1 { color: var(--color-white); } /* The table sits on a white card, so its text must not inherit the light body colour. */ .bisaat-light-page .comparison-table { color: var(--color-neutral-800); } /* Badges built for a dark ground need their light counterparts. */ .bisaat-light-page .badge-cream { background: var(--color-neutral-100); color: var(--color-neutral-700); border-color: var(--color-neutral-200); } /* The billing toggle keeps its dark-surface styling on this ground. */ /* Booking page: the topics column becomes a card so it balances the form. */ .bisaat-light-page .demo-topics { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); } .bisaat-light-page .demo-topics-title { color: var(--color-primary-900); border-bottom-color: var(--color-accent-500); } .bisaat-light-page .demo-topics-list li { color: var(--color-neutral-700); } .bisaat-light-page .demo-form-card { box-shadow: var(--shadow-lg); } /* --- Comparison tooltips ------------------------------------------------- */ .comparison-table td [data-tip] { position: relative; cursor: help; } .comparison-table td [data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); z-index: 5; padding: 5px 10px; border-radius: var(--radius-sm, 6px); background: var(--color-primary-900); color: var(--color-white); font-size: 0.7rem; font-weight: var(--font-weight-medium); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .comparison-table td [data-tip]:hover::after, .comparison-table td [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* --- Bisaat app section --------------------------------------------------- */ .app-section { margin-bottom: var(--space-16); } .app-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: center; background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); } @media (max-width: 900px) { /* minmax(0, …) — a bare 1fr means minmax(auto, 1fr), and the auto minimum sizes the track to the widest content, letting the scroll row inflate the card past the viewport. */ .app-card { grid-template-columns: minmax(0, 1fr); } } .app-media { display: flex; justify-content: center; } .app-media img { width: 100%; max-width: 420px; height: auto; display: block; } .app-head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-6); } .app-head h2 { font-size: var(--font-h3); } .app-head p { margin-top: 4px; color: var(--color-accent-700); font-size: var(--font-body-sm); font-weight: var(--font-weight-medium); } .app-head-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md); background-color: var(--color-accent-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234655E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } .app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } @media (max-width: 640px) { .app-grid { grid-template-columns: 1fr; } } .app-item { display: flex; align-items: flex-start; gap: 10px; padding: var(--space-4); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-neutral-50); font-size: 0.85rem; line-height: var(--leading-relaxed); color: var(--color-neutral-700); } .app-item-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--radius-md); background-color: var(--color-white); border: 1px solid var(--color-neutral-200); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } .app-item-icon--login { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234655E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E"); } .app-item-icon--play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234655E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E"); } .app-item-icon--check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234655E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); } .app-item-icon--bookmark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234655E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } /* Two-line Arabic display headings collide at the default line-height — the tashkeel and descenders need the extra room. */ .demo-intro h1, .bisaat-light-page h1 { line-height: 1.35; } /* ========================================================================= Comparison table — header sticks to the page First attempt gave the wrapper its own scroll area so the header could stick inside it. That worked, but it introduced a second scrollbar — which RTL renders down the left edge as a dark strip — and the header only followed that inner scroll, not the page. The wrapper never needed to scroll: the table sets no min-width, so it already shrinks to any viewport. With no scroll-container ancestor, sticky resolves against the page itself and the header follows the reader all the way down the table, on desktop and mobile alike. ========================================================================= */ .comparison-table-wrapper { max-height: none; overflow: visible; } .comparison-table thead th { position: sticky; /* Clears the fixed site header in its scrolled (68px) state. */ top: 68px; z-index: 3; background-color: var(--color-neutral-100); /* border-collapse drops borders on sticky cells, so the divider is a shadow. */ box-shadow: inset 0 -1px 0 var(--color-neutral-200); } .comparison-table thead th.featured-col { background-color: var(--color-accent-100); } /* Plan names centre over their columns; the feature column keeps reading from the start edge. */ .comparison-table thead th { text-align: center; } .comparison-table thead th:first-child { text-align: start; } /* Category bands sit below the header as they pass under it. */ .comparison-table .comparison-category { position: relative; z-index: 1; } /* No horizontal scroll, so narrow screens get tighter cells instead. */ @media (max-width: 900px) { .comparison-table { font-size: 0.78rem; } .comparison-table th, .comparison-table td { padding: var(--space-3) var(--space-2); } .comparison-table thead th { top: 60px; } .cmp-hint { font-size: 0.62rem; } .cmp-stack { font-size: 0.62rem; } .cmp-addon { padding: 2px 6px; font-size: 0.62rem; } } @media (max-width: 560px) { .comparison-table { font-size: 0.72rem; } .comparison-table th, .comparison-table td { padding: 10px 6px; } } /* An auto-layout table can never shrink below its longest word, so on phones its min-content width (~430px) silently widened the layout viewport — the whole page then panned sideways under the fixed header. Fixed layout pins the table to the container width; labels wrap at word boundaries only (never mid-word — broken Arabic words are unreadable), so the header font steps down until the longest plan word fits its column. */ @media (max-width: 640px) { .comparison-table { table-layout: fixed; width: 100%; } .comparison-table thead th:first-child { width: 27%; } .comparison-table thead th { font-size: 0.66rem; padding-inline: 3px; letter-spacing: 0; } } /* --- Link from the cards down to the table ------------------------------- */ .pricing-compare-link { margin-top: var(--space-8); text-align: center; } .pricing-compare-link a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-accent-700); font-size: var(--font-body-sm); font-weight: var(--font-weight-semibold); transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .pricing-compare-link a:hover { border-color: var(--color-accent-700); transform: translateY(-2px); } /* The header is fixed, so an in-page jump must stop short of it. */ #comparison { scroll-margin-top: 90px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ========================================================================= Pricing page — the app showcase panel An all-white page reads flat over this much length, so the app section gets its own dark surface. Earlier this was a full-bleed band with gradient fades at both edges; fading a light colour into a dark one just produced a grey smear, and it matched nothing else on the site. Instead it is an inset panel with a generous radius — the same card language already used by the plans and the comparison table, just inverted. Deliberate rather than accidental, and no soft edges to go muddy. ========================================================================= */ .pricing-band { margin-block: var(--space-16); } .pricing-band--dark { /* Inset from the page edges so it reads as a panel, not a page section. */ margin-inline: auto; max-width: 1240px; width: calc(100% - var(--space-8)); padding-block: var(--space-12); border-radius: 28px; background: radial-gradient(120% 140% at 82% 15%, rgba(92, 108, 242, 0.28) 0%, rgba(92, 108, 242, 0) 55%), linear-gradient(160deg, #141A2B 0%, #0B0E17 100%); box-shadow: 0 30px 70px rgba(8, 11, 17, 0.35); overflow: hidden; } @media (max-width: 640px) { .pricing-band--dark { border-radius: 20px; padding-block: var(--space-8); } } .pricing-band .app-section { margin-bottom: 0; } /* The panel *is* the card now — no nested border inside a border. */ .pricing-band--dark .app-card { background: transparent; border: 0; box-shadow: none; padding-block: 0; } .bisaat-light-page .pricing-band--dark .app-head h2 { color: var(--color-white); } .bisaat-light-page .pricing-band--dark .app-head p { color: #A5B4FC; } .pricing-band--dark .app-head-icon { background-color: rgba(255, 255, 255, 0.10); } .pricing-band--dark .app-item { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); color: var(--text-dark-secondary); backdrop-filter: blur(2px); } .pricing-band--dark .app-item-icon { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); } /* Lift the mockup so it feels placed on the panel rather than pasted on. */ .pricing-band--dark .app-media img { filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.55)); } /* ========================================================================= Sticky needs a clean ancestor chain base.css sets `overflow-x: hidden` on to contain the off-canvas drawer. That makes the body a scroll container, and a sticky header then resolves against it instead of the page — so it never sticks. The drawer is `position: fixed`, so it does not extend the document anyway; dropping the clamp on these pages restores page-level sticky without a stray scrollbar. ========================================================================= */ body.bisaat-light-page { overflow-x: clip; } /* ========================================================================= Section reveal on scroll ========================================================================= */ @media (prefers-reduced-motion: no-preference) { .bisaat-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease-base), transform 0.6s var(--ease-base); } .bisaat-reveal.is-visible { opacity: 1; transform: none; } } /* ========================================================================= Products tab pills — one scrollable row on mobile flex-wrap stacked the six pills into a ragged block on narrow screens. A single scrolling row keeps them as one visual unit, with the ends fading to hint that more pills are off-screen. ========================================================================= */ @media (max-width: 768px) { .products-tab-nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); padding-block: 4px; /* Fade both ends so the cut-off pill reads as "scroll me". */ -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .products-tab-nav::-webkit-scrollbar { display: none; } .products-tab-btn { flex-shrink: 0; white-space: nowrap; } } /* Custom product slides added from wp-admin: a single image fills the panel. */ .product-showcase-visual--image img { width: 100%; height: auto; display: block; border-radius: var(--radius-xl); } /* ========================================================================= App panel — mobile spacing On small screens three paddings stacked: the band's block padding, the container's inline padding, and the card's own padding — leaving a narrow column of content inside a sea of dark space. Collapse them to one level. ========================================================================= */ @media (max-width: 640px) { .pricing-band--dark { width: calc(100% - var(--space-4)); padding-block: var(--space-6); } .pricing-band--dark .app-section.container { padding-inline: var(--space-4); } .pricing-band--dark .app-card { padding: 0; gap: var(--space-5); } .pricing-band--dark .app-media img { max-width: 300px; } .app-head { margin-bottom: var(--space-4); } } /* ========================================================================= Mobile pricing refinements 1. The plan row reads as a deck: the centred card at full size, its neighbours slightly scaled back and dimmed so they sit "behind" it. The .has-center guard means the effect only exists once the script has marked a centre card — if JS never runs, nothing is scaled or dimmed. 2. The gap between the compare link and the app panel collapsed from three stacked margins to one. ========================================================================= */ @media (max-width: 640px) { .pricing-grid .pricing-card { transition: transform 0.3s var(--ease-base), opacity 0.3s var(--ease-base); transform-origin: center bottom; } .pricing-grid.has-center .pricing-card:not(.is-center) { transform: scale(0.94); opacity: 0.75; } .pricing-band { margin-block: var(--space-6); } .pricing-compare-link { margin-top: var(--space-5); } .bisaat-light-page .pricing-grid + .pricing-compare-link { margin-bottom: 0; } } /* ========================================================================= App panel — mobile carousel + brighter copy The four feature boxes stacked into a long column; they become the same snap-scroll row as the plans. And the body text was set in the dark theme's secondary grey, which over this panel reads as disabled — lift it near-white, keeping the icon chips as the accent. ========================================================================= */ .pricing-band--dark .app-item { color: #E6EAF2; } .bisaat-light-page .pricing-band--dark .app-head p { color: #C7CEFF; } @media (max-width: 640px) { .pricing-band--dark .app-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 10px; margin-inline: calc(var(--space-4) * -1); padding-inline: 13vw; scroll-padding-inline: 13vw; padding-bottom: var(--space-2); scrollbar-width: none; -ms-overflow-style: none; } .pricing-band--dark .app-grid::-webkit-scrollbar { display: none; } .pricing-band--dark .app-item { flex: 0 0 72vw; scroll-snap-align: center; scroll-snap-stop: always; } } /* A flex row that scrolls must not inflate its grid-item ancestors: their default min-width:auto sizes them to the row's full content width, which pushed the whole app card past the viewport edge on mobile. */ .app-body, .app-media { min-width: 0; } @media (max-width: 640px) { .pricing-band--dark .app-card { min-width: 0; } .pricing-band--dark .app-grid { max-width: 100vw; } } /* ========================================================================= Book a demo — split shell Replaces the two floating white boxes with a single object: a dark indigo side that sells the session (same surface language as the pricing app panel) and the form beside it. One card, one story — what you get on the right, where you sign on the left. ========================================================================= */ .demo-section { padding-block: var(--space-8) var(--space-16); } .demo-shell { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); max-width: 1080px; margin-inline: auto; border-radius: 28px; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-neutral-200); box-shadow: 0 30px 70px rgba(8, 11, 17, 0.16); } .demo-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-10) var(--space-8); background: radial-gradient(120% 120% at 85% 8%, rgba(92, 108, 242, 0.30) 0%, rgba(92, 108, 242, 0) 55%), linear-gradient(165deg, #161C2E 0%, #0B0E17 100%); } .demo-side h1 { color: var(--color-white); font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.45; } .demo-side-lead { color: #B9C0D4; font-size: var(--font-body-sm); line-height: var(--leading-relaxed); } .demo-side .demo-duration { margin-top: var(--space-1); } .demo-topics-block { margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.10); width: 100%; } /* Overrides the earlier standalone-card styling of the same list. */ .demo-shell .demo-topics-title { color: var(--color-white); font-size: var(--font-h4); margin-bottom: var(--space-4); } .demo-shell .demo-topics-list li { color: #DDE2EE; font-size: var(--font-body-sm); } /* The form half: the shell is the card, so no chrome of its own. */ .demo-shell .demo-form-card { border: 0; border-radius: 0; box-shadow: none; padding: var(--space-10) var(--space-8); } /* Name/phone and city/org pair up so the form stays above the fold. */ .demo-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-4); } @media (max-width: 900px) { .demo-shell { grid-template-columns: minmax(0, 1fr); border-radius: 20px; } .demo-side { padding: var(--space-8) var(--space-5); } .demo-shell .demo-form-card { padding: var(--space-8) var(--space-5); } } @media (max-width: 560px) { .demo-form-row { grid-template-columns: minmax(0, 1fr); gap: 0; } } /* ========================================================================= Success stories — updated content model The slides now carry a description and up to two optional stats instead of a quote and author. Two stats sit side by side; one spans naturally; none collapses the block entirely. ========================================================================= */ .kajabi-story-desc { font-size: var(--font-body-sm); line-height: var(--leading-relaxed); } .kajabi-expert-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6); } /* Two stats share a row on desktop instead of stacking. */ @media (min-width: 768px) { .kajabi-expert-stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .kajabi-expert-stats .kajabi-stat-number { font-size: clamp(1.6rem, 2.2vw, 2.1rem); } } /* ========================================================================= Header — centred menu The menu sat wherever space-between happened to put it. Absolutely centred inside the bar, it stays symmetric regardless of how wide the logo or the action buttons are. Desktop only — the drawer handles mobile. ========================================================================= */ @media (min-width: 992px) { .nav-container { position: relative; } .nav-container .nav-menu { position: absolute; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 55%; } } /* ========================================================================= Footer — three zones brand (start) · one centred resources column · contact (end), replacing the old four-column grid. The NELC block is gone; the social icons moved under the tagline. ========================================================================= */ .footer-zones { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; } .footer-resources { text-align: center; } .footer-resources .footer-links-list { align-items: center; } .footer-contact .footer-links-list a[dir="ltr"] { unicode-bidi: embed; } .footer-zones .footer-social-links { margin-top: var(--space-5); display: flex; gap: var(--space-3); } @media (max-width: 900px) { .footer-zones { grid-template-columns: 1fr; gap: var(--space-8); text-align: center; } .footer-zones .footer-brand-col { align-items: center; text-align: center; } .footer-zones .footer-social-links { justify-content: center; } .footer-contact { text-align: center; } .footer-contact .footer-links-list { align-items: center; } } /* ========================================================================= Light pages — neutral black & white pass (Mintlify-style reference) The pricing and booking pages drop the indigo-tinted surfaces for a plain white ground with near-black type and controls, deliberately unlike the in-app UI. The brand indigo survives only in the header/logo. ========================================================================= */ body.bisaat-light-page { /* The home page's innovations-section palette: deep #03040B with indigo glows. Pixel-anchored so the glow hugs the top of these long pages instead of stretching over their full height. */ background-color: #03040B; background-image: radial-gradient(ellipse 85% 900px at 0% 0px, rgba(67, 56, 202, 0.55) 0%, rgba(37, 99, 235, 0.30) 30%, rgba(15, 23, 42, 0.6) 62%, rgba(3, 4, 11, 0) 100%), radial-gradient(circle 520px at 14% 480px, rgba(99, 102, 241, 0.28) 0%, rgba(67, 56, 202, 0.10) 55%, transparent 80%), linear-gradient(135deg, #0D1226 0%, #060814 45%, #020307 100%); background-repeat: no-repeat; background-size: 100% 1600px, 100% 1200px, 100% 100%; } /* --- Buttons: one neutral CTA language on these pages -------------------- */ .bisaat-light-page .btn-accent { background-color: #0F172A; border-color: #0F172A; color: var(--color-white); box-shadow: none; } .bisaat-light-page .btn-accent:hover { background-color: #1E293B; border-color: #1E293B; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); } .bisaat-light-page .btn-outline-primary { color: #0F172A; border-color: var(--color-neutral-300, #CBD5E1); background: transparent; } .bisaat-light-page .btn-outline-primary:hover { background: var(--color-neutral-100); border-color: #0F172A; color: #0F172A; transform: translateY(-2px); } /* --- Plan cards ----------------------------------------------------------- */ .bisaat-light-page .pricing-card { border-color: var(--color-neutral-200); box-shadow: none; } .bisaat-light-page .pricing-card:hover { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); } .bisaat-light-page .pricing-card-featured { border: 1.5px solid #0F172A; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10); } .bisaat-light-page .pricing-badge-ribbon { background: #0F172A; box-shadow: none; } .bisaat-light-page .pricing-icon { background-color: var(--color-neutral-100) !important; filter: grayscale(1) brightness(0.35); } .bisaat-light-page .badge-blue { background: var(--color-neutral-100); color: var(--color-neutral-700); } .bisaat-light-page .badge-gold-filled { background: var(--color-neutral-100); color: var(--color-neutral-800); } .bisaat-light-page .pricing-save-chip { background: var(--color-neutral-100); color: var(--color-neutral-700); } .bisaat-light-page .pricing-new { background: var(--color-neutral-100); color: var(--color-neutral-700); } .bisaat-light-page .pricing-features li > span::before { color: #0F172A; } .bisaat-light-page .billing-switch input:checked + .billing-slider { background: rgba(255, 255, 255, 0.45); } .bisaat-light-page .pricing-compare-link a { color: #0F172A; background: var(--color-white); border-color: var(--color-white); } .bisaat-light-page .pricing-compare-link a:hover { transform: translateY(-2px); } /* --- Comparison table ----------------------------------------------------- */ .bisaat-light-page .comparison-table { font-size: 0.95rem; } .bisaat-light-page .cmp-label { font-size: 0.95rem; } .bisaat-light-page .cmp-hint { font-size: 0.78rem; } .bisaat-light-page #comparison .text-center .lead { margin-top: var(--space-3); } .bisaat-light-page .comparison-table th.featured-col, .bisaat-light-page .comparison-table td.featured-col { background-color: var(--color-neutral-100); border-inline-color: var(--color-neutral-300, #CBD5E1); } .bisaat-light-page .cmp-yes { color: #0F172A; } .bisaat-light-page .cmp-partial { border-color: var(--color-neutral-400, #94A3B8); background: var(--color-neutral-200); } .bisaat-light-page .cmp-addon { background: var(--color-neutral-100); color: var(--color-neutral-700); } /* --- Dark panels lose the indigo glow ------------------------------------ */ .bisaat-light-page .pricing-band--dark { background: radial-gradient(120% 140% at 82% 15%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, #101318 0%, #08090C 100%); border: 1px solid rgba(255, 255, 255, 0.10); } .bisaat-light-page .demo-side { background: radial-gradient(120% 120% at 85% 8%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(165deg, #12151C 0%, #08090C 100%); } .bisaat-light-page .demo-duration { background: rgba(255, 255, 255, 0.12); } .bisaat-light-page .demo-topics-title { border-bottom-color: rgba(255, 255, 255, 0.35); } .bisaat-light-page .demo-topics-list li::before { background-color: rgba(255, 255, 255, 0.16); } .bisaat-light-page .pricing-band--dark .app-head p { color: #A9B1C3; } /* ========================================================================= Pricing — Bisaat's own design language, not the reference's Three moves away from the generic white-card row: 1. Plan cards adopt the dark-glass surface the site already owns — the products slider, the app panel and the booking shell all speak it — so the pricing page finally looks like Bisaat rather than a template. 2. One lit card: the featured plan is the single white card in the row, raised and glowing. Emphasis by inversion, not by a thicker border. 3. The enterprise tier leaves the price row. "تسعير مخصص" was never comparable against numbers; it now reads as a wide banner under the grid with its features as chips. ========================================================================= */ /* Three priced plans, centred tighter. */ .bisaat-light-page .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1060px; margin-inline: auto; gap: var(--space-5); } @media (max-width: 1100px) and (min-width: 641px) { .bisaat-light-page .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- Dark-glass cards ----------------------------------------------------- */ .bisaat-light-page .pricing-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(6px); box-shadow: none; } .bisaat-light-page .pricing-card h3 { color: var(--color-white); } .bisaat-light-page .pricing-card .pricing-card-desc { color: rgba(255, 255, 255, 0.62); } .bisaat-light-page .pricing-card .pricing-amount { color: var(--color-white); } .bisaat-light-page .pricing-card .pricing-unit { color: rgba(255, 255, 255, 0.55); } .bisaat-light-page .pricing-card .pricing-annual-note { color: rgba(255, 255, 255, 0.45); } .bisaat-light-page .pricing-card .pricing-card-price { border-top-color: rgba(255, 255, 255, 0.10); } .bisaat-light-page .pricing-card .pricing-features { border-top-color: rgba(255, 255, 255, 0.10); } .bisaat-light-page .pricing-card .pricing-features h4 { color: rgba(255, 255, 255, 0.85); } .bisaat-light-page .pricing-card .pricing-features li { color: rgba(255, 255, 255, 0.66); } .bisaat-light-page .pricing-card .pricing-features li > span::before { color: #8B95F8; } .bisaat-light-page .pricing-card .badge-blue { background: rgba(139, 149, 248, 0.14); color: #AEB6FF; } .bisaat-light-page .pricing-card .pricing-save-chip { background: rgba(74, 222, 128, 0.12); color: #86EFAC; } .bisaat-light-page .pricing-card .pricing-new { background: rgba(139, 149, 248, 0.16); color: #AEB6FF; } /* Icons render white on glass. */ .bisaat-light-page .pricing-card .pricing-icon { background-color: rgba(255, 255, 255, 0.08) !important; filter: grayscale(1) invert(1) brightness(1.8); } .bisaat-light-page .pricing-card .btn-outline-primary { color: var(--color-white); border-color: rgba(255, 255, 255, 0.25); } .bisaat-light-page .pricing-card .btn-outline-primary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); color: var(--color-white); } /* --- The one lit card ------------------------------------------------------ */ .bisaat-light-page .pricing-card-featured { background: var(--color-white); border: 1px solid var(--color-white); backdrop-filter: none; box-shadow: 0 0 0 1px rgba(139, 149, 248, 0.35), 0 24px 70px rgba(70, 85, 229, 0.35); } @media (min-width: 641px) { .bisaat-light-page .pricing-card-featured { margin-top: -14px; margin-bottom: 14px; } } .bisaat-light-page .pricing-card-featured h3 { color: var(--color-primary-900); } .bisaat-light-page .pricing-card-featured .pricing-card-desc { color: var(--color-neutral-600); } .bisaat-light-page .pricing-card-featured .pricing-amount { color: var(--color-primary-900); } .bisaat-light-page .pricing-card-featured .pricing-unit { color: var(--color-neutral-600); } .bisaat-light-page .pricing-card-featured .pricing-annual-note { color: var(--color-neutral-500); } .bisaat-light-page .pricing-card-featured .pricing-card-price { border-top-color: var(--color-neutral-200); } .bisaat-light-page .pricing-card-featured .pricing-features { border-top-color: var(--color-neutral-200); } .bisaat-light-page .pricing-card-featured .pricing-features h4 { color: var(--color-primary-900); } .bisaat-light-page .pricing-card-featured .pricing-features li { color: var(--color-neutral-700); } .bisaat-light-page .pricing-card-featured .pricing-features li > span::before { color: var(--color-accent-700); } .bisaat-light-page .pricing-card-featured .pricing-icon { background-color: var(--color-accent-100) !important; filter: none; } .bisaat-light-page .pricing-card-featured .badge-blue { background: var(--color-accent-100); color: var(--color-accent-700); } .bisaat-light-page .pricing-card-featured .pricing-new { background: #FFEDD5; color: #C2410C; } .bisaat-light-page .pricing-card-featured .pricing-save-chip { background: rgba(22, 163, 74, 0.12); color: #15803D; } .bisaat-light-page .pricing-badge-ribbon { background: var(--color-accent-700); box-shadow: 0 6px 18px rgba(70, 85, 229, 0.45); } .bisaat-light-page .pricing-card-featured .btn-accent { background-color: var(--color-accent-700); border-color: var(--color-accent-700); box-shadow: 0 8px 22px rgba(70, 85, 229, 0.35); } .bisaat-light-page .pricing-card-featured .btn-accent:hover { background-color: var(--color-accent-600); border-color: var(--color-accent-600); } /* --- Enterprise banner ----------------------------------------------------- */ .pricing-card--wide { margin-top: var(--space-6); max-width: 1060px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr) auto; gap: var(--space-6); align-items: center; } .pricing-wide-head { display: flex; align-items: center; gap: var(--space-4); } .pricing-wide-head .pricing-icon { margin-bottom: 0; } .pricing-wide-head .badge { margin-top: 6px; } .pricing-wide-body .pricing-card-desc { min-height: 0; margin-top: 0; } .pricing-wide-features { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: 8px; } .pricing-wide-features li { padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; white-space: nowrap; } .pricing-wide-cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .pricing-wide-cta .pricing-amount--text { font-size: 1.25rem; color: var(--color-white); } @media (max-width: 900px) { .pricing-card--wide { grid-template-columns: 1fr; text-align: start; } .pricing-wide-cta { align-items: stretch; } } /* Mobile: the deck carousel still applies — the wide card is outside the grid, so it simply stacks below. */ /* --- Comparison goes dark-glass too ---------------------------------------- */ .bisaat-light-page .comparison-table-wrapper { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.10); backdrop-filter: blur(6px); } .bisaat-light-page .comparison-table { color: rgba(255, 255, 255, 0.85); } .bisaat-light-page .comparison-table th, .bisaat-light-page .comparison-table td { border-bottom-color: rgba(255, 255, 255, 0.08); } .bisaat-light-page .comparison-table thead th { background-color: #0B0E1A; color: var(--color-white); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12); } .bisaat-light-page .comparison-table thead th.featured-col { background-color: #171D33; } .bisaat-light-page .comparison-table th.featured-col, .bisaat-light-page .comparison-table td.featured-col { background-color: rgba(139, 149, 248, 0.08); border-inline-color: rgba(139, 149, 248, 0.25); } .bisaat-light-page .comparison-table .comparison-category { background: rgba(255, 255, 255, 0.05); color: var(--color-white); } .bisaat-light-page .cmp-label { color: rgba(255, 255, 255, 0.88); } .bisaat-light-page .cmp-hint { color: rgba(255, 255, 255, 0.45); } .bisaat-light-page .cmp-yes { color: #8B95F8; } .bisaat-light-page .cmp-no { color: rgba(255, 255, 255, 0.25); } .bisaat-light-page .cmp-addon { background: rgba(139, 149, 248, 0.14); color: #AEB6FF; } .bisaat-light-page .cmp-stack { color: rgba(255, 255, 255, 0.85); } .bisaat-light-page .comparison-table th[scope="row"] { background: transparent; } @media (max-width: 900px) { .bisaat-light-page .comparison-table th[scope="row"] { background-color: #0B0E1A; } } /* Tooltips already dark-on-light; on the dark table go light-on-dark. */ .bisaat-light-page .comparison-table td [data-tip]::after { background: var(--color-white); color: #0F172A; } /* ========================================================================== Contact page — channels beside the message form (reuses the demo shell) ========================================================================== */ .contact-side .contact-channels { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.35rem; } .contact-side .contact-channel { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 0.95rem; width: fit-content; transition: color 0.2s ease; } .contact-side .contact-channel:hover { color: #fff; } .contact-side .contact-social-block { margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.10); width: 100%; } .contact-side .contact-social-block .footer-social-links { margin-top: 0.85rem; } .contact-recaptcha .g-recaptcha { margin-top: 0.25rem; } .contact-recaptcha-error { display: block; margin-top: 0.5rem; } /* ========================================================================== Section rhythm — the flat 128px block padding on every section made dark-on-dark seams read as ~256px of empty black. Where a section continues the same dark ground (no theme change to breathe around), both sides of the seam tighten; everything also scales down on smaller screens. ========================================================================== */ main .section-dark + .section-dark { padding-top: var(--space-10); } main .section-dark:has(+ .section-dark) { padding-bottom: var(--space-10); } @media (max-width: 1023px) { .products-section, .unified-system-section, .innovations-section, .testimonials-section, .faq-section, .prefooter-section { padding-block: var(--space-12); } main .section-dark + .section-dark { padding-top: var(--space-8); } main .section-dark:has(+ .section-dark) { padding-bottom: var(--space-8); } } @media (max-width: 767px) { .products-section, .unified-system-section, .innovations-section, .testimonials-section, .faq-section, .prefooter-section { padding-block: var(--space-10); } main .section-dark + .section-dark { padding-top: var(--space-6); } main .section-dark:has(+ .section-dark) { padding-bottom: var(--space-6); } }