.etheme-headline { margin-bottom: 0; } .etheme-headline-text-wrapper svg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: visible; width: calc(100% + .75em); height: calc(100% + .75em); } .etheme-headline-text-wrapper svg path { stroke: var(--shape-color, currentColor); stroke-width: var(--shape-width, 8); fill: none; } .etheme-headline-highlight-active svg path { opacity: 1; stroke-dasharray: 0 var(--shape-dasharray, 1500); -webkit-transition: 0.3s; transition: 0.3s; -webkit-animation: etheme-headline-dash ease-out; animation: etheme-headline-dash ease-out; -webkit-animation-duration: var(--animation-duration, 2.4s); animation-duration: var(--animation-duration, 2.4s); -webkit-animation-iteration-count: var(--iteration-count, 1); animation-iteration-count: var(--iteration-count, 1); -webkit-animation-delay: var(--animation-delay, 0s); animation-delay: var(--animation-delay, 0s); } @-webkit-keyframes etheme-headline-dash { 0% { stroke-dasharray: 0 var(--shape-dasharray, 1500); opacity: 1; } 100% { stroke-dasharray: var(--shape-dasharray, 1500) var(--shape-dasharray, 1500); opacity: 1; } } @keyframes etheme-headline-dash { 0% { stroke-dasharray: 0 var(--shape-dasharray, 1500); opacity: 1; } 100% { stroke-dasharray: var(--shape-dasharray, 1500) var(--shape-dasharray, 1500); opacity: 1; } } .etheme-headline-highlight-inactive svg path { opacity: 0; stroke-dasharray: var(--shape-dasharray, 1500) var(--shape-dasharray, 1500); -webkit-animation: hide-highlight forwards; animation: hide-highlight forwards; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transition: 0.3s; transition: 0.3s; } @-webkit-keyframes hide-highlight { 0% { opacity: 1; stroke-dasharray: var(--shape-dasharray, 1500) var(--shape-dasharray, 1500); } 100% { opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } } @keyframes hide-highlight { 0% { opacity: 1; stroke-dasharray: var(--shape-dasharray, 1500) var(--shape-dasharray, 1500); } 100% { opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } } .etheme-headline-text-wrapper { display: inline-block; position: relative; color: var(--text-color, currentColor); } .etheme-headline-text-wrapper .etheme-headline-text { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; } .etheme-headline-text-wrapper .etheme-headline-text-active { position: relative; } .no-js .etheme-headline-text-wrapper .etheme-headline-text { opacity: 0; } .no-js .etheme-headline-text-wrapper .etheme-headline-text-active { opacity: 1; } /* -------------------------------- xflip -------------------------------- */ .etheme-headline-animation-type-flip .etheme-headline-text-wrapper { -webkit-perspective: 300px; perspective: 300px; } .etheme-headline-animation-type-flip .etheme-headline-text { opacity: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .etheme-headline-animation-type-flip .etheme-headline-text-active { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-animation: etheme-headline-flip-in 2.4s; animation: etheme-headline-flip-in 2.4s; } .etheme-headline-animation-type-flip .etheme-headline-text-inactive { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); -webkit-animation: etheme-headline-flip-out 2.4s; animation: etheme-headline-flip-out 2.4s; } @-webkit-keyframes etheme-headline-flip-in { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } 35% { -webkit-transform: rotateX(120deg); transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); opacity: 1; } } @keyframes etheme-headline-flip-in { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } 35% { -webkit-transform: rotateX(120deg); transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); opacity: 1; } } @-webkit-keyframes etheme-headline-flip-out { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } 35% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } } @keyframes etheme-headline-flip-out { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } 35% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } } .etheme-headline-animation-type-flip-2 .etheme-headline-text { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } /* -------------------------------- xtype -------------------------------- */ .etheme-headline-animation-type-typing .etheme-headline-text-wrapper { vertical-align: top; overflow: hidden; } .etheme-headline-animation-type-typing .etheme-headline-text-wrapper::after { /* vertical bar */ content: ''; position: absolute; right: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 90%; width: var(--cursor-width, 1px); background-color: currentColor; } .etheme-headline-animation-type-typing .etheme-headline-text-wrapper.waiting::after { -webkit-animation: etheme-headline-pulse 1s infinite; animation: etheme-headline-pulse 1s infinite; } .etheme-headline-animation-type-typing .etheme-headline-text-wrapper.selected { background-color: var(--typing-selected-bg-color, #222); } .etheme-headline-animation-type-typing .etheme-headline-text-wrapper.selected::after { visibility: hidden; } .etheme-headline-animation-type-typing .etheme-headline-text-wrapper.selected .etheme-headline-text { color: var(--typing-selected-color, #fff); } .etheme-headline-animation-type-typing .etheme-headline-text { visibility: hidden; } .etheme-headline-animation-type-typing .etheme-headline-text-active { visibility: visible; } .etheme-headline-animation-type-typing .etheme-headline-letter { position: absolute; visibility: hidden; } .etheme-headline-animation-type-typing .etheme-headline-letter-in { position: relative; visibility: visible; } @-webkit-keyframes etheme-headline-pulse { 0% { -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); opacity: 1; } 40% { -webkit-transform: translateY(-50%) scale(0.9); transform: translateY(-50%) scale(0.9); opacity: 0; } 100% { -webkit-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); opacity: 0; } } @keyframes etheme-headline-pulse { 0% { -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); opacity: 1; } 40% { -webkit-transform: translateY(-50%) scale(0.9); transform: translateY(-50%) scale(0.9); opacity: 0; } 100% { -webkit-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); opacity: 0; } } /* -------------------------------- xswirl -------------------------------- */ .etheme-headline-animation-type-swirl .etheme-headline-text-wrapper { -webkit-perspective: 300px; perspective: 300px; } .etheme-headline-animation-type-swirl .etheme-headline-letter, .etheme-headline-animation-type-swirl em { display: inline-block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .etheme-headline-animation-type-swirl .etheme-headline-text { opacity: 0; } .etheme-headline-animation-type-swirl .etheme-headline-letter { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); opacity: 0; } .etheme-headline-text-active .etheme-headline-animation-type-swirl .etheme-headline-letter { opacity: 1; } .etheme-headline-animation-type-swirl .etheme-headline-letter-in { -webkit-animation: etheme-headline-swirl-in 0.4s forwards; animation: etheme-headline-swirl-in 0.4s forwards; } .etheme-headline-animation-type-swirl .etheme-headline-letter-out { -webkit-animation: etheme-headline-swirl-out 0.4s forwards; animation: etheme-headline-swirl-out 0.4s forwards; } .etheme-headline-animation-type-swirl em { -webkit-transform: translateZ(20px); transform: translateZ(20px); } .no-csstransitions .etheme-headline-animation-type-swirl .etheme-headline-letter { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 0; } .no-csstransitions .etheme-headline-animation-type-swirl .etheme-headline-letter em { -webkit-transform: scale(1); transform: scale(1); } .no-csstransitions .etheme-headline-animation-type-swirl .etheme-headline-text-active .etheme-headline-letter { opacity: 1; } @-webkit-keyframes etheme-headline-swirl-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); transform: translateZ(-20px) rotateX(0deg); } } @keyframes etheme-headline-swirl-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); transform: translateZ(-20px) rotateX(0deg); } } @-webkit-keyframes etheme-headline-swirl-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); transform: translateZ(-20px) rotateX(-90deg); } } @keyframes etheme-headline-swirl-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); transform: translateZ(-20px) rotateX(-90deg); } } /* -------------------------------- xloading-bar -------------------------------- */ .etheme-headline-animation-type-loading-bar .etheme-headline-text-wrapper { display: inline-block; overflow: hidden; vertical-align: top; } .etheme-headline-animation-type-loading-bar .etheme-headline-text-wrapper::after { /* loading bar */ content: ''; position: absolute; left: 0; bottom: 0; height: var(--loading-bar-size, 0.1em); width: 0; background: var(--loading-bar-bg-color, currentColor); z-index: 2; -webkit-transition: width 0.3s 0.1s; transition: width 0.3s 0.1s; } .etheme-headline-animation-type-loading-bar .etheme-headline-text-wrapper.is-loading::after { width: 100%; -webkit-transition: width 3s; transition: width 3s; } .etheme-headline-animation-type-loading-bar .etheme-headline-text { opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .etheme-headline-animation-type-loading-bar .etheme-headline-text-active { opacity: 1; } /* -------------------------------- xslide-down -------------------------------- */ .etheme-headline-animation-type-slide-down .etheme-headline-text-wrapper { display: inline-block; overflow: hidden; vertical-align: top; } .etheme-headline-animation-type-slide-down .etheme-headline-text { opacity: 0; top: 0.2em; } .etheme-headline-animation-type-slide-down .etheme-headline-text-active { top: 0; opacity: 1; -webkit-animation: etheme-headline-slide-down-in 0.6s; animation: etheme-headline-slide-down-in 0.6s; } .etheme-headline-animation-type-slide-down .etheme-headline-text-inactive { -webkit-animation: etheme-headline-slide-down-out 0.6s; animation: etheme-headline-slide-down-out 0.6s; } @-webkit-keyframes etheme-headline-slide-down-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes etheme-headline-slide-down-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes etheme-headline-slide-down-out { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes etheme-headline-slide-down-out { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } } /* -------------------------------- xclip -------------------------------- */ .etheme-headline-animation-type-clip .etheme-headline-text-wrapper { display: inline-block; overflow: hidden; vertical-align: top; } .etheme-headline-animation-type-clip .etheme-headline-text-wrapper::after { /* line */ content: ''; position: absolute; top: 0; right: 0; width: var(--cursor-width, 2px); height: 100%; background-color: currentColor; } .etheme-headline-animation-type-clip .etheme-headline-text { opacity: 0; } .etheme-headline-animation-type-clip .etheme-headline-text-active { opacity: 1; } /* -------------------------------- xdrop-in -------------------------------- */ .etheme-headline-animation-type-drop-in .etheme-headline-text-wrapper { -webkit-perspective: 300px; perspective: 300px; } .etheme-headline-animation-type-drop-in .etheme-headline-text { opacity: 0; } .etheme-headline-animation-type-drop-in .etheme-headline-text-active { opacity: 1; -webkit-animation: etheme-headline-drop-in-in 0.8s; animation: etheme-headline-drop-in-in 0.8s; } .etheme-headline-animation-type-drop-in .etheme-headline-text-inactive { -webkit-animation: etheme-headline-drop-in-out 0.8s; animation: etheme-headline-drop-in-out 0.8s; } @-webkit-keyframes etheme-headline-drop-in-in { 0% { opacity: 0; -webkit-transform: translateZ(100px); transform: translateZ(100px); } 100% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes etheme-headline-drop-in-in { 0% { opacity: 0; -webkit-transform: translateZ(100px); transform: translateZ(100px); } 100% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes etheme-headline-drop-in-out { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } 100% { opacity: 0; -webkit-transform: translateZ(-100px); transform: translateZ(-100px); } } @keyframes etheme-headline-drop-in-out { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } 100% { opacity: 0; -webkit-transform: translateZ(-100px); transform: translateZ(-100px); } } .etheme-headline-animation-type-zoom .etheme-headline-text { opacity: 0; } .etheme-headline-animation-type-zoom .etheme-headline-text-active { opacity: 1; -webkit-animation: etheme-headline-zoom-in 0.8s; animation: etheme-headline-zoom-in 0.8s; } .etheme-headline-animation-type-zoom .etheme-headline-text-inactive { -webkit-animation: etheme-headline-zoom-out 0.8s; animation: etheme-headline-zoom-out 0.8s; } @-webkit-keyframes etheme-headline-zoom-in { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes etheme-headline-zoom-in { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes etheme-headline-zoom-out { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @keyframes etheme-headline-zoom-out { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } /* -------------------------------- xswirl-2 -------------------------------- */ .etheme-headline-animation-type-swirl-2 .etheme-headline-text-wrapper { -webkit-perspective: 300px; perspective: 300px; } .etheme-headline-animation-type-swirl-2 .etheme-headline-text { opacity: 0; } .etheme-headline-animation-type-swirl-2 .etheme-headline-letter { display: inline-block; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .etheme-headline-text-active .etheme-headline-animation-type-swirl-2 .etheme-headline-letter { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .etheme-headline-animation-type-swirl-2 .etheme-headline-letter-in { -webkit-animation: etheme-headline-swirl-2-in 0.6s forwards; animation: etheme-headline-swirl-2-in 0.6s forwards; } .etheme-headline-animation-type-swirl-2 .etheme-headline-letter-out { -webkit-animation: etheme-headline-swirl-2-out 0.6s forwards; animation: etheme-headline-swirl-2-out 0.6s forwards; } .no-csstransitions .etheme-headline-animation-type-swirl-2 .etheme-headline-letter { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 0; } .no-csstransitions .etheme-headline-animation-type-swirl-2 .etheme-headline-text-active .etheme-headline-letter { opacity: 1; } @-webkit-keyframes etheme-headline-swirl-2-in { 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes etheme-headline-swirl-2-in { 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @-webkit-keyframes etheme-headline-swirl-2-out { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @keyframes etheme-headline-swirl-2-out { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } /* -------------------------------- xwave -------------------------------- */ .etheme-headline-animation-type-wave .etheme-headline-text { opacity: 0; } .etheme-headline-animation-type-wave .etheme-headline-letter { display: inline-block; opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .etheme-headline-text-active .etheme-headline-animation-type-wave .etheme-headline-letter { opacity: 1; } .etheme-headline-animation-type-wave .etheme-headline-letter-in { -webkit-animation: etheme-headline-wave-up 0.6s forwards; animation: etheme-headline-wave-up 0.6s forwards; } .etheme-headline-animation-type-wave .etheme-headline-letter-out { -webkit-animation: etheme-headline-wave-down 0.6s forwards; animation: etheme-headline-wave-down 0.6s forwards; } .no-csstransitions .etheme-headline-animation-type-wave .etheme-headline-letter { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } .no-csstransitions .etheme-headline-animation-type-wave .etheme-headline-text-active .etheme-headline-letter { opacity: 1; } @-webkit-keyframes etheme-headline-wave-up { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 60% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes etheme-headline-wave-up { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 60% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes etheme-headline-wave-down { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 60% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } } @keyframes etheme-headline-wave-down { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 60% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } } /* -------------------------------- xslide -------------------------------- */ .etheme-headline-animation-type-slide .etheme-headline-text { opacity: 0; } .etheme-headline-animation-type-slide .etheme-headline-text-active { opacity: 1; -webkit-animation: etheme-headline-slide-in 0.6s; animation: etheme-headline-slide-in 0.6s; } .etheme-headline-animation-type-slide .etheme-headline-text-inactive { -webkit-animation: etheme-headline-slide-out 0.6s; animation: etheme-headline-slide-out 0.6s; } @-webkit-keyframes etheme-headline-slide-in { 0% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 60% { opacity: 1; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes etheme-headline-slide-in { 0% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 60% { opacity: 1; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes etheme-headline-slide-out { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 60% { opacity: 0; -webkit-transform: translateX(110%); transform: translateX(110%); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes etheme-headline-slide-out { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 60% { opacity: 0; -webkit-transform: translateX(110%); transform: translateX(110%); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } }