Javier Rodriguez

Menu

CSS 03 Base Styling (B-S-E)

FRAMEWORK 2024-07-07

03-00 Colors (BS0)

Last Updated 2024-07-18

/****************************************************************************
*****************************************************************************
03 Base Styling (BSE)
*****************************************************************************
****************************************************************************/

/*---------------------------------------------------------------------------
03-00 Colors (BS0) FRAMEWORK 2024-07-19
---------------------------------------------------------------------------*/

/* Text Colors
-----------------------------------------------*/

/* Color 1 */
.clr-1, .has-clr-1-color { color: var(--clr-1) !important; }

/* Color 2 */
.clr-2, .has-clr-2-color { color: var(--clr-2) !important; }

/* Color 3 */
.clr-3, .has-clr-3-color { color: var(--clr-3) !important; }

/* Color 4 */
.clr-4, .has-clr-4-color { color: var(--clr-4) !important; }

/* Color Black */
.clr-white, .has-white-color { color: var(--clr-white) !important; }

/* Color White */
.clr-black, .has-black-color { color: var(--clr-black) !important; }

/* Background Colors
-----------------------------------------------*/
/* Color 1 */
.bkg-1, .has-clr-1-background-color { background-color: var(--clr-1) !important; }

    /* Color 1 Opacity */
    .bkg-1-op, .has-clr-1-op-background-color { background-color: var(--clr-1-op) !important; }

    /* Color 1 Gradient */
    .bkg-1-grad{ background: linear-gradient( 90deg, var(--clr-1-light), var(--clr-1-dark) ); }

    /* Color 1 Gradient Opacity */
    .bkg-1-grad-op{ background: linear-gradient( 90deg, var(--clr-1-light-op), var(--clr-1-dark-op) ); }

/* Color 2 */
.bkg-2, .has-clr-2-background-color { background-color: var(--clr-2) !important; }

    /* Color 2 Opacity */
    .bkg-2-op, .has-clr-2-op-background-color { background-color: var(--clr-2-op) !important; }

    /* Color 2 Gradient */
    .bkg-2-grad{ background: linear-gradient( 90deg, var(--clr-2-light), var(--clr-2-dark) ); }

    /* Color 2 Gradient Opacity */
    .bkg-2-grad-op{ background: linear-gradient( 90deg, var(--clr-2-light-op), var(--clr-2-dark-op) ); }

/* Color 3 */
.bkg-3, .has-clr-3-background-color { background-color: var(--clr-3) !important; }

    /* Color 3 Opacity */
    .bkg-3-op, .has-clr-3-op-background-color { background-color: var(--clr-3-op) !important; }

    /* Color 3 Gradient */
    .bkg-3-grad{ background: linear-gradient( 90deg, var(--clr-3-light), var(--clr-3-dark) ); }

    /* Color 3 Gradient Opacity */
    .bkg-3-grad-op{ background: linear-gradient( 90deg, var(--clr-3-light-op), var(--clr-3-dark-op) ); }

/* Color 3 Dark */
.bkg-3-dark, .has-clr-3-dark-background-color { background-color: var(--clr-3-dark) !important; }

/* Color 4 */
.bkg-4, .has-clr-4-background-color { background-color: var(--clr-4) !important; }

    /* Color 4 Opacity */
    .bkg-4-op, .has-clr-4-op-background-color { background-color: var(--clr-4-op) !important; }

    /* Color 4 Gradient */
    .bkg-4-grad{ background: linear-gradient( 90deg, var(--clr-4-light), var(--clr-4-dark) ); }

    /* Color 4 Gradient Opacity */
    .bkg-4-grad-op{ background: linear-gradient( 90deg, var(--clr-4-light-op), var(--clr-4-dark-op) ); }


/* Color Black */
.bkg-black, .has-clr-black-background-color{ background-color: var(--clr-black) !important; }

/* Color White */
.bkg-white, .has-clr-white-background-color  { background-color: var(--clr-white) !important; }
.bkg-white-child > :first-child { background-color: var(--clr-white) !important; }

03-01 Typography (BST)

Last Updated 2024-08-24

Heading 1 – h1, .h1

Heading 2 – h2, .h2

Heading 3 – h3, .h3

Heading 4 – h4, .h4

Heading 5 – h5, .h5
Heading 6 (Also Used for Captions/ Figure Captions)
Body Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

Lead Text

This is some lead text. Slightly more important

Fine Print

This is some boring legal text. So its Smaller to not get in the way

/*---------------------------------------------------------------------------
03-01 Typography (BST) FRAMEWORK 2024-05-04
---------------------------------------------------------------------------*/

/* Lead Text & Fine Print Text */
.lead { font-size: var(--leadsize); line-height: var(--leadlineHeight); margin-bottom: 1.2rem; }
.fineprint { font-size: var(--fineprint); line-height: var(--fineprintlineHeight);  }

/* Headings */    
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--headingfont); font-optical-sizing: auto; font-weight: var(--headingfont-weight); font-style: var(--headingfont-style); letter-spacing: var(--letter_spacing-contract);
    color: var(--clr-black);
    line-height: 1; margin: 0 0 1rem 0;
}

.head-2 { font-family: var(--heading2font); font-optical-sizing: auto; font-weight: var(--heading2font-weight); font-style: var(--heading2font-style); letter-spacing: var(--letter_spacing-contract); }
.head-3 { font-family: var(--heading3font); font-optical-sizing: auto; font-weight: var(--heading3font-weight); font-style: var(--heading3font-style); letter-spacing: var(--letter_spacing-contract); }

h1, .h1 { font-size: var(--h1-size); margin-left: calc(var(--h1-size) / -22); word-break: break-word; }
h2, .h2 { font-size: var(--h2-size); margin-left: calc(var(--h2-size) / -26); }
h3, .h3 { font-size: var(--h3-size); }
h4, .h4 { font-size: var(--h4-size); }
h5, .h5 { font-size: var(--h5-size); margin-bottom: 1rem; }
h6, .h6 { font-size: var(--h6-size); margin-bottom: 1rem; font-weight: 700; color: var(--clr-black); text-transform: uppercase; letter-spacing: var(--letter_spacing-expand); }

.legal-content h1 { font-size: calc(var(--h1-size) * 1); }
.legal-content h2 { font-size: calc(var(--h2-size) * 0.8); }
.legal-content h3 { font-size: calc(var(--h3-size) * 0.75); }
.legal-content h4 { font-size: calc(var(--h4-size) * 0.75); }

