/* ============================================================ QUOTEE LEAFYORB — Custom CSS Version: 1.0 | March 2026 HOW TO LOAD IN WORDPRESS: Option 1 (Recommended): Add to your theme's functions.php: wp_enqueue_style('qlo-custom', get_template_directory_uri() . '/qlo-custom.css'); Option 2: Upload to /wp-content/uploads/ and reference as: /wp-content/uploads/qlo-custom.css Option 3: Paste into Appearance > Customize > Additional CSS All class names are prefixed .qlo- to avoid theme conflicts. ============================================================ */ /* ── Google Fonts ─────────────────────────────────────────── */ /* IMPORTANT: Do NOT use @import to load Google Fonts — it creates a serial network chain that delays LCP by 400–800ms. Instead, load fonts in WordPress via wp_enqueue_style() in functions.php: function qlo_enqueue_fonts() { wp_enqueue_style( 'qlo-google-fonts', 'https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap', array(), null ); } add_action('wp_enqueue_scripts', 'qlo_enqueue_fonts'); And add preconnect hints in your theme's via Kadence header settings or in functions.php: */ /* ── Fraunces Fallback (CLS reduction) ────────────────────── */ /* Adjust fallback Georgia metrics to match Fraunces, eliminating FOUT layout shift */ @font-face { font-family: 'Fraunces-fallback'; src: local('Georgia'); size-adjust: 108%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* ── Design Tokens ────────────────────────────────────────── */ /* Tailwind CSS Green palette — green-50 → green-950 */ :root { --qc: #16a34a; /* green-600 — primary accent */ --qk: #052e16; /* green-950 — near-black headings */ --qt: #14532d; /* green-900 — body text */ --qm: #166534; /* green-800 — muted / meta */ --qcr: #f0fdf4; /* green-50 — off-white background */ --qs: #dcfce7; /* green-100 — surface */ --qb: #bbf7d0; /* green-200 — border */ --fd: 'Fraunces', 'Fraunces-fallback', Georgia, serif; --fl: 'Barlow Condensed', sans-serif; --fb: 'DM Sans', system-ui, sans-serif; /* Override Kadence theme font vars to include fallback (reduces CLS) */ --global-body-font-family: Fraunces, 'Fraunces-fallback', serif; --global-heading-font-family: Fraunces, 'Fraunces-fallback', serif; } /* ============================================================ 1. CONTENT PILLAR PAGES (.qlo-pillar) Used by: index.html, tier pages, all 12 product pages ============================================================ */ /* 1.1 — Base container & typography */ .qlo-pillar { font-family: var(--fb); color: var(--qt); max-width: 860px; margin: 0 auto; padding: 0 1.25rem 4rem; line-height: 1.75; font-size: 1rem; } .qlo-pillar h1 { font-family: var(--fd); font-size: clamp(1.85rem, 5vw, 3rem); font-weight: 700; color: var(--qk); line-height: 1.15; margin: 0 0 1.25rem; } .qlo-pillar h2 { font-family: var(--fd); font-size: clamp(1.25rem, 3vw, 1.85rem); font-weight: 600; color: var(--qk); margin: 2.5rem 0 0.9rem; } .qlo-pillar h3 { font-family: var(--fd); font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 600; color: var(--qk); margin: 1.75rem 0 0.6rem; } .qlo-pillar p { margin: 0 0 1rem; } .qlo-pillar a { color: var(--qc); text-decoration: none; border-bottom: 1px solid rgba(22, 163, 74, 0.3); } .qlo-pillar a:hover { border-bottom-color: var(--qc); } .qlo-pillar ul, .qlo-pillar ol { padding-left: 1.5rem; margin: 0 0 1rem; } .qlo-pillar li { margin-bottom: .4rem; } .qlo-pillar strong { color: var(--qk); } /* 1.2 — Hero */ .qlo-hero { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--qb); margin-bottom: 2.5rem; } .qlo-tag { font-family: var(--fl); font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--qc); display: block; margin-bottom: 1rem; } .qlo-hero blockquote { border-left: 3px solid var(--qc); margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; font-style: italic; color: var(--qm); font-size: 1.05rem; } .qlo-hero blockquote p { margin: 0; } /* Product pages: subtitle under h1 */ .qlo-hero p.qlo-sub { font-size: 1.05rem; color: var(--qm); font-style: italic; margin: .75rem 0 0; } /* 1.3 — Breadcrumb */ .qlo-bc { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-family: var(--fl); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--qm); /*margin-bottom: 2rem;*/ } .qlo-bc > br { display: none; } .qlo-bc a { color: var(--qm); border-bottom: none; padding-top: 12px; padding-bottom: 12px; display: inline-block; } .qlo-bc a:hover { color: var(--qc); } .qlo-bc-sep { opacity: .4; } /* 1.4 — Horizontal rule */ .qlo-rule { border: none; border-top: 1px solid var(--qb); margin: 2.5rem 0; } /* 1.5 — Tables */ .qlo-pillar table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .9rem; } .qlo-pillar th { background: var(--qk); color: #fff; font-family: var(--fl); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-align: left; padding: .6rem .85rem; } .qlo-pillar td { padding: .6rem .85rem; border-bottom: 1px solid var(--qb); vertical-align: top; line-height: 1.5; } .qlo-pillar tr:nth-child(even) td { background: var(--qcr); } /* Product image gallery */ .qlo-product-gallery { display: grid; grid-template-columns: repeat(3, 1fr) !important; gap: 0.75rem; margin: 1.75rem 0 2rem; } /* WordPress wpautop injects
tags inside HTML blocks — hide them so they don't become ghost grid items and create empty cells between images. Also suppresses
tags injected into paragraph text from IDE-formatted multi-line source HTML. */ .qlo-product-gallery br, .qlo-page p > br, .qlo-pillar p > br, .qlo-legal p > br { display: none; } .qlo-product-gallery a { display: block; } .qlo-product-gallery img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; background: var(--qs); display: block; } /* Product links grid (All Designs section) */ .qlo-product-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem 2rem; margin: 1.25rem 0 0; } .qlo-product-links > p, .qlo-product-links > br { display: none; } .qlo-product-links-col h3 { font-family: var(--fl); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--qm); margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--qb); } .qlo-product-links-col ul { list-style: none; margin: 0; padding: 0; } .qlo-product-links-col li { margin: 0 0 .35rem; font-size: .88rem; line-height: 1.4; } .qlo-product-links-col a { color: var(--qt); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .qlo-product-links-col a:hover { color: var(--qc); border-bottom-color: var(--qc); } /* Specs table variant */ .qlo-specs { background: var(--qcr); border: 1px solid var(--qb); } .qlo-specs th { background: var(--qs); color: var(--qm); } .qlo-specs td:first-child { font-weight: 500; color: var(--qk); width: 38%; } /* 1.6 — Tier cards (index + tier pages) */ .qlo-card { border: 1px solid var(--qb); padding: 1.75rem; margin: 1.5rem 0; background: var(--qcr); position: relative; } .qlo-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--qc); } .qlo-card h3 { margin-top: 0; } /* 1.7 — Choose/highlight callout (left-border accent box) */ .qlo-choose { background: var(--qs); border-left: 3px solid var(--qc); padding: 1.25rem 1.5rem; margin: 1rem 0; } .qlo-choose strong { font-family: var(--fl); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qc); display: block; margin-bottom: .5rem; } .qlo-choose ul { margin: 0; } /* Generic callout box (product pages: SATU001, SATU020) */ .qlo-callout { background: var(--qs); border-left: 3px solid var(--qc); padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: .93rem; } /* 1.8 — Certification boxes */ /* Green-border cert block (3001ECO) */ .qlo-cert { background: var(--qs); border-left: 3px solid #15803d; /* green-700 */ padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: .93rem; } /* Framed cert box (organic-sustainable tier page) */ .qlo-cert-box { background: var(--qs); border: 1px solid var(--qb); padding: 1.25rem 1.5rem; margin: 1.5rem 0; } .qlo-cert-box h3 { font-family: var(--fl); font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--qk); margin: 0 0 .5rem; } /* 1.9 — Button (pillar pages) */ .qlo-btn { display: inline-block; padding: .65rem 1.5rem; font-family: var(--fl); font-weight: 600; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; margin: .4rem .4rem .4rem 0; transition: opacity .18s; border-bottom: none !important; } .qlo-btn:hover { opacity: .85; } /* Pillar default = primary (terracotta fill) */ .qlo-pillar .qlo-btn, .qlo-btn--primary { background: var(--qc); color: #fff !important; border: none !important; } /* Secondary = outlined dark */ .qlo-btn--secondary { background: transparent; border: 1.5px solid var(--qk) !important; color: var(--qk); } /* 1.10 — FAQ */ .qlo-faq { margin-top: 2.5rem; border-top: 2px solid var(--qk); } .qlo-faq-item { border-bottom: 1px solid var(--qb); padding: 1.25rem 0; } .qlo-faq-q { font-family: var(--fd); font-weight: 600; font-size: 1rem; color: var(--qk); margin: 0 0 .5rem; } .qlo-faq-a { font-size: .95rem; margin: 0; color: var(--qt); } /* 1.11 — Dark navigation footer */ .qlo-nav { background: var(--qk); padding: 2rem; margin-top: 3rem; } .qlo-nav-title { font-family: var(--fl); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .4); margin: 0 0 1rem; } .qlo-nav ul { list-style: none; padding: 0; margin: 0; } .qlo-nav li { margin-bottom: .6rem; } .qlo-nav a { color: rgba(255, 255, 255, .85); font-family: var(--fb); border-bottom: 1px solid rgba(255, 255, 255, .15); } .qlo-nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); } /* 1.12 — Two-column grid (index page) */ .qlo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0; } .qlo-grid2 > p, .qlo-grid2 > br { display: none; } /* ============================================================ 2. WORDPRESS MARKETING PAGES (.qlo-page) Used by: home, about-us, blog, community, youtube ============================================================ */ /* 2.1 — Base container & typography */ .qlo-page { font-family: var(--fb); color: var(--qt); max-width: 900px; margin: 0 auto; line-height: 1.7; font-size: 1rem; } .qlo-page h1 { font-family: var(--fd); font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 900; color: var(--qk); line-height: 1.1; margin: 0 0 1rem; } .qlo-page h2 { font-family: var(--fd); font-size: clamp(1.2rem, 3vw, 1.75rem); font-weight: 700; color: var(--qk); margin: 2.5rem 0 1rem; } .qlo-page h3 { font-family: var(--fd); font-size: 1.05rem; font-weight: 600; color: var(--qk); margin: 0 0 .4rem; } .qlo-page p { margin: 0 0 1rem; } .qlo-page a { color: var(--qc); text-decoration: none; border-bottom: 1px solid rgba(22, 163, 74, .3); } .qlo-page a:hover { border-bottom-color: var(--qc); } .qlo-page ul, .qlo-page ol { padding-left: 1.5rem; margin: 0 0 1rem; } .qlo-page li { margin-bottom: .45rem; } .qlo-page strong { color: var(--qk); } .qlo-page em { color: var(--qm); } /* 2.2 — Page eyebrow & hero */ .qlo-eyebrow { font-family: var(--fl); font-size: 1rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--qc); display: block; margin-bottom: .9rem; } .qlo-pg-hero { padding: 3.5rem 1.25rem 2.5rem; border-bottom: 1px solid var(--qb); margin-bottom: 2.5rem; } .qlo-pg-hero .qlo-sub { font-size: 1.1rem; color: var(--qm); /*max-width: 580px;*/ line-height: 1.7; margin: .75rem 0 1.75rem; } .qlo-hero { /* also used by some page heroes */ padding: 3rem 0 2rem; border-bottom: 1px solid var(--qb); margin-bottom: 2.5rem; } .qlo-hero p.qlo-sub { font-size: 1.05rem; color: var(--qm); max-width: 560px; margin: .5rem 0 1.5rem; } .qlo-stats-row { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-family: var(--fl); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--qm); margin-top: 1.5rem; } .qlo-stats-row span { color: var(--qt); } .qlo-stats-row > br { display: none; } /* 2.3 — CTA buttons & group */ .qlo-cta-group { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; } .qlo-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0; } /* suppress wpautop-injected
becoming a flex item */ .qlo-cta-group > br, .qlo-cta-row > br { display: none; } /* 2.4 — Section wrapper */ .qlo-section { padding: 0 1.25rem; } /* 2.5 — HOME: announcement bar */ .qlo-announce { background: var(--qk); color: rgba(255, 255, 255, .75); font-family: var(--fl); font-size: 1.5rem; letter-spacing: .18em; text-transform: uppercase; text-align: center; padding: .7rem 1rem; } /* 2.6 — HOME: step cards */ .qlo-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; } /* suppress wpautop-injected

and
tags becoming ghost grid cells */ .qlo-steps > p, .qlo-steps > br { display: none; } .qlo-step { background: var(--qcr); border: 1px solid var(--qb); padding: 1.5rem 1.5rem 1.5rem 4.5rem; position: relative; } .qlo-step::before { content: attr(data-n); position: absolute; left: 1.1rem; top: 1.1rem; font-family: var(--fd); font-size: 2.2rem; font-weight: 900; color: var(--qb); line-height: 1; } /* 2.7 — HOME: theme/intent grid */ .qlo-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.25rem 0; } /* suppress wpautop-injected

and
tags becoming ghost grid cells */ .qlo-theme-grid > p, .qlo-theme-grid > br { display: none; } .qlo-theme-card { display: block; position: relative; padding: 1.25rem; border: 1px solid var(--qb); background: var(--qcr); border-bottom: none; overflow: hidden; transition: border-color .2s, background .2s; } .qlo-theme-card:hover { border-color: var(--qc); background: var(--qs); } /* Full-card link overlay — WordPress-safe alternative to wrapping */ .qlo-theme-card-link { position: absolute; inset: 0; z-index: 1; } .qlo-theme-card h3 { font-family: var(--fd); font-size: 1rem; font-weight: 600; color: var(--qk); margin: 0 0 .3rem; } .qlo-theme-card p { font-size: .88rem; color: var(--qm); margin: 0; line-height: 1.5; } /* 2.8 — HOME: featured cards */ .qlo-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; } .qlo-feat-grid > p, .qlo-feat-grid > br { display: none; } .qlo-feat-card { background: var(--qcr); border: 1px solid var(--qb); border-top: 3px solid var(--qc); padding: 1.5rem; overflow: hidden; } .qlo-feat-card .qlo-tag-label { font-family: var(--fl); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--qc); font-weight: 600; display: block; margin-bottom: .6rem; } .qlo-feat-card h3 { font-family: var(--fd); font-size: 1.05rem; font-weight: 600; color: var(--qk); margin: 0 0 .4rem; } .qlo-feat-card p { font-size: .9rem; color: var(--qt); margin: 0 0 .9rem; } /* Featured card — product image bleeds to card edges */ .qlo-feat-card img { display: block; width: calc(100% + 3rem); max-width: unset; /* override theme img { max-width: 100% } so bleed fills both sides */ margin: -1.5rem -1.5rem 1.25rem; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } /* Theme card — product image bleeds to card edges */ .qlo-theme-card img { display: block; width: calc(100% + 2.5rem); max-width: unset; /* override theme img { max-width: 100% } so bleed fills both sides */ margin: -1.25rem -1.25rem 0.75rem; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } /* ── Featured Product Carousel ──────────────────────────────── */ .qlo-carousel-wrap { margin: 0 0 2.5rem; } .qlo-carousel-heading { font-family: var(--fl); font-size: 1rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--qc); margin: 0 0 1rem; } .qlo-carousel-outer { position: relative; } .qlo-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 0.75rem; padding-bottom: 0.5rem; -ms-overflow-style: none; scrollbar-width: none; } .qlo-carousel-track::-webkit-scrollbar { display: none; } .qlo-carousel-item { flex: 0 0 calc(33.333% - 0.5rem); scroll-snap-align: start; min-width: 0; } .qlo-carousel-item a { display: block; border-bottom: none; text-decoration: none; } .qlo-carousel-item a:hover { border-bottom: none; opacity: 0.9; } .qlo-carousel-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; transition: transform .25s; } .qlo-carousel-item a:hover img { transform: scale(1.02); } .qlo-carousel-cap { display: block; font-family: var(--fl); font-size: 1rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--qm); margin-top: 0.5rem; text-align: center; } /* Carousel nav buttons */ .qlo-carousel-btn { position: absolute; top: 50%; transform: translateY(-65%); /* offset up: centers on image area above caption */ z-index: 2; background: var(--qk); color: #fff; border: none; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0, 0, 0, .3); transition: background .18s, box-shadow .18s; -webkit-tap-highlight-color: transparent; padding: 0; } .qlo-carousel-btn:hover { background: var(--qc); box-shadow: 0 4px 16px rgba(22, 163, 74, .35); } .qlo-carousel-btn--prev { left: 6px; } .qlo-carousel-btn--next { right: 6px; } @media (max-width: 600px) { .qlo-carousel-btn { width: 30px; height: 30px; font-size: .85rem; } } /* 2.9 — HOME: testimonials */ .qlo-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; } .qlo-proof-grid > p, .qlo-proof-grid > br { display: none; } .qlo-proof { background: var(--qs); border-left: 3px solid var(--qc); padding: 1.5rem; } .qlo-proof blockquote { margin: 0; } .qlo-proof blockquote p { font-family: var(--fd); font-style: italic; font-size: .95rem; color: var(--qt); margin: 0; line-height: 1.7; } /* 2.10 — HOME: T-shirt tier image grid */ .qlo-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.25rem 0 1.5rem; } /* suppress wpautop-injected tags */ .qlo-tier-grid > p, .qlo-tier-grid > br { display: none; } .qlo-tier-card { display: block; border: 1px solid var(--qb); background: var(--qcr); text-decoration: none !important; border-bottom: none; overflow: hidden; transition: border-color .2s, background .2s; } .qlo-tier-card:hover { border-color: var(--qc); background: var(--qs); } .qlo-tier-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .25s; } .qlo-tier-card:hover img { transform: scale(1.03); } .qlo-tier-card-body { display: block; /* needed: element is now */ padding: .85rem 1rem; } .qlo-tier-card-body strong { font-family: var(--fl); font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--qk); display: block; margin-bottom: .3rem; } .qlo-tier-card-body p, .qlo-tier-desc { display: block; /* needed: .qlo-tier-desc is */ font-size: .85rem; color: var(--qm); margin: 0; line-height: 1.45; } /* Legacy tier list — kept for reference, no longer used on homepage */ .qlo-tier-list { list-style: none; padding: 0; margin: 1rem 0 1.5rem; border-top: 1px solid var(--qb); } .qlo-tier-list li { padding: .9rem 0; border-bottom: 1px solid var(--qb); font-size: .95rem; } .qlo-tier-list li strong { font-family: var(--fl); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; display: block; color: var(--qk); margin-bottom: .2rem; } /* 2.11 — HOME: gift steps */ .qlo-gift-steps { counter-reset: gift; padding: 0; list-style: none; margin: 1rem 0 1.5rem; } .qlo-gift-steps li { counter-increment: gift; display: flex; gap: 1rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--qb); } .qlo-gift-steps li::before { content: counter(gift); font-family: var(--fd); font-size: 1.8rem; font-weight: 700; color: var(--qb); flex-shrink: 0; line-height: 1; margin-top: .1rem; } /* 2.12 — HOME: engagement dark band */ .qlo-engage { background: var(--qk); padding: 2.5rem; margin: 2.5rem 0; color: rgba(255, 255, 255, .85); } .qlo-engage h2 { font-family: var(--fd); color: #fff; margin: 0 0 .75rem; } .qlo-engage p { color: rgba(255, 255, 255, .7); margin: 0 0 1.5rem; } .qlo-engage .qlo-btn--secondary { border-color: rgba(255, 255, 255, .4) !important; color: #fff; } .qlo-engage .qlo-btn--secondary:hover { border-color: #fff !important; } /* suppress wpautop-injected
and empty

inside engage band */ .qlo-engage p br, .qlo-engage .qlo-cta-group br, .qlo-engage > p:empty { display: none; } /* 2.13 — HOME: final CTA band */ .qlo-final-cta { background: var(--qs); border-top: 1px solid var(--qb); border-bottom: 1px solid var(--qb); padding: 2.5rem 1.25rem; text-align: center; margin-top: 2.5rem; } .qlo-final-cta h2 { font-family: var(--fd); font-size: clamp(1.25rem, 3.5vw, 2rem); font-weight: 700; color: var(--qk); margin: 0 0 .5rem; } .qlo-final-cta p { color: var(--qm); margin: 0 0 1.5rem; } .qlo-final-cta .qlo-cta-group { justify-content: center; } /* 2.14 — ABOUT: highlight block & signature */ .qlo-highlight { background: var(--qs); border-left: 3px solid var(--qc); padding: 1.25rem 1.5rem; margin: 1.5rem 0; font-size: .95rem; } .qlo-signature { font-family: var(--fd); font-style: italic; font-size: 1.05rem; color: var(--qk); margin: 1.5rem 0 0; } /* 2.15 — BLOG: path cards */ .qlo-path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; } .qlo-path-grid > p, .qlo-path-grid > br { display: none; } .qlo-path-card { background: var(--qcr); border: 1px solid var(--qb); padding: 1.5rem; border-top: 3px solid var(--qk); } .qlo-path-card h3 { font-family: var(--fd); font-size: 1.05rem; font-weight: 600; color: var(--qk); margin: 0 0 .4rem; } .qlo-path-card p { font-size: .9rem; color: var(--qm); margin: 0 0 .75rem; line-height: 1.55; } .qlo-path-card a { font-family: var(--fl); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; border-bottom: none; color: var(--qc); } .qlo-path-card a:hover { border-bottom: 1px solid var(--qc); } /* BLOG: pillar content cards */ .qlo-pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; } .qlo-pillar-grid > p, .qlo-pillar-grid > br { display: none; } .qlo-pillar-card { background: var(--qs); border: 1px solid var(--qb); padding: 1.5rem; } .qlo-pillar-card h3 { font-family: var(--fd); font-size: 1rem; font-weight: 600; color: var(--qk); margin: 0 0 .4rem; } .qlo-pillar-card p { font-size: .9rem; color: var(--qt); margin: 0 0 .75rem; line-height: 1.55; } .qlo-pillar-card p:last-child { margin: 0; font-size: .88rem; } /* BLOG/YOUTUBE: numbered how-to list */ .qlo-howto { counter-reset: howto; padding: 0; list-style: none; margin: 1rem 0 1.5rem; } .qlo-howto li { counter-increment: howto; display: flex; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--qb); font-size: .95rem; align-items: flex-start; } .qlo-howto li::before { content: counter(howto); font-family: var(--fd); font-size: 1.75rem; font-weight: 700; color: var(--qb); flex-shrink: 0; line-height: 1.1; } /* 2.16 — COMMUNITY: join block */ .qlo-join { background: var(--qk); padding: 2.5rem; margin: 2.5rem 0; color: rgba(255, 255, 255, .85); } .qlo-join h2 { font-family: var(--fd); color: #fff; margin: 0 0 .5rem; } .qlo-join p { color: rgba(255, 255, 255, .65); margin: 0 0 1rem; } .qlo-join .qlo-privacy { font-size: .85rem; color: rgba(255, 255, 255, .4); margin-top: 1rem; font-style: italic; } .qlo-join em { color: rgba(255, 255, 255, .5); } /* suppress wpautop-injected
and empty

inside join dark band */ .qlo-join p br, .qlo-join .qlo-cta-group br, .qlo-join > p:empty { display: none; } /* COMMUNITY: participation cards */ .qlo-part-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; } .qlo-part-grid > p, .qlo-part-grid > br { display: none; } .qlo-part-card { background: var(--qcr); border: 1px solid var(--qb); padding: 1.5rem; } .qlo-part-card h3 { font-family: var(--fd); font-size: 1rem; font-weight: 600; color: var(--qk); margin: 0 0 .4rem; } .qlo-part-card p { font-size: .9rem; color: var(--qm); margin: 0 0 .75rem; line-height: 1.55; } .qlo-part-card a { font-family: var(--fl); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; } /* COMMUNITY: standards list */ .qlo-standards { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--qb); } .qlo-standards li { padding: .7rem 0 .7rem 1.25rem; border-bottom: 1px solid var(--qb); font-size: .93rem; position: relative; } .qlo-standards li::before { content: '—'; position: absolute; left: 0; color: var(--qm); } /* COMMUNITY/BLOG: explore link pills */ .qlo-link-grid { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; } .qlo-link-grid > br { display: none; } .qlo-link-grid a { font-family: var(--fl); font-size: 0.8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: .6rem 1.1rem; border: 1px solid var(--qb); color: var(--qk); border-bottom: 1px solid var(--qb); background: var(--qcr); } .qlo-link-grid a:hover { border-color: var(--qc); color: var(--qc); } /* 2.17 — YOUTUBE: content type cards */ .qlo-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; } .qlo-content-grid > p, .qlo-content-grid > br { display: none; } .qlo-content-card { background: var(--qcr); border: 1px solid var(--qb); padding: 1.5rem; border-left: 3px solid var(--qc); } .qlo-content-card h3 { font-family: var(--fd); font-size: 1rem; font-weight: 600; color: var(--qk); margin: 0 0 .4rem; } .qlo-content-card p { font-size: .9rem; color: var(--qm); margin: 0; line-height: 1.55; } /* YOUTUBE: dark nav CTA */ .qlo-nav-dark { background: var(--qk); padding: 2rem; margin-top: 2.5rem; } .qlo-nav-dark p.qlo-nav-title { font-family: var(--fl); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .4); margin: 0 0 1rem; } .qlo-nav-dark .qlo-btn--secondary { border-color: rgba(255, 255, 255, .3) !important; color: rgba(255, 255, 255, .8); } /* suppress wpautop-injected
and empty

in dark nav bands */ .qlo-nav-dark p br, .qlo-nav-dark .qlo-cta-group br, .qlo-nav-dark > p:empty, .qlo-form-area p br, .qlo-form-area .qlo-cta-group br, .qlo-form-area > p:empty { display: none; } /* 2.18 — CONTACT: info blocks */ .qlo-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; } .qlo-contact-grid > p, .qlo-contact-grid > br { display: none; } .qlo-contact-block { background: var(--qcr); border: 1px solid var(--qb); padding: 1.75rem; } .qlo-contact-block h3 { font-family: var(--fl); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--qm); font-weight: 600; margin: 0 0 .6rem; } .qlo-contact-block p { margin: 0; font-size: .95rem; } .qlo-contact-block a { font-size: 1rem; font-weight: 500; } .qlo-address { background: var(--qs); border: 1px solid var(--qb); padding: 1.75rem; } .qlo-address h3 { font-family: var(--fl); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--qm); font-weight: 600; margin: 0 0 .6rem; } .qlo-address p { margin: 0; font-size: .93rem; line-height: 1.75; } .qlo-address em { font-size: .85rem; color: var(--qm); display: block; margin-top: .75rem; font-style: italic; } .qlo-note { border-left: 3px solid var(--qc); background: var(--qs); padding: 1rem 1.25rem; font-size: .93rem; margin: 1.5rem 0; } .qlo-policy-links { list-style: none; padding: 0; margin: 1rem 0; border-top: 1px solid var(--qb); } .qlo-policy-links li { border-bottom: 1px solid var(--qb); padding: .7rem 0; } .qlo-policy-links li a { font-weight: 500; } .qlo-form-area { background: var(--qk); padding: 2rem; margin-top: 2.5rem; color: rgba(255, 255, 255, .85); } .qlo-form-area h2 { font-family: var(--fd); color: #fff; margin: 0 0 .5rem; } .qlo-form-area p { color: rgba(255, 255, 255, .6); margin: 0 0 1rem; font-size: .93rem; } .qlo-form-area em { color: rgba(255, 255, 255, .35); } /* ============================================================ 3. LEGAL PAGES (.qlo-legal) Used by: privacy-policy, return-refund-policy, shipping-policy, terms-and-conditions ============================================================ */ .qlo-legal { font-family: var(--fb); color: var(--qt); max-width: 780px; margin: 0 auto; padding: 0 1.25rem 4rem; line-height: 1.85; font-size: .975rem; } .qlo-legal h1 { font-family: var(--fd); font-size: clamp(1.65rem, 4.5vw, 2.5rem); font-weight: 700; color: var(--qk); line-height: 1.15; margin: 0 0 .5rem; } .qlo-legal h2 { font-family: var(--fd); font-size: 1.15rem; font-weight: 600; color: var(--qk); margin: 2rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--qb); } .qlo-legal h3 { font-family: var(--fl); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; color: var(--qm); margin: 1.25rem 0 .4rem; } .qlo-legal p { margin: 0 0 .9rem; } .qlo-legal a { color: var(--qc); text-decoration: none; border-bottom: 1px solid rgba(22, 163, 74, .3); } .qlo-legal a:hover { border-bottom-color: var(--qc); } .qlo-legal ul, .qlo-legal ol { padding-left: 1.5rem; margin: 0 0 1rem; } .qlo-legal li { margin-bottom: .4rem; } .qlo-legal strong { color: var(--qk); } .qlo-legal em { color: var(--qm); } .qlo-legal-hero { padding: 2.5rem 0 1.75rem; border-bottom: 2px solid var(--qk); margin-bottom: 2.25rem; } .qlo-legal-meta { font-family: var(--fl); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--qm); margin-top: .5rem; } /* Table of contents */ .qlo-toc { background: var(--qcr); border: 1px solid var(--qb); padding: 1.25rem 1.5rem; margin: 0 0 2rem; font-size: .9rem; } .qlo-toc p { font-family: var(--fl); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--qm); font-weight: 600; margin: 0 0 .6rem; } .qlo-toc ol { padding-left: 1.25rem; margin: 0; } .qlo-toc li { margin-bottom: .3rem; } /* Warning/important box */ .qlo-warn { background: var(--qs); border-left: 3px solid var(--qc); padding: 1rem 1.25rem; margin: 1.25rem 0; font-size: .93rem; } /* Shipping policy table */ .qlo-timing-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .9rem; } .qlo-timing-table th { background: var(--qk); color: #fff; font-family: var(--fl); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-align: left; padding: .5rem .8rem; } .qlo-timing-table td { padding: .55rem .8rem; border-bottom: 1px solid var(--qb); vertical-align: top; } .qlo-timing-table tr:nth-child(even) td { background: var(--qcr); } /* Contact / address info box */ .qlo-contact-box { background: var(--qs); border: 1px solid var(--qb); padding: 1.25rem 1.5rem; margin-top: 1.5rem; font-size: .93rem; line-height: 1.8; } /* End-of-page CTA link row */ .qlo-cta-end { border-top: 1px solid var(--qb); padding-top: 1.5rem; margin-top: 1.5rem; font-size: .93rem; } /* ============================================================ 4. RESPONSIVE ============================================================ */ @media (max-width: 600px) { .qlo-pillar { padding: 0 1rem 3rem; } .qlo-grid2 { grid-template-columns: 1fr; } /* Product gallery: 2 columns on mobile regardless of how many images */ .qlo-product-gallery { grid-template-columns: 1fr 1fr !important; gap: 0.5rem; } /* Carousel: show 1.5 cards on mobile for scroll hint */ .qlo-carousel-item { flex: 0 0 75%; } /* Prevent wide tables from breaking mobile layout (e.g. 6-col T-shirt comparison table) */ .qlo-pillar table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .qlo-pg-hero, .qlo-section { padding-left: 1rem; padding-right: 1rem; } .qlo-engage { padding: 1.75rem; } .qlo-join { padding: 1.75rem; } .qlo-legal { padding: 0 1rem 3rem; } .qlo-page { padding-left: 1rem; padding-right: 1rem; } } /* ── Accessibility: tap targets ───────────────────────────── */ /* C9: Hamburger button must meet WCAG 2.5.5 48×48px minimum */ .menu-toggle { min-width: 48px; min-height: 48px; } /* ── Mobile performance fixes ─────────────────────────────── */ /* Announcement bar: collapse to single line on mobile to keep H1 above fold */ @media (max-width: 600px) { .qlo-announce { font-size: 1rem; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .5rem 1rem; } } /* Carousel arrow buttons: expand hit area to meet 44×44px minimum */ .qlo-carousel-btn { width: 44px; height: 44px; } /* Breadcrumb: reduce font size on mobile for deep hierarchies (5-level quote pages) */ @media (max-width: 480px) { .qlo-bc { font-size: .75rem; letter-spacing: .06em; gap: .2rem; } .qlo-bc-sep { font-size: .7rem; } } /* Quote/theme internal links: ensure minimum tap height */ .qlo-pillar ul li a, .qlo-pillar .qlo-nav ul li a { display: inline-block; padding-top: 6px; padding-bottom: 6px; } /* ── Ultra-wide screens (1440px+) ─────────────────────────── */ /* Widen content containers to reduce dead whitespace at 1440–1920px */ @media (min-width: 1440px) { .qlo-pillar { max-width: 980px; } .qlo-page { max-width: 1020px; } .qlo-legal { max-width: 900px; } }