*, *::before, *::after { box-sizing: border-box; } html { font-size: 62.5%; } body, h1, h2, p, dl, dd, figure { margin: 0; } body { padding: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--wm-color__bg); color: var(--wm-color__text); font-family: var(--wm-font-family__base); font-size: var(--wm-font-size__base); line-height: var(--wm-line-height__base); text-wrap: pretty; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; } ::selection { background: var(--wm-color__accent); color: var(--wm-color__text); } :root { --wm-color__bg: #F4F1EA; --wm-color__text: #14130F; --wm-color__muted: #6B6759; --wm-color__accent: #FFCE00; --wm-color__alert: #D8291C; --wm-color__line: rgba(20, 19, 15, .14); --wm-color__icon: #14130F; --wm-font-family__base: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; --wm-font-family__mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --wm-font-size__base: 1.6rem; --wm-font-size__sm: 1.4rem; --wm-font-size__meta: 1.3rem; --wm-font-size__h1: clamp(1.8rem, 1.3rem + .5vw, 2.4rem); --wm-font-size__h2: clamp(1.6rem, 1.2rem + .45vw, 2rem); --wm-font-size__price: clamp(8rem, 3rem + 13vw, 26rem); --wm-font-size__currency: clamp(2.4rem, 1.2rem + 2vw, 5rem); --wm-font-size__stat: clamp(2.6rem, 1.4rem + 2.1vw, 4.4rem); --wm-font-size__timer: clamp(1.8rem, 1.4rem + .4vw, 2.2rem); --wm-line-height__base: 1.5; --wm-line-height__price: .82; --wm-space__10: 10px; --wm-space__15: 15px; --wm-space__20: 20px; --wm-space__25: 25px; --wm-space__40: 40px; --wm-space__gutter: clamp(15px, 1.8vw, 40px); --wm-space__section: clamp(20px, 2.6vh, 34px); --wm-icon-size__sm: 1.8rem; --wm-icon-size__md: 2rem; --wm-container__max: 1920px; --wm-container__pad: 40px; } /* Fonty zatím jedou z Google Fonts CDN (link v ). Po nahrání woff2 souborů do assets/fonts/ odkomentuj bloky níž a CDN link z index.html smaž. @font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } */ a { color: var(--wm-color__text); text-decoration-thickness: 1px; text-underline-offset: 4px; } a:hover { text-decoration-color: var(--wm-color__alert); } :where(a, button):focus-visible { outline: 3px solid var(--wm-color__text); outline-offset: 3px; } .u-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--wm-space__15); top: -100px; z-index: 20; padding: 12px var(--wm-space__20); background: var(--wm-color__text); color: var(--wm-color__bg); font-size: var(--wm-font-size__sm); font-weight: 600; text-decoration: none; } .skip-link:focus-visible { top: var(--wm-space__15); color: var(--wm-color__bg); outline-color: var(--wm-color__accent); } .icon { width: var(--wm-icon-size__md); height: var(--wm-icon-size__md); flex-shrink: 0; } .tracker { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: var(--wm-container__max); margin-inline: auto; padding-inline: var(--wm-container__pad); } .masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wm-space__15) 30px; padding-block: var(--wm-space__25) var(--wm-space__20); border-bottom: 1px solid var(--wm-color__line); } .masthead__title { font-size: var(--wm-font-size__h1); font-weight: 800; letter-spacing: -.015em; } .masthead__product { color: var(--wm-color__muted); font-weight: 600; } .masthead__meta { display: flex; align-items: center; gap: var(--wm-space__15); } .masthead__label { font-size: var(--wm-font-size__sm); color: var(--wm-color__muted); } .masthead__label time { color: var(--wm-color__text); } .masthead__timer { font-family: var(--wm-font-family__mono); font-size: var(--wm-font-size__timer); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .masthead__refresh { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(20, 19, 15, .22); background: transparent; color: var(--wm-color__icon); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; } .masthead__refresh:hover { background: var(--wm-color__accent); border-color: var(--wm-color__accent); } .masthead__refresh .icon { transition: transform 620ms cubic-bezier(.22, .7, .2, 1); } .masthead__refresh:active .icon { transform: rotate(180deg); transition-duration: 220ms; } .masthead__refresh:disabled { cursor: wait; opacity: .65; } .masthead__refresh.is-loading .icon { animation: wm-spin 720ms linear infinite; } .masthead__notice { flex-basis: 100%; font-size: var(--wm-font-size__sm); color: var(--wm-color__muted); } .masthead__notice.is-error { color: var(--wm-color__alert); } @keyframes wm-spin { to { transform: rotate(360deg); } } .board { flex: 1; display: flex; flex-direction: column; } .price { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-block: clamp(30px, 5vh, 70px) clamp(25px, 4vh, 50px); border-bottom: 8px solid var(--wm-color__accent); } .range__period { font-family: var(--wm-font-family__mono); font-size: var(--wm-font-size__meta); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wm-color__muted); } .range__marker { width: 10px; height: 10px; flex-shrink: 0; background: var(--wm-color__text); } .price__value { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 clamp(15px, 1.4vw, 28px); margin-top: clamp(15px, 2.2vh, 30px); } .price__amount { font-size: var(--wm-font-size__price); font-weight: 800; line-height: var(--wm-line-height__price); letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .price__currency { font-size: var(--wm-font-size__currency); font-weight: 600; letter-spacing: -.01em; color: var(--wm-color__muted); } .range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wm-space__15) var(--wm-space__gutter); padding-block: var(--wm-space__section); border-bottom: 1px solid var(--wm-color__line); } .range__title { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-width: 165px; font-size: var(--wm-font-size__h2); font-weight: 600; letter-spacing: -.01em; } .range--low .range__marker { background: var(--wm-color__accent); } .range--high .range__marker { background: var(--wm-color__alert); } /* grid-auto-columns s pevným minimem: na desktopu se čtyři sloupce roztáhnou, na úzkém displeji přetečou a řádek se posouvá do strany. */ .range__list { flex: 1 1 460px; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(125px, 1fr); gap: var(--wm-space__gutter); overflow-x: auto; scrollbar-width: none; scrollbar-color: transparent transparent; -ms-overflow-style: none; scroll-snap-type: x proximity; padding-bottom: 4px; overscroll-behavior-x: contain; } .range__list::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; } .range__item { display: flex; flex-direction: column; gap: 6px; scroll-snap-align: start; } .range__price { font-size: var(--wm-font-size__stat); font-weight: 800; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; } .range__unit { font-size: .32em; font-weight: 600; letter-spacing: 0; color: var(--wm-color__muted); } .sitefoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wm-space__15) var(--wm-space__40); padding-block: clamp(20px, 3vh, 34px) clamp(25px, 4vh, 44px); } .sitefoot__note { max-width: 62ch; font-size: var(--wm-font-size__sm); line-height: 1.6; color: var(--wm-color__muted); } .sitefoot__link { display: inline-flex; align-items: center; gap: var(--wm-space__10); padding-block: var(--wm-space__10); font-size: 1.5rem; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--wm-color__text); transition: color 160ms ease, border-color 160ms ease; } .sitefoot__link:hover { color: var(--wm-color__alert); border-color: var(--wm-color__alert); } .sitefoot__link .icon { width: var(--wm-icon-size__sm); height: var(--wm-icon-size__sm); } @media (max-width: 760px) { :root { --wm-container__pad: 20px; } .masthead__meta { width: 100%; justify-content: space-between; } .range { align-items: flex-start; } .range__list { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }