Sidebird

Sidebird — design reference

Source: https://tylekeomalaysia.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Typography

• font-family: Lato, sans-serif — selector body
• font-family: "Helvetica Neue", Helvetica, Arial, sans-serif — selector body
• font-family: Georgia, serif — selector #comments h3
• font-family: Arial — selector .content-icon a, .content-iconmenu span
• font-family: slick — selector .slick-dots li button::before
• font-size: 2em — selector h1
• font-size: 1em — selector code, kbd, pre, samp
• font-size: 14px — selector body
• font-size: 65% — selector h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small
• font-size: 75% — selector h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small, h4 .small, .h4 .small, h5 .small, .h5 .small, h6 .small, .h6 .small
• font-size: 36px — selector h1, .h1
• font-size: 30px — selector h2, .h2
• font-weight: 400 — selector body
• font-weight: 700 — selector .nav > li > a,.mobile-sidebar-levels-2 .nav > li > ul > li > a
• font-weight: 500 — selector h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
• font-weight: 200 — selector .jumbotron p
• font-weight: 600 — selector .category .heading h1
• font-weight: initial — selector ul.basic-tabs li a
• font-weight: bold — selector .content-list-prediction a:hover
• line-height: 1.42857 — selector body
• line-height: 1.1 — selector h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
• line-height: 1 — selector h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small
• line-height: 1.33 — selector .btn-lg, .btn-group-lg > .btn
• line-height: 1.5 — selector .btn-sm, .btn-group-sm > .btn
• line-height: 46px — selector select.input-group-lg > .form-control, select.input-group-lg > .input-group-addon, select.input-group-lg > .input-group-btn > .btn
• line-height: 30px — selector select.input-group-sm > .form-control, select.input-group-sm > .input-group-addon, select.input-group-sm > .input-group-btn > .btn
• letter-spacing: .02em — selector .nav-uppercase>li>a
• letter-spacing: .03em — selector .button,button,input[type=button],input[type=reset],input[type=submit]
• letter-spacing: .05em — selector .uppercase,h6,span.widget-title,th
• letter-spacing: 0 — selector .swiper-button-next:after,.swiper-button-prev:after
• letter-spacing: normal — selector #wp-sport-app button,#wp-sport-app input,#wp-sport-app select,#wp-sport-app textarea

Colors and surfaces

• color: #fff — selector :root :where(.wp-element-button, .wp-block-button**link)
• color: rgb(51, 51, 51) — selector body
• color: rgb(66, 139, 202) — selector a
• color: rgb(42, 100, 150) — selector a:hover, a:focus
• color: rgb(153, 153, 153) — selector h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small
• color: rgb(48, 113, 169) — selector a.text-primary:hover
• color: rgb(60, 118, 61) — selector .text-success
• background-color: #32373c — selector :root :where(.wp-element-button, .wp-block-button**link)
• background-color: rgb(255, 255, 255) — selector body
• background-color: rgb(48, 113, 169) — selector a.bg-primary:hover
• background-color: rgb(193, 226, 179) — selector a.bg-success:hover
• background-color: rgb(175, 217, 238) — selector a.bg-info:hover
• background-color: rgb(247, 236, 181) — selector a.bg-warning:hover
• background-color: rgb(228, 185, 185) — selector a.bg-danger:hover
• background-color: rgb(245, 245, 245) — selector pre

Components and layout

