/** Shopify CDN: Minification failed Line 448:0 Unexpected "@media" Line 495:0 Unexpected "@media" Line 703:0 Unexpected "@media" Line 721:0 Unexpected "@media" Line 788:0 Unexpected "@media" **/ /* Hidden Workshop Studios Password Countdown v2.0 - static styles. Per-instance values arrive via CSS variables emitted by the section. Scope: .hws-password-countdown-section (section wrapper class). */ /* === @pqina/flip base (moved from inline, unchanged) === */ .tick{box-sizing:border-box;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:default;position:relative;z-index:1;line-height:1.4}.tick *{box-sizing:inherit}.tick [data-view]{max-width:100%}.tick span[data-view]{display:inline-block}.tick .tick-credits{position:absolute;right:0;bottom:0;opacity:.4;text-decoration:none;font-size:11px;color:inherit}.tick [data-layout~=pad]{margin:-.25em}.tick [data-layout~=pad]>*{margin:.25em}.tick [data-layout~=horizontal]{display:flex;flex-direction:row;justify-content:center}.tick [data-layout~=horizontal][data-layout~=center]{justify-content:center}.tick [data-layout~=vertical]{display:flex;flex-direction:column;align-items:center}.tick [data-layout~=vertical]>*+*{margin-top:.5em}.tick-flip{position:relative;text-align:center}.tick-flip *{border-radius:inherit;white-space:pre;letter-spacing:inherit;text-indent:inherit}.tick-flip-front{border-bottom-left-radius:0;border-bottom-right-radius:0}.tick-flip-back{border-top-left-radius:0;border-top-right-radius:0}.tick-flip-spacer{display:block;visibility:hidden}.tick-flip-shadow{position:absolute;left:1px;right:1px;top:1px;bottom:1px;color:transparent!important;background:transparent!important}.tick-flip-shadow-top{bottom:calc(50% - 1px)}.tick-flip-shadow-bottom{top:calc(50% + 1px)}.tick-flip-card-shadow{position:absolute;left:.15em;right:.15em;bottom:.125em;height:.5em;background-color:transparent;border-radius:0;opacity:0;transform-origin:0 100%;box-shadow:0 .125em .25em rgba(0,0,0,.5),0 .125em .5em rgba(0,0,0,.75);z-index:0}.tick-flip-card{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;perspective:4em}.tick-flip-panel-back,.tick-flip-panel-front{position:absolute;left:0;width:100%;height:51%;backface-visibility:hidden;transform-style:preserve-3d}.tick-flip-panel-back-text,.tick-flip-panel-front-text{position:absolute;left:-1px;top:0;right:-1px;height:100%;overflow:hidden}.tick-flip-panel-text-wrapper{position:absolute;left:0;top:0;right:0;height:100%}.tick-flip-panel-back-text .tick-flip-panel-text-wrapper{height:200%;top:-100%}.tick-flip-panel-front{transform-origin:center bottom;top:0;z-index:2;box-shadow:inset 0 1px hsla(0,0%,100%,.05)}.tick-flip-panel-back{transform-origin:center top;top:50%;z-index:1;box-shadow:inset 0 -1px rgba(0,0,0,.1)}.tick-flip-panel-back:after{z-index:1;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(0,0,0,.3) 1px,rgba(0,0,0,.15) 0,transparent 30%)}.tick-flip-panel-back-shadow{z-index:2}.tick-flip-panel-back-highlight{z-index:3}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow,.tick-flip-panel-front-shadow{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0}.tick-flip-panel-front-shadow{background-image:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.3))}.tick-flip-panel-back-shadow{background-image:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.5))}.tick-flip-panel-back-highlight{background-image:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,.3))}.tick-flip{margin-left:.0625em;margin-right:.0625em;min-width:1.125em;border-radius:.125em;letter-spacing:.25em;text-indent:.25em}.tick-flip-panel{color:#edebeb;background-color:#333232}.tick-flip-shadow{box-shadow:0 .125em .3125em rgba(0,0,0,.25),0 .02125em .06125em rgba(0,0,0,.25)} /* === Dawn password layout overrides (documented globals) === html body / .password / .password__footer / #shopify-section-main rules are intentionally global: they unify the Dawn password template around this section and hide the stock header visuals while keeping password-modal. Retained from v1.3; actual template files were unavailable for narrowing. */ html body, .password { background: #0a0f1a !important; color: #b8c4d4; } .hws-password-countdown-section { position: relative; z-index: 1; width: 100%; background: transparent; } .password__footer { display: none !important; } #shopify-section-main .password-header { height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: visible !important; background: transparent !important; } #shopify-section-main .password-logo, #shopify-section-main .password-header > h1, #shopify-section-main .password-content, #shopify-section-main .modal__toggle-open { display: none !important; } #shopify-section-main [class*="color-"].gradient { background: transparent !important; border: none !important; padding: 0 !important; } #shopify-section-main hr { display: none !important; } /* === Password modal (Dawn details/summary pattern, from v1.3) === */ password-modal { display: contents; } password-modal > .password-modal { z-index: 999; } password-modal .modal__content { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(10,15,26,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 20px; } .password-modal__content { background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 40px 36px; max-width: 420px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.3); position: relative; } .password-modal__content-heading { color: rgba(255,255,255,0.9) !important; font-size: 20px; margin-bottom: 24px; font-weight: 600; } .password-modal .modal__close-button { position: absolute; top: 16px; right: 16px; background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; padding: 4px; transition: color 0.3s ease; } .password-modal .modal__close-button:hover { color: #fff; } .password-modal .modal__close-button svg, .password-modal .modal__close-button .icon { width: 20px; height: 20px; stroke: currentColor; fill: none; } .password-field { margin-bottom: 16px; } .password-field .field__input { width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: #fff; padding: 14px 16px; font-size: 15px; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .password-field .field__input:focus { border-color: #c9a84c; box-shadow: 0 0 0 2px rgba(201,168,76,0.25); } .password-field .field__input::placeholder { color: rgba(255,255,255,0.4); } .password-field .field__label { display: none; } .password-button { width: 100%; background: #c9a84c; color: #0a0f1a; border: none; padding: 14px 24px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border-radius: 8px; transition: background 0.3s ease; } .password-button:hover { background: #b8923e; } .password__footer-text { display: block; margin-top: 20px; color: rgba(255,255,255,0.5); font-size: 13px; } .password__footer-text a { color: rgba(255,255,255,0.5); } .password__footer-text a:hover { color: rgba(255,255,255,0.9); } .password-field--error .form__message { background: rgba(220,53,69,0.15); border: 1px solid rgba(220,53,69,0.3); border-radius: 8px; padding: 12px 16px; margin-top: 8px; color: #ff8a95; font-size: 14px; display: flex; align-items: center; gap: 6px; } .password-modal .modal__toggle-close { display: none; } .password-modal[open] .modal__toggle-close { display: block; position: fixed; top: 16px; right: 16px; z-index: 1000; color: rgba(255,255,255,0.5); cursor: pointer; } .password-modal[open] .modal__toggle-close:hover { color: #fff; } /* === Section layout === */ .hws-password-countdown-section .hws-pw { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: var(--hws-pw-min-h-m); padding: var(--hws-pw-pad-top-m) 16px var(--hws-pw-pad-bottom-m); overflow: hidden; text-align: var(--hws-pw-align); } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw { min-height: var(--hws-pw-min-h-d); padding: var(--hws-pw-pad-top-d) 40px var(--hws-pw-pad-bottom-d); } } /* === Background layer stack (see HWS_PASSWORD_LAYER_STACK.md) === 0 gradient | 1 fx behind image | 2 image | 3 fx over image under overlay 4 overlay | 5 fx over overlay | 10 content | 20 corner pill */ .hws-password-countdown-section .hws-pw__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; width: 100%; height: 100%; pointer-events: none; } .hws-password-countdown-section .hws-pw__bg-grad { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, var(--hws-pw-grad-start) 0%, var(--hws-pw-grad-mid) 50%, var(--hws-pw-grad-end) 100%); } .hws-password-countdown-section .hws-pw__bg-img { position: absolute; inset: 0; z-index: 2; overflow: hidden; } .hws-password-countdown-section .hws-pw__img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: var(--hws-pw-bg-fit, cover); object-position: var(--hws-pw-focal-m, center center); transform: translate(var(--hws-pw-nx-m, 0), var(--hws-pw-ny-m, 0)) scale(var(--hws-pw-zoom-m, 1)); } .hws-password-countdown-section .hws-pw__img--m { display: block; } .hws-password-countdown-section .hws-pw__img--d { display: none; } .hws-password-countdown-section .hws-pw__img--d.hws-pw__img--solo { display: block; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__img { object-position: var(--hws-pw-focal-d, center center); transform: translate(var(--hws-pw-nx-d, 0), var(--hws-pw-ny-d, 0)) scale(var(--hws-pw-zoom-d, 1)); } .hws-password-countdown-section .hws-pw__img--m { display: none; } .hws-password-countdown-section .hws-pw__img--d { display: block; } } .hws-password-countdown-section .hws-pw__bg-overlay { position: absolute; inset: 0; z-index: 4; background-color: var(--hws-pw-overlay-m, var(--hws-pw-overlay)); } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__bg-overlay { background-color: var(--hws-pw-overlay); } } /* === Effect wrappers: deterministic layer, contained stacking, no pointer capture === */ .hws-password-countdown-section .hws-pw__fx { position: absolute; inset: 0; pointer-events: none; isolation: isolate; } .hws-password-countdown-section .hws-pw__fx--behind_image { z-index: 1; } .hws-password-countdown-section .hws-pw__fx--over_image_under_overlay { z-index: 3; } .hws-password-countdown-section .hws-pw__fx--over_overlay { z-index: 5; } .hws-password-countdown-section .hws-pw__fx--hide-m { display: none !important; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__fx--hide-m { display: block !important; } .hws-password-countdown-section .hws-pw__fx--hide-d { display: none !important; } } /* === Content + panel modes === */ .hws-password-countdown-section .hws-pw__content { position: relative; z-index: 10; width: 100%; max-width: var(--hws-pw-max-w); } .hws-password-countdown-section .hws-pw__panel { position: relative; padding: var(--hws-pw-glass-py-m) var(--hws-pw-glass-px-m); border-radius: var(--hws-pw-glass-radius); } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__panel { padding: var(--hws-pw-glass-py-d) var(--hws-pw-glass-px-d); } } .hws-password-countdown-section .hws-pw__panel--glass { background: var(--hws-pw-glass-bg); backdrop-filter: blur(var(--hws-pw-glass-blur)); -webkit-backdrop-filter: blur(var(--hws-pw-glass-blur)); border: 1px solid var(--hws-pw-glass-border); box-shadow: 0 8px 32px rgba(0,0,0,var(--hws-pw-glass-shadow)); } /* Solid: configured background at configured opacity, no backdrop filter at all. */ .hws-password-countdown-section .hws-pw__panel--solid { background: var(--hws-pw-glass-bg); border: 1px solid var(--hws-pw-glass-border); box-shadow: 0 8px 32px rgba(0,0,0,var(--hws-pw-glass-shadow)); } /* None: no background, blur, border, shadow, glow, or pseudo-element residue. */ .hws-password-countdown-section .hws-pw__panel--none { background: none; border: none; box-shadow: none; border-radius: 0; } .hws-password-countdown-section .hws-pw__panel--none::before, .hws-password-countdown-section .hws-pw__panel--none::after { content: none; } .hws-password-countdown-section .hws-pw__panel--glow { animation: hws-pw-glow var(--hws-pw-glow-speed) ease-in-out infinite; } @keyframes hws-pw-glow { 0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,var(--hws-pw-glass-shadow)), 0 0 0px transparent; } 50% { box-shadow: 0 8px 32px rgba(0,0,0,var(--hws-pw-glass-shadow)), 0 0 var(--hws-pw-glow-strength) var(--hws-pw-glow-color); } } /* === Logo === */ .hws-password-countdown-section .hws-pw__logo { margin: 0 0 20px; text-align: var(--hws-pw-align); } .hws-password-countdown-section .hws-pw__logo img { display: inline-block; height: var(--hws-pw-logo-h-m); width: auto; max-width: 100%; object-fit: contain; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__logo img { height: var(--hws-pw-logo-h-d); } } /* === Typography === */ .hws-password-countdown-section .hws-pw__kicker { font-family: var(--hws-pw-f-kicker); font-size: var(--hws-pw-kicker-m); color: var(--hws-pw-c-kicker); letter-spacing: 0.06em; margin: var(--hws-pw-kicker-nt-m) 0 calc(12px + var(--hws-pw-kicker-nb-m)); font-weight: 600; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__kicker { font-size: var(--hws-pw-kicker-d); margin: var(--hws-pw-kicker-nt-d) 0 calc(16px + var(--hws-pw-kicker-nb-d)); } } .hws-password-countdown-section .hws-pw__heading { font-family: var(--hws-pw-f-heading); font-size: var(--hws-pw-heading-m); font-weight: var(--hws-pw-heading-weight); color: var(--hws-pw-c-heading); line-height: var(--hws-pw-heading-lh); margin: 0 0 16px; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__heading { font-size: var(--hws-pw-heading-d); margin-bottom: 20px; } } .hws-password-countdown-section .hws-pw--hgrad .hws-pw__heading { background: linear-gradient(135deg, var(--hws-pw-hgrad-start), var(--hws-pw-hgrad-end)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hws-password-countdown-section .hws-pw__subheading { font-family: var(--hws-pw-f-subheading); font-size: var(--hws-pw-subheading-m); color: var(--hws-pw-c-subheading); line-height: 1.6; margin: 0 0 32px; max-width: 600px; } .hws-password-countdown-section .hws-pw--align-center .hws-pw__subheading { margin-left: auto; margin-right: auto; } .hws-password-countdown-section .hws-pw__subheading p, .hws-password-countdown-section .hws-pw__subheading li, .hws-password-countdown-section .hws-pw__subheading a, .hws-password-countdown-section .hws-pw__subheading strong, .hws-password-countdown-section .hws-pw__subheading em, .hws-password-countdown-section .hws-pw__subheading span { font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; } .hws-password-countdown-section .hws-pw__subheading p { margin: 0; } .hws-password-countdown-section .hws-pw__subheading p + p { margin-top: 1em; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__subheading { font-size: var(--hws-pw-subheading-d); margin-bottom: 40px; } } /* === Launch date pill === */ .hws-password-countdown-section .hws-pw__launch-pill-wrap { text-align: var(--hws-pw-align); } .hws-password-countdown-section .hws-pw__launch-pill { display: inline-block; margin: 0 0 var(--hws-pw-lp-mb-m); padding: var(--hws-pw-lp-pad-m); background-color: var(--hws-pw-lp-bg); backdrop-filter: blur(var(--hws-pw-lp-blur)); -webkit-backdrop-filter: blur(var(--hws-pw-lp-blur)); border-radius: var(--hws-pw-lp-radius); border: 1px solid var(--hws-pw-lp-border); } .hws-password-countdown-section .hws-pw__launch-pill--noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.12'/%3E%3C/svg%3E"); background-blend-mode: soft-light; } .hws-password-countdown-section .hws-pw__launch-pill-text { font-family: var(--hws-pw-lp-f); font-size: var(--hws-pw-lp-size-m); font-weight: var(--hws-pw-lp-weight); color: var(--hws-pw-lp-color); letter-spacing: 0.02em; line-height: 1.2; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__launch-pill { margin-bottom: var(--hws-pw-lp-mb-d); padding: var(--hws-pw-lp-pad-d); } .hws-password-countdown-section .hws-pw__launch-pill-text { font-size: var(--hws-pw-lp-size-d); } } /* === Flip clock === */ .hws-password-countdown-section .hws-pw__countdown { margin: var(--hws-pw-clock-nudge-top-m) var(--hws-pw-clock-nudge-right-m) calc(32px + var(--hws-pw-clock-nudge-bottom-m)) var(--hws-pw-clock-nudge-left-m); padding: var(--hws-pw-clock-py-m) var(--hws-pw-clock-px-m); } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__countdown { margin: var(--hws-pw-clock-nudge-top-d) var(--hws-pw-clock-nudge-right-d) calc(40px + var(--hws-pw-clock-nudge-bottom-d)) var(--hws-pw-clock-nudge-left-d); padding: var(--hws-pw-clock-py-d) var(--hws-pw-clock-px-d); } } .hws-password-countdown-section .tick { font-family: var(--hws-pw-f-countdown); font-size: var(--hws-pw-clock-m); padding-bottom: 0; } @media (min-width: 750px) { .hws-password-countdown-section .tick { font-size: var(--hws-pw-clock-d); } } .hws-password-countdown-section .tick-flip-panel { color: var(--hws-pw-c-digit) !important; background-color: var(--hws-pw-digit-bg) !important; } .hws-password-countdown-section .tick-flip { border-radius: var(--hws-pw-digit-radius); } .hws-password-countdown-section .tick-flip-shadow { box-shadow: 0 0.1em 0.25em var(--hws-pw-clock-shadow) !important; border: 1px solid var(--hws-pw-digit-border); } .hws-password-countdown-section .tick-flip-shadow-top, .hws-password-countdown-section .tick-flip-shadow-bottom { background: transparent !important; } .hws-password-countdown-section .tick-flip-panel-back::after { background-image: linear-gradient(180deg, var(--hws-pw-clock-line) 1px, transparent 1px, transparent 30%) !important; } .hws-password-countdown-section .tick-flip-panel-back { box-shadow: inset 0 -1px var(--hws-pw-clock-line) !important; } .hws-password-countdown-section .tick-flip-panel-front { box-shadow: inset 0 1px rgba(255,255,255,0.08) !important; } .hws-password-countdown-section .tick-flip-panel-front-shadow { background-image: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0.1)) !important; } .hws-password-countdown-section .tick-flip-panel-back-shadow { background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.15)) !important; } .hws-password-countdown-section .tick-flip-panel-back-highlight { background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.2)) !important; } .hws-password-countdown-section .tick-flip-card-shadow { box-shadow: 0 0.125em 0.25em var(--hws-pw-clock-shadow), 0 0.125em 0.5em var(--hws-pw-clock-shadow) !important; } .hws-password-countdown-section .tick-label { font-family: var(--hws-pw-f-body); font-size: var(--hws-pw-label-m); color: var(--hws-pw-c-label); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; text-align: center; } @media (min-width: 750px) { .hws-password-countdown-section .tick-label { font-size: var(--hws-pw-label-d); } } .hws-password-countdown-section .tick-group { margin: 0 var(--hws-pw-gap-m); text-align: center; } @media (min-width: 750px) { .hws-password-countdown-section .tick-group { margin: 0 var(--hws-pw-gap-d); } } .hws-password-countdown-section .tick-credits { display: none !important; } .hws-password-countdown-section .hws-pw--clockfx .tick-flip { box-shadow: 0 0 var(--hws-pw-fx-lo) var(--hws-pw-fx-lo-sp) var(--hws-pw-neon); animation: hws-pw-fx-pulse var(--hws-pw-fx-speed) ease-in-out infinite; } @keyframes hws-pw-fx-pulse { 0%, 100% { box-shadow: 0 0 var(--hws-pw-fx-lo) var(--hws-pw-fx-lo-sp) var(--hws-pw-neon); } 50% { box-shadow: 0 0 var(--hws-pw-fx-hi) var(--hws-pw-fx-hi-sp) var(--hws-pw-neon); } } .hws-password-countdown-section .hws-pw__expired { font-family: var(--hws-pw-f-heading); font-size: var(--hws-pw-heading-m); font-weight: 700; color: var(--hws-pw-c-heading); margin: 0 0 16px; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__expired { font-size: calc(var(--hws-pw-heading-d) * 0.8); } } .hws-password-countdown-section .hws-pw__spacer { height: var(--hws-pw-spacer-m); } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__spacer { height: var(--hws-pw-spacer-d); } } /* === Progress ring === */ .hws-password-countdown-section .hws-pw__ring-wrap { display: flex; justify-content: var(--hws-pw-justify); margin: 0 0 28px; } .hws-password-countdown-section .hws-pw__ring { position: relative; width: var(--hws-pw-ring-size); height: var(--hws-pw-ring-size); } .hws-password-countdown-section .hws-pw__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .hws-password-countdown-section .hws-pw__ring-track { fill: none; stroke: var(--hws-pw-ring-track); stroke-width: var(--hws-pw-ring-stroke); } .hws-password-countdown-section .hws-pw__ring-fill { fill: none; stroke: var(--hws-pw-ring-fill); stroke-width: var(--hws-pw-ring-stroke); stroke-linecap: round; transition: stroke-dashoffset 1s ease; } .hws-password-countdown-section .hws-pw__ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--hws-pw-f-countdown); font-size: calc(var(--hws-pw-ring-size) * 0.18); font-weight: 700; color: var(--hws-pw-c-digit); line-height: 1.2; } .hws-password-countdown-section .hws-pw__ring-pct { font-size: calc(var(--hws-pw-ring-size) * 0.22); } .hws-password-countdown-section .hws-pw__ring-label { font-family: var(--hws-pw-f-body); font-size: calc(var(--hws-pw-ring-size) * 0.1); color: var(--hws-pw-c-label); text-transform: uppercase; letter-spacing: 0.08em; } /* === Newsletter === */ .hws-password-countdown-section .hws-pw__newsletter { margin: 0 0 28px; max-width: 480px; } .hws-password-countdown-section .hws-pw--align-center .hws-pw__newsletter { margin-left: auto; margin-right: auto; } .hws-password-countdown-section .hws-pw__newsletter-label { font-family: var(--hws-pw-f-body); font-size: var(--hws-pw-body-m); color: var(--hws-pw-c-body); margin: 0 0 12px; display: block; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__newsletter-label { font-size: var(--hws-pw-body-d); } } .hws-password-countdown-section .hws-pw__newsletter-form { display: flex; gap: 0; border-radius: var(--hws-pw-input-radius); overflow: hidden; border: 1px solid var(--hws-pw-input-border); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .hws-password-countdown-section .hws-pw__newsletter-form:focus-within { border-color: var(--hws-pw-btn-bg); box-shadow: 0 0 0 2px var(--hws-pw-btn-focus); } .hws-password-countdown-section .hws-pw__newsletter-input { flex: 1; padding: 14px 16px; background: var(--hws-pw-input-bg); color: var(--hws-pw-input-text); border: none; outline: none; font-family: var(--hws-pw-f-body); font-size: var(--hws-pw-body-m); min-width: 0; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__newsletter-input { font-size: var(--hws-pw-body-d); padding: 16px 20px; } } .hws-password-countdown-section .hws-pw__newsletter-input::placeholder { color: var(--hws-pw-input-text); opacity: 0.5; } /* Newsletter button: border and hover border wired (previously dead controls, F1). */ .hws-password-countdown-section .hws-pw__newsletter-btn { padding: var(--hws-pw-btn-py) var(--hws-pw-btn-px); background: var(--hws-pw-btn-bg); color: var(--hws-pw-btn-text); border: 1px solid var(--hws-pw-btn-border); font-family: var(--hws-pw-f-button); font-size: var(--hws-pw-btn-m); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.15s ease; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__newsletter-btn { font-size: var(--hws-pw-btn-d); } } .hws-password-countdown-section .hws-pw__newsletter-btn:hover { background: var(--hws-pw-btn-hover-bg); color: var(--hws-pw-btn-hover-text); border-color: var(--hws-pw-btn-hover-border); } .hws-password-countdown-section .hws-pw__newsletter-btn:active { transform: scale(0.97); } .hws-password-countdown-section .hws-pw__newsletter-ok { display: none; font-family: var(--hws-pw-f-body); font-size: var(--hws-pw-body-m); color: var(--hws-pw-c-kicker); padding: 14px 0; align-items: center; justify-content: var(--hws-pw-justify); gap: 8px; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__newsletter-ok { font-size: var(--hws-pw-body-d); } } .hws-password-countdown-section .hws-pw__newsletter.is-success .hws-pw__newsletter-form { display: none; } .hws-password-countdown-section .hws-pw__newsletter.is-success .hws-pw__newsletter-ok { display: flex; } /* === Trust bar === */ .hws-password-countdown-section .hws-pw__trust { display: flex; flex-wrap: wrap; justify-content: var(--hws-pw-justify); gap: 16px 24px; margin: 0 0 20px; } .hws-password-countdown-section .hws-pw__trust-item { display: flex; align-items: center; gap: 6px; font-family: var(--hws-pw-f-body); font-size: var(--hws-pw-trust-size-m); color: var(--hws-pw-trust-color); } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__trust-item { font-size: var(--hws-pw-trust-size-d); } } .hws-password-countdown-section .hws-pw__trust-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* === Social links === Base = pill presentation (v1.3 output). icon_tile and minimal are section styles. Per-link colors override section defaults via --sl-* inline vars. */ .hws-password-countdown-section .hws-pw__social { display: flex; flex-wrap: wrap; justify-content: var(--hws-pw-justify); gap: var(--hws-pw-social-gap-m); margin: var(--hws-pw-social-mt-m) 0 var(--hws-pw-social-mb-m); } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__social { gap: var(--hws-pw-social-gap-d); margin: var(--hws-pw-social-mt-d) 0 var(--hws-pw-social-mb-d); } } .hws-password-countdown-section .hws-pw__social-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hws-pw-social-control-m); border-radius: 999px; background: var(--sl-bg, var(--hws-pw-digit-bg)); border: 1px solid var(--sl-border, var(--hws-pw-digit-border)); color: var(--sl-color, var(--hws-pw-c-body)); transition: background 0.3s ease, transform 0.2s ease, border-color 0.3s ease, color 0.3s ease; text-decoration: none; gap: calc(var(--hws-pw-social-control-m) * 0.2); box-sizing: border-box; } .hws-password-countdown-section .hws-pw__social-link:not(.hws-pw__social-link--labeled) { width: var(--hws-pw-social-control-m); height: var(--hws-pw-social-control-m); min-width: var(--hws-pw-social-control-m); padding: 0; } .hws-password-countdown-section .hws-pw__social-link--labeled { width: auto; min-width: var(--hws-pw-social-control-m); padding: calc(var(--hws-pw-social-control-m) * 0.22) calc(var(--hws-pw-social-control-m) * 0.4); } .hws-password-countdown-section .hws-pw__social-label { display: block; font-family: var(--hws-pw-f-social); font-size: var(--hws-pw-social-font-m); color: inherit; white-space: nowrap; line-height: 1.15; } .hws-password-countdown-section .hws-pw__social-link:hover { background: var(--sl-hover-bg, var(--hws-pw-btn-bg)); color: var(--sl-hover-text, var(--hws-pw-btn-text)); border-color: var(--sl-hover-bg, var(--hws-pw-btn-bg)); transform: translateY(-2px); } .hws-password-countdown-section .hws-pw__social-link:focus-visible { outline: 2px solid var(--hws-pw-btn-bg); outline-offset: 2px; } .hws-password-countdown-section .hws-pw__social-link svg { width: calc(var(--hws-pw-social-control-m) * 0.45); height: calc(var(--hws-pw-social-control-m) * 0.45); fill: currentColor; flex-shrink: 0; } .hws-password-countdown-section .hws-pw__social-custom { display: inline-flex; } .hws-password-countdown-section .hws-pw__social-custom svg { width: calc(var(--hws-pw-social-control-m) * 0.45); height: calc(var(--hws-pw-social-control-m) * 0.45); fill: currentColor; } .hws-password-countdown-section .hws-pw__social-img { width: calc(var(--hws-pw-social-control-m) * 0.55); height: calc(var(--hws-pw-social-control-m) * 0.55); object-fit: contain; flex-shrink: 0; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__social-link { min-height: var(--hws-pw-social-control-d); gap: calc(var(--hws-pw-social-control-d) * 0.2); } .hws-password-countdown-section .hws-pw__social-link:not(.hws-pw__social-link--labeled) { width: var(--hws-pw-social-control-d); height: var(--hws-pw-social-control-d); min-width: var(--hws-pw-social-control-d); } .hws-password-countdown-section .hws-pw__social-link--labeled { min-width: var(--hws-pw-social-control-d); padding: calc(var(--hws-pw-social-control-d) * 0.22) calc(var(--hws-pw-social-control-d) * 0.4); } .hws-password-countdown-section .hws-pw__social-label { font-size: var(--hws-pw-social-font-d); } .hws-password-countdown-section .hws-pw__social-link svg, .hws-password-countdown-section .hws-pw__social-custom svg { width: calc(var(--hws-pw-social-control-d) * 0.45); height: calc(var(--hws-pw-social-control-d) * 0.45); } .hws-password-countdown-section .hws-pw__social-img { width: calc(var(--hws-pw-social-control-d) * 0.55); height: calc(var(--hws-pw-social-control-d) * 0.55); } } /* Icon tile: footer-inspired soft square control. */ .hws-password-countdown-section .hws-pw__social--icon_tile .hws-pw__social-link { border-radius: 12px; } /* Minimal: no persistent background or border; color-only hover. */ .hws-password-countdown-section .hws-pw__social--minimal .hws-pw__social-link { background: transparent; border-color: transparent; } .hws-password-countdown-section .hws-pw__social--minimal .hws-pw__social-link:hover { background: transparent; border-color: transparent; color: var(--sl-hover-text, var(--hws-pw-btn-bg)); transform: translateY(-2px); } /* === Login link (semantic button, visuals preserved from v1.3 anchor) === */ .hws-password-countdown-section .hws-pw__login-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-family: var(--hws-pw-f-body); font-size: var(--hws-pw-trust-size-m); color: var(--hws-pw-c-body); opacity: 0.6; text-decoration: none; cursor: pointer; transition: opacity 0.3s ease; margin-top: 8px; } .hws-password-countdown-section .hws-pw__login-link:hover { opacity: 1; } .hws-password-countdown-section .hws-pw__login-link:focus-visible { opacity: 1; outline: 2px solid var(--hws-pw-btn-bg); outline-offset: 2px; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__login-link { font-size: var(--hws-pw-trust-size-d); } } .hws-password-countdown-section .hws-pw__login-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; } /* === Share button === */ .hws-password-countdown-section .hws-pw__share-wrap { text-align: var(--hws-pw-align); } .hws-password-countdown-section .hws-pw__share { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 8px 16px; background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; color: var(--hws-pw-c-body); font-family: var(--hws-pw-f-body); font-size: var(--hws-pw-trust-size-m); text-decoration: none; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; opacity: 0.7; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__share { font-size: var(--hws-pw-trust-size-d); } } .hws-password-countdown-section .hws-pw__share:hover { background: rgba(255,255,255,0.12); border-color: rgba(201,168,76,0.3); color: #c9a84c; opacity: 1; } .hws-password-countdown-section .hws-pw__share:focus-visible { opacity: 1; outline: 2px solid var(--hws-pw-btn-bg); outline-offset: 2px; } .hws-password-countdown-section .hws-pw__share svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hws-password-countdown-section .hws-pw__share-ok { display: none; } .hws-password-countdown-section .hws-pw__share.is-copied .hws-pw__share-label { display: none; } .hws-password-countdown-section .hws-pw__share.is-copied .hws-pw__share-ok { display: inline; color: #c9a84c; } /* === Corner password button (semantic button) === Integrated corner presentation in glass/solid; floating pill in none mode. */ .hws-password-countdown-section .hws-pw__corner-pill { position: absolute; z-index: 20; display: inline-flex; align-items: center; gap: 6px; padding: var(--hws-pw-cp-pad-m); background: var(--hws-pw-cp-bg); backdrop-filter: blur(var(--hws-pw-cp-blur)); -webkit-backdrop-filter: blur(var(--hws-pw-cp-blur)); border: 1px solid var(--hws-pw-cp-border); color: var(--hws-pw-cp-color); font-family: var(--hws-pw-cp-f); font-size: var(--hws-pw-cp-size-m); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__corner-pill { font-size: var(--hws-pw-cp-size-d); padding: var(--hws-pw-cp-pad-d); gap: 8px; } } .hws-password-countdown-section .hws-pw__corner-pill--top-right { top: -1px; right: -1px; border-top-right-radius: var(--hws-pw-glass-radius); border-bottom-left-radius: var(--hws-pw-cp-inner-radius); border-top-left-radius: 0; border-bottom-right-radius: 0; } .hws-password-countdown-section .hws-pw__corner-pill--top-left { top: -1px; left: -1px; border-top-left-radius: var(--hws-pw-glass-radius); border-bottom-right-radius: var(--hws-pw-cp-inner-radius); border-top-right-radius: 0; border-bottom-left-radius: 0; } .hws-password-countdown-section .hws-pw__corner-pill--bottom-right { bottom: -1px; right: -1px; border-bottom-right-radius: var(--hws-pw-glass-radius); border-top-left-radius: var(--hws-pw-cp-inner-radius); border-bottom-left-radius: 0; border-top-right-radius: 0; } .hws-password-countdown-section .hws-pw__corner-pill--bottom-left { bottom: -1px; left: -1px; border-bottom-left-radius: var(--hws-pw-glass-radius); border-top-right-radius: var(--hws-pw-cp-inner-radius); border-bottom-right-radius: 0; border-top-left-radius: 0; } .hws-password-countdown-section .hws-pw__corner-pill:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #ffffff; } .hws-password-countdown-section .hws-pw__corner-pill:focus-visible { outline: 2px solid var(--hws-pw-btn-bg); outline-offset: 2px; } .hws-password-countdown-section .hws-pw__corner-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; } .hws-password-countdown-section .hws-pw__corner-pill svg circle { fill: currentColor; } .hws-password-countdown-section .hws-pw__panel--none .hws-pw__corner-pill { border-radius: 999px; } .hws-password-countdown-section .hws-pw__panel--none .hws-pw__corner-pill--top-right { top: 0; right: 0; } .hws-password-countdown-section .hws-pw__panel--none .hws-pw__corner-pill--top-left { top: 0; left: 0; } .hws-password-countdown-section .hws-pw__panel--none .hws-pw__corner-pill--bottom-right { bottom: 0; right: 0; } .hws-password-countdown-section .hws-pw__panel--none .hws-pw__corner-pill--bottom-left { bottom: 0; left: 0; } /* === Reduced motion === */ @media (prefers-reduced-motion: reduce) { .hws-password-countdown-section .hws-pw__panel--glow { animation: none; } .hws-password-countdown-section .hws-pw--clockfx .tick-flip { animation: none; } .hws-password-countdown-section .hws-pw__social-link:hover, .hws-password-countdown-section .hws-pw__social--minimal .hws-pw__social-link:hover { transform: none; } .hws-password-countdown-section .hws-pw__newsletter-btn:active { transform: none; } .hws-password-countdown-section .hws-pw__ring-fill { transition-duration: 0.1s; } } /* === v3.0: Ordered content blocks (kicker / heading / subheading) === */ .hws-password-countdown-section .hws-pw__cb { margin: var(--cb-nt-m) 0 var(--cb-nb-m); font-size: var(--cb-size-m); color: var(--cb-color); max-width: var(--cb-w-m, none); text-align: var(--cb-al, inherit); } .hws-password-countdown-section .hws-pw__cb { margin-left: var(--cb-ml, auto); margin-right: var(--cb-mr, auto); } .hws-password-countdown-section .hws-pw__cb--kicker { font-family: var(--hws-pw-f-kicker); font-weight: var(--cb-weight, 600); letter-spacing: 0.06em; margin-top: calc(var(--cb-nt-m) + 0px); margin-bottom: calc(12px + var(--cb-nb-m)); } .hws-password-countdown-section .hws-pw__cb--heading { font-family: var(--hws-pw-f-heading); font-weight: var(--cb-weight, 700); line-height: var(--cb-lh, 1.15); margin-top: var(--cb-nt-m); margin-bottom: calc(16px + var(--cb-nb-m)); } .hws-password-countdown-section .hws-pw__cb--grad { background: linear-gradient(135deg, var(--cb-g1), var(--cb-g2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hws-password-countdown-section .hws-pw__cb--subheading { font-family: var(--hws-pw-f-subheading); line-height: 1.6; margin-top: var(--cb-nt-m); margin-bottom: calc(24px + var(--cb-nb-m)); } .hws-password-countdown-section .hws-pw__cb--subheading p { font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; margin: 0; } .hws-password-countdown-section .hws-pw__cb--subheading p + p { margin-top: 1em; } .hws-password-countdown-section .hws-pw__cb--no-m { display: none !important; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__cb { margin-top: var(--cb-nt-d); margin-bottom: var(--cb-nb-d); font-size: var(--cb-size-d); max-width: var(--cb-w-d, none); } .hws-password-countdown-section .hws-pw__cb--kicker { margin-bottom: calc(16px + var(--cb-nb-d)); } .hws-password-countdown-section .hws-pw__cb--heading { margin-bottom: calc(20px + var(--cb-nb-d)); } .hws-password-countdown-section .hws-pw__cb--subheading { margin-bottom: calc(32px + var(--cb-nb-d)); } .hws-password-countdown-section .hws-pw__cb--no-m { display: block !important; } .hws-password-countdown-section .hws-pw__cb--no-d { display: none !important; } } /* === v3.0: Button run + ported hero button visibility === */ .hws-password-countdown-section .hws-pw__btn-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--hws-pw-justify); gap: 14px; margin: 4px 0 24px; } .hws-password-countdown-section .hws-pw__b-block--no-m { display: none !important; } @media (min-width: 750px) { .hws-password-countdown-section .hws-pw__b-block--no-m { display: block !important; } .hws-password-countdown-section .hws-pw__b-block--no-d { display: none !important; } } /* === v3.0: Hero button system (ported, hwspwb- namespace) === */ .hws-password-countdown-section { --hwspwb-btn-mx: 0px; --hwspwb-corner-pad: 0px; --hwspwb-btns-gap: 14px; --hwspwb-btns-align: var(--hws-pw-justify); } .hws-password-countdown-section /* ---------- buttons ---------- */ /* ---------- button system: explicit layer architecture ---------- BTN-1..BTN-7 repair. Every visual subsystem owns a dedicated element: hit .hws-pw__b-btn layout, .hws-password-countdown-section typography, .hws-password-countdown-section cursor, .hws-password-countdown-section focus, .hws-password-countdown-section whole-button opacity. Paints nothing. motion .hwspwb-btn-motion the ONLY hover-motion transform owner. surface .hwspwb-btn-surface background, .hws-password-countdown-section backdrop filter, .hws-password-countdown-section shadow, .hws-password-countdown-section hover surface state, .hws-password-countdown-section hover surface opacity (BTN-4). frame .hwspwb-btn-frame border and preset frames (corner brackets, .hws-password-countdown-section glass ring). shine .hwspwb-btn-hshine / .hwspwb-btn-cshine / .hwspwb-btn-sheen particles .hwspwb-p-wrap / .hwspwb-g-wrap content .hws-pw__b-btn-content label + arrows, .hws-password-countdown-section above everything. No pseudo-element is shared infrastructure. Base styles are pure surface and frame recipes and never introduce motion. Hover states are scoped to interactive buttons only (BTN-5). */ .hws-pw__b-btn-run { display: flex; justify-content: var(--hwspwb-btns-align, center); gap: var(--hwspwb-btns-gap, 12px); flex-wrap: wrap; align-items: center; } .hws-password-countdown-section .hws-pw__b-btn-wrap { display: flex; } .hws-password-countdown-section .hws-pw__b-btn { --hwspwb-btn-eff-radius: var(--hwspwb-btn-radius, 0px); position: relative; display: inline-flex; cursor: pointer; text-decoration: none; margin: var(--hwspwb-btn-margin, 0); color: var(--hwspwb-btn-text); font-family: var(--hwspwb-btn-font); font-weight: var(--hwspwb-btn-weight, 600); font-size: var(--hwspwb-btn-size-m); letter-spacing: var(--hwspwb-btn-lspace); line-height: var(--hwspwb-btn-lheight); text-transform: var(--hwspwb-btn-transform); } .hws-password-countdown-section .hwspwb-btn-motion { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-width: var(--hwspwb-btn-minw-m, auto); min-height: 44px; padding: var(--hwspwb-btn-pad-m); border-radius: var(--hwspwb-btn-eff-radius); /* BTN-3: the motion wrapper is the single transform owner for the hover-motion axis. Every axis writes its own variable; nothing else in the button system may set transform on this element. */ transform: translate(var(--hwspwb-btn-mx, 0px), var(--hwspwb-btn-my, 0px)) scale(var(--hwspwb-btn-ms, 1)) rotate(var(--hwspwb-btn-mr, 0deg)); } @media screen and (min-width: 750px) { .hws-password-countdown-section .hws-pw__b-btn { font-size: var(--hwspwb-btn-size-d); } .hws-password-countdown-section .hwspwb-btn-motion { min-width: var(--hwspwb-btn-minw-d, auto); padding: var(--hwspwb-btn-pad-d); } } .hws-password-countdown-section .hwspwb-btn-surface { position: absolute; inset: 0; z-index: 0; border-radius: var(--hwspwb-btn-eff-radius); background-color: var(--hwspwb-btn-bg); pointer-events: none; } .hws-password-countdown-section .hwspwb-btn-frame { position: absolute; inset: 0; z-index: 1; box-sizing: border-box; border-radius: var(--hwspwb-btn-eff-radius); border: var(--hwspwb-btn-border); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .hws-password-countdown-section .hws-pw__b-btn { transition: color var(--hwspwb-btn-h-dur) var(--hwspwb-btn-h-ease); } .hws-password-countdown-section .hwspwb-btn-motion { transition: transform var(--hwspwb-btn-h-dur) var(--hwspwb-btn-h-ease); } .hws-password-countdown-section .hwspwb-btn-surface { transition: background-color var(--hwspwb-btn-h-dur) var(--hwspwb-btn-h-ease), opacity var(--hwspwb-btn-h-dur) var(--hwspwb-btn-h-ease), filter var(--hwspwb-btn-h-dur) var(--hwspwb-btn-h-ease), box-shadow var(--hwspwb-btn-h-dur) var(--hwspwb-btn-h-ease); } .hws-password-countdown-section .hwspwb-btn-frame { transition: border-color var(--hwspwb-btn-h-dur) var(--hwspwb-btn-h-ease); } } .hws-password-countdown-section /* Interactive-only hover states (BTN-5): a disabled no-link button never responds. The hover surface opacity applies to the surface layer only (BTN-4); label, .hws-password-countdown-section icon, .hws-password-countdown-section frame, .hws-password-countdown-section and focus appearance stay fully opaque. */ .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):hover, .hws-password-countdown-section .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):focus-visible { color: var(--hwspwb-btn-h-text); } .hws-password-countdown-section .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { background-color: var(--hwspwb-btn-h-bg); opacity: var(--hwspwb-btn-h-opacity, 1); } .hws-password-countdown-section .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-frame, .hws-password-countdown-section .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-frame { border-color: var(--hwspwb-btn-h-border-color); } .hws-password-countdown-section .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-motion, .hws-password-countdown-section .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-motion { --hwspwb-btn-ms: var(--hwspwb-btn-h-scale, 1); } .hws-password-countdown-section /* Explicit whole-control fade, .hws-password-countdown-section opt-in only (BTN-4). */ .hws-pw__b-btn--hfade-whole:not(.hws-pw__b-btn--disabled):hover, .hws-password-countdown-section .hws-pw__b-btn--hfade-whole:not(.hws-pw__b-btn--disabled):focus-visible { opacity: calc(var(--hwspwb-b-op, 1) * var(--hwspwb-btn-h-opacity, 1)); } .hws-password-countdown-section .hws-pw__b-btn--hfade-whole:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn--hfade-whole:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { opacity: 1; } .hws-password-countdown-section .hws-pw__b-btn:focus-visible { outline: 2px solid var(--hwspwb-focus, #ffffff); outline-offset: 3px; } .hws-password-countdown-section .hws-pw__b-btn--disabled { cursor: default; } .hws-password-countdown-section .hws-pw__b-btn-label { position: relative; z-index: 3; display: inline-block; } .hws-password-countdown-section .hws-pw__b-btn-arrow { position: relative; z-index: 3; width: var(--hwspwb-btn-arrow-size, 14px); height: var(--hwspwb-btn-arrow-size, 14px); flex: 0 0 auto; } .hws-password-countdown-section .hws-pw__b-btn-arrow:first-child { margin-right: var(--hwspwb-btn-arrow-gap, 8px); } .hws-password-countdown-section .hws-pw__b-btn-arrow:last-child { margin-left: var(--hwspwb-btn-arrow-gap, 8px); } .hws-password-countdown-section /* Mobile stacking and full width, .hws-password-countdown-section driven by section settings via root class. */ @media screen and (max-width: 749px) { .lc-vhero--btns-stack-m .hws-pw__b-btn-run { flex-direction: column; align-items: stretch; } .lc-vhero--btns-stack-m .hws-pw__b-btn-wrap { flex-direction: column; align-items: stretch; } .lc-vhero--btns-full-m .hws-pw__b-btn-run, .lc-vhero--btns-full-m .hws-pw__b-btn-wrap { width: 100%; } .lc-vhero--btns-full-m .hws-pw__b-btn { width: 100%; } } .hws-password-countdown-section /* Shine elements: real dedicated layers (BTN-1, .hws-password-countdown-section BTN-2), .hws-password-countdown-section each self-clipped to the effective radius so no ancestor overflow rule can fight the particle systems. Purely decorative, .hws-password-countdown-section so they do not exist for reduced motion. */ .hwspwb-btn-hshine, .hws-password-countdown-section .hwspwb-btn-cshine, .hws-password-countdown-section .hwspwb-btn-sheen { position: absolute; z-index: 2; pointer-events: none; } .hws-password-countdown-section .hwspwb-btn-hshine, .hws-password-countdown-section .hwspwb-btn-cshine { clip-path: inset(0 round var(--hwspwb-btn-eff-radius)); } @media (prefers-reduced-motion: reduce) { .hws-password-countdown-section .hwspwb-btn-hshine, .hws-password-countdown-section .hwspwb-btn-cshine, .hws-password-countdown-section .hwspwb-btn-sheen { display: none; } } .hws-password-countdown-section .hws-pw__b-btn--disabled .hwspwb-btn-hshine, .hws-password-countdown-section .hws-pw__b-btn--disabled .hwspwb-btn-cshine, .hws-password-countdown-section .hws-pw__b-btn--disabled .hwspwb-btn-sheen, .hws-password-countdown-section .hws-pw__b-btn--disabled .hwspwb-p-wrap, .hws-password-countdown-section .hws-pw__b-btn--disabled .hwspwb-g-wrap { display: none; } @media (prefers-reduced-motion: no-preference) { .hws-password-countdown-section .hwspwb-btn-hshine { top: -50px; bottom: -50px; width: var(--hwspwb-btn-hs-width, 25px); background: #ffffff; opacity: var(--hwspwb-btn-hs-opacity, 0.2); transform: rotate(35deg); left: -75px; transition: left var(--hwspwb-btn-hs-dur, 1600ms) cubic-bezier(0.19, 1, 0.22, 1); } .hws-password-countdown-section .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-hshine { left: 120%; } .hws-password-countdown-section .hws-pw__b-btn[data-hs-dir="rtl"] .hwspwb-btn-hshine { left: 120%; } .hws-password-countdown-section .hws-pw__b-btn[data-hs-dir="rtl"]:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-hshine { left: -75px; } .hws-password-countdown-section .hwspwb-btn-cshine { top: -50%; left: -100%; width: var(--hwspwb-btn-cs-band, 200px); height: 200%; background: linear-gradient(var(--hwspwb-btn-cs-angle, 120deg), transparent, var(--hwspwb-btn-cs-color), transparent); animation: hwspwb-cshine var(--hwspwb-btn-cs-total, 4s) ease-in-out infinite; } .hws-password-countdown-section .hws-pw__b-btn[data-cs-dir="rtl"] .hwspwb-btn-cshine { animation-name: hwspwb-cshine-rtl; } } .hws-password-countdown-section /* Sheen surface animation: dedicated element sweeping the whole surface, .hws-password-countdown-section replacing the former label pseudo-element. */ @media (prefers-reduced-motion: no-preference) { .hwspwb-btn-sheen { inset: 0; overflow: hidden; clip-path: inset(0 round var(--hwspwb-btn-eff-radius)); } .hwspwb-btn-sheen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.4) 50%, rgba(255,255,255,0)); transform: translateX(-150%); transition: transform 0.6s; } .hws-pw__b-btn:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-sheen::before { transform: translateX(150%); } @keyframes hwspwb-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: 2deg; } 75% { rotate: -2deg; } } .hws-pw__b-btn--hm-wiggle:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-motion { animation: hwspwb-wiggle calc(var(--hwspwb-b-hm-dur, 300ms) * 1.5) infinite ease-in-out; } /* Gravity particles (thebabydino donor, adapted without Houdini): the wrapper sits outside the surface clipping, so travel is visible outside the pill; the shine layers stay clipped by their own clip-path. */ .hwspwb-g-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .hwspwb-g-particle { display: grid; position: absolute; left: var(--x); top: var(--y); rotate: var(--a); pointer-events: none; } .hwspwb-g-particle::before, .hwspwb-g-particle::after { grid-area: 1 / 1; width: 0.75em; aspect-ratio: 1; } .hwspwb-g-particle::before { content: ""; border-radius: 15% 50% 50% 50%; transform-origin: 0 0; rotate: -45deg; translate: calc(var(--d, 5em) * var(--hwspwb-b-pa-spread, 1)); opacity: 0; background: radial-gradient(at 85% 85%, var(--hwspwb-b-pa-c2, #ffffff), var(--hwspwb-b-pa-c1, #c5973e) 75%); scale: calc(var(--f, 1) * var(--hwspwb-b-pa-size, 1)); } .hwspwb-g-particle::after { content: "\2726"; translate: -50% -50%; scale: 0; text-align: center; color: var(--hwspwb-b-pa-c2, #ffffff); filter: blur(0.5px); } .hws-pw__b-btn--pa-gravity:not(.hws-pw__b-btn--disabled):hover .hwspwb-g-particle::before, .hws-pw__b-btn--pa-gravity:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-g-particle::before { animation: hwspwb-grav-in var(--hwspwb-b-pa-dur, 3s) calc(var(--t, 0) * var(--hwspwb-b-pa-dur, 3s)) linear infinite; } .hws-pw__b-btn--pa-gravity:not(.hws-pw__b-btn--disabled):hover .hwspwb-g-particle::after, .hws-pw__b-btn--pa-gravity:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-g-particle::after { animation: hwspwb-grav-spark var(--hwspwb-b-pa-dur, 3s) calc(var(--t, 0) * var(--hwspwb-b-pa-dur, 3s)) linear infinite; } @keyframes hwspwb-grav-in { 0%, 33.3% { translate: calc(var(--d, 5em) * var(--hwspwb-b-pa-spread, 1)); opacity: 0; } 45% { opacity: 1; } 63% { opacity: 1; } 66.6%, 100% { translate: 0 0; opacity: 0; } } @keyframes hwspwb-grav-spark { 0%, 66% { scale: 0; } 83% { scale: var(--f, 1); } 100% { scale: 0; } } } .hws-password-countdown-section /* ---------- button base styles (Axis 1): surface and frame recipes ---------- BTN-7 repair: every base style is a pure visual recipe for the dedicated surface and frame layers. No base style introduces idle or hover motion; motion belongs exclusively to the hover-motion axis. The former footer idle squish and glass-pill hover scale were removed for that reason. */ /* Footer gradient pill (lc-advanced-footer-sc donor). */ .hws-pw__b-btn--style-footer { --hwspwb-btn-eff-radius: 200px; } .hws-password-countdown-section .hws-pw__b-btn--style-footer .hwspwb-btn-surface { background: var(--hwspwb-b-grad, linear-gradient(135deg, var(--hwspwb-btn-bg-solid, #24e0e3) 0%, var(--hwspwb-btn-bg2, #7b2ff7) 100%)); box-shadow: 0 14px 34px -8px var(--hwspwb-btn-bg2, #7b2ff7); } .hws-password-countdown-section .hws-pw__b-btn--style-footer .hwspwb-btn-frame { border: none; } .hws-password-countdown-section .hws-pw__b-btn--style-footer:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn--style-footer:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { background: var(--hwspwb-b-grad, linear-gradient(135deg, var(--hwspwb-btn-bg-solid, #24e0e3) 0%, var(--hwspwb-btn-bg2, #7b2ff7) 100%)); box-shadow: 0 8px 22px -6px var(--hwspwb-btn-bg2, #7b2ff7); filter: brightness(1.06); } .hws-password-countdown-section .hws-pw__b-btn--style-footer:not(.hws-pw__b-btn--disabled):active .hwspwb-btn-surface { filter: brightness(0.95); } .hws-password-countdown-section /* Expanding corners (buttons.cool LENVMBj by LukyVj, .hws-password-countdown-section adapted): the bracket frame lives on the dedicated frame layer, .hws-password-countdown-section never a shared pseudo-element. */ .hws-pw__b-btn--style-corners { --hwspwb-corner-pad: 2px; } .hws-password-countdown-section .hws-pw__b-btn--style-corners .hwspwb-btn-surface { background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2)); transition: background 0.3s ease; } .hws-password-countdown-section .hws-pw__b-btn--style-corners .hwspwb-btn-frame { inset: calc(-1 * var(--hwspwb-corner-pad)); padding: var(--hwspwb-corner-pad); border: 2px solid var(--hwspwb-btn-bg-solid, #ffffff); background: transparent content-box; -webkit-mask: conic-gradient(#000 0 0) content-box, conic-gradient(at 10px 10px, #0000 75%, #000 0) 0 0 / calc(100% - 10px) calc(100% - 10px); mask: conic-gradient(#000 0 0) content-box, conic-gradient(at 10px 10px, #0000 75%, #000 0) 0 0 / calc(100% - 10px) calc(100% - 10px); -webkit-mask-composite: source-out; mask-composite: subtract; transition: inset 0.3s ease, padding 0.3s ease, border-color 0.3s ease; } .hws-password-countdown-section .hws-pw__b-btn--style-corners:not(.hws-pw__b-btn--disabled):hover, .hws-password-countdown-section .hws-pw__b-btn--style-corners:not(.hws-pw__b-btn--disabled):focus-visible { --hwspwb-corner-pad: 8px; } .hws-password-countdown-section /* Glassmorphic pill (buttons.cool ByjmBWp by Momciloo, .hws-password-countdown-section adapted): frosted surface plus a conic edge ring on the frame layer via mask-exclude. */ .hws-pw__b-btn--style-glass-pill { --hwspwb-btn-eff-radius: 999px; } .hws-password-countdown-section .hws-pw__b-btn--style-glass-pill .hwspwb-btn-surface { background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), inset 0 0 0.1em 0.25em rgba(255, 255, 255, 0.2); transition: box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), backdrop-filter 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .hws-password-countdown-section .hws-pw__b-btn--style-glass-pill .hwspwb-btn-frame { inset: calc(-0.5 * clamp(1px, 0.0625em, 4px)); padding: clamp(1px, 0.0625em, 4px); border: none; background: conic-gradient(from -75deg at 50% 50%, rgba(0, 0, 0, 0.5), #0000 5% 40%, rgba(0, 0, 0, 0.5) 50%, #0000 60% 95%, rgba(0, 0, 0, 0.5)), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)); -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); -webkit-mask-clip: content-box, border-box; mask-clip: content-box, border-box; -webkit-mask-composite: xor; mask-composite: exclude; } .hws-password-countdown-section .hws-pw__b-btn--style-glass-pill:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn--style-glass-pill:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { -webkit-backdrop-filter: blur(0.5px); backdrop-filter: blur(0.5px); box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), inset 0 0 0.05em 0.1em rgba(255, 255, 255, 0.5); } .hws-password-countdown-section /* Liquid glass (iOS): translucent panel, .hws-password-countdown-section heavy backdrop blur with boosted saturation, .hws-password-countdown-section hairline light border, .hws-password-countdown-section inner top gloss. */ .hws-pw__b-btn--style-liquid-glass .hwspwb-btn-surface { background: var(--hwspwb-btn-bg, rgba(255, 255, 255, 0.12)); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px -10px rgba(0, 0, 0, 0.45); } .hws-password-countdown-section .hws-pw__b-btn--style-liquid-glass .hwspwb-btn-frame { border: 1px solid rgba(255, 255, 255, 0.35); } .hws-password-countdown-section .hws-pw__b-btn--style-liquid-glass:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn--style-liquid-glass:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { background: var(--hwspwb-btn-h-bg, var(--hwspwb-btn-bg, rgba(255, 255, 255, 0.18))); } .hws-password-countdown-section .hws-pw__b-btn--style-liquid-glass:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-frame, .hws-password-countdown-section .hws-pw__b-btn--style-liquid-glass:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-frame { border-color: rgba(255, 255, 255, 0.5); } .hws-password-countdown-section /* Flat glass: simple frosted panel. Blur, .hws-password-countdown-section tint, .hws-password-countdown-section hairline border. */ .hws-pw__b-btn--style-flat-glass .hwspwb-btn-surface { background: var(--hwspwb-btn-bg, rgba(255, 255, 255, 0.1)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; } .hws-password-countdown-section .hws-pw__b-btn--style-flat-glass .hwspwb-btn-frame { border: 1px solid rgba(255, 255, 255, 0.22); } .hws-password-countdown-section .hws-pw__b-btn--style-flat-glass:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn--style-flat-glass:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { background: var(--hwspwb-btn-h-bg, var(--hwspwb-btn-bg, rgba(255, 255, 255, 0.16))); } .hws-password-countdown-section /* ---------------- button axes (nuclear pass) ---------------- Five independent axes: base style, .hws-password-countdown-section hover motion, .hws-password-countdown-section surface animation, .hws-password-countdown-section particle animation, .hws-password-countdown-section arrow animation. Each axis owns its own layer or transform, .hws-password-countdown-section so systems never fight for the same pseudo-element. The content wrapper keeps the label and arrows above every decorative layer. */ .hws-pw__b-btn { opacity: var(--hwspwb-b-op, 1); } .hws-password-countdown-section .hws-pw__b-btn-content { position: relative; z-index: 3; display: inline-flex; align-items: center; } .hws-password-countdown-section /* No-link buttons keep the full intended appearance; opacity only drops when the merchant lowers the dedicated control. */ .hws-pw__b-btn--disabled { opacity: calc(var(--hwspwb-b-op, 1) * var(--hwspwb-b-dis-op, 1)); } .hws-password-countdown-section /* Axis 2: hover motion. One transform owner per mode. */ @media (prefers-reduced-motion: no-preference) { .hws-pw__b-btn--hm-lift .hwspwb-btn-motion, .hws-pw__b-btn--hm-scale .hwspwb-btn-motion, .hws-pw__b-btn--hm-press .hwspwb-btn-motion, .hws-pw__b-btn--hm-tilt .hwspwb-btn-motion { transition: transform var(--hwspwb-b-hm-dur, 200ms) var(--hwspwb-b-hm-ease, ease); } .hws-pw__b-btn--hm-lift:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-motion, .hws-pw__b-btn--hm-lift:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-motion { --hwspwb-btn-my: calc(-1px * var(--hwspwb-b-hm-amount, 6)); } .hws-pw__b-btn--hm-scale:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-motion, .hws-pw__b-btn--hm-scale:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-motion { --hwspwb-btn-ms: calc(var(--hwspwb-btn-h-scale, 1) * (1 + var(--hwspwb-b-hm-amount, 6) / 100)); } .hws-pw__b-btn--hm-press:not(.hws-pw__b-btn--disabled):active .hwspwb-btn-motion { --hwspwb-btn-my: 2px; --hwspwb-btn-ms: 0.98; } .hws-pw__b-btn--hm-press:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-motion, .hws-pw__b-btn--hm-press:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-motion { --hwspwb-btn-my: -1px; } .hws-pw__b-btn--hm-tilt:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-motion, .hws-pw__b-btn--hm-tilt:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-motion { --hwspwb-btn-mr: calc(0.4deg * var(--hwspwb-b-hm-amount, 6)); } } .hws-password-countdown-section /* Axis 3: surface animations that are not the shine systems. */ @media (prefers-reduced-motion: no-preference) { .hws-pw__b-btn--sa-gradshift .hwspwb-btn-surface { background-size: 220% 220%; animation: hwspwb-b-gradshift var(--hwspwb-b-gs-speed, 6s) ease-in-out infinite; } @keyframes hwspwb-b-gradshift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hws-pw__b-btn--sa-glowpulse .hwspwb-btn-surface { animation: hwspwb-b-glowpulse var(--hwspwb-b-gp-speed, 3s) ease-in-out infinite; } @keyframes hwspwb-b-glowpulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 22px 2px var(--hwspwb-b-gp-color, #c5973e); } } } .hws-password-countdown-section .hws-pw__b-btn-border-fx { position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 1; background: conic-gradient(from 0deg, transparent 0 78%, var(--hwspwb-b-bs-color, #c5973e) 88%, transparent 98%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } @media (prefers-reduced-motion: no-preference) { .hws-password-countdown-section .hws-pw__b-btn--sa-bordersweep .hws-pw__b-btn-border-fx { animation: hwspwb-b-bsweep var(--hwspwb-b-bs-speed, 4s) linear infinite; } @keyframes hwspwb-b-bsweep { to { transform: rotate(360deg); } } } @media (prefers-reduced-motion: reduce) { .hws-password-countdown-section .hws-pw__b-btn-border-fx { background: conic-gradient(from 0deg, var(--hwspwb-b-bs-color, #c5973e), var(--hwspwb-b-bs-color, #c5973e)); opacity: 0.5; } } .hws-password-countdown-section .hwspwb-p-particle { position: absolute; top: 50%; left: 50%; width: calc(0.45em * var(--hwspwb-b-pa-size, 1)); height: calc(0.45em * var(--hwspwb-b-pa-size, 1)); opacity: 0; pointer-events: none; transform: rotate(var(--a, 0deg)); } .hws-password-countdown-section .hws-pw__b-btn--pa-ember .hwspwb-p-particle { border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--hwspwb-b-pa-c2, #ffffff), var(--hwspwb-b-pa-c1, #c5973e) 65%); box-shadow: 0 0 6px var(--hwspwb-b-pa-c1, #c5973e); } .hws-password-countdown-section .hws-pw__b-btn--pa-pixel .hwspwb-p-particle { border-radius: 0; background: var(--hwspwb-b-pa-c1, #c5973e); } .hws-password-countdown-section .hws-pw__b-btn--pa-pixel .hwspwb-p-particle:nth-child(even) { background: var(--hwspwb-b-pa-c2, #ffffff); } @media (prefers-reduced-motion: no-preference) { .hws-password-countdown-section .hws-pw__b-btn--pa-ember:not(.hws-pw__b-btn--disabled):hover .hwspwb-p-particle, .hws-password-countdown-section .hws-pw__b-btn--pa-ember:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-p-particle, .hws-password-countdown-section .hws-pw__b-btn--pa-pixel:not(.hws-pw__b-btn--disabled):hover .hwspwb-p-particle, .hws-password-countdown-section .hws-pw__b-btn--pa-pixel:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-p-particle { animation: hwspwb-p-burst var(--hwspwb-b-pa-dur, 3s) calc(var(--t, 0) * var(--hwspwb-b-pa-dur, 3s)) ease-out infinite; } .hws-password-countdown-section .hws-pw__b-btn--pa-once:hover .hwspwb-p-particle, .hws-password-countdown-section .hws-pw__b-btn--pa-once:focus-visible .hwspwb-p-particle, .hws-password-countdown-section .hws-pw__b-btn--pa-once:hover .hwspwb-g-particle::before, .hws-password-countdown-section .hws-pw__b-btn--pa-once:focus-visible .hwspwb-g-particle::before, .hws-password-countdown-section .hws-pw__b-btn--pa-once:hover .hwspwb-g-particle::after, .hws-password-countdown-section .hws-pw__b-btn--pa-once:focus-visible .hwspwb-g-particle::after { animation-iteration-count: 1; } @keyframes hwspwb-p-burst { 0% { translate: 0 0; opacity: 0; } 12% { opacity: 1; } 70% { opacity: 0.9; } 100% { translate: 0 calc(-1 * (1.5em + var(--r, 20px) * 1) * var(--hwspwb-b-pa-spread, 1)); opacity: 0; } } } .hws-password-countdown-section /* Axis 5: arrow animation modes. */ @media (prefers-reduced-motion: no-preference) { .hws-pw__b-btn--ar-nudge .hws-pw__b-btn-arrow { transition: transform 0.25s ease; } .hws-pw__b-btn--ar-nudge:not(.hws-pw__b-btn--disabled):hover .hws-pw__b-btn-arrow, .hws-pw__b-btn--ar-nudge:focus-visible .hws-pw__b-btn-arrow { transform: translateX(4px); } .hws-pw__b-btn--ar-slide .hws-pw__b-btn-arrow { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .hws-pw__b-btn--ar-slide:not(.hws-pw__b-btn--disabled):hover .hws-pw__b-btn-arrow, .hws-pw__b-btn--ar-slide:focus-visible .hws-pw__b-btn-arrow { transform: translateX(9px); } .hws-pw__b-btn--ar-bounce:not(.hws-pw__b-btn--disabled):hover .hws-pw__b-btn-arrow, .hws-pw__b-btn--ar-bounce:focus-visible .hws-pw__b-btn-arrow { animation: hwspwb-ar-bounce 0.6s ease infinite; } @keyframes hwspwb-ar-bounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } .hws-pw__b-btn--ar-draw .hws-pw__b-btn-arrow path { stroke-dasharray: 40; stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s ease; } .hws-pw__b-btn--ar-draw:not(.hws-pw__b-btn--disabled):hover .hws-pw__b-btn-arrow path, .hws-pw__b-btn--ar-draw:focus-visible .hws-pw__b-btn-arrow path { animation: hwspwb-ar-draw 0.6s ease forwards; } @keyframes hwspwb-ar-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } } } .hws-password-countdown-section /* ---------------- new base styles (Axis 1 additions) ---------------- */ .hws-pw__b-btn--style-outline { color: var(--hwspwb-btn-bg-solid, currentColor); } .hws-password-countdown-section .hws-pw__b-btn--style-outline .hwspwb-btn-surface { background: transparent; } .hws-password-countdown-section .hws-pw__b-btn--style-outline .hwspwb-btn-frame { border: 2px solid var(--hwspwb-btn-bg-solid, currentColor); } .hws-password-countdown-section .hws-pw__b-btn--style-outline:not(.hws-pw__b-btn--disabled):hover, .hws-password-countdown-section .hws-pw__b-btn--style-outline:not(.hws-pw__b-btn--disabled):focus-visible { color: var(--hwspwb-btn-h-text, #101418); } .hws-password-countdown-section .hws-pw__b-btn--style-outline:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn--style-outline:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { background: var(--hwspwb-btn-bg-solid, currentColor); } .hws-password-countdown-section .hws-pw__b-btn--style-soft-fill { color: var(--hwspwb-btn-bg-solid, #c5973e); } .hws-password-countdown-section .hws-pw__b-btn--style-soft-fill .hwspwb-btn-surface { background: color-mix(in srgb, var(--hwspwb-btn-bg-solid, #c5973e) 16%, transparent); } .hws-password-countdown-section .hws-pw__b-btn--style-soft-fill .hwspwb-btn-frame { border: 1px solid color-mix(in srgb, var(--hwspwb-btn-bg-solid, #c5973e) 40%, transparent); } .hws-password-countdown-section .hws-pw__b-btn--style-soft-fill:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn--style-soft-fill:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { background: color-mix(in srgb, var(--hwspwb-btn-bg-solid, #c5973e) 30%, transparent); } .hws-password-countdown-section .hws-pw__b-btn--style-gradient .hwspwb-btn-surface { background: var(--hwspwb-b-grad, linear-gradient(135deg, #c5973e, #af1212)); } .hws-password-countdown-section .hws-pw__b-btn--style-gradient .hwspwb-btn-frame { border: none; } .hws-password-countdown-section .hws-pw__b-btn--style-gradient:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn--style-gradient:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { filter: brightness(1.08); } .hws-password-countdown-section .hws-pw__b-btn--style-ghost .hwspwb-btn-surface { background: transparent; } .hws-password-countdown-section .hws-pw__b-btn--style-ghost .hwspwb-btn-frame { border: 1px solid transparent; } .hws-password-countdown-section .hws-pw__b-btn--style-ghost:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-frame, .hws-password-countdown-section .hws-pw__b-btn--style-ghost:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-frame { border-color: var(--hwspwb-btn-bg-solid, currentColor); } .hws-password-countdown-section .hws-pw__b-btn--style-ghost:not(.hws-pw__b-btn--disabled):hover .hwspwb-btn-surface, .hws-password-countdown-section .hws-pw__b-btn--style-ghost:not(.hws-pw__b-btn--disabled):focus-visible .hwspwb-btn-surface { background: color-mix(in srgb, var(--hwspwb-btn-bg-solid, #ffffff) 10%, transparent); } .hws-password-countdown-section .hws-pw__b-btn--style-minimal { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } .hws-password-countdown-section .hws-pw__b-btn--style-minimal .hwspwb-btn-surface { background: transparent; } .hws-password-countdown-section .hws-pw__b-btn--style-minimal .hwspwb-btn-frame { border: none; } .hws-password-countdown-section .hws-pw__b-btn--style-minimal .hwspwb-btn-motion { padding-left: 0; padding-right: 0; } .hws-password-countdown-section .hws-pw__b-btn--style-minimal:not(.hws-pw__b-btn--disabled):hover, .hws-password-countdown-section .hws-pw__b-btn--style-minimal:not(.hws-pw__b-btn--disabled):focus-visible { text-decoration-thickness: 2px; } @keyframes hwspwb-cshine { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } @keyframes hwspwb-cshine-rtl { 0% { left: 100%; } 50% { left: -100%; } 100% { left: -100%; } }