Rokin Brand Fonts & Colors
/* =============================================
ROKIN PRECISION — BRAND FONTS & COLORS
============================================= */
/* Google Fonts Import */
@import url(‘https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=Rajdhani:wght@400;500;600&family=Kode+Mono:wght@500&display=swap’);
/* Brand CSS Variables */
:root {
–rokin-black: #122023;
–rokin-white: #efefef;
–rokin-cream: #e0dbc6;
–rokin-blue: #a2c1c4;
–rokin-orange: #fe3f1a;
–rokin-yellow: #e1ff01;
–font-primary: ‘Barlow Condensed’, sans-serif;
–font-secondary: ‘Rajdhani’, sans-serif;
–font-body: ‘Kode Mono’, monospace;
}
/* Typography */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.uagb-ifb-title,
.wp-block-heading {
font-family: var(–font-primary) !important;
font-weight: 900 !important;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(–rokin-black);
}
.site-description,
.ast-header-break-point .main-header-menu .menu-item > a,
.main-header-menu .menu-item > a,
label,
.woocommerce-loop-product__title,
.product_title,
.woocommerce-breadcrumb,
.widget-title {
font-family: var(–font-secondary) !important;
font-weight: 500;
letter-spacing: 0.03em;
}
body,
p,
.entry-content p,
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel p,
input, textarea, select,
.wc-block-components-text-input input {
font-family: var(–font-body) !important;
font-size: 0.9rem;
line-height: 1.7;
}
/* Global background & text */
body {
background-color: var(–rokin-white);
color: var(–rokin-black);
}
/* Header */
.site-header,
#masthead,
.ast-primary-header-bar {
background-color: var(–rokin-black) !important;
}
.main-header-menu .menu-item > a,
.ast-header-break-point .main-header-menu .menu-item > a {
color: var(–rokin-white) !important;
font-family: var(–font-secondary) !important;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a {
color: var(–rokin-orange) !important;
}
/* Buttons */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.uagb-buttons-repeater {
font-family: var(–font-secondary) !important;
font-weight: 700 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
background-color: var(–rokin-orange) !important;
color: var(–rokin-white) !important;
border: none !important;
border-radius: 0 !important;
transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,
.uagb-buttons-repeater:hover {
background-color: var(–rokin-black) !important;
color: var(–rokin-yellow) !important;
}
/* WooCommerce product cards */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(–font-primary) !important;
font-weight: 700;
text-transform: uppercase;
color: var(–rokin-black);
}
.woocommerce ul.products li.product .price,
.woocommerce .price {
font-family: var(–font-secondary) !important;
color: var(–rokin-orange) !important;
font-weight: 600;
}
/* Footer */
.site-footer,
#colophon,
.ast-small-footer {
background-color: var(–rokin-black) !important;
color: var(–rokin-cream) !important;
font-family: var(–font-secondary) !important;
}
.site-footer a,
#colophon a {
color: var(–rokin-blue) !important;
}
.site-footer a:hover,
#colophon a:hover {
color: var(–rokin-orange) !important;
}
/* Links */
a {
color: var(–rokin-orange);
text-decoration: none;
}
a:hover {
color: var(–rokin-black);
}
/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.wp-block-button__link:focus {
outline: 3px solid var(–rokin-orange) !important;
outline-offset: 2px !important;
}
/* Skip to content link (accessibility) */
.skip-link:focus {
background: var(–rokin-orange);
color: var(–rokin-white);
font-family: var(–font-secondary);
font-weight: 700;
}