.elementor-kit-30{--e-global-color-primary:#030711;--e-global-color-secondary:#02040A;--e-global-color-text:#06101C;--e-global-color-accent:#071321;--e-global-color-42c86bb:#0A1726;--e-global-color-a66d386:#0B1524;--e-global-color-a8dfdb6:#13243A;--e-global-color-ea4fb40:#1C5E8F;--e-global-color-f66c78e:#007BFF;--e-global-color-a24524e:#00B8FF;--e-global-color-e991d17:#0A84FF;--e-global-color-43addd0:#1C5E8F;--e-global-color-150b7ae:#007BFF;--e-global-color-ebff461:#00B8FF;--e-global-color-c89d3a1:#0A84FF;--e-global-color-486fdd4:#FFFFFF;--e-global-color-7574741:#D6E3F3;--e-global-color-7bebb59:#8FA6BF;--e-global-color-963be4d:#5F728A;--e-global-color-f8ca57a:#1ED6A4;--e-global-color-05cfdcb:#F6B44B;--e-global-color-c750907:#FF4D6D;--e-global-color-96b4b83:#00B8FF;--e-global-color-06efe7e:#007BFF;--e-global-color-5377a93:#14B8A6;--e-global-color-3c52ae6:#8B5CF6;--e-global-color-63f7bb9:#F59E0B;--e-global-color-37a3e92:#6366F1;--e-global-typography-primary-font-family:"PFX1 Font";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.25em;--e-global-typography-primary-word-spacing:-0.5px;--e-global-typography-secondary-font-family:"PFX1 Font";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.35em;--e-global-typography-secondary-word-spacing:-0.3px;--e-global-typography-text-font-family:"PFX1 Font";--e-global-typography-text-font-size:22px;--e-global-typography-text-font-weight:500;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"PFX1 Font";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.9em;--e-global-typography-b00fc39-font-family:"PFX1 Font";--e-global-typography-b00fc39-font-size:14px;--e-global-typography-b00fc39-font-weight:400;--e-global-typography-b00fc39-line-height:1.8em;--e-global-typography-e95f4c8-font-family:"PFX1 Font";--e-global-typography-e95f4c8-font-size:14px;--e-global-typography-e95f4c8-font-weight:500;--e-global-typography-e95f4c8-line-height:1.4em;--e-global-typography-e95f4c8-word-spacing:0px;background-color:var( --e-global-color-primary );color:var( --e-global-color-a24524e );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 button,.elementor-kit-30 input[type="button"],.elementor-kit-30 input[type="submit"],.elementor-kit-30 .elementor-button{background-color:var( --e-global-color-f66c78e );font-family:"PFX1 Font", Sans-serif;font-size:14px;font-weight:600;line-height:1.4em;word-spacing:0px;color:var( --e-global-color-486fdd4 );border-style:none;border-radius:8px 8px 8px 8px;padding:14px 28px 14px 28px;}.elementor-kit-30 button:hover,.elementor-kit-30 button:focus,.elementor-kit-30 input[type="button"]:hover,.elementor-kit-30 input[type="button"]:focus,.elementor-kit-30 input[type="submit"]:hover,.elementor-kit-30 input[type="submit"]:focus,.elementor-kit-30 .elementor-button:hover,.elementor-kit-30 .elementor-button:focus{background-color:var( --e-global-color-a24524e );color:var( --e-global-color-486fdd4 );border-style:none;border-radius:8px 8px 8px 8px;}.elementor-kit-30 e-page-transition{background-color:#FFBC7D;}.elementor-kit-30 p{margin-block-end:18px;}.elementor-kit-30 a{color:var( --e-global-color-e991d17 );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 a:hover{color:var( --e-global-color-f66c78e );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 h1{color:var( --e-global-color-f66c78e );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-kit-30 h2{color:var( --e-global-color-f66c78e );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-30 h3{color:var( --e-global-color-f66c78e );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-30 h4{color:var( --e-global-color-f66c78e );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-30 h5{color:var( --e-global-color-a24524e );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 h6{color:var( --e-global-color-a24524e );font-family:var( --e-global-typography-b00fc39-font-family ), Sans-serif;font-size:var( --e-global-typography-b00fc39-font-size );font-weight:var( --e-global-typography-b00fc39-font-weight );line-height:var( --e-global-typography-b00fc39-line-height );}.elementor-kit-30 img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-kit-30 label{color:var( --e-global-color-text );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 input:not([type="button"]):not([type="submit"]),.elementor-kit-30 textarea,.elementor-kit-30 .elementor-field-textual{font-family:"PFX1 Font", Sans-serif;font-size:16px;font-weight:400;line-height:1.7em;color:var( --e-global-color-f66c78e );background-color:var( --e-global-color-42c86bb );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-ea4fb40 );border-radius:16px 16px 16px 16px;padding:0px 0px 0px 0px;}.elementor-kit-30 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-30 textarea:focus,.elementor-kit-30 .elementor-field-textual:focus{background-color:var( --e-global-color-a66d386 );border-style:solid;border-color:#35CCFC;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-30{--e-global-typography-primary-font-size:46px;--e-global-typography-primary-line-height:1.25em;--e-global-typography-secondary-font-size:34px;--e-global-typography-secondary-line-height:1.35em;--e-global-typography-text-font-size:20px;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-size:16px;--e-global-typography-accent-line-height:1.9em;--e-global-typography-b00fc39-font-size:14px;--e-global-typography-b00fc39-line-height:1.8em;--e-global-typography-e95f4c8-font-size:14px;--e-global-typography-e95f4c8-line-height:1.4em;--e-global-typography-e95f4c8-word-spacing:0px;font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 a{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 a:hover{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-kit-30 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-30 h3{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-30 h4{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-30 h5{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 h6{font-size:var( --e-global-typography-b00fc39-font-size );line-height:var( --e-global-typography-b00fc39-line-height );}.elementor-kit-30 button,.elementor-kit-30 input[type="button"],.elementor-kit-30 input[type="submit"],.elementor-kit-30 .elementor-button{font-size:14px;line-height:1.4em;word-spacing:0px;padding:13px 24px 13px 24px;}.elementor-kit-30 label{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 input:not([type="button"]):not([type="submit"]),.elementor-kit-30 textarea,.elementor-kit-30 .elementor-field-textual{font-size:16px;line-height:1.7em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-30{--e-global-typography-primary-font-size:38px;--e-global-typography-primary-line-height:1.25em;--e-global-typography-primary-word-spacing:-0.5px;--e-global-typography-secondary-font-size:28px;--e-global-typography-secondary-word-spacing:-0.3px;--e-global-typography-text-font-size:18px;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-size:15px;--e-global-typography-accent-line-height:1.9em;--e-global-typography-b00fc39-font-size:13px;--e-global-typography-b00fc39-line-height:1.8em;--e-global-typography-e95f4c8-font-size:14px;--e-global-typography-e95f4c8-line-height:1.4em;--e-global-typography-e95f4c8-word-spacing:0px;font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 a{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 a:hover{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-kit-30 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-30 h3{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-30 h4{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-30 h5{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 h6{font-size:var( --e-global-typography-b00fc39-font-size );line-height:var( --e-global-typography-b00fc39-line-height );}.elementor-kit-30 button,.elementor-kit-30 input[type="button"],.elementor-kit-30 input[type="submit"],.elementor-kit-30 .elementor-button{font-size:14px;line-height:1.4em;word-spacing:0px;padding:12px 20px 12px 20px;}.elementor-kit-30 label{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-30 input:not([type="button"]):not([type="submit"]),.elementor-kit-30 textarea,.elementor-kit-30 .elementor-field-textual{font-size:16px;line-height:1.7em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================================= PFX1 DESIGN SYSTEM — SITE SETTINGS UNIFIED / OPTIMIZED / LOOP-SAFE / 1360 STANDARD Version: 2026-08.1 — UNIFIED SHELL + STABLE VIEWPORT + PAGE THEMES Place: Elementor → Site Settings → Custom CSS Principles: - Project content width: 1360px - One dynamic accent token per site section - Header visuals are owned only by PFX Header CSS - Footer visuals are owned only by PFX Footer CSS - Site Settings does not override Header/Footer hover/border/glow - No hover movement on shared PFX surfaces/cards/buttons - Full-width section backgrounds remain untouched - Elementor spacing, typography and widget colors stay editable - Loop Item roots and wrappers stay transparent - No generic `.elementor` background rule ========================================================= */ /* ========================================================= 00) DESIGN TOKENS + SECTION ACCENT SYSTEM ========================================================= */ :root { /* Layout — single geometry contract for the whole site */ --pfx-content-width: 1360px; --pfx-page-gutter: clamp(16px, 2.2vw, 30px); /* Header, footer and page sections must consume these aliases. */ --pfx-shell-width: var(--pfx-content-width); --pfx-shell-edge-gap: var(--pfx-page-gutter); /* Base surfaces */ --pfx-page-bg: #020610; --pfx-page-bg-soft: #030814; /* ------------------------------------------------------- DEFAULT ACCENT — PFX1 CYAN ------------------------------------------------------- */ --pfx-accent: #00B8FF; --pfx-accent-rgb: 0, 184, 255; --pfx-accent-deep: #007BFF; --pfx-accent-deep-rgb: 0, 123, 255; --pfx-accent-highlight: #00D4FF; --pfx-accent-highlight-rgb: 0, 212, 255; /* Legacy aliases — keep old CSS compatible */ --pfx-cyan: var(--pfx-accent); --pfx-blue: var(--pfx-accent-deep); /* ------------------------------------------------------- BORDER LEVELS ------------------------------------------------------- */ --pfx-accent-border-faint: rgba(var(--pfx-accent-rgb), 0.18); --pfx-accent-border-soft: rgba(var(--pfx-accent-rgb), 0.28); --pfx-accent-border: rgba(var(--pfx-accent-rgb), 0.44); --pfx-accent-border-hover: rgba(var(--pfx-accent-rgb), 0.76); --pfx-accent-border-active: rgba(var(--pfx-accent-rgb), 0.90); /* Legacy alias */ --pfx-border-hover: var(--pfx-accent-border-hover); /* ------------------------------------------------------- BACKGROUND LEVELS ------------------------------------------------------- */ --pfx-accent-bg-faint: rgba(var(--pfx-accent-rgb), 0.025); --pfx-accent-bg-soft: rgba(var(--pfx-accent-rgb), 0.045); --pfx-accent-bg: rgba(var(--pfx-accent-rgb), 0.075); --pfx-accent-bg-hover: rgba(var(--pfx-accent-rgb), 0.145); --pfx-accent-bg-active: rgba(var(--pfx-accent-rgb), 0.18); /* ------------------------------------------------------- SOFT GLOW — REST ------------------------------------------------------- */ --pfx-accent-glow-soft: 0 0 14px rgba(var(--pfx-accent-rgb), 0.075); --pfx-accent-glow: 0 0 24px rgba(var(--pfx-accent-rgb), 0.11); --pfx-accent-glow-wide: 0 0 44px rgba(var(--pfx-accent-rgb), 0.055); /* ------------------------------------------------------- STRONGER GLOW — HOVER / FOCUS ------------------------------------------------------- */ --pfx-accent-glow-hover: 0 0 20px rgba(var(--pfx-accent-rgb), 0.24); --pfx-accent-glow-hover-wide: 0 0 48px rgba(var(--pfx-accent-rgb), 0.12); /* ------------------------------------------------------- ACTIVE ------------------------------------------------------- */ --pfx-accent-glow-active: 0 0 22px rgba(var(--pfx-accent-rgb), 0.30); --pfx-accent-glow-active-wide: 0 0 52px rgba(var(--pfx-accent-rgb), 0.145); /* Text / icon */ --pfx-accent-icon: var(--pfx-accent); --pfx-accent-text: var(--pfx-accent); --pfx-accent-text-hover: #FFFFFF; /* Header glass */ --pfx-header-glass-top: rgba(5, 16, 31, 0.76); --pfx-header-glass-bottom: rgba(2, 6, 16, 0.90); --pfx-header-border: var(--pfx-accent-border-soft); /* Motion */ --pfx-accent-transition: 180ms ease; } /* ========================================================= 00.0.1) VIEWPORT STABILITY Keeps the usable viewport width identical on short and long pages, so the centered header never shifts when the vertical scrollbar appears or disappears. ========================================================= */ html { scrollbar-gutter: stable; } @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } /* ========================================================= 00.1) PAGE THEME RESOLVER Reliable order: 1) Native WordPress body classes / known page IDs 2) Explicit body theme class 3) Elementor root marker detected with :has() IMPORTANT: Put exactly one marker class on the OUTERMOST page container. The Header and Footer then inherit the same tokens from body. ========================================================= */ /* ABOUT — current About page ID: 151 */ body.page-id-151, body.elementor-page-151, body.pfx-section-about, body:has(.pfx-about-page), body:has(.pfx-page-about), body:has(.pfx-theme-about) { --pfx-accent: #22D4FF; --pfx-accent-rgb: 34, 212, 255; --pfx-accent-deep: #795CFF; --pfx-accent-deep-rgb: 121, 92, 255; --pfx-accent-highlight: #E54BD9; --pfx-accent-highlight-rgb: 229, 75, 217; } /* TOOLS — current Tools page ID: 140 */ body.page-id-140, body.elementor-page-140, body.pfx-section-tools, body:has(.pfx-page-tools), body:has(.pfx-theme-tools) { --pfx-accent: #20D684; --pfx-accent-rgb: 32, 214, 132; --pfx-accent-deep: #0A9F62; --pfx-accent-deep-rgb: 10, 159, 98; --pfx-accent-highlight: #55F0B0; --pfx-accent-highlight-rgb: 85, 240, 176; } /* COURSES / COURSE LANDINGS — BLUE THEME */ body.pfx-section-course, body.pfx-section-courses, body:has(.pfx-page-course), body:has(.pfx-page-courses), body:has(.pfx-course-page), body:has(.pfx-course-detail-page), body:has(.pfx-theme-course), body:has(.pfx-theme-courses) { --pfx-accent: #24C2FF; --pfx-accent-rgb: 36, 194, 255; --pfx-accent-deep: #3568FF; --pfx-accent-deep-rgb: 53, 104, 255; --pfx-accent-highlight: #6C5CFF; --pfx-accent-highlight-rgb: 108, 92, 255; } /* PODCASTS — PURPLE */ body.pfx-section-podcasts, body:has(.pfx-page-podcasts), body:has(.pfx-theme-podcasts) { --pfx-accent: #B255FF; --pfx-accent-rgb: 178, 85, 255; --pfx-accent-deep: #7B2DCC; --pfx-accent-deep-rgb: 123, 45, 204; --pfx-accent-highlight: #E56BFF; --pfx-accent-highlight-rgb: 229, 107, 255; } /* KNOWLEDGE — GOLD */ body.pfx-section-knowledge, body:has(.pfx-page-knowledge), body:has(.pfx-theme-knowledge) { --pfx-accent: #F5B942; --pfx-accent-rgb: 245, 185, 66; --pfx-accent-deep: #C47A0A; --pfx-accent-deep-rgb: 196, 122, 10; --pfx-accent-highlight: #FFD56A; --pfx-accent-highlight-rgb: 255, 213, 106; } /* EVENTS — ORANGE */ body.pfx-section-events, body:has(.pfx-page-events), body:has(.pfx-theme-events) { --pfx-accent: #FF7A45; --pfx-accent-rgb: 255, 122, 69; --pfx-accent-deep: #D84A1F; --pfx-accent-deep-rgb: 216, 74, 31; --pfx-accent-highlight: #FFB05F; --pfx-accent-highlight-rgb: 255, 176, 95; } /* ========================================================= 00.2) ACCENT CONSUMERS OUTSIDE HEADER / FOOTER IMPORTANT ARCHITECTURE: - Site Settings owns TOKENS only for Header and Footer. - PFX Header owns its own border / glow / hover / menu / actions. - PFX Footer owns its own border / glow / hover / links / social icons. - Do NOT target .pfx-header-* or .pfx-footer-* visual rules here. ========================================================= */ /* Bottom navigation: only accent state, layout remains in widget CSS. */ body :where(.pfx-mobile-bottom-nav, .pfx-tablet-bottom-nav) :is( .pfx-mobile-nav-home, .pfx-mobile-nav-tools, .pfx-mobile-nav-courses, .pfx-mobile-nav-content, .pfx-mobile-nav-account, .pfx-tablet-nav-home, .pfx-tablet-nav-tools, .pfx-tablet-nav-courses, .pfx-tablet-nav-podcasts, .pfx-tablet-nav-knowledge, .pfx-tablet-nav-account ) .elementor-icon { transition: color var(--pfx-accent-transition), filter var(--pfx-accent-transition) !important; } body :where(.pfx-mobile-bottom-nav, .pfx-tablet-bottom-nav) :is( .pfx-mobile-nav-home, .pfx-mobile-nav-tools, .pfx-mobile-nav-courses, .pfx-mobile-nav-content, .pfx-mobile-nav-account, .pfx-tablet-nav-home, .pfx-tablet-nav-tools, .pfx-tablet-nav-courses, .pfx-tablet-nav-podcasts, .pfx-tablet-nav-knowledge, .pfx-tablet-nav-account ):hover .elementor-icon, body :where(.pfx-mobile-bottom-nav, .pfx-tablet-bottom-nav) :is( .pfx-mobile-nav-home, .pfx-mobile-nav-tools, .pfx-mobile-nav-courses, .pfx-mobile-nav-content, .pfx-mobile-nav-account, .pfx-tablet-nav-home, .pfx-tablet-nav-tools, .pfx-tablet-nav-courses, .pfx-tablet-nav-podcasts, .pfx-tablet-nav-knowledge, .pfx-tablet-nav-account ).is-active .elementor-icon { color: var(--pfx-accent) !important; filter: drop-shadow(0 0 8px rgba(var(--pfx-accent-rgb), 0.62)) !important; } body :where(.pfx-mobile-bottom-nav, .pfx-tablet-bottom-nav) :is( .pfx-mobile-nav-home, .pfx-mobile-nav-tools, .pfx-mobile-nav-courses, .pfx-mobile-nav-content, .pfx-mobile-nav-account, .pfx-tablet-nav-home, .pfx-tablet-nav-tools, .pfx-tablet-nav-courses, .pfx-tablet-nav-podcasts, .pfx-tablet-nav-knowledge, .pfx-tablet-nav-account ).is-active { border-color: var(--pfx-accent-border-soft) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--pfx-accent-glow-soft) !important; } /* * SAFE GLOBAL WIDTH RULE * Only max-width is standardized here. * Padding and internal gaps remain editable inside Elementor. */ body .e-con.e-con-boxed > .e-con-inner { width: min(100%, var(--pfx-shell-width)); max-width: var(--pfx-shell-width); margin-inline: auto; } /* * Reusable inner wrapper classes. * Use one of these on a section's inner content container. */ body :where( .pfx-width-1360, .pfx-section-inner, .pfx-page-inner, .pfx-single-inner, .pfx-articles-inner ) { width: min(100%, var(--pfx-shell-width)); max-width: var(--pfx-shell-width); margin-inline: auto; } /* * Explicit opt-out for intentionally unrestricted wrappers. */ body .pfx-full-width { width: 100%; max-width: none; } /* * Do not force backgrounds, padding, gaps, typography or colors here. * Those remain editable through Elementor controls. */ body :where( .pfx-width-1360, .pfx-section-inner, .pfx-page-inner, .pfx-single-inner, .pfx-articles-inner ), body :where( .pfx-width-1360, .pfx-section-inner, .pfx-page-inner, .pfx-single-inner, .pfx-articles-inner ) * { box-sizing: border-box; } @media (max-width: 767px) { :root { --pfx-page-gutter: 12px; } } /* ========================================================= 01) GLOBAL ELEMENTOR ICON BASELINE FIX ========================================================= */ .elementor-widget-icon .elementor-widget-container, .elementor-widget-icon .elementor-icon-wrapper, .elementor-widget-icon .elementor-icon, .elementor-widget-icon-box .elementor-icon-box-icon, .elementor-widget-icon-box .elementor-icon { line-height: 0; } .elementor-widget-icon .elementor-widget-container, .elementor-widget-icon .elementor-icon-wrapper, .elementor-widget-icon .elementor-icon, .elementor-widget-icon-box .elementor-icon { display: flex; align-items: center; justify-content: center; } .elementor-widget-icon svg, .elementor-widget-icon i, .elementor-widget-icon-box svg, .elementor-widget-icon-box i { display: block; line-height: 1; } /* ========================================================= 02) GLOBAL CARD EFFECTS Keep this if pfx-card is used anywhere. ========================================================= */ .pfx-card { position: relative; overflow: hidden; transition: border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease; } .pfx-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at top right, rgba(var(--pfx-accent-rgb), 0.10), transparent 38% ); opacity: 0; transition: opacity 0.28s ease; pointer-events: none; z-index: 0; } .pfx-card:hover { border-color: var(--pfx-border-hover); box-shadow: 0 18px 50px rgba(var(--pfx-accent-deep-rgb), 0.10); } .pfx-card:hover::before { opacity: 1; } .pfx-card > * { position: relative; z-index: 1; } /* ========================================================= 03) GLOBAL ICON BOX / TEXT LINK EFFECTS ========================================================= */ .pfx-icon-box { transition: border-color 0.28s ease, box-shadow 0.28s ease; } .pfx-card:hover .pfx-icon-box { border-color: var(--pfx-border-hover); box-shadow: 0 0 24px rgba(var(--pfx-accent-rgb), 0.12); } .pfx-text-link .elementor-button, .pfx-text-link .elementor-button:hover { background: transparent; border: none; box-shadow: none; } /* ========================================================= 04) COURSE CARD EFFECTS Keep until we confirm these classes are unused. ========================================================= */ .pfx-course-showcase-card { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 80% 0%, rgba(var(--pfx-accent-rgb), 0.13), transparent 34% ), radial-gradient( circle at 15% 100%, rgba(var(--pfx-accent-deep-rgb), 0.08), transparent 30% ), linear-gradient( 180deg, rgba(10, 23, 38, 0.98), rgba(3, 7, 17, 0.99) ); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035); } .pfx-course-showcase-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(var(--pfx-accent-rgb), 0.14), transparent 26%, transparent 74%, rgba(var(--pfx-accent-deep-rgb), 0.10) ); opacity: 0.55; pointer-events: none; z-index: 0; } .pfx-course-showcase-card::after { content: ""; position: absolute; top: -40%; right: -60%; width: 70%; height: 180%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.045), transparent ); transform: rotate(18deg); opacity: 0; transition: right 0.75s ease, opacity 0.35s ease; pointer-events: none; z-index: 1; } .pfx-course-showcase-card:hover::after { right: 120%; opacity: 1; } .pfx-course-showcase-card > * { position: relative; z-index: 2; } .pfx-course-visual { position: relative; overflow: hidden; } .pfx-course-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 70% 20%, rgba(var(--pfx-accent-rgb), 0.18), transparent 34% ), linear-gradient( to top, rgba(3, 7, 17, 0.82), transparent 58% ); pointer-events: none; z-index: 2; } .pfx-course-image img { display: block; object-fit: cover; filter: saturate(1.08) contrast(1.08) brightness(0.82); transition: filter 0.45s ease; } .pfx-course-showcase-card:hover .pfx-course-image img { filter: saturate(1.18) contrast(1.12) brightness(0.93); } .pfx-course-badge { position: absolute !important; top: 14px; right: 14px; z-index: 5; width: auto !important; max-width: max-content !important; display: inline-flex !important; align-items: center; justify-content: center; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 22px rgba(var(--pfx-accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .pfx-course-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--pfx-cyan); box-shadow: 0 0 14px rgba(var(--pfx-accent-rgb), 0.90); } .pfx-course-meta-row { border-bottom: 1px solid rgba(19, 36, 58, 0.78); } .pfx-course-meta-item { white-space: nowrap; opacity: 0.82; transition: opacity 0.28s ease; } .pfx-course-showcase-card:hover .pfx-course-meta-item { opacity: 1; } .pfx-course-title .elementor-heading-title { line-height: 1.45; } .pfx-course-description { margin-right: auto; margin-left: auto; } .pfx-course-instructor-row { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 34px rgba(0, 0, 0, 0.16); } .pfx-course-avatar img { border-radius: 50%; object-fit: cover; border: 1px solid rgba(var(--pfx-accent-rgb), 0.32); box-shadow: 0 0 20px rgba(var(--pfx-accent-rgb), 0.16); } .pfx-course-instructor-text .elementor-widget, .pfx-course-instructor-text .elementor-widget-container, .pfx-course-instructor-text p, .pfx-course-instructor-text h1, .pfx-course-instructor-text h2, .pfx-course-instructor-text h3, .pfx-course-instructor-text h4, .pfx-course-instructor-text h5, .pfx-course-instructor-text h6 { margin: 0; padding: 0; line-height: 1.35; } .pfx-course-cta, .pfx-course-cta .elementor-widget-container, .pfx-course-cta .elementor-button-wrapper { width: 100%; max-width: 100%; } .pfx-course-cta { align-self: stretch; } .pfx-course-cta .elementor-button-wrapper { display: block; } .pfx-course-cta .elementor-button { width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 34px rgba(var(--pfx-accent-deep-rgb), 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10); transition: box-shadow 0.28s ease, border-color 0.28s ease, filter 0.28s ease; } .pfx-course-cta .elementor-button:hover { box-shadow: 0 18px 48px rgba(var(--pfx-accent-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14); filter: brightness(1.04); } /* ========================================================= 05) FEATURED COURSE SECTION EFFECTS ========================================================= */ .pfx-featured-course-section { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 12% 25%, rgba(var(--pfx-accent-rgb), 0.11), transparent 28% ), radial-gradient( circle at 86% 70%, rgba(var(--pfx-accent-deep-rgb), 0.08), transparent 32% ), linear-gradient( 135deg, rgba(7, 19, 33, 0.78), rgba(3, 7, 17, 0.98) ); box-shadow: 0 34px 100px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.035); } .pfx-featured-course-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(var(--pfx-accent-rgb), 0.10), transparent 24%, transparent 74%, rgba(var(--pfx-accent-deep-rgb), 0.08) ); opacity: 0.72; pointer-events: none; z-index: 0; } .pfx-featured-course-section::after { content: ""; position: absolute; top: 0; right: 8%; left: 8%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(var(--pfx-accent-rgb), 0.50), transparent ); opacity: 0.75; pointer-events: none; z-index: 1; } .pfx-featured-course-section > * { position: relative; z-index: 2; } .pfx-section-badge { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 24px rgba(var(--pfx-accent-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: border-color 0.28s ease, box-shadow 0.28s ease; } .pfx-featured-course-section:hover .pfx-section-badge, .pfx-learning-path-section:hover .pfx-section-badge { border-color: var(--pfx-border-hover); box-shadow: 0 0 30px rgba(var(--pfx-accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .pfx-course-benefit-item { position: relative; overflow: hidden; transition: border-color 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease; } .pfx-course-benefit-item::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at right center, rgba(var(--pfx-accent-rgb), 0.10), transparent 34% ); opacity: 0; transition: opacity 0.28s ease; pointer-events: none; z-index: 0; } .pfx-course-benefit-item:hover { border-color: var(--pfx-border-hover); box-shadow: 0 14px 36px rgba(var(--pfx-accent-deep-rgb), 0.08); } .pfx-course-benefit-item:hover::before { opacity: 1; } .pfx-course-benefit-item > * { position: relative; z-index: 1; } .pfx-featured-course-actions .elementor-button, .pfx-path-primary-button .elementor-button { position: relative; overflow: hidden; transition: box-shadow 0.28s ease, border-color 0.28s ease, filter 0.28s ease; } .pfx-featured-course-actions .elementor-button:hover, .pfx-path-primary-button .elementor-button:hover { filter: brightness(1.04); } .pfx-featured-course-actions .elementor-button::before, .pfx-path-primary-button .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.12), transparent ); transform: translateX(120%); transition: transform 0.55s ease; pointer-events: none; } .pfx-featured-course-actions .elementor-button:hover::before, .pfx-path-primary-button .elementor-button:hover::before { transform: translateX(-120%); } /* ========================================================= 06) TRUST STRIP EFFECTS ========================================================= */ .pfx-trust-strip { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 20% 0%, rgba(var(--pfx-accent-rgb), 0.08), transparent 28% ), linear-gradient( 180deg, rgba(7, 19, 33, 0.72), rgba(3, 7, 17, 0.92) ); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035); } .pfx-trust-strip::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(var(--pfx-accent-rgb), 0.06), transparent ); opacity: 0.7; pointer-events: none; z-index: 0; } .pfx-trust-strip > * { position: relative; z-index: 1; } .pfx-trust-item { position: relative; overflow: hidden; transition: border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease; } .pfx-trust-item::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at right center, rgba(var(--pfx-accent-rgb), 0.09), transparent 34% ); opacity: 0; transition: opacity 0.28s ease; pointer-events: none; z-index: 0; } .pfx-trust-item:hover { border-color: var(--pfx-border-hover); box-shadow: 0 14px 36px rgba(var(--pfx-accent-deep-rgb), 0.08); } .pfx-trust-item:hover::before { opacity: 1; } .pfx-trust-item > * { position: relative; z-index: 1; } .pfx-trust-icon .elementor-icon { transition: border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease; } .pfx-trust-item:hover .pfx-trust-icon .elementor-icon { border-color: var(--pfx-border-hover); box-shadow: 0 0 20px rgba(var(--pfx-accent-rgb), 0.14); } /* ========================================================= 07) LEARNING PATH SECTION EFFECTS ========================================================= */ .pfx-learning-path-section { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 82% 24%, rgba(var(--pfx-accent-rgb), 0.10), transparent 30% ), radial-gradient( circle at 18% 82%, rgba(var(--pfx-accent-deep-rgb), 0.08), transparent 28% ), linear-gradient( 135deg, rgba(7, 19, 33, 0.76), rgba(3, 7, 17, 0.98) ); box-shadow: 0 34px 100px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035); } .pfx-learning-path-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(var(--pfx-accent-rgb), 0.10), transparent 26%, transparent 72%, rgba(var(--pfx-accent-deep-rgb), 0.08) ); opacity: 0.7; pointer-events: none; z-index: 0; } .pfx-learning-path-section::after { content: ""; position: absolute; top: 0; right: 10%; left: 10%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(var(--pfx-accent-rgb), 0.45), transparent ); opacity: 0.75; pointer-events: none; z-index: 1; } .pfx-learning-path-section > * { position: relative; z-index: 2; } .pfx-learning-path-steps { position: relative; } .pfx-learning-path-steps::before { content: ""; position: absolute; top: 18px; bottom: 18px; right: 23px; width: 1px; background: linear-gradient( 180deg, transparent, rgba(var(--pfx-accent-rgb), 0.28), transparent ); opacity: 0.75; pointer-events: none; } .pfx-path-step { position: relative; overflow: hidden; transition: border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease; } .pfx-path-step::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at right center, rgba(var(--pfx-accent-rgb), 0.10), transparent 34% ); opacity: 0; transition: opacity 0.28s ease; pointer-events: none; z-index: 0; } .pfx-path-step:hover { border-color: var(--pfx-border-hover); box-shadow: 0 16px 42px rgba(var(--pfx-accent-deep-rgb), 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.035); } .pfx-path-step:hover::before { opacity: 1; } .pfx-path-step > * { position: relative; z-index: 1; } .pfx-path-step-number { box-shadow: 0 0 22px rgba(var(--pfx-accent-rgb), 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.055); transition: border-color 0.28s ease, box-shadow 0.28s ease; } .pfx-path-step:hover .pfx-path-step-number { border-color: var(--pfx-border-hover); box-shadow: 0 0 28px rgba(var(--pfx-accent-rgb), 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ========================================================= 08) SITE BACKGROUND + HEADER SYNC — LOOP-SAFE ========================================================= */ body.home::before, body.page-id-996::before { display: none !important; content: none !important; } /* * IMPORTANT: * Do not target the generic `.elementor` .elementor-kit-30 here. * Every Elementor Loop Item also has the `.elementor` class, and a global * background on that .elementor-kit-30 creates an extra rectangle behind loop cards. */ html, body, body.home, body.page-id-996, #page, .site, .site-content, .site-main, main, body.elementor-page, .elementor-location-header, .elementor-location-footer { background-color: var(--pfx-page-bg) !important; } /* * Apply the page background only to top-level page Elementor roots. * Nested Elementor documents such as Loop Items remain transparent. */ .site-main > .elementor, main > .elementor, body.home #page, body.page-id-996 #page, body.home .site, body.page-id-996 .site, body.home main, body.page-id-996 main, body.home .site-main, body.page-id-996 .site-main, body.home .site-main > .elementor, body.page-id-996 .site-main > .elementor, body.home main > .elementor, body.page-id-996 main > .elementor { background: var(--pfx-page-bg) !important; background-color: var(--pfx-page-bg) !important; } /* * GLOBAL LOOP ROOT CLEANUP * Loop templates must not receive the page background. * Their actual visual card backgrounds belong to the inner card containers. */ .elementor[data-elementor-type="loop-item"], .elementor.e-loop-item, .e-loop-item[data-elementor-type="loop-item"] { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* * Loop wrappers must not clip hover glows or create extra rectangles. * The actual card background belongs to the card class inside the template. */ .elementor[data-elementor-type="loop-item"], .elementor.e-loop-item, .e-loop-item[data-elementor-type="loop-item"], .elementor-loop-container, .e-loop-container, .ue-grid, .ue-grid-item { overflow: visible !important; } .elementor-loop-container, .e-loop-container, .ue-grid, .ue-grid-item { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Remove accidental pseudo backgrounds from Loop Item roots only. */ .elementor[data-elementor-type="loop-item"]::before, .elementor[data-elementor-type="loop-item"]::after, .elementor.e-loop-item::before, .elementor.e-loop-item::after, .e-loop-item[data-elementor-type="loop-item"]::before, .e-loop-item[data-elementor-type="loop-item"]::after { content: none !important; display: none !important; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } .pfx-site-header, .elementor-location-header { background: var(--pfx-page-bg) !important; background-color: var(--pfx-page-bg) !important; } body.home .pfx-site-header, body.page-id-996 .pfx-site-header, body.home .elementor-location-header, body.page-id-996 .elementor-location-header { background: var(--pfx-page-bg) !important; background-color: var(--pfx-page-bg) !important; } /* * HEADER VISUAL OWNERSHIP * .pfx-header-shell / .pfx-header-main / header navigation / header actions * are intentionally NOT styled in Site Settings. * They consume the global accent tokens inside the PFX Header template CSS. */ .pfx-home-hero { background: var(--pfx-page-bg) !important; background-color: var(--pfx-page-bg) !important; background-image: none !important; margin-top: -1px !important; } body.home .elementor-section, body.page-id-996 .elementor-section, body.home .elementor-container, body.page-id-996 .elementor-container { background-repeat: no-repeat; } .pfx-featured-course-section, .pfx-learning-path-section, .pfx-trust-strip { background-repeat: no-repeat !important; } /* ========================================================= 09) PFX PODCAST — GLOBAL LOOP ITEM CLEANUP F12 Found: .elementor-10217.e-loop-item ========================================================= */ /* Loop item itself */ .elementor-10217.e-loop-item, .elementor-10217.e-loop-item[class*="uc-post-"], .elementor-10217[data-elementor-type="loop-item"], .elementor-10217[class*="post-"] { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* Loop item pseudo elements */ .elementor-10217.e-loop-item::before, .elementor-10217.e-loop-item::after, .elementor-10217[data-elementor-type="loop-item"]::before, .elementor-10217[data-elementor-type="loop-item"]::after { display: none !important; content: none !important; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Podcast loop wrappers on home page */ .pfx-home-podcast-section .pfx-podcast-cards-area, .pfx-home-podcast-section .pfx-podcast-loop, .pfx-home-podcast-section .pfx-podcast-loop > .elementor-widget-container, .pfx-home-podcast-section .pfx-podcast-loop .elementor-loop-container, .pfx-home-podcast-section .pfx-podcast-loop .e-loop-container, .pfx-home-podcast-section .pfx-podcast-loop .ue-grid, .pfx-home-podcast-section .pfx-podcast-loop .ue-grid-item, .pfx-home-podcast-section .pfx-podcast-loop .elementor-grid, .pfx-home-podcast-section .pfx-podcast-loop .elementor-grid-item { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Main card wrapper inside Loop Template */ .elementor-10217 .elementor-element-147776a, .elementor-10217 [data-id="147776a"] { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: visible !important; isolation: isolate !important; } /* Do NOT create wrapper background */ .elementor-10217 .elementor-element-147776a::before, .elementor-10217 .elementor-element-147776a::after, .elementor-10217 [data-id="147776a"]::before, .elementor-10217 [data-id="147776a"]::after { display: none !important; content: none !important; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Extra Elementor wrappers */ .elementor-10217 > .elementor-element, .elementor-10217 > .e-con, .elementor-10217 > .e-con-inner, .elementor-10217 .e-con-inner, .elementor-10217 .elementor-widget-wrap, .elementor-10217 .elementor-container, .elementor-10217 .elementor-section { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Keep podcast card clean */ .elementor-10217 .pfx-podcast-card { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 20px !important; overflow: hidden !important; position: relative !important; isolation: isolate !important; } /* The ONLY background layer of the podcast card */ .elementor-10217 .pfx-podcast-card::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border-radius: inherit !important; background: radial-gradient(circle at 50% 0%, rgba(139, 92, 255, 0.18), transparent 48%), linear-gradient(180deg, rgba(10, 12, 34, 0.84), rgba(2, 6, 16, 0.97)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px rgba(139, 92, 255, 0.13) !important; } /* Content above card background */ .elementor-10217 .pfx-podcast-card > * { position: relative !important; z-index: 2 !important; } /* Keep top glow line above content if used */ .elementor-10217 .pfx-podcast-card::before { z-index: 5 !important; } /* Restore media area */ .elementor-10217 .pfx-podcast-card-media { position: relative !important; z-index: 2 !important; overflow: hidden !important; border-radius: 20px 20px 0 0 !important; background: linear-gradient(180deg, rgba(15, 14, 42, 0.92), rgba(2, 6, 16, 0.94)) !important; box-shadow: none !important; } /* Restore image clipping */ .elementor-10217 .pfx-podcast-card-image, .elementor-10217 .pfx-podcast-card-image .elementor-widget-container, .elementor-10217 .pfx-podcast-card-image a, .elementor-10217 .pfx-podcast-card-image img { overflow: hidden !important; border-radius: 20px 20px 0 0 !important; } /* Restore play button */ .elementor-10217 .pfx-podcast-card-play .elementor-icon { background: radial-gradient(circle at 50% 0%, rgba(139, 92, 255, 0.44), transparent 62%), linear-gradient(135deg, rgba(139, 92, 255, 0.96), rgba(76, 36, 190, 0.94)) !important; border: 1px solid rgba(139, 92, 255, 0.50) !important; box-shadow: 0 0 18px rgba(139, 92, 255, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.13) !important; } /* Restore episode badge */ .elementor-10217 .pfx-podcast-card-episode .elementor-widget-container { background: linear-gradient(135deg, rgba(139, 92, 255, 0.96), rgba(76, 36, 190, 0.94)) !important; border: 1px solid rgba(139, 92, 255, 0.52) !important; box-shadow: 0 0 16px rgba(139, 92, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } /* ========================================================= 10) GLOBAL BUTTON SIZE LOCK No button is allowed to grow, shrink, move or rotate on hover. Visual hover effects such as color, glow and shadow remain allowed. ========================================================= */ /* * Elementor Button widgets, forms, WordPress buttons and WooCommerce buttons. * This intentionally overrides Elementor Hover Animation options such as * Grow, Shrink, Float, Bob, Pulse and similar transform-based effects. */ body :where( .elementor-button, .elementor-widget-button .elementor-button, .elementor-field-type-submit .elementor-button, .elementor-cta__button, .elementor-slide-button, .elementor-flip-box__button, .elementor-price-table__button, .elementor-call-to-action__button, a[role="button"], button, input[type="submit"], input[type="button"], input[type="reset"], .wp-block-button__link, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button ), body :where( .elementor-button, .elementor-widget-button .elementor-button, .elementor-field-type-submit .elementor-button, .elementor-cta__button, .elementor-slide-button, .elementor-flip-box__button, .elementor-price-table__button, .elementor-call-to-action__button, a[role="button"], button, input[type="submit"], input[type="button"], input[type="reset"], .wp-block-button__link, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button ):hover, body :where( .elementor-button, .elementor-widget-button .elementor-button, .elementor-field-type-submit .elementor-button, .elementor-cta__button, .elementor-slide-button, .elementor-flip-box__button, .elementor-price-table__button, .elementor-call-to-action__button, a[role="button"], button, input[type="submit"], input[type="button"], input[type="reset"], .wp-block-button__link, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button ):focus, body :where( .elementor-button, .elementor-widget-button .elementor-button, .elementor-field-type-submit .elementor-button, .elementor-cta__button, .elementor-slide-button, .elementor-flip-box__button, .elementor-price-table__button, .elementor-call-to-action__button, a[role="button"], button, input[type="submit"], input[type="button"], input[type="reset"], .wp-block-button__link, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button ):focus-visible, body :where( .elementor-button, .elementor-widget-button .elementor-button, .elementor-field-type-submit .elementor-button, .elementor-cta__button, .elementor-slide-button, .elementor-flip-box__button, .elementor-price-table__button, .elementor-call-to-action__button, a[role="button"], button, input[type="submit"], input[type="button"], input[type="reset"], .wp-block-button__link, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button ):active { transform: none !important; translate: none !important; rotate: none !important; scale: 1 !important; /* * Prevent transition: all from animating dimensions or transforms. * Button width, height, padding and typography remain controlled by Elementor. */ transition-property: color, background-color, background-image, border-color, box-shadow, filter, opacity !important; } /* Disable Elementor's transform-based button animation classes globally. */ body .elementor-button[class*="elementor-animation-"], body .elementor-button[class*="elementor-animation-"]:hover, body .elementor-button[class*="elementor-animation-"]:focus, body .elementor-button[class*="elementor-animation-"]:active { transform: none !important; translate: none !important; rotate: none !important; scale: 1 !important; animation: none !important; } /* ========================================================= 11) ACCESSIBILITY + MOTION SAFETY ========================================================= */ @media (prefers-reduced-motion: reduce) { .pfx-card, .pfx-card::before, .pfx-icon-box, .pfx-course-showcase-card::after, .pfx-course-image img, .pfx-section-badge, .pfx-course-benefit-item, .pfx-course-benefit-item::before, .pfx-featured-course-actions .elementor-button, .pfx-featured-course-actions .elementor-button::before, .pfx-path-primary-button .elementor-button, .pfx-path-primary-button .elementor-button::before, .pfx-trust-item, .pfx-trust-item::before, .pfx-trust-icon .elementor-icon, .pfx-path-step, .pfx-path-step::before, .pfx-path-step-number { transition: none !important; animation: none !important; } .pfx-card:hover, .pfx-course-cta .elementor-button:hover, .pfx-course-benefit-item:hover, .pfx-featured-course-actions .elementor-button:hover, .pfx-path-primary-button .elementor-button:hover, .pfx-trust-item:hover, .pfx-path-step:hover, .pfx-path-step:hover .pfx-path-step-number { transform: none !important; } } /* ========================================================= END — PFX1 SITE SETTINGS CSS ========================================================= */ /* ========================================================= PFX1 RESPONSIVE VIEWPORT SAFETY LAYER Tablet + Mobile Fixes: 1) Horizontal overflow 2) Content hidden behind fixed bottom navigation 3) 100vw overflow in responsive components ========================================================= */ /* ========================================================= 01) TABLET + MOBILE GLOBAL SAFETY ========================================================= */ @media (max-width: 1024px) { html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* * Modern browsers: * clip prevents accidental horizontal scrolling * without creating an extra scroll container. */ @supports (overflow-x: clip) { html, body { overflow-x: clip !important; } } body { box-sizing: border-box !important; } *, *::before, *::after { box-sizing: border-box; } } /* ========================================================= 02) RESPONSIVE HEADER OWNERSHIP Header width, padding and responsive geometry are owned only by the PFX Header template CSS. Site Settings intentionally applies no extra max-width or margin to the header root. ========================================================= */ /* ========================================================= 03) TOOLS HERO IMPORTANT: Never use 100vw inside the padded page container. ========================================================= */ @media (max-width: 1024px) { .pfx-tools-hero-section { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } .pfx-tools-hero-section .pfx-tools-hero-inner { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= 04) TABLET BOTTOM NAV SPACE Fixed nav must not cover final page content. ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { body { padding-bottom: calc( 110px + env(safe-area-inset-bottom, 0px) ) !important; } .pfx-tablet-bottom-nav { max-width: calc(100% - 28px) !important; } } /* ========================================================= 05) MOBILE BOTTOM NAV SPACE ========================================================= */ @media (max-width: 767px) { body { padding-bottom: calc( 96px + env(safe-area-inset-bottom, 0px) ) !important; } .pfx-mobile-bottom-nav { max-width: calc(100% - 20px) !important; } } /* ========================================================= 06) VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { body { padding-bottom: calc( 92px + env(safe-area-inset-bottom, 0px) ) !important; } .pfx-mobile-bottom-nav { max-width: calc(100% - 16px) !important; } } /* ========================================================= 07) MEDIA SAFETY ========================================================= */ @media (max-width: 1024px) { img, video, iframe, svg { max-width: 100%; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'PFX1 Font'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://peymanrezaei.com/wp-content/uploads/2026/07/BonyadeKoodakFaNum-Regular.woff2') format('woff2'); } @font-face { font-family: 'PFX1 Font'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://peymanrezaei.com/wp-content/uploads/2026/07/BonyadeKoodakFaNum-Medium.woff2') format('woff2'); } @font-face { font-family: 'PFX1 Font'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://peymanrezaei.com/wp-content/uploads/2026/07/BonyadeKoodakFaNum-Bold.woff2') format('woff2'); } @font-face { font-family: 'PFX1 Font'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://peymanrezaei.com/wp-content/uploads/2026/07/BonyadeKoodakFaNum-ExtraBold.woff2') format('woff2'); } @font-face { font-family: 'PFX1 Font'; font-style: normal; font-weight: 800; font-display: auto; src: url('https://peymanrezaei.com/wp-content/uploads/2026/07/BonyadeKoodakFaNum-Black.woff2') format('woff2'); } @font-face { font-family: 'PFX1 Font'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://peymanrezaei.com/wp-content/uploads/2026/07/BonyadeKoodakFaNum-Light.woff2') format('woff2'); } /* End Custom Fonts CSS */