@font-face {
font-family: 'Aeonik';
src: url(//hometoolguru.com/wp-content/themes/affiliate-pro/fonts/Aeonik-Regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Aeonik';
src: url(//hometoolguru.com/wp-content/themes/affiliate-pro/fonts/Aeonik-Medium.woff2) format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Aeonik';
src: url(//hometoolguru.com/wp-content/themes/affiliate-pro/fonts/Aeonik-Bold.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
} :root {
--site-max-width: 1440px; --site-padding-x: 20px; --header-bg: #ffffff; --header-padding-y: 20px; --header-border-color: #e0e0e0; --logo-max-height: 60px; --menu-gap: 32px; --menu-link-color: #222222;
--menu-link-hover-color: #0073aa;
--menu-font-size: 18px;
--menu-font-weight: 600;
--submenu-bg: #ffffff;
--submenu-width: 220px;
--content-gap: 40px; --sidebar-width: 320px; --sidebar-bg: #ffffff; --sidebar-text: #333333; --sidebar-link: #0073aa; --sidebar-widget-title-size: 19px; --footer-widgets-bg: #1a1a1a; --footer-widgets-text: #cccccc; --footer-widgets-link: #ffffff; --footer-widgets-gap: 40px; --footer-widgets-padding-y: 48px; --site-inner-padding-y: 60px; --topbar-bg: #f5f5f5; --topbar-link-color: #555555; --topbar-link-hover-color: #0073aa; --topbar-font-size: 13px; --topbar-gap: 20px; --topbar-padding-y: 8px; --card-image-width: 280px; --card-gap: 24px; --card-bg: #ffffff; --card-border-color: #eeeeee; --card-radius: 8px; --card-title-color: #000000; --comments-bg: #f7f7f7; --comments-border-color: #e2e2e2;
--comments-radius: 8px; --comments-accent: #0073aa; --pagination-accent: #0073aa; --featured-posts-bg: #f7f7f7; --featured-posts-text: #555555; --featured-posts-link: #000000; --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--site-footer-bg: #1a1a1a; --site-footer-text: #cccccc; --site-footer-link: #ffffff; --site-footer-padding-y: 20px; --footer-widgets-list-font-size: 15px;  --footer-widgets-list-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}
body {
font-family: var(--font-family-base);
} a {
text-decoration: none;
} .wrap {
max-width: var(--site-max-width);
margin: 0 auto;
padding-left: var(--site-padding-x);
padding-right: var(--site-padding-x);
} .site-inner {
padding-top: var(--site-inner-padding-y);
padding-bottom: var(--site-inner-padding-y);
} .breadcrumb {
margin-bottom: 20px;
font-size: 13px;
color: #767676;
}
.breadcrumb a {
color: inherit;
} .affpro-card-view .content {
display: flex;
flex-direction: column;
gap: var(--card-gap);
}
.affpro-card-view .content .entry {
display: grid;
grid-template-columns: var(--card-image-width) 1fr;
grid-template-rows: auto 1fr;
column-gap: var(--card-gap);
padding: var(--card-gap);
border: 1px solid var(--card-border-color);
border-radius: var(--card-radius);
background-color: var(--card-bg);
} .affpro-card-view .content .entry-header {
display: contents;
}
.affpro-card-view .content .entry-image-link {
display: block;
grid-column: 1;
grid-row: 1 / span 2;
}
.affpro-card-view .content .entry-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--card-radius);
}
.affpro-card-view .content .entry-title {
grid-column: 2;
grid-row: 1;
font-size: 20px;
margin: 0 0 8px;
align-self: start;
}
.affpro-card-view .content .entry-title a {
color: var(--card-title-color);
}
.affpro-card-view .content .entry-content {
grid-column: 2;
grid-row: 2;
}
.affpro-card-view .content .more-link {
display: inline-block;
margin-top: 8px;
font-weight: 600;
text-decoration: none;
color: var(--menu-link-hover-color);
} .affpro-card-view .content .entry-content .entry-meta {
margin-top: 10px;
font-size: 13px;
color: #767676;
}
.affpro-card-view .content .entry-footer {
display: none;
} @media only screen and (max-width: 600px) {
.affpro-card-view .content .entry {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
}
.affpro-card-view .content .entry-image-link {
grid-column: 1;
grid-row: 1;
margin-bottom: 16px;
}
.affpro-card-view .content .entry-image {
height: auto;
aspect-ratio: 1 / 1;
}
.affpro-card-view .content .entry-title {
grid-column: 1;
grid-row: 2;
}
.affpro-card-view .content .entry-content {
grid-column: 1;
grid-row: 3;
}
} .archive-pagination {
margin-top: var(--card-gap);
}
.archive-pagination ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.archive-pagination li {
display: block;
}
.archive-pagination a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
border: 1px solid var(--card-border-color);
border-radius: var(--card-radius);
background-color: var(--card-bg);
color: var(--card-title-color);
font-size: 14px;
font-weight: 600;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.archive-pagination a:hover {
background-color: var(--pagination-accent);
border-color: var(--pagination-accent);
color: #ffffff;
}
.archive-pagination li.active a {
background-color: var(--pagination-accent);
border-color: var(--pagination-accent);
color: #ffffff;
} .top-bar {
background-color: var(--topbar-bg);
width: 100%;
}
.top-bar .wrap {
padding-top: var(--topbar-padding-y);
padding-bottom: var(--topbar-padding-y);
}
.top-bar .genesis-nav-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
gap: var(--topbar-gap);
} .affpro-topbar-align-right .top-bar .genesis-nav-menu {
justify-content: flex-end;
}
.top-bar .genesis-nav-menu a {
display: block;
font-size: var(--topbar-font-size);
color: var(--topbar-link-color);
text-decoration: none;
}
.top-bar .genesis-nav-menu a:hover {
color: var(--topbar-link-hover-color);
} .site-header {
background-color: var(--header-bg);
width: 100%;
} .affpro-sticky-header .site-header {
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
} .affpro-header-border .site-header {
border-bottom: 1px solid var(--header-border-color);
}
.site-header .wrap {
padding-top: var(--header-padding-y);
padding-bottom: var(--header-padding-y);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
} .site-header .title-area {
display: flex;
align-items: center;
}
.site-header .custom-logo-link,
.site-header .custom-logo-link img {
display: block;
max-height: var(--logo-max-height);
width: auto;
} .affpro-hide-site-title .site-header .site-title {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .affpro-hide-tagline .site-header .site-description {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .site-header .nav-primary {
margin-left: auto;
}
.site-header .genesis-nav-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.site-header .genesis-nav-menu>li {
position: relative;
margin-left: var(--menu-gap);
}
.site-header .genesis-nav-menu>li:first-child {
margin-left: 0;
}
.site-header .genesis-nav-menu a {
display: block;
padding: 8px 0;
color: var(--menu-link-color);
font-size: var(--menu-font-size);
font-weight: var(--menu-font-weight);
text-decoration: none;
white-space: nowrap;
}
.site-header .genesis-nav-menu a:hover,
.site-header .genesis-nav-menu .current-menu-item>a {
color: var(--menu-link-hover-color);
} .site-header .genesis-nav-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 99;
display: none;
flex-direction: column;
min-width: var(--submenu-width);
margin: 0;
padding: 8px 0;
background-color: var(--submenu-bg);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.site-header .genesis-nav-menu li:hover>.sub-menu,
.site-header .genesis-nav-menu li:focus-within>.sub-menu {
display: flex;
}
.site-header .genesis-nav-menu .sub-menu li {
margin-left: 0;
}
.site-header .genesis-nav-menu .sub-menu a {
padding: 8px 16px;
} .affpro-menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.affpro-menu-toggle-icon,
.affpro-menu-toggle-icon::before,
.affpro-menu-toggle-icon::after {
display: block;
width: 24px;
height: 2px;
background-color: var(--menu-link-color);
transition: transform 0.2s ease, opacity 0.2s ease;
}
.affpro-menu-toggle-icon {
position: relative;
}
.affpro-menu-toggle-icon::before,
.affpro-menu-toggle-icon::after {
content: "";
position: absolute;
left: 0;
}
.affpro-menu-toggle-icon::before {
top: -7px;
}
.affpro-menu-toggle-icon::after {
top: 7px;
} .affpro-nav-open .affpro-menu-toggle-icon {
background-color: transparent;
}
.affpro-nav-open .affpro-menu-toggle-icon::before {
top: 0;
transform: rotate(45deg);
}
.affpro-nav-open .affpro-menu-toggle-icon::after {
top: 0;
transform: rotate(-45deg);
} .affpro-nav-overlay {
display: none;
} @media only screen and (max-width: 960px) {
.affpro-menu-toggle {
display: flex;
}
.site-header .nav-primary {
position: fixed;
top: 0;
right: 0;
z-index: 1000;
width: 300px;
max-width: 85vw;
height: 100vh;
margin-left: 0;
padding: 70px 24px 24px;
background-color: var(--header-bg);
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.affpro-nav-open .site-header .nav-primary {
transform: translateX(0);
}
.site-header .genesis-nav-menu {
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 0;
}
.site-header .genesis-nav-menu>li {
margin-left: 0;
width: 100%;
}
.site-header .genesis-nav-menu .sub-menu {
position: static;
box-shadow: none;
padding-left: 16px;
} .affpro-nav-open .affpro-nav-overlay {
display: block;
position: fixed;
inset: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.4);
} .affpro-nav-open {
overflow: hidden;
}
} .content-sidebar-wrap {
display: flex;
align-items: flex-start;
gap: var(--content-gap);
}
.content-sidebar-wrap .content {
flex: 1 1 0%;
min-width: 0; }
.content-sidebar-wrap .sidebar-primary {
flex: 0 0 var(--sidebar-width);
background-color: var(--sidebar-bg);
color: var(--sidebar-text); padding: 0 24px 24px;
}
.content-sidebar-wrap .sidebar-primary a {
color: var(--sidebar-link);
}
.content-sidebar-wrap .sidebar-primary .widget-title { margin-top: 0;
margin-bottom: 16px;
font-size: var(--sidebar-widget-title-size);
} .sidebar-content .content-sidebar-wrap .content {
order: 2;
}
.sidebar-content .content-sidebar-wrap .sidebar-primary {
order: 1;
} .full-width-content .content-sidebar-wrap .sidebar-primary {
display: none;
}
.full-width-content .content-sidebar-wrap .content {
flex-basis: 100%;
} @media only screen and (max-width: 860px) {
.content-sidebar-wrap {
flex-direction: column;
}
.content-sidebar-wrap .content,
.content-sidebar-wrap .sidebar-primary {
flex-basis: auto;
width: 100%;
order: initial;
} .content-sidebar-wrap .sidebar-primary {
padding: 0 0 24px;
}
} .affpro-recent-posts-list {
list-style: none;
margin: 0;
padding: 0;
}
.affpro-recent-post-item+.affpro-recent-post-item {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--card-border-color);
}
.affpro-recent-post-link {
display: flex;
align-items: center;
gap: 12px;
}
.affpro-recent-post-thumb {
flex-shrink: 0;
line-height: 0;
}
.affpro-recent-post-thumb img {
display: block; object-fit: cover;
border-radius: var(--card-radius);
}
.affpro-recent-post-title {
flex: 1 1 auto;
color: var(--card-title-color);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
} .affpro-related-posts {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid var(--card-border-color);
}
.affpro-related-posts-title {
margin: 0 0 20px;
font-size: 20px;
}
.affpro-related-posts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--card-gap);
}
.affpro-related-post-card {
display: flex;
flex-direction: column;
background-color: var(--card-bg);
border: 1px solid var(--card-border-color);
border-radius: var(--card-radius);
overflow: hidden;
}
.affpro-related-post-thumb {
display: block;
line-height: 0;
}
.affpro-related-post-thumb img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.affpro-related-post-title {
padding: 12px 14px;
color: var(--card-title-color);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
@media only screen and (max-width: 900px) {
.affpro-related-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 500px) {
.affpro-related-posts-grid {
grid-template-columns: 1fr;
}
} .affpro-featured-posts {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--card-gap);
margin-bottom: var(--card-gap);
padding: var(--card-gap);
background-color: var(--featured-posts-bg);
border-radius: var(--card-radius);
}
.affpro-featured-post-main {
display: flex;
flex-direction: column;
overflow: hidden;
}
.affpro-featured-post-main-thumb {
display: block;
line-height: 0;
}
.affpro-featured-post-main-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.affpro-featured-post-main-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.affpro-featured-post-main-title {
color: var(--featured-posts-link);
font-size: 24px;
font-weight: 700;
line-height: 1.3;
}
.affpro-featured-post-main-excerpt {
color: var(--featured-posts-text);
font-size: 15px;
line-height: 1.6;
}
.affpro-featured-posts-side {
display: flex;
flex-direction: column;
}
.affpro-featured-post-side-item {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 0%;
}
.affpro-featured-post-side-item+.affpro-featured-post-side-item {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--card-border-color);
}
.affpro-featured-post-side-thumb {
display: block;
flex-shrink: 0;
line-height: 0;
}
.affpro-featured-post-side-image {
display: block;
width: 96px;
height: 96px;
border-radius: calc(var(--card-radius) - 2px);
object-fit: cover;
}
.affpro-featured-post-side-title {
color: var(--featured-posts-link);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
@media only screen and (max-width: 800px) {
.affpro-featured-posts {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 500px) {
.affpro-featured-post-side-image {
width: 72px;
height: 72px;
}
} .footer-widgets {
background-color: var(--footer-widgets-bg);
color: var(--footer-widgets-text);
}
.footer-widgets .wrap {
display: flex;
flex-wrap: wrap;
gap: var(--footer-widgets-gap);
padding-top: var(--footer-widgets-padding-y);
padding-bottom: var(--footer-widgets-padding-y);
}
.footer-widgets .widget-area {
flex: 1 1 0%;
min-width: 200px;
}
.footer-widgets .widget-title {
color: var(--footer-widgets-link);
}
.footer-widgets a {
color: var(--footer-widgets-link);
} .footer-widgets .widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-widgets .widget ul li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
font-size: var(--footer-widgets-list-font-size);
}
.footer-widgets .widget ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.3em;
width: 12px;
height: 12px;
background-image: var(--footer-widgets-list-arrow);
background-repeat: no-repeat;
background-size: contain;
}
@media only screen and (max-width: 700px) {
.footer-widgets .wrap {
flex-direction: column;
}
} .site-footer {
background-color: var(--site-footer-bg);
color: var(--site-footer-text);
}
.site-footer .wrap {
padding-top: var(--site-footer-padding-y);
padding-bottom: var(--site-footer-padding-y);
}
.site-footer p {
margin: 0;
}
.site-footer a {
color: var(--site-footer-link);
} .entry-comments,
.comment-respond {
margin-top: 40px;
padding: 32px;
background-color: var(--comments-bg);
border: 1px solid var(--comments-border-color);
border-radius: var(--comments-radius);
}
.entry-comments h3,
.comment-reply-title {
margin-top: 0;
font-size: 20px;
}
.comment-reply-title small a {
font-size: 13px;
font-weight: normal;
color: var(--comments-accent);
} .comment-list {
list-style: none;
margin: 24px 0 0;
padding: 0;
}
.comment-list .comment {
padding: 20px 0;
border-bottom: 1px solid var(--comments-border-color);
}
.comment-list .comment:first-child {
padding-top: 0;
}
.comment-list .comment:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.comment-author {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 6px;
}
.comment-author .avatar {
border-radius: 50%;
}
.comment-author-name a {
color: var(--menu-link-color);
font-weight: 600;
text-decoration: none;
} .comment-author .says {
display: none;
}
.comment-meta {
margin: 0 0 10px;
font-size: 12px;
color: #888888;
}
.comment-meta a {
color: inherit;
}
.comment-content p {
margin: 0 0 10px;
}
.comment-content p:last-child {
margin-bottom: 0;
}
.comment-reply-link {
display: inline-block;
margin-top: 10px;
font-size: 13px;
font-weight: 600;
color: var(--comments-accent);
text-decoration: none;
} .comment-form p {
margin: 0 0 18px;
}
.comment-form label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 600;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
box-sizing: border-box;
width: 100%;
padding: 10px 14px;
border: 1px solid var(--comments-border-color);
border-radius: var(--comments-radius);
background-color: #ffffff;
font-family: inherit;
font-size: 14px;
transition: border-color 0.15s ease;
}
.comment-form textarea {
min-height: 130px;
resize: vertical;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
outline: none;
border-color: var(--comments-accent);
}
.comment-form-cookies-consent {
display: flex;
align-items: center;
gap: 8px;
}
.comment-form-cookies-consent input {
width: auto;
}
.form-submit {
margin-bottom: 0;
}
.form-submit .submit {
display: inline-block;
padding: 12px 28px;
border: 0;
border-radius: var(--comments-radius);
background-color: var(--comments-accent);
color: #ffffff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s ease;
}
.form-submit .submit:hover {
opacity: 0.9;
} .cf7-custom-form {
max-width: 600px;
}
.cf7-custom-form label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: #333;
}
.cf7-custom-form input[type="text"],
.cf7-custom-form input[type="email"],
.cf7-custom-form textarea {
width: 100%;
padding: 12px 16px;
margin-top: 6px;
border: 1px solid #ccc;
border-radius: 8px; font-size: 15px;
background: #fff;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cf7-custom-form textarea {
min-height: 150px;
resize: vertical;
}
.cf7-custom-form input:focus,
.cf7-custom-form textarea:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}
.cf7-custom-form input[type="submit"] {
padding: 12px 32px;
border: none;
border-radius: 8px;
background: #0073aa;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.cf7-custom-form input[type="submit"]:hover {
background: #005a87;
} .cf7-custom-form .wpcf7-not-valid-tip {
color: #d63638;
font-size: 13px;
margin-top: 4px;
}