/* Header top space after Paragraph or Lists applied to Heading after "+" */
p + h1, ul + h1, ol + h1  {  padding-top: 2rem; }
h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6 {  padding-top: .75rem; }

p + h2, ul + h2, ol + h2,
p + h3, ul + h3, ol + h3,
p + h4, ul + h4, ol + h4,
p + h5, ul + h5, ol + h5,
p + h6, ul + h6, ol + h6 {  padding-top: .5rem; }

/* Light Text */
.light h1, .light h2, .light h3, .light h4, .light h5, .light h6 { color: var(--clr-white) !important; text-shadow: var(--shadow-text); }
.light p, .light li, .light li:after { color: var(--clr-white) !important; }
.light hr, hr.light { background-color: var(--clr-1) !important; }
.light b, b.light, .light strong, strong.light , .light .bold, .light.bold  { color: var(--clr-white); }

03-02 Links (BSA)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
03-02 Links (BSA) FRAMEWORK 2024-05-05
---------------------------------------------------------------------------*/
a, a:visited { transition: var(--transitions); color: var(--clr-2); text-decoration: none; }
a:hover, a:focus, a:active { color: var(--clr-1-dark); color: var(--clr-1-dark); }
a, a:hover, a:visited, a:active { outline: none; }
a p, a p:visited, a p:hover, a p:focus, a p:active { color: var(--clr-body); }

.light a, .light a:visited { color: var(--clr-white); }
.light a:hover, .light a:focus, .light a:active { color: var(--clr-white); opacity: 0.7 }
.light a p, .light a p:visited, .light a p:hover, .light a p:focus, .light a p:active { color: var(--clr-white); }

03-03 Buttons (BSB)

Last Updated 2024-06-24

Default Button

/*---------------------------------------------------------------------------
03-03 Buttons (BSB) 
---------------------------------------------------------------------------*/

/* Button General & Helpers FRAMEWORK 2024-05-05
-----------------------------------------------*/
/* Button Resets */
button { outline: none; }
.wp-block-buttons-is-layout-flex { display: flex; flex-wrap: wrap; gap: .5rem; }
.wp-block-buttons > .wp-block-button a { display: inline-block; margin: 0 !important; }

/* Button Sizing */
.button.smallbtn, .wp-block-button.smallbtn .wp-block-button__link { font-size: 0.75rem; }
.button.largebtn, .wp-block-button.largebtn .wp-block-button__link { font-size: 2rem; }
.button.expanded, .wp-block-button.expanded, .wp-block-button.expanded .wp-block-button__link { display: block; width: 100%; margin-right: 0; margin-left: 0; }


/* Button Default FRAMEWORK 2024-05-05
-----------------------------------------------*/
:root { --button_brdr: 3px; }
    @media screen and (max-width: 700px) {
        :root { --button_brdr: 3px; }
    }
.button.bkg-1, .wp-block-button__link.has-clr-1-background-color,
.button, .wp-block-file a.wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="submit" i],

    /* VENDOR BUTTONS */
        /* Woocommerce Base*/ .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
        /* Woocommerce Alt*/  .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
        /* Woocommerce Barn 2 Table products */.wc-product-table-controls .wc-product-table-multi-form input[type=submit],
        /* Gut */ a.wp-block-button__link,
        /* Wpsl Search page */ #wpsl-search-btn,
        /* Message Plugin  */
        .fep-button[type="submit"]

{   
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 .7em 0;
    padding: .7em 1.2em !important;
    text-transform: uppercase !important;
    font-family: var(--bodyfont) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1 !important;
    font-size: 1rem !important;
    text-align: center;
    cursor: pointer;
    background-color: var(--clr-1) !important;
    background-image: linear-gradient( 90deg, var(--clr-1-light),var(--clr-1-dark) ) !important;
    color: var(--clr-white) !important;
    border: none !important;;
    border-radius: 9999px !important;
    transition: var(--transitions_slower);
    text-shadow: var(--shadow-text);
}

.button:hover,.button:focus, .wp-block-file a.wp-block-file__button:hover,.wp-block-file a.wp-block-file__button:focus,
button:hover,button:active, button:focus,
input[type="button"]:hover,input[type="button"]:active, input[type="button"]:focus,
input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus,
input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus
input[type="submit" i]:hover , input[type="submit" i]:active , input[type="submit" i]:focus
    /* VENDOR BUTTONS */
        /* Woocommerce Base*/ .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
        /* Woocommerce Alt*/  .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
        /* Woocommerce Barn 2 Table products */ .wc-product-table-controls .wc-product-table-multi-form input[type=submit]:hover,
        /* Gut */ a.wp-block-button__link:hover,
        /* Message Plugin  */
        .fep-button[type="submit"]:hover
 {   
    background-color: var(--clr-1);
    background-image: linear-gradient( 90deg, var(--clr-1-light),var(--clr-1-dark) ); 
    opacity: .6; 
    color: var(--clr-white); !important; 
    transition: var(--transitions_slower);
}



/* Button Disabled FRAMEWORK 2024-05-05
-----------------------------------------------*/
    /* VENDOR BUTTONS */
        /* Woocommerce */
        .woocommerce #respond input#submit.disabled, 
        .woocommerce #respond input#submit:disabled, 
        .woocommerce #respond input#submit:disabled[disabled], 
        .woocommerce a.button.disabled, .woocommerce a.button:disabled, 
        .woocommerce a.button:disabled[disabled], 
        .woocommerce button.button.disabled, .woocommerce button.button:disabled, 
        .woocommerce button.button:disabled[disabled], 
        .woocommerce input.button.disabled, 
        .woocommerce input.button:disabled, 
        .woocommerce input.button:disabled[disabled] 
{
    color: inherit; cursor: not-allowed; opacity: .5; padding: .618em 1em; padding: .4rem 1.8rem; font-size: 1rem; color: #fff; 
}

Solid Buttons

/* Solid Buttons FRAMEWORK 2024-05-05
-----------------------------------------------*/

/* Color 2 Button */
.button.bkg-2, 
.wp-block-button__link.has-clr-2-background-color { 
    color: var(--clr-white) !important;  
    background-image: linear-gradient( 90deg, var(--clr-2-light),var(--clr-2-dark) ) !important;

}
    .button.bkg-2:hover, 
    .wp-block-button__link.has-clr-2-background-color:hover, 
    .button.bkg-2:focus, 
    .wp-block-button__link.has-clr-2-background-color:focus { 
        background-image: linear-gradient( 90deg, var(--clr-2-light),var(--clr-2-dark) );
     }

