/* ═══════════════════════════════════════════════════════════════════════════ VIDYA VIKAS THEME Reproduces the approved reference design (vidyavikas-website-template-1.html) inside the existing Blazor app. SCOPING CONTRACT — read before editing ────────────────────────────────────── Every rule in this file is prefixed with one of: .vv-theme — applied to the PUBLIC layout wrapper only (MainLayout) .vv-home — applied to the public HOME PAGE root only plus the .vv-* block classes (.vv-header, .vv-hero, .vv-features, …). Nothing here targets a bare element selector (body/button/a/h1/.card/ .container). AdminLayout does NOT carry .vv-theme, so the admin panel, checkout, account and product pages are structurally unreachable from this file. That is the whole safety argument — keep it true. This file is loaded LAST in App.razor so it wins on equal specificity without needing !important. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens ──────────────────────────────────────────────────────── Scoped to .vv-theme rather than :root so the admin palette in app.css is untouched. Values are lifted verbatim from the reference's :root block. */ .vv-theme { --vv-maroon: #7B1818; --vv-maroon-d: #5C1010; --vv-maroon-l: #A02020; --vv-gold: #C9A84C; --vv-gold-l: #E4D08F; --vv-green: #2E5339; --vv-bg: #FBF8F1; --vv-card: #FFFFFF; --vv-alt: #F3EDE0; --vv-dark: #1A0505; --vv-txt: #2D2424; --vv-txt2: #6B5B5B; --vv-on-p: #FBF8F1; --vv-bdr: #E0D5C5; --vv-r: 8px; --vv-rl: 16px; --vv-shadow: 0 2px 16px rgba(123, 24, 24, .06); --vv-shadow-h: 0 8px 32px rgba(123, 24, 24, .12); --vv-f-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --vv-f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Content rail — the reference uses 1200px. */ --vv-max: 1200px; --vv-gutter: 24px; } /* Page canvas. Scoped to the wrapper element itself, not . */ .vv-theme { background: var(--vv-bg); color: var(--vv-txt); font-family: var(--vv-f-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Shared primitives ───────────────────────────────────────────────────── */ .vv-theme .vv-in { max-width: var(--vv-max); margin: 0 auto; padding: 0 var(--vv-gutter); } .vv-theme .vv-section { padding: 72px 0; } .vv-theme .vv-section--alt { background: var(--vv-alt); } .vv-theme .vv-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--vv-maroon); margin-bottom: 8px; } /* The signature section heading: Playfair + a 50x3 maroon underline. */ .vv-theme .vv-title { font-family: var(--vv-f-display); font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; line-height: 1.2; margin: 0 0 16px; color: var(--vv-txt); } .vv-theme .vv-title::after { content: ''; display: block; width: 50px; height: 3px; background: var(--vv-maroon); margin-top: 12px; border-radius: 2px; } .vv-theme .vv-title--center { text-align: center; } .vv-theme .vv-title--center::after { margin: 12px auto 0; } .vv-theme .vv-lede { color: var(--vv-txt2); font-size: 15px; line-height: 1.8; } /* Buttons. Named .vv-btn so they cannot collide with the app's .btn. */ .vv-theme .vv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--vv-r); font-family: var(--vv-f-body); font-weight: 600; font-size: 14px; line-height: 1.2; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; } .vv-theme .vv-btn--primary { background: var(--vv-maroon); color: var(--vv-on-p); border-color: var(--vv-maroon); } .vv-theme .vv-btn--primary:hover { background: var(--vv-maroon-d); border-color: var(--vv-maroon-d); color: var(--vv-on-p); } .vv-theme .vv-btn--outline { background: transparent; color: var(--vv-maroon); border-color: var(--vv-maroon); } .vv-theme .vv-btn--outline:hover { background: var(--vv-maroon); color: var(--vv-on-p); } .vv-theme .vv-btn--gold { background: var(--vv-gold); color: #1A1A1A; border-color: var(--vv-gold); } .vv-theme .vv-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); } /* Visible keyboard focus — the reference omits this; accessibility requires it. */ .vv-theme .vv-btn:focus-visible, .vv-theme a:focus-visible { outline: 2px solid var(--vv-maroon-l); outline-offset: 2px; } /* ═════════════════════════════════════════════════════════════════════════════ HEADER Reference: 68px sticky white bar, 1px bottom border, logo left, links centre-right, maroon Login pill. These rules REPAINT the existing Header.razor markup rather than replacing it — the search box, cart badge, profile menu, admin/franchise chips and the mega-menu dropdowns keep their markup, their classes and all their Blazor logic. Only colour, type and spacing change. The `.hjc-app.vv-theme` prefix is deliberate: both classes sit on the same MainLayout wrapper, so this scores one class higher than the `.hjc-app .header…` rules in header-signature.css and wins predictably instead of relying on load order alone. ═════════════════════════════════════════════════════════════════════════════ */ /* Contact strip + header share one fixed stack; keep it on brand. */ .hjc-app.vv-theme .site-topbar { background: var(--vv-card); } .hjc-app.vv-theme .header { background: var(--vv-card); border-bottom: 1px solid var(--vv-bdr); box-shadow: none; } /* header-signature paints a 2px gradient rule under the bar — retire it. */ .hjc-app.vv-theme .header::after { display: none; } .hjc-app.vv-theme .header__inner, .hjc-app.vv-theme .header.is-scrolled .header__inner { max-width: var(--vv-max); height: 68px; background: none; box-shadow: none; } .hjc-app.vv-theme .header__logo img, .hjc-app.vv-theme .header.is-scrolled .header__logo img { height: 42px; width: auto; max-width: 220px; object-fit: contain; } /* Nav links. */ .hjc-app.vv-theme .header__link { font-family: var(--vv-f-body); font-size: 13.5px; font-weight: 500; color: var(--vv-txt2); padding: 8px 12px; border-radius: 6px; text-transform: none; letter-spacing: 0; } .hjc-app.vv-theme .header__link:hover { color: var(--vv-maroon); background: rgba(123, 24, 24, .04); } .hjc-app.vv-theme .header__link.active { color: var(--vv-maroon); font-weight: 600; } /* header-signature draws an underline bar on the active link; the reference does not, so it is suppressed rather than recoloured. */ .hjc-app.vv-theme .header__link::after, .hjc-app.vv-theme .header__link.active::after { display: none; } .hjc-app.vv-theme .hnav-caret, .hjc-app.vv-theme .hnav-fly-caret { color: currentColor; } /* Mega-menu dropdown panels. */ .hjc-app.vv-theme .hnav-drop, .hjc-app.vv-theme .hnav-fly { background: var(--vv-card); border: 1px solid var(--vv-bdr); border-radius: var(--vv-rl); box-shadow: var(--vv-shadow-h); } .hjc-app.vv-theme .hnav-drop__link { font-family: var(--vv-f-body); font-size: 13.5px; color: var(--vv-txt2); } .hjc-app.vv-theme .hnav-drop__link:hover, .hjc-app.vv-theme .hnav-drop__link.active { color: var(--vv-maroon); background: rgba(123, 24, 24, .05); } /* Icon buttons (search, cart) + the cart badge. */ .hjc-app.vv-theme .header__icon { color: var(--vv-txt2); border-radius: 8px; } .hjc-app.vv-theme .header__icon:hover { color: var(--vv-maroon); background: rgba(123, 24, 24, .05); } .hjc-app.vv-theme .header__cart-badge { background: var(--vv-maroon); color: #fff; } .hjc-app.vv-theme .header__search-input { font-family: var(--vv-f-body); border-color: var(--vv-bdr); background: var(--vv-bg); color: var(--vv-txt); border-radius: var(--vv-r); } .hjc-app.vv-theme .header__search-input:focus { border-color: var(--vv-maroon); outline: none; } .hjc-app.vv-theme .header__divider { background: var(--vv-bdr); } /* The maroon Login pill from the reference. */ .hjc-app.vv-theme .header__login, .hjc-app.vv-theme .header__login.btn-primary { background: var(--vv-maroon); border-color: var(--vv-maroon); color: var(--vv-on-p); border-radius: var(--vv-r); font-family: var(--vv-f-body); font-weight: 600; font-size: 13px; padding: 9px 20px; } .hjc-app.vv-theme .header__login:hover, .hjc-app.vv-theme .header__login.btn-primary:hover { background: var(--vv-maroon-d); border-color: var(--vv-maroon-d); color: var(--vv-on-p); } /* Admin / franchise chips + the signed-in profile control. */ .hjc-app.vv-theme .header__chip { background: rgba(123, 24, 24, .06); color: var(--vv-maroon); border: 1px solid rgba(123, 24, 24, .18); border-radius: var(--vv-r); font-family: var(--vv-f-body); font-weight: 600; } .hjc-app.vv-theme .header__chip:hover { background: var(--vv-maroon); color: var(--vv-on-p); border-color: var(--vv-maroon); } .hjc-app.vv-theme .header__avatar { background: linear-gradient(135deg, var(--vv-maroon), #4A0E0E); color: var(--vv-gold-l); } .hjc-app.vv-theme .header__user-name, .hjc-app.vv-theme .header__menu-name { font-family: var(--vv-f-body); color: var(--vv-txt); } .hjc-app.vv-theme .header__menu { background: var(--vv-card); border: 1px solid var(--vv-bdr); border-radius: var(--vv-rl); box-shadow: var(--vv-shadow-h); } .hjc-app.vv-theme .header__menu-item { font-family: var(--vv-f-body); color: var(--vv-txt2); } .hjc-app.vv-theme .header__menu-item:hover { background: rgba(123, 24, 24, .05); color: var(--vv-maroon); } .hjc-app.vv-theme .header__menu-role { color: var(--vv-txt2); } /* Hamburger bars. */ .hjc-app.vv-theme .header__hamburger span { background: var(--vv-txt); } /* Mobile drawer. */ .hjc-app.vv-theme .drawer { background: var(--vv-card); } .hjc-app.vv-theme .drawer__header { border-bottom: 1px solid var(--vv-bdr); } .hjc-app.vv-theme .drawer__logo { height: 38px; width: auto; max-width: 190px; object-fit: contain; } .hjc-app.vv-theme .dnav-link, .hjc-app.vv-theme .drawer__nav > a { font-family: var(--vv-f-body); color: var(--vv-txt2); font-size: 15px; } .hjc-app.vv-theme .dnav-link:hover, .hjc-app.vv-theme .drawer__nav > a:hover { color: var(--vv-maroon); } .hjc-app.vv-theme .dnav-row { border-bottom: 1px solid var(--vv-bdr); } /* ═══════════════════════════════════════════════════════════════════════════ CONTACT STRIP (.vv-strip) Thin maroon bar above the header: phone left, socials right. ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-strip { background: var(--vv-maroon-d); color: #F0E6E6; font-size: 12.5px; } .vv-theme .vv-strip__in { max-width: var(--vv-max); margin: 0 auto; padding: 7px var(--vv-gutter); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .vv-theme .vv-strip__contacts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .vv-theme .vv-strip__item { display: inline-flex; align-items: center; gap: 7px; color: #F0E6E6; text-decoration: none; transition: color .2s; } .vv-theme .vv-strip__item:hover { color: var(--vv-gold-l); } .vv-theme .vv-strip__item svg { width: 13px; height: 13px; flex-shrink: 0; } .vv-theme .vv-strip__social { display: flex; align-items: center; gap: 8px; } .vv-theme .vv-strip__social a { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: inline-flex; align-items: center; justify-content: center; transition: background .2s; } .vv-theme .vv-strip__social a:hover { background: var(--vv-maroon-l); } .vv-theme .vv-strip__social svg { width: 13px; height: 13px; fill: #F0E6E6; } /* An unconfigured social link stays visible but inert. */ .vv-theme .vv-strip__social a.is-inactive { opacity: .45; cursor: default; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════ HERO / BANNER SLIDER (.vv-hero) Wraps the EXISTING HeroBanner component. Only paint — the carousel's own layout and JS behaviour in hero-banner.css are left alone. ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-hero { background: var(--vv-dark); position: relative; } /* Fallback hero, shown only when the Banner CMS has no live banners. */ .vv-theme .vv-hero-fallback { background: radial-gradient(circle at 18% 20%, rgba(201, 168, 76, .16), transparent 45%), radial-gradient(circle at 82% 78%, rgba(160, 32, 32, .28), transparent 50%), linear-gradient(135deg, var(--vv-maroon) 0%, #4A0E0E 55%, var(--vv-dark) 100%); color: #fff; position: relative; overflow: hidden; } /* Faint dot lattice, matching the reference's talent bar treatment. */ .vv-theme .vv-hero-fallback::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px); background-size: 40px 40px; pointer-events: none; } .vv-theme .vv-hero-fallback__in { max-width: var(--vv-max); margin: 0 auto; padding: 88px var(--vv-gutter); position: relative; z-index: 1; text-align: center; } .vv-theme .vv-hero-fallback__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--vv-gold-l); margin-bottom: 18px; } .vv-theme .vv-hero-fallback__title { font-family: var(--vv-f-display); font-size: clamp(30px, 5vw, 52px); font-weight: 800; line-height: 1.12; margin: 0 0 14px; color: #fff; } .vv-theme .vv-hero-fallback__title em { font-style: italic; color: var(--vv-gold); } .vv-theme .vv-hero-fallback__sub { font-size: clamp(14px, 1.6vw, 17px); color: rgba(255, 255, 255, .75); max-width: 620px; margin: 0 auto 28px; line-height: 1.7; } .vv-theme .vv-hero-fallback__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* On dark ground the outline button needs light strokes. */ .vv-theme .vv-hero-fallback .vv-btn--outline { color: #fff; border-color: rgba(255, 255, 255, .55); } .vv-theme .vv-hero-fallback .vv-btn--outline:hover { background: #fff; color: var(--vv-maroon); border-color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ FEATURES STRIP (.vv-features) Reference: 5 equal columns on white, 1px dividers between, tinted icon tile. Responsive rule: the reference DELETES overflow items on small screens. We wrap instead — no content is hidden at any width. ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-features { background: var(--vv-card); border-bottom: 1px solid var(--vv-bdr); } .vv-theme .vv-features__grid { max-width: var(--vv-max); margin: 0 auto; padding: 0 var(--vv-gutter); display: grid; grid-template-columns: repeat(5, 1fr); } .vv-theme .vv-feature { padding: 28px 12px; text-align: center; border-right: 1px solid var(--vv-bdr); transition: background .2s; } .vv-theme .vv-feature:last-child { border-right: none; } .vv-theme .vv-feature:hover { background: #FDF4F4; } .vv-theme .vv-feature__ic { width: 48px; height: 48px; margin: 0 auto 10px; background: #FDF4F4; border-radius: var(--vv-r); display: flex; align-items: center; justify-content: center; color: var(--vv-maroon); } .vv-theme .vv-feature__ic svg { width: 22px; height: 22px; } .vv-theme .vv-feature h3 { font-size: 13px; font-weight: 700; margin: 0 0 3px; color: var(--vv-txt); } .vv-theme .vv-feature p { font-size: 11.5px; color: var(--vv-txt2); margin: 0; line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════════════ ABOUT (.vv-about) ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 32px; } .vv-theme .vv-about__text p { color: var(--vv-txt2); font-size: 15px; line-height: 1.8; margin: 0 0 24px; } .vv-theme .vv-checks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; } /* Each promise sits on its own tinted row so the list reads as a set of credentials rather than loose text. */ .vv-theme .vv-check { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; padding: 9px 14px; background: var(--vv-card); border: 1px solid var(--vv-bdr); border-left: 3px solid var(--vv-maroon); border-radius: var(--vv-r); transition: transform .2s, box-shadow .2s, border-left-color .2s; } .vv-theme .vv-check:hover { transform: translateX(3px); box-shadow: var(--vv-shadow); border-left-color: var(--vv-gold); } .vv-theme .vv-check__i { width: 22px; height: 22px; background: var(--vv-maroon); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } .vv-theme .vv-about__side { display: flex; flex-direction: column; gap: 20px; } /* The hero card of the About block. Carries the same maroon gradient + dot lattice as the talent bar, stats band and CTA, so the page reads as one system instead of one pale box floating beside the copy. */ .vv-theme .vv-about__card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--vv-maroon), #4A0E0E); border: none; border-radius: var(--vv-rl); padding: 40px 32px; text-align: center; box-shadow: var(--vv-shadow-h); } .vv-theme .vv-about__card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px); background-size: 40px 40px; pointer-events: none; } /* Soft gold bloom behind the emblem, echoing the hero. */ .vv-theme .vv-about__card::after { content: ''; position: absolute; top: -60px; left: 50%; width: 240px; height: 240px; transform: translateX(-50%); background: radial-gradient(circle, rgba(201, 168, 76, .22), transparent 68%); pointer-events: none; } .vv-theme .vv-about__card-ic { position: relative; z-index: 2; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 2px solid rgba(201, 168, 76, .45); display: flex; align-items: center; justify-content: center; color: var(--vv-gold); } .vv-theme .vv-about__card-ic svg { width: 32px; height: 32px; } .vv-theme .vv-about__card-t1 { position: relative; z-index: 2; font-family: var(--vv-f-display); font-size: 22px; font-weight: 700; line-height: 1.3; color: #fff; } /* Short gold rule between the headline and the footnote. */ .vv-theme .vv-about__card-t1::after { content: ''; display: block; width: 40px; height: 2px; background: var(--vv-gold); border-radius: 2px; margin: 14px auto 0; opacity: .75; } .vv-theme .vv-about__card-t2 { position: relative; z-index: 2; font-size: 13px; color: rgba(255, 255, 255, .68); margin-top: 12px; letter-spacing: .02em; } /* Replaceable About image. Keeps its box while the client's photo is pending. */ .vv-theme .vv-about__media { border-radius: var(--vv-rl); overflow: hidden; border: 1px solid var(--vv-bdr); background: var(--vv-alt); } .vv-theme .vv-about__media img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; } .vv-theme .vv-about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Stat tiles get a gold cap so they read as a pair of highlights rather than two empty boxes. */ .vv-theme .vv-stat-card { position: relative; overflow: hidden; background: var(--vv-card); border: 1px solid var(--vv-bdr); border-radius: var(--vv-rl); padding: 24px 18px; text-align: center; box-shadow: var(--vv-shadow); transition: transform .25s, box-shadow .25s, border-color .25s; } .vv-theme .vv-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vv-maroon), var(--vv-gold)); } .vv-theme .vv-stat-card:hover { transform: translateY(-4px); box-shadow: var(--vv-shadow-h); border-color: rgba(201, 168, 76, .55); } .vv-theme .vv-stat-card__n { font-family: var(--vv-f-display); font-size: 32px; font-weight: 700; color: var(--vv-maroon); line-height: 1.1; } .vv-theme .vv-stat-card__l { font-size: 12px; color: var(--vv-txt2); margin-top: 6px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ COURSES (.vv-courses) Reference groups cards under a standard badge. We reuse that shape for whatever grouping the catalogue actually provides. ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-std-block { margin-bottom: 40px; } .vv-theme .vv-std-block:last-child { margin-bottom: 0; } .vv-theme .vv-std-lbl { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .vv-theme .vv-std-badge { background: var(--vv-maroon); color: var(--vv-on-p); padding: 16px 24px; border-radius: var(--vv-r); text-align: center; min-width: 130px; flex-shrink: 0; } .vv-theme .vv-std-badge--gold { background: var(--vv-gold); color: #1A1A1A; } .vv-theme .vv-std-badge__n { font-family: var(--vv-f-display); font-size: 36px; font-weight: 700; line-height: 1; } .vv-theme .vv-std-badge__n sup { font-size: 16px; } .vv-theme .vv-std-badge__t { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; font-weight: 600; } .vv-theme .vv-std-badge__s { font-size: 10px; opacity: .75; margin-top: 2px; } .vv-theme .vv-course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .vv-theme .vv-cc { background: var(--vv-card); border-radius: var(--vv-r); overflow: hidden; border: 1px solid var(--vv-bdr); box-shadow: var(--vv-shadow); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; } .vv-theme .vv-cc:hover { transform: translateY(-4px); box-shadow: var(--vv-shadow-h); } .vv-theme .vv-cc__h { background: var(--vv-maroon); padding: 16px; text-align: center; } .vv-theme .vv-cc__h h4 { font-size: 12px; font-weight: 700; color: var(--vv-on-p); text-transform: uppercase; letter-spacing: .04em; margin: 0; line-height: 1.4; } .vv-theme .vv-cc__ic { margin-top: 8px; color: var(--vv-gold-l); } .vv-theme .vv-cc__ic svg { width: 26px; height: 26px; } .vv-theme .vv-cc__b { padding: 16px; display: flex; flex-direction: column; flex: 1; } .vv-theme .vv-cc__b ul { list-style: none; margin: 0; padding: 0; flex: 1; } .vv-theme .vv-cc__b li { font-size: 12px; color: var(--vv-txt2); padding: 4px 0; display: flex; align-items: center; gap: 6px; } .vv-theme .vv-cc__b li::before { content: '✓'; color: var(--vv-maroon); font-weight: 700; font-size: 11px; } .vv-theme .vv-cc__price { font-family: var(--vv-f-display); font-size: 22px; font-weight: 700; color: var(--vv-maroon); margin: 12px 0 0; } .vv-theme .vv-cc__price s { font-family: var(--vv-f-body); font-size: 13px; font-weight: 400; color: var(--vv-txt2); margin-left: 8px; } .vv-theme .vv-cc__btn { display: block; width: 100%; text-align: center; padding: 10px; background: var(--vv-maroon); color: var(--vv-on-p); border-radius: var(--vv-r); font-size: 13px; font-weight: 600; border: none; margin-top: 16px; text-decoration: none; transition: background .2s; } .vv-theme .vv-cc__btn:hover { background: var(--vv-maroon-d); color: var(--vv-on-p); } /* Empty / skeleton states — the catalogue may legitimately be empty. */ .vv-theme .vv-empty { grid-column: 1 / -1; text-align: center; padding: 44px 20px; border: 1px dashed var(--vv-bdr); border-radius: var(--vv-rl); background: var(--vv-card); color: var(--vv-txt2); font-size: 14px; } .vv-theme .vv-empty strong { display: block; font-family: var(--vv-f-display); font-size: 17px; color: var(--vv-txt); margin-bottom: 6px; } .vv-theme .vv-skel { background: linear-gradient(90deg, #EFE8DC 25%, #F7F2E9 37%, #EFE8DC 63%); background-size: 400% 100%; animation: vv-shimmer 1.4s ease infinite; border-radius: var(--vv-r); } @keyframes vv-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ═══════════════════════════════════════════════════════════════════════════ TALENT SEARCH (.vv-talent) ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-talent { background: linear-gradient(135deg, var(--vv-maroon), #4A0E0E); border-radius: var(--vv-rl); padding: 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; margin-top: 48px; position: relative; overflow: hidden; } .vv-theme .vv-talent::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px); background-size: 40px 40px; pointer-events: none; } .vv-theme .vv-talent__emblem { width: 100px; height: 100px; background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .12); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; color: var(--vv-gold); } .vv-theme .vv-talent__emblem svg { width: 44px; height: 44px; } .vv-theme .vv-talent__con { position: relative; z-index: 2; } .vv-theme .vv-talent__con h3 { font-family: var(--vv-f-display); font-size: clamp(20px, 3vw, 28px); font-weight: 700; color: #fff; margin: 0; } .vv-theme .vv-talent__sub { font-size: 16px; color: var(--vv-gold); font-weight: 600; margin: 4px 0 8px; } .vv-theme .vv-talent__meta { font-size: 13px; color: rgba(255, 255, 255, .55); } .vv-theme .vv-talent__pts { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; } .vv-theme .vv-talent__pt { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 500; } .vv-theme .vv-talent__pt-i { width: 26px; height: 26px; background: rgba(255, 255, 255, .08); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--vv-gold-l); } .vv-theme .vv-talent__pt-i svg { width: 13px; height: 13px; } /* ═══════════════════════════════════════════════════════════════════════════ STATS BAR (.vv-stats) ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-stats { background: linear-gradient(135deg, var(--vv-maroon), #4A0E0E); } .vv-theme .vv-stats__grid { max-width: var(--vv-max); margin: 0 auto; padding: 0 var(--vv-gutter); display: grid; grid-template-columns: repeat(5, 1fr); } .vv-theme .vv-stat { padding: 36px 16px; text-align: center; border-right: 1px solid rgba(255, 255, 255, .08); } .vv-theme .vv-stat:last-child { border-right: none; } .vv-theme .vv-stat__ic { margin-bottom: 8px; color: rgba(255, 255, 255, .55); } .vv-theme .vv-stat__ic svg { width: 26px; height: 26px; } .vv-theme .vv-stat__n { font-family: var(--vv-f-display); font-size: 28px; font-weight: 700; color: var(--vv-gold); line-height: 1.1; } .vv-theme .vv-stat__l { font-size: 12px; color: rgba(255, 255, 255, .6); margin-top: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ FACULTY · TESTIMONIALS · BLOG (.vv-people / .vv-quotes / .vv-posts) Restyled to the Vidya Vikas palette; the underlying data + routes are untouched. ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; } .vv-theme .vv-person { background: var(--vv-card); border: 1px solid var(--vv-bdr); border-radius: var(--vv-rl); padding: 24px 18px; text-align: center; box-shadow: var(--vv-shadow); text-decoration: none; color: inherit; display: block; transition: transform .25s, box-shadow .25s; } .vv-theme .vv-person:hover { transform: translateY(-3px); box-shadow: var(--vv-shadow-h); } .vv-theme .vv-person__ava { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; object-fit: cover; border: 3px solid var(--vv-alt); display: block; background: var(--vv-alt); } .vv-theme .vv-person__ava-txt { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: linear-gradient(135deg, var(--vv-maroon), #4A0E0E); color: var(--vv-gold-l); font-family: var(--vv-f-display); font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .vv-theme .vv-person__n { font-family: var(--vv-f-display); font-size: 17px; font-weight: 600; color: var(--vv-txt); } .vv-theme .vv-person__r { font-size: 12px; color: var(--vv-maroon); font-weight: 600; margin-top: 3px; } .vv-theme .vv-person__b { font-size: 12.5px; color: var(--vv-txt2); margin-top: 8px; line-height: 1.6; } .vv-theme .vv-quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; } .vv-theme .vv-quote { background: var(--vv-card); border: 1px solid var(--vv-bdr); border-radius: var(--vv-rl); padding: 28px; box-shadow: var(--vv-shadow); position: relative; } .vv-theme .vv-quote::before { content: '”'; position: absolute; top: 6px; right: 20px; font-family: var(--vv-f-display); font-size: 64px; line-height: 1; color: rgba(123, 24, 24, .1); } .vv-theme .vv-quote__t { font-size: 14px; color: var(--vv-txt2); line-height: 1.75; font-style: italic; } .vv-theme .vv-quote__who { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .vv-theme .vv-quote__ava { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--vv-maroon), #4A0E0E); color: var(--vv-gold-l); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .vv-theme .vv-quote__n { font-size: 14px; font-weight: 600; } .vv-theme .vv-quote__m { font-size: 12px; color: var(--vv-txt2); } .vv-theme .vv-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; } .vv-theme .vv-post { background: var(--vv-card); border: 1px solid var(--vv-bdr); border-radius: var(--vv-rl); overflow: hidden; box-shadow: var(--vv-shadow); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; } .vv-theme .vv-post:hover { transform: translateY(-3px); box-shadow: var(--vv-shadow-h); } .vv-theme .vv-post__img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; background: var(--vv-alt); } .vv-theme .vv-post__b { padding: 18px; } .vv-theme .vv-post__t { font-family: var(--vv-f-display); font-size: 16px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; } .vv-theme .vv-post__x { font-size: 12.5px; color: var(--vv-txt2); line-height: 1.6; } .vv-theme .vv-more { text-align: center; margin-top: 34px; } /* ═══════════════════════════════════════════════════════════════════════════ CTA BAND (.vv-cta) ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-cta { background: linear-gradient(135deg, var(--vv-maroon), #4A0E0E); border-radius: var(--vv-rl); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; overflow: hidden; } .vv-theme .vv-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px); background-size: 40px 40px; pointer-events: none; } .vv-theme .vv-cta__txt { position: relative; z-index: 2; } .vv-theme .vv-cta h3 { font-family: var(--vv-f-display); font-size: 24px; color: #fff; font-weight: 700; margin: 0; } .vv-theme .vv-cta p { font-size: 14px; color: rgba(255, 255, 255, .7); margin: 4px 0 0; } .vv-theme .vv-cta .vv-btn { position: relative; z-index: 2; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════════ FOOTER (.vv-footer) ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-footer { background: var(--vv-dark); padding: 56px 0 20px; } .vv-theme .vv-footer__in { max-width: var(--vv-max); margin: 0 auto; padding: 0 var(--vv-gutter); } .vv-theme .vv-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; margin-bottom: 36px; } .vv-theme .vv-footer__logo { height: 38px; width: auto; max-width: 200px; object-fit: contain; background: #fff; padding: 6px 12px; border-radius: 8px; margin-bottom: 14px; display: block; } .vv-theme .vv-footer__about { font-size: 13px; color: #D4C5B0; line-height: 1.7; margin-bottom: 18px; } .vv-theme .vv-footer__col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0 0 14px; } .vv-theme .vv-footer__col a { display: block; font-size: 13px; color: #D4C5B0; padding: 4px 0; text-decoration: none; transition: color .2s; } .vv-theme .vv-footer__col a:hover { color: var(--vv-gold); } .vv-theme .vv-footer__item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 13px; color: #D4C5B0; text-decoration: none; } .vv-theme .vv-footer__item:hover { color: var(--vv-gold); } .vv-theme .vv-footer__ic { width: 26px; height: 26px; background: rgba(255, 255, 255, .06); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .vv-theme .vv-footer__ic svg { width: 12px; height: 12px; fill: #D4C5B0; } .vv-theme .vv-socials { display: flex; gap: 10px; } .vv-theme .vv-soc { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s; } .vv-theme .vv-soc svg { width: 15px; height: 15px; fill: #D4C5B0; transition: fill .2s; } .vv-theme .vv-soc:hover { background: var(--vv-maroon-l); border-color: transparent; } .vv-theme .vv-soc:hover svg { fill: #fff; } .vv-theme .vv-soc.is-inactive { opacity: .4; pointer-events: none; } /* Newsletter block — keeps the existing subscribe behaviour, restyled. */ .vv-theme .vv-footer__news { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .vv-theme .vv-footer__news input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: var(--vv-r); border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px; font-family: var(--vv-f-body); outline: none; } .vv-theme .vv-footer__news input::placeholder { color: rgba(255, 255, 255, .4); } .vv-theme .vv-footer__news input:focus { border-color: var(--vv-gold); } .vv-theme .vv-footer__news button { padding: 10px 18px; border-radius: var(--vv-r); border: none; background: var(--vv-gold); color: #1A1A1A; font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--vv-f-body); } .vv-theme .vv-footer__news-msg { font-size: 12.5px; color: var(--vv-gold-l); margin-top: 8px; } .vv-theme .vv-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 18px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .35); } .vv-theme .vv-footer__bottom a { color: rgba(255, 255, 255, .55); text-decoration: none; } .vv-theme .vv-footer__bottom a:hover { color: var(--vv-gold); } /* ═══════════════════════════════════════════════════════════════════════════ WHATSAPP FAB (.vv-wa) ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-wa { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37, 211, 102, .3); transition: transform .25s, box-shadow .25s; } .vv-theme .vv-wa:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37, 211, 102, .4); } .vv-theme .vv-wa svg { width: 28px; height: 28px; fill: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE Breakpoints match the reference (1280 / 1024 / 768 / 480). DELIBERATE DIVERGENCE: the reference hides overflow items on small screens (e.g. `.fi:nth-child(n+4){display:none}`), which drops real content on phones. Every grid below REFLOWS instead, so nothing is lost at any width. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1280px) { .vv-theme .vv-header__link { font-size: 12.5px; padding: 8px 8px; } .vv-theme .vv-header__nav { gap: 2px; } } @media (max-width: 1024px) { /* Desktop nav → hamburger. */ .vv-theme .vv-header__nav, .vv-theme .vv-header__login { display: none; } .vv-theme .vv-header__burger { display: inline-flex; } .vv-theme .vv-features__grid { grid-template-columns: repeat(3, 1fr); } /* Restore the divider on the last item of a wrapped row. */ .vv-theme .vv-feature { border-bottom: 1px solid var(--vv-bdr); } .vv-theme .vv-about__grid { grid-template-columns: 1fr; gap: 32px; } .vv-theme .vv-course-grid { grid-template-columns: repeat(2, 1fr); } .vv-theme .vv-people-grid { grid-template-columns: repeat(3, 1fr); } .vv-theme .vv-quotes-grid, .vv-theme .vv-posts-grid { grid-template-columns: repeat(2, 1fr); } .vv-theme .vv-talent { grid-template-columns: 1fr; text-align: center; padding: 32px 24px; } .vv-theme .vv-talent__emblem { margin: 0 auto; } .vv-theme .vv-talent__pts { align-items: center; } .vv-theme .vv-stats__grid { grid-template-columns: repeat(3, 1fr); } .vv-theme .vv-stat { border-bottom: 1px solid rgba(255, 255, 255, .08); } .vv-theme .vv-footer__grid { grid-template-columns: repeat(2, 1fr); } .vv-theme .vv-cta { flex-direction: column; text-align: center; padding: 28px; } } @media (max-width: 768px) { .vv-theme { --vv-gutter: 16px; } .vv-theme .vv-section { padding: 48px 0; } .vv-theme .vv-title { font-size: clamp(22px, 5vw, 28px); } .vv-theme .vv-features__grid { grid-template-columns: repeat(2, 1fr); } .vv-theme .vv-course-grid { grid-template-columns: 1fr; } .vv-theme .vv-people-grid, .vv-theme .vv-quotes-grid, .vv-theme .vv-posts-grid { grid-template-columns: repeat(2, 1fr); } /* Reference stacks the badge above its cards here. */ .vv-theme .vv-std-lbl { flex-direction: column; text-align: center; align-items: stretch; } .vv-theme .vv-stats__grid { grid-template-columns: repeat(2, 1fr); } .vv-theme .vv-footer__grid { grid-template-columns: 1fr; gap: 28px; } .vv-theme .vv-hero-fallback__in { padding: 60px var(--vv-gutter); } .vv-theme .vv-wa { width: 50px; height: 50px; bottom: 16px; right: 16px; } .vv-theme .vv-wa svg { width: 24px; height: 24px; } } @media (max-width: 480px) { .vv-theme { --vv-gutter: 14px; } .vv-theme .vv-header__in { height: 58px; } .vv-theme .vv-header__logo img { height: 34px; } .vv-theme .vv-section { padding: 36px 0; } .vv-theme .vv-title { font-size: 22px; } /* Single column below 480px — still no content removed. */ .vv-theme .vv-features__grid, .vv-theme .vv-people-grid, .vv-theme .vv-quotes-grid, .vv-theme .vv-posts-grid, .vv-theme .vv-stats__grid, .vv-theme .vv-about__stats { grid-template-columns: 1fr; } .vv-theme .vv-talent, .vv-theme .vv-cta { padding: 24px 16px; } .vv-theme .vv-about__card { padding: 24px; } .vv-theme .vv-strip__in { justify-content: center; gap: 10px; } } /* Respect a user's reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { .vv-theme .vv-cc, .vv-theme .vv-person, .vv-theme .vv-post, .vv-theme .vv-wa, .vv-theme .vv-btn { transition: none; } .vv-theme .vv-cc:hover, .vv-theme .vv-person:hover, .vv-theme .vv-post:hover, .vv-theme .vv-wa:hover { transform: none; } .vv-theme .vv-skel { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ EXISTING COMPONENTS, REPAINTED The home page reuses CourseCard, HeroBanner and the enquiry modal rather than reimplementing them, so their links, prices, badges and lead-capture logic are untouched. These rules only change how they look inside .vv-theme; the same components rendered anywhere else are unaffected. ═══════════════════════════════════════════════════════════════════════════ */ /* ── CourseCard ─────────────────────────────────────────────────────────── */ .hjc-app.vv-theme .course-card { background: var(--vv-card); border: 1px solid var(--vv-bdr); border-radius: var(--vv-r); box-shadow: var(--vv-shadow); overflow: hidden; transition: transform .25s, box-shadow .25s; } .hjc-app.vv-theme .course-card:hover { transform: translateY(-4px); box-shadow: var(--vv-shadow-h); border-color: var(--vv-bdr); } /* Decorative glow belonged to the previous brand's card. */ .hjc-app.vv-theme .course-card__glow { display: none; } .hjc-app.vv-theme .course-card__image { background: linear-gradient(135deg, var(--vv-maroon), #4A0E0E); } .hjc-app.vv-theme .course-card__illustration, .hjc-app.vv-theme .course-card__ico { color: var(--vv-gold-l); } .hjc-app.vv-theme .course-card__illustration-label { color: rgba(255, 255, 255, .75); letter-spacing: .1em; text-transform: uppercase; } .hjc-app.vv-theme .course-card__level { color: var(--vv-maroon); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; } .hjc-app.vv-theme .course-card__title { font-family: var(--vv-f-display); color: var(--vv-txt); font-weight: 600; } .hjc-app.vv-theme .course-card__price, .hjc-app.vv-theme .course-card__price-now { font-family: var(--vv-f-display); color: var(--vv-maroon); font-weight: 700; } .hjc-app.vv-theme .course-card__body { font-family: var(--vv-f-body); } /* ── Banner slider (HeroBanner) ──────────────────────────────────────────── */ .hjc-app.vv-theme .hjc-banner-wrap { background: var(--vv-bg); } .hjc-app.vv-theme .hjc-banner__arrow { background: rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .25); color: #fff; backdrop-filter: blur(6px); } .hjc-app.vv-theme .hjc-banner__arrow:hover { background: rgba(0, 0, 0, .6); border-color: rgba(255, 255, 255, .5); } .hjc-app.vv-theme .hjc-banner__dot.is-active, .hjc-app.vv-theme .hjc-banner__dot[aria-current="true"] { background: var(--vv-gold); border-color: var(--vv-gold); } /* ── Enquiry modal (lead capture) ────────────────────────────────────────── */ .hjc-app.vv-theme .enquiry-modal { background: var(--vv-card); border-radius: var(--vv-rl); border: 1px solid var(--vv-bdr); } .hjc-app.vv-theme .enquiry-modal__header { background: linear-gradient(135deg, var(--vv-maroon), #4A0E0E); color: #fff; } .hjc-app.vv-theme .enquiry-modal__header h3 { font-family: var(--vv-f-display); color: #fff; } .hjc-app.vv-theme .enquiry-modal__header p { color: rgba(255, 255, 255, .75); } .hjc-app.vv-theme .enquiry-modal .form-input { font-family: var(--vv-f-body); border-color: var(--vv-bdr); background: var(--vv-bg); border-radius: var(--vv-r); } .hjc-app.vv-theme .enquiry-modal .form-input:focus { border-color: var(--vv-maroon); outline: none; } .hjc-app.vv-theme .enquiry-modal .btn-primary { background: var(--vv-maroon); border-color: var(--vv-maroon); color: var(--vv-on-p); } .hjc-app.vv-theme .enquiry-modal .btn-primary:hover { background: var(--vv-maroon-d); border-color: var(--vv-maroon-d); } /* ── Floating contact dock ───────────────────────────────────────────────── */ .hjc-app.vv-theme .float-btn--call { background: var(--vv-maroon); } .hjc-app.vv-theme .float-fab { background: var(--vv-maroon); color: #fff; } .hjc-app.vv-theme .float-btn.is-inactive { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ TITLE-CASE OPT-OUT home-premium.css applies `.hjc-app{text-transform:capitalize}` — a global Title Case rule belonging to the PREVIOUS brand. The Vidya Vikas reference sets body copy in sentence case ("Vidya Vikas Academy is a trusted name in scholarship exam preparation."), and forcing capitals turned every sentence into "Is A Trusted Name In…". `.hjc-app.vv-theme` is one class more specific than `.hjc-app`, so this wins and text-transform inherits down as `none`. Elements that set their own transform (the uppercase eyebrows, section labels and badges) are unaffected, because an explicit value on the element beats an inherited one. The rule is left in place for any surface that is NOT the Vidya Vikas theme. ═══════════════════════════════════════════════════════════════════════════ */ .hjc-app.vv-theme { text-transform: none; } /* home-premium.css paints an animated orange/royal/green bar across the top of the footer (`.hjc-app .footer::before`) — the previous brand's accent. The reference footer has no such bar, so it is removed rather than recoloured. */ .hjc-app.vv-theme .footer::before { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ COURSE GRID + CARD CTA — Vidya Vikas palette home-premium.css paints the card CTA with the previous brand's orange→green gradient and a green glow. Recoloured here to maroon→gold so the button reads as part of this theme. ═══════════════════════════════════════════════════════════════════════════ */ .hjc-app.vv-theme .course-card__cta { background: linear-gradient(135deg, var(--vv-maroon), var(--vv-maroon-l)); color: var(--vv-on-p); border-radius: var(--vv-r); letter-spacing: .2px; box-shadow: 0 10px 22px -10px rgba(123, 24, 24, .55); } .hjc-app.vv-theme .course-card:hover .course-card__cta { box-shadow: 0 16px 28px -10px rgba(123, 24, 24, .6); } /* The gold sweep on hover, replacing the green one. */ .hjc-app.vv-theme .course-card__cta::before { background: linear-gradient(120deg, transparent 20%, rgba(201, 168, 76, .45) 50%, transparent 80%); } /* A catalogue with one or two live courses used to stretch a single card across a four-column track, leaving a wide empty gap beside it. Auto-fit keeps the cards at a natural width and the centred track keeps them under the heading instead of stranded on the left. Capped so a full catalogue still lands on the intended four columns. */ .vv-theme .vv-course-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 280px)); justify-content: center; } /* The empty-state panel must still span the whole rail. */ .vv-theme .vv-course-grid .vv-empty { grid-column: 1 / -1; width: 100%; } @media (max-width: 768px) { .vv-theme .vv-course-grid { grid-template-columns: minmax(0, 320px); } } /* ═══════════════════════════════════════════════════════════════════════════ MULTI-LINE POSTAL ADDRESS The address in Site Settings is entered across several lines (organisation, building, locality). HTML collapses those newlines by default, which ran the whole address together as one long line. pre-line honours the breaks the admin typed while still wrapping normally when the column is narrow. Scoped to the address rows only — no other copy is affected. ═══════════════════════════════════════════════════════════════════════════ */ .vv-theme .vv-footer__item .vv-footer__addr, .vv-theme .hj-info-row__value--addr { white-space: pre-line; }