menjaj01

Untitled

Aug 26th, 2025
280
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.87 KB | None | 0 0
  1. /* ========================================= PRO Leader — fully scoped to .pro-leader-scope ========================================= */
  2. .pro-leader-scope {
  3. }
  4.  
  5. .pro-leader-scope * {
  6.     box-sizing: border-box;
  7. }
  8.  
  9. /* Section wrapper */
  10. .pro-leader-scope .elv-section {
  11.     max-width: 1200px;
  12.     margin: 0 auto;
  13.     padding: 24px 16px;
  14.     font: 16px/1.62 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  15.     color: var(--ink);
  16. }
  17.  
  18. /* ---------- HERO ---------- */
  19. .pro-leader-scope .elv-hero {
  20.     border-radius: 28px;
  21.     padding: 56px 22px;
  22.     color: #fff;
  23.     background: radial-gradient(900px 600px at -10% -20%, #18c9f6 0%, var(--brand) 46%, #015e92 100%);
  24.     box-shadow: var(--shadow-strong);
  25.     overflow: hidden;
  26. }
  27.  
  28. .pro-leader-scope .elv-eyebrow {
  29.     display: inline-block;
  30.     padding: 6px 12px;
  31.     border-radius: 999px;
  32.     background: rgba(255,255,255,.14);
  33.     font-weight: 800;
  34.     letter-spacing: .14em;
  35.     text-transform: uppercase;
  36. }
  37.  
  38. .pro-leader-scope .elv-title {
  39.     font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  40.     font-weight: 900;
  41.     font-size: clamp(2rem,4.2vw,3.2rem);
  42.     line-height: 1.12;
  43.     margin: .5rem 0 .75rem;
  44.     color: #fff;
  45.     text-shadow: 0 2px 8px rgba(0,0,0,.25);
  46. }
  47.  
  48. .pro-leader-scope .elv-lead {
  49.     max-width: 880px;
  50.     color: #E9FAFF;
  51. }
  52.  
  53. .pro-leader-scope .elv-buttons {
  54.     display: flex;
  55.     gap: 12px;
  56.     flex-wrap: wrap;
  57.     margin-top: 14px;
  58. }
  59.  
  60. .pro-leader-scope .elv-btn {
  61.     display: inline-flex;
  62.     align-items: center;
  63.     justify-content: center;
  64.     min-height: 50px;
  65.     padding: 0 22px;
  66.     border-radius: 14px;
  67.     font-weight: 800;
  68.     text-decoration: none;
  69.     border: 2px solid transparent;
  70.     transition: transform .15s, box-shadow .15s, filter .15s;
  71. }
  72.  
  73. .pro-leader-scope .elv-btn:hover {
  74.     transform: translateY(-1px);
  75.     box-shadow: 0 10px 24px rgba(0,0,0,.2);
  76. }
  77.  
  78. .pro-leader-scope .elv-btn-cta {
  79.     background: var(--cta);
  80.     color: #fff;
  81. }
  82.  
  83. .pro-leader-scope .elv-btn-ghost {
  84.     background: transparent;
  85.     color: #fff;
  86.     border-color: #fff;
  87. }
  88.  
  89. /* ---------- TWO COLUMN (video + snapshot) ---------- */
  90. .pro-leader-scope .elv-grid-2 {
  91.     display: grid;
  92.     gap: 22px;
  93. }
  94.  
  95. @media (min-width:820px) {
  96.     .pro-leader-scope .elv-grid-2 {
  97.         grid-template-columns: 1.1fr .9fr;
  98.         align-items: start;
  99.     }
  100. }
  101.  
  102. /* VIDEO: responsive, works with iframe or WP shortcode */
  103. .pro-leader-scope .elv-video {
  104.     position: relative;
  105.     border-radius: 18px;
  106.     overflow: hidden;
  107.     background: #000;
  108.     box-shadow: var(--shadow);
  109. }
  110.  
  111. .pro-leader-scope .elv-video .ratio {
  112.     position: relative;
  113.     width: 100%;
  114.     height: 0;
  115.     padding-top: 56.25%;
  116. }
  117.  
  118. .pro-leader-scope .elv-video iframe, .pro-leader-scope .elv-video .wp-block-embed__wrapper, .pro-leader-scope .elv-video .wp-block-embed__wrapper iframe {
  119.     position: absolute !important;
  120.     width: 100% !important;
  121.     height: 100% !important;
  122.     border: 0;
  123.     display: block;
  124. }
  125.  
  126. /* Snapshot card (FORCE white card bg) */
  127. .pro-leader-scope .elv-card {
  128.     background: #fff !important;
  129.     border-radius: 18px;
  130.     padding: 20px;
  131.     border: 1px solid rgba(2,32,60,.06);
  132.     box-shadow: var(--shadow);
  133.     position: relative;
  134. }
  135.  
  136. .pro-leader-scope .elv-cap {
  137.     display: inline-block;
  138.     padding: 8px 12px;
  139.     border-radius: 999px;
  140.     background: #FFF5C4;
  141.     color: #222;
  142.     letter-spacing: .12em;
  143.     text-transform: uppercase;
  144.     font-weight: 900;
  145. }
  146.  
  147. .pro-leader-scope .elv-h2 {
  148.     font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  149.     font-weight: 900;
  150.     color: var(--brand);
  151.     font-size: clamp(1.4rem,2.6vw,1.9rem);
  152.     margin: 0 0 .5rem;
  153. }
  154.  
  155. .pro-leader-scope .elv-h3 {
  156.     font-weight: 800;
  157.     margin: .25rem 0;
  158. }
  159.  
  160. .pro-leader-scope .elv-muted {
  161.     color: var(--muted);
  162. }
  163.  
  164. /* ---------- FEATURE CARDS (4-up) ---------- */
  165. .pro-leader-scope .elv-grid-4 {
  166.     display: grid;
  167.     grid-template-columns: repeat(4,1fr);
  168.     gap: 16px;
  169. }
  170.  
  171. @media (max-width:980px) {
  172.     .pro-leader-scope .elv-grid-4 {
  173.         grid-template-columns: repeat(2,1fr);
  174.     }
  175. }
  176.  
  177. @media (max-width:620px) {
  178.     .pro-leader-scope .elv-grid-4 {
  179.         grid-template-columns: 1fr;
  180.     }
  181. }
  182.  
  183. .pro-leader-scope .elv-card.elv-feature {
  184.     padding: 18px;
  185.     text-align: center;
  186.     background: #fff !important;
  187. }
  188.  
  189. .pro-leader-scope .elv-icon {
  190.     width: 56px;
  191.     height: 56px;
  192.     border-radius: 50%;
  193.     display: flex;
  194.     align-items: center;
  195.     justify-content: center;
  196.     background: linear-gradient(150deg,#fff,#EAF7FF);
  197.     box-shadow: 0 6px 18px rgba(0,0,0,.06);
  198.     margin: 0 auto 10px;
  199.     color: var(--brand);
  200. }
  201.  
  202. .pro-leader-scope .elv-icon svg {
  203.     width: 28px;
  204.     height: 28px;
  205.     fill: currentColor;
  206. }
  207.  
  208. /* ---------- TIMELINE ---------- */
  209. .pro-leader-scope .elv-tl {
  210.     position: relative;
  211.     padding-left: 22px;
  212. }
  213.  
  214. .pro-leader-scope .elv-tl::before {
  215.     content: "";
  216.     position: absolute;
  217.     left: 8px;
  218.     top: 6px;
  219.     bottom: 6px;
  220.     width: 2px;
  221.     background: var(--gold);
  222. }
  223.  
  224. .pro-leader-scope .elv-step {
  225.     position: relative;
  226.     margin: 12px 0;
  227.     padding: 12px 14px 14px;
  228.     border-radius: 12px;
  229.     background: #fff;
  230.     box-shadow: 0 6px 16px rgba(15,23,42,.06);
  231. }
  232.  
  233. .pro-leader-scope .elv-step::before {
  234.     content: "";
  235.     position: absolute;
  236.     left: -16px;
  237.     top: 18px;
  238.     width: 12px;
  239.     height: 12px;
  240.     border: 3px solid #fff;
  241.     background: var(--cta);
  242.     border-radius: 50%;
  243.     box-shadow: 0 0 0 2px var(--gold);
  244. }
  245.  
  246. /* ---------- FINAL CTA ---------- */
  247. .pro-leader-scope .elv-cta {
  248.     background: var(--brand);
  249.     color: #fff;
  250.     border-radius: 22px;
  251.     padding: 24px;
  252.     text-align: center;
  253.     box-shadow: var(--shadow-strong);
  254. }
  255.  
  256. .pro-leader-scope .elv-cta .elv-title {
  257.     color: #fff;
  258.     font-size: clamp(1.6rem,3.2vw,2.4rem);
  259.     margin: 8px 0 6px;
  260.     font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  261.     font-weight: 900;
  262. }
  263.  
  264. .pro-leader-scope .elv-cta .elv-buttons {
  265.     justify-content: center;
  266. }
  267.  
  268. /* Utilities */
  269. .pro-leader-scope .ring {
  270.     outline: 3px solid var(--ring);
  271.     outline-offset: 0;
  272.     border-radius: 18px;
  273. }
  274.  
  275. .pro-leader-scope .elv-section + .elv-section {
  276.     margin-top: 8px;
  277. }
Advertisement
Add Comment
Please, Sign In to add comment