/** Shopify CDN: Minification failed Line 1463:0 Unexpected "{" Line 1464:2 Unexpected "\"name\"" Line 1468:4 Unexpected "\"typography\"" Line 1469:6 Unexpected "\"headlines\"" Line 1470:8 Expected identifier but found "\"fontFamily\"" Line 1474:7 Unexpected "," Line 1476:8 Expected identifier but found "\"fontFamily\"" Line 1482:5 Unexpected "," Line 1484:6 Expected identifier but found "\"plantaGreen\"" Line 1490:5 Unexpected "," ... and 8 more hidden warnings **/ /* Hide Dawn's default header */ .shopify-section-header, .header-wrapper, header.header, #shopify-section-header { display: none !important; } /* ============================================================ PLANTA LAX — Custom Stylesheet v3 Dawn Theme · plantalax.com Class names match section liquid files exactly. ============================================================ */ /* ─── VARIABLES ─── */ :root { --pl-green: #2F3D2D; --pl-cream: #F2EDE4; --pl-gold: #C4A35A; --pl-text: #1A1A1A; --pl-grey: #8A8578; --pl-offwhite: #FAF8F5; --pl-green-lt: #3d5038; --pl-gold-lt: #d4b46a; } /* ─── BASE ─── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'DM Sans', sans-serif; font-weight: 400; letter-spacing: -0.04em; background: var(--pl-cream); color: var(--pl-text); -webkit-font-smoothing: antialiased; } /* ─── SHARED TYPOGRAPHY ─── */ .pl-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pl-gold); display: block; margin-bottom: 14px; } .pl-h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.12; margin-bottom: 14px; color: var(--pl-text); } .pl-h2 em { color: var(--pl-gold); font-style: italic; } .pl-h2--light { color: var(--pl-cream); } .pl-body { font-size: 0.97rem; line-height: 1.7; color: #5a5a5a; font-weight: 300; max-width: 520px; margin-bottom: 32px; } /* ─── SHARED BUTTONS ─── */ .pl-btn-gold, .pl-btn-green { display: inline-block; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.04em; padding: 18px 40px; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; white-space: nowrap; margin-top: 24px; } .pl-btn-gold { background: var(--pl-gold); color: var(--pl-green); } .pl-btn-gold:hover { background: var(--pl-gold-lt); transform: translateY(-1px); } .pl-btn-green { background: var(--pl-green); color: var(--pl-cream); } .pl-btn-green:hover { background: var(--pl-green-lt); } /* ─── IMAGE SLOT ─── */ .pl-img-slot { background-color: #3a4a38; background-size: cover; background-position: center; position: relative; overflow: hidden; } /* ══════════════════════════════════════════ NAV — uses planta- prefix (new snippet) ══════════════════════════════════════════ */ .planta-nav { background: var(--pl-green); position: sticky; top: 0; z-index: 200; width: 100%; } .planta-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 24px; max-width: 1280px; margin: 0 auto; } .planta-nav__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .planta-nav__logo img { height: 36px; width: auto; object-fit: contain; display: block; } .planta-nav__logo-text { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; color: var(--pl-cream); font-size: 1.1rem; } .planta-nav__links { display: flex; align-items: center; gap: 28px; } .planta-nav__link { color: rgba(242,237,228,0.55); font-size: 0.85rem; text-decoration: none; letter-spacing: -0.04em; transition: color 0.2s; } .planta-nav__link:hover { color: var(--pl-cream); } .planta-nav__cta { background: var(--pl-gold); color: var(--pl-green); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.82rem; padding: 10px 22px; letter-spacing: -0.04em; text-decoration: none; display: inline-block; white-space: nowrap; flex-shrink: 0; transition: background 0.2s; margin-top: 0; } .planta-nav__cta:hover { background: var(--pl-gold-lt); } @media(max-width: 680px) { .planta-nav__inner { height: 56px; padding: 0 16px; } .planta-nav__logo img { height: 28px; } .planta-nav__links { display: none; } .planta-nav__cta { padding: 8px 16px; font-size: 0.78rem; } } /* ══════════════════════════════════════════ HERO — uses planta- prefix (new section) ══════════════════════════════════════════ */ .pl-hero { display: grid; grid-template-columns: 1fr; min-height: 88vh; } @media(min-width: 900px) { .pl-hero { grid-template-columns: 55% 45%; } } .pl-hero__left { background: var(--pl-green); padding: 56px 24px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } @media(min-width: 680px) { .pl-hero__left { padding: 72px 48px 72px 40px; } } .pl-hero__left::before { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(196,163,90,0.08); pointer-events: none; } .pl-hero__h1 { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: clamp(2.6rem, 8vw, 4.6rem); color: var(--pl-cream); line-height: 1.04; margin-bottom: 20px; max-width: 560px; } .pl-hero__h1 em { color: var(--pl-gold); font-style: italic; } .pl-hero__sub { color: rgba(242,237,228,0.68); font-size: clamp(0.95rem, 2vw, 1.05rem); line-height: 1.7; max-width: 420px; margin-bottom: 36px; font-weight: 300; } .pl-hero__sub strong { color: var(--pl-cream); font-weight: 500; } .pl-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; } @media(max-width: 480px) { .pl-hero__buttons { flex-direction: column; } .pl-hero__buttons a { text-align: center; } } .pl-hero__stats { display: grid; grid-template-columns: repeat(3, auto); width: fit-content; border-top: 1px solid rgba(242,237,228,0.1); padding-top: 28px; } .pl-hero__stat + .pl-hero__stat { padding-left: 20px; border-left: 1px solid rgba(242,237,228,0.1); } .pl-hero__stat-num { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 2rem; color: var(--pl-gold); display: block; line-height: 1; margin-bottom: 6px; } .pl-hero__stat-label { font-size: 0.68rem; color: rgba(242,237,228,0.45); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.45; font-weight: 500; } .pl-hero__right { min-height: 300px; overflow: hidden; } .pl-hero__img { /* whatever's already there... plus: */ min-height: 260px; /* add this line */ } .pl-hero__img { min-height: 260px; order: -1; } .pl-hero__img-placeholder { width: 100%; height: 100%; min-height: 300px; background: #3a4a38; display: flex; align-items: center; justify-content: center; padding: 24px; } .pl-hero__img-placeholder-text { font-size: 0.72rem; color: rgba(255,255,255,0.35); text-align: center; line-height: 1.7; text-transform: uppercase; letter-spacing: 0.06em; } /* Hero buttons override */ .pl-hero__buttons .pl-btn-gold { margin-top: 0; } .pl-hero__buttons .pl-btn-ghost { display: inline-block; border: 1px solid rgba(242,237,228,0.3); color: var(--pl-cream); background: transparent; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 0.95rem; padding: 17px 36px; text-decoration: none; letter-spacing: -0.04em; transition: border-color 0.2s, color 0.2s; margin-top: 0; } .pl-hero__buttons .pl-btn-ghost:hover { border-color: var(--pl-gold); color: var(--pl-gold); } /* ══════════════════════════════════════════ TRUST BAR — pl-trust-bar ══════════════════════════════════════════ */ .pl-trust-bar { background: var(--pl-offwhite); padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: center; border-bottom: 1px solid rgba(47,61,45,0.07); } .pl-trust-item { font-size: 0.73rem; font-weight: 600; color: var(--pl-green); text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 8px; } .pl-trust-item::before { content: ''; width: 5px; height: 5px; background: var(--pl-gold); border-radius: 50%; flex-shrink: 0; } @media(max-width: 680px) { .pl-trust-bar { padding: 12px 16px; gap: 8px 18px; } .pl-trust-item { font-size: 0.66rem; } } /* ══════════════════════════════════════════ SOCIAL PROOF — pl-social-proof ══════════════════════════════════════════ */ .pl-social-proof { padding: 72px 24px; background: var(--pl-cream); } .pl-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } @media(min-width: 600px) { .pl-reviews-grid { grid-template-columns: repeat(2, 1fr); } } @media(min-width: 900px) { .pl-reviews-grid { grid-template-columns: repeat(3, 1fr); } } .pl-review-card { background: var(--pl-offwhite); padding: 28px; border-left: 3px solid var(--pl-gold); } .pl-review-stars { color: var(--pl-gold); font-size: 0.82rem; margin-bottom: 10px; letter-spacing: 3px; } .pl-review-text { font-size: 0.92rem; line-height: 1.65; color: var(--pl-text); margin-bottom: 14px; font-style: italic; font-weight: 300; } .pl-review-author { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pl-grey); font-weight: 600; } .pl-pharmacy-img-wrap { position: relative; margin: 0 -24px; overflow: hidden; } .pl-pharmacy-img { width: 100%; height: 320px; object-fit: cover; display: block; } .pl-pharmacy-img-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(47,61,45,0.92) 0%, transparent 100%); padding: 48px 32px 24px; font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 1.4rem; color: var(--pl-cream); } .pl-pharmacy-trust-bar { background: var(--pl-green); padding: 28px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; } .pl-ptb-text { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 1.25rem; color: var(--pl-cream); flex: 1; min-width: 200px; } .pl-ptb-detail { font-size: 0.76rem; color: rgba(242,237,228,0.4); margin-top: 6px; display: block; font-weight: 300; } /* ══════════════════════════════════════════ QUIZ CTA — pl-quiz-cta ══════════════════════════════════════════ */ .pl-quiz-cta { background: var(--pl-green); text-align: center; padding: 80px 24px; } .pl-quiz-cta .pl-label { text-align: center; } .pl-quiz-cta .pl-h2--light { text-align: center; max-width: 560px; margin: 0 auto 16px; } .pl-quiz-cta p { color: rgba(242,237,228,0.6); font-size: 1rem; max-width: 440px; margin: 0 auto; line-height: 1.7; font-weight: 300; } .pl-quiz-timer { display: block; font-size: 0.75rem; color: rgba(242,237,228,0.35); margin-top: 16px; letter-spacing: 0.08em; text-transform: uppercase; } /* ══════════════════════════════════════════ PROTOCOL — pl-protocol ══════════════════════════════════════════ */ .pl-protocol { padding: 72px 24px; background: var(--pl-offwhite); } .pl-protocol__header { max-width: 580px; margin-bottom: 40px; } .pl-protocol-grid { display: grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 32px; } @media(min-width: 680px) { .pl-protocol-grid { grid-template-columns: repeat(3, 1fr); } } .pl-protocol-card { background: var(--pl-cream); padding: 36px 28px 28px; border-top: 4px solid transparent; transition: border-color 0.2s; } .pl-protocol-card:hover { border-color: var(--pl-gold); } .pl-protocol-card--featured { border-color: var(--pl-gold); } .pl-protocol-card__time { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 4rem; color: var(--pl-gold); line-height: 1; margin-bottom: 2px; } .pl-protocol-card__unit { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pl-grey); font-weight: 600; margin-bottom: 14px; display: block; } .pl-protocol-card__name { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 1.2rem; color: var(--pl-green); margin-bottom: 10px; } .pl-protocol-card__desc { font-size: 0.88rem; color: #5a5a5a; line-height: 1.65; margin-bottom: 14px; } .pl-protocol-card__for { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pl-gold); font-weight: 600; } /* ══════════════════════════════════════════ HOW IT WORKS — pl-how ══════════════════════════════════════════ */ .pl-how { padding: 72px 24px; background: var(--pl-cream); } .pl-how__header { max-width: 560px; margin-bottom: 48px; } .pl-steps-grid { display: grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 40px; } @media(min-width: 680px) { .pl-steps-grid { grid-template-columns: repeat(3, 1fr); } } .pl-step-card { background: var(--pl-offwhite); overflow: hidden; } .pl-step-card__img { width: 100%; height: 220px; } .pl-step-card__content { padding: 24px 24px 28px; } .pl-step-card__num { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 2.4rem; color: rgba(47,61,45,0.07); line-height: 1; margin-bottom: 10px; letter-spacing: -0.02em; } .pl-step-card__title { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 1.1rem; color: var(--pl-green); margin-bottom: 10px; } .pl-step-card__text { font-size: 0.88rem; color: #5a5a5a; line-height: 1.65; font-weight: 300; } /* ══════════════════════════════════════════ SCIENCE — pl-science ══════════════════════════════════════════ */ .pl-science { padding: 72px 24px; background: var(--pl-green); } .pl-science .pl-label { } .pl-science__lead { font-size: 0.97rem; color: rgba(242,237,228,0.6); max-width: 520px; margin-bottom: 48px; line-height: 1.7; font-weight: 300; } .pl-science__split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media(min-width: 820px) { .pl-science__split { grid-template-columns: 1fr 1fr; gap: 64px; } } .pl-science-cards { display: flex; flex-direction: column; gap: 16px; } .pl-science-card { border: 1px solid rgba(196,163,90,0.18); padding: 24px; } .pl-science-card__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--pl-gold); font-weight: 600; margin-bottom: 8px; display: block; } .pl-science-card__title { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 1.05rem; color: var(--pl-cream); margin-bottom: 8px; line-height: 1.3; } .pl-science-card__text { font-size: 0.85rem; color: rgba(242,237,228,0.5); line-height: 1.65; } .pl-science__img { width: 100%; height: 400px; } @media(min-width: 820px) { .pl-science__img { height: 480px; } } .pl-science__cta { margin-top: 40px; } /* ══════════════════════════════════════════ CREDENTIALS — pl-creds ══════════════════════════════════════════ */ .pl-creds { padding: 72px 24px; background: var(--pl-offwhite); } .pl-creds-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin: 40px 0; } @media(min-width: 680px) { .pl-creds-grid { grid-template-columns: repeat(3, 1fr); } } .pl-cred-tile { background: var(--pl-cream); padding: 28px 22px; text-align: center; } .pl-cred-tile__icon { font-size: 1.5rem; margin-bottom: 12px; display: block; } .pl-cred-tile__title { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 0.95rem; color: var(--pl-green); margin-bottom: 8px; line-height: 1.3; } .pl-cred-tile__detail { font-size: 0.75rem; color: var(--pl-grey); line-height: 1.55; } /* ══════════════════════════════════════════ HERBS — pl-herbs ══════════════════════════════════════════ */ .pl-herbs { padding: 72px 24px; background: var(--pl-green); } .pl-herbs__lead { font-size: 0.97rem; color: rgba(242,237,228,0.55); max-width: 480px; margin-bottom: 40px; line-height: 1.7; font-weight: 300; } .pl-herbs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-bottom: 32px; } @media(min-width: 680px) { .pl-herbs-grid { grid-template-columns: repeat(4, 1fr); } } .pl-herb-tile { background: rgba(255,255,255,0.04); border: 1px solid rgba(196,163,90,0.1); padding: 20px 18px; } .pl-herb-tile__pct { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 1.5rem; color: var(--pl-gold); display: block; margin-bottom: 4px; } .pl-herb-tile__name { font-size: 0.88rem; color: var(--pl-cream); font-weight: 500; margin-bottom: 5px; display: block; } .pl-herb-tile__action { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .pl-tag--stimulate { color: var(--pl-gold); } .pl-tag--soften { color: #9eb87a; } .pl-tag--soothe { color: #9eb8d4; } .pl-herbs-legend { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(196,163,90,0.1); } .pl-herbs-legend__item { display: flex; align-items: center; gap: 10px; } .pl-herbs-legend__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .pl-herbs-legend__text { font-size: 0.78rem; color: rgba(242,237,228,0.5); line-height: 1.5; } .pl-herbs-legend__text strong { color: rgba(242,237,228,0.8); font-weight: 500; } /* ══════════════════════════════════════════ FINAL CTA — pl-final-cta ══════════════════════════════════════════ */ .pl-final-cta { display: grid; grid-template-columns: 1fr; background: var(--pl-cream); } @media(min-width: 820px) { .pl-final-cta { grid-template-columns: 1fr 1fr; } } .pl-final-cta__img { min-height: 360px; } .pl-final-cta__copy { padding: 64px 48px; display: flex; flex-direction: column; justify-content: center; } @media(max-width: 680px) { .pl-final-cta__copy { padding: 48px 20px; } } .pl-price-main { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 2.4rem; color: var(--pl-green); display: block; } .pl-price-per { font-size: 0.78rem; color: var(--pl-grey); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; display: block; margin-bottom: 24px; } .pl-delivery-note { font-size: 0.78rem; color: var(--pl-grey); margin-top: 14px; display: block; } /* ══════════════════════════════════════════ FOOTER — planta-footer prefix (new snippet) ══════════════════════════════════════════ */ .planta-footer { background: var(--pl-green); padding: 48px 24px 32px; color: rgba(242,237,228,0.45); } .planta-footer__inner { max-width: 1100px; margin: 0 auto; } .planta-footer__top { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; } @media(min-width: 680px) { .planta-footer__top { grid-template-columns: 2fr 1fr 1fr; } } .planta-footer__logo { height: 32px; width: auto; display: block; margin-bottom: 12px; } .planta-footer__logo-text { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 1.1rem; color: var(--pl-cream); display: block; margin-bottom: 10px; } .planta-footer__desc { font-size: 0.8rem; line-height: 1.7; max-width: 260px; } .planta-footer__col-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pl-gold); font-weight: 600; margin-bottom: 14px; } .planta-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .planta-footer__links a { font-size: 0.83rem; color: rgba(242,237,228,0.45); text-decoration: none; transition: color 0.2s; letter-spacing: -0.04em; } .planta-footer__links a:hover { color: var(--pl-cream); } .planta-footer__bottom { border-top: 1px solid rgba(242,237,228,0.07); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; } .planta-footer__reg { font-size: 0.7rem; letter-spacing: 0.02em; line-height: 1.7; } .planta-footer__copy { font-size: 0.7rem; } @media(max-width: 680px) { .planta-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .planta-footer { padding: 40px 20px 24px; } } /* ══════════════════════════════════════════ MOBILE ══════════════════════════════════════════ */ @media(max-width: 680px) { .pl-protocol-grid { grid-template-columns: 1fr; } .pl-steps-grid { grid-template-columns: 1fr; } .pl-reviews-grid { grid-template-columns: 1fr; } .pl-creds-grid { grid-template-columns: repeat(2, 1fr); } .pl-herbs-grid { grid-template-columns: repeat(2, 1fr); } .pl-science__split { grid-template-columns: 1fr; } .pl-final-cta { grid-template-columns: 1fr; } .pl-pharmacy-trust-bar { flex-direction: column; align-items: flex-start; gap: 16px; } .pl-protocol-card { padding: 28px 20px 20px; } } /* ══════════════════════════════════════════ VISUALLY HIDDEN ══════════════════════════════════════════ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* --- MOBILE STICKY BAR FIX --- */ .pl-mobile-bar { display: none; /* This hides it on your computer */ } @media(max-width: 680px) { .pl-mobile-bar { display: flex; /* This makes it appear only on phones */ position: fixed; bottom: 0; left: 0; right: 0; background: var(--pl-green); padding: 12px 16px; z-index: 200; border-top: 1px solid rgba(196, 163, 90, 0.25); gap: 12px; align-items: center; justify-content: space-between; } .pl-mobile-bar__price { color: var(--pl-cream); font-family: 'Instrument Serif', serif; font-size: 1.2rem; } .pl-mobile-bar .pl-btn-gold { margin-top: 0; padding: 10px 20px; font-size: 0.9rem; flex: 1; text-align: center; } } /* ══════════════════════════════════════════ PRODUCT PAGE — pl-product ══════════════════════════════════════════ */ .pl-product { max-width: 1100px; margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: 1fr; gap: 48px; } @media(min-width: 820px) { .pl-product { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; } } .pl-product__main-img { background: #3a4a38; width: 100%; aspect-ratio: 1; overflow: hidden; } .pl-product__img { width: 100%; height: 100%; object-fit: cover; display: block; } .pl-product__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; } .pl-product__thumb { border: 2px solid transparent; cursor: pointer; opacity: 0.6; padding: 0; background: none; transition: 0.2s; } .pl-product__thumb.active, .pl-product__thumb:hover { border-color: var(--pl-gold); opacity: 1; } .pl-product__title { font-family: 'Instrument Serif', serif; font-size: clamp(2rem, 5vw, 2.8rem); color: var(--pl-green); line-height: 1.08; margin-bottom: 8px; } .pl-product__subtitle { font-size: 1rem; color: var(--pl-grey); line-height: 1.6; margin-bottom: 24px; font-weight: 300; } .pl-product__rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(47,61,45,0.1); } .pl-product__stars { color: var(--pl-gold); letter-spacing: 2px; } .pl-product__price { font-family: 'Instrument Serif', serif; font-size: 2.2rem; color: var(--pl-green); display: block; } .pl-product__price-per { font-size: 0.78rem; color: var(--pl-grey); margin-top: 4px; display: block; margin-bottom: 28px; } /* Minutes Selector */ .pl-product__minutes-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; color: var(--pl-green); margin-bottom: 12px; display: block; } .pl-product__minutes-selected { color: var(--pl-gold); font-style: italic; font-family: 'Instrument Serif', serif; font-size: 0.9rem; margin-left: 8px; } .pl-product__minutes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .pl-product__min-opt { border: 1px solid rgba(47,61,45,0.15); background: var(--pl-offwhite); padding: 16px 8px; text-align: center; cursor: pointer; transition: 0.2s; } .pl-product__min-opt.active { border-color: var(--pl-gold); background: white; } .pl-product__min-num { font-family: 'Instrument Serif', serif; font-size: 2rem; color: var(--pl-gold); display: block; line-height: 1; } .pl-product__min-name { font-size: 0.72rem; color: var(--pl-green); font-weight: 600; display: block; margin-top: 5px; } .pl-product__atc { background: var(--pl-gold); color: var(--pl-green); font-weight: 700; width: 100%; height: 56px; border: none; cursor: pointer; font-size: 1rem; } /* --- ACCORDION CHARACTER UPDATE --- */ .pl-accordion__trigger { width: 100%; background: none; border: none; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; /* UPDATED: Instrument Serif, Bigger, Not Bold */ font-family: 'Instrument Serif', serif !important; font-size: 1.35rem !important; font-weight: 400 !important; color: #2F3D2D !important; letter-spacing: -0.01em; } .pl-accordion__icon { color: #C4A35A; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1.1rem; } .pl-accordion__body { padding-bottom: 20px; font-size: 0.95rem; line-height: 1.6; color: #5a5a5a; font-weight: 300; } .pl-product__buy-actions { display: flex; gap: 12px; margin: 24px 0; } .pl-product__qty { display: flex; align-items: center; border: 1px solid rgba(47,61,45,0.2); } .pl-product__qty-btn { width: 40px; height: 56px; background: none; border: none; cursor: pointer; font-size: 1.2rem; } .pl-product__qty-num { width: 40px; text-align: center; border: none; font-weight: 600; -moz-appearance: textfield; } .pl-product__qty-num::-webkit-outer-spin-button, .pl-product__qty-num::-webkit-inner-spin-button { -webkit-appearance: none; } /* --- PRODUCT PAGE POLISH --- */ .pl-product__title { font-family: 'Instrument Serif', serif !important; font-size: 3.2rem !important; /* Larger, more elegant title */ letter-spacing: -0.02em; margin-bottom: 12px; } .pl-product__subtitle { font-size: 1.1rem; color: var(--pl-grey); margin-bottom: 24px; } .pl-product__rating-row { margin-bottom: 40px; /* Adds the breathing room seen in reference */ display: flex; align-items: center; gap: 12px; } /* Price Styling to match reference */ .pl-product__price { font-family: 'Instrument Serif', serif !important; font-size: 3rem !important; color: var(--pl-green); line-height: 1; margin-bottom: 4px; display: block; } /* Selected Minute Box Fix */ .pl-product__min-opt.active { border: 2px solid var(--pl-gold) !important; /* Thick gold border from reference */ background: white; position: relative; } /* Add the small checkmark from reference */ .pl-product__min-opt.active::after { content: '✓'; position: absolute; top: 8px; right: 8px; color: var(--pl-gold); font-size: 0.7rem; font-weight: bold; } /* --- FINAL PRODUCT POLISH --- */ /* 1. Make the Title huge and elegant */ .pl-product__title { font-family: 'Instrument Serif', serif !important; font-size: 4.2rem !important; /* Increased size for that high-end look */ font-weight: 400; line-height: 1.0; letter-spacing: -0.03em; margin-top: 10px; margin-bottom: 20px; } /* 2. Fix the Price sizing */ .pl-product__price { font-family: 'Instrument Serif', serif !important; font-size: 3.5rem !important; font-weight: 400; color: var(--pl-green); display: flex; align-items: baseline; gap: 10px; } .pl-product__price small { font-size: 1.2rem; font-weight: 600; font-family: 'DM Sans', sans-serif; letter-spacing: 0.05em; } /* 3. Shrink the Minute Boxes to match reference */ .pl-product__minutes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 500px; /* Constrains the width */ } .pl-product__min-opt { padding: 12px 10px !important; /* Thinner padding */ border: 1px solid rgba(0,0,0,0.1); background: transparent; min-height: 140px; /* Shorter boxes */ } .pl-product__min-num { font-size: 2.2rem !important; margin-bottom: 0; } .pl-product__min-name { font-size: 0.75rem !important; text-transform: none; font-weight: 700; } .pl-product__min-desc { font-size: 0.65rem !important; line-height: 1.3; opacity: 0.7; } /* 4. Active State Polish */ .pl-product__min-opt.active { border: 2px solid #C4A35A !important; background: #fff !important; box-shadow: 0 4px 20px rgba(0,0,0,0.05); } /* --- TYPOGRAPHY CHARACTER FIX --- */ body { font-family: 'DM Sans', sans-serif; letter-spacing: -0.04em; /* Tight letter spacing for premium feel */ -webkit-font-smoothing: antialiased; } .pl-product__title { font-family: 'Instrument Serif', serif !important; font-size: 4.8rem !important; /* Huge authority title */ line-height: 0.95; letter-spacing: -0.03em; color: #2F3D2D; margin-bottom: 12px; } /* --- THE "CLAUDE" PRICE BLOCK --- */ .pl-product__price-block { margin: 32px 0; display: flex; flex-direction: column; } .pl-product__price { font-family: 'Instrument Serif', serif !important; font-size: 4.5rem !important; color: #2F3D2D; display: flex; align-items: baseline; line-height: 1; } .pl-product__price small { font-family: 'DM Sans', sans-serif; font-size: 1.2rem; font-weight: 700; margin-right: 8px; letter-spacing: 0.05em; } /* --- MINUTE CARDS (CLICKABLE STYLES) --- */ .pl-product__minutes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; } .pl-product__min-opt { background: transparent; border: 1px solid rgba(47, 61, 45, 0.1); padding: 24px 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; text-align: center; } .pl-product__min-opt.active { background: white; border: 1px solid #C4A35A !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } .pl-product__min-num { font-family: 'Instrument Serif', serif; font-size: 2.8rem; color: #C4A35A; line-height: 1; } /* --- PILLS (GMP CERTIFIED, ETC) --- */ .pl-product__trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; } .pl-product__trust-pill { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 12px; border: 1px solid rgba(47, 61, 45, 0.1); color: #2F3D2D; display: flex; align-items: center; } .pl-product__trust-pill::before { content: '▪'; color: #C4A35A; margin-right: 6px; } /* ══════════════════════════════════════════ PRODUCT PAGE — New Design (Add to planta-lax.css) ══════════════════════════════════════════ */ .pl-product-hero { background: var(--pl-cream); display: grid; grid-template-columns: 1fr; gap: 48px; padding: 48px 24px; max-width: 1200px; margin: 0 auto; } @media(min-width: 900px) { .pl-product-hero { grid-template-columns: 1fr 1fr; gap: 72px; padding: 72px 48px; } } /* Gallery */ .pl-product-hero__gallery { position: sticky; top: 24px; height: fit-content; } .pl-product-hero__main-img { width: 100%; aspect-ratio: 1; margin-bottom: 12px; border-radius: 4px; overflow: hidden; } .pl-product-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .pl-product-hero__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .pl-product-hero__thumb { background: none; border: 2px solid transparent; padding: 0; cursor: pointer; opacity: 0.5; transition: all 0.2s; border-radius: 4px; overflow: hidden; } .pl-product-hero__thumb.active { opacity: 1; border-color: var(--pl-gold); } .pl-product-hero__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } /* Product Info */ .pl-product-hero__info { padding-top: 12px; } .pl-product-hero__eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pl-gold); display: block; margin-bottom: 16px; } .pl-product-hero__title { font-family: 'Instrument Serif', serif; font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--pl-text); margin-bottom: 16px; } .pl-product-hero__subtitle { font-size: 1.05rem; line-height: 1.6; color: #666; margin-bottom: 24px; font-weight: 300; } .pl-product-hero__rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(47,61,45,0.08); } .pl-product-hero__stars { color: var(--pl-gold); letter-spacing: 2px; font-size: 0.9rem; } .pl-product-hero__rating-text { font-size: 0.9rem; color: var(--pl-text); } .pl-product-hero__heritage { font-size: 0.9rem; color: var(--pl-grey); } .pl-product-hero__price-block { margin-bottom: 32px; } .pl-product-hero__price { font-family: 'Instrument Serif', serif; font-size: 3.5rem; font-weight: 400; letter-spacing: -0.03em; color: var(--pl-text); line-height: 1; margin-bottom: 8px; } .pl-product-hero__price-detail { font-size: 0.875rem; color: var(--pl-grey); } /* Minutes Selector */ .pl-product-hero__minutes { margin-bottom: 32px; } .pl-product-hero__minutes-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pl-text); margin-bottom: 16px; } #pl-minutes-selected { color: var(--pl-gold); font-style: italic; font-family: 'Instrument Serif', serif; font-size: 0.9rem; text-transform: none; letter-spacing: -0.01em; } .pl-product-hero__minutes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } .pl-product-hero__minute-card { background: white; border: 1px solid rgba(47,61,45,0.1); padding: 20px 16px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; min-height: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .pl-product-hero__minute-card:hover { border-color: var(--pl-gold); box-shadow: 0 4px 16px rgba(0,0,0,0.04); } .pl-product-hero__minute-card.active { border-color: var(--pl-gold); background: white; box-shadow: 0 4px 20px rgba(196,163,90,0.12); } .pl-product-hero__minute-check { position: absolute; top: 12px; right: 12px; color: var(--pl-gold); font-size: 0.85rem; font-weight: 700; display: none; } .pl-product-hero__minute-card.active .pl-product-hero__minute-check { display: block; } .pl-product-hero__minute-num { font-family: 'Instrument Serif', serif; font-size: 3rem; font-weight: 400; color: var(--pl-gold); line-height: 1; margin-bottom: 4px; } .pl-product-hero__minute-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pl-grey); margin-bottom: 12px; } .pl-product-hero__minute-title { font-size: 0.875rem; font-weight: 600; color: var(--pl-text); margin-bottom: 6px; } .pl-product-hero__minute-desc { font-size: 0.75rem; line-height: 1.4; color: #999; font-weight: 300; } .pl-product-hero__quiz-link { font-size: 0.875rem; color: var(--pl-gold); text-decoration: none; display: inline-block; transition: opacity 0.2s; } .pl-product-hero__quiz-link:hover { opacity: 0.7; } /* Buy Row */ .pl-product-hero__buy-row { display: flex; gap: 12px; margin-bottom: 40px; } .pl-product-hero__qty { display: flex; border: 1px solid rgba(47,61,45,0.15); background: white; } .pl-product-hero__qty-btn { width: 48px; height: 56px; border: none; background: none; font-size: 1.25rem; color: var(--pl-text); cursor: pointer; transition: background 0.2s; } .pl-product-hero__qty-btn:hover { background: rgba(47,61,45,0.03); } .pl-product-hero__qty-input { width: 56px; height: 56px; border: none; border-left: 1px solid rgba(47,61,45,0.15); border-right: 1px solid rgba(47,61,45,0.15); text-align: center; font-size: 1rem; font-weight: 600; -moz-appearance: textfield; } .pl-product-hero__qty-input::-webkit-outer-spin-button, .pl-product-hero__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; } .pl-product-hero__atc { flex: 1; background: var(--pl-gold); color: var(--pl-green); border: none; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; cursor: pointer; transition: all 0.2s; height: 56px; } .pl-product-hero__atc:hover { background: var(--pl-gold-lt); transform: translateY(-1px); } /* Accordion */ .pl-product-hero__accordion { border-top: 1px solid rgba(47,61,45,0.08); } .pl-product-hero__acc-item { border-bottom: 1px solid rgba(47,61,45,0.08); } .pl-product-hero__acc-trigger { width: 100%; background: none; border: none; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: 'Instrument Serif', serif; font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; color: var(--pl-text); text-align: left; } .pl-product-hero__acc-icon { color: var(--pl-gold); font-family: 'DM Sans', sans-serif; font-size: 1.5rem; font-weight: 300; } .pl-product-hero__acc-body { display: none; padding-bottom: 24px; font-size: 0.95rem; line-height: 1.65; color: #666; } .pl-product-hero__acc-body p { margin: 0 0 12px 0; } .pl-product-hero__acc-body p:last-child { margin-bottom: 0; } .pl-product-hero__acc-body strong { font-weight: 600; color: var(--pl-text); } /* Mobile */ @media(max-width: 900px) { .pl-product-hero__minutes-grid { grid-template-columns: 1fr; } .pl-product-hero__minute-card { min-height: auto; padding: 16px; } .pl-product-hero__buy-row { flex-direction: column; } .pl-product-hero__qty { width: fit-content; } } /* Hamburger — hidden on desktop */ .planta-nav__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 100; } .planta-nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--pl-cream, #F2EDE4); transition: transform 0.25s ease, opacity 0.25s ease; } /* Animate to X when open */ .planta-nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .planta-nav__hamburger.is-open span:nth-child(2) { opacity: 0; } .planta-nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 749px) { .planta-nav__hamburger { display: flex; } .planta-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--pl-green, #2F3D2D); flex-direction: column; padding: 16px 24px 24px; gap: 0; z-index: 99; } .planta-nav__links.is-open { display: flex; } .planta-nav__link { padding: 14px 0; border-bottom: 1px solid rgba(242, 237, 228, 0.15); font-size: 16px; } /* Hide desktop CTA in nav — it's still visible in the header bar */ .planta-nav__cta { display: none; } } /* ══════════════════════════════════════════ STICKY HEADER — Scroll Behavior ══════════════════════════════════════════ */ .planta-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: transform 0.3s ease-in-out, box-shadow 0.3s; } /* Hide when scrolling down */ .planta-nav.scroll-down { transform: translateY(-100%); } /* Show when scrolling up */ .planta-nav.scroll-up { transform: translateY(0); box-shadow: 0 2px 12px rgba(0,0,0,0.08); } /* Push content down so header doesn't overlap */ body { padding-top: 64px; } @media(max-width: 680px) { body { padding-top: 56px; } } { "name": "Planta Lax Journal Theme", "version": "1.0.0", "description": "Custom theme settings for Planta Lax Tea blog pages", "settings": { "typography": { "headlines": { "fontFamily": "'Instrument Serif', Georgia, serif", "fontWeight": "400", "letterSpacing": "-0.02em", "lineHeight": "1.2" }, "body": { "fontFamily": "'Arsenal', -apple-system, BlinkMacSystemFont, sans-serif", "fontSize": "17px", "fontWeight": "400", "letterSpacing": "0", "lineHeight": "1.7" } }, "colors": { "plantaGreen": "#2F3D2D", "plantaCream": "#F2EDE4", "plantaGold": "#C4A35A", "deepText": "#1A1A1A", "warmGrey": "#8A8578", "offWhite": "#FAF8F5" }, "layout": { "maxWidth": "900px", "padding": "24px", "sectionSpacing": "80px" } }, "customCSS": "/* Planta Lax Journal Blog Theme */\n\n/* Google Fonts Import */\n@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Arsenal:wght@400;700&display=swap');\n\n/* CSS Variables */\n:root {\n --planta-green: #2F3D2D;\n --planta-cream: #F2EDE4;\n --planta-gold: #C4A35A;\n --deep-text: #1A1A1A;\n --warm-grey: #8A8578;\n --off-white: #FAF8F5;\n}\n\n/* Blog Article Container */\n.article-template,\n.blog-post {\n max-width: 900px;\n margin: 0 auto;\n padding: 60px 24px;\n background: var(--off-white);\n}\n\n/* Article Header */\n.article-template__header,\n.blog-post__header {\n margin-bottom: 48px;\n text-align: left;\n border-bottom: 2px solid rgba(47, 61, 45, 0.1);\n padding-bottom: 32px;\n}\n\n/* Article Title */\n.article-template__title,\n.blog-post__title,\n.article-template h1 {\n font-family: 'Instrument Serif', Georgia, serif;\n font-size: clamp(32px, 5vw, 48px);\n font-weight: 400;\n letter-spacing: -0.02em;\n line-height: 1.2;\n color: var(--planta-green);\n margin-bottom: 20px;\n}\n\n/* Article Meta */\n.article-template__meta,\n.blog-post__meta {\n font-family: 'Arsenal', sans-serif;\n font-size: 15px;\n color: var(--warm-grey);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n font-weight: 700;\n}\n\n/* Article Body */\n.article-template__content,\n.blog-post__content,\n.rte {\n font-family: 'Arsenal', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 17px;\n line-height: 1.7;\n color: var(--deep-text);\n}\n\n/* Headings in Article */\n.article-template__content h2,\n.blog-post__content h2,\n.rte h2 {\n font-family: 'Instrument Serif', Georgia, serif;\n font-size: clamp(28px, 4vw, 36px);\n font-weight: 400;\n letter-spacing: -0.02em;\n line-height: 1.3;\n color: var(--planta-green);\n margin-top: 48px;\n margin-bottom: 24px;\n}\n\n.article-template__content h3,\n.blog-post__content h3,\n.rte h3 {\n font-family: 'Instrument Serif', Georgia, serif;\n font-size: clamp(22px, 3vw, 28px);\n font-weight: 400;\n letter-spacing: -0.01em;\n line-height: 1.4;\n color: var(--planta-green);\n margin-top: 40px;\n margin-bottom: 20px;\n}\n\n.article-template__content h4,\n.blog-post__content h4,\n.rte h4 {\n font-family: 'Arsenal', sans-serif;\n font-size: 20px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 1.5;\n color: var(--planta-green);\n margin-top: 32px;\n margin-bottom: 16px;\n}\n\n/* Paragraphs */\n.article-template__content p,\n.blog-post__content p,\n.rte p {\n margin-bottom: 24px;\n font-size: 17px;\n line-height: 1.7;\n}\n\n/* Links */\n.article-template__content a,\n.blog-post__content a,\n.rte a {\n color: var(--planta-green);\n text-decoration: underline;\n text-decoration-color: var(--planta-gold);\n text-decoration-thickness: 2px;\n text-underline-offset: 3px;\n transition: color 0.3s ease;\n}\n\n.article-template__content a:hover,\n.blog-post__content a:hover,\n.rte a:hover {\n color: var(--planta-gold);\n}\n\n/* Lists */\n.article-template__content ul,\n.blog-post__content ul,\n.rte ul,\n.article-template__content ol,\n.blog-post__content ol,\n.rte ol {\n margin-bottom: 32px;\n padding-left: 32px;\n}\n\n.article-template__content li,\n.blog-post__content li,\n.rte li {\n margin-bottom: 12px;\n line-height: 1.7;\n}\n\n/* Blockquotes */\n.article-template__content blockquote,\n.blog-post__content blockquote,\n.rte blockquote {\n border-left: 4px solid var(--planta-gold);\n padding: 24px 32px;\n margin: 40px 0;\n background: linear-gradient(135deg, rgba(196, 163, 90, 0.1) 0%, rgba(196, 163, 90, 0.05) 100%);\n font-style: italic;\n color: var(--deep-text);\n border-radius: 4px;\n}\n\n/* Tables */\n.article-template__content table,\n.blog-post__content table,\n.rte table {\n width: 100%;\n border-collapse: collapse;\n margin: 40px 0;\n background: #fff;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n}\n\n.article-template__content thead,\n.blog-post__content thead,\n.rte thead {\n background: var(--planta-green);\n color: var(--off-white);\n}\n\n.article-template__content th,\n.blog-post__content th,\n.rte th {\n padding: 16px;\n text-align: left;\n font-family: 'Arsenal', sans-serif;\n font-weight: 700;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.article-template__content td,\n.blog-post__content td,\n.rte td {\n padding: 16px;\n border-bottom: 1px solid rgba(47, 61, 45, 0.08);\n font-size: 15px;\n line-height: 1.6;\n}\n\n.article-template__content tbody tr:hover,\n.blog-post__content tbody tr:hover,\n.rte tbody tr:hover {\n background: rgba(196, 163, 90, 0.05);\n}\n\n/* Images */\n.article-template__content img,\n.blog-post__content img,\n.rte img {\n max-width: 100%;\n height: auto;\n border-radius: 8px;\n margin: 32px 0;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n}\n\n/* Strong/Bold */\n.article-template__content strong,\n.blog-post__content strong,\n.rte strong {\n font-weight: 700;\n color: var(--planta-green);\n}\n\n/* Emphasis/Italic */\n.article-template__content em,\n.blog-post__content em,\n.rte em {\n font-style: italic;\n color: var(--deep-text);\n}\n\n/* Code Blocks */\n.article-template__content code,\n.blog-post__content code,\n.rte code {\n background: var(--planta-cream);\n padding: 2px 6px;\n border-radius: 3px;\n font-family: 'Courier New', monospace;\n font-size: 15px;\n color: var(--planta-green);\n}\n\n.article-template__content pre,\n.blog-post__content pre,\n.rte pre {\n background: var(--planta-cream);\n padding: 24px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 32px 0;\n border: 1px solid rgba(47, 61, 45, 0.1);\n}\n\n/* Horizontal Rules */\n.article-template__content hr,\n.blog-post__content hr,\n.rte hr {\n border: none;\n border-top: 2px solid rgba(47, 61, 45, 0.1);\n margin: 48px 0;\n}\n\n/* CTA Box */\n.article-cta {\n background: linear-gradient(135deg, var(--planta-green) 0%, #1e2820 100%);\n color: var(--off-white);\n padding: 48px;\n border-radius: 8px;\n text-align: center;\n margin: 64px 0;\n}\n\n.article-cta h3 {\n font-family: 'Instrument Serif', Georgia, serif;\n font-size: 32px;\n color: var(--off-white);\n margin-bottom: 16px;\n}\n\n.article-cta p {\n font-size: 18px;\n margin-bottom: 32px;\n opacity: 0.95;\n}\n\n.article-cta .btn {\n display: inline-block;\n padding: 16px 36px;\n background: var(--planta-gold);\n color: var(--planta-green);\n text-decoration: none;\n border-radius: 4px;\n font-weight: 700;\n font-size: 17px;\n transition: all 0.3s ease;\n}\n\n.article-cta .btn:hover {\n background: #d4b16a;\n transform: translateY(-2px);\n}\n\n/* Related Articles */\n.related-articles {\n margin-top: 80px;\n padding-top: 48px;\n border-top: 2px solid rgba(47, 61, 45, 0.1);\n}\n\n.related-articles h3 {\n font-family: 'Instrument Serif', Georgia, serif;\n font-size: 32px;\n color: var(--planta-green);\n margin-bottom: 32px;\n text-align: center;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .article-template,\n .blog-post {\n padding: 40px 20px;\n }\n \n .article-template__title,\n .blog-post__title,\n .article-template h1 {\n font-size: 32px;\n }\n \n .article-template__content,\n .blog-post__content,\n .rte {\n font-size: 16px;\n }\n \n .article-template__content table,\n .blog-post__content table,\n .rte table {\n font-size: 14px;\n }\n \n .article-template__content th,\n .blog-post__content th,\n .rte th,\n .article-template__content td,\n .blog-post__content td,\n .rte td {\n padding: 10px;\n }\n}", "instructions": { "installation": [ "1. In Shopify Admin, go to Online Store > Themes", "2. Click 'Edit code' on your Dawn theme", "3. In the Assets folder, create a new file: 'planta-lax-blog.css'", "4. Copy the customCSS content into this file", "5. In theme.liquid, add this line before :", " {{ 'planta-lax-blog.css' | asset_url | stylesheet_tag }}", "6. Alternatively, add the CSS directly to your existing CSS file", "7. The fonts will load automatically via @import in the CSS" ], "fontLoading": { "method": "CSS @import", "fonts": [ "Instrument Serif (Regular, Italic)", "Arsenal (Regular 400, Bold 700)" ], "fallbacks": { "headlines": "Georgia, serif", "body": "-apple-system, BlinkMacSystemFont, sans-serif" } }, "usage": { "blogPosts": "CSS automatically applies to .article-template, .blog-post, and .rte classes", "customization": "Modify CSS variables in :root to change colors globally", "ctaBox": "Add class 'article-cta' to any div in blog content for styled CTA boxes" } } } /* ===== Advercase takeover — added Jul 2026 ===== */ @font-face{ font-family:'Advercase'; src:url('Advercase-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } h1, h2, h3, [class*="__heading"], [class*="__title"], [class*="-heading"]{ font-family:'Advercase','Instrument Serif',Georgia,serif !important; font-weight:400 !important; letter-spacing:-0.01em; } /* italic accents inside headings stay Instrument Serif */ h1 em, h2 em, h3 em, h1 i, h2 i, h3 i{ font-family:'Instrument Serif',Georgia,serif !important; font-style:italic; } /* Body type — Helvetica */ body, p, li, td, th, input, textarea, select, button, .pl-h2__sub, .pl-spl__copy { font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600&display=swap'); /* Arabic view — Cairo everywhere */ [data-view="ar"], [data-view="ar"] p, [data-view="ar"] span, [data-view="ar"] li, [data-view="ar"] h1, [data-view="ar"] h2, [data-view="ar"] h3, [data-view="ar"] input, [data-view="ar"] button, [data-view="ar"] .pl-tr__h, [data-view="ar"] .pl-tr__sub, [data-view="ar"] .pl-tr__desc, [data-view="ar"] .pl-tr__steps li, [data-view="ar"] .pl-tr__walead, [data-view="ar"] .pl-tr__ok, [data-view="ar"] .pl-tr__creds, [data-view="ar"] .pl-tr__eyebrow, [data-view="ar"] .pl-tr__plabel { font-family: 'Cairo', sans-serif !important; } [data-view="ar"] .pl-tr__h, [data-view="ar"] .pl-tr__steps h2 { font-weight: 600 !important; } [data-view="ar"] .pl-tr__sub, [data-view="ar"] .pl-tr__desc, [data-view="ar"] .pl-tr__steps li { font-weight: 400 !important; line-height: 1.9; } [data-view="ar"] .pl-tr__eyebrow, [data-view="ar"] .pl-tr__plabel, [data-view="ar"] .pl-tr__creds { letter-spacing: 0 !important; text-transform: none !important; } /* ===== Sitewide scroll motion ===== */ .pl-rise{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)} .pl-rise.pl-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .pl-rise{opacity:1!important;transform:none!important;transition:none!important} } :root{ --font-body-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important; } /* ===== Type scale — five sizes, nothing else ===== */ :root{ --t-micro: 11px; /* mono labels, fine print */ --t-small: 15px; /* card text, captions, summary rows */ --t-body: 17px; /* all body copy */ --t-lead: 20px; /* ledes, guarantee, pull quotes */ --t-head: 30px; /* section headings */ } /* body copy */ .ppx p, .ppx li, .ppx__row, .ppx__pd, .ppx__acc .body, .hiw__body p, .tryp__body p, .plq details p, .pli__card p{ font-size: var(--t-body) !important; line-height: 1.6; } /* small */ .ppx__row, .ppx__pd, .ppx__mb p, .hiw__card p, .tryp__card p, .pli__card p, .ppx__acc .body{ font-size: var(--t-small) !important; } /* micro — all mono labels */ .ppx__eb, .ppx__sn span, .ppx__lasts, .ppx__micro, .ppx__creds span, .ppx__mb .fine, .ppx__guar-f, .hiw__eb, .hiw__num span, .tryp__eb, .tryp__n span, .tryp__fine, .tryp__creds, .plq__mono, .pli__mono{ font-size: var(--t-micro) !important; } /* lead */ .ppx__lede, .ppx__guar-h, .hiw__sub, .tryp__sub, .hiw__pull, .tryp__pull{ font-size: var(--t-lead) !important; } /* headings — one size for section heads */ .ppx__step h3, .hiw__body h2, .tryp__body h2, .plq__hd h2, .pli__hd h2, .plo__hd h2{ font-size: var(--t-head) !important; line-height: 1.15; } /* page titles stay large but consistent */ .ppx__h, .hiw__hd h1, .tryp__hd h1, .plh__h{ font-size: clamp(34px, 4.4vw, 50px) !important; line-height: 1.08; } /* Advercase is for titles and section heads only */ .ppx__acc summary, .plq summary, .plfq summary, .ppx__min .num, .ppx__pp, .ppx__price, .ppx__mb h4, .ppx__sn b, .hiw__num b, .tryp__n b, .tryp__min .num, .tryp__steps b, .hiw__cup .m, .ppx__sticky .t, .plo__price, .plo__card h3, .pli__card h3, .hiw__card p, .ppx__row b{ font-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important; font-weight: 400; letter-spacing: 0; } /* accordion triggers: quiet, legible, still substantial */ .ppx__acc summary, .plq summary, .plfq summary{ font-size: 17px; font-weight: 500; } :root{ --font-body-family: Helvetica, "Helvetica Neue", Inter, sans-serif !important; } /* ===== Cart — brand skin ===== */ .cart-drawer, .cart-drawer__inner, #main-cart-items, .cart__contents, cart-drawer{ background:#FBFAF8 !important; color:#2F3D2D; font-family:Helvetica,"Helvetica Neue",Arial,sans-serif; } .cart-drawer__heading, .cart__heading, .title--primary{ font-family:'Advercase','Instrument Serif',Georgia,serif !important; font-weight:400 !important; letter-spacing:-.015em; font-size:26px !important; } .cart-item, .cart-items tr{border-bottom:1px solid #EAE5DD} .cart-item__name, .cart-item__details a{ font-family:Helvetica,Arial,sans-serif !important; font-size:16px !important; font-weight:400 !important; color:#2F3D2D !important; text-decoration:none; } .cart-item__details .product-option, .cart-item__details dl, .product-option{ font-family:'PT Mono',monospace !important; font-size:10.5px !important; text-transform:uppercase; letter-spacing:.08em; color:#8A8578 !important; } .cart-item__price, .cart-item__totals, .totals__total-value, .price{ font-family:Helvetica,Arial,sans-serif !important; color:#2F3D2D !important; } .quantity, .quantity__input{border-radius:1000px !important;border-color:rgba(47,61,45,.2) !important;background:#fff} .quantity__button{color:#2F3D2D} .totals, .cart__footer{border-top:1px solid #EAE5DD;background:#FBFAF8} .totals__subtotal, .totals__total{font-family:'PT Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#8A8578} .cart__checkout-button, .cart__ctas button, button[name="checkout"]{ background:#2F3D2D !important; color:#FBFAF8 !important; border-radius:1000px !important; border:none !important; font-family:Helvetica,Arial,sans-serif !important; font-size:17px !important; padding:18px 26px !important; box-shadow:none !important; transition:.2s; } .cart__checkout-button:hover, button[name="checkout"]:hover{background:#C4A35A !important;color:#2F3D2D !important} .cart-drawer__footer .tax-note, .cart__dynamic-checkout-buttons{margin-top:10px} .cart-item__image{border-radius:12px} .drawer__close, .cart-remove-button a{color:#8A8578}/* ===== Cart — brand skin ===== */ .cart-drawer, .cart-drawer__inner, #main-cart-items, .cart__contents, cart-drawer{ background:#FBFAF8 !important; color:#2F3D2D; font-family:Helvetica,"Helvetica Neue",Arial,sans-serif; } .cart-drawer__heading, .cart__heading, .title--primary{ font-family:'Advercase','Instrument Serif',Georgia,serif !important; font-weight:400 !important; letter-spacing:-.015em; font-size:26px !important; } .cart-item, .cart-items tr{border-bottom:1px solid #EAE5DD} .cart-item__name, .cart-item__details a{ font-family:Helvetica,Arial,sans-serif !important; font-size:16px !important; font-weight:400 !important; color:#2F3D2D !important; text-decoration:none; } .cart-item__details .product-option, .cart-item__details dl, .product-option{ font-family:'PT Mono',monospace !important; font-size:10.5px !important; text-transform:uppercase; letter-spacing:.08em; color:#8A8578 !important; } .cart-item__price, .cart-item__totals, .totals__total-value, .price{ font-family:Helvetica,Arial,sans-serif !important; color:#2F3D2D !important; } .quantity, .quantity__input{border-radius:1000px !important;border-color:rgba(47,61,45,.2) !important;background:#fff} .quantity__button{color:#2F3D2D} .totals, .cart__footer{border-top:1px solid #EAE5DD;background:#FBFAF8} .totals__subtotal, .totals__total{font-family:'PT Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#8A8578} .cart__checkout-button, .cart__ctas button, button[name="checkout"]{ background:#2F3D2D !important; color:#FBFAF8 !important; border-radius:1000px !important; border:none !important; font-family:Helvetica,Arial,sans-serif !important; font-size:17px !important; padding:18px 26px !important; box-shadow:none !important; transition:.2s; } .cart__checkout-button:hover, button[name="checkout"]:hover{background:#C4A35A !important;color:#2F3D2D !important} .cart-drawer__footer .tax-note, .cart__dynamic-checkout-buttons{margin-top:10px} .cart-item__image{border-radius:12px} .drawer__close, .cart-remove-button a{color:#8A8578}