/* PHASE:2:START — /src/css/tools.css — Unified Tool Page Styles */ /* ================================================================= FILE: /src/css/tools.css Single stylesheet for ALL calculator tool pages. Injected by build.js for every PAGE_TYPE: tool. No per-tool CSS files. Scoped overrides via data-tool-id on . Mobile-first. Base = 375px. Breakpoints: 600px (tablet), 768px (small desktop), 1140px (wide) ================================================================= */ /* ─── PHASE:2:START — CSS Custom Properties ─────────────────────────────── */ :root { /* These extend global.css tokens — do not redefine vars from global.css */ --tool-input-bg: #fafafa; --tool-input-border: #ccc; --tool-input-focus: var(--color-primary, #E85D26); --tool-card-bg: var(--color-bg-alt, #f8f8f8); --tool-card-radius: 8px; --tool-card-border: 1px solid var(--color-border, #e0e0e0); --tool-section-gap: 32px; --tool-error-color: #c0392b; --tool-risk-high: #d32f2f; --tool-risk-medium: #f57c00; --tool-risk-low: #388e3c; } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Tool Page Wrapper ─────────────────────────────────── */ .tool-page { padding: 0 16px; box-sizing: border-box; } /* Constrain all direct children and named sections to max-width */ .tool-page > *, .tool-page .tool-layout, .tool-page .tool-hero, .tool-page .tool-explainer, .tool-page .tool-specs-table, .tool-page .tool-faq, .tool-page .tool-related { max-width: 1100px; margin-left: auto; margin-right: auto; } @media (min-width: 600px) { .tool-page { padding: 0 24px; } } @media (min-width: 1140px) { .tool-page { padding: 0 40px; } } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Tool Hero ─────────────────────────────────────────── */ .tool-hero { padding: 24px 0 16px; } .tool-hero h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 8px; color: var(--color-text, #1a1a1a); } .tool-subtitle { font-size: 1rem; color: var(--color-text-light, #666); margin: 0; } @media (min-width: 600px) { .tool-hero h1 { font-size: 1.75rem; } } @media (min-width: 768px) { .tool-hero { padding: 32px 0 20px; } .tool-hero h1 { font-size: 2rem; } } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Tool Layout (inputs + sidebar + results) ───────────── */ .tool-layout { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; } @media (min-width: 768px) { .tool-layout { flex-direction: row; align-items: flex-start; gap: 32px; } .tool-inputs { flex: 0 0 400px; } .tool-results { flex: 1; min-width: 0; /* prevents flex blowout */ } } /* With sidebar ad: 3-column grid on large desktop */ @media (min-width: 1024px) { .tool-layout { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto auto; gap: 0 24px; align-items: start; } .tool-inputs { grid-column: 1; grid-row: 1; } .tool-results { grid-column: 1; grid-row: 2; } /* Sidebar ad slot takes column 2 full height */ .tool-layout > .ad-slot { grid-column: 2; grid-row: 1 / 3; } } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Input Section ─────────────────────────────────────── */ .tool-inputs { background: #fff; border: var(--tool-card-border); border-radius: var(--tool-card-radius); padding: 20px 16px; } /* Section heading inside inputs panel */ .inputs-heading { font-size: 1rem; font-weight: 700; color: var(--color-text, #1a1a1a); margin: 0 0 16px; } .input-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .input-group:last-of-type { margin-bottom: 0; } .input-group label { font-size: 0.9rem; font-weight: 600; color: var(--color-text, #333); } .input-group input, .input-group select { font-size: 16px; /* CRITICAL — prevents iOS auto-zoom on focus */ padding: 10px 12px; border: 1px solid var(--tool-input-border); border-radius: 6px; background: var(--tool-input-bg); color: var(--color-text, #1a1a1a); width: 100%; box-sizing: border-box; min-height: 44px; /* minimum tap target */ appearance: none; -webkit-appearance: none; } /* Chevron for selects */ .input-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .input-group input:focus, .input-group select:focus { outline: 2px solid var(--tool-input-focus); outline-offset: 1px; border-color: var(--tool-input-focus); background: #fff; } .input-hint { font-size: 0.8rem; color: var(--color-text-light, #888); line-height: 1.4; } .input-error { font-size: 0.8rem; color: var(--tool-error-color); min-height: 1.1em; line-height: 1.4; display: block; } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Calculate Button ──────────────────────────────────── */ .btn-calculate { display: block; width: 100%; padding: 14px 20px; font-size: 1rem; font-weight: 700; background: var(--color-primary, #E85D26); color: #fff; border: none; border-radius: 6px; cursor: pointer; min-height: 48px; margin-top: 8px; letter-spacing: 0.02em; transition: background 0.15s ease; } .btn-calculate:hover, .btn-calculate:focus { background: var(--color-primary-dark, #c94e1f); outline: none; } .btn-calculate:active { background: #b34418; } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Results Panel ─────────────────────────────────────── */ .tool-results, #resultsPanel { background: #fff; border: var(--tool-card-border); border-radius: var(--tool-card-radius); padding: 20px 16px; } .results-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .results-header h2 { margin: 0; font-size: 1.2rem; color: var(--color-text, #1a1a1a); } .results-disclaimer { font-size: 0.8rem; color: var(--color-text-light, #888); margin-top: 16px; line-height: 1.5; padding: 10px 14px; border-left: 3px solid var(--color-primary, #E85D26); background: var(--tool-card-bg); border-radius: 0 4px 4px 0; } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Results Grid (standard tools) ─────────────────────── */ /* Used by: roof-sheet-calculator, purlin-spacing-calculator, roof-weight-calculator */ .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .result-card { background: var(--tool-card-bg); border-radius: var(--tool-card-radius); padding: 16px 12px; text-align: center; } /* Primary card spans full width on mobile */ .result-card.result-primary { grid-column: 1 / -1; background: var(--color-primary, #E85D26); color: #fff; } .result-label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; opacity: 0.85; } .result-value { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: inherit; } .result-card.result-primary .result-value { font-size: 2.25rem; } .result-unit { display: block; font-size: 0.78rem; margin-top: 4px; opacity: 0.8; } .result-note { display: block; font-size: 0.75rem; opacity: 0.75; margin-top: 4px; } /* Breakdown list inside results */ .results-breakdown { background: var(--tool-card-bg); border-radius: var(--tool-card-radius); padding: 14px 16px; margin-bottom: 12px; } .results-breakdown h3 { font-size: 0.9rem; margin: 0 0 10px; font-weight: 700; color: var(--color-text, #1a1a1a); } .breakdown-list { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: var(--color-text, #333); } .breakdown-list li { padding: 5px 0; border-bottom: 1px solid var(--color-border, #e0e0e0); } .breakdown-list li:last-child { border-bottom: none; } @media (min-width: 768px) { /* 3 columns on desktop; primary card no longer spans full */ .results-grid { grid-template-columns: repeat(3, 1fr); } .result-card.result-primary { grid-column: 1 / -1; /* keeps spanning — override per tool if needed */ } } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Print Button ──────────────────────────────────────── */ .btn-print { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 0.9rem; font-weight: 600; min-height: 44px; border: 2px solid var(--color-primary, #E85D26); background: transparent; color: var(--color-primary, #E85D26); border-radius: 6px; cursor: pointer; margin-top: 12px; transition: background 0.15s ease, color 0.15s ease; } .btn-print:hover, .btn-print:focus { background: var(--color-primary, #E85D26); color: #fff; outline: none; } /* Print header — hidden on screen */ .print-header { display: none; } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Below-Calculator Sections ─────────────────────────── */ .tool-explainer, .tool-specs-table, .tool-faq, .tool-related { margin-bottom: var(--tool-section-gap); } .tool-explainer h2, .tool-specs-table h2, .tool-faq h2, .tool-related h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--color-border, #f0f0f0); color: var(--color-text, #1a1a1a); } @media (min-width: 768px) { .tool-explainer h2, .tool-specs-table h2, .tool-faq h2, .tool-related h2 { font-size: 1.4rem; } } /* Ordered / unordered lists in explainer */ .tool-explainer ol, .tool-explainer ul { padding-left: 20px; margin: 0; } .tool-explainer li { font-size: 0.95rem; color: var(--color-text, #333); line-height: 1.6; margin-bottom: 8px; } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Specs / Data Table ────────────────────────────────── */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; } .data-table, .specs-table, .tool-specs-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 480px; } .data-table th, .specs-table th, .tool-specs-table table th { background: var(--tool-card-bg); font-weight: 700; text-align: left; padding: 10px 12px; border: 1px solid var(--color-border, #e0e0e0); white-space: nowrap; } .data-table td, .specs-table td, .tool-specs-table table td { padding: 9px 12px; border: 1px solid var(--color-border, #e0e0e0); color: var(--color-text, #444); vertical-align: top; } .data-table tr:nth-child(even) td, .specs-table tr:nth-child(even) td, .tool-specs-table table tr:nth-child(even) td { background: #fafafa; } .table-note { font-size: 0.82rem; color: var(--color-text-light, #666); margin-top: 8px; } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — FAQ Section ───────────────────────────────────────── */ .faq-item { border-bottom: 1px solid var(--color-border, #f0f0f0); padding: 16px 0; } .faq-item:first-child { padding-top: 0; } .faq-item:last-child { border-bottom: none; padding-bottom: 0; } .faq-question { font-size: 1rem; font-weight: 600; margin: 0 0 8px; line-height: 1.4; color: var(--color-text, #1a1a1a); } .faq-answer, .faq-answer p { font-size: 0.95rem; color: var(--color-text, #555); line-height: 1.6; margin: 0; } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Related Tools ─────────────────────────────────────── */ /* Covers both grid (.related-grid) and list (.related-list) patterns */ /* Grid variant (aluminium-vs-gi uses this) */ .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (min-width: 600px) { .related-grid { grid-template-columns: repeat(3, 1fr); } } .related-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: var(--tool-card-border); border-radius: 6px; text-decoration: none; color: var(--color-text, #333); font-weight: 600; font-size: 0.9rem; transition: border-color 0.15s ease, background 0.15s ease; min-height: 44px; } .related-card:hover { border-color: var(--color-primary, #E85D26); background: #fff8f5; color: var(--color-primary, #E85D26); } .related-title { font-size: 0.9rem; font-weight: 700; } .related-desc { font-size: 0.8rem; font-weight: 400; color: var(--color-text-light, #666); } /* List variant (roof-sheet uses this) */ .related-tools-list, .related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .related-tools-list li, .related-list li { font-size: 0.95rem; } .related-tools-list a, .related-list a { color: var(--color-primary, #E85D26); font-weight: 600; text-decoration: none; } .related-tools-list a:hover, .related-list a:hover { text-decoration: underline; } .related-tools-list a strong { display: block; font-size: 0.95rem; } .related-tools-list a span { display: block; font-size: 0.82rem; font-weight: 400; color: var(--color-text-light, #666); margin-top: 2px; } @media (min-width: 768px) { .related-list { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; } } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:3:START — Comparison Tool Overrides (aluminium-vs-gi only) ──── */ /* Scoped with data-tool-id so these never affect other tool pages */ body[data-tool-id="aluminium-vs-gi-calculator"] { /* GI / Aluminium accent colours */ --gi-accent: #555555; --al-accent: var(--color-primary, #E85D26); --badge-bg: var(--color-primary, #E85D26); --badge-color: #ffffff; --summary-bg: #f5f5f5; --row-border: #eeeeee; /* Comparison cards: stacked on mobile, side-by-side at 600px */ .comparison-layout { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; } @media (min-width: 600px) { .comparison-layout { flex-direction: row; align-items: flex-start; } } .comparison-card { flex: 1; border: var(--tool-card-border); border-radius: var(--tool-card-radius); padding: 16px; background: #fff; border-top: 3px solid #ccc; position: relative; } .comparison-card.gi-card { border-top-color: var(--gi-accent); } .comparison-card.al-card { border-top-color: var(--al-accent); } .comparison-card.recommended { border-top-width: 5px; box-shadow: 0 4px 16px rgba(232, 93, 38, 0.18); } .recommended-badge { display: inline-block; background: var(--badge-bg); color: var(--badge-color); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; } .card-title { font-size: 16px; font-weight: 700; color: #222; margin: 0 0 2px; } .card-standard { font-size: 12px; color: #999; margin: 0 0 14px; } /* Row pairs inside each comparison card */ .comparison-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--row-border); gap: 8px; } .comparison-row--last { border-bottom: none; } .row-label { font-size: 13px; color: #666; flex-shrink: 0; padding-right: 8px; } .row-value { font-size: 13px; font-weight: 600; color: #222; text-align: right; } /* Risk colour classes */ .risk-high { color: var(--tool-risk-high); } .risk-medium { color: var(--tool-risk-medium); } .risk-low { color: var(--tool-risk-low); } /* Summary block below comparison cards */ .summary-stats { background: var(--summary-bg); border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; } .summary-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 14px; color: #444; border-bottom: 1px solid #e8e8e8; } .summary-item:first-child { padding-top: 0; } .summary-item:last-child { border-bottom: none; } .summary-item--recommendation { background: #fff8f5; margin: 8px -16px -14px -16px; padding: 12px 16px; border-radius: 0 0 6px 6px; border-bottom: none; } .summary-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } } /* ─── PHASE:3:END ──────────────────────────────────────────────────────── */ /* ─── PHASE:2:START — Print Styles ──────────────────────────────────────── */ @media print { /* Hide everything except the results panel */ .site-header, .site-footer, .breadcrumb, .tool-hero, .tool-inputs, .ad-slot, .tool-explainer, .tool-specs-table, .tool-faq, .tool-related, .btn-print, .btn-calculate, .results-header, .results-disclaimer { display: none !important; } /* Show print header */ .print-header { display: flex !important; justify-content: space-between; align-items: flex-start; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid #333; font-size: 0.85rem; color: #333; } .print-header h2, .print-site { font-size: 1rem; font-weight: 700; margin: 0 0 4px; } .print-header p { margin: 0; color: #555; } #resultsPanel, .tool-results { display: block !important; border: none !important; padding: 0 !important; box-shadow: none !important; } /* 3-column grid on print */ .results-grid { grid-template-columns: repeat(3, 1fr) !important; } .result-card.result-primary { grid-column: auto !important; } /* Comparison tool print overrides */ .comparison-layout { flex-direction: row !important; } .comparison-card, .summary-stats { break-inside: avoid; } } /* ─── PHASE:2:END ──────────────────────────────────────────────────────── */