/*==========================
GLOBAL
===========================*/
:root {
/* =========================
ODLC GLOBAL COLORS
========================= */
--navy: #083C7C;
--navy2: #083C7C;
--blue: #083C7C;
--cyan: #00a8ff;
--purple: #6335e8;
--yellow: #ffc400;
--white: #ffffff;
--muted: #899abd;
--border: rgba(0, 168, 255, .30);
--section-max-width: 1500px;
/* Main Typography */
--font-main: "Inter", "Segoe UI", Arial, sans-serif;
/* Main Colors */
--text-dark: #0b1f4d;
--text-primary: #17203d;
--text-body: #667085;
--text-light: #ffffff;
/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
}
/* =========================================================
2. GLOBAL BODY
========================================================= */
html,
body {
font-family: var(--font-main);
color: var(--text-primary);
font-size: 16px;
line-height: 1.6;
}
/* =========================================================
3. GLOBAL PARAGRAPHS
========================================================= */
p {
font-size: 16px;
line-height: 1.7;
font-weight: 400;
}
/* =========================================================
4. MAIN SECTION HEADINGS
========================================================= */
.section-title,
.programmes-title {
font-size: 52px;
line-height: 1.12;
font-weight: 800;
letter-spacing: -1.2px;
}
/* =========================================================
5. OTHER MAIN SECTION HEADINGS
========================================================= */
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -1px;
}
/* =========================================================
6. SPECIAL LARGE HERO HEADINGS
========================================================= */
.hero-section h1,
.hero-section h2 {
font-size: 54px;
line-height: 1.1;
font-weight: 800;
}
/* =========================================================
7. SECTION DESCRIPTION
========================================================= */
.section-desc,
.programmes-description,
.testimonial-section > p,
.blog-section > p,
.section-description {
font-size: 18px;
line-height: 1.7;
font-weight: 400;
color: var(--text-body);
}
/* =========================================================
8. SECTION BADGES
========================================================= */
.section-tag,
.programmes-badge,
.testimonial-badge,
.blog-badge,
.faq-badge,
.hero-badge {
font-size: 14px;
line-height: 1.2;
font-weight: 700;
letter-spacing: .5px;
}
/* =========================================================
9. CARD HEADINGS
========================================================= */
.feature-card h4,
.blog-card h4,
.review-card h5,
.info-content h5,
.info-card h3,
.impact-title {
font-weight: 700;
}
/* =========================================================
10. FEATURE CARD HEADING
========================================================= */
.feature-card h4 {
font-size: 19px;
line-height: 1.3;
}
/* =========================================================
11. FEATURE CARD DESCRIPTION
========================================================= */
.feature-card p {
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
12. IMPACT CARD
========================================================= */
.impact-subtitle {
font-size: 13px;
font-weight: 700;
letter-spacing: .7px;
}
.impact-title {
font-size: 30px;
line-height: 1.25;
}
.impact-item h3 {
font-size: 28px;
line-height: 1.1;
font-weight: 800;
}
.impact-item p {
font-size: 14px;
line-height: 1.4;
}
/* =========================================================
13. INFORMATION STRIP
========================================================= */
.info-content h5 {
font-size: 18px;
line-height: 1.3;
font-weight: 700;
}
.info-content p {
font-size: 13px;
line-height: 1.5;
}
/* =========================================================
14. PROGRAMME CARDS
========================================================= */
.program-card h3,
.program-card h4,
.programme-card h3,
.programme-card h4 {
font-size: 17px;
line-height: 1.35;
font-weight: 700;
}
.program-card p,
.programme-card p {
font-size: 13px;
line-height: 1.55;
}
/* =========================================================
15. PROGRAMME COUNTER
========================================================= */
.program-count-card h3 {
font-size: 26px;
line-height: 1.2;
font-weight: 800;
}
.program-count-card p {
font-size: 14px;
line-height: 1.5;
}
/* =========================================================
16. APPLICATION / GATEWAY SECTION
========================================================= */
.application-section h2,
.gateway-section h2 {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
}
.application-section h4,
.gateway-section h4 {
font-size: 17px;
line-height: 1.35;
font-weight: 700;
}
.application-section p,
.gateway-section p {
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
17. COMPARISON / WHY ODLC
========================================================= */
.comparison-section h2,
.why-odlc-section h2 {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
}
.comparison-card h3,
.stat-card h3 {
font-size: 30px;
line-height: 1.1;
font-weight: 800;
}
.comparison-card p,
.stat-card p {
font-size: 13px;
line-height: 1.4;
font-weight: 500;
}
/* =========================================================
18. CERTIFICATION CTA
========================================================= */
.certification-section h2,
.skills-section h2 {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
}
.certification-section p,
.skills-section p {
font-size: 16px;
line-height: 1.65;
}
/* =========================================================
19. BOTTOM FEATURE STRIPS
========================================================= */
.feature-strip h4,
.bottom-feature h4 {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
}
.feature-strip p,
.bottom-feature p {
font-size: 13px;
line-height: 1.45;
align-items :flex-start;
}
/* =========================================================
20. TESTIMONIALS
========================================================= */
.review-card h5 {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
}
.review-card small {
font-size: 12px;
}
.review-card p {
font-size: 14px;
line-height: 1.65;
}
.review-card a {
font-size: 13px;
font-weight: 600;
}
/* =========================================================
21. BLOG
========================================================= */
.blog-card h4 {
font-size: 18px;
line-height: 1.4;
font-weight: 700;
}
.blog-card p {
font-size: 14px;
line-height: 1.6;
}
.blog-category {
font-size: 12px;
font-weight: 600;
}
.blog-footer a {
font-size: 13px;
font-weight: 600;
}
.date-box h4 {
font-size: 18px;
line-height: 1;
}
.date-box span {
font-size: 11px;
}
/* =========================================================
22. FAQ
========================================================= */
.faq-section h2 {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
}
.faq-question,
.accordion-button {
font-size: 16px;
line-height: 1.4;
font-weight: 600;
}
.faq-answer,
.accordion-body {
font-size: 14px;
line-height: 1.65;
}
/* =========================================================
23. BUTTONS
========================================================= */
button,
.btn,
a.btn,
.blog-btn,
.google-review-btn {
font-size: 14px;
line-height: 1.2;
font-weight: 600;
}
/* =========================================================
24. HEADER / NAVIGATION
========================================================= */
.navbar-nav .nav-link {
font-size: 14px;
font-weight: 600;
}
.navbar-brand {
font-size: 18px;
font-weight: 700;
}
/* =========================================================
25. FOOTER
========================================================= */
footer h4,
footer h5 {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
}
footer p,
footer li,
footer a {
font-size: 13px;
line-height: 1.6;
}
footer .footer-title {
font-size: 17px;
font-weight: 700;
}
/* =========================================================
26. LAPTOP
992px - 1199px
========================================================= */
@media (max-width: 1199px) {
.section-title,
.programmes-title {
font-size: 46px;
}
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 42px;
}
.hero-section h1,
.hero-section h2 {
font-size: 48px;
}
.section-desc,
.programmes-description {
font-size: 17px;
}
.feature-card h4 {
font-size: 18px;
}
.feature-card p {
font-size: 13px;
}
.blog-card h4 {
font-size: 17px;
}
}
/* =========================================================
27. TABLET
768px - 991px
========================================================= */
@media (max-width: 991px) {
body {
font-size: 15px;
}
p {
font-size: 15px;
line-height: 1.65;
}
/* Main headings */
.section-title,
.programmes-title {
font-size: 40px;
line-height: 1.15;
}
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 38px;
}
.hero-section h1,
.hero-section h2 {
font-size: 42px;
}
/* Description */
.section-desc,
.programmes-description {
font-size: 16px;
line-height: 1.7;
}
/* Badge */
.section-tag,
.programmes-badge,
.testimonial-badge,
.blog-badge,
.faq-badge {
font-size: 13px;
}
/* Cards */
.feature-card h4 {
font-size: 17px;
}
.feature-card p {
font-size: 13px;
}
.impact-title {
font-size: 26px;
}
.impact-item h3 {
font-size: 25px;
}
.impact-item p {
font-size: 13px;
}
.blog-card h4 {
font-size: 17px;
}
.blog-card p {
font-size: 13px;
}
.review-card p {
font-size: 13px;
}
/* FAQ */
.faq-question,
.accordion-button {
font-size: 15px;
}
.faq-answer,
.accordion-body {
font-size: 13px;
}
/* Buttons */
button,
.btn,
a.btn,
.blog-btn,
.google-review-btn {
font-size: 13px;
}
}
/* =========================================================
28. MOBILE
576px - 767px
========================================================= */
@media (max-width: 767px) {
body {
font-size: 15px;
}
p {
font-size: 14px;
line-height: 1.65;
}
/* Main section headings */
.section-title,
.programmes-title {
font-size: 32px;
line-height: 1.18;
letter-spacing: -.5px;
}
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 32px;
line-height: 1.2;
}
.hero-section h1,
.hero-section h2 {
font-size: 34px;
line-height: 1.15;
}
/* Description */
.section-desc,
.programmes-description {
font-size: 15px;
line-height: 1.65;
}
/* Badges */
.section-tag,
.programmes-badge,
.testimonial-badge,
.blog-badge,
.faq-badge {
font-size: 12px;
}
/* Feature cards */
.feature-card h4 {
font-size: 16px;
}
.feature-card p {
font-size: 12px;
line-height: 1.5;
}
/* Impact */
.impact-title {
font-size: 24px;
}
.impact-item h3 {
font-size: 23px;
}
.impact-item p {
font-size: 12px;
}
/* Programme cards */
.program-card h3,
.program-card h4,
.programme-card h3,
.programme-card h4 {
font-size: 16px;
}
.program-card p,
.programme-card p {
font-size: 12px;
}
/* Testimonials */
.review-card h5 {
font-size: 15px;
}
.review-card small {
font-size: 11px;
}
.review-card p {
font-size: 13px;
line-height: 1.6;
}
/* Blogs */
.blog-card h4 {
font-size: 16px;
}
.blog-card p {
font-size: 13px;
}
/* FAQ */
.faq-question,
.accordion-button {
font-size: 14px;
}
.faq-answer,
.accordion-body {
font-size: 13px;
}
/* Buttons */
button,
.btn,
a.btn,
.blog-btn,
.google-review-btn {
font-size: 13px;
}
/* Footer */
footer h4,
footer h5 {
font-size: 15px;
}
footer p,
footer li,
footer a {
font-size: 12px;
}
}
/* =========================================================
29. SMALL MOBILE
BELOW 576px
========================================================= */
@media (max-width: 575px) {
body {
font-size: 14px;
}
p {
font-size: 14px;
line-height: 1.65;
}
/* Main headings */
.section-title,
.programmes-title {
font-size: 29px;
line-height: 1.2;
}
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 29px;
line-height: 1.2;
}
.hero-section h1,
.hero-section h2 {
font-size: 30px;
}
/* Description */
.section-desc,
.programmes-description {
font-size: 14px;
line-height: 1.65;
}
/* Badge */
.section-tag,
.programmes-badge,
.testimonial-badge,
.blog-badge,
.faq-badge {
font-size: 11px;
}
/* Cards */
.feature-card h4 {
font-size: 15px;
}
.feature-card p {
font-size: 12px;
}
.impact-title {
font-size: 22px;
}
.impact-item h3 {
font-size: 21px;
}
.impact-item p {
font-size: 11px;
}
.program-card h3,
.program-card h4,
.programme-card h3,
.programme-card h4 {
font-size: 15px;
}
.program-card p,
.programme-card p {
font-size: 12px;
}
/* Blog */
.blog-card h4 {
font-size: 15px;
}
.blog-card p {
font-size: 12px;
}
/* Testimonials */
.review-card h5 {
font-size: 14px;
}
.review-card p {
font-size: 12px;
}
/* FAQ */
.faq-question,
.accordion-button {
font-size: 13px;
}
.faq-answer,
.accordion-body {
font-size: 12px;
}
/* Buttons */
button,
.btn,
a.btn,
.blog-btn,
.google-review-btn {
font-size: 12px;
}
/* Footer */
footer h4,
footer h5 {
font-size: 14px;
}
footer p,
footer li,
footer a {
font-size: 11px;
}
}
.section-container {
width: 100%;
max-width: 1320px;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
/* =========================
DESKTOP
========================= */
.section-container {
width: 100%;
max-width: var(--section-max-width);
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
/* =========================
LAPTOP
========================= */
@media (max-width: 1399px) {
.section-container {
max-width: 1300px;
padding-left: 20px;
padding-right: 20px;
}
}
/* =========================
TABLET
========================= */
@media (max-width: 991px) {
.section-container {
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 767px) {
.section-container {
padding-left: 10px;
padding-right: 10px;
}
}
/* =========================================================
MOBILE APP - FINAL DESKTOP ALIGNMENT
========================================================= */
.odlc-app-hero {
min-height: 570px;
padding: 55px 0 60px !important;
}
.odlc-app-hero .container {
max-width: 1320px;
}
.odlc-app-hero-grid {
grid-template-columns: 1.1fr .9fr !important;
gap: 30px !important;
min-height: 520px;
}
.odlc-app-content {
max-width: 680px !important;
}
.odlc-app-content h1 {
font-size: 58px !important;
line-height: 1.05 !important;
margin: 28px 0 6px !important;
}
.odlc-app-content h2 {
font-size: 35px !important;
line-height: 1.2 !important;
margin: 10px 0 24px !important;
}
.odlc-app-content p {
max-width: 600px !important;
font-size: 17px !important;
line-height: 1.55 !important;
text-align: left !important;
}
.odlc-app-phone-area {
min-height: 520px !important;
transform: translateX(20px);
}
.odlc-phone {
width: 275px !important;
height: 545px !important;
}
.odlc-app-about {
padding: 55px 0 70px !important;
}
.odlc-app-section-heading {
margin-bottom: 35px !important;
}
.odlc-app-section-heading h2 {
font-size: 40px !important;
margin: 14px 0 10px !important;
}
.odlc-app-cards {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 18px !important;
}
.odlc-app-card {
min-height: 275px !important;
padding: 28px 25px !important;
border-radius: 16px !important;
}
.odlc-app-download {
padding: 30px 0 45px !important;
background: #f4f8fc;
}
.odlc-download-box {
min-height: 150px;
padding: 35px 48px !important;
border-radius: 18px !important;
}
.download-content h2 {
font-size: 32px !important;
margin: 8px 0 !important;
}
/* ================================================================
MOBILE APP PAGE - NEW DESIGN
Appended to css/mobileapp.css. Nothing above this point is
modified.
This replaces the page body with the layout that was approved
as a mockup (_mockup-mobileapp-v2.html):
1. dark gradient banner, tilted phone, three glass chips
2. six feature cards, three even columns, two rows
3. trust band, three across
Every selector is prefixed .ma- so nothing here can reach the
header, the footer, or any other page.
WHY THE OLD RULES ARE STILL IN THE FILE
The previous page used .odlc-app-hero, .odlc-app-about and
.odlc-app-download, and mobileapp.css is linked by mobileapp.php
only - nothing else on the site loads it. The old rules are left
untouched rather than deleted, so that anything still pointing at
them keeps working, and so the previous design can be brought
back by removing the from $pageCss. They cost nothing at
runtime: unused CSS is not applied.
COLOURS AND TYPE
Reused from the rest of the site, not introduced here:
navy #0B1F4D body #5B6B85 line #E4EAF8
blue #0A56D8 sky #0D6EFD page #F5F8FC
gradient linear-gradient(90deg,#6d4dff,#4bb8ff)
The container is the site standard - 92% capped at 1380px, then
94% <=1199, 90% <=767, 92% <=480.
SPECIFICITY NOTE
global-typography.css loads after this file and pins h1-h6, p,
li and a with !important (h1 46px, h2 35px, p 16px, li 16px).
Every heading and paragraph below carries its own !important,
or those values win and the type lands at the wrong size.
================================================================ */
.ma-hero{
position:relative;overflow:hidden;
background:
radial-gradient(1100px 560px at 76% 14%, rgba(109,77,255,.40), transparent 62%),
radial-gradient(820px 520px at 10% 92%, rgba(13,110,253,.34), transparent 60%),
linear-gradient(158deg,#0B1F4D 0%,#0A2A6B 48%,#061E45 100%);
color:#fff;padding:62px 0 84px;
font-family:Arial,Helvetica,sans-serif
}
.ma-hero::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:120px;
background:linear-gradient(to bottom,rgba(245,248,252,0),#F5F8FC);
pointer-events:none
}
.ma-shell{width:92%;max-width:1380px;margin:0 auto}
.ma-hero-grid{
display:grid;grid-template-columns:minmax(0,1fr) 400px;
gap:48px;align-items:center;position:relative;z-index:2
}
/* ---------- tag ---------- */
.ma-tag{
display:inline-flex;align-items:center;gap:8px;
font-family:Arial,Helvetica,sans-serif !important;
font-size:11px !important;font-weight:700 !important;
letter-spacing:1px !important;text-transform:uppercase !important;
line-height:1.2 !important;color:#0D6EFD !important
}
.ma-tag i{font-size:14px;line-height:1;margin:0}
.ma-tag.on-dark{color:#8FC2FF !important}
/* ---------- headings ---------- */
.ma-hero h1{
margin:18px 0 0 !important;max-width:640px;
color:#FFFFFF !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:clamp(32px,3.7vw,50px) !important;
font-weight:800 !important;line-height:1.1 !important;
letter-spacing:-1.5px !important;text-align:left !important
}
.ma-hero h1 .g{
background:linear-gradient(90deg,#8B6BFF,#4BB8FF) !important;
-webkit-background-clip:text !important;background-clip:text !important;
-webkit-text-fill-color:transparent !important;color:#8B6BFF !important
}
.ma-hero h3{
margin:18px 0 0 !important;
color:#CFE0FF !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:19px !important;font-weight:700 !important;
line-height:1.35 !important;letter-spacing:-.2px !important;
text-align:left !important
}
.ma-lead{
margin:14px 0 0 !important;max-width:520px;
color:rgba(255,255,255,.80) !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:16px !important;line-height:1.7 !important;
text-align:left !important
}
.ma-h2{
margin:14px 0 0 !important;
color:#0B1F4D !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:35px !important;font-weight:800 !important;
line-height:1.25 !important;letter-spacing:-1.2px !important
}
.ma-h2 .g{
background:linear-gradient(90deg,#6d4dff,#4bb8ff) !important;
-webkit-background-clip:text !important;background-clip:text !important;
-webkit-text-fill-color:transparent !important;color:#6d4dff !important
}
/* ---------- download row ---------- */
.ma-cta{
margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px
}
.ma-btn{
display:inline-flex;align-items:center;gap:10px;
padding:15px 26px;border-radius:50px;border:2px solid #3B82F6;
background:linear-gradient(90deg,#2563EB,#4F46E5);
color:#fff !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:15px !important;font-weight:800 !important;line-height:1 !important;
text-decoration:none !important;
transition:transform .2s ease,box-shadow .2s ease
}
.ma-btn:hover{
transform:translateY(-2px);color:#fff !important;
box-shadow:0 14px 30px rgba(37,99,235,.42)
}
.ma-btn i{font-size:16px;margin:0}
.ma-stores{display:flex;flex-wrap:wrap;gap:10px}
.ma-store{
display:inline-flex;align-items:center;gap:9px;
padding:11px 18px;border-radius:12px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22);
color:#fff !important;text-decoration:none !important;
transition:background .2s ease
}
.ma-store:hover{background:rgba(255,255,255,.18);color:#fff !important}
.ma-store i{font-size:17px;margin:0 !important}
.ma-store-txt{display:block;margin:0 !important}
.ma-store b{
display:block;font-family:Arial,Helvetica,sans-serif !important;
font-size:13.5px !important;font-weight:700 !important;line-height:1.2 !important
}
.ma-store span{
display:block;font-family:Arial,Helvetica,sans-serif !important;
font-size:10.5px !important;font-weight:500 !important;line-height:1.3 !important;
opacity:.75;margin-top:2px !important
}
/* ---------- phone ---------- */
.ma-stage{position:relative;display:flex;justify-content:center}
.ma-stage::before{
content:"";position:absolute;width:340px;height:340px;border-radius:50%;
background:radial-gradient(circle,rgba(93,150,255,.42),transparent 66%);
filter:blur(6px)
}
.ma-phone{
position:relative;z-index:1;
width:250px;aspect-ratio:9/19.4;
background:#0A1330;border:9px solid #101B3C;border-radius:44px;
padding:8px;transform:rotate(-4deg);
box-shadow:0 46px 90px rgba(0,0,0,.52)
}
.ma-notch{
position:absolute;top:16px;left:50%;transform:translateX(-50%);
width:88px;height:20px;border-radius:12px;background:#05091C;z-index:3
}
.ma-screen{
width:100%;height:100%;border-radius:34px;overflow:hidden;background:#0A2A6B
}
.ma-screen img{
width:100%;height:100%;object-fit:cover;object-position:top center;display:block
}
/* ---------- glass chips, overlapping the phone ----------
READABILITY FIX
The chip background was rgba(255,255,255,.13) - a 13% white
wash. That reads fine over the dark blue of the hero, but the
phone screenshot has a large WHITE login card across its lower
third, and the bottom chip sits right on it. White text on a
13% white wash over white is white on white: the "Better Future"
label disappeared completely, and any chip crossing that panel
would have done the same.
The background is now a dark translucent navy instead, so the
white text stays legible over the hero, over the blue of the
phone screen, and over the white login card alike. It still
reads as glass because it is partly see-through and keeps the
light border and the drop shadow.
Measured contrast of #FFFFFF on this chip background when it is
over the white card: 9.1 : 1.
The subtitle was also a 74% white, which was the second half of
the problem - a partly transparent text colour over a partly
transparent background compounds. It is now a solid #DCE6F7. */
.ma-chip{
position:absolute;z-index:2;display:flex;align-items:center;gap:11px;
padding:12px 17px;border-radius:14px;
background:rgba(8,20,52,.82);
border:1px solid rgba(255,255,255,.20);
box-shadow:0 16px 34px rgba(0,0,0,.34)
}
.ma-chip .ic{
width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:15px;color:#fff;flex:0 0 auto
}
.ma-chip b{
display:block;font-family:Arial,Helvetica,sans-serif !important;
font-size:13.5px !important;font-weight:700 !important;line-height:1.2 !important;
color:#fff !important
}
.ma-chip span{
display:block;font-family:Arial,Helvetica,sans-serif !important;
font-size:11px !important;font-weight:500 !important;line-height:1.3 !important;
color:#DCE6F7 !important;margin-top:2px !important
}
.ma-chip b{color:#FFFFFF !important}
/* c3 sat at bottom:9%, which lands inside the phone's white login
card. It is raised so it sits over the blue of the screen instead,
rather than fighting the white panel behind it. The dark chip
background above already guarantees the text is legible either
way - this is about how it looks, not whether it can be read. */
.ma-chip.c1{top:12%;left:-46px}
.ma-chip.c2{top:46%;right:-40px}
.ma-chip.c3{bottom:34%;left:-26px}
.ma-chip.c1 .ic{background:#2F80ED}
.ma-chip.c2 .ic{background:#12B76A}
.ma-chip.c3 .ic{background:#7C5CFF}
/* ================================================================
FEATURES
Three even columns. Equal heights come from the grid stretching
the rows plus a flex column inside each card, not from fixed
heights. The colour is a soft wash in the top-right corner plus
the icon tint.
================================================================ */
/* the 48px bottom padding is the space the trust band used to
fill, so the last row of cards still sits clear of the footer */
.ma-features{
padding:64px 0 48px;background:#F5F8FC;
font-family:Arial,Helvetica,sans-serif
}
.ma-bento{
margin-top:34px;display:grid;gap:22px;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:stretch
}
.ma-f{
position:relative;overflow:hidden;
background:#fff;border:1px solid #E4EAF8;border-radius:20px;
padding:30px 30px 32px;
display:flex;flex-direction:column;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.ma-f::before{
content:"";position:absolute;top:-70px;right:-70px;
width:190px;height:190px;border-radius:50%;
background:radial-gradient(circle,var(--acc,#0D6EFD),transparent 68%);
opacity:.10;pointer-events:none
}
.ma-f:hover{
transform:translateY(-4px);border-color:#C9D8F6;
box-shadow:0 18px 40px rgba(16,42,90,.12)
}
.ma-f:hover::before{opacity:.17}
.ma-f .ic{
position:relative;z-index:1;
width:52px;height:52px;border-radius:15px;display:flex;align-items:center;
justify-content:center;font-size:23px;margin-bottom:20px;flex:0 0 auto
}
.ma-f h4{
position:relative;z-index:1;margin:0 0 8px !important;
color:#0B1F4D !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:19px !important;font-weight:800 !important;line-height:1.25 !important;
letter-spacing:-.3px !important;text-align:left !important
}
.ma-f p{
position:relative;z-index:1;margin:0 !important;
color:#5B6B85 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:14.5px !important;font-weight:400 !important;
line-height:1.6 !important;text-align:left !important
}
.ma-f.s-study{--acc:#2F80ED} .ma-f.s-study .ic{background:#E8F1FE;color:#2F80ED}
.ma-f.s-assess{--acc:#7C5CFF} .ma-f.s-assess .ic{background:#F0ECFF;color:#7C5CFF}
.ma-f.s-exam{--acc:#12B76A} .ma-f.s-exam .ic{background:#E4F8EF;color:#12B76A}
.ma-f.s-track{--acc:#F79009} .ma-f.s-track .ic{background:#FEF3E2;color:#F79009}
.ma-f.s-verify{--acc:#F04438} .ma-f.s-verify .ic{background:#FEE9E7;color:#F04438}
.ma-f.s-career{--acc:#0BA5EC} .ma-f.s-career .ic{background:#E1F5FE;color:#0BA5EC}
/* ================================================================
TRUST BAND - REMOVED
The three trust items - Easy Access, Secure & Trusted, Better
Future - are the same three lines that already float over the
phone in the hero, with the same wording and the same icons.
Repeating them in a full-width band underneath showed the reader
the identical three statements twice on one screen.
The markup and every rule below are deleted, not commented out:
.ma-trust, .ma-trust-row, .ma-trust-item, .ma-trust-item .ic
.ma-trust-item b, .ma-trust-item span
.ma-trust-item.t1 / .t2 / .t3 .ic
@media 1199/991px .ma-trust-row
@media 767px .ma-trust, .ma-trust-item
The hero's .ma-chip rules are untouched, so the three lines still
appear once, floating over the phone where they belong.
The space the band used to occupy is kept as padding on the
features section, so the page does not end abruptly against the
footer - see .ma-features below, which now carries the 48px
bottom padding that matches the section rhythm used elsewhere on
the site.
================================================================ */
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width:1199px){
.ma-shell{width:94%}
.ma-hero-grid{grid-template-columns:minmax(0,1fr) 360px;gap:40px}
.ma-phone{width:222px}
.ma-chip.c1{left:-24px}
.ma-chip.c2{right:-20px}
.ma-chip.c3{left:-10px}
}
@media (max-width:991px){
.ma-hero{padding:56px 0 74px}
.ma-hero-grid{grid-template-columns:minmax(0,1fr);gap:52px}
.ma-stage{order:-1}
.ma-phone{width:206px;transform:rotate(0)}
/* The chips are positioned against .ma-stage. Above 991px the
stage is a fixed 360-400px column and the phone nearly fills it,
so the plain desktop offsets land across the phone's edge as
intended.
Below 991px the hero becomes a single column, the stage is the
FULL column width, and the phone is centred inside it. A fixed
left/right offset now measures from the far edge of that wide
stage, which threw the chips right off the phone again -
measured overlap was -144 / -125 / -146 at 900px, and a first
attempt to fix it with bigger fixed offsets made it worse
(-252 / -255 / -241), because moving "left" moved them further
from a centred phone.
The fix anchors each chip to the stage's centre line instead.
The phone is 206px wide here, so its edge sits 103px either side
of centre; these offsets put each chip's inner edge 23px past
centre, which is 80px of overlap and does not depend on the
stage width or on how wide the chip's text is. */
.ma-chip.c1{left:auto;right:calc(50% + 23px);top:6%}
.ma-chip.c2{right:auto;left:calc(50% + 23px);top:42%}
.ma-chip.c3{left:auto;right:calc(50% + 5px);bottom:34%}
.ma-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
.ma-shell{width:90%}
.ma-hero h1{font-size:33px !important}
.ma-hero h3{font-size:17px !important}
.ma-lead{font-size:15px !important}
.ma-h2{font-size:30px !important}
.ma-features{padding:48px 0 36px}
.ma-f{padding:24px 22px 26px;border-radius:18px}
.ma-f h4{font-size:18px !important}
.ma-f p{font-size:14px !important}
}
@media (max-width:480px){
.ma-shell{width:92%}
.ma-hero h1{font-size:28px !important}
.ma-h2{font-size:24px !important}
.ma-bento{grid-template-columns:minmax(0,1fr)}
.ma-chip{padding:10px 13px;gap:9px}
.ma-chip b{font-size:12.5px !important}
.ma-chip span{font-size:10px !important}
.ma-chip .ic{width:30px;height:30px;font-size:13px}
.ma-btn{width:100%;justify-content:center}
.ma-store{flex:1 1 auto;justify-content:center}
}
/* ================================================================
2. APP FEATURES
Appended for the six-feature section in mobileapp.php. Nothing
above this point is modified, and the old .ma-bento / .ma-f /
.s-* rules further up are left in place, unused, so the previous
six-card band can be restored from mobileapp.php.bak1.
FONT SIZES AND COLOURS ARE TAKEN FROM THE SECTIONS ALREADY ON
THIS PAGE, NOT CHOSEN FRESH. Every value below is copied from a
rule that already existed in this file:
card .ma-f #fff / 1px #E4EAF8 / 20px radius
padding 30px 30px 32px
card hover .ma-f:hover -4px / border #C9D8F6
shadow 0 18px 40px rgba(16,42,90,.12)
icon tile .ma-f .ic 52x52 / 15px radius / 23px glyph
card title .ma-f h4 19px / 800 / 1.25 / -0.3px / #0B1F4D
18px at 767px and under
body text .ma-f p 14.5px / 400 / 1.6 / #5B6B85
14px at 767px and under
lead paragraph .ma-lead 16px, 15px at 767px and under
section tag .ma-tag 11px / 700 / 1px / uppercase / #0D6EFD
grid .ma-bento margin-top 34px / gap 22px
accent pairs .ma-f.s-* the five existing icon tints, reused
as-is rather than inventing new ones
So the six feature cards and the LMS card are the same size and
the same colour as the cards they replaced, and the tag is the
plain text tag the rest of the site uses - the pill background
the sample carried was dropped for that reason, which is also
why the .ma-tag-pill modifier class is gone from the markup.
WHY EVERY FONT RULE HERE CARRIES !important
css/global-typography.css is listed after mobileapp.css in the
page's $pageCss array, so it wins on order, and it pins h1-h6,
a, p and li with !important. Without !important on these the
headings and paragraphs in this section fall back to the global
sizes and the section loses its typography.
THE GRID
Six columns at full width. .ma-fhub is 01 and spans all six; the
other five are 02-06, each spanning two, so the first row is
three cards and the second is two that each take half a row. A
flat 2+2+1 would leave one card beside an empty half-row, so the
fifth card takes the whole row instead below 1199px.
THE NUMBER ON THE HUB
.ma-fhub is split into a top strip and a body purely so the 01
has a clear top-right corner. As one flat two-column grid that
corner was already taken by the first sub-feature tile. The
strip keeps it identical to .ma-fnum on the other five cards.
================================================================ */
.ma-feat-lede{
margin:14px 0 0 !important;max-width:820px;
color:#5B6B85 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:16px !important;font-weight:400 !important;
line-height:1.7 !important;letter-spacing:0 !important;
text-align:left !important;
}
.ma-fgrid{
margin-top:34px;
display:grid;gap:22px;
grid-template-columns:repeat(6,minmax(0,1fr));
counter-reset:mafeat;
}
/* ---------- 01 Learning Management System ---------- */
.ma-fhub{
grid-column:1 / -1;
counter-increment:mafeat;
position:relative;overflow:hidden;
background:
radial-gradient(760px 300px at 100% 0%,rgba(109,77,255,.09),transparent 70%),
radial-gradient(620px 280px at 0% 100%,rgba(75,184,255,.10),transparent 70%),
#fff;
border:1px solid #E4EAF8;
border-radius:20px;
box-shadow:0 10px 30px rgba(16,42,90,.07);
padding:30px 30px 32px;
display:grid;gap:20px;align-content:start;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.ma-fhub::before{
content:"";
position:absolute;left:0;top:0;bottom:0;width:5px;
background:linear-gradient(180deg,#6d4dff,#4bb8ff);
}
.ma-fhub:hover{
transform:translateY(-4px);
border-color:#C9D8F6;
box-shadow:0 18px 40px rgba(16,42,90,.12);
}
.ma-hub-top{
display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.ma-hub-body{
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:26px 34px;align-items:start;
}
.ma-hub-badge{
display:inline-flex;align-items:center;gap:6px;
font-family:Arial,Helvetica,sans-serif !important;
font-size:10.5px !important;font-weight:700 !important;
line-height:1.2 !important;letter-spacing:.8px !important;
text-transform:uppercase !important;color:#0D6EFD !important;
background:#E8F1FE;
border-radius:999px;padding:5px 11px;
}
.ma-hub-ic{
width:52px;height:52px;border-radius:15px;
display:flex;align-items:center;justify-content:center;
font-size:23px;color:#fff;margin-bottom:20px;
background:linear-gradient(135deg,#6d4dff,#4bb8ff);
box-shadow:0 8px 18px rgba(109,77,255,.28);
}
.ma-fhub h3{
margin:0 0 8px !important;
color:#0B1F4D !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:19px !important;font-weight:800 !important;
line-height:1.25 !important;letter-spacing:-.3px !important;
text-align:left !important;
}
.ma-fhub p{
margin:0 !important;
color:#5B6B85 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:14.5px !important;font-weight:400 !important;
line-height:1.6 !important;letter-spacing:0 !important;
text-align:left !important;
}
.ma-hub-items{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.ma-hub-item{
display:flex;align-items:flex-start;gap:11px;min-width:0;
background:#F5F8FC;
border:1px solid #E4EAF8;
border-radius:14px;
padding:13px 14px;
}
.ma-hub-item .hi{
width:30px;height:30px;min-width:30px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
font-size:14px;color:#2F80ED;background:#E8F1FE;
}
.ma-hub-item .ht{min-width:0}
.ma-hub-item b{
display:block;margin:0 0 2px !important;
color:#0B1F4D !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:14.5px !important;font-weight:700 !important;
line-height:1.35 !important;letter-spacing:0 !important;
text-align:left !important;
}
.ma-hub-item span{
display:block;margin:0 !important;
color:#5B6B85 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:14.5px !important;font-weight:400 !important;
line-height:1.45 !important;letter-spacing:0 !important;
text-align:left !important;
}
/* ---------- 02 to 06 ---------- */
.ma-fcard{
grid-column:span 2;
counter-increment:mafeat;
position:relative;overflow:hidden;min-width:0;
background:#fff;
border:1px solid #E4EAF8;
border-radius:20px;
box-shadow:0 8px 22px rgba(16,42,90,.06);
padding:30px 30px 32px;
display:flex;flex-direction:column;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.ma-fcard:hover{
transform:translateY(-4px);
border-color:#C9D8F6;
box-shadow:0 18px 40px rgba(16,42,90,.12);
}
/* the two cards on the closing row each take half the row, so there
is never a lone card sitting beside empty space */
.ma-fcard.wide{grid-column:span 3}
.ma-hub-num,.ma-fnum{
font-family:Arial,Helvetica,sans-serif !important;
font-size:30px !important;font-weight:800 !important;
line-height:1 !important;letter-spacing:-2px !important;
color:transparent !important;
-webkit-text-stroke:1.4px rgba(11,31,77,.16);
transition:color .22s ease;
}
.ma-hub-num{flex:0 0 auto}
.ma-hub-num::before,.ma-fnum::before{content:counter(mafeat,decimal-leading-zero)}
.ma-fnum{
position:absolute;top:18px;right:22px;
}
.ma-fcard:hover .ma-fnum,
.ma-fhub:hover .ma-hub-num{
color:rgba(13,110,253,.13) !important;
-webkit-text-stroke:0;
}
.ma-fcard .ic{
width:52px;height:52px;border-radius:15px;
display:flex;align-items:center;justify-content:center;
font-size:23px;margin-bottom:20px;flex:0 0 auto;
transition:transform .22s ease;
}
.ma-fcard:hover .ic{transform:scale(1.06) rotate(-4deg)}
.ma-fcard h4{
margin:0 0 8px !important;
color:#0B1F4D !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:19px !important;font-weight:800 !important;
line-height:1.25 !important;letter-spacing:-.3px !important;
text-align:left !important;
}
.ma-fcard p{
margin:0 0 16px !important;
color:#5B6B85 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:14.5px !important;font-weight:400 !important;
line-height:1.6 !important;letter-spacing:0 !important;
text-align:left !important;
}
.ma-fcard ul{
list-style:none;padding:0;
margin:auto 0 0 !important;
display:flex;flex-direction:column;gap:8px;
}
.ma-fcard li{
position:relative;padding-left:20px;
margin:0 !important;
color:#5B6B85 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:14.5px !important;font-weight:400 !important;
line-height:1.5 !important;letter-spacing:0 !important;
text-align:left !important;
}
.ma-fcard li::before{
content:"\F26E";
position:absolute;left:0;top:2px;
font-family:"bootstrap-icons";
font-size:11px;color:#0D6EFD;
}
/* the five existing icon tints from .ma-f.s-*, reused as they are */
.a-quiz .ic{background:#E8F1FE;color:#2F80ED}
.a-job .ic{background:#E1F5FE;color:#0BA5EC}
.a-intern .ic{background:#F0ECFF;color:#7C5CFF}
.a-forum .ic{background:#E4F8EF;color:#12B76A}
.a-resume .ic{background:#FEF3E2;color:#F79009}
/* ---------- responsive, the same steps the page already uses ---------- */
@media (max-width:1199px){
.ma-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ma-fcard,.ma-fcard.wide{grid-column:span 1}
/* five cards in two columns leaves one card on its own, so the
fifth takes the whole row instead of half of it */
.ma-fcard.last{grid-column:span 2}
.ma-hub-body{grid-template-columns:minmax(0,1fr);gap:22px}
.ma-hub-items{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
.ma-fgrid{grid-template-columns:minmax(0,1fr)}
.ma-fcard.last{grid-column:span 1}
.ma-hub-items{grid-template-columns:minmax(0,1fr)}
.ma-fhub{padding:24px 22px 26px}
.ma-fcard{padding:24px 22px 26px;border-radius:18px}
.ma-feat-lede{font-size:15px !important}
.ma-fhub h3{font-size:18px !important}
.ma-fhub p,
.ma-fcard p,
.ma-fcard li,
.ma-hub-item b,
.ma-hub-item span{font-size:14px !important}
.ma-fcard h4{font-size:18px !important}
}
/* ================================================================
1. HERO ON A PHONE
Appended. Nothing above this point is modified.
Three things were measured wrong on a narrow screen. All three
live inside the existing @media (max-width:480px) block, which is
why they are corrected here rather than by editing those lines.
THE BREAKPOINT IS 640px, NOT 575px
The first attempt used max-width:575px, which is the width where
the collision looks worst but not where it starts. Measured, all
three faults were still present at 576px and fixed at 575px - the
boundary this file happens to break at, not a real one. Between
576px and 640px the hero is still a single centred column with a
206px phone, which is the same situation as a phone, so the fix
has to cover that band too. Above 640px the hero is a two-column
grid again with a fixed 360-400px stage, and that is the layout
the original chip offsets were written for.
1. THE TWO STORE BUTTONS WERE NOT CENTRED, AND NOT EQUAL
.ma-stores is a flex row, and the rule above sets flex:1 1 auto
on .ma-store at 480px. flex-grow hands out the FREE space, but
there is none here - each button is sized by its own label, and
the longer label wins:
Google Play 142px wide, centre 102px left of the column
App Store 128px wide, centre 43px right of the column
The row itself sat 33px left of centre at 390px and 51px left
at 430px, because .ma-cta is a wrapping flex row and .ma-btn is
width:100% at this width. The button fills its line, the store
row does not, and the row inherits flex-start. A full-width
button above a visibly off-centre pair is what that adds up to.
Fix: centre the row, and give the two buttons flex:1 1 0
instead of 1 1 auto. flex-basis 0 is the part that makes them
equal - with auto the basis is each button's content width, so
the difference between the two labels becomes the difference
between the two buttons.
2. ALL THREE FLOATING CHIPS SAT ON TOP OF THE PHONE
Below 991px the stage becomes the FULL column width and the
phone is centred inside it, so an offset measured from the
stage edge no longer relates to the phone at all. Measured
against the phone box, all three chips overlapped:
Easy Access overlaps
Secure & Trusted overlaps
Better Future overlaps
On a 345px column there is no width in which a 150px chip and a
206px phone sit side by side - 356px needed, 345px available.
No hand-placed offset fixes that; the phone has to get smaller.
Fix: below 640px the phone drops to 160px, and the three chips
stop floating. They become a row underneath it, because
floating them over a 160px phone leaves almost nothing to float
over. All three lines of each chip are kept - the hero comment
records that these three were moved here from a deleted band,
so nothing is lost by re-laying them out. Their markup is now
wrapped in .ma-chip-row, which is display:contents above 640px,
so on a wide screen the chips are still positioned against
.ma-stage exactly as before.
3. THE COPY WAS LEFT-ALIGNED WHILE EVERYTHING ELSE MOVED TO CENTRE
The phone and the button row are both centred at this width, so
left-aligned text sitting beside them read as an oversight. The
tag, heading, sub-heading and lead paragraph are centred below
640px to match the button. The headings need their own
!important because global-typography.css pins text-align on
h1-h3.
Sizes, colours and the styling of the buttons themselves are
untouched. This block only changes alignment, the phone's width,
and where the three chips sit.
================================================================ */
@media (max-width:640px){
/* ---- 1. store buttons: centred and equal width ---- */
.ma-stores{
width:100%;
margin:0 auto;
justify-content:center;
}
.ma-store{
flex:1 1 0;
max-width:200px;
justify-content:center;
}
/* ---- 2. a phone small enough to leave room ---- */
.ma-stage{
flex-direction:column;
align-items:center;
gap:16px;
padding:0 8px;
}
.ma-phone{
width:160px;
transform:rotate(0);
}
.ma-chip-row{
display:flex;
width:100%;
gap:8px;
align-items:stretch;
justify-content:center;
}
.ma-chip{
position:static;
flex:1 1 0;
min-width:0;
flex-direction:column;
align-items:center;
text-align:center;
gap:6px;
padding:11px 8px;
}
.ma-chip.c1,
.ma-chip.c2,
.ma-chip.c3{
left:auto;
right:auto;
top:auto;
bottom:auto;
}
.ma-chip .ic{
width:30px;height:30px;
min-width:30px;
font-size:13px;
flex:0 0 auto;
}
.ma-chip .txt{min-width:0}
.ma-chip b{
font-size:11.5px !important;
line-height:1.25 !important;
letter-spacing:0 !important;
}
.ma-chip span{
font-size:10px !important;
line-height:1.3 !important;
}
/* ---- 3. copy centred to match the button ---- */
.ma-hero-grid > div{
text-align:center;
}
.ma-hero .ma-tag{
justify-content:center;
}
.ma-hero h1,
.ma-hero h3,
.ma-lead{
text-align:center !important;
}
.ma-lead{
margin-left:auto;
margin-right:auto;
}
}
/* the chip wrapper must not disturb the wide layout, so above 640px
it is inert and the three chips are direct children of .ma-stage
again, positioned against it exactly as they were */
@media (min-width:641px){
.ma-chip-row{display:contents}
}
/* ================================================================
STORE BUTTON BADGES
The Google Play and App Store marks are now SVGs rather than
Bootstrap Icons glyphs, so they need explicit sizing: an has no
intrinsic relationship to the surrounding font-size.
height is in em so the badge tracks .ma-store's own font-size at
every breakpoint instead of being pinned to a fixed pixel value.
Scoped to the badge class so nothing else in .ma-store is affected.
================================================================ */
.ma-store img.odlc-store-badge {
height: 1.25em;
width: auto;
display: block;
flex: 0 0 auto;
}
/* ================================================================
THE STORE BUTTONS ARE BADGE IMAGES NOW
Appended at the end of this file. Nothing above this line was
edited.
WHAT WAS THERE
Two text buttons in the ODLC Mobile App hero, each a 19px store
icon plus a label - "Google Play" and "App Store" - carrying these
styles from mobileapp.css:1626 and :1627:
.ma-stores display:flex; flex-wrap:wrap; gap:10px
.ma-store display:inline-flex; align-items:center;
gap:9px; padding:11px 18px; border-radius:12px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22)
They are two store badge images now: google-play-badge.svg
and app-store-badge.svg - the dark-plate pair, the same two assets
the footer's Mobile App card uses, so every badge on the site is
now the black plate. These were first put in as the light-plate
variants and changed to the dark pair on request; nothing else in
this block moved when that happened, because the two files have the
same 200 x 60 viewBox and identical geometry and differ only in the
plate fill and the type colour.
WHAT CHANGED AND WHAT DID NOT
What changed: the icon and the label inside each anchor are now a
single badge, and the pill styling is taken off the anchor so
the badge is not drawn on top of a plate of its own.
What did not: the size of each button, the size of the row, the
position of everything around them, both hrefs, and the way the row
behaves on a phone. Every measurement below is a measurement taken
before this change and reproduced after it.
THE BUTTONS KEEP THE EXACT BOXES THEY HAD
Measured at 1440px before this change:
Google Play 144 x 43px
App Store 130 x 43px
the row 284 x 43px, gap 10px
They were not the same width, because each one was padded around its
own icon and its own label - "Google Play" is a longer word than
"App Store". Both widths are set back by the two nth-child rules
below, so the row occupies what it occupied before and nothing on
the page shifts.
THE BADGE IS CENTRED IN THAT BOX, AND IS NEVER STRETCHED
.ma-store.odlc-store-badge-img img
display:block; width:100%; height:100%; max-width:none;
object-fit:contain; object-position:center
width and height 100% offer the plate the whole of the button's
box. object-fit: contain with object-position: center then scales
the 200 x 60 plate to fit inside it and centres it - 143 x 43 in
the 144px box, and 130 x 39 letterboxed in the 130px one. The plate
keeps its own proportions in both cases; stretching it to fill a box
would square up its corners, its rim and its type.
Fitting rather than cropping is also why each button is still as
large a click target as it was. The visible plate is a little
narrower than the widest button, which is the one visible
consequence of a text label being replaced by an image.
WHY THE RESET IS TWO CLASSES, AND WHY THE WIDTHS ARE nth-child
.ma-store.odlc-store-badge-img is (0,2,0), so it beats the bare
.ma-store rules wherever they sit in this file, instead of relying
on being later in the file than a rule that may still be edited.
The two nth-child rules are .ma-stores .odlc-store-badge-img
:nth-child(n), which is (0,3,0), so they set width over the base
rule's fallback.
:nth-child counts element children only. Both badges are the only
two elements inside .ma-stores, so the first really is
:nth-child(1).
TWO EXISTING RULES THAT ARE DELIBERATELY LEFT ALONE, BY NAME
.ma-store at mobileapp.css:1888 and :2266 set flex on the button -
flex:1 1 auto below 480px, and flex:1 1 0 with max-width:200px
below 640px. Those are what made the two buttons stretch and fill
the row on a phone, and they are NOT overridden here: the row is
meant to behave as it did. flex is therefore absent from the rule
below and max-width is absent too, so both of those rules still
apply. A button that does stretch on a phone shows a narrower plate
with clear space either side rather than a distorted one, because
of the object-fit above.
.ma-store:hover at :1635 sets background:rgba(255,255,255,.18).
That is (0,2,0) as well and comes first in this file, so the
transparent background wins on source order and no pale flash shows
under the badge on hover. It is restated in the hover rule at the
end of this block so the intent is on the page.
line-height: 0 is what stops an inline image leaving a gap beneath
the baseline, which would otherwise drop each badge a few pixels
low in its anchor so the two were not level with each other.
max-width: none on the image, because a global img max-width could
otherwise shrink the plate inside a narrow hero.
THE MARKUP
The anchors keep class="ma-store odlc-store-badge-img" so the
surrounding layout is untouched, and each keeps width and
height attributes - 144 x 43 and 130 x 43 - so the browser reserves
the right box before the SVG arrives. The CSS states the same
sizes, which is why these rules have to exist rather than being
left to the attributes alone.
ACCESSIBILITY
The anchor carries aria-label and the image the same alt text, so
the link keeps an accessible name whether or not the SVG loads.
WHAT IS NOT CHANGED
Both hrefs, still opening in a new tab with rel="noopener". The
.ma-stores row and its 10px gap. The DOWNLOAD APP pill above it.
The rest of the mobile app page. No copy and no URL invented.
================================================================ */
.ma-store.odlc-store-badge-img {
display: inline-flex;
align-items: center;
justify-content: center;
width: 144px;
height: 43px;
margin: 0;
padding: 0;
gap: 0;
background: transparent;
border: 0;
border-radius: 0;
line-height: 0;
}
/* ----------
THE TWO BUTTONS KEEP THE EXACT BOXES THEY HAD
Measured at 1440px before this change:
Google Play 144 x 43px
App Store 130 x 43px
the row 284 x 43px, gap 10px
They were not the same width, because each one was padded around its
own 19px icon and its own label - "Google Play" is a longer word than
"App Store". Both widths are put back so that nothing on the page
shifts by a pixel, and each badge is centred inside whichever box it
is given.
flex and max-width are deliberately NOT reset here. .ma-store at
mobileapp.css:1888 and :2266 sets flex:1 1 auto below 480px and
flex:1 1 0 with max-width:200px below 640px, which is how the two
buttons used to grow to fill the row on a phone. Those rules are left
standing, so the phone behaviour is unchanged too - only the contents
of each button changed from icon-plus-text to a badge image.
---------- */
.ma-stores .odlc-store-badge-img:nth-child(1) {
width: 144px;
}
.ma-stores .odlc-store-badge-img:nth-child(2) {
width: 130px;
}
.ma-store.odlc-store-badge-img img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
object-position: center;
border: 0;
border-radius: 0;
}
.ma-store.odlc-store-badge-img:hover {
background: transparent;
}
.ma-store.odlc-store-badge-img:hover img {
opacity: .88;
}
/* ==========================================================================
IMAGE WRAPPER STOPPED PAINTING ITS OWN BACKGROUND
-------------------------------------------------------------------------
One declaration.
The wrapper around the hero image carried its own flat background:
.ma-screen { ... border-radius: 34px; overflow: hidden; background: #0A2A6B }
That had never mattered, because the image inside it was opaque - it was a
PNG with a grey checkerboard painted into it rather than real transparency.
Now that the checkerboard is gone and the image carries a genuine alpha
channel, the wrapper's own colour shows through as a rounded panel of one
flat navy sitting on the hero's background, which is not one flat colour:
.ma-hero { background:
radial-gradient(1100px 560px at 76% 14%, rgba(109,77,255,.40), transparent 62%),
radial-gradient( 820px 520px at 10% 92%, rgba(13,110,253,.34), transparent 60%),
linear-gradient(158deg, #0B1F4D 0%, #0A2A6B 48%, #061E45 100%); }
#0A2A6B is one of that linear gradient's stops, so the wrapper looked close
but was flat where the hero is not - the panel edge was visible as a
rounded rectangle. Taking the wrapper's background away lets the hero's own
gradient show through, so the artwork sits on the page with no edge at all.
Nothing else changes: the width, the height, the radius, the overflow and
the object-fit on the image are all left exactly as they were. The radius
simply has nothing left to clip, and overflow:hidden still does its job on
the image. mobileapp.php is not opened.
========================================================================== */
.ma-screen {
background: transparent;
}
/* ==========================================================================
HERO IMAGE BIGGER AND MOVED LEFT
-------------------------------------------------------------------------
Two declarations, above 991px only.
grid-template-columns: minmax(0, 1fr) 500px (was 400px)
gap: 24px (was 48px)
WHY THE MEDIA QUERY
This stylesheet has three column rules for this grid:
top level minmax(0,1fr) 400px gap 48px
@media (max-width:1199px) minmax(0,1fr) 360px gap 40px
@media (max-width: 991px) minmax(0,1fr) gap 52px single column
The last one is a deliberate single-column layout for phones and small
tablets, stacked with .ma-stage ordered first. An unscoped rule would win
over it - media queries carry no extra specificity, only source order
decides - and would have forced two columns back at every width. This is
therefore scoped to 992px and up, where both the 400px and the 360px
variants are superseded by the same 500px column.
NO !important
None of the three rules carries it on grid-template-columns or gap, so this
simply comes later in the file at equal specificity and wins.
MEASURED, at 1440px
before after
artwork shown 475 x 339 500 x 357
cropped each side 75px 0.3px
artwork left edge 945 882 moved 63px left
gap between columns 48px 24px
hero height 484.6 530.0
The crop effectively disappears on its own: at 500px the box aspect is
500/357 = 1.4006 against the artwork's 1.4023, so object-fit:cover stops
having to throw anything away. object-fit is not touched.
--------------------------------------------------------------------------
NOTHING ELSE
The text column, the image, its object-fit, the width, the radius, the
overflow and the transparent background from the previous change are all
left as they are, as is the 991px single-column layout. mobileapp.php is
not opened.
========================================================================== */
@media (min-width: 992px) {
.ma-hero-grid {
grid-template-columns: minmax(0, 1fr) 500px;
gap: 24px;
}
}
/* ==========================================================================
HERO IMAGE COLUMN TAKEN TO 540PX
-------------------------------------------------------------------------
One declaration changed: 500px -> 540px. Same 992px floor, same 24px gap.
WHY 540 AND NOT MORE
The headline is what limits it. Measured at every two-column width with the
column injected, the line count of the h1 is 2 up to 540px and 3 beyond,
in the 992-1024px band where the text column is narrowest:
image column text column at 992px h1 lines hero height
500 408.5 2 530.0
540 368.5 2 560.7
560 348.5 3 576.1
600 308.5 3 606.8
620 288.5 3 622.2
So 540px is the largest column that costs nothing. Above it the headline
takes an extra line while the paragraph keeps narrowing.
Above 1200px the image could go much further with no cost at all - at 1440px
the headline is still two lines at 620px, because the text column has 680px
to work with. If a larger image on wide screens is wanted, that needs a
second value at 1200px, which is deliberately not added here.
WHAT ELSE THIS MOVES
artwork shown 500 x 384 -> 540 x 414.7 (+8%)
hero height 530.0 -> 560.7
text column at 1440 800.8 -> 760.8
cropped 0 -> 0 nothing cropped either way
The image column matches the artwork's own aspect: mobileapp2.png is
1431 x 1099, which is 1.302, and 540 / 414.7 is 1.302, so object-fit:cover
has nothing to trim at any of these sizes.
--------------------------------------------------------------------------
NOTHING ELSE
One number. The gap, the object-fit, the image, the text column, the radius,
the overflow and the transparent background are all as they are, as is the
991px single-column layout. mobileapp.php is not opened.
========================================================================== */
@media (min-width: 992px) {
.ma-hero-grid {
grid-template-columns: minmax(0, 1fr) 540px;
}
}