/* ========================================================================== CFT Calculator — style.css (Responsive Audit v5 — Production Ready) Root-cause fixes for all 7 reported issues. ========================================================================== */ /* ─── 1. Design Tokens ──────────────────────────────────────────────────── */ :root { --color-primary: #2563EB; --color-primary-dark: #1D4ED8; --color-primary-light:#DBEAFE; --color-primary-soft: #EFF6FF; --color-bg: #FFFFFF; --color-surface: #F8FAFC; --color-surface-2: #F1F5F9; --color-border: #E2E8F0; --color-text: #0F172A; --color-text-muted: #475569; --color-text-faint: #94A3B8; --color-success: #16A34A; --color-success-bg: #F0FDF4; --color-warning: #D97706; --color-warning-bg: #FFFBEB; --color-danger: #DC2626; --color-danger-bg: #FEF2F2; --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font-base); --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem; --fs-4xl: 2.75rem; --fs-5xl: 3.25rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 5rem; --space-16: 7rem; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 8px 24px rgba(15,23,42,.08); --shadow-lg: 0 20px 48px rgba(15,23,42,.12); --shadow-primary: 0 12px 28px rgba(37,99,235,.25); --container-width: 1180px; --header-height: 76px; --transition-fast: 150ms ease; --transition-base: 220ms cubic-bezier(.4,0,.2,1); } /* ─── 2. Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* margin/padding reset per element, NOT globally, so we don't nuke spacing */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* ISSUE 2 & 3 ROOT CAUSE FIX: ─ overflow-x on prevents horizontal scroll without any side effects. ─ NEVER put overflow-x on : it creates a new scroll container that clips position:fixed children AND causes the scrollbar-gap shift when body.position is set to "fixed" by JS scroll-lock. */ html { overflow-x: hidden; scroll-behavior: smooth; width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font-base); background: var(--color-bg); color: var(--color-text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 100%; /* NO overflow-x here — clips fixed elements & causes scroll-lock shift */ } /* ISSUE 3 ROOT CAUSE FIX: Use max-width:100% only on media and specific block elements, NOT globally with * — it breaks SVG viewBox rendering in hamburger spans. */ img, picture, video, canvas { display: block; max-width: 100%; height: auto; } svg { display: block; } /* block but NO max-width — breaks inline SVG sizing */ input, button, textarea, select { font: inherit; color: inherit; max-width: 100%; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } ul[class], ol[class] { padding: 0; list-style: none; } p { color: var(--color-text-muted); font-size: var(--fs-base); } main { display: block; scroll-margin-top: var(--header-height); } section { scroll-margin-top: calc(var(--header-height) + 12px); } /* ─── 3. Typography ─────────────────────────────────────────────────────── */ h1,h2,h3,h4 { font-family:var(--font-display); font-weight:800; color:var(--color-text); line-height:1.18; letter-spacing:-.02em; } h1 { font-size:var(--fs-5xl); } h2 { font-size:var(--fs-3xl); } h3 { font-size:var(--fs-xl); } h4 { font-size:var(--fs-md); } .lede { font-size:var(--fs-lg); color:var(--color-text-muted); } .eyebrow { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary); background:var(--color-primary-soft); padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); /* cap so it doesn't overflow on mobile */ max-width:100%; } .section-head { max-width:720px; margin:0 auto var(--space-8); text-align:center; } .section-head h2 { margin-top:var(--space-3); } .section-head p { margin-top:var(--space-3); } a.link-inline { color:var(--color-primary); font-weight:600; border-bottom:1px solid transparent; transition:border-color var(--transition-fast); } a.link-inline:hover { border-color:var(--color-primary); } /* ─── 4. Layout ─────────────────────────────────────────────────────────── */ .container { width:100%; max-width:var(--container-width); margin-inline:auto; padding-inline:var(--space-5); } .section { padding-block:var(--space-12); } .section--tight{ padding-block:var(--space-8); } .section--alt { background:var(--color-surface); } .grid { display:grid; gap:var(--space-6); } .grid-2 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); } .flex { display:flex; } .flex-center { display:flex; align-items:center; justify-content:center; } .flex-between { display:flex; align-items:center; justify-content:space-between; } .gap-2 { gap:var(--space-2); } .gap-3 { gap:var(--space-3); } .gap-4 { gap:var(--space-4); } .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link { position:absolute; left:-9999px; top:0; background:var(--color-primary); color:#fff; padding:var(--space-3) var(--space-5); z-index:10000; border-radius:0 0 var(--radius-sm) 0; } .skip-link:focus { left:0; } /* ─── 5. Header & Navigation ────────────────────────────────────────────── */ .site-header { position:sticky; top:0; left:0; z-index:1000; width:100%; height:var(--header-height); background:#fff; border-bottom:1px solid var(--color-border); } .site-header .container { height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); } .brand { display:flex; align-items:center; gap:var(--space-3); font-weight:800; font-size:var(--fs-lg); color:var(--color-text); flex-shrink:0; white-space:nowrap; } .brand-mark { width:40px; height:40px; flex-shrink:0; border-radius:var(--radius-sm); background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-primary); } .brand-mark svg { width:22px; height:22px; flex-shrink:0; } /* ── Desktop nav (shown above 860px) ── */ .main-nav { display:flex; align-items:center; gap:var(--space-6); } .nav-links { display:flex; align-items:center; gap:var(--space-5); } .nav-links a { font-weight:600; font-size:var(--fs-sm); color:var(--color-text-muted); padding:var(--space-2) 0; position:relative; transition:color var(--transition-fast); white-space:nowrap; } .nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--color-primary); transform:scaleX(0); transform-origin:left; transition:transform var(--transition-base); } .nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--color-text); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform:scaleX(1); } /* .header-actions holds the single desktop CTA + the hamburger */ .header-actions { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; } /* ISSUE 6 FIX: The header template has CTAs inside .main-nav AND inside .header-actions. On desktop both are visible → 3 buttons. Rule: on desktop, hide the drawer CTAs (inside .main-nav). On mobile, hide the .header-actions CTA instead. This gives exactly 1 CTA at all breakpoints. */ .main-nav .btn-primary, .main-nav .btn-secondary { display:none; } /* hidden on desktop — shown only in mobile drawer */ /* Hamburger ── hidden on desktop */ .nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); padding:9px 11px; cursor:pointer; z-index:1001; flex-shrink:0; /* ISSUE 2 FIX: position:relative keeps it in flow — no translateX side effects */ position:relative; } .nav-toggle span { display:block; width:20px; height:2px; background:var(--color-text); border-radius:2px; transition:transform .28s ease, opacity .28s ease; /* NOT max-width:100% — that breaks the span width inside a button */ } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; transform:scaleX(0); } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* ─── 6. Hero ───────────────────────────────────────────────────────────── */ .hero { position:relative; padding-block:var(--space-12) var(--space-10); overflow:clip; /* clips decorative bg gradient, not stacking context */ } .hero::before { content:""; position:absolute; inset:-20% -10% auto -10%; height:480px; background:radial-gradient(60% 60% at 50% 0%,var(--color-primary-soft) 0%,rgba(255,255,255,0) 70%); z-index:-1; pointer-events:none; } .hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-10); align-items:center; } .hero h1 { margin-top:var(--space-4); } .hero .lede { margin-top:var(--space-4); max-width:540px; } .hero-actions { display:flex; gap:var(--space-4); margin-top:var(--space-6); flex-wrap:wrap; } .hero-stats { display:flex; gap:var(--space-8); margin-top:var(--space-8); flex-wrap:wrap; } .hero-stats div strong { display:block; font-size:var(--fs-2xl); color:var(--color-text); font-weight:800; } .hero-stats div span { font-size:var(--fs-sm); color:var(--color-text-faint); } .hero-visual { position:relative; display:flex; align-items:center; justify-content:center; } .cube-wire { width:100%; max-width:380px; } .page-hero { padding-block:var(--space-10) var(--space-8); text-align:center; } .page-hero .container { max-width:820px; } .breadcrumbs { display:flex; justify-content:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-text-faint); margin-bottom:var(--space-4); flex-wrap:wrap; } .breadcrumbs a { color:var(--color-text-muted); font-weight:600; } .breadcrumbs a:hover { color:var(--color-primary); } .page-hero h1 { margin-top:var(--space-3); } .page-hero .lede { margin:var(--space-4) auto 0; max-width:640px; } /* ─── 7. Buttons ────────────────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-weight:700; font-size:var(--fs-sm); line-height:1; padding:var(--space-3) var(--space-5); border-radius:var(--radius-full); border:1.5px solid transparent; transition:all var(--transition-base); white-space:nowrap; cursor:pointer; } /* ISSUE 4 FIX: always constrain SVG inside buttons — prevents giant reset icon */ .btn svg { width:16px; height:16px; flex-shrink:0; pointer-events:none; } .btn-primary { background:var(--color-primary); color:#fff; box-shadow:var(--shadow-primary); } .btn-primary:hover { background:var(--color-primary-dark); transform:translateY(-2px); box-shadow:0 16px 32px rgba(37,99,235,.32); } .btn-secondary { background:#fff; color:var(--color-text); border-color:var(--color-border); } .btn-secondary:hover { border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-2px); } .btn-ghost { background:transparent; color:var(--color-primary); } .btn-ghost:hover { background:var(--color-primary-soft); } .btn-block { width:100%; } .btn-sm { padding:var(--space-2) var(--space-4); font-size:var(--fs-xs); } .btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--color-primary-light); outline-offset:2px; } /* ─── 8. Cards ──────────────────────────────────────────────────────────── */ .card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform var(--transition-base), box-shadow var(--transition-base); min-width:0; /* ISSUE 3 FIX: prevent grid blowout */ } .feature-card { padding:var(--space-6); } .feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); } .feature-icon { width:52px; height:52px; border-radius:var(--radius-md); background:var(--color-primary-soft); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-4); flex-shrink:0; } .feature-icon svg { width:26px; height:26px; color:var(--color-primary); flex-shrink:0; } .feature-card h3 { margin-bottom:var(--space-2); } .tool-card { padding:var(--space-8); display:flex; flex-direction:column; gap:var(--space-4); position:relative; overflow:hidden; } .tool-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--color-primary-light); } .tool-card .feature-icon { width:60px; height:60px; } .tool-card .feature-icon svg { width:30px; height:30px; } .tool-card ul { display:flex; flex-direction:column; gap:var(--space-2); margin:var(--space-2) 0; } .tool-card ul li { display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-text-muted); } .tool-card ul li svg { width:16px; height:16px; color:var(--color-success); flex-shrink:0; } .step-card { padding:var(--space-5); text-align:left; } .step-num { width:36px; height:36px; border-radius:var(--radius-full); background:var(--color-text); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--fs-sm); margin-bottom:var(--space-3); flex-shrink:0; } /* ─── 9. Calculator Widget ──────────────────────────────────────────────── */ /* ISSUE 5 FIX: width:100% + max-width:640px ensures it never overflows viewport */ .calculator-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-8); max-width:640px; margin-inline:auto; width:100%; } .calculator-card .calc-title { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6); } .calc-title .feature-icon { margin-bottom:0; } .calc-fields { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-bottom:var(--space-5); } .field { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; } .field label { font-size:var(--fs-sm); font-weight:700; color:var(--color-text); } .field input, .field select { border:1.5px solid var(--color-border); border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:var(--fs-base); background:var(--color-surface); width:100%; transition:border-color var(--transition-fast), background var(--transition-fast); } .field input:focus, .field select:focus { border-color:var(--color-primary); background:#fff; outline:none; } .field input.is-invalid { border-color:var(--color-danger); background:var(--color-danger-bg); } .field-error { font-size:var(--fs-xs); color:var(--color-danger); min-height:1em; } .unit-select { grid-column:1 / -1; } /* ISSUE 4 FIX: calc-actions row */ .calc-actions { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6); flex-wrap:wrap; } .calc-actions button[data-action="calculate"] { flex:1; min-width:120px; } .calc-actions button[data-action="reset"] { flex-shrink:0; padding:var(--space-3) var(--space-4); font-size:var(--fs-sm); } /* ISSUE 5 FIX: result panel */ .calc-result { background:var(--color-primary-soft); border:1.5px dashed var(--color-primary-light); border-radius:var(--radius-md); padding:var(--space-6); text-align:center; margin-bottom:var(--space-5); width:100%; } .calc-result .result-label { font-size:var(--fs-sm); font-weight:700; color:var(--color-primary); text-transform:uppercase; letter-spacing:.06em; } .calc-result .result-value { font-size:var(--fs-4xl); font-weight:800; color:var(--color-text); margin-top:var(--space-2); line-height:1.2; overflow-wrap:break-word; word-break:break-word; } .calc-result .result-value span.unit { font-size:var(--fs-lg); color:var(--color-text-muted); font-weight:600; margin-left:var(--space-2); } .result-actions { display:flex; gap:var(--space-3); justify-content:center; margin-top:var(--space-4); flex-wrap:wrap; } .conversion-list { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); } .conversion-item { background:var(--color-surface); border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-sm); gap:var(--space-2); min-width:0; } .conversion-item .conv-label { color:var(--color-text-muted); } .conversion-item .conv-value { font-weight:700; color:var(--color-text); text-align:right; flex-shrink:0; } .calc-status[role="alert"] { font-size:var(--fs-sm); margin-top:var(--space-3); } .calc-status.success { color:var(--color-success); } .calc-status.error { color:var(--color-danger); } /* ─── 10. Tables ────────────────────────────────────────────────────────── */ .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-md); border:1px solid var(--color-border); } table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:420px; } thead th { background:var(--color-surface-2); text-align:left; padding:var(--space-3) var(--space-4); font-weight:700; color:var(--color-text); border-bottom:1px solid var(--color-border); white-space:nowrap; } tbody td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); color:var(--color-text-muted); } tbody tr:last-child td { border-bottom:none; } tbody tr:hover { background:var(--color-surface); } caption { caption-side:top; text-align:left; font-weight:700; padding-bottom:var(--space-3); } /* ─── 11. FAQ ───────────────────────────────────────────────────────────── */ .faq-list { display:flex; flex-direction:column; gap:var(--space-3); max-width:820px; margin-inline:auto; } .faq-item { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; } .faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:var(--space-5); background:none; border:none; text-align:left; font-weight:700; font-size:var(--fs-base); cursor:pointer; } .faq-question svg { flex-shrink:0; width:20px; height:20px; color:var(--color-primary); transition:transform var(--transition-base); } .faq-question[aria-expanded="true"] svg { transform:rotate(180deg); } .faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 var(--space-5); } .faq-answer p { padding-bottom:var(--space-5); } .faq-item.is-open .faq-answer { max-height:800px; } /* ─── 12. Content ───────────────────────────────────────────────────────── */ .prose { max-width:820px; margin-inline:auto; } .prose h2 { margin-top:var(--space-10); margin-bottom:var(--space-4); } .prose h3 { margin-top:var(--space-8); margin-bottom:var(--space-3); } .prose p { margin-bottom:var(--space-4); } .prose ul, .prose ol { margin:0 0 var(--space-4); padding-left:var(--space-6); color:var(--color-text-muted); } .prose ul { list-style:disc; } .prose ol { list-style:decimal; } .prose li { margin-bottom:var(--space-2); } .prose .table-wrap { margin:var(--space-6) 0; } .callout { border-radius:var(--radius-md); padding:var(--space-5); margin:var(--space-6) 0; border-left:4px solid var(--color-primary); background:var(--color-primary-soft); display:flex; gap:var(--space-3); } .callout svg { width:22px; height:22px; color:var(--color-primary); flex-shrink:0; } .callout p { color:var(--color-text); margin:0; } .callout--warning { border-color:var(--color-warning); background:var(--color-warning-bg); } .callout--warning svg { color:var(--color-warning); } .callout--success { border-color:var(--color-success); background:var(--color-success-bg); } .callout--success svg { color:var(--color-success); } .formula-box { background:var(--color-text); color:#fff; border-radius:var(--radius-md); padding:var(--space-6); text-align:center; margin:var(--space-6) 0; font-family:var(--font-mono); overflow-wrap:break-word; } .formula-box .formula { font-size:var(--fs-xl); font-weight:700; } .formula-box .formula-note { font-size:var(--fs-xs); color:var(--color-text-faint); margin-top:var(--space-2); font-family:var(--font-base); } .example-box { background:var(--color-surface); border-radius:var(--radius-md); padding:var(--space-5); margin:var(--space-5) 0; } .example-box h4 { margin-bottom:var(--space-2); color:var(--color-primary); } .icon-list { display:grid; gap:var(--space-3); } .icon-list li { display:flex; align-items:flex-start; gap:var(--space-3); color:var(--color-text-muted); } .icon-list li svg { width:20px; height:20px; color:var(--color-success); flex-shrink:0; margin-top:3px; } .tag-grid { display:flex; flex-wrap:wrap; gap:var(--space-3); } .tag-pill { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:var(--space-2) var(--space-5); font-size:var(--fs-sm); font-weight:600; color:var(--color-text-muted); display:flex; align-items:center; gap:var(--space-2); } /* ─── 13. CTA ───────────────────────────────────────────────────────────── */ .cta-section { background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); border-radius:var(--radius-lg); padding:var(--space-10); text-align:center; color:#fff; } .cta-section h2 { color:#fff; } .cta-section p { color:rgba(255,255,255,.85); max-width:560px; margin:var(--space-3) auto var(--space-6); } .cta-section .btn-primary { background:#fff; color:var(--color-primary); box-shadow:none; } .cta-section .btn-primary:hover { background:var(--color-surface); } .related-tool { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; background:var(--color-surface); border-radius:var(--radius-lg); padding:var(--space-8); border:1px solid var(--color-border); } /* ─── 14. Forms ─────────────────────────────────────────────────────────── */ .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-10); align-items:start; } .contact-form { display:flex; flex-direction:column; gap:var(--space-4); } .contact-form textarea { resize:vertical; min-height:140px; } .contact-info-card { display:flex; flex-direction:column; gap:var(--space-5); } .contact-info-item { display:flex; gap:var(--space-3); align-items:flex-start; } .contact-info-item .feature-icon { margin-bottom:0; flex-shrink:0; width:44px; height:44px; } .contact-info-item .feature-icon svg { width:22px; height:22px; } .map-placeholder { width:100%; height:220px; border-radius:var(--radius-md); background:var(--color-surface); border:1px dashed var(--color-border); display:flex; align-items:center; justify-content:center; color:var(--color-text-faint); font-size:var(--fs-sm); flex-direction:column; gap:var(--space-2); } .form-success { display:none; background:var(--color-success-bg); color:var(--color-success); border-radius:var(--radius-md); padding:var(--space-4); font-weight:600; align-items:center; gap:var(--space-2); } .form-success.is-visible { display:flex; } /* ─── 15. Footer ────────────────────────────────────────────────────────── */ .site-footer { background:var(--color-text); color:rgba(255,255,255,.7); padding-top:var(--space-12); } .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-8); padding-bottom:var(--space-10); } .footer-brand .brand { color:#fff; } .footer-brand p { color:rgba(255,255,255,.55); margin-top:var(--space-4); max-width:280px; } .footer-col h4 { color:#fff; margin-bottom:var(--space-4); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; } .footer-col ul { display:flex; flex-direction:column; gap:var(--space-3); } .footer-col a { color:rgba(255,255,255,.65); font-size:var(--fs-sm); transition:color var(--transition-fast); } .footer-col a:hover { color:#fff; } .footer-social { display:flex; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; } .footer-social a { width:38px; height:38px; border-radius:var(--radius-full); background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background var(--transition-fast); flex-shrink:0; } .footer-social a:hover { background:var(--color-primary); } .footer-social svg { width:18px; height:18px; color:#fff; } .footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:var(--space-5); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-3); font-size:var(--fs-xs); color:rgba(255,255,255,.45); } .footer-bottom a { color:rgba(255,255,255,.55); } .footer-bottom a:hover { color:#fff; } /* ─── 15b. Author Box ───────────────────────────────────────────────────── */ .author-box { position:relative; overflow:hidden; background:#fff; border:1px solid var(--color-border); border-radius:20px; box-shadow:var(--shadow-md); padding:var(--space-8); background-image:radial-gradient(circle at 1px 1px,rgba(37,99,235,.05) 1px,transparent 0); background-size:22px 22px; width:100%; } .author-box::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--color-primary),#60A5FA,var(--color-primary)); pointer-events:none; } .author-box-header { display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap; padding-bottom:var(--space-6); margin-bottom:var(--space-6); border-bottom:1px solid var(--color-border); } .author-figure { margin:0; flex-shrink:0; } .author-figure img { width:112px; height:112px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 0 0 3px var(--color-primary-light),var(--shadow-sm); transition:transform var(--transition-base); } .author-box:hover .author-figure img { transform:scale(1.04); } .author-heading { flex:1; min-width:200px; } .author-heading h3 { font-size:var(--fs-xl); margin-bottom:var(--space-1); } .author-title { color:var(--color-primary); font-weight:700; font-size:var(--fs-sm); margin-bottom:var(--space-3); } .author-badges { display:flex; flex-wrap:wrap; gap:var(--space-2); } .author-badge { display:inline-flex; align-items:center; gap:6px; background:var(--color-primary-soft); color:var(--color-primary-dark); font-size:var(--fs-xs); font-weight:700; padding:6px 12px; border-radius:var(--radius-full); border:1px solid var(--color-primary-light); transition:background var(--transition-fast),transform var(--transition-fast); } .author-badge:hover { background:var(--color-primary-light); transform:translateY(-1px); } .author-badge svg { width:13px; height:13px; flex-shrink:0; } .author-bio p { color:var(--color-text-muted); margin-bottom:var(--space-6); } .author-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-bottom:var(--space-6); } .author-stat { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-4); text-align:center; transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base); min-width:0; } .author-stat:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--color-primary-light); } .author-stat strong { display:block; font-size:var(--fs-xl); font-weight:800; color:var(--color-primary); } .author-stat span { font-size:var(--fs-xs); color:var(--color-text-faint); font-weight:600; } .author-editorial { background:var(--color-primary-soft); border-left:4px solid var(--color-primary); border-radius:var(--radius-md); padding:var(--space-5); margin-bottom:var(--space-6); display:flex; gap:var(--space-3); } .author-editorial svg { width:22px; height:22px; color:var(--color-primary); flex-shrink:0; } .author-editorial h4 { font-size:var(--fs-sm); margin-bottom:var(--space-1); } .author-editorial p { font-size:var(--fs-sm); color:var(--color-text-muted); margin:0; } .author-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; } .author-socials { display:flex; gap:var(--space-2); } .author-socials a { width:38px; height:38px; border-radius:50%; background:var(--color-surface); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; transition:all var(--transition-fast); } .author-socials a:hover { background:var(--color-primary); border-color:var(--color-primary); transform:translateY(-2px); } .author-socials a:hover svg { color:#fff; } .author-socials svg { width:17px; height:17px; color:var(--color-text-muted); } .author-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; } /* ─── 16. 404 ───────────────────────────────────────────────────────────── */ .error-page { min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding-block:var(--space-12); } .error-page .container { max-width:560px; } .error-illustration { width:220px; margin:0 auto var(--space-6); } .error-code { font-size:var(--fs-5xl); font-weight:800; color:var(--color-primary); } /* ─── 17. Animations ────────────────────────────────────────────────────── */ @keyframes float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } @keyframes fadeUp { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } .float { animation:float 5s ease-in-out infinite; } .fade-up { animation:fadeUp 0.6s ease both; } /* ─── 18. Accessibility ─────────────────────────────────────────────────── */ ::selection { background:var(--color-primary-light); color:var(--color-text); } /* ═══════════════════════════════════════════════════════════════════════════ 19. RESPONSIVE BREAKPOINTS ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1024px — wide tablet ─────────────────────────────────────────────── */ @media (max-width:1024px) { .hero-grid { grid-template-columns:1fr; text-align:center; } .hero .lede { margin-inline:auto; } .hero-actions { justify-content:center; } .hero-stats { justify-content:center; } .hero-visual { order:-1; max-width:280px; margin-inline:auto; } .footer-grid { grid-template-columns:1fr 1fr; gap:var(--space-8); } .grid-4 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(2,1fr); } } /* ── 860px — mobile nav ────────────────────────────────────────────────── */ @media (max-width:860px) { /* Show hamburger */ .nav-toggle { display:flex; } /* ISSUE 6 FIX: hide the .header-actions desktop CTA on mobile */ .header-actions .btn-primary, .header-actions .btn-secondary { display:none; } /* ISSUES 1 & 2 ROOT-CAUSE FIX — Mobile Drawer: Why display:none → display:flex (NOT transform, NOT visibility): ─ transform:translateX() creates a stacking context that gets clipped by overflow-x:hidden on in WebKit/Blink mobile browsers. ─ visibility:hidden still occupies layout space and leaks overflow. ─ display:none removes the element entirely from paint & layout. When .is-open is added, display:flex is set — zero layout shift, zero overflow, zero stacking-context conflicts. ISSUE 2 ADDITIONAL FIX — No body.position=fixed scroll-lock: ─ Setting body.position="fixed" shifts the page right by the scrollbar width (typically 15-17px on desktop, 0 on mobile but still causes a viewport-width recalculation that shifts sticky elements). ─ We use overflow:hidden on ONLY while menu is open (see JS). But overflow on body is safe here because the drawer is position:fixed with a known top/left, so it is not a scroll-container child. */ .main-nav { display:none; /* hidden by default — NO overflow, NO layout shift */ position:fixed; top:0; left:0; width:100%; height:100%; padding-top:var(--header-height); padding-left:20px; padding-right:20px; padding-bottom:40px; background:var(--color-primary); /* ISSUE 1 FIX: blue background as requested */ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:999; } /* ISSUE 1 FIX: open state */ .main-nav.is-open { display:flex; } /* ISSUE 1 FIX: nav links — white text on blue background */ .nav-links { flex-direction:column; align-items:stretch; gap:0; width:100%; border-top:1px solid rgba(255,255,255,.2); margin-bottom:var(--space-6); } .nav-links li { border-bottom:1px solid rgba(255,255,255,.15); list-style:none; } .nav-links a { display:flex; align-items:center; padding:16px 12px; font-size:1.05rem; font-weight:700; color:#fff; /* white text on blue */ min-height:52px; } .nav-links a::after { display:none; } .nav-links a:hover, .nav-links a[aria-current="page"] { background:rgba(255,255,255,.15); border-radius:var(--radius-sm); color:#fff; } /* ISSUE 1 FIX: show drawer CTAs as white buttons on blue bg */ .main-nav .btn-primary { display:flex; width:100%; justify-content:center; margin-bottom:var(--space-3); padding:15px var(--space-4); font-size:1rem; border-radius:var(--radius-md); /* invert: white bg, blue text */ background:#fff; color:var(--color-primary); border-color:#fff; box-shadow:none; } .main-nav .btn-secondary { display:flex; width:100%; justify-content:center; margin-bottom:var(--space-3); padding:15px var(--space-4); font-size:1rem; border-radius:var(--radius-md); /* outline style for secondary */ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); } .main-nav .btn-primary:hover { background:var(--color-primary-soft); } .main-nav .btn-secondary:hover{ background:rgba(255,255,255,.1); } .contact-grid { grid-template-columns:1fr; } } /* ── 720px — mobile ────────────────────────────────────────────────────── */ @media (max-width:720px) { :root { --fs-5xl: 2rem; --fs-4xl: 1.75rem; --fs-3xl: 1.5rem; --fs-2xl: 1.25rem; --fs-xl: 1.125rem; --header-height:64px; } .container { padding-inline:16px; } .section { padding-block:var(--space-8); } .section--tight{ padding-block:var(--space-5); } /* Grids → single column */ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; gap:var(--space-4); } /* Hero */ .hero { padding-block:var(--space-6); overflow:clip; } .hero-visual { max-width:160px; } .hero-actions { flex-direction:column; align-items:stretch; gap:var(--space-3); } .hero-actions .btn { width:100%; justify-content:center; } .hero-stats { gap:var(--space-5); } .hero-stats > div { min-width:80px; text-align:center; } /* Calculator card */ .calculator-card { padding:20px 16px; border-radius:var(--radius-md); } .calc-fields { grid-template-columns:1fr; gap:var(--space-3); } .unit-select { grid-column:1; } /* ISSUE 4 FIX: action buttons stack vertically, both full-width */ .calc-actions { flex-direction:column; align-items:stretch; gap:var(--space-3); margin-bottom:var(--space-5); } .calc-actions button[data-action="calculate"] { width:100%; justify-content:center; padding:14px 16px; font-size:var(--fs-base); } .calc-actions button[data-action="reset"] { width:100%; justify-content:center; padding:12px 16px; font-size:var(--fs-sm); /* SVG already capped at 16px via .btn svg rule */ } /* ISSUE 5 FIX: result section */ .calc-result { padding:18px 14px; margin-bottom:var(--space-4); } .calc-result .result-label { font-size:0.7rem; } .calc-result .result-value { font-size:1.75rem; word-break:break-word; } .calc-result .result-value span.unit { font-size:0.95rem; margin-left:6px; } .result-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-top:var(--space-3); } .result-actions .btn { justify-content:center; font-size:0.7rem; padding:10px 10px; } .conversion-list { grid-template-columns:1fr; gap:var(--space-2); } /* Tool cards */ .tool-card { padding:var(--space-5); } /* Author box */ .author-box { padding:20px 16px; } .author-box-header { flex-direction:column; align-items:center; text-align:center; gap:var(--space-4); } .author-badges { justify-content:center; } .author-stats { grid-template-columns:repeat(2,1fr); gap:var(--space-3); } .author-footer { flex-direction:column; gap:var(--space-4); } .author-socials { justify-content:center; } .author-actions { flex-direction:column; gap:var(--space-3); } .author-actions .btn { width:100%; justify-content:center; } /* Related tool */ .related-tool { flex-direction:column; text-align:center; gap:var(--space-4); } .related-tool .btn { width:100%; justify-content:center; } /* CTA section */ .cta-section { padding:var(--space-6) 16px; border-radius:var(--radius-md); } .cta-section .btn { width:100%; } /* Section heading */ .section-head { margin-bottom:var(--space-5); } .section-head h2 { font-size:var(--fs-2xl); } /* Page hero */ .page-hero { padding-block:var(--space-6) var(--space-4); } .breadcrumbs { font-size:var(--fs-xs); } /* Footer */ .footer-grid { grid-template-columns:1fr; gap:var(--space-6); } .footer-bottom { flex-direction:column; text-align:center; gap:var(--space-2); } /* Contact */ .contact-grid { grid-template-columns:1fr; gap:var(--space-6); } /* Prose */ .prose ul,.prose ol { padding-left:var(--space-5); } .callout { flex-direction:column; gap:var(--space-2); } .formula-box { padding:var(--space-5) 16px; } .formula-box .formula { font-size:var(--fs-lg); } } /* ── 420px — small phones ──────────────────────────────────────────────── */ @media (max-width:420px) { :root { --fs-5xl:1.75rem; --fs-4xl:1.5rem; --fs-3xl:1.25rem; } .hero-stats { flex-direction:column; align-items:flex-start; gap:var(--space-3); } .calc-result .result-value { font-size:1.4rem; } .result-actions { grid-template-columns:1fr; } .author-stats { grid-template-columns:1fr 1fr; } .tag-pill { font-size:11px; padding:4px 10px; } .footer-social a { width:34px; height:34px; } } /* ── Print ─────────────────────────────────────────────────────────────── */ @media print { .site-header,.site-footer,.nav-toggle,.hero-actions,.calc-actions,.result-actions { display:none; } }