/* ================================================================ EPINIUM DESIGN SYSTEM v1 Font stack: Nunito Sans (headings 700/800) + Poppins (body) Color theming via [data-service] on ================================================================ */ /* ────────────────────────────────────────────────────────────── 1. CSS CUSTOM PROPERTIES — service tokens ────────────────────────────────────────────────────────────── */ :root { /* Default = Platform (purple) */ --ep-accent: #7C3AED; --ep-accent-sec: #A855F7; --ep-accent-dark: #5B21B6; --ep-accent-light: rgba(124,58,237,0.10); --ep-accent-light2: rgba(124,58,237,0.18); --ep-accent-gradient: linear-gradient(135deg, #A855F7, #7C3AED); --ep-accent-glow: 0 4px 24px rgba(124,58,237,0.40); --ep-border-acc: rgba(124,58,237,0.35); /* Neutral backgrounds */ --ep-bg-darkest: #06050E; --ep-bg-dark: #0D0B1E; --ep-bg-card: rgba(255,255,255,0.045); --ep-border: rgba(255,255,255,0.10); /* Text */ --ep-text-white: #FFFFFF; --ep-text-light: rgba(255,255,255,0.84); --ep-text-muted: rgba(255,255,255,0.54); --ep-text-dark: #181818; --ep-text-body: #555555; /* Shape tokens */ --ep-r-xs: 4px; --ep-r-sm: 8px; --ep-r-md: 12px; --ep-r-lg: 20px; --ep-r-xl: 28px; --ep-r-pill: 100px; /* Spacing */ --ep-section-py: 88px; --ep-container: 1240px; /* Fonts */ --ep-font-head: 'Nunito Sans', sans-serif; --ep-font-body: 'Poppins', sans-serif; /* Transitions */ --ep-t: 0.30s ease; --ep-t-fast: 0.18s ease; } /* ────────────────────────────────────────────────────────────── 2. SERVICE THEMES ────────────────────────────────────────────────────────────── */ [data-service="transform"] { --ep-accent: #2C0EFE; --ep-accent-sec: #8B24FC; --ep-accent-dark: #1A08D4; --ep-accent-light: rgba(44,14,254,0.10); --ep-accent-light2: rgba(44,14,254,0.18); --ep-accent-gradient: linear-gradient(135deg, #8B24FC, #2C0EFE); --ep-accent-glow: 0 4px 24px rgba(44,14,254,0.40); --ep-border-acc: rgba(44,14,254,0.35); } [data-service="platform"] { --ep-accent: #7C3AED; --ep-accent-sec: #A855F7; --ep-accent-dark: #5B21B6; --ep-accent-light: rgba(124,58,237,0.10); --ep-accent-light2: rgba(124,58,237,0.18); --ep-accent-gradient: linear-gradient(135deg, #A855F7, #7C3AED); --ep-accent-glow: 0 4px 24px rgba(124,58,237,0.40); --ep-border-acc: rgba(124,58,237,0.35); } [data-service="training"] { --ep-accent: #1AB69D; --ep-accent-sec: #34D399; --ep-accent-dark: #0E9580; --ep-accent-light: rgba(26,182,157,0.10); --ep-accent-light2: rgba(26,182,157,0.18); --ep-accent-gradient: linear-gradient(135deg, #34D399, #1AB69D); --ep-accent-glow: 0 4px 24px rgba(26,182,157,0.40); --ep-border-acc: rgba(26,182,157,0.35); } /* ────────────────────────────────────────────────────────────── 3. LAYOUT RESET — full-bleed (overrides WP/Elementor wrappers) ────────────────────────────────────────────────────────────── */ html, body { margin: 0 !important; padding: 0 !important; } .wrap, .content, .inner-container, .content-editor { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .entry-title, .entry-header, h1.entry-title, h1.page-title { display: none !important; } /* ────────────────────────────────────────────────────────────── 4. TYPOGRAPHY — global font normalization ────────────────────────────────────────────────────────────── */ /* Headings → Nunito Sans */ h1, h2, h3, .elementor-heading-title, .elementor-section h1, .elementor-section h2, .elementor-section h3 { font-family: var(--ep-font-head) !important; font-weight: 800; } h4, h5, h6, .elementor-section h4, .elementor-section h5, .elementor-section h6 { font-family: var(--ep-font-head) !important; font-weight: 700; } /* Body → Poppins */ body, .elementor-section p, .elementor-section li, .elementor-section span:not(.elementor-heading-title) { font-family: var(--ep-font-body); } /* Gradient text utility */ .ep-text-grad { background: var(--ep-accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ────────────────────────────────────────────────────────────── 5. SHARED KEYFRAME ANIMATIONS ────────────────────────────────────────────────────────────── */ @keyframes ep-float-orb { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.06); } 66% { transform: translate(-20px, 15px) scale(0.96); } } @keyframes ep-pulse-glow { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes ep-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes ep-shimmer-sweep { 0%, 100% { left: -75%; } 45%, 55% { left: 150%; } } @keyframes ep-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes ep-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ep-particle-float { 0%, 100% { transform: translateY(0); opacity: 0.40; } 50% { transform: translateY(-16px); opacity: 0.85; } } /* ────────────────────────────────────────────────────────────── 6. SHARED COMPONENTS ────────────────────────────────────────────────────────────── */ /* — Buttons — */ .ep-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ep-font-head); font-size: 15px; font-weight: 700; letter-spacing: 0.4px; text-decoration: none !important; border-radius: var(--ep-r-sm); padding: 14px 28px; cursor: pointer; border: 2px solid transparent; transition: transform var(--ep-t-fast), filter var(--ep-t), box-shadow var(--ep-t), background var(--ep-t), color var(--ep-t), border-color var(--ep-t); position: relative; overflow: hidden; } .ep-btn:hover { transform: translateY(-2px); } /* Primary — gradient fill */ .ep-btn-primary { background: var(--ep-accent-gradient); color: #fff !important; border-color: transparent; } .ep-btn-primary::after { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.22), transparent); transform: skewX(-15deg); animation: ep-shimmer-sweep 4s ease-in-out infinite 1.2s; } .ep-btn-primary:hover { filter: brightness(1.12); color: #fff !important; } /* Outline — service accent */ .ep-btn-outline { background: transparent; color: var(--ep-accent) !important; border-color: var(--ep-accent); } .ep-btn-outline:hover { background: var(--ep-accent); color: #fff !important; } /* Ghost — white on dark */ .ep-btn-ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,0.55); } .ep-btn-ghost:hover { background: #fff; color: var(--ep-text-dark) !important; } /* — Badge — */ .ep-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ep-accent-light); border: 1px solid var(--ep-border-acc); border-radius: var(--ep-r-pill); padding: 6px 16px 6px 10px; font-family: var(--ep-font-body); font-size: 12px; font-weight: 600; color: var(--ep-accent); letter-spacing: 0.4px; text-transform: uppercase; } .ep-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ep-accent); flex-shrink: 0; animation: ep-pulse-glow 2.4s ease-in-out infinite; } /* — Cards — */ .ep-card { background: var(--ep-bg-card); border: 1px solid var(--ep-border); border-radius: var(--ep-r-lg); padding: 28px 24px; transition: border-color var(--ep-t), transform var(--ep-t), background var(--ep-t); } .ep-card:hover { border-color: var(--ep-border-acc); background: var(--ep-accent-light); transform: translateY(-4px); } .ep-card-solid { background: #fff; border-radius: var(--ep-r-lg); padding: 28px 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.07); transition: transform var(--ep-t), box-shadow var(--ep-t); } .ep-card-solid:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); } /* — Layout helpers — */ .ep-section { padding: var(--ep-section-py) 0; } .ep-section-dark { background: var(--ep-bg-darkest); color: #fff; } .ep-section-dark-mid { background: var(--ep-bg-dark); color: #fff; } .ep-section-light { background: #F5F7FC; } .ep-section-white { background: #fff; } .ep-container { max-width: var(--ep-container); margin: 0 auto; padding: 0 24px; width: 100%; box-sizing: border-box; } /* — Typography helpers — */ .ep-eyebrow { font-family: var(--ep-font-body); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ep-accent); margin-bottom: 14px; } .ep-h1 { font-family: var(--ep-font-head); font-size: clamp(2.5rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.10; letter-spacing: -0.5px; color: #fff; margin-bottom: 20px; } .ep-h2 { font-family: var(--ep-font-head); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.3px; color: #fff; margin-bottom: 16px; } .ep-h2-dark { color: var(--ep-text-dark); } .ep-h3 { font-family: var(--ep-font-head); font-size: clamp(1.3rem, 2.5vw, 1.75rem); font-weight: 700; color: #fff; } .ep-lead { font-family: var(--ep-font-body); font-size: clamp(0.98rem, 1.8vw, 1.13rem); line-height: 1.78; color: var(--ep-text-light); margin-bottom: 32px; } .ep-lead-dark { color: var(--ep-text-body); } /* — Stats — */ .ep-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; text-align: center; } .ep-stat-num { font-family: var(--ep-font-head); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; background: var(--ep-accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 6px; } .ep-stat-label { font-family: var(--ep-font-body); font-size: 0.83rem; color: var(--ep-text-muted); line-height: 1.45; } .ep-stat-label-dark { color: var(--ep-text-body); } /* — Marquee — */ .ep-marquee { overflow: hidden; width: 100%; } .ep-marquee-track { display: flex; gap: 52px; width: max-content; animation: ep-marquee 32s linear infinite; } .ep-marquee-track:hover { animation-play-state: paused; } .ep-marquee-item { height: 34px; opacity: 0.50; filter: grayscale(1); transition: opacity var(--ep-t), filter var(--ep-t); flex-shrink: 0; } .ep-marquee-item:hover { opacity: 1; filter: none; } /* — Testimonial cards — */ .ep-testi-card { background: var(--ep-bg-card); border: 1px solid var(--ep-border); border-radius: var(--ep-r-md); padding: 28px 24px; transition: border-color var(--ep-t); } .ep-testi-card:hover { border-color: var(--ep-border-acc); } .ep-testi-stars { color: #FFB800; font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; } .ep-testi-quote { font-family: var(--ep-font-body); font-size: 0.91rem; line-height: 1.78; color: var(--ep-text-light); font-style: italic; margin-bottom: 20px; } .ep-testi-name { font-family: var(--ep-font-head); font-size: 0.94rem; font-weight: 700; color: #fff; } .ep-testi-role { font-family: var(--ep-font-body); font-size: 0.79rem; color: var(--ep-text-muted); margin-top: 3px; } /* — CTA band — */ .ep-cta-band { padding: 100px 0; background: var(--ep-bg-darkest); text-align: center; position: relative; overflow: hidden; } .ep-cta-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; width: 600px; height: 600px; background: var(--ep-accent-light2); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ep-float-orb 16s ease-in-out infinite; } .ep-cta-inner { position: relative; z-index: 2; max-width: 740px; margin: 0 auto; padding: 0 24px; } /* — Grid helpers — */ .ep-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .ep-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ep-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .ep-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 24px; } /* — Floating orbs (hero decoration) — */ .ep-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .ep-orb-1 { width: 460px; height: 460px; background: var(--ep-accent-light2); animation: ep-float-orb 14s ease-in-out infinite; } .ep-orb-2 { width: 300px; height: 300px; background: var(--ep-accent-light); animation: ep-float-orb 18s ease-in-out infinite reverse; } /* — Divider — */ .ep-divider { height: 1px; background: var(--ep-border); margin: 48px 0; } /* — Legacy compat: stratus buttons gain ep-btn shimmer treatment — */ .stratus-btn { font-family: var(--ep-font-head) !important; font-weight: 700 !important; letter-spacing: 0.4px !important; } /* ────────────────────────────────────────────────────────────── 7. RESPONSIVE ────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .ep-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --ep-section-py: 60px; } .ep-grid-2, .ep-grid-3, .ep-grid-4 { grid-template-columns: 1fr; } .ep-stats { gap: 32px; } .ep-btn { font-size: 14px; padding: 12px 22px; } .ep-h1 { font-size: 2.2rem; } .ep-h2 { font-size: 1.75rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ────────────────────────────────────────────────────────────── 8. LIGHT-SECTION UTILITIES (hubs + landings on white bg) ────────────────────────────────────────────────────────────── */ /* White elevated card — pops on BOTH white and tinted (--off) sections. (Previously bg == --off per service → cards vanished on off sections.) */ .ep-card-light { background: #fff; border: 1px solid rgba(17,24,39,0.07); border-radius: var(--ep-r-lg); padding: 28px; box-shadow: 0 2px 14px rgba(17,24,39,0.05); transition: transform var(--ep-t), box-shadow var(--ep-t); } .ep-card-light:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(44,14,254,0.11); } [data-service="training"] .ep-card-light:hover { box-shadow: 0 14px 36px rgba(26,182,157,0.14); } [data-service="platform"] .ep-card-light:hover { box-shadow: 0 14px 36px rgba(124,58,237,0.11); } .ep-card-accent-l { background: #fff; border-radius: var(--ep-r-md); padding: 28px 24px; border-left: 3px solid var(--ep-accent); box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: transform var(--ep-t), box-shadow var(--ep-t); } .ep-card-accent-l:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(44,14,254,0.10); } .ep-step { background: #fff; border-radius: var(--ep-r-lg); padding: 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: transform var(--ep-t); } .ep-step:hover { transform: translateY(-3px); } .ep-step-num { display: block; font-size: 2.4rem; font-weight: 800; font-family: var(--ep-font-head); background: var(--ep-accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 12px; } .ep-step-title { font-family: var(--ep-font-head); font-size: 1rem; font-weight: 700; color: #1d2023; margin-bottom: 6px; } .ep-step-body { font-size: .9rem; color: #666; line-height: 1.65; } .ep-stat-num { font-family: var(--ep-font-head); font-size: clamp(2.8rem,5vw,4rem); font-weight: 800; background: var(--ep-accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .ep-stat-label { font-family: var(--ep-font-body); font-size: .88rem; color: var(--ep-text-light); margin-top: 8px; line-height: 1.55; } details.ep-faq-item { border-bottom: 1px solid #e8edf5; } details.ep-faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 26px; cursor: pointer; font-family: var(--ep-font-head); font-size: 1.05rem; font-weight: 700; color: #1d2023; line-height: 1.4; user-select: none; transition: color var(--ep-t-fast); } details.ep-faq-item summary::-webkit-details-marker { display: none; } details.ep-faq-item summary::after { content: '+'; flex-shrink: 0; color: var(--ep-accent); font-size: 1.5rem; font-weight: 300; line-height: 1; transition: transform var(--ep-t); } details.ep-faq-item[open] summary::after { transform: rotate(45deg); } details.ep-faq-item summary:hover { color: var(--ep-accent); } .ep-faq-body { padding-bottom: 22px; font-size: .95rem; color: #555; line-height: 1.75; font-family: var(--ep-font-body); } .ep-mini-card { background: var(--ep-bg-card); border: 1px solid var(--ep-border); border-radius: var(--ep-r-md); padding: 16px 20px; display: flex; align-items: center; gap: 12px; font-family: var(--ep-font-head); font-size: .92rem; font-weight: 700; color: var(--ep-text-light); transition: border-color var(--ep-t); } .ep-mini-card:hover { border-color: var(--ep-border-acc); } .ep-mini-card-icon { font-size: 1.4rem; flex-shrink: 0; } .ep-section--white { background: #fff; } .ep-section--off { background: #f4f6ff; } .ep-section--dark { background: var(--ep-bg-dark); } .ep-section--darkest { background: var(--ep-bg-darkest); } [data-service="training"] .ep-section--off { background: #f0faf8; } [data-service="platform"] .ep-section--off { background: #f5f0ff; } /* ── Service-specific hero + CTA color overrides ──────────────────────────── acc-home.css/.acc.css use hardcoded Platform purple; these rules win via [data-service] higher specificity and load-order (link tag after bundles). ──────────────────────────────────────────────────────────────────────── */ [data-service="transform"] .ep-hero-bg { background: linear-gradient(135deg, #4B0EFE 0%, #2C0EFE 52%, #080520 100%); } /* Highlight must contrast against the saturated hero bg — light tint, not same-hue. !important + higher specificity beats the acc-home2.css v6 `!important` rule. */ [data-service="transform"] .ep-hero h1 .highlight { background: linear-gradient(90deg, #ffffff, #bcd0ff) !important; background-image: linear-gradient(90deg, #ffffff, #bcd0ff) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } [data-service="transform"] .stratus-btn-solid { background: linear-gradient(135deg, #8B24FC, #2C0EFE); animation-name: pulse-glow-transform; } @keyframes pulse-glow-transform { 0%,100% { box-shadow: 0 4px 20px rgba(44,14,254,0.35); } 50% { box-shadow: 0 6px 36px rgba(44,14,254,0.65), 0 0 60px rgba(139,36,252,0.2); } } [data-service="training"] .ep-hero-bg { background: linear-gradient(135deg, #0E9580 0%, #1AB69D 40%, #080520 100%); } [data-service="training"] .ep-hero h1 .highlight { background: linear-gradient(90deg, #ffffff, #a3f5e2) !important; background-image: linear-gradient(90deg, #ffffff, #a3f5e2) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } [data-service="training"] .stratus-btn-solid { background: linear-gradient(135deg, #34D399, #1AB69D); animation-name: pulse-glow-training; } @keyframes pulse-glow-training { 0%,100% { box-shadow: 0 4px 20px rgba(26,182,157,0.35); } 50% { box-shadow: 0 6px 36px rgba(26,182,157,0.65), 0 0 60px rgba(52,211,153,0.2); } } /* Service-aware aurora glow on dark sections (CaseStudies, FinalCTA). Base aurora is purple/magenta (acc-home.css) → looked like Platform everywhere. */ [data-service="transform"] .ep-aurora { background: radial-gradient(38% 55% at 18% 28%, rgba(75,14,254,.52), transparent 60%), radial-gradient(34% 48% at 82% 18%, rgba(139,36,252,.40), transparent 60%), radial-gradient(42% 52% at 62% 88%, rgba(44,14,254,.30), transparent 62%); } [data-service="training"] .ep-aurora { background: radial-gradient(38% 55% at 18% 28%, rgba(14,149,128,.50), transparent 60%), radial-gradient(34% 48% at 82% 18%, rgba(52,211,153,.42), transparent 60%), radial-gradient(42% 52% at 62% 88%, rgba(26,182,157,.30), transparent 62%); } /* Stat numbers must follow the service accent. acc-home2.css hardcodes a teal gradient on .ep-stat-num and loads later, so we need [data-service] specificity. */ [data-service] .ep-stat-num { background: var(--ep-accent-gradient); background-image: var(--ep-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Gradient-text title highlights (FinalCTA/CTABand/SectionHead) must follow the service accent too — acc-home2.css hardcodes purple/teal and loads later. */ [data-service] .ep-grad-text, [data-service] .ep-grad-text-light { background: var(--ep-accent-gradient); background-image: var(--ep-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ── Comparison table (service vs. alternatives) ────────────────────────── */ .ep-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; margin-top: 8px; box-shadow: 0 4px 30px rgba(0,0,0,0.06); } .ep-table th { padding: 16px 20px; font-size: .85rem; font-weight: 700; text-align: left; font-family: var(--ep-font-head); } .ep-table th:first-child { background: #f7f9fc; color: #555; } .ep-table th:not(:first-child):not(:last-child) { background: #efefef; color: #888; } .ep-table th:last-child { background: var(--ep-accent-gradient); color: #fff; } .ep-table td { padding: 14px 20px; font-size: .85rem; border-top: 1px solid #eee; color: #555; } .ep-table tr:nth-child(even) td { background: #fafafa; } .ep-table td:first-child { font-weight: 600; color: #1a1a2e; } .ep-table td:last-child { color: var(--ep-accent); font-weight: 700; } @media (max-width: 767px) { .ep-table { font-size: .78rem; overflow-x: auto; display: block; } .ep-table th, .ep-table td { padding: 10px 12px; } } /* ── Photo-background hero (Transform — ai-director style) ──────────────── */ .ep-hero--photo .ep-hero-bg { display: none; } .ep-hero-photo { position: absolute; left: 0; top: -14%; z-index: 0; width: 100%; height: 128%; object-fit: cover; object-position: center; will-change: transform; } .ep-hero-photo-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, rgba(7,6,24,.90) 0%, rgba(9,9,26,.80) 50%, rgba(9,9,26,.66) 100%); } [data-service="transform"] .ep-hero-photo-overlay { background: radial-gradient(60% 80% at 78% 28%, rgba(44,14,254,.34), transparent 70%), linear-gradient(160deg, rgba(7,6,24,.90) 0%, rgba(9,9,26,.80) 50%, rgba(12,8,40,.66) 100%); } [data-service="training"] .ep-hero-photo-overlay { background: radial-gradient(60% 80% at 78% 28%, rgba(26,182,157,.32), transparent 70%), linear-gradient(160deg, rgba(6,15,15,.90) 0%, rgba(8,18,18,.80) 50%, rgba(8,22,20,.66) 100%); } /* ── Course catalog cards (Training) ───────────────────────────────────── */ .ep-course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .ep-course-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(17,24,39,.07); border-radius: var(--ep-r-lg); overflow: hidden; box-shadow: 0 2px 14px rgba(17,24,39,.05); text-decoration: none; transition: transform var(--ep-t), box-shadow var(--ep-t); } .ep-course-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px var(--ep-accent-light2); } .ep-course-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; } .ep-course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .ep-course-card:hover .ep-course-thumb img { transform: scale(1.05); } .ep-course-cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.93); color: var(--ep-accent-dark); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; } .ep-course-lvl { position: absolute; top: 12px; right: 12px; background: rgba(10,10,26,.60); color: #fff; font-size: .6rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; } .ep-course-body { padding: 15px 18px 18px; display: flex; flex-direction: column; flex: 1; } .ep-course-rating { font-size: .72rem; color: #999; margin-bottom: 6px; } .ep-course-rating b { color: #FFA41B; letter-spacing: 1px; font-weight: 700; } .ep-course-title { font-family: var(--ep-font-head); font-size: .96rem; font-weight: 700; color: #1a1a2e; line-height: 1.35; margin: 0 0 14px; } .ep-course-meta { margin-top: auto; padding-top: 13px; border-top: 1px solid #eef1f6; display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: #777; } .ep-course-meta .ep-course-stats { display: flex; gap: 14px; } .ep-course-link { color: var(--ep-accent); font-weight: 700; white-space: nowrap; } @media (max-width: 1100px) { .ep-course-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .ep-course-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .ep-course-grid { grid-template-columns: 1fr; } } /* Decorative orbs/particles sit ABOVE the photo overlay so photo heroes keep depth */ .ep-hero--photo .hero-orb, .ep-hero--photo .hero-particle, .ep-hero--photo .ep-shape { z-index: 1; } /* ── OUR METHOD — connected timeline (journey) ─────────────────────────── */ .ep-method { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } .ep-method::before { content: ""; position: absolute; top: 28px; left: 12%; right: 12%; height: 2px; z-index: 0; background: linear-gradient(90deg, transparent, var(--ep-accent), transparent); } .ep-method-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .ep-method-node { width: 56px; height: 56px; border-radius: 50%; background: var(--ep-accent-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--ep-font-head); font-weight: 800; font-size: 1.15rem; box-shadow: 0 10px 26px var(--ep-accent-light2); margin-bottom: 22px; border: 4px solid #fff; flex-shrink: 0; } .ep-method-card { background: #fff; border: 1px solid rgba(17,24,39,.07); border-radius: 16px; padding: 24px 22px; width: 100%; box-shadow: 0 2px 14px rgba(17,24,39,.05); transition: transform var(--ep-t), box-shadow var(--ep-t); } .ep-method-step:hover .ep-method-card { transform: translateY(-4px); box-shadow: 0 16px 36px var(--ep-accent-light2); } .ep-method-title { font-family: var(--ep-font-head); font-size: 1.05rem; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; } .ep-method-body { font-size: .9rem; color: #666; line-height: 1.6; margin: 0; } @media (max-width: 860px) { .ep-method { grid-template-columns: repeat(2, 1fr); } .ep-method::before { display: none; } } @media (max-width: 520px) { .ep-method { grid-template-columns: 1fr; } } @media (max-width: 768px) { .ep-step { padding: 24px; } }