/* Color White Button */
.button.bkg-white, 
.wp-block-button__link.has-white-background-color,
#wpsl-search-btn,
.wpsl-search-widget input[type="submit" i] { 
    color: var(--clr-2) !important; 
    background-image: none !important; 
    background-color: var(--clr-white) !important; 
    text-shadow: none;

}
    .button.bkg-white:hover, 
    .button.bkg-white:focus, 
    .wp-block-button__link.has-white-background-color:hover, 
    .wp-block-button__link.has-white-background-color:focus,
    #wpsl-search-btn:hover, #wpsl-search-btn:focus,
    .wpsl-search-widget input[type="submit" i]:hover, 
    .wpsl-search-widget input[type="submit" i]:focus {
        color: var(--clr-2) !important; 
        background-image: none !important; 
        background-color: var(--clr-white) !important;  
    }

/* Color Black Button */
.button.bkg-black, 
.wp-block-button__link.has-black-background-color { 
    color: var(--clr-white) !important; 
    background-image: none !important; 
    background-color: var(--clr-black) !important;  
}
    .button.bkg-black:hover, 
    .wp-block-button__link.has-black-background-color:hover, 
    .button.bkg-black:focus,
    .wp-block-button__link.has-black-background-color:focus { 
        color: var(--clr-white) !important; 
        background-image: none !important; 
        background-color: var(--clr-black) !important;  
    }

Hollow Buttons

/* Hollow Button FRAMEWORK 2024-05-05
-----------------------------------------------*/

/* Default Hollow Button */
.button.hollow, 
.is-style-outline > .wp-block-button__link, 
.wp-block-button__link.is-style-outline, 
.button.bkg-1.hollow, 
.is-style-outline > .wp-block-button__link.has-clr-1-color, 
.wp-block-button__link.has-clr-1-color.is-style-outline
.is-style-outline > .wp-block-button__link:not(.has-background), .wp-block-button__link.is-style-outline:not(.has-background),
.is-style-outline > .wp-block-button__link:not(.has-text-color), .wp-block-button__link.is-style-outline:not(.has-text-color) { 
    border: var(--button_brdr) solid !important; 
    background: transparent !important; 
    text-shadow: none;
    color: var(--clr-1) !important; 
    border-color: var(--clr-1) !important; 
    background: transparent !important;
    }
    .button.bkg-1.hollow:hover, 
    .button.bkg-1.hollow:focus, 
    .is-style-outline > .wp-block-button__link.has-clr-1-color:hover, 
    .is-style-outline > .wp-block-button__link.has-clr-1-color:focus, 
    .wp-block-button__link.has-clr-1-color.is-style-outline:hover,
    .wp-block-button__linkhas-clr-1-color.is-style-outline:focus {
        opacity: .25 !important; 
        color: var(--clr-1-hover) !important; 
        border-color: var(--clr-1-hover) !important; 
        background: transparent !important; }

/* Color 2 Hollow Button */
.button.bkg-2.hollow, 
.is-style-outline > .wp-block-button__link.has-clr-2-color, 
.wp-block-button__link.has-clr-2-color.is-style-outline { 
    color: var(--clr-2) !important; 
    border-color: var(--clr-2) !important; 
    background: transparent !important; 
}
    .button.bkg-2.hollow:hover, 
    .button.bkg-2.hollow:focus, 
    .is-style-outline>.wp-block-button__link.has-clr-2-color:hover,
    .is-style-outline>.wp-block-button__link.has-clr-2-color:focus,  
    .wp-block-button__link.has-clr-2-color.is-style-outline:hover,
    .wp-block-button__linkhas-clr-2-color.is-style-outline:focus { 
        color: var(--clr-2-hover) !important; 
        border-color: var(--clr-2-hover) !important; 
        background: transparent !important; 
    }

/* Color White Hollow Button */
.button.bkg-white.hollow, 
.is-style-outline > .wp-block-button__link.has-white-color,
.wp-block-button__link.has-white-color.is-style-outline { 
    color: var(--clr-white) !important; 
    border-color: var(--clr-white) !important; 
    background: transparent !important; 
}
.button.bkg-white.hollow:hover, 
.button.bkg-white.hollow:focus, 
.is-style-outline > .wp-block-button__link.has-white-color:hover,
.is-style-outline > .wp-block-button__link.has-white-color:focus,  
.wp-block-button__link.has-white-color.is-style-outline:hover,
.wp-block-button__linkhas-white-color.is-style-outline:focus { 
    color: var(--clr-white-hover) !important; 
    border-color: var(--clr-white-hover) !important; 
    background: transparent !important; 
}

/* Color Black Hollow Button */
.button.bkg-black.hollow, 
.is-style-outline>.wp-block-button__link.has-black-color, 
.wp-block-button__link.has-black-color.is-style-outline { 
    color: var(--clr-black) !important; 
    border-color: var(--clr-black) !important; 
    background: transparent !important; 
}
    .button.bkg-black.hollow:hover, 
    .button.bkg-black.hollow:focus, 
    .is-style-outline>.wp-block-button__link.has-black-color:hover, 
    .is-style-outline>.wp-block-button__link.has-black-color:focus, 
    .wp-block-button__link.has-black-color.is-style-outline:hover,
    .wp-block-button__linkhas-black-color.is-style-outline:focus { 
        color: var(--clr-black-hover) !important; 
        border-color: var(--clr-black-hover) !important; 
        background: transparent !important; 
    }

Minimal UI Button

/* Minimal UI Button 2024-05-05
-----------------------------------------------*/

    /* Default Button UI Stuing */
    .button_ui, .button_ui-child > a, .button_ui-child.is-style-outline > a.wp-block-button__link,

        /* VENDOR BUTTONS */
            /* Message Plugin */ 
            #fep-menu .fep-button, .fep-button, 
            a.fep-button:visited, .fep-button-active,
            /* Editor Buttons */
            .ed_button.button.button-small

    {   
        padding: .5em .7em !important;
        text-transform: uppercase !important;
        font-family: var(--bodyfont);
        font-weight: 700;
        font-style: normal;
        line-height: 1;
        font-size: 1rem !important;
        text-align: center;
        cursor: pointer;
        border-radius: 1rem !important;
        transition: var(--transitions);
        border: var(--button_brdr) solid !important; 
        background: transparent !important; 
        text-shadow: none;
        color: var(--clr-2) !important; 
        border-color: var(--clr-2) !important; 
        background: transparent !important;
    }

    .button_ui:hover, .button_ui:focus, .button_ui:active,
    .button_ui-child > a:hover, .button_ui-child > a:focus, .button_ui-child > a:active,
    .button_ui-child.is-style-outline > a.wp-block-button__link:hover, .button_ui-child.is-style-outline > a.wp-block-button__link:focus, .button_ui-child.is-style-outline > a.wp-block-button__link:active,
        
        /* VENDOR BUTTONS */
            /* Message Plugin */
            #fep-menu .fep-button:hover, .fep-button-active, a.fep-button-active:visited,
            /* Editor Buttons */
            .ed_button.button.button-small:hover
    {
        opacity: 1 !important;
        color: var(--clr-white) !important; 
        border-color: var(--clr-1) !important; 
        background: var(--clr-1) !important; }
    }

