.hurrytimer-campaign.hurryt-style-rounded .hurrytimer-timer-block { box-sizing: border-box; flex: 0 0 auto; aspect-ratio: 1; padding: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .hurrytimer-campaign.hurryt-style-rounded .hurrytimer-timer-digit, .hurrytimer-campaign.hurryt-style-rounded .hurrytimer-timer-label { line-height: 1.1; white-space: nowrap; } .hurryt-style-minimal .hurrytimer-timer-block { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin-left: 2px; margin-right: 2px; width: auto !important; height: auto !important; } .hurryt-style-minimal .hurrytimer-timer-digit { font-weight: 700; } .hurryt-style-minimal .hurrytimer-timer-label { font-weight: 400; opacity: 0.6; } .hurryt-style-minimal .hurrytimer-timer-sep { opacity: 0.4; } .hurryt-style-circle-progress .hurrytimer-timer-block { position: relative; background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; } .hurryt-style-circle-progress .hurryt-progress-block { position: relative; display: inline-flex; align-items: center; justify-content: center; } .hurryt-style-circle-progress .hurryt-progress-ring { display: block; } .hurryt-style-circle-progress .hurryt-progress-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hurryt-style-circle-progress .hurryt-progress-bar { transition: stroke-dashoffset 1s linear; } .hurryt-style-circle-progress .hurrytimer-timer-sep { display: none; } .hurrytimer-campaign.hurryt-style-flip { --hurryt-flip-dur: .6s; } .hurrytimer-campaign.hurryt-style-flip .hurrytimer-timer { align-items: flex-start; } .hurrytimer-campaign.hurryt-style-flip .hurrytimer-timer-block { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; width: auto; height: auto; } .hurrytimer-campaign.hurryt-style-flip .hurrytimer-timer-digit { display: flex; justify-content: center; gap: .07em; line-height: 1; font-weight: 700; } .hurrytimer-campaign.hurryt-style-flip .hurrytimer-timer-sep { display: block; align-self: flex-start; line-height: 1.15; opacity: .55; } .hurryt-flip-digit { position: relative; display: block; box-sizing: border-box; width: .72em; height: 1.15em; perspective: 9em; background-color: #f2f2f2; border-radius: var(--hurryt-flip-r, .1em); } .hurryt-flip-half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background-color: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .hurryt-flip-half > span { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; } .hurryt-flip-top, .hurryt-flip-leaf-top { top: 0; border-radius: var(--hurryt-flip-r, .1em) var(--hurryt-flip-r, .1em) 0 0; background-image: linear-gradient(rgba(255, 255, 255, .08), rgba(0, 0, 0, .16)); } .hurryt-flip-bottom, .hurryt-flip-leaf-bottom { bottom: 0; border-radius: 0 0 var(--hurryt-flip-r, .1em) var(--hurryt-flip-r, .1em); background-image: linear-gradient(rgba(0, 0, 0, .24), rgba(0, 0, 0, .04)); } .hurryt-flip-top > span, .hurryt-flip-leaf-top > span { top: 0; } .hurryt-flip-bottom > span, .hurryt-flip-leaf-bottom > span { bottom: 0; } .hurryt-flip-digit::after { content: ''; position: absolute; z-index: 3; left: 0; right: 0; top: 50%; height: max(1px, .025em); transform: translateY(-50%); background: rgba(0, 0, 0, .5); } .hurryt-flip-leaf { z-index: 2; visibility: hidden; } .hurryt-flip-digit.is-flipping .hurryt-flip-leaf { visibility: visible; } .hurryt-flip-digit.is-flipping .hurryt-flip-leaf-top { transform-origin: 50% 100%; animation: hurryt-flip-top calc(var(--hurryt-flip-dur, .6s) / 2) cubic-bezier(.5, 0, 1, .6) both; } .hurryt-flip-digit.is-flipping .hurryt-flip-leaf-bottom { transform-origin: 50% 0; animation: hurryt-flip-bottom calc(var(--hurryt-flip-dur, .6s) / 2) cubic-bezier(0, .4, .5, 1) calc(var(--hurryt-flip-dur, .6s) / 2) both; } .hurryt-flip-leaf { will-change: transform; } .hurryt-flip-leaf::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: 0; pointer-events: none; } .hurryt-flip-digit.is-flipping .hurryt-flip-leaf-top::after { animation: hurryt-flip-shade-in calc(var(--hurryt-flip-dur, .6s) / 2) ease-in both; } .hurryt-flip-digit.is-flipping .hurryt-flip-leaf-bottom::after { animation: hurryt-flip-shade-out calc(var(--hurryt-flip-dur, .6s) / 2) ease-out calc(var(--hurryt-flip-dur, .6s) / 2) both; } @keyframes hurryt-flip-top { from { transform: rotateX(0); } to   { transform: rotateX(-90deg); } } @keyframes hurryt-flip-bottom { from { transform: rotateX(90deg); } to   { transform: rotateX(0); } } @keyframes hurryt-flip-shade-in { from { opacity: 0; } to   { opacity: .45; } } @keyframes hurryt-flip-shade-out { from { opacity: .45; } to   { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hurryt-flip-digit.is-flipping .hurryt-flip-leaf { animation: none; visibility: hidden; } } .hurryt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .hurryt-style-circle-progress .hurryt-progress-block { flex-shrink: 1; min-width: 0; } .hurryt-style-circle-progress .hurryt-progress-ring { max-width: 100%; height: auto; }