/* ============================================================ logo.css — BytePro.com.au animated logo Theme is controlled by [data-theme="light"|"dark"] on , matching the mechanism used in layout/header.php. ============================================================ */ .bp-logo-link { text-decoration: none; display: inline-flex; align-items: center; } .bp-logo { display: inline-flex; align-items: center; gap: 10px; line-height: 1; user-select: none; } /* ---------- Icon ---------- */ .bp-logo-icon { display: block; flex-shrink: 0; } .bp-logo-path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: bp-draw 0.6s ease-out forwards; } .bp-logo-dot { opacity: 0; animation: bp-dot-in 0.3s ease-out 0.55s forwards, bp-pulse 2s ease-in-out 1.2s infinite; transform-origin: center; } @keyframes bp-draw { to { stroke-dashoffset: 0; } } @keyframes bp-dot-in { to { opacity: 1; } } @keyframes bp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.35); } } /* ---------- Wordmark ---------- */ .bp-logo-word { font-family: 'General Sans', 'Inter', -apple-system, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.03em; white-space: nowrap; display: inline-flex; align-items: baseline; opacity: 0; transform: translateY(6px); animation: bp-word-in 0.5s ease-out 0.35s forwards; } @keyframes bp-word-in { to { opacity: 1; transform: translateY(0); } } .bp-logo-byte { color: #0A0A0F; } /* Clips the rolling "Pro" so it disappears/reappears cleanly */ .bp-logo-pro-wrap { display: inline-block; overflow: hidden; height: 1em; vertical-align: baseline; position: relative; } .bp-logo-pro { display: inline-block; background: linear-gradient(135deg, #4F6BFF, #8B5CF6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Rolls up and out, jumps below, rolls back into place — loops forever */ .bp-logo-pro-roll { animation: bp-pro-loop 4s ease-in-out infinite; } @keyframes bp-pro-loop { 0% { transform: translateY(0); } 40% { transform: translateY(-130%); } 41% { transform: translateY(130%); } 80% { transform: translateY(0); } 100% { transform: translateY(0); } } .bp-logo-tld { font-weight: 500; font-size: 13px; color: #6B7280; margin-left: 2px; } /* Dark theme overrides */ html[data-theme="dark"] .bp-logo-byte { color: #F5F5F7; } html[data-theme="dark"] .bp-logo-tld { color: #9CA3AF; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .bp-logo-path, .bp-logo-dot, .bp-logo-word, .bp-logo-pro-roll { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; transform: none !important; } }