03-04 Forms (BSF)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
03-04 Forms (BSF) - Gravity Forms Integrated Disable theme - FRAMEWORK 2024-05-05
---------------------------------------------------------------------------*/

/* Form Variables
-----------------------------------------------*/
:root { 
    /* Base Fields */
    --form_field-margin_bottom: 0.3rem;
    --form_field-text_color: var(--clr-2);
    --form_field-placeholder_color: var(--clr-1);
    --form_field-background_color: rgba(0, 0, 100, 0.02);
    --form_field-border_thickness: 2px;
    --form_field-border_color: var(--clr-1);
    --form_field-border_radius: ;
    
    /* Base Fields FOCUS */
    --form_field-focus-text_color: var(--clr-2);
    --form_field-focus-background_color: var(--clr-white);
    --form_field-focus-border_color: var(--clr-2);

    /* Labels */
    --form_field-lable_color: var(--clr-2);
    --form_field-lable_option_color: var(--clr-2);

    /* Radio & Checkbox Field */
    --form_radiocheckbox-fontsize: 1.1rem; 
    --form_radiocheckbox-field_left_space: 2.25rem;
    --form_radiocheckbox-field_size: 1.75rem; 
    --form_radiocheckbox-field_border_radius: .35rem; 
    --form_radiocheckbox-field_border_thickness: 3px; 
    --form_radiocheckbox-field_color: var(--clr-1); 

    /* Radio & Checkbox Cheked */
    --form_radiocheckbox-input_size: 1.9rem; 
    --form_radiocheckbox-input_color: var(--clr-2);
}

/* Form Resets
------------------------------------------*/
/* Button Resets */
textarea, input, select { outline: none; }

/* Form Typography
------------------------------------------*/
form p  { margin-bottom: 15px; font-size: 1rem; color: var(--clr-2); box-sizing: border-box; font-family: var(--bodyfont); font-weight: var(--bodyfont-weight); font-style: var(--bodyfont-style); }
form label, form legend {
    font-family: var(--headingfont); font-weight: var(--headingfont-weight); font-style: var(--headingfont-style);
    line-height: .75;
    letter-spacing: 0.05em;
    color: var(--form_field-lable_color); 
    margin: 0;
}

/* Input Fields
------------------------------------------*/
input[type="text"], input[type="email"], input[type="url"],input[type="password"],input[type="search"],input[type="number"],input[type="tel"],input[type="range"], 
input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea ,
    
    /* Vendors Fields */
        /* Login Form */
        .xoo-aff-group input[type="text"], 
        .xoo-aff-group input[type="password"], 
        .xoo-aff-group input[type="email"], 
        .xoo-aff-group input[type="number"], 
        .xoo-aff-group select, 
        .xoo-aff-group select + .select2, 
        .xoo-aff-group input[type="tel"]
{ 
    width: 100%; padding: .5rem 1rem !important; 
    margin-bottom: var(--form_field-margin_bottom); 
    border-radius: var(--form_field-border_radius) !important; 
    border: none;
    border-bottom:  solid var(--form_field-border_thickness) var(--form_field-border_color);
    box-sizing: border-box;
    font-family: var(--bodyfont); font-weight: var(--bodyfont-weight); font-style: var(--bodyfont-style);
    font-size: 1.2rem !important;
    color: var(--form_field-text_color); 
    background-color: var(--form_field-background_color);
    box-shadow: none !important;
    transition: var(--transitions);
}

/* Input Focus
------------------------------------------*/
input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="number"]:focus,input[type="tel"]:focus,input[type="range"]:focus, input[type="date"]:focus,
input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus 
{ 
    background-color: var(--form_field-focus-background_color); 
    border: none;
    border-bottom: solid var(--form_field-border_thickness) var(--form_field-focus-border_color); 
    color: var(--form_field-focus-text_color);  }

/* Select Field
------------------------------------------*/
select { 
    border-radius: var(--form_radiocheckbox-field_border_radius);  
    border: solid var(--form_field-border_thickness) var(--form_field-border_color); 
    font-family: var(--bodyfont) !important; font-weight: var(--bodyfont-weight-bold) !important; font-style: var(--bodyfont-style);
    font-size: 1.2rem !important;
    color: var(--form_field-text_color); 
}
select:focus, select:focus-visible { 
    border-radius: var(--form_radiocheckbox-field_border_radius);
    border: solid var(--form_field-border_thickness) var(--form_field-focus-border_color) !important;
    box-shadow: none; }

/* Placeholder Text
------------------------------------------*/
::placeholder { color: var(--form_field-placeholder_color); font-family: var(--headingfont); font-weight: var(--headingfont-weight); font-style: var(--headingfont-style); letter-spacing: 0.03em; text-transform: uppercase; }

/* Gravity Forms Integration
------------------------------------------*/
.gform_wrapper .gfield_label,
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
    font-weight: var(--bodyfont-weight-bold);
    color: var(--clr-2);
    font-size: 1.2rem !important;
    font-family: var(--headingfont) !important;
    font-style: var(--headingfont-style) !important;
    margin-bottom: 0 !important;
}

.gform_wrapper input[type=submit] {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    border: none;
    padding: .7em 1.2em;
    line-height: auto;
}

/*  Gravity Forms Theme Styling - Hide Defaults */ 
.gform_wrapper input[type=radio], .gform_wrapper input[type=checkbox], 
.gfield_radio input[type=radio], .gfield_checkbox input[type=checkbox]
{ position: absolute; visibility: hidden; opacity: 0; height: 0; width: 0; }

