/* Theme Name: ATSR Child Theme Theme URI: https://atsrpl.com.au Description: Child theme for ATSR — Australian Training & Skills Recognition. Built on Hello Elementor with custom design system tokens, qualification CPT, and GSAP integration. Author: Nodevex Author URI: https://nodevex.com Template: hello-elementor Version: 3.5.2 Text Domain: atsr License: Proprietary CSS SPLIT: This file contains design system tokens, base styles, and utility classes. Header, footer, mobile nav, and Elementor-specific overrides live in Elementor Pro Custom Code (see ATSR_Elementor_Custom_Code.md). Add CSS classes to widgets in Elementor (e.g. atsr-header, atsr-footer, atsr-footer-form, btn-phone-pill, btn-cta-gradient). */ /* ========================================================================== 1. DESIGN SYSTEM — CSS Custom Properties Source: Figma MCP extraction (rjrQXWWUsnHzyQurQ9Jvdv, node 6:9) ========================================================================== */ :root { /* Light-only site — opt out of browser auto-dark inversion (Chrome/Brave "auto dark theme", Safari). Inline copy is also emitted in via atsr_color_scheme_light() so it applies before first paint. */ color-scheme: only light; /* --- Colors: Light Mode (production default) --- */ --atsr-background: #FFFFFF; --atsr-foreground: #1A4D4D; --atsr-primary: #23E6A5; --atsr-primary-foreground: #1E4B4B; --atsr-secondary: #CDFF6E; --atsr-destructive: #D32F2F; --atsr-destructive-fg: #FFFFFF; --atsr-success: #388E3C; --atsr-success-fg: #FFFFFF; --atsr-muted: #F2F5F8; --atsr-muted-fg: #9699AC; --atsr-accent: #8C52FF; --atsr-accent-fg: #F4EEFF; --atsr-popover: #FFFFFF; --atsr-popover-fg: #0C0E3A; --atsr-card: #FFFFFF; --atsr-card-fg: #0C0E3A; --atsr-border: #E2E5EA; --atsr-input: #F2F5F8; --atsr-ring: #6B7EEF; /* --- Gradient --- */ --atsr-gradient: linear-gradient(90deg, #23E6A5 0%, #CDFF6E 100%); /* --- Header (Figma: Navigation bg on light pages) --- */ --atsr-header-bg: #EBFFF6; /* --- Typography --- */ --atsr-font-primary: 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --atsr-font-accent: 'Warbler Banner', Georgia, 'Times New Roman', serif; /* --- Spacing (17-step scale) --- */ --atsr-space-1: 4px; --atsr-space-2: 8px; --atsr-space-3: 12px; --atsr-space-4: 16px; --atsr-space-5: 20px; --atsr-space-6: 24px; --atsr-space-7: 32px; --atsr-space-8: 40px; --atsr-space-9: 48px; --atsr-space-10: 64px; --atsr-space-11: 80px; --atsr-space-12: 96px; --atsr-space-13: 128px; --atsr-space-14: 160px; --atsr-space-15: 192px; --atsr-space-16: 224px; --atsr-space-17: 256px; /* --- Border Radius --- */ --atsr-radius-xs: 4px; --atsr-radius-sm: 8px; --atsr-radius-md: 12px; --atsr-radius-lg: 16px; --atsr-radius-xl: 20px; --atsr-radius-2xl: 24px; --atsr-radius-full: 9999px; /* --- Shadows --- */ --atsr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --atsr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --atsr-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --atsr-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --atsr-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); --atsr-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); } /* ========================================================================== 2. BASE RESETS & OVERRIDES ========================================================================== */ /* Remove default browser / Elementor blue focus rings globally */ *:focus, *:focus-visible, input:focus, select:focus, textarea:focus, .elementor-field:focus { outline: none !important; } html { overflow-x: clip; } body { font-family: var(--atsr-font-primary); color: var(--atsr-foreground); background-color: var(--atsr-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } /* Text Editor base color removed — was overriding per-widget Custom CSS due to Elementor Pro post-90.css compilation bug (Custom CSS not output). Body rule (line 99) already cascades --atsr-foreground to all elements. Use utility classes (atsr-text-label, atsr-text-body-dark, etc.) instead of per-widget Custom CSS for reliable styling. */ /* ========================================================================== 3. TYPOGRAPHY UTILITIES Body 2 (20px) and Body 3 (14px) — not native Elementor slots. Apply via "Additional CSS Classes" on Text Editor widgets. ========================================================================== */ .text-body-2, .text-body-2 p { font-size: 20px; line-height: 1.4; font-weight: 400; } .text-body-3, .text-body-3 p { font-size: 14px; line-height: 1.4; font-weight: 400; } .text-accent-serif, .text-accent-serif p { font-family: var(--atsr-font-accent); } .font-regular { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* ========================================================================== 4. BUTTON OVERRIDES ========================================================================== */ .elementor-button { font-family: var(--atsr-font-primary); font-weight: 600; border-radius: var(--atsr-radius-full) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .elementor-button:hover { transform: translateY(-1px); box-shadow: var(--atsr-shadow-md); opacity: 0.92; } .elementor-button:active { transform: translateY(0); } /* Variant: Light */ .btn-light .elementor-button { background: var(--atsr-muted) !important; color: var(--atsr-primary-foreground) !important; } .btn-light .elementor-button:hover { background: #E8ECF0 !important; } /* Variant: Outline */ .btn-outline .elementor-button { background: transparent !important; border: 1px solid var(--atsr-border) !important; color: var(--atsr-primary-foreground) !important; } .btn-outline .elementor-button:hover { border-color: var(--atsr-primary) !important; } /* Variant: Text-only */ .btn-text .elementor-button { background: transparent !important; color: var(--atsr-primary-foreground) !important; padding-left: 0 !important; padding-right: 0 !important; } .btn-text .elementor-button:hover { color: var(--atsr-primary) !important; } /* Size overrides */ .btn-lg .elementor-button { padding: 19px 32px !important; min-height: 58px; font-size: 16px; line-height: 20px; } .btn-md .elementor-button { padding: 14px 24px !important; min-height: 48px; font-size: 16px; line-height: 20px; } .btn-sm .elementor-button { padding: 9px 16px !important; min-height: 38px; font-size: 14px; line-height: 20px; } /* --- Gradient text utility --- * Add class "atsr-gradient-text" in Elementor → Advanced → CSS Classes * on any Heading or Text Editor widget for the green→lime gradient effect. * Targets all inner text elements so the gradient clips to the text. */ .atsr-gradient-text .elementor-heading-title, .atsr-gradient-text .elementor-text-editor, .atsr-gradient-text .elementor-text-editor p { background: linear-gradient(90deg, #23E6A5 0%, #CDFF6E 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* ========================================================================== 5. FORM FIELD STYLING ========================================================================== */ .elementor-field-textual { font-family: var(--atsr-font-primary) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--atsr-foreground) !important; background-color: var(--atsr-input) !important; border: 1px solid var(--atsr-border) !important; border-radius: var(--atsr-radius-sm) !important; padding: 14px 16px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .elementor-field-textual::placeholder { color: var(--atsr-muted-fg) !important; } .elementor-field-textual:focus { border-color: var(--atsr-ring) !important; box-shadow: 0 0 0 3px rgba(107, 126, 239, 0.15) !important; outline: none; } .elementor-field-textual.field-error, .elementor-field-textual.elementor-error { border-color: var(--atsr-destructive) !important; box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12) !important; } .elementor-field-type-checkbox input[type="checkbox"], .elementor-field-type-radio input[type="radio"] { accent-color: var(--atsr-primary); width: 24px; height: 24px; } /* ========================================================================== 6. LAYOUT UTILITIES ========================================================================== */ /* Top 12px green accent bar — COMMENTED: Figma design has no accent bar above header */ /* .site-accent-bar { position: fixed; top: 0; left: 0; right: 0; height: 12px; background: var(--atsr-primary); z-index: 9999; } body.has-accent-bar { padding-top: 12px; } */ /* Dark teal section (hero/header) */ .section-dark { background-color: var(--atsr-primary-foreground) !important; color: #FFFFFF; } .section-dark h1, .section-dark h2, .section-dark h3 { color: var(--atsr-secondary) !important; } .section-dark p, .section-dark li { color: rgba(255, 255, 255, 0.85); } /* --- Mobile hero section padding fix — HOMEPAGE ONLY --- Scoped to .atsr-hero class and specific Elementor element ID. Root cause: Container .elementor-element-b65f084 has min-height:662px from desktop settings, creating ~470px empty space on mobile. DO NOT use broad selectors like .section-dark:first-child or .elementor-location-single .e-con:first-child — they break industry/qualification page templates. */ @media (max-width: 1024px) { /* Homepage hero section — auto height, modest bottom padding */ .atsr-hero { min-height: auto !important; height: auto !important; padding-bottom: 32px !important; } /* Homepage hero inner containers — kill inherited min-height from desktop */ .atsr-hero .e-con, .atsr-hero .e-con-inner, .atsr-hero .elementor-element, .elementor-element-b65f084 { min-height: 0 !important; min-height: unset !important; height: auto !important; } } /* Muted bg section */ .section-muted { background-color: var(--atsr-muted) !important; } /* Card component */ .atsr-card { background: var(--atsr-card); border: 1px solid var(--atsr-border); border-radius: var(--atsr-radius-md); box-shadow: var(--atsr-shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease; } .atsr-card:hover { box-shadow: var(--atsr-shadow-md); transform: translateY(-2px); } /* Badge utilities */ .atsr-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--atsr-radius-full); font-size: 14px; font-weight: 500; line-height: 1; } .atsr-badge--primary { background: rgba(35, 230, 165, 0.15); color: var(--atsr-primary-foreground); } .atsr-badge--neutral { background: var(--atsr-muted); color: var(--atsr-muted-fg); } .atsr-badge--success { background: rgba(56, 142, 60, 0.12); color: var(--atsr-success); } .atsr-badge--danger { background: rgba(211, 47, 47, 0.1); color: var(--atsr-destructive); } /* ========================================================================== 7. QUALIFICATION CPT — ARCHIVE & SINGLE TEMPLATE HELPERS ========================================================================== */ .qualification-card { background: var(--atsr-card); border: 1px solid var(--atsr-border); border-radius: var(--atsr-radius-md); padding: var(--atsr-space-6); transition: box-shadow 0.25s ease, transform 0.25s ease; } .qualification-card:hover { box-shadow: var(--atsr-shadow-lg); transform: translateY(-3px); } .qualification-card__code { font-size: 14px; font-weight: 600; color: var(--atsr-primary-foreground); text-transform: uppercase; letter-spacing: 0.5px; } .qualification-card__title { font-size: 20px; font-weight: 700; color: var(--atsr-primary-foreground); margin-top: var(--atsr-space-2); line-height: 1.3; } .qualification-card__meta { display: flex; flex-wrap: wrap; gap: var(--atsr-space-2); margin-top: var(--atsr-space-4); } /* AJAX filter container */ .qualification-filters { display: flex; flex-wrap: wrap; gap: var(--atsr-space-4); margin-bottom: var(--atsr-space-8); } .qualification-filters select { font-family: var(--atsr-font-primary); font-size: 16px; padding: 12px 16px; border: 1px solid var(--atsr-border); border-radius: var(--atsr-radius-sm); background-color: var(--atsr-input); color: var(--atsr-foreground); min-width: 200px; cursor: pointer; transition: border-color 0.2s ease; } .qualification-filters select:focus { border-color: var(--atsr-ring); outline: none; box-shadow: 0 0 0 3px rgba(107, 126, 239, 0.15); } .qualification-search { flex: 1; min-width: 280px; } /* AJAX loading state */ .qualification-results { position: relative; min-height: 200px; } .qualification-results.is-loading { opacity: 0.5; pointer-events: none; } .qualification-results.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid var(--atsr-border); border-top-color: var(--atsr-primary); border-radius: 50%; animation: atsr-spin 0.7s linear infinite; } @keyframes atsr-spin { to { transform: rotate(360deg); } } /* ========================================================================== 8. SINGLE QUALIFICATION TEMPLATE ========================================================================== */ .qualification-header { padding: var(--atsr-space-12) 0 var(--atsr-space-8); } .qualification-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--atsr-space-4); padding: var(--atsr-space-6); background: var(--atsr-muted); border-radius: var(--atsr-radius-md); } .qualification-meta-item { display: flex; flex-direction: column; gap: var(--atsr-space-1); } .qualification-meta-item__label { font-size: 14px; font-weight: 500; color: var(--atsr-muted-fg); text-transform: uppercase; letter-spacing: 0.5px; } .qualification-meta-item__value { font-size: 16px; font-weight: 600; color: var(--atsr-primary-foreground); } /* Units of Competency list */ .units-list { list-style: none; padding: 0; margin: 0; } .units-list__item { padding: var(--atsr-space-4) 0; border-bottom: 1px solid var(--atsr-border); display: flex; gap: var(--atsr-space-3); align-items: baseline; } .units-list__item:last-child { border-bottom: none; } .units-list__code { font-weight: 600; font-size: 14px; color: var(--atsr-primary-foreground); white-space: nowrap; min-width: 120px; } .units-list__name { font-size: 16px; color: var(--atsr-foreground); } /* ========================================================================== 9. GSAP ANIMATION HELPERS ========================================================================== */ .gsap-reveal { opacity: 0; transform: translateY(30px); } .gsap-reveal-left { opacity: 0; transform: translateX(-40px); } .gsap-reveal-right { opacity: 0; transform: translateX(40px); } .gsap-reveal-scale { opacity: 0; transform: scale(0.9); } /* REDUCED-MOTION FALLBACK: When JS is disabled or GSAP fails to load, these rules make elements visible instead of stuck at opacity:0. We intentionally do NOT use !important here — GSAP inline styles must be able to override these so animations work on mobile devices where Battery Saver mode falsely triggers prefers-reduced-motion: reduce. The JS handles reduced-motion detection separately (see atsr-gsap-init.js). */ /* Testimonials grid — initial hidden state (GSAP sets inline overrides) */ .atsr-testimonials-grid .elementor-widget { opacity: 0; } @media (prefers-reduced-motion: reduce) { .gsap-reveal, .gsap-reveal-left, .gsap-reveal-right, .gsap-reveal-scale, .atsr-testimonials-grid .elementor-widget { opacity: 1; transform: none; } } /* Elementor Editor — force-show all animated elements so editors can see and edit content without FOUC hides or transform offsets. JS guard in atsr-gsap-init.js also bails entirely in editor. */ .elementor-editor-active .gsap-reveal, .elementor-editor-active .gsap-reveal-left, .elementor-editor-active .gsap-reveal-right, .elementor-editor-active .gsap-reveal-scale, .elementor-editor-active .gsap-hero-title, .elementor-editor-active .gsap-hero-subtitle, .elementor-editor-active .gsap-hero-cta, .elementor-editor-active .atsr-hero-buttons, .elementor-editor-active .atsr-hero-search-wrap, .elementor-editor-active .gsap-split-title, .elementor-editor-active .gsap-stagger-item, .elementor-editor-active .atsr-testimonials-grid .elementor-widget { opacity: 1 !important; transform: none !important; visibility: visible !important; } /* ========================================================================== 9a. ATSR IMPACT STATS PANEL The .atsr-impact-panel is an e-con-full container that breaks out of its boxed parent. On viewports < 1536px, the 4 stat columns overflow left. Fix: constrain to viewport width, allow flex-wrap on smaller screens. ========================================================================== */ /* Panel is e-con-full (no .e-con-inner) — 4 stat columns are direct children. * On wide screens Elementor breaks it out via left:50%+translateX(-50%)+100vw. * On viewports < 1536px the 4×354px columns + gaps overflow. Fix: cap to * viewport width and let flex children shrink equally. */ .atsr-impact-panel { max-width: 100vw !important; overflow: hidden !important; box-sizing: border-box !important; justify-content: center !important; gap: 24px !important; padding: 24px !important; } /* Stat columns — equal width, no min-width constraint so they compress */ .atsr-impact-panel > .e-con { flex: 1 1 0 !important; min-width: 0 !important; } /* Bug fix (2026-06-05): gsap-counter reflow glitch — card "refits" after count. * The counter text grows while counting (0+ → 1,500+): digit count rises from * 1 to 5 chars and toLocaleString() inserts a comma at 1,000. If the white card * is content-width, the box visibly grows and snaps to its final size during/ * after the animation. Fix: * 1. Cards fill their equal-flex column → the box never resizes from text. * 2. tabular-nums gives every digit the same advance width → no jitter as * the number ticks up. (Vertical height is already stable via the * .gsap-counter line-height:1.2 base rule.) */ .atsr-impact-panel-card { width: 100% !important; box-sizing: border-box !important; } .gsap-counter, .gsap-counter .elementor-heading-title { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important; } /* On smaller laptops, tighten gap */ @media (max-width: 1440px) { .atsr-impact-panel { gap: 16px !important; padding: 24px 16px !important; } } /* Mobile: stack stat columns vertically so labels aren't clipped */ @media (max-width: 1024px) { .atsr-impact-panel { flex-direction: column !important; flex-wrap: nowrap !important; gap: 16px !important; } .atsr-impact-panel > .e-con { flex: 0 0 auto !important; width: 100% !important; } .atsr-impact-panel-card { flex-direction: column !important; flex-wrap: nowrap !important; gap: 16px !important; } .atsr-impact-panel-card > .e-con { flex: 0 0 auto !important; width: 100% !important; } } /* ========================================================================== 9b. RPL PROCESS — HORIZONTAL SCROLL (GSAP pin:true — v9) Classes: atsr-rpl-pinned, atsr-rpl-panels, atsr-rpl-panel, atsr-step-card, atsr-step-number, atsr-progress-bar/fill/dot JS driver: atsr-gsap-rpl-process.js v9 (ScrollTrigger pin:true) NOTE: v9 dropped the hand-built .atsr-rpl-runway wrapper + CSS position:sticky. GSAP owns the pin (position:fixed + auto pin-spacer). Runway rules removed. ========================================================================== */ /* --- RPL section — GSAP ScrollTrigger pins this (position:fixed) while the * journey scrubs. overflow clips off-screen panels; will-change composites. */ .atsr-rpl-process, .atsr-rpl-pinned { overflow: hidden !important; width: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: none !important; } /* When pinned (Solution B): section fills viewport below header. * Uses --atsr-header-h CSS variable set by JS once on boot. * Flex column layout: cards row (fixed height) → content → panels (fill). * NOTE: height and max-height are set by JS via setProperty("important") to * dynamically adapt to viewport size (4K vs laptop). The CSS values below are * fallbacks for the brief moment before JS runs. Do NOT add !important here — * it would override JS and break responsive sizing. */ .atsr-rpl-pinned.is-pinned { height: calc(100vh - var(--atsr-header-h, 107px) - 2px); max-height: none; padding: 0 48px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* Zero Elementor's inner-wrapper padding when pinned — the 80px bottom * and 96px sides from --padding-* vars waste vertical/horizontal space. * Section-level padding (above) provides viewport breathing room instead. */ .atsr-rpl-pinned.is-pinned > .e-con-inner { padding: 0 !important; } /* Collapse the empty first Elementor container (data-id 315181b). * It has min-height ~100px but no content — just wastes vertical space. * When not pinned, it provides spacing for the unpinned layout. */ .atsr-rpl-pinned.is-pinned > .e-con:first-child:empty { display: none !important; } /* Content container (second child) — stretch to fill and stack children. * This is the container holding step cards + progress + panels. */ .atsr-rpl-pinned.is-pinned > .e-con:last-child { flex: 1 !important; min-height: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 4px !important; } /* Step cards row — compact spacing, no-shrink when pinned. * padding-top: 4px (was 8px) to reclaim vertical space. */ .atsr-rpl-pinned.is-pinned .atsr-step-cards-row { flex-shrink: 0 !important; padding: 4px 0 0 0 !important; } /* Step cards — slightly reduced padding when pinned. * Keep full content visible: icon + step number + heading + description. * Matches the design reference where all card info is readable. */ .atsr-rpl-pinned.is-pinned .atsr-step-card { padding: 16px 20px !important; gap: 6px !important; } /* Step card description — compact font when pinned to save space */ .atsr-rpl-pinned.is-pinned .atsr-step-card .elementor-widget-text-editor:not(.atsr-step-number) p { font-size: 13px !important; line-height: 1.3 !important; margin: 0 !important; } /* Elementor single-child wrapper — must fill the section height, not its natural * content height. Without this, the e-child takes flex:0 1 auto (natural ~942px) * and overflows the 801px section, clipping the bottom of the panel on MacBook/ * small laptops. flex:1 1 0% + overflow:hidden constrains it to the section. */ .atsr-rpl-pinned.is-pinned > .e-con-inner > .e-con.e-child { flex: 1 1 0% !important; min-height: 0 !important; overflow: hidden !important; } /* Content area (progress bar + panels) fills remaining space. * overflow: hidden kills the horizontal scrollbar from the track. */ .atsr-rpl-pinned.is-pinned .atsr-rpl-content { flex: 1 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* Panels container fills remaining content area. * overflow: visible — the TRACK must NOT clip its children (panels extend * beyond its e-con-boxed width). The PARENT .atsr-rpl-content clips instead. * width: max-content — override Elementor e-con-boxed width:100% constraint * so all 4 panels are laid out in a continuous flex row. */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panels { flex: 1 !important; min-height: 0 !important; overflow: visible !important; width: max-content !important; gap: 32px !important; /* Visible panel-to-panel gap (matches JS PANEL_GAP) */ transition: none !important; /* Kill Elementor's transform 0.4s — fights GSAP */ } /* Track's e-con-inner also needs to expand for boxed containers. * gap is set by JS (PANEL_GAP) but CSS provides a fallback. */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panels > .e-con-inner { max-width: none !important; width: max-content !important; display: flex !important; flex-wrap: nowrap !important; gap: 32px !important; /* Panel gap when panels sit inside .e-con-inner */ transition: none !important; /* Kill Elementor's inherited transition */ } /* Each panel fills the panels container height when pinned. * Kills Elementor's min-height (575px). * Panel WIDTH is set by JS (gsap.set) — do NOT override with CSS width/max-width. * overflow: clip — clips both axes without creating a scroll container or BFC. * Unlike overflow:hidden, clip never shows a scrollbar even if JS sets overflowY. * The parent .atsr-rpl-content (overflow:hidden) handles visual containment. * Rounded corners + subtle border match Figma card design. * Inactive panels show at opacity 0.3 (set by JS). */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel { --min-height: 0px !important; min-height: 0 !important; height: 100% !important; /* max-height is set dynamically by JS via setProperty("important") to match * the calculated panel area height. No CSS cap here — JS handles it. */ max-height: none; /* overflow: clip — clips both axes WITHOUT creating a scroll container. * overflow-y:auto turned the panel into a scrollable box: during the GSAP * journey the mouse wheel scrolled the panel's OWN content to the bottom, * pushing the heading out the top (the visible top-clip bug). clip can * never scroll or trap. Short viewports are made to fit by the * @media (max-height: 840px) compaction block below, so nothing overflows * down to ~768px tall; below that only the bottom clips a few px. */ overflow: clip !important; box-sizing: border-box !important; padding: 24px 25px !important; margin: 0 !important; transition: none !important; /* Kill Elementor's transform 0.4s — fights GSAP */ border-radius: 16px !important; border: 1px solid rgba(243, 244, 246, 0.3) !important; } /* Inactive panels dim to 0.3 so the active step stands out; the active panel * (.is-active, toggled by the JS onUpdate) is full opacity. The JS no longer * forces an inline opacity:1 on every panel (that override is what made the * peeking/inactive panels render full-bright). Desktop-pinned only — mobile * Swiper never adds .is-pinned, so its slides are unaffected. */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel { opacity: 0.3; transition: opacity 0.35s ease; } .atsr-rpl-pinned.is-pinned .atsr-rpl-panel.is-active { opacity: 1 !important; } /* ---- Short-viewport compaction (≤ 840px tall) ---- * Laptops at 768/800px tall lack room for the full cards row + panel content, * so the panel content overflowed. (Previously "solved" with overflow-y:auto, * which created a scroll trap that clipped the heading off the top.) Instead, * reclaim vertical space: shrink the cards row (icon + description), tighten * gaps and fonts so all four panels fit without scrolling. * Verified live at 1366×768 and 1280×800 — all 4 panels fit (scrollHeight ≤ * panel height). Below ~768 the tallest panel clips a few px at the BOTTOM * only; the heading/title is always visible. */ @media (max-height: 840px) { .atsr-rpl-pinned.is-pinned .atsr-rpl-panel { padding: 8px 16px !important; } .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .e-con { gap: 6px !important; --container-widget-gap: 6px !important; } .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .elementor-icon-list-items { gap: 3px !important; } .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .elementor-text-editor p { font-size: 13px !important; line-height: 1.4 !important; } .atsr-rpl-pinned.is-pinned .atsr-rpl-panel > .e-con.e-child:not(:last-child), .atsr-rpl-pinned.is-pinned .atsr-rpl-panel > .e-con-inner > .e-con.e-child:not(:last-child) { padding-top: 14px !important; } .atsr-rpl-pinned.is-pinned .atsr-step-cards-row { padding: 2px 0 0 0 !important; } .atsr-rpl-pinned.is-pinned .atsr-step-card { padding: 8px 16px !important; gap: 2px !important; } .atsr-rpl-pinned.is-pinned .atsr-step-card .elementor-widget-image img { width: 30px !important; height: 30px !important; } .atsr-rpl-pinned.is-pinned .atsr-step-card .elementor-widget-text-editor:not(.atsr-step-number), .atsr-rpl-pinned.is-pinned .atsr-step-card .elementor-widget-text-editor:not(.atsr-step-number) * { font-size: 11px !important; line-height: 1.25 !important; } } /* Panel inner container — fill panel height, let Elementor's own * two-column row layout handle content arrangement naturally. * Uses descendant selector (not >) because panels may be e-con-full * containers without a direct .e-con-inner child. The first .e-con-inner * could be inside a nested column. */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .e-con-inner { max-width: 100% !important; width: 100% !important; min-height: 100% !important; /* visible (was hidden) so the PANEL handles overflow via overflow-y:auto — * otherwise the inner clips the content before the panel can scroll it. */ overflow: visible !important; } /* --- Compact typography inside panels when pinned --- * Reduces font sizes, gaps, and margins so all content fits * within the viewport-height panel without needing a scrollbar. */ /* Kill default Elementor widget bottom margins */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .elementor-widget { margin-bottom: 0 !important; } /* Tighter gaps inside panel child containers */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .e-con { gap: 8px !important; --container-widget-gap: 8px !important; } /* Panel body text — compact line height */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .elementor-text-editor p { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 2px !important; } /* Icon lists inside panels — tighter spacing */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .elementor-icon-list-items { gap: 4px !important; } .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .elementor-icon-list-text { font-size: 13px !important; line-height: 1.4 !important; } /* Progress bars inside panels (Step 3) — compact height */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .elementor-progress-wrapper { height: auto !important; margin-bottom: 4px !important; } .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .elementor-progress-bar { height: 6px !important; } /* Panel CTA buttons — compact padding */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .elementor-button { padding: 10px 24px !important; font-size: 14px !important; } /* Panel child containers — fill available height so * two columns stretch evenly and content distributes properly */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel .e-con.e-child { min-height: 0 !important; --min-height: 0px !important; } /* --- Panel columns: TOP-align so the watermark number + heading line up --- * The panel itself is the 2-column flex ROW (left text col + right sidebar) * and defaults to align-items:center. Each panel's left column is a different * height (more/fewer bullets, longer copy), so centering makes the watermark * number + heading start at a DIFFERENT vertical offset per panel — they * visibly jump as you slide between steps. align-items:flex-start tops them * out. Verified live: number/title top identical on all 4 panels (spread 0). * The sidebar card uses height:100% so it still fills regardless. */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel { align-items: flex-start !important; } /* --- Left column top offset: align watermark/heading with the right card's * header text + leave breathing room. * align-items:flex-start tops BOTH columns at the panel padding edge, but the * right consultation card has its own ~26px internal top padding before its * "Book Your Free Consultation" header — so the left number/heading read ~26px * HIGHER and look flush against the top with no breathing room. Pad the left * column down by the same amount so the left heading lines up with the right * card header. Verified live (1440×900): num top = right header top = 38px. * Excludes the sidebar (:last-child) so the card itself stays full-height. */ .atsr-rpl-pinned.is-pinned .atsr-rpl-panel > .e-con.e-child:not(:last-child), .atsr-rpl-pinned.is-pinned .atsr-rpl-panel > .e-con-inner > .e-con.e-child:not(:last-child) { padding-top: 26px !important; } /* --- Wide-screen column fill (>1440px) ------------------------------------- * The panel itself is the 2-column flex ROW; its columns are direct .e-con.e-child * children. Above 1440px the JS panel width grows past the natural content width. * The previous attempt capped the text column at 720px and centred the row — on * screens wider than ~2000px that left big empty side BANDS (the reported "panel * spacing" bug, verified live at 2560px: text col stuck at 720 while the card was * ~965, centred, ~150px dead strips each side). Fix: let BOTH columns fill the * panel equally (flex 1 1 0) so the content always spans the panel — balanced * 50/50, no dead band, no centre void. Below 1440px the panel is already ≈ content * width (Bug 6 peek 0.08), so this block stays inert. */ @media (min-width: 1441px) { .atsr-rpl-pinned.is-pinned .atsr-rpl-panel { justify-content: center !important; gap: clamp(40px, 3vw, 72px) !important; } .atsr-rpl-pinned.is-pinned .atsr-rpl-panel > .e-con.e-child:not(:last-child), .atsr-rpl-pinned.is-pinned .atsr-rpl-panel > .e-con.e-child:last-child { flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; } } /* Elementor page wrapper + ancestors of the RPL section — keep overflow * visible. v9 pins via position:fixed (ancestor overflow can't clip a fixed * element), so this is now only defensive against an ancestor clipping the * section's own horizontal panel track. Harmless to keep. */ .elementor.elementor-36, .e-con.e-parent:has(.atsr-rpl-process), .e-con.e-parent:has(.atsr-rpl-pinned) { overflow: visible !important; } /* Force boxed child containers to full width inside the RPL section. */ .atsr-rpl-process > .e-con-boxed, .atsr-rpl-process > .e-con-boxed > .e-con-inner, .atsr-rpl-pinned > .e-con-boxed, .atsr-rpl-pinned > .e-con-boxed > .e-con-inner { max-width: 100% !important; width: 100% !important; } /* Horizontal track holding all 4 detail panels. * gap: 0 — panels are flush, overflow-x:clip hides offscreen ones. */ .atsr-rpl-panels { display: flex; width: max-content; gap: 0; will-change: transform; } /* Each detail panel — one slide width. * Width uses --atsr-panel-w CSS var set by JS (= section.clientWidth). * NOT 100vw — that includes the scrollbar width (14px overflow). * NOT 100% — that's relative to track parent (= 4 × panel width). * JS sets --atsr-panel-w on .atsr-rpl-pinned at boot + onRefresh. * * IMPORTANT: No fixed height or clamp here. The pinned state uses * flex: 1 from parents to fill available space. The non-pinned state * uses auto height so content determines size naturally. */ .atsr-rpl-panel { flex: 0 0 var(--atsr-panel-w, 100%) !important; width: var(--atsr-panel-w, 100%) !important; max-width: var(--atsr-panel-w, 100%) !important; min-height: 0 !important; --min-height: 0px !important; overflow: hidden; border: 1px solid #E2E5EA; border-radius: 16px; padding: 32px; position: relative; box-sizing: border-box; } /* Panel inner content — keep boxed at Figma design width. * Uses descendant selector (not >) — panels may be e-con-full. */ .atsr-rpl-panel .e-con-inner { max-width: 1291px !important; margin-left: auto !important; margin-right: auto !important; } /* --- Step cards (top 4 clickable cards) --- * Base styles moved from Elementor custom CSS to theme for single source of truth. * flex: 1 1 0 + min-width:0 forces ALL cards to equal width regardless of content. * (Old flex: 1 0 0 let longer-content cards stay wider — Step 4 was wider.) */ .atsr-step-card { background: #FFFFFF; border-radius: 8px; padding: 32px; box-shadow: 0px 16px 32px 0px rgba(12, 14, 58, 0.04); flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden; word-wrap: break-word; cursor: pointer; transition: border-color 0.3s ease, box-shadow 0.3s ease; border: 1px solid transparent !important; box-sizing: border-box; } /* Responsive: smaller desktops (1024–1400px) — reduce padding, keep cards compact */ @media (min-width: 1025px) and (max-width: 1400px) { .atsr-step-card { padding: 20px 16px; } } .atsr-step-card:hover { box-shadow: 0 16px 32px rgba(12, 14, 58, 0.08) !important; } /* Step number text — default state with full font styling. * Matches the Elementor per-widget custom CSS so those can be removed. * -webkit-text-fill-color is set explicitly so the active state * can override it to transparent for the gradient effect. */ .atsr-step-number, .atsr-step-number p { font-family: 'Host Grotesk', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #1A4D4D !important; -webkit-text-fill-color: #1A4D4D !important; transition: all 0.3s ease; } /* Active step number — gradient text. * Must target every possible inner element because Elementor wraps * text-editor content in

tags (and optionally .elementor-widget-container * / .elementor-text-editor). background-clip:text on the outer wrapper * alone doesn't reliably clip to nested child text in all browsers. */ .atsr-step-card.active .atsr-step-number, .atsr-step-card.active .atsr-step-number p, .atsr-step-card.active .atsr-step-number .elementor-widget-container, .atsr-step-card.active .atsr-step-number .elementor-text-editor, .atsr-step-card.active .atsr-step-number .elementor-text-editor p, .atsr-rto-step-card.active .atsr-step-number, .atsr-rto-step-card.active .atsr-step-number p, .atsr-rto-step-card.active .atsr-step-number .elementor-widget-container, .atsr-rto-step-card.active .atsr-step-number .elementor-text-editor, .atsr-rto-step-card.active .atsr-step-number .elementor-text-editor p { background: linear-gradient(90deg, #23E6A5 0%, #CDFF6E 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; color: transparent !important; } /* Active step card — GRADIENT border + subtle glow. * Double-background technique: gradient border compatible with border-radius. * Layer 1 (padding-box): white covers content. Layer 2 (border-box): gradient. * Specificity 0,0,3,0 beats Elementor's 0,0,2,0 per-widget CSS. */ .atsr-rpl-process .atsr-step-card.active, .atsr-rpl-pinned .atsr-step-card.active { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #23E6A5, #CDFF6E) border-box !important; border: 1px solid transparent !important; border-radius: 8px !important; box-shadow: 0 0 16px rgba(35, 230, 165, 0.15) !important; } /* --- Step cards row — full-width flex container for equal-width cards. * Forces nowrap + gap so all 4 cards share space evenly. * Overrides Elementor's e-con-boxed max-width constraint. */ .atsr-step-cards-row, .atsr-step-cards-row > .e-con-inner { max-width: 100% !important; width: 100% !important; display: flex !important; flex-wrap: nowrap !important; gap: 24px !important; } /* --- Content wrapper — replaces duplicate atsr-rpl-process on inner container. * Add class "atsr-rpl-content" to container 138e49f (holds progress bar + panels) * and REMOVE the duplicate atsr-rpl-process from it. --- */ .atsr-rpl-content { width: 100% !important; } /* ── FAQ accordion (shortcode) — card/icon restyle ── * Overrides the inline shortcode CSS's base look for .atsr-faq-item / * .atsr-faq-question / .atsr-faq-chevron. !important required to beat the * inline