/* ============================================================
home.css — homepage-only styles
Loaded by index.php only, after style.min.css.
Why a separate file: assets/css/style.min.css is a minified
build artifact with no source in the repo. Editing it by hand
is unmaintainable and any future rebuild would discard the
change. See ai/13_IMPLEMENTATION_RULES.md §7.
Design tokens reused from style.min.css:
--color-primary #ff8e28
--color-dark #ff5f14
--color-cream-alt #faf7f2
--font-heading Laila, serif
--font-primary Poppins, sans-serif
============================================================ */
/* ------------------------------------------------------------
1. HERO
Replaces the six-slide carousel with a single static hero.
Desktop and tablet only — below 768px it is hidden and
`.banner-mobile-video` takes its place, so mobile opens with a
single banner instead of a hero stacked on top of the video.
Safe for SEO: the hero carries no heading tag (the brand line
is a div and the page's only H1 lives in the intro section
below), so nothing is hidden from mobile crawlers.
------------------------------------------------------------ */
.hero {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: clamp(460px, 66vh, 720px);
overflow: hidden;
background-color: #241708;
}
/* Background image layer. The ![]()
is used instead of a CSS
background so it stays preloadable and keeps its alt text. */
.hero-media {
position: absolute;
inset: 0;
z-index: 1;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Contrast layer. Keeps white text readable over the photograph
regardless of how bright the image is at that point. */
.hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(20, 12, 4, .58) 0%,
rgba(20, 12, 4, .50) 45%,
rgba(20, 12, 4, .72) 100%);
}
.hero-inner {
position: relative;
z-index: 2;
padding-top: 56px;
padding-bottom: 56px;
}
.hero-content {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
/* Visual brand title only — deliberately NOT a heading tag.
See ai/10_LANDING_PAGE_SPEC.md. */
.hero-brand {
font-family: var(--font-heading, Laila, serif);
font-weight: 700;
font-size: clamp(2rem, 5.6vw, 3.5rem);
line-height: 1.15;
color: #fff;
letter-spacing: .5px;
text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
margin: 0;
}
/* Rule under the brand title. The H1 lives in the main content,
not in the hero — see ai/10_LANDING_PAGE_SPEC.md. */
.hero-brand::after {
content: "";
display: block;
width: 64px;
height: 2px;
margin: 20px auto 0;
background: var(--color-primary, #ff8e28);
opacity: .85;
}
.hero-sub {
font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
line-height: 1.75;
color: rgba(255, 255, 255, .93);
margin: 18px auto 0;
max-width: 700px;
text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.hero .btn-wrapper {
margin-top: 28px;
}
/* Slightly larger primary CTA than the site default. */
.hero .theme-btn {
padding: 13px 34px;
font-size: 16px;
}
@media (max-width: 575.98px) {
.hero {
min-height: 440px;
}
.hero-inner {
padding-top: 44px;
padding-bottom: 44px;
}
.hero-sub {
line-height: 1.65;
}
}
/* Mobile shows one banner only: the video. `.banner-mobile-video`
is already switched to display:block at this breakpoint by
style.min.css, so the hero simply steps aside. */
@media screen and (max-width: 767px) {
.hero {
display: none;
}
}
/* ------------------------------------------------------------
2. QUICK COURSE NAVIGATION ROW
Six entry points sitting directly under the hero. Carries the
course links that the retired carousel slides used to hold.
------------------------------------------------------------ */
.course-nav {
background-color: var(--color-cream-alt, #faf7f2);
padding: 48px 0;
}
.course-nav-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 576px) {
.course-nav-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.course-nav-list {
grid-template-columns: repeat(3, 1fr);
}
}
/* The whole card is the , so every pixel of it is clickable —
icon, title and description included. */
.course-nav-item {
position: relative;
display: flex;
align-items: center;
gap: 16px;
height: 100%;
padding: 22px 22px 22px 20px;
background: #fff;
border: 1px solid rgba(53, 27, 4, .08);
border-radius: 14px;
box-shadow: 0 2px 10px rgba(53, 27, 4, .05);
text-decoration: none;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Brand-colour edge that wipes in on hover. */
.course-nav-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--color-primary, #ff8e28), var(--color-dark, #ff5f14));
transform: scaleY(0);
transform-origin: top;
transition: transform .28s ease;
}
.course-nav-item:hover,
.course-nav-item:focus-visible {
transform: translateY(-5px);
border-color: rgba(255, 142, 40, .55);
box-shadow: 0 14px 30px rgba(53, 27, 4, .14);
}
.course-nav-item:hover::before,
.course-nav-item:focus-visible::before {
transform: scaleY(1);
}
/* Keep the keyboard focus ring visible — the card is a link. */
.course-nav-item:focus-visible {
outline: 2px solid var(--color-primary, #ff8e28);
outline-offset: 3px;
}
/* Icon badge. Font Awesome 4.7 is already loaded site-wide, so this
adds no extra request. Icons are decorative and aria-hidden. */
.cn-icon {
flex: 0 0 46px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff3e6;
color: var(--color-primary, #ff8e28);
font-size: 19px;
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.course-nav-item:hover .cn-icon,
.course-nav-item:focus-visible .cn-icon {
background: var(--color-primary, #ff8e28);
color: #fff;
transform: scale(1.06);
}
.cn-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.cn-title {
font-family: var(--font-primary, Poppins, sans-serif);
font-weight: 600;
font-size: 15px;
line-height: 1.4;
color: var(--color-text-dark, #242323);
transition: color .25s ease;
}
.course-nav-item:hover .cn-title,
.course-nav-item:focus-visible .cn-title {
color: var(--color-dark, #ff5f14);
}
/* One-line description under each title. */
.cn-desc {
font-size: 12.5px;
font-weight: 500;
line-height: 1.45;
letter-spacing: .2px;
color: var(--color-text, #696969);
}
/* Arrow cue, drawn in CSS so it needs no extra markup. */
.cn-title::after {
content: "\203A";
display: inline-block;
margin-left: 7px;
font-size: 17px;
line-height: 1;
color: var(--color-primary, #ff8e28);
transform: translateX(0);
transition: transform .25s ease;
}
.course-nav-item:hover .cn-title::after,
.course-nav-item:focus-visible .cn-title::after {
transform: translateX(4px);
}
/* ------------------------------------------------------------
3. MAIN CONTENT SECTIONS (Phase 2)
------------------------------------------------------------ */
/* Section eyebrow. A small kicker above each heading, so sections
read as deliberate chapters rather than stacked blocks. Sits
inside the existing .heading-wrapper, which is already a column
flexbox, so it stacks above the heading with no layout change. */
.sec-eyebrow {
display: block;
font-family: var(--font-primary, Poppins, sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--color-primary, #ff8e28);
text-align: center;
margin-bottom: 10px;
}
/* Why Choose sets its heading left-aligned on desktop, so its
eyebrow follows suit. */
@media (min-width: 992px) {
.question2 .sec-eyebrow {
text-align: left;
}
}
/* Opening answer paragraph. Kept short and factual so search
engines and AI assistants can lift it as a direct answer. */
.intro-lead {
max-width: 900px;
margin: 0 auto 8px;
text-align: center;
font-size: clamp(1rem, 1.5vw, 1.0625rem);
line-height: 1.8;
color: var(--color-text, #696969);
}
.best-sec .intro-lead {
margin-bottom: 26px;
}
/* The founder quote. Was an , which skipped a heading level
under the H1 and put a pull-quote into the document outline.
It is now a ; these rules reproduce the previous
appearance exactly, including the vertical text on desktop. */
.about-box blockquote {
position: relative;
margin: 0;
writing-mode: vertical-rl;
max-height: 100%;
font-family: var(--font-heading, Laila, serif);
font-weight: 600;
font-size: var(--fs-lg);
font-style: italic;
line-height: 1.5;
letter-spacing: .3px;
text-align: center;
color: var(--color-text-dark, #242323);
}
@media screen and (max-width: 991px) {
.about-box blockquote {
font-size: var(--fs-base);
line-height: 1.4;
}
}
@media screen and (max-width: 767px) {
.about-box blockquote {
writing-mode: horizontal-tb;
max-height: none;
line-height: 1.5;
font-size: var(--fs-base);
}
}
/* Reason lists in "Why Choose" and "What Makes Rishikesh". */
.why-list {
list-style: none;
margin: 22px 0 0;
padding: 0;
}
.why-list li {
position: relative;
padding: 0 0 0 30px;
margin-bottom: 14px;
line-height: 1.75;
color: var(--color-text, #696969);
}
.why-list li strong {
color: var(--color-text-dark, #242323);
font-weight: 600;
}
/* Tick marker drawn in CSS so it needs no icon font or markup. */
.why-list li::before {
content: "";
position: absolute;
left: 4px;
top: .62em;
width: 11px;
height: 6px;
border-left: 2px solid var(--color-primary, #ff8e28);
border-bottom: 2px solid var(--color-primary, #ff8e28);
transform: rotate(-45deg);
}
@media (min-width: 768px) {
.why-list-2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 34px;
}
}
.best-sec .why-list {
margin-bottom: 28px;
}
/* Certificates, folded in from the retired certificate section.
That section had a dark background; this one is light, so the
.text-white class was dropped and the note is set in body colour. */
.teacher .cert-bottom>p {
text-align: center;
max-width: 820px;
margin: 0 auto 22px;
color: var(--color-text, #696969);
}
/* Closing line that keeps links to the school-certificate courses
until Phase 3 gives them their own cards. */
.course-also {
max-width: 900px;
margin: 34px auto 0;
padding-top: 22px;
border-top: 1px solid #f0e3d6;
text-align: center;
font-size: 15px;
line-height: 1.8;
color: var(--color-text, #696969);
}
/* ------------------------------------------------------------
4. SECTION POLISH
Small refinements so the page reads as designed sections rather
than stacked Bootstrap rows. No brand colours or fonts change.
------------------------------------------------------------ */
/* "What Makes Rishikesh" sits between two tinted sections, so it
stays white for contrast and gets a soft warm glow instead. */
.best-sec {
position: relative;
overflow: hidden;
}
.best-sec::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(255, 142, 40, .10), transparent 70%);
pointer-events: none;
z-index: 0;
}
.best-sec>.container {
position: relative;
z-index: 1;
}
/* Wide feature image in the Rishikesh section. */
.best-img-wrap {
margin: 8px 0 26px;
}
.best-img-wrap img {
border-radius: 18px;
box-shadow: 0 14px 34px rgba(53, 27, 4, .13);
}
/* Give the two course cards room to breathe now that they are a
plain grid rather than a carousel slide. */
.teacher .teacher-main {
margin-top: 34px;
}
/* Certification badge on each course card.
Two variants, and the distinction is deliberate — a student must
never mistake a school certificate for Yoga Alliance registration.
Wording is fixed by ai/13_IMPLEMENTATION_RULES.md §3. */
.cert-badge {
display: inline-flex;
align-items: center;
gap: 7px;
align-self: center;
margin: 2px 0 12px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid transparent;
font-family: var(--font-primary, Poppins, sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: .4px;
text-transform: uppercase;
white-space: nowrap;
}
/* Yoga Alliance registered — brand orange, the affirmative state. */
.cert-badge-ya {
border-color: rgba(255, 142, 40, .38);
background: #fff3e6;
color: var(--color-dark, #ff5f14);
}
.cert-badge-ya .fa {
font-size: 13px;
color: var(--color-primary, #ff8e28);
}
/* School certificate — deliberately neutral, not a second brand
colour, so it cannot be misread as an equivalent accreditation. */
.cert-badge-school {
border-color: rgba(53, 27, 4, .18);
background: #f4f1ec;
color: #5b544c;
}
.cert-badge-school .fa {
font-size: 13px;
color: #8b8078;
}
/* Plain-language note under the school certificate badge. */
.cert-disclaimer {
display: block;
margin: -6px 0 12px;
font-size: 12px;
font-style: italic;
line-height: 1.5;
color: #7a7169;
text-align: center;
}
/* Short course description on each card. */
.course-desc {
margin: 0 0 16px;
font-size: 14.5px;
line-height: 1.7;
color: var(--color-text, #696969);
text-align: center;
}
@media (max-width: 400px) {
.cert-badge {
white-space: normal;
text-align: center;
line-height: 1.4;
}
}
/* Body copy rhythm across the new sections. */
.best-sec .best-main>p,
.question2 .ques-left>p {
line-height: 1.85;
}
/* ------------------------------------------------------------
5. PHASE 3 SECTIONS
Backgrounds alternate against the sections around them:
courses (.teacher) cream
why-become white
retreats cream tint
specialised white
------------------------------------------------------------ */
/* --- Why Become a Certified Yoga Teacher --------------------- */
.why-become {
position: relative;
background: var(--color-white, #fff);
overflow: hidden;
}
.why-become::after {
content: "";
position: absolute;
left: -140px;
bottom: -140px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 142, 40, .09), transparent 70%);
pointer-events: none;
}
.why-become>.container {
position: relative;
z-index: 1;
}
/* Feature blocks. Not course cards — a lighter treatment on purpose,
but the same radius, shadow language and hover as everything else. */
.value-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin: 34px 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 640px) {
.value-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.value-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.value-card {
padding: 28px 24px;
background: #fff;
border: 1px solid rgba(53, 27, 4, .08);
border-radius: 16px;
box-shadow: 0 2px 12px rgba(53, 27, 4, .05);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.value-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 142, 40, .45);
box-shadow: 0 14px 30px rgba(53, 27, 4, .12);
}
.value-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 16px;
border-radius: 14px;
background: linear-gradient(135deg, #fff3e6, #ffe4cc);
color: var(--color-primary, #ff8e28);
font-size: 21px;
transition: background .25s ease, color .25s ease;
}
.value-card:hover .value-icon {
background: linear-gradient(135deg, var(--color-primary, #ff8e28), var(--color-dark, #ff5f14));
color: #fff;
}
.value-title {
margin: 0 0 8px;
font-family: var(--font-heading, Laila, serif);
font-size: 18px;
font-weight: 600;
line-height: 1.35;
color: var(--color-text-dark, #242323);
}
.value-text {
margin: 0;
font-size: 14.5px;
line-height: 1.75;
color: var(--color-text, #696969);
}
/* Conversion band closing the section. */
.value-cta {
margin-top: 38px;
padding: 30px 24px;
border-radius: 18px;
background: linear-gradient(135deg, #fff7ef, var(--color-cream-alt, #faf7f2));
border: 1px solid rgba(255, 142, 40, .22);
text-align: center;
}
.value-cta p {
margin: 0;
font-family: var(--font-heading, Laila, serif);
font-size: clamp(1.05rem, 2vw, 1.3rem);
color: var(--color-text-dark, #242323);
}
.value-cta .btn-wrapper {
margin-top: 16px;
}
/* --- Yoga Retreats ------------------------------------------- */
.retreats-sec {
background: linear-gradient(180deg, var(--color-cream-alt, #faf7f2) 0, #fff7ef 100%);
}
/* Retreat grid.
Scoped entirely to .retreat-grid — the shared .course-slide-grid
used by the course sections is untouched.
The inherited grid goes straight from 1 column to 3 with no tablet
step, so the 2-column step is added here.
< 576px 1 column (inherited)
>= 576px 2 columns (new tablet step)
>= 1200px 4 columns — all four retreats comparable without scrolling
>= 1400px 4 columns, roomier gap and taller images
Card design, typography, colours and buttons are unchanged. Only the
column count, gap, container width and image proportion vary. */
@media (min-width: 576px) {
.retreat-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 760px;
margin: 0 auto;
gap: 20px;
}
}
@media (min-width: 992px) {
.retreat-grid {
max-width: 900px;
gap: 24px;
}
}
/* Four across. At the xl container (1140px) each card is ~265px wide;
at xxl (1320px) ~307px. The image height drops with the column so
the cards stay in proportion instead of becoming tall and narrow. */
@media (min-width: 1200px) {
.retreat-grid {
grid-template-columns: repeat(4, 1fr);
max-width: none;
gap: 22px;
}
.retreat-grid .course-card-img {
height: 200px;
}
.retreat-grid .course-card-body {
padding-left: 18px;
padding-right: 18px;
}
}
@media (min-width: 1400px) {
.retreat-grid {
gap: 26px;
}
.retreat-grid .course-card-img {
height: 225px;
}
.retreat-grid .course-card-body {
padding-left: 22px;
padding-right: 22px;
}
}
/* Equal heights with the CTA pinned to the bottom, so the four cards
line up for comparison even when descriptions differ in length.
.course-card already stretches; this aligns the button row. */
.retreat-grid .course-card-body .btn-wrapper {
margin-top: auto;
}
/* --- Specialised Programs ------------------------------------ */
.specialised-sec {
background: var(--color-white, #fff);
}
/* ------------------------------------------------------------
6. WHAT YOU'LL LEARN
A two-column split rather than another card grid, so the page
changes rhythm after three consecutive grid sections.
------------------------------------------------------------ */
.learn-sec {
background: linear-gradient(180deg, var(--color-cream-alt, #faf7f2) 0, #fff 100%);
}
@media (min-width: 992px) {
.learn-aside {
position: sticky;
top: 100px;
}
}
.learn-aside .heading-wrapper {
margin-bottom: 14px;
}
.learn-aside .main-heading,
.learn-aside .sec-eyebrow {
text-align: left;
}
/* The decorative divider under headings is centred by default; the
aside heading is left-aligned, so the divider follows it. */
.learn-aside .heading-wrapper::after {
background-position: left center;
}
.learn-aside>p {
line-height: 1.85;
color: var(--color-text, #696969);
}
.learn-aside-img {
margin: 22px 0;
}
.learn-aside-img img {
width: 100%;
border-radius: 18px;
box-shadow: 0 14px 32px rgba(53, 27, 4, .14);
}
.learn-aside-note {
font-size: 13.5px;
font-style: italic;
color: #7a7169;
}
/* Learning areas as icon rows, not boxed cards — the distinction
from the course/value grids is deliberate. */
.learn-list {
margin: 0;
padding: 0;
list-style: none;
}
.learn-item {
display: flex;
gap: 18px;
padding: 22px 22px 22px 20px;
border-radius: 14px;
background: transparent;
border: 1px solid transparent;
transition: background-color .25s ease, border-color .25s ease;
}
.learn-item+.learn-item {
margin-top: 2px;
}
.learn-item:hover {
background: #fff;
border-color: rgba(255, 142, 40, .28);
box-shadow: 0 8px 22px rgba(53, 27, 4, .07);
}
.learn-icon {
flex: 0 0 48px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, #fff3e6, #ffe4cc);
color: var(--color-primary, #ff8e28);
font-size: 19px;
}
.learn-title {
margin: 0 0 5px;
font-family: var(--font-heading, Laila, serif);
font-size: 17px;
font-weight: 600;
line-height: 1.35;
color: var(--color-text-dark, #242323);
}
.learn-text {
margin: 0;
font-size: 14.5px;
line-height: 1.7;
color: var(--color-text, #696969);
}
@media (max-width: 575.98px) {
.learn-item {
gap: 14px;
padding: 18px 14px;
}
.learn-icon {
flex-basis: 42px;
width: 42px;
height: 42px;
font-size: 17px;
}
}
/* ------------------------------------------------------------
7. DISCOVER LIFE AT RISHIKESH YOG KENDRA
------------------------------------------------------------ */
/* The learn section fades to white at its foot, so this one opens on a
tinted band. The colour change plus the divider above gives the two
sections a clear boundary — they previously ran together. */
.life-sec {
position: relative;
background: linear-gradient(180deg, #fff7ef 0, var(--color-cream-alt, #faf7f2) 100%);
padding-top: 92px !important;
padding-bottom: 24px !important;
overflow: hidden;
}
/* Decorative divider marking the start of the section. Uses the brand
gradient already defined for buttons and card edges — no new colour. */
.life-sec::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 132px;
height: 4px;
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, var(--color-primary, #ff8e28), var(--color-dark, #ff5f14));
}
.life-sec::after {
content: "";
position: absolute;
top: -90px;
right: -110px;
width: 340px;
height: 340px;
background: radial-gradient(circle, rgba(255, 142, 40, .10), transparent 70%);
pointer-events: none;
}
.life-sec>.container {
position: relative;
z-index: 1;
}
/* A little more breathing room where the learn section hands over. */
.learn-sec {
padding-bottom: 92px !important;
}
.life-facts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 900px;
margin: 30px auto 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.life-facts {
grid-template-columns: repeat(4, 1fr);
}
}
.life-facts li {
padding: 20px 14px;
text-align: center;
background: var(--color-cream-alt, #faf7f2);
border: 1px solid rgba(53, 27, 4, .07);
border-radius: 14px;
}
.lf-num {
display: block;
font-family: var(--font-heading, Laila, serif);
font-size: clamp(1.2rem, 2.4vw, 1.6rem);
font-weight: 700;
line-height: 1.2;
color: var(--color-dark, #ff5f14);
}
.lf-label {
display: block;
margin-top: 6px;
font-size: 13.5px;
line-height: 1.45;
color: var(--color-text, #696969);
}
/* The gallery include sits directly under .life-sec and continues the
same tinted band, so the two read as one block. Its own heading is
suppressed via $gallery_title. */
.gallery-in-life {
background: var(--color-cream-alt, #faf7f2);
padding-top: 6px !important;
padding-bottom: 88px !important;
}
/* --- Gallery grid -------------------------------------------
One slide = one page of 8 images. Paging is handled by the existing
ryk-slider in custom.js, so there is no gallery-specific JavaScript.
mobile 2 columns
>=576px 3 columns
>=992px 4 columns (4 x 2 = the 8 per page) */
.g-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 4px 2px 8px;
}
@media (min-width: 576px) {
.g-grid {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
}
@media (min-width: 992px) {
.g-grid {
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
}
/* Uniform cells despite the source images having two different aspect
ratios (450x350 and 320x174). */
.g-cell {
position: relative;
aspect-ratio: 4 / 3;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(53, 27, 4, .08);
}
.g-cell a {
display: block;
width: 100%;
height: 100%;
}
.g-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.g-cell:hover img {
transform: scale(1.06);
}
.g-cell a:focus-visible {
outline: 3px solid var(--color-primary, #ff8e28);
outline-offset: -3px;
}
/* Give the slider controls room below the grid. */
.gallery-slider {
padding-bottom: 46px;
}
.gallery-slider .ryk-dots {
bottom: 4px;
}
/* ------------------------------------------------------------
8. Motion preferences
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.course-nav-item,
.course-nav-item::before,
.cn-icon,
.cn-title,
.cn-title::after,
.value-card,
.value-icon,
.learn-item {
transition: none;
}
.course-nav-item:hover,
.course-nav-item:focus-visible,
.value-card:hover {
transform: none;
}
.course-nav-item:hover .cn-icon,
.course-nav-item:focus-visible .cn-icon {
transform: none;
}
.course-nav-item:hover .cn-title::after,
.course-nav-item:focus-visible .cn-title::after {
transform: none;
}
}