/*  Gravity Forms Theme Styling - Spacing Resets */
.gform_wrapper.gravity-theme fieldset { border: none; display: block; margin: 0 0 var(--form_field-margin_bottom) 0; }
.gform_wrapper.gravity-theme fieldset, .gform_wrapper.gravity-theme legend { background: none; padding: 0; }
.gform_wrapper .ginput_container_radio, .gform_wrapper .ginput_container_checkbox { padding: 0; }

/* Radio & Checkbox
------------------------------------------*/

/* Radio & Checkbox Globals, Grid & Input Spacing */
.gform_wrapper .ginput_container_radio .gfield_radio,
.gform_wrapper .ginput_container_checkbox .gfield_checkbox 
{ display: grid !important; grid-gap: 0.5rem 1rem; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ) ; margin-top: 1rem; }
.gform_wrapper .gfield_radio div.gchoice, .gform_wrapper .gfield_checkbox div.gchoice
{ position: relative; cursor: pointer; display: block !important; padding: 0 0 0 var(--form_radiocheckbox-field_left_space) !important;  }
.gform_wrapper input[type=checkbox] + label,  .gform_wrapper input[type=radio] + label {
    font-size: var(--form_radiocheckbox-fontsize) !important;  
    color: var(--form_field-lable_option_color) !important;
    line-height: 1.4;
    vertical-align: top !important;
}

/* Radio & Checkbox Borders */
.gform_wrapper input[type=radio] + label:before, .gform_wrapper input[type=checkbox] + label:before { 
    display: block; content: ''; position: absolute; top: 0; left: 0; 
    height: var(--form_radiocheckbox-field_size); width: var(--form_radiocheckbox-field_size); 
    border: var(--form_radiocheckbox-field_border_thickness) solid var(--form_radiocheckbox-field_color);
}

/* Checkboxes */
.gform_wrapper input[type=checkbox]:checked + label:before { background: transparent;}
.gform_wrapper input[type=checkbox] + label:before { border-radius: var(--form_radiocheckbox-field_border_radius); }
.gform_wrapper input[type=checkbox] + label svg { display: none; }
.gform_wrapper input[type=checkbox] + label:after {
    content: ''; display: none; position: absolute; top: .2em; left: .05em;
    transform: translate(10%, -27%);
    width: var(--form_radiocheckbox-input_size);
    height: var(--form_radiocheckbox-input_size);
    background-color: var(--form_radiocheckbox-input_color);
    mask-image:             url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M501.29,87.73c14.28,14.28,14.28,37.48,0,51.77L208.75,432.03c-14.28,14.28-37.48,14.28-51.77,0L10.71,285.76c-14.28-14.28-14.28-37.48,0-51.77,14.28-14.28,37.48-14.28,51.77,0l120.44,120.33L449.64,87.73c14.28-14.28,37.48-14.28,51.77,0h-.11Z'></path></svg>"); 

}
.gform_wrapper input[type=checkbox]:checked + label:after { visibility: visible; display:block; }

/* Radios */
.gform_wrapper input[type=radio] + label:before { border-radius: 100%; }
.gform_wrapper input[type=radio]:checked + label:before { background: transparent; }
.gform_wrapper input[type=radio] + label:after {
    border-radius: 100%;
    display: block; position: absolute; top: 0; left: 0; content: '';
    height: var(--form_radiocheckbox-field_size);
    width: var(--form_radiocheckbox-field_size);
    transform: scale(0.5);
    background: var(--form_radiocheckbox-input_color);
    visibility: hidden;
}
.gform_wrapper input[type=radio]:checked + label:after {  visibility: visible; }

/* FORM 2 - Secondary Form Styling
------------------------------------------*/

