/* TGL Goal Bar — sticky top progress bar. Percentage-only. Rendered via wp_footer + JS moves it to the top of so it sits above the theme's header without needing theme changes. */ .tgl-goal-bar { /* Sits statically at the top of (JS puts it there), scrolls away with the page. Not sticky — the theme's header is already sticky at top:0, and stacking two sticky elements with different z-indexes makes the header disappear behind the bar on scroll. Progress-bar nudges only need to catch attention above the fold anyway. */ position: relative; z-index: 100; background: #122806; color: #fff; font-family: 'Libre Franklin', system-ui, sans-serif; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); transform: translateY(-100%); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .tgl-goal-bar.is-visible { transform: translateY(0); } .tgl-goal-bar.is-dismissed { display: none; } .tgl-goal-bar__inner { max-width: 1200px; margin: 0 auto; display: grid; /* Message shrinks to content, the progress track absorbs all remaining horizontal space, and %/CTA/Close cluster to the right. Result: the bar sits flush against the message copy on every viewport instead of leaving a wide gap between them. */ grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 8px 20px; min-height: 44px; } .tgl-goal-bar__message { margin: 0; font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tgl-goal-bar__track { height: 8px; background: rgba(255, 255, 255, 0.14); border-radius: 24px; overflow: hidden; position: relative; } .tgl-goal-bar__fill { width: var(--tgl-goal-percent, 0%); height: 100%; background: linear-gradient(90deg, #CFD877 0%, #f5f0a0 100%); border-radius: 24px; transform-origin: left center; animation: tgl-goal-fill 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes tgl-goal-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .tgl-goal-bar__percent { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 0.92rem; font-weight: 700; color: #CFD877; min-width: 3ch; text-align: right; } .tgl-goal-bar__cta { display: inline-flex; align-items: center; padding: 7px 16px; background: #CFD877; color: #122806; text-decoration: none; font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; border-radius: 24px; transition: background 0.15s ease, transform 0.05s ease; white-space: nowrap; } .tgl-goal-bar__cta:hover, .tgl-goal-bar__cta:focus-visible { /* Light-Green bg base — text→LGreen would be invisible, keep dark green + add a 2px inset dark-green ring as typographic hover feedback (bg-swap forbidden per brand rule). */ color: #122806; box-shadow: inset 0 0 0 2px #122806; text-decoration: none; } .tgl-goal-bar__cta:active { transform: translateY(1px); } .tgl-goal-bar__close { background: transparent; border: 0; color: rgba(255, 255, 255, 0.75); font-size: 1.35rem; line-height: 1; padding: 6px 8px; cursor: pointer; border-radius: 24px; transition: background 0.15s ease, color 0.15s ease; } .tgl-goal-bar__close:hover, .tgl-goal-bar__close:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; } /* Milestone state — swap the fill to a warm celebratory gradient. */ .tgl-goal-bar[data-milestone="1"] .tgl-goal-bar__fill { background: linear-gradient(90deg, #f5f0a0 0%, #EDC196 100%); } .tgl-goal-bar[data-milestone="1"] .tgl-goal-bar__percent { color: #EDC196; } /* Mobile: stack into two rows so the CTA doesn't crowd the message. */ @media (max-width: 720px) { .tgl-goal-bar__inner { grid-template-columns: 1fr auto; grid-template-areas: "msg close" "track percent" "cta cta"; row-gap: 6px; padding: 8px 14px 10px; } .tgl-goal-bar__message { grid-area: msg; white-space: normal; font-size: 0.88rem; } .tgl-goal-bar__track { grid-area: track; } .tgl-goal-bar__percent { grid-area: percent; } .tgl-goal-bar__cta { grid-area: cta; justify-content: center; } .tgl-goal-bar__close { grid-area: close; align-self: start; } } @media (prefers-reduced-motion: reduce) { .tgl-goal-bar { transition: none; } .tgl-goal-bar__fill { animation: none; } }