:root { --brand: #075cca; --brand-dark: #064aa2; --ink: #071a45; --muted: #5d6a82; --line: #dbe6f2; --surface: #ffffff; --page: #f7fbff; --heat: #ff650f; --aqua: #0faaa2; color-scheme: light; } html.dark { --ink: #f4f8ff; --muted: #aebbd0; --line: #293751; --surface: #101a2c; --page: #07101f; color-scheme: dark; } html[data-font-size="normal"] { font-size: 100%; } html[data-font-size="medium"] { font-size: 112.5%; } html[data-font-size="large"] { font-size: 125%; } html[data-letter-spacing="normal"] { --accessibility-letter-spacing: normal; } html[data-letter-spacing="medium"] { --accessibility-letter-spacing: .035em; } html[data-letter-spacing="large"] { --accessibility-letter-spacing: .075em; } html[data-letter-spacing="medium"] body, html[data-letter-spacing="large"] body, html[data-letter-spacing="medium"] :where(h1, h2, h3, h4, p, li, label, legend, input, select, textarea, button, a, summary, small, strong, th, td), html[data-letter-spacing="large"] :where(h1, h2, h3, h4, p, li, label, legend, input, select, textarea, button, a, summary, small, strong, th, td) { letter-spacing: var(--accessibility-letter-spacing) !important; } html[data-line-height="normal"] { --accessibility-line-height: normal; } html[data-line-height="medium"] { --accessibility-line-height: 1.75; } html[data-line-height="large"] { --accessibility-line-height: 2; } html[data-line-height="medium"] body, html[data-line-height="large"] body, html[data-line-height="medium"] :where(h1, h2, h3, h4, p, li, label, legend, input, select, textarea, button, a, summary, small, strong, th, td), html[data-line-height="large"] :where(h1, h2, h3, h4, p, li, label, legend, input, select, textarea, button, a, summary, small, strong, th, td) { line-height: var(--accessibility-line-height) !important; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; overflow-x: hidden; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; } .skip-link { position: fixed; z-index: 1000; left: 1rem; top: 1rem; transform: translateY(-180%); border-radius: .75rem; background: #071a45; color: white; padding: .75rem 1rem; font-weight: 900; transition: transform .2s ease; } .skip-link:focus { transform: translateY(0); } .noscript { background: #fff4d6; color: #583b00; padding: .75rem 1rem; text-align: center; font-weight: 700; } .site-header { box-shadow: 0 1px 0 rgba(7, 26, 69, .03); } .nav-link { position: relative; display: inline-flex; min-height: 44px; align-items: center; border-radius: .7rem; padding: .65rem .8rem; color: var(--ink); font-size: .94rem; font-weight: 700; text-decoration: none; } .nav-link:hover { background: #eef6ff; color: var(--brand); } .dark .nav-link:hover { background: #142642; } .nav-link.is-active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 0; height: 3px; border-radius: 999px; background: var(--brand); } .nav-dropdown { display: flex; align-items: center; } .nav-dropdown:hover .dropdown-panel, .nav-dropdown:focus-within .dropdown-panel, .dropdown-panel.is-open { visibility: visible; opacity: 1; } .dropdown-panel { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; } .dropdown-panel a { display: flex; align-items: center; gap: .7rem; border-radius: .85rem; padding: .7rem; color: var(--ink); text-decoration: none; } .dropdown-panel a:hover { background: #f2f8ff; } .dark .dropdown-panel a:hover { background: #16253c; } .dropdown-panel strong, .dropdown-panel small { display: block; } .dropdown-panel strong { font-size: .86rem; } .dropdown-panel small { margin-top: .12rem; color: var(--muted); font-size: .72rem; } .dropdown-panel .all-tools { grid-column: 1 / -1; justify-content: center; color: var(--brand); font-weight: 900; } .tool-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: .75rem; font-family: 'Material Symbols Rounded'; font-size: 22px; } .icon-button, .panel-close { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); color: var(--ink); cursor: pointer; } .icon-button:hover, .panel-close:hover { border-color: #93c5fd; background: #eff7ff; color: var(--brand); } .dark .icon-button:hover, .dark .panel-close:hover { background: #152641; } .icon-button[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(7, 92, 202, .14); color: var(--brand); } .desktop-search-button { display: none; } .mobile-menu-button { display: inline-flex; } .mobile-navigation.hidden { display: none; } .settings-panel { position: absolute; z-index: 80; right: 0; top: calc(100% + .7rem); width: min(310px, calc(100vw - 2rem)); max-height: calc(100dvh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); padding: 1rem; color: var(--ink); box-shadow: 0 18px 55px rgba(7, 26, 69, .18); } .settings-panel fieldset { margin: 0 0 .9rem; padding: 0; border: 0; } .settings-panel legend { margin-bottom: .45rem; color: var(--muted); font-size: .82rem; font-weight: 700; } .segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border: 1px solid var(--line); border-radius: .75rem; background: #eef3f8; padding: 3px; } .dark .segmented { background: #091222; } .segmented button { min-height: 42px; border: 0; border-radius: .55rem; background: transparent; color: var(--ink); cursor: pointer; font-weight: 900; } .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 2px 7px rgba(7, 26, 69, .12); } .setting-row { position: relative; display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 700; cursor: pointer; } .setting-row input { position: absolute; opacity: 0; } .switch-track { position: relative; width: 46px; height: 26px; flex: 0 0 auto; border-radius: 999px; background: #cbd5e1; transition: .2s ease; } .switch-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .2s ease; } .setting-row input:checked + .switch-track { background: var(--brand); } .setting-row input:checked + .switch-track::after { transform: translateX(20px); } .setting-row input:focus-visible + .switch-track { outline: 3px solid #60a5fa; outline-offset: 3px; } .reset-settings { width: 100%; min-height: 42px; border: 0; border-radius: .65rem; background: transparent; color: var(--brand); cursor: pointer; font-weight: 900; } .reset-settings:hover { background: #eff7ff; } .dark .reset-settings:hover { background: #142642; } .dark .nav-link:hover, .dark .dropdown-panel .all-tools, .dark .icon-button:hover, .dark .panel-close:hover, .dark .icon-button[aria-expanded="true"], .dark .segmented button[aria-pressed="true"], .dark .reset-settings, .dark #mobile-menu a:hover, .dark #mobile-menu button:hover, .dark .eyebrow, .dark .hero-copy h1 span, .dark .badge, .dark .swap-button, .dark .converter-meta a, .dark .quick-title .material-symbols-rounded, .dark .quick-links a:hover, .dark .tool-card .material-symbols-rounded.tool-card-icon, .dark .tool-card .card-link, .dark .tool-card.is-featured::after, .dark .seo-copy a, .dark .faq-list summary::after, .dark .breadcrumbs a, .dark .calc-secondary:hover, .dark .toc a:hover, .dark .search-input-wrap, .dark .text-brand { color: #79b8ff !important; } #mobile-menu a, #mobile-menu button { display: flex; min-height: 46px; align-items: center; gap: .5rem; border: 0; border-radius: .7rem; background: transparent; padding: .65rem .8rem; color: var(--ink); font-weight: 700; text-align: left; text-decoration: none; } #mobile-menu a:hover, #mobile-menu button:hover { background: #eff7ff; color: var(--brand); } .dark #mobile-menu a:hover, .dark #mobile-menu button:hover { background: #142642; } .hero-home { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid #cfe2f4; background-color: #eaf6ff; background-image: linear-gradient(90deg, rgba(247, 252, 255, .92) 0%, rgba(247, 252, 255, .72) 37%, rgba(255, 249, 244, .34) 68%, rgba(255, 244, 232, .22) 100%), url('/assets/hero-temperature-background.webp'); background-position: center, center bottom; background-repeat: no-repeat; background-size: cover; } .dark .hero-home { border-color: #203452; background-color: #07101f; background-image: linear-gradient(90deg, rgba(7, 16, 31, .92) 0%, rgba(7, 16, 31, .79) 44%, rgba(12, 25, 48, .64) 100%), url('/assets/hero-temperature-background.webp'); } .temperature-scale { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .38; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); } .temperature-scale span { position: absolute; color: #4f8dc8; font-size: .78rem; font-weight: 700; } .hero-grid { display: grid; align-items: center; gap: 2.5rem; padding: 4rem 0 4.6rem; } .hero-copy { max-width: 650px; } .eyebrow { margin: 0 0 .65rem; color: var(--brand); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .hero-copy h1 { margin: 0; color: var(--ink); font-size: clamp(2.45rem, 5vw, 4.55rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.02; } .hero-copy h1 span { color: var(--brand); } .hero-copy .lead { margin: 1.35rem 0 0; max-width: 650px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.24rem); line-height: 1.65; } .calculator-card { border: 1px solid rgba(190, 210, 229, .9); border-radius: 1.4rem; background: rgba(255, 255, 255, .94); padding: clamp(1rem, 3vw, 1.55rem); box-shadow: 0 24px 70px rgba(7, 26, 69, .14); backdrop-filter: blur(12px); } .dark .calculator-card { border-color: #2a3b57; background: rgba(16, 26, 44, .95); } .card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .card-heading h2 { margin: 0; color: var(--ink); font-size: 1.15rem; font-weight: 900; } .badge { display: inline-flex; align-items: center; border-radius: 999px; background: #e4f1ff; padding: .35rem .65rem; color: var(--brand); font-size: .7rem; font-weight: 900; } .dark .badge { background: #133660; color: #9dccff; } .field-grid { display: grid; gap: 1rem; } .field { display: grid; gap: .42rem; } .field label, .field-label { color: var(--ink); font-size: .82rem; font-weight: 700; } .field .hint { color: var(--muted); font-size: .76rem; line-height: 1.45; } .input-wrap, .select-wrap { position: relative; } .input-wrap input, .input-wrap select, .select-wrap select, .field > input, .field > select { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: .78rem; background: var(--surface); padding: .75rem .9rem; color: var(--ink); font-size: 1.08rem; font-weight: 700; box-shadow: inset 0 1px 2px rgba(7, 26, 69, .03); } .input-wrap.has-stepper input { padding-right: 3.45rem; } .input-wrap.has-unit.has-stepper input { padding-right: 6.8rem; } .input-wrap.has-unit.has-wide-unit.has-stepper input { padding-right: 9.2rem; } .input-unit { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .88rem; font-weight: 900; pointer-events: none; } .has-stepper .input-unit { right: 3.45rem; } .field-stepper { position: absolute; right: 1px; top: 1px; bottom: 1px; display: grid; width: 38px; grid-template-rows: 1fr 1fr; overflow: hidden; border-left: 1px solid var(--line); border-radius: 0 .72rem .72rem 0; background: var(--surface); background: color-mix(in srgb, var(--surface) 92%, var(--brand) 8%); } .stepper-button { display: grid; min-width: 0; min-height: 0; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .stepper-button + .stepper-button { border-top: 1px solid var(--line); } .stepper-button:hover { background: #e7f2ff; color: var(--brand); } .dark .stepper-button:hover { background: #183150; } .stepper-button:focus-visible { position: relative; z-index: 1; outline: 2px solid #60a5fa; outline-offset: -3px; } .stepper-chevron { display: block; width: .5rem; height: .5rem; border-left: 2px solid currentColor; border-top: 2px solid currentColor; } .stepper-chevron.is-up { transform: translateY(2px) rotate(45deg); } .stepper-chevron.is-down { transform: translateY(-2px) rotate(225deg); } .select-wrap { color: var(--muted); } .select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 3.2rem; cursor: pointer; } .select-chevron { position: absolute; right: 1.15rem; top: 50%; width: .62rem; height: .62rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-72%) rotate(45deg); pointer-events: none; transition: transform .18s ease, color .18s ease; } .select-wrap:focus-within { color: var(--brand); } .select-wrap:focus-within .select-chevron { transform: translateY(-40%) rotate(225deg); } .input-wrap input:focus, .input-wrap select:focus, .select-wrap select:focus, .field > input:focus, .field > select:focus { border-color: var(--brand); outline: 0; box-shadow: 0 0 0 4px rgba(7,92,202,.14); } .field-error { min-height: 1.1rem; color: #b42318; font-size: .76rem; font-weight: 700; } .dark .field-error { color: #ffaaa3; } .converter-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .75rem; margin-top: 1.1rem; } .swap-button { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--brand); cursor: pointer; transform: translateY(-5px); } .swap-button:hover { background: #eaf4ff; transform: translateY(-5px) rotate(180deg); } .converter-summary { margin: 1rem 0 0; border-radius: .8rem; background: #f1f7fd; padding: .8rem 1rem; color: var(--ink); font-size: 1.05rem; font-weight: 900; text-align: center; } .dark .converter-summary { background: #091629; } .converter-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-size: .78rem; } .converter-meta a { color: var(--brand); font-weight: 900; text-decoration: none; } .converter-meta span { color: var(--muted); } .section-shell { width: min(1200px, calc(100% - 2rem)); margin-inline: auto; } .section-pad { padding-block: clamp(2rem, 4vw, 3.5rem); } .section-pad + .section-pad { padding-top: 0; } .page-hero + .section-pad { padding-top: clamp(2rem, 3.5vw, 3rem); } .home-section { margin-top: clamp(2.25rem, 4vw, 3.25rem); } .quick-strip + .home-section { margin-top: clamp(1.75rem, 3vw, 2.5rem); } .section-heading { max-width: 760px; margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem); text-align: center; } .section-heading.align-left { margin-left: 0; text-align: left; } .section-heading h2 { margin: 0; color: var(--ink); font-size: clamp(1.75rem, 3.4vw, 2.65rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.15; } .section-heading p { margin: .8rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.65; } .quick-strip { position: relative; z-index: 5; display: grid; gap: .8rem; margin-top: -2.1rem; border: 1px solid var(--line); border-radius: 1.15rem; background: var(--surface); padding: .8rem; box-shadow: 0 15px 45px rgba(7,26,69,.10); } .quick-title { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; color: var(--ink); font-weight: 900; } .quick-title .material-symbols-rounded { color: var(--brand); } .quick-links { display: flex; flex-wrap: wrap; gap: .5rem; } .quick-links a { display: inline-flex; min-height: 42px; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: .7rem; padding: .55rem .75rem; color: var(--ink); font-size: .8rem; font-weight: 700; text-decoration: none; } .quick-links a:hover { border-color: #93c5fd; background: #f0f7ff; color: var(--brand); } .dark .quick-links a:hover { background: #13253e; } .tool-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: .8rem; } .converter-presets { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .9rem 0; color: var(--muted); font-size: .85rem; } .converter-presets button { min-height: 2.75rem; padding: .45rem .75rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--page); color: var(--ink); font-weight: 700; cursor: pointer; } .converter-presets button:hover { border-color: var(--brand); color: var(--brand); } .converter-actions { display: flex; align-items: end; flex-wrap: wrap; gap: .65rem; margin: .8rem 0 1rem; } .converter-actions .calc-secondary { min-height: 2.75rem; font-size: .8rem; padding: .65rem .75rem; } .share-link { display: block; margin: .85rem 0; color: var(--muted); font-size: .8rem; } .share-link input { display: block; width: 100%; margin-top: .4rem; min-height: 2.75rem; padding: .6rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); color: var(--ink); font-size: .85rem; } .precision-control { display: block; margin-right: auto; color: var(--muted); font-size: .75rem; } .precision-control .select-wrap { margin-top: .3rem; } .precision-control select { min-height: 2.75rem; padding: .45rem 2.3rem .45rem .6rem; } .calculation-next { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .calculation-next h3 { margin: 0 0 .65rem; font-size: 1.05rem; color: var(--ink); } .calculation-next a { display: block; padding: .9rem 1rem; margin-top: .55rem; border: 1px solid var(--line); border-radius: .8rem; color: var(--ink); text-decoration: none; background: var(--page); } .calculation-next a:hover { border-color: var(--brand); } .calculation-next strong, .calculation-next a > span { display: block; } .calculation-next a > span { margin-top: .25rem; font-size: .85rem; color: var(--muted); } .billing-fields { margin: .5rem 0 0; padding: 1rem; min-width: 0; border: 1px solid var(--line); border-radius: .8rem; } .billing-fields legend { padding: 0 .4rem; color: var(--ink); font-weight: 900; } .comparison-toolbar { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--page); } .comparison-toggle { gap: 1.25rem; } .comparison-toggle strong, .comparison-toggle small { display: block; } .comparison-toggle strong { color: var(--ink); font-size: 1rem; } .comparison-toggle small { margin-top: .2rem; color: var(--muted); font-size: .8rem; font-weight: 400; } .comparison-toggle input { width: 1px; height: 1px; } .comparison-help { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; } .comparison-inputs { min-width: 0; display: grid; gap: 1.1rem; } .comparison-inputs .field-grid { align-items: start; } .variant-card { margin: 0; padding: 0; min-width: 0; border: 0; display: grid; align-content: start; gap: 1rem; } .variant-card > legend { margin-bottom: 1rem; padding: .35rem .8rem; border-radius: 999px; font-weight: 900; font-size: .9rem; } [data-comparing="true"] .variant-card { padding: 1.1rem; border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 1rem; } [data-comparing="true"] .variant-a > legend { background: #e5f0ff; color: #064aa2; } [data-comparing="true"] .variant-b { border-top-color: #d95400; } [data-comparing="true"] .variant-b > legend { background: #fff0e2; color: #9c3b00; } .dark [data-comparing="true"] .variant-a > legend { background: #102d55; color: #a8d1ff; } .dark [data-comparing="true"] .variant-b > legend { background: #3c260e; color: #ffd1a1; } .comparison-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; } .comparison-actions > span { color: var(--muted); font-size: .8rem; } .comparison-period-note { margin: 0; } .calculator-layout.is-comparing { grid-template-columns: minmax(0, 1fr); } .calculator-layout.is-comparing .calculator-main { min-width: 0; } .calculator-layout.is-comparing .calculator-aside { position: static; align-self: auto; } .comparison-table-wrap { grid-column: 1 / -1; min-width: 0; overflow: auto; border: 1px solid var(--line); border-radius: .9rem; } .comparison-table { width: 100%; min-width: 540px; } .comparison-table caption { padding: .85rem 1rem; text-align: left; color: var(--muted); font-size: .85rem; } .comparison-table th, .comparison-table td { vertical-align: middle; } .comparison-table th:first-child { min-width: 160px; white-space: normal; } .comparison-table td { white-space: nowrap; } .comparison-table small { display: block; margin-top: .3rem; color: var(--muted); font-size: .75rem; font-weight: 400; } .comparison-primary { background: rgba(7,92,202,.06); } .comparison-primary th, .comparison-primary td { font-weight: 900; } .variant-pill { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; border: 1px solid currentColor; border-radius: 50%; margin-right: .35rem; } .comparison-note { grid-column: 1 / -1; margin: .3rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; } .comparison-mobile { display: none; } .comparison-mobile li { list-style: none; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); min-width: 0; } .comparison-mobile h3 { margin: 0 0 .9rem; color: var(--ink); font-size: 1rem; font-weight: 900; } .comparison-mobile dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; } .comparison-mobile dt { color: var(--muted); font-size: .75rem; } .comparison-mobile dd { margin: .25rem 0 0; color: var(--ink); font-size: 1rem; font-weight: 900; overflow-wrap: anywhere; } .comparison-mobile .mobile-difference { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .7rem; } .comparison-mobile small { display: block; margin-top: .25rem; color: var(--muted); font-size: .75rem; font-weight: 400; } .high-contrast .comparison-mobile li { border-color: #ffff00 !important; background: #000 !important; color: #ffff00 !important; } .high-contrast .comparison-mobile :is(dt, dd) { color: #ffff00 !important; } .high-contrast .comparison-toolbar, .high-contrast .variant-card, .high-contrast .comparison-primary { background: #000 !important; border-color: #ffff00 !important; color: #ffff00 !important; } .high-contrast .variant-card > legend { background: #000 !important; border: 1px solid #ffff00; color: #ffff00 !important; } @media (min-width: 800px) { [data-comparing="true"] .comparison-inputs, .calculator-layout.is-comparing .calculator-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { [data-comparing="true"] .variant-card { padding: .8rem; } .comparison-actions .calc-secondary { width: 100%; } } @media screen and (max-width: 639px) { .comparison-table-wrap { display: none; } .comparison-mobile { display: grid; grid-column: 1 / -1; gap: .8rem; padding: 0; margin: 0; } } @media print { .comparison-toolbar, .comparison-actions { display: none !important; } [data-comparing="true"] .comparison-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comparison-table { min-width: 0; } .comparison-table-wrap { overflow: visible; } } .climate-fields { min-width: 0; border: 1px solid var(--line); padding: 1rem; border-radius: .85rem; } .climate-fields legend { padding-inline: .5rem; color: var(--ink); font-weight: 900; } .calc-form textarea { display: block; width: 100%; min-height: 12rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .8rem; color: var(--ink); background: var(--surface); line-height: 1.6; resize: vertical; } .batch-table-wrap { grid-column: 1 / -1; min-width: 0; max-height: 30rem; overflow: auto; border: 1px solid var(--line); border-radius: .65rem; } .batch-table-wrap table { width: 100%; } .batch-table-wrap caption { padding: .8rem; text-align: left; color: var(--muted); font-size: .85rem; } .batch-table-wrap thead { position: sticky; top: 0; z-index: 1; background: var(--surface); } .batch-error-row td:last-child { color: #b42318; font-weight: 700; } .dark .batch-error-row td:last-child { color: #ffb4a5; } .high-contrast .batch-error-row td:last-child { color: #ffff00 !important; } .batch-download { margin-top: .75rem; } @media print { .batch-table-wrap { max-height: none; overflow: visible; } .batch-table-wrap thead { position: static; } } button:disabled { cursor: not-allowed; opacity: .6; } .billing-fields > p { margin: 0 0 1rem; } .billing-summary { grid-column: 1 / -1; min-width: 0; overflow-x: auto; } .billing-summary h3 { margin: .6rem 0; font-size: 1.15rem; } .billing-summary p { margin-bottom: .65rem; font-size: .85rem; } .billing-summary table { width: 100%; } .billing-summary caption { text-align: left; color: var(--muted); padding-bottom: .5rem; font-size: .85rem; } .section-more { margin: 1.25rem 0 0; text-align: center; } @media (min-width: 900px) { .home-tools .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .high-contrast .calculation-next a, .high-contrast .converter-presets button { background: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } .high-contrast .hero-copy h1 span { color: #ffff00 !important; } .high-contrast .calculation-next a:is(:hover, :focus-visible) :is(strong, span) { color: #000 !important; } .tool-card { position: relative; display: flex; min-height: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); padding: 0; color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .tool-card:hover { transform: translateY(-4px); border-color: #9bc5f5; box-shadow: 0 18px 40px rgba(7,26,69,.10); } .tool-card h3 { margin: .55rem 0 .5rem; color: var(--ink); font-size: 1.06rem; font-weight: 900; line-height: 1.35; } .tool-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; } .tool-card .card-link { margin-top: auto; padding-top: 1rem; color: var(--brand); font-size: .8rem; font-weight: 900; } .tool-card.is-featured::after { content: "Najczęściej używany"; position: absolute; right: .7rem; top: .7rem; border-radius: 999px; background: #e3f1ff; padding: .3rem .55rem; color: var(--brand); font-size: .64rem; font-weight: 900; } .comfort-card { box-shadow: 0 18px 55px rgba(7, 26, 69, .08); } .comfort-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } .comfort-header h2 { margin: 0; color: var(--ink); font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.15; } .comfort-header p:not(.eyebrow) { max-width: 710px; margin: .65rem 0 0; color: var(--muted); line-height: 1.6; } .comfort-link { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; gap: .4rem; border-radius: .7rem; padding: .6rem .8rem; color: var(--brand); font-size: .84rem; font-weight: 900; text-decoration: none; } .comfort-link:hover { background: #eef6ff; } .dark .comfort-link:hover { background: #142642; } .comfort-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: 1.5rem; } .comfort-zones { display: grid; gap: .65rem; } .comfort-zone { display: grid; grid-template-columns: 48px minmax(125px, .55fr) minmax(180px, 1fr); align-items: center; gap: 1rem; border: 1px solid transparent; border-radius: .9rem; padding: .85rem 1rem; } .comfort-zone > .material-symbols-rounded { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .75rem; font-size: 25px; } .comfort-zone h3 { margin: 0; color: var(--ink); font-size: .94rem; font-weight: 900; } .comfort-zone strong { display: block; margin-top: .12rem; font-size: .79rem; } .comfort-zone p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; } .comfort-hot { border-color: #ffd6bd; background: #fff4ec; } .comfort-hot > .material-symbols-rounded { background: #ffe3d0; color: #d94a00; } .comfort-hot strong { color: #b83d00; } .comfort-optimal { border-color: #bfe8e4; background: #edf9f8; } .comfort-optimal > .material-symbols-rounded { background: #d4f3f0; color: #087f79; } .comfort-optimal strong { color: #08746e; } .comfort-cold { border-color: #c9e2fb; background: #eff7ff; } .comfort-cold > .material-symbols-rounded { background: #dceeff; color: #075cca; } .comfort-cold strong { color: #0751b2; } .dark .comfort-hot { border-color: #6d3b23; background: #2b1c16; } .dark .comfort-hot > .material-symbols-rounded { background: #482519; color: #ff9b64; } .dark .comfort-hot strong { color: #ffab7c; } .dark .comfort-optimal { border-color: #245c58; background: #102825; } .dark .comfort-optimal > .material-symbols-rounded { background: #173f3b; color: #75ddd6; } .dark .comfort-optimal strong { color: #89e4de; } .dark .comfort-cold { border-color: #28517d; background: #10243b; } .dark .comfort-cold > .material-symbols-rounded { background: #183a5e; color: #8ec7ff; } .dark .comfort-cold strong { color: #9dccff; } .comfort-meter { display: grid; width: 92px; grid-template-columns: 1fr 28px; gap: .55rem; padding: .2rem 0 .6rem; } .comfort-meter-labels { display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: .7rem; font-weight: 900; text-align: right; } .comfort-meter-track { position: relative; min-height: 190px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 4px; box-shadow: inset 0 1px 4px rgba(7, 26, 69, .1); } .comfort-meter-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(to top, #087fdd 0 38%, #0faaa2 38% 65%, #ff650f 65% 100%); } .comfort-note { margin: 1rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.55; } .feature-band { display: grid; gap: .9rem; } .feature-tile { position: relative; overflow: hidden; border-radius: 1rem; padding: 1.4rem; color: white; min-height: 180px; } .feature-tile h3 { margin: 0; font-size: 1.15rem; font-weight: 900; } .feature-tile p { max-width: 330px; margin: .55rem 0 1rem; color: rgba(255,255,255,.88); font-size: .88rem; line-height: 1.55; } .feature-tile a { color: white; font-size: .82rem; font-weight: 900; text-decoration: none; } .feature-tile::after { content: ""; position: absolute; right: -45px; bottom: -70px; width: 180px; height: 180px; border: 34px solid rgba(255,255,255,.15); border-radius: 50%; } .feature-tile.blue { background: linear-gradient(125deg, #075cca, #2d91e4); } .feature-tile.orange { background: linear-gradient(125deg, #d94a00, #ff9859); } .feature-tile.teal { background: linear-gradient(125deg, #087f79, #21afa5); } .seo-copy { display: grid; gap: 1.2rem; } .seo-copy h2, .seo-copy h3 { color: var(--ink); font-weight: 900; letter-spacing: -.015em; } .seo-copy h2 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.45rem); } .seo-copy h3 { margin: 1.2rem 0 .35rem; font-size: 1.18rem; } .seo-copy p, .seo-copy li { color: var(--muted); line-height: 1.75; } .seo-copy a { color: var(--brand); font-weight: 700; } .content-panel { border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); padding: clamp(1.25rem, 4vw, 2.3rem); } .faq-list { display: grid; gap: .7rem; } .faq-list details { border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); } .faq-list summary { position: relative; display: flex; min-height: 58px; cursor: pointer; list-style: none; align-items: center; padding: .9rem 3.2rem .9rem 1rem; color: var(--ink); font-weight: 900; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--brand); font-size: 1.5rem; } .faq-list details[open] summary::after { content: "−"; } .faq-list details p { margin: 0; padding: 0 1rem 1rem; color: var(--muted); line-height: 1.65; } .page-hero { border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #f6fbff, #edf7ff 65%, #fff4ed); } .dark .page-hero { background: linear-gradient(120deg, #07101f, #0c1a30 65%, #1d1718); } .page-hero-inner { padding-block: clamp(2rem, 4.2vw, 3.4rem); } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: 1.1rem; color: var(--muted); font-size: .78rem; } .breadcrumbs a { color: var(--brand); font-weight: 700; text-decoration: none; } .breadcrumbs .material-symbols-rounded { font-size: 15px; } .page-hero h1 { max-width: 880px; margin: 0; color: var(--ink); font-size: clamp(2rem, 4.5vw, 3.7rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.08; } .page-hero .lead { max-width: 800px; margin: 1rem 0 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.65; } .calculator-layout { display: grid; align-items: start; gap: 1.3rem; } .calculator-main { border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); padding: clamp(1.15rem, 3vw, 2rem); box-shadow: 0 14px 45px rgba(7,26,69,.08); } .calculator-main h2 { margin: 0 0 .35rem; color: var(--ink); font-size: 1.4rem; font-weight: 900; } .calculator-main > p { margin: 0 0 1.35rem; color: var(--muted); line-height: 1.6; } .calc-form { display: grid; gap: 1rem; } .calc-action { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: .8rem; background: linear-gradient(135deg, var(--brand), #087fdd); padding: .75rem 1.2rem; color: white; cursor: pointer; font-weight: 900; box-shadow: 0 9px 24px rgba(7,92,202,.22); } .calc-action:hover { background: linear-gradient(135deg, var(--brand-dark), #066bbd); transform: translateY(-1px); } .calc-secondary { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); padding: .65rem 1rem; color: var(--ink); cursor: pointer; font-weight: 700; } .calc-secondary:hover { border-color: #93c5fd; color: var(--brand); } .result-box { position: relative; overflow: hidden; border: 1px solid #b7d8f7; border-radius: 1rem; background: linear-gradient(135deg, #edf7ff, #f7fcff); padding: 1.25rem; } .dark .result-box { border-color: #275689; background: linear-gradient(135deg, #0b213c, #0e1929); } .result-box[hidden] { display: none; } .result-label { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .result-value { margin: .25rem 0 0; color: var(--ink); font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.1; } .result-details { margin: .6rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; } .result-grid { display: grid; gap: .7rem; margin-top: .9rem; } .result-mini { border-top: 1px solid var(--line); padding-top: .75rem; } .result-mini strong { display: block; color: var(--ink); } .result-mini span { color: var(--muted); font-size: .78rem; } .calculator-aside { display: grid; gap: .9rem; } .aside-card { border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); padding: 1.2rem; } .aside-card h2, .aside-card h3 { margin: 0 0 .55rem; color: var(--ink); font-size: 1rem; font-weight: 900; } .aside-card p, .aside-card li { color: var(--muted); font-size: .84rem; line-height: 1.6; } .aside-card ul { margin: .55rem 0 0; padding-left: 1.15rem; } .formula-box { overflow-x: auto; border-left: 4px solid var(--brand); border-radius: 0 .8rem .8rem 0; background: #f0f7ff; padding: 1rem; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .87rem; } .dark .formula-box { background: #0b1b31; } .notice { display: flex; gap: .7rem; border: 1px solid #f7d593; border-radius: .8rem; background: #fff9e9; padding: .9rem; color: #594317; font-size: .83rem; line-height: 1.55; } .dark .notice { border-color: #795b26; background: #2b2315; color: #f8deb0; } .notice .material-symbols-rounded { flex: 0 0 auto; color: #c77800; } .article-grid { display: grid; align-items: start; gap: 1.3rem; } .toc { border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); padding: 1.1rem; } .toc h2 { margin: 0 0 .65rem; color: var(--ink); font-size: .92rem; font-weight: 900; } .toc ol { margin: 0; padding-left: 1.2rem; } .toc a { color: var(--muted); font-size: .82rem; line-height: 1.8; text-decoration: none; } .toc a:hover { color: var(--brand); text-decoration: underline; } .conversion-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .conversion-table th, .conversion-table td { border-bottom: 1px solid var(--line); padding: .75rem; text-align: left; } .conversion-table th { background: #f1f7fd; color: var(--ink); font-weight: 900; } .dark .conversion-table th { background: #0b192c; } .conversion-table tr:last-child td { border-bottom: 0; } .search-dialog { position: fixed; z-index: 100; inset: 0; display: grid; place-items: start center; padding: min(12vh, 7rem) 1rem 1rem; } .search-dialog.hidden { display: none; } .search-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(1, 11, 30, .68); backdrop-filter: blur(5px); cursor: default; } .search-card { position: relative; width: min(680px, 100%); max-height: calc(100vh - 4rem); overflow: auto; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); padding: clamp(1rem, 3vw, 1.5rem); box-shadow: 0 30px 90px rgba(0,0,0,.3); } .search-card h2 { margin: 0; color: var(--ink); font-size: 1.5rem; font-weight: 900; } .search-input-wrap { display: flex; min-height: 56px; align-items: center; gap: .65rem; margin-top: 1rem; border: 1px solid #b8cbe0; border-radius: .85rem; padding: 0 .85rem; color: var(--brand); } .search-input-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(7,92,202,.14); } .search-input-wrap input { width: 100%; border: 0; background: transparent; color: var(--ink); outline: 0; } .search-results { display: grid; gap: .35rem; margin-top: .8rem; } .search-results a { display: flex; align-items: center; gap: .7rem; border-radius: .75rem; padding: .7rem; color: var(--ink); text-decoration: none; } .search-results a:hover, .search-results a:focus { background: #eff7ff; } .dark .search-results a:hover, .dark .search-results a:focus { background: #142642; } .search-results strong, .search-results small { display: block; } .search-results small { margin-top: .15rem; color: var(--muted); } .search-empty { padding: 1.5rem .5rem; color: var(--muted); text-align: center; } body.dialog-open { overflow: hidden; } .back-to-top { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; background: var(--brand); color: white; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(16px); box-shadow: 0 10px 28px rgba(7,92,202,.3); transition: .2s ease; } .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { background: var(--brand-dark); } .toast-region { position: fixed; z-index: 120; right: 1rem; bottom: 4.8rem; display: grid; gap: .5rem; width: min(340px, calc(100% - 2rem)); } .toast { border-radius: .8rem; background: #071a45; padding: .8rem 1rem; color: white; box-shadow: 0 12px 35px rgba(0,0,0,.23); font-size: .85rem; font-weight: 700; animation: toast-in .25s ease both; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } .footer-title { margin: 0 0 .7rem; color: white; font-size: .9rem; font-weight: 900; } .footer-links { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; } .footer-links a { color: #c8ddfa; font-size: .82rem; text-decoration: none; } .footer-links a:hover { color: white; text-decoration: underline; text-underline-offset: 3px; } .partners-section { margin-top: 2rem; border-top: 1px solid var(--line); background: var(--surface); } .partners-inner { width: min(1200px, calc(100% - 2rem)); margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.5rem) 0; } .partners-heading { margin: 0 0 1.25rem; color: var(--ink); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 900; text-align: center; } .partners-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(.75rem, 2vw, 1.25rem); } .partner-link { display: grid; width: min(180px, calc(50% - .5rem)); min-height: 86px; place-items: center; border: 1px solid var(--line); border-radius: 1rem; background: #fff; padding: .9rem 1.15rem; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .partner-link:hover { transform: translateY(-2px); border-color: #93c5fd; box-shadow: 0 12px 32px rgba(7, 26, 69, .1); } .partner-logo { display: block; width: auto; max-width: 100%; height: auto; max-height: 58px; object-fit: contain; } .dark .partner-link { background: #fff; } .partners-section + footer { margin-top: 0; } .high-contrast { --brand: #ffff00; --brand-dark: #ffff00; --ink: #ffff00; --muted: #ffff00; --line: #ffff00; --surface: #000000; --page: #000000; --heat: #ffff00; --aqua: #ffff00; color-scheme: dark; } .high-contrast, .high-contrast body { background: #000 !important; color: #ffff00 !important; } .high-contrast body, .high-contrast header, .high-contrast main, .high-contrast footer, .high-contrast section, .high-contrast article, .high-contrast aside, .high-contrast nav, .high-contrast dialog, .high-contrast form, .high-contrast fieldset, .high-contrast details, .high-contrast summary, .high-contrast table, .high-contrast thead, .high-contrast tbody, .high-contrast tr, .high-contrast th, .high-contrast td, .high-contrast .hero-home, .high-contrast .page-hero, .high-contrast .feature-tile, .high-contrast .comfort-zone, .high-contrast .result-box, .high-contrast .formula-box, .high-contrast .notice, .high-contrast .converter-summary, .high-contrast .segmented, .high-contrast .search-backdrop, .high-contrast .toast { background: #000 !important; background-image: none !important; color: #ffff00 !important; box-shadow: none !important; text-shadow: none !important; } .high-contrast .site-header, .high-contrast .dropdown-panel, .high-contrast .settings-panel, .high-contrast #mobile-menu, .high-contrast .calculator-card, .high-contrast .tool-card, .high-contrast .content-panel, .high-contrast .calculator-main, .high-contrast .aside-card, .high-contrast .faq-list details, .high-contrast .quick-strip, .high-contrast .comfort-zone, .high-contrast .toc, .high-contrast .search-card, .high-contrast .result-box, .high-contrast .formula-box, .high-contrast .notice, .high-contrast .converter-summary, .high-contrast .feature-tile, .high-contrast .comfort-meter-track, .high-contrast .conversion-table, .high-contrast .conversion-table th, .high-contrast .conversion-table td { border-color: #ffff00 !important; border-width: 2px; background: #000 !important; color: #ffff00 !important; box-shadow: none !important; } .high-contrast .settings-panel { scrollbar-color: #ffff00 #000; } .high-contrast *, .high-contrast *::before, .high-contrast *::after { border-color: #ffff00; } .high-contrast [class*="bg-"] { background-color: #000 !important; background-image: none !important; } .high-contrast [class*="text-"] { color: #ffff00 !important; } .high-contrast [class*="border-"] { border-color: #ffff00 !important; } .high-contrast h1, .high-contrast h2, .high-contrast h3, .high-contrast h4, .high-contrast p, .high-contrast li, .high-contrast strong, .high-contrast small, .high-contrast span, .high-contrast label, .high-contrast legend, .high-contrast .lead, .high-contrast .hint, .high-contrast .eyebrow, .high-contrast .breadcrumbs, .high-contrast .result-label, .high-contrast .result-value, .high-contrast .result-details, .high-contrast .input-unit, .high-contrast .field-error, .high-contrast .search-empty, .high-contrast .tool-card .card-link, .high-contrast .tool-card.is-featured::after { color: #ffff00 !important; } .high-contrast a, .high-contrast a:visited { color: #ffff00 !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; } .high-contrast a:hover, .high-contrast a:focus-visible { background: #ffff00 !important; color: #000 !important; } .high-contrast button, .high-contrast .icon-button, .high-contrast .panel-close, .high-contrast .reset-settings, .high-contrast .swap-button, .high-contrast .calc-action, .high-contrast .calc-secondary, .high-contrast .back-to-top, .high-contrast .stepper-button, .high-contrast .segmented button { border: 2px solid #ffff00 !important; background: #000 !important; background-image: none !important; color: #ffff00 !important; box-shadow: none !important; } .high-contrast button:hover, .high-contrast button:active, .high-contrast .icon-button:hover, .high-contrast .panel-close:hover, .high-contrast .reset-settings:hover, .high-contrast .swap-button:hover, .high-contrast .calc-action:hover, .high-contrast .calc-secondary:hover, .high-contrast .back-to-top:hover, .high-contrast .stepper-button:hover, .high-contrast .segmented button[aria-pressed="true"] { background: #ffff00 !important; color: #000 !important; } .high-contrast input, .high-contrast select, .high-contrast textarea, .high-contrast .search-input-wrap { border: 2px solid #ffff00 !important; background: #000 !important; color: #ffff00 !important; caret-color: #ffff00; box-shadow: none !important; } .high-contrast input::placeholder, .high-contrast textarea::placeholder { color: #ffff00 !important; opacity: .8; } .high-contrast input[readonly], .high-contrast input:disabled, .high-contrast select:disabled, .high-contrast textarea:disabled { color: #ffff00 !important; opacity: 1; } .high-contrast .field-stepper { border: 0 !important; border-left: 2px solid #ffff00 !important; background: #000 !important; } .high-contrast .stepper-button { border: 0 !important; } .high-contrast .stepper-button + .stepper-button { border-top: 2px solid #ffff00 !important; } .high-contrast .stepper-chevron, .high-contrast .select-chevron { color: #ffff00 !important; border-color: #ffff00 !important; } .high-contrast .material-symbols-rounded, .high-contrast .tool-icon, .high-contrast .tool-card .material-symbols-rounded.tool-card-icon, .high-contrast .comfort-zone > .material-symbols-rounded { border-color: #ffff00 !important; background: #000 !important; color: #ffff00 !important; } .high-contrast .tool-card.is-featured::after, .high-contrast .badge { border: 1px solid #ffff00 !important; background: #000 !important; color: #ffff00 !important; } .high-contrast .logo-link, .high-contrast .logo-link:hover, .high-contrast .logo-link:focus-visible { background: #000 !important; } .high-contrast .logo-link img, .high-contrast footer img { filter: brightness(0) saturate(100%) invert(88%) sepia(99%) saturate(1750%) hue-rotate(355deg) brightness(103%) contrast(105%); } .high-contrast .partners-section, .high-contrast .partner-link { border-color: #ffff00 !important; background: #000 !important; } .high-contrast .partner-logo { background: #fff; } .high-contrast .nav-link.is-active::after { background: #ffff00 !important; } .high-contrast .temperature-scale { display: none; } .high-contrast .feature-tile::after { display: none; } .high-contrast .comfort-meter-track i { border: 1px solid #ffff00; background: repeating-linear-gradient(to top, #ffff00 0 12px, #000 12px 20px) !important; } .high-contrast .switch-track { border: 2px solid #ffff00 !important; background: #000 !important; } .high-contrast .switch-track::after { left: 3px; top: 3px; width: 16px; height: 16px; border: 2px solid #ffff00; background: #000 !important; box-shadow: none; } .high-contrast .setting-row input:checked + .switch-track { background: #ffff00 !important; } .high-contrast .setting-row input:checked + .switch-track::after { border-color: #000; background: #000 !important; transform: translateX(20px); } .high-contrast .setting-row input:focus-visible + .switch-track { outline: 4px solid #ffff00; outline-offset: 3px; } .high-contrast :focus-visible { outline: 4px solid #ffff00 !important; outline-offset: 4px !important; box-shadow: none !important; } .high-contrast ::selection { background: #ffff00; color: #000; } @media (min-width: 520px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 640px) { .desktop-search-button { display: inline-flex; } } @media (min-width: 720px) { .field-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } .quick-strip { grid-template-columns: auto 1fr; align-items: center; } } @media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr); } .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .calculator-layout { grid-template-columns: minmax(0, 1fr) 310px; } .article-grid { grid-template-columns: minmax(0, 1fr) 260px; } .article-grid .toc { position: sticky; top: 96px; grid-column: 2; grid-row: 1; } .article-grid .article-content { grid-column: 1; grid-row: 1; } } @media (min-width: 1080px) { .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tool-grid-related { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .mobile-menu-button, .mobile-navigation { display: none !important; } } @media (max-width: 620px) { .converter-row { grid-template-columns: 1fr; } .swap-button { margin-inline: auto; transform: rotate(90deg); } .swap-button:hover { transform: rotate(270deg); } .hero-grid { padding-block: 2.75rem 3.6rem; } .hero-copy h1 { font-size: clamp(2.25rem, 12vw, 3.25rem); } .comfort-header { align-items: flex-start; flex-direction: column; gap: .7rem; } .comfort-layout { grid-template-columns: 1fr; } .comfort-meter { display: none; } .comfort-zone { grid-template-columns: 42px 1fr; gap: .75rem; } .comfort-zone p { grid-column: 2; } } @media (max-width: 479px) { .site-header-row { gap: .5rem; } .site-header .logo-link img { width: min(34vw, 132px); } .header-actions { gap: .25rem; } .header-actions .icon-button { width: 40px; height: 40px; } .settings-panel { position: fixed; left: 1rem; right: 1rem; top: 84px; width: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media (forced-colors: active) { .select-wrap select { appearance: auto; -webkit-appearance: auto; padding-right: .9rem; } .select-chevron { display: none; } .field-stepper, .stepper-button, .stepper-button + .stepper-button { border-color: ButtonText; } .comfort-zone { border-color: CanvasText; background: Canvas; } } .reading-grid, .topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } .reading-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; } .reading-card[hidden] { display: none !important; } .card-photo { display: block; width: 100%; aspect-ratio: 8 / 5; overflow: hidden; background: var(--line); } .card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .tool-card-body, .reading-card-body { display: flex; flex: 1; flex-direction: column; width: 100%; padding: 1.2rem; } .card-eyebrow { color: var(--brand); font-size: .69rem; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; } .reading-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin-bottom: .75rem; } .reading-meta > span:last-child { color: var(--muted); font-size: .74rem; } .reading-card p { margin: .7rem 0 1.1rem; font-size: .9rem; } .reading-card-link { margin-top: auto; padding-top: .3rem; color: var(--brand); font-weight: 900; font-size: .83rem; } .reading-card:hover { box-shadow: 0 12px 30px rgb(7 26 69 / .08); } .guide-library-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; } .guide-filters { display: flex; flex-wrap: wrap; gap: .5rem; } .guide-filters[hidden] { display: none !important; } .guide-filters button { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .6rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 700; cursor: pointer; } .guide-filters button span { font-size: .72rem; opacity: .8; } .guide-filters button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; } .guide-filters button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .guide-result-count { margin: 0; color: var(--muted); font-size: .85rem; } .dark .card-eyebrow, .dark .reading-card-link { color: #9dcaff; } .reading-card h3, .topic-grid h3 { font-size: 1.2rem; font-weight: 900; line-height: 1.35; } .reading-card p, .topic-grid p { color: var(--muted); line-height: 1.7; } .reading-card:hover, .topic-links a:hover { border-color: var(--brand); } .reading-card:focus-visible, .topic-links a:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; } .topic-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; } .topic-links a { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--ink); text-decoration: none; } .topic-links strong, .topic-links span { display: block; } .topic-links span { margin-top: .4rem; color: var(--muted); font-size: .9rem; line-height: 1.5; } .topic-grid ul { margin-top: .85rem; display: grid; gap: .6rem; } .topic-grid a, .contextual-reading a { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; } .article-toc { padding: 1.1rem 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--page); } .article-toc h2 { margin-top: 0; font-size: 1.1rem; } .article-toc ol { margin-bottom: 0; } .seo-copy h2[id], #przelicznik { scroll-margin-top: 7rem; } .conversion-table caption { padding: .75rem; color: var(--muted); text-align: left; font-size: .9rem; line-height: 1.5; } .high-contrast .reading-card, .high-contrast .topic-links a, .high-contrast .article-toc { background: #000 !important; border-color: #ffff00 !important; color: #ffff00 !important; } .high-contrast .reading-card :is(p, span), .high-contrast .topic-grid :is(p, a), .high-contrast .topic-links span, .high-contrast .contextual-reading a, .high-contrast .conversion-table caption { color: #ffff00 !important; } .high-contrast .card-eyebrow, .high-contrast .guide-result-count { color: #ffff00 !important; } .high-contrast .guide-filters button { background: #000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } .high-contrast .guide-filters button[aria-pressed="true"] { background: #ffff00 !important; color: #000 !important; } .high-contrast .guide-filters button:focus-visible { outline-color: #ffff00 !important; } @media (max-width: 767px) { .topic-grid, .topic-links { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 639px) { .reading-grid { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1024px) { .reading-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .reading-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .card-photo img { transition: transform .35s ease; } :is(.reading-card, .tool-card):hover .card-photo img { transform: scale(1.035); } } @media print { .site-header, footer, .back-to-top, .quick-strip, .search-dialog, .calc-action, .calc-secondary, .ad-placement { display: none !important; } body { background: white !important; color: black !important; } .page-hero, .hero-home { background: white !important; } .calculator-main, .content-panel, .result-box { break-inside: avoid; box-shadow: none !important; } a { color: black !important; text-decoration: none !important; } } .ad-placement { display: flex; width: min(calc(100% - 2rem), 1200px); min-height: 118px; margin: 1.5rem auto; align-items: stretch; justify-content: center; overflow: hidden; border: 1px solid #dbe6f2; border-radius: 1rem; background: #fff; padding: 1.35rem .75rem .65rem; position: relative; } .save-icon { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; } .save-calculation-button { gap: .45rem; } .saved-nav-button { position: relative; } .saved-nav-count { position: absolute; right: -1px; top: -2px; min-width: 18px; padding: 2px 4px; border: 2px solid var(--surface); border-radius: 1rem; background: var(--brand); color: #fff; font-size: 10px; font-weight: 900; line-height: 1.1; text-align: center; } .saved-dialog-open { overflow: hidden; } .saved-dialog { position: fixed; inset: 0; width: min(760px, calc(100% - 2rem)); max-width: calc(100% - 2rem); max-height: min(90dvh, 1000px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--surface); color: var(--ink); box-shadow: 0 25px 100px rgb(7 26 69 / .22); } .saved-dialog[open] { display: flex; flex-direction: column; } .saved-dialog::backdrop { background: rgb(7 26 69 / .18); } .saved-dialog-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--surface); } .saved-device-label { color: var(--muted); font-size: .78rem; font-weight: 700; } .saved-dialog-body { min-height: 0; padding: 1.4rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .saved-dialog h2 { font-size: 1.65rem; font-weight: 900; line-height: 1.3; } .saved-list-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; } .saved-list-heading > span { padding: .35rem .65rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--muted); font-size: .75rem; } .saved-intro { margin: .75rem 0 1.25rem; color: var(--muted); font-size: .9rem; line-height: 1.65; } .saved-library-controls { margin: 0 0 1.1rem; } .saved-search { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 .85rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--page); color: var(--muted); } .saved-search:focus-within { outline: 3px solid #60a5fa; outline-offset: 2px; } .saved-search input { width: 100%; min-width: 0; min-height: 48px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .86rem; } .saved-search input:focus-visible { outline: 0; } .saved-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; } .saved-filters button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--surface); color: var(--ink); font-size: .77rem; font-weight: 700; } .saved-filters button span { font-size: .7rem; opacity: .8; } .saved-filters button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; } .saved-match-count { margin-top: .7rem; color: var(--muted); font-size: .73rem; line-height: 1.5; } .saved-empty { padding: 2rem 1.25rem; border: 1px dashed var(--line); border-radius: 1.2rem; background: var(--page); text-align: center; } .saved-empty > svg { width: 2.3rem; height: 2.3rem; margin: 0 auto 1rem; color: var(--brand); } .saved-empty h3 { font-size: 1.1rem; font-weight: 900; } .saved-empty p { max-width: 390px; margin: .6rem auto 0; color: var(--muted); font-size: .9rem; line-height: 1.65; } .saved-list { display: grid; gap: 1rem; padding: 0; list-style: none; } .saved-item { padding: 1.1rem; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--page); } .saved-item:focus-within { border-color: var(--brand); } .saved-item-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; } .saved-item time { color: var(--muted); font-size: .72rem; } .saved-kind { padding: .2rem .55rem; border: 1px solid #b6d5fc; border-radius: 2rem; background: #eaf4ff; color: #064aa2; font-size: .7rem; font-weight: 900; } .saved-kind.is-comparison { border-color: #f4c298; background: #fff1e8; color: #a33e05; } .saved-item h3 { margin: 0; font-size: 1.1rem; font-weight: 900; line-height: 1.4; overflow-wrap: anywhere; } .saved-tool-name { margin-top: .25rem; color: var(--muted); font-size: .78rem; } .saved-input-preview { display: grid; gap: .4rem; margin-top: .8rem; } .saved-input-preview > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .6rem; padding: .5rem .65rem; border-left: 3px solid #71a9f0; border-radius: .4rem; background: var(--surface); } .saved-input-preview > .is-variant-b { border-color: #eea66a; } .saved-input-preview dt { min-width: 1rem; color: var(--brand); font-size: .75rem; font-weight: 900; line-height: 1.65; } .saved-input-preview .is-variant-b dt { color: #a33e05; } .saved-input-preview dd { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.65; overflow-wrap: anywhere; } .saved-summary { margin: .75rem 0; color: var(--ink); font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; } .saved-item-actions, .saved-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; } .saved-item-actions :is(a, button) { min-height: 44px; font-size: .82rem; text-decoration: none; } .saved-delete { min-height: 44px; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: .75rem; background: transparent; color: #b42318; font-size: .82rem; font-weight: 700; cursor: pointer; } .saved-delete:hover { border-color: currentColor; } .saved-clear { margin-top: 1rem; } .saved-clear-confirm, .saved-notice { padding: 1rem; margin-top: 1rem; border: 1px solid #f4c298; border-radius: .85rem; background: #fff5ec; color: #8c3500; font-size: .85rem; line-height: 1.6; } .saved-item-confirm { padding-top: .9rem; margin-top: .9rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; } .saved-name-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; } .saved-name-heading > span { color: var(--muted); font-size: .75rem; white-space: nowrap; } .saved-name-label { display: block; margin-bottom: .5rem; font-size: .9rem; font-weight: 700; } [data-saved-editor] > .hint { display: block; margin-top: .5rem; color: var(--muted); font-size: .78rem; line-height: 1.6; } [data-saved-error]:empty { display: none; } #saved-name { display: block; width: 100%; min-height: 48px; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--page); color: var(--ink); } #saved-name[aria-invalid="true"] { border-color: #d92d20; } .saved-preview-card { padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--page); } .saved-preview-card .saved-tool-name { margin: 0; color: var(--brand); font-weight: 700; } .saved-preview { margin-top: .65rem; font-size: 1.1rem; font-weight: 900; overflow-wrap: anywhere; } .saved-snapshot-note { margin-top: .4rem; color: var(--muted); font-size: .7rem; line-height: 1.6; } .saved-list-link { display: block; min-height: 44px; margin-top: 1rem; color: var(--brand); font-size: .85rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; } .saved-dialog-footer { display: flex; flex: 0 0 auto; align-items: start; gap: .75rem; padding: .9rem 1.5rem; border-top: 1px solid var(--line); background: var(--page); } .saved-footer-mark { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); color: var(--brand); } .saved-privacy-note { color: var(--muted); font-size: .72rem; line-height: 1.6; } .saved-privacy-note a { color: var(--brand); text-decoration: underline; text-underline-offset: .15em; } [data-temp-converter], [data-calculator] { scroll-margin-top: 6rem; } .dark .saved-delete { color: #ffb4ab; } .dark .saved-kind { background: #112d52; border-color: #305e99; color: #b9d9ff; } .dark .saved-kind.is-comparison { background: #3d2516; border-color: #805037; color: #ffd1ae; } .dark :is(.saved-clear-confirm, .saved-notice) { background: #3d2516; border-color: #805037; color: #ffd1ae; } .dark .saved-input-preview dt { color: #b9d9ff; } .dark .saved-input-preview .is-variant-b dt { color: #ffd1ae; } .dark :is(.saved-privacy-note a, .saved-list-link, .saved-preview-card .saved-tool-name, .saved-footer-mark, .saved-empty > svg) { color: #9dcaff; } .high-contrast :is(.saved-dialog, .saved-dialog-header, .saved-item, .saved-kind, .saved-empty, .saved-preview, .saved-privacy-note, .saved-clear-confirm, .saved-notice, #saved-name, .saved-nav-count) { border-color: #ffff00 !important; background: #000 !important; color: #ffff00 !important; } .high-contrast .saved-dialog :is(h2, h3, p, span, time, a, button, label, svg) { color: #ffff00 !important; } .high-contrast :is(.saved-dialog-footer, .saved-footer-mark, .saved-search, .saved-filters button, .saved-preview-card, .saved-input-preview > div, .saved-item-confirm) { border-color: #ffff00 !important; background: #000 !important; color: #ffff00 !important; } .high-contrast .saved-dialog :is(dt, dd, input) { color: #ffff00 !important; } .high-contrast .saved-filters button[aria-pressed="true"] { background: #ffff00 !important; color: #000 !important; } .high-contrast .saved-filters button[aria-pressed="true"] span { color: #000 !important; } .high-contrast .saved-search:focus-within { outline-color: #ffff00; } .high-contrast .saved-dialog::backdrop { background: rgb(0 0 0 / .4); } @media (max-width: 479px) { .saved-dialog { width: calc(100% - 1rem); max-width: calc(100% - 1rem); max-height: 92dvh; border-radius: 1rem; } .saved-list-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; } .saved-list-heading .eyebrow { display: none; } .saved-list-heading h2 { font-size: 1.4rem; } .saved-list-heading > span { padding: .25rem .4rem; font-size: .65rem; white-space: nowrap; } .saved-dialog-header { padding-inline: 1rem; } .saved-dialog-body { padding: 1.1rem; } .saved-dialog-footer { gap: .5rem; padding: .75rem 1.1rem; } .saved-footer-mark { display: none; } .saved-item { padding: .9rem; } .saved-item-actions > a { width: 100%; justify-content: center; } .saved-filters button { padding-inline: .65rem; font-size: .74rem; } .saved-editor-actions > .calc-action { width: 100%; justify-content: center; } .saved-editor-actions > .calc-secondary { width: 100%; justify-content: center; } } @media print { .saved-dialog { display: none !important; } } .ad-placement[hidden] { display: none !important; } .ad-placement .ad-label { position: absolute; inset: .3rem 0 auto; color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .08em; line-height: 1; text-align: center; text-transform: uppercase; } .ad-placement .adsbygoogle { width: 100%; min-height: 90px; } .ad-placement[data-ad-placement="home_mid_content"], .ad-placement[data-ad-placement="article_mid_content"] { min-height: 270px; } .dark .ad-placement { border-color: #334155; background: #0f172a; } .dark .ad-placement .ad-label { color: #94a3b8; } .high-contrast .ad-placement { border: 2px solid #ffff00 !important; background: #000 !important; } .high-contrast .ad-placement .ad-label { color: #ffff00 !important; } @media (min-width: 768px) { .ad-placement { min-height: 132px; padding-inline: 1rem; } .ad-placement[data-ad-placement="home_mid_content"], .ad-placement[data-ad-placement="article_mid_content"] { min-height: 292px; } } @media (max-width: 767px) { .ad-placement { min-height: 280px; } } @media (max-width: 479px) { .ad-placement { width: min(calc(100% - 1.25rem), 1200px); margin-block: 1rem; border-radius: .8rem; padding-inline: .35rem; } }