/* ════════════════════════════════════════════════════════════ quote-layout-below.css — quote page BELOW-THE-FOLD rules Split from quote-layout.css. Loaded async via media=print onload in quote.njk to cut render-blocking CSS for LCP. Above-the-fold rules + @media/[data-theme]/reduced-motion stay in quote-layout.css. ════════════════════════════════════════════════════════════ */ /* ── Static fold sections (in initial HTML, below viewport) ── */ /* ── 12. Trust strip ─────────────────────────────────────────── */ .q-trust { background: #fff; padding: 32px 0; border-top: 1px solid var(--border, #e5e5e5); border-bottom: 1px solid var(--border, #e5e5e5); } .q-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .q-trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 8px; } .q-trust-item .icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(234,179,8,0.1); color: var(--accent, #eab308); margin-bottom: 10px; } .q-trust-item .icon svg { width: 22px; height: 22px; } .q-trust-item .num { font-size: 20px; font-weight: 800; color: var(--text, #111); margin-bottom: 2px; font-variant-numeric: tabular-nums; } .q-trust-item .label { font-size: 12px; color: var(--text2, #555); } /* ── 13. DFM detail panel ───────────────────────────────────── */ .q-dfm-panel { background: var(--bg, #fafafa); padding: 40px 0; } .q-dfm-panel h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 4px; } .q-dfm-panel .sub { font-size: 14px; color: var(--text2, #555); margin: 0 0 20px; } .q-dfm-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #fff; border: 1px solid var(--border, #e5e5e5); border-radius: 10px; cursor: pointer; transition: all .2s ease; } .q-dfm-toggle.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .q-dfm-toggle .title { font-size: 14px; font-weight: 600; color: var(--text, #111); } .q-dfm-toggle .meta { font-size: 12px; color: var(--text3, #9ca3af); margin-top: 2px; } .q-dfm-toggle .chev { font-size: 14px; color: var(--text2, #555); transition: transform .2s ease; } .q-dfm-toggle.open .chev { transform: rotate(180deg); } .q-dfm-content { display: none; flex-direction: column; background: #fff; border: 1px solid var(--border, #e5e5e5); border-top: none; border-radius: 0 0 10px 10px; padding: 4px 0; } .q-dfm-content.open { display: flex; } .q-dfm-empty { padding: 28px 20px; text-align: center; font-size: 13px; color: var(--text3, #9ca3af); } [data-theme="dark"] .q-dfm-empty { color: #94a3b8; } .q-dfm-row { display: grid; grid-template-columns: 24px 1.2fr 1fr 1fr 80px 1.2fr; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border, #e5e5e5); font-size: 13px; } .q-dfm-row:last-child { border-bottom: none; } .q-dfm-row .icon { color: var(--text3, #9ca3af); } .q-dfm-row .icon svg { width: 18px; height: 18px; } .q-dfm-row .name { font-weight: 600; color: var(--text, #111); } .q-dfm-row .detected strong, .q-dfm-row .recommended strong { font-family: var(--font-mono); font-weight: 700; color: var(--text, #111); display: block; } .q-dfm-row .detected span, .q-dfm-row .recommended span { font-size: 11px; color: var(--text3, #9ca3af); display: block; margin-top: 1px; } .q-dfm-row .status { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; } .q-dfm-row .status.pass { color: var(--success, #059669); background: rgba(5,150,105,0.1); } .q-dfm-row .status.warn { color: var(--warning, #d97706); background: rgba(245,158,11,0.1); } .q-dfm-row .bar { height: 6px; background: var(--bg, #f5f5f5); border-radius: 3px; overflow: hidden; } .q-dfm-row .fill { height: 100%; background: var(--success, #059669); border-radius: 3px; } .q-dfm-row .fill.u-w-full { width: 100%; } .q-dfm-row .fill.warn { background: var(--warning, #d97706); width: 60%; } /* ── 14. Process info + FAQ ─────────────────────────────────── */ .q-info { background: #fff; padding: 48px 0; } .q-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .q-info-grid h2 { font-size: 22px; font-weight: 800; margin: 0 0 16px; color: var(--text, #111); } .q-info-grid > div > div { font-size: 14px; line-height: 1.7; color: var(--text2, #555); } .q-info-grid > div > div p { margin: 0 0 12px; } .q-faq { display: flex; flex-direction: column; gap: 8px; } .q-faq-item { background: var(--bg, #fafafa); border: 1px solid var(--border, #e5e5e5); border-radius: 8px; overflow: hidden; } .q-faq-q { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--text, #111); cursor: pointer; user-select: none; } .q-faq-q .icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--border, #e5e5e5); color: var(--text2, #555); font-size: 14px; font-weight: 700; transition: transform .2s ease, background .2s ease; } .q-faq-item.open .q-faq-q .icon { transform: rotate(45deg); background: var(--accent, #eab308); color: #fff; } .q-faq-a { display: none; padding: 0 18px 16px; font-size: 13px; line-height: 1.6; color: var(--text2, #555); } .q-faq-item.open .q-faq-a { display: block; } /* ── 15. Case grid ───────────────────────────────────────────── */ .q-cases { background: var(--bg, #fafafa); padding: 48px 0; } .q-cases h2 { font-size: 24px; font-weight: 800; margin: 0 0 24px; text-align: center; color: var(--text, #111); } .q-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .q-case-card { background: #fff; border: 1px solid var(--border, #e5e5e5); border-radius: var(--radius, 12px); overflow: hidden; box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.06)); transition: transform .2s ease, box-shadow .2s ease; } .q-case-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08)); } .q-case-thumb { display: flex; align-items: center; justify-content: center; height: 140px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); font-size: 64px; color: #92400e; } .q-case-thumb svg { width: 64px; height: 64px; } .q-case-body { padding: 16px 18px; } .q-case-body .tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #854d0e; background: rgba(234,179,8,0.12); padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; } .q-case-body h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--text, #111); } .q-case-body p { font-size: 12px; color: var(--text2, #555); margin: 0 0 10px; line-height: 1.5; } .q-case-body .meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text3, #9ca3af); padding-top: 10px; border-top: 1px solid var(--border, #e5e5e5); } .q-case-body .meta strong { color: #854d0e; font-weight: 700; } /* ── 16. Minimal footer (l-footer-simple override) ───────────── */ .l-footer-simple { background: var(--bg, #f5f5f5); border-top: 1px solid var(--border, #e5e5e5); padding: 20px 0; margin-top: 24px; } .l-footer-simple .l-footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--text3, #9ca3af); text-align: center; } .l-footer-simple .l-footer-bottom a { color: var(--text2, #555); text-decoration: none; margin: 0 4px; } .l-footer-simple .l-footer-bottom a:hover { color: var(--accent-hover, #ca8a04); } /* ── JS-rendered DFM feedback box (quote-state.js, created on upload — not in initial HTML) ── */ /* ── 19. Dynamic DFM feedback box (created by renderDfmWarnings JS) ── */ .q-dfm-box { margin: 12px 20px 0; padding: 12px 14px; background: #fffbeb; border: 1px solid rgba(245,158,11,0.3); border-radius: 8px; font-size: 13px; } .q-dfm-box h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #92400e; } .q-dfm-warn, .q-dfm-sug { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .q-dfm-warn li, .q-dfm-sug li { padding: 6px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background .15s ease; } .q-dfm-warn li { color: #92400e; background: rgba(245,158,11,0.08); } .q-dfm-warn li:hover { background: rgba(245,158,11,0.18); } .q-dfm-sug li { color: #166534; background: rgba(22,163,74,0.08); } .q-dfm-sug li:hover { background: rgba(22,163,74,0.18); } .q-dfm-sug em { font-style: normal; color: var(--text3, #9ca3af); margin-left: 4px; } [data-theme="dark"] .q-dfm-box { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); } [data-theme="dark"] .q-dfm-box h4 { color: #fbbf24; } /* ── 20. Two more dynamic / minor classes ─────────────────────── */ .q-dfm-clickable { cursor: pointer; } .q-quote-summary { font-size: 12px; color: var(--text2, #555); margin-top: 2px; }