/* ============================================================ Websums — Free calculators & tools Inter · Indigo/violet palette · Modern card grid ============================================================ */ :root { --bg: #f7f7fb; --bg-alt: #ffffff; --bg-dark: #0f0f1a; --border: #e6e6ef; --text: #15151f; --text-mid: #5a5a6e; --text-light: #9a9aae; --accent: #4f46e5; /* Indigo 600 */ --accent-light: #eef2ff; --accent-dark: #3730a3; --accent-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --warn: #f59e0b; --ok: #10b981; --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --display: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'IBM Plex Mono', monospace; --max-w: 1140px; --nav-h: 60px; --radius: 14px; } /* ============================================================ Dark mode Activated via [data-theme="dark"] on (set by inline script in to avoid flash, persisted in localStorage). ============================================================ */ [data-theme="dark"] { --bg: #0d0e16; --bg-alt: #16181f; --bg-dark: #000000; --border: #2a2c38; --text: #f1f1f5; --text-mid: #a4a6b3; --text-light: #6c6e7d; --accent: #818cf8; /* lighter indigo for contrast on dark */ --accent-light: #1e1b4b; --accent-dark: #6366f1; --accent-grad: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%); } [data-theme="dark"] body { background: var(--bg); color: var(--text); } [data-theme="dark"] .input, [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #1e2029; border-color: var(--border); color: var(--text); } [data-theme="dark"] .input::placeholder { color: var(--text-light); } [data-theme="dark"] .calc-mock, [data-theme="dark"] .card, [data-theme="dark"] .tool, [data-theme="dark"] .result-card, [data-theme="dark"] .result-cell, [data-theme="dark"] .compare-card { background: var(--bg-alt); border-color: var(--border); } [data-theme="dark"] .nav { background: rgba(13, 14, 22, 0.85); border-color: var(--border); } [data-theme="dark"] .nav__dropdown-menu, [data-theme="dark"] .mobile-menu { background: var(--bg-alt); border-color: var(--border); } [data-theme="dark"] .footer { background: var(--bg-alt); border-color: var(--border); } [data-theme="dark"] .cookie-banner { background: var(--bg-alt); border-color: var(--border); color: var(--text); } [data-theme="dark"] .ad-slot { background: #1a1c25; border-color: var(--border); color: var(--text-light); } [data-theme="dark"] .calc-mock__key { background: #1e2029; border-color: var(--border); color: var(--text-mid); } [data-theme="dark"] .calc-mock__bar { background: #1e2029; border-color: var(--border); } /* Verdict pastel boxes — dark-mode tints */ [data-theme="dark"] .verdict { background: var(--bg-alt); border-color: var(--border); color: var(--text-mid); } [data-theme="dark"] .verdict strong { color: var(--text); } [data-theme="dark"] .verdict--ok { background: #0c2a1f; border-color: #14532d; color: #a7f3d0; } [data-theme="dark"] .verdict--ok strong { color: #d1fae5; } [data-theme="dark"] .verdict--bad { background: #2a0e0e; border-color: #7f1d1d; color: #fecaca; } [data-theme="dark"] .verdict--bad strong { color: #fee2e2; } [data-theme="dark"] .verdict--warn { background: #2a1e07; border-color: #78350f; color: #fde68a; } [data-theme="dark"] .verdict--warn strong { color: #fef3c7; } /* Theme toggle button in nav */ .nav__theme { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-mid); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 14px; transition: all 0.15s; flex-shrink: 0; } .nav__theme:hover { color: var(--text); border-color: var(--accent); } .nav__theme svg { width: 18px; height: 18px; } .nav__theme .nav__theme-icon--moon { display: block; } .nav__theme .nav__theme-icon--sun { display: none; } [data-theme="dark"] .nav__theme .nav__theme-icon--moon { display: none; } [data-theme="dark"] .nav__theme .nav__theme-icon--sun { display: block; } @media (max-width: 880px) { .nav__theme { margin-right: 8px; } } /* Currency switcher in nav */ .nav__currency { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-alt); margin-left: 14px; flex-shrink: 0; } .nav__currency-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-mid); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; line-height: 1; } .nav__currency-btn:hover { color: var(--text); } .nav__currency-btn.is-active { background: var(--accent); color: #fff; } [data-theme="dark"] .nav__currency-btn.is-active { color: #0d0e16; } /* Flag emoji webfont — makes 🇬🇧🇺🇸🇪🇺 render on Windows (which has no native flag emoji). Variant B: Twemoji flags used on all platforms for consistency. To revert to native OS flags, remove "Twemoji Country Flags" from the font-family below (and optionally delete this @font-face + fonts/ file). */ @font-face { font-family: "Twemoji Country Flags"; unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; src: url("fonts/TwemojiCountryFlags.woff2") format("woff2"); font-display: swap; } .nav__currency-btn-flag { font-size: 14px; line-height: 1; font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; } .nav__currency-btn-code { line-height: 1; } @media (max-width: 880px) { .nav__currency { margin-left: auto; margin-right: 6px; padding: 2px; } .nav__currency-btn { padding: 4px 6px; } .nav__currency-btn-code { display: none; } /* Never let the controls get pushed off-screen; shrink the logo instead. */ .nav__logo { min-width: 0; flex-shrink: 1; overflow: hidden; } .nav__currency, .nav__theme, .nav__burger { flex-shrink: 0; } } /* Small phones: prevent the header from overflowing — that overflow was hiding the burger menu and crowding the flags against the logo. */ @media (max-width: 440px) { .nav__inner { padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); } .nav__logo { gap: 7px; } .nav__mark { width: 30px; height: 30px; } .nav__wordmark { font-size: 19px; } .nav__currency { margin-right: 4px; gap: 0; } .nav__currency-btn { padding: 4px 5px; } .nav__theme { margin-right: 4px; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .result-card__value, .result-cell__value, .horizon__value, .tool__cta, table, input[type="number"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv11" 1; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); } .tag { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; } .tag::before { content: ""; width: 18px; height: 1.5px; background: var(--accent); display: inline-block; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(247,247,251,0.85); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .nav__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav__logo { display: flex; align-items: center; gap: 10px; } .nav__mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0; letter-spacing: -0.02em; font-family: var(--display); position: relative; box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .nav__mark::before { content: "Σ"; font-size: 20px; font-weight: 600; line-height: 1; transform: translateY(3px); } .nav__mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--bg), 0 0 8px rgba(245, 158, 11, 0.5); } [data-theme="dark"] .nav__mark::after { box-shadow: 0 0 0 2px var(--bg-dark), 0 0 8px rgba(245, 158, 11, 0.5); } .nav__wordmark { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); } .nav__links { display: flex; gap: 28px; align-items: center; } .nav__link { font-size: 14px; font-weight: 500; color: var(--text-mid); transition: color 0.15s; } .nav__link:hover { color: var(--text); } .nav__link--active { color: var(--accent); } /* Tools dropdown */ .nav__dropdown { position: relative; } .nav__dropdown-toggle { font-size: 14px; font-weight: 500; color: var(--text-mid); cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; transition: color 0.15s; } .nav__dropdown-toggle::after { content: ' ▾'; font-size: 10px; } .nav__dropdown-toggle:hover { color: var(--text); } .nav__dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding-top: 18px; padding-bottom: 8px; min-width: 220px; box-shadow: 0 12px 32px rgba(20,20,40,0.12); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 200; } .nav__dropdown:hover .nav__dropdown-menu, .nav__dropdown-menu:hover, .nav__dropdown.is-open .nav__dropdown-menu { opacity: 1; pointer-events: auto; } .nav__dropdown-menu a { display: block; padding: 9px 18px; font-size: 13px; font-weight: 500; color: var(--text-mid); transition: background 0.15s, color 0.15s; white-space: nowrap; } .nav__dropdown-menu a:hover { background: var(--accent-light); color: var(--accent); } .mobile-menu__tools { display: flex; flex-direction: column; gap: 14px; padding-left: 16px; margin-top: 8px; } .mobile-menu__tools a { font-size: 18px; font-weight: 500; color: var(--text-mid); } .mobile-menu__tools a:hover { color: var(--accent); } .nav__burger { display: none; width: 32px; height: 32px; background: none; border: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px; flex-shrink: 0; } .nav__burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 1px; transition: all 0.2s; } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); } body.menu-open { position: fixed; width: 100%; overflow: hidden; } .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--bg); display: flex; align-items: flex-start; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(var(--nav-h) + 24px) 24px max(32px, env(safe-area-inset-bottom)); } .mobile-menu.is-open { opacity: 1; pointer-events: auto; } .mobile-menu ul { display: flex; flex-direction: column; gap: 28px; text-align: center; width: 100%; max-width: 420px; margin: auto 0; } .mobile-menu__link { font-size: 26px; font-weight: 600; color: var(--text); } .mobile-menu__link:hover { color: var(--accent); } /* ============================================================ HERO ============================================================ */ .hero { padding: 100px 0 80px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -200px; right: -160px; width: 540px; height: 540px; background: radial-gradient(circle, rgba(139,92,246,0.18), transparent 70%); pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -180px; left: -160px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(99,102,241,0.14), transparent 70%); pointer-events: none; } .hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; position: relative; } .hero__text h1 { font-family: var(--display); font-size: clamp(36px, 4.8vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); margin-bottom: 22px; } .hero__text h1 .grad { font-style: italic; font-weight: 500; } .hero__text h1 .grad { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { font-size: 17px; line-height: 1.65; color: var(--text-mid); max-width: 46ch; margin-bottom: 32px; } .hero__actions { display: flex; align-items: center; gap: 24px; } .btn { display: inline-flex; align-items: center; height: 46px; padding: 0 26px; background: var(--accent-grad); color: #fff; font-family: var(--font); font-size: 15px; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 6px 20px rgba(99,102,241,0.28); } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(99,102,241,0.36); } .btn--ghost { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); box-shadow: none; } .btn--ghost:hover { background: var(--bg); border-color: #cfcfdc; box-shadow: none; } .link-arrow { font-size: 15px; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s; } .link-arrow:hover { gap: 10px; } /* Calc mock */ .calc-mock { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: 0 24px 60px -20px rgba(50,40,120,0.25); } .calc-mock__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .calc-mock__chip { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); } .calc-mock__title { font-family: var(--mono); font-size: 12px; color: var(--text-light); } .calc-mock__screen { background: var(--bg); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; font-family: var(--mono); text-align: right; border: 1px solid var(--border); } .calc-mock__small { font-size: 12px; color: var(--text-light); margin-bottom: 4px; } .calc-mock__big { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .calc-mock__big .grad { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .calc-mock__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .calc-mock__key { height: 44px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--text-mid); } .calc-mock__key--accent { background: var(--accent); color: #fff; border-color: var(--accent); } /* ============================================================ ABOUT ============================================================ */ .about { padding: 90px 0; border-top: 1px solid var(--border); background: var(--bg-alt); } .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 8px; } .about__lead h2 { font-family: var(--display); font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; } .about__body p { font-size: 16px; line-height: 1.7; color: var(--text-mid); margin-bottom: 14px; } .about__body p:last-child { margin-bottom: 0; } /* ============================================================ TOOLS / FEATURES ============================================================ */ .section { padding: 90px 0; border-top: 1px solid var(--border); } .section--alt { background: var(--bg-alt); } .section__heading { font-family: var(--display); font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.1; } .section__sub { font-size: 16px; color: var(--text-mid); margin-bottom: 40px; max-width: 60ch; } .tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tool { display: block; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; position: relative; overflow: hidden; } .tool:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(50,40,120,0.25); border-color: #d4d4e6; } .tool__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-light); color: var(--accent); display: grid; place-items: center; margin-bottom: 16px; font-size: 22px; } .tool h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; } .tool p { font-size: 14.5px; line-height: 1.6; color: var(--text-mid); margin-bottom: 14px; } .tool__cta { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; } .tool--soon { opacity: 0.65; pointer-events: none; } .tool--soon .tool__icon { background: #f0f0f4; color: var(--text-light); } .tool--soon .tool__cta { color: var(--text-light); } /* "Why" feature blocks */ .feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .feat { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; } .feat__check { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-light); color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; font-weight: 700; } .feat h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; } .feat p { font-size: 14px; line-height: 1.6; color: var(--text-mid); } /* ============================================================ CONTACT — gradient panel, centered CTA ============================================================ */ .contact { padding: 90px 0; border-top: 1px solid var(--border); } .contact__inner { max-width: 720px; margin: 0 auto; text-align: center; background: linear-gradient(160deg, #1a1530 0%, #0f0f1a 100%); border-radius: 22px; padding: 64px 32px; position: relative; overflow: hidden; color: #e7e7f2; } .contact__inner::before { content: ''; position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(139,92,246,0.45), transparent 70%); } .contact__inner::after { content: ''; position: absolute; bottom: -120px; left: -120px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(99,102,241,0.35), transparent 70%); } .contact__inner > * { position: relative; } .contact .tag { color: #c4b5fd; justify-content: center; } .contact .tag::before { background: #c4b5fd; } .contact h2 { font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 14px; color: #fff; line-height: 1.1; } .contact h2 em { font-style: italic; background: linear-gradient(135deg, #a5b4fc, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; } .contact__sub { font-size: 16px; color: #b9b9d0; margin-bottom: 32px; max-width: 48ch; margin-left: auto; margin-right: auto; line-height: 1.65; } .contact__email { font-family: var(--font); font-size: 15px; font-weight: 600; color: #fff; padding: 14px 28px; background: var(--accent-grad); border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 10px 30px rgba(139,92,246,0.4); } .contact__email::before { content: "→"; font-family: var(--mono); font-size: 16px; opacity: 0.85; transition: transform 0.2s; } .contact__email:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(139,92,246,0.55); } .contact__email:hover::before { transform: translateX(3px); } /* ============================================================ FOOTER ============================================================ */ .footer { padding: 36px 0 28px; background: var(--bg); border-top: 1px solid var(--border); } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer__left { display: flex; align-items: center; gap: 10px; } .footer__mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent-grad); color: #fff; display: grid; place-items: center; font-size: 0; font-family: var(--display); position: relative; } .footer__mark::before { content: "Σ"; font-size: 15px; font-weight: 600; line-height: 1; transform: translateY(2px); } .footer__mark::after { content: ""; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 1.5px var(--bg); } [data-theme="dark"] .footer__mark::after { box-shadow: 0 0 0 1.5px var(--bg-dark); } .footer__name { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .footer__right { text-align: right; } .footer__right p { font-size: 13px; color: var(--text-light); line-height: 1.6; } .footer__right a { color: var(--text-mid); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; transition: color 0.15s; } .footer__right a:hover { color: var(--accent); } .footer__credit { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; } .footer__credit p { font-size: 11px; color: var(--text-light); } .footer__credit a { color: var(--text-mid); text-decoration: underline; text-decoration-color: var(--border); } .footer__credit a:hover { color: var(--accent); } /* ============================================================ TOOL PAGES — calculator UI shared ============================================================ */ .tool-page { padding: 60px 0 80px; } .tool-page__head { margin-bottom: 36px; max-width: 720px; } .tool-page__head h1 { font-family: var(--display); font-size: clamp(30px, 3.8vw, 48px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.05; } .tool-page__head p { font-size: 16px; color: var(--text-mid); line-height: 1.65; } .tool-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; } .card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; } .card h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 20px; } .field { margin-bottom: 18px; } .field:last-child { margin-bottom: 0; } .field__label { display: block; font-size: 13px; font-weight: 500; color: var(--text-mid); margin-bottom: 6px; } .field__hint { font-size: 12px; color: var(--text-light); margin-top: 4px; } .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap__prefix, .input-wrap__suffix { position: absolute; font-size: 14px; color: var(--text-light); font-family: var(--mono); pointer-events: none; } .input-wrap__prefix { left: 14px; } .input-wrap__suffix { right: 14px; } .input, select.input { width: 100%; height: 44px; padding: 0 14px; font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .input:focus { outline: none; border-color: var(--accent); background: var(--bg-alt); box-shadow: 0 0 0 3px rgba(99,102,241,0.18); } .input--prefix { padding-left: 30px; } .input--suffix { padding-right: 36px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Result card */ .result-card { background: linear-gradient(160deg, #1a1530 0%, #0f0f1a 100%); border-radius: var(--radius); padding: 28px; color: #e7e7f2; position: relative; overflow: hidden; } .result-card::before { content: ''; position: absolute; top: -80px; right: -80px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(139,92,246,0.45), transparent 70%); } .result-card__label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #a5a5c4; margin-bottom: 8px; position: relative; } .result-card__value { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 4px; position: relative; } .result-card__value .grad { background: linear-gradient(135deg, #a5b4fc, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; } .result-card__sub { font-size: 14px; color: #a5a5c4; position: relative; } .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 18px; } .result-cell { background: var(--bg-alt); padding: 18px 20px; } .result-cell__label { font-size: 12px; color: var(--text-light); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .result-cell__value { font-size: 18px; font-weight: 600; color: var(--text); } .breakdown { margin-top: 20px; } .breakdown h3 { font-size: 14px; font-weight: 600; color: var(--text-mid); margin-bottom: 10px; } .bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--border); margin-bottom: 12px; } .bar__seg { height: 100%; } .bar__seg--a { background: var(--accent); } .bar__seg--b { background: #a78bfa; } .bar__seg--c { background: #f59e0b; } .bar__seg--d { background: #10b981; } .legend { display: flex; flex-wrap: wrap; gap: 14px; } .legend__item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-mid); } .legend__dot { width: 10px; height: 10px; border-radius: 50%; } .tax-breakdown { margin-top: 20px; } .tax-breakdown h3 { font-size: 14px; font-weight: 600; color: var(--text-mid); margin-bottom: 10px; } .tax-breakdown__table { width: 100%; border-collapse: collapse; font-size: 13px; } .tax-breakdown__table th, .tax-breakdown__table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border); } .tax-breakdown__table th:first-child, .tax-breakdown__table td:first-child { text-align: left; } .tax-breakdown__table th { font-weight: 600; color: var(--text-mid); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .tax-breakdown__table tfoot td { font-weight: 700; color: var(--text); border-bottom: none; border-top: 2px solid var(--border); } .tax-breakdown__group { margin-bottom: 18px; } .tax-breakdown__group h4 { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 6px; } /* ============================================================ SEO content sections (How-it-works / FAQ / Related) ============================================================ */ .tool-content { margin: 56px 0 24px; max-width: 760px; } .tool-content h2 { font-size: 24px; font-weight: 700; margin: 36px 0 14px; letter-spacing: -0.01em; } .tool-content h3 { font-size: 17px; font-weight: 600; margin: 22px 0 8px; color: var(--text); } .tool-content p { color: var(--text-mid); line-height: 1.65; margin: 0 0 12px; font-size: 15px; } .tool-content ul, .tool-content ol { color: var(--text-mid); line-height: 1.65; padding-left: 22px; margin: 0 0 14px; font-size: 15px; } .tool-content li { margin-bottom: 6px; } .tool-content a { color: var(--accent); text-decoration: none; } .tool-content a:hover { text-decoration: underline; } .tool-content code { font-family: var(--mono); background: var(--accent-light); color: var(--accent-dark); padding: 1px 6px; border-radius: 4px; font-size: 13px; } [data-theme="dark"] .tool-content code { background: rgba(99, 102, 241, 0.15); color: #c7d2fe; } .example-box { background: var(--bg-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0 18px; font-size: 14px; } .example-box strong { color: var(--text); } .faq-list { margin: 14px 0 24px; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--bg-alt); overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 15px; color: var(--text); position: relative; padding-right: 40px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--text-light); font-weight: 400; transition: transform 0.18s ease; } .faq-item[open] summary::after { content: "−"; } .faq-item__body { padding: 0 18px 16px; color: var(--text-mid); line-height: 1.6; font-size: 14px; } .faq-item__body p { margin: 0 0 8px; } .related-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 24px; } .related-tools a { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; transition: border-color 0.15s, transform 0.15s; } .related-tools a:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; } .related-tools a span { display: block; font-weight: 400; font-size: 12px; color: var(--text-mid); margin-top: 3px; } /* Ad slot */ .ad-slot { background: var(--bg-alt); border: 1px dashed var(--border); border-radius: var(--radius); padding: 16px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--text-light); margin: 24px 0; letter-spacing: 0.06em; text-transform: uppercase; } /* ============================================================ LEGAL PAGES ============================================================ */ .legal { padding: 80px 0; } .legal__title { font-family: var(--display); font-size: clamp(30px, 3.8vw, 46px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.05; } .legal__updated { font-family: var(--mono); font-size: 13px; color: var(--text-light); margin-bottom: 40px; } .legal__body { max-width: 720px; } .legal__body h2 { font-size: 20px; font-weight: 600; margin: 40px 0 12px; } .legal__body h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; } .legal__body p { font-size: 15px; line-height: 1.7; color: var(--text-mid); margin-bottom: 12px; } .legal__body ul { list-style: disc; padding-left: 24px; margin-bottom: 12px; } .legal__body li { font-size: 15px; line-height: 1.7; color: var(--text-mid); margin-bottom: 4px; } .legal__body a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-light); text-underline-offset: 2px; } .legal__body a:hover { color: var(--accent-dark); } /* ============================================================ COOKIE BANNER ============================================================ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--bg-dark); padding: 18px max(24px, env(safe-area-inset-right)) 18px max(24px, env(safe-area-inset-left)); } .cookie-banner.is-hidden { display: none; } .cookie-banner__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .cookie-banner__text { font-size: 14px; line-height: 1.6; color: #b9b9d0; } .cookie-banner__text a { color: #c7d2fe; text-decoration: underline; } .cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; } .cookie-banner__btn { font-family: var(--font); font-size: 14px; font-weight: 600; padding: 8px 20px; border-radius: 8px; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .cookie-banner__btn--accept { background: var(--accent); color: #fff; } .cookie-banner__btn--accept:hover { background: var(--accent-dark); } .cookie-banner__btn--decline { background: transparent; color: #b9b9d0; border: 1px solid #3a3a52; } .cookie-banner__btn--decline:hover { color: #fff; border-color: #5a5a78; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .nav__links { display: none; } .nav__burger { display: flex; } .hero { padding: 64px 0 56px; } .hero__grid { grid-template-columns: 1fr; gap: 48px; } .about__grid { grid-template-columns: 1fr; gap: 24px; } .tools-grid { grid-template-columns: 1fr 1fr; } .feats { grid-template-columns: 1fr 1fr; } .tool-layout { grid-template-columns: 1fr; } } @media (max-width: 560px) { .hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; } .tools-grid { grid-template-columns: 1fr; } .feats { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .result-grid { grid-template-columns: 1fr; } .footer__inner { flex-direction: column; align-items: flex-start; gap: 14px; } .footer__right { text-align: left; } .cookie-banner__inner { flex-direction: column; text-align: center; } } @media print { .nav, .nav__burger, .cookie-banner, .ad-slot { display: none; } } /* Save My Sums */ .save-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .save-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .save-btn svg { width: 16px; height: 16px; } .save-btn-row { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; } .ws-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: all 0.25s; z-index: 9999; box-shadow: 0 6px 24px rgba(0,0,0,0.18); } .ws-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .dashboard { max-width: 920px; margin: 0 auto; padding: 32px 0; } .dashboard__empty { padding: 48px 24px; border: 2px dashed var(--border); border-radius: var(--radius); text-align: center; color: var(--text-mid); } .saved-list { display: grid; gap: 14px; margin-top: 18px; } .saved-item { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; align-items: start; } .saved-item__head { display: flex; flex-direction: column; gap: 4px; } .saved-item__label { font-size: 16px; font-weight: 600; color: var(--text); } .saved-item__meta { font-size: 12px; color: var(--text-mid); } .saved-item__summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; } .saved-item__summary span { color: var(--text-mid); } .saved-item__summary strong { color: var(--text); font-weight: 600; font-family: var(--mono); display: block; } .saved-item__actions { display: flex; gap: 8px; flex-shrink: 0; } .saved-item__btn { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text-mid); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s; } .saved-item__btn:hover { color: var(--text); border-color: var(--accent); } .saved-item__btn--danger:hover { color: #b91c1c; border-color: #fecaca; } @media (max-width: 560px) { .saved-item { grid-template-columns: 1fr; } .saved-item__actions { justify-content: flex-start; } } /* ============================================================ Embed mode (?embed=1) — for third-party iframe embeds ============================================================ */ .is-embed body { background: var(--bg); } .is-embed .nav, .is-embed .mobile-menu, .is-embed .footer, .is-embed .cookie-banner, .is-embed .ad-slot, .is-embed .tool-content, .is-embed .tool-page__head .tag, .is-embed .save-btn-row, .is-embed .breadcrumb { display: none !important; } .is-embed .tool-page { padding-top: 0; } .is-embed .tool-page__head { margin-bottom: 16px; } .is-embed .tool-page__head h1 { font-size: 22px; margin: 0 0 6px; } .is-embed .tool-page__head p { font-size: 14px; color: var(--text-mid); margin: 0; } .is-embed .wrap { max-width: 720px; padding: 16px; } .is-embed main { padding-bottom: 56px; } .embed-credit { position: fixed; left: 0; right: 0; bottom: 0; display: block; text-align: center; padding: 10px 14px; font-size: 12px; font-family: var(--font); color: var(--text-mid); background: var(--bg-alt); border-top: 1px solid var(--border); text-decoration: none; letter-spacing: 0.01em; } .embed-credit strong { color: var(--accent); font-weight: 600; } .embed-credit:hover { color: var(--text); } /* Compare two scenarios link — small footer beneath each calculator */ .compare-link { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--text-mid); } .compare-link a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; font-weight: 500; transition: text-decoration-color 0.15s; } .compare-link a:hover { text-decoration-color: var(--accent); } .is-embed .compare-link { display: none !important; } /* GBP-only pages: keep switcher visible, disable non-GBP buttons */ body.gbp-only .nav__currency-btn:not([data-currency="GBP"]) { opacity: 0.35; pointer-events: none; cursor: not-allowed; filter: grayscale(0.8); } body.gbp-only .nav__currency-btn[data-currency="GBP"] { pointer-events: none; cursor: default; } /* Guide pages: editorial content with illustrative figures — hide currency switcher */ body.guide-page .nav__currency { display: none !important; } /* Glossary */ .glossary-jump { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 32px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .glossary-jump a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; border-radius: 6px; transition: background 0.15s, color 0.15s; } .glossary-jump a:hover { background: var(--brand); color: #fff; } .glossary__letter { font-size: 32px; font-weight: 800; color: var(--brand); margin: 32px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--border); letter-spacing: -0.02em; } .glossary dl { margin: 0 0 24px; padding: 0; } .glossary dl dt { font-weight: 700; font-size: 17px; color: var(--text); margin: 18px 0 4px; letter-spacing: -0.01em; } .glossary dl dt:first-child { margin-top: 8px; } .glossary dl dd { margin: 0 0 4px; padding: 0 0 0 14px; border-left: 3px solid var(--border); color: var(--text-muted, #4a4f5e); line-height: 1.6; font-size: 15px; } .glossary dl dd a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } [data-theme="dark"] .glossary dl dd { color: #b8bdc9; } .region-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.25); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; } /* Guides hub & article styling */ .guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 28px; } .guide-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; text-decoration: none; color: inherit; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; } .guide-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12); } .guide-card__tag { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 10px; } .guide-card__title { font-size: 18px; font-weight: 600; margin: 0 0 8px; line-height: 1.35; color: var(--text); } .guide-card__desc { font-size: 14px; color: var(--text-mid); line-height: 1.55; margin: 0; } .guide-cta { background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08)); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 22px 24px; margin: 32px 0; } .guide-cta__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 8px; } .guide-cta__title { font-size: 18px; font-weight: 600; margin: 0 0 6px; color: var(--text); } .guide-cta__desc { font-size: 14px; color: var(--text-mid); margin: 0 0 14px; } .guide-cta__btn, .legal__body .guide-cta__btn, .legal a.guide-cta__btn { display: inline-block; background: var(--accent-grad); color: #fff !important; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none !important; border-bottom: 0 !important; transition: transform 0.15s, box-shadow 0.15s; } .guide-cta__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79,70,229,0.3); color: #fff !important; } .guide-meta { font-size: 13px; color: var(--text-mid); margin-bottom: 24px; } /* Dashboard toolbar (print button) */ .dashboard__toolbar { margin-top: 16px; } /* Print-only header & footer (hidden on screen, shown on paper) */ .print-header, .print-footer { display: none; } @media print { @page { margin: 18mm 14mm; } /* Strip everything except the saved-list content */ .nav, .mobile-menu, .footer, .cookie-banner, .ad-slot, .nav__currency, .nav__theme, .nav__burger, .dashboard__toolbar, .saved-item__actions, #wsToast { display: none !important; } body { background: #fff !important; color: #000 !important; } .tool-page { padding: 0 !important; } .wrap { max-width: 100% !important; padding: 0 !important; } .tool-page__head .tag { display: none; } .tool-page__head h1 { font-size: 22px; margin: 0 0 6px; } .tool-page__head p { font-size: 12px; color: #555; } .print-header { display: flex !important; justify-content: space-between; align-items: center; border-bottom: 2px solid #4f46e5; padding-bottom: 10px; margin-bottom: 16px; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } .print-header__brand { display: flex; align-items: center; gap: 10px; } .print-header__mark { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; color: #fff !important; font-weight: 700; font-size: 17px; line-height: 1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .print-header__mark::before { content: "Σ"; transform: translateY(1px); } .print-header__mark::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b !important; box-shadow: 0 0 0 1.5px #fff; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .print-header__wordmark { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: #1a1a1a; } .print-header__meta { font-size: 12px; color: #555; } .saved-list { display: block !important; } .saved-item { background: #fff !important; border: 1px solid #999 !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px !important; margin-bottom: 12px !important; page-break-inside: avoid; } .saved-item__head { display: block !important; margin-bottom: 8px; } .saved-item__label { display: block; font-weight: 700; font-size: 14px; color: #000 !important; } .saved-item__meta { display: block; font-size: 11px; color: #555 !important; margin-top: 2px; } .saved-item__summary { display: block !important; border-top: 1px dashed #ccc; padding-top: 8px; margin-top: 8px; } .saved-item__summary > div { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; } .saved-item__summary span { color: #555 !important; } .saved-item__summary strong { color: #000 !important; } .print-footer { display: block !important; margin-top: 24px; padding-top: 8px; border-top: 1px solid #999; font-size: 10px; color: #555; text-align: center; } .print-footer p { margin: 2px 0; } }