/** * Samarpit — shared premium shell (all marketing pages). * Add class "samarpit-theme" on . Homepage also uses "home-page" + premium-home.css. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body.samarpit-theme { /* Sticky header stays in document flow; only reserve space for fixed top-strip (see style.css --header-stack-offset). */ --samarpit-top-strip-h: clamp(1.75rem, 4.2vw, 2.05rem); padding-top: calc(env(safe-area-inset-top, 0px) + var(--samarpit-top-strip-h)); --ph-navy: #061229; --ph-navy-mid: #0b1f4d; --ph-navy-soft: #122a5c; --ph-gold: #e8a317; --ph-gold-soft: #f4c14f; --ph-white: #ffffff; --ph-text: #0f172a; --ph-muted: #5c6b80; --ph-radius-lg: 20px; --ph-radius-xl: 28px; --ph-shadow: 0 20px 50px rgba(6, 18, 41, 0.1); --ph-shadow-hover: 0 28px 60px rgba(6, 18, 41, 0.14); --ph-font-display: "Playfair Display", Georgia, serif; --ph-font-body: "Inter", system-ui, -apple-system, sans-serif; --ph-max: var(--container-max, 1140px); --ph-whatsapp: #25d366; /* Vertical rhythm (sections / stacks) */ --ph-space-section: clamp(2.25rem, 5vw, 4rem); --ph-space-tight: clamp(1.35rem, 3.5vw, 2.25rem); --ph-prose-width: min(100%, 42rem); font-family: var(--ph-font-body); color: var(--ph-text); background: linear-gradient(180deg, #f4f7fb 0%, #eef2f9 35%, #fafbfd 100%); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } .samarpit-theme main { overflow-x: clip; } @media (max-width: 640px) { .samarpit-theme .top-strip .container { flex-wrap: wrap; justify-content: center; row-gap: 0.25rem; column-gap: 1rem; } .samarpit-theme .top-strip .container > span { white-space: normal; text-align: center; flex: 1 1 100%; overflow: visible; text-overflow: unset; } } .samarpit-theme .top-strip { background: linear-gradient(90deg, #061229 0%, #0b1f4d 100%); color: rgba(255, 255, 255, 0.92); border-bottom: 1px solid rgba(232, 163, 23, 0.25); } .samarpit-theme .top-strip .container > span { color: rgba(255, 255, 255, 0.88); } .samarpit-theme .site-header { position: sticky; top: 0; z-index: 200; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(11, 31, 77, 0.08); box-shadow: 0 4px 24px rgba(6, 18, 41, 0.06); transition: box-shadow 0.35s ease, border-color 0.35s ease; } .samarpit-theme .site-header-inner { padding-block: clamp(0.35rem, 1vw, 0.55rem); min-height: 44px; } .samarpit-theme .brand-text-main { color: var(--ph-navy-mid); } .samarpit-theme .brand-text-sub { color: var(--ph-muted); } .samarpit-theme .nav--primary a:any-link { color: var(--ph-navy-soft); font-weight: 600; } .samarpit-theme .nav--primary a[aria-current="page"] { color: var(--ph-gold); font-weight: 800; } .samarpit-theme .nav--primary a:hover, .samarpit-theme .nav--primary a:focus-visible { color: var(--ph-gold); } .ph-container { width: min(var(--ph-max), 100% - 2 * var(--gutter, 1rem)); margin-inline: auto; } /* Sections & type */ .samarpit-theme .section-label { color: var(--ph-navy-mid); letter-spacing: 0.1em; font-size: 0.72rem; background: rgba(11, 31, 77, 0.06); border: 1px solid rgba(11, 31, 77, 0.08); display: inline-block; padding: 0.35rem 0.75rem; border-radius: 999px; } .samarpit-theme .section-title, .samarpit-theme .page-title, .samarpit-theme .courses-page-title { font-family: var(--ph-font-display); color: var(--ph-navy-mid); letter-spacing: -0.02em; } .samarpit-theme .section-subtext, .samarpit-theme .muted-note { color: var(--ph-muted); } .samarpit-theme .split-layout, .samarpit-theme .split-layout > * { min-width: 0; } .samarpit-theme .section-alt { background: linear-gradient(180deg, #f8fafc 0%, #eef2f9 50%, #f5f7fb 100%); border-color: rgba(11, 31, 77, 0.08); } /* Cards */ .samarpit-theme .card { border-radius: var(--ph-radius-lg); border: 1px solid rgba(11, 31, 77, 0.08); box-shadow: var(--ph-shadow); transition: transform 0.22s ease, box-shadow 0.22s ease; } .samarpit-theme .card:hover { transform: translateY(-3px); box-shadow: var(--ph-shadow-hover); } .samarpit-theme .card h3 { color: var(--ph-navy-mid); } /* Program feature (courses) */ .samarpit-theme .program-feature-card { position: relative; border-radius: var(--ph-radius-xl); border: 1px solid rgba(11, 31, 77, 0.08); border-top: none; box-shadow: var(--ph-shadow); overflow: hidden; } .samarpit-theme .program-feature-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--ph-gold), var(--ph-navy-mid)); z-index: 1; } .samarpit-theme .program-badge { background: rgba(232, 163, 23, 0.15); color: var(--ph-navy-mid); border-color: rgba(232, 163, 23, 0.45); } .samarpit-theme .program-feature-title { font-family: var(--ph-font-display); color: var(--ph-navy-mid); } .samarpit-theme .section-courses-lead { background: linear-gradient(165deg, var(--ph-navy) 0%, var(--ph-navy-mid) 100%); color: #e8eef8; border: none; padding-block: clamp(2.5rem, 6vw, 3.5rem); } .samarpit-theme .section-courses-lead .section-label { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: var(--ph-gold-soft); } .samarpit-theme .section-courses-lead .section-title, .samarpit-theme .section-courses-lead .courses-page-title { color: #fff; } .samarpit-theme .section-courses-lead .section-subtext { color: rgba(226, 232, 255, 0.9); } /* Buttons */ .samarpit-theme .btn { border-radius: 12px; font-weight: 700; min-height: 46px; padding: 0.7rem 1.2rem; background: linear-gradient(135deg, var(--ph-gold) 0%, #c9890a 100%); color: #1a1204; border: none; box-shadow: 0 8px 24px rgba(232, 163, 23, 0.3); } .samarpit-theme .btn:hover, .samarpit-theme .btn:focus-visible { filter: brightness(1.05); transform: translateY(-1px); } .samarpit-theme .btn-secondary { background: rgba(11, 31, 77, 0.08); color: var(--ph-navy-mid); border: 2px solid rgba(11, 31, 77, 0.2); box-shadow: none; } .samarpit-theme .btn-secondary:hover { background: rgba(11, 31, 77, 0.12); color: var(--ph-navy); } /* Forms */ .samarpit-theme .form-grid input, .samarpit-theme .form-grid textarea, .samarpit-theme .form-grid select { border-radius: 12px; border: 1px solid rgba(11, 31, 77, 0.15); } .samarpit-theme .form-grid input:focus, .samarpit-theme .form-grid textarea:focus, .samarpit-theme .form-grid select:focus { border-color: var(--ph-gold); box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.2); outline: none; } /* Admissions */ .samarpit-theme .admissions-pdp-intro { color: var(--ph-muted); line-height: 1.65; } .samarpit-theme .admissions-pdp-intro a { color: var(--ph-navy-mid); font-weight: 700; } .samarpit-theme .admissions-payment-card, .samarpit-theme .admissions-wa-card { border-radius: var(--ph-radius-lg); border: 1px solid rgba(11, 31, 77, 0.1); box-shadow: var(--ph-shadow); } /* Footer (shared with home) */ .samarpit-theme .site-footer { background: linear-gradient(180deg, #040a18 0%, #061229 100%); color: #a8b8d4; text-align: left; padding: clamp(2rem, 5vw, 3rem) 0; margin-top: 2rem; } .samarpit-theme .site-footer a:any-link { color: #c8d8f0; } .samarpit-theme .site-footer a:hover { color: var(--ph-gold-soft); } .ph-footer-grid { display: grid; gap: 1.75rem; margin-bottom: 2rem; } @media (min-width: 768px) { .ph-footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } } .ph-footer-brand p { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.55; max-width: 28rem; } .ph-footer-col h4 { margin: 0 0 0.75rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ph-gold-soft); } .ph-footer-col ul { list-style: none; margin: 0; padding: 0; } .ph-footer-col li { margin-bottom: 0.45rem; font-size: 0.9rem; } .ph-footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.25rem; font-size: 0.78rem; line-height: 1.55; color: #7d8fa8; } .ph-footer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .ph-footer-badge { font-size: 0.72rem; padding: 0.3rem 0.55rem; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } .ph-footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; } .ph-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #e8eef8; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .ph-footer-social a:hover, .ph-footer-social a:focus-visible { background: rgba(232, 163, 23, 0.15); border-color: rgba(232, 163, 23, 0.45); color: var(--ph-gold-soft); transform: translateY(-2px); outline: none; } .ph-footer-social svg { width: 20px; height: 20px; } /* Sticky WhatsApp */ .ph-wa-float { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1200; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ph-whatsapp); color: #fff; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .ph-wa-float:hover { transform: scale(1.06); box-shadow: 0 14px 40px rgba(37, 211, 102, 0.55); } .ph-wa-float svg { width: 28px; height: 28px; } /* Scroll to top (marketing pages) */ .ph-scroll-top { position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1190; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(11, 31, 77, 0.12); background: rgba(255, 255, 255, 0.95); color: var(--ph-navy-mid); box-shadow: 0 8px 28px rgba(6, 18, 41, 0.12); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } .ph-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .ph-scroll-top:hover, .ph-scroll-top:focus-visible { border-color: rgba(232, 163, 23, 0.55); color: var(--ph-gold); outline: none; } .ph-scroll-top svg { width: 20px; height: 20px; } /* —— Motion: keyframes (shared) —— */ @keyframes sp-fade-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes sp-soft-glow { from { opacity: 0.72; } to { opacity: 1; } } /* Header tightens on scroll (class toggled in site-animations.js) */ .samarpit-theme .site-header.is-scrolled { box-shadow: 0 10px 36px rgba(6, 18, 41, 0.12); border-bottom-color: rgba(11, 31, 77, 0.12); } /* Desktop nav: gold underline */ @media (min-width: 768px) { .samarpit-theme .nav--primary a:any-link { position: relative; } .samarpit-theme .nav--primary a::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ph-gold), var(--ph-gold-soft)); transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .samarpit-theme .nav--primary a:hover::after, .samarpit-theme .nav--primary a:focus-visible::after, .samarpit-theme .nav--primary a[aria-current="page"]::after { width: 100%; } } /* Scroll-reveal: sections below hero (site-animations.js adds .sp-reveal) */ .samarpit-theme main > section.sp-reveal { opacity: 0; transform: translate3d(0, 1.1rem, 0); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .samarpit-theme main > section.sp-reveal.sp-reveal--visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Courses lead band: load-in */ @media (prefers-reduced-motion: no-preference) { .samarpit-theme .section-courses-lead .section-label { animation: sp-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } .samarpit-theme .section-courses-lead .section-title, .samarpit-theme .section-courses-lead .courses-page-title { animation: sp-fade-up 0.62s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both; } .samarpit-theme .section-courses-lead .section-subtext { animation: sp-fade-up 0.62s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ph-scroll-top { transition: none; } .samarpit-theme main > section.sp-reveal { opacity: 1; transform: none; transition: none; } .samarpit-theme .section-courses-lead .section-label, .samarpit-theme .section-courses-lead .section-title, .samarpit-theme .section-courses-lead .courses-page-title, .samarpit-theme .section-courses-lead .section-subtext { animation: none !important; } .samarpit-theme .card:hover, .samarpit-theme .btn:hover, .ph-wa-float:hover, .ph-footer-social a:hover { transform: none !important; } }