/* Dark Form Inputs */
.form-2 input[type="text"], .form-2 input[type="email"], .form-2 input[type="url"], .form-2 input[type="password"], .form-2 input[type="search"], .form-2 input[type="number"], .form-2 input[type="tel"], .form-2 input[type="range"], 
.form-2 input[type="date"], .form-2 input[type="month"], .form-2 input[type="week"], .form-2 input[type="time"],  .form-2 input[type="datetime"],  .form-2 input[type="datetime-local"],  .form-2 input[type="color"],  .form-2 textarea 
{ color: var(--clr-3); background-color: var(--clr-2-dark-op); }
.form-2 form p { color: #fff !important; }

/* Dark Form Focus */
.form-2 input[type="text"]:focus, .form-2 input[type="email"]:focus, .form-2 input[type="url"]:focus, .form-2 input[type="password"]:focus, .form-2 input[type="search"]:focus, .form-2 input[type="number"]:focus,  .form-2 input[type="tel"]:focus,  .form-2 input[type="range"]:focus,  .form-2 input[type="date"]:focus,
.form-2 input[type="month"]:focus,  .form-2 input[type="week"]:focus,  .form-2 input[type="time"]:focus,  .form-2 input[type="datetime"]:focus,  .form-2 input[type="datetime-local"]:focus,  .form-2 input[type="color"]:focus,  .form-2 textarea:focus 
{ background-color: rgba(0, 0, 0, 0.3);border-color: var(--clr-white); }

.form-2 form label { font-weight: 700; color: var(--clr-white); }
.form-2 ::placeholder { color: var(--clr-3) ;}

.form-2 input[type="button"], .form-2 input[type="reset"], .form-2 input[type="submit"] 
{ border: none; background-color: white; color: var(--clr-white) !important; }
.form-2 input[type="button"]:hover, .form-2 input[type="reset"]:hover, .form-2 input[type="submit"]:hover, .form-2 input[type="button"]:focus, .form-2 input[type="reset"]:focus, .form-2 input[type="submit"]:focus 
{ background-color: rgba(255, 255, 255, 0.5); color: #fff !important; }
.form-2 .wpcf7-not-valid-tip { color: var(--clr-white); }
.gform_wrapper input[type=checkbox]:checked + label:after { visibility: visible; }

/* Form Variables
-----------------------------------------------*/
:root { 
    /* Base Fields */
    --form_field-margin_bottom: 0.3rem;
    --form_field-text_color: var(--clr-2);
    --form_field-placeholder_color: var(--clr-1);
    --form_field-background_color: rgba(0, 0, 100, 0.02);
    --form_field-border_thickness: 2px;
    --form_field-border_color: var(--clr-1);
    --form_field-border_radius: ;
    
    /* Base Fields FOCUS */
    --form_field-focus-text_color: var(--clr-2);
    --form_field-focus-background_color: var(--clr-white);
    --form_field-focus-border_color: var(--clr-2);

    /* Labels */
    --form_field-lable_color: var(--clr-2);
    --form_field-lable_option_color: var(--clr-2);

    /* Radio & Checkbox Field */
    --form_radiocheckbox-fontsize: 1.1rem; 
    --form_radiocheckbox-field_left_space: 2.25rem;
    --form_radiocheckbox-field_size: 1.75rem; 
    --form_radiocheckbox-field_border_radius: .35rem; 
    --form_radiocheckbox-field_border_thickness: 3px; 
    --form_radiocheckbox-field_color: var(--clr-1); 

    /* Radio & Checkbox Cheked */
    --form_radiocheckbox-input_size: 1.9rem; 
    --form_radiocheckbox-input_color: var(--clr-2);
}

/* Form Resets
------------------------------------------*/
/* Button Resets */
textarea, input, select { outline: none; }

/* Form Typography
------------------------------------------*/
form p  { margin-bottom: 15px; font-size: 1rem; color: var(--clr-2); box-sizing: border-box; font-family: var(--bodyfont); font-weight: var(--bodyfont-weight); font-style: var(--bodyfont-style); }
form label, form legend {
    font-family: var(--headingfont); font-weight: var(--headingfont-weight); font-style: var(--headingfont-style);
    line-height: .75;
    letter-spacing: 0.05em;
    color: var(--form_field-lable_color); 
    margin: 0;
}

/* Input Fields
------------------------------------------*/
input[type="text"], input[type="email"], input[type="url"],input[type="password"],input[type="search"],input[type="number"],input[type="tel"],input[type="range"], 
input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea ,
    
    /* Vendors Fields */
        /* Login Form */
        .xoo-aff-group input[type="text"], 
        .xoo-aff-group input[type="password"], 
        .xoo-aff-group input[type="email"], 
        .xoo-aff-group input[type="number"], 
        .xoo-aff-group select, 
        .xoo-aff-group select + .select2, 
        .xoo-aff-group input[type="tel"]
{ 
    width: 100%; padding: .5rem 1rem !important; 
    margin-bottom: var(--form_field-margin_bottom); 
    border-radius: var(--form_field-border_radius) !important; 
    border: none;
    border-bottom:  solid var(--form_field-border_thickness) var(--form_field-border_color);
    box-sizing: border-box;
    font-family: var(--bodyfont); font-weight: var(--bodyfont-weight); font-style: var(--bodyfont-style);
    font-size: 1.2rem !important;
    color: var(--form_field-text_color); 
    background-color: var(--form_field-background_color);
    box-shadow: none !important;
    transition: var(--transitions);
}

/* Input Focus
------------------------------------------*/
input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="number"]:focus,input[type="tel"]:focus,input[type="range"]:focus, input[type="date"]:focus,
input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus 
{ 
    background-color: var(--form_field-focus-background_color); 
    border: none;
    border-bottom: solid var(--form_field-border_thickness) var(--form_field-focus-border_color); 
    color: var(--form_field-focus-text_color);  }

/* Select Field
------------------------------------------*/
select { 
    border-radius: var(--form_radiocheckbox-field_border_radius);  
    border: solid var(--form_field-border_thickness) var(--form_field-border_color); 
    font-family: var(--bodyfont) !important; font-weight: var(--bodyfont-weight-bold) !important; font-style: var(--bodyfont-style);
    font-size: 1.2rem !important;
    color: var(--form_field-text_color); 
}
select:focus, select:focus-visible { 
    border-radius: var(--form_radiocheckbox-field_border_radius);
    border: solid var(--form_field-border_thickness) var(--form_field-focus-border_color) !important;
    box-shadow: none; }

/* Placeholder Text
------------------------------------------*/
::placeholder { color: var(--form_field-placeholder_color); font-family: var(--headingfont); font-weight: var(--headingfont-weight); font-style: var(--headingfont-style); letter-spacing: 0.03em; text-transform: uppercase; }

/* Gravity Forms Integration
------------------------------------------*/
.gform_wrapper .gfield_label,
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
    font-weight: var(--bodyfont-weight-bold);
    color: var(--clr-2);
    font-size: 1.2rem !important;
    font-family: var(--headingfont) !important;
    font-style: var(--headingfont-style) !important;
    margin-bottom: 0 !important;
}

.gform_wrapper input[type=submit] {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    border: none;
    padding: .7em 1.2em;
    line-height: auto;
}


/*  Gravity Forms Theme Styling - Hide Defaults */ 
.gform_wrapper input[type=radio], .gform_wrapper input[type=checkbox], 
.gfield_radio input[type=radio], .gfield_checkbox input[type=checkbox]
{ position: absolute; visibility: hidden; opacity: 0; height: 0; width: 0; }

/*  Gravity Forms Theme Styling - Spacing Resets */
.gform_wrapper.gravity-theme fieldset { border: none; display: block; margin: 0 0 var(--form_field-margin_bottom) 0; }
.gform_wrapper.gravity-theme fieldset, .gform_wrapper.gravity-theme legend { background: none; padding: 0; }
.gform_wrapper .ginput_container_radio, .gform_wrapper .ginput_container_checkbox { padding: 0; }

/* Radio & Checkbox
------------------------------------------*/

/* Radio & Checkbox Globals, Grid & Input Spacing */
.gform_wrapper .ginput_container_radio .gfield_radio,
.gform_wrapper .ginput_container_checkbox .gfield_checkbox 
{ display: grid !important; grid-gap: 0.5rem 1rem; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ) ; margin-top: 1rem; }
.gform_wrapper .gfield_radio div.gchoice, .gform_wrapper .gfield_checkbox div.gchoice
{ position: relative; cursor: pointer; display: block !important; padding: 0 0 0 var(--form_radiocheckbox-field_left_space) !important;  }
.gform_wrapper input[type=checkbox] + label,  .gform_wrapper input[type=radio] + label {
    font-size: var(--form_radiocheckbox-fontsize) !important;  
    color: var(--form_field-lable_option_color) !important;
    line-height: 1.4;
    vertical-align: top !important;
}

/* Radio & Checkbox Borders */
.gform_wrapper input[type=radio] + label:before, .gform_wrapper input[type=checkbox] + label:before { 
    display: block; content: ''; position: absolute; top: 0; left: 0; 
    height: var(--form_radiocheckbox-field_size); width: var(--form_radiocheckbox-field_size); 
    border: var(--form_radiocheckbox-field_border_thickness) solid var(--form_radiocheckbox-field_color);
}

