/** * EssayPro Enhanced — Modern Theme v6 * Design inspired by: saseni.com + essayservice.com + grademiners.com * Font: Inter (Google Fonts) * Palette: Navy/Teal/Light-Blue/Light-Green/Light-Yellow * This file loads LAST — overrides everything */ /* ══════════════════════════════════════════════════════ DESIGN TOKENS ══════════════════════════════════════════════════════ */ :root { /* Core brand */ --ep-navy: #0f2744; /* dark navy — headers, heavy text */ --ep-teal: #0d6e5a; /* primary teal — CTAs, accents */ --ep-teal-mid: #128f76; /* mid teal */ --ep-teal-lt: #e6f5f2; /* very light teal */ --ep-blue: #1a6fc4; /* link/info blue */ --ep-blue-mid: #2563eb; /* vivid blue */ --ep-blue-lt: #dbeafe; /* light blue bg */ --ep-blue-xlt: #eff6ff; /* extra-light blue bg */ --ep-sky: #0ea5e9; /* accent sky */ --ep-yellow: #f59e0b; /* CTA amber */ --ep-yellow-lt: #fef9c3; /* light yellow bg */ --ep-yellow-xlt: #fffbeb; --ep-green-lt: #d1fae5; --ep-green-xlt: #ecfdf5; --ep-purple-lt: #ede9fe; --ep-purple-xlt: #f5f3ff; /* Text */ --ep-text: #111827; --ep-text-md: #1f2937; --ep-text-muted: #6b7280; --ep-text-light: #9ca3af; /* Surfaces */ --ep-white: #ffffff; --ep-bg: #f1f5f9; /* base page bg */ --ep-border: #e2e8f0; --ep-border-lt: #f1f5f9; /* Section backgrounds (rotating palette) */ --bg-white: #ffffff; --bg-lgreen: #ecfdf5; /* light green */ --bg-lblue: #eff6ff; /* light blue */ --bg-lyellow: #fffbeb; /* light yellow */ --bg-lpurple: #f5f3ff; /* light purple */ --bg-lteal: #f0faf7; /* light teal */ --bg-lsky: #f0f9ff; /* light sky */ --bg-navy: #0f2744; /* dark navy for CTA sections */ /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill:100px; /* Shadows */ --sh-xs: 0 1px 3px rgba(0,0,0,.06); --sh-sm: 0 2px 8px rgba(0,0,0,.07); --sh-md: 0 4px 18px rgba(0,0,0,.09); --sh-lg: 0 8px 32px rgba(0,0,0,.12); --sh-xl: 0 16px 48px rgba(0,0,0,.15); /* Transition */ --tx: 0.2s cubic-bezier(.4,0,.2,1); /* Font — Inter like saseni.com */ --font: 'Inter', -apple-system, 'Segoe UI', sans-serif; /* Header */ --hh: 64px; } /* ══════════════════════════════════════════════════════ RESET & BASE ══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font) !important; color: var(--ep-text); background: var(--ep-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ep-blue); text-decoration: none; } a:hover { color: var(--ep-teal); } a:focus-visible { outline: 2px solid var(--ep-blue); outline-offset: 2px; } ul, ol { list-style: none; padding: 0; margin: 0; } main#main-content { padding-top: var(--hh); /* JS overrides this dynamically */ } .wrapper { max-width: 1240px; margin: 0 auto; padding: 0 24px; } @media(max-width:640px){ .wrapper { padding: 0 16px; } } /* Headings use Inter */ h1,h2,h3,h4,h5,h6 { font-family: var(--font); } /* ══════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════ */ .ep-btn-primary, .ep-btn-cta, .button.ep-btn-primary, a.ep-btn-primary, button.ep-btn-primary { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 11px 24px; font-family: var(--font); font-size: .875rem; font-weight: 600; line-height: 1.3; border-radius: var(--r-md); border: 2px solid var(--ep-teal); cursor: pointer; background: var(--ep-teal) !important; color: #fff !important; transition: all var(--tx); white-space: nowrap; text-decoration: none !important; } .ep-btn-primary:hover, .ep-btn-cta:hover { background: var(--ep-navy) !important; border-color: var(--ep-navy) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,110,90,.3); color: #fff !important; } .ep-btn-primary.ep-btn-lg, .ep-btn-primary.big, .ep-btn-primary.ep-btn--lg { padding: 13px 32px; font-size: .95rem; } .ep-btn-primary.ep-btn-sm, .ep-btn-primary.ep-btn--sm { padding: 7px 14px; font-size: .78rem; } .ep-btn-outline, a.ep-btn-outline, button.ep-btn-outline { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 11px 24px; font-family: var(--font); font-size: .875rem; font-weight: 600; line-height: 1.3; border-radius: var(--r-md); border: 2px solid var(--ep-teal); background: transparent; color: var(--ep-teal) !important; transition: all var(--tx); white-space: nowrap; text-decoration: none !important; } .ep-btn-outline:hover { background: var(--ep-teal); color: #fff !important; transform: translateY(-2px); } .ep-btn-outline.ep-btn-lg { padding: 13px 32px; font-size: .95rem; } .ep-btn-outline.ep-btn-sm { padding: 7px 14px; font-size: .78rem; } /* Yellow CTA */ .ep-btn--yellow { background: var(--ep-yellow) !important; border-color: var(--ep-yellow) !important; color: #111 !important; font-weight: 700; } .ep-btn--yellow:hover { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; transform: translateY(-2px); } /* White outline for dark backgrounds */ .ep-btn--outline-white { background: transparent !important; border-color: rgba(255,255,255,.45) !important; color: #fff !important; } .ep-btn--outline-white:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.8) !important; } /* ══════════════════════════════════════════════════════ HEADER — SASENI + ESSAYSERVICE STYLE One straight line: Logo | Nav items | Actions ══════════════════════════════════════════════════════ */ .site-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; background: var(--ep-navy) !important; box-shadow: none; width: 100%; transition: box-shadow var(--tx), transform var(--tx); } .site-header--scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.28) !important; } .site-header--hidden { transform: translateY(-100%) !important; } .site-header__inner { width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); overflow: visible; } .header-flex { display: flex !important; align-items: center !important; height: var(--hh) !important; padding: 0 4px; gap: 0; flex-wrap: nowrap !important; overflow: visible; /* must be visible so mega-menu & logo aren't clipped */ } /* Logo */ .header-logo { flex-shrink: 0; margin-right: 24px; display: flex; align-items: center; height: 100%; padding: 0; line-height: 1; } .header-logo a { display: flex; align-items: center; height: 100%; line-height: 1; } .header-logo .logo-text { font-family: var(--font); font-size: 1.18rem; font-weight: 800; color: #fff; letter-spacing: -.03em; white-space: nowrap; line-height: 1; } .header-logo img { height: 38px; width: auto; max-width: 160px; object-fit: contain; display: block; vertical-align: middle; } /* Nav */ .main-nav { flex: 1; min-width: 0; overflow: visible; max-width: calc(100% - 340px); } .main-nav__list { display: flex !important; align-items: center !important; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; height: var(--hh); gap: 0; } .mni { position: relative; height: 100%; display: flex; align-items: center; } .mni__link { display: flex !important; align-items: center; gap: 3px; padding: 0 11px !important; height: var(--hh) !important; font-family: var(--font); font-size: .8rem !important; font-weight: 500; color: rgba(255,255,255,.8) !important; cursor: pointer; white-space: nowrap; text-decoration: none !important; border-bottom: 2px solid transparent; transition: color var(--tx), border-color var(--tx), background var(--tx); } .mni__link:hover, .mni--active .mni__link { color: #fff !important; border-bottom-color: var(--ep-sky); background: rgba(255,255,255,.06); } .nav-caret { width: 8px; height: 5px; flex-shrink: 0; opacity: .55; transition: transform var(--tx); } .mni--mega:hover .nav-caret, .mni--drop:hover .nav-caret { transform: rotate(180deg); opacity: 1; } /* Header actions */ .header-actions { display: flex !important; align-items: center !important; gap: 8px; flex-shrink: 0 !important; padding: 0 0 0 12px; margin-left: auto !important; white-space: nowrap; } .header-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; font-family: var(--font); font-size: .78rem; font-weight: 600; border-radius: var(--r-md); white-space: nowrap; text-decoration: none !important; transition: all var(--tx); line-height: 1.2; } .header-btn--ghost { color: rgba(255,255,255,.78) !important; border: 1.5px solid rgba(255,255,255,.22); background: transparent; } .header-btn--ghost:hover { color: #fff !important; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); } .header-btn--primary { background: var(--ep-yellow) !important; color: #111 !important; border: 2px solid var(--ep-yellow) !important; font-weight: 700; font-size: .8rem; } .header-btn--primary:hover { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; transform: translateY(-1px); } .btn-label { display: inline; } /* Hamburger */ .hamburger { display: none !important; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; align-items: center; justify-content: center; } .hamburger-box { width: 22px; height: 16px; display: inline-block; position: relative; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 22px; height: 2px; background: #fff; border-radius: 2px; position: absolute; transition: all var(--tx); } .hamburger-inner { top: 50%; transform: translateY(-50%); } .hamburger-inner::before { content:''; top: -7px; } .hamburger-inner::after { content:''; bottom: -7px; } .hamburger.is-active .hamburger-inner { background: transparent; } .hamburger.is-active .hamburger-inner::before { transform: rotate(45deg) translate(5px,5px); } .hamburger.is-active .hamburger-inner::after { transform: rotate(-45deg) translate(5px,-5px); } /* Mega menu */ .nav-mega-drop { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%) translateY(-8px); width: 700px; background: var(--ep-navy); border-radius: 0 0 14px 14px; box-shadow: 0 16px 48px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.09); border-top: none; opacity: 0; pointer-events: none; transition: opacity var(--tx), transform var(--tx); z-index: 200; } .nav-mega-drop.is-visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-mega-inner { display: grid; grid-template-columns: 1fr 1fr 1fr 165px; padding: 22px; gap: 0; } .nav-mega-col { padding: 0 16px; border-right: 1px solid rgba(255,255,255,.07); } .nav-mega-col:first-child { padding-left: 0; } .nav-mega-col:last-child { border-right: none; } .nav-mega-label { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.4); margin-bottom: 10px; font-family: var(--font); } .nav-mega-col ul { list-style: none; } .nav-mega-col ul li a { display: block; padding: 5px 7px; color: rgba(255,255,255,.75) !important; font-size: .79rem; border-radius: 5px; transition: all var(--tx); font-family: var(--font); } .nav-mega-col ul li a:hover { color: #fff !important; background: rgba(255,255,255,.09); padding-left: 12px; } .nav-mega-cta-col { padding: 0 0 0 16px; } .nav-mega-cta-box { background: rgba(255,255,255,.08); border-radius: 10px; padding: 16px; text-align: center; } .nav-mega-cta-box svg { margin: 0 auto 9px; color: var(--ep-sky); } .nav-mega-cta-box strong { display: block; color: #fff; font-size: .84rem; margin-bottom: 7px; font-family: var(--font); } .nav-mega-cta-box p { color: rgba(255,255,255,.62); font-size: .74rem; margin: 0 0 12px; line-height: 1.5; } /* Simple dropdown */ .nav-dropdown { position: absolute; top: calc(100% + 1px); left: 0; min-width: 188px; background: var(--ep-navy); border-radius: 0 0 10px 10px; box-shadow: var(--sh-xl); border: 1px solid rgba(255,255,255,.09); border-top: none; list-style: none; padding: 8px; margin: 0; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity var(--tx), transform var(--tx); z-index: 200; } .nav-dropdown.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-dropdown li a { display: block; padding: 8px 11px; color: rgba(255,255,255,.8) !important; font-size: .79rem; border-radius: 5px; transition: all var(--tx); font-family: var(--font); } .nav-dropdown li a:hover { background: rgba(255,255,255,.1); color: #fff !important; } /* Mobile drawer */ .header-nav-drawer { display: none; position: fixed; top: var(--hh); left: 0; right: 0; bottom: 0; background: var(--ep-navy); z-index: 999; overflow-y: auto; transform: translateX(-100%); transition: transform var(--tx); padding-bottom: 40px; } .header-nav-drawer.is-open { transform: translateX(0); } .drawer-nav { list-style: none; } .drawer-item a, .drawer-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; color: rgba(255,255,255,.84); font-size: .94rem; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.07); background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; cursor: pointer; font-family: var(--font); transition: background var(--tx); } .drawer-item a:hover, .drawer-toggle:hover { background: rgba(255,255,255,.07); color: #fff; } .drawer-sub { display: none; background: rgba(0,0,0,.15); list-style: none; } .drawer-sub.is-open { display: block; } .drawer-sub li a { padding-left: 36px; font-size: .86rem; } .drawer-item--cta { padding: 16px 20px; } .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 997; opacity: 0; transition: opacity var(--tx); } .nav-backdrop.is-visible { opacity: 1; } /* Responsive breakpoints */ /* Header responsive breakpoints consolidated in TARGETED FIXES section below */ /* ══════════════════════════════════════════════════════ HERO — SIDE-BY-SIDE WITH CALCULATOR (EQUAL HEIGHT) ══════════════════════════════════════════════════════ */ .ep-hero, .page-hero, .cpt-hero { background: linear-gradient(135deg, var(--ep-navy) 0%, #0d4a3a 55%, #0f3561 100%); color: #fff; position: relative; overflow: hidden; } .ep-hero::before, .page-hero::before, .cpt-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(14,165,233,.12) 0%, transparent 70%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } /* Shared hero inner layout */ .ep-hero__inner, .page-hero__split, .cpt-hero__inner { display: grid !important; grid-template-columns: 1fr 360px !important; gap: 52px !important; align-items: stretch !important; /* EQUAL HEIGHT */ position: relative; z-index: 1; padding: 64px 0 72px; } /* Content side */ .ep-hero__content, .page-hero__content, .cpt-hero__content { display: flex; flex-direction: column; justify-content: center; } /* Calculator side — full height, glass panel */ .ep-hero__calc, .page-hero__calc, .cpt-hero__calc { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-xl); backdrop-filter: blur(14px); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; /* height matches content column via align-items:stretch */ } /* Make calc fill its container */ .ep-hero__calc .ep-calculator, .page-hero__calc .ep-calculator, .cpt-hero__calc .ep-calculator { flex: 1; display: flex; flex-direction: column; } .ep-hero__calc .ep-calc__submit-row, .page-hero__calc .ep-calc__submit-row, .cpt-hero__calc .ep-calc__submit-row { margin-top: auto; } /* Hero calc dark overrides */ .ep-hero__calc .ep-calc__header, .page-hero__calc .ep-calc__header, .cpt-hero__calc .ep-calc__header { background: rgba(255,255,255,.13) !important; color: #fff !important; } .ep-hero__calc .ep-calc__label, .page-hero__calc .ep-calc__label, .cpt-hero__calc .ep-calc__label { color: rgba(255,255,255,.58) !important; } .ep-hero__calc .ep-calc__words, .page-hero__calc .ep-calc__words, .cpt-hero__calc .ep-calc__words { color: rgba(255,255,255,.42) !important; } .ep-hero__calc .ep-calc__select, .page-hero__calc .ep-calc__select, .cpt-hero__calc .ep-calc__select { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; color: rgba(255,255,255,.9) !important; } .ep-hero__calc .ep-calc__select option, .page-hero__calc .ep-calc__select option, .cpt-hero__calc .ep-calc__select option { background: var(--ep-navy); color: #fff; } .ep-hero__calc .ep-calc__row, .page-hero__calc .ep-calc__row, .cpt-hero__calc .ep-calc__row { border-bottom-color: rgba(255,255,255,.09) !important; } .ep-hero__calc .ep-calc__stepper, .page-hero__calc .ep-calc__stepper, .cpt-hero__calc .ep-calc__stepper { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.18) !important; } .ep-hero__calc .ep-calc__step-btn, .page-hero__calc .ep-calc__step-btn, .cpt-hero__calc .ep-calc__step-btn { color: rgba(255,255,255,.78) !important; } .ep-hero__calc .ep-calc__pages-input, .page-hero__calc .ep-calc__pages-input, .cpt-hero__calc .ep-calc__pages-input { color: rgba(255,255,255,.9) !important; background: transparent !important; border-color: rgba(255,255,255,.18) !important; } .ep-hero__calc .ep-calc__total-row, .page-hero__calc .ep-calc__total-row, .cpt-hero__calc .ep-calc__total-row { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.1) !important; } .ep-hero__calc .ep-calc__total-label, .page-hero__calc .ep-calc__total-label, .cpt-hero__calc .ep-calc__total-label { color: rgba(255,255,255,.58) !important; } .ep-hero__calc .ep-calc__total-price, .page-hero__calc .ep-calc__total-price, .cpt-hero__calc .ep-calc__total-price { color: #fbbf24 !important; } .ep-hero__calc .ep-calc__footer-note, .page-hero__calc .ep-calc__footer-note, .cpt-hero__calc .ep-calc__footer-note { color: rgba(255,255,255,.42) !important; } .ep-hero__calc .ep-calc__submit-row .ep-btn-primary, .page-hero__calc .ep-calc__submit-row .ep-btn-primary, .cpt-hero__calc .ep-calc__submit-row .ep-btn-primary { background: var(--ep-yellow) !important; border-color: var(--ep-yellow) !important; color: #111 !important; font-weight: 700; } /* Hero text elements */ .ep-hero__badge, .cpt-hero__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(14,165,233,.18); border: 1px solid rgba(14,165,233,.35); color: #7dd3fc; font-size: .74rem; font-weight: 600; padding: 4px 12px; border-radius: var(--r-pill); margin-bottom: 14px; font-family: var(--font); } .ep-hero__title, .ep-hero h1, .page-hero__title, .page-hero h1, .cpt-hero h1 { font-family: var(--font) !important; font-size: clamp(1.85rem, 4vw, 3rem); font-weight: 800; line-height: 1.18; letter-spacing: -.03em; color: #fff !important; margin: 0 0 16px; } .ep-hero__desc, .page-hero__desc, .cpt-hero p { font-size: 1rem; color: rgba(255,255,255,.78); margin: 0 0 24px; line-height: 1.72; font-family: var(--font); } .ep-hero__actions, .page-hero__actions, .cpt-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .ep-hero__stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); } .ep-hero__stat strong { display: block; font-size: 1.5rem; font-weight: 900; color: #fbbf24; line-height: 1; font-family: var(--font); } .ep-hero__stat span { font-size: .72rem; color: rgba(255,255,255,.58); font-family: var(--font); } /* Breadcrumb inside hero */ .breadcrumb-hero { font-size: .74rem; color: rgba(255,255,255,.52); margin-bottom: 12px; font-family: var(--font); } .breadcrumb-hero a { color: rgba(255,255,255,.52); } .breadcrumb-hero a:hover { color: rgba(255,255,255,.82); } .breadcrumb-hero span { margin: 0 5px; } /* Hero trust strip */ .svc-hero-trust { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; font-size: .78rem; color: rgba(255,255,255,.65); font-family: var(--font); } .svc-hero-trust span { display: flex; align-items: center; gap: 4px; } /* Trust widget row inside hero */ .trust-widget-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; font-size: .78rem; color: rgba(255,255,255,.65); font-family: var(--font); } .trust-widget-item { display: flex; align-items: center; gap: 5px; } .trust-stars { color: #fbbf24; } /* Responsive hero */ @media(max-width:960px) { .ep-hero__inner, .page-hero__split, .cpt-hero__inner { grid-template-columns: 1fr !important; padding: 48px 0 56px; } .ep-hero__calc, .page-hero__calc, .cpt-hero__calc { display: none !important; } } /* ══════════════════════════════════════════════════════ SECTION SYSTEM ══════════════════════════════════════════════════════ */ .ep-section { padding: 68px 0; } .ep-section--sm { padding: 44px 0; } .ep-section--white { background: var(--bg-white); } .ep-section--green { background: var(--bg-lgreen); } .ep-section--blue { background: var(--bg-lblue); } .ep-section--yellow { background: var(--bg-lyellow); } .ep-section--purple { background: var(--bg-lpurple); } .ep-section--teal { background: var(--bg-lteal); } .ep-section--sky { background: var(--bg-lsky); } .ep-section--dark { background: var(--bg-navy); color: #fff; } .ep-section--gradient { background: linear-gradient(135deg, var(--bg-lgreen) 0%, var(--bg-lblue) 50%, var(--bg-lyellow) 100%); } .ep-section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; } .ep-section-head h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); font-weight: 800; color: var(--ep-text); margin: 0 0 12px; line-height: 1.25; font-family: var(--font); } .ep-section-head p { font-size: .95rem; color: var(--ep-text-muted); margin: 0; font-family: var(--font); } @media(max-width:768px){ .ep-section { padding: 48px 0; } } /* Section alternation on home/archive pages */ .feat-section { background: var(--bg-lgreen); } .hiw-section { background: var(--bg-lblue); } .benefits-section { background: var(--bg-lteal); } .f2-section { background: var(--bg-lyellow); } .extras-section { background: var(--bg-lpurple); } .testimonials-section { background: var(--bg-lpurple); } .services-menu-section { background: var(--ep-navy); } /* ══════════════════════════════════════════════════════ FEATURES WIDGET — CARD BOXES ══════════════════════════════════════════════════════ */ .feat-header { text-align: center; max-width: 640px; margin: 0 auto 44px; } .feat-header h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; color: var(--ep-text); margin: 0 0 10px; font-family: var(--font); } .feat-header p { font-size: .93rem; color: var(--ep-text-muted); margin: 0; } .feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 40px; } @media(max-width:900px){ .feat-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:560px){ .feat-grid { grid-template-columns: 1fr; } } .feat-card { background: var(--ep-white); border-radius: var(--r-lg); padding: 24px 20px; border: 1px solid var(--ep-border); box-shadow: var(--sh-xs); transition: all var(--tx); display: flex; flex-direction: column; gap: 10px; } .feat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: rgba(13,110,90,.15); } .feat-card__icon { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feat-icon--green { background: #d1fae5; color: #059669; } .feat-icon--blue { background: var(--ep-blue-lt); color: var(--ep-blue-mid); } .feat-icon--yellow { background: var(--ep-yellow-lt); color: #d97706; } .feat-icon--purple { background: var(--ep-purple-lt); color: #7c3aed; } .feat-card__title { font-size: .88rem; font-weight: 700; color: var(--ep-text); margin: 0; line-height: 1.35; font-family: var(--font); } .feat-card__desc { font-size: .8rem; color: var(--ep-text-muted); margin: 0; line-height: 1.62; flex: 1; font-family: var(--font); } .feat-card__stat { font-size: 1rem; font-weight: 800; color: var(--ep-teal); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ep-border-lt); font-family: var(--font); } .feat-card__stat span { font-size: .7rem; font-weight: 500; color: var(--ep-text-muted); margin-left: 3px; } /* Free banner */ .feat-free-banner { display: grid; grid-template-columns: 1.2fr 1.4fr auto; gap: 32px; align-items: center; background: linear-gradient(135deg, var(--ep-navy) 0%, #0d4a3a 100%); border-radius: var(--r-xl); padding: 32px 36px; } @media(max-width:960px){ .feat-free-banner { grid-template-columns: 1fr; gap: 22px; padding: 24px; } } .feat-free-banner__label { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fbbf24; margin-bottom: 7px; font-family: var(--font); } .feat-free-banner__title { font-size: 1.08rem; font-weight: 800; color: #fff; margin: 0 0 7px; font-family: var(--font); } .feat-free-banner__sub { font-size: .8rem; color: rgba(255,255,255,.65); font-family: var(--font); } .feat-free-items { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; } @media(max-width:560px){ .feat-free-items { grid-template-columns: 1fr; } } .feat-free-item { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: rgba(255,255,255,.82); font-family: var(--font); } .feat-free-item svg { flex-shrink: 0; color: #6ee7b7; } .feat-free-banner__cta { flex-shrink: 0; text-align: center; } .feat-free-banner__total { font-size: .82rem; color: rgba(255,255,255,.62); margin: 0 0 12px; font-family: var(--font); } .feat-free-banner__total strong { color: #fbbf24; font-size: 1.1rem; } .feat-free-banner__cta .ep-btn-primary { background: #fbbf24 !important; border-color: #fbbf24 !important; color: #111 !important; font-weight: 700; } /* ══════════════════════════════════════════════════════ REVIEWS / TESTIMONIALS — CARD BOXES (L→R) ══════════════════════════════════════════════════════ */ .testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 36px; } @media(max-width:900px){ .testimonials-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:560px){ .testimonials-grid { grid-template-columns: 1fr; } } .tcard { background: var(--ep-white); border: 1px solid var(--ep-border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-xs); display: flex; flex-direction: column; transition: all var(--tx); } .tcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: rgba(13,110,90,.12); } .tcard__header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .tcard__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--ep-teal), var(--ep-blue-mid)); color: #fff; font-size: .95rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font); } .tcard__author-info { flex: 1; min-width: 0; } .tcard__name { display: block; font-size: .83rem; font-weight: 700; color: var(--ep-text); font-family: var(--font); } .tcard__role { font-size: .73rem; color: var(--ep-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-family: var(--font); } .tcard__stars { color: #f59e0b; font-size: .95rem; flex-shrink: 0; line-height: 1; } .tcard__badge { display: inline-block; background: var(--ep-green-lt); color: #065f46; font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font); } .tcard__text { font-size: .82rem; color: var(--ep-text-md); line-height: 1.65; flex: 1; font-style: italic; margin: 0 0 10px; font-family: var(--font); } .tcard__date { font-size: .72rem; color: var(--ep-text-light); margin-top: auto; font-family: var(--font); } .extras-summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; background: var(--ep-white); border-radius: var(--r-lg); border: 1px solid var(--ep-border); padding: 22px 26px; box-shadow: var(--sh-xs); } .extras-score { display: flex; align-items: center; gap: 12px; } .extras-score__num { font-size: 2.6rem; font-weight: 900; color: var(--ep-teal); line-height: 1; font-family: var(--font); } .extras-score__right { display: flex; flex-direction: column; gap: 2px; } .extras-score__stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; } .extras-score__count { font-size: .78rem; color: var(--ep-text-muted); font-family: var(--font); } .extras-platforms { display: flex; gap: 9px; flex-wrap: wrap; } .extras-platform-badge { background: var(--bg-lgreen); border: 1px solid var(--ep-green-lt); border-radius: var(--r-sm); padding: 6px 12px; font-size: .76rem; font-weight: 600; color: var(--ep-text-md); font-family: var(--font); } /* ══════════════════════════════════════════════════════ HOW IT WORKS ══════════════════════════════════════════════════════ */ .hiw-grid { display: flex; align-items: stretch; gap: 0; margin-bottom: 32px; } .hiw-step { flex: 1; background: var(--ep-white); border-radius: var(--r-lg); padding: 28px 20px 20px; border: 1px solid var(--ep-border); box-shadow: var(--sh-xs); text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; transition: all var(--tx); } .hiw-step:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } .hiw-step__num { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; background: var(--ep-teal); color: #fff; font-size: .72rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font); } .hiw-step__icon { width: 54px; height: 54px; background: var(--ep-blue-xlt); border-radius: 13px; display: flex; align-items: center; justify-content: center; margin: 4px auto 14px; color: var(--ep-blue-mid); } .hiw-step__title { font-size: .88rem; font-weight: 700; color: var(--ep-text); margin: 0 0 8px; font-family: var(--font); } .hiw-step__desc { font-size: .79rem; color: var(--ep-text-muted); line-height: 1.62; flex: 1; margin: 0 0 12px; font-family: var(--font); } .hiw-step__time { font-size: .71rem; font-weight: 600; color: var(--ep-teal); background: var(--ep-green-lt); padding: 2px 9px; border-radius: var(--r-pill); margin-top: auto; font-family: var(--font); } .hiw-step__arrow { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; padding-top: 18px; } .hiw-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } @media(max-width:768px) { .hiw-grid { flex-direction: column; gap: 14px; } .hiw-step__arrow { transform: rotate(90deg); align-self: center; width: auto; padding: 0; } } /* ══════════════════════════════════════════════════════ FEATURES-2 (pricing card) ══════════════════════════════════════════════════════ */ .f2-grid { display: grid; grid-template-columns: 1fr 330px; gap: 48px; align-items: start; } @media(max-width:960px){ .f2-grid { grid-template-columns: 1fr; } } .f2-heading { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; color: var(--ep-text); margin: 0 0 8px; line-height: 1.28; font-family: var(--font); } .f2-subheading { font-size: .9rem; color: var(--ep-text-muted); margin: 0 0 24px; font-family: var(--font); } .f2-feature-list { display: flex; flex-direction: column; gap: 12px; } .f2-item { display: flex; gap: 12px; align-items: flex-start; background: var(--ep-white); border-radius: var(--r-md); padding: 14px 16px; border: 1px solid var(--ep-border); box-shadow: var(--sh-xs); transition: all var(--tx); } .f2-item:hover { box-shadow: var(--sh-md); transform: translateX(3px); border-color: rgba(13,110,90,.15); } .f2-item__icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .f2-item__body strong { display: block; font-size: .84rem; font-weight: 700; color: var(--ep-text); margin-bottom: 2px; font-family: var(--font); } .f2-item__body p { font-size: .78rem; color: var(--ep-text-muted); margin: 0; line-height: 1.58; font-family: var(--font); } .f2-pricing-card { background: var(--ep-white); border-radius: var(--r-xl); box-shadow: var(--sh-xl); border: 1px solid var(--ep-border); overflow: hidden; position: sticky; top: calc(var(--hh) + 20px); } .f2-pricing-card__header { background: linear-gradient(135deg, var(--ep-navy) 0%, var(--ep-teal) 100%); padding: 20px; text-align: center; } .f2-pricing-card__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.58); margin-bottom: 4px; font-family: var(--font); } .f2-pricing-card__sub { font-size: .78rem; color: rgba(255,255,255,.58); font-family: var(--font); } .f2-pricing-card__price { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 16px 20px; background: var(--bg-lteal); border-bottom: 1px solid var(--ep-border-lt); } .f2-price-from { font-size: .75rem; color: var(--ep-text-muted); font-family: var(--font); } .f2-price-amount { font-size: 2.8rem; font-weight: 900; color: var(--ep-teal); line-height: 1; font-family: var(--font); } .f2-price-unit { font-size: .78rem; color: var(--ep-text-muted); font-family: var(--font); } .f2-free-list { list-style: none; margin: 0; padding: 12px 20px; } .f2-free-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .82rem; color: var(--ep-text); border-bottom: 1px solid var(--ep-border-lt); font-family: var(--font); } .f2-free-list li:last-child { border-bottom: none; } .f2-free-badge { background: var(--ep-teal); color: #fff; font-size: .6rem; font-weight: 800; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; letter-spacing: .04em; } .f2-pricing-card__rating { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 20px; background: var(--bg-lyellow); border-top: 1px solid var(--ep-border-lt); font-size: .75rem; color: var(--ep-text-muted); font-family: var(--font); } .f2-stars { color: #f59e0b; } .f2-pricing-card__cta { display: block; margin: 0 20px 8px; text-align: center; } .f2-pricing-card__note { text-align: center; font-size: .7rem; color: var(--ep-text-muted); padding: 0 20px 14px; font-family: var(--font); } /* ══════════════════════════════════════════════════════ SIDEBAR — EXACT COLAPAPERS STICKY BEHAVIOUR ══════════════════════════════════════════════════════ */ .single-grid, .cpt-content-grid { display: grid; grid-template-columns: 1fr 296px; gap: 36px; align-items: start; padding: 28px 0 56px; } @media(max-width:960px) { .single-grid, .cpt-content-grid { grid-template-columns: 1fr; } .single-sidebar, .cpt-sidebar { display: none; } } .sidebar-sticky-wrap { position: sticky; top: calc(var(--hh) + 16px); max-height: calc(100vh - var(--hh) - 24px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--ep-border) transparent; } .sidebar-sticky-wrap::-webkit-scrollbar { width: 3px; } .sidebar-sticky-wrap::-webkit-scrollbar-thumb { background: var(--ep-border); border-radius: 2px; } /* Sidebar widget cards */ .sw { background: var(--ep-white); border: 1px solid var(--ep-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: box-shadow var(--tx); } .sw:hover { box-shadow: var(--sh-md); } .sw--calc { border-top: 3px solid var(--ep-teal); } .sw__header { display: flex; align-items: center; gap: 7px; padding: 12px 15px; font-size: .82rem; font-weight: 700; color: #fff; background: var(--ep-teal); font-family: var(--font); } .sw__title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ep-text-muted); padding: 12px 15px 7px; margin: 0; border-bottom: 1px solid var(--ep-border-lt); font-family: var(--font); } .sw--promo { background: linear-gradient(135deg, var(--ep-navy) 0%, var(--ep-teal) 100%); border: none; text-align: center; padding: 20px 16px; } .sw-promo__badge { display: inline-block; background: rgba(255,255,255,.13); color: rgba(255,255,255,.78); font-size: .6rem; font-weight: 800; letter-spacing: .12em; padding: 2px 9px; border-radius: var(--r-pill); margin-bottom: 7px; text-transform: uppercase; font-family: var(--font); } .sw-promo__pct { font-size: 2.6rem; font-weight: 900; color: #fbbf24; line-height: 1; margin-bottom: 4px; font-family: var(--font); } .sw-promo__sub { font-size: .82rem; color: rgba(255,255,255,.7); margin-bottom: 8px; font-family: var(--font); } .sw-promo__code { font-size: .78rem; color: rgba(255,255,255,.58); margin-bottom: 12px; font-family: var(--font); } .sw-coupon { background: rgba(255,255,255,.13); color: #fff; padding: 2px 7px; border-radius: 4px; font-family: monospace; font-weight: 700; border: 1px dashed rgba(255,255,255,.32); } .sw-promo__btn { display: block; width: 100%; background: #f59e0b !important; border-color: #f59e0b !important; color: #111 !important; font-weight: 700; margin-top: 4px; } .sw-promo__btn:hover { background: #d97706 !important; } .sw--trust { background: var(--bg-lgreen); border-color: var(--ep-green-lt); } .sw-trust-list { list-style: none; margin: 0; padding: 8px 15px; } .sw-trust-list li { display: flex; align-items: flex-start; gap: 7px; padding: 5px 0; font-size: .79rem; color: var(--ep-text); border-bottom: 1px solid rgba(0,0,0,.04); line-height: 1.45; font-family: var(--font); } .sw-trust-list li:last-child { border-bottom: none; } .sw-check { color: var(--ep-teal); font-weight: 900; font-size: .82rem; flex-shrink: 0; margin-top: 1px; } .sw-trust__link { display: block; padding: 7px 15px 11px; font-size: .76rem; color: var(--ep-teal); font-weight: 600; text-align: center; font-family: var(--font); } .sw--services { border-top: 3px solid var(--ep-blue-mid); } .sw-services-list { list-style: none; margin: 0; padding: 6px 15px; } .sw-services-list li { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ep-border-lt); padding: 6px 0; } .sw-services-list li:last-child { border-bottom: none; } .sw-services-list li a { font-size: .79rem; color: var(--ep-text); transition: color var(--tx); font-family: var(--font); } .sw-services-list li a:hover { color: var(--ep-teal); } .sw-svc-price { font-size: .71rem; color: var(--ep-teal); font-weight: 700; flex-shrink: 0; font-family: var(--font); } .sw-svc-all { color: var(--ep-blue-mid) !important; font-weight: 600 !important; } .sw-services__btn { display: block; margin: 9px 15px 13px; text-align: center; } .sw--review { background: var(--bg-lyellow); border-color: var(--ep-yellow-lt); } .sw-review-card { padding: 10px 15px; border-bottom: 1px solid rgba(0,0,0,.06); } .sw-review-card:last-of-type { border-bottom: none; } .sw-review__stars { color: #f59e0b; font-size: .88rem; margin-bottom: 4px; } .sw-review__text { font-size: .77rem; color: var(--ep-text); line-height: 1.55; margin: 0 0 4px; font-style: italic; font-family: var(--font); } .sw-review__author { font-size: .7rem; color: var(--ep-text-muted); font-family: var(--font); } .sw--urgent { background: linear-gradient(135deg, var(--ep-yellow-lt), var(--ep-blue-xlt)); border-color: var(--ep-yellow-lt); text-align: center; padding: 17px 15px; } .sw-urgent__icon { font-size: 1.55rem; line-height: 1; margin-bottom: 6px; } .sw-urgent__title { display: block; font-size: .84rem; font-weight: 700; color: var(--ep-text); margin-bottom: 5px; font-family: var(--font); } .sw-urgent__text { font-size: .77rem; color: var(--ep-text-muted); margin-bottom: 11px; font-family: var(--font); } .sw-urgent__btn { display: block; } .sw--subjects { background: var(--bg-lpurple); border-color: var(--ep-purple-lt); } .sw-subjects-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 15px 13px; } .sw-subject-tag { display: inline-block; padding: 3px 9px; background: var(--ep-white); border: 1px solid #c4b5fd; border-radius: var(--r-pill); font-size: .71rem; color: #7c3aed; font-weight: 500; transition: all var(--tx); font-family: var(--font); } .sw-subject-tag:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; } .sw--faq { background: var(--bg-lsky); border-color: var(--ep-blue-lt); } .sw-faq-item { padding: 9px 15px; border-bottom: 1px solid rgba(0,0,0,.05); } .sw-faq-item:last-child { border-bottom: none; } .sw-faq-item__q { font-size: .78rem; font-weight: 600; color: var(--ep-text); margin-bottom: 3px; font-family: var(--font); } .sw-faq-item__a { font-size: .75rem; color: var(--ep-text-muted); line-height: 1.55; font-family: var(--font); } /* ══════════════════════════════════════════════════════ SINGLE POST ══════════════════════════════════════════════════════ */ .single-wrap { background: var(--ep-bg); } .single-article { min-width: 0; } .article-header { background: var(--ep-white); border-radius: var(--r-lg); padding: 26px; margin-bottom: 18px; box-shadow: var(--sh-xs); border: 1px solid var(--ep-border); } .article-title { font-size: clamp(1.35rem, 2.8vw, 1.95rem); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--ep-text); margin: 0 0 14px; font-family: var(--font); } .article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: .78rem; color: var(--ep-text-muted); margin-bottom: 16px; font-family: var(--font); } .meta-sep { color: var(--ep-border); } .meta-author { display: flex; align-items: center; gap: 8px; } .meta-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ep-green-lt); } .meta-author__name { font-weight: 600; color: var(--ep-text); font-size: .78rem; display: block; font-family: var(--font); } .meta-author__role { font-size: .68rem; color: var(--ep-text-muted); font-family: var(--font); } .meta-date, .meta-time { display: flex; align-items: center; gap: 4px; } .article-featured-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9; } .article-img { width: 100%; height: 100%; object-fit: cover; } .article-body { background: var(--ep-white); border-radius: var(--r-lg); padding: 26px; margin-bottom: 18px; box-shadow: var(--sh-xs); border: 1px solid var(--ep-border); font-size: .98rem; line-height: 1.82; color: var(--ep-text); font-family: var(--font); } .article-body h2 { font-size: 1.4rem; font-weight: 700; margin: 2em 0 .7em; font-family: var(--font); } .article-body h3 { font-size: 1.1rem; font-weight: 700; margin: 1.7em 0 .6em; font-family: var(--font); } .article-body h4 { font-size: .98rem; font-weight: 700; margin: 1.4em 0 .5em; font-family: var(--font); } .article-body p { margin-bottom: 1.3em; } .article-body ul, .article-body ol { padding-left: 1.4em; margin-bottom: 1.3em; } .article-body li { margin-bottom: .4em; list-style: initial; } .article-body ol li { list-style: decimal; } .article-body blockquote { border-left: 4px solid var(--ep-sky); margin: 1.5em 0; padding: 12px 16px; background: var(--bg-lsky); border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: var(--ep-text-md); } .article-body a { color: var(--ep-blue); } .article-body a:hover { color: var(--ep-teal); } .article-body img { border-radius: var(--r-md); margin: 1.2em 0; } .article-body table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .86rem; } .article-body th { background: var(--bg-lteal); padding: 9px 12px; border: 1px solid var(--ep-border); font-weight: 700; text-align: left; font-family: var(--font); } .article-body td { padding: 9px 12px; border: 1px solid var(--ep-border); } .article-body tr:nth-child(even) { background: var(--bg-lgreen); } /* Injection CTAs */ .inject-cta { border-radius: var(--r-lg); margin: 0 0 18px; overflow: visible; } .inject-cta--top { background: linear-gradient(135deg, var(--bg-lgreen), var(--bg-lblue)); border: 1px solid var(--ep-green-lt); border-top: 3px solid var(--ep-teal); padding: 18px 20px; } .inject-cta--bottom { background: linear-gradient(135deg, var(--bg-lyellow), var(--bg-lteal)); border: 1px solid var(--ep-yellow-lt); border-top: 3px solid var(--ep-yellow); padding: 18px 20px; } .inject-cta__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .inject-cta__text strong { display: block; font-size: .92rem; font-weight: 700; margin-bottom: 4px; font-family: var(--font); } .inject-cta__text p { font-size: .82rem; color: var(--ep-text-muted); margin: 0; font-family: var(--font); } .inject-cta__btn { flex-shrink: 0; } .inject-cta__offer { font-size: .76rem; color: var(--ep-teal); font-weight: 500; margin: 7px 0 0; font-family: var(--font); } .content-inject { margin: 26px 0; border-radius: var(--r-lg); overflow: visible; } .content-inject--calculator { background: linear-gradient(135deg, var(--bg-lgreen), var(--bg-lblue)); border: 1px solid var(--ep-green-lt); padding: 18px 20px; } .content-inject--writers { background: linear-gradient(135deg, var(--bg-lpurple), var(--bg-lsky)); border: 1px solid var(--ep-purple-lt); padding: 18px 20px; } .content-inject--guarantee { background: linear-gradient(135deg, var(--bg-lteal), var(--bg-lyellow)); border: 2px solid var(--ep-teal); padding: 18px 20px; } .content-inject__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .content-inject__left strong { display: block; font-size: .92rem; font-weight: 700; color: var(--ep-text); margin-bottom: 4px; font-family: var(--font); } .content-inject__left p { font-size: .81rem; color: var(--ep-text-muted); margin: 0; font-family: var(--font); } .content-inject__writers-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .ci-writer-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--ep-teal), var(--ep-blue-mid)); color: #fff; font-size: .95rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font); } .ci-writer-info strong { display: block; font-size: .81rem; font-weight: 700; font-family: var(--font); } .ci-writer-info span { font-size: .71rem; color: var(--ep-text-muted); font-family: var(--font); } .ci-writer-stars { color: #f59e0b; font-size: .78rem; } .content-inject__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 11px; margin-bottom: 13px; } .content-inject__trust-item { display: flex; align-items: flex-start; gap: 7px; font-size: .8rem; font-family: var(--font); } .content-inject__trust-item strong { display: block; color: var(--ep-text); font-size: .82rem; } .content-inject__trust-item span { color: var(--ep-text-muted); line-height: 1.5; } @media(max-width:600px) { .content-inject__grid { grid-template-columns: 1fr; } .content-inject__inner { flex-direction: column; } } /* Tags: Z→A, max 6 */ .article-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: var(--ep-white); border-radius: var(--r-md); padding: 12px 16px; border: 1px solid var(--ep-border); margin: 0 0 16px; font-size: .82rem; } .article-tags a:nth-child(n+7) { display: none !important; } .article-tags a { background: var(--bg-lgreen); color: var(--ep-teal); padding: 3px 9px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 500; transition: all var(--tx); border: 1px solid var(--ep-green-lt); font-family: var(--font); } .article-tags a:hover { background: var(--ep-teal); color: #fff; border-color: var(--ep-teal); } /* Author box */ .author-box { display: flex; gap: 16px; background: var(--bg-lsky); border: 1px solid var(--ep-blue-lt); border-radius: var(--r-lg); padding: 20px; margin: 0 0 16px; } .author-box__avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--ep-white); } .author-box__body { flex: 1; } .author-box__name { font-size: .92rem; font-weight: 700; margin: 0 0 2px; font-family: var(--font); } .author-box__name a { color: var(--ep-text); } .author-box__title { font-size: .74rem; color: var(--ep-teal); font-weight: 600; margin-bottom: 6px; font-family: var(--font); } .author-box__bio { font-size: .8rem; color: var(--ep-text-muted); margin: 0; font-family: var(--font); } /* Related */ .related-posts { background: var(--ep-white); border-radius: var(--r-lg); padding: 22px; border: 1px solid var(--ep-border); box-shadow: var(--sh-xs); } .related-posts__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; font-family: var(--font); } .related-posts__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } @media(max-width:768px) { .related-posts__grid { grid-template-columns: 1fr; } } .related-card { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--ep-border); transition: all var(--tx); background: var(--ep-white); } .related-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .related-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; } .related-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .related-card:hover .related-card__img { transform: scale(1.05); } .related-card__body { padding: 11px; } .related-card__title { font-size: .81rem; font-weight: 700; margin: 0 0 5px; line-height: 1.4; font-family: var(--font); } .related-card__title a { color: var(--ep-text); } .related-card__title a:hover { color: var(--ep-teal); } .related-card__date { font-size: .7rem; color: var(--ep-text-muted); font-family: var(--font); } /* ══════════════════════════════════════════════════════ SERVICES CPT ══════════════════════════════════════════════════════ */ .svc-cat-filter { background: var(--ep-white); border-bottom: 1px solid var(--ep-border); padding: 14px 0; } .svc-cat-filter__inner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .svc-cat-btn { display: inline-block; padding: 6px 14px; border: 1.5px solid var(--ep-border); border-radius: var(--r-pill); font-size: .8rem; font-weight: 500; color: var(--ep-text-muted); transition: all var(--tx); background: var(--ep-white); cursor: pointer; font-family: var(--font); text-decoration: none; } .svc-cat-btn:hover, .svc-cat-btn--active { background: var(--ep-teal); border-color: var(--ep-teal); color: #fff !important; } .svc-archive-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } @media(max-width:900px){ .svc-archive-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:560px){ .svc-archive-grid { grid-template-columns: 1fr; } } .svc-archive-card { background: var(--ep-white); border: 1px solid var(--ep-border); border-radius: var(--r-lg); overflow: hidden; transition: all var(--tx); box-shadow: var(--sh-xs); display: flex; flex-direction: column; } .svc-archive-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: rgba(13,110,90,.15); } .svc-archive-card__icon { height: 100px; background: linear-gradient(135deg, var(--bg-lteal), var(--bg-lblue)); display: flex; align-items: center; justify-content: center; color: var(--ep-teal); flex-shrink: 0; } .svc-archive-card__icon-placeholder { width: 56px; height: 56px; background: rgba(13,110,90,.1); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; } .svc-archive-card__img { width: 100%; height: 100%; object-fit: cover; } .svc-archive-card__body { padding: 18px; flex: 1; display: flex; flex-direction: column; } .svc-archive-card__cat { display: inline-block; background: var(--bg-lteal); color: var(--ep-teal); font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font); } .svc-archive-card__title { font-size: .94rem; font-weight: 700; margin: 0 0 8px; font-family: var(--font); } .svc-archive-card__title a { color: var(--ep-text); } .svc-archive-card__title a:hover { color: var(--ep-teal); } .svc-archive-card__excerpt { font-size: .8rem; color: var(--ep-text-muted); line-height: 1.6; margin: 0 0 12px; flex: 1; font-family: var(--font); } .svc-archive-card__features { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; } .svc-archive-card__features li { display: flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--ep-text-muted); font-family: var(--font); } .svc-archive-card__footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; } .svc-archive-card__price { font-size: .86rem; font-weight: 700; color: var(--ep-teal); font-family: var(--font); } /* ══════════════════════════════════════════════════════ COUNTRY CPT ══════════════════════════════════════════════════════ */ .cpt-stats-bar { background: var(--bg-lteal); border-bottom: 1px solid var(--ep-green-lt); } .cpt-stats-inner { display: flex; justify-content: space-around; padding: 16px 24px; flex-wrap: wrap; gap: 12px; } .cpt-stat { text-align: center; } .cpt-stat strong { display: block; font-size: 1.4rem; font-weight: 900; color: var(--ep-teal); font-family: var(--font); } .cpt-stat span { font-size: .74rem; color: var(--ep-text-muted); font-family: var(--font); } .cpt-services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } @media(max-width:900px){ .cpt-services-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:560px){ .cpt-services-grid { grid-template-columns: 1fr; } } .cpt-svc-card { background: var(--ep-white); border: 1px solid var(--ep-border); border-radius: var(--r-lg); padding: 22px 18px; transition: all var(--tx); position: relative; overflow: hidden; box-shadow: var(--sh-xs); } .cpt-svc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ep-teal), var(--ep-sky)); transform: scaleX(0); transition: transform var(--tx); transform-origin: left; } .cpt-svc-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); } .cpt-svc-card:hover::before { transform: scaleX(1); } .cpt-svc-card h3 { font-size: .88rem; font-weight: 700; color: var(--ep-text); margin: 0 0 8px; font-family: var(--font); } .cpt-svc-card p { font-size: .79rem; color: var(--ep-text-muted); margin: 0 0 12px; line-height: 1.62; font-family: var(--font); } .cpt-main-content { font-family: var(--font); } .cpt-main-content h2 { font-size: 1.35rem; font-weight: 700; margin: 1.8em 0 .7em; } .cpt-main-content h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5em 0 .6em; } .cpt-main-content p { margin-bottom: 1.15em; color: var(--ep-text-muted); line-height: 1.78; font-size: .93rem; } .cpt-main-content ul { padding-left: 1.4em; margin-bottom: 1.15em; } .cpt-main-content li { list-style: disc; margin-bottom: .42em; color: var(--ep-text-muted); font-size: .93rem; } /* ══════════════════════════════════════════════════════ BREADCRUMB ══════════════════════════════════════════════════════ */ .breadcrumb-bar { background: var(--bg-lsky); border-bottom: 1px solid var(--ep-blue-lt); padding: 9px 0; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: .76rem; color: var(--ep-text-muted); list-style: none; font-family: var(--font); } .breadcrumb a { color: var(--ep-text-muted); } .breadcrumb a:hover { color: var(--ep-teal); } .breadcrumb-sep { color: var(--ep-text-light); } /* ══════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════ */ .site-footer { background: var(--ep-navy); color: rgba(255,255,255,.72); font-family: var(--font); } .footer-trust-bar { background: rgba(0,0,0,.18); border-bottom: 1px solid rgba(255,255,255,.08); } .footer-trust-inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; padding: 13px 24px; } .footer-trust-item { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: rgba(255,255,255,.68); white-space: nowrap; } .footer-main { padding: 54px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 26px; } @media(max-width:1100px){ .footer-grid { grid-template-columns: repeat(3,1fr); } .footer-col--brand { grid-column: 1/-1; max-width: 360px; } .footer-col--wide { grid-column: 1/-1; } } @media(max-width:640px){ .footer-grid { grid-template-columns: repeat(2,1fr); } } .footer-col__heading { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.42); margin: 0 0 13px; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { font-size: .82rem; color: rgba(255,255,255,.6); transition: color var(--tx); } .footer-links a:hover { color: #fff; } .footer-logo .logo-text { font-size: 1.22rem; font-weight: 800; color: #fff; font-family: var(--font); } .footer-tagline { font-size: .81rem; color: rgba(255,255,255,.52); margin: 8px 0 12px; line-height: 1.6; } .footer-rating { display: flex; align-items: center; gap: 8px; font-size: .77rem; color: rgba(255,255,255,.55); margin-bottom: 13px; } .footer-stars { color: #fbbf24; } .footer-social { display: flex; gap: 8px; } .footer-social__link { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.62); transition: all var(--tx); } .footer-social__link:hover { background: rgba(255,255,255,.18); color: #fff; } .footer-disclaimer { font-size: .77rem; color: rgba(255,255,255,.47); line-height: 1.62; margin-bottom: 16px; } .footer-subscribe__title { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; } .footer-subscribe-form { display: flex; gap: 6px; margin-bottom: 6px; } .footer-email-input { flex: 1; padding: 8px 11px; background: rgba(255,255,255,.09); border: 1.5px solid rgba(255,255,255,.17); border-radius: var(--r-md); font-size: .81rem; color: #fff; font-family: var(--font); } .footer-email-input::placeholder { color: rgba(255,255,255,.35); } .footer-email-input:focus { outline: none; border-color: rgba(255,255,255,.42); } .footer-subscribe-btn { flex-shrink: 0; padding: 8px 13px; font-size: .78rem; } .footer-no-spam { font-size: .7rem; color: rgba(255,255,255,.36); } .footer-payments { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .footer-subjects-row { border-top: 1px solid rgba(255,255,255,.07); padding: 12px 0; } .footer-subjects-row .wrapper { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .footer-subjects-label { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; flex-shrink: 0; } .footer-subjects-links { display: flex; flex-wrap: wrap; gap: 4px; } .footer-subjects-links a { font-size: .74rem; color: rgba(255,255,255,.48); } .footer-subjects-links a:hover { color: rgba(255,255,255,.82); } .footer-subjects-links a::after { content: '·'; margin-left: 4px; color: rgba(255,255,255,.18); } .footer-subjects-links a:last-child::after { display: none; } .footer-bottom { background: rgba(0,0,0,.22); padding: 13px 0; } .footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; } .footer-copyright { font-size: .76rem; color: rgba(255,255,255,.38); margin: 0; } .footer-bottom__links { display: flex; flex-wrap: wrap; gap: 13px; } .footer-bottom__links a { font-size: .73rem; color: rgba(255,255,255,.36); transition: color var(--tx); } .footer-bottom__links a:hover { color: rgba(255,255,255,.72); } /* ══════════════════════════════════════════════════════ FAQ ══════════════════════════════════════════════════════ */ .faq-item { background: var(--ep-white); border: 1px solid var(--ep-border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--tx); box-shadow: var(--sh-xs); } .faq-item:hover { border-color: var(--ep-green-lt); } .faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 18px; background: none; border: none; text-align: left; font-size: .87rem; font-weight: 600; color: var(--ep-text); cursor: pointer; font-family: var(--font); gap: 11px; transition: background var(--tx); } .faq-question:hover { background: var(--bg-lgreen); } .faq-question[aria-expanded="true"] { background: var(--bg-lteal); color: var(--ep-teal); } .faq-question[aria-expanded="true"] .faq-caret { transform: rotate(180deg); color: var(--ep-teal); } .faq-caret { flex-shrink: 0; transition: transform var(--tx); } .faq-answer { padding: 0 18px 15px; background: var(--bg-lteal); border-top: 1px solid var(--ep-border-lt); } .faq-answer p { margin: 12px 0 0; font-size: .85rem; color: var(--ep-text-muted); line-height: 1.72; font-family: var(--font); } .faq-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 26px; border-bottom: 2px solid var(--ep-border); } .faq-tab { padding: 8px 15px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: .82rem; font-weight: 600; color: var(--ep-text-muted); cursor: pointer; transition: all var(--tx); font-family: var(--font); } .faq-tab:hover { color: var(--ep-teal); } .faq-tab--active { color: var(--ep-teal); border-bottom-color: var(--ep-teal); } .faq-panel { display: none; } .faq-panel--active { display: block; } .faq-list { display: flex; flex-direction: column; gap: 9px; } /* ══════════════════════════════════════════════════════ HOMEPAGE ══════════════════════════════════════════════════════ */ .hp-blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } @media(max-width:768px){ .hp-blog-grid { grid-template-columns: 1fr; } } @media(min-width:769px) and (max-width:1024px){ .hp-blog-grid { grid-template-columns: repeat(2,1fr); } } .hp-blog-card { background: var(--ep-white); border: 1px solid var(--ep-border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: all var(--tx); box-shadow: var(--sh-xs); } .hp-blog-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: rgba(13,110,90,.12); } .hp-blog-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; } .hp-blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .hp-blog-card:hover .hp-blog-card__img { transform: scale(1.05); } .hp-blog-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; } .hp-blog-card__meta { font-size: .73rem; color: var(--ep-text-muted); margin-bottom: 6px; display: flex; gap: 5px; font-family: var(--font); } .hp-blog-card__title { font-size: .9rem; font-weight: 700; margin: 0 0 8px; line-height: 1.4; flex: 1; font-family: var(--font); } .hp-blog-card__title a { color: var(--ep-text); } .hp-blog-card__title a:hover { color: var(--ep-teal); } .hp-blog-card__excerpt { font-size: .8rem; color: var(--ep-text-muted); margin: 0 0 11px; line-height: 1.58; font-family: var(--font); } .hp-blog-card__link { font-size: .78rem; font-weight: 600; color: var(--ep-teal); align-self: flex-start; font-family: var(--font); } .country-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } @media(max-width:768px){ .country-grid { grid-template-columns: repeat(2,1fr); } } .country-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 12px; background: var(--ep-white); border: 1.5px solid var(--ep-border); border-radius: var(--r-lg); text-align: center; text-decoration: none; transition: all var(--tx); box-shadow: var(--sh-xs); } .country-card:hover { border-color: var(--ep-teal); box-shadow: var(--sh-lg); transform: translateY(-3px); } .country-flag { font-size: 1.8rem; } .country-name { font-size: .87rem; font-weight: 700; color: var(--ep-text); font-family: var(--font); } .country-desc { font-size: .7rem; color: var(--ep-text-muted); line-height: 1.5; font-family: var(--font); } /* ══════════════════════════════════════════════════════ CALCULATOR WIDGET ══════════════════════════════════════════════════════ */ .ep-calculator { background: var(--ep-white); border-radius: var(--r-lg); overflow: hidden; font-family: var(--font); } .ep-calc__header { display: flex; align-items: center; gap: 7px; padding: 13px 16px; font-size: .82rem; font-weight: 700; color: #fff !important; background: #0d6e5a !important; font-family: var(--font); } .ep-calc__row { padding: 11px 16px; border-bottom: 1px solid var(--ep-border-lt); } .ep-calc__pages-row { padding: 11px 16px; border-bottom: 1px solid var(--ep-border-lt); } .ep-calc__label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #475569 !important; margin-bottom: 5px; font-family: var(--font); } .ep-calc__words { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .68rem; } .ep-calc__select-wrap { position: relative; } .ep-calc__select-wrap::after { content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--ep-text-muted); pointer-events: none; } .ep-calc__select { width: 100%; padding: 8px 26px 8px 10px; background: #f8fafc; border: 1.5px solid #cbd5e1; border-radius: var(--r-sm); font-size: .82rem; color: #1e293b !important; font-family: var(--font); -webkit-appearance: none; cursor: pointer; transition: border-color var(--tx); } .ep-calc__select:focus { border-color: var(--ep-teal); outline: none; } .ep-calc__stepper { display: flex; align-items: center; border: 1.5px solid #cbd5e1; border-radius: var(--r-sm); overflow: hidden; background: #f8fafc; max-width: 126px; } .ep-calc__step-btn { flex-shrink: 0; width: 34px; height: 37px; background: none; border: none; font-size: 1.1rem; font-weight: 700; color: #1e293b !important; cursor: pointer; transition: background var(--tx); display: flex; align-items: center; justify-content: center; } .ep-calc__step-btn:hover:not(:disabled) { background: var(--bg-lgreen); color: var(--ep-teal); } .ep-calc__step-btn:disabled { opacity: .35; cursor: not-allowed; } .ep-calc__pages-input { flex: 1; text-align: center; border: none; border-left: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; background: none; font-size: .9rem; font-weight: 700; height: 37px; color: #1e293b !important; width: 48px; font-family: var(--font); } .ep-calc__pages-input:focus { outline: none; background: var(--bg-lsky); } .ep-calc__total-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #ecfdf5 !important; border-bottom: 1px solid #bbf7d0 !important; } .ep-calc__total-label { font-size: .8rem; font-weight: 600; color: #475569 !important; font-family: var(--font); } .ep-calc__total-price { font-size: 1.5rem; font-weight: 900; color: #0d6e5a !important; font-family: var(--font); } .ep-calc__submit-row { padding: 12px 16px; } .ep-calc__submit { display: block !important; width: 100%; text-align: center; } .ep-calc__footer-note { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .7rem; color: #64748b !important; padding: 0 16px 12px; font-family: var(--font); } /* ══════════════════════════════════════════════════════ MISC + UTILITY ══════════════════════════════════════════════════════ */ .scroll-to-top { position: fixed; bottom: 24px; right: 24px; width: 42px; height: 42px; background: var(--ep-teal); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-md); opacity: 0; pointer-events: none; transform: translateY(8px); transition: all var(--tx); z-index: 900; } .scroll-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-to-top:hover { background: var(--ep-navy); transform: translateY(-3px) !important; } .reading-progress-bar { position: fixed; top: var(--hh); left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--ep-teal), var(--ep-sky), #fbbf24); z-index: 9999; transition: width .1s linear; } html.no-scroll, body.no-scroll { overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .ep-auto-link { color: var(--ep-teal); text-decoration: underline; text-decoration-style: dotted; font-weight: 500; } .ep-auto-link:hover { text-decoration-style: solid; } .trust-widget-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; font-size: .76rem; color: rgba(255,255,255,.68); font-family: var(--font); } .trust-widget-item { display: flex; align-items: center; gap: 5px; } .trust-stars { color: #fbbf24; } .bullet_line { background: var(--bg-lgreen); border-top: 1px solid var(--ep-green-lt); border-bottom: 1px solid var(--ep-green-lt); padding: 14px 0; } .bullet-container { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .feat-black { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 16px; border-right: 1px solid var(--ep-green-lt); } .feat-black:last-child { border-right: none; } .feat-black p { font-size: .7rem; color: var(--ep-text-muted); margin: 0; font-weight: 500; text-align: center; font-family: var(--font); } .services-menu-section { background: var(--ep-navy); padding: 36px 0; } .services-menu-section h2, .services-menu-section .heading-count h2 { color: #fff !important; } .services-link-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .services-link-list li a { display: inline-block; padding: 7px 16px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-pill); font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.78); transition: all var(--tx); font-family: var(--font); } .services-link-list li a:hover { background: rgba(255,255,255,.16); color: #fff; } .widget { margin-bottom: 16px; } .widget-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ep-text-muted); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--bg-lgreen); font-family: var(--font); } .section-footer-cta { text-align: center; margin-top: 44px; } .section-footer-cta p { color: var(--ep-text-muted); margin-bottom: 18px; font-family: var(--font); } .no-posts, .no-results { text-align: center; padding: 56px 20px; color: var(--ep-text-muted); } .no-posts h2, .no-results h2 { font-size: 1.35rem; color: var(--ep-text); margin-bottom: 9px; font-family: var(--font); } html.no-scroll, body.no-scroll { overflow: hidden; } @media print { .site-header, .site-footer, .single-sidebar, .scroll-to-top, .reading-progress-bar, .inject-cta, .content-inject, .related-posts { display: none !important; } .single-grid, .cpt-content-grid { grid-template-columns: 1fr !important; } body { font-size: 11pt; color: #000; font-family: Georgia, serif; } } /* ══════════════════════════════════════════════════════ TARGETED FIXES v6.1 ══════════════════════════════════════════════════════ */ /* ── HEADER: UNIFIED STRAIGHT LINE — LOGO | NAV | ACTIONS ───────────────────── All elements vertically centered on one row, no wrapping, no clipping. Desktop: [Logo]──[Nav Items]──────────────[My Account] [Order Now] Mobile: [Logo]──────────────────────────[Order Now] [☰] ─────────────────────────────────────────────────────────────────────────────── */ /* Ensure the full header stack allows dropdowns to show */ .site-header { overflow: visible !important; } .site-header__inner { overflow: visible !important; } /* Master flex row — single straight line, no wrapping */ .header-flex { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; overflow: visible !important; height: var(--hh) !important; padding: 0 !important; gap: 0 !important; } /* Logo: fixed width, vertically centred, no shrink */ .header-logo { flex: 0 0 auto !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; height: 100% !important; padding: 0 !important; margin: 0 20px 0 0 !important; } .header-logo a { display: flex !important; align-items: center !important; height: 100% !important; line-height: 1 !important; text-decoration: none !important; } .header-logo img { display: block !important; height: 38px !important; width: auto !important; max-width: 160px !important; object-fit: contain !important; vertical-align: middle !important; position: relative !important; } .header-logo .logo-text { display: flex !important; align-items: center !important; font-family: var(--font) !important; font-size: 1.18rem !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -.03em !important; white-space: nowrap !important; line-height: 1 !important; } /* Nav: takes all available space between logo and actions */ .main-nav { flex: 1 1 0% !important; min-width: 0 !important; overflow: visible !important; height: 100% !important; display: flex !important; align-items: center !important; } .main-nav__list { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; overflow: visible !important; height: 100% !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } /* Actions: pinned to far right, never shrink or wrap */ .header-actions { flex: 0 0 auto !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; padding: 0 0 0 12px !important; margin-left: auto !important; white-space: nowrap !important; height: 100% !important; } /* ── DESKTOP BREAKPOINTS ─────────────────────────────────────────────────── */ @media (max-width: 1280px) { .mni__link { padding: 0 8px !important; font-size: .74rem !important; } } @media (max-width: 1120px) { .mni__link { padding: 0 6px !important; font-size: .7rem !important; } .header-btn { padding: 6px 10px !important; font-size: .72rem !important; } } /* ── MOBILE BREAKPOINT: hamburger replaces desktop nav ───────────────────── */ @media (max-width: 1020px) { .main-nav { display: none !important; } .hamburger { display: flex !important; flex-shrink: 0 !important; } .header-nav-drawer { display: block !important; } /* nav-backdrop: only show when menu is open (is-visible class), never always-on */ .nav-backdrop { display: none !important; } .nav-backdrop.is-visible { display: block !important; } .btn-label { display: none !important; } /* On mobile: logo on left, then Order Now + hamburger on right — no gap */ .header-actions { padding-left: 8px !important; gap: 6px !important; } .header-btn--ghost { display: none !important; } } /* ── SMALL MOBILE (≤ 480px) ──────────────────────────────────────────────── */ @media (max-width: 480px) { .header-logo img { height: 30px !important; max-width: 120px !important; } .header-logo .logo-text { font-size: .95rem !important; } .header-logo { margin-right: 0 !important; flex: 1 1 auto !important; } .header-actions { flex: 0 0 auto !important; } .header-btn--primary { padding: 6px 10px !important; font-size: .72rem !important; } } /* Mobile drawer: full-height slide-in, always below header */ .header-nav-drawer { position: fixed !important; top: var(--hh) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 998 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100vw !important; box-sizing: border-box !important; } /* ── CALCULATOR: ALL CONTEXTS VISIBLE ──────────────── Fix white-on-white issue for standalone (non-hero) calc ────────────────────────────────────────────────────── */ /* Standalone calc (sidebar, page body) */ .ep-calculator, .sw--calc .ep-calculator, .f2-pricing-card .ep-calculator { background: #ffffff !important; } .ep-calc__row, .ep-calc__pages-row { background: #ffffff; border-bottom: 1px solid #e2e8f0 !important; } .ep-calc__label { color: #334155 !important; font-weight: 700 !important; } .ep-calc__words { color: #64748b !important; } .ep-calc__select { background: #f8fafc !important; border: 1.5px solid #cbd5e1 !important; color: #1e293b !important; } .ep-calc__select:focus { border-color: #0d6e5a !important; } .ep-calc__stepper { background: #f8fafc !important; border: 1.5px solid #cbd5e1 !important; } .ep-calc__step-btn { color: #1e293b !important; } .ep-calc__step-btn:hover:not(:disabled) { background: #ecfdf5 !important; color: #0d6e5a !important; } .ep-calc__pages-input { color: #1e293b !important; border-color: #cbd5e1 !important; background: transparent !important; } .ep-calc__total-row { background: #ecfdf5 !important; border-bottom: 1px solid #bbf7d0 !important; } .ep-calc__total-label { color: #475569 !important; } .ep-calc__total-price { color: #0d6e5a !important; font-weight: 900 !important; } .ep-calc__submit-row .ep-btn-primary, .ep-calc__submit-row .ep-btn-primary:link { background: #0d6e5a !important; border-color: #0d6e5a !important; color: #fff !important; display: block !important; width: 100%; text-align: center; } .ep-calc__footer-note { color: #64748b !important; } /* ── SIDEBAR: FIX STUCK/HANGING + SHOW ALL CONTENT ── Problem: max-height cuts content, overflow hides it Fix: Use natural sticky without height restriction, let browser handle scroll natively ────────────────────────────────────────────────────── */ .sidebar-sticky-wrap { position: sticky !important; top: calc(var(--hh) + 16px) !important; /* Remove max-height — let content show fully */ max-height: none !important; overflow: visible !important; overflow-x: visible !important; padding-right: 0 !important; /* Stack widgets vertically with gap */ display: flex; flex-direction: column; gap: 14px; } /* Ensure sidebar widgets are fully visible */ .sw { width: 100%; overflow: visible !important; flex-shrink: 0; } /* Single grid: sidebar on right, narrow enough for content */ .single-grid { display: grid !important; grid-template-columns: 1fr 290px !important; gap: 32px !important; align-items: start !important; padding-top: 24px; padding-bottom: 52px; } .cpt-content-grid { display: grid !important; grid-template-columns: 1fr 290px !important; gap: 32px !important; align-items: start !important; } .single-sidebar { position: relative !important; min-width: 0; } @media(max-width:960px) { .single-grid { grid-template-columns: 1fr !important; } .cpt-content-grid { grid-template-columns: 1fr !important; } .single-sidebar, .cpt-sidebar { display: none !important; } } /* ── BLOG HERO: LIGHT BLUE + CALC ON RIGHT ─────────── Replace old hero-blog with a proper split hero ────────────────────────────────────────────────────── */ .blog-hero-v2 { background: linear-gradient(135deg, #1e3a5f 0%, #0d4a6e 55%, #0f3561 100%); color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; } .blog-hero-v2::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 70% 50%, rgba(14,165,233,.15) 0%, transparent 70%); pointer-events: none; } .blog-hero-v2__inner { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: center; position: relative; z-index: 1; } .blog-hero-v2__content {} .blog-hero-v2__eyebrow { display: inline-flex; align-items: center; gap: 6px; background: rgba(14,165,233,.18); border: 1px solid rgba(14,165,233,.35); color: #7dd3fc; font-size: .72rem; font-weight: 700; padding: 4px 11px; border-radius: 100px; margin-bottom: 14px; } .blog-hero-v2__title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: #fff; margin: 0 0 12px; line-height: 1.22; letter-spacing: -.02em; font-family: var(--font); } .blog-hero-v2__desc { font-size: .95rem; color: rgba(255,255,255,.75); margin: 0 0 22px; line-height: 1.68; font-family: var(--font); } .blog-hero-v2__search { display: flex; gap: 8px; max-width: 480px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; overflow: hidden; padding: 4px; } .blog-hero-v2__search input { flex: 1; padding: 9px 14px; background: transparent; border: none; color: #fff; font-size: .88rem; font-family: var(--font); } .blog-hero-v2__search input::placeholder { color: rgba(255,255,255,.45); } .blog-hero-v2__search input:focus { outline: none; } .blog-hero-v2__search button { flex-shrink: 0; padding: 9px 18px; background: #0d6e5a; border: none; border-radius: 7px; color: #fff; font-size: .82rem; font-weight: 600; cursor: pointer; font-family: var(--font); transition: background .2s; } .blog-hero-v2__search button:hover { background: #0a4d35; } .blog-hero-v2__calc { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; backdrop-filter: blur(12px); overflow: hidden; } /* blog calc dark overrides */ .blog-hero-v2__calc .ep-calc__header { background: rgba(255,255,255,.13) !important; color: #fff !important; } .blog-hero-v2__calc .ep-calc__label { color: rgba(255,255,255,.6) !important; } .blog-hero-v2__calc .ep-calc__words { color: rgba(255,255,255,.42) !important; } .blog-hero-v2__calc .ep-calc__select { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; color: rgba(255,255,255,.9) !important; } .blog-hero-v2__calc .ep-calc__select option { background: #1e3a5f; color: #fff; } .blog-hero-v2__calc .ep-calc__row { border-bottom-color: rgba(255,255,255,.08) !important; background: transparent !important; } .blog-hero-v2__calc .ep-calc__pages-row { border-bottom-color: rgba(255,255,255,.08) !important; background: transparent !important; } .blog-hero-v2__calc .ep-calc__stepper { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.18) !important; } .blog-hero-v2__calc .ep-calc__step-btn { color: rgba(255,255,255,.8) !important; } .blog-hero-v2__calc .ep-calc__pages-input { color: rgba(255,255,255,.9) !important; background: transparent !important; border-color: rgba(255,255,255,.16) !important; } .blog-hero-v2__calc .ep-calc__total-row { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.1) !important; } .blog-hero-v2__calc .ep-calc__total-label { color: rgba(255,255,255,.6) !important; } .blog-hero-v2__calc .ep-calc__total-price { color: #fbbf24 !important; } .blog-hero-v2__calc .ep-calc__footer-note { color: rgba(255,255,255,.42) !important; } .blog-hero-v2__calc .ep-calc__submit-row .ep-btn-primary { background: #f59e0b !important; border-color: #f59e0b !important; color: #111 !important; } @media(max-width:900px) { .blog-hero-v2__inner { grid-template-columns: 1fr; } .blog-hero-v2__calc { display: none; } } /* ── COUNTRY CPTs: ARTICLES LISTING SECTION ────────── Countries show posts/articles like services archive ────────────────────────────────────────────────────── */ .cpt-posts-section { background: #eff6ff; padding: 56px 0; } .cpt-posts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } @media(max-width:900px){ .cpt-posts-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:560px){ .cpt-posts-grid { grid-template-columns: 1fr; } } .cpt-post-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; transition: all .2s cubic-bezier(.4,0,.2,1); box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; } .cpt-post-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); border-color: rgba(13,110,90,.15); } .cpt-post-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; background: #f0faf7; } .cpt-post-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .cpt-post-card:hover .cpt-post-card__img { transform: scale(1.05); } .cpt-post-card__icon { height: 100px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f0faf7, #eff6ff); color: #0d6e5a; font-size: 2rem; } .cpt-post-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; } .cpt-post-card__cat { display: inline-block; background: #ecfdf5; color: #065f46; font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; } .cpt-post-card__title { font-size: .9rem; font-weight: 700; margin: 0 0 7px; line-height: 1.4; flex: 1; font-family: var(--font); } .cpt-post-card__title a { color: #111827; } .cpt-post-card__title a:hover { color: #0d6e5a; } .cpt-post-card__excerpt { font-size: .79rem; color: #6b7280; line-height: 1.6; margin: 0 0 12px; font-family: var(--font); } .cpt-post-card__meta { font-size: .72rem; color: #9ca3af; margin-bottom: 10px; font-family: var(--font); } .cpt-post-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; } /* ══════════════════════════════════════════════════════ HOMEPAGE & DARK HERO CALCULATOR — MAXIMUM SPECIFICITY FIX Ensures hero calc always shows white labels on dark bg ══════════════════════════════════════════════════════ */ .ep-hero .ep-calculator, .page-hero .ep-calculator, .cpt-hero .ep-calculator, .blog-hero-v2 .ep-calculator, .ep-hero__calc .ep-calculator, .page-hero__calc .ep-calculator, .cpt-hero__calc .ep-calculator, .blog-hero-v2__calc .ep-calculator { background: transparent !important; } .ep-hero .ep-calc__row, .ep-hero .ep-calc__pages-row, .page-hero .ep-calc__row, .page-hero .ep-calc__pages-row, .cpt-hero .ep-calc__row, .cpt-hero .ep-calc__pages-row, .blog-hero-v2 .ep-calc__row, .blog-hero-v2 .ep-calc__pages-row { background: transparent !important; border-bottom-color: rgba(255,255,255,.09) !important; } .ep-hero .ep-calc__header, .page-hero .ep-calc__header, .cpt-hero .ep-calc__header, .blog-hero-v2 .ep-calc__header { background: rgba(255,255,255,.14) !important; color: #fff !important; } .ep-hero .ep-calc__label, .page-hero .ep-calc__label, .cpt-hero .ep-calc__label, .blog-hero-v2 .ep-calc__label { color: rgba(255,255,255,.62) !important; } .ep-hero .ep-calc__words, .page-hero .ep-calc__words, .cpt-hero .ep-calc__words, .blog-hero-v2 .ep-calc__words { color: rgba(255,255,255,.44) !important; } .ep-hero .ep-calc__select, .page-hero .ep-calc__select, .cpt-hero .ep-calc__select, .blog-hero-v2 .ep-calc__select { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.22) !important; color: rgba(255,255,255,.92) !important; } .ep-hero .ep-calc__stepper, .page-hero .ep-calc__stepper, .cpt-hero .ep-calc__stepper, .blog-hero-v2 .ep-calc__stepper { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.2) !important; } .ep-hero .ep-calc__step-btn, .page-hero .ep-calc__step-btn, .cpt-hero .ep-calc__step-btn, .blog-hero-v2 .ep-calc__step-btn { color: rgba(255,255,255,.82) !important; } .ep-hero .ep-calc__pages-input, .page-hero .ep-calc__pages-input, .cpt-hero .ep-calc__pages-input, .blog-hero-v2 .ep-calc__pages-input { color: rgba(255,255,255,.92) !important; background: transparent !important; border-color: rgba(255,255,255,.18) !important; } .ep-hero .ep-calc__total-row, .page-hero .ep-calc__total-row, .cpt-hero .ep-calc__total-row, .blog-hero-v2 .ep-calc__total-row { background: rgba(255,255,255,.09) !important; border-bottom-color: rgba(255,255,255,.12) !important; } .ep-hero .ep-calc__total-label, .page-hero .ep-calc__total-label, .cpt-hero .ep-calc__total-label, .blog-hero-v2 .ep-calc__total-label { color: rgba(255,255,255,.62) !important; } .ep-hero .ep-calc__total-price, .page-hero .ep-calc__total-price, .cpt-hero .ep-calc__total-price, .blog-hero-v2 .ep-calc__total-price { color: #fbbf24 !important; } .ep-hero .ep-calc__footer-note, .page-hero .ep-calc__footer-note, .cpt-hero .ep-calc__footer-note, .blog-hero-v2 .ep-calc__footer-note { color: rgba(255,255,255,.44) !important; } .ep-hero .ep-calc__submit-row .ep-btn-primary, .page-hero .ep-calc__submit-row .ep-btn-primary, .cpt-hero .ep-calc__submit-row .ep-btn-primary, .blog-hero-v2 .ep-calc__submit-row .ep-btn-primary { background: #f59e0b !important; border-color: #f59e0b !important; color: #111 !important; font-weight: 700 !important; } .ep-hero .ep-calc__select-wrap::after, .page-hero .ep-calc__select-wrap::after, .cpt-hero .ep-calc__select-wrap::after, .blog-hero-v2 .ep-calc__select-wrap::after { border-top-color: rgba(255,255,255,.55) !important; } /* Writers page grid responsive */ .writers-grid-v2 { display: grid !important; grid-template-columns: repeat(5,1fr) !important; gap: 16px !important; } @media(max-width:1100px) { .writers-grid-v2 { grid-template-columns: repeat(3,1fr) !important; } } @media(max-width:768px) { .writers-grid-v2 { grid-template-columns: repeat(2,1fr) !important; } } @media(max-width:480px) { .writers-grid-v2 { grid-template-columns: 1fr !important; } } .writer-card-v2:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.1) !important; border-color: rgba(13,110,90,.2) !important; } .screening-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 18px !important; } @media(max-width:768px) { .screening-grid { grid-template-columns: 1fr !important; } } @media(min-width:769px) and (max-width:1024px) { .screening-grid { grid-template-columns: repeat(2,1fr) !important; } } /* ══════════════════════════════════════════════════════════════ ESSAYPRO ENHANCED v2 — MOBILE STABILITY MASTER PATCH Fixes: layout shift, inject block overflow, tab jank, scroll-lock content escape, header hide on small screens, table overflow, writers block side-by-side overflow, widget overflow on mobile. Applied LAST so specificity wins cleanly. ══════════════════════════════════════════════════════════════ */ /* ── 1. PREVENT HORIZONTAL SCROLL GLOBALLY ─────────────────── */ html, body { max-width: 100vw; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } /* ── 2. HEADER: NEVER HIDE ON MOBILE ───────────────────────── */ /* The hide-on-scroll-down behaviour causes tapping-to-scroll confusion on touch screens. Disable it at ≤1020px. */ @media (max-width: 1020px) { .site-header--hidden { transform: none !important; } } /* ── 3. SCROLL-LOCK: USE POSITION-FIXED APPROACH ────────────── */ /* plain overflow:hidden on html doesn't prevent scroll on iOS */ html.no-scroll { overflow: hidden !important; position: fixed !important; width: 100% !important; /* top is set by JS dynamically */ } /* Restore body when menu closes (JS removes no-scroll) */ body { -webkit-overflow-scrolling: touch; } /* ── 4. INJECT CTA BLOCKS — FULL MOBILE STACK ───────────────── */ /* Top / Bottom banners */ .inject-cta__inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .inject-cta__text { flex: 1 1 200px; min-width: 0; } .inject-cta__btn { flex-shrink: 0; white-space: nowrap; } @media (max-width: 600px) { .inject-cta--top, .inject-cta--bottom { padding: 14px 14px; } .inject-cta__inner { flex-direction: column; align-items: stretch; gap: 10px; } .inject-cta__btn { width: 100%; text-align: center; white-space: normal; display: block !important; } } /* Mid-content inject blocks */ .content-inject { width: 100%; box-sizing: border-box; } .content-inject--calculator, .content-inject--writers, .content-inject--guarantee { padding: 16px 18px; } .content-inject__inner { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .content-inject__left { flex: 1 1 200px; min-width: 0; } .content-inject__right { flex-shrink: 0; min-width: 120px; text-align: center; } @media (max-width: 600px) { .content-inject__inner { flex-direction: column; align-items: stretch; gap: 10px; } .content-inject__right { flex-shrink: 1; width: 100%; min-width: 0; text-align: left; } /* Buttons inside inject blocks go full-width */ .content-inject__right .ep-btn-primary, .content-inject__right .ep-btn-outline, .content-inject__right a[class*="ep-btn"] { display: block !important; width: 100% !important; text-align: center !important; margin-right: 0 !important; margin-bottom: 8px !important; box-sizing: border-box; } /* Writers block two-button row */ .content-inject--writers > div:last-child { display: flex; flex-direction: column; gap: 8px; width: 100%; } .content-inject--writers a.ep-btn-outline, .content-inject--writers a.ep-btn-primary { display: block !important; width: 100% !important; text-align: center !important; margin-right: 0 !important; box-sizing: border-box; } /* guarantee stars block */ .content-inject--guarantee .content-inject__right { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .content-inject--guarantee .content-inject__right a { width: 100%; } } /* ── 5. ARTICLE BODY: IMAGE + TABLE OVERFLOW FIX ────────────── */ .article-body img { max-width: 100% !important; height: auto !important; display: block; } .article-body table { width: 100%; max-width: 100%; border-collapse: collapse; } /* Wrap tables in a scroll container (JS does this dynamically, CSS also constrains them if JS hasn't run yet) */ .article-body .table-scroll-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; border-radius: 6px; border: 1px solid var(--ep-border); } .article-body .table-scroll-wrap table { border: none; margin: 0; min-width: 480px; } @media (max-width: 600px) { .article-body { font-size: .9rem; } .article-body h2 { font-size: 1.2rem; } .article-body h3 { font-size: 1.05rem; } .article-body pre, .article-body code { max-width: 100%; overflow-x: auto; display: block; word-break: break-all; white-space: pre-wrap; } } /* ── 6. SINGLE-GRID: TIGHTER MOBILE PADDING ─────────────────── */ @media (max-width: 640px) { .single-wrap .wrapper { padding: 0 12px; } .single-grid { padding-top: 16px !important; padding-bottom: 32px !important; gap: 0 !important; } .article-header { margin-bottom: 14px; } .article-title { font-size: 1.4rem !important; line-height: 1.25 !important; } .article-meta { flex-wrap: wrap; gap: 6px; } .meta-sep { display: none; } .article-featured-img { margin: 12px -12px; border-radius: 0; } .article-featured-img img { width: 100%; border-radius: 0; } } /* ── 7. MOBILE MENU DRAWER: STABILITY ───────────────────────── */ /* Prevent any child of the drawer from exceeding viewport */ .header-nav-drawer * { max-width: 100%; box-sizing: border-box; } /* Drawer list items: full width, proper touch target */ .drawer-nav-list { padding: 0; margin: 0; list-style: none; } .drawer-nav-list .mni { border-bottom: 1px solid rgba(255,255,255,.07); } .drawer-nav-list .mni__link { display: flex !important; align-items: center; justify-content: space-between; padding: 13px 20px !important; font-size: .9rem !important; color: rgba(255,255,255,.88) !important; width: 100%; touch-action: manipulation; } /* Drawer sub-menus slide down — remove accidental overflow */ .drawer-sub-menu { overflow: hidden; max-height: 0; transition: max-height .28s ease; } .drawer-sub-menu.is-open { max-height: 600px; } /* ── 8. NAV BACKDROP: COVER CHAT WIDGETS ────────────────────── */ /* Backdrop only shows when menu is open — never covers content */ .nav-backdrop { display: none !important; position: fixed; inset: 0; background: rgba(0,0,0,.54); z-index: 997; pointer-events: none; -webkit-tap-highlight-color: transparent; } .nav-backdrop.is-visible { display: block !important; pointer-events: auto; } /* Chat widget clamp: force 3rd-party widgets inside viewport */ /* Chat widget: do NOT override right position — tawk needs to position itself */ @media (max-width: 600px) { /* Push scroll-to-top up so it doesn't overlap tawk chat button */ .scroll-to-top { bottom: 76px !important; right: 12px !important; } } /* ── 9. TOUCH: REMOVE 300ms TAP DELAY ──────────────────────── */ a, button, [role="button"], .inject-cta__btn, .ep-btn-primary, .ep-btn-outline, .faq-question, .drawer-toggle, .js-hamburger { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ── 10. FOOTER: MOBILE STACK ───────────────────────────────── */ @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr !important; } .footer-col--brand { grid-column: auto !important; max-width: 100% !important; } .footer-trust-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 13px 16px; } .footer-payments { flex-wrap: wrap; gap: 6px; } .footer-subscribe-form { flex-direction: column; gap: 8px; } .footer-email-input, .footer-subscribe-btn { width: 100% !important; box-sizing: border-box; } } /* ── 11. RELATED POSTS CARD: MOBILE ────────────────────────── */ @media (max-width: 480px) { .related-posts__grid { grid-template-columns: 1fr !important; } .related-card { display: flex; flex-direction: row; gap: 12px; } .related-card__img-wrap { width: 80px; flex-shrink: 0; border-radius: 8px; overflow: hidden; } .related-card__img { height: 80px; object-fit: cover; } .related-card__body { flex: 1; min-width: 0; } .related-card__title { font-size: .83rem; } } /* ── 12. BREADCRUMB: WRAP GRACEFULLY ───────────────────────── */ @media (max-width: 600px) { .breadcrumb-bar { padding: 6px 0; } .breadcrumb { font-size: .7rem; gap: 3px; flex-wrap: wrap; } } /* ── 13. AUTHOR BOX: STACK ON TINY SCREENS ─────────────────── */ @media (max-width: 480px) { .author-box { flex-direction: column !important; gap: 10px; text-align: center; } .author-box__avatar { align-self: center; } } /* ── 14. ARTICLE TAGS: NO OVERFLOW ─────────────────────────── */ .article-tags { overflow: hidden; } @media (max-width: 480px) { .article-tags { padding: 10px 12px; gap: 5px; } .article-tags a { font-size: .72rem; padding: 3px 8px; } } /* ── 15. READING PROGRESS BAR: STAYS INSIDE VIEWPORT ─────── */ .reading-progress-bar { max-width: 100vw; left: 0; right: 0; } /* ── 16. SCROLL-TO-TOP: SAFE ZONE ──────────────────────────── */ @media (max-width: 600px) { .scroll-to-top { width: 36px !important; height: 36px !important; bottom: 68px !important; right: 12px !important; } } /* ── 17. WRAPPER: SAFE MIN MARGIN ON TINIEST SCREENS ─────── */ @media (max-width: 375px) { .wrapper { padding: 0 10px !important; } } /* ── 18. EP-BUTTONS: NEVER OVERFLOW CONTAINER ───────────────── */ .ep-btn-primary, .ep-btn-outline, .ep-btn-cta { max-width: 100%; word-break: break-word; white-space: normal; } @media (max-width: 420px) { .ep-btn-primary, .ep-btn-outline { padding: 10px 14px !important; font-size: .82rem !important; } } /* ── WRITERS BLOCK ACTIONS ROW ─────────────────────────────── */ .cta2-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .cta2-actions .ep-btn-outline, .cta2-actions .ep-btn-primary { flex: 1 1 140px; text-align: center; min-width: 0; } @media (max-width: 480px) { .cta2-actions { flex-direction: column; gap: 8px; } .cta2-actions .ep-btn-outline, .cta2-actions .ep-btn-primary { flex: 1 1 auto; width: 100%; } } /* ══════════════════════════════════════════════════════════════ ESSAYPRO v2.1 — INJECT BUTTON CLICK/TAP FIX Root cause: .nav-backdrop { display:block !important } in the @media(max-width:1020px) block was covering the entire page, making ALL inject block buttons untappable on mobile. Secondary causes: overflow:hidden clipping touch targets on iOS, and reading-progress-bar z-index:9999 covering top area. ══════════════════════════════════════════════════════════════ */ /* ── Inject blocks: always above any accidental overlay ──── */ .inject-cta, .content-inject { position: relative; z-index: 2; pointer-events: auto !important; } /* ── All buttons/links inside inject blocks: always tappable ─ */ .inject-cta a, .inject-cta button, .content-inject a, .content-inject button, .inject-cta__btn, .ep-btn-primary, .ep-btn-outline { position: relative; z-index: 3; pointer-events: auto !important; cursor: pointer; } /* ── Reading progress bar: pointer-events none so it never intercepts touches at the top of the screen ──────────── */ .reading-progress-bar { pointer-events: none !important; } /* ── Nav backdrop: triple-lock — never blocks content unless menu is explicitly open ─────────────────────────────── */ .nav-backdrop:not(.is-visible) { display: none !important; pointer-events: none !important; visibility: hidden !important; } /* ── article-body: never let overflow clip touch targets ──── */ .article-body { overflow: visible !important; } /* ── Ensure the single-article stacking context doesn't trap touch events below any invisible layer ─────────────── */ .single-article { position: relative; z-index: 1; } .single-article * { pointer-events: auto; } /* Only pseudo-elements get pointer-events:none ─────────── */ .single-article *::before, .single-article *::after { pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════ HOMEPAGE VARIANT STACKING SYSTEM Appended by build — do not edit manually above this block. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Wrapper ──────────────────────────────────────────────────────────────── */ .ep-stack-wrapper { width: 100%; } /* ── Individual stacked section ───────────────────────────────────────────── */ .ep-stack-section { padding: 60px 0; background: #fff; } .ep-stack-section--tinted { background: #f7f9fc; /* matches section--tinted used elsewhere in theme */ } /* ── Section header ───────────────────────────────────────────────────────── */ .ep-stack-header { margin-bottom: 24px; } .ep-stack-title { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; color: var(--ep-heading, #0d2b1a); margin: 0 0 8px; line-height: 1.25; } /* ── Preview block (always-visible teaser) ────────────────────────────────── */ .ep-stack-preview { color: var(--ep-text, #444); line-height: 1.75; font-size: 1rem; } .ep-stack-preview p:last-child { margin-bottom: 0; } /* ── Full content (hidden until expanded) ─────────────────────────────────── */ .ep-stack-full { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; /* Content inside is always rendered (good for SEO bots), just visually hidden */ } .ep-stack-full[aria-hidden="false"] { /* max-height driven by JS scrollHeight — set to 'none' after transition */ } /* Reset common content elements inside full content */ .ep-stack-full p, .ep-stack-full li { color: var(--ep-text, #444); line-height: 1.75; font-size: 1rem; } .ep-stack-full h2, .ep-stack-full h3, .ep-stack-full h4 { color: var(--ep-heading, #0d2b1a); font-weight: 700; margin-top: 28px; margin-bottom: 12px; line-height: 1.3; } .ep-stack-full h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); } .ep-stack-full h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); } .ep-stack-full h4 { font-size: 1.05rem; } .ep-stack-full ul, .ep-stack-full ol { padding-left: 1.5em; margin-bottom: 1em; } .ep-stack-full table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: 0.95rem; } .ep-stack-full table th, .ep-stack-full table td { border: 1px solid #e0e6ed; padding: 10px 14px; text-align: left; } .ep-stack-full table th { background: #f0f4f8; font-weight: 600; color: var(--ep-heading, #0d2b1a); } .ep-stack-full a { color: var(--ep-primary, #0a6b3c); text-decoration: underline; text-decoration-color: rgba(10,107,60,0.35); transition: color 0.2s, text-decoration-color 0.2s; } .ep-stack-full a:hover { color: var(--ep-primary-dark, #064d2b); text-decoration-color: var(--ep-primary-dark, #064d2b); } /* ── Actions row (toggle button) ──────────────────────────────────────────── */ .ep-stack-actions { margin-top: 20px; display: flex; align-items: center; gap: 12px; } /* ── Toggle button ────────────────────────────────────────────────────────── */ .ep-stack-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; border-radius: 6px; padding: 10px 20px; /* Inherits ep-btn-outline base styles from modern-theme.css */ transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; background: transparent; border: 2px solid var(--ep-primary, #0a6b3c); color: var(--ep-primary, #0a6b3c); } .ep-stack-toggle:hover, .ep-stack-toggle:focus-visible { background: var(--ep-primary, #0a6b3c); color: #fff; outline: none; } .ep-stack-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(10,107,60,0.35); } /* Chevron icon rotation on expand */ .ep-stack-toggle__icon { flex-shrink: 0; transition: transform 0.3s ease; } .ep-stack-toggle.is-expanded .ep-stack-toggle__icon { transform: rotate(180deg); } /* ── Responsive — mobile ──────────────────────────────────────────────────── */ @media (max-width: 767px) { .ep-stack-section { padding: 40px 0; } .ep-stack-title { font-size: 1.3rem; } .ep-stack-full h2 { font-size: 1.2rem; } .ep-stack-full h3 { font-size: 1.05rem; } .ep-stack-full table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ep-stack-toggle { width: 100%; justify-content: center; padding: 12px 20px; } } @media (max-width: 480px) { .ep-stack-section { padding: 32px 0; } .ep-stack-title { font-size: 1.2rem; } } /* ── END HOMEPAGE VARIANT STACKING SYSTEM ─────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ V4 HOMEPAGE ENHANCEMENTS — Blog cards, Promo CTA, Stack polish, Logo fix ═══════════════════════════════════════════════════════════════════════════ */ /* ── LOGO: perfect vertical centring & left-dock on all viewports ────────── */ .site-header .header-inner, .site-header .header__inner, .site-header .header-wrap, .site-header > .wrapper { align-items: center !important; } .header-logo, .site-logo, .custom-logo-link { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-shrink: 0 !important; height: var(--hh, 64px) !important; padding: 0 !important; margin: 0 24px 0 0 !important; order: -1 !important; /* always first child in flex row */ position: relative !important; top: 0 !important; transform: none !important; } .header-logo a, .custom-logo-link { display: flex !important; align-items: center !important; height: 100% !important; line-height: 1 !important; text-decoration: none !important; } .header-logo img, .custom-logo-link img { display: block !important; height: 38px !important; width: auto !important; max-width: 170px !important; object-fit: contain !important; vertical-align: middle !important; position: static !important; top: auto !important; transform: none !important; } .header-logo .logo-text { display: flex !important; align-items: center !important; font-size: 1.18rem !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -.03em !important; white-space: nowrap !important; line-height: 1 !important; } @media (max-width: 767px) { .header-logo, .site-logo, .custom-logo-link { margin-right: 0 !important; flex: 1 1 auto !important; height: var(--hh-mob, 56px) !important; } .header-logo img, .custom-logo-link img { height: 30px !important; max-width: 130px !important; } .header-logo .logo-text { font-size: .9rem !important; } } /* ── ep-section-head — shared heading block used in blog + promo ─────────── */ .ep-section-head { text-align: center; margin-bottom: 40px; } .ep-section-head__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ep-teal, #0d6e5a); background: var(--ep-teal-lt, #e6f5f2); border-radius: 100px; padding: 4px 14px; margin-bottom: 12px; } .ep-section-head h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 800; color: var(--ep-navy, #0f2744); margin: 0 0 12px; line-height: 1.2; } .ep-section-head p { font-size: 1.05rem; color: var(--ep-text-muted, #6b7280); max-width: 560px; margin: 0 auto; line-height: 1.65; } /* ── BLOG SECTION ─────────────────────────────────────────────────────────── */ .ep-hp-blog-section { padding: 72px 0 64px; background: var(--ep-blue-xlt, #eff6ff); /* light blue — complements teal/navy theme */ border-top: 1px solid var(--ep-border, #e2e8f0); border-bottom: 1px solid var(--ep-border, #e2e8f0); } .ep-hp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Blog card — bordered box */ .ep-hp-blog-card { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--ep-border, #e2e8f0); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(15,39,68,.06); transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; } .ep-hp-blog-card:hover { box-shadow: 0 8px 28px rgba(15,39,68,.12); border-color: var(--ep-teal, #0d6e5a); transform: translateY(-3px); } .ep-hp-blog-card__img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; background: var(--ep-teal-lt, #e6f5f2); flex-shrink: 0; } .ep-hp-blog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .ep-hp-blog-card:hover .ep-hp-blog-card__img { transform: scale(1.04); } .ep-hp-blog-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ep-teal, #0d6e5a); opacity: .45; } .ep-hp-blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; gap: 8px; } .ep-hp-blog-card__cat { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-teal, #0d6e5a); background: var(--ep-teal-lt, #e6f5f2); border-radius: 100px; padding: 3px 10px; } .ep-hp-blog-card__title { font-size: 1.02rem; font-weight: 700; line-height: 1.35; color: var(--ep-navy, #0f2744); margin: 0; } .ep-hp-blog-card__title a { color: inherit; text-decoration: none; } .ep-hp-blog-card__title a:hover { color: var(--ep-teal, #0d6e5a); } .ep-hp-blog-card__excerpt { font-size: .9rem; line-height: 1.65; color: var(--ep-text-muted, #6b7280); margin: 0; flex: 1; } .ep-hp-blog-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--ep-border-lt, #f1f5f9); flex-wrap: wrap; } .ep-hp-blog-card__meta { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--ep-text-light, #9ca3af); } .ep-hp-blog-card__meta-dot { color: var(--ep-border, #e2e8f0); } .ep-hp-blog-card__link { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--ep-teal, #0d6e5a); text-decoration: none; transition: gap .2s ease, color .2s ease; flex-shrink: 0; } .ep-hp-blog-card__link:hover { color: var(--ep-navy, #0f2744); gap: 7px; } .ep-hp-blog-footer { text-align: center; margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; } .ep-hp-blog-footer .ep-btn-outline { display: inline-flex; align-items: center; gap: 6px; } /* ── EXPERT PROMO CTA SECTION ────────────────────────────────────────────── */ .ep-expert-promo { position: relative; overflow: hidden; padding: 80px 0; background: linear-gradient(135deg, var(--ep-navy, #0f2744) 0%, #0a3d5c 55%, #09503d 100%); } .ep-expert-promo__bg-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.04) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(13,110,90,.25) 0%, transparent 50%); pointer-events: none; } .ep-expert-promo__inner { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: center; position: relative; z-index: 1; } .ep-expert-promo__eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ep-yellow, #f59e0b); background: rgba(245,158,11,.12); border-radius: 100px; padding: 4px 14px; margin-bottom: 16px; } .ep-expert-promo__h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; color: #fff; line-height: 1.18; margin: 0 0 16px; } .ep-expert-promo__highlight { color: var(--ep-yellow, #f59e0b); } .ep-expert-promo__lead { font-size: 1.05rem; color: rgba(255,255,255,.82); line-height: 1.7; margin: 0 0 24px; max-width: 520px; } .ep-expert-promo__lead em { color: rgba(255,255,255,.95); font-style: normal; font-weight: 600; } .ep-expert-promo__bullets { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; } .ep-expert-promo__bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: .94rem; color: rgba(255,255,255,.85); line-height: 1.5; } .ep-expert-promo__bullets li svg { flex-shrink: 0; margin-top: 2px; } .ep-expert-promo__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .ep-expert-promo__ghost-link { color: rgba(255,255,255,.75); font-size: .88rem; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); transition: color .2s, text-decoration-color .2s; } .ep-expert-promo__ghost-link:hover { color: #fff; text-decoration-color: rgba(255,255,255,.7); } .ep-expert-promo__urgency { font-size: .83rem; color: rgba(255,255,255,.55); margin: 0; } /* Promo card */ .ep-expert-promo__card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .ep-expert-promo__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--ep-border-lt, #f1f5f9); } .ep-expert-promo__card-title { font-size: .95rem; font-weight: 800; color: var(--ep-navy, #0f2744); } .ep-expert-promo__card-badge { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-teal, #0d6e5a); background: var(--ep-teal-lt, #e6f5f2); border-radius: 100px; padding: 3px 10px; } .ep-expert-promo__steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; } .ep-expert-promo__step { display: flex; align-items: flex-start; gap: 14px; } .ep-expert-promo__step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ep-teal, #0d6e5a); color: #fff; font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .ep-expert-promo__step strong { display: block; font-size: .9rem; font-weight: 700; color: var(--ep-navy, #0f2744); margin-bottom: 3px; } .ep-expert-promo__step p { margin: 0; font-size: .82rem; color: var(--ep-text-muted, #6b7280); line-height: 1.5; } .ep-expert-promo__card-note { text-align: center; margin: 12px 0 0; font-size: .76rem; color: var(--ep-text-light, #9ca3af); } /* ── Promo responsive ─────────────────────────────────────────────────────── */ @media (max-width: 960px) { .ep-expert-promo__inner { grid-template-columns: 1fr; gap: 40px; } .ep-expert-promo__card { max-width: 480px; margin: 0 auto; width: 100%; } .ep-expert-promo__h2 { font-size: 1.6rem; } .ep-expert-promo { padding: 60px 0; } } @media (max-width: 600px) { .ep-expert-promo { padding: 48px 0; } .ep-expert-promo__actions { flex-direction: column; align-items: flex-start; gap: 12px; } .ep-expert-promo__card { padding: 20px; } } /* ── BLOG GRID RESPONSIVE ─────────────────────────────────────────────────── */ @media (max-width: 900px) { .ep-hp-blog-grid { grid-template-columns: 1fr 1fr; gap: 18px; } } @media (max-width: 600px) { .ep-hp-blog-grid { grid-template-columns: 1fr; gap: 16px; } .ep-hp-blog-section { padding: 48px 0 40px; } } /* ── STACKED SECTIONS — refined polish ───────────────────────────────────── */ /* Override previous: give each section a light-bordered box feel */ .ep-stack-section { padding: 56px 0; background: #fff; position: relative; } .ep-stack-section--tinted { background: var(--ep-blue-xlt, #eff6ff); /* matches blog section bg for visual rhythm */ } /* inner wrapper becomes a box on wider screens */ @media (min-width: 768px) { .ep-stack-section .wrapper > * { /* Subtle left border accent on wider screens */ } .ep-stack-header { border-left: 4px solid var(--ep-teal, #0d6e5a); padding-left: 16px; } } .ep-stack-title { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800; color: var(--ep-navy, #0f2744); margin: 0 0 4px; line-height: 1.22; } .ep-stack-preview p { font-size: 1rem; line-height: 1.78; color: var(--ep-text-muted, #6b7280); margin: 0; } /* Stack actions: badge-style layout */ .ep-stack-actions { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Section divider line between stacked items */ .ep-stack-section + .ep-stack-section { border-top: 1px solid var(--ep-border, #e2e8f0); } /* ── FONT SIZE HARMONY — keep homepage sections proportionate ─────────────── */ /* All body text in homepage custom sections at 1rem / 1.75 line-height */ .ep-hp-blog-section p, .ep-stack-preview p, .ep-expert-promo__lead, .ep-expert-promo__step p { font-size: 1rem; line-height: 1.75; } /* Section h2 headings consistent */ .ep-hp-blog-section h2, .ep-stack-title { font-size: clamp(1.3rem, 2.5vw, 1.9rem); } /* ── END V4 ENHANCEMENTS ─────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ COUNTRY CPT RICH ARCHIVE — v7.0 New sections: pill grid, subject explorer, guarantee strip, articles grid, final CTA, hiw, why-box, urgent sidebar widget. ═══════════════════════════════════════════════════════════════════════════ */ /* ── ep-section-head white variant (on dark backgrounds) ─────────────────── */ .ep-section-head--white h2 { color: #fff; } .ep-section-head--white p { color: rgba(255,255,255,.78); } .ep-section-head__tag--white { color: #fff; background: rgba(255,255,255,.15); } /* ── Hero wave ─────────────────────────────────────────────────────────────── */ .cpt-hero { position: relative; overflow: hidden; } .cpt-hero__wave { position: absolute; bottom: -1px; left: 0; right: 0; line-height: 0; } .cpt-hero__wave svg { width: 100%; height: 48px; display: block; } /* Ghost hero link */ .cpt-hero__ghost-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; border: 2px solid rgba(255,255,255,.4); border-radius: 10px; color: #fff; font-size: .93rem; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s; } .cpt-hero__ghost-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); color: #fff; } /* ── PILL SECTION ──────────────────────────────────────────────────────────── */ .cpt-pill-section { padding: 56px 0 52px; background: var(--ep-bg, #f1f5f9); border-top: 1px solid var(--ep-border, #e2e8f0); } .cpt-pill-section__head { text-align: center; margin-bottom: 28px; } .cpt-pill-section__head h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 800; color: var(--ep-navy, #0f2744); margin: 0 0 8px; } .cpt-pill-section__head p { font-size: 1rem; color: var(--ep-text-muted, #6b7280); max-width: 520px; margin: 0 auto; } .cpt-pill-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .cpt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; border: 1.5px solid var(--ep-border, #e2e8f0); background: #fff; color: var(--ep-text, #111827); font-size: .86rem; font-weight: 500; text-decoration: none; transition: background .2s, border-color .2s, color .2s, transform .15s; } .cpt-pill svg { color: var(--ep-teal, #0d6e5a); flex-shrink: 0; } .cpt-pill:hover { background: var(--ep-teal, #0d6e5a); border-color: var(--ep-teal, #0d6e5a); color: #fff; transform: translateY(-1px); } .cpt-pill:hover svg { color: #fff; } /* ── SERVICES SECTION ─────────────────────────────────────────────────────── */ .cpt-services-section { padding: 64px 0; } .cpt-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 12px; } .cpt-svc-card { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.14); border-radius: 14px; padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; transition: background .2s, border-color .2s, transform .2s; } .cpt-svc-card:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); transform: translateY(-2px); } .cpt-svc-card__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .cpt-svc-card h3 { font-size: 1.02rem; font-weight: 700; color: #fff; margin: 0; } .cpt-svc-card p { font-size: .88rem; color: rgba(255,255,255,.78); line-height: 1.65; margin: 0; flex: 1; } .cpt-svc-card__link { display: inline-flex; align-items: center; gap: 5px; font-size: .83rem; font-weight: 600; color: var(--ep-yellow, #f59e0b); text-decoration: none; margin-top: 4px; transition: gap .2s, color .2s; } .cpt-svc-card__link:hover { gap: 8px; color: #fff; } /* ── SUBJECT EXPLORER ─────────────────────────────────────────────────────── */ .cpt-subject-section { padding: 60px 0 56px; background: var(--ep-blue-xlt, #eff6ff); border-top: 1px solid var(--ep-border, #e2e8f0); border-bottom: 1px solid var(--ep-border, #e2e8f0); } .cpt-subject-section__head { text-align: center; margin-bottom: 28px; } .cpt-subject-section__head h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 800; color: var(--ep-navy, #0f2744); margin: 0 0 8px; } .cpt-subject-section__head p { font-size: 1rem; color: var(--ep-text-muted, #6b7280); max-width: 500px; margin: 0 auto; } .cpt-subject-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .cpt-subject-card { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--ep-border, #e2e8f0); border-radius: 10px; padding: 13px 16px; font-size: .9rem; font-weight: 500; color: var(--ep-navy, #0f2744); transition: border-color .2s, box-shadow .2s; } .cpt-subject-card:hover { border-color: var(--ep-teal, #0d6e5a); box-shadow: 0 2px 10px rgba(13,110,90,.1); } .cpt-subject-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ep-teal, #0d6e5a); flex-shrink: 0; } .cpt-subject-cta { text-align: center; margin-top: 22px; font-size: .9rem; color: var(--ep-text-muted, #6b7280); } .cpt-subject-cta a { color: var(--ep-teal, #0d6e5a); font-weight: 600; } /* ── HOW IT WORKS — CPT ───────────────────────────────────────────────────── */ .cpt-hiw-section { padding: 64px 0; } .cpt-hiw-grid { display: grid; grid-template-columns: 1fr 36px 1fr 36px 1fr; align-items: center; gap: 24px; margin: 0 auto 36px; } .cpt-hiw-step { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.13); border-radius: 16px; padding: 28px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .cpt-hiw-step__num { font-size: 2rem; font-weight: 900; color: rgba(255,255,255,.15); line-height: 1; font-family: var(--font); } .cpt-hiw-step__icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; } .cpt-hiw-step h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; } .cpt-hiw-step p { font-size: .88rem; color: rgba(255,255,255,.76); line-height: 1.6; margin: 0; } .cpt-hiw-step__time { font-size: .78rem; font-weight: 600; color: var(--ep-yellow, #f59e0b); background: rgba(245,158,11,.12); border-radius: 100px; padding: 4px 12px; } .cpt-hiw-arrow { display: flex; align-items: center; justify-content: center; } .cpt-hiw-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ── CONTENT + SIDEBAR GRID ───────────────────────────────────────────────── */ .cpt-content-section { padding: 64px 0; background: #fff; } .cpt-content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; } .cpt-main-content { font-size: 1rem; line-height: 1.78; color: var(--ep-text-md, #1f2937); } .cpt-main-content h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; color: var(--ep-navy, #0f2744); margin: 36px 0 14px; line-height: 1.25; } .cpt-main-content h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; color: var(--ep-navy, #0f2744); margin: 28px 0 10px; } .cpt-main-content h2:first-child, .cpt-main-content h3:first-child { margin-top: 0; } .cpt-main-content p { margin: 0 0 1em; } /* Why box */ .cpt-why-box { background: var(--ep-teal-lt, #e6f5f2); border: 1.5px solid var(--ep-teal, #0d6e5a); border-radius: 14px; padding: 28px; margin: 32px 0; } .cpt-why-box h2 { margin-top: 0 !important; color: var(--ep-navy, #0f2744); font-size: 1.2rem !important; } .cpt-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cpt-why-item { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; color: var(--ep-text-md, #1f2937); line-height: 1.5; } .cpt-why-check { color: var(--ep-teal, #0d6e5a); font-weight: 900; flex-shrink: 0; font-size: 1rem; } /* FAQ inside content */ .cpt-faq-section { margin-top: 36px; } .cpt-faq-section h2 { font-size: 1.3rem; font-weight: 800; color: var(--ep-navy, #0f2744); margin: 0 0 16px; } /* Sidebar */ .cpt-sidebar__sticky { position: sticky; top: calc(var(--hh, 64px) + 16px); display: flex; flex-direction: column; gap: 14px; } /* Urgent sidebar widget */ .sw--urgent { background: linear-gradient(135deg, #0f2744 0%, #09503d 100%); border-radius: 12px; padding: 20px; text-align: center; border: none; } .sw-urgent__icon { font-size: 1.6rem; margin-bottom: 6px; display: block; } .sw-urgent__title { font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 6px; } .sw-urgent__text { font-size: .84rem; color: rgba(255,255,255,.78); margin: 0 0 14px; line-height: 1.5; } .sw-urgent__btn { width: 100%; text-align: center; display: block; } /* ── GUARANTEE STRIP ──────────────────────────────────────────────────────── */ .cpt-guarantee-strip { background: var(--ep-navy, #0f2744); padding: 24px 0; border-top: 3px solid var(--ep-teal, #0d6e5a); } .cpt-guarantee-inner { display: flex; gap: 24px; justify-content: space-between; align-items: center; flex-wrap: wrap; } .cpt-guarantee-item { display: flex; align-items: center; gap: 12px; flex: 1 1 140px; min-width: 120px; } .cpt-guarantee-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; } .cpt-guarantee-item div { display: flex; flex-direction: column; } .cpt-guarantee-item strong { font-size: .88rem; font-weight: 700; color: #fff; line-height: 1.2; } .cpt-guarantee-item span { font-size: .76rem; color: rgba(255,255,255,.58); } /* ── ARTICLES GRID ────────────────────────────────────────────────────────── */ .cpt-articles-section { padding: 64px 0 56px; background: var(--ep-bg, #f1f5f9); border-top: 1px solid var(--ep-border, #e2e8f0); } .cpt-articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cpt-article-card { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--ep-border, #e2e8f0); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(15,39,68,.05); transition: box-shadow .25s, border-color .25s, transform .25s; } .cpt-article-card:hover { box-shadow: 0 8px 28px rgba(15,39,68,.12); border-color: var(--ep-teal, #0d6e5a); transform: translateY(-2px); } .cpt-article-card__img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; background: var(--ep-teal-lt, #e6f5f2); flex-shrink: 0; } .cpt-article-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .cpt-article-card:hover .cpt-article-card__img { transform: scale(1.04); } .cpt-article-card__img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ep-teal, #0d6e5a); opacity: .4; } .cpt-article-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; gap: 8px; } .cpt-article-card__cat { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-teal, #0d6e5a); background: var(--ep-teal-lt, #e6f5f2); border-radius: 100px; padding: 3px 10px; } .cpt-article-card__title { font-size: .98rem; font-weight: 700; line-height: 1.35; color: var(--ep-navy, #0f2744); margin: 0; } .cpt-article-card__title a { color: inherit; text-decoration: none; } .cpt-article-card__title a:hover { color: var(--ep-teal, #0d6e5a); } .cpt-article-card__excerpt { font-size: .87rem; line-height: 1.6; color: var(--ep-text-muted, #6b7280); margin: 0; flex: 1; } .cpt-article-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ep-border-lt, #f1f5f9); flex-wrap: wrap; } .cpt-article-card__meta { display: flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--ep-text-light, #9ca3af); } .cpt-article-card__actions { display: flex; gap: 6px; } .cpt-articles-footer { text-align: center; margin-top: 36px; } /* ── FINAL CTA ────────────────────────────────────────────────────────────── */ .cpt-final-cta { padding: 60px 0; background: linear-gradient(135deg, var(--ep-navy, #0f2744) 0%, #0a3d5c 55%, #09503d 100%); text-align: center; } .cpt-final-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; } .cpt-final-cta__copy h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; color: #fff; margin: 0 0 10px; } .cpt-final-cta__copy p { font-size: 1rem; color: rgba(255,255,255,.74); margin: 0; } .cpt-final-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ── RESPONSIVE — COUNTRY PAGES ───────────────────────────────────────────── */ @media (max-width: 1100px) { .cpt-content-grid { grid-template-columns: 1fr 290px; gap: 36px; } .cpt-services-grid { grid-template-columns: repeat(2, 1fr); } .cpt-subject-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .cpt-content-grid { grid-template-columns: 1fr; } .cpt-sidebar__sticky { position: static; } .cpt-hiw-grid { grid-template-columns: 1fr; gap: 16px; } .cpt-hiw-arrow { transform: rotate(90deg); } .cpt-articles-grid { grid-template-columns: repeat(2, 1fr); } .cpt-subject-grid { grid-template-columns: repeat(2, 1fr); } .cpt-guarantee-inner { gap: 16px; } .cpt-why-grid { grid-template-columns: 1fr; } } @media (max-width: 650px) { .cpt-services-grid { grid-template-columns: 1fr; } .cpt-articles-grid { grid-template-columns: 1fr; } .cpt-subject-grid { grid-template-columns: 1fr 1fr; } .cpt-pill-section, .cpt-subject-section, .cpt-hiw-section, .cpt-content-section, .cpt-articles-section { padding: 44px 0; } .cpt-final-cta { padding: 44px 0; } .cpt-final-cta__actions { flex-direction: column; align-items: stretch; } .cpt-final-cta__actions .ep-btn-primary, .cpt-final-cta__actions .ep-btn-outline { text-align: center; } .cpt-guarantee-inner { justify-content: flex-start; } } @media (max-width: 440px) { .cpt-subject-grid { grid-template-columns: 1fr; } } /* ── END COUNTRY CPT RICH ARCHIVE ─────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ COUNTRY CPT ARCHIVE — v8.0 (colapapers/homeworkacetutors layout) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hero breadcrumb ──────────────────────────────────────────────────────── */ .cpt-hero__breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: rgba(255,255,255,.6); margin-bottom: 12px; } .cpt-hero__breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; } .cpt-hero__breadcrumb a:hover { color: #fff; } .cpt-hero__breadcrumb span:last-child { color: rgba(255,255,255,.9); } /* Hero trust row + badge pills */ .cpt-hero__trust-row { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: rgba(255,255,255,.85); margin: 16px 0 10px; font-weight: 600; } .cpt-hero__badges-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .cpt-hero__badge-item { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.88); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 100px; padding: 4px 11px; } /* ── Intro section ────────────────────────────────────────────────────────── */ .cpt-intro-section { padding: 48px 0 40px; background: #fff; border-bottom: 1px solid var(--ep-border, #e2e8f0); } .cpt-intro__h2 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); font-weight: 800; color: var(--ep-navy, #0f2744); margin: 0 0 14px; line-height: 1.25; } .cpt-intro__lead { font-size: 1.05rem; color: var(--ep-text-md, #1f2937); line-height: 1.72; margin: 0 0 12px; } .cpt-intro-section p { font-size: 1rem; color: var(--ep-text-muted, #6b7280); line-height: 1.7; margin: 0; } /* ── Archive section title ────────────────────────────────────────────────── */ .cpt-archive-section-title { font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 800; color: var(--ep-navy, #0f2744); text-align: center; margin: 0 0 32px; line-height: 1.2; } .cpt-archive-section-title--white { color: #fff; } /* ── SERVICE CARD GRID ────────────────────────────────────────────────────── */ .cpt-services-archive { padding: 64px 0; background: var(--ep-bg, #f1f5f9); border-top: 1px solid var(--ep-border, #e2e8f0); } .cpt-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .cpt-archive-card { background: #fff; border: 1.5px solid var(--ep-border, #e2e8f0); border-radius: 14px; padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 8px rgba(15,39,68,.05); transition: box-shadow .25s, border-color .25s, transform .25s; } .cpt-archive-card:hover { box-shadow: 0 8px 28px rgba(15,39,68,.11); border-color: var(--ep-teal, #0d6e5a); transform: translateY(-2px); } .cpt-archive-card__icon { font-size: 2rem; line-height: 1; display: block; } .cpt-archive-card__title { font-size: 1.05rem; font-weight: 700; color: var(--ep-navy, #0f2744); margin: 0; } .cpt-archive-card__desc { font-size: .88rem; color: var(--ep-text-muted, #6b7280); line-height: 1.6; margin: 0; flex: 1; } .cpt-archive-card__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .cpt-archive-card__bullets li { font-size: .8rem; color: var(--ep-teal, #0d6e5a); font-weight: 600; display: flex; align-items: center; gap: 5px; } .cpt-archive-card__actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; } /* ── PRICING TABLE ────────────────────────────────────────────────────────── */ .cpt-pricing-section { padding: 64px 0; background: #fff; border-top: 1px solid var(--ep-border, #e2e8f0); } .cpt-pricing-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1.5px solid var(--ep-border, #e2e8f0); box-shadow: 0 2px 12px rgba(15,39,68,.06); margin-bottom: 16px; } .cpt-pricing-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; } .cpt-pricing-table thead tr { background: var(--ep-navy, #0f2744); } .cpt-pricing-table thead th { padding: 14px 20px; text-align: left; color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .cpt-pricing-table thead th:first-child { border-radius: 10px 0 0 0; } .cpt-pricing-table thead th:last-child { border-radius: 0 10px 0 0; } .cpt-pricing-table tbody tr { border-bottom: 1px solid var(--ep-border-lt, #f1f5f9); transition: background .15s; } .cpt-pricing-table tbody tr:hover { background: var(--ep-teal-lt, #e6f5f2); } .cpt-pricing-table tbody tr:last-child { border-bottom: none; } .cpt-pricing-table td { padding: 16px 20px; color: var(--ep-text-md, #1f2937); } .cpt-pricing-table__level { font-weight: 600; color: var(--ep-navy, #0f2744); } .cpt-pricing-table__popular { background: var(--ep-teal-lt, #e6f5f2) !important; } .cpt-pricing-popular-badge { display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ep-teal, #0d6e5a); background: var(--ep-green-lt, #d1fae5); border-radius: 100px; padding: 2px 8px; margin-left: 8px; } .cpt-pricing-from { font-size: .75rem; color: var(--ep-text-light, #9ca3af); display: block; margin-bottom: 2px; } .cpt-pricing-table td strong { font-size: 1.05rem; font-weight: 800; color: var(--ep-navy, #0f2744); display: block; } .cpt-pricing-unit { font-size: .73rem; color: var(--ep-text-light, #9ca3af); } .cpt-pricing-note { text-align: center; font-size: .83rem; color: var(--ep-text-muted, #6b7280); margin: 0 0 20px; } .cpt-pricing-cta { text-align: center; } /* ── COUNTRY NOTES BOX ────────────────────────────────────────────────────── */ .cpt-notes-section { padding: 52px 0; background: var(--ep-blue-xlt, #eff6ff); border-top: 1px solid var(--ep-border, #e2e8f0); border-bottom: 1px solid var(--ep-border, #e2e8f0); } .cpt-notes-box { background: #fff; border: 1.5px solid var(--ep-border, #e2e8f0); border-left: 5px solid var(--ep-teal, #0d6e5a); border-radius: 12px; padding: 28px 32px; max-width: 820px; margin: 0 auto; } .cpt-notes-box__title { font-size: 1.1rem; font-weight: 800; color: var(--ep-navy, #0f2744); margin: 0 0 16px; } .cpt-notes-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .cpt-notes-list li { font-size: .92rem; color: var(--ep-text-md, #1f2937); line-height: 1.55; padding-left: 22px; position: relative; } .cpt-notes-list li::before { content: '✓'; position: absolute; left: 0; color: var(--ep-teal, #0d6e5a); font-weight: 800; } /* ── HOW IT WORKS (simple 3-step) ─────────────────────────────────────────── */ .cpt-hiw-section { padding: 56px 0; } .cpt-hiw-simple { display: flex; align-items: flex-start; gap: 24px; justify-content: center; flex-wrap: wrap; max-width: 860px; margin: 0 auto; } .cpt-hiw-simple__step { flex: 1 1 200px; max-width: 240px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .cpt-hiw-simple__num { width: 48px; height: 48px; border-radius: 50%; background: var(--ep-yellow, #f59e0b); color: #111; font-size: 1.25rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cpt-hiw-simple__step h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; } .cpt-hiw-simple__step p { font-size: .88rem; color: rgba(255,255,255,.78); line-height: 1.6; margin: 0; } .cpt-hiw-simple__arrow { font-size: 1.5rem; color: rgba(255,255,255,.4); align-self: center; flex-shrink: 0; padding-top: 12px; } /* ── MID-PAGE CTA ─────────────────────────────────────────────────────────── */ .cpt-mid-cta { padding: 48px 0; background: linear-gradient(135deg, var(--ep-teal, #0d6e5a), var(--ep-navy, #0f2744)); } .cpt-mid-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .cpt-mid-cta__text h2 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); font-weight: 800; color: #fff; margin: 0 0 8px; } .cpt-mid-cta__text p { font-size: .95rem; color: rgba(255,255,255,.8); margin: 0; } /* ── ARTICLES PAGINATION ──────────────────────────────────────────────────── */ .cpt-articles-pagination { display: flex; justify-content: center; gap: 6px; margin: 28px 0 0; flex-wrap: wrap; } .cpt-articles-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--ep-border, #e2e8f0); background: #fff; color: var(--ep-text-md, #1f2937); font-size: .88rem; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s, color .2s; } .cpt-articles-pagination .page-numbers:hover, .cpt-articles-pagination .page-numbers.current { background: var(--ep-teal, #0d6e5a); border-color: var(--ep-teal, #0d6e5a); color: #fff; } .cpt-articles-pagination .prev.page-numbers, .cpt-articles-pagination .next.page-numbers { width: auto; padding: 0 14px; } /* ── RESPONSIVE ───────────────────────────────────────────────────────────── */ @media (max-width: 1000px) { .cpt-archive-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .cpt-content-grid { grid-template-columns: 1fr; } .cpt-sidebar__sticky { position: static; } .cpt-mid-cta__inner { flex-direction: column; text-align: center; } } @media (max-width: 640px) { .cpt-archive-grid { grid-template-columns: 1fr; } .cpt-hiw-simple { flex-direction: column; align-items: center; } .cpt-hiw-simple__arrow { transform: rotate(90deg); padding: 0; } .cpt-hiw-simple__step { max-width: 100%; } .cpt-notes-box { padding: 20px; } .cpt-pricing-section, .cpt-services-archive, .cpt-intro-section { padding: 44px 0; } .cpt-articles-grid { grid-template-columns: 1fr; } .cpt-final-cta__actions { flex-direction: column; align-items: stretch; text-align: center; } } /* ── END COUNTRY ARCHIVE v8.0 ─────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════ ESSAYPRO v6 — PATCH: ARCHIVE, HEADER, TAWK, PROMO BAR, MOBILE ═══════════════════════════════════════════════════════════════════ */ /* ── PROMO ANNOUNCEMENT BAR ──────────────────────────────────────── */ .ep-promo-bar { background: linear-gradient(90deg, #1a7ed4 0%, #0d5c38 100%); color: #fff; font-size: .82rem; padding: 8px 0; text-align: center; position: fixed; top: 0; left: 0; right: 0; z-index: 1001; } .ep-promo-bar__inner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding-right: 36px; position: relative; } .ep-promo-bar__text { line-height: 1.5; } .ep-promo-bar__code { display: inline-block; background: rgba(255,255,255,.2); border: 1px dashed rgba(255,255,255,.5); border-radius: 4px; padding: 1px 7px; font-family: monospace; font-weight: 700; letter-spacing: .05em; color: #ffd700; } .ep-promo-bar__btn { display: inline-block; background: #fbbf24; color: #111 !important; font-weight: 700; font-size: .78rem; padding: 4px 14px; border-radius: 20px; text-decoration: none !important; white-space: nowrap; transition: background .2s; } .ep-promo-bar__btn:hover { background: #f59e0b; } .ep-promo-bar__close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 1rem; padding: 4px 8px; line-height: 1; } .ep-promo-bar__close:hover { color: #fff; } @media (max-width: 640px) { .ep-promo-bar { font-size: .76rem; padding: 7px 0; } .ep-promo-bar__inner { gap: 7px; } .ep-promo-bar__btn { font-size: .72rem; padding: 3px 10px; } } /* ── HEADER IMPROVEMENTS ─────────────────────────────────────────── */ /* Logo: always visible, properly padded */ .header-logo { flex-shrink: 0; padding: 6px 0; margin-right: auto; } .header-logo img { height: 44px !important; width: auto !important; max-width: 200px !important; display: block; object-fit: contain; } .header-logo .logo-text { font-size: 1.3rem !important; font-weight: 800; color: #fff; white-space: nowrap; } /* Default header uses a slightly lighter green for better contrast */ .site-header { background: #155c3e; } /* ── ARCHIVE / BLOG LAYOUT ───────────────────────────────────────── */ .archive-page-section { padding-top: 36px; padding-bottom: 56px; } .archive-layout { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; } /* Sidebar sticks on desktop */ .archive-sidebar { position: sticky; top: calc(var(--hh,64px) + 16px); display: flex; flex-direction: column; gap: 14px; } /* Main area */ .archive-main { min-width: 0; } /* Category filter nav */ .blog-categories-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } /* ── ARCHIVE POST CARDS — bordered boxes ─────────────────────────── */ .archive-posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .archive-post-card { background: #fff; border: 1.5px solid #dde8e4; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .22s, transform .22s, border-color .22s; box-shadow: 0 2px 10px rgba(13,92,56,.07); } .archive-post-card:hover { box-shadow: 0 8px 32px rgba(13,92,56,.14); transform: translateY(-3px); border-color: #0d6e5a; } .archive-post-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; } .archive-post-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; } .archive-post-card:hover .archive-post-card__img { transform: scale(1.04); } .archive-post-card__body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; } .archive-post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: .72rem; color: #6b7280; margin-bottom: 8px; font-family: var(--font, sans-serif); } .archive-post-card__cat { color: #0d6e5a; font-weight: 700; text-decoration: none; } .archive-post-card__cat:hover { text-decoration: underline; } .archive-post-card__dot { color: #9ca3af; } .archive-post-card__title { font-size: 1rem; font-weight: 700; margin: 0 0 9px; line-height: 1.42; flex: 1; font-family: var(--font, sans-serif); } .archive-post-card__title a { color: #111; text-decoration: none; } .archive-post-card__title a:hover { color: #0d6e5a; } .archive-post-card__excerpt { font-size: .82rem; color: #555; margin: 0 0 14px; line-height: 1.6; font-family: var(--font, sans-serif); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .archive-post-card__link { font-size: .8rem; font-weight: 600; color: #0d6e5a; text-decoration: none; align-self: flex-start; font-family: var(--font, sans-serif); border-bottom: 1px solid transparent; transition: border-color .2s; } .archive-post-card__link:hover { border-bottom-color: #0d6e5a; } /* No posts state */ .archive-no-posts { background: #fff; border: 1.5px solid #dde8e4; border-radius: 14px; padding: 56px 32px; text-align: center; color: #555; } .archive-no-posts svg { margin: 0 auto 16px; display: block; opacity: .4; } .archive-no-posts h2 { font-size: 1.3rem; margin-bottom: 10px; } .archive-no-posts a { color: #0d6e5a; } /* Pagination */ .archive-pagination { text-align: center; margin-top: 36px; } /* ── ARCHIVE MOBILE RESPONSIVE ───────────────────────────────────── */ @media (max-width: 960px) { .archive-layout { grid-template-columns: 1fr; gap: 28px; } .archive-sidebar { position: static; /* Show sidebar below posts on mobile */ order: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .archive-main { order: 1; } /* Make promo & trust side by side on tablet */ .archive-sidebar > .sw { } } @media (max-width: 700px) { .archive-posts-grid { grid-template-columns: 1fr; gap: 16px; } .archive-sidebar { grid-template-columns: 1fr; } /* On mobile, hide calculator in sidebar (already in hero) */ .archive-sidebar > .sw--calc { display: none; } } @media (max-width: 480px) { .archive-post-card__body { padding: 14px 14px 16px; } .archive-post-card__title { font-size: .92rem; } } /* ── TAWK.TO CHAT WIDGET FIX ─────────────────────────────────────── */ /* Remove the broken overrides that break tawk positioning */ [class*="tawk"], [id*="tawk"], iframe[src*="tawk"] { position: fixed !important; bottom: 16px !important; right: 16px !important; z-index: 99998 !important; max-width: none !important; /* undo previous bad override */ } /* Ensure tawk container doesn't get clipped */ #tawkchat-container, .tawk-min-container, .tawk-button-container { position: fixed !important; bottom: 16px !important; right: 16px !important; z-index: 99998 !important; max-width: 60px !important; max-height: 60px !important; } @media (max-width: 600px) { /* On mobile push scroll-to-top up so tawk button isn't hidden */ .scroll-to-top { bottom: 80px !important; right: 12px !important; } /* Give tawk button breathing room from browser bottom bar */ [class*="tawk"], [id*="tawk"] { bottom: 20px !important; right: 12px !important; } } /* ── HEADER RESPONSIVE IMPROVEMENTS ─────────────────────────────── */ @media (max-width: 1020px) { .header-logo img { height: 36px !important; max-width: 160px !important; } } @media (max-width: 600px) { .header-logo img { height: 30px !important; max-width: 130px !important; } .header-logo .logo-text { font-size: 1rem !important; } .ep-promo-bar__inner { flex-direction: column; gap: 5px; padding-right: 28px; } } /* ── MOBILE DRAWER IMPROVEMENTS ──────────────────────────────────── */ @media (max-width: 1020px) { .header-nav-drawer { max-height: calc(100vh - var(--hh, 64px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .drawer-nav { padding-bottom: 24px; } .drawer-item a, .drawer-toggle { font-size: 1rem; padding: 14px 20px; min-height: 48px; /* WCAG touch target */ } } /* ── CORE WEB VITALS / LCP HELPERS ──────────────────────────────── */ .archive-post-card__img[loading="lazy"] { content-visibility: auto; } /* Prevent CLS on images without explicit dimensions */ .archive-post-card__img-wrap img { width: 100%; height: 100%; }