:root{--accent:#ff6f00;--text:#222;--muted:#6b6b6b;--maxW:1100px;  font-family:'Lato', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
*{box-sizing:border-box}
body{margin:0;color:var(--text);font-family:Lato, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;line-height:1.6;background:#fff}
a{color:var(--accent);text-decoration:none}
.container{max-width:var(--maxW);margin:0 auto;padding:20px}
.site-header{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,0.06);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.site-title{font-weight:700;font-size:18px}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;border:1px solid #eee;cursor:pointer}
.site-nav{display:none}
.site-nav.open{display:block;background:#fff;padding:10px 20px}
.site-nav a{display:block;padding:8px 0}
.header-hero{width:100%;height:420px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;position:relative}
.header-hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.5));}
.header-hero .hero-inner{position:relative;z-index:2;max-width:900px;padding:20px}
.header-hero h1{font-size:34px;margin:0 0 12px}
.header-hero p{font-size:18px;margin:0 0 18px;color:rgba(255,255,255,0.95)} .carousel{position:relative;overflow:hidden;width:100%;height:480px}
.carousel-track{display:flex;transition:transform 0.6s ease}
.carousel-slide{flex:0 0 100%;height:480px;background-size:cover;background-position:center}
.carousel-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:8px}
.carousel-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.6);cursor:pointer;opacity:0.9}
.carousel-dot.active{background:var(--accent)} .affiliates-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.affiliates-grid .aff{width:calc(50% - 16px);text-align:center;padding:12px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
@media(min-width:800px){
.site-nav{display:block}
.site-nav a{display:inline-block;margin-left:18px}
.affiliates-grid .aff{width:calc(33.333% - 22px)}
.header-hero{height:520px}
.carousel{height:520px}
.carousel-slide{height:520px}
.header-hero h1{font-size:44px}
} .blog-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:800px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{border-radius:8px;overflow:hidden;border:1px solid #eee;background:#fff} .site-footer{background:#111;color:#fff;padding:30px 20px}
.site-footer .footer-inner{max-width:var(--maxW);margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.footer-links a{color:#fff;display:inline-block;margin-right:14px}
.socials a{display:inline-block;margin-left:8px;color:#fff}
.contact-form input,.contact-form textarea{width:100%;padding:10px;margin:8px 0;border:1px solid #ddd;border-radius:6px}
.contact-form button{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:6px;cursor:pointer} .center{margin-left:auto;margin-right:auto;text-align:center} .site-header {
background-color: #fff;
border-bottom: 1px solid #ddd;
position: sticky;
top: 0;
z-index: 100;
padding: 10px 0;
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
} .site-logo a {
text-decoration: none;
color: #000;
font-size: 1.6rem;
font-weight: bold;
} .main-nav .nav-menu {
list-style: none;
display: flex;
gap: 24px;
margin: 0;
padding: 0;
}
.main-nav .nav-menu ul li {
margin: 0;
padding: 0;
} .main-nav .nav-menu ul li a {
text-decoration: none;
color: #ff6600; font-weight: 500;
font-size: 1rem;
transition: color 0.3s ease;
}
.main-nav .nav-menu ul li a:hover {
color: #cc5200; } .main-nav .nav-menu a {
color: #ff6600; text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
} .main-nav .nav-menu a:hover {
color: #cc5200;
} .main-nav .nav-menu .current-menu-item > a,
.main-nav .nav-menu .current_page_item > a {
color: #ff6600;
border-bottom: 2px solid #ff6600;
}
.menu-main-menu-container ul li a {
color: #ff6600 !important;
}
.menu-main-menu-container ul li a:hover {
color: #cc5200 !important;
} .site-header .main-nav .nav-menu ul li a {
position: relative;
color: var(--accent);
text-decoration: none;
font-weight: 500;
font-size: 1rem;
transition: color 0.3s ease;
} .site-header .main-nav .nav-menu ul li a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px; width: 0;
height: 2px;
background-color: var(--accent);
transition: width 0.3s ease;
} .site-header .main-nav .nav-menu ul li a:hover::after {
width: 100%;
} .site-header .main-nav .nav-menu .current-menu-item > a::after,
.site-header .main-nav .nav-menu .current_page_item > a::after {
width: 100%;
} .site-header .main-nav a,
.site-header .main-nav a:link,
.site-header .main-nav a:visited,
.site-header .main-nav a:hover,
.site-header .main-nav a:active,
.site-header .menu-main-menu-container a,
.site-header .menu-main-menu-container a:link,
.site-header .menu-main-menu-container a:visited,
.site-header .menu-main-menu-container a:hover,
.site-header .menu-main-menu-container a:active {
color: var(--accent) !important; text-decoration: none;
} .site-header .main-nav a,
.site-header .menu-main-menu-container a {
position: relative;
display: inline-block;
padding-bottom: 4px;
} .site-header .main-nav a::after,
.site-header .menu-main-menu-container a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: var(--accent);
transition: width 0.3s ease;
} .site-header .main-nav a:hover::after,
.site-header .menu-main-menu-container a:hover::after {
width: 100%;
} .site-header .main-nav .current-menu-item > a::after,
.site-header .main-nav .current_page_item > a::after,
.site-header .menu-main-menu-container .current-menu-item > a::after,
.site-header .menu-main-menu-container .current_page_item > a::after {
width: 100%;
} .menu-toggle{
display:none;
font-size:1.8rem;
line-height:1;
background:#fff;
border:1px solid #e5e5e5;
border-radius:8px;
padding:8px 12px;
cursor:pointer;
} @media (max-width: 900px){
.menu-toggle{ display:inline-block; }
.header-container{ gap:12px; } .main-nav{
position:absolute;
left:0; right:0;
top:calc(100% + 6px);
background:#fff;
border-top:1px solid #eee;
box-shadow:0 6px 24px rgba(0,0,0,.06);
overflow:hidden; max-height:0;
opacity:0;
transform:translateY(-6px);
pointer-events:none;
transition:
max-height .35s ease,
opacity .25s ease,
transform .25s ease;
}
.main-nav.open{
max-height:70vh; opacity:1;
transform:translateY(0);
pointer-events:auto;
} .main-nav .nav-menu ul{
flex-direction:column;
gap:12px;
padding:14px 20px;
}
.main-nav .nav-menu ul li a{
display:block;
padding:8px 0;
} .main-nav .nav-menu{
margin:0;
}
} @media (max-width: 900px) {
.menu-toggle {
display: inline-block;
}
.main-nav {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
background: #fff;
border-top: 1px solid #eee;
box-shadow: 0 6px 24px rgba(0,0,0,.06);
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition:
max-height .35s ease,
opacity .25s ease,
transform .25s ease;
}
.main-nav.open {
max-height: 70vh;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
} .main-nav .nav-menu ul {
display: flex;
flex-direction: column; align-items: flex-start;
gap: 12px;
margin: 0; 
}
.main-nav .nav-menu ul li {
width: 100%;
}
.main-nav .nav-menu ul li a {
display: block;
width: 100%;
padding: 8px 0;
color: var(--accent);
text-align: left;
}
} @media (max-width: 900px) { .main-nav .nav-menu {
display: block !important;
} .main-nav .nav-menu ul {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
margin: 0 !important;
}
.main-nav .nav-menu ul li {
width: 100% !important;
}
.main-nav .nav-menu ul li a {
display: block !important;
width: 100% !important;
padding: 8px 0 !important;
text-align: left !important;
}
} .menu-toggle {
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
border: none; background: transparent; cursor: pointer;
font-size: 28px; color: var(--accent); padding: 0;
} .menu-toggle:focus {
outline: none;
box-shadow: none;
} .menu-toggle {
display: none; } @media (max-width: 900px) {
.menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: transparent;
cursor: pointer;
font-size: 28px;
color: var(--accent);
padding: 0;
}
} @media (max-width: 900px) { .main-nav {
padding-inline: 24px !important; box-sizing: border-box;
} .main-nav .menu-main-menu-container {
padding-inline: 24px !important;
box-sizing: border-box;
} .main-nav .nav-menu ul {
padding-left: 0 !important;
padding-right: 0 !important;
} .main-nav .nav-menu ul li a {
display: block;
width: 100%;
padding: 10px 0; text-align: left;
}
}
body, h1, h2, h3, h4, h5, h6, p, a, input, textarea, button {
font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
} @media (max-width: 900px) {
body,
.container,
.site-content,
.entry-content,
.page-content {
padding-left: 16px;
padding-right: 16px;
}
p, h1, h2, h3, h4, h5, h6 {
margin-left: 0;
margin-right: 0;
}
<ul style="list-style-position: inside; list-style-type: disc; color:#ff6600; padding:0; margin:0 auto; display:inline-block; text-align:center;">
}