/* ==========================================================================
ATBEF e-learning — landing redesign (2026-07)
Tokens + shared components layered on top of the existing --primary /
--secondary custom properties (injected per-tenant by base.html) and
Bootstrap 4's grid, which stay in place for pages this redesign doesn't
touch. Loaded LAST in on every page so it always wins the cascade.
========================================================================== */
/* Outfit/Karla are loaded via in base.html's (Step 4 below),
not @import here — @import blocks parallel download and delays first
paint; a lets the browser fetch it alongside the other stylesheets. */
:root {
--font-heading: 'Outfit', sans-serif;
--font-body: 'Karla', sans-serif;
--ink: #2B2620;
--ink-muted: #6B6357;
--surface: #FFFDF9;
--surface-alt: #FBF3E7;
--surface-alt: color-mix(in srgb, var(--primary) 6%, #FFFDF9);
--card-bg: #FFFFFF;
--border-soft: #EDE6DA;
--accent-amber: #F5A662;
--space-1: .5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 3rem;
--space-6: 4rem;
--space-7: 6rem;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
--shadow-sm: 0 2px 8px rgba(43, 38, 32, .06);
--shadow-md: 0 8px 24px rgba(43, 38, 32, .10);
--shadow-lg: 0 20px 48px rgba(43, 38, 32, .14);
--ease: cubic-bezier(.4, 0, .2, 1);
--duration-fast: 150ms;
--duration-base: 220ms;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
body {
font-family: var(--font-body);
color: var(--ink);
}
.section-warm h1, .section-warm h2, .section-warm h3,
.hero_copy h1,
.section-warm .section_title, .footer-warm_title, .verify-card_body h2 {
font-family: var(--font-heading);
color: var(--ink);
}
/* ---- Buttons ---- */
.btn-warm {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 48px;
padding: 0 1.75rem;
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
border: none;
cursor: pointer;
text-decoration: none;
transition: transform var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease),
background-color var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease);
}
.btn-warm-primary {
background: var(--primary);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn-warm-primary:hover,
.btn-warm-primary:focus-visible {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
color: #fff;
text-decoration: none;
}
.btn-warm-outline {
background: transparent;
color: var(--ink);
border: 2px solid var(--border-soft);
}
.btn-warm-outline:hover,
.btn-warm-outline:focus-visible {
border-color: var(--primary);
color: var(--primary);
text-decoration: none;
}
.btn-warm:focus-visible {
outline: 3px solid var(--accent-amber);
outline-offset: 2px;
}
.btn-warm-sm {
min-height: 40px;
padding: 0 1.25rem;
font-size: .9rem;
}
/* ---- Section rhythm ---- */
.section-warm {
padding: var(--space-7) 0;
}
.section-warm--tint {
background: var(--surface-alt);
}
.section_kicker {
display: inline-block;
font-family: var(--font-heading);
font-weight: 600;
font-size: .8rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: var(--space-1);
}
.section-warm .section_title_container .section_title {
font-size: 2rem;
font-weight: 700;
margin-bottom: var(--space-2);
}
@media (min-width: 992px) {
.section-warm .section_title_container .section_title { font-size: 2.5rem; }
}
/* ---- Cards ---- */
.card-warm {
background: var(--card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease);
}
.card-warm:hover,
.card-warm:focus-visible {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
/* ---- Header ---- */
.header-warm {
position: sticky;
top: 0;
z-index: 40;
background: var(--surface);
border-bottom: 1px solid transparent;
box-shadow: none;
transition: box-shadow var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.header-warm.scrolled {
top: 0;
box-shadow: var(--shadow-sm);
border-bottom-color: var(--border-soft);
}
.header-warm_bar {
padding: var(--space-2) 0;
}
.header-warm_logo {
display: flex;
align-items: center;
gap: .6rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.15rem;
color: var(--ink);
text-decoration: none;
}
.header-warm_logo:hover { color: var(--ink); text-decoration: none; }
.header-warm_logo img {
height: 40px;
width: 40px;
object-fit: contain;
border-radius: var(--radius-sm);
}
.header-warm_nav {
margin-left: auto;
margin-right: var(--space-3);
}
.header-warm_nav ul {
display: flex;
align-items: center;
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 0;
}
.header-warm_nav a {
display: inline-block;
padding: .5rem 1rem;
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-weight: 500;
font-size: .95rem;
color: var(--ink-muted);
text-decoration: none;
transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.header-warm_nav a:hover,
.header-warm_nav a:focus-visible {
background: var(--surface-alt);
color: var(--ink);
text-decoration: none;
}
.header-warm_nav li.is-active a {
background: var(--surface-alt);
color: var(--primary);
}
.header-warm_actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.header-warm_burger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
border: 1px solid var(--border-soft);
background: var(--surface);
color: var(--ink);
font-size: 1.1rem;
cursor: pointer;
}
@media (max-width: 991px) {
.header-warm_nav { display: none; }
.header-warm_burger { display: inline-flex; }
}
/* ---- Mobile slide-out menu ---- */
.menu-warm {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: min(320px, 85vw);
background: var(--surface);
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform var(--duration-base) var(--ease);
z-index: 60;
padding: var(--space-4) var(--space-3);
overflow-y: auto;
}
.menu-warm.active {
transform: translateX(0);
}
.menu-warm_close {
display: flex;
justify-content: flex-end;
margin-bottom: var(--space-3);
cursor: pointer;
}
.menu-warm_close div {
width: 22px;
height: 2px;
background: var(--ink);
}
.menu-warm_close div:first-child { transform: rotate(45deg) translate(2px, 2px); }
.menu-warm_close div:last-child { transform: rotate(-45deg) translate(2px, -2px); margin-top: -2px; }
.menu-warm_nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu-warm_nav li {
border-bottom: 1px solid var(--border-soft);
}
.menu-warm_nav a {
display: block;
padding: var(--space-2) 0;
font-family: var(--font-heading);
font-weight: 600;
color: var(--ink);
text-decoration: none;
}
.menu-warm_nav li.is-active a { color: var(--primary); }
/* ---- Newsletter bar ---- */
.newsletter-warm {
background: var(--primary);
padding: var(--space-4) 0;
}
.newsletter-warm_inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
.newsletter-warm_title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.2rem;
color: #fff;
}
.newsletter-warm_subtitle { color: rgba(255, 255, 255, .85); margin-top: .25rem; }
.newsletter-warm_form {
display: flex;
gap: .5rem;
flex: 1 1 380px;
max-width: 480px;
}
.newsletter-warm_form input[type=email],
.newsletter-warm_form input[type=text] {
flex: 1;
min-height: 48px;
border: none;
border-radius: var(--radius-md);
padding: 0 var(--space-2);
}
.newsletter-warm_form button {
min-height: 48px;
padding: 0 var(--space-3);
border: none;
border-radius: var(--radius-md);
background: #fff;
color: var(--primary);
font-family: var(--font-heading);
font-weight: 700;
cursor: pointer;
transition: transform var(--duration-fast) var(--ease);
}
.newsletter-warm_form button:hover { transform: translateY(-2px); }
@media (max-width: 575px) {
.newsletter-warm_inner { flex-direction: column; align-items: flex-start; }
.newsletter-warm_form { max-width: none; width: 100%; }
}
/* ---- Footer ---- */
.footer-warm {
background: var(--surface-alt);
padding: var(--space-6) 0 var(--space-3);
border-top: 1px solid var(--border-soft);
}
.footer-warm_top {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-4);
padding-bottom: var(--space-4);
}
@media (max-width: 767px) {
.footer-warm_top { grid-template-columns: 1fr; }
}
.footer-warm_logo {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.3rem;
color: var(--primary);
text-decoration: none;
}
.footer-warm_logo:hover { color: var(--primary); text-decoration: none; }
.footer-warm_brand p { color: var(--ink-muted); margin-top: var(--space-2); }
.footer-warm_app img { height: 36px; margin-top: var(--space-1); }
.footer-warm_social {
display: flex;
gap: var(--space-1);
list-style: none;
margin: var(--space-2) 0 0;
padding: 0;
}
.footer-warm_social a {
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
background: var(--card-bg);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-fast) var(--ease);
}
.footer-warm_social a:hover { transform: translateY(-2px); }
.footer-warm_title {
font-size: 1rem;
font-weight: 700;
margin-bottom: var(--space-2);
}
.footer-warm_col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-warm_col li { margin-bottom: var(--space-1); }
.footer-warm_col a { color: var(--ink-muted); text-decoration: none; }
.footer-warm_col a:hover { color: var(--primary); }
.footer-warm_bottom {
border-top: 1px solid var(--border-soft);
padding-top: var(--space-3);
text-align: center;
color: var(--ink-muted);
font-size: .9rem;
}
/* ---- Hero ---- */
.hero-warm {
position: relative;
}
.hero-warm .owl-item {
position: relative;
}
.hero_slide_bg {
position: relative;
height: 640px;
background-size: cover;
background-position: center;
}
.hero_slide_scrim {
position: absolute;
inset: 0;
top: 0;
height: 640px;
background: linear-gradient(180deg, rgba(43, 38, 32, .15) 0%, rgba(43, 38, 32, .55) 100%);
}
.hero_slide_content {
position: absolute;
inset: 0;
top: 0;
height: 640px;
display: flex;
align-items: center;
}
.hero_copy {
max-width: 640px;
color: #fff;
}
.hero_copy h1 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: var(--space-2);
color: #fff;
}
@media (min-width: 992px) {
.hero_copy h1 { font-size: 3rem; }
}
.hero_copy p {
font-size: 1.1rem;
margin-bottom: var(--space-3);
color: rgba(255, 255, 255, .92);
}
.hero_actions {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.hero-warm .btn-warm-outline {
border-color: rgba(255, 255, 255, .6);
color: #fff;
}
.hero-warm .btn-warm-outline:hover,
.hero-warm .btn-warm-outline:focus-visible {
border-color: #fff;
color: #fff;
}
.home_slider_nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .85);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: background-color var(--duration-fast) var(--ease);
}
.home_slider_nav:hover { background: #fff; }
.home_slider_prev { left: var(--space-2); }
.home_slider_next { right: var(--space-2); }
/* main_styles.css (loaded on this exact page, index.html) has a
`.home_slider_nav i { color: #fff; ... }` rule — specificity (0,1,1),
higher than `.home_slider_nav`'s inherited `color: var(--ink)` (0,1,0),
so it wins regardless of load order and would render the arrow icons
white on our near-white nav buttons (invisible). Match its specificity
with an explicit same-shape selector so ours wins the source-order tie. */
.home_slider_nav i {
color: var(--ink);
font-size: 1.1rem;
line-height: 1;
}
@media (max-width: 575px) {
.hero_slide_bg { height: 520px; }
.hero_slide_scrim, .hero_slide_content { top: 0; height: 520px; }
.hero_copy h1 { font-size: 1.6rem; }
}
/* ---- Feature / Program cards ---- */
.features-grid, .programs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-3);
margin-top: var(--space-4);
}
.feature-card, .program-card {
display: block;
text-decoration: none;
color: inherit;
overflow: hidden;
}
.feature-card:hover, .program-card:hover,
.feature-card:focus-visible, .program-card:focus-visible {
text-decoration: none;
color: inherit;
}
.feature-card {
padding: var(--space-3);
text-align: center;
}
.feature-card_icon {
width: 64px;
height: 64px;
margin: 0 auto var(--space-2);
border-radius: var(--radius-md);
background: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
}
.feature-card_icon img {
width: 32px;
height: 32px;
object-fit: contain;
}
/* `.feature_title`/`.feature_text`/`.course_title` are reused class names
(also used on feature_details.html, courses.html, program_description.html,
certificate.html, programs.html, program_details.html, and youth_center.html
— pages this redesign doesn't touch), so every rule here is scoped under
`.section-warm` — same pattern as Task 1's `.section_title` fix — so it
can't bleed onto those other pages, which don't wrap this content in
`.section-warm`. Without this, `.feature_title`/`.course_title` would also
render in the browser's default font instead of the new heading font,
since neither has any other rule (legacy or new) setting font-family. */
.section-warm .feature_title, .section-warm .course_title {
font-family: var(--font-heading);
color: var(--ink);
}
.section-warm .feature_text { color: var(--ink-muted); }
.program-card_image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.program-card_image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-base) var(--ease);
}
.program-card:hover .program-card_image img { transform: scale(1.04); }
.program-card_body { padding: var(--space-3); }
.program-card_cta {
display: inline-flex;
align-items: center;
gap: .35rem;
font-family: var(--font-heading);
font-weight: 600;
color: var(--primary);
font-size: .9rem;
}
/* ---- Certificate verification ---- */
.verify-card {
display: flex;
gap: var(--space-4);
align-items: flex-start;
padding: var(--space-5);
max-width: 760px;
margin: 0 auto;
}
.verify-card_icon {
flex: none;
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: var(--surface-alt);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}
.verify-card_body p { color: var(--ink-muted); margin-bottom: var(--space-3); }
.verify-form {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.verify-form_input {
flex: 1 1 260px;
min-height: 48px;
border-radius: var(--radius-md);
border: 1px solid var(--border-soft);
padding: 0 var(--space-2);
}
.modal-content.modal-warm { border-radius: var(--radius-lg); border: none; }
@media (max-width: 575px) {
.verify-card { flex-direction: column; padding: var(--space-3); }
}
/* ---- Blog teaser ---- */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-3);
margin-top: var(--space-4);
}
.blog-card {
display: block;
text-decoration: none;
color: inherit;
overflow: hidden;
}
.blog-card:hover, .blog-card:focus-visible { text-decoration: none; color: inherit; }
.blog-card_image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.blog-card_image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-base) var(--ease);
}
.blog-card:hover .blog-card_image img { transform: scale(1.04); }
/* `.event_title` (reused on the blog card heading) is only ever used on
index.html and the legacy `.event_title a`/`.event_title a:hover` rules
in main_styles.css target a nested `` this new markup no longer has
(the whole card is the link now) — so there's no cross-page bleed risk
here, unlike `.section_title`/`.feature_title`/`.course_title` earlier
in this plan. But it also has no rule anywhere setting its font, so
without this it would render in the browser default font instead of
the new heading font. Scoped under `.section-warm` anyway for
consistency with the rest of the plan's defensive pattern. */
.section-warm .event_title {
font-family: var(--font-heading);
color: var(--ink);
}
.blog-card_date {
position: absolute;
top: var(--space-2);
left: var(--space-2);
background: var(--surface);
border-radius: var(--radius-sm);
padding: .4rem .6rem;
text-align: center;
box-shadow: var(--shadow-sm);
font-family: var(--font-heading);
line-height: 1.1;
}
.blog-card_day { display: block; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.blog-card_month { display: block; font-size: .7rem; text-transform: uppercase; color: var(--ink-muted); }
.blog-card_body { padding: var(--space-3); }
.blog-card_body p { color: var(--ink-muted); }
/* ---- Fix: sticky header ancestor ----
main_styles.css sets `.super_container { overflow: hidden }`, and .super_container
is the direct parent of the sticky-positioned .header-warm on every page. An
overflow-hidden ancestor is a well-documented cause of position:sticky silently
failing. `overflow: clip` keeps the same visual clipping behavior (prevents
content bleeding outside the container) without establishing a scroll container,
so the sticky header can compute correctly against the viewport instead. */
.super_container {
overflow: clip;
}