• border-radius: 4px — selector pre
• border-radius: 0px — selector pre code
• border-radius: 6px — selector .btn-lg, .btn-group-lg > .btn
• border-radius: 3px — selector .btn-sm, .btn-group-sm > .btn
• border-radius: 4px 4px 0px 0px — selector .nav-tabs > li > a
• border-radius: 1px — selector .navbar-toggle .icon-bar
• border-radius: 15px — selector .pager li > a, .pager li > span
• border-radius: 5px 5px 0px 0px — selector .popover-title
• box-shadow: rgba(0, 0, 0, 0.125) 0px 3px 5px inset — selector .btn:active, .btn.active
• box-shadow: none — selector .btn.disabled, .btn[disabled], fieldset[disabled] .btn
• box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px inset — selector .navbar-collapse
• box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px inset, rgba(255, 255, 255, 0.1) 0px 1px 0px — selector .navbar-form
• box-shadow: rgb(179, 179, 179) 0px -1px 0px inset — selector .box-odds-title
• box-shadow: 15px 15px 15px 15px rgba(0,0,0,.1) — selector .sticky-section-helper+div
• box-shadow: 1px 1px 15px rgba(0,0,0,.15) — selector .nav-dropdown-has-shadow .nav-dropdown
• box-shadow: inset 0 0 0 100px rgba(0,0,0,.2) — selector .button:hover,.dark .button.is-form:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover
• max-width: 1050px — selector .container-width, .full-width .ubermenu-nav, .container, .row
• max-width: 100% — selector .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img
• max-width: none — selector .nav > li > a > img
• max-width: 1080px !important — selector body.page-ket-qua-bong-da #main-content
• max-width: 1080px — selector .container,.container-width,.full-width .ubermenu-nav,.row
• max-width: 1170px — selector body.boxed,body.boxed .header-wrapper,body.boxed .is-sticky-section,body.boxed header,body.framed,body.framed .header-wrapper,body.framed header
• max-width: 1150px!important — selector li.current-dropdown>.nav-dropdown-full,li.has-dropdown:hover>.nav-dropdown-full
• max-width: 100%!important — selector .header-full-width .container
• padding: 10px 10px 10px 0px!important — selector .navbar-default .navbar-nav > li > a
• padding: 9.5px — selector pre
• padding: 0px — selector pre code
• padding: 6px 12px — selector .btn
• padding: 10px 16px — selector .btn-lg, .btn-group-lg > .btn
• padding: 5px 10px — selector .btn-sm, .btn-group-sm > .btn
• padding: 1px 5px — selector .btn-xs, .btn-group-xs > .btn
• padding: 3px 20px — selector .dropdown-menu > li > a
• gap: 6px — selector #wp-sport-app .tab-button[data-v-0942c2b7]
• gap: 4px — selector #wp-sport-app .tab-button[data-v-0942c2b7]
• transition: 0.35s — selector .follow\_icon a
• transition: transform 0.5s — selector .t3-mainnav-android, .t3-wrapper
• transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s — selector .t3-mainnav-android::after, .t3-wrapper::after
• transition: opacity 0.5s — selector .off-canvas-open .t3-mainnav-android::after, .off-canvas-open .t3-wrapper::after, .t3-off-canvas::after
• transition: 0.5s ease-in-out — selector .product-block .action-button
• transition: background 0.3s, color 0.3s — selector ul.basic-tabs li a
• transition: opacity .25s,visibility .25s — selector .nav-dropdown
• transition: opacity .3s!important — selector li.current-dropdown>.nav-dropdown-full,li.has-dropdown:hover>.nav-dropdown-full

Responsive rules

(max-width: 549px) 
(min-width: 768px) 
(min-width: 1200px) 
print 
(min-width: 992px) 
(max-width: 767px) 
screen and (min-width: 768px) 
(min-width: 768px) and (max-width: 991px) 
(min-width: 992px) and (max-width: 1199px) 
(max-width: 320px) 
(max-width: 480px) 
(min-width: 980px) 
only screen and (max-width: 767px) 
only screen and (max-width: 480px) 
(max-width: 849px)
screen and (min-width:850px)
screen and (max-width:549px)
screen and (max-width:849px)
screen and (min-width:550px)
(max-width:849px)
(max-width:549px)
(min-width:850px)
(prefers-reduced-motion)
(-ms-high-contrast:none)
screen and (min-width:849px)