/* ============================================================ SKILL STEPS DESIGN SYSTEM Dynamic colour system based on Developmental Area taxonomy ============================================================ */ /* ------------------------------------------------------------ 1. GLOBAL COLOUR VARIABLES ------------------------------------------------------------ */ :root { --auditory: #E84A3C; --motor: #EC407A; --phonological-awareness: #6EC6FF; --expressive-language: #4CAF50; --pragmatic: #8E44AD; --receptive-language: #F28C2A; --speech: #4ECEDB; --symbolic: #3F51B5; --visual: #9C27B0; --vocabulary: #F2C230; } /* ------------------------------------------------------------ 2. MAP BODY CLASSES → ACTIVE COLOUR (Your MU‑plugin adds dev-area-{slug} to ) ------------------------------------------------------------ */ body.dev-area-auditory { --active-colour: var(--auditory); } body.dev-area-motor { --active-colour: var(--motor); } body.dev-area-phonological-awareness { --active-colour: var(--phonological-awareness); } body.dev-area-expressive-language { --active-colour: var(--expressive-language); } body.dev-area-pragmatic { --active-colour: var(--pragmatic); } body.dev-area-receptive-language { --active-colour: var(--receptive-language); } body.dev-area-speech { --active-colour: var(--speech); } body.dev-area-symbolic { --active-colour: var(--symbolic); } body.dev-area-visual { --active-colour: var(--visual); } body.dev-area-vocabulary { --active-colour: var(--vocabulary); } /* ------------------------------------------------------------ 3. HEADER STYLING (Add class="skill-step-header" to your Divi header section) ------------------------------------------------------------ */ .skill-step-header { background-color: var(--active-colour); color: #fff; padding: 40px 0; } .skill-step-header h1, .skill-step-header h2, .skill-step-header h3, .skill-step-header p { color: #fff !important; } /* ------------------------------------------------------------ 4. UTILITY CLASSES Reusable across Divi modules, rows, sections, etc. ------------------------------------------------------------ */ /* Background highlight */ .ss-bg { background-color: var(--active-colour) !important; color: #fff !important; } /* Border highlight */ .ss-border { border-color: var(--active-colour) !important; } /* Text highlight */ .ss-text { color: var(--active-colour) !important; } /* Button highlight */ .ss-button { background-color: var(--active-colour) !important; border-color: var(--active-colour) !important; color: #fff !important; } /* Icon highlight */ .ss-icon { color: var(--active-colour) !important; } /* ------------------------------------------------------------ 5. OPTIONAL: CARD / BOX COMPONENTS (Useful for Downloads, Additional Reading, CPD Videos) ------------------------------------------------------------ */ .ss-card { border-left: 6px solid var(--active-colour); padding: 20px; background: #fafafa; margin-bottom: 20px; border-radius: 6px; } .ss-card h3, .ss-card h4 { color: var(--active-colour); } /* ------------------------------------------------------------ 6. OPTIONAL: BADGE / TAG STYLING (Useful for Developmental Area or Skill Strand labels) ------------------------------------------------------------ */ .ss-badge { display: inline-block; background: var(--active-colour); color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; } /* ------------------------------------------------------------ 7. RESPONSIVE TWEAKS ------------------------------------------------------------ */ @media (max-width: 768px) { .skill-step-header { padding: 25px 0; } .ss-card { padding: 15px; } } /* ============================================================ AUTO TWO-COLUMN LAYOUT - FIX FOR BOLD PARAGRAPH BREAKS ============================================================ */ .skill-step-content { column-count: 2; column-gap: 40px; column-fill: balance; } /* Target bold paragraphs acting as headings */ .skill-step-content p:has(strong) { break-after: avoid-column; break-inside: avoid; margin-bottom: 5px; /* Keeps it tight to the following list */ } /* Ensure headings also stay with their content */ .skill-step-content h2, .skill-step-content h3, .skill-step-content h4 { break-after: avoid-column; break-inside: avoid; } /* Ensure lists and paragraphs don't split internally */ .skill-step-content ul, .skill-step-content ol, .skill-step-content p { break-inside: avoid; display: block; } /* Mobile fallback */ @media (max-width: 980px) { .skill-step-content { column-count: 1; } } /* ============================================================ RESOURCE BLOCK (3-COLUMN COMPONENT SYSTEM) ============================================================ */ /* Shared card styling for each column */ .ss-resource-block { padding: 20px 20px 0 20px; background: #fff; border-radius: 6px; margin-bottom: 20px; } /* Icon styling */ body[class*="dev-area-"] .ss-resource-block .et_pb_main_blurb_image .et-pb-icon { color: var(--active-colour) !important; font-size: 42px; margin-bottom: 10px; } /* Title styling */ .ss-resource-block h4, .ss-resource-block h3 { margin-top: 10px; margin-bottom: 15px; font-weight: 600; } /* Resource list items */ .ss-resource-item { padding: 8px 0; border-bottom: 1px solid #eee; } .ss-resource-item:last-child { border-bottom: none; } /* Center-align resource items (downloads + further reading) */ .ss-resource-item { text-align: center; } /* Links inside resource items */ .ss-resource-item a { color: inherit; font-weight: 500; text-decoration: none; font-size:1em; } .ss-resource-item a:hover { text-decoration: underline; } .ss-resource-item .preset--module--divi-button--default_wrapper{ margin-right:0!important } /* ============================================================ RESOURCE COLUMNS — FULL HEIGHT WHITE BACKGROUND ============================================================ */ /* Make the row use equal-height columns */ .ss-card .et_pb_column { display: flex; flex-direction: column; } /* White background for each column */ .ss-resource-column { background: #fff; padding: 20px; border-radius: 6px; } /* Ensure the content inside stretches to fill height */ .ss-resource-column .et_pb_module { flex: 0 0 auto; } /* Add spacing between the blurb and the content */ .ss-resource-column .ss-resource-block { margin-bottom: 20px; } /* Make Blurb titles inherit normal text colour */ .ss-resource-block h3, .ss-resource-block h4 { color: inherit !important; } /* ============================================================ CPD VIDEO GRID (Optimized for Centered Orphans) ============================================================ */ .cpd-video-grid { display: flex; flex-wrap: wrap; gap: 30px; margin: 0; justify-content: center; /* This centers the odd video at the bottom */ } .cpd-video-grid-item { /* flex: grow | shrink | basis */ flex: 0 0 calc(50% - 15px); box-sizing: border-box; max-width: calc(50% - 15px); /* Prevents stretching on odd items */ } /* Ensure thumbnails scale nicely */ .cpd-video-grid-item .yt-lightbox-wrapper { width: 100%; display: block; } .cpd-video-title { font-weight: 600; margin-top: 10px; text-align: center; color: inherit; } /* Lightbox content container */ .yt-lightbox-content { position: relative; width: 90%; max-width: 900px; } /* 16:9 responsive wrapper */ .yt-lightbox-iframe-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000; } /* Make iframe fill the 16:9 box */ .yt-lightbox-iframe-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 6px; } /* Mobile: stack videos full width */ @media (max-width: 980px) { .cpd-video-grid-item { flex: 0 0 100%; max-width: 100%; } }