/*==========================
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;
}
}
/* =====================================================
ACADEMIC COUNCIL BANNER
===================================================== */
.recognition-and-validity-banner {
width: 100%;
min-height: 300px;
display: flex;
align-items: stretch;
position: relative;
overflow: hidden;
background: #083C7C;
font-family: Arial, Helvetica, sans-serif;
}
/* =====================================================
LEFT CONTENT
===================================================== */
.recognition-and-validity-content {
width: 52%;
padding: 80px 6% 80px 8%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 5;
}
/* =====================================================
BADGE
===================================================== */
.recognition-and-validity-badge {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
margin-bottom: 25px;
border-radius: 30px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.20);
color: #FFFFFF;
font-size: 13px;
font-weight: 600;
letter-spacing: .4px;
}
.recognition-and-validity-badge i {
font-size: 15px;
}
/* =========================================================
LABEL
========================================================= */
.recognition-and-validity-label {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 18px;
margin-bottom: 25px;
border-radius: 30px;
background: rgba(83, 119, 205, 0.35);
border: 1px solid rgba(180, 204, 255, 0.35);
color: #ffffff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
}
.recognition-and-validity-label i {
font-size: 13px;
}
/* =========================================================
HEADING
========================================================= */
.recognition-and-validity-content h1 {
margin: 0;
max-width: 600px;
color: #ffffff;
font-size: clamp(42px, 4.5vw, 68px);
line-height: 1.08;
font-weight: 700;
letter-spacing: -1.5px;
}
.recognition-and-validity-content h1 span {
color: #a9c7ff;
}
/* =====================================================
LINE
===================================================== */
.recognition-and-validity-line {
width: 50px;
height: 3px;
margin: 25px 0 20px;
background: #FFFFFF;
border-radius: 5px;
}
/* =====================================================
DESCRIPTION
===================================================== */
.recognition-and-validity-content p {
max-width: 520px;
margin: 0;
color: rgba(255,255,255,.90);
font-size: 16px;
line-height: 1.75;
}
/* =====================================================
RIGHT IMAGE AREA
===================================================== */
.recognition-and-validity-image {
width: 48%;
min-height: 500px;
position: relative;
overflow: hidden;
}
/* =====================================================
PHOTO
===================================================== */
.recognition-and-validity-photo {
position: absolute;
inset: 0;
overflow: hidden;
/*
Simple professional curved transition
*/
clip-path: ellipse(
100% 100% at 100% 50%
);
background: #AFCBFF;
}
.recognition-and-validity-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform .7s ease;
}
/* =====================================================
HOVER
===================================================== */
.recognition-and-validity-banner:hover
.recognition-and-validity-photo img {
transform: scale(1.04);
}
/* =====================================================
SIMPLE LIGHT BORDER
===================================================== */
/* .recognition-and-validity-image::before {
content: "";
position: absolute;
z-index: 3;
left: -12px;
top: 0;
width: 24px;
height: 100%;
background: #AFCBFF;
border-radius: 50%;
} */
/* =====================================================
DECORATIVE DOTS
===================================================== */
.recognition-and-validity-banner::before {
content: "";
position: absolute;
left: 35px;
top: 35px;
width: 60px;
height: 60px;
background-image:
radial-gradient(
rgba(255,255,255,.45) 1.5px,
transparent 1.5px
);
background-size: 12px 12px;
opacity: .7;
z-index: 2;
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 991px) {
.recognition-and-validity-banner {
min-height: 430px;
}
.recognition-and-validity-content {
width: 52%;
padding: 60px 35px;
}
.recognition-and-validity-image {
width: 48%;
min-height: 430px;
}
.recognition-and-validity-content h1 {
font-size: 44px;
}
.recognition-and-validity-content p {
font-size: 14px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 767px) {
.recognition-and-validity-banner {
display: flex;
flex-direction: column;
min-height: auto;
}
.recognition-and-validity-content {
width: 100%;
min-height: 360px;
padding: 55px 25px 45px;
}
.recognition-and-validity-content h1 {
font-size: clamp(34px, 9vw, 46px);
}
.recognition-and-validity-content p {
font-size: 14px;
line-height: 1.65;
}
.recognition-and-validity-image {
width: 100%;
height: 300px;
min-height: 300px;
}
.recognition-and-validity-photo {
clip-path: none;
border-radius: 0;
}
.recognition-and-validity-image::before {
display: none;
}
.recognition-and-validity-banner::before {
top: 20px;
left: 20px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media (max-width: 480px) {
.recognition-and-validity-content {
min-height: 330px;
padding: 45px 20px 40px;
}
.recognition-and-validity-badge {
font-size: 10px;
padding: 7px 13px;
}
.recognition-and-validity-content h1 {
font-size: 32px;
}
.recognition-and-validity-content p {
font-size: 13px;
}
.recognition-and-validity-image {
height: 250px;
min-height: 250px;
}
}
/* =========================================================
MODERN CONTACT SECTION
========================================================= */
.modern-contact-section {
width: 100%;
padding: 70px 0 80px;
background:
radial-gradient(
circle at 0% 100%,
rgba(8, 103, 213, 0.08),
transparent 25%
),
radial-gradient(
circle at 100% 0%,
rgba(8, 103, 213, 0.06),
transparent 25%
),
#ffffff;
}
.modern-contact-container {
width: 100%;
max-width: 1250px;
margin: 0 auto;
padding: 0 25px;
}
/* =========================================================
HEADING
========================================================= */
.modern-contact-heading {
text-align: center;
margin-bottom: 45px;
}
.modern-contact-label {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
color: #0867d5;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
}
.modern-contact-label::before,
.modern-contact-label::after {
content: "";
width: 35px;
height: 1px;
background: #0867d5;
}
.modern-contact-heading h2 {
margin: 0 0 12px;
color: #083c7c;
font-size: 40px;
font-weight: 700;
line-height: 1.2;
}
.modern-contact-heading p {
max-width: 750px;
margin: 0 auto;
color: #526b86;
font-size: 16px;
line-height: 1.7;
text-align: center;
}
/* =========================================================
MAIN GRID
========================================================= */
.modern-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
align-items: stretch;
}
/* =========================================================
LEFT CONTACT CARD
========================================================= */
.modern-contact-card {
position: relative;
overflow: hidden;
background: #ffffff;
border: 1px solid #e2edf8;
border-radius: 20px;
box-shadow:
0 15px 45px rgba(8, 60, 124, 0.10);
}
/* =========================================================
BLUE HEADER
========================================================= */
.modern-contact-card-header {
position: relative;
display: flex;
align-items: center;
gap: 18px;
min-height: 125px;
padding: 25px 28px;
background:
linear-gradient(
135deg,
#083c7c 0%,
#0867d5 100%
);
color: #ffffff;
overflow: hidden;
}
.modern-contact-card-header::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -50px;
top: -75px;
border-radius: 50%;
border: 25px solid rgba(255,255,255,0.06);
}
.modern-header-icon {
position: relative;
z-index: 1;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.15);
font-size: 25px;
}
.modern-header-content {
position: relative;
z-index: 1;
}
.modern-header-content span {
display: block;
margin-bottom: 3px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
opacity: .85;
}
.modern-header-content h3 {
margin: 0 0 3px;
color: #ffffff;
font-size: 26px;
font-weight: 700;
}
.modern-header-content p {
margin: 0;
color: rgba(255,255,255,.85);
font-size: 14px;
text-align: left;
}
/* =========================================================
CONTACT BODY
========================================================= */
.modern-contact-body {
padding: 8px 28px 25px;
}
/* =========================================================
CONTACT ITEM
========================================================= */
.modern-contact-item {
position: relative;
display: flex;
align-items: center;
gap: 17px;
padding: 16px 0;
border-bottom: 1px solid #edf2f7;
transition: all .25s ease;
}
.modern-contact-item:hover {
padding-left: 5px;
}
.modern-contact-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #edf6ff;
color: #0867d5;
font-size: 19px;
transition: .25s ease;
}
.modern-contact-item:hover .modern-contact-icon {
background: #0867d5;
color: #ffffff;
}
.modern-contact-details {
flex: 1;
}
.modern-contact-details h4 {
margin: 0 0 4px;
color: #1d3047;
font-size: 18px;
font-weight: 700;
}
.modern-contact-details p {
margin: 0;
color: #60748b;
font-size: 14px;
line-height: 1.55;
text-align: left;
}
.modern-item-arrow {
color: #8aa4bd;
font-size: 14px;
transition: .25s ease;
}
.modern-contact-item:hover .modern-item-arrow {
color: #0867d5;
transform: translateX(3px);
}
/* =========================================================
OFFICE HOURS
========================================================= */
.modern-office-hours {
display: grid;
grid-template-columns: auto 1fr auto 1.3fr;
align-items: center;
gap: 15px;
margin-top: 20px;
padding: 18px;
border-radius: 16px;
background:
linear-gradient(
135deg,
#eef7ff,
#f5f9fd
);
border: 1px solid #dcebf9;
}
.modern-hours-icon {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
135deg,
#083c7c,
#0867d5
);
color: #ffffff;
font-size: 21px;
}
.modern-hours-title h4 {
margin: 0 0 4px;
color: #083c7c;
font-size: 17px;
font-weight: 700;
}
.modern-hours-title p {
margin: 0;
color: #60748b;
font-size: 12px;
line-height: 1.4;
text-align: left;
}
.modern-hours-divider {
width: 1px;
height: 55px;
background: #d6e5f3;
}
.modern-hours-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.modern-hours-row {
display: flex;
align-items: flex-start;
gap: 9px;
}
.modern-hours-row > i {
margin-top: 2px;
color: #0867d5;
font-size: 15px;
}
.modern-hours-row strong,
.modern-hours-row span {
display: block;
}
.modern-hours-row strong {
color: #1d3047;
font-size: 13px;
}
.modern-hours-row span {
margin-top: 2px;
color: #60748b;
font-size: 12px;
}
/* =========================================================
LOCATION CARD
========================================================= */
.modern-location-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
border: 1px solid #e2edf8;
border-radius: 20px;
box-shadow:
0 15px 45px rgba(8, 60, 124, 0.10);
}
/* =========================================================
LOCATION HEADER
========================================================= */
.modern-location-header {
display: flex;
align-items: center;
gap: 15px;
padding: 23px 25px;
background: #f4f9ff;
border-bottom: 1px solid #e3edf7;
}
.modern-location-icon {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #ffffff;
color: #0867d5;
font-size: 22px;
box-shadow:
0 5px 15px rgba(8,60,124,.08);
}
.modern-location-header > div:nth-child(2) {
flex: 1;
}
.modern-location-header span {
display: block;
margin-bottom: 2px;
color: #0867d5;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
}
.modern-location-header h3 {
margin: 0 0 2px;
color: #083c7c;
font-size: 24px;
font-weight: 700;
}
.modern-location-header p {
margin: 0;
color: #60748b;
font-size: 13px;
text-align: left;
}
/* =========================================================
DIRECTIONS BUTTON
========================================================= */
.modern-directions-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 16px;
flex-shrink: 0;
border-radius: 10px;
background: #083c7c;
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: .25s ease;
}
.modern-directions-btn:hover {
background: #0867d5;
color: #ffffff;
transform: translateY(-2px);
}
/* =========================================================
MAP
========================================================= */
.modern-map-wrapper {
flex: 1;
padding: 12px;
min-height: 470px;
}
.modern-map-wrapper iframe {
width: 100%;
height: 100%;
min-height: 445px;
display: block;
border: 0;
border-radius: 14px;
}
/* =========================================================
SUPPORT BAR
========================================================= */
.modern-support-bar {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 25px;
margin-top: 22px;
padding: 18px 30px;
border-radius: 18px;
background: #f2f8ff;
border: 1px solid #dcecfb;
box-shadow:
0 8px 25px rgba(8,60,124,.05);
}
.modern-support-item {
display: flex;
align-items: center;
gap: 13px;
}
.modern-support-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #e2f1ff;
color: #0867d5;
font-size: 18px;
}
.modern-support-item strong,
.modern-support-item span {
display: block;
}
.modern-support-item strong {
margin-bottom: 2px;
color: #083c7c;
font-size: 14px;
}
.modern-support-item span {
color: #60748b;
font-size: 12px;
}
.modern-support-divider {
width: 1px;
height: 40px;
background: #d6e5f2;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.modern-contact-grid {
grid-template-columns: 1fr;
}
.modern-map-wrapper {
min-height: 430px;
}
.modern-map-wrapper iframe {
min-height: 400px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 850px) {
.modern-support-bar {
grid-template-columns: 1fr;
gap: 15px;
}
.modern-support-divider {
display: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.modern-contact-section {
padding: 50px 0 60px;
}
.modern-contact-container {
padding: 0 16px;
}
.modern-contact-heading {
margin-bottom: 30px;
}
.modern-contact-heading h2 {
font-size: 32px;
}
.modern-contact-heading p {
font-size: 14px;
}
.modern-contact-card-header {
padding: 22px;
min-height: 110px;
}
.modern-header-icon {
width: 50px;
height: 50px;
font-size: 21px;
}
.modern-header-content h3 {
font-size: 22px;
}
.modern-contact-body {
padding: 5px 20px 20px;
}
.modern-contact-item {
gap: 13px;
padding: 15px 0;
}
.modern-contact-icon {
width: 44px;
height: 44px;
font-size: 17px;
}
.modern-contact-details h4 {
font-size: 16px;
}
.modern-contact-details p {
font-size: 13px;
}
.modern-item-arrow {
display: none;
}
/* OFFICE HOURS */
.modern-office-hours {
grid-template-columns: auto 1fr;
gap: 12px;
padding: 16px;
}
.modern-hours-icon {
width: 46px;
height: 46px;
}
.modern-hours-divider {
display: none;
}
.modern-hours-list {
grid-column: 1 / -1;
padding-top: 10px;
border-top: 1px solid #d6e5f3;
}
/* LOCATION */
.modern-location-header {
flex-wrap: wrap;
padding: 20px;
}
.modern-location-header h3 {
font-size: 22px;
}
.modern-directions-btn {
width: 100%;
margin-top: 5px;
}
.modern-map-wrapper {
min-height: 320px;
padding: 9px;
}
.modern-map-wrapper iframe {
min-height: 300px;
}
/* SUPPORT */
.modern-support-bar {
padding: 20px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.modern-contact-heading h2 {
font-size: 29px;
}
.modern-contact-heading p {
font-size: 13px;
}
.modern-contact-card,
.modern-location-card {
border-radius: 15px;
}
.modern-contact-card-header {
gap: 12px;
}
.modern-header-icon {
width: 46px;
height: 46px;
font-size: 19px;
}
.modern-header-content h3 {
font-size: 20px;
}
.modern-header-content p {
font-size: 12px;
}
.modern-contact-item {
align-items: flex-start;
}
.modern-contact-icon {
width: 42px;
height: 42px;
}
.modern-contact-details h4 {
font-size: 15px;
}
.modern-contact-details p {
font-size: 12px;
}
.modern-office-hours {
padding: 14px;
}
.modern-hours-title h4 {
font-size: 15px;
}
.modern-hours-title p {
font-size: 11px;
}
.modern-hours-row strong {
font-size: 12px;
}
.modern-hours-row span {
font-size: 11px;
}
.modern-map-wrapper {
min-height: 280px;
}
.modern-map-wrapper iframe {
min-height: 260px;
}
}
/* ============================================================================
CONTACT: THE INSIDE OF THE SECTIONS ON THE HEADER AND FOOTER LADDER,
AND THE BANNER'S DOT GRID HIDDEN
---------------------------------------------------------------------------
WIDTHS, THE BANNER'S GUTTER AND THE BANNER'S DOTS ONLY. NOT ONE FONT IS
TOUCHED - no font-family, font-size, font-weight, line-height,
letter-spacing or text-transform appears in any rule below. Nothing in
contact.php is touched either, and no other page's stylesheet is written
to.
MEASURED AT A 1000px VIEWPORT BEFORE THIS BLOCK
header .container-fluid L 29.6 R 955.3 w 925.7 logo L 29.6
.odlcf-cta-in L 29.6 R 955.3 w 925.7 dL 0.0 dR 0.0
.modern-contact-container L 0.0 R 984.8 w 984.8
984.8px / max-width 1250px, margin 0px/0px
dL -29.6 dR -29.5
It is the full width of the window. 29.6px PAST the header's edge on each
side - the same fault the four Membership pages had, and the same fix.
.modern-contact-grid L 25.0 w 934.8 the container's own 25px
first .modern-contact-card L 25.0 w 934.8 dL -4.6
DELTA banner text to the logo: +49.2px
--------------------------------------------------------------------------
1. THE BANNER'S DOTS, HIDDEN
contact.css line 1648, under a comment headed DECORATIVE DOTS, paints one
square of 60 by 60 pixels of small dots in the banner's top-left corner at
left 35px top 35px - a radial-gradient of a 1.5px dot on a transparent one,
on a 12px pitch, at .7 opacity. It is a pseudo-element, so there is nothing
in the PHP to keep and no class to find it by.
It is stopped with content:none, which is the only way to stop a
pseudo-element painting.
.recognition-and-validity-banner::before content none
Measured before this block, that pseudo-element reads content "" with the
radial-gradient still attached. Measured after, it reads content "none".
Its sibling rule at contact.css:1762, which only moves the same dot square
to left 20px top 20px below 767px, is left in place. It can no longer paint
anything, and it is not restated here.
--------------------------------------------------------------------------
2. THE BANNER'S GUTTER, 49.2px OFF THE LOGO'S EDGE
The banner's own type is left exactly as it is. What was wrong was where it
sat: the content column's left padding measures 78.775px at this width,
which is 8% of the section, against a logo at 29.6px.
.recognition-and-validity-content
padding-left max(4%, 50% - 690px)
3% at 1199 and below, 5% at 767, 4% at 480
4% of 1342 is 53.68, which is the logo's edge at a 1342px viewport, and 3%
of 984.8 is 29.54 against a logo at 29.6 here.
The gutter goes on the content column and not on the section, because the
picture column beside it is 48% of the section - 472.7px of it - and padding
on the section would shrink the photograph.
The page writes this element's padding with a shorthand at each of its own
breakpoints:
contact.css:1734 @media 767px padding 55px 25px 45px
contact.css:1779 @media 480px padding 45px 20px 40px
Those shorthands set padding-left too, so each of them is restated against
the gutter at the same boundary. Only the left is named - the top, the right
and the bottom of each of those two shorthands are the page's own and stand.
--------------------------------------------------------------------------
3. THE CONTAINER, ONTO THE HEADER'S LADDER
.modern-contact-container goes on the ladder from header.css lines 9213 to
9279 - 92% with a 1380px cap, then 94% at 1199 and below, 90% at 767 and
below, 92% at 480 and below - with its margins centred and its padding
zeroed. Its section gives up any horizontal padding so the container alone
decides the width.
WHY ITS PADDING MAY BE ZEROED HERE, AND MAY NOT ON overview.php
On overview.php the container IS the card - the white panel with the 0.8px
border - and zeroing its padding put the text against the border. That is a
fault I made there and corrected.
This container is not a card. Measured live, before this block:
background-color rgba(0, 0, 0, 0) transparent
border-top-width 0px no border
border-radius 0px no radius
box-shadow none
It is a bare wrapper. Its 25px padding is a gutter on its own children's
boxes, not an inset inside a panel, and the ladder replaces it. The two
things inside it keep their own boxes and their own padding:
.modern-contact-grid transparent, no border
.modern-support-bar rgb(242, 248, 255), 0.8px border, 18px radius
Neither is named in this block.
--------------------------------------------------------------------------
4. THE PADDING, WHICH WAS OUT BY TEN PIXELS
.modern-contact-section carries more space underneath than above, and the
bottom is the larger of the two at both of the page's own breakpoints:
contact.css:1807 base padding 70px 0 80px 70 / 80 out by 10
contact.css:2581 @media 767px padding 50px 0 60px 50 / 60 out by 10
Both have their bottom brought up to their top. The page's own top values
are the ones kept. There is no other rule in contact.css that sets padding
on this section or on this container.
This is found rather than asked for, and it is a padding value and not a
font.
--------------------------------------------------------------------------
NOT TOUCHED
No font, anywhere. The banner's background is not named - the banner on
this page already carries its own and it is left exactly as it is.
.recognition-and-validity-image::before and .recognition-and-validity-photo
are not named: the photo's clip is ellipse(100% 100% at 100% 50%) and the
sweep behind it is structure, not decoration.
.odlcf-strip measures 14px above and 0px below on every page of the site.
It is a shared footer component loaded by thirteen pages from
css/includes/footer.css, so it is not named here and not fixed here. It is
the one section on this page still out, and it needs a site-wide decision
rather than one.
.odlcf-cta, .odlcf-ds, .odlcf-st and .odlcf-dc are the shared footer
components. All four already measure dL 0.0 and dR 0.0 on this page.
============================================================================ */
/* --------------------------------------------- 1. the banner's dots */
.recognition-and-validity-banner::before {
content: none !important;
}
/* ------------------------------------------ 2. the banner's gutter */
.recognition-and-validity-content {
padding-left: max(4%, 50% - 690px) !important;
}
@media screen and (max-width: 767px) {
.recognition-and-validity-content {
padding-left: max(5%, 50% - 690px) !important;
}
}
@media screen and (max-width: 480px) {
.recognition-and-validity-content {
padding-left: max(4%, 50% - 690px) !important;
}
}
/* --------------------- 3. the section gives up its side padding */
.modern-contact-section {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ---------------------- 3. the container onto the header's ladder */
.modern-contact-container {
width: 92% !important;
max-width: 1380px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
@media screen and (max-width: 1199px) {
.modern-contact-container {
width: 94% !important;
}
}
@media screen and (max-width: 767px) {
.modern-contact-container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.modern-contact-container {
width: 92% !important;
}
}
/* ------------------------------------------- 4. equal padding */
.modern-contact-section {
padding: 70px 0 70px !important;
}
@media screen and (max-width: 767px) {
.modern-contact-section {
padding: 50px 0 50px !important;
}
}
/* ============================================================================
CONTACT: THE CARD HEADER'S THREE LINES, WHITE ON ITS OWN BLUE
---------------------------------------------------------------------------
THREE COLOURS AND NOTHING ELSE. No font-family, font-size, font-weight,
line-height, letter-spacing or text-transform is written below - not one
size or weight changes, and no background is changed. Nothing in
contact.php is touched, and no other page's stylesheet is written to.
WHAT THE SCREENSHOT SHOWS
The card header is a blue panel and its three lines are dark navy on it,
which is close to unreadable. Measured live:
.modern-contact-card-header
background-image linear-gradient(135deg,
rgb(8, 60, 124) 0%,
rgb(8, 103, 213) 100%)
WE'RE HERE FOR YOU rgb(8, 60, 124) on rgb(8, 60, 124)
Contact Information rgb(11, 31, 77) on a 135deg navy-to-blue
We'd love to hear... rgb(102, 112, 133) on the same gradient
WHY, AND IT IS NOT THE PAGE'S OWN FAULT
contact.css already asks for white, in three places:
.modern-header-content h3 color: #ffffff
.modern-header-content p color: rgba(255, 255, 255, 0.85)
.odlc-white-header color: #ffffff
Every one of those three lines carries an odlc- class as well, and
global-typography.css sets the colour on those classes with !important:
global-typography.css .odlc-section-eyebrow
color: rgb(8, 60, 124) !important
global-typography.css .odlc-section-title
color: rgb(11, 31, 77) !important
global-typography.css .odlc-body-text
color: rgb(102, 112, 133) !important
An !important declaration beats every normal declaration in the cascade,
whatever its specificity and whatever order the two files load in. So the
white contact.css asks for was overridden before this block, and the dark
colours won. The class name on the wrapper - odlc-white-header - records
that white was the intention all along.
THE THREE COLOURS, AND WHY EACH ONE
eyebrow #ffffff full white, 12px uppercase on 2px tracking.
At .85 white over this gradient it would read as
a washed-out tint; the tracked capitals need
the full value to hold their shape.
title #ffffff full white, 36px w700. This is the page's own
value - contact.css line for
.modern-header-content h3 already says #ffffff -
restored rather than chosen.
body rgba(255,255,255,.85) the page's own value for
.modern-header-content p, restored for the
same reason. The 15% is what lets the
gradient read through behind the sentence.
Nothing here is a new colour. All three are the ones already in this
stylesheet and already in this panel.
HOW THE WIN IS SECURED
Two things are needed and both are used. The selector is scoped to the
card header, so it is .modern-contact-card-header .odlc-section-title and
not the bare class - 0,2,0 against global-typography's 0,1,0, and it
cannot reach any other odlc-section-title on this page or any other.
And the declaration carries !important, because importance is compared
before specificity: a normal declaration loses to an !important one no
matter how specific it is. Matching importance is then decided by
specificity, and 0,2,0 beats 0,1,0.
The scoping is what keeps this safe. An unscoped !important white on
.odlc-section-title would turn every section title on the site white on
white, because that class is shared across pages and global-typography.css
is a shared file. This block names one element inside one card on one page.
--------------------------------------------------------------------------
THE BANNER'S DOTS ARE ALREADY GONE
You asked for both in one message. The dots were stopped in the block
before this one, by
.recognition-and-validity-banner::before content: none
and measured after as content "none" at 1342px. contact.css:1648 is the
only dot pattern on this page - a 60 by 60 square of 1.5px dots on a 12px
pitch at .7 opacity, at left 35px top 35px. It is a pseudo-element, so
stopping it is the only way to stop it; nothing was deleted and the rule
is still there to be seen.
The other radial-gradient in this stylesheet is not dots and is not named:
.modern-contact-section carries two soft washes, circle at 0% 100% and
circle at 100% 0%, both fading to fully transparent at 25%. They are the
pale blue bloom behind the cards and they are left exactly as they are.
--------------------------------------------------------------------------
NOT TOUCHED
No font property, anywhere. No background, no gradient, no border, no
radius, no shadow. The icon, which is already white on a 10% white tile at
50% radius, is not named. The card, the grid, the support bar, the
container, the banner and the shared footer components are not named.
============================================================================ */
/* ------------------------ the card header's three lines, in white */
/* The eyebrow takes full white: 12px uppercase on 2px tracking needs the
whole value to hold its shape against this gradient. */
.modern-contact-card-header .odlc-section-eyebrow {
color: #ffffff !important;
}
/* The title is the value contact.css already asked for on
.modern-header-content h3, which global-typography.css was overriding. */
.modern-contact-card-header .odlc-section-title {
color: #ffffff !important;
}
/* The sentence is the value contact.css already asked for on
.modern-header-content p - 15% transparent, so the gradient reads through. */
.modern-contact-card-header .odlc-body-text {
color: rgba(255, 255, 255, 0.85) !important;
}
/* ============================================================================
CONTACT: THE ROW ARROWS OFF, AND THE VALUES MADE CLICKABLE
---------------------------------------------------------------------------
Four declarations, three selectors. No font, no size, no weight, no line
height, no tracking, no background, no border, no width, no height, no
margin, no padding, no position, no gap. The arrow markup is not deleted, and
no text is restyled.
--------------------------------------------------------------------------
ONE: THE FOUR CHEVRONS
.modern-item-arrow display: none
There is one per row, four in all, each an
measuring 14.0 x 22.4px in #8AA4BD - measured live. They were the only thing
on the row that suggested it could be clicked, and nothing was behind them:
the rows carried no href, and the values were bare text inside no link
at all, measured.
Now that the values ARE links, an arrow pointing at them says nothing true
- the whole row is not clickable, only the number and the address are, and a
chevron on the row would overstate that. So they are switched off.
display:none rather than a removal, which is how decoration is handled
everywhere else on this site: the markup, the icon class and the colour all
stay, and deleting one declaration brings all four back.
--------------------------------------------------------------------------
TWO: THE LINKS
.modern-contact-details a colour: inherit
text-decoration: underline
text-underline-offset: 3px
and on focus-visible, a ring, so the link is reachable by keyboard.
The anchor has to be told to look like the text it sits in. A bare inside
.odlc-small-card-text picks up the site's link colour, which is not the
colour of the line above it, and a phone number that changes colour from the
heading it belongs to reads as a different kind of thing. colour: inherit
keeps it the colour of the paragraph.
The underline is what says "this is a link" without moving anything or
recolouring it. offset 3px keeps it off the descenders of a number and off
the tail of a letter. thick 2px on hover, and the same underline under a
keyboard focus ring drawn with outline, which needs no extra element.
--------------------------------------------------------------------------
THE THREE LINES ABOVE THE CARD ARE NOT TOUCHED
"WE'RE HERE FOR YOU", "Contact Information" and "We'd love to hear from
you" were measured at thirteen widths, 1440px down to 320px, and their left
edges are identical at every one of them:
vw eyebrow title body spread
1440 162.59 162.59 162.59 0.00px
1000 135.00 135.00 135.00 0.00px
849 139.47 139.47 139.47 0.00px
600 151.05 151.05 151.05 0.00px
390 96.39 96.39 96.39 0.00px
320 93.80 93.80 93.80 0.00px
They start on one straight line already, at every width. What looks like a
stagger is the ink, not the box: the eyebrow is letter-spaced - 2px on a
desktop, stepping down through 1.5px, 1px and 0.5px to 0.1px on a phone -
while the title and the body carry none, so the first letter of each sits a
fraction of a pixel inside its own line. That is a property of the
letterforms, not of the layout, and no padding or margin moves it without
pushing one line out of alignment with the other two. The tracking is left
alone; say the word if the eyebrow should lose it to make the edges read
optically flush.
--------------------------------------------------------------------------
NOT TOUCHED
The four icons, the four headings, the address text, the divider rules, the
card, the header band, its navy, the headset icon, the grid, the form, the
map block and every other section of the page. The two numbers are printed
exactly as they were - only the dialled form behind them lost its spaces and
its hyphen.
============================================================================ */
/* ---- the chevrons off the contact rows, and the values made clickable ---- */
/* Four measured 14.0 x 22.4px, the only thing on
the row that hinted it was clickable - and nothing was behind them, the values
were bare text in no link at all. The two numbers and the mailbox are now
tel: and mailto: anchors in contact.php, so a chevron on the row would
overstate it: only the number and the address are clickable, not the row.
display:none rather than a removal - the markup and the colour stay.
The anchors are told to look like the text they sit in: colour: inherit,
because a bare picks up the site link colour and would not match the
heading above it, and an underline set 3px clear, which is what says "link"
without moving or recolouring anything.
NOT the three lines in the banner above the card: measured at thirteen
widths from 1440px to 320px, the eyebrow, the title and the body all start on
the same x to 0.00px at every one. The apparent stagger is the ink, not the
box - the eyebrow is letter-spaced and the other two are not. */
.modern-item-arrow {
display: none !important;
}
.modern-contact-details a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
cursor: pointer;
}
.modern-contact-details a:hover {
text-decoration-thickness: 2px;
}
.modern-contact-details a:focus-visible {
outline: 2px solid #0D6EFD;
outline-offset: 3px;
border-radius: 2px;
}
.odlc-section-title {
font-family: Roboto, Arial, sans-serif !important;
font-size: 38px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.5px !important;
color: #0b1f4d !important;
margin: 0;
}