/* Checkboxes */
.gform_wrapper input[type=checkbox]:checked + label:before { background: transparent;}
.gform_wrapper input[type=checkbox] + label:before { border-radius: var(--form_radiocheckbox-field_border_radius); }
.gform_wrapper input[type=checkbox] + label svg { display: none; }
.gform_wrapper input[type=checkbox] + label:after {
    content: ''; display: none; position: absolute; top: .2em; left: .05em;
    transform: translate(10%, -27%);
    width: var(--form_radiocheckbox-input_size);
    height: var(--form_radiocheckbox-input_size);
    background-color: var(--form_radiocheckbox-input_color);
    mask-image:             url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M501.29,87.73c14.28,14.28,14.28,37.48,0,51.77L208.75,432.03c-14.28,14.28-37.48,14.28-51.77,0L10.71,285.76c-14.28-14.28-14.28-37.48,0-51.77,14.28-14.28,37.48-14.28,51.77,0l120.44,120.33L449.64,87.73c14.28-14.28,37.48-14.28,51.77,0h-.11Z'></path></svg>"); 

}
.gform_wrapper input[type=checkbox]:checked + label:after { visibility: visible; display:block; }

/* Radios */
.gform_wrapper input[type=radio] + label:before { border-radius: 100%; }
.gform_wrapper input[type=radio]:checked + label:before { background: transparent; }
.gform_wrapper input[type=radio] + label:after {
    border-radius: 100%;
    display: block; position: absolute; top: 0; left: 0; content: '';
    height: var(--form_radiocheckbox-field_size);
    width: var(--form_radiocheckbox-field_size);
    transform: scale(0.5);
    background: var(--form_radiocheckbox-input_color);
    visibility: hidden;
}
.gform_wrapper input[type=radio]:checked + label:after {  visibility: visible; }

/* FORM 2 - Secondary Form Styling
------------------------------------------*/

/* Dark Form Inputs */
.form-2 input[type="text"], .form-2 input[type="email"], .form-2 input[type="url"], .form-2 input[type="password"], .form-2 input[type="search"], .form-2 input[type="number"], .form-2 input[type="tel"], .form-2 input[type="range"], 
.form-2 input[type="date"], .form-2 input[type="month"], .form-2 input[type="week"], .form-2 input[type="time"],  .form-2 input[type="datetime"],  .form-2 input[type="datetime-local"],  .form-2 input[type="color"],  .form-2 textarea 
{ color: var(--clr-3); background-color: var(--clr-2-dark-op); }
.form-2 form p { color: #fff !important; }

/* Dark Form Focus */
.form-2 input[type="text"]:focus, .form-2 input[type="email"]:focus, .form-2 input[type="url"]:focus, .form-2 input[type="password"]:focus, .form-2 input[type="search"]:focus, .form-2 input[type="number"]:focus,  .form-2 input[type="tel"]:focus,  .form-2 input[type="range"]:focus,  .form-2 input[type="date"]:focus,
.form-2 input[type="month"]:focus,  .form-2 input[type="week"]:focus,  .form-2 input[type="time"]:focus,  .form-2 input[type="datetime"]:focus,  .form-2 input[type="datetime-local"]:focus,  .form-2 input[type="color"]:focus,  .form-2 textarea:focus 
{ background-color: rgba(0, 0, 0, 0.3);border-color: var(--clr-white); }

.form-2 form label { font-weight: 700; color: var(--clr-white); }
.form-2 ::placeholder { color: var(--clr-3) ;}

.form-2 input[type="button"], .form-2 input[type="reset"], .form-2 input[type="submit"] 
{ border: none; background-color: white; color: var(--clr-white) !important; }
.form-2 input[type="button"]:hover, .form-2 input[type="reset"]:hover, .form-2 input[type="submit"]:hover, .form-2 input[type="button"]:focus, .form-2 input[type="reset"]:focus, .form-2 input[type="submit"]:focus 
{ background-color: rgba(255, 255, 255, 0.5); color: #fff !important; }
.form-2 .wpcf7-not-valid-tip { color: var(--clr-white); }
.gform_wrapper input[type=checkbox]:checked + label:after { visibility: visible; }

03-05 Lists (BSL)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
03-05 Lists (BSL)
---------------------------------------------------------------------------*/

/* List Basiscs - FRAMEWORK 2024-05-05
------------------------------------------*/
ul li::marker { color: var(--clr-1); }
ul.lead li { margin-bottom: .5rem; }

/* List Grid */
:root { --list_grid-min: 300px; }
ol.list-grid, ul.list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax( var(--list_grid-min), 1fr ) ); grid-gap: .65rem 2rem; }
ol.list-grid > li, ul.list-grid > li { margin-bottom: 0px; }

Basic UL List

  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text

Basic OL List

  1. Basic Numbered List item and some text
  2. Basic Numbered List item and some text
  3. Basic Numbered List item and some text
  4. Basic Numbered List item and some text

List Grid Helper

  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
  • Basic Unordered List item and some text
/* List Icons - FRAMEWORK 2024-05-05
------------------------------------------*/
:root {
    --licon-width: 1.125rem;
    --licon-width-lead: 1.5rem;
    --licon-color: var(--clr-1);
    --licon-color-light: var(--clr-1-light);
    --licon-padding_left: 2rem;
    --list_grid-min: 300px;
}
ul[class*="licon--"] { list-style: none; margin-left: 0;  list-style-type: none;  }
ul[class*="licon--"] li { color: var(--clr-body); position: relative; padding-left: calc( var(--licon-width) * 1.5 ); margin-bottom: .5rem;  }
.light ul[class*="licon--"] li { color: var(--clr-white) !important; }
ul[class*="licon--"] li::before  { 
    background-color: var(--licon-color);
    content: ''; position: absolute; left: 0; top: 0; transform: translate( 0%, 0% );  
    width: var(--licon-width); height: var(--lineHeight); background-repeat: no-repeat; 
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } 
.light ul[class*="licon--"] li::before{ background-color: var(--licon-color-light)!important }

ul.lead[class*="licon--"] li { padding-left: calc( var(--licon-width-lead) * 1.5 ); }
ul.lead[class*="licon--"] li::before  { 
    background-color: var(--clr-1);
    content: ''; position: absolute; left: 0; top: 0; transform: translate( 0%, 0% );  
    width: var(--licon-width-lead); height: var(--leadlineHeight); } 

