/** * Jeevi IQ Test — SIGNATURE skin, RESULT (upsell) + DELIVERY pages. * * Ports the insightmetrics.org (jeevi-mbti-test v3.9.11) visual system onto * the iqmetrics.org money pages: peach/cream paper, orange spine, Georgia * display type, hairline peach borders, soft orange shadows — the same * language as the signature hero/question flow in jiq-signature-test.css. * * Tokens, gradients, radii and shadow strings are copied verbatim from * im-ref/style.css via DESIGN-SPEC.md sections 1.1-1.4 / 5. * * NO @import, NO CDN, NO webfont: system + Georgia stacks only. * * Scope: everything hangs off `.jiq-app.jiqs-mode` (the wrapper class the * templates print when jiq_skin() === 'signature'), so the skin engages even * if the defensive body class never lands. Page wash + builder-wrapper * neutralisation additionally use body.jiq-result-active / * body.jiq-delivery-active (SPEC sections 9/10 cascade defeat). * * Contents * 0 Tokens * 1 Page + wrapper neutralisation, no-overflow guards * 2 Base typography inside .jiq-app * 3 Shell + reveal * 4 Buttons * 5 Panels (expired / unlocked / notice) * 6 RESULT: performance banner * 7 RESULT: congratulations header * 8 RESULT: teaser certificate * 9 RESULT: steps copy + offer banner * 10 RESULT: order card * 11 RESULT: CTA zone, trust row, payment badges * 12 DELIVERY: score reveal + gauge * 13 DELIVERY: cognitive profile bars * 14 DELIVERY: certificate, downloads, bonus files * 15 TRUST A: university logo marquee * 16 TRUST B: Trustpilot-style reviews rail * 17 Responsive (375 / 414 / 640 / 768 / 1024 / 1280+) * 18 prefers-reduced-motion * 19 Cascade-defeat tail * * @package Jeevi_IQ_Test */ /* ================================================================ 0. Tokens ================================================================ */ .jiq-app.jiqs-mode { /* Orange ladder — the brand spine. */ --s-orange-300: #FDBA74; --s-orange-400: #FB923C; --s-orange-500: #F97316; --s-orange-600: #EA580C; --s-orange-700: #C2410C; --s-orange-800: #9A3412; --s-orange-050: #FFF7ED; --s-orange-075: #FFF3EA; --s-orange-100: #FFEDD5; --s-orange-150: #FED7AA; --s-orange-line: #FBE8D3; --s-orange-tint: #FFE4C7; --s-red-500: #EF4444; --s-red-600: #DC2626; --s-red-900: #7C2D12; --s-violet-500: #7C3AED; --s-violet-300: #C4B5FD; --s-violet-100: #EDE9FE; --s-violet-050: #F5F3FF; --s-ink: #111111; --s-ink-900: #111827; --s-ink-800: #1F2937; --s-ink-navy: #1E1B3A; --s-slate-900: #0F172A; --s-grey-700: #374151; --s-grey-600: #6B7280; --s-grey-400: #9CA3AF; --s-grey-300: #D1D5DB; --s-grey-200: #E5E7EB; --s-grey-150: #ECEEF1; --s-grey-100: #F3F4F6; --s-grey-050: #F1F1F3; --s-green-500: #10B981; --s-green-600: #059669; --s-green-700: #16A34A; --s-green-800: #15803D; --s-tp-green: #00B67A; --s-tp-grey: #DCDCE6; --s-white: #FFFFFF; --s-paper: #FFFEFB; --s-cream: #FFFBF5; --s-cream-2: #FFF4E6; --s-cream-3: #FFEAD0; --s-page-1: #FFFAF5; --s-page-2: #FFF5EC; --s-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --s-serif: Georgia, "Times New Roman", "Cambria", serif; --s-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Card language. */ --s-card-border: 1px solid rgba(253, 186, 116, 0.28); --s-card-shadow: 0 18px 42px -18px rgba(249, 115, 22, 0.18), 0 6px 16px -8px rgba(31, 41, 55, 0.08); --s-card-shadow-hi: 0 22px 50px -18px rgba(249, 115, 22, 0.22), 0 8px 18px -8px rgba(31, 41, 55, 0.10); --s-hero-shadow: 0 40px 100px rgba(0, 0, 0, 0.08), 6px 0 24px -4px rgba(249, 115, 22, 0.18); /* Marquee gap. The loop shifts -50% minus half of it, which is what makes the doubled logo list wrap seamlessly at any gap size. */ --jiqs-mq-gap: 16px; } /* ================================================================ 1. Page + wrapper neutralisation, no-overflow guards ================================================================ */ body.jiq-result-active.jiq-skin-signature, body.jiq-delivery-active.jiq-skin-signature { background: linear-gradient(180deg, #FFFAF5 0%, #FFF5EC 50%, #FFFAF5 100%) !important; } /* The wrapper paints its own wash too, so the skin is correct even if the defensive body class never lands (builder-rendered pages). */ .jiq-app.jiqs-mode { background-color: #FFFAF5 !important; background-image: radial-gradient(circle at 88% 4%, rgba(249, 115, 22, 0.10), transparent 42%), radial-gradient(circle at 2% 30%, rgba(124, 58, 237, 0.07), transparent 38%), radial-gradient(circle at 98% 70%, rgba(220, 38, 38, 0.06), transparent 40%), linear-gradient(180deg, #FFFAF5 0%, #FFF5EC 46%, #FFFAF5 100%) !important; background-repeat: no-repeat !important; position: relative; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; margin: 0 !important; padding: clamp(18px, 4vw, 40px) 0 clamp(30px, 6vw, 64px) !important; } @supports (overflow-x: clip) { .jiq-app.jiqs-mode { overflow-x: clip !important; overflow-y: visible !important; } } body.jiq-result-active .jiq-app.jiqs-mode, body.jiq-delivery-active .jiq-app.jiqs-mode, body.jiq-result-active .jiq-app.jiqs-mode *, body.jiq-delivery-active .jiq-app.jiqs-mode *, body.jiq-result-active .jiq-app.jiqs-mode *::before, body.jiq-delivery-active .jiq-app.jiqs-mode *::before, body.jiq-result-active .jiq-app.jiqs-mode *::after, body.jiq-delivery-active .jiq-app.jiqs-mode *::after { box-sizing: border-box !important; } /* * LIGHT ONLY. iqmetrics.org has no dark theme and every surface here is a * hand-picked warm paper tone, so pin the UA colour scheme inside the app: a * visitor whose OS is in dark mode must not get inverted native controls * (buttons, scrollbars, focus rings) sitting on our light cards. */ .jiq-app.jiqs-mode, .jiq-app.jiqs-mode a, .jiq-app.jiqs-mode button, .jiq-app.jiqs-mode input, .jiq-app.jiqs-mode select, .jiq-app.jiqs-mode textarea { color-scheme: light !important; } /* Builder / theme wrappers: never let them cap or clip our width. */ body.jiq-result-active #pxl-content-area, body.jiq-result-active #pxl-content-main, body.jiq-result-active .pxl-entry-content, body.jiq-delivery-active #pxl-content-area, body.jiq-delivery-active #pxl-content-main, body.jiq-delivery-active .pxl-entry-content { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } body.jiq-result-active .e-con, body.jiq-result-active .e-con-inner, body.jiq-result-active .elementor-section .elementor-container, body.jiq-result-active .elementor-widget-container, body.jiq-delivery-active .e-con, body.jiq-delivery-active .e-con-inner, body.jiq-delivery-active .elementor-section .elementor-container, body.jiq-delivery-active .elementor-widget-container { max-width: 100% !important; --container-max-width: 100% !important; } body.jiq-result-active .site-content, body.jiq-result-active .entry-content, body.jiq-result-active .page-content, body.jiq-delivery-active .site-content, body.jiq-delivery-active .entry-content, body.jiq-delivery-active .page-content { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; } /* ================================================================ 1b. Navy brand bar — payment page header (approved test-header design ported here, owner request 2026-07-26). The theme header (masthead + Elementor hamburger + entry-title band) is hidden ONLY under body.jiq-result-active — the delivery page and the rest of the site keep the theme header untouched. NEVER hide #wpadminbar. ================================================================ */ body.jiq-result-active #masthead, body.jiq-result-active header#masthead, body.jiq-result-active header.entry-header, body.jiq-result-active .hfe-nav-menu__toggle { display: none !important; } /* The negative top margin cancels the app's own clamp() top padding so the bar sits flush with the top of the page. */ body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar { position: relative; z-index: 5; display: flex !important; align-items: center; gap: 14px; height: 62px; margin: calc(-1 * clamp(18px, 4vw, 40px)) 0 clamp(16px, 3vw, 26px) !important; padding: 0 16px !important; background: #1E3A5C !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar-logo { flex: 0 0 auto; display: flex; align-items: center; height: 100%; min-width: 0; } body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar-logo img { display: block; height: 32px !important; width: auto !important; max-width: 100% !important; object-fit: contain; object-position: left center; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar-spacer { flex: 1 1 auto; } body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar-secure { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px !important; font-weight: 600 !important; line-height: 1; color: #8FE6B0 !important; letter-spacing: 0.2px; word-spacing: normal; white-space: nowrap; } body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar-secure svg { display: block; flex: 0 0 auto; } @media (min-width: 700px) { body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar { padding: 0 24px !important; height: 68px; } body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar-logo img { height: 40px !important; } } @media (max-width: 374px) { body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar { height: 56px; } body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar-logo img { height: 27px !important; } } /* ≤640px the app's top padding drops to a flat 16px (section 15) — the pull-up must match exactly or the bar clips / leaves a sliver. */ @media (max-width: 640px) { body.jiq-result-active .jiq-app.jiqs-mode .jiqs-brandbar { margin-top: -16px !important; } } .jiq-app.jiqs-mode #jiq-order { scroll-margin-top: 16px; } /* ================================================================ 2. Base typography inside .jiq-app ================================================================ */ .jiq-app.jiqs-mode { font-family: var(--s-sans) !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--s-ink-800) !important; letter-spacing: 0.3px; word-spacing: 2px; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .jiq-app.jiqs-mode img { max-width: 100% !important; height: auto; border: 0; } .jiq-app.jiqs-mode [hidden] { display: none !important; } .jiq-app.jiqs-mode svg { max-width: 100%; vertical-align: middle; } .jiq-app.jiqs-mode p { margin: 0 0 12px; } .jiq-app.jiqs-mode a { text-decoration: none; } /* Premium-skin-only markup never renders here. */ .jiq-app.jiqs-mode .jiq-premium-only { display: none !important; } /* The classic "Trusted by…" heading is replaced by the native marquee below. */ .jiq-app.jiqs-mode .jiq-trusted-heading { display: none !important; } /* ================================================================ 3. Shell + reveal ================================================================ */ .jiq-app.jiqs-mode .jiq-shell { position: relative; z-index: 1; width: 100% !important; max-width: 720px !important; min-width: 0 !important; margin: 0 auto !important; padding: 0 clamp(14px, 4vw, 22px) !important; } .jiq-app.jiqs-mode .jiq-shell-narrow { max-width: 560px !important; } /* Reveal only when JS can finish the job (jiq-result.js / jiq-delivery.js add body.jiq-js) — no-JS visitors always see the content. */ body.jiq-js .jiq-app.jiqs-mode .jiq-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } body.jiq-js .jiq-app.jiqs-mode .jiq-reveal.jiq-in { opacity: 1; transform: none; } /* ================================================================ 4. Buttons ================================================================ */ .jiq-app.jiqs-mode .jiq-btn { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 52px !important; padding: 15px 26px !important; border: none !important; border-radius: 14px !important; font-family: var(--s-sans) !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; text-align: center; text-decoration: none !important; cursor: pointer; overflow: hidden; -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent; transition: transform 0.16s ease, box-shadow 0.28s ease, background 0.28s ease, color 0.2s ease; } .jiq-app.jiqs-mode .jiq-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 20px -4px rgba(220, 38, 38, 0.45) !important; } .jiq-app.jiqs-mode .jiq-btn:active { transform: translateY(0) scale(0.995); } /* Primary money CTA — the unlock-button recipe (orange → red). */ .jiq-app.jiqs-mode .jiq-btn-gold { background: linear-gradient(135deg, #F97316 0%, #EA580C 50%, #DC2626 100%) !important; color: #FFFFFF !important; box-shadow: 0 8px 20px -4px rgba(220, 38, 38, 0.45), 0 2px 4px rgba(220, 38, 38, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } .jiq-app.jiqs-mode .jiq-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -6px rgba(220, 38, 38, 0.55), 0 4px 8px rgba(220, 38, 38, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } /* Shine sweep. */ .jiq-app.jiqs-mode .jiq-btn-gold::after { content: ""; position: absolute; top: 0; left: -60%; width: 55%; height: 100%; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: skewX(-18deg); pointer-events: none; animation: jiqs-shine 4.4s ease-in-out infinite; } /* Ink pill (secondary route buttons). */ .jiq-app.jiqs-mode .jiq-btn-navy { background: linear-gradient(90deg, #111111 0%, #1A1A1A 100%) !important; color: #FFFFFF !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .jiq-app.jiqs-mode .jiq-btn-navy:hover { transform: translateY(-1px); } /* Ghost / outline. */ .jiq-app.jiqs-mode .jiq-btn-outline { background: #FFFFFF !important; color: var(--s-grey-600) !important; border: 1px solid var(--s-grey-200) !important; box-shadow: 0 2px 6px rgba(31, 41, 55, 0.05) !important; text-transform: none !important; letter-spacing: 0.2px !important; font-weight: 600 !important; font-size: 13.5px !important; } .jiq-app.jiqs-mode .jiq-btn-outline:hover { color: var(--s-orange-500) !important; border-color: var(--s-orange-150) !important; background: var(--s-orange-050) !important; transform: translateY(-1px); } /* Full-width variants. */ .jiq-app.jiqs-mode .jiq-btn-hero, .jiq-app.jiqs-mode .jiq-btn-cta { display: flex !important; width: 100%; max-width: 460px; margin: 18px auto 0; min-height: 58px !important; font-size: 14px !important; } .jiq-app.jiqs-mode .jiq-btn-cta { margin-top: 0; } /* Signature CTA internals (label + circular arrow). */ .jiq-app.jiqs-mode .jiqs-cta { padding-right: 54px !important; padding-left: 26px !important; } .jiq-app.jiqs-mode .jiqs-cta-label { display: inline-block; line-height: 1.15; } .jiq-app.jiqs-mode .jiqs-cta-arrow { position: absolute; top: 50%; right: 10px; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: #FFFFFF; color: var(--s-orange-600); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(124, 45, 18, 0.25); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .jiq-app.jiqs-mode .jiqs-cta:hover .jiqs-cta-arrow { transform: translateX(3px); } /* Support link inside the notice panel. */ .jiq-app.jiqs-mode .jiq-support-link { color: var(--s-orange-700) !important; font-weight: 700; border-bottom: 1px dashed var(--s-orange-150); } /* ================================================================ 5. Panels (expired / unlocked / notice) ================================================================ */ .jiq-app.jiqs-mode .jiq-panel { background: #FFFFFF !important; border: 0.5px solid rgba(0, 0, 0, 0.08) !important; border-radius: 28px !important; padding: clamp(26px, 6vw, 40px) clamp(20px, 5vw, 34px) !important; box-shadow: var(--s-hero-shadow) !important; margin: 0 auto 26px !important; position: relative; overflow: hidden; } .jiq-app.jiqs-mode .jiq-panel-center { text-align: center; } .jiq-app.jiqs-mode .jiq-panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; margin: 0 0 16px; border-radius: 50%; color: var(--s-orange-600); background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 14px -4px rgba(249, 115, 22, 0.28); } .jiq-app.jiqs-mode .jiq-panel-icon-gold { color: var(--s-red-600); } .jiq-app.jiqs-mode .jiq-panel-title { font-family: var(--s-serif) !important; font-size: clamp(24px, 6vw, 32px) !important; font-weight: 500 !important; line-height: 1.12 !important; letter-spacing: -0.8px !important; color: var(--s-ink) !important; margin: 0 0 12px !important; padding: 0 !important; text-transform: none !important; } .jiq-app.jiqs-mode .jiq-panel-copy { font-size: 14.5px !important; line-height: 1.62 !important; color: var(--s-grey-600) !important; margin: 0 auto 20px !important; max-width: 460px; } .jiq-app.jiqs-mode .jiq-panel-notice { background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF7 100%) !important; border: 1px dashed var(--s-orange-150) !important; border-radius: 20px !important; box-shadow: none !important; text-align: center; } .jiq-app.jiqs-mode .jiq-panel-notice .jiq-panel-copy { margin-bottom: 0 !important; } /* ================================================================ 6. RESULT: performance banner (.jiq-timebox) ================================================================ */ .jiq-app.jiqs-mode .jiq-timebox { display: flex; align-items: center; gap: 14px; margin: 0 0 20px !important; padding: 14px 18px !important; background: linear-gradient(135deg, #FFF9F3 0%, #FFF4EA 40%, #FFEAD0 100%) !important; border: 1px solid rgba(249, 115, 22, 0.16) !important; border-radius: 18px !important; box-shadow: 0 12px 28px -18px rgba(249, 115, 22, 0.35); position: relative; overflow: hidden; } .jiq-app.jiqs-mode .jiq-timebox-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; color: var(--s-orange-600); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(249, 115, 22, 0.22); } .jiq-app.jiqs-mode .jiq-timebox-text { margin: 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--s-grey-700) !important; } .jiq-app.jiqs-mode .jiq-timebox-text strong { color: var(--s-ink-900) !important; font-weight: 700 !important; } .jiq-app.jiqs-mode .jiq-accent { color: var(--s-orange-600) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; } /* ================================================================ 7. RESULT: congratulations header ================================================================ */ .jiq-app.jiqs-mode .jiq-result-head, .jiq-app.jiqs-mode .jiq-delivery-head { text-align: center; margin: 0 0 20px !important; } .jiq-app.jiqs-mode .jiq-eyebrow { display: inline-block; font-family: var(--s-sans) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: var(--s-orange-700) !important; background: var(--s-orange-075); border: 1px solid rgba(194, 65, 12, 0.10); border-radius: 999px; padding: 6px 13px !important; margin: 0 0 14px !important; } .jiq-app.jiqs-mode .jiq-display { font-family: var(--s-serif) !important; font-size: clamp(30px, 8.4vw, 46px) !important; font-weight: 500 !important; line-height: 0.98 !important; letter-spacing: -1.4px !important; color: var(--s-ink) !important; text-transform: none !important; text-align: center !important; word-spacing: normal !important; margin: 0 0 10px !important; padding: 0 !important; } .jiq-app.jiqs-mode .jiq-result-name { font-family: var(--s-serif) !important; font-style: italic; font-size: clamp(19px, 5vw, 26px) !important; font-weight: 500 !important; line-height: 1.15 !important; letter-spacing: -0.4px; margin: 0 0 12px !important; background: linear-gradient(135deg, #F97316 0%, #DC2626 50%, #7C3AED 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--s-orange-600); } .jiq-app.jiqs-mode .jiq-result-sub { font-size: 14px !important; line-height: 1.62 !important; color: var(--s-grey-600) !important; max-width: 480px; margin: 0 auto !important; } /* ================================================================ 8. RESULT: teaser certificate ================================================================ */ .jiq-app.jiqs-mode .jiq-cert-teaser { text-align: center; margin: 0 0 22px !important; padding: clamp(16px, 4vw, 22px) !important; background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF7 100%) !important; border: var(--s-card-border) !important; border-radius: 24px !important; box-shadow: var(--s-card-shadow) !important; transition: box-shadow 0.4s ease; } .jiq-app.jiqs-mode .jiq-cert-teaser:hover { box-shadow: var(--s-card-shadow-hi) !important; } .jiq-app.jiqs-mode .jiq-cert-frame { margin: 0 !important; padding: 10px !important; background: #FFFFFF; border: 1px solid rgba(249, 115, 22, 0.12); border-radius: 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 28px -18px rgba(249, 115, 22, 0.22); overflow: hidden; } .jiq-app.jiqs-mode .jiq-cert-frame img { display: block; width: 100%; height: auto; border-radius: 12px; background: #FFFFFF; } .jiq-app.jiqs-mode .jiq-cert-caption { font-size: 12.5px !important; line-height: 1.5 !important; color: var(--s-grey-400) !important; margin: 12px auto 0 !important; max-width: 420px; } /* Locked fallback (no GD / teaser not built yet). */ .jiq-app.jiqs-mode .jiq-cert-locked { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px !important; background: radial-gradient(ellipse 80% 60% at 70% 0%, rgba(249, 115, 22, 0.28) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(124, 45, 18, 0.24) 0%, transparent 60%), linear-gradient(180deg, #0E0805 0%, #050302 100%) !important; border-radius: 18px !important; border: 1px solid rgba(253, 186, 116, 0.16) !important; color: var(--s-orange-300); } .jiq-app.jiqs-mode .jiq-cert-locked-seal { color: var(--s-orange-300); opacity: 0.9; } .jiq-app.jiqs-mode .jiq-cert-locked-title { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 2.2px; text-transform: uppercase; color: var(--s-orange-300) !important; } .jiq-app.jiqs-mode .jiq-cert-locked-name { font-family: var(--s-serif) !important; font-size: 18px !important; color: #FFF7ED !important; } .jiq-app.jiqs-mode .jiq-cert-locked-score { font-family: var(--s-serif) !important; font-size: 40px !important; line-height: 1 !important; color: rgba(253, 186, 116, 0.55) !important; filter: blur(1.5px); letter-spacing: 2px; } .jiq-app.jiqs-mode .jiq-cert-locked-note { font-size: 11px !important; color: rgba(253, 186, 116, 0.7) !important; letter-spacing: 0.4px; } .jiq-app.jiqs-mode .jiq-cert-pending { background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF7 100%) !important; border: 1px dashed var(--s-orange-150) !important; color: var(--s-grey-600); } .jiq-app.jiqs-mode .jiq-cert-pending .jiq-cert-locked-seal, .jiq-app.jiqs-mode .jiq-cert-pending .jiq-cert-locked-title { color: var(--s-orange-700) !important; } .jiq-app.jiqs-mode .jiq-cert-pending .jiq-cert-locked-note { color: var(--s-grey-400) !important; } /* ================================================================ 9. RESULT: steps copy + offer banner ================================================================ */ .jiq-app.jiqs-mode .jiq-steps-copy { text-align: center; font-size: 14px !important; line-height: 1.62 !important; color: var(--s-grey-600) !important; max-width: 520px; margin: 0 auto 20px !important; } .jiq-app.jiqs-mode .jiq-steps-copy strong { color: var(--s-ink-900) !important; font-weight: 700 !important; } .jiq-app.jiqs-mode .jiq-offer-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 20px !important; padding: 13px 16px !important; background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%) !important; border: 1px dashed var(--s-orange-150) !important; border-radius: 16px !important; } .jiq-app.jiqs-mode .jiq-offer-tag { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; color: var(--s-red-600); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18); } .jiq-app.jiqs-mode .jiq-offer-text { margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--s-orange-800) !important; } .jiq-app.jiqs-mode .jiq-offer-text strong { color: var(--s-red-600) !important; font-weight: 700 !important; } .jiq-app.jiqs-mode .jiq-offer-count-wrap { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-family: var(--s-mono) !important; font-size: 11.5px !important; color: var(--s-grey-600) !important; font-variant-numeric: tabular-nums; } .jiq-app.jiqs-mode .jiq-offer-expired { opacity: 0.55; } /* ================================================================ 10. RESULT: order card ================================================================ */ /* Total row. */ /* ================================================================ 11. RESULT: CTA zone, trust row, payment badges ================================================================ */ .jiq-app.jiqs-mode .jiq-cta-wrap { text-align: center; margin: 0 0 8px; } .jiq-app.jiqs-mode .jiq-trust-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 !important; font-size: 11.5px !important; color: var(--s-grey-600) !important; letter-spacing: 0.2px; } .jiq-app.jiqs-mode .jiq-trust-item { display: inline-flex; align-items: center; gap: 5px; } .jiq-app.jiqs-mode .jiq-trust-item svg { color: var(--s-green-600); } .jiq-app.jiqs-mode .jiq-trust-sep { color: var(--s-orange-150); } /* ---------------------------------------------------------------- * Guaranteed-safe-checkout badge (.jiq-safeimg) — the approved raster * strip rendered under BOTH CTAs. (The old self-drawn .jiq-payrow chip * card is classic/premium-only markup now; its rules live in the * classic sheets.) * ---------------------------------------------------------------- */ .jiq-app.jiqs-mode .jiq-safeimg { display: block !important; margin: 20px auto 0 !important; padding: 0 !important; text-align: center !important; line-height: 0 !important; } .jiq-app.jiqs-mode .jiq-safeimg img { width: min(480px, 94%) !important; height: auto !important; display: inline-block !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Payment badges — kept (real conversion element), restyled to the paper. */ .jiq-app.jiqs-mode .jiq-paybadges { display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 16px auto 0 !important; padding: 12px 14px !important; max-width: 460px; background: #FFFFFF; border: 1px solid rgba(253, 186, 116, 0.28); border-radius: 16px; box-shadow: 0 10px 26px -20px rgba(249, 115, 22, 0.4); } .jiq-app.jiqs-mode .jiq-paybadge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--s-grey-200); background: #FFFFFF; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: var(--s-grey-700); text-transform: uppercase; } .jiq-app.jiqs-mode .jiq-paybadge-visa { color: #1A1F71; font-style: italic; } .jiq-app.jiqs-mode .jiq-paybadge-mc { gap: 0; padding: 0 10px; } .jiq-app.jiqs-mode .jiq-mc-c { display: block; width: 14px; height: 14px; border-radius: 50%; } .jiq-app.jiqs-mode .jiq-mc-c1 { background: #EB001B; } .jiq-app.jiqs-mode .jiq-mc-c2 { background: #F79E1B; margin-left: -6px; mix-blend-mode: multiply; } .jiq-app.jiqs-mode .jiq-paybadge-rupay { color: #097DC6; } .jiq-app.jiqs-mode .jiq-paybadge-upi { color: #0E7C3A; } .jiq-app.jiqs-mode .jiq-paybadge-stripe { color: #635BFF; text-transform: lowercase; letter-spacing: 0; } .jiq-app.jiqs-mode .jiq-paybadge-secure { color: var(--s-green-700); border-color: rgba(22, 163, 74, 0.35); background: #F0FDF4; text-transform: none; letter-spacing: 0.2px; } /* ================================================================ 12. DELIVERY: score reveal + gauge ================================================================ */ .jiq-app.jiqs-mode .jiq-delivery-issued { font-size: 14px !important; color: var(--s-grey-600) !important; margin: 0 !important; } .jiq-app.jiqs-mode .jiq-gauge-wrap { text-align: center; margin: 6px 0 26px; } .jiq-app.jiqs-mode .jiq-gauge { position: relative; width: clamp(190px, 56vw, 236px); height: clamp(190px, 56vw, 236px); margin: 0 auto; } .jiq-app.jiqs-mode .jiq-gauge::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(253, 186, 116, 0.30) 0%, rgba(253, 186, 116, 0.06) 62%, transparent 74%); pointer-events: none; } .jiq-app.jiqs-mode .jiq-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 10px 22px rgba(249, 115, 22, 0.22)); } .jiq-app.jiqs-mode .jiq-gauge-track { fill: none; stroke: #FFE9D6 !important; stroke-width: 13; } .jiq-app.jiqs-mode .jiq-gauge-ring { fill: none; stroke: #F97316 !important; stroke-width: 13; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .jiq-app.jiqs-mode .jiq-gauge-center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .jiq-app.jiqs-mode .jiq-gauge-score { font-family: var(--s-serif) !important; font-size: clamp(52px, 15vw, 68px) !important; font-weight: 500 !important; line-height: 0.9 !important; letter-spacing: -2px; color: var(--s-ink) !important; font-variant-numeric: tabular-nums; } .jiq-app.jiqs-mode .jiq-gauge-label { font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: 1.6px; text-transform: uppercase; color: var(--s-grey-400) !important; } .jiq-app.jiqs-mode .jiq-band-line { margin: 16px 0 8px !important; } .jiq-app.jiqs-mode .jiq-band-chip { display: inline-block; padding: 8px 20px !important; border-radius: 999px !important; background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%) !important; border: 1px solid rgba(249, 115, 22, 0.22) !important; color: var(--s-orange-700) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.6px; text-transform: uppercase; } .jiq-app.jiqs-mode .jiq-percentile-line { font-size: 14.5px !important; color: var(--s-grey-600) !important; margin: 0 auto !important; max-width: 460px; } .jiq-app.jiqs-mode .jiq-percentile-line strong { color: var(--s-orange-600) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; } /* ================================================================ 13. DELIVERY: cognitive profile bars ================================================================ */ .jiq-app.jiqs-mode .jiq-card { background: #FFFFFF !important; border: var(--s-card-border) !important; border-radius: 24px !important; padding: clamp(20px, 5vw, 30px) clamp(16px, 4vw, 28px) !important; margin: 0 0 22px !important; box-shadow: var(--s-card-shadow) !important; transition: box-shadow 0.4s ease; } .jiq-app.jiqs-mode .jiq-card:hover { box-shadow: var(--s-card-shadow-hi) !important; } .jiq-app.jiqs-mode .jiq-card-title { font-family: var(--s-serif) !important; font-size: clamp(20px, 5vw, 26px) !important; font-weight: 500 !important; line-height: 1.15 !important; letter-spacing: -0.6px !important; color: var(--s-ink) !important; text-align: center; text-transform: none !important; margin: 0 0 20px !important; padding: 0 !important; } .jiq-app.jiqs-mode .jiq-cat-row { margin: 0 0 16px; } .jiq-app.jiqs-mode .jiq-cat-row:last-child { margin-bottom: 0; } .jiq-app.jiqs-mode .jiq-cat-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; } .jiq-app.jiqs-mode .jiq-cat-label { font-size: 13.5px !important; font-weight: 600 !important; color: var(--s-ink-900) !important; letter-spacing: -0.1px; } .jiq-app.jiqs-mode .jiq-cat-score { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; } .jiq-app.jiqs-mode .jiq-cat-frac { font-size: 11.5px !important; color: var(--s-grey-400) !important; } .jiq-app.jiqs-mode .jiq-cat-pct { font-size: 13px !important; font-weight: 700 !important; color: var(--s-orange-600) !important; } .jiq-app.jiqs-mode .jiq-cat-track { position: relative; height: 9px; border-radius: 999px; background: #F6EEE6 !important; overflow: hidden; } .jiq-app.jiqs-mode .jiq-cat-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F97316 0%, #FB923C 55%, #FDBA74 100%) !important; box-shadow: 0 0 6px rgba(249, 115, 22, 0.3); transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1); } /* ================================================================ 14. DELIVERY: certificate, downloads, bonus files ================================================================ */ /* The .jiq-het-wrap cards below already show the certificate AND carry the View / Download links, so the standalone frame would be the same artwork twice. Show the frame only when the cards are not rendered (browsers without :has() keep both — visually redundant, never broken). */ .jiq-app.jiqs-mode .jiq-cert-frame-paid { margin: 0 auto 20px !important; max-width: 560px; } @supports selector(:has(*)) { .jiq-app.jiqs-mode .jiq-downloads:has(.jiq-het-wrap) .jiq-cert-frame-paid { display: none !important; } } .jiq-app.jiqs-mode .jiq-het-wrap { margin: 0 0 20px; } .jiq-app.jiqs-mode .jiq-het-title { text-align: center; font-size: 12.5px !important; color: var(--s-grey-400) !important; margin: 0 auto 14px !important; max-width: 460px; } .jiq-app.jiqs-mode .jiq-het-report { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 16px; } .jiq-app.jiqs-mode .jiq-certi-card { flex: 1 1 220px; max-width: 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF7 100%); border: 1px solid rgba(249, 115, 22, 0.14); border-radius: 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 28px -18px rgba(249, 115, 22, 0.24); } .jiq-app.jiqs-mode .jiq-certi-img-holder { display: block; border-radius: 12px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--s-grey-100); } .jiq-app.jiqs-mode .jiq-certi-img-holder img { display: block; width: 100%; height: auto; } .jiq-app.jiqs-mode .jiq-report-preview { padding: 14px; } .jiq-app.jiqs-mode .jiq-report-doc { display: block; padding: 14px 12px; background: #FFFDFA; border: 1px dashed var(--s-orange-150); border-radius: 10px; text-align: left; } .jiq-app.jiqs-mode .jiq-report-doc-title { display: block; font-family: var(--s-serif) !important; font-size: 13px !important; font-weight: 700; color: var(--s-ink-900) !important; margin: 0 0 10px; } .jiq-app.jiqs-mode .jiq-report-doc-line { display: block; height: 6px; border-radius: 3px; background: #F3EAE1; margin: 0 0 6px; } .jiq-app.jiqs-mode .jiq-report-doc-line-short { width: 62%; } .jiq-app.jiqs-mode .jiq-report-doc-user { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 10.5px; color: var(--s-grey-400); } .jiq-app.jiqs-mode .jiq-certi-links { list-style: none !important; display: flex; align-items: stretch; justify-content: center; gap: 0; margin: 0 !important; padding: 0 !important; } .jiq-app.jiqs-mode .jiq-certi-links li { flex: 1 1 0; margin: 0 !important; padding: 0 !important; list-style: none !important; text-align: center; } .jiq-app.jiqs-mode .jiq-certi-links li + li { border-left: 1px solid var(--s-grey-200); } .jiq-app.jiqs-mode .jiq-certi-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--s-orange-700) !important; border-radius: 10px; transition: color 0.2s ease, background 0.2s ease; } .jiq-app.jiqs-mode .jiq-certi-links a:hover { color: var(--s-red-600) !important; background: var(--s-orange-050); } .jiq-app.jiqs-mode .jiq-dl-row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 12px; margin: 0 0 14px; } .jiq-app.jiqs-mode .jiq-dl-row .jiq-btn-dl { flex: 1 1 240px; max-width: 340px; margin: 0; min-height: 52px !important; font-size: 12.5px !important; letter-spacing: 0.8px !important; /* Gold + outline download buttons must read as one row. */ text-transform: uppercase !important; font-weight: 700 !important; } .jiq-app.jiqs-mode .jiq-dl-row-bonus .jiq-btn-dl { min-height: 48px !important; } .jiq-app.jiqs-mode .jiq-dl-pending { margin: 0 !important; font-size: 13px !important; color: var(--s-grey-600) !important; } .jiq-app.jiqs-mode .jiq-emailed-note { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 0 !important; padding-top: 14px; border-top: 1px dashed var(--s-orange-line); font-size: 12px !important; color: var(--s-grey-400) !important; text-align: center; } .jiq-app.jiqs-mode .jiq-emailed-note svg { color: var(--s-orange-500); flex-shrink: 0; } /* ================================================================ 15. TRUST A: university logo marquee (RESULT page only) ================================================================ */ .jiq-app.jiqs-mode .jiqs-trust { position: relative; z-index: 1; width: 100%; max-width: 100%; min-width: 0; margin: clamp(18px, 5vw, 34px) 0 0; padding: 0; overflow: hidden; } .jiq-app.jiqs-mode .jiqs-unis { padding: clamp(34px, 7vw, 56px) clamp(14px, 4vw, 20px) clamp(24px, 5vw, 40px); text-align: center; overflow: hidden; min-width: 0; max-width: 100%; } .jiq-app.jiqs-mode .jiqs-unis-title, .jiq-app.jiqs-mode .jiqs-unis-title { max-width: 760px; margin: 0 auto clamp(18px, 4vw, 28px) !important; padding: 0 !important; } .jiq-app.jiqs-mode .jiqs-marquee-wrap { position: relative; overflow: hidden; min-width: 0; max-width: 100%; padding: 6px 0; touch-action: pan-x; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); } .jiq-app.jiqs-mode .jiqs-marquee-track { display: flex; align-items: center; gap: var(--jiqs-mq-gap, 16px); width: max-content; animation: jiqs-marquee 45s linear infinite; } .jiq-app.jiqs-mode .jiqs-marquee-wrap:hover .jiqs-marquee-track, .jiq-app.jiqs-mode .jiqs-marquee-wrap:focus-within .jiqs-marquee-track { animation-play-state: paused; } .jiq-app.jiqs-mode .jiqs-uni { flex-shrink: 0; width: 132px; height: 96px; display: flex; align-items: center; justify-content: center; padding: 10px 14px; } .jiq-app.jiqs-mode .jiqs-uni img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.62; transition: filter 0.25s ease, opacity 0.25s ease; } .jiq-app.jiqs-mode .jiqs-uni img:hover { filter: grayscale(0); opacity: 1; } /* Graceful 404 — the tile whose image failed disappears entirely. */ .jiq-app.jiqs-mode .jiqs-uni.is-broken { display: none !important; } @keyframes jiqs-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - (var(--jiqs-mq-gap, 16px) / 2)), 0, 0); } } @keyframes jiqs-shine { 0%, 62% { left: -60%; } 100% { left: 130%; } } /* ================================================================ 16. TRUST B: Trustpilot-style reviews rail (RESULT page only) ================================================================ */ .jiq-app.jiqs-mode .jiqs-reviews-title::before, /* The arrows live in their own gutter (they are display:none <=900px, so the gutter only exists where they do) — never floating on top of card text. */ @media (min-width: 901px) { } /* ================================================================ 16b. RESULT: "Important Heads Up !!!" notice ---------------------------------------------------------------- Rebuilt from the original page, values measured off the live block: rgba(208,8,8,.16) wash, 5px #F9F0C3 left rule, 15px padding, square corners, 16px body, #08711D 16px/600 heading. The only deviation is the right padding — it is opened up to clear the dismiss ×, which otherwise sits on top of the first line of copy on narrow screens. ================================================================ */ .jiq-app.jiqs-mode .jiq-headsup-shell { margin-top: clamp(20px, 5vw, 34px) !important; margin-bottom: 4px !important; } .jiq-app.jiqs-mode .jiq-headsup { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 15px 50px 15px 15px !important; background: rgba(208, 8, 8, 0.16) !important; border: 0 !important; border-left: 5px solid #F9F0C3 !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--s-sans) !important; text-align: left !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } .jiq-app.jiqs-mode .jiq-headsup-title { display: block !important; margin: 0 0 6px !important; padding: 0 !important; font-family: var(--s-sans) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; word-spacing: normal !important; text-transform: none !important; color: #08711D !important; } .jiq-app.jiqs-mode .jiq-headsup-copy, .jiq-app.jiqs-mode .jiq-headsup-copy p { margin: 0 !important; padding: 0 !important; font-family: var(--s-sans) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0 !important; word-spacing: normal !important; color: var(--s-ink-900) !important; } .jiq-app.jiqs-mode .jiq-headsup-copy p + p { margin-top: 10px !important; } .jiq-app.jiqs-mode .jiq-headsup-copy a { color: var(--s-orange-700) !important; text-decoration: underline !important; } .jiq-app.jiqs-mode .jiq-headsup-x { position: absolute !important; top: 9px !important; right: 9px !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #7C2D12 !important; font-size: 0 !important; line-height: 0 !important; cursor: pointer !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; transition: background-color 0.18s ease, color 0.18s ease; } .jiq-app.jiqs-mode .jiq-headsup-x:hover, .jiq-app.jiqs-mode .jiq-headsup-x:focus { background: rgba(124, 45, 18, 0.13) !important; color: #5B1F0C !important; } .jiq-app.jiqs-mode .jiq-headsup-x svg { display: block !important; width: 13px !important; height: 13px !important; max-width: none !important; } /* ================================================================ 17. Responsive ================================================================ */ /* --- ≥1024px: four review cards visible, matching the live widget. --- */ @media (min-width: 1024px) { } /* --- ≤900px: swipe only, no arrows. --- */ @media (max-width: 900px) { } /* --- ≤768px (tablet). --- */ @media (max-width: 768px) { .jiq-app.jiqs-mode .jiq-shell { max-width: 640px !important; } .jiq-app.jiqs-mode .jiq-certi-card { max-width: 340px; } } /* --- ≤640px (large phone). --- */ @media (max-width: 640px) { .jiq-app.jiqs-mode { padding: 16px 0 34px !important; } .jiq-app.jiqs-mode .jiq-panel { border-radius: 22px !important; } .jiq-app.jiqs-mode .jiq-timebox { gap: 11px; padding: 12px 14px !important; border-radius: 16px !important; } .jiq-app.jiqs-mode .jiq-timebox-icon { width: 38px; height: 38px; } .jiq-app.jiqs-mode .jiq-cert-teaser, .jiq-app.jiqs-mode .jiq-order, .jiq-app.jiqs-mode .jiq-card { border-radius: 20px !important; } .jiq-app.jiqs-mode .jiq-order-glyph, .jiq-app.jiqs-mode .jiq-btn-hero, .jiq-app.jiqs-mode .jiq-btn-cta { max-width: 100%; min-height: 54px !important; } .jiq-app.jiqs-mode .jiq-dl-row .jiq-btn-dl { flex: 1 1 100%; max-width: 100%; } .jiq-app.jiqs-mode .jiq-certi-card { flex: 1 1 100%; max-width: 100%; } /* Marquee: tighter tiles, faster loop, native swipe alongside the auto-scroll. */ .jiq-app.jiqs-mode .jiqs-unis { padding: 34px 14px 24px; } .jiq-app.jiqs-mode .jiqs-uni { width: 104px; height: 76px; padding: 8px 10px; } .jiq-app.jiqs-mode .jiqs-marquee-track { --jiqs-mq-gap: 12px; animation-duration: 32s; } .jiq-app.jiqs-mode .jiqs-marquee-wrap { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } } /* --- ≤480px (iPhone portrait). --- */ @media (max-width: 480px) { .jiq-app.jiqs-mode .jiq-panel { border-radius: 20px !important; } .jiq-app.jiqs-mode .jiq-panel-icon { width: 66px; height: 66px; } .jiq-app.jiqs-mode .jiq-trust-row { font-size: 11px !important; gap: 6px; } .jiq-app.jiqs-mode .jiq-headsup { padding: 14px 46px 14px 14px !important; } .jiq-app.jiqs-mode .jiq-headsup-x { top: 7px !important; right: 7px !important; } } /* --- ≤380px (iPhone SE / 360-375 Android). --- */ @media (max-width: 380px) { .jiq-app.jiqs-mode .jiq-shell { padding: 0 12px !important; } .jiq-app.jiqs-mode .jiq-btn { font-size: 12.5px !important; letter-spacing: 1px !important; padding-left: 18px !important; padding-right: 18px !important; } .jiq-app.jiqs-mode .jiqs-cta { padding-right: 48px !important; padding-left: 18px !important; } .jiq-app.jiqs-mode .jiqs-cta-arrow { width: 28px; height: 28px; margin-top: -14px; right: 9px; } .jiq-app.jiqs-mode .jiq-order-glyph, .jiq-app.jiqs-mode .jiqs-uni { width: 92px; height: 68px; } .jiq-app.jiqs-mode .jiq-headsup { padding: 13px 42px 13px 13px !important; } .jiq-app.jiqs-mode .jiq-headsup-title, .jiq-app.jiqs-mode .jiq-headsup-copy, .jiq-app.jiqs-mode .jiq-headsup-copy p { font-size: 15px !important; } } /* --- ≥1280px: give the money column a touch more air. --- */ @media (min-width: 1280px) { .jiq-app.jiqs-mode .jiq-shell { max-width: 760px !important; } } /* ================================================================ 18. prefers-reduced-motion ================================================================ */ @media (prefers-reduced-motion: reduce) { .jiq-app.jiqs-mode *, .jiq-app.jiqs-mode *::before, .jiq-app.jiqs-mode *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } body.jiq-js .jiq-app.jiqs-mode .jiq-reveal { opacity: 1; transform: none; } .jiq-app.jiqs-mode .jiq-btn-gold::after { display: none; } /* Marquee becomes a static, swipeable, wrapped logo wall. */ .jiq-app.jiqs-mode .jiqs-marquee-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; } .jiq-app.jiqs-mode .jiqs-marquee-track { animation: none !important; transform: none !important; width: auto; flex-wrap: wrap; justify-content: center; } .jiq-app.jiqs-mode .jiqs-marquee-track > [aria-hidden="true"] { display: none; } } /* ================================================================ 19. Cascade-defeat tail — the theme/Elementor must not win these ================================================================ */ /* Classic-skin-only markup the templates always print (payment-badge strip, the old "Trusted by Over 1M+..." heading, the delivery het-wrap). The signature skin supplies its own trust sections, so leaving these visible would duplicate that heading verbatim. Same convention as jiq-result.css. */ .jiq-app.jiqs-mode .jiq-classic-only { display: none !important; } body.jiq-result-active .jiq-app.jiqs-mode h1, body.jiq-result-active .jiq-app.jiqs-mode h2, body.jiq-result-active .jiq-app.jiqs-mode h3, body.jiq-delivery-active .jiq-app.jiqs-mode h1, body.jiq-delivery-active .jiq-app.jiqs-mode h2, body.jiq-delivery-active .jiq-app.jiqs-mode h3 { font-family: var(--s-serif) !important; text-transform: none !important; word-spacing: normal !important; text-shadow: none !important; } body.jiq-result-active .jiq-app.jiqs-mode a.jiq-btn, body.jiq-result-active .jiq-app.jiqs-mode button, body.jiq-delivery-active .jiq-app.jiqs-mode a.jiq-btn, body.jiq-delivery-active .jiq-app.jiqs-mode button { font-family: var(--s-sans) !important; text-decoration: none !important; text-shadow: none !important; line-height: 1.2 !important; } body.jiq-result-active .jiq-app.jiqs-mode table, body.jiq-delivery-active .jiq-app.jiqs-mode table { width: 100% !important; max-width: 100% !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.jiq-result-active .jiq-app.jiqs-mode table th, body.jiq-result-active .jiq-app.jiqs-mode table td, body.jiq-delivery-active .jiq-app.jiqs-mode table th, body.jiq-delivery-active .jiq-app.jiqs-mode table td { border: 0 !important; background-image: none !important; } body.jiq-result-active .jiq-app.jiqs-mode ul, body.jiq-result-active .jiq-app.jiqs-mode li, body.jiq-delivery-active .jiq-app.jiqs-mode ul, body.jiq-delivery-active .jiq-app.jiqs-mode li { list-style: none !important; } body.jiq-result-active .jiq-app.jiqs-mode figure, body.jiq-delivery-active .jiq-app.jiqs-mode figure { margin: 0 !important; max-width: 100% !important; } body.jiq-result-active .jiq-app.jiqs-mode, body.jiq-delivery-active .jiq-app.jiqs-mode, body.jiq-result-active .jiq-app.jiqs-mode .jiqs-trust, body.jiq-delivery-active .jiq-app.jiqs-mode .jiqs-trust { min-width: 0 !important; max-width: 100% !important; } /* ===================================================================== * REVIEWS — faithful rebuild of this site's long-standing section. * Every value measured from the live page (Elementor + Real Testimonials) * so the rebuild is visually identical: blue #0C3DA7 22px/600 heading * between hairlines, the site's own star artwork, white 25px-radius cards * with centred content, #00B67A 20px star boxes. * ===================================================================== */ body.jiq-result-active .jiq-app .jiqr { margin: 56px auto 0 !important; max-width: 1180px !important; padding: 0 16px !important; text-align: center !important; box-sizing: border-box !important; } body.jiq-result-active .jiq-app .jiqr-head { display: flex !important; align-items: center !important; gap: 22px !important; margin: 0 0 14px !important; } body.jiq-result-active .jiq-app .jiqr-rule { flex: 1 1 auto !important; height: 1px !important; background: #111 !important; display: block !important; min-width: 0 !important; } body.jiq-result-active .jiq-app .jiqr-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 22px !important; line-height: 22px !important; font-weight: 600 !important; color: #0C3DA7 !important; margin: 0 !important; padding: 0 !important; letter-spacing: normal !important; text-transform: none !important; flex: 0 0 auto !important; white-space: normal !important; } body.jiq-result-active .jiq-app .jiqr-bigstars { margin: 6px 0 10px !important; line-height: 0 !important; } body.jiq-result-active .jiq-app .jiqr-bigstars img { width: 140px !important; height: 26px !important; display: inline-block !important; max-width: 100% !important; } body.jiq-result-active .jiq-app .jiqr-sub { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #404040 !important; margin: 0 0 34px !important; text-align: center !important; } body.jiq-result-active .jiq-app .jiqr-sub strong { font-weight: 700 !important; color: #404040 !important; } body.jiq-result-active .jiq-app .jiqr-sub-stars { width: 67px !important; height: 13px !important; display: inline-block !important; vertical-align: middle !important; margin: 0 6px !important; } /* Rail + arrows */ body.jiq-result-active .jiq-app .jiqr-rail { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; } body.jiq-result-active .jiq-app .jiqr-nav { flex: 0 0 auto !important; width: 34px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #fff !important; color: #333 !important; border: 1px solid #d9d9d9 !important; border-radius: 2px !important; cursor: pointer !important; padding: 0 !important; box-shadow: none !important; transition: background .18s ease, color .18s ease !important; } body.jiq-result-active .jiq-app .jiqr-nav:hover { background: #f4f4f4 !important; color: #0C3DA7 !important; } body.jiq-result-active .jiq-app .jiqr-track { flex: 1 1 auto !important; display: flex !important; gap: 24px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 26px 4px 30px !important; margin: 0 !important; min-width: 0 !important; } body.jiq-result-active .jiq-app .jiqr-track::-webkit-scrollbar { display: none !important; } /* Card — exact original box */ body.jiq-result-active .jiq-app .jiqr-card { flex: 0 0 auto !important; width: 300px !important; scroll-snap-align: center !important; background: #fff !important; border: 0 !important; border-radius: 25px !important; box-shadow: rgba(0, 0, 0, .5) 1px 1px 31px -19px !important; padding: 20px !important; text-align: center !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; } body.jiq-result-active .jiq-app .jiqr-card-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 20px !important; line-height: 30px !important; font-weight: 600 !important; color: #333 !important; margin: 0 0 18px !important; padding: 0 !important; text-align: center !important; letter-spacing: normal !important; } body.jiq-result-active .jiq-app .jiqr-card-body { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 26px !important; font-weight: 400 !important; color: #333 !important; margin: 0 0 22px !important; text-align: center !important; flex: 1 1 auto !important; } body.jiq-result-active .jiq-app .jiqr-card-name { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; color: #2c2e2c !important; margin: 0 0 8px !important; text-align: center !important; } body.jiq-result-active .jiq-app .jiqr-card-rating { display: block !important; line-height: 0 !important; margin: 0 0 8px !important; } body.jiq-result-active .jiq-app .jiqr-star { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; background: #00B67A !important; color: #fff !important; margin: 0 2px 0 0 !important; border-radius: 0 !important; font-style: normal !important; } body.jiq-result-active .jiq-app .jiqr-card-country { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #444 !important; margin: 0 !important; text-align: center !important; } @media (max-width: 900px) { body.jiq-result-active .jiq-app .jiqr-card { width: 280px !important; } body.jiq-result-active .jiq-app .jiqr-head { gap: 14px !important; } body.jiq-result-active .jiq-app .jiqr-title { font-size: 20px !important; line-height: 26px !important; } } @media (max-width: 600px) { body.jiq-result-active .jiq-app .jiqr { margin-top: 40px !important; } body.jiq-result-active .jiq-app .jiqr-rule { display: none !important; } body.jiq-result-active .jiq-app .jiqr-title { font-size: 19px !important; line-height: 26px !important; } body.jiq-result-active .jiq-app .jiqr-sub { font-size: 15px !important; margin-bottom: 24px !important; } body.jiq-result-active .jiq-app .jiqr-nav { display: none !important; } body.jiq-result-active .jiq-app .jiqr-track { gap: 16px !important; padding: 20px 4px 24px !important; } body.jiq-result-active .jiq-app .jiqr-card { width: calc(100vw - 72px) !important; max-width: 320px !important; } } /* ===================================================================== * ORDER DETAILS — faithful rebuild of the site's original block. * Values measured live: navy #0D3158 header bar, flat rows (no radius), * middle row banded #F1F1F1, right-aligned copy (16px/700 title over * 11px body, #404040), heavy 10px #13457A rule above a 25px/800 total. * ===================================================================== */ body.jiq-result-active .jiq-app .jiqo { margin: 34px auto 0 !important; max-width: 970px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; } body.jiq-result-active .jiq-app .jiqo-head { display: flex !important; align-items: center !important; gap: 14px !important; background: #0D3158 !important; border-radius: 0 !important; padding: 12px 18px !important; margin: 0 !important; } body.jiq-result-active .jiq-app .jiqo-head-icon { width: 34px !important; height: auto !important; flex: 0 0 auto !important; display: block !important; } body.jiq-result-active .jiq-app .jiqo-head-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 24px !important; font-weight: 700 !important; color: #fff !important; letter-spacing: .02em !important; line-height: 1.2 !important; flex: 1 1 auto !important; text-align: center !important; } body.jiq-result-active .jiq-app .jiqo-table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; background: transparent !important; border: 0 !important; table-layout: auto !important; } body.jiq-result-active .jiq-app .jiqo-table tr { background: transparent !important; border: 0 !important; } body.jiq-result-active .jiq-app .jiqo-table tr.jiqo-band { background: #F1F1F1 !important; } body.jiq-result-active .jiq-app .jiqo-table td { border: 0 !important; background: transparent !important; padding: 18px 10px !important; vertical-align: middle !important; } body.jiq-result-active .jiq-app .jiqo-num { width: 58px !important; text-align: center !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 20px !important; font-weight: 400 !important; color: #404040 !important; } body.jiq-result-active .jiq-app .jiqo-media { width: 170px !important; text-align: center !important; } body.jiq-result-active .jiq-app .jiqo-media img { width: 147px !important; height: auto !important; max-width: 100% !important; display: inline-block !important; border-radius: 0 !important; box-shadow: none !important; } body.jiq-result-active .jiq-app .jiqo-desc { text-align: right !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 11px !important; line-height: 16.5px !important; font-weight: 400 !important; color: #404040 !important; padding-right: 18px !important; } body.jiq-result-active .jiq-app .jiqo-title { display: block !important; font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; color: #404040 !important; text-align: right !important; margin: 0 0 2px !important; } /* Total — heavy navy rule, exactly like the original het-border */ body.jiq-result-active .jiq-app .jiqo-total { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; background: transparent !important; } body.jiq-result-active .jiq-app .jiqo-total th { border: 0 !important; border-top: 10px solid #13457A !important; background: transparent !important; padding: 16px 10px !important; text-align: right !important; vertical-align: middle !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 11px !important; line-height: 16.5px !important; font-weight: 400 !important; color: #404040 !important; } body.jiq-result-active .jiq-app .jiqo-total-label { width: 78% !important; padding-left: 18px !important; } body.jiq-result-active .jiq-app .jiqo-total-price { width: 22% !important; padding-right: 18px !important; white-space: nowrap !important; } body.jiq-result-active .jiq-app .jiqo-total-word, body.jiq-result-active .jiq-app .jiqo-final { display: block !important; font-size: 25px !important; line-height: 37.5px !important; font-weight: 800 !important; color: #404040 !important; text-align: right !important; } body.jiq-result-active .jiq-app .jiqo-strike { display: inline-block !important; margin-right: 8px !important; font-size: 16px !important; font-weight: 600 !important; color: #9a9a9a !important; text-decoration: line-through !important; } @media (max-width: 600px) { body.jiq-result-active .jiq-app .jiqo-head-title { font-size: 18px !important; } body.jiq-result-active .jiq-app .jiqo-head-icon { width: 26px !important; } body.jiq-result-active .jiq-app .jiqo-table td { padding: 14px 6px !important; } body.jiq-result-active .jiq-app .jiqo-num { width: 30px !important; font-size: 16px !important; } body.jiq-result-active .jiq-app .jiqo-media { width: 96px !important; } body.jiq-result-active .jiq-app .jiqo-media img { width: 92px !important; } body.jiq-result-active .jiq-app .jiqo-desc { padding-right: 10px !important; font-size: 11px !important; } body.jiq-result-active .jiq-app .jiqo-title { font-size: 14px !important; line-height: 20px !important; } body.jiq-result-active .jiq-app .jiqo-total-word, body.jiq-result-active .jiq-app .jiqo-final { font-size: 20px !important; line-height: 30px !important; } body.jiq-result-active .jiq-app .jiqo-total th { border-top-width: 8px !important; padding: 12px 8px !important; } body.jiq-result-active .jiq-app .jiqo-total-label { padding-left: 10px !important; } body.jiq-result-active .jiq-app .jiqo-total-price { padding-right: 10px !important; } } /* Specificity fix: the blanket `.jiq-app.jiqs-mode table th { border:0 }` * cascade-defeat rule outranks the total rule above, which killed the heavy * navy rule. Re-assert it at equal-or-higher specificity. */ body.jiq-result-active .jiq-app.jiqs-mode .jiqo-total th, body.jiq-result-active .jiq-app .jiqo-total th { border-top: 10px solid #13457A !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; } @media (max-width: 600px) { body.jiq-result-active .jiq-app.jiqs-mode .jiqo-total th, body.jiq-result-active .jiq-app .jiqo-total th { border-top-width: 8px !important; } } /* --------------------------------------------------------------------- * Alignment + star + certificate corrections * ------------------------------------------------------------------- */ /* 1. Reviews heading was flex-start, so it sat left while the stars and * sub-line were centred. Centre the whole head at every width. */ body.jiq-result-active .jiq-app .jiqr-head, body.jiq-result-active .jiq-app.jiqs-mode .jiqr-head { justify-content: center !important; text-align: center !important; } body.jiq-result-active .jiq-app .jiqr-title { text-align: center !important; } body.jiq-result-active .jiq-app .jiqr-bigstars, body.jiq-result-active .jiq-app .jiqr-sub { text-align: center !important; } /* 2. Per-card rating uses the same star artwork as the header row. */ body.jiq-result-active .jiq-app .jiqr-card-stars { width: 110px !important; height: 20px !important; display: inline-block !important; max-width: 100% !important; margin: 0 auto !important; } /* 3. Certificate preview: flat like the original — no rounded corners, no * card chrome. Just a soft grounded shadow and a faint diagonal sheen. */ body.jiq-result-active .jiq-app .jiq-cert-frame, body.jiq-result-active .jiq-app.jiqs-mode .jiq-cert-frame { position: relative !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; box-shadow: none !important; margin: 0 auto !important; max-width: 560px !important; line-height: 0 !important; isolation: isolate !important; } body.jiq-result-active .jiq-app .jiq-cert-frame img, body.jiq-result-active .jiq-app.jiqs-mode .jiq-cert-frame img { border-radius: 0 !important; border: 0 !important; width: 100% !important; height: auto !important; display: block !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 10px 22px -12px rgba(16, 24, 40, .28), 0 26px 48px -30px rgba(16, 24, 40, .32) !important; } /* Faint sheen sweeping across the artwork — subtle, never washes it out. */ body.jiq-result-active .jiq-app .jiq-cert-frame::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; border-radius: 0 !important; background: linear-gradient(104deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.34) 46%, rgba(255,255,255,.10) 53%, rgba(255,255,255,0) 62%) !important; mix-blend-mode: screen !important; opacity: .85 !important; z-index: 2 !important; } @media (prefers-reduced-motion: reduce) { body.jiq-result-active .jiq-app .jiq-cert-frame::after { opacity: .5 !important; } } /* --------------------------------------------------------------------- * University logos: full colour and noticeably larger (was greyscaled * and small). Payment strip: the site's own Stripe/card assurance image. * ------------------------------------------------------------------- */ body.jiq-result-active .jiq-app .jiqs-uni, body.jiq-result-active .jiq-app.jiqs-mode .jiqs-uni { width: 210px !important; height: 130px !important; flex: 0 0 210px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 14px !important; box-sizing: border-box !important; } body.jiq-result-active .jiq-app .jiqs-uni img, body.jiq-result-active .jiq-app.jiqs-mode .jiqs-uni img { filter: none !important; -webkit-filter: none !important; opacity: 1 !important; max-width: 100% !important; max-height: 108px !important; width: auto !important; height: auto !important; object-fit: contain !important; mix-blend-mode: normal !important; } body.jiq-result-active .jiq-app .jiqs-uni:hover img { transform: none !important; } body.jiq-result-active .jiq-app .jiqs-unis-title { font-size: clamp(20px, 2.4vw, 28px) !important; margin-bottom: 8px !important; } /* Safe-checkout badge image under the CTA — must survive every * theme/Elementor image rule (max-width caps, borders, shadows). */ body.jiq-result-active .jiq-app.jiqs-mode .jiq-safeimg { display: block !important; margin: 20px auto 0 !important; padding: 0 !important; text-align: center !important; line-height: 0 !important; } body.jiq-result-active .jiq-app.jiqs-mode .jiq-safeimg img { width: min(480px, 94%) !important; max-width: 94% !important; height: auto !important; display: inline-block !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; } /* "Important Heads Up !!!" notice. The × is a