/*==========================
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-level3-hero {
width: 100%;
overflow: hidden;
position: relative;
font-family: Arial, Helvetica, sans-serif;
background: #083c7c;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.ecce-level3-container {
width: 100%;
min-height: 440px;
position: relative;
overflow: hidden;
display: flex;
align-items: stretch;
background: #083c7c;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.ecce-level3-content {
width: 54%;
position: relative;
z-index: 10;
padding: 82px 50px 70px 7%;
display: flex;
flex-direction: column;
justify-content: center;
}
/* =========================================================
BADGE
========================================================= */
.ecce-level3-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-level3-badge i {
font-size: 15px;
color: #ffffff;
}
/* =========================================================
PROGRAMME LABEL
========================================================= */
.ecce-level3-label {
position: relative;
z-index: 2;
margin-bottom: 10px;
color: #a9c7ff;
font-size: 16px;
font-weight: 700;
letter-spacing: 3px;
line-height: 1.4;
}
/* =========================================================
MAIN HEADING
========================================================= */
.ecce-level3-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-level3-content h1 span {
color: #ffffff;
}
/* Highlight LEVEL 1 */
.ecce-level3-content h1 {
color: #a9c7ff;
}
.ecce-level3-content h1 span {
color: #ffffff;
}
/* =========================================================
PROGRAMME NAME
========================================================= */
.ecce-level3-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-level3-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-level3-btn i {
font-size: 22px;
transition: transform .3s ease;
}
.ecce-level3-btn:hover {
background: #eaf2fc;
color: #083C7C;
}
.ecce-level3-btn:hover i {
transform: translateX(5px);
}
/* =========================================================
DURATION
========================================================= */
.ecce-level3-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-level3-duration i {
font-size: 20px;
color: #ffffff;
}
/* =========================================================
BLUE / WHITE DIVIDER
========================================================= */
.ecce-level3-line {
width: 45px;
height: 4px;
margin: 27px 0 25px;
background: #ffffff;
border-radius: 5px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.ecce-level3-content p {
max-width: 610px;
margin: 0;
color: #ffffff;
font-size: 18px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
RIGHT IMAGE
========================================================= */
.ecce-level3-image {
position: absolute;
top: 0;
right: 0;
width: 53%;
height: 100%;
overflow: hidden;
z-index: 2;
}
/* =========================================================
CURVED BLUE CUTOUT
========================================================= */
.ecce-level3-image::before {
content: "";
position: absolute;
z-index: 3;
left: -200px;
top: -8%;
width: 310px;
height: 116%;
background: #083c7c;
border-radius: 50%;
}
/* =========================================================
IMAGE
========================================================= */
.ecce-level3-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
position: relative;
z-index: 1;
}
/* =========================================================
TOP CIRCLES
========================================================= */
.ecce-level3-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-level3-circle-top::before {
content: "";
position: absolute;
inset: 18px;
border: 1px solid rgba(120, 169, 232, 0.35);
border-radius: 50%;
}
.ecce-level3-circle-top::after {
content: "";
position: absolute;
inset: 36px;
border: 1px solid rgba(120, 169, 232, 0.35);
border-radius: 50%;
}
/* =========================================================
DOT PATTERN
========================================================= */
.ecce-level3-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-level3-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-level3-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-level3-container {
min-height: 520px;
}
.ecce-level3-content {
padding-left: 6%;
padding-right: 35px;
}
.ecce-level3-content h1 {
font-size: 48px;
}
.ecce-level3-content p {
font-size: 17px;
}
.ecce-level3-image {
width: 54%;
}
}
/* =========================================================
TABLET
768px - 991px
========================================================= */
@media (max-width: 991px) {
.ecce-level3-container {
min-height: 460px;
}
.ecce-level3-content {
width: 53%;
padding:
60px
25px
55px
5%;
}
.ecce-level3-badge {
font-size: 13px;
padding: 11px 20px;
margin-bottom: 24px;
}
.ecce-level3-content h1 {
font-size: 42px;
letter-spacing: -0.5px;
}
.ecce-level3-content p {
font-size: 16px;
}
.ecce-level3-line {
margin: 20px 0;
}
.ecce-level3-image {
width: 55%;
}
.ecce-level3-image::before {
left: -120px;
}
}
/* =========================================================
MOBILE
576px - 767px
========================================================= */
@media (max-width: 767px) {
.ecce-level3-container {
min-height: auto;
display: flex;
flex-direction: column;
}
.ecce-level3-content {
width: 100%;
padding: 45px 24px 40px;
order: 1;
}
.ecce-level3-badge {
font-size: 12px;
padding: 10px 17px;
margin-bottom: 22px;
}
.ecce-level3-content h1 {
font-size: 34px;
line-height: 1.1;
}
.ecce-level3-content p {
font-size: 15px;
max-width: 100%;
}
.ecce-level3-line {
width: 42px;
height: 3px;
margin: 17px 0 15px;
}
.ecce-level3-image {
position: relative;
width: 100%;
height: 330px;
order: 2;
}
.ecce-level3-image::before {
display: none;
}
.ecce-level3-circle-top,
.ecce-level3-circle-bottom,
.ecce-level3-dots {
display: none;
}
}
/* =========================================================
SMALL MOBILE
BELOW 576px
========================================================= */
@media (max-width: 575px) {
.ecce-level3-content {
padding: 35px 18px 32px;
}
.ecce-level3-badge {
font-size: 11px;
padding: 9px 15px;
gap: 7px;
}
.ecce-level3-content h1 {
font-size: 30px;
line-height: 1.1;
}
.ecce-level3-content p {
font-size: 14px;
line-height: 1.5;
}
.ecce-level3-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;
text-align: justify;
color: #344b6b;
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
FIRST IMAGE UI + TWO YEAR TABLES
========================================================= */
.ecce-subject-section {
width: 100%;
padding: 38px 0 48px;
background: #f5f8fc;
font-family: Arial, Helvetica, sans-serif;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.ecce-subject-container {
width: min(1180px, 90%);
margin: 0 auto;
}
/* =========================================================
MAIN HEADING
========================================================= */
.ecce-subject-heading {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.ecce-subject-heading-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
color: #0877e8;
font-size: 30px;
flex-shrink: 0;
}
.ecce-subject-heading-content h2 {
margin: 0;
color: #0b3470;
font-size: 30px;
line-height: 1.2;
font-weight: 700;
}
.ecce-subject-heading-line {
display: block;
width: 30px;
height: 3px;
margin-top: 7px;
background: #0877e8;
border-radius: 5px;
}
/* =========================================================
YEAR HEADING
========================================================= */
.ecce-year-heading {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0 0 14px;
}
.ecce-year-heading h3 {
margin: 0;
color: #073d78;
font-size: 25px;
line-height: 1.3;
font-weight: 700;
}
.ecce-year-heading span {
color: #073d78;
font-size: 19px;
font-weight: 700;
}
.ecce-year-heading p {
margin: 0;
color: #073d78;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
}
/* =========================================================
TABLE
========================================================= */
.ecce-subject-table-wrapper {
width: 100%;
overflow: hidden;
background: #ffffff;
border: 1px solid #aec5df;
border-radius: 15px;
box-shadow:
0 8px 24px rgba(8, 60, 124, 0.08);
margin-bottom: 38px;
}
.ecce-subject-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #344b6b;
}
/* =========================================================
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: 20%;
}
.ecce-subject-table th:nth-child(3),
.ecce-subject-table td:nth-child(3) {
width: 60%;
}
/* =========================================================
TABLE HEADER
========================================================= */
.ecce-subject-table thead th {
height: 62px;
padding: 0 18px;
background: #064584;
color: #ffffff;
font-size: 17px;
line-height: 1.2;
font-weight: 700;
text-align: center;
vertical-align: middle;
border-right: 1px solid
rgba(255, 255, 255, 0.22);
}
.ecce-subject-table thead th:last-child {
border-right: none;
}
/* =========================================================
BOOK ICON
========================================================= */
.subject-title-heading {
position: relative;
padding-right: 65px !important;
}
.subject-title-heading i {
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.45);
font-size: 30px;
font-weight: normal;
}
/* =========================================================
TABLE BODY
========================================================= */
.ecce-subject-table tbody td {
height: 52px;
padding: 8px 18px;
font-size: 13px;
line-height: 1.4;
color: #344b6b;
vertical-align: middle;
border-right: 1px solid #c5d6e8;
border-bottom: 1px solid #c5d6e8;
background: #ffffff;
}
/* =========================================================
ALTERNATING ROWS
========================================================= */
.ecce-subject-table tbody tr:nth-child(even) td {
background: #edf3fa;
}
/* =========================================================
NUMBER CIRCLE
========================================================= */
.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;
line-height: 1;
font-weight: 700;
}
/* =========================================================
SUBJECT CODE
========================================================= */
.ecce-subject-table tbody td:nth-child(2) {
text-align: center;
}
/* =========================================================
SUBJECT TITLE
========================================================= */
.ecce-subject-table tbody td:nth-child(3) {
text-align: left;
color: #234b79;
}
/* =========================================================
REMOVE LAST BORDERS
========================================================= */
.ecce-subject-table tbody td:last-child {
border-right: none;
}
.ecce-subject-table tbody tr:last-child td {
border-bottom: none;
}
/* =========================================================
HOVER
========================================================= */
.ecce-subject-table tbody tr:hover td {
background: #e8f2ff;
}
/* =========================================================
SECOND YEAR SPACING
========================================================= */
.ecce-second-year {
margin-top: 2px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.ecce-subject-section {
padding: 32px 0 40px;
}
.ecce-subject-container {
width: 90%;
}
.ecce-subject-heading-content h2 {
font-size: 30px;
}
.ecce-year-heading h3 {
font-size: 21px;
}
.ecce-year-heading p {
font-size: 15px;
}
.ecce-subject-table {
min-width: 720px;
}
.ecce-subject-table thead th {
height: 56px;
font-size: 18px;
}
.ecce-subject-table tbody td {
height: 48px;
font-size: 15px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.ecce-subject-section {
padding: 28px 0 35px;
}
.ecce-subject-container {
width: 90%;
}
.ecce-subject-heading-content h2 {
font-size: 30px;
}
.ecce-year-heading {
flex-wrap: wrap;
gap: 5px;
}
.ecce-year-heading h3 {
font-size: 20px;
}
.ecce-year-heading p {
font-size: 15px;
}
.ecce-subject-table-wrapper {
overflow-x: auto;
}
.ecce-subject-table {
min-width: 700px;
}
.ecce-subject-table thead th {
font-size: 16px;
}
.ecce-subject-table tbody td {
font-size: 15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575px) {
.ecce-subject-section {
padding: 25px 0 30px;
}
.ecce-subject-container {
width: 92%;
}
.ecce-subject-heading-content h2 {
font-size: 29px;
}
.ecce-year-heading h3 {
font-size: 19px;
}
.ecce-year-heading p {
font-size: 14px;
}
.ecce-subject-table {
min-width: 650px;
}
.ecce-subject-table thead th {
height: 52px;
font-size: 15px;
padding: 0 12px;
}
.ecce-subject-table tbody td {
height: 46px;
padding: 7px 12px;
font-size: 14px;
}
.module-number {
width: 29px;
height: 29px;
font-size: 14px;
}
.subject-title-heading i {
right: 14px;
font-size: 24px;
}
}
/* Short duration badge */
.ecce-level3-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-level3-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 3 HERO PUT ON THE SECONDARY LEVEL - CLASS X HERO
----------------------------------------------------------------------------
The same treatment as ECCE Level 1 and ECCE Level 2, taken from the same
source: 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 all four pages load.
Level 3 is the same template again under the ecce-level3- prefix, and it
arrived in the same state.
NOTHING IN THE MARKUP WAS TOUCHED. Same words, same order, same elements.
ADVANCED DIPLOMA PROGRAMME, ECCE | LEVEL 3, Early Childhood Care and
Education, the description, the duration pill, the button, the three
decorations and the photograph are all still in eccelevel3.php exactly as
they were. Only the selectors below changed, from ecce-level2- to
ecce-level3-.
THE BACKGROUND IS NOT TOUCHED ON THIS PAGE
This page's banner navy is #083C7C and it stays #083C7C. The Grade 10 navy
is not carried across as a background on this page or on any page that comes
next. What is matched to Grade 10 is the type - sizes, weights, tracking,
line heights - the widths, the padding and the shape of the photograph. The
colour of the background is left alone.
The two places where the Level 2 version of this block carried #062D5C - the
navy ellipse over the photograph, and the lettering inside the button - are
#083C7C here instead, which is what this page already used, and which is
what keeps the ellipse invisible against the banner so that all it does is
draw the curve.
---------------------------------------------------------------------------
WHAT IT WAS, MEASURED AT A 912px VIEWPORT BEFORE THIS BLOCK
.ecce-level3-hero background rgb(8,60,124) left alone
min-height none -> 455px
padding-left 0 -> max(4%, 50% - 690px)
font-family Arial (kept)
.ecce-level3-container min-height 460px -> 455px
align-items stretch -> center
width 896.8px (full) -> 100%
.ecce-level3-content width 475.3px -> 52%
padding 60px 25px 55px 44.84px
-> 65px 40px 65px 0
That padding-left on the section is what fixes the alignment. On the Grade
10 page the hero title sits on the header logo's left edge. On this page the
three sections below the banner sat 17.9px inside the header and footer
content on each side. 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-level3-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, 1px rgba(153,190,255,.55) border, 11px
20px padding, 13px type on a 20.8px line, 24px below
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 3"
Grade 10's title is 40px at weight 800, -1px letter-spacing, uppercased,
with the second half in #A9C7FF. This one was 42px on a 44.1px line, -0.5px,
mixed case, and both halves white.
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.
"Early Childhood Care and Education" - the h2. 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, down to 17px on the
smallest phones. It was 25px.
"ADVANCED DIPLOMA PROGRAMME" - the eyebrow above the heading. Given the
eyebrow the rest of the site uses - 12px, wide tracking, the same #A9C7FF the
title's second half uses. It was 16px on 3px of tracking.
THE RULE UNDER THE HEADING
was 45 x 4px, 5px radius
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 16px on a 1.55 line, no letter-spacing, solid white,
capped at 610px.
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 keep their own shapes and are given the
badge's type - 15px, weight 700, 0.3px letter-spacing. The pill was 16px and
the button 14px, neither with any tracking.
THE PHOTOGRAPH
Grade 10's picture is not in a rounded box - it is cut by an ellipse and 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.
.ecce-level3-image position absolute, top 0, right 0, 493.2px wide,
height 573.4px, 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 -45.9px, left -120px, 310 x 665.1px
now top -10%, left -28%, 55% x 120%, z-index 3,
radius 50%, and #083C7C - this page's own navy,
which is what keeps it invisible against the
banner and turns into nothing but the curve
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 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. They are hidden, not deleted - remove the one rule below
and they come straight back.
============================================================================ */
/* ---------------------------------------------------------------- the banner */
.ecce-level3-hero {
/* background: #083c7c !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-level3-container {
width: 100% !important;
min-height: 455px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
}
.ecce-level3-content {
width: 52% !important;
position: relative !important;
z-index: 5 !important;
padding: 65px 40px 65px 0 !important;
color: #ffffff !important;
}
/* ------------------------------------------------------------------- badge */
.ecce-level3-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-level3-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-level3-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-level3-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-level3-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-level3-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-level3-line {
width: 36px !important;
height: 3px !important;
margin: 24px 0 20px !important;
background: #ffffff !important;
border-radius: 10px !important;
}
/* --------------------------------------------------------- the description */
.ecce-level3-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-level3-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-level3-duration i {
font-size: 15px !important;
letter-spacing: 0.3px !important;
}
.ecce-level3-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: #083c7c !important;
}
/* --------------------------------------------------------- the photograph */
.ecce-level3-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-level3-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: #083c7c !important;
}
.ecce-level3-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-level3-dots,
.ecce-level3-circle-top,
.ecce-level3-circle-bottom {
display: none !important;
}
/* ============================================================================
THE SAME LADDER GRADE 10 USES
============================================================================ */
@media screen and (max-width: 1399px) {
.ecce-level3-content > p {
font-size: 16px !important;
line-height: 1.75 !important;
}
}
@media screen and (max-width: 1199px) {
.ecce-level3-hero,
.ecce-level3-container {
min-height: 430px !important;
}
.ecce-level3-hero {
padding-left: max(3%, 50% - 690px) !important;
}
.ecce-level3-badge {
gap: 9px !important;
padding: 10px 18px !important;
margin-bottom: 22px !important;
font-size: 15px !important;
}
.ecce-level3-badge i {
font-size: 15px !important;
}
.ecce-level3-content h1 {
font-size: 40px !important;
line-height: 1.08 !important;
letter-spacing: -1px !important;
}
.ecce-level3-content h2 {
font-size: 22px !important;
}
}
@media screen and (max-width: 991px) {
.ecce-level3-hero,
.ecce-level3-container {
min-height: 390px !important;
}
.ecce-level3-content {
width: 55% !important;
padding: 50px 25px 50px 0 !important;
}
.ecce-level3-badge {
gap: 8px !important;
padding: 9px 17px !important;
margin-bottom: 20px !important;
font-size: 14px !important;
line-height: 1.35 !important;
}
.ecce-level3-badge i {
font-size: 14px !important;
}
.ecce-level3-content h1 {
font-size: 36px !important;
line-height: 1.1 !important;
letter-spacing: -0.8px !important;
}
.ecce-level3-content h2 {
font-size: 20px !important;
}
.ecce-level3-line {
margin: 18px 0 15px !important;
}
.ecce-level3-content > p {
font-size: 16px !important;
line-height: 1.65 !important;
}
.ecce-level3-image {
width: 57% !important;
}
}
@media screen and (max-width: 767px) {
.ecce-level3-hero {
min-height: auto !important;
background: #083c7c !important;
padding-left: max(5%, 50% - 690px) !important;
}
.ecce-level3-container {
min-height: auto !important;
flex-direction: column !important;
align-items: stretch !important;
}
.ecce-level3-content {
order: 2 !important;
width: 100% !important;
padding: 38px 25px 50px !important;
}
.ecce-level3-badge {
gap: 8px !important;
padding: 8px 15px !important;
margin-bottom: 18px !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
.ecce-level3-badge i {
font-size: 13px !important;
}
.ecce-level3-content h1 {
font-size: 34px !important;
line-height: 1.08 !important;
letter-spacing: -0.8px !important;
}
.ecce-level3-content h2 {
font-size: 18px !important;
}
.ecce-level3-content > p {
font-size: 15px !important;
line-height: 1.6 !important;
max-width: 100% !important;
}
.ecce-level3-image {
position: relative !important;
top: auto !important;
right: auto !important;
order: 1 !important;
width: 100% !important;
height: 260px !important;
clip-path: none !important;
}
.ecce-level3-image::before {
display: none !important;
}
}
@media screen and (max-width: 575px) {
.ecce-level3-badge {
gap: 7px !important;
padding: 7px 13px !important;
margin-bottom: 16px !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
.ecce-level3-badge i {
font-size: 12px !important;
}
.ecce-level3-content h1 {
font-size: 30px !important;
line-height: 1.1 !important;
letter-spacing: -0.6px !important;
}
.ecce-level3-content h2 {
font-size: 17px !important;
}
.ecce-level3-content > p {
font-size: 14px !important;
line-height: 1.6 !important;
}
}
@media screen and (max-width: 480px) {
.ecce-level3-hero {
padding-left: max(4%, 50% - 690px) !important;
}
.ecce-level3-badge {
gap: 6px !important;
padding: 6px 12px !important;
margin-bottom: 14px !important;
font-size: 11px !important;
line-height: 1.4 !important;
}
.ecce-level3-badge i {
font-size: 11px !important;
}
.ecce-level3-content {
padding: 32px 20px 42px !important;
}
.ecce-level3-content h1 {
font-size: 29px !important;
}
.ecce-level3-line {
width: 30px !important;
height: 3px !important;
margin: 16px 0 !important;
}
.ecce-level3-image {
height: 220px !important;
}
}
@media screen and (max-width: 400px) {
.ecce-level3-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-level3-image - so the border goes on .ecce-level3-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-level3-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-level3-container is left alone. It already measures 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 is the section's class here - it carries no -section, the other
two do - so the selector is written the way the markup actually reads.
============================================================================ */
.ecce-about .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 .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 .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 .ecce-about-container,
.ecce-level-section .ecce-level-container,
.ecce-subject-section .ecce-subject-container {
width: 92% !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-level3-image - so the border goes on .ecce-level3-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-level3-image {
box-sizing: border-box !important;
border-bottom: 6px solid #a9c7ff !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 38/45 32/38 28/35 25/30
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: 38px !important;
padding-bottom: 38px !important;
}
@media screen and (max-width: 991px) {
.ecce-subject-section {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
@media screen and (max-width: 767px) {
.ecce-subject-section {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}
@media screen and (max-width: 575px) {
.ecce-subject-section {
padding-top: 25px !important;
padding-bottom: 25px !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-level3-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 38/45 32/38 28/35 25/30
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: 38px !important;
padding-bottom: 38px !important;
}
@media screen and (max-width: 991px) {
.ecce-subject-section {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
@media screen and (max-width: 767px) {
.ecce-subject-section {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}
@media screen and (max-width: 575px) {
.ecce-subject-section {
padding-top: 25px !important;
padding-bottom: 25px !important;
}
}
/* ============================================================================
ECCE LEVEL 3: 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-level3-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-level3-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-level3-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-level3-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.
eccelevel3.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-level3-image::before {
display: none !important;
}
}
/* ============================================================================
ECCE LEVEL 3: 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
eccelevel3.css:3540 - Level 1, and the same line on the other two:
.ecce-level3-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-level3-hero { padding-left: 0; padding-right: 0; }
.ecce-level3-content { padding-left: max(4%, 50% - 690px); }
.ecce-level3-image img { height: 260px; }
}
@media screen and (max-width: 480px) {
.ecce-level3-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. eccelevel3.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-level3-hero {
padding-left: 0 !important;
padding-right: 0 !important;
}
.ecce-level3-content {
padding-left: max(4%, 50% - 690px) !important;
}
.ecce-level3-image img {
height: 260px !important;
}
}
@media screen and (max-width: 480px) {
.ecce-level3-image img {
height: 220px !important;
}
}