/* ==========================================================================
CalcsYard — Global CSS
Brand: CalcsYard (calcsyard.com)
Primary accent: #4f46e5 (indigo-600)
── Required snippet order (copy into every page) ──────────────────
[Unique Page Title — 50-60 chars] | CalcsYard
──────────────────────────────────────────────────────────────────────────
========================================================================== */
/* ── CSS Custom Properties ── */
:root {
--brand-50: #eef2ff;
--brand-100: #e0e7ff;
--brand-200: #c7d2fe;
--brand-600: #4f46e5;
--brand-700: #4338ca;
--radius-card: 0.75rem;
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .06);
--shadow-card-hover: 0 4px 12px 0 rgb(0 0 0 / .10);
}
/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
/* ── FAQ Accordion ── */
.faq-answer {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease, padding 0.3s ease;
padding-top: 0;
padding-bottom: 0;
}
.faq-answer.open {
max-height: 600px;
padding-top: 0.75rem;
padding-bottom: 1rem;
}
.faq-icon {
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-question[aria-expanded="true"] .faq-icon {
transform: rotate(180deg);
}
/* ── Tool Card ── */
.tool-card {
background: #fff;
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tool-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-2px);
}
.tool-card:focus-within {
outline: 2px solid var(--brand-600);
outline-offset: 2px;
}
/* ── Input Focus ── */
.input-field:focus {
outline: none;
border-color: var(--brand-600);
box-shadow: 0 0 0 3px rgb(79 70 229 / .12);
}
/* ── Result Box ── */
.result-box {
background: var(--brand-50);
border: 1px solid var(--brand-200);
border-radius: 0.5rem;
padding: 1rem 1.25rem;
}
/* ── Formula Block ── */
.formula-block {
background: #1e1e2e;
color: #cdd6f4;
border-radius: 0.5rem;
padding: 1rem 1.25rem;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9rem;
line-height: 1.6;
overflow-x: auto;
white-space: pre-wrap;
}
/* ── Related Tool Cards ── */
.related-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: var(--radius-card);
text-decoration: none;
color: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.related-card:hover {
border-color: var(--brand-600);
box-shadow: 0 0 0 3px rgb(79 70 229 / .08);
}
/* ── AdSense Ad Units ── */
.ad-unit {
min-height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.ad-unit ins { display: block; }
/* ── Print: hide ads ── */
@media print {
.ad-unit,
nav,
footer,
.related-tools-section { display: none !important; }
.tool-card { box-shadow: none; border: 1px solid #ccc; }
body { background: #fff; }
}
/* ── Mobile nav transition ── */
#mobile-menu {
transition: opacity 0.2s ease;
}
/* ── Scrollbar (WebKit) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }