/* ============================================================ MedVR Education — Global Stylesheet assets/css/global.css Loaded on every page. Contains: - Design tokens (CSS variables) - Reset - Navigation - Footer - Buttons - Layout helpers - Section typography - Shared components (vis-panel, cta-band, breadcrumb, etc.) - Scroll-reveal animation Fonts: Inter + Merriweather via Google Fonts (in ) Icons: Font Awesome 6.5.1 via cdnjs (in ) JS: assets/js/main.js (before ) Page CSS: assets/css/pages/.css (in each page's ) ============================================================ */ /* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */ :root { --navy: #0F2D52; --navy-hov: #0d2645; --blue: #6EC1E4; --blue-lt: #EAF5FB; --green: #61CE70; --green-lt: #EAF7EC; --gray-700: #343A40; --gray-600: #54595F; --gray-500: #71717a; --gray-400: #a1a1aa; --gray-300: #d4d4d8; --gray-200: #e8e8ec; --gray-100: #f4f4f6; --gray-50: #fafafa; --white: #ffffff; --max-w: 1400px; } /* ─── RESET ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: 'Inter', system-ui, sans-serif; color: var(--gray-700); background: var(--white); overflow-x: hidden; line-height: 1.6; } /* ─── NAV ────────────────────────────────────────────────────────────────── */ .sitenav { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--gray-200); } .sitenav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 10px; height: 64px; display: flex; align-items: center; gap: 25px; } .nav-links { display: flex; gap: 4px; margin-left: auto; } .nav-links a { font-size: 15.6px; font-weight: 500; color: var(--gray-600); text-decoration: none; padding: 6px 12px; border-radius: 6px; transition: color .2s, background .2s; } .nav-links a:hover, .nav-links a.active { color: var(--navy); background: var(--gray-100); } .nav-right { display: flex; gap: 10px; align-items: center; } .nav-login { font-size: 15.6px; font-weight: 600; color: var(--navy); text-decoration: none; padding: 6px 14px; } .nav-cta { font-size: 15.6px; font-weight: 600; color: white; background: var(--blue); text-decoration: none; padding: 8px 18px; border-radius: 8px; transition: opacity .2s; } .nav-cta:hover { opacity: .85; } /* ─── NAV LOGO ───────────────────────────────────────────────────────────── */ .logo-img { height: 42px; width: auto; display: block; /* No heavy filter — just a subtle dark treatment for a white logo on white bg */ filter: brightness(0) saturate(100%) invert(16%) sepia(49%) saturate(748%) hue-rotate(183deg) brightness(92%) contrast(97%); } .logo-img:hover { opacity: 0.8; } /* ─── FOOTER ─────────────────────────────────────────────────────────────── */ .sitefooter { background: var(--navy); padding: 64px 0 32px; } .sf-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; } .sf-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .sf-brand-logo { display: flex; align-items: center; gap: 10px; font-size: 21.6px; font-weight: 700; color: white; margin-bottom: 14px; } .sf-brand-logo em { color: var(--blue); font-style: normal; } .sf-brand-logo i { font-size: 26.4px; color: var(--blue); } .sf-brand p { font-size: 15.6px; color: rgba(255,255,255,0.50); line-height: 1.7; margin-bottom: 20px; } .sf-contact { display: flex; flex-direction: column; gap: 8px; } .sf-contact-item { font-size: 14.4px; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 8px; } .sf-contact-item i { color: var(--blue); width: 14px; } .sf-col h4 { font-size: 16.8px; font-weight: 700; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; } .sf-col a { display: block; font-size: 15.6px; color: rgba(255,255,255,0.55); text-decoration: none; margin-bottom: 10px; transition: color .2s; } .sf-col a:hover { color: white; } .sf-bottom { border-top: 1px solid rgba(255,255,255,0.10); padding-top: 24px; display: flex; justify-content: space-between; } .sf-bottom p { font-size: 14.4px; color: rgba(255,255,255,0.30); } /* ─── BUTTONS ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 16.8px; font-weight: 600; border-radius: 8px; padding: 11px 22px; cursor: pointer; text-decoration: none; border: none; transition: all 0.15s; white-space: nowrap; } .btn-blue { background: var(--blue); color: var(--navy); } .btn-blue:hover { background: #5ab6da; } .btn-navy { background: var(--navy); color: var(--white); } .btn-navy:hover { background: var(--navy-hov); } .btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--gray-300); } .btn-outline:hover { border-color: var(--navy); background: var(--gray-50); } .btn-outline-w { background: transparent; color: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.22); } .btn-outline-w:hover { color: var(--white); border-color: rgba(255,255,255,0.5); } .btn i { font-size: 14.4px; } /* ─── MAC DOTS (decorative UI chrome) ───────────────────────────────────── */ .macdot { width: 9px; height: 9px; border-radius: 50%; } .macdot.r { background: #fc625d; } .macdot.y { background: #fdbc40; } .macdot.g { background: #35cd4b; } /* ─── CHIPS / BADGES ────────────────────────────────────────────────────── */ .chip { display: inline-block; font-size: 14.4px; font-weight: 600; padding: 4px 12px; border-radius: 100px; } .chip-blue { background: var(--blue-lt); color: #1a6fa0; } .chip-green { background: var(--green-lt); color: #1e7a2e; } .chip-navy { background: #e8edf4; color: var(--navy); } .chip-gray { background: var(--gray-100); color: var(--gray-600); } .chip-amber { background: #fef4e8; color: #8a4a00; } .icon-img { height: 48px; object-fit: contain; } /* ─── LAYOUT ─────────────────────────────────────────────────────────────── */ .section { padding: 88px 0; } .section.bg-g { background: var(--gray-50); } .section.bg-navy { background: var(--navy); } .inner { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .two-col.flip { direction: rtl; } .two-col.flip > * { direction: ltr; } /* ─── SECTION TYPOGRAPHY ────────────────────────────────────────────────── */ .sec-label { font-size: 13.2px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; display: block; } .sec-label.light { color: var(--blue); } .sec-h2 { font-size: clamp(28.8px, 2.8vw, 43.2px); font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; } .sec-h2.light { color: var(--white); } .sec-desc { font-size: 19.2px; color: var(--gray-600); line-height: 1.75; max-width: 540px; } .sec-desc.light { color: rgba(255,255,255,0.60); } .sec-header { margin-bottom: 52px; } .sec-header.center { text-align: center; } .sec-header.center .sec-desc { margin: 0 auto; } /* ─── FEATURE TEXT BLOCK ─────────────────────────────────────────────────── */ .ft .sec-label { margin-bottom: 12px; } .ft h2 { font-size: clamp(26.4px, 2.5vw, 38.4px); font-weight: 700; color: var(--navy); line-height: 1.2; letter-spacing: -0.018em; margin-bottom: 14px; } .ft h2.light { color: var(--white); } .ft p { font-size: 19.2px; color: var(--gray-600); line-height: 1.75; margin-bottom: 22px; } .ft p.light { color: rgba(255,255,255,0.62); } .check-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; } .check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 18px; color: var(--gray-600); line-height: 1.5; } .check-list li.light { color: rgba(255,255,255,0.70); } .check-list li i { color: var(--green); margin-top: 2px; flex-shrink: 0; font-size: 16.8px; } .link-more { display: inline-flex; align-items: center; gap: 7px; font-size: 16.8px; font-weight: 600; color: var(--navy); text-decoration: none; transition: color 0.15s; } .link-more:hover { color: var(--blue); } .link-more i { font-size: 14.4px; transition: transform 0.15s; } .link-more:hover i { transform: translateX(3px); } .link-more.light { color: var(--blue); } /* ─── VIS PANEL (mock UI cards) ─────────────────────────────────────────── */ .vis-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.07); } .vis-header { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); padding: 11px 16px; display: flex; align-items: center; gap: 6px; } .vis-title { font-size: 14.4px; font-weight: 600; color: var(--gray-500); margin-left: 8px; } .vis-body { padding: 22px; } /* ─── CTA BAND ───────────────────────────────────────────────────────────── */ .cta-band { background: var(--navy); padding: 72px 0; } .cta-inner { max-width: 680px; margin: 0 auto; padding: 0 40px; text-align: center; } .cta-inner h2 { font-size: clamp(28.8px, 3vw, 43.2px); font-weight: 700; color: var(--white); letter-spacing: -0.02em; margin-bottom: 14px; } .cta-inner p { font-size: 20.4px; color: rgba(255,255,255,0.60); margin-bottom: 30px; } .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ─── BREADCRUMB ─────────────────────────────────────────────────────────── */ .breadcrumb { padding: 11px 0; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); } .bc-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 7px; } .bc-inner a { font-size: 15.6px; color: var(--gray-500); text-decoration: none; } .bc-inner a:hover { color: var(--navy); } .bc-sep { color: var(--gray-300); font-size: 13.2px; } .bc-current { font-size: 15.6px; color: var(--navy); font-weight: 500; } /* ─── PAGE HERO (navy, inner-page) ──────────────────────────────────────── */ .page-hero { background: var(--navy); padding: 60px 0 68px; margin-top: 64px; } .ph-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; } .ph-eyebrow { font-size: 13.2px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .ph-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--blue); border-radius: 2px; } .ph-inner h1 { font-size: clamp(33.6px, 3.5vw, 55.2px); font-weight: 700; color: var(--white); line-height: 1.1; letter-spacing: -0.022em; margin-bottom: 14px; } .ph-inner h1 strong { color: var(--blue); } .ph-desc { font-size: 20.4px; color: rgba(255,255,255,0.60); max-width: 560px; line-height: 1.75; } /* ─── SCROLL REVEAL ANIMATION ────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.from-l { opacity: 0; transform: translateX(-34px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.from-r { opacity: 0; transform: translateX( 34px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.visible { opacity: 1; transform: translate(0, 0); }