/* ============================================================ iPlus Madrasah — UI & Motion Layer (ipm-ui.css) Design system: .claude/skills/islamic-ui-pro/SKILL.md Animates existing page-builder blocks + custom pages by class. Progressive enhancement: nothing here hides content without JS. ============================================================ */ :root{ --ipm-green:#0f3d2c; --ipm-green2:#15653f; --ipm-gold:#d4a437; --ipm-gold2:#f4d23f; --ipm-yellow:#e9ee8f; --ipm-cream:#f6f1e5; --ipm-line:#e9e0cc; --ipm-ink:#14261d; --ipm-muted:#5a6a60; --ipm-ease:cubic-bezier(.22,.61,.36,1); --ipm-spring:cubic-bezier(.34,1.56,.64,1); } /* ---------- global feel ---------- */ @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } /* ---------- smooth page-to-page navigation ---------- Same-origin MPA view transitions: the browser cross-fades from the old page to the new one instead of flashing white between them (the source of the "blink" when navigating Home/Courses/Classes/Quiz). Progressive enhancement - browsers without support just navigate normally. */ @media (prefers-reduced-motion: no-preference){ @view-transition{navigation:auto} ::view-transition-old(root){animation-duration:.16s} ::view-transition-new(root){animation-duration:.16s} } a,button,.ipm-faq-q,.ipm-bottnav a{-webkit-tap-highlight-color:transparent} /* Double-scrollbar fix: the theme's own frontend_style.css sets #content-area{overflow-x:hidden} with no overflow-y specified — per the CSS overflow spec, having one axis non-visible forces the other to auto-promote to "auto". On any sufficiently tall page (the homepage, once all its blocks were added) #content-area's own box ends up a bit shorter than its content, so it independently scrolls a small residual range in addition to the page's normal scroll — a second, short scrollbar thumb next to the real one ("bada + chota scroll"). Restoring normal flow here removes that nested scroll box (body already clips horizontal overflow sitewide, so #content-area's own clip was redundant anyway). */ #content-area{overflow:visible !important} /* header elevates once scrolled (JS toggles .ipm-scrolled) */ header.ipm-scrolled, .ipm-scrolled header{box-shadow:0 6px 24px -12px rgba(15,61,44,.28)} header{transition:box-shadow .3s var(--ipm-ease)} /* ---------- scroll-reveal system (AOS-style, JS adds classes) ---------- */ .ipm-reveal{opacity:0;transform:translateY(22px); transition:opacity .6s var(--ipm-ease) var(--ipm-d,0ms),transform .6s var(--ipm-ease) var(--ipm-d,0ms)} .ipm-reveal.ipm-in{opacity:1;transform:none} /* ---------- hero entrance + ambient motion ---------- */ @media (prefers-reduced-motion: no-preference){ /* Entrance is transform-only: content paints at full opacity immediately, so the browser records LCP at first paint. An opacity:0 start made Lighthouse wait for the animation before counting LCP (12s+ on mobile). */ .ipm-hero .ipm-hero-kick,.ipm-hero h1,.ipm-hero .ipm-hero-p{animation:ipmUpSolid .7s var(--ipm-ease)} .ipm-hero h1{animation-delay:.06s;animation-fill-mode:backwards} .ipm-hero .ipm-hero-p{animation-delay:.12s;animation-fill-mode:backwards} .ipm-hero .ipm-hero-logo{animation:ipmFloat 7s ease-in-out 1.2s infinite} .ipm-hero .ipm-hero-beta{animation:ipmPulse 2.8s ease-in-out 1.4s infinite} } @keyframes ipmUpSolid{from{transform:translateY(18px)}to{transform:none}} @keyframes ipmUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes ipmScaleIn{from{opacity:0;transform:scale(.93) translateY(14px)}to{opacity:1;transform:none}} @keyframes ipmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes ipmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} /* ---------- gold ornament divider under section headings ---------- */ .ipm-mh .ipm-sec-head h2::after, .ipm-faq .ipm-faq-phead h2::after, .ipm-teachers .ipm-eyebrow + h2::after{ content:"";display:block;width:120px;height:12px;margin:16px auto 0;opacity:.95; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cline x1='0' y1='6' x2='44' y2='6' stroke='%23d4a437' stroke-width='1' opacity='.5'/%3E%3Cline x1='76' y1='6' x2='120' y2='6' stroke='%23d4a437' stroke-width='1' opacity='.5'/%3E%3Cpath d='M60 1l1.6 3.4L65 6l-3.4 1.6L60 11l-1.6-3.4L55 6l3.4-1.6z' fill='%23d4a437'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- mihrab arch on scholar portraits ---------- */ .ipm-home-teachers img, .ipm-tcard img, .ipm-member img, .ipm-teacher img, .ipm-principal-photo img{ border-radius:48% 48% 14px 14px / 32% 32% 14px 14px !important; transition:transform .35s var(--ipm-ease), box-shadow .35s var(--ipm-ease); } /* card lift + gold edge on hover (desktop) */ @media (hover:hover){ .ipm-home-teachers .col-6>div:hover, .ipm-home-teachers [class*="col-"]>div:hover, .ipm-tcard:hover, .ipm-member:hover, .ipm-teacher:hover, .ipm-card:hover, .ipm-mh-fcard:hover, .ipm-mh-lcard:hover, .ipm-mh-step:hover{ border-color:var(--ipm-gold) !important; } .ipm-home-teachers [class*="col-"]>div:hover img, .ipm-tcard:hover img, .ipm-member:hover img{transform:scale(1.03)} } .ipm-tcard,.ipm-member,.ipm-teacher,.ipm-card{transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)} .ipm-home-teachers [class*="col-"]>div{transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)} /* ---------- buttons: sheen sweep + press ---------- */ .ipm-hero-btn,.ipm-enroll,.ipm-submit,.ipm-faq-video a,.ipm-btn,.ipm-wa-btn{position:relative;overflow:hidden} .ipm-hero-btn::before,.ipm-enroll::before,.ipm-submit::before,.ipm-faq-video a::before,.ipm-btn.primary::before{ content:"";position:absolute;top:0;left:-80%;width:50%;height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg);transition:left .65s ease;pointer-events:none; } @media (hover:hover){ .ipm-hero-btn:hover::before,.ipm-enroll:hover::before,.ipm-submit:hover::before, .ipm-faq-video a:hover::before,.ipm-btn.primary:hover::before{left:130%} } /* ---------- form focus (contact page) ---------- */ .ipm-field input:focus,.ipm-field textarea:focus,.ipm-field select:focus{ border-color:var(--ipm-green2) !important; box-shadow:0 0 0 4px rgba(21,101,63,.12) !important;outline:none; transition:border-color .2s,box-shadow .2s; } /* ---------- FAQ micro-polish ---------- */ .ipm-faq .ipm-faq-chev{transition:transform .35s var(--ipm-spring),margin .35s var(--ipm-spring)} .ipm-faq .ipm-faq-qn{transition:background .25s,color .25s} /* ============================================================ MOBILE APP FEEL (<992px) ============================================================ */ @media (max-width:991.98px){ /* native press "squish" on every interactive surface */ .ipm-hero-btn:active,.ipm-enroll:active,.ipm-submit:active,.ipm-btn:active, .ipm-faq-q:active,.ipm-faq-video a:active,.ipm-wa-btn:active, .ipm-mh-fcard:active,.ipm-mh-lcard:active,.ipm-mh-step:active,.ipm-mh-qa:active, .ipm-tcard:active,.ipm-member:active,.ipm-teacher:active,.ipm-card:active, .ipm-home-teachers [class*="col-"]>div:active, .ipm-bottnav a:active{transform:scale(.96);transition:transform .12s ease} /* overflow guard: theme page-builder rows run ~24px wide on phones. IMPORTANT: the theme's own frontend_style.css already sets body{overflow-x:hidden} sitewide (unconditional, every page). Adding overflow-x to html AS WELL (even mobile-only) breaks the normal html/body overflow-propagation exemption and makes body become its OWN independent scroll box nested inside the viewport's scroll box — i.e. two stacked scrollbars ("bada + chota scroll"). So: don't touch html's or body's overflow-x here at all; fix the actual overflowing element. */ [data-type="container-content"]{max-width:100% !important;min-width:0 !important} /* comfy tap targets */ .ipm-faq-q{min-height:52px} } /* ---------- glass bottom tab bar (injected by ipm-app.js) ---------- */ .ipm-bottnav{display:none} @media (max-width:991.98px){ .ipm-bottnav{ position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom)); z-index:99990;display:flex;justify-content:space-around;align-items:stretch; background:rgba(13,42,29,.93); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid rgba(212,164,55,.28);border-radius:22px;padding:8px 6px; box-shadow:0 18px 40px -16px rgba(0,0,0,.55); animation:ipmNavIn .5s var(--ipm-ease) .15s both; } .ipm-bottnav a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; color:#b9cdc1;text-decoration:none;font-family:Inter,system-ui,sans-serif; font-size:10.5px;font-weight:600;letter-spacing:.3px;padding:6px 2px;border-radius:14px; transition:color .2s; } .ipm-bottnav a i{font-size:17px;transition:transform .25s var(--ipm-spring)} .ipm-bottnav a.active{color:var(--ipm-gold2)} .ipm-bottnav a.active i{transform:translateY(-2px)} /* dashboard variant: flat edge-to-edge app tab bar (5 tabs). White surface + green active - reads like a native bottom bar, clearly different from the public floating pill. */ .ipm-bottnav-dash{ left:0;right:0;bottom:0; border-radius:0; border:0;border-top:1px solid #e8e3d6; background:#fff; -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:0 -8px 24px -16px rgba(15,61,44,.35); padding:7px 2px calc(7px + env(safe-area-inset-bottom)); animation:none; } .ipm-bottnav-dash a{ color:#8a927f; font-size:10px;letter-spacing:.1px; gap:4px;padding:4px 1px;border-radius:10px; } .ipm-bottnav-dash a i{font-size:17px} .ipm-bottnav-dash a span{white-space:nowrap} .ipm-bottnav-dash a.active{color:#0f3d2c;font-weight:700} .ipm-bottnav-dash a.active i{color:#15653f;transform:translateY(-1px)} body.ipm-has-bottnav{padding-bottom:calc(86px + env(safe-area-inset-bottom))} body.ipm-dash-nav{padding-bottom:calc(68px + env(safe-area-inset-bottom))} } @keyframes ipmNavIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} /* ---------- accessibility: motion off ---------- */ @media (prefers-reduced-motion: reduce){ .ipm-reveal,.ipm-hero .ipm-hero-kick,.ipm-hero h1,.ipm-hero .ipm-hero-p,.ipm-hero .ipm-hero-r{ opacity:1 !important;transform:none !important;animation:none !important; } .ipm-hero .ipm-hero-logo,.ipm-hero .ipm-hero-beta,.ipm-bottnav{animation:none !important} html{scroll-behavior:auto} } /* ============================================================ THEME RESKIN — premium Islamic identity (site-wide) Transforms the stock LMS look: dark-green glass header, warm paper canvas, gold accents, premium cards & footer. ============================================================ */ /* ---------- canvas & typography ---------- */ body{background:#faf7ef} h1,h2{font-family:"Playfair Display",Georgia,serif !important;letter-spacing:-.3px} ::selection{background:var(--ipm-gold);color:#fff} /* custom scrollbar: desktop/mouse only — on touch devices this rendered as a second, always-on green bar next to the OS's own overlay scrollbar */ @media (min-width:992px) and (hover:hover){ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:#efe9da} ::-webkit-scrollbar-thumb{background:#15653f;border-radius:8px;border:2px solid #efe9da} ::-webkit-scrollbar-thumb:hover{background:#0f3d2c} } /* ---------- HEADER: deep-green glass ---------- */ #sticky-header.header_area{ background:linear-gradient(180deg,#0d3524 0%,#0f3d2c 100%) !important; border-bottom:1px solid rgba(212,164,55,.25); box-shadow:0 12px 34px -22px rgba(0,0,0,.6); } .header_area .logo_img img{filter:brightness(0) invert(1)} .header_area .main_menu .menu_dropdown>ul>li>a{color:#e7efe9 !important;font-weight:600} .header_area .main_menu .menu_dropdown>ul>li>a:hover{color:var(--ipm-gold2) !important} .header_area .main_menu .menu_dropdown>ul>li.active_menu_item>a{color:var(--ipm-gold2) !important} /* dropdown panels stay light with dark links */ .header_area .menu_dropdown ul ul a, .header_area .single_menu_dropdown a, .header_area .single_menu_dropdown h4{color:#14261d !important} /* search pill */ .header_area .theme_search_field{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:15px;overflow:hidden} .header_area .theme_search_field .form-control{background:transparent !important;color:#fff !important;border:none !important} .header_area .theme_search_field .form-control::placeholder{color:#9fb7aa} .header_area .theme_search_field .btn{background:transparent} .header_area .theme_search_field svg path{fill:#cfdcd4} /* icons / toggles on dark bar */ .header_area .translator-switch,.header_area .translator-switch *{color:#e7efe9 !important} .header_area #mobileSearchToggle,.header_area #mobileSearchToggle *{color:#e7efe9} .header_area #mobileSearchToggle svg path{fill:#e7efe9} .header_area .mobile_menu i,.header_area .mobile_menu button{color:#f1f6f2} .header_area .mobile_menu span{background:#f1f6f2} /* gold Sign In pill (after global button rules, still wins by specificity) */ .header_area .header__right .theme_btn{ background:linear-gradient(135deg,var(--ipm-gold2),var(--ipm-gold)) !important; color:#20240a !important;border:none !important;border-radius:30px !important;font-weight:700; } /* ---------- BUTTONS: pill everywhere ---------- */ .theme_btn{border-radius:30px !important;font-weight:600;transition:transform .2s var(--ipm-ease),box-shadow .2s,background .25s} .theme_btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(15,61,44,.6)} .theme_btn_outline{border-radius:30px !important} /* ---------- COURSE / QUIZ / BLOG CARDS ---------- */ .course-item{border-radius:20px !important;border:1px solid #eadfc6;background:#fff;overflow:hidden; box-shadow:0 20px 44px -34px rgba(15,61,44,.45);transition:transform .3s var(--ipm-ease),box-shadow .3s,border-color .3s} .course-item:hover{transform:translateY(-6px);border-color:var(--ipm-gold);box-shadow:0 26px 54px -30px rgba(15,61,44,.55)} .course-item-img{border-radius:14px;overflow:hidden} .course-item-title{font-weight:700} .course-item-title a{color:#14261d} .course-item-title a:hover{color:#15653f} .course-tag{background:rgba(212,164,55,.16) !important;color:#8a6a10 !important;border-radius:20px;font-weight:600} .blog-single{border-radius:20px !important;border:1px solid #eadfc6;overflow:hidden; box-shadow:0 20px 44px -34px rgba(15,61,44,.4);transition:transform .3s var(--ipm-ease),border-color .3s} .blog-single:hover{transform:translateY(-5px);border-color:var(--ipm-gold)} /* ---------- APK / mobile-app band: deep green ---------- */ .apk{background:radial-gradient(120% 130% at 18% 20%,#164a33 0%,#0b2c1d 100%) !important; border-radius:26px;overflow:hidden} .apk .apk-content h1,.apk .apk-content h2,.apk .apk-content h3{color:#fff !important} .apk .apk-content h1 span,.apk .apk-content h2 span,.apk .apk-content h3 span{color:var(--ipm-gold2) !important} .apk .apk-content p{color:#cfe0d6 !important} /* ---------- COOKIE BANNER: match the theme ---------- */ .cookie_type{background:#fffdf6 !important;border:1px solid #eadfc6 !important;border-radius:20px !important; box-shadow:0 24px 60px -30px rgba(15,61,44,.4) !important} .cookie_type p,.cookie_type div{color:#3d4c43} .cookie_btn{background:#15653f !important;color:#fff !important;border-radius:26px !important;border:none !important;font-weight:600} .cookie_btn.cookeSettingModalBtn{background:transparent !important;color:#15653f !important;border:1.5px solid #15653f !important} /* ---------- FOOTER: deep green + gold ---------- */ .footer_top_area{background:#0b2c1d !important;border-top:1px solid rgba(212,164,55,.28);position:relative} .footer_top_area::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.05'%3E%3Cpath d='M36 0l36 36-36 36L0 36z'/%3E%3Ccircle cx='36' cy='36' r='17'/%3E%3C/g%3E%3C/svg%3E")} .footer_top_area>*{position:relative} .footer_title{color:var(--ipm-gold2) !important;font-family:"Playfair Display",Georgia,serif !important} .copyright_area{background:#0b2c1d !important;border-top:1px solid rgba(212,164,55,.28)} .footer_links a:hover,.footer-legal-links a:hover{color:var(--ipm-gold2) !important} /* ---------- forms & pagination ---------- */ input.form-control:focus,textarea.form-control:focus,select.form-control:focus{ border-color:#15653f !important;box-shadow:0 0 0 4px rgba(21,101,63,.1) !important} .pagination .page-link{color:#15653f;border-radius:10px;margin:0 3px} .pagination .page-item.active .page-link{background:#15653f !important;border-color:#15653f !important;color:#fff} /* ---------- mobile header comfort ---------- */ @media (max-width:991.98px){ #sticky-header.header_area{border-radius:0 0 18px 18px} } /* ---------- reskin fixes: specificity + real cookie wrapper ---------- */ #sticky-header.header_area .main_menu .menu_dropdown>ul>li>a{color:#e7efe9 !important} #sticky-header.header_area .main_menu .menu_dropdown>ul>li>a:hover, #sticky-header.header_area .main_menu .menu_dropdown>ul>li.active_menu_item>a{color:var(--ipm-gold2) !important} #sticky-header.header_area .main_menu .menu_dropdown ul ul a{color:#14261d !important} #sticky-header.header_area .main_menu .menu_dropdown ul ul a:hover{color:#15653f !important} .theme_cookies{background:#fffdf6 !important;border:1px solid #eadfc6 !important;border-radius:20px !important; box-shadow:0 24px 60px -30px rgba(15,61,44,.45) !important} .theme_cookies p,.theme_cookies .theme_cookies_info p{color:#3d4c43 !important} /* ---------- reskin fixes r2: the visible top menu is .main_menu ul (not .menu_dropdown) ---------- */ #sticky-header.header_area .main_menu ul li a{color:#e7efe9 !important} #sticky-header.header_area .main_menu ul li:hover>a, #sticky-header.header_area .main_menu ul li a.active, #sticky-header.header_area .main_menu ul li.active_menu_item>a{color:var(--ipm-gold2) !important} /* dropdown/mega panels keep dark text on white (placed after broad rule so they win the tie) */ #sticky-header.header_area .main_menu ul li .submenu li a{color:#14261d !important} #sticky-header.header_area .main_menu ul li .submenu li a:hover, #sticky-header.header_area .main_menu ul li .submenu li a.active{color:#15653f !important} #sticky-header.header_area .menu_dropdown ul li a{color:#202e3b !important} #sticky-header.header_area .menu_dropdown ul li a:hover{color:#15653f !important} #sticky-header.header_area .menu_dropdown_iner .single_menu_dropdown h4{color:#0f3d2c !important} /* categories toggle + misc header text */ .header_area .categories_menu,.header_area .categories_menu *{color:#e7efe9 !important} /* ---------- reskin fixes r3: slicknav hamburger on dark header ---------- */ .header_area .mobile_menu span{background:transparent} .header_area .slicknav_menu,.header_area .slicknav_btn{background:transparent !important} .header_area .mobile_menu .slicknav_icon-bar{background:#f1f6f2 !important} /* ============================================================ HOMEPAGE POLISH v2 — professional pass Fixes unstyled .ipm-mh-ic icons + elevates every block card. ============================================================ */ /* --- premium icon chips (gold-cream squircle, deep-green glyph) --- */ .ipm-mh .ipm-mh-ic{ width:58px;height:58px;border-radius:17px;display:inline-flex;align-items:center;justify-content:center; font-size:22px;color:#15653f; background:linear-gradient(135deg,#faf5e6,#f0e4c8); border:1px solid #eadfc6; box-shadow:0 10px 22px -14px rgba(15,61,44,.35),inset 0 1px 0 rgba(255,255,255,.85); } .ipm-mh .ipm-mh-stage .ipm-mh-ic{width:68px;height:68px;font-size:26px;border-radius:20px} .ipm-mh .ipm-mh-lcard .ipm-mh-ic{width:54px;height:54px;font-size:20px} /* --- feature & learn cards: gold top-accent sweep on hover --- */ .ipm-mh .ipm-mh-fcard,.ipm-mh .ipm-mh-lcard{position:relative;overflow:hidden;border-radius:18px !important} .ipm-mh .ipm-mh-fcard::after,.ipm-mh .ipm-mh-lcard::after{ content:"";position:absolute;left:0;top:0;right:0;height:3px; background:linear-gradient(90deg,var(--ipm-gold),var(--ipm-gold2),var(--ipm-gold)); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ipm-ease); } .ipm-mh .ipm-mh-fcard:hover::after,.ipm-mh .ipm-mh-lcard:hover::after{transform:scaleX(1)} .ipm-mh .ipm-mh-fcard{box-shadow:0 16px 34px -26px rgba(15,61,44,.4) !important;padding:26px 24px !important} .ipm-mh .ipm-mh-fcard h4{font-size:18.5px;margin-top:18px !important} .ipm-mh .ipm-mh-fcard p{font-size:14.5px !important;line-height:1.65} .ipm-mh .ipm-mh-lcard{padding:28px 20px !important} /* --- curriculum stage cards: green crest line + depth --- */ .ipm-mh .ipm-mh-stage{border-radius:20px !important;padding:36px 24px 30px !important; box-shadow:0 22px 44px -30px rgba(15,61,44,.5) !important;position:relative;overflow:hidden} .ipm-mh .ipm-mh-stage::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,#0f3d2c,#15653f,#0f3d2c)} .ipm-mh .ipm-mh-stage h4{font-size:24px;margin-top:18px !important} /* --- ornament under the dark "why" band heading (matches other sections) --- */ .ipm-mh .ipm-why h2::after{ content:"";display:block;width:120px;height:12px;margin:16px auto 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cline x1='0' y1='6' x2='44' y2='6' stroke='%23d4a437' stroke-width='1' opacity='.6'/%3E%3Cline x1='76' y1='6' x2='120' y2='6' stroke='%23d4a437' stroke-width='1' opacity='.6'/%3E%3Cpath d='M60 1l1.6 3.4L65 6l-3.4 1.6L60 11l-1.6-3.4L55 6l3.4-1.6z' fill='%23d4a437'/%3E%3C/svg%3E") center/contain no-repeat; } /* --- big benefit cards (Recognition / Fast Track) --- */ .ipm-mh .ipm-bigcard{border-radius:24px !important;box-shadow:0 28px 56px -36px rgba(0,0,0,.55)} /* --- "kya yeh aap ke liye" ticks in gold coins --- */ .ipm-mh .ipm-you-list li i{ width:27px;height:27px;flex:0 0 27px;background:rgba(212,164,55,.2);border-radius:50%; display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-top:0 !important; } /* --- QA cards: gradient question coin --- */ .ipm-mh .ipm-mh-q i{background:linear-gradient(135deg,#15653f,#0f3d2c) !important} /* --- step numbers: gold glow --- */ .ipm-mh .ipm-mh-num{box-shadow:0 12px 24px -10px rgba(212,164,55,.75)} .ipm-mh .ipm-mh-step{border-radius:18px !important} /* --- teachers grid: gold halo around arch portraits, softer cards --- */ .ipm-home-teachers img{box-shadow:0 0 0 5px rgba(212,164,55,.16),0 16px 30px -20px rgba(15,61,44,.5) !important} .ipm-home-teachers [class*="col-"]>div{border-radius:18px !important; box-shadow:0 18px 38px -30px rgba(15,61,44,.45) !important;padding:16px 14px 18px !important} .ipm-home-teachers p{letter-spacing:.2px} /* --- FAQ: softer container radius --- */ .ipm-faq .ipm-faq-item{border-radius:16px !important} .ipm-faq .ipm-faq-lang{box-shadow:0 12px 26px -20px rgba(15,61,44,.4)} /* --- kick pills: tighter craft --- */ .ipm-mh .ipm-kick,.ipm-faq .ipm-kick{letter-spacing:2.5px;font-size:11.5px} /* --- trust band buttons breathing room --- */ .ipm-mh .ipm-btns{gap:18px} /* --- FA5 fallback: fa-house-user is FA6-only, map to fa-home glyph --- */ .fa-house-user::before{content:"\f015"} /* ============================================================ CRAFT PASS v3 — iPlus logo, scalloped dividers, icon pop ============================================================ */ /* --- header: natural-colour iPlus Madrasah logo (kills earlier white filter) --- */ .header_area .logo_img img{filter:none !important;height:54px;width:auto !important;padding:2px !important} @media (max-width:575.98px){ .header_area .logo_img img{height:46px} } /* --- footer logo: crisp on deep green --- */ .footer_logo img{width:96px !important;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))} /* --- scalloped arch dividers where dark bands meet cream (Islamic craft) --- */ .ipm-mh .ipm-why,.ipm-mh .ipm-you,.ipm-mh .ipm-trust{position:relative} .ipm-mh .ipm-why{border-top:1px solid rgba(212,164,55,.18)} .ipm-mh .ipm-why::after,.ipm-mh .ipm-you::after,.ipm-mh .ipm-trust::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:16px;pointer-events:none; background-image:radial-gradient(circle at 50% 100%,#faf7ef 9px,transparent 10px); background-size:32px 16px;background-repeat:repeat-x;background-position:center bottom; } .ipm-mh .ipm-you::before,.ipm-mh .ipm-trust::before{ content:"";position:absolute;left:0;right:0;top:-1px;height:16px;pointer-events:none; background-image:radial-gradient(circle at 50% 0,#faf7ef 9px,transparent 10px); background-size:32px 16px;background-repeat:repeat-x;background-position:center top; } /* --- icon chips pop in with a spring after their card reveals --- */ @media (prefers-reduced-motion: no-preference){ .ipm-reveal .ipm-mh-ic{transform:scale(.55);opacity:0; transition:transform .55s var(--ipm-spring) calc(var(--ipm-d,0ms) + 160ms),opacity .3s ease calc(var(--ipm-d,0ms) + 140ms)} .ipm-reveal.ipm-in .ipm-mh-ic{transform:scale(1);opacity:1} } /* --- theme section headings (Hamare Asaatizah, Articles & News...) --- */ .section-title h2{letter-spacing:-.3px} .section-title p{color:#5a6a60} /* --- copyright line refinement --- */ .copyright_text p{letter-spacing:.2px} /* ============================================================ CRAFT PASS v4 — Marcellus display type, textures, refinements ============================================================ */ /* --- display type: Marcellus (carved, monumental, Islamic-classic) --- */ h1,h2{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.4px} .ipm-mh h2,.ipm-mh h3,.ipm-faq h2,.ipm-mh .ipm-mh-stage h4{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.4px} .ipm-mh .ipm-sec-head h2{font-size:clamp(30px,4.4vw,46px) !important} .ipm-mh .ipm-why h2{font-size:clamp(30px,4.6vw,48px) !important} .ipm-faq .ipm-faq-phead h2{font-size:clamp(28px,4vw,42px) !important} .section-title h2{font-size:clamp(28px,3.6vw,40px)} /* --- hide header search (temporary, re-enable by deleting this rule) --- */ .header_area .category_search,.header_area .mobile-search, .header_area .mobile-search-box-toggler,#mobileSearchToggle{display:none !important} /* --- textures: fine gold star lattice breathing through every section --- */ body{background:#faf7ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23b98a17' stroke-opacity='0.05'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E")} .ipm-mh .ipm-feat,.ipm-mh .ipm-steps{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23b98a17' stroke-opacity='0.07'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E") #f5efdf !important} .ipm-faq{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23b98a17' stroke-opacity='0.07'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E") #f6f1e5 !important} .ipm-mh .ipm-you{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.10'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(135deg,#0e3626,#124a33) !important} .ipm-mh .ipm-trust{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.10'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(circle at 85% 15%,#17472f,#0b2c1d) !important} .apk{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.10'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(120% 130% at 18% 20%,#164a33 0%,#0b2c1d 100%) !important} /* --- remove the thick gold left-borders on Q&A cards (cleaner) --- */ .ipm-mh .ipm-mh-qa{border-left:1px solid #e9e0cc !important;border-radius:14px !important} .lg-section{border-left:none !important} /* --- APK section: launching soon (hide store badges until launch) --- */ .apk .apk-content > .d-flex{display:none !important} /* --- FAQ launch-video button: proper play chip --- */ .ipm-faq .ipm-faq-video a{background:linear-gradient(135deg,#15653f,#0f3d2c) !important; padding:15px 34px !important;font-size:15.5px !important;border-radius:40px !important; box-shadow:0 16px 34px -16px rgba(15,61,44,.65)} .ipm-faq .ipm-faq-play{font-size:0 !important;width:34px !important;height:34px !important;flex:0 0 34px; background:#fff !important;color:#15653f !important;border-radius:50% !important; display:inline-flex !important;align-items:center !important;justify-content:center !important} .ipm-faq .ipm-faq-play::before{content:"\f04b";font-family:"Font Awesome 6 Free","Font Awesome 5 Free"; font-weight:900;font-size:12px;color:#15653f;line-height:1;margin-left:2px} /* --- newsletter band: stop the reward card overlapping it --- */ .reward{margin-bottom:36px !important} .footer_top_area .footer__cta{margin-top:0 !important;padding:48px 0 !important;position:relative;z-index:2} .footer__cta .thumb{display:none !important} .footer__cta .info h1,.footer__cta .info h2,.footer__cta .info h3,.footer__cta .info h4{color:#fff !important} .footer__cta .subcribe-form .form-control{border-radius:14px 0 0 14px !important} .footer__cta .subcribe-form button,.footer__cta .subcribe-form .theme_btn{border-radius:0 14px 14px 0 !important} /* ============================================================ CURRICULUM JOURNEY v5 — 8-saala nisab (marhala ba marhala) Premium connected-milestone timeline. Overrides earlier stage rules. ============================================================ */ .ipm-mh .ipm-stages{display:flex !important;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:0 !important;margin-top:30px !important} .ipm-mh .ipm-mh-stage{position:relative;flex:1 1 0;max-width:310px;min-width:0; background:linear-gradient(180deg,#ffffff,#fcfaf2) !important; border:1px solid #ece0c6 !important;border-radius:22px !important; padding:28px 24px 26px !important;text-align:center;overflow:visible !important; box-shadow:0 26px 52px -34px rgba(15,61,44,.55) !important; transition:transform .35s var(--ipm-ease),box-shadow .35s var(--ipm-ease),border-color .35s var(--ipm-ease)} .ipm-mh .ipm-mh-stage::before{display:none !important} @media (hover:hover){ .ipm-mh .ipm-mh-stage:hover{transform:translateY(-8px);border-color:var(--ipm-gold) !important;box-shadow:0 36px 62px -30px rgba(15,61,44,.55) !important} } /* marhala badge */ .ipm-mh .ipm-stage-badge{display:inline-flex;align-items:center;gap:6px; font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#b98a17; background:rgba(212,164,55,.12);border:1px solid rgba(212,164,55,.32); padding:5px 15px;border-radius:30px;margin-bottom:18px} /* mihrab-arch icon medallion (matches hero) */ .ipm-mh .ipm-mh-stage .ipm-mh-ic{width:76px !important;height:82px !important;font-size:29px !important; border-radius:50% 50% 16px 16px / 46% 46% 16px 16px !important; background:linear-gradient(162deg,#fbf4e0,#efdcb4) !important;color:#0f3d2c !important; border:1px solid #e7d3a4 !important;position:relative; box-shadow:0 16px 28px -14px rgba(15,61,44,.5),inset 0 1px 0 rgba(255,255,255,.9) !important} .ipm-mh .ipm-mh-stage .ipm-mh-ic::after{content:"";position:absolute;inset:7px;border-radius:44% 44% 12px 12px / 40% 40% 12px 12px;border:1px dashed rgba(15,61,44,.18)} .ipm-mh .ipm-mh-stage h4{font-size:23px !important;margin:18px 0 2px !important;color:#0f3d2c} .ipm-mh .ipm-stage-cap{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ipm-gold);margin-bottom:12px} .ipm-mh .ipm-stage-desc{font-size:13.5px;line-height:1.6;color:#5f6f65;margin:0 auto 20px;max-width:230px} /* duration ribbon */ .ipm-mh .ipm-mh-stage .ipm-mh-dur{display:inline-flex !important;align-items:center;gap:7px; background:linear-gradient(135deg,#15653f,#0f3d2c) !important;color:#fff !important; font-weight:600;font-size:13.5px;padding:9px 22px !important;border-radius:30px !important; box-shadow:0 12px 22px -10px rgba(15,61,44,.6)} .ipm-mh .ipm-mh-stage .ipm-mh-dur i{color:var(--ipm-gold2);font-size:12px} /* connectors between stages */ .ipm-mh .ipm-stage-link{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 10px;align-self:center} .ipm-mh .ipm-stage-line{width:30px;height:2px;background:repeating-linear-gradient(90deg,var(--ipm-gold) 0 5px,transparent 5px 11px);opacity:.7} .ipm-mh .ipm-stage-arrow{width:30px;height:30px;flex:0 0 30px;border-radius:50%;margin-left:-1px; background:#fff;border:1.5px solid rgba(212,164,55,.55);color:var(--ipm-green2); display:flex;align-items:center;justify-content:center;font-size:11px; box-shadow:0 8px 16px -8px rgba(15,61,44,.4)} /* final (summit) card */ .ipm-mh .ipm-mh-stage.ipm-stage-last{border-color:rgba(212,164,55,.6) !important; background:linear-gradient(180deg,#fffdf5,#faf2dc) !important; box-shadow:0 30px 56px -32px rgba(184,135,31,.55) !important} .ipm-mh .ipm-mh-stage.ipm-stage-last .ipm-stage-badge{background:linear-gradient(135deg,var(--ipm-gold2),var(--ipm-gold));color:#241a02;border-color:transparent} /* summary stat banner */ .ipm-mh .ipm-stage-sum{display:flex;align-items:center;width:fit-content;margin:40px auto 0; background:linear-gradient(180deg,#ffffff,#fbf7ec);border:1px solid #ece0c6;border-radius:20px; padding:16px 8px;box-shadow:0 24px 46px -32px rgba(15,61,44,.5)} .ipm-mh .ipm-stage-stat{padding:2px 30px;text-align:center;line-height:1.1} .ipm-mh .ipm-stage-stat b{display:block;font-family:'Marcellus',Georgia,serif;font-size:28px;color:#0f3d2c;letter-spacing:.3px} .ipm-mh .ipm-stage-stat span{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:#93a399;font-weight:600} .ipm-mh .ipm-stage-sep{width:1px;height:38px;background:linear-gradient(180deg,transparent,#e2d6bb,transparent)} @media(max-width:991px){ .ipm-mh .ipm-stages{flex-direction:column !important;align-items:center;gap:0 !important;margin-top:22px !important} .ipm-mh .ipm-mh-stage{width:100%;max-width:360px;flex:0 0 auto} .ipm-mh .ipm-stage-link{flex-direction:column;padding:8px 0} .ipm-mh .ipm-stage-line{width:2px;height:16px;background:repeating-linear-gradient(180deg,var(--ipm-gold) 0 5px,transparent 5px 11px)} .ipm-mh .ipm-stage-arrow{transform:rotate(90deg);margin:-1px 0 0} } @media(max-width:479px){ .ipm-mh .ipm-stage-sum{width:100%;max-width:340px;justify-content:space-around} .ipm-mh .ipm-stage-stat{padding:2px 8px} .ipm-mh .ipm-stage-stat b{font-size:24px} } /* ============================================================ CRAFT PASS v6 — navbar logo align, hero ultra-premium extras, unified mihrab-arch icon medallions, centered cards, app-style horizontal snap-scroll on mobile. ============================================================ */ /* ---------- NAVBAR: logo perfectly centred, no dead space ---------- */ .header_area .header__wrapper{align-items:center !important} .header_area .header__left{align-items:center !important} .header_area .logo_img{display:flex !important;align-items:center !important;line-height:0} .header_area .logo_img img{display:block !important;height:58px !important;width:auto !important;padding:0 !important;margin:0 !important} @media (max-width:575.98px){ .header_area .logo_img img{height:46px !important} } /* (corner ornaments removed per feedback) */ /* ---------- HERO: arcade arch divider along the bottom edge (home hero ONLY — scoping to a bare .ipm-hero leaked onto teachers/shura/contact's own hero bands and rendered as a stray horizontal line there) ---------- */ #ipm-hero-root.ipm-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;pointer-events:none;opacity:.35; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='14'%3E%3Cpath d='M2 14Q18 -6 34 14' fill='none' stroke='%23d4a437' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x bottom} /* ---------- HERO: living gold shimmer on the accent line ---------- */ @media (prefers-reduced-motion: no-preference){ .ipm-hero h1 .g{background-size:220% 100% !important;animation:ipmGoldShine 7s ease-in-out infinite} } @keyframes ipmGoldShine{0%,100%{background-position:0% 0}50%{background-position:100% 0}} /* soft outer halo ring around the logo orbit */ .ipm-hero .ipm-hero-ring{box-shadow:0 0 0 26px rgba(212,164,55,.05)} /* ---------- UNIFIED mihrab-arch icon medallions (features + learn) ---------- */ .ipm-mh .ipm-mh-ic{width:64px !important;height:70px !important;font-size:25px !important; border-radius:50% 50% 15px 15px / 45% 45% 13px 13px !important; background:linear-gradient(162deg,#fbf4e0,#efdcb4) !important;color:#0f3d2c !important; border:1px solid #e7d3a4 !important;position:relative; box-shadow:0 14px 26px -14px rgba(15,61,44,.45),inset 0 1px 0 rgba(255,255,255,.9) !important} .ipm-mh .ipm-mh-ic::after{content:"";position:absolute;inset:6px; border-radius:44% 44% 11px 11px / 40% 40% 10px 10px;border:1px dashed rgba(15,61,44,.16)} /* stages keep their larger medallion */ .ipm-mh .ipm-mh-stage .ipm-mh-ic{width:76px !important;height:82px !important;font-size:29px !important} /* marhala badge centred above its medallion */ .ipm-mh .ipm-stage-badge{display:table;margin:0 auto 16px} /* ---------- FEATURE CARDS: centred, taller, calmer ---------- */ .ipm-mh .ipm-mh-fcard{text-align:center;padding:30px 22px 26px !important;border-radius:20px !important; transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)} .ipm-mh .ipm-mh-fcard h4{font-size:19px;margin-top:16px !important} .ipm-mh .ipm-mh-fcard p{max-width:270px;margin-left:auto !important;margin-right:auto !important} .ipm-mh .ipm-mh-lcard{border-radius:20px !important;transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)} @media (hover:hover){ .ipm-mh .ipm-mh-fcard:hover,.ipm-mh .ipm-mh-lcard:hover{transform:translateY(-6px);box-shadow:0 26px 48px -28px rgba(15,61,44,.5) !important} } /* ---------- STEP CARDS: gold coin numbers + lift ---------- */ .ipm-mh .ipm-mh-step{border-radius:20px !important;border:1px solid #ece0c6 !important;padding:32px 22px 28px !important; transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)} .ipm-mh .ipm-mh-num{width:52px !important;height:52px !important;font-size:20px !important; background:linear-gradient(135deg,var(--ipm-gold2),#c3921f) !important;color:#241a02 !important; box-shadow:0 12px 24px -10px rgba(184,135,31,.65),inset 0 1px 0 rgba(255,255,255,.6) !important; outline:4px solid rgba(212,164,55,.16);outline-offset:4px} .ipm-mh .ipm-mh-step h4{font-size:18.5px;margin-top:20px !important} @media (hover:hover){ .ipm-mh .ipm-mh-step:hover{transform:translateY(-6px);border-color:var(--ipm-gold) !important;box-shadow:0 26px 48px -28px rgba(15,61,44,.5) !important} } /* ---------- MOBILE: plain stacked cards (removed) ---------- A horizontal scroll-snap-type:x deck was here for an "app carousel" feel, but nested horizontal snap containers intercept vertical swipes on real touch devices — the page-scroll would stall on the first swipe and only continue on a second try. Reverted to normal stacking; smooth vertical scroll takes priority over the carousel look. */ @media (max-width:767.98px){ .ipm-mh .ipm-grid,.ipm-mh .ipm-learn-grid,.ipm-mh .ipm-steps-grid{grid-template-columns:1fr !important} } /* ============================================================ CRAFT PASS v7 — you-grid cards, chat-style Q&A, animated steps, matched section-bar fonts, premium newsletter. ============================================================ */ /* hero: no scroll cue (element removed; guard for cached markup) */ .ipm-hero .ipm-hero-scroll{display:none !important} /* ---------- section title bars (Top Online Courses / Articles & News) ---------- */ .section-subtitle h3{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.5px;font-size:26px !important} /* ---------- "Kya Yeh Aap Ke Liye Hai?" — scenario cards grid ---------- */ .ipm-mh .ipm-you-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px} .ipm-mh .ipm-you-card{position:relative;background:rgba(255,255,255,.055);border:1px solid rgba(212,164,55,.28); border-radius:18px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px;text-align:left; transition:transform .3s var(--ipm-ease),border-color .3s,background .3s} @media (hover:hover){ .ipm-mh .ipm-you-card:hover{transform:translateY(-5px);border-color:rgba(244,210,63,.7);background:rgba(255,255,255,.09)} } .ipm-mh .ipm-you-ic{width:46px;height:46px;flex:0 0 auto;border-radius:13px;display:inline-flex;align-items:center;justify-content:center; font-size:18px;background:rgba(212,164,55,.16);color:var(--ipm-gold2);border:1px solid rgba(212,164,55,.32)} .ipm-mh .ipm-you-card p{margin:0;color:#dfe9e1;font-size:15px;line-height:1.6;flex:1} .ipm-mh .ipm-you-tick{position:absolute;top:20px;right:20px;color:rgba(244,210,63,.75);font-size:16px} /* gold conclusion card */ .ipm-mh .ipm-you-final{background:linear-gradient(135deg,var(--ipm-gold2),#c99a24) !important;border-color:transparent !important} .ipm-mh .ipm-you-final p{color:#241a02;font-weight:700;font-size:16.5px} .ipm-mh .ipm-you-ic.f{background:rgba(0,0,0,.15);color:#241a02;border-color:rgba(0,0,0,.12)} .ipm-mh .ipm-you-go{display:inline-flex;align-items:center;gap:8px;background:#0f3d2c;color:#fff;font-weight:700;font-size:14px; padding:11px 22px;border-radius:26px;text-decoration:none;width:fit-content;transition:transform .2s,box-shadow .2s} .ipm-mh .ipm-you-go:hover{transform:translateY(-2px);color:#fff;box-shadow:0 12px 24px -12px rgba(0,0,0,.6)} @media (max-width:991.98px){ .ipm-mh .ipm-you-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:639.98px){ .ipm-mh .ipm-you-grid{grid-template-columns:1fr} } /* ---------- "Agar Aap Soch Rahe Hain..." — chat-style exchanges ---------- */ .ipm-mh .ipm-mh-qa{background:#fff !important;border:1px solid #ece0c6 !important;border-radius:18px !important; padding:18px !important;display:flex;flex-direction:column;gap:12px} .ipm-mh .ipm-qa-row{display:flex;align-items:flex-end;gap:10px} .ipm-mh .ipm-qa-row p{margin:0 !important;font-size:14.5px;line-height:1.55;padding:12px 16px;max-width:82%} .ipm-mh .ipm-qa-row.u{justify-content:flex-end} .ipm-mh .ipm-qa-row.u p{background:#f6f1e5;color:#4a4433;border-radius:16px 16px 4px 16px;font-weight:600;font-style:italic} .ipm-mh .ipm-qa-row.m p{background:linear-gradient(135deg,#15653f,#0f3d2c);color:#eef5ef;border-radius:16px 16px 16px 4px} .ipm-mh .ipm-qa-av{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:13px;background:#efe7d4;color:#7c6a3f} .ipm-mh .ipm-qa-av.g{background:linear-gradient(135deg,var(--ipm-gold2),#c3921f);color:#241a02} /* ---------- 4 Steps — living stepper ---------- */ .ipm-mh .ipm-steps-grid{position:relative} .ipm-mh .ipm-mh-step{position:relative;overflow:visible !important} /* flowing dotted connector between cards */ .ipm-mh .ipm-mh-step:not(:last-child)::after{content:"";position:absolute;top:56px;right:-23px;width:24px;height:2px; background:repeating-linear-gradient(90deg,var(--ipm-gold) 0 6px,transparent 6px 12px)} @media (prefers-reduced-motion: no-preference){ .ipm-mh .ipm-mh-step:not(:last-child)::after{animation:ipmFlow 1.1s linear infinite} } @keyframes ipmFlow{to{background-position:12px 0}} /* radar ping around the number coins (staggered) */ .ipm-mh .ipm-mh-num{position:relative} .ipm-mh .ipm-mh-num::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(212,164,55,.55);opacity:0} @media (prefers-reduced-motion: no-preference){ .ipm-mh .ipm-mh-num::after{animation:ipmPing 3.2s ease-out infinite} .ipm-mh .ipm-mh-step:nth-child(2) .ipm-mh-num::after{animation-delay:.5s} .ipm-mh .ipm-mh-step:nth-child(3) .ipm-mh-num::after{animation-delay:1s} .ipm-mh .ipm-mh-step:nth-child(4) .ipm-mh-num::after{animation-delay:1.5s} } @keyframes ipmPing{0%{transform:scale(.85);opacity:.8}60%{transform:scale(1.6);opacity:0}100%{opacity:0}} @media (max-width:767.98px){ .ipm-mh .ipm-mh-step:not(:last-child)::after{display:none} } /* ---------- newsletter: one premium glass card ---------- */ .footer_top_area>.container>.row{align-items:center;margin:0; background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(212,164,55,.32);border-radius:24px;padding:28px 26px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 50px -34px rgba(0,0,0,.7)} .footer_top_area .footer__cta{padding:6px 0 !important;margin:0 !important} .footer__cta .cta_content h3{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;color:#fff !important;font-size:27px !important;letter-spacing:.4px} .footer__cta .cta_content h3::before{content:"\f0e0";font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900; color:var(--ipm-gold2);margin-right:12px;font-size:20px;vertical-align:1px} .footer__cta .cta_content p{color:#b9cdc1 !important;margin-top:6px} .footer_top_area .subcribe-form .form-control{height:56px;border-radius:16px 0 0 16px !important; border:1px solid rgba(212,164,55,.4) !important;border-right:none !important;background:#fffdf6 !important;padding-left:20px;font-size:15px} .footer_top_area .subcribe-form button,.footer_top_area .subcribe-form .theme_btn{height:56px; border-radius:0 16px 16px 0 !important;background:linear-gradient(135deg,var(--ipm-gold2),#c3921f) !important; color:#241a02 !important;font-weight:700 !important;border:none !important;padding:0 30px !important} @media (max-width:767.98px){ .footer_top_area>.container>.row{padding:22px 16px} } /* ============================================================ CRAFT PASS v8 — breadcrumbs, inner-page heroes, mobile fixes, login page, dedups. ============================================================ */ /* ---------- breadcrumb banners (Courses/Classes/Quiz/Blogs): theme green ---------- */ .breadcrumb_area{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.08'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(130% 120% at 18% 25%,#175035 0%,#0c3020 48%,#06190f 100%) !important; border-bottom:1px solid rgba(212,164,55,.25)} .breadcam_wrap h3{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.5px;color:#f4f8f4 !important} .breadcam_wrap p{color:#cdb46a !important;font-weight:600;letter-spacing:.6px} /* ---------- app store buttons hidden site-wide (app launching soon) ---------- */ .ipm-store{display:none !important} /* ---------- inner-page heroes (teachers/shura/contact/about): match home ---------- */ .ipm-teach .ipm-hero,.ipm-shura .ipm-hero,.ipm-contact .ipm-hero,.ipm-about .ipm-hero{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.07'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(85% 120% at 84% 20%,rgba(212,164,55,.15) 0%,transparent 45%), radial-gradient(130% 120% at 18% 25%,#175035 0%,#0c3020 48%,#06190f 100%) !important; border-bottom:1px solid rgba(212,164,55,.2)} .ipm-teach .ipm-hero h1,.ipm-shura .ipm-hero h1,.ipm-about .ipm-hero h1,.ipm-contact .ipm-hero-title{ font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.5px} /* eyebrows -> gold kick pills (like home) */ .ipm-eyebrow{display:inline-block !important;letter-spacing:2.5px !important;font-size:11.5px !important;font-weight:700 !important; text-transform:uppercase;color:var(--ipm-gold) !important;background:rgba(212,164,55,.14); padding:7px 16px;border-radius:30px;margin-bottom:14px} /* trust/CTA bands on inner pages -> home-trust style */ .ipm-cta{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.10'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 85% 15%,#17472f,#0b2c1d) !important; border:1px solid rgba(212,164,55,.28) !important;border-radius:26px !important} .ipm-cta h3{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important} /* "Every Teacher Works Under Scholarly Supervision" — proper solid, textured band (previous glass override was near-invisible on the page's cream background) */ .ipm-superv{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.09'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(120% 160% at 12% 0%,#175035 0%,#0e3626 55%,#0b2c1d 100%) !important; border:1px solid rgba(212,164,55,.3) !important;border-radius:20px !important; box-shadow:0 26px 50px -32px rgba(15,61,44,.55) !important; position:relative;overflow:hidden} .ipm-superv::before{ content:"\f3ed";font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900; flex:0 0 52px;width:52px;height:52px;border-radius:14px;font-size:20px; background:linear-gradient(135deg,var(--ipm-gold2),#c3921f);color:#241a02; display:flex;align-items:center;justify-content:center; box-shadow:0 12px 22px -10px rgba(184,135,31,.6),inset 0 1px 0 rgba(255,255,255,.55)} .ipm-superv > div{flex:1;min-width:260px} .ipm-superv h4{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;font-size:22px !important} .ipm-superv a{ display:inline-flex !important;align-items:center;gap:8px;flex:0 0 auto; background:rgba(255,255,255,.08);border:1px solid rgba(212,164,55,.45); padding:11px 22px;border-radius:30px;white-space:nowrap; transition:background .2s,border-color .2s,transform .2s} .ipm-superv a:hover{background:rgba(212,164,55,.16);border-color:var(--ipm-gold2);transform:translateY(-2px);text-decoration:none !important} @media (max-width:575.98px){ .ipm-superv > div{min-width:0} } /* ---------- contact: single centred form (reach column removed) ---------- */ .ipm-contact .ipm-main{grid-template-columns:1fr !important;max-width:820px;margin-left:auto !important;margin-right:auto !important} /* ---------- MOBILE: header break fix ---------- */ @media (max-width:991.98px){ #sticky-header.header_area{border-radius:0 !important} /* overflow-x is intentionally NOT touched here — the theme's own frontend_style.css already guards it on body; see the note above the other mobile block for why doubling up on html breaks vertical scroll. */ } /* ---------- MOBILE: smooth scroll (disable heavy paint work) ---------- */ @media (max-width:991.98px){ .ipm-hero .ipm-hero-tex{animation:none !important} .ipm-hero .ipm-hero-beam{display:none !important} .ipm-hero .ipm-tw{display:none !important} .ipm-hero .ipm-hero-logowrap::after{animation:none !important;filter:none !important;opacity:.3} .ipm-hero .ipm-hero-ring{animation:none !important} .ipm-hero h1 .g{animation:none !important} .footer_top_area .footer__cta,.ipm-bottnav{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} } /* ---------- LOGIN / REGISTER: Islamic panel ---------- */ .login_wrapper_right{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.08'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(130% 120% at 20% 25%,#175035 0%,#0c3020 50%,#06190f 100%) !important} .login_wrapper_right h4,.login_wrapper_right h3{color:#f4f8f4 !important;font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important} .login_wrapper_right p,.login_wrapper_right li,.login_wrapper_right span{color:#c2d4c8 !important} .login_wrapper_right img{max-width:300px !important;width:64% !important;height:auto; filter:drop-shadow(0 24px 46px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(233,214,120,.18))} @media (prefers-reduced-motion: no-preference){ .login_wrapper_right img{animation:ipmFloat2 8s ease-in-out infinite} } .login_wrapper_left{background:#faf7ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23b98a17' stroke-opacity='0.05'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3C/g%3E%3C/svg%3E") !important} /* ── Sidebar: highlight the program entry ───────────────────────────── The multi-year program is the primary offering, so its menu row reads as a promoted item rather than one link among many. */ .ipm-nav-program{margin:6px 0 10px}.ipm-nav-program>a{position:relative;background:linear-gradient(135deg,#0f3d2c 0%,#15653f 100%)!important;border-radius:12px!important;margin:0 12px!important;padding:12px 14px!important;box-shadow:0 5px 16px rgba(15,61,44,.22)}.ipm-nav-program>a span{color:#fff!important;font-weight:700!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ipm-nav-program>a .menu_icon,.ipm-nav-program>a .menu_icon svg{color:#d4a437!important}.ipm-nav-program>a:before{content:"";position:absolute;inset:0;border-radius:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 4l7 15 15 7-15 7-7 15-7-15-15-7 15-7z' fill='none' stroke='%23d4a437' stroke-width='1' opacity='.16'/%3E%3C/svg%3E");pointer-events:none}.ipm-nav-program>a:hover{filter:brightness(1.08)}.ipm-nav-program>a.active{box-shadow:0 0 0 2px #d4a437,0 5px 16px rgba(15,61,44,.3)} /* Sidebar: not-yet-joined program - own two-row block (title row, then a full-width "Enroll Now" button) so the CTA never has to squeeze onto the same line as the title and wrap awkwardly. Deliberately self-contained - does not reuse .ipm-nav-program's rules, which assume a single text row. */ .ipm-nav-promo{margin:6px 0 10px} .ipm-nav-promo__link{position:relative;display:block;overflow:hidden;background:linear-gradient(135deg,#0f3d2c 0%,#15653f 100%)!important;border-radius:12px!important;margin:0 12px!important;padding:12px 12px 10px!important;box-shadow:0 5px 16px rgba(15,61,44,.22);text-decoration:none!important} .ipm-nav-promo__link:before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 4l7 15 15 7-15 7-7 15-7-15-15-7 15-7z' fill='none' stroke='%23d4a437' stroke-width='1' opacity='.16'/%3E%3C/svg%3E");pointer-events:none} .ipm-nav-promo__row{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-bottom:10px} .ipm-nav-promo__icon,.ipm-nav-promo__icon svg{flex:0 0 auto;display:flex;color:#d4a437!important} .ipm-nav-promo__title{color:#fff!important;font-weight:700!important;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ipm-nav-promo__cta{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border-radius:8px;font-size:11px!important;font-weight:800!important;letter-spacing:.3px;text-transform:uppercase;color:#241a02!important;background:linear-gradient(135deg,#f4d23f,#d4a437)!important;white-space:nowrap;text-decoration:none!important} .ipm-nav-promo__link:hover{filter:brightness(1.08)} .ipm-nav-promo__link:hover .ipm-nav-promo__cta{filter:brightness(1.05)} /* ── Header: Sign Up as a secondary/outline action next to solid Sign In ── */ /* ============================================================ NAVBAR r3 — refined header bar, animated gold nav underline, and clearly-differentiated auth actions: Sign In = ghost / gold-outline (secondary) Sign Up = solid gold gradient (primary CTA) Written last + high specificity so it beats the earlier `.header_area .header__right .theme_btn` gold-pill rule that was flattening both buttons into the same look. ============================================================ */ /* --- the bar itself --- */ #sticky-header.header_area{ background:linear-gradient(180deg,#0c3322 0%,#0f3d2c 60%,#10432f 100%) !important; border-bottom:1px solid rgba(212,164,55,.22); transition:box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease); } header.ipm-scrolled #sticky-header.header_area{ box-shadow:0 14px 38px -20px rgba(0,0,0,.72); border-bottom-color:rgba(212,164,55,.42); } /* --- top-level nav links: gold underline that grows from the centre --- */ #sticky-header.header_area .main_menu>nav>ul#mobile-menu>li>a{ position:relative; font-size:15.5px; font-weight:600; letter-spacing:.2px; margin:0 15px; transition:color .25s var(--ipm-ease); } #sticky-header.header_area .main_menu>nav>ul#mobile-menu>li>a::after{ content:"";position:absolute;left:0;right:0;bottom:18px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--ipm-gold),var(--ipm-gold2)); transform:scaleX(0);transform-origin:center; transition:transform .3s var(--ipm-ease); } #sticky-header.header_area .main_menu>nav>ul#mobile-menu>li:hover>a::after, #sticky-header.header_area .main_menu>nav>ul#mobile-menu>li>a.active::after, #sticky-header.header_area .main_menu>nav>ul#mobile-menu>li.active_menu_item>a::after{transform:scaleX(1)} /* At this width the sticky/scrolled bar (.navbar_fixed) shrinks the link's own padding to 10px (frontend_style.css), so the 18px underline offset above no longer fits under the padding and cuts into the link text. */ @media only screen and (min-width:1440px) and (max-width:1580px){ #sticky-header.header_area.navbar_fixed .main_menu>nav>ul#mobile-menu>li>a::after{bottom:2px} } /* --- auth actions --- */ #sticky-header.header_area .header__right .ipm-auth-actions{gap:10px} #sticky-header.header_area .header__right .contact_btn .theme_btn, header .header_area .header__right .contact_btn .theme_btn{ display:inline-flex;align-items:center;justify-content:center;white-space:nowrap; font-family:Inter,system-ui,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:.2px;line-height:1; padding:13px 26px;border-radius:999px !important; transition:transform .22s var(--ipm-ease),box-shadow .28s var(--ipm-ease), background .28s var(--ipm-ease),border-color .28s var(--ipm-ease),color .28s var(--ipm-ease); } /* Sign In — secondary, ghost */ #sticky-header.header_area .header__right .contact_btn .ipm-signin-btn, header .header_area .header__right .contact_btn .ipm-signin-btn{ background:transparent !important;background-image:none !important; color:#f2e4bd !important; border:1.5px solid rgba(212,164,55,.55) !important; box-shadow:none !important; } #sticky-header.header_area .header__right .contact_btn .ipm-signin-btn:hover, header .header_area .header__right .contact_btn .ipm-signin-btn:hover{ background:rgba(212,164,55,.15) !important; border-color:var(--ipm-gold) !important;color:#fff !important; transform:translateY(-2px); } /* Sign Up — primary, solid gold */ #sticky-header.header_area .header__right .contact_btn .ipm-signup-btn, header .header_area .header__right .contact_btn .ipm-signup-btn{ background:linear-gradient(135deg,var(--ipm-gold2) 0%,var(--ipm-gold) 100%) !important; background-image:linear-gradient(135deg,var(--ipm-gold2) 0%,var(--ipm-gold) 100%) !important; color:#20240a !important; border:1.5px solid transparent !important; box-shadow:0 10px 24px -12px rgba(212,164,55,.85) !important; } #sticky-header.header_area .header__right .contact_btn .ipm-signup-btn:hover, header .header_area .header__right .contact_btn .ipm-signup-btn:hover{ background:linear-gradient(135deg,#ffe066 0%,#e0b246 100%) !important; background-image:linear-gradient(135deg,#ffe066 0%,#e0b246 100%) !important; color:#1a1d08 !important;transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(212,164,55,1) !important; } #sticky-header.header_area .header__right .contact_btn .theme_btn:active{transform:translateY(0) scale(.97)} #sticky-header.header_area .header__right .contact_btn .theme_btn:focus-visible{ outline:2px solid var(--ipm-gold2);outline-offset:3px; } /* --- responsive tightening --- */ @media (max-width:1299.98px){ #sticky-header.header_area .header__right .contact_btn .theme_btn, header .header_area .header__right .contact_btn .theme_btn{padding:11px 19px;font-size:13.5px} #sticky-header.header_area .main_menu>nav>ul#mobile-menu>li>a{margin:0 11px;font-size:15px} } @media (max-width:575.98px){ #sticky-header.header_area .header__right .ipm-auth-actions{gap:7px} #sticky-header.header_area .header__right .contact_btn .theme_btn, header .header_area .header__right .contact_btn .theme_btn{padding:10px 15px;font-size:12.5px} } @media (prefers-reduced-motion:reduce){ #sticky-header.header_area .main_menu>nav>ul#mobile-menu>li>a::after, #sticky-header.header_area .header__right .contact_btn .theme_btn{transition:none !important} #sticky-header.header_area .header__right .contact_btn .theme_btn:hover{transform:none !important} } /* ============================================================ ONE-STEP CHECKOUT (/order/payment) Scoped to .payment_area so the legacy multi-step checkout page keeps its original look. Turns the two stacked bordered boxes the theme renders into a single cohesive order-summary card, and gives the billing/payment column matching surfaces. ============================================================ */ /* --- shared card surface for billing + order --- */ .payment_area .biling_address, .payment_area .order_wrapper>div{ background:var(--ipm-paper,#fff) !important; border:1px solid var(--ipm-line) !important; box-shadow:0 10px 30px -22px rgba(15,61,44,.35); } .payment_area .biling_address{border-radius:16px !important;padding:24px 26px 26px !important} .payment_area .biling_address .biling-header{border-bottom:1px solid var(--ipm-line);padding-bottom:14px} .payment_area .biling_address .biling-header h4{ font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:19px;color:var(--ipm-ink);letter-spacing:.3px; } /* "Edit" reads as a quiet secondary action, not a slab */ .payment_area .biling_address .biling-header a{ background:transparent;color:var(--ipm-green2);font-weight:600;font-size:14px; padding:7px 18px;border:1px solid var(--ipm-line);border-radius:999px;line-height:1; transition:background .22s var(--ipm-ease),border-color .22s var(--ipm-ease),color .22s var(--ipm-ease); } .payment_area .biling_address .biling-header a:hover{ background:rgba(21,101,63,.07);border-color:var(--ipm-green2);color:var(--ipm-green); } .payment_area .biling_address .biling_body_content{padding-top:18px;padding-bottom:0} .payment_area .biling_address .biling_body_content p{font-size:14.5px;color:var(--ipm-muted);line-height:25px} .payment_area .biling_address .biling_body_content p:first-child{ font-size:16px;font-weight:600;color:var(--ipm-ink);margin-bottom:4px; } /* --- order summary: merge the two boxes into one card --- */ .payment_area .order_wrapper h3{ font-family:'Marcellus',Georgia,serif;font-weight:400 !important; color:var(--ipm-ink);letter-spacing:.3px;margin-bottom:18px !important; } .payment_area .order_wrapper .ordered_products{ border-radius:16px 16px 0 0 !important;border-bottom:none !important; padding:22px 24px 8px !important;box-shadow:none !important; } .payment_area .order_wrapper .ordered_products_lists{ border-radius:0 0 16px 16px !important;border-top:none !important; padding:4px 24px 20px !important;margin-bottom:0 !important; } /* item row */ .payment_area .order_wrapper .ordered_products .single_ordered_product{ align-items:center;gap:14px;margin-bottom:14px; } .payment_area .order_wrapper .ordered_products .single_ordered_product .product_name .thumb{ width:56px;min-width:56px;height:56px;border-radius:11px;overflow:hidden; border:1px solid var(--ipm-line);margin-right:12px;background:var(--ipm-cream); } .payment_area .order_wrapper .ordered_products .single_ordered_product .product_name .thumb img{ width:100%;height:100%;object-fit:cover; } .payment_area .order_wrapper .ordered_products .single_ordered_product .product_name span{ font-size:15.5px;font-weight:600;color:var(--ipm-ink);line-height:1.35; } .payment_area .order_wrapper .ordered_products .single_ordered_product .order_prise{ font-size:15.5px;font-weight:700;color:var(--ipm-green);white-space:nowrap; } /* fee breakdown — indented sub-lines under the item it belongs to */ .payment_area .ipm-fee-breakdown{ margin:-4px 0 16px 68px;padding:11px 14px; background:var(--ipm-cream);border:1px solid var(--ipm-line);border-radius:11px; } .payment_area .ipm-fee-row{ display:flex;align-items:baseline;justify-content:space-between;gap:14px; font-size:13px;line-height:1.5;color:var(--ipm-muted); } .payment_area .ipm-fee-row+.ipm-fee-row{margin-top:7px;padding-top:7px;border-top:1px dashed var(--ipm-line)} .payment_area .ipm-fee-row span:last-child{font-weight:600;color:var(--ipm-ink);white-space:nowrap} /* totals rows */ .payment_area .order_wrapper .ordered_products_lists .single_lists{ border-top:1px solid var(--ipm-line);padding:15px 0;gap:14px; } .payment_area .order_wrapper .ordered_products_lists .single_lists span{ font-size:15px;font-weight:600;color:var(--ipm-ink); } .payment_area .order_wrapper .ordered_products_lists .single_lists span.total_text{ font-size:15px;font-weight:500;color:var(--ipm-muted); } /* payable = the number that matters */ .payment_area .order_wrapper .ordered_products_lists .single_lists:last-child{ border-top:1px solid var(--ipm-line);margin-top:4px;padding:17px 0 4px; } .payment_area .order_wrapper .ordered_products_lists .single_lists:last-child span.total_text{ font-size:16.5px;font-family:'Marcellus',Georgia,serif;font-weight:400;color:var(--ipm-ink); } .payment_area .order_wrapper .ordered_products_lists .single_lists:last-child .totalBalance{ font-size:21px;font-weight:700;color:var(--ipm-green); } /* coupon row */ .payment_area .order_wrapper #couponBox{padding:15px 0 !important} .payment_area .coupon_wrapper{grid-template-columns:1fr auto;grid-gap:9px;width:100%} .payment_area .coupon_wrapper .primary_input3{ height:46px;border:1px solid var(--ipm-line);border-radius:10px;background:#fff; padding:0 15px;font-size:14.5px;color:var(--ipm-ink);width:100%; transition:border-color .22s var(--ipm-ease),box-shadow .22s var(--ipm-ease); } .payment_area .coupon_wrapper .primary_input3::placeholder{color:#9aa79f} .payment_area .coupon_wrapper .primary_input3:focus{ outline:none;border-color:var(--ipm-green2);box-shadow:0 0 0 3px rgba(21,101,63,.12); } .payment_area .coupon_wrapper #applyCoupon{ height:46px;padding:0 26px !important;border-radius:10px !important; font-size:14.5px;font-weight:600;white-space:nowrap; transition:transform .2s var(--ipm-ease),box-shadow .24s var(--ipm-ease); } .payment_area .coupon_wrapper #applyCoupon:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(15,61,44,.7)} .payment_area .coupon_wrapper #applyCoupon:active{transform:translateY(0) scale(.97)} /* discount row: label, remove-x, amount */ .payment_area #discountBox #cancelCoupon{ cursor:pointer;display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%;margin-left:auto;margin-right:10px; transition:background .2s var(--ipm-ease); } .payment_area #discountBox #cancelCoupon:hover{background:rgba(212,164,55,.18)} .payment_area #discountBox .discountAmount{font-weight:600;color:var(--ipm-ink)} /* --- payment methods --- Students here are largely first-time online buyers: a wall of gateway logos reads as decoration, not as "pay here". So each method becomes a full-width, tappable ROW — icon + what you can pay with + a chevron — the pattern people already know from Amazon/Flipkart. */ .payment_area .select_payment_method{margin-top:30px} .payment_area .select_payment_method .input_box_tittle h4{ font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:20px; color:var(--ipm-ink);letter-spacing:.3px;margin-bottom:4px; } .payment_area .select_payment_method .input_box_tittle .ipm-pay-sub{ font-size:14.5px;color:var(--ipm-muted);margin-bottom:0; } .payment_area .select_payment_method .checkout_area{padding:16px 0 0 !important} /* one column: these rows carry text, not just a logo */ .payment_area .payment_method_wrapper{grid-template-columns:1fr !important;grid-gap:12px} /* the row itself — works for both the