EGM Theme Style Guide Demo

Visual preview of Typography, Buttons, and Color Palette configured for the theme

1. Color Palette (New Colors Configured)

#1C2D43

Navy Blue (Background)

                    var(–color-navy-blue)

#FF0059

Pink

                    var(–color-pink)

#E2913A

Brown (Primary)

                    var(–color-brown)

#58DECE

Green

                    var(–color-green)

#59FAE5

Cyan Light

                    var(–color-cyan-light)

#2DD9C4

Teal

                    var(–color-teal)

#33D1BD

Teal Medium

                    var(–color-teal-medium)

#72F2E2

Teal Light

                    var(–color-teal-light)

#0EC9B2

Teal Dark

                    var(–color-teal-dark)

#F7F7F7

Gray Light

                    var(–color-gray-light)

#29292980

Charcoal Trans

                    var(–color-charcoal-trans)

2. Typography (Text Styles – Now aligned Left)

                Tag: <h1> or Class: .h1 |
                Size: var(–font-size-h1) |
                LH: var(–line-height-h1) |
                Weight: 500 (Medium)
            

Heading 1 Typography

                Tag: <h2> or Class: .h2 |
                Size: var(–font-size-h2) |
                LH: var(–line-height-h2) |
                Weight: 500 (Medium)
            

Heading 2 Typography

                Tag: <h3> or Class: .h3 |
                Size: var(–font-size-h3) [54px] |
                LH: var(–line-height-h3) [65px] |
                Weight: 500 (Medium)
            

Heading 3 Typography

                Tag: <h4> or Class: .h4 |
                Size: var(–font-size-h4) [50px] |
                LH: var(–line-height-h4) [60px] |
                Weight: 400 (Regular)
            

Heading 4 Typography

                Tag with Class: <h1 class=”h1-r”> or <h1 class=”h1-regular”> |
                Size: var(–font-size-h1) [74px] |
                LH: var(–line-height-h1) [90px] |
                Weight: 400 (Regular – Overrides h1 default weight 500)
            

Heading 1 Regular (<h1 class=”h1-r”>)

                Tag: <h5> or Class: .lead-in-1 |
                Size: var(–font-size-lead-in-1) [40px] |
                LH: var(–line-height-lead-in-1) [55px] |
                Weight: 600 (SemiBold)
            

Lead in 1 Typography (h5)

                Tag: <h6> or Class: .lead-in-2 / .lead-in-2-m |
                Size: var(–font-size-lead-in-2) [30px] |
                LH: var(–line-height-lead-in-2) [38px] |
                Weight: 500 (Medium)
            

Lead in 2 Typography (h6)

                Class: .lead-in-3 |
                Size: var(–font-size-lead-in-3) [24px] |
                LH: var(–line-height-lead-in-3) [35px] |
                Weight: 500 (Medium)
            

Lead in 3 Typography Content

                Class: .lead-in-4 |
                Size: var(–font-size-lead-in-4) [22px] |
                LH: var(–line-height-lead-in-4) [27px] |
                Weight: 500 (Medium)
            

Lead in 4 Typography Content

                Tag: <p> or Class: .body-r |
                Size: var(–font-size-body-r) [16px] |
                LH: var(–line-height-body-r) [22px] |
                Weight: 400 (Regular)
            

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (Body – Regular)

                Class: .body-m |
                Size: var(–font-size-body-m) [16px] |
                LH: var(–line-height-body-m) [22px] |
                Weight: 500 (Medium)
            

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (Body – Medium)

                Class: .remarks |
                Size: var(–font-size-remarks) |
                LH: var(–line-height-remarks) |
                Weight: 400 (Regular)
            

Remarks text: Note that this style guide layout has responsive properties.

3. Lists & Text Block Margins (Desktop/Body – R)

Paragraphs (<p>), <ul>, and <ol> use Body-R and have margin-bottom: var(--line-height-body-r) (22px). If they are the last-child, they have no margin bottom. Items <li> have margin-bottom: 0.

This is the first paragraph. It has a bottom margin of 22px (equal to Body-R line-height) to separate it from the list below.

Bullet list item 1 (margin-bottom: 0)
Bullet list item 2 (margin-bottom: 0)
Bullet list item 3 (margin-bottom: 0)

This is the second paragraph. It separates the bullet list above and the numbered list below with a bottom margin of 22px.

Numbered list item 1 (margin-bottom: 0)
Numbered list item 2 (margin-bottom: 0)
Numbered list item 3 (margin-bottom: 0)

This paragraph is the last element inside this block. It has margin-bottom: 0 (via last-child selector).

4. Button Style (Configured as Body-M)

Mapped variables: var(--font-size-body-m) [16px], var(--line-height-body-m) [22px] and font-weight: 500

                    Primary Button (New Style)

了解更多

5. Form Elements (Uniform Padding & Border Radius using Body-R)

Form elements (input, textarea, select) have padding: 10px 20px;, border-radius: 8px;, and use font style Body-R.

Text Input:

Select Option:

Textarea:

6. Font-weight Helper Classes (Global Overrides)

You can use these helpers to force any text block to a specific font weight using !important rules.

.font-r / .font-regular (font-weight: 400):

This paragraph normally inherited bold/medium weight but is forced to Regular 400.

.font-m / .font-medium (font-weight: 500):

This paragraph normally inherited regular weight but is forced to Medium 500.

.font-sb / .font-semibold (font-weight: 600):

This paragraph normally inherited regular weight but is forced to SemiBold 600.

7. Font Helper Classes (Enforcing Fonts on TC/SC Pages)

Testing classes .font-futura and .font-ethnocentric (forces Futura PT / Ethnocentric regardless of current language setting):

Enforcing Futura
                    PT | Class: .font-futura (uses
                    var(--font-futura)):
                

This text uses Futura PT even in TC/SC pages. 1234567890.

Enforcing
                    Ethnocentric | Class: .font-ethnocentric (uses
                    var(--font-ethnocentric)):
                

ETHNOCENTRIC FONT 12345

9. WordPress Default Pagination

Pagination with active page item (Pink) and normal items (#F7F7F7). The Prev/Next buttons will show as disabled (opacity 30%) on first/last page.

                    Page 1 (Prev Disabled)

                    Page 2 (Both Enabled)

                    Last Page (Next Disabled)

10. Swiper Navigation Buttons & Image Border Radius

Demo of the styled Swiper Navigation Buttons (default and hover states) and various image styles including standard images, excluded banners, and the reusable .image-ratio class.

                    Swiper Navigation Buttons (Prev & Next)
                

                    Image Border Radius & Common Class (.image-ratio)
                

Standard
                            Image (bo góc 20px):

Class
                            .image-ratio (bo góc cha, giữ tỉ lệ 4:3):