diff --git a/public/css/main.css b/public/css/main.css index 4a86ba8..fc9ed7b 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -954,46 +954,29 @@ a.fab--secondary:visited { outline-offset: 2px; } -/* ── PDF download FAB icon ── */ -.fab-primary__ico--pdf { - mask-image: url("../assets/shared/icons/cv.svg"); - -webkit-mask-image: url("../assets/shared/icons/cv.svg"); -} - -.fab--label { - width: auto; - padding: 0.65rem 1.1rem; - gap: 0.45rem; -} - -.fab-primary__label { - font-size: 0.85rem; - font-weight: 600; - line-height: 1; - white-space: nowrap; -} - -.fab-primary__spinner { +/* ── PDF download button: loading state ── */ +.btn__spinner { display: none; - position: absolute; - width: 1.25rem; - height: 1.25rem; + width: 1rem; + height: 1rem; border: 2px solid color-mix(in hsl, var(--on-accent) 25%, transparent); border-top-color: var(--on-accent); border-radius: 50%; - animation: fab-primary-spin 0.6s linear infinite; - z-index: 3; + animation: btn-spin 0.6s linear infinite; + flex-shrink: 0; } -@keyframes fab-primary-spin { +@keyframes btn-spin { to { transform: rotate(360deg); } } -[data-resume-pdf-btn][data-loading="true"] .fab-primary__ico--pdf { +[data-resume-pdf-btn][data-loading="true"] .btn__icon { opacity: 0; + width: 0; + overflow: hidden; } -[data-resume-pdf-btn][data-loading="true"] .fab-primary__spinner { +[data-resume-pdf-btn][data-loading="true"] .btn__spinner { display: block; } diff --git a/public/resume-5.html b/public/resume-5.html index 13f914d..9868cf7 100644 --- a/public/resume-5.html +++ b/public/resume-5.html @@ -293,10 +293,10 @@