:root { color-scheme: light; /* Fallback banner images. PHP replaces these by language in the page . */ --hero-image-mobile: url("../img/hero/hero-1-bg-bg-480.jpg"); --hero-image-tablet: url("../img/hero/hero-1-bg-bg-768.jpg"); --hero-image-desktop: url("../img/hero/hero-1-bg-bg-1200.jpg"); --hero-image-wide: url("../img/hero/hero-1-bg-bg-1600.jpg"); --hero-image-ultrawide: url("../img/hero/hero-1-bg-bg-2200.jpg"); --hero-image-xxl: url("../img/hero/hero-1-bg-bg-2800.jpg"); --hero-image-fourk: url("../img/hero/hero-1-bg-bg-3840.jpg"); --hero-image: var(--hero-image-mobile); --footer-hero-image-mobile: url("../img/hero/hero-2-bg-bg-480.jpg"); --footer-hero-image-tablet: url("../img/hero/hero-2-bg-bg-768.jpg"); --footer-hero-image-desktop: url("../img/hero/hero-2-bg-bg-1200.jpg"); --footer-hero-image-wide: url("../img/hero/hero-2-bg-bg-1600.jpg"); --footer-hero-image-ultrawide: url("../img/hero/hero-2-bg-bg-2200.jpg"); --footer-hero-image-xxl: url("../img/hero/hero-2-bg-bg-2800.jpg"); --footer-hero-image-fourk: url("../img/hero/hero-2-bg-bg-3840.jpg"); --footer-hero-image: var(--footer-hero-image-mobile); /* Site fonts. Load matching Google Fonts in the page before changing these. */ --font-main: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-heading: "Poiret One", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Main design controls. Adjust these first when changing the visual style. */ --body-font-size: 16px; --heading-color: #171717; --text-color: #171717; --muted-text-color: #5c6470; --hero-title-size: 60px; --section-title-size: 35px; --result-title-size: clamp(26px, 4vw, 42px); --hero-height: clamp(360px, 56vh, 620px); --footer-hero-height: clamp(300px, 38vh, 520px); --hero-background-color: #1f2933; --footer-hero-background-color: #111827; --button-primary-color: #0f766e; --button-primary-hover-color: #0b5f59; --button-warm-color: #c2410c; --overlay-backdrop: rgb(42 34 15 / 33%); --color-ink: #171717; --color-muted: #5c6470; --color-paper: #f6f7f9; --color-surface: #ffffff; --color-line: #d9e1e8; --color-accent: #0f766e; --color-accent-strong: #0b5f59; --color-warm: #c2410c; --color-danger: #b42318; --color-success: #247a3d; --shadow-soft: 0 18px 50px rgba(23, 23, 23, 0.11); --radius: 8px; --max-page: 1160px; --page-gutter: 32px; } @media (min-width: 560px) { :root { --hero-image: var(--hero-image-tablet); --footer-hero-image: var(--footer-hero-image-tablet); } } @media (min-width: 960px) { :root { --hero-image: var(--hero-image-desktop); --footer-hero-image: var(--footer-hero-image-desktop); } } @media (min-width: 1440px) { :root { --hero-image: var(--hero-image-wide); --footer-hero-image: var(--footer-hero-image-wide); } } @media (min-width: 1800px) { :root { --hero-image: var(--hero-image-ultrawide); --footer-hero-image: var(--footer-hero-image-ultrawide); --max-page: 1600px; --page-gutter: 56px; } } @media (min-width: 2400px) { :root { --hero-image: var(--hero-image-xxl); --footer-hero-image: var(--footer-hero-image-xxl); --max-page: 2200px; --page-gutter: 72px; } } @media (min-width: 3200px) { :root { --hero-image: var(--hero-image-fourk); --footer-hero-image: var(--footer-hero-image-fourk); } } * { box-sizing: border-box; } html { min-height: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; } body { margin: 0; min-height: 100%; font-family: var(--font-main); color: var(--text-color); background: var(--color-paper); font-size: var(--body-font-size); } h1, h2, h3, .hero__eyebrow, .section-heading p, .footer-hero__content p, .footer-hero__content strong { font-family: var(--font-heading); } body.has-toast-backdrop::before { content: ""; position: fixed; inset: 0; z-index: 110; background: var(--overlay-backdrop); pointer-events: none; animation: backdrop-in 220ms ease both; } img { display: block; max-width: 100%; } button, input { font: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .site-menu { position: fixed; top: 18px; left: 50%; z-index: 20; width: min(var(--max-page), calc(100% - var(--page-gutter))); transform: translateX(-50%); display: flex; justify-content: flex-end; pointer-events: none; } .menu-toggle { display: inline-grid; width: 48px; height: 48px; place-items: center; gap: 4px; padding: 11px; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 50%; background: rgba(17, 24, 39, 0.72); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24); cursor: pointer; backdrop-filter: blur(10px); pointer-events: auto; } .menu-toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; border-radius: 999px; background: #ffffff; } .site-menu__panel { position: absolute; top: 58px; right: 0; display: grid; min-width: 230px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); background: rgba(17, 24, 39, 0.94); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 160ms ease, transform 160ms ease; backdrop-filter: blur(12px); } .site-menu.is-open .site-menu__panel { opacity: 1; pointer-events: auto; transform: translateY(0); } .site-menu__panel--static { position: static; opacity: 1; pointer-events: auto; transform: none; } .site-menu__panel a { display: block; padding: 12px 14px; border-radius: 6px; color: #ffffff; font-weight: 800; text-decoration: none; } .site-menu__panel a:hover, .site-menu__panel a:focus-visible { background: rgba(255, 255, 255, 0.12); outline: 0; } .hero { position: relative; min-height: var(--hero-height); overflow: clip; isolation: isolate; display: grid; align-items: center; color: #ffffff; } .hero__media { position: absolute; inset-block: -12%; inset-inline: 0; z-index: -2; background-color: var(--hero-background-color); background-image: var(--hero-image); background-position: center; background-size: cover; transform: translateY(0); will-change: transform; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-color: rgba(0, 0, 0, 0.1); } @supports (animation-timeline: scroll()) { .hero__media { animation: hero-scroll-parallax linear both; animation-timeline: scroll(root block); animation-range: 0 720px; } @keyframes hero-scroll-parallax { from { transform: translateY(-7%); } to { transform: translateY(15%); } } } .hero__content { width: min(var(--max-page), calc(100% - var(--page-gutter))); margin: 0 auto; padding: clamp(54px, 8vw, 96px) 0; } .hero__eyebrow { margin: 0 0 14px; color: #7dd3c7; font-weight: 700; text-transform: uppercase; } .hero__eyebrow a { color: inherit; text-decoration: none; } .hero__eyebrow a:hover, .hero__eyebrow a:focus-visible { color: #a7f3d0; outline: 0; } .hero h1 { margin: 0; max-width: 860px; color: #ffffff; font-size: var(--hero-title-size); line-height: 0.98; font-weight: 800; } .hero p:not(.hero__eyebrow) { max-width: 620px; margin: 22px 0 0; color: rgba(255, 255, 255, 0.86); font-size: clamp(17px, 2.2vw, 22px); line-height: 1.45; } .page { width: min(var(--max-page), calc(100% - var(--page-gutter))); margin: 0 auto; padding: clamp(28px, 5vw, 58px) 0; } .subpage { background: var(--color-paper); } .simple-page { display: grid; gap: 22px; padding-top: 110px; } .simple-page h1 { margin: 0; color: var(--heading-color); font-size: var(--section-title-size); line-height: 1.08; } .simple-page h2 { margin: 0 0 12px; color: var(--heading-color); font-size: clamp(22px, 3vw, 32px); } .simple-page p { color: var(--color-muted); line-height: 1.65; } .api-page { display: grid; gap: 22px; min-width: 0; } .info-panel, .stats-panel { min-width: 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); box-shadow: 0 10px 32px rgba(23, 23, 23, 0.06); } .stack-form { display: grid; max-width: 540px; gap: 14px; } .stack-form label { display: grid; gap: 7px; color: var(--color-ink); font-weight: 800; } .stack-form input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--color-line); border-radius: var(--radius); background: #ffffff; } .honeypot-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .token-box { display: grid; gap: 8px; margin: 18px 0; padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius); background: #f9fbfc; } .token-box span { color: var(--color-muted); font-weight: 800; } .token-box code, .code-block { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; } .token-box code, .code-block code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: inherit; overflow-wrap: inherit; } .token-box code { overflow-wrap: anywhere; white-space: normal; color: var(--color-accent-strong); font-weight: 800; } .code-block { margin: 12px 0; padding: 16px; border-radius: var(--radius); background: #111827; color: #f9fafb; line-height: 1.55; } .simple-table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; } .simple-table th, .simple-table td { padding: 12px; border: 1px solid var(--color-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; } .simple-table th { width: 180px; background: #f9fbfc; } .token-table th { width: auto; } .token-table td { vertical-align: middle; } .token-table small { display: block; margin-top: 5px; color: var(--color-muted); font-size: 12px; } .token-table code { white-space: nowrap; } .token-table form { margin: 0; } .usage-bars { display: grid; gap: 16px; } .usage-row { display: grid; gap: 7px; } .usage-row__meta { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; } .usage-row__label { color: var(--color-muted); font-size: 12px; font-weight: 800; line-height: 1.25; } .usage-row__bar { display: block; height: 14px; overflow: hidden; border-radius: 999px; background: #edf3f5; } .usage-row__fill { display: block; width: var(--usage-percent); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-strong)); } .usage-row__count { color: var(--color-ink); font-weight: 800; text-align: right; white-space: nowrap; } @media (max-width: 760px) { .token-table { display: block; overflow-x: auto; white-space: nowrap; } } .stats-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .stats-panel article { padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius); background: #f9fbfc; } .stats-panel span { display: block; margin-bottom: 6px; color: var(--color-muted); font-weight: 800; } .stats-panel strong { color: var(--color-ink); font-size: clamp(26px, 4vw, 42px); } .page-section { scroll-margin-top: 28px; } .page-section--optimizer { padding-bottom: clamp(42px, 7vw, 84px); } .page-section--tips, .page-section--faq, .page-section--contacts { padding-top: clamp(54px, 7vw, 96px); padding-bottom: clamp(54px, 7vw, 96px); } .section-heading { max-width: 820px; margin-bottom: 24px; } .section-heading p { margin: 0 0 8px; color: var(--color-accent); font-weight: 800; text-transform: uppercase; } .section-heading h2 { margin: 0; color: var(--heading-color); font-size: var(--section-title-size); } .tips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .faq-list { display: grid; gap: 16px; } .tips-grid article, .faq-panel, .contact-panel { padding: clamp(18px, 3vw, 28px); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); box-shadow: 0 10px 32px rgba(23, 23, 23, 0.06); } .tips-grid h3 { margin: 0 0 10px; font-size: 20px; } .faq-panel h3 { margin: 0 0 10px; font-size: 20px; } .tips-grid p, .faq-panel p, .contact-panel p { margin: 0; color: var(--color-muted); line-height: 1.65; } .messages { display: grid; gap: 10px; margin-bottom: 18px; } .notice { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--color-line); border-left: 5px solid var(--color-accent); border-radius: var(--radius); background: var(--color-surface); } .notice p { margin: 0; } .notice--error { border-left-color: var(--color-danger); } .notice--success { border-left-color: var(--color-success); } .tool { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow-soft); } .upload-form { display: grid; gap: 24px; padding: clamp(18px, 4vw, 32px); } .mode-picker { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; } .mode-picker legend { width: 100%; margin-bottom: 4px; font-weight: 800; } .mode-option { position: relative; } .mode-option input { position: absolute; opacity: 0; pointer-events: none; } .mode-option span { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid var(--color-line); border-radius: var(--radius); color: var(--color-muted); background: #fbfcfd; cursor: pointer; } .mode-option input:focus-visible + span { outline: 3px solid rgba(15, 118, 110, 0.28); outline-offset: 2px; } .mode-option input:checked + span { border-color: var(--color-accent); color: #ffffff; background: var(--color-accent); } .drop-zone { display: grid; gap: 12px; place-items: center; min-height: 220px; padding: 28px 18px; border: 2px dashed #9fb2bf; border-radius: var(--radius); background: #f9fbfc; text-align: center; transition: border-color 160ms ease, background-color 160ms ease; } .drop-zone.is-dragover { border-color: var(--color-accent); background: #eef9f7; } .drop-zone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .upload-button, .primary-button, .download-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); box-shadow: none; font-weight: 800; text-decoration: none; cursor: pointer; } .upload-button { padding: 12px 18px; color: #ffffff; background: var(--button-warm-color); } .primary-button, .download-button { padding: 12px 20px; color: #ffffff; background: var(--button-primary-color); } .primary-button:hover, .primary-button:focus-visible, .download-button:hover, .download-button:focus-visible { background: var(--button-primary-hover-color); outline: 0; box-shadow: none; } .upload-button:hover, .upload-button:focus-visible { background: #a83508; outline: 0; box-shadow: none; } .primary-button:disabled { cursor: not-allowed; opacity: 0.58; } .upload-meta { margin: 0; color: var(--color-muted); line-height: 1.5; } .file-list { display: grid; width: min(680px, 100%); gap: 6px; margin: 0; padding: 0; color: var(--color-muted); list-style: none; text-align: left; } .file-list li { display: flex; gap: 10px; align-items: center; justify-content: center; overflow-wrap: anywhere; padding: 8px 10px; border-radius: var(--radius); background: #edf2f6; } .file-list span { min-width: 0; overflow-wrap: anywhere; text-align: center; } .auto-submit-status { min-height: 22px; margin: 0; color: var(--color-accent-strong); font-weight: 700; line-height: 1.45; } .screen-loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: var(--overlay-backdrop); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 280ms ease, visibility 0s linear 280ms; } .screen-loader.is-active { visibility: visible; opacity: 1; transition-delay: 0s; } .screen-loader__panel { display: grid; justify-items: center; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 280ms ease, transform 280ms ease; } .screen-loader.is-active .screen-loader__panel { opacity: 1; transform: translateY(0) scale(1); } .gdpr-consent { position: fixed; inset: 0; z-index: 95; display: grid; align-items: end; justify-items: center; padding: clamp(18px, 5vw, 44px); background: var(--overlay-backdrop); overscroll-behavior: contain; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 260ms ease, visibility 0s linear 260ms; } .gdpr-consent.is-active { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; } .gdpr-consent__box { display: flex; align-items: center; justify-content: space-between; width: min(680px, 100%); gap: 18px; padding: clamp(16px, 3vw, 22px); border: 0; border-radius: var(--radius); background: rgba(255, 255, 255, 0.97); box-shadow: none; transform: translateY(12px) scale(0.98); transition: transform 260ms ease; } .gdpr-consent.is-active .gdpr-consent__box { transform: translateY(0) scale(1); } .gdpr-consent__box p { margin: 0; color: var(--color-ink); line-height: 1.5; } .gdpr-consent__button { flex: 0 0 auto; } /* Loader animation. Replace this block with another .loader model if needed. */ .loader { position: relative; width: 70px; aspect-ratio: 1; background: radial-gradient(farthest-side, #ffa516 90%, #0000) center / 16px 16px, radial-gradient(farthest-side, green 90%, #0000) bottom / 12px 12px; background-repeat: no-repeat; animation: loader-spin 1s infinite linear; } .loader::before { content: ""; position: absolute; width: 8px; aspect-ratio: 1; inset: auto 0 16px; margin: auto; border-radius: 50%; background: #ccc; transform-origin: 50% calc(100% + 10px); animation: inherit; animation-duration: 0.5s; } @keyframes loader-spin { 100% { transform: rotate(1turn); } } .toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 120; display: grid; width: min(390px, calc(100vw - 48px)); gap: 10px; pointer-events: none; } .toast-backdrop { position: fixed; inset: 0; z-index: 110; background: var(--overlay-backdrop); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; } .toast-backdrop.is-active { visibility: visible; opacity: 1; transition-delay: 0s; } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } .toast { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 14px 14px 16px; border: 1px solid var(--color-line); border-left: 5px solid var(--color-accent); border-radius: var(--radius); background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 48px rgba(23, 23, 23, 0.18); pointer-events: auto; animation: toast-in 180ms ease both; } .toast.is-closing { animation: toast-out 180ms ease both; } .toast p { margin: 0; color: var(--color-ink); line-height: 1.45; overflow-wrap: anywhere; } .toast--success { border-left-color: var(--color-success); } .toast--error { border-left-color: var(--color-danger); } .toast--warning { border-left-color: var(--color-warm); } .toast__close { display: inline-grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--color-muted); background: #ffffff; cursor: pointer; font-size: 18px; font-weight: 800; line-height: 1; } .toast__close:hover, .toast__close:focus-visible { color: var(--color-accent); outline: 0; } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { to { opacity: 0; transform: translateY(10px); } } .results { margin-top: clamp(30px, 5vw, 56px); } .results h2 { margin: 0 0 18px; color: var(--heading-color); font-size: var(--result-title-size); } .result { display: grid; gap: 18px; margin-top: 18px; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); box-shadow: 0 10px 32px rgba(23, 23, 23, 0.07); } .result__summary { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; } .result__summary h3 { margin: 0; overflow-wrap: anywhere; font-size: clamp(18px, 2.5vw, 24px); } .result__summary p { margin: 6px 0 0; color: var(--color-muted); } .result-mode-switch { display: flex; flex-wrap: wrap; gap: 8px; } .result-mode-button { min-height: 38px; padding: 8px 12px; border: 1px solid var(--color-line); border-radius: var(--radius); color: var(--color-muted); background: #fbfcfd; cursor: pointer; font-weight: 800; } .result-mode-button:hover, .result-mode-button:focus-visible { border-color: var(--button-primary-color); color: var(--button-primary-color); background: #eef7f5; outline: 0; } .result-mode-button.is-active { border-color: var(--button-primary-color); color: #ffffff; background: var(--button-primary-color); } .result-mode-button:disabled { cursor: wait; opacity: 0.62; } .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; } .stats div { padding: 12px; border: 1px solid var(--color-line); border-radius: var(--radius); background: #fbfcfd; } .stats dt { margin: 0 0 6px; color: var(--color-muted); font-size: 13px; } .stats dd { margin: 0; font-weight: 800; } .original-preview { margin: 0; } .original-preview figcaption, .compare figcaption { margin: 0 0 8px; color: var(--color-muted); font-weight: 700; } .original-preview img, .compare__frame { width: 100%; max-height: 720px; object-fit: contain; border: 1px solid var(--color-line); border-radius: var(--radius); background: #eef1f4; } .original-preview img { height: auto; } .compare { --split: 50%; margin: 0; } .compare__frame { position: relative; overflow: hidden; aspect-ratio: var(--image-ratio); user-select: none; touch-action: pan-y; } .compare__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; } .compare__before-wrap { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--split)) 0 0); } .compare__handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 3px; padding: 0; border: 0; background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 0 18px rgba(0, 0, 0, 0.35); cursor: ew-resize; touch-action: none; transform: translateX(-50%); } .compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24); transform: translate(-50%, -50%); } .compare__handle:focus-visible::after { outline: 3px solid rgba(15, 118, 110, 0.34); outline-offset: 3px; } .compare.is-dragging .compare__handle::after { background: var(--color-accent-strong); } .footer-hero { position: relative; min-height: var(--footer-hero-height); overflow: clip; isolation: isolate; display: grid; align-items: center; color: #ffffff; } .footer-hero__media { position: absolute; inset-block: -12%; inset-inline: 0; z-index: -2; background-color: var(--footer-hero-background-color); background-image: var(--footer-hero-image); background-position: center; background-size: cover; transform: translateY(0); } .footer-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.32)), linear-gradient(0deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.08)); } .footer-hero__content { width: min(var(--max-page), calc(100% - var(--page-gutter))); margin: 0 auto; padding: clamp(54px, 7vw, 88px) 0; } .footer-hero__content p { margin: 0 0 10px; color: #7dd3c7; font-weight: 800; text-transform: uppercase; } .footer-hero__content strong { display: block; max-width: 860px; font-size: var(--hero-title-size); line-height: 1.04; } .footer-hero__bottom { position: absolute; right: 0; bottom: 0; left: 0; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.24); } .footer-hero__bottom p { width: min(var(--max-page), calc(100% - var(--page-gutter))); margin: 0 auto; color: rgba(255, 255, 255, 0.84); font-size: 14px; } .footer-hero__bottom a { color: inherit; text-underline-offset: 3px; } .footer-hero__bottom a:hover { color: #ffffff; } .maintenance-page { min-height: 100vh; background: #111827; } .maintenance { display: grid; min-height: 100vh; place-items: center; padding: 24px; } .maintenance__box { width: min(760px, 100%); padding: clamp(28px, 6vw, 54px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); color: #ffffff; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24); } .maintenance__box p { margin: 0 0 12px; color: #7dd3c7; font-weight: 800; text-transform: uppercase; } .maintenance__box h1 { margin: 0; font-size: clamp(28px, 5vw, 37px); line-height: 1.08; } @media (max-width: 760px) { .hero { min-height: 430px; } .toast-region { right: 12px; bottom: 12px; left: 12px; width: auto; } .screen-loader { padding: 18px; } .gdpr-consent { padding: 14px; } .gdpr-consent__box { display: grid; gap: 14px; } .gdpr-consent__button { width: 100%; } .result__summary { display: grid; } .download-button { width: 100%; } .stats { grid-template-columns: 1fr; } .stats-panel { grid-template-columns: 1fr; } .compare__handle::after { width: 44px; height: 44px; } .tips-grid { grid-template-columns: 1fr; } } @media (min-width: 1500px) { .result { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .result__summary, .stats { grid-column: 1 / -1; } .original-preview, .compare { min-width: 0; } } @media (max-width: 480px) { .page, .hero__content { width: min(100% - 22px, var(--max-page)); } .hero h1, .footer-hero__content strong { font-size: 36px; } .upload-button, .primary-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }