/* ============================================================================= ElectricianU Style Child — v3.css (BLUE-FORWARD — same layout as v2, restrained yellow) Loads ONLY when SITE_DESIGN = 'v3'. ┌─────────────────────────────────────────────────────────────────────────┐ │ DESIGN TOKENS — edit THIS block to re-skin the whole v2 site at once. │ └─────────────────────────────────────────────────────────────────────────┘ ========================================================================== */ :root { /* Brand stays the anchor; add a high-energy "volt" accent. */ --v3-blue: #1363DF; --v3-blue-hover: #1E72F5; --v3-blue-deep: #0A2A66; --v3-volt: #F5A300; /* gold ACCENT only — used sparingly */ /* amber accent: CTAs, progress, gamification (aligned to homepage) */ --v3-volt-hover: #FFB827; --v3-dark: #0B0E14; /* immersive near-black base */ --v3-dark-2: #12161F; --v3-dark-3: #1A2030; /* card on dark */ --v3-grey: #F4F6FB; --v3-line: #E5E9F2; --v3-line-dark: #242C3C; --v3-white: #FFFFFF; --v3-text: #141A24; --v3-text-soft: #59657A; --v3-onDark: #EEF2F9; --v3-onDark-soft: #A4B0C4; --v3-success: #25B36B; /* Type — modern variable-style stack. Swap to a self-hosted variable font later by editing these two lines only. */ --v3-font-head: "Lexend Deca", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --v3-font-body: "Lexend Deca", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Fluid type scale (scales with viewport) */ --v3-display: clamp(2.6rem, 6vw, 4.75rem); --v3-h1: clamp(2.1rem, 4.5vw, 3.25rem); --v3-h2: clamp(1.7rem, 3.2vw, 2.5rem); --v3-h3: clamp(1.25rem, 2vw, 1.6rem); --v3-h4: 1.15rem; --v3-body: 1.075rem; --v3-small: 0.875rem; --v3-pad: clamp(1rem, 4vw, 2rem); --v3-section: clamp(3.5rem, 8vw, 6.5rem); --v3-max: 1240px; --v3-radius: 10px; --v3-radius-lg: 22px; --v3-radius-pill: 999px; --v3-shadow: 0 2px 6px rgba(11,14,20,.06), 0 14px 40px rgba(11,14,20,.10); --v3-shadow-volt: 0 8px 24px rgba(255,180,0,.28); --v3-header-h: 64px; --v3-ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Base ---------- */ body.site-design-v3 { font-family: var(--v3-font-body); font-size: var(--v3-body); line-height: 1.62; color: var(--v3-text); background: var(--v3-white); } .site-design-v3 h1,.site-design-v3 h2,.site-design-v3 h3,.site-design-v3 h4 { font-family: var(--v3-font-head); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--v3-text); } .site-design-v3 a { color: var(--v3-blue); text-decoration: none; } .site-design-v3 a:hover { color: var(--v3-blue-hover); } .site-design-v3 img { max-width:100%; height:auto; } .site-design-v3 .eu-wrap, .site-design-v3 .inside-article, .site-design-v3 .eu-section-inner { max-width: var(--v3-max); margin-inline:auto; padding-inline: var(--v3-pad); } .site-design-v3 a:focus-visible, .site-design-v3 button:focus-visible, .site-design-v3 input:focus-visible { outline: 3px solid var(--v3-volt); outline-offset: 2px; } /* ---------- Buttons ---------- */ .site-design-v3 .eu-btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--v3-font-head); font-weight:700; font-size:.85rem; padding:.5rem 1rem; border-radius:var(--v3-radius-pill); border:2px solid transparent; cursor:pointer; line-height:1; white-space:nowrap; transition: transform .15s var(--v3-ease), background .15s, box-shadow .2s, color .15s; } .site-design-v3 .eu-btn:hover { transform: translateY(-2px); } .site-design-v3 .eu-btn-primary { background: var(--v3-volt); color:#1a1300; box-shadow: var(--v3-shadow-volt); } .site-design-v3 .eu-btn-primary:hover { background: var(--v3-volt-hover); color:#1a1300; } .site-design-v3 .eu-btn-ghost { background:transparent; color:var(--v3-text); border-color:var(--v3-line); } .site-design-v3 .eu-btn-ghost:hover { border-color:var(--v3-blue); color:var(--v3-blue); } /* =========================================================================== HEADER (slimmer, more refined) ========================================================================= */ .site-design-v3 .eu-header { position: sticky; top:0; z-index:1000; background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(10px); border-bottom:1px solid var(--v3-line); } .site-design-v3 .eu-header-inner { max-width:var(--v3-max); margin-inline:auto; min-height:var(--v3-header-h); display:flex; align-items:center; gap:.7rem; padding-inline:var(--v3-pad); } .site-design-v3 .eu-actions { flex: 0 0 auto; } .site-design-v3 .eu-nav { flex: 1; display: flex; justify-content: center; } .site-design-v3 .eu-brand img { max-height:36px; width:auto; } .site-design-v3 .eu-wordmark { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--v3-font-head); font-weight:800; font-size:1.3rem; color:var(--v3-text); letter-spacing:-.03em; } .site-design-v3 .eu-wordmark-bolt svg { color:var(--v3-volt); } .site-design-v3 .eu-menu { display:flex; align-items:center; gap:.1rem; list-style:none; margin:0; padding:0; } .site-design-v3 .eu-menu > li > a, .site-design-v3 .eu-sub-toggle { display:inline-flex; align-items:center; gap:.25rem; font-family:var(--v3-font-head); font-weight:600; font-size:.92rem; color:var(--v3-text); background:none; border:0; cursor:pointer; padding:.5rem .55rem; border-radius:var(--v3-radius-pill); } .site-design-v3 .eu-menu > li > a:hover, .site-design-v3 .eu-sub-toggle:hover { color:var(--v3-blue); background:var(--v3-grey); } .site-design-v3 .eu-menu-pricing > a { color:var(--v3-blue); } .site-design-v3 .eu-has-sub { position:relative; } .site-design-v3 .eu-submenu { position:absolute; top:100%; left:0; min-width:240px; background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius); box-shadow:var(--v3-shadow); list-style:none; margin:.5rem 0 0; padding:.5rem; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s var(--v3-ease); } /* Education renders as a 2-col mega menu */ .site-design-v3 .eu-has-sub:hover > .eu-submenu, .site-design-v3 .eu-has-sub.eu-open > .eu-submenu { opacity:1; visibility:visible; transform:translateY(0); } .site-design-v3 .eu-submenu a { display:block; padding:.6rem .8rem; border-radius:10px; color:var(--v3-text); font-weight:500; } .site-design-v3 .eu-submenu a:hover { background:var(--v3-grey); color:var(--v3-blue); } .site-design-v3 .eu-chev { transition:transform .18s var(--v3-ease); } .site-design-v3 .eu-has-sub:hover .eu-chev, .site-design-v3 .eu-has-sub.eu-open .eu-chev { transform:rotate(180deg); } .site-design-v3 .eu-actions { display:flex; align-items:center; gap:.5rem; margin-left:auto; } .site-design-v3 .eu-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--v3-radius-pill); color:var(--v3-text); } .site-design-v3 .eu-icon-btn:hover { background:var(--v3-grey); color:var(--v3-blue); } .site-design-v3 .eu-btn-ghost.eu-btn { padding:.6rem 1.1rem; } .site-design-v3 .eu-dash-btn svg { color:#1a1300; } /* Dashboard button is tighter than the shared .eu-btn: smaller padding and a smaller gap between the bolt icon and the label, so it stays narrow and fits on more screens before compacting to the icon-only form. */ .site-design-v3 .eu-dash-btn { padding:.6rem .95rem; gap:.3rem; } .site-design-v3 .eu-burger { display:none; background:none; border:0; color:var(--v3-text); cursor:pointer; padding:.35rem; } /* ========================================================================= STAGE 1 — BLACK HEADER (design-agnostic; v3 copy). Applies to all viewers. Black bar, white text/icons, EU-blue (#1363DF) rollover. Panels stay light. Delete from here to the END marker to revert this design's copy. ========================================================================= */ .site-design-v3 .eu-header { background:#000 !important; backdrop-filter:none !important; border-bottom:1px solid #000 !important; } .site-design-v3 .eu-header .eu-wordmark { color:#fff !important; } .site-design-v3 .eu-header .eu-menu > li > a, .site-design-v3 .eu-header .eu-sub-toggle { color:#fff !important; } .site-design-v3 .eu-header .eu-menu > li > a:hover, .site-design-v3 .eu-header .eu-sub-toggle:hover { color:#1363DF !important; background:transparent !important; } .site-design-v3 .eu-header .eu-menu-pricing > a:hover { color:#1363DF !important; } .site-design-v3 .eu-header .eu-icon-btn { color:#fff !important; } .site-design-v3 .eu-header .eu-icon-btn:hover { color:#1363DF !important; background:rgba(255,255,255,.08) !important; } .site-design-v3 .eu-header .eu-burger { color:#fff !important; } .site-design-v3 .eu-header .eu-btn-ghost { color:#fff !important; background:transparent !important; border:1px solid rgba(255,255,255,.55) !important; } .site-design-v3 .eu-header .eu-btn-ghost:hover { color:#fff !important; background:#1363DF !important; border-color:#1363DF !important; } /* END STAGE 1 BLACK HEADER */ .site-design-v3 .eu-mobile-panel { display:none; } @media (max-width: 1230px){ .site-design-v3 .eu-nav, .site-design-v3 .eu-header-inner > .eu-actions { display:none; } .site-design-v3 .eu-burger { display:inline-flex; margin-left:auto; } .site-design-v3 .eu-mobile-panel { display:block; padding:1rem var(--v3-pad) 1.5rem; border-top:1px solid var(--v3-line); background:#fff; } .site-design-v3 .eu-mobile-panel .eu-menu { flex-direction:column; align-items:stretch; gap:0; } .site-design-v3 .eu-mobile-panel .eu-menu > li { border-bottom:1px solid var(--v3-line); } .site-design-v3 .eu-mobile-panel .eu-submenu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; display:none; padding-left:.5rem; } .site-design-v3 .eu-mobile-panel .eu-has-sub.eu-open .eu-submenu { display:block; } .site-design-v3 .eu-mobile-actions { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.6rem; } .site-design-v3 .eu-mobile-actions .eu-actions { display:flex; } } /* =========================================================================== SECTIONS ========================================================================= */ .site-design-v3 .eu-section { padding-block: var(--v3-section); } .site-design-v3 .eu-section--grey { background:var(--v3-grey); } .site-design-v3 .eu-section--dark { background:var(--v3-dark); color:var(--v3-onDark); } .site-design-v3 .eu-section--dark h1, .site-design-v3 .eu-section--dark h2, .site-design-v3 .eu-section--dark h3 { color:#fff; } .site-design-v3 .eu-eyebrow { font-family:var(--v3-font-head); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color:var(--v3-volt); } .site-design-v3 .eu-lead { font-size:1.2rem; color:var(--v3-text-soft); max-width:60ch; } .site-design-v3 .eu-section--dark .eu-lead { color:var(--v3-onDark-soft); } .site-design-v3 .eu-cta-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.75rem; } /* Immersive hero */ .site-design-v3 .eu-hero { background: radial-gradient(1200px 500px at 80% -10%, rgba(19,99,223,.35), transparent 60%), radial-gradient(900px 400px at 0% 110%, rgba(255,180,0,.18), transparent 55%), var(--v3-dark); color:var(--v3-onDark); position:relative; overflow:hidden; } .site-design-v3 .eu-hero .eu-section-inner { display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; padding-block: clamp(3.5rem,8vw,6rem); } .site-design-v3 .eu-hero h1 { font-size:var(--v3-display); color:#fff; margin:.6rem 0 1.1rem; } .site-design-v3 .eu-hero .eu-accent { color:var(--v3-volt); } .site-design-v3 .eu-hero-trust { display:flex; gap:1.5rem; margin-top:1.75rem; flex-wrap:wrap; color:var(--v3-onDark-soft); font-size:.9rem; } .site-design-v3 .eu-hero-media { aspect-ratio:4/3; border-radius:var(--v3-radius-lg); background:linear-gradient(135deg,#16335f,#0a2a66); position:relative; box-shadow:0 30px 80px rgba(0,0,0,.45); display:grid; place-items:center; color:#7d9bcb; } @media (max-width:820px){ .site-design-v3 .eu-hero .eu-section-inner { grid-template-columns:1fr; } } /* Video facade */ .site-design-v3 .eu-video-facade { position:relative; cursor:pointer; border-radius:var(--v3-radius-lg); overflow:hidden; aspect-ratio:16/9; background:#0a2a66; } .site-design-v3 .eu-video-facade::after { content:"▶"; position:absolute; inset:0; display:grid; place-items:center; font-size:2rem; color:#fff; background:rgba(0,0,0,.25); } .site-design-v3 .eu-video-frame, .site-design-v3 .eu-video-frame iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:var(--v3-radius-lg); } /* Animated stat band */ .site-design-v3 .eu-stats { background:var(--v3-blue-deep); color:#fff; } .site-design-v3 .eu-stats .eu-section-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; padding-block:2.75rem; } .site-design-v3 .eu-stat-num { font-family:var(--v3-font-head); font-weight:800; font-size:clamp(2rem,4vw,3rem); color:var(--v3-volt); line-height:1; } .site-design-v3 .eu-stat-label { color:#bcd0f5; font-size:.9rem; margin-top:.4rem; } @media (max-width:680px){ .site-design-v3 .eu-stats .eu-section-inner { grid-template-columns:1fr 1fr; } } /* Trusted-by */ .site-design-v3 .eu-trusted { padding-block:2.25rem; background:#fff; border-block:1px solid var(--v3-line); } .site-design-v3 .eu-trusted-label { text-align:center; font-size:var(--v3-small); text-transform:uppercase; letter-spacing:.12em; color:var(--v3-text-soft); margin-bottom:1.1rem; } .site-design-v3 .eu-logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(1.5rem,5vw,3.5rem); } .site-design-v3 .eu-logos img,.site-design-v3 .eu-logos span { filter:grayscale(1); opacity:.55; font-weight:800; font-family:var(--v3-font-head); color:#7a8699; transition:.2s; } .site-design-v3 .eu-logos img:hover,.site-design-v3 .eu-logos span:hover { filter:none; opacity:1; } /* Course / video catalog cards */ .site-design-v3 .eu-catalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.5rem; margin-top:2.25rem; } .site-design-v3 .eu-course { background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); overflow:hidden; box-shadow:var(--v3-shadow); display:flex; flex-direction:column; transition:transform .18s var(--v3-ease), box-shadow .2s; } .site-design-v3 .eu-course:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(11,14,20,.16); } .site-design-v3 .eu-course-thumb { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#1b2942,#0a2a66); } .site-design-v3 .eu-course-thumb .eu-duration { position:absolute; bottom:.6rem; right:.6rem; background:rgba(0,0,0,.7); color:#fff; font-size:.72rem; font-weight:600; padding:.18rem .5rem; border-radius:6px; } .site-design-v3 .eu-course-body { padding:1.1rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1; } .site-design-v3 .eu-course-meta { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; } .site-design-v3 .eu-tag { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--v3-blue); background:#e8f0fe; padding:.2rem .55rem; border-radius:var(--v3-radius-pill); } .site-design-v3 .eu-difficulty { font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:var(--v3-radius-pill); } .site-design-v3 .eu-difficulty--found { background:#e3f6ec; color:#157f4b; } .site-design-v3 .eu-difficulty--inter { background:#fff2d6; color:#946100; } .site-design-v3 .eu-difficulty--adv { background:#fde2e2; color:#9a2727; } /* Access badge = minimum tier required */ .site-design-v3 .eu-access { display:inline-flex; align-items:center; gap:.3rem; margin-left:auto; font-size:.7rem; font-weight:800; padding:.22rem .6rem; border-radius:var(--v3-radius-pill); border:1px solid var(--v3-line); color:var(--v3-text-soft); } .site-design-v3 .eu-access::before { content:"🔒"; font-size:.7rem; } .site-design-v3 .eu-access--open { color:var(--v3-success); border-color:#bde9cf; } .site-design-v3 .eu-access--open::before { content:"✓"; } .site-design-v3 .eu-course h3 { font-size:1.12rem; } /* Progress bar (logged-in members) */ .site-design-v3 .eu-progress { height:8px; border-radius:99px; background:var(--v3-grey); overflow:hidden; margin-top:auto; } .site-design-v3 .eu-progress > span { display:block; height:100%; background:linear-gradient(90deg,var(--v3-blue),var(--v3-volt)); border-radius:99px; transition: width .8s var(--v3-ease); } .site-design-v3 .eu-progress-label { font-size:.75rem; color:var(--v3-text-soft); } /* Gamification components */ .site-design-v3 .eu-game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-top:1.5rem; } .site-design-v3 .eu-game-card { background:var(--v3-dark-3); border:1px solid var(--v3-line-dark); border-radius:var(--v3-radius); padding:1.25rem; text-align:center; } .site-design-v3 .eu-game-card .eu-game-num { font-family:var(--v3-font-head); font-weight:800; font-size:2rem; color:var(--v3-volt); } .site-design-v3 .eu-badge { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; margin:0 auto .5rem; background:radial-gradient(circle at 30% 30%,var(--v3-volt),#c98a00); color:#1a1300; font-weight:800; box-shadow:var(--v3-shadow-volt); } .site-design-v3 .eu-streak { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,180,0,.12); color:var(--v3-volt); border:1px solid rgba(255,180,0,.3); padding:.3rem .7rem; border-radius:var(--v3-radius-pill); font-weight:700; font-size:.85rem; } /* Leaderboard */ .site-design-v3 .eu-leaderboard { background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); overflow:hidden; box-shadow:var(--v3-shadow); } .site-design-v3 .eu-lb-row { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:.75rem; padding:.8rem 1.1rem; border-bottom:1px solid var(--v3-line); } .site-design-v3 .eu-lb-row:last-child { border-bottom:0; } .site-design-v3 .eu-lb-rank { font-family:var(--v3-font-head); font-weight:800; color:var(--v3-text-soft); text-align:center; } .site-design-v3 .eu-lb-row--top .eu-lb-rank { color:var(--v3-volt); } .site-design-v3 .eu-lb-row--me { background:#fff8e8; } .site-design-v3 .eu-lb-pts { font-weight:800; font-family:var(--v3-font-head); color:var(--v3-blue); } /* Learning paths / roadmap */ .site-design-v3 .eu-path { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:2rem; counter-reset:rung; } .site-design-v3 .eu-rung { position:relative; background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); padding:1.5rem 1.25rem; box-shadow:var(--v3-shadow); } .site-design-v3 .eu-rung::before { counter-increment:rung; content:counter(rung); position:absolute; top:-14px; left:1.25rem; width:30px; height:30px; border-radius:50%; background:var(--v3-blue); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--v3-font-head); } .site-design-v3 .eu-rung h4 { margin:.4rem 0; } /* Practice-exam showcase */ .site-design-v3 .eu-code-cycles { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 1.5rem; } .site-design-v3 .eu-code-cycles button { font-family:var(--v3-font-head); font-weight:700; padding:.5rem 1.1rem; border:2px solid var(--v3-line); background:#fff; border-radius:var(--v3-radius-pill); cursor:pointer; } .site-design-v3 .eu-code-cycles button[aria-selected="true"] { background:var(--v3-blue); color:#fff; border-color:var(--v3-blue); } /* Testimonials */ .site-design-v3 .eu-testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; margin-top:2.25rem; } .site-design-v3 .eu-testi { background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); padding:1.75rem; box-shadow:var(--v3-shadow); } .site-design-v3 .eu-stars { color:var(--v3-volt); margin-bottom:.6rem; letter-spacing:2px; } .site-design-v3 .eu-testi-who { display:flex; align-items:center; gap:.6rem; font-weight:700; font-family:var(--v3-font-head); margin-top:1rem; } .site-design-v3 .eu-testi-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--v3-blue),var(--v3-volt)); color:#fff; display:grid; place-items:center; font-size:.85rem; } /* Article grid + filter chips */ .site-design-v3 .eu-filter { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.5rem; } .site-design-v3 .eu-filter button { font-family:var(--v3-font-head); font-weight:600; font-size:.85rem; padding:.4rem .9rem; border:1px solid var(--v3-line); background:#fff; border-radius:var(--v3-radius-pill); cursor:pointer; } .site-design-v3 .eu-filter button[aria-selected="true"] { background:var(--v3-text); color:#fff; border-color:var(--v3-text); } .site-design-v3 .eu-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.5rem; margin-top:1.5rem; } .site-design-v3 .eu-card { background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); overflow:hidden; box-shadow:var(--v3-shadow); transition:transform .18s var(--v3-ease), box-shadow .2s; } .site-design-v3 .eu-card:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(11,14,20,.16); } .site-design-v3 .eu-card-thumb { aspect-ratio:16/9; background:linear-gradient(135deg,#1b2942,#0a2a66); } .site-design-v3 .eu-card-body { padding:1.1rem 1.25rem 1.4rem; } /* Pricing */ .site-design-v3 .eu-pricing-toggle { display:flex; justify-content:center; gap:.4rem; margin:1.5rem auto 2.5rem; width:max-content; background:var(--v3-grey); padding:.3rem; border-radius:var(--v3-radius-pill); } .site-design-v3 .eu-pricing-toggle button { font-family:var(--v3-font-head); font-weight:700; padding:.55rem 1.3rem; border:0; background:transparent; border-radius:var(--v3-radius-pill); cursor:pointer; color:var(--v3-text-soft); } .site-design-v3 .eu-pricing-toggle button[aria-selected="true"] { background:#fff; color:var(--v3-blue); box-shadow:var(--v3-shadow); } .site-design-v3 .eu-plans { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; align-items:stretch; } @media(max-width:1100px){ .site-design-v3 .eu-plans { grid-template-columns:repeat(2,1fr); } } @media(max-width:620px){ .site-design-v3 .eu-plans { grid-template-columns:1fr; } } .site-design-v3 .eu-plan { border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); padding:1.75rem; background:#fff; box-shadow:var(--v3-shadow); display:flex; flex-direction:column; height:100%; transition:transform .18s var(--v3-ease); } .site-design-v3 .eu-plan:hover { transform:translateY(-4px); } .site-design-v3 .eu-plan--featured { border:2px solid var(--v3-volt); position:relative; box-shadow:var(--v3-shadow-volt); } .site-design-v3 .eu-plan--featured::before { content:""; display:none; } .site-design-v3 .eu-plan h3 { font-size:1.3rem; } .site-design-v3 .eu-plan-price { font-family:var(--v3-font-head); font-weight:800; font-size:2.2rem; margin:.25rem 0 1rem; } .site-design-v3 .eu-plan-price small { font-size:.9rem; font-weight:600; color:var(--v3-text-soft); } .site-design-v3 .eu-plan ul { list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.55rem; } .site-design-v3 .eu-plan li { padding-left:1.6rem; position:relative; font-size:.95rem; } .site-design-v3 .eu-plan li::before { content:"✓"; position:absolute; left:0; color:var(--v3-success); font-weight:800; } .site-design-v3 .eu-plan .eu-btn { margin-top:auto; justify-content:center; } /* Dashboards */ .site-design-v3 .eu-dash { display:grid; grid-template-columns: 1.6fr 1fr; gap:1.5rem; margin-top:2rem; } .site-design-v3 .eu-panel { background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); padding:1.5rem; box-shadow:var(--v3-shadow); } .site-design-v3 .eu-panel h3 { font-size:1.15rem; margin-bottom:1rem; } .site-design-v3 .eu-continue-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; } .site-design-v3 .eu-seat-meter { height:12px; border-radius:99px; background:var(--v3-grey); overflow:hidden; margin:.5rem 0 .25rem; } .site-design-v3 .eu-seat-meter > span { display:block; height:100%; background:var(--v3-blue); } .site-design-v3 .eu-roster { width:100%; border-collapse:collapse; } .site-design-v3 .eu-roster th,.site-design-v3 .eu-roster td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--v3-line); font-size:.9rem; } @media (max-width:820px){ .site-design-v3 .eu-dash { grid-template-columns:1fr; } } /* Newsletter band */ .site-design-v3 .eu-spark-band { background:linear-gradient(120deg,var(--v3-blue),var(--v3-blue-deep)); color:#fff; } .site-design-v3 .eu-spark-band h2 { color:#fff; } .site-design-v3 .eu-spark-band .eu-spark-inner { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; } .site-design-v3 .eu-spark-band form { display:flex; gap:.6rem; flex-wrap:wrap; } .site-design-v3 .eu-spark-band input { flex:1; min-width:220px; padding:.85rem 1.1rem; border-radius:var(--v3-radius-pill); border:0; font-size:1rem; } @media (max-width:800px){ .site-design-v3 .eu-spark-band .eu-spark-inner { grid-template-columns:1fr; } } /* Feature sections */ .site-design-v3 .eu-feature .eu-section-inner { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; } .site-design-v3 .eu-feature--rev .eu-feature-text { order:2; } .site-design-v3 .eu-feature-media { aspect-ratio:16/10; border-radius:var(--v3-radius-lg); background:var(--v3-grey); box-shadow:var(--v3-shadow); } @media (max-width:800px){ .site-design-v3 .eu-feature .eu-section-inner { grid-template-columns:1fr; } .site-design-v3 .eu-feature--rev .eu-feature-text{ order:0; } } /* =========================================================================== FOOTER ========================================================================= */ .site-design-v3 .eu-footer { background:var(--v3-dark); color:var(--v3-onDark-soft); } .site-design-v3 .eu-footer a { color:var(--v3-onDark); } .site-design-v3 .eu-footer a:hover { color:var(--v3-volt); } .site-design-v3 .eu-footer-inner { max-width:var(--v3-max); margin-inline:auto; padding:var(--v3-section) var(--v3-pad) 2rem; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem; } .site-design-v3 .eu-footer .eu-wordmark { color:#fff; } .site-design-v3 .eu-footer-tag { margin:.75rem 0 1.25rem; max-width:32ch; font-size:.9rem; } .site-design-v3 .eu-social-grid { display:grid; grid-template-columns:repeat(4,38px); gap:8px; } .site-design-v3 .eu-social-grid a { width:38px; height:38px; border-radius:8px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.65); transition:background .15s, color .15s; } .site-design-v3 .eu-social-grid a:hover { background:#1363df; color:#fff; } .site-design-v3 .eu-footer-col h4 { color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; } .site-design-v3 .eu-footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; } .site-design-v3 .eu-footer-base { border-top:1px solid var(--v3-dark-3); padding:1.25rem var(--v3-pad); max-width:var(--v3-max); margin-inline:auto; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:var(--v3-small); } @media (max-width:900px){ .site-design-v3 .eu-footer-inner { grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .site-design-v3 .eu-footer-inner { grid-template-columns:1fr; } } /* =========================================================================== v2 ADDITIONS — avatar router, page heroes, detailed tiers, FAQ, steps, CTAs ========================================================================= */ /* Fix: ghost button on the dark hero (was invisible until hover) */ .site-design-v3 .eu-hero .eu-btn-ghost, .site-design-v3 .eu-page-hero .eu-btn-ghost, .site-design-v3 .eu-section--dark .eu-btn-ghost { color:#fff; border-color:rgba(255,255,255,.5); } .site-design-v3 .eu-hero .eu-btn-ghost:hover, .site-design-v3 .eu-page-hero .eu-btn-ghost:hover, .site-design-v3 .eu-section--dark .eu-btn-ghost:hover { border-color:var(--v3-volt); color:var(--v3-volt); background:rgba(255,180,0,.10); } /* Compact page hero for the avatar landing pages */ .site-design-v3 .eu-page-hero { background: radial-gradient(900px 360px at 85% -20%, rgba(19,99,223,.30), transparent 60%), var(--v3-dark); color:var(--v3-onDark); } .site-design-v3 .eu-page-hero .eu-section-inner { padding-block: clamp(2.75rem,6vw,4.25rem); max-width:860px; } .site-design-v3 .eu-page-hero h1 { font-size:var(--v3-h1); color:#fff; margin:.5rem 0 1rem; } .site-design-v3 .eu-page-hero .eu-lead { color:var(--v3-onDark-soft); } .site-design-v3 .eu-page-hero--biz { background:radial-gradient(900px 360px at 85% -20%, rgba(91,108,255,.30), transparent 60%), var(--v3-dark); } .site-design-v3 .eu-page-hero--ce { background:radial-gradient(900px 360px at 85% -20%, rgba(37,179,107,.28), transparent 60%), var(--v3-dark); } /* Three-avatar router cards */ .site-design-v3 .eu-avatars { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.25rem; } .site-design-v3 .eu-avatar-card { position:relative; display:flex; flex-direction:column; gap:.85rem; background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); padding:2rem 1.75rem; box-shadow:var(--v3-shadow); overflow:hidden; transition:transform .18s var(--v3-ease), box-shadow .2s; } .site-design-v3 .eu-avatar-card::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--v3-blue); } .site-design-v3 .eu-avatar-card--flag::before { background:var(--v3-volt); } .site-design-v3 .eu-avatar-card--biz::before { background:linear-gradient(90deg,var(--v3-blue),#5b6cff); } .site-design-v3 .eu-avatar-card--ce::before { background:var(--v3-success); } .site-design-v3 .eu-avatar-card:hover { transform:translateY(-5px); box-shadow:0 22px 50px rgba(11,14,20,.18); } .site-design-v3 .eu-avatar-ico { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--v3-grey); color:var(--v3-blue); } .site-design-v3 .eu-avatar-card--flag .eu-avatar-ico { background:rgba(255,180,0,.16); color:#a87400; } .site-design-v3 .eu-avatar-card--ce .eu-avatar-ico { background:rgba(37,179,107,.14); color:#157f4b; } .site-design-v3 .eu-avatar-tag { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--v3-text-soft); } .site-design-v3 .eu-avatar-card h3 { font-size:1.4rem; } .site-design-v3 .eu-avatar-card p { color:var(--v3-text-soft); margin:0; flex:1; } .site-design-v3 .eu-avatar-card ul { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; } .site-design-v3 .eu-avatar-card li { padding-left:1.4rem; position:relative; font-size:.9rem; color:var(--v3-text); } .site-design-v3 .eu-avatar-card li::before { content:"✓"; position:absolute; left:0; color:var(--v3-success); font-weight:800; } .site-design-v3 .eu-avatar-card .eu-btn { margin-top:.5rem; align-self:flex-start; } .site-design-v3 .eu-flag-badge { position:absolute; top:1rem; right:1rem; background:var(--v3-volt); color:#1a1300; font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .6rem; border-radius:var(--v3-radius-pill); } @media(max-width:860px){ .site-design-v3 .eu-avatars { grid-template-columns:1fr; } } /* Feature / "what's included" grid */ .site-design-v3 .eu-features { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2rem; align-items:stretch; } .site-design-v3 .eu-feature-item { background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius); padding:1.5rem; box-shadow:var(--v3-shadow); height:100%; } .site-design-v3 .eu-feature-item .eu-fi-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(19,99,223,.10); color:var(--v3-blue); margin-bottom:.85rem; font-size:1.2rem; } .site-design-v3 .eu-feature-item h4 { font-size:1.06rem; margin:0 0 .35rem; } .site-design-v3 .eu-feature-item p { color:var(--v3-text-soft); margin:0; font-size:.92rem; } @media(max-width:780px){ .site-design-v3 .eu-features { grid-template-columns:1fr; } } /* Detailed tier cards: add a "best for" line + longer lists */ .site-design-v3 .eu-plan-best { font-size:.82rem; color:var(--v3-text-soft); margin:-.25rem 0 1rem; min-height:2.4em; } .site-design-v3 .eu-plan ul li.eu-muted { color:var(--v3-text-soft); } .site-design-v3 .eu-plan ul li.eu-muted::before { content:"–"; color:var(--v3-line); } .site-design-v3 .eu-plan-cycle { display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--v3-blue); background:#e8f0fe; padding:.18rem .55rem; border-radius:var(--v3-radius-pill); margin-bottom:.5rem; } /* How-it-works steps (reuses rung counter styling but standalone) */ .site-design-v3 .eu-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2rem; counter-reset:step; } .site-design-v3 .eu-step { position:relative; background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); padding:1.75rem 1.5rem 1.5rem; box-shadow:var(--v3-shadow); } .site-design-v3 .eu-step::before { counter-increment:step; content:counter(step); position:absolute; top:-16px; left:1.5rem; width:34px; height:34px; border-radius:50%; background:var(--v3-blue); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--v3-font-head); } .site-design-v3 .eu-section--dark .eu-step { background:var(--v3-dark-3); border-color:var(--v3-line-dark); } .site-design-v3 .eu-step h4 { margin:.3rem 0 .35rem; } .site-design-v3 .eu-step p { color:var(--v3-text-soft); margin:0; } .site-design-v3 .eu-section--dark .eu-step p { color:var(--v3-onDark-soft); } @media(max-width:780px){ .site-design-v3 .eu-steps { grid-template-columns:1fr; } } /* Continuing-education spotlight */ .site-design-v3 .eu-ce-badge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(37,179,107,.16); color:#7be0aa; border:1px solid rgba(37,179,107,.4); padding:.32rem .85rem; border-radius:var(--v3-radius-pill); font-weight:700; font-size:.85rem; } .site-design-v3 .eu-ce-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; margin-top:1.5rem; } .site-design-v3 .eu-ce-points { list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.6rem; } .site-design-v3 .eu-ce-points li { padding-left:1.7rem; position:relative; color:var(--v3-onDark-soft); } .site-design-v3 .eu-ce-points li::before { content:"✓"; position:absolute; left:0; color:var(--v3-success); font-weight:800; } .site-design-v3 .eu-ce-card { background:var(--v3-dark-3); border:1px solid var(--v3-line-dark); border-radius:var(--v3-radius-lg); padding:1.75rem; } .site-design-v3 .eu-ce-state-select { width:100%; padding:.85rem 1rem; border-radius:var(--v3-radius); border:1px solid var(--v3-line-dark); background:var(--v3-dark-2); color:#fff; font:inherit; margin:.75rem 0 1rem; } @media(max-width:820px){ .site-design-v3 .eu-ce-grid { grid-template-columns:1fr; } } /* FAQ accordion (native
, no JS, accessible) */ .site-design-v3 .eu-faq { max-width:780px; margin:2rem auto 0; display:grid; gap:.75rem; } .site-design-v3 .eu-faq-item { background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius); box-shadow:var(--v3-shadow); overflow:hidden; } .site-design-v3 .eu-faq-item summary { cursor:pointer; list-style:none; padding:1.1rem 1.35rem; font-family:var(--v3-font-head); font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:1rem; } .site-design-v3 .eu-faq-item summary::-webkit-details-marker { display:none; } .site-design-v3 .eu-faq-item summary::after { content:"+"; font-size:1.3rem; color:var(--v3-blue); transition:transform .18s var(--v3-ease); } .site-design-v3 .eu-faq-item[open] summary::after { transform:rotate(45deg); } .site-design-v3 .eu-faq-item p { margin:0; padding:0 1.35rem 1.25rem; color:var(--v3-text-soft); } /* CTA band */ .site-design-v3 .eu-cta-band { text-align:center; background:linear-gradient(120deg,var(--v3-blue),var(--v3-blue-deep)); color:#fff; } .site-design-v3 .eu-cta-band h2 { color:#fff; } .site-design-v3 .eu-cta-band .eu-lead { color:#cfe0ff; margin-inline:auto; } .site-design-v3 .eu-cta-band .eu-cta-row { justify-content:center; } .site-design-v3 .eu-cta-band--volt { background:linear-gradient(120deg,#b87f00,var(--v3-volt)); color:#1a1300; } .site-design-v3 .eu-cta-band--volt h2 { color:#1a1300; } .site-design-v3 .eu-cta-band--volt .eu-lead { color:#3a2c00; } /* Section heading centered helper */ .site-design-v3 .eu-center { text-align:center; } .site-design-v3 .eu-center .eu-lead { margin-inline:auto; } /* Free CE Tracker Dashboard highlight (CE page) */ .site-design-v3 .eu-tracker { display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center; } .site-design-v3 .eu-free-badge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(37,179,107,.14); color:#157f4b; border:1px solid rgba(37,179,107,.35); padding:.32rem .85rem; border-radius:var(--v3-radius-pill); font-weight:800; font-size:.8rem; } .site-design-v3 .eu-tracker-body h2 { margin:1rem 0 .5rem; } .site-design-v3 .eu-tracker-list { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem; } .site-design-v3 .eu-tracker-list li { padding-left:1.7rem; position:relative; color:var(--v3-text-soft); } .site-design-v3 .eu-tracker-list li::before { content:"✓"; position:absolute; left:0; color:var(--v3-success); font-weight:800; } .site-design-v3 .eu-tracker-note { font-size:.85rem; color:var(--v3-text-soft); margin-top:.75rem; } .site-design-v3 .eu-tracker-card { background:#fff; border:1px solid var(--v3-line); border-radius:var(--v3-radius-lg); box-shadow:var(--v3-shadow); padding:1.5rem; } .site-design-v3 .eu-tracker-head { display:flex; justify-content:space-between; align-items:center; font-family:var(--v3-font-head); font-weight:700; margin-bottom:.6rem; } .site-design-v3 .eu-tracker-pct { color:var(--v3-blue); } .site-design-v3 .eu-tracker-rows { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.25rem; } .site-design-v3 .eu-tracker-rows li { display:flex; justify-content:space-between; padding:.5rem .25rem; border-bottom:1px solid var(--v3-line); font-size:.92rem; } .site-design-v3 .eu-tracker-rows li:last-child { border-bottom:0; } .site-design-v3 .eu-tracker-due { color:var(--v3-text-soft); font-weight:700; } @media(max-width:820px){ .site-design-v3 .eu-tracker { grid-template-columns:1fr; } } /* Honor reduced motion everywhere */ @media (prefers-reduced-motion: reduce){ .site-design-v3 *, .site-design-v3 *::before, .site-design-v3 *::after { transition:none !important; animation:none !important; } .site-design-v3 .eu-btn:hover, .site-design-v3 .eu-course:hover, .site-design-v3 .eu-card:hover, .site-design-v3 .eu-plan:hover { transform:none; } } /* =========================================================================== V3 PALETTE OVERRIDES — blue-forward. Yellow is an ACCENT only (stat numbers, badges/streaks, the hero word, the "popular" stripe). Primary actions, eyebrows, featured borders, progress, and CTAs are BLUE. ========================================================================= */ .site-design-v3 .eu-btn-primary { background:var(--v3-blue); color:#fff; box-shadow:0 8px 24px rgba(19,99,223,.26); } .site-design-v3 .eu-btn-primary:hover { background:var(--v3-blue-hover); color:#fff; } .site-design-v3 .eu-dash-btn svg { color:#fff; } .site-design-v3 a:focus-visible, .site-design-v3 button:focus-visible, .site-design-v3 input:focus-visible { outline-color:var(--v3-blue); } .site-design-v3 .eu-eyebrow { color:var(--v3-blue); } .site-design-v3 .eu-section--dark .eu-eyebrow, .site-design-v3 .eu-page-hero .eu-eyebrow { color:#6ea0ff; } .site-design-v3 .eu-plan--featured { border-color:var(--v3-blue); box-shadow:var(--v3-shadow); } .site-design-v3 .eu-plan--featured::before { background:var(--v3-blue); color:#fff; } .site-design-v3 .eu-flag-badge { background:var(--v3-blue); color:#fff; } .site-design-v3 .eu-progress > span { background:linear-gradient(90deg,var(--v3-blue),#5b9bff); } .site-design-v3 .eu-cta-band--volt { background:linear-gradient(120deg,var(--v3-blue-deep),var(--v3-blue)); color:#fff; } .site-design-v3 .eu-cta-band--volt h2 { color:#fff; } .site-design-v3 .eu-cta-band--volt .eu-lead { color:#cfe0ff; } .site-design-v3 .eu-footer a:hover { color:#6ea0ff; } .site-design-v3 .eu-social a:hover { background:var(--v3-blue); color:#fff; transform:translateY(-2px); } .site-design-v3 .eu-hero .eu-btn-ghost:hover, .site-design-v3 .eu-page-hero .eu-btn-ghost:hover, .site-design-v3 .eu-section--dark .eu-btn-ghost:hover { border-color:#6ea0ff; color:#6ea0ff; background:rgba(110,160,255,.10); } .site-design-v3 .eu-wordmark-bolt svg { color:var(--v3-blue); } /* Kept yellow (accent): .eu-hero .eu-accent, .eu-stat-num, .eu-badge, .eu-streak, .eu-difficulty--inter, and the .eu-avatar-card--flag stripe. */ /* ============================================================================ GeneratePress full-width landing-page integration (applies only to pages set to "Full Width" content — our 4 landing pages). Lets the edge-to-edge sections span the viewport and removes the default container padding/title so spacing looks right. ========================================================================== */ .full-width-content .inside-article { padding: 0; border: 0; } .full-width-content .entry-content { margin-top: 0; } .full-width-content .site-main { padding: 0; } .full-width-content .entry-header, .full-width-content .page-header, .full-width-content .entry-title { display: none; } /* ============================================================================ Full-bleed landing pages — auto-applied (via body.eu-landing from the theme) to any page built from eu- sections. Sections span the full viewport while their inner content stays centered. No per-page settings required. ========================================================================== */ body.eu-landing { overflow-x: clip; } .eu-landing .inside-article { padding: 0; border: 0; } .eu-landing .entry-content { margin-top: 0; } .eu-landing .site-main { padding: 0; } .eu-landing .entry-header, .eu-landing .page-header, .eu-landing .entry-title { display: none; } .eu-landing .eu-section, .eu-landing .eu-page-hero, .eu-landing .eu-stats, .eu-landing .eu-trusted { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Keep the "Electrician U" wordmark on a single line */ .eu-brand { flex-shrink: 0; } .eu-wordmark { white-space: nowrap; } /* === Uploaded site logo (Customize → Site Identity): responsive in header === */ .eu-brand .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; } .eu-brand .custom-logo { display: block; height: auto; width: auto; max-height: 42px; } @media (max-width: 980px) { .eu-brand .custom-logo { max-height: 34px; } } @media (max-width: 480px) { .eu-brand .custom-logo { max-height: 30px; max-width: 62vw; } } /* === Mobile polish === */ @media (max-width: 600px) { .eu-roster { display: block; width: 100%; overflow-x: auto; white-space: nowrap; } .eu-cta-row .eu-btn { flex: 1 1 auto; justify-content: center; } } /* === Mobile menu polish (open hamburger panel) === */ @media (max-width: 980px) { .site-design-v3 .eu-mobile-panel { padding: .25rem 1rem 1.25rem; } .site-design-v3 .eu-mobile-panel .eu-menu > li > a, .site-design-v3 .eu-mobile-panel .eu-sub-toggle { width: 100%; box-sizing: border-box; justify-content: space-between; padding: .95rem .15rem; font-size: 1.05rem; } .site-design-v3 .eu-mobile-panel .eu-submenu { padding-left: .85rem; } .site-design-v3 .eu-mobile-panel .eu-submenu a { padding: .6rem .15rem; } .site-design-v3 .eu-mobile-actions { margin-top: .75rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.08); } .site-design-v3 .eu-mobile-actions .eu-actions { margin-left: 0; width: 100%; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .site-design-v3 .eu-mobile-actions .eu-btn { flex: 1 1 140px; justify-content: center; } } /* ============================================================================ Native-block buttons bridge — makes core/button (.wp-block-button) carrying .eu-btn / .eu-btn-primary / .eu-btn-ghost look like the theme buttons. ========================================================================== */ .site-design-v3 .eu-cta-row.wp-block-buttons { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.75rem; } .site-design-v3 .wp-block-button.eu-btn .wp-block-button__link { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--v3-font-head); font-weight:700; font-size:.95rem; line-height:1; padding:.78rem 1.4rem; border-radius:var(--v3-radius-pill); border:2px solid transparent; transition:.15s; } .site-design-v3 .wp-block-button.eu-btn-primary .wp-block-button__link { background:var(--v3-blue); color:#fff; } .site-design-v3 .wp-block-button.eu-btn-primary .wp-block-button__link:hover { background:var(--v3-blue-hover); color:#fff; } .site-design-v3 .wp-block-button.eu-btn-ghost .wp-block-button__link { background:transparent; color:var(--v3-text); border-color:var(--v3-line); } .site-design-v3 .wp-block-button.eu-btn-ghost .wp-block-button__link:hover { color:var(--v3-blue); border-color:var(--v3-blue); } /* ghost button on dark hero/sections -> light */ .site-design-v3 .eu-section--dark .wp-block-button.eu-btn-ghost .wp-block-button__link, .site-design-v3 .eu-page-hero .wp-block-button.eu-btn-ghost .wp-block-button__link, .site-design-v3 .eu-hero .wp-block-button.eu-btn-ghost .wp-block-button__link { color:#fff; border-color:rgba(255,255,255,.5); } /* ============================================================================ WordPress block-editor layout compatibility (landing pages built from blocks) Makes our .eu- grids and full-bleed sections win over core/GeneratePress block layout (inner-containers, constrained max-widths, content-width caps). ========================================================================== */ .site-design-v3.eu-landing .entry-content { max-width: none; } .site-design-v3.eu-landing .entry-content > * { max-width: none; margin-left: 0; margin-right: 0; } /* flatten core group inner-containers so our grids see the real children */ .site-design-v3.eu-landing .wp-block-group__inner-container { display: contents; } /* stop core "constrained" layout from capping/centering children in our sections */ .site-design-v3.eu-landing .eu-section .wp-block-group, .site-design-v3.eu-landing .eu-page-hero .wp-block-group { max-width: none; } .site-design-v3.eu-landing .eu-section .wp-block-group > *, .site-design-v3.eu-landing .eu-page-hero .wp-block-group > * { max-width: none; } /* re-assert full-bleed sections + centered inner */ .site-design-v3.eu-landing .eu-section, .site-design-v3.eu-landing .eu-page-hero, .site-design-v3.eu-landing .eu-stats { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .site-design-v3.eu-landing .eu-section-inner { max-width: var(--v3-max); width: auto; margin-inline: auto; } /* neutralize core's auto vertical block margins at our section boundaries */ .site-design-v3.eu-landing .eu-section > .wp-block-group, .site-design-v3.eu-landing .eu-section-inner { margin-top: 0; margin-bottom: 0; } /* === Mobile menu — strengthened === */ @media (max-width: 980px) { .site-design-v3 .eu-mobile-panel .eu-menu { gap: 0; } .site-design-v3 .eu-mobile-panel .eu-menu > li { border-bottom: 1px solid rgba(0,0,0,.07); } .site-design-v3 .eu-mobile-panel .eu-menu > li > a, .site-design-v3 .eu-mobile-panel .eu-sub-toggle { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; padding: .85rem .25rem; font-size: 1.05rem; background: none; } .site-design-v3 .eu-mobile-panel .eu-submenu { padding: .1rem 0 .5rem .85rem; } .site-design-v3 .eu-mobile-panel .eu-submenu a { padding: .55rem .25rem; } .site-design-v3 .eu-mobile-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(0,0,0,.1); } .site-design-v3 .eu-mobile-actions .eu-actions { margin: 0; width: 100%; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .site-design-v3 .eu-mobile-actions .eu-icon-btn { flex: 0 0 auto; } .site-design-v3 .eu-mobile-actions .eu-btn { flex: 1 1 140px; justify-content: center; } } /* ============================================================================ Refinements (spacing, hero, card alignment, newsletter, buttons) ========================================================================== */ /* A) Bigger left/right breathing room on content (header/footer unchanged) */ .site-design-v3 .eu-section-inner { padding-inline: clamp(1.5rem, 5vw, 3.5rem); } /* B) Less dead space at the very top of a page */ .site-design-v3.eu-landing .entry-content > *:first-child { margin-top: 0; } .site-design-v3 .eu-hero .eu-section-inner { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1.1fr .9fr; } /* C) Hero media: smaller, never off-screen, sits beside the text */ .site-design-v3 .eu-hero-media { aspect-ratio: 16 / 9; max-width: 540px; width: 100%; margin: 0 auto; min-height: 0; } .site-design-v3 .eu-hero-text { padding-right: clamp(0px, 2vw, 1.5rem); } /* D) Cards line up regardless of text length; buttons pin to the bottom */ .site-design-v3 .eu-avatars, .site-design-v3 .eu-features, .site-design-v3 .eu-plans, .site-design-v3 .eu-steps { align-items: stretch; } .site-design-v3 .eu-avatar-card, .site-design-v3 .eu-plan, .site-design-v3 .eu-feature-item, .site-design-v3 .eu-step { height: 100%; } .site-design-v3 .eu-avatar-card .wp-block-buttons, .site-design-v3 .eu-avatar-card .eu-cta-row, .site-design-v3 .eu-plan .wp-block-buttons, .site-design-v3 .eu-plan .eu-cta-row { margin-top: auto; } .site-design-v3 .eu-avatar-card .wp-block-button, .site-design-v3 .eu-plan .wp-block-button { width: 100%; } .site-design-v3 .eu-avatar-card .wp-block-button__link, .site-design-v3 .eu-plan .wp-block-button__link { width: 100%; justify-content: center; } /* E) Newsletter: bring text + signup together, centered; smaller email field */ .site-design-v3 .eu-spark-band .eu-spark-inner { display: flex; flex-wrap: wrap; grid-template-columns: none; justify-content: center; align-items: center; gap: 2rem; max-width: 880px; margin-inline: auto; } .site-design-v3 .eu-spark-band input, .site-design-v3 .eu-spark-band input[type=email] { min-width: 0; width: 240px; max-width: 100%; } /* F) Center button rows inside centered sections (avatars, CTA bands, etc.) */ .site-design-v3 .eu-center .eu-cta-row, .site-design-v3 .eu-center .wp-block-buttons { justify-content: center; } /* G) Make native-block buttons render cleanly (beat theme.json defaults) */ .site-design-v3 .wp-block-button.eu-btn .wp-block-button__link { background-color: transparent; text-decoration: none; box-shadow: none; } .site-design-v3 .wp-block-button.eu-btn-primary .wp-block-button__link { background-color: var(--v3-blue); color: #fff; } .site-design-v3 .wp-block-button.eu-btn-primary .wp-block-button__link:hover { background-color: var(--v3-blue-hover); color: #fff; } .site-design-v3 .wp-block-button.eu-btn-ghost .wp-block-button__link { background-color: transparent; color: var(--v3-text); border:2px solid var(--v3-line); } .site-design-v3 .eu-hero .wp-block-button.eu-btn-ghost .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.5); } /* === Business plans (Trial / Annual / Monthly) with seat selector === */ .site-design-v3 .eu-plans.eu-plans-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .site-design-v3 .eu-plans.eu-plans-3 { grid-template-columns: 1fr; } } .site-design-v3 .eu-plan--best { border: 2px solid var(--v3-blue); position: relative; } .site-design-v3 .eu-plan-ribbon { position: absolute; top: 0; right: 0; background: var(--v3-volt); color: #1a1300; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .8rem; border-bottom-left-radius: 12px; } .site-design-v3 .eu-seat-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1rem; } .site-design-v3 .eu-seat-label { font-weight: 700; font-family: var(--v3-font-head); } .site-design-v3 .eu-stepper { display: inline-flex; align-items: center; gap: .4rem; } .site-design-v3 .eu-stepper button { width: 38px; height: 38px; border-radius: 10px; border: 0; background: var(--v3-blue-deep); color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; } .site-design-v3 .eu-stepper input { width: 52px; height: 38px; text-align: center; border: 1px solid var(--v3-line); border-radius: 8px; font: inherit; } .site-design-v3 .eu-plan .eu-seat-row + .wp-block-buttons, .site-design-v3 .eu-plan .eu-seat-row + .eu-btn { margin-top: .7rem; width: 100%; } .site-design-v3 .eu-plan-note { color: var(--v3-text-soft); } /* ============================================================================ Mobile slide-in drawer (replaces the old push-down panel) ========================================================================== */ .site-design-v3 .eu-burger { display: none; } .site-design-v3 .eu-drawer { display: none; } .site-design-v3 .eu-backdrop { display: none; } @media (max-width: 1230px) { .site-design-v3 .eu-nav { display: none; } .site-design-v3 .eu-burger { display: inline-flex; margin-left: .4rem; } /* Top bar keeps search + cart + the primary button; Login moves into the drawer */ .site-design-v3 .eu-header-inner > .eu-actions { display: flex; margin-left: auto; gap: .35rem; align-items: center; } .site-design-v3 .eu-header-inner > .eu-actions .eu-btn-ghost { display: none; } .site-design-v3 .eu-header-inner > .eu-actions .eu-btn-primary { padding: .55rem 1rem; } .site-design-v3 .eu-header-inner > .eu-actions .eu-dash-btn span { display: none; } /* compact dashboard btn */ .site-design-v3 .eu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(8,12,20,.5); z-index: 1999; } .site-design-v3 .eu-drawer { display: block; position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 360px); background: #fff; box-shadow: -16px 0 48px rgba(0,0,0,.22); z-index: 2000; transform: translateX(100%); transition: transform .26s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } body.eu-menu-open .site-design-v3 .eu-drawer, body.eu-menu-open.site-design-v3 .eu-drawer { transform: translateX(0); } body.eu-menu-open { overflow: hidden; } .site-design-v3 .eu-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,.08); position: sticky; top: 0; background: #fff; z-index: 1; } .site-design-v3 .eu-drawer-title { font-family: var(--v3-font-head); font-weight: 800; font-size: 1.05rem; } .site-design-v3 .eu-drawer-close { background: none; border: 0; padding: .35rem; cursor: pointer; color: inherit; border-radius: 8px; line-height: 0; } .site-design-v3 .eu-drawer-close:hover { background: rgba(0,0,0,.06); } .site-design-v3 .eu-drawer .eu-menu { flex-direction: column; align-items: stretch; gap: 0; padding: .25rem 1.1rem .5rem; } .site-design-v3 .eu-drawer .eu-menu > li { border-bottom: 1px solid rgba(0,0,0,.07); } .site-design-v3 .eu-drawer .eu-menu > li > a, .site-design-v3 .eu-drawer .eu-sub-toggle { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; padding: .95rem .15rem; font-size: 1.05rem; background: none; } .site-design-v3 .eu-drawer .eu-submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; min-width: 0; margin: 0; padding: 0 0 .5rem .85rem; display: none; } .site-design-v3 .eu-drawer .eu-has-sub.eu-open .eu-submenu { display: block; } .site-design-v3 .eu-drawer .eu-submenu a { padding: .55rem .15rem; } .site-design-v3 .eu-drawer-foot { padding: 1rem 1.25rem 1.5rem; } .site-design-v3 .eu-drawer-foot .eu-actions { display: flex; flex-wrap: wrap; gap: .6rem; width: 100%; margin: 0; align-items: center; } .site-design-v3 .eu-drawer-foot .eu-btn-ghost { display: inline-flex; } .site-design-v3 .eu-drawer-foot .eu-icon-btn { display: none; } /* search/cart already in the top bar */ .site-design-v3 .eu-drawer-foot .eu-btn { flex: 1 1 140px; justify-content: center; } .site-design-v3 .eu-drawer-foot .eu-dash-btn span { display: inline; } } /* ============================================================================ Fixes: content was stretching full-width (a compat reset hit .eu-section-inner), plus hero spacing + Articles section. ========================================================================== */ /* Re-assert the centered content width (beats the earlier max-width:none reset) */ .site-design-v3.eu-landing .eu-section-inner { max-width: var(--v3-max) !important; width: auto; margin-inline: auto; } /* Hero: half the vertical dead space; bring the text + media closer together */ .site-design-v3 .eu-hero .eu-section-inner { padding-block: clamp(1.25rem, 3vw, 2.25rem); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; } .site-design-v3 .eu-hero-media { max-width: 500px; } /* Articles: show the filter button labels + center the whole section like the rest */ .site-design-v3 .eu-filter button { color: var(--v3-text); background: #fff; } .site-design-v3 .eu-filter { justify-content: center; } .site-design-v3 .eu-cards { justify-content: center; } .site-design-v3 .eu-section:has(.eu-filter) { text-align: center; } .site-design-v3 .eu-section:has(.eu-filter) .eu-card-body { text-align: left; } /* ============================================================================ ROBUST FULL-BLEED + NO HORIZONTAL OVERFLOW (overrides the old 100vw method) The old `width:100vw; margin-left:calc(50% - 50vw)` could push content off screen on mobile. Instead we make GeneratePress's CONTENT container full width on landing pages and let sections be a simple width:100%. Header & footer are untouched (they cap their own content via .eu-header-inner / .eu-footer-inner). ========================================================================== */ html, body { overflow-x: clip; } /* Reserve scrollbar space symmetrically so full-width sections and their centered inner content aren't shifted left by the right-side scrollbar (the ~16px "more space on the right" effect on wide screens). */ html { scrollbar-gutter: stable; } .eu-landing .site-content { overflow-x: clip; } .eu-landing #page, body.eu-landing.site { max-width: 100% !important; } .eu-landing .site-content, .eu-landing #primary, .eu-landing .content-area, .eu-landing .site-main, .eu-landing .site-main > article, .eu-landing .inside-article, .eu-landing .entry-content, .eu-landing .entry-content > .wp-block-group > .wp-block-group__inner-container, .eu-landing .entry-content .wp-block-group__inner-container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } .eu-landing .inside-article { background: none !important; border: 0 !important; box-shadow: none !important; } .eu-landing .eu-section, .eu-landing .eu-page-hero, .eu-landing .eu-stats, .eu-landing .eu-trusted, .eu-landing .eu-spark-band { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } .eu-landing .eu-section-inner { max-width: 1240px !important; width: 100% !important; margin-inline: auto !important; padding-inline: clamp(1.25rem, 5vw, 3.5rem) !important; box-sizing: border-box; } /* hero collapses to one column on phones */ @media (max-width: 820px) { .eu-landing .eu-hero .eu-section-inner { grid-template-columns: 1fr !important; } } /* guarantee the mobile drawer opens regardless of design class ordering */ body.eu-menu-open .eu-drawer { transform: translateX(0) !important; } /* Hero: on phones, show the video ABOVE the buttons (desktop keeps it on the right). display:contents lets the headline/lead/buttons interleave with the media. */ @media (max-width: 820px) { .eu-landing .eu-hero .eu-section-inner { display: flex !important; flex-direction: column; } .eu-hero .eu-hero-text { display: contents; } .eu-hero .eu-eyebrow { order: 1; } .eu-hero h1 { order: 2; } .eu-hero .eu-lead { order: 3; } .eu-hero .eu-hero-media { order: 4; margin: .25rem 0 1.25rem; } .eu-hero .eu-cta-row, .eu-hero .wp-block-buttons { order: 5; } .eu-hero .eu-hero-trust { order: 6; } } /* ============================================================================ Mobile header must FIT — keep logo + search + cart + Join + hamburger on one row so the hamburger is never pushed off-screen. ========================================================================== */ @media (max-width: 768px) { .site-design-v3 .eu-header-inner { gap: .35rem; padding-inline: .65rem; flex-wrap: nowrap; } .site-design-v3 .eu-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; } .site-design-v3 .eu-brand .custom-logo, .site-design-v3 .eu-brand img { max-height: 26px !important; max-width: 42vw; width: auto; } .site-design-v3 .eu-brand .eu-wordmark { font-size: 1.05rem; } .site-design-v3 .eu-header-inner > .eu-actions { gap: .25rem; flex: 0 0 auto; margin-left: auto; } .site-design-v3 .eu-header-inner > .eu-actions .eu-icon-btn { width: 34px; height: 34px; } .site-design-v3 .eu-header-inner > .eu-actions .eu-btn-primary { padding: .45rem .7rem; font-size: .82rem; } .site-design-v3 .eu-burger { flex: 0 0 auto; margin-left: .15rem; padding: .25rem; } .site-design-v3 .eu-burger svg { width: 24px; height: 24px; } } @media (max-width: 400px) { .site-design-v3 .eu-brand .custom-logo, .site-design-v3 .eu-brand img { max-height: 22px !important; max-width: 38vw; } .site-design-v3 .eu-header-inner > .eu-actions .eu-icon-btn { width: 30px; height: 30px; } .site-design-v3 .eu-header-inner > .eu-actions .eu-btn-primary { padding: .4rem .58rem; font-size: .76rem; } } /* ============================================================================ BULLETPROOF MOBILE DRAWER (final — supersedes earlier drawer rules) Closed = display:none -> cannot cause overflow, cannot intercept taps, cannot gray the page. Open = display:block + slide-in keyframe. ========================================================================== */ .eu-drawer { display: none !important; position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(88vw, 360px); max-width: 100vw; background: #fff; z-index: 100000; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -16px 0 48px rgba(0,0,0,.22); } .eu-backdrop { display: none !important; position: fixed; inset: 0; background: rgba(8,12,20,.5); z-index: 99999; } @media (max-width: 1230px) { body.eu-menu-open .eu-drawer { display: block !important; animation: eu-drawer-in .24s ease both; } body.eu-menu-open .eu-backdrop { display: block !important; animation: eu-fade-in .2s ease both; } body.eu-menu-open { overflow: hidden; } } @keyframes eu-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes eu-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Footer with the added Company column */ .eu-footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } @media (max-width: 900px) { .eu-footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .eu-footer-inner { grid-template-columns: 1fr; } } /* ============================================================================ Standard buttons (remove glow + double-ring look), site-wide ========================================================================== */ .site-design-v3 .eu-btn, .site-design-v3 .eu-btn-primary, .site-design-v3 .wp-block-button .wp-block-button__link { box-shadow: none !important; outline: 0; } .site-design-v3 .wp-block-button.eu-btn { border: 0 !important; box-shadow: none !important; } .site-design-v3 .eu-btn-ghost, .site-design-v3 .wp-block-button.eu-btn-ghost .wp-block-button__link { border-width: 1px !important; } /* ============================================================================ Menu-item icons ========================================================================== */ .site-design-v3 .eu-menu > li > a, .site-design-v3 .eu-sub-toggle { display: inline-flex; align-items: center; gap: .45rem; } .site-design-v3 .eu-menu > li > a > svg, .site-design-v3 .eu-sub-toggle > svg:first-child { flex: 0 0 auto; width: 17px; height: 17px; opacity: .85; } .site-design-v3 .eu-menu .eu-chev { width: 13px; height: 13px; margin-left: .05rem; } .site-design-v3 .eu-drawer .eu-menu > li > a > svg, .site-design-v3 .eu-drawer .eu-sub-toggle > svg:first-child { width: 19px; height: 19px; } /* ============================================================================ "Trusted by" visual band (replaces the stat band) ========================================================================== */ .site-design-v3 .eu-trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-top: 2.25rem; } .site-design-v3 .eu-trust-badge { display: flex; flex-direction: column; align-items: center; gap: .25rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 1.4rem 1.9rem; min-width: 170px; } .site-design-v3 .eu-trust-ico { font-size: 1.85rem; line-height: 1; margin-bottom: .25rem; } .site-design-v3 .eu-trust-badge strong { font-family: var(--v3-font-head); font-weight: 800; font-size: 1.6rem; color: var(--v3-volt); line-height: 1; } .site-design-v3 .eu-trust-badge span { color: var(--v3-onDark-soft); font-size: .92rem; } /* ============================================================================ Lightweight CSS slider (no JS library) for the Free Articles row ========================================================================== */ .site-design-v3 .eu-slider { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1.25rem; margin-top: 1.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .site-design-v3 .eu-slider > * { scroll-snap-align: start; flex: 0 0 clamp(260px, 80%, 360px); } @media (min-width: 760px) { .site-design-v3 .eu-slider > * { flex-basis: calc(33.333% - 1rem); } } .site-design-v3 .eu-slider-hint { text-align: center; font-size: .85rem; color: var(--v3-text-soft); margin-top: -.25rem; } /* Testimonial meta (handle + follower type) */ .site-design-v3 .eu-testi-who { align-items: center; gap: .7rem; } .site-design-v3 .eu-testi-meta { font-weight: 500; font-size: .85rem; color: var(--v3-text-soft); } .site-design-v3 .eu-testi-who strong { font-family: var(--v3-font-head); } /* ============================================================================ Hero video block (PrestoPlayer or any embed dropped where the placeholder was) — give it a sized, framed, visible box against the dark hero. ========================================================================== */ .site-design-v3 .eu-hero .eu-section-inner > *:last-child:not(.eu-hero-text) { align-self: center; width: 100%; } .site-design-v3 .eu-hero .wp-block-presto-player, .site-design-v3 .eu-hero [class*="presto"], .site-design-v3 .eu-hero .wp-block-embed, .site-design-v3 .eu-hero .wp-block-video, .site-design-v3 .eu-hero figure { margin: 0; width: 100%; max-width: 560px; margin-inline: auto; } .site-design-v3 .eu-hero .wp-block-presto-player, .site-design-v3 .eu-hero [class*="presto-player"], .site-design-v3 .eu-hero .wp-block-embed__wrapper, .site-design-v3 .eu-hero .wp-block-video video { border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.55); aspect-ratio: 16 / 9; } .site-design-v3 .eu-hero [class*="presto-player"] iframe, .site-design-v3 .eu-hero [class*="presto-player"] video { width: 100%; height: 100%; } /* ============================================================================ FINAL BUTTON SYSTEM (supersedes earlier rules) - Same size & shape everywhere, pill, all lift on hover. - .eu-btn-primary = BLUE (sole buttons + first in a row) - .eu-btn-ghost = ORANGE (second button when buttons are in a row) ========================================================================== */ .site-design-v3 .eu-btn, .site-design-v3 .wp-block-button.eu-btn .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--v3-font-head); font-weight: 700; font-size: .95rem; line-height: 1; padding: .8rem 1.6rem; border-radius: 999px; border: 0 !important; cursor: pointer; box-shadow: none !important; text-decoration: none; transition: transform .15s ease, background-color .15s ease, color .15s ease; } .site-design-v3 .eu-btn:hover, .site-design-v3 .wp-block-button.eu-btn .wp-block-button__link:hover { transform: translateY(-2px); } .site-design-v3 .eu-btn-primary, .site-design-v3 .wp-block-button.eu-btn-primary .wp-block-button__link { background-color: #1363DF !important; color: #fff !important; } .site-design-v3 .eu-btn-primary:hover, .site-design-v3 .wp-block-button.eu-btn-primary .wp-block-button__link:hover { background-color: #1E72F5 !important; color: #fff !important; } .site-design-v3 .eu-btn-ghost, .site-design-v3 .wp-block-button.eu-btn-ghost .wp-block-button__link { background-color: #EBB13D !important; color: #1a1300 !important; } .site-design-v3 .eu-btn-ghost:hover, .site-design-v3 .wp-block-button.eu-btn-ghost .wp-block-button__link:hover { background-color: #F3C25C !important; color: #1a1300 !important; } /* card buttons keep full width inside cards */ .site-design-v3 .eu-avatar-card .wp-block-button, .site-design-v3 .eu-plan .wp-block-button { width: 100%; } .site-design-v3 .eu-avatar-card .wp-block-button__link, .site-design-v3 .eu-plan .wp-block-button__link { width: 100%; } /* ============================================================================ Article slider cards: show the featured image + dark (not blue) titles ========================================================================== */ .site-design-v3 .eu-card-thumb { display: block; aspect-ratio: 16/9; background-size: cover; background-position: center; } .site-design-v3 .eu-card-body h3 a { color: var(--v3-text); text-decoration: none; } .site-design-v3 .eu-card-body h3 a:hover { color: #1363DF; } /* Cut the hero top/bottom blank space roughly in half */ .site-design-v3 .eu-hero .eu-section-inner { padding-block: clamp(.6rem, 1.5vw, 1.25rem) !important; } /* ============================================================================ Article cards (match reference) + auto-rotate slider dots + subtle "All" link ========================================================================== */ .site-design-v3 .eu-card { background:#fff; border-radius:18px; box-shadow:0 8px 30px rgba(16,22,30,.10); overflow:hidden; } .site-design-v3 .eu-card-thumb { display:block; aspect-ratio:4/3; background-size:cover; background-position:center; } .site-design-v3 .eu-card-body { padding:1.1rem 1.4rem 1.5rem; } .site-design-v3 .eu-card .eu-tag { display:inline-block; background:none !important; padding:0 !important; color:#1363df; font-size:.78rem; font-weight:700; text-transform:none; margin-bottom:.3rem; } .site-design-v3 .eu-card-body h3 { font-size:1.25rem; line-height:1.2; margin:.1rem 0 .5rem; } .site-design-v3 .eu-card-body h3 a { color:#1363df !important; text-decoration:none; } .site-design-v3 .eu-card-body h3 a:hover { text-decoration:underline; } .site-design-v3 .eu-card-excerpt { color:#5a6675; font-size:.95rem; line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .site-design-v3 .eu-slider-dots { display:flex; justify-content:center; gap:.5rem; margin-top:1.25rem; } .site-design-v3 .eu-dot { width:9px; height:9px; border-radius:50%; border:0; background:#cdd6e5; padding:0; cursor:pointer; transition:background .15s, transform .15s; } .site-design-v3 .eu-dot.active { background:#1363df; transform:scale(1.2); } /* "All" link: small + unobtrusive, only in the articles slider section */ .site-design-v3 .eu-section:has(.eu-slider) .eu-cta-row { margin-top:.6rem; } .site-design-v3 .eu-section:has(.eu-slider) .eu-cta-row .wp-block-button__link { background-color:transparent !important; color:#1363df !important; border:1px solid #cdd6e5 !important; font-size:.82rem !important; font-weight:600 !important; padding:.38rem 1.05rem !important; text-transform:none; } .site-design-v3 .eu-section:has(.eu-slider) .eu-cta-row .wp-block-button__link:hover { background-color:#eef3fc !important; color:#1363df !important; transform:none; } /* ============================================================================ Articles section — mirror the reference exactly ========================================================================== */ .site-design-v3 .eu-section:has(.eu-slider) .eu-eyebrow { display:inline-block; background:#e9f1fd; color:#1363df; padding:.4rem 1.05rem; border-radius:999px; letter-spacing:0; text-transform:none; font-weight:700; font-size:.82rem; } .site-design-v3 .eu-section:has(.eu-slider) h2 { color:#15233f; } .site-design-v3 .eu-articles-sub { color:#5a6675; margin-top:.25rem; } .site-design-v3 .eu-articles-sub a { color:#1363df; font-weight:600; text-decoration:none; } .site-design-v3 .eu-articles-sub a:hover { text-decoration:underline; } /* card content left-aligned even though the header is centered */ .site-design-v3 .eu-section:has(.eu-slider) .eu-slider, .site-design-v3 .eu-section:has(.eu-slider) .eu-card, .site-design-v3 .eu-section:has(.eu-slider) .eu-card-body { text-align:left; } /* landscape featured image like the reference */ .site-design-v3 .eu-card-thumb { aspect-ratio:16/9; } /* Center card "pops" in the slider (side cards slightly smaller) */ .site-design-v3 .eu-slider { padding-block: 1rem 1.5rem; } .site-design-v3 .eu-slider > .eu-card { transition: transform .28s ease, box-shadow .28s ease, opacity .28s ease; transform: scale(.95); opacity: .94; } .site-design-v3 .eu-slider > .eu-card--active { transform: scale(1); opacity: 1; box-shadow: 0 24px 55px rgba(16,22,30,.20); }