:root{ --navy-950:#180A2B; --navy-900:#0f2038; --navy-800:#152a4a; --navy-700:#1e3a5f; --navy-600:#2a4d78; --gold-700:#8f6f1d; --gold-600:#b08d2e; --gold-500:#c9a84c; --gold-300:#e2cd8b; --gold-100:#f6efdc; --paper:#f7f6f2; --white:#ffffff; --ink:#161d28; --ink-soft:#525e6d; --line:#e6e4dd; --line-dark:rgba(201,168,76,0.18); --radius-sm:6px; --radius:10px; --radius-lg:14px; --shadow-1:0 1px 3px rgba(10,20,40,0.06); --shadow-2:0 10px 26px rgba(10,20,40,0.09); --font-display:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --font-body:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2{ font-family:var(--font-display); font-weight:600; color:var(--navy-950); line-height:1.12; letter-spacing:-0.01em; margin:0 0 .5em; } h3,h4{ font-family:var(--font-body); font-weight:700; color:var(--navy-950); line-height:1.2; letter-spacing:-0.015em; margin:0 0 .5em; } p{color:var(--ink-soft);} a{color:var(--navy-700);text-decoration:none;transition:color .2s var(--ease);} a:hover{color:var(--gold-600);} .container{max-width:1160px;margin:0 auto;padding:0 28px;} .small{font-size:.92rem;color:var(--ink-soft);} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700; color:var(--gold-700); } .eyebrow:before{content:"";width:22px;height:2px;background:var(--gold-600);display:inline-block;} .badge{ display:inline-block;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700; padding:5px 11px;border-radius:4px;background:var(--gold-100);color:var(--navy-800); } .badge-locked{background:#f0f1f3;color:var(--ink-soft);} .badge-warn{background:#fdeeda;color:#8a5a00;} .badge-on-navy{background:rgba(226,205,139,0.12);color:var(--gold-300);border:1px solid rgba(226,205,139,0.28);} .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease), transform .6s var(--ease);} .reveal.in{opacity:1;transform:translateY(0);} .reveal-delay-1{transition-delay:.08s;} .reveal-delay-2{transition-delay:.16s;} .reveal-delay-3{transition-delay:.24s;} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}} /* Header */ header.site{ background:var(--white); color:var(--navy-950); position:sticky;top:0;z-index:50; border-bottom:1px solid var(--line); } .nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;max-width:1160px;margin:0 auto;gap:20px;} .brand{display:flex;align-items:center;gap:11px;color:var(--navy-950);flex-shrink:0;} .brand small{display:block;font-family:var(--font-body);font-size:.55rem;letter-spacing:.15em;color:var(--ink-soft);font-weight:600;margin-top:4px;white-space:nowrap;} .brand-stack{display:flex;flex-direction:column;justify-content:center;} .brand-logo-svg{height:34px;width:auto;display:block;} .brand-logo-footer{height:32px;} .nav-right{display:flex;align-items:center;gap:38px;} nav.main-links{display:flex;gap:22px;align-items:center;} nav.main-links a{color:var(--ink);font-size:.88rem;font-weight:600;white-space:nowrap;} nav.main-links a:hover{color:var(--gold-600);} .nav-cta{display:flex;gap:10px;align-items:center;flex-shrink:0;} .nav-cta .btn{white-space:nowrap;} .menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;} .menu-toggle span{display:block;width:100%;height:2px;background:var(--navy-950);border-radius:2px;transition:transform .2s var(--ease), opacity .2s var(--ease);} .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .menu-toggle.open span:nth-child(2){opacity:0;} .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-nav{display:none;flex-direction:column;padding:8px 28px 20px;border-top:1px solid var(--line);background:var(--white);} .mobile-nav.open{display:flex;} .mobile-nav a{padding:12px 0;font-size:.95rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);} .mobile-nav-cta{display:flex;flex-direction:column;gap:10px;margin-top:16px;} .btn{ display:inline-block;padding:11px 22px;border-radius:6px;font-weight:600;font-size:.88rem; border:1px solid transparent;cursor:pointer;transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); font-family:var(--font-body); } .btn:hover{transform:translateY(-1px);} .btn-gold{background:var(--navy-950);color:var(--white);} .btn-gold:hover{background:var(--navy-800);color:var(--gold-300);} .btn-ghost{background:transparent;border-color:var(--line);color:var(--navy-900);} .btn-ghost:hover{border-color:var(--gold-600);color:var(--gold-600);} .btn-navy{background:var(--navy-950);color:var(--white);} .btn-navy:hover{background:var(--navy-800);color:var(--gold-300);} .btn-outline{background:transparent;border-color:var(--navy-700);color:var(--navy-800);} .btn-outline:hover{border-color:var(--gold-600);color:var(--navy-950);} .btn-block{display:block;width:100%;text-align:center;} .btn-disabled{opacity:.42;cursor:not-allowed;} .btn-disabled:hover{transform:none;box-shadow:none;} .btn-lg{padding:15px 28px;font-size:.94rem;} /* Hero */ .hero{ background: linear-gradient(100deg, rgba(7,15,28,0.96) 0%, rgba(7,15,28,0.9) 40%, rgba(7,15,28,0.66) 100%), radial-gradient(120% 90% at 78% 12%, rgba(181,137,43,.16) 0%, transparent 58%), linear-gradient(100deg,#0c1e35 0%,#071426 100%); padding:104px 0 92px; } .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;} .hero h1{font-size:3.1rem;max-width:620px;color:var(--white);} .hero .lede{color:rgba(247,244,234,0.82);font-size:1.14rem;max-width:520px;margin-top:18px;} .hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;} .hero-note{margin-top:20px;font-size:.85rem;color:rgba(247,244,234,0.55);} .hero .eyebrow{color:var(--gold-300);} .hero .eyebrow:before{background:var(--gold-500);} .hero .btn-gold{background:var(--gold-600);color:var(--navy-950);font-weight:700;} .hero .btn-gold:hover{background:var(--gold-500);color:var(--navy-950);} .hero .btn-ghost{border-color:rgba(247,244,234,0.35);color:rgba(247,244,234,0.9);} .hero .btn-ghost:hover{border-color:var(--gold-500);color:var(--gold-300);} /* Product mockup */ .product-panel{ background:var(--navy-950);border:1px solid var(--navy-900);border-radius:var(--radius-lg); padding:0;overflow:hidden;box-shadow:0 20px 50px rgba(10,20,40,0.18); } .mockup-topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.08);} .mockup-dots{display:flex;gap:6px;} .mockup-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.16);} .mockup-title{font-size:.72rem;letter-spacing:.08em;color:rgba(247,244,234,0.5);text-transform:uppercase;} .mockup-body{display:grid;grid-template-columns:120px 1fr;min-height:280px;} .mockup-nav{border-right:1px solid rgba(255,255,255,0.08);padding:14px 10px;} .mockup-nav-item{padding:9px 10px;border-radius:6px;font-size:.72rem;color:rgba(247,244,234,0.55);margin-bottom:4px;} .mockup-nav-item.active{background:rgba(226,205,139,0.12);color:var(--gold-300);font-weight:600;} .mockup-main{padding:18px 20px;} .ring-wrap{display:flex;align-items:center;gap:16px;} .ring-label{font-size:.78rem;color:rgba(247,244,234,0.6);} .ring-value{font-size:1.5rem;color:var(--gold-300);font-weight:800;} .mock-bar-row{display:flex;align-items:center;gap:10px;margin-top:12px;} .mock-bar-row span{font-size:.74rem;color:rgba(247,244,234,0.6);width:120px;flex-shrink:0;} .mock-bar-track{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,0.08);overflow:hidden;} .mock-bar-fill{height:100%;border-radius:99px;background:var(--gold-500);} .mock-bar-pct{font-size:.74rem;color:var(--gold-300);width:32px;text-align:right;} .mock-opt{padding:12px 15px;border-radius:6px;border:1px solid rgba(255,255,255,0.14);color:rgba(247,244,234,0.85);font-size:.89rem;display:flex;align-items:center;justify-content:space-between;gap:10px;} .mock-opt.correct{border-color:rgba(120,200,140,0.5);background:rgba(120,200,140,0.08);} .mock-opt.incorrect{border-color:rgba(220,120,120,0.5);background:rgba(220,120,120,0.08);} .mock-opt-tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;opacity:.75;flex-shrink:0;} .mock-explain{margin-top:14px;padding:14px 16px;border-radius:6px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);font-size:.82rem;line-height:1.55;color:rgba(247,244,234,0.75);} .mock-q-footer{display:flex;justify-content:space-between;margin-top:12px;font-size:.76rem;color:rgba(226,205,139,0.65);} .mini-lead-form{display:flex;flex-direction:column;gap:8px;margin-top:14px;} .mini-lead-form input{padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:.86rem;font-family:var(--font-body);} section{padding:96px 0;} .section-tight{padding:68px 0;} .section-head{max-width:660px;margin:0 auto 48px;text-align:center;} .section-head h2{font-size:2.1rem;} .section-head.align-left{margin-left:0;text-align:left;} .grid-3-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;} .grid-3 > div{padding:26px 24px;border-top:2px solid var(--navy-950);} .grid-3 > div:not(:last-child){border-right:1px solid var(--line);} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:50px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;} .grid-4 > div{padding:24px 22px;border-top:2px solid var(--navy-950);} .grid-4 > div:not(:last-child){border-right:1px solid var(--line);} .card{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius); padding:26px;box-shadow:var(--shadow-1); } .plain-block h3{font-size:1.05rem;} .icon-tile{ width:38px;height:38px;border-radius:7px;background:var(--navy-950);color:var(--gold-500); display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:16px;font-weight:700; } .trust-strip{background:var(--navy-950);padding:22px 0;} .trust-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px 30px;} .trust-row span{color:rgba(247,244,234,0.75);font-size:.83rem;font-weight:500;} .tabs-bar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:32px;border-bottom:1px solid var(--line);} .tab-btn{ padding:12px 18px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--ink-soft); font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s var(--ease);font-family:var(--font-body); } .tab-btn.active{color:var(--navy-950);border-bottom-color:var(--gold-600);} .tab-panel{display:none;} .tab-panel.active{display:block;animation:fadeUp .35s var(--ease);} @keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}} .product-frame{background:var(--navy-950);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 50px rgba(10,20,40,0.16);} .course-tile{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px; display:flex;flex-direction:column;gap:14px;position:relative; } .course-tile.locked{opacity:.85;} .course-tile.featured{border:1px solid var(--navy-950);border-top:3px solid var(--gold-600);} .course-meta{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0;} .course-meta span{font-size:.76rem;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);padding:4px 10px;border-radius:4px;} .course-photo{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin-bottom:2px;} .band-navy{background:linear-gradient(rgba(7,15,28,0.94),rgba(7,15,28,0.97));color:rgba(247,244,234,0.85);} .band-navy h2{color:var(--white);} .band-navy .eyebrow{color:var(--gold-300);} .band-navy .eyebrow:before{background:var(--gold-500);} .band-cream{background:var(--white);} .journey-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:start;max-width:1000px;margin:0 auto;} .journey-photo{width:100%;border-radius:var(--radius);object-fit:cover;aspect-ratio:4/5;} .journey-caption{font-size:.82rem;color:var(--ink-soft);margin-top:12px;} .journey{display:flex;flex-direction:column;gap:0;max-width:720px;margin:0 auto;} .journey-grid .journey{max-width:none;margin:0;} .journey-step{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);} .journey-step:last-child{border-bottom:none;} .journey-num{ flex-shrink:0;width:36px;height:36px;border-radius:6px;background:var(--navy-950);color:var(--gold-500); display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem; } .journey-step h4{margin-bottom:4px;font-size:1rem;} .journey-step p{margin:0;font-size:.9rem;} .roadmap-note{max-width:720px;margin:26px auto 0;padding:16px 20px;background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius-sm);font-size:.86rem;color:var(--ink-soft);} .pricing-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);} .price-card{background:var(--white);padding:36px 30px;display:flex;flex-direction:column;} .price-card:not(:last-child){border-right:1px solid var(--line);} .price-card.featured{background:var(--navy-950);color:var(--white);position:relative;} .price-card.featured h3,.price-card.featured .price-amount{color:var(--white);} .price-card.featured .price-amount span{color:rgba(247,244,234,0.6);} .price-card.featured li{color:rgba(247,244,234,0.82);border-bottom-color:rgba(255,255,255,0.1);} .price-card .ribbon{display:inline-block;background:#B84A00;color:#fff; font-size:.68rem;font-weight:700;padding:4px 12px;border-radius:4px;letter-spacing:.05em;margin-bottom:14px;width:fit-content;} .price-amount{font-family:var(--font-display);font-size:2.5rem;font-weight:600;color:var(--navy-950);margin:10px 0;letter-spacing:-0.01em;} .price-amount span{font-family:var(--font-body);font-size:.92rem;color:var(--ink-soft);font-weight:500;} .price-card ul{list-style:none;padding:0;margin:18px 0;flex:1;} .price-card li{padding:8px 0;font-size:.88rem;border-bottom:1px solid #f1efe4;color:var(--ink-soft);} .price-card li:before{content:"\2713 ";color:var(--gold-600);font-weight:700;} .provisional-banner{background:#fdeeda;border:1px solid #f0c98a;color:#7a4d00;padding:14px 20px;border-radius:var(--radius-sm);font-size:.87rem;margin-bottom:38px;text-align:center;} .faq-item{border-bottom:1px solid var(--line);padding:20px 0;} .faq-item summary{cursor:pointer;font-weight:600;font-size:.98rem;color:var(--navy-900);list-style:none;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary:after{content:"+";font-size:1.25rem;color:var(--gold-600);} .faq-item[open] summary:after{content:"\2212";} .faq-item p{margin-top:10px;} .founder-wrap{max-width:780px;margin:0 auto;text-align:left;} .founder-icon{width:56px;height:56px;margin-bottom:22px;} .founder-icon svg{width:100%;height:auto;display:block;} .founder-creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;} .founder-creds span{font-size:.76rem;background:rgba(255,255,255,0.06);border:1px solid rgba(226,205,139,0.22);padding:6px 12px;border-radius:4px;color:rgba(247,244,234,0.85);font-weight:500;} footer.site{background:var(--navy-950);color:rgba(247,244,234,0.8);padding:56px 0 30px;border-top:1px solid var(--line-dark);} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr 1fr;gap:30px;} /* The footer column headings are

in the markup, but this rule only ever targeted h4. So they fell through to h3,h4{color:var(--navy-950)} and rendered deep purple on the deep purple footer: a contrast ratio of 1.0, invisible, in Light mode, on every page. It read as "no heading there" rather than as a bug, which is why it survived this long. */ footer.site h3,footer.site h4{color:var(--white);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;font-weight:700;} footer.site a{color:rgba(247,244,234,0.72);display:block;padding:4px 0;font-size:.88rem;} footer.site a:hover{color:var(--gold-500);} .footer-disclaimer{border-top:1px solid var(--line-dark);margin-top:34px;padding-top:22px;font-size:.79rem;color:rgba(247,244,234,0.45);} .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:16px;font-size:.79rem;color:rgba(247,244,234,0.4);} .preview-flag{ position:fixed;bottom:18px;right:18px;background:var(--navy-950);color:var(--gold-300); padding:10px 15px;border-radius:6px;font-size:.74rem;box-shadow:0 8px 24px rgba(0,0,0,0.3);z-index:80; border:1px solid var(--line-dark);max-width:240px; } .page-hero{background:var(--navy-950);padding:64px 0;} .page-hero h1{font-size:2.5rem;color:var(--white);} .page-hero p{color:rgba(247,244,234,0.7);max-width:640px;} .about-banner{width:100%;max-height:380px;object-fit:cover;object-position:center 30%;border-radius:var(--radius);margin:0 0 40px;display:block;} .legal-body{max-width:760px;margin:0 auto;} .legal-body h2{margin-top:34px;font-size:1.3rem;} .legal-body p, .legal-body li{color:var(--ink-soft);font-size:.95rem;} .draft-flag{background:#fdeeda;border:1px solid #f0c98a;color:#7a4d00;padding:16px 20px;border-radius:var(--radius-sm);font-size:.87rem;margin-bottom:30px;} .form-card{max-width:420px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px;} .form-card label{display:block;font-size:.82rem;font-weight:600;margin:14px 0 6px;color:var(--navy-900);} .form-card input,.form-card textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:6px;font-size:.93rem;font-family:var(--font-body);} .form-card textarea{resize:vertical;} .form-note{background:var(--paper);color:var(--ink-soft);font-size:.79rem;padding:10px 14px;border-radius:6px;margin-top:16px;border:1px solid var(--line);} .demo-wrap{max-width:720px;margin:0 auto;} .demo-progress{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:.83rem;color:var(--ink-soft);} .demo-q{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;} .demo-q h3{font-size:1.1rem;} .demo-opt{ display:block;width:100%;text-align:left;padding:14px 16px;margin:9px 0;border:1px solid var(--line); border-radius:var(--radius-sm);background:var(--white);cursor:pointer;font-size:.94rem;font-family:var(--font-body);transition:border-color .2s var(--ease), background .2s var(--ease); color:var(--ink); /* Batch 11: Safari on iPhone gives a button its own blue otherwise */ } .demo-opt:hover{border-color:var(--gold-600);} .demo-opt.correct{border-color:#2f9e5c;background:#eefaf1;} .demo-opt.incorrect{border-color:#c94b4b;background:#fdefee;} .demo-opt[disabled]{cursor:default;} /* Batch 11 (4 October). Safari greys a disabled button; once answered, every option keeps the page's ink, the correct and incorrect marks as before. */ .demo-opt:disabled{color:var(--ink);opacity:1;} .demo-explain{margin-top:16px;padding:16px;border-radius:var(--radius-sm);background:var(--paper);font-size:.9rem;display:none;border:1px solid var(--line);} .demo-explain.show{display:block;} .demo-nav{display:flex;justify-content:space-between;margin-top:18px;} /* ---- v6: richer demo explanations ---- */ .demo-q{-webkit-user-select:none;user-select:none;} .demo-q input{-webkit-user-select:text;user-select:text;} .demo-verdict{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin:0 0 10px;} .demo-verdict.is-correct{color:#2f9e5c;} .demo-verdict.is-incorrect{color:#c94b4b;} .demo-explain-main{margin:0 0 12px;color:var(--ink);} .demo-why-wrong{border-top:1px solid var(--line);padding-top:12px;color:var(--ink-soft);} .demo-why-wrong ul{margin:8px 0 0;padding-left:18px;} .demo-why-wrong li{margin-bottom:8px;font-size:.88rem;} .demo-why-wrong em{color:var(--navy-800);font-style:normal;font-weight:600;} .demo-tip{margin:14px 0 0;padding:12px 14px;background:var(--gold-100);border-left:3px solid var(--gold-600);border-radius:4px;color:var(--navy-900);font-size:.88rem;} /* ---- Batch 15 (7 October): the demo's answer screen is the app's own ---- answer-feedback.js draws it, in Practice and here: the answer chosen, "How sure are you?" opening inside it, the verdict and its notes, and the longer explanation behind "I do not understand this". This is the app's look (app.css), in this page's colours. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .demo-opt.is-chosen{border-color:var(--navy-600);box-shadow:inset 0 0 0 1px var(--navy-600);background:var(--paper-2); border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0;} .demo-q .conf-ask{margin:0 0 9px;padding:12px 14px 13px;background:var(--paper-2);border:1px solid var(--navy-600);border-top:0; border-radius:0 0 var(--radius-sm) var(--radius-sm); box-shadow:inset 1px 0 0 var(--navy-600),inset -1px 0 0 var(--navy-600),inset 0 -1px 0 var(--navy-600);} .demo-q .conf-q{margin:0 0 7px;font-weight:600;color:var(--navy-900);} .demo-q .conf-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px;} .demo-q .conf{border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:999px;padding:6px 14px; font:inherit;font-size:.85rem;cursor:pointer;min-height:36px;} .demo-q .conf:hover{border-color:var(--gold-600);} .demo-q .conf:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;} .demo-q .conf-note{margin:0;font-size:.85rem;color:var(--ink-soft);} .demo-explain .ok,.demo-explain .err{padding:11px 14px;border-radius:var(--radius-sm);margin:0 0 12px;font-size:.9rem;font-weight:600;} .demo-explain .ok{background:#F1FAF5;border:1px solid #A6D9BF;color:#12603C;} .demo-explain .err{background:#FDF3F2;border:1px solid #E9B7B3;color:#8C1D18;} .demo-explain .note{border-left:3px solid var(--gold-500);background:var(--gold-100);padding:12px 14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:11px 0;color:var(--ink);} .demo-explain .note h4{margin:0 0 5px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-700);} .demo-explain .principle{border-left-color:var(--navy-600);background:var(--paper-2);} .demo-explain .principle h4{color:var(--navy-700);} .demo-explain .muted{color:var(--ink-soft);font-size:.86rem;} .demo-explain .btn-ghost{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:var(--radius-sm); background:transparent;color:var(--navy-900);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;min-height:44px;} .demo-explain .btn-ghost:hover{border-color:var(--gold-600);color:var(--gold-700);} /* Batch 16. "Why the other answers are wrong": one entry per wrong answer not chosen. */ .demo-explain .other-note{margin:6px 0 0;overflow-wrap:anywhere;} .demo-explain .other-note + .other-note{margin-top:10px;} /* ---- v6: editorial step list (How It Works) ---- */ .step-list{list-style:none;counter-reset:step;padding:0;margin:0;} .step-list li{counter-increment:step;position:relative;padding:30px 0 30px 96px;border-bottom:1px solid var(--line);} .step-list li:last-child{border-bottom:none;} .step-list li:before{ content:counter(step,decimal-leading-zero); position:absolute;left:0;top:22px; font-family:var(--font-display);font-size:2.9rem;font-weight:600;line-height:1; color:var(--gold-500); } .step-list li:after{content:"";position:absolute;left:2px;top:78px;width:44px;height:1px;background:var(--line);} .step-list h3{font-size:1.15rem;} /* ---- v6: luxe cards on navy bands ---- */ .band-navy .card{ background:rgba(255,255,255,0.045);border:1px solid rgba(226,205,139,0.18); border-top:2px solid var(--gold-500);box-shadow:none;color:rgba(247,244,234,0.8); } .band-navy .card h3{color:var(--white);} .band-navy .card p{color:rgba(247,244,234,0.66);} .card{transition:transform .25s var(--ease), box-shadow .25s var(--ease);} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);} /* ---- v6: nav dropdown ---- */ .nav-drop{position:relative;} .nav-drop > a{display:inline-flex;align-items:center;gap:5px;} .nav-drop > a:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);} /* The dropdown used to close while the pointer was still moving into it. Cause: margin-top:8px put a real gap between the trigger and the menu, and crossing that gap meant hovering neither, so .nav-drop:hover dropped and the menu vanished. It was not a timing bug, it was eight pixels of dead space, which is why it hit Resources and About identically: one shared rule. Two changes. The offset moves into top: so the gap is inside the hover target rather than outside it, and a ::before bridge covers it so the pointer is never over nothing. Then a short closing delay, so a small overshoot on the way down does not punish the candidate. Opening stays instant; only closing waits. */ .nav-drop-menu{ position:absolute;top:calc(100% + 8px);left:-14px;min-width:250px;padding:10px 0;margin-top:0; background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-2); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; transition-delay:.22s; } .nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;} .nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{ opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;} .nav-drop-menu a{display:block;padding:9px 18px;font-size:.86rem;font-weight:500;color:var(--ink);} .nav-drop-menu a:hover{background:var(--paper);color:var(--gold-600);} .nav-drop-menu a small{display:block;font-size:.72rem;color:var(--ink-soft);font-weight:400;} .mobile-nav .mobile-sub{padding-left:14px;font-size:.88rem;color:var(--ink-soft);} /* ---- v6: contact page ---- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2);max-width:960px;margin:0 auto;background:var(--white);} .contact-photo{position:relative;min-height:420px;} .contact-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .contact-photo .contact-overlay{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;background:linear-gradient(transparent, rgba(7,15,28,0.88));color:rgba(247,244,234,0.92);font-family:var(--font-display);font-size:1.15rem;line-height:1.4;} .contact-grid .form-card{max-width:none;border:none;border-radius:0;} /* ---- v6: info pages (What is ICWIM, guide, resources) ---- */ .lead-serif{font-family:var(--font-display);font-size:1.3rem;line-height:1.55;color:var(--navy-900);max-width:720px;} .info-body{max-width:820px;margin:0 auto;} .info-body h2{margin-top:44px;font-size:1.6rem;} .info-body h3{margin-top:26px;font-size:1.08rem;} .info-body p,.info-body li{color:var(--ink-soft);font-size:.97rem;} .info-body ul{padding-left:20px;} .info-body li{margin-bottom:7px;} .fact-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);margin:34px 0;} .fact-strip > div{padding:22px 20px;border-right:1px solid var(--line);} .fact-strip > div:last-child{border-right:none;} .fact-strip .fact-num{font-family:var(--font-display);font-size:1.9rem;font-weight:600;color:var(--navy-950);} .fact-strip .fact-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);font-weight:600;margin-top:4px;} .chapter-list{list-style:none;padding:0;margin:20px 0;counter-reset:chap;} .chapter-list li{counter-increment:chap;display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);} .chapter-list li:before{content:counter(chap,decimal-leading-zero);font-family:var(--font-display);font-weight:600;color:var(--gold-600);font-size:1.05rem;flex-shrink:0;} .chapter-list strong{color:var(--navy-950);} .resource-list{list-style:none;padding:0;margin:24px 0;} .resource-list li{border:1px solid var(--line);border-radius:8px;background:var(--white);margin-bottom:12px;transition:border-color .2s var(--ease);} .resource-list li:hover{border-color:var(--gold-500);} .resource-list a{display:block;padding:16px 20px;font-weight:600;color:var(--navy-900);} .resource-list a small{display:block;font-weight:400;font-size:.83rem;color:var(--ink-soft);margin-top:3px;} .resource-list a:after{content:"\2197";float:right;color:var(--gold-600);} .callout{background:var(--gold-100);border-left:3px solid var(--gold-600);padding:16px 20px;border-radius:4px;font-size:.92rem;color:var(--navy-900);margin:26px 0;} .callout-navy{background:var(--navy-950);border:none;border-radius:var(--radius);padding:26px 28px;color:rgba(247,244,234,0.85);margin:30px 0;} .callout-navy strong{color:var(--gold-300);} .guarantee-note{max-width:640px;margin:26px auto 0;text-align:center;padding:18px 24px;background:var(--white);border:1px solid var(--gold-500);border-radius:var(--radius);} .guarantee-note strong{font-family:var(--font-display);font-size:1.05rem;color:var(--navy-950);display:block;margin-bottom:6px;} .guarantee-note p{margin:0;font-size:.88rem;} @media(max-width:900px){ .fact-strip{grid-template-columns:1fr 1fr;} .fact-strip > div{border-bottom:1px solid var(--line);} .contact-grid{grid-template-columns:1fr;} .contact-photo{min-height:260px;} .step-list li{padding-left:66px;} .step-list li:before{font-size:2.1rem;top:28px;} .step-list li:after{display:none;} } @media(max-width:1180px) and (min-width:981px){ .nav-right{gap:22px;} nav.main-links{gap:15px;} nav.main-links a{font-size:.83rem;} .nav-cta .btn{padding:9px 15px;font-size:.83rem;} } @media(max-width:980px){ .nav-right{display:none;} .menu-toggle{display:flex;} } @media(max-width:900px){ section{padding:64px 0;} .hero{padding:76px 0 64px;} /* These collapse to one column on small screens. An inline grid-template-columns on the element beats this rule, because inline styles outrank a stylesheet selector. That is exactly how the course tiles on the home page ended up 499px wide inside a 375px viewport: the responsive rule was correct and simply never applied. If a grid needs a different column count, add a class rather than an inline style. */ .hero-grid,.grid-3,.grid-3-cards,.grid-2,.grid-4,.pricing-grid,.footer-grid,.journey-grid{grid-template-columns:1fr;} .journey-photo{aspect-ratio:16/9;} .journey-grid .journey{order:2;} .grid-3 > div, .grid-4 > div{border-right:none !important;} .price-card:not(:last-child){border-right:none;border-bottom:1px solid var(--line);} .hero h1{font-size:2.2rem;} .section-head h2{font-size:1.7rem;} .page-hero h1{font-size:2rem;} .mockup-body{grid-template-columns:1fr;} .mockup-nav{display:none;} .brand small{font-size:.5rem;letter-spacing:.12em;} .brand-logo-svg{height:30px;} } /* ============================================================ Bourse Prep · visual polish layer Loads AFTER assets/style.css and overrides only the look. No HTML changes. No content changes. Remove the to revert. Add to every page, immediately after the style.css link: ============================================================ */ :root{ /* Deeper, warmer navy. The old #0a1628 reads flat and slightly cold. */ --navy-950:#071426; --navy-900:#0c1e35; --navy-800:#132b47; --navy-700:#1c3c60; --navy-600:#28527d; /* Richer gold. The old #b08d2e is dusty; this holds its colour on both cream and navy, and reads as brass rather than mustard. */ --gold-700:#8a6a1c; --gold-600:#b5892b; --gold-500:#cfa94e; --gold-400:#e0c274; --gold-300:#ecd9a0; --gold-100:#f7f0dd; /* Three real surfaces instead of one white sheet. */ --paper:#faf8f4; /* page default */ --paper-2:#f3f0e9; /* recessed bands, this is the actual cream */ --white:#ffffff; /* raised cards only */ --ink:#111a26; --ink-soft:#4d5a6b; --ink-faint:#7c8798; --line:#e4e0d6; --line-soft:#efece4; --line-gold:rgba(181,137,43,.28); /* Two radii. Not seven. */ --radius-sm:4px; --radius:10px; --radius-lg:10px; /* Shadows tinted with the navy hue, never neutral grey. */ --shadow-1:0 1px 2px rgba(7,20,38,.05); --shadow-2:0 2px 4px rgba(7,20,38,.04), 0 14px 34px -12px rgba(7,20,38,.16); --shadow-3:0 2px 4px rgba(7,20,38,.05), 0 28px 60px -24px rgba(7,20,38,.28); } /* ---------- 1. Page rhythm ------------------------------------ Alternate surfaces so the eye has somewhere to rest. This single change does more than anything else on this list. */ body{background:var(--paper);} .band-cream{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* Vary vertical padding instead of 96px everywhere. */ section{padding:104px 0;} .section-tight{padding:76px 0;} .band-cream{padding:112px 0;} .band-navy{padding:120px 0;} @media(max-width:860px){ section{padding:68px 0;} .section-tight{padding:56px 0;} .band-cream,.band-navy{padding:72px 0;} } /* ---------- 2. Type ------------------------------------------- */ h1,h2,h3{letter-spacing:-.021em;} .hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.028em;text-wrap:balance;} .section-head h2{font-size:clamp(1.85rem,3vw,2.35rem);line-height:1.15;text-wrap:balance;} p{text-wrap:pretty;} /* Every figure on the site in tabular numerals. */ .fact-num,.price,.stat,.demo-progress,.course-meta,.tier-price, [class*="num"],[class*="count"],[class*="score"]{ font-variant-numeric:tabular-nums;font-feature-settings:"tnum"; } /* The eyebrow rule was a 22px dash nobody notices. Make it a real mark. */ .eyebrow{color:var(--gold-700);letter-spacing:.13em;font-weight:700;} .eyebrow:before{width:34px;height:2px;background:var(--gold-600);margin-right:12px;} .band-navy .eyebrow,.hero .eyebrow{color:var(--gold-400);} .band-navy .eyebrow:before,.hero .eyebrow:before{background:var(--gold-500);} /* A hairline gold rule above centred section headings. Editorial, cheap, effective. */ .section-head:not(.align-left){position:relative;padding-top:26px;} .section-head:not(.align-left):before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:52px;height:2px;background:var(--gold-600); } /* ---------- 3. Break the three identical grids ----------------- fact-strip, grid-3 and pricing-grid all looked the same. */ /* 3a. Fact strip becomes open, borderless, gold-ruled. */ .fact-strip{ border:0;border-radius:0;background:transparent; border-top:1px solid var(--line);border-bottom:1px solid var(--line); margin:44px 0; } /* Padding on BOTH sides, or the content presses against the divider. Every cell gets the SAME padding. Zeroing it on the first cell gave that one 34px more content width than its neighbours while the grid still sized them all at 1fr, so cell one was the odd one out. The strip is pulled out by the same amount instead, which keeps the first number aligned with the body text above it AND keeps all four cells identical. */ .fact-strip{margin-left:-34px;margin-right:-34px;} .fact-strip > div{ border-right:1px solid var(--line-soft); padding:28px 34px; display:flex;flex-direction:column; } .fact-strip > div:last-child{border-right:0;} .fact-strip .fact-num{ font-size:2.5rem;line-height:1;color:var(--navy-950);letter-spacing:-.03em; position:relative;padding-top:14px; } .fact-strip .fact-num:before{ content:"";position:absolute;top:0;left:0;width:22px;height:2px;background:var(--gold-600); } /* Two labels wrap to a second line and two do not, which left the row ragged. Reserving two lines in every cell keeps the numbers on one baseline and the bottom edge level, whatever the label length. */ .fact-strip .fact-label{ color:var(--ink-faint);margin-top:10px; align-self:flex-start;line-height:1.35; min-height:calc(1.35em * 2); } @media(max-width:820px){ .fact-strip{grid-template-columns:1fr 1fr;margin-left:-22px;margin-right:-22px;} .fact-strip > div{padding:24px 22px;} .fact-strip > div:nth-child(even){border-right:0;} .fact-strip > div:nth-child(-n+2){border-bottom:1px solid var(--line-soft);} } @media(max-width:520px){ .fact-strip{grid-template-columns:1fr;margin-left:0;margin-right:0;} .fact-strip > div{padding:22px 0;border-right:0;border-bottom:1px solid var(--line-soft);} .fact-strip > div:last-child{border-bottom:0;} .fact-strip .fact-label{min-height:0;} } /* 3b. grid-3 keeps its rule but gains numerals and air. */ .grid-3{counter-reset:g3;} /* Same rule as the fact strip: padding on both sides, outer edges flush. */ .grid-3{margin-left:-34px;margin-right:-34px;} .grid-3 > div{ border-top:1px solid var(--navy-950); padding:30px 34px 34px;counter-increment:g3;position:relative; } @media(max-width:820px){ .grid-3{grid-template-columns:1fr;margin-left:0;margin-right:0;} .grid-3 > div{padding:26px 0 30px;} } .grid-3 > div:before{ content:counter(g3,decimal-leading-zero); font-family:var(--font-display);font-size:.95rem;color:var(--gold-700); display:block;margin-bottom:14px;letter-spacing:.04em; } .grid-3 > div:not(:last-child){border-right:0;} /* 3c. Pricing keeps the enclosed frame, so it now reads as the only one. */ .pricing-grid{ border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-2);background:var(--white);overflow:hidden; } /* ---------- 4. Cards ------------------------------------------ */ .card,.course-tile,.faq-item,.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); } .card:hover,.course-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--line-gold); } .course-tile.featured{ border:1px solid var(--line); border-top:3px solid var(--gold-600); box-shadow:var(--shadow-3); } /* ---------- 5. Buttons ---------------------------------------- */ .btn{border-radius:var(--radius-sm);letter-spacing:.005em;min-height:46px; display:inline-flex;align-items:center;justify-content:center;} .btn-gold{ background:linear-gradient(180deg,var(--gold-500),var(--gold-600)); color:#20180a;border:1px solid var(--gold-700); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px -8px rgba(181,137,43,.6); } .btn-gold:hover{filter:brightness(1.05);} .btn-navy{background:var(--navy-950);border:1px solid var(--navy-950);} .btn-outline,.btn-ghost{border-color:var(--line);} .btn-outline:hover,.btn-ghost:hover{border-color:var(--navy-950);} /* ---------- 6. Dark bands ------------------------------------- */ .band-navy,.hero{ background: radial-gradient(120% 90% at 78% 12%, rgba(181,137,43,.10) 0%, transparent 58%), linear-gradient(168deg, var(--navy-900) 0%, var(--navy-950) 62%); color:rgba(247,244,236,.86); } .hero{border-bottom:1px solid rgba(207,169,78,.16);} .band-navy{border-top:1px solid rgba(207,169,78,.16);border-bottom:1px solid rgba(207,169,78,.16);} .band-navy h2,.hero h1,.hero h2{color:#fff;} /* Hairline gold seam at the very top of the page. */ body:before{ content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:999; background:linear-gradient(90deg,var(--gold-700),var(--gold-400) 42%,var(--gold-700)); } /* ---------- 7. Step list ---------------------------------------- */ .step-list li{padding:34px 0 34px 104px;border-bottom:1px solid var(--line-soft);} .step-list li:before{ font-family:var(--font-display);color:var(--gold-700); } .step-list li:after{background:var(--gold-600);width:34px;} /* ---------- 8. Photographs ------------------------------------- Stock photography is the fastest way to look generic, and the stock photographs are now gone: skylines, trading screens and anonymous professionals that every competitor also licenses. The colour layers underneath them were always there, so the sections read as designed rather than as gaps. THESE RULES ARE KEPT DELIBERATELY, THOUGH NOTHING MATCHES THEM TODAY. When Usman's own photograph and the instructor's go on the site, this is the treatment that makes them belong to the navy and gold. A real photograph of the person who built this is worth more than any of what was removed, and the styling for it should be waiting rather than reinvented. */ /* Photographs stay in COLOUR. A light grade only, so they belong to the navy and gold without being drained of life. */ img.course-photo, img.journey-photo, img.contact-photo, img.about-banner, .course-photo img, .journey-photo img, figure img{ filter:saturate(1.06) contrast(1.05) brightness(.98); border-radius:var(--radius-sm); display:block;width:100%;height:auto; transition:filter .4s var(--ease), transform .5s var(--ease); } img.course-photo:hover, img.journey-photo:hover, img.contact-photo:hover, img.about-banner:hover{ filter:saturate(1.14) contrast(1.06) brightness(1.03); transform:scale(1.015); } /* A warm navy edge so a colour photo still sits inside the palette. */ .course-tile img.course-photo, .journey-grid img.journey-photo{ box-shadow:0 0 0 1px rgba(7,20,38,.10), 0 10px 30px -14px rgba(7,20,38,.35); } /* ---------- 9. Focus, motion, detail ---------------------------- */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--gold-600); border-radius:var(--radius-sm); } .band-navy a:focus-visible,.hero a:focus-visible, .band-navy button:focus-visible,.hero button:focus-visible{ box-shadow:0 0 0 2px var(--navy-950), 0 0 0 4px var(--gold-400); } hr,.rule{border:0;height:1px;background:var(--line);} /* Legal document version stamp. The data attributes are the point: the register page reads data-document and data-version and passes them to accept_legal(), so the database records exactly what was agreed to. */ .legal-version{ margin:0 0 28px;padding:14px 18px;border-left:3px solid var(--gold-500); background:var(--gold-100);border-radius:0 6px 6px 0;font-size:.9rem; } .legal-version strong{color:var(--navy-800);} .legal-version em{color:var(--ink-soft);font-size:.85rem;} /* Demo question: the difficulty chip sat almost on top of the question text, because .badge is inline-block with no bottom margin and the h3 that follows collapses its own top margin. Give the chip its own row. */ .demo-q > .badge{margin-bottom:16px;} .demo-q > .badge + h3{margin-top:0;} ::selection{background:var(--gold-300);color:var(--ink);} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } } /* ============================================================ Bourse Prep · polish layer, part 2 Hero backdrop + UAE mark. Loads after polish.css. Still no HTML changes. ============================================================ */ /* ---------- Hero backdrop ------------------------------------ Replaces the stock forex screenshot. This is the actual CISI ICWIM Version 7 chapter weighting, drawn: chapter 5 and 7 at 21 percent, chapter 1 at 4. Real information, specific to this qualification, and nobody else's photograph. */ .hero{ background: linear-gradient(100deg, rgba(7,20,38,.97) 0%, rgba(7,20,38,.90) 38%, rgba(7,20,38,.55) 100%), radial-gradient(120% 90% at 78% 12%, rgba(181,137,43,.12) 0%, transparent 58%), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIxIiB4Mj0iMCIgeTI9IjAiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2I1ODkyYiIgc3RvcC1vcGFjaXR5PSIuMTgiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNlMGMyNzQiIHN0b3Atb3BhY2l0eT0iLjg1Ii8+PC9saW5lYXJHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGlkPSJ2IiBjeD0iNzIlIiBjeT0iMjYlIiByPSI3MiUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzFjM2M2MCIgc3RvcC1vcGFjaXR5PSIuNTUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwNzE0MjYiIHN0b3Atb3BhY2l0eT0iMCIvPjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjE2MDAiIGhlaWdodD0iOTAwIiBmaWxsPSIjMDcxNDI2Ii8+CjxsaW5lIHgxPSIwIiB5MT0iNjAiIHgyPSIxNjAwIiB5Mj0iNjAiIHN0cm9rZT0iI2NmYTk0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQ1Ii8+PGxpbmUgeDE9IjAiIHkxPSIxMjAiIHgyPSIxNjAwIiB5Mj0iMTIwIiBzdHJva2U9IiNjZmE5NGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjA0NSIvPjxsaW5lIHgxPSIwIiB5MT0iMTgwIiB4Mj0iMTYwMCIgeTI9IjE4MCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wNDUiLz48bGluZSB4MT0iMCIgeTE9IjI0MCIgeDI9IjE2MDAiIHkyPSIyNDAiIHN0cm9rZT0iI2NmYTk0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQ1Ii8+PGxpbmUgeDE9IjAiIHkxPSIzMDAiIHgyPSIxNjAwIiB5Mj0iMzAwIiBzdHJva2U9IiNjZmE5NGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjA0NSIvPjxsaW5lIHgxPSIwIiB5MT0iMzYwIiB4Mj0iMTYwMCIgeTI9IjM2MCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wNDUiLz48bGluZSB4MT0iMCIgeTE9IjQyMCIgeDI9IjE2MDAiIHkyPSI0MjAiIHN0cm9rZT0iI2NmYTk0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQ1Ii8+PGxpbmUgeDE9IjAiIHkxPSI0ODAiIHgyPSIxNjAwIiB5Mj0iNDgwIiBzdHJva2U9IiNjZmE5NGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjA0NSIvPjxsaW5lIHgxPSIwIiB5MT0iNTQwIiB4Mj0iMTYwMCIgeTI9IjU0MCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wNDUiLz48bGluZSB4MT0iMCIgeTE9IjYwMCIgeDI9IjE2MDAiIHkyPSI2MDAiIHN0cm9rZT0iI2NmYTk0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQ1Ii8+PGxpbmUgeDE9IjAiIHkxPSI2NjAiIHgyPSIxNjAwIiB5Mj0iNjYwIiBzdHJva2U9IiNjZmE5NGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjA0NSIvPjxsaW5lIHgxPSIwIiB5MT0iNzIwIiB4Mj0iMTYwMCIgeTI9IjcyMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wNDUiLz48bGluZSB4MT0iMCIgeTE9Ijc4MCIgeDI9IjE2MDAiIHkyPSI3ODAiIHN0cm9rZT0iI2NmYTk0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQ1Ii8+PGxpbmUgeDE9IjAiIHkxPSI4NDAiIHgyPSIxNjAwIiB5Mj0iODQwIiBzdHJva2U9IiNjZmE5NGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjA0NSIvPjxsaW5lIHgxPSI2MCIgeTE9IjAiIHgyPSI2MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iMTIwIiB5MT0iMCIgeDI9IjEyMCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iMTgwIiB5MT0iMCIgeDI9IjE4MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iMjQwIiB5MT0iMCIgeDI9IjI0MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iMzAwIiB5MT0iMCIgeDI9IjMwMCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iMzYwIiB5MT0iMCIgeDI9IjM2MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iNDIwIiB5MT0iMCIgeDI9IjQyMCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iNDgwIiB5MT0iMCIgeDI9IjQ4MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iNTQwIiB5MT0iMCIgeDI9IjU0MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iNjAwIiB5MT0iMCIgeDI9IjYwMCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iNjYwIiB5MT0iMCIgeDI9IjY2MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iNzIwIiB5MT0iMCIgeDI9IjcyMCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iNzgwIiB5MT0iMCIgeDI9Ijc4MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iODQwIiB5MT0iMCIgeDI9Ijg0MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iOTAwIiB5MT0iMCIgeDI9IjkwMCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iOTYwIiB5MT0iMCIgeDI9Ijk2MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iMTAyMCIgeTE9IjAiIHgyPSIxMDIwIiB5Mj0iOTAwIiBzdHJva2U9IiNjZmE5NGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzNSIvPjxsaW5lIHgxPSIxMDgwIiB5MT0iMCIgeDI9IjEwODAiIHkyPSI5MDAiIHN0cm9rZT0iI2NmYTk0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDM1Ii8+PGxpbmUgeDE9IjExNDAiIHkxPSIwIiB4Mj0iMTE0MCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iMTIwMCIgeTE9IjAiIHgyPSIxMjAwIiB5Mj0iOTAwIiBzdHJva2U9IiNjZmE5NGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzNSIvPjxsaW5lIHgxPSIxMjYwIiB5MT0iMCIgeDI9IjEyNjAiIHkyPSI5MDAiIHN0cm9rZT0iI2NmYTk0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDM1Ii8+PGxpbmUgeDE9IjEzMjAiIHkxPSIwIiB4Mj0iMTMyMCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iMTM4MCIgeTE9IjAiIHgyPSIxMzgwIiB5Mj0iOTAwIiBzdHJva2U9IiNjZmE5NGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzNSIvPjxsaW5lIHgxPSIxNDQwIiB5MT0iMCIgeDI9IjE0NDAiIHkyPSI5MDAiIHN0cm9rZT0iI2NmYTk0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDM1Ii8+PGxpbmUgeDE9IjE1MDAiIHkxPSIwIiB4Mj0iMTUwMCIgeTI9IjkwMCIgc3Ryb2tlPSIjY2ZhOTRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMzUiLz48bGluZSB4MT0iMTU2MCIgeTE9IjAiIHgyPSIxNTYwIiB5Mj0iOTAwIiBzdHJva2U9IiNjZmE5NGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzNSIvPgo8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjdikiLz4KPGxpbmUgeDE9Ijk0MCIgeTE9Ijc2MCIgeDI9IjE0MjAiIHkyPSI3NjAiIHN0cm9rZT0iI2NmYTk0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIG9wYWNpdHk9Ii4zNSIvPgo8cmVjdCB4PSI5ODAiIHk9IjY1NiIgd2lkdGg9IjMwIiBoZWlnaHQ9IjEwNCIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC4yNiIvPjxyZWN0IHg9Ijk4MCIgeT0iNjU2IiB3aWR0aD0iMzAiIGhlaWdodD0iMiIgZmlsbD0iI2NmYTk0ZSIgb3BhY2l0eT0iLjU1Ii8+PHRleHQgeD0iOTk1LjAiIHk9Ijc4NiIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTciIGZpbGw9IiNjZmE5NGUiIG9wYWNpdHk9Ii40NSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+MTwvdGV4dD48dGV4dCB4PSI5OTUuMCIgeT0iNjQyIiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNSIgZmlsbD0iI2UwYzI3NCIgb3BhY2l0eT0iLjUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjQ8L3RleHQ+PHJlY3QgeD0iMTAzMiIgeT0iNjMwIiB3aWR0aD0iMzAiIGhlaWdodD0iMTMwIiBmaWxsPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjI3Ii8+PHJlY3QgeD0iMTAzMiIgeT0iNjMwIiB3aWR0aD0iMzAiIGhlaWdodD0iMiIgZmlsbD0iI2NmYTk0ZSIgb3BhY2l0eT0iLjU1Ii8+PHRleHQgeD0iMTA0Ny4wIiB5PSI3ODYiIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLHNlcmlmIiBmb250LXNpemU9IjE3IiBmaWxsPSIjY2ZhOTRlIiBvcGFjaXR5PSIuNDUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjI8L3RleHQ+PHRleHQgeD0iMTA0Ny4wIiB5PSI2MTYiIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLHNlcmlmIiBmb250LXNpemU9IjE1IiBmaWxsPSIjZTBjMjc0IiBvcGFjaXR5PSIuNSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+NTwvdGV4dD48cmVjdCB4PSIxMDg0IiB5PSIzOTYiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNjQiIGZpbGw9InVybCgjZykiIG9wYWNpdHk9IjAuMzYiLz48cmVjdCB4PSIxMDg0IiB5PSIzOTYiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyIiBmaWxsPSIjY2ZhOTRlIiBvcGFjaXR5PSIuNTUiLz48dGV4dCB4PSIxMDk5LjAiIHk9Ijc4NiIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTciIGZpbGw9IiNjZmE5NGUiIG9wYWNpdHk9Ii40NSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+MzwvdGV4dD48dGV4dCB4PSIxMDk5LjAiIHk9IjM4MiIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTUiIGZpbGw9IiNlMGMyNzQiIG9wYWNpdHk9Ii41IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4xNDwvdGV4dD48cmVjdCB4PSIxMTM2IiB5PSI1NzgiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxODIiIGZpbGw9InVybCgjZykiIG9wYWNpdHk9IjAuMjkiLz48cmVjdCB4PSIxMTM2IiB5PSI1NzgiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyIiBmaWxsPSIjY2ZhOTRlIiBvcGFjaXR5PSIuNTUiLz48dGV4dCB4PSIxMTUxLjAiIHk9Ijc4NiIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTciIGZpbGw9IiNjZmE5NGUiIG9wYWNpdHk9Ii40NSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+NDwvdGV4dD48dGV4dCB4PSIxMTUxLjAiIHk9IjU2NCIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTUiIGZpbGw9IiNlMGMyNzQiIG9wYWNpdHk9Ii41IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj43PC90ZXh0PjxyZWN0IHg9IjExODgiIHk9IjIxNCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjU0NiIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40MyIvPjxyZWN0IHg9IjExODgiIHk9IjIxNCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIiIGZpbGw9IiNjZmE5NGUiIG9wYWNpdHk9Ii41NSIvPjx0ZXh0IHg9IjEyMDMuMCIgeT0iNzg2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNyIgZmlsbD0iI2NmYTk0ZSIgb3BhY2l0eT0iLjQ1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj41PC90ZXh0Pjx0ZXh0IHg9IjEyMDMuMCIgeT0iMjAwIiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNSIgZmlsbD0iI2UwYzI3NCIgb3BhY2l0eT0iLjUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjIxPC90ZXh0PjxyZWN0IHg9IjEyNDAiIHk9IjM3MCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjM5MCIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC4zNyIvPjxyZWN0IHg9IjEyNDAiIHk9IjM3MCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIiIGZpbGw9IiNjZmE5NGUiIG9wYWNpdHk9Ii41NSIvPjx0ZXh0IHg9IjEyNTUuMCIgeT0iNzg2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNyIgZmlsbD0iI2NmYTk0ZSIgb3BhY2l0eT0iLjQ1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj42PC90ZXh0Pjx0ZXh0IHg9IjEyNTUuMCIgeT0iMzU2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNSIgZmlsbD0iI2UwYzI3NCIgb3BhY2l0eT0iLjUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjE1PC90ZXh0PjxyZWN0IHg9IjEyOTIiIHk9IjIxNCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjU0NiIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40MyIvPjxyZWN0IHg9IjEyOTIiIHk9IjIxNCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIiIGZpbGw9IiNjZmE5NGUiIG9wYWNpdHk9Ii41NSIvPjx0ZXh0IHg9IjEzMDcuMCIgeT0iNzg2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNyIgZmlsbD0iI2NmYTk0ZSIgb3BhY2l0eT0iLjQ1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj43PC90ZXh0Pjx0ZXh0IHg9IjEzMDcuMCIgeT0iMjAwIiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNSIgZmlsbD0iI2UwYzI3NCIgb3BhY2l0eT0iLjUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjIxPC90ZXh0PjxyZWN0IHg9IjEzNDQiIHk9IjQyMiIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMzOCIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC4zNSIvPjxyZWN0IHg9IjEzNDQiIHk9IjQyMiIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIiIGZpbGw9IiNjZmE5NGUiIG9wYWNpdHk9Ii41NSIvPjx0ZXh0IHg9IjEzNTkuMCIgeT0iNzg2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNyIgZmlsbD0iI2NmYTk0ZSIgb3BhY2l0eT0iLjQ1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj44PC90ZXh0Pjx0ZXh0IHg9IjEzNTkuMCIgeT0iNDA4IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNSIgZmlsbD0iI2UwYzI3NCIgb3BhY2l0eT0iLjUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjEzPC90ZXh0Pgo8dGV4dCB4PSI5NDAiIHk9IjgyMiIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiNjZmE5NGUiIG9wYWNpdHk9Ii4zOCIgbGV0dGVyLXNwYWNpbmc9IjMiPkNJU0kgSUNXSU0gVjcgIMK3ICBDSEFQVEVSIFdFSUdIVElORzwvdGV4dD4KPC9zdmc+') center right / cover no-repeat, linear-gradient(168deg,#0c1e35 0%,#071426 62%); } @media(max-width:900px){ .hero{ background: linear-gradient(180deg, rgba(7,20,38,.96), rgba(7,20,38,.99)), linear-gradient(168deg,#0c1e35 0%,#071426 62%); } } /* ---------- UAE mark ------------------------------------------ Sits after the hero eyebrow. Small, factual, not a sticker. */ .hero .eyebrow{display:inline-flex;align-items:center;} .hero .eyebrow:after{ content:"Built in the UAE"; margin-left:16px;padding:5px 11px 5px 30px; font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:rgba(247,244,236,.72); border:1px solid rgba(207,169,78,.32); border-radius:99px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAxNiI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjE2IiBmaWxsPSIjZmZmIi8+PHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iMTYiIGZpbGw9IiNDRTExMjYiLz48cmVjdCB4PSI2IiB3aWR0aD0iMTgiIGhlaWdodD0iNS4zMyIgZmlsbD0iIzAwOTczOSIvPjxyZWN0IHg9IjYiIHk9IjEwLjY3IiB3aWR0aD0iMTgiIGhlaWdodD0iNS4zNCIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==') 10px center / 15px 10px no-repeat, rgba(255,255,255,.04); } @media(max-width:560px){ .hero .eyebrow{display:flex;flex-wrap:wrap;gap:10px;} .hero .eyebrow:after{margin-left:0;} } /* ============================================================ Added after review: colour photography, a proper UAE mark, and the unused Etihad Towers shot brought into service as a real band. ============================================================ */ /* ---------- UAE mark, larger and with a real flag ------------- */ .hero .eyebrow:after{ content:"Built in the UAE for GCC finance professionals"; margin-left:18px;padding:7px 15px 7px 40px; font-size:.70rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase; color:#f3ead6; border:1px solid rgba(207,169,78,.42); border-radius:99px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAxNiI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjE2IiBmaWxsPSIjZmZmIi8+PHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iMTYiIGZpbGw9IiNDRTExMjYiLz48cmVjdCB4PSI2IiB3aWR0aD0iMTgiIGhlaWdodD0iNS4zMyIgZmlsbD0iIzAwOTczOSIvPjxyZWN0IHg9IjYiIHk9IjEwLjY3IiB3aWR0aD0iMTgiIGhlaWdodD0iNS4zNCIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==') 13px center / 21px 14px no-repeat, linear-gradient(180deg, rgba(207,169,78,.16), rgba(207,169,78,.06)); box-shadow:0 0 0 1px rgba(0,0,0,.2) inset, 0 0 22px -8px rgba(207,169,78,.55); } @media(max-width:620px){ .hero .eyebrow{display:flex;flex-wrap:wrap;gap:12px;} .hero .eyebrow:after{margin-left:0;font-size:.62rem;} } /* ---------- The navy band -------------------------------------- This carried a wide skyline crop until the stock photography was removed. The colour layers underneath were always there as the fallback, so what is left is the band as it was designed, without a picture every competitor also uses. */ .band-navy{ background: linear-gradient(168deg, rgba(12,30,53,.88) 0%, rgba(7,20,38,.94) 62%), radial-gradient(120% 90% at 78% 12%, rgba(181,137,43,.16) 0%, transparent 58%), linear-gradient(168deg,#0c1e35 0%,#071426 62%); background-attachment:scroll; } @media(max-width:760px){ .band-navy{ background: linear-gradient(180deg, rgba(12,30,53,.93), rgba(7,20,38,.97)), linear-gradient(168deg,#0c1e35 0%,#071426 62%); } } /* ============================================================ Bourse Prep · OPTIONAL effects layer Glassmorphism, floating orbs, glow. This is the experiment. Load it last, look at it, then decide. Delete the and everything returns to the polished version. Built in your own gold and navy rather than the usual neon, so it is a fair test of the idea and not a rigged one. ============================================================ */ /* ---------- 1. Floating orbs behind the hero ------------------ */ .hero{position:relative;overflow:hidden;isolation:isolate;} .hero:before, .hero:after{ content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1; filter:blur(6px); } .hero:before{ width:min(760px,80vw);height:min(760px,80vw); top:-32%;left:-14%; background:radial-gradient(circle, rgba(207,169,78,.52) 0%, rgba(181,137,43,.18) 40%, transparent 68%); animation:bp-float-a 26s ease-in-out infinite; } .hero:after{ width:min(620px,68vw);height:min(620px,68vw); bottom:-34%;right:-10%; background:radial-gradient(circle, rgba(45,96,150,.68) 0%, rgba(28,60,96,.24) 44%, transparent 70%); animation:bp-float-b 34s ease-in-out infinite; } @keyframes bp-float-a{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(70px,-52px) scale(1.10);} } @keyframes bp-float-b{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-58px,42px) scale(1.08);} } /* ---------- 2. Glassmorphism ---------------------------------- */ /* Cards on light surfaces. Light glass needs something behind it or it just looks like a slightly grey box, so the paper tone from polish.css is doing the work here. */ .card,.course-tile,.faq-item,.form-card,.fact-strip,.pricing-grid{ background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.75); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(7,20,38,.06), 0 24px 56px -18px rgba(7,20,38,.26); } @supports (backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px)){ .card,.course-tile,.faq-item,.form-card,.fact-strip,.pricing-grid{ background:rgba(255,255,255,.42); -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35); } } /* The hero product mockup. Glass reads best here, over the orbs. */ .product-panel{ background:rgba(12,30,53,.52); border:1px solid rgba(207,169,78,.22); box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 20px 60px rgba(0,0,0,.80), 0 0 0 1px rgba(255,255,255,.04); } @supports (backdrop-filter:blur(22px)) or (-webkit-backdrop-filter:blur(22px)){ .product-panel{ background:rgba(12,30,53,.34); -webkit-backdrop-filter:blur(22px) saturate(1.25); backdrop-filter:blur(22px) saturate(1.25); } } /* Sticky header, if there is one. */ header,.site-header,nav.site-nav{ background:rgba(250,248,244,.72); border-bottom:1px solid rgba(228,224,214,.8); } @supports (backdrop-filter:blur(14px)){ header,.site-header,nav.site-nav{ background:rgba(250,248,244,.58); backdrop-filter:blur(14px) saturate(1.2); } } /* Dark band panels. .callout-navy is deliberately EXCLUDED. It carries white text and is used on light pages (what-is-icwim, official-icwim-resources), so making it translucent turned white text onto a white background and the independence notice disappeared. It keeps its solid dark fill. */ .band-navy .card,.band-navy .callout{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 20px 60px rgba(0,0,0,.55); } @supports (backdrop-filter:blur(16px)){ .band-navy .card,.band-navy .callout{ background:rgba(255,255,255,.035); backdrop-filter:blur(16px); } } /* Solid, readable, and clearly a notice. */ .callout-navy{ background:linear-gradient(165deg,var(--navy-800),var(--navy-950)); border:1px solid rgba(255,255,255,.10); border-left:3px solid var(--gold-500); color:rgba(247,244,236,.88); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 18px 44px -20px rgba(24,10,43,.5); } .callout-navy strong{color:var(--gold-300);} .callout-navy a{color:var(--gold-400);text-decoration:underline;text-underline-offset:3px;} .callout-navy a:hover{color:var(--gold-300);} /* ---------- 3. Glow ------------------------------------------- */ .btn-gold{ box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 6px 18px -8px rgba(181,137,43,.65), 0 0 26px -6px rgba(207,169,78,.42); transition:box-shadow .28s var(--ease), transform .28s var(--ease), filter .28s var(--ease); } .btn-gold:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,.36) inset, 0 10px 26px -8px rgba(181,137,43,.75), 0 0 44px -4px rgba(207,169,78,.62); } .hero .btn-ghost:hover{ box-shadow:0 0 0 1px rgba(207,169,78,.45), 0 0 26px -8px rgba(207,169,78,.5); } /* Border glow on hover for glass cards. */ .card:hover,.course-tile:hover{ border-color:rgba(207,169,78,.55); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(7,20,38,.05), 0 24px 56px -18px rgba(7,20,38,.26), 0 0 30px -10px rgba(207,169,78,.40); } .course-tile.featured{ border-color:rgba(207,169,78,.5); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 26px 60px -20px rgba(7,20,38,.28), 0 0 40px -12px rgba(207,169,78,.45); } /* The readiness ring, which is the one number worth glowing. */ .ring-value{text-shadow:0 0 22px rgba(224,194,116,.55);} .ring-wrap svg circle:last-child{filter:drop-shadow(0 0 8px rgba(242,106,27,.65));} .mock-bar-fill{box-shadow:0 0 12px -2px rgba(207,169,78,.6);} /* ---------- 4. Accessibility guards --------------------------- */ @media (prefers-reduced-motion:reduce){ .hero:before,.hero:after{animation:none!important;} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important; } } /* Glass reduces text contrast. Hold the ink darker to compensate. */ .card,.course-tile,.faq-item,.form-card{color:var(--ink);} .card p,.course-tile p,.faq-item p{color:#3d4857;} /* ============================================================ Bourse Prep · hero live question Pairs with assets/hero-question.js Inherits --gold-* and --navy-* so it follows whichever palette is loaded, navy and gold or the Sukoon purple and orange. ============================================================ */ /* ---------- toggle in the panel top bar ---------- */ .hq-toggle{ display:inline-flex;gap:2px;padding:2px;border-radius:99px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); } .hq-tab{ appearance:none;border:0;cursor:pointer; padding:6px 14px;border-radius:99px; font:600 .70rem/1 var(--font-body,inherit); letter-spacing:.05em;text-transform:uppercase; color:rgba(247,244,236,.55);background:transparent; transition:color .2s var(--ease), background .2s var(--ease); min-height:28px; } .hq-tab:hover{color:rgba(247,244,236,.9);} .hq-tab.is-on{ background:#B84A00; color:#fff; box-shadow:0 0 18px -6px var(--gold-500); } /* ---------- question body ---------- */ .hq-body{padding:20px 22px 22px;min-height:280px;} .hq-meta{ display:flex;flex-wrap:wrap;gap:10px;align-items:center; font-size:.68rem;letter-spacing:.06em;text-transform:uppercase; color:rgba(247,244,236,.45);margin-bottom:14px; } .hq-dot:before{ content:"";display:inline-block;width:3px;height:3px;border-radius:50%; background:var(--gold-500);opacity:.6;margin-right:10px;vertical-align:middle; } .hq-stem{ font-family:var(--font-display,Georgia,serif); font-size:1.18rem;line-height:1.32;letter-spacing:-.012em; color:#fff;margin:0 0 16px;text-wrap:balance; } .hq-opts{display:flex;flex-direction:column;gap:7px;} .hq-opt{ display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left; min-height:46px;padding:11px 13px;cursor:pointer; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.11); border-radius:7px; color:rgba(247,244,236,.82); font:400 .845rem/1.4 var(--font-body,inherit); transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); } .hq-opt:hover:not(:disabled){ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); color:#fff; } .hq-opt:disabled{cursor:default;} /* Batch 16: is-chosen is the shared answer screen's class (answer-feedback.js). */ .hq-opt.is-sel,.hq-opt.is-chosen{ border-color:var(--gold-500); background:rgba(255,255,255,.08); color:#fff; box-shadow:0 0 22px -10px var(--gold-500); } .hq-key{ flex:none;width:21px;height:21px;border-radius:5px;margin-top:1px; display:grid;place-items:center; font:600 .66rem/1 var(--font-body,inherit); background:rgba(255,255,255,.09);color:rgba(247,244,236,.6); border:1px solid rgba(255,255,255,.10); transition:all .18s var(--ease); } .hq-opt.is-sel .hq-key,.hq-opt.is-chosen .hq-key{background:#D95900;color:#fff;border-color:#D95900;} .hq-opt.is-right{border-color:rgba(96,200,148,.75);background:rgba(96,200,148,.10);color:#fff;} .hq-opt.is-right .hq-key{background:#60c894;color:#0a2418;border-color:#60c894;} .hq-opt.is-wrong{border-color:rgba(226,120,102,.75);background:rgba(226,120,102,.10);color:#fff;} .hq-opt.is-wrong .hq-key{background:#e27866;color:#2a0d07;border-color:#e27866;} .hq-tag{ margin-left:auto;padding-top:2px;flex:none; font-size:.60rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700; } .hq-opt.is-right .hq-tag{color:#8fe0b8;} .hq-opt.is-wrong .hq-tag{color:#f0a094;} /* ---------- result ---------- */ .hq-result:not(:empty){ margin-top:15px;padding-top:15px; border-top:1px solid rgba(255,255,255,.10); animation:hq-rise .3s var(--ease) both; } @keyframes hq-rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} .hq-body{overflow-wrap:anywhere;} /* Batch 16 (9 October). The answer screen is the app's own, from answer-feedback.js, as on the free demo page: "How sure are you?" inside the chosen answer, then "Correct." or "Not quite.", "Why you picked that", "The principle" and "I do not understand this". These keep it in the hero's look, and only inside the hero. */ .hq-body .conf-ask{ margin:2px 0 4px;padding:11px 13px;border-radius:7px; background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12); } .hq-body .conf-q{margin:0 0 8px;font-size:.78rem;font-weight:700;color:#fff;} .hq-body .conf-row{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 7px;} .hq-body .conf{ appearance:none;cursor:pointer;min-height:40px;padding:0 15px;border-radius:99px; font:600 .78rem/1 var(--font-body,inherit); background:rgba(255,255,255,.05);color:rgba(247,244,236,.9); border:1px solid rgba(255,255,255,.22); transition:border-color .18s var(--ease), color .18s var(--ease); } .hq-body .conf:hover:not(:disabled){border-color:var(--gold-500);color:#fff;} .hq-body .conf:disabled{cursor:default;opacity:.6;} /* Batch 18 (D1). The hint under the options already says this in the hero. */ .hq-body .conf-note{display:none;} .hq-result .ok,.hq-result .err{ background:none !important;border:0;padding:0;margin:0 0 11px; font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; } .hq-result .ok{color:#8fe0b8;} .hq-result .err{color:#f0a094;} .hq-result .note{ margin:12px 0 0;padding:13px 15px;border-radius:0 7px 7px 0; background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08); border-left:2px solid #e27866; font-size:.845rem;line-height:1.55;color:#fff; } .hq-result .note:first-child{margin-top:0;} .hq-result .note.principle{ padding:0 0 0 15px;border:0;border-left:1px solid rgba(255,255,255,.12);border-radius:0;background:none; font-size:.815rem;line-height:1.58;color:rgba(247,244,236,.72); } .hq-result .note h4{ margin:0 0 7px;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase; font-weight:700;color:rgba(247,244,236,.45); } .hq-result .note p{margin:0;color:inherit;} .hq-result .other-note{margin:6px 0 0;color:inherit;} .hq-result .other-note + .other-note{margin-top:10px;} .hq-result .other-note strong{color:#fff;} .hq-result .muted{font-size:.75rem;line-height:1.5;color:rgba(247,244,236,.55);} /* As specific as the homepage's own link rule (.hx a:not(.btn)), and more. */ .hq-body .hq-result a:not(.btn){color:#FFB27A;text-decoration:underline;text-underline-offset:2px;} .hq-body .hq-result a:not(.btn):hover{color:#fff;} .hq-result .btn-ghost{ appearance:none;cursor:pointer;min-height:44px;padding:0 16px;border-radius:6px; font:600 .78rem/1 var(--font-body,inherit); background:transparent;color:#fff;border:1px solid rgba(255,255,255,.24); } .hq-result .btn-ghost:hover{border-color:var(--gold-500);} /* ---------- action row ---------- */ .hq-act{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08); } .hq-hint{flex:1;min-width:150px;font-size:.72rem;line-height:1.45;color:rgba(247,244,236,.45);} .hq-btn{ appearance:none;cursor:pointer;min-height:40px;padding:0 20px;border-radius:6px; font:700 .80rem/1 var(--font-body,inherit); background:linear-gradient(180deg,#F26A1B,#D95900); color:#fff;border:1px solid var(--gold-700); box-shadow:0 1px 0 rgba(255,255,255,.26) inset, 0 0 24px -8px var(--gold-500); transition:filter .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .hq-btn:hover:not(:disabled){background:linear-gradient(180deg,#E8620F,#CC5300);color:#fff;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 0 38px -6px var(--gold-500);} .hq-btn:active:not(:disabled){background:linear-gradient(180deg,#D95900,#B84A00);color:#fff;} .hq-btn:disabled{background:rgba(255,255,255,.07);color:rgba(247,244,236,.35);border-color:rgba(255,255,255,.10);box-shadow:none;cursor:not-allowed;} .hq-tab:focus-visible,.hq-opt:focus-visible,.hq-btn:focus-visible, .hq-body .conf:focus-visible,.hq-result .btn-ghost:focus-visible,.hq-result a:focus-visible{ outline:none;box-shadow:0 0 0 2px var(--navy-950), 0 0 0 4px var(--gold-500); } @media(max-width:520px){ .hq-body{padding:16px 16px 18px;} .hq-stem{font-size:1.05rem;} .hq-opt{font-size:.81rem;} } @media (prefers-reduced-motion:reduce){ .hq-result:not(:empty){animation:none;} } /* ============================================================ Bourse Prep · Your Preparation Journey Glass steps joined by connectors that turn orange as you scroll, and numbers that flip to orange. Inherits the theme variables. ============================================================ */ .journey-grid{ display:grid; grid-template-columns:minmax(300px,.82fr) 1.18fr; gap:52px; align-items:start; } @media(max-width:940px){ .journey-grid{grid-template-columns:1fr;gap:34px;} } /* ---------- the photograph ---------- */ .journey-grid > div:first-child{position:relative;} img.journey-photo{ border-radius:14px; aspect-ratio:4/5; object-fit:cover; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 30px 70px -28px rgba(24,10,43,.55), 0 0 0 1px rgba(24,10,43,.08); } /* a warm edge so the photo belongs to the palette without being drained */ .journey-grid > div:first-child:after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px; background:linear-gradient(168deg, rgba(242,106,27,.10) 0%, transparent 34%, rgba(24,10,43,.16) 100%); mix-blend-mode:multiply; height:auto; } @media(max-width:940px){ .journey-grid > div:first-child:after{display:none;} } .journey-caption{ margin-top:18px;font-size:.86rem;line-height:1.62;color:var(--ink-soft); padding-left:16px;border-left:2px solid var(--gold-500); } /* ---------- the connector ---------- Everything derives from these values, so the connector always sits on the centre line of the number tiles. Change one and it follows. */ .journey{ --jn-size:46px; /* number tile */ --jn-padx:22px; /* card padding, left */ --jn-pady:20px; /* card padding, top */ --jn-w:2px; /* connector width */ --jn-gap:12px; /* space between cards, connector length */ position:relative; } /* A continuous line behind the cards was wrong twice over: as the last child of .journey it painted OVER the cards, and the cards are glass so it showed through them anyway. The connector is now drawn only in the gap BETWEEN cards, as a short segment on each step. No overlap is possible. */ .journey-step:after{ content:"";position:absolute;z-index:0; left:calc(var(--jn-padx) + (var(--jn-size) / 2) - (var(--jn-w) / 2)); top:100%;height:var(--jn-gap,12px);width:var(--jn-w); background:var(--line); border-radius:var(--jn-w); } .journey-step:last-child:after{display:none;} /* the segment turns orange once the reader has passed that step */ .journey-step.is-live:after{ background:linear-gradient(180deg,var(--gold-400),var(--gold-600)); box-shadow:0 0 12px -3px var(--gold-500); } .journey-step:after{transition:background .5s var(--ease), box-shadow .5s var(--ease);} /* ---------- each step as a glass card ---------- */ .journey-step{ position:relative;display:flex;align-items:flex-start;gap:20px; padding:var(--jn-pady) var(--jn-padx);margin-bottom:var(--jn-gap);border-radius:12px; background:rgba(255,255,255,.50); border:1px solid rgba(255,255,255,.72); box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 2px 6px rgba(24,10,43,.05), 0 18px 44px -20px rgba(24,10,43,.20); transition: transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s cubic-bezier(.22,1,.36,1), border-color .34s cubic-bezier(.22,1,.36,1), background .34s cubic-bezier(.22,1,.36,1); } @supports (backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px)){ .journey-step{ background:rgba(255,255,255,.38); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); } } .journey-step:last-child{margin-bottom:0;} /* a thin orange rail that grows down the left edge on hover */ .journey-step:before{ content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--gold-400),var(--gold-600)); transform:scaleY(0);transform-origin:top; transition:transform .38s cubic-bezier(.22,1,.36,1); } .journey-step:hover{ transform:translateY(-3px); border-color:rgba(242,106,27,.55); background:rgba(255,255,255,.62); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(24,10,43,.06), 0 26px 58px -20px rgba(24,10,43,.28), 0 0 34px -10px rgba(242,106,27,.45); } .journey-step:hover:before{transform:scaleY(1);} /* ---------- the number ---------- */ /* The tile sits ON the spine and hides the segment behind it, so the line reads as connecting the numbers rather than running past them. z-index 2 clears the spine; the background must stay opaque. */ .journey-num{ flex:none;position:relative;z-index:2; width:var(--jn-size);height:var(--jn-size);border-radius:12px; display:grid;place-items:center; font-family:var(--font-display,Georgia,serif); font-size:1.22rem;font-weight:600;line-height:1; color:var(--gold-100); background:linear-gradient(165deg,var(--navy-800),var(--navy-950)); border:1px solid rgba(255,255,255,.10); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 20px -10px rgba(24,10,43,.6); transition: background .38s cubic-bezier(.22,1,.36,1), color .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1); } .journey-step:hover .journey-num{ background:#CC5300; color:#fff; transform:scale(1.06) rotate(-3deg); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 26px -8px rgba(217,89,0,.55), 0 0 30px -6px var(--gold-500); } /* the step that scroll has reached lights its number */ .journey-step.is-live .journey-num{ background:#D95900; color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 0 24px -8px var(--gold-500); } /* ---------- text ---------- */ .journey-step h4{ margin:2px 0 5px;font-size:1.02rem;letter-spacing:-.012em;color:var(--ink); transition:color .3s var(--ease); } .journey-step:hover h4{color:var(--navy-700);} .journey-step .small{margin:0;font-size:.865rem;line-height:1.58;color:var(--ink-soft);} /* ---------- entrance ---------- */ .journey-step{opacity:0;transform:translateY(14px);} .journey-step.is-in{ opacity:1;transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease), background .34s var(--ease); } .journey-step.is-in:nth-child(1){transition-delay:.02s;} .journey-step.is-in:nth-child(2){transition-delay:.07s;} .journey-step.is-in:nth-child(3){transition-delay:.12s;} .journey-step.is-in:nth-child(4){transition-delay:.17s;} .journey-step.is-in:nth-child(5){transition-delay:.22s;} .journey-step.is-in:nth-child(6){transition-delay:.27s;} @media (prefers-reduced-motion:reduce){ .journey-step{opacity:1;transform:none;} .journey-step:after{transition:none;} .journey-step:hover{transform:none;} .journey-step:hover .journey-num{transform:none;} } @media(max-width:560px){ /* one place to change, the connector recalculates itself */ .journey{--jn-size:40px;--jn-padx:17px;--jn-pady:17px;} .journey-step{gap:15px;} .journey-num{font-size:1.06rem;border-radius:10px;} .journey-step h4{font-size:.96rem;} } /* ============================================================ Bourse Prep theme · deep purple + orange (LOCKED) Deep purple + orange, per the Sukoon brand. Loads LAST, after polish.css, polish-hero.css and effects.css. This is the approved palette. Do not revert to navy and gold. ============================================================ */ :root{ --navy-950:#180A2B; --navy-900:#241040; --navy-800:#331858; --navy-700:#452073; --navy-600:#5A2D93; --gold-700:#B84A00; --gold-600:#D95900; --gold-500:#F26A1B; --gold-400:#FF8A3D; --gold-300:#FFC49A; --gold-100:#FFF4EC; --paper:#FBF8FA; --paper-2:#F5EFF5; --white:#ffffff; --ink:#14101C; --ink-soft:#4A4356; --ink-faint:#78707F; --line:#E6DEE8; --line-soft:#F0EAF2; --line-gold:rgba(242,106,27,.30); --shadow-1:0 1px 2px rgba(24,10,43,.05); --shadow-2:0 2px 4px rgba(24,10,43,.04), 0 14px 34px -12px rgba(24,10,43,.18); --shadow-3:0 2px 4px rgba(24,10,43,.05), 0 28px 60px -24px rgba(24,10,43,.30); } /* Hero backdrop redrawn in purple and orange. */ .hero{ background: linear-gradient(100deg, rgba(24,10,43,.97) 0%, rgba(24,10,43,.90) 38%, rgba(24,10,43,.55) 100%), radial-gradient(120% 90% at 78% 12%, rgba(242,106,27,.14) 0%, transparent 58%), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMCIgeTE9IjEiIHgyPSIwIiB5Mj0iMCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjRDk1OTAwIiBzdG9wLW9wYWNpdHk9Ii4xOCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGOEEzRCIgc3RvcC1vcGFjaXR5PSIuODUiLz48L2xpbmVhckdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InYiIGN4PSI3MiUiIGN5PSIyNiUiIHI9IjcyJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNUEyRDkzIiBzdG9wLW9wYWNpdHk9Ii41NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzE4MEEyQiIgc3RvcC1vcGFjaXR5PSIwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+CjxyZWN0IHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgZmlsbD0iIzE4MEEyQiIvPjxsaW5lIHgxPSIwIiB5MT0iNjAiIHgyPSIxNjAwIiB5Mj0iNjAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjEyMCIgeDI9IjE2MDAiIHkyPSIxMjAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjE4MCIgeDI9IjE2MDAiIHkyPSIxODAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjI0MCIgeDI9IjE2MDAiIHkyPSIyNDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjMwMCIgeDI9IjE2MDAiIHkyPSIzMDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjM2MCIgeDI9IjE2MDAiIHkyPSIzNjAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjQyMCIgeDI9IjE2MDAiIHkyPSI0MjAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjQ4MCIgeDI9IjE2MDAiIHkyPSI0ODAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjU0MCIgeDI9IjE2MDAiIHkyPSI1NDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjYwMCIgeDI9IjE2MDAiIHkyPSI2MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjY2MCIgeDI9IjE2MDAiIHkyPSI2NjAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9IjcyMCIgeDI9IjE2MDAiIHkyPSI3MjAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9Ijc4MCIgeDI9IjE2MDAiIHkyPSI3ODAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iMCIgeTE9Ijg0MCIgeDI9IjE2MDAiIHkyPSI4NDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDQiLz48bGluZSB4MT0iNjAiIHkxPSIwIiB4Mj0iNjAiIHkyPSI5MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDMiLz48bGluZSB4MT0iMTIwIiB5MT0iMCIgeDI9IjEyMCIgeTI9IjkwMCIgc3Ryb2tlPSIjRkY4QTNEIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMyIvPjxsaW5lIHgxPSIxODAiIHkxPSIwIiB4Mj0iMTgwIiB5Mj0iOTAwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzIi8+PGxpbmUgeDE9IjI0MCIgeTE9IjAiIHgyPSIyNDAiIHkyPSI5MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDMiLz48bGluZSB4MT0iMzAwIiB5MT0iMCIgeDI9IjMwMCIgeTI9IjkwMCIgc3Ryb2tlPSIjRkY4QTNEIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMyIvPjxsaW5lIHgxPSIzNjAiIHkxPSIwIiB4Mj0iMzYwIiB5Mj0iOTAwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzIi8+PGxpbmUgeDE9IjQyMCIgeTE9IjAiIHgyPSI0MjAiIHkyPSI5MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDMiLz48bGluZSB4MT0iNDgwIiB5MT0iMCIgeDI9IjQ4MCIgeTI9IjkwMCIgc3Ryb2tlPSIjRkY4QTNEIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMyIvPjxsaW5lIHgxPSI1NDAiIHkxPSIwIiB4Mj0iNTQwIiB5Mj0iOTAwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzIi8+PGxpbmUgeDE9IjYwMCIgeTE9IjAiIHgyPSI2MDAiIHkyPSI5MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDMiLz48bGluZSB4MT0iNjYwIiB5MT0iMCIgeDI9IjY2MCIgeTI9IjkwMCIgc3Ryb2tlPSIjRkY4QTNEIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMyIvPjxsaW5lIHgxPSI3MjAiIHkxPSIwIiB4Mj0iNzIwIiB5Mj0iOTAwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzIi8+PGxpbmUgeDE9Ijc4MCIgeTE9IjAiIHgyPSI3ODAiIHkyPSI5MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDMiLz48bGluZSB4MT0iODQwIiB5MT0iMCIgeDI9Ijg0MCIgeTI9IjkwMCIgc3Ryb2tlPSIjRkY4QTNEIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMyIvPjxsaW5lIHgxPSI5MDAiIHkxPSIwIiB4Mj0iOTAwIiB5Mj0iOTAwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzIi8+PGxpbmUgeDE9Ijk2MCIgeTE9IjAiIHgyPSI5NjAiIHkyPSI5MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDMiLz48bGluZSB4MT0iMTAyMCIgeTE9IjAiIHgyPSIxMDIwIiB5Mj0iOTAwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzIi8+PGxpbmUgeDE9IjEwODAiIHkxPSIwIiB4Mj0iMTA4MCIgeTI9IjkwMCIgc3Ryb2tlPSIjRkY4QTNEIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMyIvPjxsaW5lIHgxPSIxMTQwIiB5MT0iMCIgeDI9IjExNDAiIHkyPSI5MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDMiLz48bGluZSB4MT0iMTIwMCIgeTE9IjAiIHgyPSIxMjAwIiB5Mj0iOTAwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzIi8+PGxpbmUgeDE9IjEyNjAiIHkxPSIwIiB4Mj0iMTI2MCIgeTI9IjkwMCIgc3Ryb2tlPSIjRkY4QTNEIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMyIvPjxsaW5lIHgxPSIxMzIwIiB5MT0iMCIgeDI9IjEzMjAiIHkyPSI5MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDMiLz48bGluZSB4MT0iMTM4MCIgeTE9IjAiIHgyPSIxMzgwIiB5Mj0iOTAwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzIi8+PGxpbmUgeDE9IjE0NDAiIHkxPSIwIiB4Mj0iMTQ0MCIgeTI9IjkwMCIgc3Ryb2tlPSIjRkY4QTNEIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4wMyIvPjxsaW5lIHgxPSIxNTAwIiB5MT0iMCIgeDI9IjE1MDAiIHkyPSI5MDAiIHN0cm9rZT0iI0ZGOEEzRCIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIuMDMiLz48bGluZSB4MT0iMTU2MCIgeTE9IjAiIHgyPSIxNTYwIiB5Mj0iOTAwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjAzIi8+PHJlY3Qgd2lkdGg9IjE2MDAiIGhlaWdodD0iOTAwIiBmaWxsPSJ1cmwoI3YpIi8+CjxsaW5lIHgxPSI5NDAiIHkxPSI3NjAiIHgyPSIxNDIwIiB5Mj0iNzYwIiBzdHJva2U9IiNGRjhBM0QiIHN0cm9rZS13aWR0aD0iMS41IiBvcGFjaXR5PSIuMzUiLz48cmVjdCB4PSI5ODAiIHk9IjY1NiIgd2lkdGg9IjMwIiBoZWlnaHQ9IjEwNCIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC4yNiIvPjxyZWN0IHg9Ijk4MCIgeT0iNjU2IiB3aWR0aD0iMzAiIGhlaWdodD0iMiIgZmlsbD0iI0ZGOEEzRCIgb3BhY2l0eT0iLjYiLz48dGV4dCB4PSI5OTUuMCIgeT0iNzg2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNyIgZmlsbD0iI0ZGOEEzRCIgb3BhY2l0eT0iLjQ1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4xPC90ZXh0Pjx0ZXh0IHg9Ijk5NS4wIiB5PSI2NDIiIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLHNlcmlmIiBmb250LXNpemU9IjE1IiBmaWxsPSIjRkZENEIzIiBvcGFjaXR5PSIuNSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+NDwvdGV4dD48cmVjdCB4PSIxMDMyIiB5PSI2MzAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxMzAiIGZpbGw9InVybCgjZykiIG9wYWNpdHk9IjAuMjciLz48cmVjdCB4PSIxMDMyIiB5PSI2MzAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyIiBmaWxsPSIjRkY4QTNEIiBvcGFjaXR5PSIuNiIvPjx0ZXh0IHg9IjEwNDcuMCIgeT0iNzg2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNyIgZmlsbD0iI0ZGOEEzRCIgb3BhY2l0eT0iLjQ1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yPC90ZXh0Pjx0ZXh0IHg9IjEwNDcuMCIgeT0iNjE2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNSIgZmlsbD0iI0ZGRDRCMyIgb3BhY2l0eT0iLjUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjU8L3RleHQ+PHJlY3QgeD0iMTA4NCIgeT0iMzk2IiB3aWR0aD0iMzAiIGhlaWdodD0iMzY0IiBmaWxsPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjM2Ii8+PHJlY3QgeD0iMTA4NCIgeT0iMzk2IiB3aWR0aD0iMzAiIGhlaWdodD0iMiIgZmlsbD0iI0ZGOEEzRCIgb3BhY2l0eT0iLjYiLz48dGV4dCB4PSIxMDk5LjAiIHk9Ijc4NiIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTciIGZpbGw9IiNGRjhBM0QiIG9wYWNpdHk9Ii40NSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+MzwvdGV4dD48dGV4dCB4PSIxMDk5LjAiIHk9IjM4MiIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTUiIGZpbGw9IiNGRkQ0QjMiIG9wYWNpdHk9Ii41IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4xNDwvdGV4dD48cmVjdCB4PSIxMTM2IiB5PSI1NzgiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxODIiIGZpbGw9InVybCgjZykiIG9wYWNpdHk9IjAuMjkiLz48cmVjdCB4PSIxMTM2IiB5PSI1NzgiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyIiBmaWxsPSIjRkY4QTNEIiBvcGFjaXR5PSIuNiIvPjx0ZXh0IHg9IjExNTEuMCIgeT0iNzg2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNyIgZmlsbD0iI0ZGOEEzRCIgb3BhY2l0eT0iLjQ1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj40PC90ZXh0Pjx0ZXh0IHg9IjExNTEuMCIgeT0iNTY0IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNSIgZmlsbD0iI0ZGRDRCMyIgb3BhY2l0eT0iLjUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjc8L3RleHQ+PHJlY3QgeD0iMTE4OCIgeT0iMjE0IiB3aWR0aD0iMzAiIGhlaWdodD0iNTQ2IiBmaWxsPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjQzIi8+PHJlY3QgeD0iMTE4OCIgeT0iMjE0IiB3aWR0aD0iMzAiIGhlaWdodD0iMiIgZmlsbD0iI0ZGOEEzRCIgb3BhY2l0eT0iLjYiLz48dGV4dCB4PSIxMjAzLjAiIHk9Ijc4NiIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTciIGZpbGw9IiNGRjhBM0QiIG9wYWNpdHk9Ii40NSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+NTwvdGV4dD48dGV4dCB4PSIxMjAzLjAiIHk9IjIwMCIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTUiIGZpbGw9IiNGRkQ0QjMiIG9wYWNpdHk9Ii41IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yMTwvdGV4dD48cmVjdCB4PSIxMjQwIiB5PSIzNzAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzOTAiIGZpbGw9InVybCgjZykiIG9wYWNpdHk9IjAuMzciLz48cmVjdCB4PSIxMjQwIiB5PSIzNzAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyIiBmaWxsPSIjRkY4QTNEIiBvcGFjaXR5PSIuNiIvPjx0ZXh0IHg9IjEyNTUuMCIgeT0iNzg2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNyIgZmlsbD0iI0ZGOEEzRCIgb3BhY2l0eT0iLjQ1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj42PC90ZXh0Pjx0ZXh0IHg9IjEyNTUuMCIgeT0iMzU2IiBmb250LWZhbWlseT0iR2VvcmdpYSxzZXJpZiIgZm9udC1zaXplPSIxNSIgZmlsbD0iI0ZGRDRCMyIgb3BhY2l0eT0iLjUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjE1PC90ZXh0PjxyZWN0IHg9IjEyOTIiIHk9IjIxNCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjU0NiIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40MyIvPjxyZWN0IHg9IjEyOTIiIHk9IjIxNCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIiIGZpbGw9IiNGRjhBM0QiIG9wYWNpdHk9Ii42Ii8+PHRleHQgeD0iMTMwNy4wIiB5PSI3ODYiIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLHNlcmlmIiBmb250LXNpemU9IjE3IiBmaWxsPSIjRkY4QTNEIiBvcGFjaXR5PSIuNDUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjc8L3RleHQ+PHRleHQgeD0iMTMwNy4wIiB5PSIyMDAiIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLHNlcmlmIiBmb250LXNpemU9IjE1IiBmaWxsPSIjRkZENEIzIiBvcGFjaXR5PSIuNSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+MjE8L3RleHQ+PHJlY3QgeD0iMTM0NCIgeT0iNDIyIiB3aWR0aD0iMzAiIGhlaWdodD0iMzM4IiBmaWxsPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjM1Ii8+PHJlY3QgeD0iMTM0NCIgeT0iNDIyIiB3aWR0aD0iMzAiIGhlaWdodD0iMiIgZmlsbD0iI0ZGOEEzRCIgb3BhY2l0eT0iLjYiLz48dGV4dCB4PSIxMzU5LjAiIHk9Ijc4NiIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTciIGZpbGw9IiNGRjhBM0QiIG9wYWNpdHk9Ii40NSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+ODwvdGV4dD48dGV4dCB4PSIxMzU5LjAiIHk9IjQwOCIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtc2l6ZT0iMTUiIGZpbGw9IiNGRkQ0QjMiIG9wYWNpdHk9Ii41IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4xMzwvdGV4dD4KPHRleHQgeD0iOTQwIiB5PSI4MjIiIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLHNlcmlmIiBmb250LXNpemU9IjE2IiBmaWxsPSIjRkY4QTNEIiBvcGFjaXR5PSIuMzgiIGxldHRlci1zcGFjaW5nPSIzIj5DSVNJIElDV0lNIFY3ICDCtyAgQ0hBUFRFUiBXRUlHSFRJTkc8L3RleHQ+PC9zdmc+') center right / cover no-repeat, linear-gradient(168deg,#241040 0%,#180A2B 62%); border-bottom:1px solid rgba(255,138,61,.20); } @media(max-width:900px){ .hero{background:linear-gradient(180deg, rgba(24,10,43,.96), rgba(24,10,43,.99)),linear-gradient(168deg,#241040 0%,#180A2B 62%);} } /* The purple band. */ .band-navy{ background: linear-gradient(168deg, rgba(36,16,64,.90) 0%, rgba(24,10,43,.95) 62%), radial-gradient(120% 90% at 78% 12%, rgba(242,106,27,.18) 0%, transparent 58%), linear-gradient(168deg,#241040 0%,#180A2B 62%); border-top:1px solid rgba(255,138,61,.20); border-bottom:1px solid rgba(255,138,61,.20); } /* Orbs. */ .hero:before{background:radial-gradient(circle, rgba(242,106,27,.50) 0%, rgba(217,89,0,.18) 40%, transparent 68%);} .hero:after{background:radial-gradient(circle, rgba(111,63,176,.72) 0%, rgba(69,32,115,.26) 44%, transparent 70%);} /* Glass over purple. */ .product-panel{background:rgba(36,16,64,.52);border-color:rgba(255,138,61,.24);} @supports (backdrop-filter:blur(22px)){ .product-panel{background:rgba(36,16,64,.34);} } header,.site-header,nav.site-nav{background:rgba(251,248,250,.72);border-bottom-color:rgba(230,222,232,.85);} @supports (backdrop-filter:blur(14px)){ header,.site-header,nav.site-nav{background:rgba(251,248,250,.58);} } /* Glow, orange. */ .btn-gold{ background:linear-gradient(180deg,#F26A1B,#D95900);color:#fff;border-color:#B84A00; box-shadow:0 1px 0 rgba(255,255,255,.26) inset, 0 6px 18px -8px rgba(217,89,0,.62), 0 0 26px -6px rgba(242,106,27,.46); } .btn-gold:hover{box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 10px 26px -8px rgba(217,89,0,.72), 0 0 44px -4px rgba(242,106,27,.64);} .hero .btn-gold{background:linear-gradient(180deg,#F26A1B,#D95900);color:#fff;} .hero .btn-gold:hover{background:linear-gradient(180deg,#FF8A3D,#F26A1B);color:#fff;} .hero .btn-ghost:hover{box-shadow:0 0 0 1px rgba(255,138,61,.48), 0 0 26px -8px rgba(242,106,27,.52);} .card:hover,.course-tile:hover{border-color:rgba(242,106,27,.55);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 56px -18px rgba(24,10,43,.26),0 0 30px -10px rgba(242,106,27,.42);} .course-tile.featured{border-color:rgba(242,106,27,.5);box-shadow:0 26px 60px -20px rgba(24,10,43,.30),0 0 40px -12px rgba(242,106,27,.46);} .ring-value{text-shadow:0 0 22px rgba(255,138,61,.60);} .ring-wrap svg circle:last-child{filter:drop-shadow(0 0 8px rgba(242,106,27,.65));} .mock-bar-fill{background:#F26A1B;box-shadow:0 0 12px -2px rgba(242,106,27,.65);} .mockup-nav-item.active{background:rgba(242,106,27,.14);color:#FFC49A;} /* Top seam and UAE mark. */ body:before{background:linear-gradient(90deg,#B84A00,#FF8A3D 42%,#B84A00);} .hero .eyebrow:after{ border-color:rgba(255,138,61,.44); background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAxNiI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjE2IiBmaWxsPSIjZmZmIi8+PHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iMTYiIGZpbGw9IiNDRTExMjYiLz48cmVjdCB4PSI2IiB3aWR0aD0iMTgiIGhlaWdodD0iNS4zMyIgZmlsbD0iIzAwOTczOSIvPjxyZWN0IHg9IjYiIHk9IjEwLjY3IiB3aWR0aD0iMTgiIGhlaWdodD0iNS4zNCIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==') 13px center / 21px 14px no-repeat, linear-gradient(180deg, rgba(242,106,27,.18), rgba(242,106,27,.07)); box-shadow:0 0 0 1px rgba(0,0,0,.2) inset, 0 0 22px -8px rgba(242,106,27,.6); } ::selection{background:#FFD4B3;color:#14101C;} /* ==================== audit fixes ==================== UAE badge is now a real element above the headline, not a pseudo element hanging off the eyebrow. Bigger, and impossible to miss. */ .uae-badge{ display:inline-flex;align-items:center; margin:0 0 18px;padding:9px 18px 9px 44px; font-size:.72rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase; color:#f7ecdd; border:1px solid rgba(255,138,61,.48); border-radius:99px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAxNiI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjE2IiBmaWxsPSIjZmZmIi8+PHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iMTYiIGZpbGw9IiNDRTExMjYiLz48cmVjdCB4PSI2IiB3aWR0aD0iMTgiIGhlaWdodD0iNS4zMyIgZmlsbD0iIzAwOTczOSIvPjxyZWN0IHg9IjYiIHk9IjEwLjY3IiB3aWR0aD0iMTgiIGhlaWdodD0iNS4zNCIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==') 15px center / 22px 15px no-repeat, linear-gradient(180deg, rgba(242,106,27,.20), rgba(242,106,27,.07)); box-shadow:0 0 0 1px rgba(0,0,0,.22) inset, 0 0 26px -8px rgba(242,106,27,.65); } @media(max-width:620px){ .uae-badge{font-size:.63rem;padding:8px 14px 8px 38px;background-position:12px center;background-size:19px 13px;} } /* the old pseudo-element version is retired */ .hero .eyebrow:after{content:none;} .hero .eyebrow{display:inline-flex;} /* Section heads sit centred with a gold rule. A left-aligned head with a centred rule looked like a mistake. Match the rule to the alignment. */ .section-head.align-left{padding-top:26px;} .section-head.align-left:before{left:0;transform:none;} /* FAQ: glass panels need their own text colour held, and the open/closed affordance was invisible against the new surfaces. */ .faq-item{border-radius:12px;padding:20px 22px;margin-bottom:12px;} .faq-item h3,.faq-item summary{color:var(--ink);} .faq-item p{color:var(--ink-soft);} .faq-item:hover{border-color:rgba(242,106,27,.45);} /* Any element that sets white text must keep a dark surface under it, whatever the glass layer does. */ .price-card.featured,.band-navy .card,.callout-navy,footer.site{ --glass-guard:1; } .price-card.featured{background:linear-gradient(165deg,var(--navy-800),var(--navy-950));} /* ==================== round 2 refinements ==================== 1. HERO PANEL SWAP, no flash. hero-question.js replaces the panel title with a toggle. For a moment the browser paints the old title, then it is swapped. Hiding it up front when the document is scripted removes the swap entirely, and a reserved height stops the row jumping. */ .product-panel .mockup-topbar{min-height:52px;} html.js .product-panel .mockup-title{display:none;} html:not(.js) .product-panel .mockup-title{display:inline;} /* the panel itself must never sit invisible waiting on the observer */ .hero .product-panel.reveal{opacity:1;transform:none;} /* 2. GLASS, stronger. Blur raised to 24px as requested. The background opacity is NOT dropped to .05: that value is for glass over a dark surface. On a light page a 5 percent white fill is invisible and the text loses its background. Dark panels get the low value, light panels keep enough fill to stay readable. */ @supports (backdrop-filter:blur(24px)) or (-webkit-backdrop-filter:blur(24px)){ .card,.course-tile,.faq-item,.form-card,.fact-strip,.pricing-grid,.journey-step{ -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4); background:rgba(255,255,255,.40); border:1px solid rgba(255,255,255,.78); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(24,10,43,.06), 0 26px 60px -18px rgba(24,10,43,.28); } .product-panel{ -webkit-backdrop-filter:blur(26px) saturate(1.3); backdrop-filter:blur(26px) saturate(1.3); background:rgba(36,16,64,.30); border:1px solid rgba(255,255,255,.12); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 20px 60px rgba(0,0,0,.80), 0 0 0 1px rgba(255,138,61,.14); } header,.site-header,nav.site-nav{ -webkit-backdrop-filter:blur(24px) saturate(1.3); backdrop-filter:blur(24px) saturate(1.3); background:rgba(251,248,250,.62); } } /* 3. ORBS, more presence. screen blending makes light add rather than sit on top, which is what gives them the look of real light on a dark surface. translate3d and will-change push the animation onto the GPU. */ .hero:before,.hero:after{ mix-blend-mode:screen; will-change:transform; filter:blur(4px); } .hero:before{background:radial-gradient(circle, rgba(242,106,27,.62) 0%, rgba(217,89,0,.22) 40%, transparent 68%);} .hero:after{background:radial-gradient(circle, rgba(122,72,190,.80) 0%, rgba(69,32,115,.30) 44%, transparent 70%);} @keyframes bp-float-a{ 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(70px,-52px,0) scale(1.10);} } @keyframes bp-float-b{ 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(-58px,42px,0) scale(1.08);} } /* 4. BUTTON GLOW, multi-layered, and it must survive the hero rules in the original stylesheet, which reset background on hover. */ .btn-gold,.hero .btn-gold{ background:linear-gradient(180deg,var(--gold-500),var(--gold-600)); color:#fff;border:1px solid var(--gold-700); box-shadow: 0 1px 0 rgba(255,255,255,.26) inset, 0 0 15px rgba(242,106,27,.40), 0 0 30px rgba(242,106,27,.20); transition:box-shadow .28s var(--ease), transform .28s var(--ease), filter .28s var(--ease); } .btn-gold:hover,.hero .btn-gold:hover{ background:linear-gradient(180deg,var(--gold-400),var(--gold-500)); color:#fff; transform:translateY(-2px) scale(1.02); filter:brightness(1.04); box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 0 22px rgba(242,106,27,.55), 0 0 46px rgba(242,106,27,.30), 0 10px 26px -8px rgba(217,89,0,.55); } .btn-gold:active,.hero .btn-gold:active{transform:translateY(0) scale(1);} @media (prefers-reduced-motion:reduce){ .btn-gold:hover,.hero .btn-gold:hover{transform:none;} } /* journey step headings moved from h4 to h3 for correct hierarchy. Keep the visual weight identical, this is a semantics fix only. */ .journey-step h3.journey-h{ margin:2px 0 5px;font-size:1.02rem;font-weight:700;letter-spacing:-.012em; color:var(--ink);transition:color .3s var(--ease); } .journey-step:hover h3.journey-h{color:var(--navy-700);} /* founder credentials, now seven items instead of four */ .founder-creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;} .founder-creds span{ font-size:.70rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--gold-300); border:1px solid rgba(255,138,61,.32); background:linear-gradient(180deg, rgba(242,106,27,.14), rgba(242,106,27,.05)); padding:6px 12px;border-radius:99px;white-space:nowrap; } .founder-creds span:last-child{ color:#f7ecdd;border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06); } /* Data tables on small screens. A five column table cannot fit 375px without either shrinking the text to nothing or wrapping every cell into a column of single words. Neither is readable, so the table keeps its shape and the wrapper scrolls sideways. -webkit-overflow-scrolling gives it momentum on iOS. */ .bp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1rem;} /* Batch 18 (L3). The scroll box is a focusable region, so the keyboard can reach and scroll the table on a phone; the site's usual focus ring. */ .bp-table-wrap:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--gold-600); border-radius:var(--radius-sm);} .bp-table{width:100%;border-collapse:collapse;min-width:520px;} .bp-table th,.bp-table td{padding:.55rem .7rem;border-bottom:1px solid var(--line,#e5e2dc); text-align:left;} .bp-table th:not(:first-child),.bp-table td:not(:first-child){text-align:right; white-space:nowrap;} @media (max-width:620px){ .bp-table-wrap{margin-left:-18px;margin-right:-18px;padding:0 18px;} } /* ============================================================ Typography: Geist ------------------------------------------------------------ The display serif read as editorial. Bourse Prep is a software product that happens to teach finance, so the type should read as an interface rather than as a journal. Everything below is weight, size, tracking and rhythm. No colours, no layout, no components. The logo and the app wordmark keep their serif and are untouched. Two things change because the typeface changed, not because someone preferred them: Geist has a larger x-height than Source Serif 4, so the same pixel size looks noticeably bigger. Display sizes come down slightly to compensate rather than getting louder by accident. Sans faces need tighter tracking at display sizes and looser tracking at small sizes than a serif does. That is handled per step below rather than with one global value. ============================================================ */ /* Large text: tighten as it grows. */ .hero h1{font-size:clamp(2.2rem,4.2vw,3.25rem);font-weight:680; line-height:1.04;letter-spacing:-.032em;} .page-hero h1{font-size:clamp(1.9rem,3.4vw,2.35rem);font-weight:680; line-height:1.08;letter-spacing:-.028em;} h1{font-weight:680;letter-spacing:-.026em;line-height:1.1;} h2{font-weight:640;letter-spacing:-.021em;line-height:1.18;} h3{font-weight:600;letter-spacing:-.014em;line-height:1.3;} h4{font-weight:600;letter-spacing:-.008em;} /* Rhythm. A heading belongs to the text under it, so the space above it is larger than the space below. */ h2{margin-top:2.1em;margin-bottom:.6em;} h3{margin-top:1.6em;margin-bottom:.45em;} h2:first-child,h3:first-child{margin-top:0;} /* Body. Long chapter pages are read for a long time, so this is the one place to be generous rather than tight. 68 characters is the comfortable end of the usual measure. */ body{font-weight:400;letter-spacing:-.003em;} p{line-height:1.65;} .container p:not(.small):not(.lede):not(.muted){max-width:68ch;} li{line-height:1.6;} /* Small text needs the opposite treatment to headings: at these sizes a sans face closes up, so let it breathe. */ .small,.muted{letter-spacing:.004em;line-height:1.55;} /* Interface. Restrained, not shouty. */ .main-links a,.mobile-nav a{font-weight:550;letter-spacing:-.008em;} .btn,button,.btn-gold,.btn-outline,.btn-ghost{font-weight:600;letter-spacing:-.006em;} .eyebrow{font-weight:600;letter-spacing:.09em;font-size:.74rem;} /* Numbers. Tabular figures so columns line up and a changing readiness score does not make the layout twitch. */ .num,.price-amount,.fact-num,.stat b,.ring, .bp-table td,.bp-table th{font-variant-numeric:tabular-nums;} .price-amount{font-weight:680;letter-spacing:-.026em;} .fact-num{font-weight:670;letter-spacing:-.022em;} /* Tables read better with slightly tighter text than body copy. */ .bp-table{font-size:.94rem;letter-spacing:-.002em;} .bp-table th{font-weight:600;letter-spacing:.02em;font-size:.78rem; text-transform:uppercase;color:var(--ink-soft,#4A4356);} /* The lead paragraph was serif by name. It stays larger and quieter, which is what it was actually doing. */ .lead-serif{font-weight:400;letter-spacing:-.011em;line-height:1.5;} @media (max-width:620px){ /* Tight tracking that flatters a 3rem heading hurts a 1.9rem one. */ .hero h1{letter-spacing:-.022em;line-height:1.1;} .page-hero h1{letter-spacing:-.02em;} h2{margin-top:1.7em;} } /* Appearance control sits in the footer, not the primary navigation. It is a setting people change once, so it does not deserve a slot next to Pricing. */ .footer-appearance{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap} .footer-appearance-label{font-size:.78rem;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-faint);font-weight:600} /* Quiet secondary action in the header. A plain link rather than a second box, so the primary action is unambiguous. */ .nav-quiet{color:var(--ink-soft);text-decoration:none;font-weight:550; font-size:.92rem;padding:.5rem .2rem;transition:color .18s ease} .nav-quiet:hover{color:var(--navy-700)} /* .nav-caret removed: the stylesheet already draws a chevron on .nav-drop > a:after, and shipping both put two indicators beside every menu. */ .mobile-group{margin:1rem 0 .2rem;font-size:.72rem;font-weight:600; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)} /* Touch targets in the drawer. 48px is the comfortable minimum for a thumb. */ @media (max-width:900px){ .mobile-nav a{min-height:48px;display:flex;align-items:center} .menu-toggle{min-width:48px;min-height:48px} } /* ============================================================ Section rhythm ------------------------------------------------------------ Sections were 104px top and bottom, so 208px of empty space between every idea. On a laptop that is most of a screen with nothing in it, which reads as missing content rather than as confidence. 72px still breathes and moves with purpose. ============================================================ */ section{padding:72px 0;} @media (max-width:900px){ section{padding:52px 0;} } /* Secondary pages should reach their useful content sooner. The home page keeps a dramatic hero because it is doing a different job; a chapter page is somewhere you arrived on purpose and want to start reading. */ .page-hero{padding:48px 0 44px;} @media (max-width:900px){ .page-hero{padding:36px 0 32px;} } .page-hero + section{padding-top:44px;} @media (max-width:900px){ .page-hero + section{padding-top:32px;} } /* ============================================================ Proof band. The numbers are the argument, so they are set as numbers and nothing else: no cards, no icons, no colour per tile. Hairline separators carry the grouping. ============================================================ */ .proof-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--white)} .proof-band .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .proof-item{padding:34px 26px;border-left:1px solid var(--line)} .proof-item:first-child{border-left:0} .proof-num{display:block;font-size:2.5rem;font-weight:680;letter-spacing:-.032em; line-height:1;color:var(--navy-950);font-variant-numeric:tabular-nums} .proof-label{display:block;margin-top:.5rem;font-size:.9rem;color:var(--ink-soft); line-height:1.4} @media (max-width:820px){ .proof-band .container{grid-template-columns:repeat(2,1fr)} .proof-item{padding:26px 18px} .proof-item:nth-child(3){border-left:0} .proof-item:nth-child(n+3){border-top:1px solid var(--line)} .proof-num{font-size:2rem} } @media (max-width:400px){ .proof-band .container{grid-template-columns:1fr} .proof-item{border-left:0;border-top:1px solid var(--line)} .proof-item:first-child{border-top:0} } /* ============================================================ Hero: remove the orange orb ------------------------------------------------------------ .hero:before was a 760px orange radial at top:-32% left:-14%, blurred, screen-blended and drifting on a 26 second loop. It read as a sunrise behind the headline, which is decoration pretending to be atmosphere. It is removed rather than toned down, because a weaker version of a gimmick is still a gimmick. Nothing replaces it. The purple orb survives but stops being a light source: no animation, much lower opacity, and it now reads as depth in the base rather than as an object floating in front of it. The hero should be expensive because of the typography, the spacing and the real product panel, not because something is glowing. ============================================================ */ .hero:before{content:none !important;display:none !important;} .hero:after{ width:min(560px,62vw);height:min(560px,62vw); bottom:-38%;right:-14%; background:radial-gradient(circle, rgba(90,45,147,.30) 0%, rgba(69,32,115,.10) 46%, transparent 72%) !important; animation:none !important; filter:blur(28px) !important; mix-blend-mode:normal !important; } /* The band behind the skyline carried the same orange wash. Same reasoning, same treatment: keep the purple, drop the flare. */ .band-navy{ background: linear-gradient(168deg, rgba(36,16,64,.90) 0%, rgba(24,10,43,.95) 62%), linear-gradient(168deg,#241040 0%,#180A2B 62%); } /* ============================================================ Touch targets on tablets ------------------------------------------------------------ A 1024px iPad gets the desktop navigation, where links were 21px tall and dropdown items 20px. That is fine for a mouse and poor for a thumb, and width alone cannot tell the two apart: a 1024px window may be a laptop or a tablet. pointer:coarse asks the right question. It targets the input device rather than the screen size, so a touch tablet gets comfortable targets at any width and a mouse keeps the tighter, denser layout it suits. ============================================================ */ @media (pointer: coarse){ .main-links > a, .nav-drop > a{min-height:44px;display:inline-flex;align-items:center} .nav-drop-menu a{min-height:48px;display:flex;flex-direction:column; justify-content:center;padding-top:.55rem;padding-bottom:.55rem} .nav-quiet{min-height:44px;display:inline-flex;align-items:center} .footer-grid a,.footer-bottom a{min-height:32px;display:inline-flex; align-items:center} /* The hero product tabs are a real control, not a label. */ .hq-tab{min-height:44px} } /* ============================================================ Hero backdrop: remove the chapter-weighting chart ------------------------------------------------------------ The hero carried a decorative base64 SVG of the ICWIM Version 7 chapter weighting, positioned center right under the product panel. The dashboard mockup sits exactly there, so the bars, the numbers and the CHAPTER WEIGHTING label showed through around its edges. It read as two interfaces accidentally stacked, which is what Usman saw. It also predates the rebrand: it is drawn in the old navy and gold (#cfa94e on #071426), so it was fighting the purple hero as well as the panel. Removed rather than repositioned. The information is real and worth showing, but it belongs somewhere it can be read, and it already is: the syllabus hub prints all eight weightings as a table. A chart nobody can read behind a screenshot is decoration, and the hero is stronger without it. Nothing replaces it. The purple gradient already carried the hero on mobile, where this image was never applied. ============================================================ */ .hero{ background: linear-gradient(168deg, rgba(36,16,64,.55) 0%, rgba(24,10,43,.88) 62%), linear-gradient(168deg,#241040 0%,#180A2B 62%) !important; } /* ============================================================ Primary orange CTA: white text on a deeper orange ------------------------------------------------------------ The orange buttons carried white text on a #F26A1B to #D95900 gradient. Measured against both stops: white on #F26A1B 3.06 white on #D95900 3.90 So white failed against the whole gradient, which is the pale orange-on-orange Usman reported. Deep plum ink passed on the same gradient (6.13 and 4.82) and was used for a while, but Usman chose white text (29 September). White is kept above 4.5 by deepening the orange instead of changing the ink. The gradient first started at #D45600, which is 4.09 at the very top: the text itself never sat that high, but an automated checker reads the top colour of a gradient, so the site would have failed an accessibility scan. It then started at #C85000, the app's own flat orange, and white passed at every pixel, top included (F12, 29 September). 30 September, after the homepage went live: Usman found that deeper orange dull ("it looks cheap"), and chose the brand orange itself, the same #F26A1B to #D95900 the glow, the ring and the logo's underline use, with white text. Measured at each stop: normal #F26A1B to #D95900 3.07 at the top, 3.90 at the bottom hover #E8620F to #CC5300 3.44 at the top, 4.32 at the bottom pressed #D95900 to #B84A00 3.90 at the top, 5.19 at the bottom That is under the 4.5 : 1 that WCAG AA asks of body-size text and above the 3 : 1 it asks of large text and of controls. It is the owner's decision, recorded for the accessibility check before the public launch (unit/buttons.test.mjs holds the 3 : 1 line). The app's own flat buttons (app.css) keep #C85000 for now. The older hover rules above brighten the button with a filter, which would lift the orange back under 4.5, so hover and pressed set filter:none and change the gradient instead. The glows keep the bright #F26A1B: they sit around the button, not behind the words. There were also three different text colours in use across instances of the same button: white on most, rgb(24,10,43) on "Read the ICWIM Guide", rgb(20,16,28) on one header CTA. One component, one treatment. Every state is declared so none inherits by accident, and the button is readable in its normal state rather than only after hover. ============================================================ */ .btn-gold, .hero .btn-gold, .nav-cta .btn-gold, .mobile-nav-cta .btn-gold{ background:linear-gradient(180deg,#F26A1B,#D95900); color:#fff; } .btn-gold:hover, .hero .btn-gold:hover{ background:linear-gradient(180deg,#E8620F,#CC5300); color:#fff; filter:none; } .btn-gold:active, .hero .btn-gold:active{ background:linear-gradient(180deg,#D95900,#B84A00); color:#fff; filter:none; } .btn-gold:focus-visible{ outline:2px solid var(--navy-950); outline-offset:2px; } .btn-gold[aria-disabled="true"], .btn-gold.btn-disabled{ opacity:.5; background:linear-gradient(180deg,#F26A1B,#D95900); color:#fff; pointer-events:none; } /* The demo verdict only appears after a question is answered, which is why it survived every audit of the static page. #c94b4b on the paper measures 4.34, just under the 4.5 needed at that size. The semantic danger and success tokens are the same meaning stated properly, and both clear it with room. */ .demo-verdict.is-incorrect{color:var(--danger)} .demo-verdict.is-correct{color:var(--success)} /* ============================================================ Batch 1 (the look before the design phase) ============================================================ */ /* A4. The hero picture's score reads out of 100, as the app does. */ .ring-value .ring-of{font-size:.5em;opacity:.7;margin-left:2px;font-weight:600} /* A4. Real screens from the app, in a light window. */ .app-shot{margin:0 auto;max-width:1000px;background:var(--white);border:1px solid var(--line); border-radius:14px;overflow:hidden; box-shadow:0 2px 4px rgba(24,10,43,.05),0 28px 60px -24px rgba(24,10,43,.30)} .app-shot-bar{display:flex;align-items:center;gap:6px;padding:10px 14px; border-bottom:1px solid var(--line);background:var(--paper-2)} .app-shot-bar span{width:9px;height:9px;border-radius:50%;background:var(--line)} .app-shot-bar em{font-style:normal;font-size:.78rem;color:var(--ink-faint);margin-left:10px} .app-shot-img{background:var(--paper);padding:22px} .app-shot-img img{display:block;width:100%;height:auto;border-radius:10px} .app-shot-note{text-align:center;font-size:.82rem;color:var(--ink-faint);margin:14px 0 0} @media(max-width:640px){.app-shot-img{padding:10px}} /* A5. The six steps across the full width: three by two on a desktop, two columns on a tablet, one on a phone. The caption sits centred above them. A grid has no single line to follow, so the connectors between steps go; the numbers keep their glow. */ .journey-grid{display:block;max-width:none} .journey-grid > div:first-child{max-width:62ch;margin:-6px auto 34px;text-align:center} .journey-grid > div:first-child:after{display:none} .journey-caption{border-left:0;padding-left:0;margin-top:0;font-size:1rem;line-height:1.65} .journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .journey-step{margin-bottom:0;flex-direction:column;gap:16px} .journey-step:after{display:none} @media(max-width:1000px){.journey{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.journey{grid-template-columns:1fr;gap:14px}.journey-step{flex-direction:row}} /* B4. Help and support, FAQ and Contact on one line. The footer's column links are blocks; these three sit inside a sentence. */ footer.site .footer-bottom span a{display:inline;padding:0} @media (pointer: coarse){ footer.site .footer-bottom span a{display:inline-flex;min-height:32px;align-items:center} } /* 12. The free demo: three lengths to choose from, ten marked as the one to pick. Each is still a button that starts the demo. */ .demo-start-lead{margin:14px 0 0;font-weight:600;color:var(--ink)} .demo-lengths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 18px} .demo-length{display:block;width:100%;padding:16px 12px;border-radius:12px;text-align:center; border:1px solid var(--line);background:var(--white);color:var(--ink);font:inherit; line-height:1.4;cursor:pointer; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)} .demo-length-n{font-weight:700;white-space:nowrap} .demo-length-label{display:block;color:var(--ink-soft);white-space:nowrap} /* B1-OBS-2. The count on one line, the label under it, and no visible separator. The comma between them is for screen readers, so the button is named "10 questions, Recommended". It stays inline: the usual position:absolute hiding turns it into a block, and the name then reads "10 questions , Recommended". It is a pixel high rather than zero, which some screen readers skip, and transparent. */ .demo-length-sep{font-size:1px;line-height:0;color:transparent;clip-path:inset(50%)} .demo-length:hover{border-color:var(--gold-500);transform:translateY(-2px); box-shadow:0 8px 24px -12px rgba(242,106,27,.5)} .demo-length:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px} .demo-length.is-recommended{border-color:var(--gold-500);background:var(--gold-100); box-shadow:0 0 0 3px rgba(242,106,27,.14),0 10px 26px -14px rgba(242,106,27,.6)} .demo-length.is-recommended .demo-length-label{color:var(--gold-700);font-weight:600} .demo-start-note{margin:0 0 6px;color:var(--ink-soft)} @media(max-width:640px){.demo-lengths{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.demo-length:hover{transform:none}} /* ============================================================ Batch 2 (the outside reviews, 29 September) ============================================================ */ /* 28 (F2). The phone menu scrolls inside itself. It used to run past the bottom of the screen with the page locked behind it, so Sign in and the demo button could not be reached at 375 x 812. Its height is the window below where it starts (site.js measures that when it opens); the page behind stays locked, as before. */ .mobile-nav.open{ max-height:calc(100vh - var(--bp-nav-top, 64px)); max-height:calc(100dvh - var(--bp-nav-top, 64px)); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } /* 29 (F6). The tagline under the header logo, 11px where it is shown and not shown where it would not fit beside the menu. The logo itself is vector paths and needs no font. */ .brand small{font-size:11px;letter-spacing:.12em} @media (max-width:1199.98px){ .brand small{display:none} } /* 30 (F7). The small footer text on the dark footer measured about 3.5:1. All of it now reads at 6.5:1 or more: the disclaimer, the copyright, the help links and the line beneath them. Link hover colours are unchanged. */ .footer-disclaimer{color:rgba(247,244,234,.6)} .footer-bottom{color:rgba(247,244,234,.6)} /* 25 (F8). The hero's dashboard picture on a phone: each chapter's label above its bar, and the bar across the full width. Desktop is unchanged. */ @media (max-width:640px){ .mock-bar-row{flex-wrap:wrap;row-gap:6px} .mock-bar-row > span:first-child{width:100%} .mock-bar-row .mock-bar-pct{width:auto;min-width:32px} } /* 26 (F9). Stacked price cards stand apart: a gap between them, and each its own border and corners. Side by side on a desktop, they are unchanged. */ @media (max-width:900px){ .pricing-grid{gap:16px;border:0;border-radius:0;box-shadow:none;background:transparent; overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none} .price-card,.price-card:not(:last-child){border:1px solid var(--line); border-radius:var(--radius);overflow:hidden} .price-card.featured{border-color:var(--navy-900)} } /* 27 (F25). Each screen from the app opens full size. */ .app-shot-link{display:block;border-radius:10px;cursor:zoom-in} .app-shot-link:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px} /* 23 (B3). Once a length is chosen the demo's hero band becomes a slim title row, "Free ICWIM demo" and the number of questions. Before that nothing changes. The heading's own inline margin is overruled only here. */ .page-hero.is-demo-running{padding:14px 0} .page-hero.is-demo-running .container{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem 1rem} .page-hero.is-demo-running .eyebrow, .page-hero.is-demo-running p{display:none} .page-hero.is-demo-running h1{margin:0 !important;font-size:1.3rem} .demo-hero-count{color:rgba(247,244,234,.72);font-size:.92rem;font-variant-numeric:tabular-nums} .page-hero.is-demo-running + section{padding-top:24px} /* 18 (B4). How It Works ends with something to do, in a light band that keeps the dark cards off the dark footer. */ .hiw-close{padding:56px 0} .hiw-close .container{display:flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:14px 26px} .hiw-close-link{font-weight:600;color:var(--navy-700);text-decoration:underline; text-underline-offset:3px} @media (max-width:640px){ .hiw-close{padding:40px 0} } /* 22 (B2). The one-line access notice directly above the plans. */ .pricing-notice{background:#fdeeda;border:1px solid #f0c98a;color:#7a4d00;padding:12px 20px; border-radius:var(--radius-sm);font-size:.9rem;margin:0 0 28px;text-align:center} .pricing-notice a{color:#7a4d00;font-weight:600;text-decoration:underline;text-underline-offset:3px} /* ============================================================ 30 September, after Usman's look at the live site: boxed blocks that touched the box before them. ============================================================ */ /* The pricing page: the founding-price note sat hard against the guarantee box. */ .guarantee-note + .provisional-banner{margin-top:26px;} /* Cards that follow each other in plain flow (the study plan, the formulas page) stacked with no gap. Cards in a grid keep the grid's own gap. An inline margin on a card still wins. */ .container:not([class*="grid"]) > .card + .card{margin-top:16px;} /* Batch 8b (3 October). Read aloud on the free demo, as in the app: the buttons at the card's top right, on their own line on a phone, and each option's letter, A to D. Since Batch 9 the .ra-ai note, "AI-generated voice", shows beside a button only while its clip plays. */ .demo-voice{float:right;margin:0 0 8px 12px} .demo-voice:empty{display:none} .demo-voice .ra-wrap{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px} .demo-voice .ra-btn{font:inherit;font-size:.82rem;font-weight:600;line-height:1.2;padding:6px 12px;border-radius:999px; border:1px solid var(--line);background:var(--white);color:var(--ink-soft);cursor:pointer} .demo-voice .ra-btn:hover,.demo-voice .ra-btn[aria-pressed="true"]{border-color:var(--navy-600);color:var(--navy-700)} .demo-voice .ra-ai{font-size:.72rem;letter-spacing:.02em;color:var(--ink-soft);white-space:nowrap} .demo-opt-l{font-weight:600;color:var(--navy-700);margin-right:.5rem} @media (max-width:600px){ .demo-voice{float:none;margin:0 0 12px} .demo-voice .ra-wrap{justify-content:flex-start} } /* Batch 10 (4 October). The exam tips page's sources, a small list at the end; .small alone loses to .info-body li. The glossary: its search box (shown only once assets/glossary.js runs), the A to Z bar, and each term with its chapter link. A term or letter reached by its #id lands below the sticky header. */ .info-body .tips-sources li{font-size:.86rem;} .gloss-search{margin:0 0 22px;} .gloss-search label{display:block;font-size:.82rem;font-weight:600;margin:0 0 6px;color:var(--navy-900);} .gloss-search input{width:100%;max-width:420px;padding:11px 12px;border:1px solid var(--line);border-radius:6px; font-size:.93rem;font-family:var(--font-body);background:var(--white);color:var(--ink);} .gloss-search .gloss-none{margin:10px 0 0;} .gloss-search .gloss-none:empty{display:none;} .gloss-az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;} .gloss-az a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;padding:0 6px; border:1px solid var(--line);border-radius:6px;font-weight:600;font-size:.9rem;color:var(--navy-700);} .gloss-az a:hover{border-color:var(--gold-600);color:var(--gold-700);} .gloss-az[hidden]{display:none;} .gloss-group,.gloss-entry{scroll-margin-top:96px;} .gloss-list{margin:0;} .gloss-entry{padding:14px 0;border-bottom:1px solid var(--line);} .gloss-entry:last-child{border-bottom:none;} .gloss-entry dt{color:var(--navy-900);font-size:1rem;} .gloss-entry dd{margin:4px 0 0;color:var(--ink-soft);font-size:.97rem;} .gloss-entry .gloss-ch{margin-left:4px;font-size:.8rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;} .gloss-entry .gloss-ch:hover{color:var(--gold-700);} .gloss-close{margin-top:22px;} /* ---------- Batch 18 (L1): links in running text ------------------------ A link inside a paragraph, a list item, a .small or a .callout in a page's content, and the breadcrumbs, is underlined: its colour alone was 1.3 : 1 against the body text, and WCAG 1.4.1 needs 3 : 1 or a cue that is not colour. Content is section > .container, which the header, the footer's link lists and the homepage (its own .hx sections) are not inside; buttons and anything in a card, a price card, a course tile or a hero are left out. The colour stays as it is. */ section > .container :is(p, li, .small, .callout) > a:not(.btn):not(:is(.card, .price-card, .course-tile, .hero, .page-hero) a), .bp-crumbs > a{text-decoration:underline;text-underline-offset:3px;} /* ---------- Batch 21: Bourse Prep elsewhere ----------------------------- The footer's first column links to Bourse Prep on Facebook, Instagram and LinkedIn: a 20 px icon in a 40 by 40 px target, in the footer's muted colour, white on hover and on focus, with the focus ring the dark bands use. The icons are Simple Icons' (CC0). */ footer.site .footer-social{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px;} footer.site .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px; min-height:40px;padding:0;border-radius:8px;color:rgba(247,244,234,0.72);text-decoration:none;} footer.site .footer-social a:hover,footer.site .footer-social a:focus-visible{color:var(--white);} footer.site .footer-social a:focus-visible{box-shadow:0 0 0 2px var(--navy-950), 0 0 0 4px var(--gold-400);} footer.site .footer-social svg{display:block;width:20px;height:20px;} /* ---------- Batch 23: two courses ----------------------------------------- The Resources menu holds one column per course (ICWIM, UAE FRR), each with its own small heading. The footer gains a UAE FRR Resources column, so its grid has six columns on a wide screen (the phone layout stays one column, as the max-width:900px rule above sets). */ .nav-drop-menu.nav-mega{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:0 6px;min-width:520px;left:-180px;padding:12px 6px;} .nav-mega .nav-col{display:flex;flex-direction:column;} .nav-mega .nav-group{margin:2px 18px 6px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700,#b4490f);} @media(min-width:901px){ .footer-grid.has-6{grid-template-columns:1.35fr 1fr 1.05fr 1.05fr 1fr 1fr;gap:26px;} } /* Course cards (home page, free practice chooser, resources hub). */ .course-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:1.6rem 0;} @media(max-width:820px){ .course-cards{grid-template-columns:1fr;} } .course-card{display:flex;flex-direction:column;gap:.55rem;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.4rem;box-shadow:var(--shadow-1, 0 1px 2px rgba(24,10,43,.06));} .course-card .course-kicker{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700,#b4490f);margin:0;} .course-card h3{margin:.1rem 0 .2rem;} .course-card ul{margin:.3rem 0 .6rem;padding-left:1.1rem;} .course-card ul li{margin:.2rem 0;} .course-card .course-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:.4rem;} .course-card .course-status{font-size:.82rem;color:var(--ink-soft,#6b6560);margin:0;} /* Rules Lab (UAE FRR): rule cards, comparisons, decision paths, procedures. */ .rl-card{border:1px solid var(--line,#e5e2dc);border-radius:12px;padding:1.1rem 1.2rem;margin:1.1rem 0;background:var(--white);} .rl-card h3{margin:.1rem 0 .7rem;font-size:1.05rem;} .rl-kind{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700,#b4490f);margin-bottom:.2rem;} .rl-rule dl{margin:0;display:grid;grid-template-columns:9.5rem 1fr;gap:.45rem .9rem;} .rl-rule dt{font-weight:600;font-size:.88rem;} .rl-rule dd{margin:0;} @media(max-width:560px){ .rl-rule dl{grid-template-columns:1fr;} .rl-rule dd{margin-bottom:.4rem;} } .rl-steps{margin:.2rem 0 0;padding-left:1.3rem;} .rl-steps li{margin:.45rem 0;} .rl-decision .rl-start{font-weight:600;margin:0 0 .6rem;} .rl-decision ol{list-style:none;margin:0;padding:0;counter-reset:rl;} .rl-decision li{counter-increment:rl;border-left:3px solid var(--gold-500,#F26A1B);background:var(--paper-2,#faf8f5);border-radius:0 10px 10px 0;padding:.7rem .9rem;margin:.6rem 0;} .rl-decision li .rl-q{font-weight:600;display:block;margin-bottom:.35rem;} .rl-decision li .rl-q:before{content:counter(rl) ". ";} .rl-decision li span.rl-yes,.rl-decision li span.rl-no{display:block;font-size:.93rem;margin:.15rem 0;} .rl-decision .rl-note{font-size:.88rem;color:var(--ink-soft,#6b6560);margin:.6rem 0 0;} .frr-update{border-left:3px solid var(--navy-700,#2b1a4a);background:var(--paper-2,#faf8f5);border-radius:0 10px 10px 0;padding:.8rem 1rem;margin:.8rem 0;} .frr-update h3,.frr-update h4{margin:0 0 .3rem;font-size:.95rem;} .frr-update p{margin:.2rem 0;} /* Batch 23: text tables (Rules Lab comparisons, the FRR numbers and the exam-against-current table) read left to right, with the row heading in ordinary type rather than the column headings' small capitals. */ .bp-table.bp-text th,.bp-table.bp-text td{text-align:left;vertical-align:top;white-space:normal;} .bp-table.bp-text tbody th{font-size:.92rem;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink);} .bp-table.bp-text td.num{text-align:right;white-space:nowrap;} .rl-card .bp-table.bp-text{min-width:560px;} .rl-card .bp-table.bp-text thead th:first-child{width:22%;} /* Batch 23: links inside running text in the new cards are underlined (WCAG 1.4.1: colour alone is not enough), as the site's other text links are. */ .u-link,.rl-kind a,.rl-card p a:not(.btn),.frr-update a,.course-card p > a:not(.btn){text-decoration:underline;text-underline-offset:3px;} /* Batch 23: the two-plan grid (Both courses) on Pricing; one column on a phone, as every pricing grid is (the max-width:900px rule above). */ @media(min-width:901px){ .pricing-grid.pricing-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-left:auto;margin-right:auto;} } /* Batch 24. "Introductory price": UAE FRR and the two-course plans, priced low at launch and open to change. A quiet label, not a countdown. */ .price-card .intro-tag{display:inline-block;width:fit-content;margin:0 0 10px;padding:3px 10px; border:1px solid #E9B48C;border-radius:999px;background:#FDF1E6;color:#8A3A06; font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;} .price-card.featured .intro-tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff;} .pricing-notice .intro-word{font-weight:700;} .tab-panel > .pricing-notice{max-width:760px;margin-left:auto;margin-right:auto;} /* Batch 25. The principle's "Common trap" line on the demo pages, set apart as it is in the app. */ .note .principle-trap{margin:.55rem 0 0;}