/*==========================
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;
}
/* =========================================================
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;
}
}
/* =========================================================
ECCE LEVEL 1 HERO
SAME STYLE AS SECONDARY LEVEL CLASS X
========================================================= */
.ecce-level1-hero {
width: 100%;
overflow: hidden;
position: relative;
font-family: Arial, Helvetica, sans-serif;
background: #083c7c;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.ecce-level1-container {
width: 100%;
min-height: 440px;
position: relative;
overflow: hidden;
display: flex;
align-items: stretch;
background: #083c7c;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.ecce-level1-content {
width: 54%;
position: relative;
z-index: 10;
padding: 82px 50px 70px 7%;
display: flex;
flex-direction: column;
justify-content: center;
}
/* =========================================================
BADGE
========================================================= */
.ecce-level1-badge {
width: fit-content;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 24px;
margin-bottom: 32px;
border: 1px solid rgba(153, 190, 255, 0.55);
border-radius: 30px;
background: rgba(61, 113, 183, 0.45);
color: #ffffff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
}
.ecce-level1-badge i {
font-size: 15px;
color: #ffffff;
}
/* =========================================================
MAIN HEADING
========================================================= */
.ecce-level1-content h1 {
position: relative;
z-index: 2;
margin: 0;
color: #ffffff;
font-size: clamp(48px, 5vw, 76px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -2px;
}
.ecce-level1-content h1 span {
color: #ffffff;
}
/* Highlight LEVEL 1 */
.ecce-level1-content h1 {
color: #a9c7ff;
}
.ecce-level1-content h1 span {
color: #ffffff;
}
/* =========================================================
PROGRAMME NAME
========================================================= */
.ecce-level1-content h2 {
position: relative;
z-index: 2;
margin: 8px 0 0;
color: #ffffff;
font-size: clamp(25px, 2.5vw, 40px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -.5px;
}
/* =========================================================
BUTTON
========================================================= */
.ecce-level1-btn {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
min-width: 300px;
min-height: 55px;
margin-top: 20px;
padding: 0 28px;
background: #ffffff;
color: #083C7C;
border: 2px solid #ffffff;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: all .3s ease;
box-sizing: border-box;
}
.ecce-level1-btn i {
font-size: 22px;
transition: transform .3s ease;
}
.ecce-level1-btn:hover {
background: #eaf2fc;
color: #083C7C;
}
.ecce-level1-btn:hover i {
transform: translateX(5px);
}
/* =========================================================
DURATION
========================================================= */
.ecce-level1-duration {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 22px;
padding: 10px 22px;
border: 2px solid #8dbaff;
border-radius: 30px;
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 1;
}
.ecce-level1-duration i {
font-size: 20px;
color: #ffffff;
}
/* =========================================================
PROGRAMME LABEL
========================================================= */
.ecce-level1-label {
position: relative;
z-index: 2;
margin-bottom: 10px;
color: #a9c7ff;
font-size: 16px;
font-weight: 700;
letter-spacing: 3px;
line-height: 1.4;
}
/* =========================================================
BLUE / WHITE DIVIDER
========================================================= */
.ecce-level1-line {
width: 45px;
height: 4px;
margin: 27px 0 25px;
background: #ffffff;
border-radius: 5px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.ecce-level1-content p {
max-width: 610px;
margin: 0;
color: #ffffff;
font-size: 18px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
RIGHT IMAGE
========================================================= */
.ecce-level1-image {
position: absolute;
top: 0;
right: 0;
width: 53%;
height: 100%;
overflow: hidden;
z-index: 2;
}
/* =========================================================
CURVED BLUE CUTOUT
========================================================= */
.ecce-level1-image::before {
content: "";
position: absolute;
z-index: 3;
left: -200px;
top: -8%;
width: 310px;
height: 116%;
background: #083c7c;
border-radius: 50%;
}
/* =========================================================
IMAGE
========================================================= */
.ecce-level1-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
position: relative;
z-index: 1;
}
/* =========================================================
TOP CIRCLES
========================================================= */
.ecce-level1-circle-top {
position: absolute;
width: 150px;
height: 150px;
top: -72px;
right: 45%;
border: 1px solid rgba(120, 169, 232, 0.35);
border-radius: 50%;
z-index: 8;
}
.ecce-level1-circle-top::before {
content: "";
position: absolute;
inset: 18px;
border: 1px solid rgba(120, 169, 232, 0.35);
border-radius: 50%;
}
.ecce-level1-circle-top::after {
content: "";
position: absolute;
inset: 36px;
border: 1px solid rgba(120, 169, 232, 0.35);
border-radius: 50%;
}
/* =========================================================
DOT PATTERN
========================================================= */
.ecce-level1-dots {
position: absolute;
left: 34px;
top: 28px;
width: 75px;
height: 75px;
z-index: 8;
opacity: 0.7;
background-image:
radial-gradient(
rgba(92, 151, 220, 0.75) 1.5px,
transparent 1.5px
);
background-size: 11px 11px;
}
/* =========================================================
BOTTOM LEFT CIRCLE
========================================================= */
.ecce-level1-circle-bottom {
position: absolute;
width: 155px;
height: 155px;
left: -78px;
bottom: -82px;
border: 3px solid rgba(115, 167, 235, 0.7);
border-radius: 50%;
z-index: 8;
}
.ecce-level1-circle-bottom::before {
content: "";
position: absolute;
inset: 20px;
border: 1px solid rgba(115, 167, 235, 0.35);
border-radius: 50%;
}
/* =========================================================
LAPTOP
992px - 1199px
========================================================= */
@media (max-width: 1199px) {
.ecce-level1-container {
min-height: 520px;
}
.ecce-level1-content {
padding-left: 6%;
padding-right: 35px;
}
.ecce-level1-content h1 {
font-size: 48px;
}
.ecce-level1-content p {
font-size: 17px;
}
.ecce-level1-image {
width: 54%;
}
}
/* =========================================================
TABLET
768px - 991px
========================================================= */
@media (max-width: 991px) {
.ecce-level1-container {
min-height: 460px;
}
.ecce-level1-content {
width: 53%;
padding:
60px
25px
55px
5%;
}
.ecce-level1-badge {
font-size: 13px;
padding: 11px 20px;
margin-bottom: 24px;
}
.ecce-level1-content h1 {
font-size: 42px;
letter-spacing: -0.5px;
}
.ecce-level1-content p {
font-size: 16px;
}
.ecce-level1-line {
margin: 20px 0;
}
.ecce-level1-image {
width: 55%;
}
.ecce-level1-image::before {
left: -120px;
}
}
/* =========================================================
MOBILE
576px - 767px
========================================================= */
@media (max-width: 767px) {
.ecce-level1-container {
min-height: auto;
display: flex;
flex-direction: column;
}
.ecce-level1-content {
width: 100%;
padding: 45px 24px 40px;
order: 1;
}
.ecce-level1-badge {
font-size: 12px;
padding: 10px 17px;
margin-bottom: 22px;
}
.ecce-level1-content h1 {
font-size: 34px;
line-height: 1.1;
}
.ecce-level1-content p {
font-size: 15px;
max-width: 100%;
}
.ecce-level1-line {
width: 42px;
height: 3px;
margin: 17px 0 15px;
}
.ecce-level1-image {
position: relative;
width: 100%;
height: 330px;
order: 2;
}
.ecce-level1-image::before {
display: none;
}
.ecce-level1-circle-top,
.ecce-level1-circle-bottom,
.ecce-level1-dots {
display: none;
}
}
/* =========================================================
SMALL MOBILE
BELOW 576px
========================================================= */
@media (max-width: 575px) {
.ecce-level1-content {
padding: 35px 18px 32px;
}
.ecce-level1-badge {
font-size: 11px;
padding: 9px 15px;
gap: 7px;
}
.ecce-level1-content h1 {
font-size: 30px;
line-height: 1.1;
}
.ecce-level1-content p {
font-size: 14px;
line-height: 1.5;
}
.ecce-level1-image {
height: 260px;
}
}
/* =========================================================
ECCE - ABOUT THE PROGRAMME
========================================================= */
.ecce-about {
width: 100%;
position: relative;
padding: 70px 0;
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.ecce-about-container {
width: min(1180px, 90%);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 70px;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.ecce-about-content {
width: 48%;
position: relative;
z-index: 3;
}
/* =========================================================
HEADING
========================================================= */
.ecce-about-heading {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 22px;
}
/* =========================================================
TITLE ICON
========================================================= */
.ecce-about-icon {
width: 35px;
height: 35px;
flex: 0 0 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #0877e8;
box-shadow:
0 8px 20px rgba(8, 119, 232, 0.20);
}
.ecce-about-icon i {
color: #ffffff;
font-size: 20px;
}
/* =========================================================
TITLE
========================================================= */
.ecce-about-heading h2 {
margin: 0;
color: #0b3470;
font-size: 30px;
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.6px;
}
/* =========================================================
SMALL BLUE LINE
========================================================= */
.ecce-about-line {
display: block;
width: 30px;
height: 3px;
margin-top: 10px;
background: #0877e8;
border-radius: 5px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.ecce-about-content p {
margin: 0 0 22px;
max-width: 600px;
color: #344b6b;
text-align: justify;
font-size: 16px;
line-height: 1.65;
font-weight: 400;
}
.ecce-about-content p:last-child {
margin-bottom: 0;
}
/* =========================================================
RIGHT IMAGE AREA
========================================================= */
.ecce-about-image {
width: 48%;
min-height: 330px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
BACK BLUE SHAPE
========================================================= */
.ecce-about-shape {
position: absolute;
top: 8px;
right: -5px;
width: 88%;
height: 88%;
border-radius: 0 22px 22px 22px;
background:
linear-gradient(
135deg,
#0877e8 0%,
#0b61c7 100%
);
z-index: 1;
}
/* =========================================================
IMAGE WRAPPER
========================================================= */
.ecce-about-image-wrapper {
width: 88%;
height: 285px;
position: relative;
overflow: hidden;
border-radius: 18px;
z-index: 3;
background: #ffffff;
box-shadow:
0 12px 30px rgba(8, 60, 124, 0.16);
}
/* =========================================================
IMAGE
========================================================= */
.ecce-about-image-wrapper img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
}
/* =========================================================
DOT PATTERN
========================================================= */
.ecce-about-dots {
position: absolute;
right: -18px;
top: 58px;
width: 65px;
height: 85px;
z-index: 4;
background-image:
radial-gradient(
#0877e8 1.5px,
transparent 1.5px
);
background-size: 9px 9px;
opacity: 0.85;
}
/* =========================================================
LAPTOP
992px - 1199px
========================================================= */
@media (max-width: 1199px) {
.ecce-about {
padding: 60px 0;
}
.ecce-about-container {
width: min(1080px, 90%);
gap: 50px;
}
.ecce-about-heading h2 {
font-size: 42px;
}
.ecce-about-content p {
font-size: 17px;
}
.ecce-about-image {
min-height: 300px;
}
.ecce-about-image-wrapper {
height: 260px;
}
}
/* =========================================================
TABLET
768px - 991px
========================================================= */
@media (max-width: 991px) {
.ecce-about {
padding: 55px 0;
}
.ecce-about-container {
width: 90%;
gap: 35px;
}
.ecce-about-content {
width: 50%;
}
.ecce-about-image {
width: 50%;
min-height: 270px;
}
.ecce-about-heading {
gap: 15px;
}
.ecce-about-icon {
width: 45px;
height: 45px;
flex-basis: 45px;
}
.ecce-about-icon i {
font-size: 21px;
}
.ecce-about-heading h2 {
font-size: 38px;
}
.ecce-about-content p {
font-size: 16px;
line-height: 1.6;
}
.ecce-about-image-wrapper {
width: 88%;
height: 230px;
}
}
/* =========================================================
MOBILE
576px - 767px
========================================================= */
@media (max-width: 767px) {
.ecce-about {
padding: 45px 0;
}
.ecce-about-container {
width: 90%;
flex-direction: column;
align-items: stretch;
gap: 35px;
}
.ecce-about-content {
width: 100%;
}
.ecce-about-heading {
gap: 14px;
}
.ecce-about-icon {
width: 44px;
height: 44px;
flex-basis: 44px;
}
.ecce-about-icon i {
font-size: 20px;
}
.ecce-about-heading h2 {
font-size: 32px;
}
.ecce-about-content p {
font-size: 15px;
line-height: 1.6;
}
.ecce-about-image {
width: 100%;
min-height: 280px;
}
.ecce-about-image-wrapper {
width: 88%;
height: 260px;
}
.ecce-about-shape {
width: 88%;
height: 88%;
}
.ecce-about-dots {
right: 0;
}
}
/* =========================================================
SMALL MOBILE
BELOW 576px
========================================================= */
@media (max-width: 575px) {
.ecce-about {
padding: 38px 0;
}
.ecce-about-container {
width: 92%;
gap: 28px;
}
.ecce-about-heading {
gap: 12px;
}
.ecce-about-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
border-radius: 10px;
}
.ecce-about-icon i {
font-size: 18px;
}
.ecce-about-heading h2 {
font-size: 29px;
}
.ecce-about-line {
width: 27px;
height: 3px;
margin-top: 7px;
}
.ecce-about-content p {
font-size: 14px;
line-height: 1.55;
margin-bottom: 18px;
}
.ecce-about-image {
min-height: 235px;
}
.ecce-about-image-wrapper {
height: 215px;
width: 90%;
border-radius: 14px;
}
.ecce-about-shape {
border-radius: 0 18px 18px 18px;
}
.ecce-about-dots {
width: 48px;
height: 65px;
background-size: 8px 8px;
}
}
/* =========================================================
ECCE LEVEL 1 - COMPACT VERSION
========================================================= */
.ecce-level-section {
width: 100%;
padding: 30px 0 35px;
background: #f4f7fb;
font-family: Arial, Helvetica, sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.ecce-level-container {
width: min(1180px, 90%);
margin: 0 auto;
}
/* =========================================================
LEVEL LABEL
========================================================= */
.ecce-level-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 125px;
padding: 8px 18px;
margin-bottom: 16px;
border-radius: 10px;
background: #064584;
color: #ffffff;
font-size: 20px;
line-height: 1.2;
font-weight: 700;
}
/* =========================================================
CARDS
========================================================= */
.ecce-level-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
/* =========================================================
CARD
========================================================= */
.ecce-level-card {
min-height: 175px;
padding: 22px 28px;
display: flex;
align-items: flex-start;
background: #ffffff;
border-radius: 20px;
border-left: 4px solid #0877e8;
box-shadow:
0 5px 16px rgba(8, 60, 124, 0.08);
}
/* =========================================================
CARD CONTENT
========================================================= */
.ecce-level-card-content {
width: 100%;
}
/* =========================================================
CARD TITLE
========================================================= */
.ecce-level-card h3 {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
color: #203750;
font-size: 22px;
line-height: 1.25;
font-weight: 700;
}
/* ICON */
.ecce-level-card h3 i {
color: #064584;
font-size: 27px;
flex-shrink: 0;
}
/* =========================================================
PARAGRAPH
========================================================= */
.ecce-level-card p {
margin: 0 0 6px;
color: #405775;
font-size: 16px;
line-height: 1.5;
}
/* BOLD CONTENT */
.ecce-level-card p strong {
color: #405775;
font-weight: 700;
}
/* =========================================================
ELIGIBILITY LIST
========================================================= */
.ecce-level-card ul {
margin: 0;
padding-left: 22px;
}
.ecce-level-card li {
margin-bottom: 6px;
color: #405775;
font-size: 16px;
line-height: 1.5;
}
.ecce-level-card li strong {
color: #405775;
font-weight: 700;
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199px) {
.ecce-level-section {
padding: 28px 0 32px;
}
.ecce-level-card {
min-height: 165px;
padding: 20px 24px;
}
.ecce-level-card h3 {
font-size: 21px;
}
.ecce-level-card h3 i {
font-size: 25px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.ecce-level-section {
padding: 25px 0 30px;
}
.ecce-level-label {
font-size: 19px;
padding: 7px 16px;
margin-bottom: 14px;
}
.ecce-level-grid {
gap: 18px;
}
.ecce-level-card {
min-height: 155px;
padding: 18px 20px;
border-radius: 16px;
}
.ecce-level-card h3 {
font-size: 19px;
margin-bottom: 8px;
}
.ecce-level-card h3 i {
font-size: 23px;
}
.ecce-level-card p,
.ecce-level-card li {
font-size: 15px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.ecce-level-section {
padding: 25px 0 30px;
}
.ecce-level-container {
width: 90%;
}
.ecce-level-label {
font-size: 18px;
padding: 7px 16px;
margin-bottom: 13px;
}
.ecce-level-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.ecce-level-card {
min-height: auto;
padding: 18px;
border-radius: 15px;
}
.ecce-level-card h3 {
font-size: 18px;
}
.ecce-level-card h3 i {
font-size: 22px;
}
.ecce-level-card p,
.ecce-level-card li {
font-size: 15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575px) {
.ecce-level-section {
padding: 22px 0 27px;
}
.ecce-level-container {
width: 92%;
}
.ecce-level-label {
font-size: 17px;
padding: 7px 15px;
margin-bottom: 12px;
}
.ecce-level-card {
padding: 16px;
border-left-width: 4px;
border-radius: 14px;
}
.ecce-level-card h3 {
font-size: 17px;
gap: 8px;
}
.ecce-level-card h3 i {
font-size: 20px;
}
.ecce-level-card p,
.ecce-level-card li {
font-size: 14px;
line-height: 1.5;
}
}
/* =========================================================
ECCE - SUBJECT STRUCTURE
========================================================= */
.ecce-subject-section {
width: 100%;
padding: 55px 0 65px;
background: #f6f9fd;
font-family: Arial, Helvetica, sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.ecce-subject-container {
width: min(1180px, 90%);
margin: 0 auto;
}
/* =========================================================
SECTION HEADING
========================================================= */
.ecce-subject-heading {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
/* ICON */
.ecce-subject-heading-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #0877e8;
font-size: 28px;
}
/* TITLE */
.ecce-subject-heading h2 {
margin: 0;
color: #0b3470;
font-size: 30px;
line-height: 1.2;
font-weight: 700;
}
/* TITLE LINE */
.ecce-subject-heading-line {
display: block;
width: 30px;
height: 3px;
margin-top: 7px;
background: #0877e8;
border-radius: 4px;
}
/* =========================================================
TABLE WRAPPER
========================================================= */
.ecce-subject-table-wrapper {
width: 100%;
overflow-x: auto;
border: 1px solid #b8cce5;
border-radius: 14px;
background: #ffffff;
box-shadow:
0 5px 20px rgba(8, 60, 124, 0.08);
}
/* =========================================================
TABLE
========================================================= */
.ecce-subject-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
color: #344b6b;
font-size: 16px;
}
/* =========================================================
TABLE HEADER
========================================================= */
.ecce-subject-table thead th {
position: relative;
padding: 12px 18px;
background: #064584;
color: #ffffff;
font-size: 16px;
font-weight: 700;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, 0.25);
}
/* COLUMN WIDTHS */
.ecce-subject-table th:nth-child(1),
.ecce-subject-table td:nth-child(1) {
width: 20%;
}
.ecce-subject-table th:nth-child(2),
.ecce-subject-table td:nth-child(2) {
width: 19%;
}
.ecce-subject-table th:nth-child(3),
.ecce-subject-table td:nth-child(3) {
width: 61%;
}
/* REMOVE LAST HEADER BORDER */
.ecce-subject-table thead th:last-child {
border-right: none;
}
/* =========================================================
TABLE BODY
========================================================= */
.ecce-subject-table tbody td {
padding: 8px 20px;
height: 38px;
font-size: 16px;
line-height: 1.45;
border-right: 1px solid #d0deed;
border-bottom: 1px solid #d0deed;
background: #ffffff;
vertical-align: middle;
}
/* ALTERNATE ROW */
.ecce-subject-table tbody tr:nth-child(even) td {
background: #f0f5fb;
}
/* REMOVE LAST COLUMN BORDER */
.ecce-subject-table tbody td:last-child {
border-right: none;
}
/* REMOVE LAST ROW BORDER */
.ecce-subject-table tbody tr:last-child td {
border-bottom: none;
}
/* =========================================================
MODULE NUMBER
========================================================= */
.ecce-subject-table tbody td:first-child {
text-align: center;
}
.module-number {
width: 25px;
height: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0877e8;
color: #ffffff;
font-size: 13px;
font-weight: 700;
}
/* =========================================================
SUBJECT CODE
========================================================= */
.ecce-subject-table tbody td:nth-child(2) {
text-align: center;
color: #344b6b;
}
/* =========================================================
SUBJECT TITLE
========================================================= */
.ecce-subject-table tbody td:nth-child(3) {
text-align: left;
color: #344b6b;
}
/* =========================================================
BOOK ICON
========================================================= */
.ecce-table-book-icon {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 27px;
opacity: 0.35;
}
/* =========================================================
HOVER
========================================================= */
.ecce-subject-table tbody tr {
transition: background 0.25s ease;
}
.ecce-subject-table tbody tr:hover td {
background: #eaf3ff;
}
/* =========================================================
LAPTOP
992px – 1199px
========================================================= */
@media (max-width: 1199px) {
.ecce-subject-container {
width: 90%;
}
.ecce-subject-table {
font-size: 15px;
}
.ecce-subject-table thead th {
font-size: 15px;
}
.ecce-subject-table tbody td {
font-size: 15px;
padding: 8px 16px;
}
}
/* =========================================================
TABLET
768px – 991px
========================================================= */
@media (max-width: 991px) {
.ecce-subject-section {
padding: 45px 0 55px;
}
.ecce-subject-heading h2 {
font-size: 30px;
}
.ecce-subject-table {
min-width: 700px;
}
.ecce-subject-table thead th {
padding: 11px 14px;
}
.ecce-subject-table tbody td {
padding: 8px 14px;
font-size: 15px;
}
}
/* =========================================================
MOBILE
576px – 767px
========================================================= */
@media (max-width: 767px) {
.ecce-subject-section {
padding: 40px 0 45px;
}
.ecce-subject-container {
width: 90%;
}
.ecce-subject-heading {
margin-bottom: 15px;
}
.ecce-subject-heading h2 {
font-size: 30px;
}
.ecce-subject-table {
min-width: 680px;
}
.ecce-subject-table thead th {
font-size: 14px;
padding: 10px 12px;
}
.ecce-subject-table tbody td {
font-size: 15px;
padding: 8px 12px;
}
.module-number {
width: 23px;
height: 23px;
font-size: 13px;
}
}
/* =========================================================
SMALL MOBILE
BELOW 576px
========================================================= */
@media (max-width: 575px) {
.ecce-subject-section {
padding: 35px 0 40px;
}
.ecce-subject-container {
width: 92%;
}
.ecce-subject-heading {
gap: 10px;
}
.ecce-subject-heading-icon {
width: 34px;
height: 34px;
font-size: 24px;
}
.ecce-subject-heading h2 {
font-size: 29px;
}
.ecce-subject-table {
min-width: 650px;
}
.ecce-subject-table thead th {
font-size: 14px;
padding: 9px 10px;
}
.ecce-subject-table tbody td {
font-size: 14px;
padding: 8px 10px;
}
.ecce-table-book-icon {
display: none;
}
}
/* Short duration badge */
.ecce-level1-duration {
display: inline-flex !important;
width: auto !important;
max-width: fit-content !important;
padding: 9px 20px !important;
margin-top: 18px !important;
border-radius: 25px !important;
font-size: 16px !important;
}
/* Short explore button */
.ecce-level1-btn {
display: inline-flex !important;
width: auto !important;
min-width: 0 !important;
max-width: fit-content !important;
min-height: 48px !important;
padding: 0 24px !important;
margin-top: 16px !important;
border-radius: 8px !important;
font-size: 14px !important;
gap: 14px !important;
}
/* ============================================================================
THE ECCE LEVEL 1 HERO PUT ON THE SECONDARY LEVEL - CLASS X HERO
----------------------------------------------------------------------------
Source of every number below: the Grade 10 banner on
Programmes/Academic/secondarylevel-classx.php - its own stylesheet and, for
the badge, the title and the description, css/global-typography.css, which
is the sheet both pages load.
NOTHING IN THE MARKUP WAS TOUCHED. Same words, same order, same elements.
CERTIFICATE PROGRAMME, ECCE | LEVEL 1, Early Childhood Care and Education,
the description, the duration pill, the button, the three decorations and
the photograph are all still in eccelevel1.php exactly as they were.
---------------------------------------------------------------------------
WHAT EACH PIECE WAS, AND WHAT IT IS NOW
---------------------------------------------------------------------------
THE BANNER
.ecce-level1-hero background rgb(8,60,124) -> rgb(6,45,92)
min-height none -> 455px
font-family unset -> Arial, Helvetica, sans-serif
padding-left 0 -> max(4%, 50% - 690px)
.ecce-level1-container min-height 520px -> 455px
align-items stretch -> center
width 984.8px (full) -> 100%
That last line on the section is the one that fixes the alignment. On the
Grade 10 page the hero title sits on the header logo's left edge - 29.5px
at a 1000px viewport on both, because the header logo sits at 3% there. On
this page the title sat at 59.1px, 29.6px out. The same padding expression
that Grade 10 uses is applied here, at each of its four widths:
4% of the body 1199px and below 3%
5% of the body 767px and below 5%
4% of the body 480px and below 4%
and .ecce-level1-content padding-left is taken to 0, exactly as Grade 10
does, so the gutter is the banner's and not the column's.
THE BADGE - "Home / ECCE"
was rgba(61,113,183,.45) fill, no border, 13px 24px padding,
15px and 14px type, 24px and 22.4px line boxes
now the Grade 10 badge, rung for rung
rgba(255,255,255,.1) fill, 1px rgba(255,255,255,.35) border,
30px radius, blur(5px), width fit-content
type / padding / gap / margin-bottom
16px 11px 20px 10px 25px default
15px 10px 18px 9px 22px 1199px and below
14px 9px 17px 8px 20px 991px and below
13px 8px 15px 8px 18px 767px and below
12px 7px 13px 7px 16px 575px and below
11px 6px 12px 6px 14px 480px and below
all 700 weight, 0.3px letter-spacing, white
THE HEADING - "ECCE | LEVEL 1"
Grade 10's title is 40px at weight 800, -1px letter-spacing, uppercased,
with the second half in #A9C7FF. This one was 48px, -2px, mixed case, and
both halves white - 20% larger than the reference and looser.
40px / 1.08 / -1px default
40px / 1.08 / -1px 1199px and below
36px / 1.10 / -0.8px 991px and below
34px / 1.08 / -0.8px 767px and below
30px / 1.10 / -0.6px 575px and below
29px / 1.10 / -0.4px 400px and below
all weight 800, uppercase, white, with the span in #A9C7FF - the same
colour the Grade 10 title gives its span.
"Early Childhood Care and Education" - the h2 under the heading. Grade 10's
banner has no h2, so there is nothing to copy and this is given the size
that sits between a 40px title and 17px of body copy: 24px at weight 700,
stepping down to 17px on the smallest phones.
THE RULE UNDER THE HEADING
was 45 x 4px, 5px radius, 27px above and 25px below
now 36 x 3px, 10px radius, 24px above and 20px below - Grade 10's,
and the same at its own breakpoints: 18px/15px at 991px and below,
30 x 3px with 16px either side at 480px and below
THE DESCRIPTION
Grade 10's is 17px on a 1.75 line, 0.2px letter-spacing, white at 90%,
650px wide. This one was 17px on a 1.54 line with no letter-spacing and
solid white at 437px.
17px / 1.75 / 0.2px default
16px / 1.75 1399px and below
16px / 1.65 991px and below
15px / 1.60, full width 767px and below
14px / 1.60 575px and below
THE DURATION PILL AND THE BUTTON
Grade 10's banner has neither. They are left where they are and given the
badge's type - 15px, weight 700, 0.3px letter-spacing - so they read as
part of the same banner. The pill keeps its own outline shape and the
button keeps its white box; only the type inside them and the navy in the
button's lettering change, #083C7C to #062D5C, to go with the new
background.
THE PHOTOGRAPH
This was the biggest difference. The Grade 10 picture is not in a rounded
box - it is cut by an ellipse and then a navy ellipse is laid over the left
of it, which is what draws the curve. This page had a plain rectangular
absolutely-positioned block and no curve at all.
.ecce-level1-image position absolute, top 0, right 0, 531.8px wide,
height 615.35px, overflow hidden, no clip
now position static, width 58%, height auto,
align-self stretch, overflow visible,
clip-path ellipse(70% 90% at 72% 50%)
its ::before top -49.2px, left -200px, 310 x 713.8px, #083C7C
now top -10%, left -28%, 55% x 120%, #062D5C,
z-index 3, radius 50%
the ![]()
position relative, z-index 1
now position static, z-index auto, so the navy
ellipse paints over the picture as it does
on the Grade 10 page
At 767px and below, exactly as Grade 10: the picture becomes a relative
100%-wide 260px band that moves above the text (220px at 480px and below),
the ellipse comes off, and the clip-path is dropped.
THE THREE DECORATIONS
The dotted grid top-left and the two rings were turned off. Grade 10's
banner has none, and while they were showing they read as leftovers from a
different design rather than as part of this one. They are hidden, not
deleted - remove the one rule below and they come straight back.
============================================================================ */
/* ---------------------------------------------------------------- the banner */
.ecce-level1-hero {
/* background: #062d5c !important; */
font-family: Arial, Helvetica, sans-serif !important;
min-height: 455px !important;
box-sizing: border-box !important;
padding-left: max(4%, 50% - 690px) !important;
padding-right: 0 !important;
}
.ecce-level1-container {
width: 100% !important;
min-height: 455px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
}
.ecce-level1-content {
width: 52% !important;
position: relative !important;
z-index: 5 !important;
padding: 65px 40px 65px 0 !important;
color: #ffffff !important;
}
/* ------------------------------------------------------------------- badge */
.ecce-level1-badge {
width: fit-content !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 11px 20px !important;
margin-bottom: 25px !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
border-radius: 30px !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.3px !important;
backdrop-filter: blur(5px) !important;
}
.ecce-level1-badge i {
font-size: 16px !important;
line-height: 1.3 !important;
letter-spacing: 0.3px !important;
}
/* ------------------------------------- "CERTIFICATE PROGRAMME" and the title */
/* The eyebrow above the title. Grade 10's banner has no equivalent, so this
is given the eyebrow the rest of the site uses - 12px, wide tracking, in
the same #A9C7FF the title's second half uses. */
.ecce-level1-label {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: #a9c7ff !important;
margin-bottom: 10px !important;
}
.ecce-level1-content h1 {
font-family: Roboto, Arial, sans-serif !important;
font-size: 40px !important;
font-weight: 800 !important;
line-height: 1.08 !important;
letter-spacing: -1px !important;
text-transform: uppercase !important;
color: #ffffff !important;
text-align: left !important;
margin: 0 !important;
}
.ecce-level1-content h1 span {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
color: #a9c7ff !important;
}
/* "Early Childhood Care and Education" - the line under the title */
.ecce-level1-content h2 {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -0.5px !important;
color: #ffffff !important;
margin: 8px 0 0 !important;
}
/* ---------------------------------------------------------------- the rule */
.ecce-level1-line {
width: 36px !important;
height: 3px !important;
margin: 24px 0 20px !important;
background: #ffffff !important;
border-radius: 10px !important;
}
/* --------------------------------------------------------- the description */
.ecce-level1-content > p {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
letter-spacing: 0.2px !important;
color: rgba(255, 255, 255, 0.9) !important;
text-align: left !important;
max-width: 650px !important;
margin-top: 0 !important;
margin-bottom: 30px !important;
}
/* ------------------------------------- the duration pill and the button */
.ecce-level1-duration {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.3px !important;
color: #ffffff !important;
}
.ecce-level1-duration i {
font-size: 15px !important;
letter-spacing: 0.3px !important;
}
.ecce-level1-btn {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.3px !important;
color: #062d5c !important;
}
/* --------------------------------------------------------- the photograph */
.ecce-level1-image {
position: static !important;
width: 58% !important;
height: auto !important;
align-self: stretch !important;
overflow: visible !important;
z-index: auto !important;
clip-path: ellipse(70% 90% at 72% 50%) !important;
}
.ecce-level1-image::before {
content: "" !important;
position: absolute !important;
top: -10% !important;
left: -28% !important;
width: 55% !important;
height: 120% !important;
z-index: 3 !important;
border-radius: 50% !important;
background: #062d5c !important;
}
.ecce-level1-image img {
position: static !important;
z-index: auto !important;
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
}
/* ------------------------------------------------------- the decorations */
.ecce-level1-dots,
.ecce-level1-circle-top,
.ecce-level1-circle-bottom {
display: none !important;
}
/* ============================================================================
THE SAME LADDER GRADE 10 USES
============================================================================ */
@media screen and (max-width: 1399px) {
.ecce-level1-content > p {
font-size: 16px !important;
line-height: 1.75 !important;
}
}
@media screen and (max-width: 1199px) {
.ecce-level1-hero,
.ecce-level1-container {
min-height: 430px !important;
}
.ecce-level1-hero {
padding-left: max(3%, 50% - 690px) !important;
}
.ecce-level1-badge {
gap: 9px !important;
padding: 10px 18px !important;
margin-bottom: 22px !important;
font-size: 15px !important;
}
.ecce-level1-badge i {
font-size: 15px !important;
}
.ecce-level1-content h1 {
font-size: 40px !important;
line-height: 1.08 !important;
letter-spacing: -1px !important;
}
.ecce-level1-content h2 {
font-size: 22px !important;
}
}
@media screen and (max-width: 991px) {
.ecce-level1-hero,
.ecce-level1-container {
min-height: 390px !important;
}
.ecce-level1-content {
width: 55% !important;
padding: 50px 25px 50px 0 !important;
}
.ecce-level1-badge {
gap: 8px !important;
padding: 9px 17px !important;
margin-bottom: 20px !important;
font-size: 14px !important;
line-height: 1.35 !important;
}
.ecce-level1-badge i {
font-size: 14px !important;
}
.ecce-level1-content h1 {
font-size: 36px !important;
line-height: 1.1 !important;
letter-spacing: -0.8px !important;
}
.ecce-level1-content h2 {
font-size: 20px !important;
}
.ecce-level1-line {
margin: 18px 0 15px !important;
}
.ecce-level1-content > p {
font-size: 16px !important;
line-height: 1.65 !important;
}
.ecce-level1-image {
width: 57% !important;
}
}
@media screen and (max-width: 767px) {
.ecce-level1-hero {
min-height: auto !important;
background: #062d5c !important;
padding-left: max(5%, 50% - 690px) !important;
}
.ecce-level1-container {
min-height: auto !important;
flex-direction: column !important;
align-items: stretch !important;
}
.ecce-level1-content {
order: 2 !important;
width: 100% !important;
padding: 38px 25px 50px !important;
}
.ecce-level1-badge {
gap: 8px !important;
padding: 8px 15px !important;
margin-bottom: 18px !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
.ecce-level1-badge i {
font-size: 13px !important;
}
.ecce-level1-content h1 {
font-size: 34px !important;
line-height: 1.08 !important;
letter-spacing: -0.8px !important;
}
.ecce-level1-content h2 {
font-size: 18px !important;
}
.ecce-level1-content > p {
font-size: 15px !important;
line-height: 1.6 !important;
max-width: 100% !important;
}
.ecce-level1-image {
position: relative !important;
top: auto !important;
right: auto !important;
order: 1 !important;
width: 100% !important;
height: 260px !important;
clip-path: none !important;
}
.ecce-level1-image::before {
display: none !important;
}
}
@media screen and (max-width: 575px) {
.ecce-level1-badge {
gap: 7px !important;
padding: 7px 13px !important;
margin-bottom: 16px !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
.ecce-level1-badge i {
font-size: 12px !important;
}
.ecce-level1-content h1 {
font-size: 30px !important;
line-height: 1.1 !important;
letter-spacing: -0.6px !important;
}
.ecce-level1-content h2 {
font-size: 17px !important;
}
.ecce-level1-content > p {
font-size: 14px !important;
line-height: 1.6 !important;
}
}
@media screen and (max-width: 480px) {
.ecce-level1-hero {
padding-left: max(4%, 50% - 690px) !important;
}
.ecce-level1-badge {
gap: 6px !important;
padding: 6px 12px !important;
margin-bottom: 14px !important;
font-size: 11px !important;
line-height: 1.4 !important;
}
.ecce-level1-badge i {
font-size: 11px !important;
}
.ecce-level1-content {
padding: 32px 20px 42px !important;
}
.ecce-level1-content h1 {
font-size: 29px !important;
}
.ecce-level1-line {
width: 30px !important;
height: 3px !important;
margin: 16px 0 !important;
}
.ecce-level1-image {
height: 220px !important;
}
}
@media screen and (max-width: 400px) {
.ecce-level1-content h1 {
font-size: 29px !important;
line-height: 1.1 !important;
letter-spacing: -0.4px !important;
}
}
/* ============================================================================
THE LIGHT RULE UNDER THE PICTURE ON MOBILE
----------------------------------------------------------------------------
At 767px and below the picture becomes a 260px band across the top of the
banner and the Grade 10 page draws a 6px #A9C7FF line along the bottom of
it, which is what separates the band from the navy below.
Grade 10 puts that border on .secondary-image-circle, a wrapper inside
.secondary-banner-image. There is no such wrapper here - the ![]()
sits
directly in .ecce-level1-image - so the border goes on .ecce-level1-image
itself. It is the same element at the same 260px, and box-sizing is already
border-box from the site reset, so the border sits inside the 260px and the
band does not grow to 266px.
============================================================================ */
@media screen and (max-width: 767px) {
.ecce-level1-image {
box-sizing: border-box !important;
border-bottom: 6px solid #a9c7ff !important;
}
}
/* ============================================================================
THE THREE BODY SECTIONS PUT ON THE HEADER AND FOOTER WIDTHS
----------------------------------------------------------------------------
The header and the footer both run on the site width ladder -
width 92%, max-width 1380px, margin-left and margin-right auto
94% 1199px and below
90% 767px and below
92% 480px and below
- which is what puts their content 29.6px in from the left edge and 29.7px
in from the right at a 1000px viewport, and 1380px wide on a wide screen.
The three sections below the banner were not on it. They were set at a flat
5% each side, so every one of them sat inside the header and footer rather
than level with them. Measured at a 1000px viewport:
header and footer content 29.6 .... 955.3 925.7 wide
About The Programme 49.2 .... 935.5 886.3 wide 19.7 in each side
Certificate in ECCE 49.2 .... 935.5 886.3 wide 19.7 in each side
Subject Structure 49.2 .... 935.5 886.3 wide 19.7 in each side
All three now run on the same ladder as the header and the footer, so their
left edges and their right edges land on the header's left and right edges
at every width.
THE BANNER IS NOT TOUCHED
.ecce-level1-container is left alone. It already measures 29.5px on the
left, on the header logo's left edge, and runs to the full width of the
page on the right so the photograph can bleed - which is exactly what the
Grade 10 banner does, to the tenth of a pixel.
Only width and the two side margins are named here. Nothing inside any of
the three sections is affected, and their vertical margins are untouched.
============================================================================ */
.ecce-about-section .ecce-about-container,
.ecce-level-section .ecce-level-container,
.ecce-subject-section .ecce-subject-container {
width: 92% !important;
max-width: 1380px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media screen and (max-width: 1199px) {
.ecce-about-section .ecce-about-container,
.ecce-level-section .ecce-level-container,
.ecce-subject-section .ecce-subject-container {
width: 94% !important;
}
}
@media screen and (max-width: 767px) {
.ecce-about-section .ecce-about-container,
.ecce-level-section .ecce-level-container,
.ecce-subject-section .ecce-subject-container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.ecce-about-section .ecce-about-container,
.ecce-level-section .ecce-level-container,
.ecce-subject-section .ecce-subject-container {
width: 92% !important;
}
}
/* ============================================================================
CORRECTION - THE ABOUT SECTION IS .ecce-about, NOT .ecce-about-section
----------------------------------------------------------------------------
Two of the three landed and one did not:
Certificate in ECCE 29.5 .... 952.5 dL 0.0 dR 0.0 OK
Subject Structure 29.5 .... 952.5 dL 0.0 dR 0.0 OK
About The Programme 49.1 .... 932.9 dL 19.6 dR 19.6 still out
The selector above named .ecce-about-section as the section. The section
is called .ecce-about - there is no -section on it, the other two have it
and this one does not - so that one selector matched nothing at all and the
about container kept its flat 5% margins.
Repeating the ladder under the name that is actually in the markup. Same
four widths, same 1380px ceiling, same auto margins.
============================================================================ */
.ecce-about .ecce-about-container {
width: 92% !important;
max-width: 1380px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media screen and (max-width: 1199px) {
.ecce-about .ecce-about-container {
width: 94% !important;
}
}
@media screen and (max-width: 767px) {
.ecce-about .ecce-about-container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.ecce-about .ecce-about-container {
width: 92% !important;
}
}
/* ============================================================================
THE HERO BACKGROUND - THE DECLARATION ABOVE IS COMMENTED OUT
----------------------------------------------------------------------------
The background line in the hero rule further up this file reads
/* background: #062d5c !important; * /
with the comment markers in it. It was written live - the banner measured
rgb(6,45,92) when that block went in - and it is commented now. It was not
done here, and nothing in this session comments a declaration out, so it has
been left exactly as found rather than edited.
The consequence is that the banner is the right navy only on small screens.
The 767px tier further down still carries a live background, so at 767px and
below the banner is #062D5C and above it the page's original #083C7C comes
back:
above 767px background rgb(8, 60, 124) #083C7C
767px and below background rgb(6, 45, 92) #062D5C
Measured live at 1000px before this block:
Grade 10 rgb(6, 45, 92)
ECCE Level 1 rgb(8, 60, 124)
The declaration is put back below, at every width, so the banner is the
Grade 10 navy on every screen. Nothing is deleted - the commented line stays
where it is and this sits after it.
Also restated here because it sits in the same rule and is the other half
of the same colour pair:
.ecce-level1-btn lettering #083C7C -> #062D5C
============================================================================ */
.ecce-level1-hero {
background: #062d5c !important;
}
.ecce-level1-btn {
color: #062d5c !important;
}
/* ============================================================================
#062D5C IS NOT A BANNER BACKGROUND - PUT BACK ON EACH PAGE ITS OWN NAVY
----------------------------------------------------------------------------
Grade 10's #062D5C was carried across with the rest of that banner - the
type, the rule, the description, the ellipse over the photograph - and the
background went with it. That was over-reach. The background is each page's
own and stays that way.
Rule from here on: the banner background is never changed to #062D5C, on
these pages or on any page that comes next. Type sizes, weights, tracking,
line heights, the widths and the shape of the photograph are still matched
to Grade 10; only the background colour is left alone.
---------------------------------------------------------------------------
WHAT IS PUT BACK
ECCE Level 1 #062D5C -> #083C7C its own
ECCE Level 2 #062D5C -> #083C7C its own
Grade 12 ≤767px #062D5C -> #062F67 its own
Grade 12 needs this because its own navy is #062F67 at every width, but the
767px tier written when its banner was matched was left carrying #062D5C -
so that page had one navy on a desktop and another on a phone.
---------------------------------------------------------------------------
THE OVERLAY OVER THE PHOTOGRAPH GOES WITH IT
.ecce-level1-image::before is the navy ellipse that draws the curve on the
left of the picture. It is the same colour as the banner behind it, which
is the only reason it is invisible - all it does is cut the picture away to
the shape of the banner beside it.
Left at #062D5C against a #083C7C banner it stops being invisible and shows
as a hard dark band down the left of the banner. That is not hypothetical,
it is what happened between the two steps that changed this page and it is
what was reported. The overlay goes back to #083C7C with the banner, so the
curve still reads.
The button's lettering goes back for the same reason - it was #083C7C.
Nothing else in either stylesheet is touched. Every rule written earlier
stays where it is, including the #062D5C declarations this overrides; they
are simply superseded by what comes after them.
============================================================================ */
.ecce-level1-hero {
background: #083c7c !important;
}
.ecce-level1-image::before {
background: #083c7c !important;
}
.ecce-level1-btn {
color: #083c7c !important;
}
@media screen and (max-width: 767px) {
.ecce-level1-hero {
background: #083c7c !important;
}
}
/* ============================================================================
SECTION PADDING - THE SAME ABOVE AND BELOW
----------------------------------------------------------------------------
The rule from here on: every section carries the same padding above its
content and below it. Measured across the three ECCE pages before this
block, twenty-seven declarations, and not one of them was level - every
single one had more room underneath than above:
.ecce-level-section 30/35 28/32 25/30 25/30 22/27
.ecce-subject-section 55/65 45/55 40/45 35/40
The bottom is brought up to the top at each width, so the top value - the
one that was already right - is what both sides now use. Nothing grows and
nothing is cut; each section simply loses the extra few pixels it was
carrying underneath.
.ecce-about was already 55/55 and is not named here. The banner carries no
padding at all and is not named either.
.ecce-level-section {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
@media screen and (max-width: 1199px) {
.ecce-level-section {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}
@media screen and (max-width: 991px) {
.ecce-level-section {
padding-top: 25px !important;
padding-bottom: 25px !important;
}
}
@media screen and (max-width: 767px) {
.ecce-level-section {
padding-top: 25px !important;
padding-bottom: 25px !important;
}
}
@media screen and (max-width: 575px) {
.ecce-level-section {
padding-top: 22px !important;
padding-bottom: 22px !important;
}
}
.ecce-subject-section {
padding-top: 55px !important;
padding-bottom: 55px !important;
}
@media screen and (max-width: 991px) {
.ecce-subject-section {
padding-top: 45px !important;
padding-bottom: 45px !important;
}
}
@media screen and (max-width: 767px) {
.ecce-subject-section {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
@media screen and (max-width: 575px) {
.ecce-subject-section {
padding-top: 35px !important;
padding-bottom: 35px !important;
}
}
/* ============================================================================
THE NAVY ELLIPSE OVER THE PHOTOGRAPH, BACK ON AT 768px AND ABOVE
----------------------------------------------------------------------------
The page's own stylesheet switches this overlay off part-way down - there
is a `display: none` on it in a media query - and that was fine when the
photograph was a plain rectangle. It is not fine now: above 767px the
photograph is cut by an ellipse, and between 768px and that breakpoint the
ellipse was cutting the picture with nothing laid over it, which leaves the
left edge of the photograph cut to a shape against a background of a
different colour instead of being drawn by the banner's own navy.
Measured on ECCE Level 2 at a 912px viewport with the ellipse active and
the overlay gone: ::before background rgba(0, 0, 0, 0)
The overlay is put back from 768px up, which is where Grade 10 has it -
Grade 10's own rule hides it at 767px and below and nowhere else. The 767px
tier in the block above still turns it off, so the stacked layout on a
phone is unchanged.
============================================================================ */
.ecce-level1-image::before {
display: block !important;
}
/* ============================================================================
SECTION PADDING - THE SAME ABOVE AND BELOW
----------------------------------------------------------------------------
The rule from here on: every section carries the same padding above its
content and below it. Measured across the three ECCE pages before this
block, twenty-seven declarations, and not one of them was level - every
single one had more room underneath than above:
.ecce-level-section 30/35 28/32 25/30 25/30 22/27
.ecce-subject-section 55/65 45/55 40/45 35/40
The bottom is brought up to the top at each width, so the top value - the
one that was already right - is what both sides now use. Nothing grows and
nothing is cut; each section simply loses the extra few pixels it was
carrying underneath.
.ecce-about was already 55/55 and is not named here. The banner carries no
padding at all and is not named either.
.ecce-level-section {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
@media screen and (max-width: 1199px) {
.ecce-level-section {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}
@media screen and (max-width: 991px) {
.ecce-level-section {
padding-top: 25px !important;
padding-bottom: 25px !important;
}
}
@media screen and (max-width: 767px) {
.ecce-level-section {
padding-top: 25px !important;
padding-bottom: 25px !important;
}
}
@media screen and (max-width: 575px) {
.ecce-level-section {
padding-top: 22px !important;
padding-bottom: 22px !important;
}
}
.ecce-subject-section {
padding-top: 55px !important;
padding-bottom: 55px !important;
}
@media screen and (max-width: 991px) {
.ecce-subject-section {
padding-top: 45px !important;
padding-bottom: 45px !important;
}
}
@media screen and (max-width: 767px) {
.ecce-subject-section {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
@media screen and (max-width: 575px) {
.ecce-subject-section {
padding-top: 35px !important;
padding-bottom: 35px !important;
}
}
/* ============================================================================
THE NAVY ELLIPSE OVER THE PHOTOGRAPH, BACK ON AT 768px AND ABOVE
----------------------------------------------------------------------------
The page's own stylesheet switches this overlay off part-way down - there
is a `display: none` on it in a media query - and that was fine when the
photograph was a plain rectangle. It is not fine now: above 767px the
photograph is cut by an ellipse, and between 768px and that breakpoint the
ellipse was cutting the picture with nothing laid over it, which leaves the
left edge of the photograph cut to a shape against a background of a
different colour instead of being drawn by the banner's own navy.
Measured on ECCE Level 2 at a 912px viewport with the ellipse active and
the overlay gone: ::before background rgba(0, 0, 0, 0)
The overlay is put back from 768px up, which is where Grade 10 has it -
Grade 10's own rule hides it at 767px and below and nowhere else. The 767px
tier in the block above still turns it off, so the stacked layout on a
phone is unchanged.
============================================================================ */
.ecce-level1-image::before {
display: block !important;
}
/* ============================================================================
SUBJECT STRUCTURE - THE TABLE BODY AT 16px
----------------------------------------------------------------------------
Level 2 was put to 16px already. This brings the other two onto the same
size, so all three ECCE pages read the same.
Level 1 27 body cells at 15px / 21.75px
Level 2 36 body cells at 16px / 25.6px already done
Level 3 18 body cells at 15px / 21px
16px is the size the rest of the site's body copy and tables are held at.
PINNED AT EVERY WIDTH
No smaller step at 767px or below. The site's body copy is held at 16px all
the way down rather than following the type scale's 15px and 14px phone
steps, so a table of subjects does not get harder to read on the screen it
is most likely to be read on. Nothing below 16px is set here.
THE HEADER ROW IS NOT TOUCHED
The three header cells stay where they are - Level 1 at 15px, Level 2 at
17px, Level 3 at 18px, all weight 700 and white. They are headings, not
copy, and each is already larger than the body it sits over. They are also
three different sizes on the three pages, which is left as it is rather than
changed without being asked; one declaration would even them up.
The numbered circles in the first column stay at 13px in a 25px circle. A
marker, not text to be read, and 13px is the right size for a digit in a
circle that size.
Cell padding, row striping, column widths and the table's own height are
untouched. Rows get taller on their own, because the text in them is taller.
============================================================================ */
.ecce-subject-section .ecce-subject-table td {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 16px !important;
line-height: 1.6 !important;
letter-spacing: normal !important;
font-weight: 400 !important;
}
/* ============================================================================
SECTION PADDING - THE SAME ABOVE AND BELOW
----------------------------------------------------------------------------
The rule from here on: every section carries the same padding above
its content and below it, at every width.
Measured across the three ECCE pages before this, twenty-seven
declarations, and not one of them was level - every single one had
more room underneath than above:
.ecce-level-section 30/35 28/32 25/30 25/30 22/27
.ecce-subject-section 55/65 45/55 40/45 35/40
The bottom is brought up to the top at each width, so the top value -
the one that was already right - is what both sides now use. Nothing
grows and nothing is cut; each section simply loses the few extra
pixels it was carrying underneath.
.ecce-about was already 55/55 and is not named here. The banner
carries no padding at all and is not named either.
THIS BLOCK IS WRITTEN AGAIN BECAUSE THE EARLIER ONE NEVER PARSED
The padding block appended before this one opened its header comment
and never closed it - there was no closing delimiter, so the rules
below were read as comment text and thrown away. Nothing failed and
nothing looked wrong: the stylesheet loaded, the banner and the widths
and the photograph all worked, and the section simply carried the old
25px/30px and 45px/55px as if nothing had been asked for. The rules were
in the file and in the bytes the server sent, and were not in the
browser's stylesheet at all.
It was caught by asking the browser to list what it had actually
parsed - 200 top-level rules, the two padding rules simply absent,
while the rule written immediately after them was present.
The earlier block is left exactly where it is. This one closes its own
comment and repeats the same values.
============================================================================ */
.ecce-level-section {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
@media screen and (max-width: 1199px) {
.ecce-level-section {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}
@media screen and (max-width: 991px) {
.ecce-level-section {
padding-top: 25px !important;
padding-bottom: 25px !important;
}
}
@media screen and (max-width: 767px) {
.ecce-level-section {
padding-top: 25px !important;
padding-bottom: 25px !important;
}
}
@media screen and (max-width: 575px) {
.ecce-level-section {
padding-top: 22px !important;
padding-bottom: 22px !important;
}
}
.ecce-subject-section {
padding-top: 55px !important;
padding-bottom: 55px !important;
}
@media screen and (max-width: 991px) {
.ecce-subject-section {
padding-top: 45px !important;
padding-bottom: 45px !important;
}
}
@media screen and (max-width: 767px) {
.ecce-subject-section {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
@media screen and (max-width: 575px) {
.ecce-subject-section {
padding-top: 35px !important;
padding-bottom: 35px !important;
}
}
/* ============================================================================
ECCE LEVEL 1: THE BANNER PHOTOGRAPH RESTORED ON A PHONE
---------------------------------------------------------------------------
ONE DECLARATION. display, on one selector, below 768px. No font, no
colour, no background, no border, no radius, no width, no height, no
margin, no padding, no position, no inset, no clip-path, no overflow,
no object-fit. The photograph, its src, its alt, the badge, the heading,
the label and the paragraph are not touched. No markup is touched.
--------------------------------------------------------------------------
THE FAULT, MEASURED LIVE AT 390px AND 320px
.ecce-level1-image 374.4 x 214.0 order 1 above the text
::before display block <<< should be none
::before position absolute top -21.3% left -104.8px
::before 205.9 x 256.8 border-radius 50% background #083c7c
Painted over the photograph, that navy ellipse is 55.0% of the picture's
width and 116.7% of its height - it is taller than the photograph it
lies on, and it runs off the left edge of the screen. Only 45% of the
photograph is left uncovered, which is the shape in the screenshot: a
navy blob eating the left of the banner with the picture in a crescent
beside it.
--------------------------------------------------------------------------
WHY IT IS PAINTING AT ALL
Each of these three stylesheets already hides it on a phone. Level 1 at
3879, Level 2 at 3867, Level 3 at 3937, each inside
@media screen and (max-width: 767px), each with display:none !important:
..ecce-level1-image::before { display: none !important; }
That rule is correct and it is winning nothing. Two blocks higher up in
the same file - Level 1 at 4292 and again at 4395, Level 2 at 4308 and
again at 4411, Level 3 at 4233 - set the same selector back to block:
..ecce-level1-image::before { display: block !important; }
with NO media query around them, so they apply at every width. Their
heading claims they are for 768px and above; they were written without
the query and so they reach all the way down. Being later in the file
and carrying the same importance, they beat the 767px rule on source
order at every phone width. That is my own error, and it is what put the
navy ellipse on the banner.
--------------------------------------------------------------------------
THE ONE DECLARATION
@media screen and (max-width: 767px)
..ecce-level1-image::before { display: none !important; }
Same selector and same importance as the unguarded block, and later in
the file, so it wins on source order - the same way the 3879 rule was
meant to win. 767px is where this page's own stylesheet stacks the
banner (flex-direction: column) and where its own display:none rule
already sits, so the breakpoint is the page's, not a new one.
The overlay element is not removed. It is switched off, which is what the
767px rule above already does for it, so above 768px it comes back
unchanged and the side-by-side desktop banner is untouched.
--------------------------------------------------------------------------
WHAT THE PHOTOGRAPH BECOMES
The whole picture, uncropped by the overlay. The box is already
width:100% / height:260px at 767px and 220px at 480px, clip-path:none
and position:relative, all set by the page at 3869 - Level 1 - and its
twins on the other two pages. The image is 1717x916, a ratio of 1.874,
and the box it fills is 374.4 x 214.0, a ratio of 1.749, so object-fit:
cover crops the picture by about 7% off the width and distorts nothing.
That is the crop a full-bleed banner photograph is meant to take.
This is the arrangement the reference page already uses below 991px,
where .mpb-image-wrap is given border-radius:0 - decoration off, the
photograph whole, nothing painted over it.
--------------------------------------------------------------------------
NOT TOUCHED
The photograph, its src and its alt. The banner's own navy, which stays
#083c7c as the page already has it. The height ladder, the order, the
widths. The badge, the programme label, the heading, the paragraph, the
two dot clusters and the two circles. Every section below the banner.
eccelevel1.php. Every other page and every other stylesheet.
============================================================================ */
/* ---- the navy ellipse stops painting over the photograph on a phone ---- */
/* An unguarded block above sets this selector back to display:block !important
with no media query around it, so the ellipse reaches every width and
covers 55%% of the picture at 390px - measured. The page's own 767px rule
already hides it; this is the same selector, the same importance, later in
the file, so the ellipse is off below 768px and unchanged above it. */
@media screen and (max-width: 767px) {
.ecce-level1-image::before {
display: none !important;
}
}
/* ============================================================================
ECCE LEVEL 1: THE BANNER PHOTOGRAPH RUNS TO BOTH EDGES ON A PHONE
---------------------------------------------------------------------------
FOUR DECLARATIONS, FOUR OF THEM SIZES. No font, no colour, no background,
no border, no radius, no shadow, no margin, no gap, no clip-path, no
object-fit. The photograph, its src and its alt are not touched. The
badge, the label, the heading, the paragraph and the duration chip are not
touched. No markup is touched.
--------------------------------------------------------------------------
THE FAULT, MEASURED LIVE IN PHONE-WIDTH IFRAMES
vw hero padL photo L navy left photo box img
390 15.5938px 15.59 15.59px 374.41x220 374.41x214
360 14.3906px 14.39 14.39px 345.61x220 345.61x214
320 12.7969px 12.80 12.80px 307.20x220 307.20x214
Identical on all three pages. Two separate faults, both of them the
banner's own navy showing where the photograph should be.
THE LEFT-HAND LINE
eccelevel1.css:3540 - Level 1, and the same line on the other two:
.ecce-level1-hero {
padding-left: max(4%%, 50%% - 690px) !important;
padding-right: 0 !important;
}
That gutter is unguarded, so it applies at every width. It is right on a
desktop, where it lines the hero text up with the header logo. Below
768px the banner stacks and the photograph becomes full width, and the
gutter then pushes the photograph 15.59px to the right of the banner's
left edge - while padding-right stays 0. That is why the stripe is on one
side only: 15.59px on the left, 0px on the right, measured.
THE BAND UNDER THE PHOTOGRAPH
The photograph sits 214.00px tall inside a box the page has declared
220px tall, so 6.00px of navy shows under it. The page gives the image
height:100%% !important at 3714 - Level 1 - and against this particular
box that percentage lands 6px short every single time. Measured, trying
six different ways:
height:100%% img 214.00 6px short
position absolute, inset 0 img 214.00 6px short
max-height:none img 214.00 6px short
min-height:100%%, max-height:none img 214.00 6px short
all four insets 0, width/height auto img 208.05 11.95px short
box height:auto img 199.73 6px short
It is not a cap - max-height:none changes nothing. Only stating the
height on the image itself closes it, and then the image is 220.00 in a
220.00 box with nothing showing on any side.
--------------------------------------------------------------------------
WHAT IS WRITTEN, AND WHY THE TWO HEIGHTS ARE RESTATED
@media screen and (max-width: 767px) {
.ecce-level1-hero { padding-left: 0; padding-right: 0; }
.ecce-level1-content { padding-left: max(4%, 50% - 690px); }
.ecce-level1-image img { height: 260px; }
}
@media screen and (max-width: 480px) {
.ecce-level1-image img { height: 220px; }
}
260px and 220px are not new numbers. They are the page's own: 3869 gives
the box height:260px below 768px and 3944 gives it 220px below 481px, and
the image is simply given the same two so it fills what the box already
is. They are written on one selector and match the box at both tiers.
--------------------------------------------------------------------------
WHERE THE BANNER TEXT LANDS, WHICH IS THE POINT
The gutter is not thrown away, it is moved. It comes off the hero - where
it was pushing the photograph about - and goes onto the content, which is
what it was written for. Measured on the header of the same page:
vw header logo at banner text was banner text now
390 15.59 (4.00%%) 35.59, 20px right 15.59 ON IT
360 14.41 (4.00%%) 34.39, 19.98 right 14.39 ON IT
320 12.80 (4.00%%) 32.80, 20.00 right 12.80 ON IT
The logo sits at 4.00%% of the viewport on every phone width, and the
banner text now sits at 4.00%% too - the two share one edge, which is
what the gutter expression has always been for. Before this the banner
text was a flat 20px right of the logo, because the gutter and the
content's own 20px/25px padding were both counting on top of each other.
The content keeps its own right-hand padding - 25px below 768px, 20px
below 481px, whichever the page already sets. Only padding-left is named.
--------------------------------------------------------------------------
ABOVE 768px NOTHING CHANGES
Every declaration is inside a max-width:767px or max-width:480px query,
so the side-by-side desktop banner, its elliptical crop and its navy
overlay keep exactly the measurements they have now.
--------------------------------------------------------------------------
SPECIFICITY
Every one of these lands on a rule that already carries !important, so
each carries it too, and each is later in the file than the rule it
supersedes: 3540's hero padding, 3835 and 3930's content padding, 3714's
image height. Same specificity throughout, so source order decides.
--------------------------------------------------------------------------
NOT TOUCHED
The photograph, its src, its alt. The banner's navy, which stays #083c7c.
The ellipse, already switched off below 768px by the block above this one
and left as it is above that. The height ladder on the box, the order, the
widths, the badge, the programme label, the heading, the paragraph, the
duration chip, the two dot clusters, the two rings, every section below
the banner. eccelevel1.php. Every other page and stylesheet.
============================================================================ */
/* ---- the photograph runs to both edges, and the text onto the header logo ---- */
/* The banner gutter at 3540 is unguarded, so below 768px it pushes the stacked
photograph 15.59px right of the banner's left edge while padding-right stays
0 - 15.59px of navy on one side only. The gutter comes off the hero and goes
onto the content, which is what it was written for: the header logo sits at
4.00% of the viewport at 390, 360 and 320, and the banner text now sits on
that same edge instead of 20px right of it.
Separately the image is 214.00px tall inside a 220.00px box, 6.00px of navy
under the photograph. height:100% lands 6px short of this box on every
attempt and max-height:none changes nothing, so the image is given the two
heights the page already gives the box - 260px at 3869, 220px at 3944. */
@media screen and (max-width: 767px) {
.ecce-level1-hero {
padding-left: 0 !important;
padding-right: 0 !important;
}
.ecce-level1-content {
padding-left: max(4%, 50% - 690px) !important;
}
.ecce-level1-image img {
height: 260px !important;
}
}
@media screen and (max-width: 480px) {
.ecce-level1-image img {
height: 220px !important;
}
}