Global Styles

        <link rel="stylesheet" href="https://opensourcetemple.com/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css">       <ul>
                        <li>
                                        <a href="#colors">
                                        Colors
                                        </a>
                                </li>
                            <li>
                                        <a href="#fonts">
                                        Fonts
                                        </a>
                                </li>
                            <li>
                                        <a href="#buttons">
                                        buttons
                                        </a>
                                </li>
                    </ul>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38"><path d="M15.954 27.265a2.394 2.394 0 0 1-1.164.424l.025.774h7.667v-.769a2.5 2.5 0 0 1-1.178-.493c-.212-.197-.316-.65-.316-1.35V15.41h-6.173v.77c.479.039.934.223 1.307.527.26.395.376.87.325 1.34v7.695a1.996 1.996 0 0 1-.493 1.523Zm1.788-18.083a2.402 2.402 0 0 0-.807.548v-.02a2.402 2.402 0 0 0-.73 1.785 2.408 2.408 0 0 0 .73 1.77 2.402 2.402 0 0 0 1.765.73 2.394 2.394 0 0 0 1.756-.73 2.421 2.421 0 0 0 .73-1.77 2.42 2.42 0 0 0-.73-1.765A2.396 2.396 0 0 0 18.7 9a2.4 2.4 0 0 0-.958.182Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M38 19c0 10.493-8.507 19-19 19S0 29.493 0 19 8.507 0 19 0s19 8.507 19 19Zm-1.5 0c0 9.665-7.835 17.5-17.5 17.5S1.5 28.665 1.5 19 9.335 1.5 19 1.5 36.5 9.335 36.5 19Z"></path></svg>            
    <p>This page previews Global Fonts and Colors for this Kit. Changes made in Site Settings will be displayed here.</p>       
        <h2>Global Colors</h2>      
        <h2>SYSTEM</h2>     
        <style>/*! elementor - v3.19.0 - 28-02-2024 */

.elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#0c0d0e;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{margin:0 var(--divider-element-spacing);flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:"";border-block-end:0;flex-grow:1;border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider--element-align-start .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-start .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-start .elementor-divider__element{margin-inline-start:0}.elementor-widget-divider--element-align-end .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-end .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-end .elementor-divider__element{margin-inline-end:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%);--flex-grow:var(--container-widget-flex-grow)}

Primary

Secondary

Body text

accent

custom

BG kIt

Blue Element

Blue Light BG

White Element

Transparent

Overlay bg

Global Fonts

SYSTEM

Primary

abcd

        Secondary<p>abcd</p>        
        body text<p>Looking to change global styles?<br>Click on top left menu in sidebar<br>and then select Site Settings.</p>     
        accent text<p>abcd</p>      
        <h2>custom</h2>     
        404 title<p>abcd</p>        
        Hero headline<p>abcd</p>        
        Box Title<p>abcd</p>        
        Subtitle<p>abcd</p>     
        Special  Title<p>abcd</p>       
        Body Text Italic Capitalize<p>abcd</p>      
        Accent Text Underline<p>abcd</p>        
        <h2>Buttons & Links</h2>        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38"><path d="M15.954 27.265a2.394 2.394 0 0 1-1.164.424l.025.774h7.667v-.769a2.5 2.5 0 0 1-1.178-.493c-.212-.197-.316-.65-.316-1.35V15.41h-6.173v.77c.479.039.934.223 1.307.527.26.395.376.87.325 1.34v7.695a1.996 1.996 0 0 1-.493 1.523Zm1.788-18.083a2.402 2.402 0 0 0-.807.548v-.02a2.402 2.402 0 0 0-.73 1.785 2.408 2.408 0 0 0 .73 1.77 2.402 2.402 0 0 0 1.765.73 2.394 2.394 0 0 0 1.756-.73 2.421 2.421 0 0 0 .73-1.77 2.42 2.42 0 0 0-.73-1.765A2.396 2.396 0 0 0 18.7 9a2.4 2.4 0 0 0-.958.182Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M38 19c0 10.493-8.507 19-19 19S0 29.493 0 19 8.507 0 19 0s19 8.507 19 19Zm-1.5 0c0 9.665-7.835 17.5-17.5 17.5S1.5 28.665 1.5 19 9.335 1.5 19 1.5 36.5 9.335 36.5 19Z"></path></svg>            
    <p>Buttons and links inherit their style from Global Fonts and Colors settings in Site Settings.</p>        
        <a href="#">
                    Main CTA button
                </a>
        <a href="#">
                    Underline Accent
                </a>
    This is <a href="#">Hyperlink</a>