/* ============================================================ CSS VARIABLES — change accent color per brand if needed ============================================================ */ :root { --color-accent: #e8363c; --color-dark: #131117; --color-light-bg: #d9dadc; --color-white: #ffffff; --color-text: #2a2830; --color-text-mute: #687279; --color-border: #e0e0e0; --font-mono: 'IBM Plex Mono', monospace; --font-body: 'IBM Plex Sans', sans-serif; --max-width: 1290px; --radius: 4px; --transition: 0.2s ease; } /* ============================================================ COLOR PALETTES — applied via class on element Site builder picks palette based on product category ============================================================ */ /* Tech / Electronics — cool blue */ .palette-tech { --color-accent: #2563eb; --color-dark: #0f172a; --color-light-bg: #e8edf5; } /* Outdoor / Camping — forest green */ .palette-outdoor { --color-accent: #16a34a; --color-dark: #14261a; --color-light-bg: #e2f0e6; } /* Wellness / Health / Massage — teal */ .palette-wellness { --color-accent: #0d9488; --color-dark: #132729; --color-light-bg: #e0f2f1; } /* Home / Furniture — warm brown */ .palette-home { --color-accent: #a16207; --color-dark: #1c1612; --color-light-bg: #f5f0e8; } /* Fashion / Apparel — charcoal + gold */ .palette-fashion { --color-accent: #b8860b; --color-dark: #1a1a1a; --color-light-bg: #f0ece4; } /* Automotive / Tools — orange */ .palette-auto { --color-accent: #ea580c; --color-dark: #1a1008; --color-light-bg: #fef0e6; } /* Kids / Toys — vibrant purple */ .palette-kids { --color-accent: #7c3aed; --color-dark: #1a1226; --color-light-bg: #ede9fe; } /* Food / Kitchen — warm red (default-like) */ .palette-food { --color-accent: #dc2626; --color-dark: #1c1012; --color-light-bg: #fce8e8; } /* Beauty / Personal Care — rose */ .palette-beauty { --color-accent: #db2777; --color-dark: #1c1018; --color-light-bg: #fce7f3; } /* Sports / Fitness — energetic blue */ .palette-sports { --color-accent: #0284c7; --color-dark: #0c1929; --color-light-bg: #e0f2fe; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--color-text); background: var(--color-white); } /* Ensure body font never inherits mono accidentally */ p, li, td, blockquote, cite { font-family: var(--font-body); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5 { font-family: var(--font-mono); line-height: 1.25; } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .section-heading { font-size: clamp(1.5rem, 3vw, 2.25rem); text-align: center; margin-bottom: 16px; } .section-intro { text-align: center; max-width: 680px; margin: 0 auto 48px; color: var(--color-text-mute); font-size: 1.05rem; } .section-text { max-width: 760px; margin: 24px auto 0; color: var(--color-text-mute); } /* ============================================================ DARK SECTION — auto-invert text to light colors. Only targets direct content, not nested cards/widgets. Uses > .container > selectors to avoid leaking into child components. ============================================================ */ .block-trust, .block-about, .block-legal { color: rgba(255,255,255,0.85); } .block-trust h2, .block-trust h3, .block-about h2, .block-about h3 { color: var(--color-white); } .block-trust p, .block-trust li, .block-about p, .block-about li { color: rgba(255,255,255,0.75); } /* Products section: dark bg but contains white cards. Only section-level headings and intro get light color. */ .block-products > .container > .section-heading { color: var(--color-white); } .block-products > .container > p, .block-products > .container > .section-intro { color: rgba(255,255,255,0.75); } .block-legal p { color: rgba(255,255,255,0.5); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-block; padding: 14px 28px; border-radius: var(--radius); font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: opacity var(--transition), background var(--transition); white-space: nowrap; } .btn-primary { background: var(--color-accent); color: var(--color-white); } .btn-primary:hover { opacity: 0.88; } .btn-header { background: var(--color-accent); color: var(--color-white); padding: 10px 20px; font-size: 0.8rem; } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-white); border-bottom: 1px solid var(--color-border); } .header-inner { display: flex; align-items: center; gap: 32px; height: 64px; } .brand-name { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; white-space: nowrap; flex-shrink: 0; } .main-nav { display: flex; gap: 24px; flex: 1; justify-content: center; } .main-nav a { font-size: 0.9rem; color: var(--color-text); transition: color var(--transition); } .main-nav a:hover { color: var(--color-accent); } .nav-toggle { display: none; background: none; color: var(--color-dark); border: 1px solid var(--color-border); font-size: 1.2rem; cursor: pointer; margin-left: auto; padding: 6px 12px; border-radius: var(--radius); line-height: 1; } /* Amazon Store button — mobile only, shown next to hamburger */ .btn-amazon-mobile { display: none; background: var(--color-accent); color: var(--color-white); padding: 8px 14px; font-size: 0.75rem; border-radius: var(--radius); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; margin-left: auto; } /* Mobile nav */ .mobile-nav { display: none; flex-direction: column; padding: 16px 24px 24px; gap: 16px; background: var(--color-white); border-top: 1px solid var(--color-border); } .mobile-nav.open { display: flex; } .mobile-nav a { font-size: 1rem; color: var(--color-text); padding: 4px 0; } .mobile-nav .btn-primary { display: inline-block; background: var(--color-accent); color: var(--color-white); padding: 14px 28px; border-radius: var(--radius); font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; } /* ============================================================ HERO BLOCK ============================================================ */ .block-hero { background: var(--color-light-bg); padding: 50px 0 0; overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 45fr 55fr; gap: 20px; align-items: center; } .hero-content { padding: 50px 0 80px; } .hero-heading { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.25; margin-bottom: 20px; } .hero-text { color: #403f43; font-weight: 500; font-size: 1rem; margin-bottom: 32px; max-width: 500px; } .hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; } .badge { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: #403f43; } .hero-image { align-self: center; display: flex; justify-content: center; overflow: hidden; } .hero-image img { max-height: 600px; width: auto; object-fit: contain; } /* ============================================================ TRUST BLOCK ============================================================ */ .block-trust { background: var(--color-dark); padding: 40px 0; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; } .trust-item { display: flex; flex-direction: column; align-items: center; } .trust-icon { width: 56px; height: 56px; margin-bottom: 16px; object-fit: contain; } .trust-icon-svg { display: flex; align-items: center; justify-content: center; } .trust-icon-svg svg { width: 56px; height: 56px; } .trust-item .label { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; text-align: center; display: block; } .trust-item p { font-size: 0.9rem; text-align: center; line-height: 1.55; } /* ============================================================ PRODUCTS BLOCK ============================================================ */ .block-products { padding: 40px 0; background: var(--color-dark); } /* colors handled by dark-section rules above */ .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .product-card { background: var(--color-white); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .product-image { height: 380px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: contain; padding: 16px; } .product-content { padding: 24px; display: flex; flex-direction: column; flex: 1; gap: 12px; text-align: left; } .product-name { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; line-height: 1.35; } .product-description, .product-highlight { font-size: 0.9rem; color: var(--color-text-mute); line-height: 1.6; } .product-content .btn { align-self: center; margin-top: auto; } /* ============================================================ USE CASE SELECTOR BLOCK ============================================================ */ .block-use-case { padding: 40px 0; background: #f8f8f8; } .use-case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-top: 48px; } .use-case-card { background: var(--color-white); border-radius: 8px; padding: 32px 28px; border: 1px solid var(--color-border); } .use-case-scenario { font-size: 0.9rem; color: var(--color-text-mute); margin-bottom: 20px; line-height: 1.6; } .use-case-recommendation { font-size: 1rem; font-family: var(--font-mono); color: var(--color-accent); margin-bottom: 12px; } .use-case-reason { font-size: 0.9rem; line-height: 1.6; } /* ============================================================ SPEC TABLE BLOCK ============================================================ */ .block-spec-table { padding: 40px 0; } .table-wrap { overflow-x: auto; margin: 32px 0 16px; border-radius: 6px; border: 1px solid var(--color-border); } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } thead { background: var(--color-dark); color: var(--color-white); } thead th { padding: 14px 16px; text-align: left; font-family: var(--font-mono); font-size: 0.85rem; } tbody tr:nth-child(even) { background: #f8f8f8; } tbody td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); vertical-align: top; } tbody td:first-child { font-weight: 600; font-size: 0.85rem; white-space: nowrap; } .table-disclaimer { font-size: 0.82rem; color: var(--color-text-mute); font-style: italic; text-align: center; } /* ============================================================ REVIEWS BLOCK ============================================================ */ .block-reviews { padding: 40px 0; background: #f8f8f8; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .review-card { background: var(--color-white); border-radius: 8px; padding: 28px; border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 16px; } .review-card blockquote { font-size: 0.9rem; line-height: 1.65; color: var(--color-text); font-style: italic; flex: 1; } .review-card cite { font-size: 0.85rem; font-family: var(--font-mono); font-weight: 600; font-style: normal; color: var(--color-text-mute); } /* ============================================================ COMPETITOR BLOCK ============================================================ */ .block-competitor { padding: 40px 0; } /* ============================================================ EDUCATION BLOCK — Base + Layout Variants ============================================================ */ .block-education { padding: 40px 0; background: #f8f8f8; } .education-content { max-width: 820px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 20px; } .education-content p { font-size: 1rem; line-height: 1.7; } /* --- Variant A: text + accent left border --- */ .block-education.variant-a { background: var(--color-white); } .block-education.variant-a .education-content { border-left: 4px solid var(--color-accent); padding-left: 32px; } /* --- Variant A with inline variant image break --- */ .education-inline-image { max-width: 680px; margin: 32px auto; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .education-inline-image img { width: 100%; height: auto; display: block; } @media (max-width: 999px) { .education-inline-image { max-width: 100%; margin: 24px 0; } } /* --- Variant B: two-column text+image (checkerboard left) --- */ .block-education.variant-b { background: #f8f8f8; } .block-education.variant-b .education-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: var(--max-width); margin: 0 auto; } .block-education.variant-b .education-content { max-width: none; margin: 0; } .block-education.variant-b .education-image { border-radius: 8px; overflow: hidden; background: var(--color-light-bg); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; } .block-education.variant-b .education-image img { width: 100%; height: 100%; object-fit: cover; } /* --- Variant C: two-column image+text (checkerboard right) --- */ .block-education.variant-c { background: var(--color-white); } .block-education.variant-c .education-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: var(--max-width); margin: 0 auto; } .block-education.variant-c .education-content { max-width: none; margin: 0; order: 2; } .block-education.variant-c .education-image { order: 1; border-radius: 8px; overflow: hidden; background: var(--color-light-bg); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; } .block-education.variant-c .education-image img { width: 100%; height: 100%; object-fit: cover; } /* --- Variant D: full-width with tinted background --- */ .block-education.variant-d { background: var(--color-accent); } .block-education.variant-d .section-heading { color: var(--color-white); } .block-education.variant-d .education-content p { color: rgba(255,255,255,0.85); } .block-education.variant-d .education-content { max-width: 820px; } /* Responsive: variants B/C collapse to single column */ @media (max-width: 999px) { .block-education.variant-b .education-inner, .block-education.variant-c .education-inner { grid-template-columns: 1fr; } .block-education.variant-c .education-content { order: 1; } .block-education.variant-c .education-image { order: 2; } } /* ============================================================ FAQ BLOCK ============================================================ */ .block-faq { padding: 40px 0; } .faq-list { max-width: 820px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 0; } .faq-item { border-bottom: 1px solid var(--color-border); } .faq-question { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; padding: 20px 40px 20px 0; cursor: pointer; position: relative; line-height: 1.45; transition: color var(--transition); } .faq-question:hover { color: var(--color-accent); } .faq-question::after { content: '+'; position: absolute; right: 0; top: 20px; font-size: 1.4rem; font-weight: 300; color: var(--color-text-mute); transition: transform var(--transition); } .faq-item.open .faq-question::after { transform: rotate(45deg); color: var(--color-accent); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-item.open .faq-answer { max-height: 400px; } .faq-answer p { padding: 0 40px 20px 0; font-size: 0.95rem; line-height: 1.7; color: var(--color-text-mute); } /* ============================================================ ABOUT BLOCK ============================================================ */ .block-about { padding: 40px 0; background: var(--color-dark); } .block-about .section-heading { color: var(--color-white); } .about-inner { max-width: 820px; } /* ============================================================ AUTHOR BLOCK ============================================================ */ .block-author { padding: 40px 0; background: var(--color-white); border-top: 1px solid var(--color-border); } .author-inner { max-width: 820px; } .author-card { display: flex; gap: 24px; align-items: flex-start; } .author-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 1.4rem; flex-shrink: 0; } .author-details { flex: 1; } .author-name { font-weight: 600; font-size: 1.05rem; margin-bottom: 2px; } .author-role { font-size: 0.85rem; color: var(--color-text-mute); margin-bottom: 12px; } .author-details p:last-child { font-size: 0.9rem; color: var(--color-text-mute); line-height: 1.6; } .about-content { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } .about-content p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.75); } /* ============================================================ CONTACT BLOCK ============================================================ */ .block-contact { padding: 60px 0; border-top: 1px solid var(--color-border); } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .contact-col .label { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; margin-bottom: 16px; color: var(--color-text); display: block; } .contact-col p { font-size: 0.875rem; color: var(--color-text-mute); line-height: 1.7; } /* ============================================================ LEGAL / FOOTER ============================================================ */ .block-legal { background: var(--color-dark); padding: 40px 0; } .legal-inner { display: flex; flex-direction: column; gap: 12px; text-align: center; } .copyright { color: rgba(255,255,255,0.9); font-size: 0.875rem; } .affiliate-disclosure, .legal-disclaimer { font-size: 0.8rem; color: rgba(255,255,255,0.45); line-height: 1.65; } /* ============================================================ RESPONSIVE — Tablet (max 999px) ============================================================ */ @media (max-width: 999px) { /* Prevent horizontal overflow globally */ body { overflow-x: hidden; } .main-nav { display: none; } .btn-header { display: none; } .nav-toggle { display: block; } .btn-amazon-mobile { display: none; } /* Hero — single column, image hidden */ .block-hero { overflow: hidden; } .hero-inner { grid-template-columns: 1fr; gap: 0; } .hero-content { padding: 48px 0 56px; text-align: center; position: static; } .hero-text { margin: 0 auto 28px; max-width: 560px; } .hero-badges { justify-content: center; } /* Hide hero image on tablet and mobile */ .hero-image { display: none; } /* Trust */ .trust-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } /* Products */ .products-grid { grid-template-columns: repeat(2, 1fr); } /* Reviews */ .reviews-grid { grid-template-columns: repeat(2, 1fr); } /* Contact */ .contact-grid { grid-template-columns: 1fr; gap: 32px; } } /* ============================================================ RESPONSIVE — Mobile (max 689px) ============================================================ */ @media (max-width: 689px) { /* Hero */ .block-hero { padding-top: 32px; } .hero-content { padding: 32px 0 48px; } .hero-heading { font-size: 1.8rem; } /* Buttons — allow text wrap on mobile */ .btn { white-space: normal; text-align: center; max-width: 100%; } /* Trust */ .trust-grid { grid-template-columns: 1fr; } /* Products */ .products-grid { grid-template-columns: 1fr; } /* Reviews */ .reviews-grid { grid-template-columns: 1fr; } /* Tables */ .table-wrap { font-size: 0.8rem; } thead th, tbody td { padding: 10px 12px; } .section-heading { font-size: 1.5rem; } } /* ============================================================ FONT WEIGHT CORRECTIONS IBM Plex Mono 400 is now loaded — use it for normal weight ============================================================ */ body { font-weight: 400; } /* p, li, td font-family handled in base reset above */ /* Section headings — medium */ .section-heading { font-weight: 500; } /* Product names — body font, semibold */ /* product-name font handled in main block above */ /* Labels (trust, contact) — mono medium */ .label { font-weight: 500 !important; } /* FAQ questions — mono normal, not bold */ .faq-question { font-weight: 400 !important; } /* Use case recommendation — mono normal */ .use-case-recommendation { font-weight: 400; } /* Hero text — body normal */ .hero-text { font-weight: 400; font-family: var(--font-body); } /* About section paragraphs */ .about-content p { font-weight: 400; } /* Education paragraphs */ .education-content p { font-weight: 400; } /* Lists inside education and product content */ .education-content ul, .education-content ol, .product-description ul, .product-description ol, .about-content ul, .about-content ol { padding-left: 24px; margin: 16px 0; } .education-content li, .product-description li, .about-content li { margin-bottom: 6px; line-height: 1.7; }