```
```css
/* ./assets/style.css */
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body.treelyHerbalBalanceGuideMainBody {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #0f172a;
color: #e2e8f0;
line-height: 1.6;
overflow-x: hidden;
}
.treelyHerbalBalanceGuideContainer {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Typography */
.treelyHerbalBalanceGuideH1 {
font-size: 3.5rem;
line-height: 1.1;
margin-bottom: 20px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: -1px;
}
.treelyHerbalBalanceGuideH2 {
font-size: 2.5rem;
margin-bottom: 30px;
color: #22d3ee;
text-align: center;
}
.treelyHerbalBalanceGuideSubTitle {
font-size: 1.25rem;
color: #a7f3d0;
margin-bottom: 25px;
}
/* Header & Nav */
.treelyHerbalBalanceGuideHeader {
background: rgba(15, 23, 42, 0.95);
padding: 20px 0;
position: sticky;
top: 0;
z-index: 1000;
}
.treelyHerbalBalanceGuideNavWrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.treelyHerbalBalanceGuideLogo {
font-size: 1.8rem;
font-weight: 800;
color: #22d3ee;
text-transform: lowercase;
font-style: italic;
}
.treelyHerbalBalanceGuideNav .treelyHerbalBalanceGuideMenuList {
display: flex;
list-style: none;
gap: 30px;
}
.treelyHerbalBalanceGuideNavLink {
text-decoration: none;
color: #e2e8f0;
font-weight: 500;
transition: color 0.3s ease;
}
.treelyHerbalBalanceGuideNavLink:hover {
color: #22d3ee;
}
.treelyHerbalBalanceGuideNeonLine {
height: 2px;
background: #22d3ee;
box-shadow: 0 0 10px #22d3ee, 0 0 20px #22d3ee;
}
/* Burger Menu */
.treelyHerbalBalanceGuideCheckbox {
display: none;
}
.treelyHerbalBalanceGuideBurger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
}
.treelyHerbalBalanceGuideBurger span {
width: 25px;
height: 3px;
background-color: #22d3ee;
transition: 0.3s;
}
/* Hero Section */
.treelyHerbalBalanceGuideHeroSection {
padding: 100px 0;
}
.treelyHerbalBalanceGuideHeroGrid {
display: flex;
align-items: center;
gap: 50px;
}
.treelyHerbalBalanceGuideHeroImageWrapper {
flex: 1;
position: relative;
}
.treelyHerbalBalanceGuideHeroImg {
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 0 30px rgba(34, 211, 238, 0.2);
}
.treelyHerbalBalanceGuideBadge {
position: absolute;
top: 20px;
left: 20px;
background: #22d3ee;
color: #0f172a;
padding: 5px 15px;
border-radius: 50px;
font-weight: bold;
font-size: 0.9rem;
box-shadow: 0 0 15px #22d3ee;
}
.treelyHerbalBalanceGuideHeroText {
flex: 1;
}
.treelyHerbalBalanceGuideHeroP {
margin-bottom: 20px;
font-size: 1.1rem;
color: #cbd5e1;
}
.treelyHerbalBalanceGuideCtaBtn {
display: inline-block;
padding: 15px 40px;
background-color: transparent;
color: #22d3ee;
border: 2px solid #22d3ee;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
margin-top: 20px;
transition: 0.3s;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
}
.treelyHerbalBalanceGuideCtaBtn:hover {
background-color: #22d3ee;
color: #0f172a;
box-shadow: 0 0 25px #22d3ee;
}
.treelyHerbalBalanceGuideDisclaimerSmallText {
font-size: 0.8rem;
margin-top: 25px;
color: #64748b;
font-style: italic;
}
/* FAQ Section */
.treelyHerbalBalanceGuideFaqSection {
padding: 80px 0;
background-color: rgba(30, 41, 59, 0.5);
}
.treelyHerbalBalanceGuideFaqList {
max-width: 800px;
margin: 0 auto;
}
.treelyHerbalBalanceGuideFaqItem {
border-bottom: 1px solid rgba(167, 243, 208, 0.2);
padding: 15px 0;
}
.treelyHerbalBalanceGuideFaqSummary {
list-style: none;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
color: #a7f3d0;
padding: 10px 0;
position: relative;
}
.treelyHerbalBalanceGuideFaqSummary::after {
content: '+';
position: absolute;
right: 10px;
color: #22d3ee;
}
.treelyHerbalBalanceGuideFaqItem[open] .treelyHerbalBalanceGuideFaqSummary::after {
content: '-';
}
.treelyHerbalBalanceGuideFaqContent {
padding: 10px 0 20px;
color: #cbd5e1;
}
/* Regular Practice Section */
.treelyHerbalBalanceGuidePracticeSection {
padding: 100px 0;
}
.treelyHerbalBalanceGuidePracticeGrid {
display: flex;
align-items: center;
gap: 60px;
}
.treelyHerbalBalanceGuidePracticeText {
flex: 1.2;
}
.treelyHerbalBalanceGuidePracticeImage {
flex: 0.8;
}
.treelyHerbalBalanceGuideImgRounded {
width: 100%;
height: auto;
border-radius: 50% 20% 50% 20%;
border: 2px solid #22d3ee;
}
.treelyHerbalBalanceGuideHighlight {
background: rgba(34, 211, 238, 0.1);
border-left: 4px solid #22d3ee;
padding: 20px;
font-size: 1.3rem;
font-weight: 700;
margin: 30px 0;
color: #ffffff;
}
.treelyHerbalBalanceGuideBenefitList {
list-style: none;
}
.treelyHerbalBalanceGuideBenefitList li {
padding-left: 30px;
position: relative;
margin-bottom: 15px;
}
.treelyHerbalBalanceGuideBenefitList li::before {
content: '✓';
position: absolute;
left: 0;
color: #22d3ee;
font-weight: bold;
}
/* Expert Quote Section */
.treelyHerbalBalanceGuideExpertSection {
padding: 80px 0;
}
.treelyHerbalBalanceGuideQuoteCard {
background: #1e293b;
padding: 50px;
border-radius: 30px;
border: 1px solid rgba(34, 211, 238, 0.3);
}
.treelyHerbalBalanceGuideQuoteFlex {
display: flex;
align-items: center;
gap: 40px;
}
.treelyHerbalBalanceGuideAvatar {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #22d3ee;
}
.treelyHerbalBalanceGuideQuoteText p {
font-size: 1.4rem;
font-style: italic;
color: #e2e8f0;
margin-bottom: 20px;
}
.treelyHerbalBalanceGuideExpertName {
font-size: 1.5rem;
color: #22d3ee;
margin-bottom: 5px;
}
.treelyHerbalBalanceGuideExpertTitle {
color: #a7f3d0;
font-size: 0.9rem;
text-transform: uppercase;
}
/* 3 Big Text Sections */
.treelyHerbalBalanceGuideTextSection {
padding: 100px 0;
}
.treelyHerbalBalanceGuideDarkerBg {
background-color: rgba(2, 6, 23, 0.8);
}
.treelyHerbalBalanceGuideTextContent {
max-width: 900px;
margin: 0 auto;
}
.treelyHerbalBalanceGuideTextContent p {
margin-bottom: 25px;
font-size: 1.15rem;
}
.treelyHerbalBalanceGuideTextList {
margin: 30px 0;
list-style: none;
}
.treelyHerbalBalanceGuideTextList li {
margin-bottom: 15px;
font-size: 1.1rem;
}
.treelyHerbalBalanceGuideTextList li strong {
color: #22d3ee;
}
.treelyHerbalBalanceGuideImportant {
border: 1px dashed #a7f3d0;
padding: 25px;
border-radius: 10px;
color: #a7f3d0;
font-weight: 500;
}
/* Audience Section */
.treelyHerbalBalanceGuideAudienceSection {
padding: 80px 0;
text-align: center;
}
.treelyHerbalBalanceGuideAudienceIntro {
margin-bottom: 50px;
font-size: 1.2rem;
}
.treelyHerbalBalanceGuideAudienceGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.treelyHerbalBalanceGuideAudienceCard {
background: #1e293b;
padding: 40px;
border-radius: 20px;
transition: transform 0.3s ease;
}
.treelyHerbalBalanceGuideAudienceCard:hover {
transform: translateY(-10px);
}
.treelyHerbalBalanceGuideAudienceIcon {
margin-bottom: 20px;
border-radius: 50%;
}
.treelyHerbalBalanceGuideAudienceCard h3 {
color: #22d3ee;
margin-bottom: 15px;
}
/* Pricing Section */
.treelyHerbalBalanceGuidePricingSection {
padding: 100px 0;
}
.treelyHerbalBalanceGuidePricingGrid {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.treelyHerbalBalanceGuidePriceCard {
background: #1e293b;
padding: 40px;
border-radius: 20px;
width: 350px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
position: relative;
}
.treelyHerbalBalanceGuidePriceFeatured {
border: 2px solid #22d3ee;
box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
transform: scale(1.05);
}
.treelyHerbalBalanceGuidePopularBadge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: #22d3ee;
color: #0f172a;
padding: 5px 20px;
border-radius: 20px;
font-weight: bold;
font-size: 0.8rem;
}
.treelyHerbalBalanceGuidePriceHeader h3 {
font-size: 1.8rem;
margin-bottom: 10px;
}
.treelyHerbalBalanceGuidePriceVal {
font-size: 2.5rem;
font-weight: 800;
color: #22d3ee;
margin-bottom: 30px;
}
.treelyHerbalBalanceGuidePriceList {
list-style: none;
margin-bottom: 40px;
flex-grow: 1;
}
.treelyHerbalBalanceGuidePriceList li {
margin-bottom: 12px;
padding-left: 20px;
position: relative;
}
.treelyHerbalBalanceGuidePriceList li::before {
content: '→';
position: absolute;
left: 0;
color: #22d3ee;
}
.treelyHerbalBalanceGuidePriceBtn {
display: block;
text-align: center;
padding: 12px;
border: 1px solid #22d3ee;
color: #22d3ee;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: 0.3s;
}
.treelyHerbalBalanceGuidePriceBtn:hover {
background: #22d3ee;
color: #0f172a;
}
/* Form Section */
.treelyHerbalBalanceGuideFormSection {
padding: 100px 0;
}
.treelyHerbalBalanceGuideFormBox {
max-width: 600px;
margin: 0 auto;
background: #1e293b;
padding: 50px;
border-radius: 30px;
}
.treelyHerbalBalanceGuideFormSub {
text-align: center;
margin-bottom: 40px;
color: #cbd5e1;
}
.treelyHerbalBalanceGuideInputGroup {
margin-bottom: 25px;
}
.treelyHerbalBalanceGuideInputGroup label {
display: block;
margin-bottom: 8px;
color: #a7f3d0;
}
.treelyHerbalBalanceGuideInputGroup input,
.treelyHerbalBalanceGuideInputGroup textarea {
width: 100%;
padding: 15px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
color: #ffffff;
font-family: inherit;
}
.treelyHerbalBalanceGuideCheckboxGroup {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 30px;
}
.treelyHerbalBalanceGuideCheckboxGroup a {
color: #22d3ee;
}
.treelyHerbalBalanceGuideSubmitBtn {
width: 100%;
padding: 18px;
background-color: #22d3ee;
color: #0f172a;
border: none;
border-radius: 8px;
font-weight: 800;
font-size: 1.1rem;
cursor: pointer;
box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
transition: 0.3s;
}
.treelyHerbalBalanceGuideSubmitBtn:hover {
box-shadow: 0 0 30px #22d3ee;
}
/* Footer */
.treelyHerbalBalanceGuideFooter {
padding: 60px 0;
background: #020617;
text-align: center;
}
.treelyHerbalBalanceGuideFooterEmail {
margin: 20px 0;
}
.treelyHerbalBalanceGuideFooterEmail a {
color: #22d3ee;
}
.treelyHerbalBalanceGuideFooterLinks {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 30px;
}
.treelyHerbalBalanceGuideFooterLinks a {
color: #64748b;
text-decoration: none;
font-size: 0.85rem;
}
.treelyHerbalBalanceGuideFooterLinks a:hover {
color: #e2e8f0;
}
/* Responsive */
@media (max-width: 992px) {
.treelyHerbalBalanceGuideH1 { font-size: 2.5rem; }
.treelyHerbalBalanceGuideHeroGrid,
.treelyHerbalBalanceGuidePracticeGrid,
.treelyHerbalBalanceGuideQuoteFlex {
flex-direction: column;
}
.treelyHerbalBalanceGuideHeroImageWrapper, .treelyHerbalBalanceGuideHeroText,
.treelyHerbalBalanceGuidePracticeText, .treelyHerbalBalanceGuidePracticeImage {
width: 100%;
}
.treelyHerbalBalanceGuidePriceFeatured {
transform: scale(1);
}
}
@media (max-width: 768px) {
.treelyHerbalBalanceGuideBurger {
display: flex;
}
.treelyHerbalBalanceGuideNav {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: 100%;
background: #0f172a;
transition: 0.4s;
}
.treelyHerbalBalanceGuideNav .treelyHerbalBalanceGuideMenuList {
flex-direction: column;
align-items: center;
padding-top: 50px;
}
.treelyHerbalBalanceGuideCheckbox:checked ~ .treelyHerbalBalanceGuideNav {
left: 0;
}
.treelyHerbalBalanceGuidePricingGrid {
flex-direction: column;
align-items: center;
}
.treelyHerbalBalanceGuidePriceCard {
width: 100%;
}
}
```
```html