/* ========================================================= EduServ — Design tokens ========================================================= */ :root { --esv-ink: #0B0D12; --esv-ink-soft: #1C2029; --esv-gray-600: #5B6472; --esv-gray-400: #9AA2AF; --esv-gray-200: #E7E9EE; --esv-gray-100: #F3F4F7; --esv-paper: #FFFFFF; --esv-blue: #2F5DFA; --esv-blue-dark: #2547CC; --esv-blue-soft: #EAF0FF; --esv-font-display: "Plus Jakarta Sans", "Inter", sans-serif; --esv-font-body: "Inter", sans-serif; --esv-font-mono: "IBM Plex Mono", monospace; --esv-radius-sm: 10px; --esv-radius-md: 16px; --esv-radius-lg: 28px; --esv-radius-pill: 999px; --esv-container: 1240px; } /* Dark mode variables (toggled via data-theme="dark" on ) */ html[data-theme="dark"] { --esv-ink: #F5F6F8; --esv-ink-soft: #E4E6EB; --esv-gray-600: #A7AEBB; --esv-gray-400: #6B7280; --esv-gray-200: #262B36; --esv-gray-100: #171A21; --esv-paper: #0F1218; --esv-blue-soft: #182342; } /* ========================================================= Reset & base ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--esv-font-body); color: var(--esv-ink); background: var(--esv-paper); -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } :focus-visible { outline: 2px solid var(--esv-blue); outline-offset: 2px; } .esv-container { max-width: var(--esv-container); margin: 0 auto; padding: 0 32px; } /* ========================================================= Header ========================================================= */ .esv-header { position: sticky; top: 0; z-index: 100; background: var(--esv-paper); border-bottom: 1px solid var(--esv-gray-200); } .esv-header__inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 24px; } .esv-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .esv-brand__mark { width: 40px; height: 40px; border-radius: 50%; background: var(--esv-ink); color: var(--esv-paper); display: flex; align-items: center; justify-content: center; font-family: var(--esv-font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; } .esv-brand__name { font-family: var(--esv-font-display); font-weight: 700; font-size: 18px; color: var(--esv-ink); } .esv-nav__list { display: flex; align-items: center; gap: 36px; } .esv-nav__list a { font-size: 15px; font-weight: 500; color: var(--esv-gray-600); transition: color .15s ease; } .esv-nav__list a:hover { color: var(--esv-ink); } .esv-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .esv-theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--esv-gray-200); background: transparent; color: var(--esv-gray-600); display: flex; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease; } .esv-theme-toggle:hover { color: var(--esv-ink); border-color: var(--esv-gray-400); } .esv-nav-toggle { display: none; width: 38px; height: 38px; border: none; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .esv-nav-toggle span { width: 20px; height: 2px; background: var(--esv-ink); border-radius: 2px; } /* ========================================================= Buttons ========================================================= */ .esv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--esv-radius-pill); font-weight: 600; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; } .esv-btn:active { transform: translateY(1px); } .esv-btn--sm { padding: 9px 20px; font-size: 14px; } .esv-btn--lg { padding: 16px 28px; font-size: 16px; } .esv-btn--primary { background: var(--esv-blue); color: #fff; border: 1px solid var(--esv-blue); } .esv-btn--primary:hover { background: var(--esv-blue-dark); border-color: var(--esv-blue-dark); } .esv-btn--outline { background: transparent; color: var(--esv-ink); border: 1px solid var(--esv-gray-200); } .esv-btn--outline:hover { border-color: var(--esv-gray-400); } .esv-link-download { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--esv-ink); padding: 16px 4px; } .esv-link-download:hover { color: var(--esv-blue); } /* ========================================================= Hero ========================================================= */ .esv-hero { position: relative; overflow: hidden; padding: 96px 0 120px; } .esv-hero__bg { position: absolute; inset: 0; background-image: linear-gradient(var(--esv-gray-200) 1px, transparent 1px), linear-gradient(90deg, var(--esv-gray-200) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 20% 30%, #000 40%, transparent 85%); mask-image: radial-gradient(ellipse 70% 60% at 20% 30%, #000 40%, transparent 85%); opacity: .8; } .esv-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 56px; align-items: center; } .esv-hero__content { max-width: 620px; } .esv-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--esv-radius-pill); border: 1px solid var(--esv-gray-200); background: var(--esv-paper); font-size: 13px; font-weight: 500; color: var(--esv-gray-600); margin-bottom: 28px; } .esv-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--esv-blue); flex-shrink: 0; } .esv-hero__title { font-family: var(--esv-font-display); font-weight: 800; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 24px; } .esv-hero__title-line { display: block; color: var(--esv-ink); } .esv-hero__title-line--accent { color: var(--esv-blue); } .esv-hero__subtitle { font-size: 18px; line-height: 1.6; color: var(--esv-gray-600); margin: 0 0 36px; } .esv-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; } .esv-hero__proof { display: flex; align-items: center; gap: 18px; margin-top: 40px; flex-wrap: wrap; } .esv-avatar-stack { display: flex; } .esv-avatar-stack__item { width: 38px; height: 38px; border-radius: 50%; background: var(--esv-gray-100); border: 2px solid var(--esv-paper); color: var(--esv-gray-600); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; margin-left: -10px; } .esv-avatar-stack__item:first-child { margin-left: 0; } .esv-hero__rating { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .esv-hero__rating-line { display: flex; align-items: center; gap: 6px; } .esv-stars { color: var(--esv-blue); font-size: 14px; letter-spacing: 2px; line-height: 1; } .esv-hero__rating-score { font-weight: 700; color: var(--esv-ink); font-size: 14px; } .esv-hero__rating-text { color: var(--esv-gray-600); } .esv-hero__media { position: relative; } .esv-hero__photo-card { position: relative; border-radius: var(--esv-radius-lg); background: var(--esv-gray-100); aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(11, 13, 18, 0.18); } .esv-hero__photo-card img { width: 100%; height: 100%; object-fit: cover; } .esv-hero__id-card { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--esv-radius-md); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); box-shadow: 0 16px 32px -12px rgba(11, 13, 18, 0.25); } html[data-theme="dark"] .esv-hero__id-card { background: rgba(15, 18, 24, 0.88); } .esv-hero__id-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--esv-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .esv-hero__id-text { display: flex; flex-direction: column; gap: 1px; font-size: 14px; } .esv-hero__id-text strong { color: var(--esv-ink); font-weight: 700; } .esv-hero__id-text span { color: var(--esv-gray-600); font-size: 13px; } .esv-hero__photo-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--esv-gray-400); text-align: center; padding: 24px; font-size: 14px; } /* ========================================================= About ========================================================= */ .esv-about { padding: 40px 0 120px; } .esv-about__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr); gap: 64px; align-items: start; } .esv-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--esv-font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--esv-blue); margin-bottom: 18px; } .esv-eyebrow__rule { width: 22px; height: 2px; background: var(--esv-blue); display: inline-block; } .esv-about__title { font-family: var(--esv-font-display); font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 24px; color: var(--esv-ink); } .esv-about__paragraph { font-size: 16px; line-height: 1.7; color: var(--esv-gray-600); margin: 0 0 18px; max-width: 620px; } .esv-role-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .esv-role-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--esv-radius-sm); background: var(--esv-gray-100); color: var(--esv-ink); font-size: 14px; font-weight: 500; } .esv-role-pill svg { color: var(--esv-blue); flex-shrink: 0; } .esv-about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .esv-stat-card { padding: 28px 22px; border-radius: var(--esv-radius-md); background: var(--esv-gray-100); display: flex; flex-direction: column; gap: 6px; } .esv-stat-card__number { font-family: var(--esv-font-display); font-weight: 800; font-size: clamp(30px, 3vw, 40px); color: var(--esv-ink); letter-spacing: -0.01em; } .esv-stat-card__label { font-size: 14px; color: var(--esv-gray-600); } /* ========================================================= Services ========================================================= */ .esv-services { padding: 100px 0 110px; background: var(--esv-gray-100); } .esv-section-heading { max-width: 780px; margin: 0 0 56px; } .esv-section-heading--center { margin-left: auto; margin-right: auto; text-align: center; } .esv-eyebrow--center { justify-content: center; } .esv-section-heading__title { font-family: var(--esv-font-display); font-weight: 800; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.1; letter-spacing: -0.015em; color: var(--esv-ink); margin: 0 0 20px; } .esv-section-heading__subtitle { font-size: 18px; line-height: 1.6; color: var(--esv-gray-600); margin: 0 auto; max-width: 620px; } .esv-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .esv-service-card { background: var(--esv-paper); border-radius: var(--esv-radius-lg); padding: 32px 28px; border: 1px solid var(--esv-gray-200); } .esv-service-card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--esv-blue-soft); color: var(--esv-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .esv-service-card__title { font-family: var(--esv-font-display); font-weight: 700; font-size: 20px; color: var(--esv-ink); margin: 0 0 10px; } .esv-service-card__excerpt { font-size: 15px; line-height: 1.65; color: var(--esv-gray-600); margin: 0; } /* ========================================================= Courses ========================================================= */ .esv-courses { padding: 100px 0 120px; background: var(--esv-paper); } .esv-courses__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; } .esv-filter-pills { display: flex; flex-wrap: wrap; gap: 10px; } .esv-filter-pill { border: 1px solid var(--esv-gray-200); background: var(--esv-paper); color: var(--esv-gray-600); border-radius: var(--esv-radius-pill); padding: 10px 20px; font-size: 14px; font-weight: 500; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .esv-filter-pill:hover { border-color: var(--esv-gray-400); } .esv-filter-pill.is-active { background: var(--esv-ink); color: var(--esv-paper); border-color: var(--esv-ink); } .esv-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--esv-gray-200); border-radius: var(--esv-radius-pill); padding: 10px 18px; color: var(--esv-gray-400); min-width: 240px; } .esv-search input { border: none; outline: none; background: transparent; font-size: 14px; color: var(--esv-ink); width: 100%; } .esv-search input::placeholder { color: var(--esv-gray-400); } .esv-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .esv-course-card { display: flex; flex-direction: column; background: var(--esv-paper); border: 1px solid var(--esv-gray-200); border-radius: var(--esv-radius-lg); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .esv-course-card:hover { box-shadow: 0 24px 48px -24px rgba(11,13,18,0.18); transform: translateY(-2px); } .esv-course-card__media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(155deg, var(--esv-blue-soft), #dfe7ff 70%); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; } .esv-course-card__cap { color: #93a9f6; } .esv-course-card__badge { position: absolute; top: 16px; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: var(--esv-radius-pill); } .esv-course-card__badge--category { left: 16px; background: var(--esv-paper); color: var(--esv-ink); } .esv-course-card__badge--price { right: 16px; background: var(--esv-ink); color: #fff; } .esv-course-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .esv-course-card__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--esv-gray-600); margin-bottom: 6px; } .esv-course-card__meta-item { display: inline-flex; align-items: center; gap: 5px; } .esv-course-card__title { font-family: var(--esv-font-display); font-weight: 700; font-size: 19px; color: var(--esv-ink); margin: 0 0 6px; } .esv-course-card__instructor { font-size: 14px; color: var(--esv-gray-600); margin: 0 0 12px; } .esv-course-card__rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--esv-gray-600); margin: 0 0 18px; } .esv-course-card__rating svg { color: var(--esv-blue); } .esv-course-card__rating strong { color: var(--esv-ink); } .esv-course-card__cta { width: 100%; margin-top: auto; padding: 13px 20px; } .esv-btn--dark { background: var(--esv-ink); color: #fff; } .esv-course-empty-filtered { text-align: center; color: var(--esv-gray-600); padding: 40px 0 0; } .esv-empty-state { text-align: center; max-width: 420px; margin: 0 auto; padding: 60px 24px; border: 1px dashed var(--esv-gray-200); border-radius: var(--esv-radius-lg); } .esv-empty-state__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--esv-gray-100); color: var(--esv-gray-400); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .esv-empty-state h3 { font-family: var(--esv-font-display); font-size: 20px; margin: 0 0 8px; color: var(--esv-ink); } .esv-empty-state p { font-size: 14px; color: var(--esv-gray-600); margin: 0; } .esv-empty-state a { color: var(--esv-blue); font-weight: 600; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 960px) { .esv-about__inner { grid-template-columns: 1fr; } .esv-service-grid { grid-template-columns: 1fr 1fr; } .esv-course-grid { grid-template-columns: 1fr 1fr; } .esv-courses__toolbar { flex-direction: column; align-items: stretch; } .esv-nav { display: none; } .esv-nav.esv-nav--open { display: block; position: absolute; top: 84px; left: 0; right: 0; background: var(--esv-paper); border-bottom: 1px solid var(--esv-gray-200); padding: 16px 32px 24px; } .esv-nav--open .esv-nav__list { flex-direction: column; align-items: flex-start; gap: 18px; } .esv-nav-toggle { display: flex; } .esv-hero__inner { grid-template-columns: 1fr; } .esv-hero__media { order: -1; max-width: 420px; margin: 0 auto; } } .esv-footer { border-top: 1px solid var(--esv-gray-200); padding: 28px 0; } .esv-footer__inner { font-size: 14px; color: var(--esv-gray-600); } @media (max-width: 560px) { .esv-container { padding: 0 20px; } .esv-hero { padding: 56px 0 72px; } .esv-btn--lg { padding: 14px 22px; font-size: 15px; } .esv-about__stats { grid-template-columns: 1fr 1fr; gap: 12px; } .esv-stat-card { padding: 20px 16px; } .esv-hero__id-card { flex-wrap: wrap; } .esv-service-grid { grid-template-columns: 1fr; } .esv-course-grid { grid-template-columns: 1fr; } }