/* Bullet List */
ul.licon--bullet li::before { 
    mask-image:             url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M480.34,211.11H31.66c-17.49,0-31.66,14.18-31.66,31.66v34.22c0,17.49,14.18,31.66,31.66,31.66h448.67c17.49,0,31.66-14.18,31.66-31.66v-34.22c0-17.49-14.18-31.66-31.66-31.66Z'></path></svg>"); 
}

/* Check List */
ul.licon--check li::before { 
    mask-image:             url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M501.29,87.73c14.28,14.28,14.28,37.48,0,51.77L208.75,432.03c-14.28,14.28-37.48,14.28-51.77,0L10.71,285.76c-14.28-14.28-14.28-37.48,0-51.77,14.28-14.28,37.48-14.28,51.77,0l120.44,120.33L449.64,87.73c14.28-14.28,37.48-14.28,51.77,0h-.11Z'></path></svg>"); 
}

/* Dot List */
ul.licon--dot li::before { 
    width: calc(var(--licon-width)* 0.6);
    left: calc(var(--licon-width)* 0.3);
    mask-image:             url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256,0C114.62,0,0,114.62,0,256s114.62,256,256,256,256-114.62,256-256S397.38,0,256,0Z'></path></svg>"); 
}

/* Dot List Lead */
ul.lead.licon--dot li::before { 
    width: calc(var(--licon-width-lead)* 0.6);
    left: calc(var(--licon-width-lead)* 0.3);
    mask-image:             url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256,0C114.62,0,0,114.62,0,256s114.62,256,256,256,256-114.62,256-256S397.38,0,256,0Z'></path></svg>"); 
}

/* Star List */
ul.licon--star li::before { 
    mask-image:             url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M283.85,25.21c-5.14-10.67-16-17.45-27.92-17.45s-22.69,6.79-27.92,17.45l-62.34,128.28-139.23,20.56c-11.64,1.75-21.33,9.89-24.92,21.04-3.59,11.15-.68,23.46,7.66,31.71l101.03,99.97-23.85,141.27c-1.94,11.64,2.91,23.46,12.51,30.35,9.6,6.88,22.3,7.76,32.77,2.23l124.4-66.42,124.4,66.42c10.47,5.53,23.17,4.75,32.77-2.23,9.6-6.98,14.45-18.71,12.51-30.35l-23.95-141.27,101.03-99.97c8.34-8.24,11.34-20.56,7.66-31.71s-13.28-19.29-24.92-21.04l-139.33-20.56-62.34-128.28Z'></path></svg>"); 
}

/* Heart List */
ul.licon--heart li::before { 
    mask-image:             url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M47.6,299.2l180.7,168.7c7.5,7,17.4,10.9,27.7,10.9s20.2-3.9,27.7-10.9l180.7-168.7c30.4-28.3,47.6-68,47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141-45.6-7.6-92,7.3-124.6,39.9l-12,12-12-12c-32.6-32.6-79-47.5-124.6-39.9C50.5,54.4,0,114,0,183.9v5.8c0,41.5,17.2,81.2,47.6,109.5h0Z'></path></svg>"); 
}
ul.licon--bullet
  • This is a bullet-list item with a bullet
  • This is a bullet-list item with a bullet
  • This is a bullet-list item with a bullet
ul.licon--bullet.lead
  • This is a bullet-list item with a bullet
  • This is a bullet-list item with a bullet
  • This is a bullet-list item with a bullet
  • This is a check-list item with a check
  • This is a check-list item with a check
  • This is a check-list item with a check
  • This is a check-list item with a check
  • This is a check-list item with a check
  • This is a check-list item with a check
  • This is a dot-list item with a dot
  • This is a dot-list item with a dot
  • This is a dot-list item with a dot
  • This is a dot-list item with a dot
  • This is a dot-list item with a dot
  • This is a dot-list item with a dot
  • This is a star-list item with a star
  • This is a star-list item with a star
  • This is a star-list item with a star
  • This is a star-list item with a star
  • This is a star-list item with a star
  • This is a star-list item with a star
  • This is a heart-list item with a heart
  • This is a heart-list item with a heart
  • This is a heart-list item with a heart
  • This is a heart-list item with a heart
  • This is a heart-list item with a heart
  • This is a heart-list item with a heart
/* Number Lists - FRAMEWORK 2024-05-04
------------------------------------------*/
:root {
    --num_list_circle_font_size: 1.3rem;
    --num_list_circle_size: 1.875rem;
    --num_list-border_color: var(--clr-4);
    --num_list-border_width: 2px;
}
ol.num-list { margin-left: 0; counter-reset: li; list-style: none; display: grid; grid-template-columns: 1fr; gap: 1rem; }
ol.num-list li { position: relative; padding-left: calc( var(--num_list_circle_size) * 1.35 ); min-height: var(--num_list_circle_size); }
ol.num-list li:before {
    content: counter(li);
    counter-increment: li;
    color: #fff;
    background: var(--clr-1);
    border-radius: 50%;
    font-size: var(--num_list_circle_font_size);
    font-weight: 700;
    width: var(--num_list_circle_size);
    height: var(--num_list_circle_size);
    line-height: var(--num_list_circle_size);
    text-align: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
  1. This is a num-list item
  2. This is a num-list item
  3. This is a num-list item
  1. This is a num-list item
  2. This is a num-list item
  3. This is a num-list item

03-06 Blockquote (BSQ)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
03-06 Blockquote (BSQ)
---------------------------------------------------------------------------*/

/* blockquote */
blockquote { width: 90%; margin: 20px auto; color: var(--clr-1); padding: 0.6em 0.6em 0.6em 50px; border-left: 4px solid var(--clr-2); line-height: 1.6; position: relative; background-color: var(--clr-4); }
blockquote::before{ font-family: Inter, -system-ui,system-ui,sans-serif; content: "\201C"; color:var(--clr-2); font-size:4em; position: absolute; left: 6px; top: -15px; }
blockquote::after{ content: ''; }
blockquote p { font-family: Inter, -system-ui,system-ui,sans-serif; font-weight: 400; }
blockquote cite { color: var(--clr-2); font-weight: 700; }
.light blockquote { color: var(--clr-2); border-left: 4px solid var(--clr-2); background: var(--clr-3-op); }
.light blockquote::before { color:var(--clr-2); }
.light blockquote cite { display:block; color: var(--clr-2); }

03-07 Captions (BSC)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
07 Captions (BSC)
---------------------------------------------------------------------------*/
.wp-block-image figcaption {
    margin-top: 0.25em;
    margin-bottom: 1em;
    font-size: .675rem;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
}