/* ========================================================================== unitsnconversion.com — Design tokens Theme: engineering notebook / blueprint reference sheet ========================================================================== */ :root { /* Color */ --color-paper: #F7F8F6; --color-paper-alt: #EFF1EE; --color-ink: #14213D; --color-ink-soft: #3B4A6B; --color-copper: #B5651D; --color-copper-soft: #E8C9A8; --color-grid: #D8DCE1; --color-redline: #C0392B; --color-border: #C7CCD1; /* Per-section theme colors — each tied to a real convention from that domain, used for nav labels, section badges, and in-page accents. Conversions keeps the original brand copper; the other 3 sections each get a distinct, meaningful color. */ --color-conversion: #B5651D; /* copper — wire/resistor association, brand default */ --color-engineering: #1D5C8C; /* blueprint blue — technical drawings, circuit diagrams */ --color-developer: #1D8074; /* terminal green — classic code-editor association */ --color-scientific: #7A4B8A; /* chalkboard violet — academic/mathematics association */ /* Default page accent (overridden per-section via [data-section] below) */ --section-accent: var(--color-conversion); --section-accent-soft: var(--color-copper-soft); /* Type */ --font-display: 'Chivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Karla', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; /* Scale */ --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.75rem; --step-3: 2.5rem; --step-4: 3.5rem; --radius: 3px; --grid-size: 28px; } /* Per-section accent — set on . Conversions uses the :root default above and needs no override. */ body[data-section="engineering"] { --section-accent: var(--color-engineering); --section-accent-soft: #B9D3E5; } body[data-section="developer"] { --section-accent: var(--color-developer); --section-accent-soft: #B7DFDA; } body[data-section="scientific"] { --section-accent: var(--color-scientific); --section-accent-soft: #D9C6E0; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background-color: var(--color-paper); background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: 20px 20px; color: var(--color-ink); font-family: var(--font-body); font-size: 16px; /* never smaller — prevents iOS auto-zoom on inputs */ line-height: 1.55; -webkit-text-size-adjust: 100%; } @media (min-width: 640px) { body { background-size: var(--grid-size) var(--grid-size); } } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); line-height: 1.15; margin: 0 0 0.5em; } /* Mobile-first type scale — smaller base, grows at wider breakpoints */ h1 { font-size: clamp(1.5rem, 6vw, var(--step-4)); font-weight: 600; } h2 { font-size: clamp(1.15rem, 4.5vw, var(--step-2)); font-weight: 600; } h3 { font-size: clamp(1rem, 3.5vw, var(--step-1)); font-weight: 600; } /* Homepage hero headline — a full sentence, not a short label like other H1s, so it gets its own (smaller) scale plus a visually de-emphasized qualifying clause instead of running both parts together at equal weight on one continuous line. */ h1.hero-heading { font-size: clamp(1.4rem, 4.2vw, 2.5rem); font-weight: 700; } .hero-heading-sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.6em; color: var(--color-ink-soft); margin-top: 8px; } p { margin: 0 0 1em; } a { color: var(--section-accent); font-weight: 600; text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; } code, .mono, .fig, input[type="number"], select { font-family: var(--font-mono); } .wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .wrap { padding: 0 24px; } } /* ---------- Header / nav (mobile-first: stacked, horizontally-scrollable nav) ---------- */ .site-header { background: #fff; border-bottom: 2px solid var(--color-ink); position: sticky; top: 0; z-index: 10; } .site-header .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 8px; padding-bottom: 6px; } @media (min-width: 640px) { .site-header .wrap { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; gap: 12px; } } .brand { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--color-ink); display: flex; align-items: baseline; gap: 6px; } @media (min-width: 640px) { .brand { font-size: 1.85rem; } } .brand .brand-accent { color: var(--color-copper); } nav.main-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; width: 100%; } @media (min-width: 640px) { nav.main-nav { width: auto; gap: 22px; flex-wrap: nowrap; } } nav.main-nav a { font-size: 0.95rem; font-weight: 700; white-space: nowrap; padding: 4px 2px; } nav.main-nav a[data-nav="conversion"] { color: var(--color-conversion); } nav.main-nav a[data-nav="engineering"] { color: var(--color-engineering); } nav.main-nav a[data-nav="developer"] { color: var(--color-developer); } nav.main-nav a[data-nav="scientific"] { color: var(--color-scientific); } nav.main-nav a.active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } @media (min-width: 640px) { nav.main-nav a { font-size: 1rem; } } /* ---------- Section label ("layer" eyebrow) — now shown on all screen sizes ---------- */ .section-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; border: none; background: var(--section-accent); padding: 7px 14px; border-radius: var(--radius); margin-bottom: 16px; box-shadow: 3px 3px 0 rgba(20, 33, 61, 0.35); } /* ---------- Breadcrumb — hidden on mobile, tool-first ---------- */ .breadcrumb { padding: 12px 0 0; font-size: 0.82rem; color: var(--color-ink-soft); display: none; } @media (min-width: 640px) { .breadcrumb { display: block; } } .breadcrumb a { color: var(--section-accent); } .breadcrumb .bc-sep { margin: 0 6px; color: var(--color-border); } /* ---------- Tool page layout ---------- */ .tool-header { padding: 10px 0 4px; } @media (min-width: 640px) { .tool-header { padding: 40px 0 20px; } } .tool-header .desc { color: #5B6B87; font-size: 1.05rem; line-height: 1.65; max-width: 60ch; display: none; } @media (min-width: 640px) { .tool-header .desc { display: block; } } .tool-panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px; margin: 8px 0; box-shadow: 0 2px 8px rgba(20,33,61,0.08); } @media (min-width: 640px) { .tool-panel { padding: 28px; margin: 24px 0; } } /* Plain alphabetical link list — no per-item boxes. Flows into extra columns on wider screens so the panel doesn't sit mostly blank on desktop, while staying a single column (and single reading order) on mobile. */ .tool-list p { margin: 0 0 12px; } .tool-list p:last-child { margin-bottom: 0; } @media (min-width: 720px) { .tool-list { column-count: 2; column-gap: 40px; } .tool-list p { break-inside: avoid; } } @media (min-width: 1040px) { .tool-list { column-count: 3; } } /* Mobile-first: stacked (From, swap, To) — becomes a row at >=560px */ .field-row { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 8px; } .swap-btn { justify-self: center; } @media (min-width: 560px) { .field-row { grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; margin-bottom: 18px; } .swap-btn { justify-self: center; } } .field label { display: block; font-size: 0.78rem; color: var(--color-ink-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .field .input-group { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .field input[type="number"] { border: none; padding: 10px 12px; font-size: 1.1rem; width: 100%; min-width: 0; background: transparent; } @media (min-width: 640px) { .field input[type="number"] { padding: 14px; } } .field select { border: none; border-left: 1px solid var(--color-border); padding: 10px 10px; font-size: 0.95rem; background: var(--color-paper-alt); min-width: 4.5em; } @media (min-width: 640px) { .field select { padding: 14px 10px; } } .field input:focus, .field select:focus { outline: none; } .field .input-group:focus-within { border-color: var(--section-accent); } /* 44px minimum touch target (Apple/WCAG guidance) */ .swap-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: #fff; color: var(--color-ink); font-size: 1.2rem; cursor: pointer; } .swap-btn:hover { border-color: var(--section-accent); color: var(--section-accent); } .swap-btn:active { transform: rotate(180deg); transition: transform 0.2s ease; } .result-line { font-family: var(--font-mono); font-size: 1.05rem; color: var(--color-ink-soft); border-top: 1px dashed var(--color-border); padding-top: 14px; margin-top: 6px; } /* ---------- Reference / formula callouts (the "redline" signature) ---------- */ .formula-block { background: var(--color-paper-alt); border-left: 3px solid var(--section-accent); padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-mono); font-size: 0.95rem; margin: 20px 0; } .ref-note { position: relative; padding-left: 28px; font-size: 0.9rem; color: var(--color-ink-soft); margin: 10px 0; } .ref-note .ref-mark { position: absolute; left: 0; top: 0.05em; width: 18px; height: 18px; border: 1px solid var(--color-redline); color: var(--color-redline); border-radius: 50%; font-family: var(--font-mono); font-size: 0.7rem; display: inline-flex; align-items: center; justify-content: center; } .standards-box { border: 1px dashed var(--color-border); padding: 14px 18px; border-radius: var(--radius); font-size: 0.85rem; color: var(--color-ink-soft); margin: 24px 0; } .standards-box strong { color: var(--color-ink); } /* ---------- Progressive disclosure (Formula, FAQ) ---------- Collapsed by default on every screen size — keeps the mobile view to just the converter itself, while the working/references stay one tap away for anyone who wants to check them. Native

, so it's keyboard- and screen-reader-accessible with zero JS. */ details.disclosure { border: 1px solid var(--color-border); border-radius: var(--radius); margin: 14px 0; background: #fff; } details.disclosure > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--color-ink); display: flex; align-items: center; justify-content: space-between; -webkit-tap-highlight-color: transparent; } details.disclosure > summary::-webkit-details-marker { display: none; } details.disclosure > summary::after { content: '+'; font-family: var(--font-mono); color: var(--section-accent); font-size: 1.2rem; margin-left: 12px; flex-shrink: 0; } details.disclosure[open] > summary::after { content: '\2212'; } /* minus sign */ details.disclosure[open] > summary { border-bottom: 1px solid var(--color-grid); } .disclosure-body { padding: 4px 18px 18px; } details.disclosure .formula-block { margin-top: 4px; } /* ---------- FAQ ---------- */ .faq-item { border-bottom: 1px solid var(--color-grid); padding: 16px 0; } .faq-item h3 { font-size: 1rem; margin-bottom: 6px; } .faq-item p { color: var(--color-ink-soft); margin: 0; } /* ---------- Custom tool layouts (non-converter tools) ---------- */ /* Ohm's Law 2x2 grid */ .ohm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 400px) { .ohm-grid { grid-template-columns: 1fr; } } .unit-tag { font-family: var(--font-mono); font-size: 0.9rem; color: var(--color-ink-soft); background: var(--color-paper-alt); border-left: 1px solid var(--color-border); padding: 10px 12px; display: flex; align-items: center; } .ohm-actions { display: flex; gap: 10px; margin-top: 12px; } .btn-primary { background: var(--section-accent); color: #fff; border: none; padding: 10px 24px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; cursor: pointer; } .btn-primary:hover { opacity: 0.9; } .btn-secondary { background: transparent; color: var(--color-ink-soft); border: 1px solid var(--color-border); padding: 10px 18px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; cursor: pointer; } .btn-secondary:hover { border-color: var(--color-ink-soft); } /* Developer tool text areas */ .dev-textarea { width: 100%; min-height: 150px; padding: 12px; font-family: var(--font-mono); font-size: 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper-alt); color: var(--color-ink); resize: vertical; line-height: 1.5; } .dev-textarea:focus { outline: none; border-color: var(--section-accent); } .dev-actions { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; } /* Resistor color code tool */ .resistor-decode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (min-width: 640px) { .resistor-decode-grid { grid-template-columns: repeat(3, 1fr); } } .resistor-swatch-row { display: flex; gap: 6px; margin: 14px 0 4px; } .resistor-band { width: 28px; height: 44px; border-radius: 3px; border: 1px solid rgba(20,33,61,0.15); display: inline-block; } /* File drop zone (Base64 tool) */ .file-drop-zone { position: relative; border: 2px dashed var(--color-border); border-radius: var(--radius); padding: 18px; text-align: center; margin: 10px 0; transition: border-color 0.15s ease, background 0.15s ease; } .file-drop-zone.drop-active { border-color: var(--section-accent); background: var(--color-paper-alt); } .file-drop-label { color: var(--color-ink-soft); font-size: 0.9rem; cursor: pointer; display: block; } .file-drop-browse { color: var(--section-accent); font-weight: 600; text-decoration: underline; } .file-drop-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } /* Percentage calculator connector labels */ .pct-op { color: var(--color-ink-soft); font-size: 0.85rem; padding-bottom: 12px; white-space: nowrap; } @media (max-width: 559px) { .pct-op { padding: 4px 0; } } /* Series/parallel resistor merge animation */ .rp-diagram-wrap .series-group, .rp-diagram-wrap .parallel-group { display: none; } .rp-diagram-wrap.mode-series .series-group { display: block; } .rp-diagram-wrap.mode-parallel .parallel-group { display: block; } .rp-diagram-wrap.count-2 .rp-third { display: none; } .rp-individual { opacity: 1; transform: scale(1); transform-box: fill-box; transform-origin: center; transition: opacity 0.5s ease, transform 0.5s ease; } .rp-equivalent { opacity: 0; transform: scale(0.5); transform-box: fill-box; transform-origin: center; transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .rp-diagram-wrap.solved .rp-individual { opacity: 0; transform: scale(0.85); } .rp-diagram-wrap.solved .rp-equivalent { opacity: 1; transform: scale(1); } /* Live circuit diagrams (Ohm's Law, voltage divider, etc.) */ .circuit-diagram-wrap { display: flex; justify-content: center; margin: 4px 0 22px; } .circuit-diagram { width: 100%; max-width: 340px; height: auto; display: block; } .diagram-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; fill: var(--color-ink); } .diagram-value { font-family: var(--font-mono); font-size: 12px; fill: var(--section-accent); } .status-msg { font-family: var(--font-mono); font-size: 0.82rem; padding: 8px 0; } .status-msg.ok { color: var(--color-developer, var(--section-accent)); } .status-msg.err { color: var(--color-redline); } /* ---------- Footer ---------- */ .site-footer { border-top: 2px solid var(--color-ink); margin-top: 60px; padding: 28px 0 40px; color: var(--color-ink-soft); font-size: 0.85rem; } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }