/* ============================================================================ pgt-mark — the one Persian Gulf Traffic logo, used the same way everywhere. Persian Gulf Traffic Layers, back to front: the span glass bezel: frosted, lit from the top, a faint teal aura ::before the brand ring (teal → blue) and the radar sweep riding it img the logo disc ::after a glass dome gloss over the disc States: .on-dark (or inside .dark), .is-live (kiosk: signal pulse), .is-offline (ring dims, sweep stops). Motion stops for prefers-reduced-motion. One file for every surface: the SPA (hashed by build-html.sh), the Django pages, the docs and the control hub all load /pgt-mark.css. Those last three carry ?v=N by hand: bump it in templates, docs and control/index.html when this file changes. ========================================================================= */ @property --pgt-sweep { syntax: ''; inherits: false; initial-value: 0deg; } .pgt-mark { --s: 44px; --bezel: max(2px, calc(var(--s) * 0.085)); --ring: max(1.5px, calc(var(--s) * 0.045)); --teal: #14e0c4; --teal-deep: #00a89c; --blue: #0284c7; --sky: #12a5ed; position: relative; isolation: isolate; box-sizing: border-box; flex: none; /* !important also on display: the Django topbar hides `.pg-brand span` on phones, which would otherwise take the mark with it */ display: inline-grid !important; place-items: center; vertical-align: middle; /* !important: host pages style bare spans/imgs (the main header pads every span 17px 50px); the mark keeps its own geometry wherever it lands */ width: var(--s) !important; height: var(--s) !important; min-width: var(--s); padding: 0 !important; margin: 0; line-height: 0 !important; border-radius: 50% !important; background: radial-gradient(85% 85% at 30% 14%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 55%), linear-gradient(165deg, rgba(255, 255, 255, 0.70), rgba(226, 232, 240, 0.45) 55%, rgba(148, 163, 184, 0.40)); box-shadow: 0 calc(var(--s) * 0.10) calc(var(--s) * 0.30) calc(var(--s) * -0.10) rgba(2, 32, 48, 0.38), 0 0 calc(var(--s) * 0.38) calc(var(--s) * -0.10) rgba(20, 224, 196, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(15, 23, 42, 0.20); -webkit-backdrop-filter: blur(8px) saturate(1.5); backdrop-filter: blur(8px) saturate(1.5); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), filter 0.35s ease; } /* the brand ring, with a radar sweep of light travelling round it */ .pgt-mark::before { content: ''; position: absolute; inset: var(--bezel); z-index: 0; border-radius: 50%; background: conic-gradient(from var(--pgt-sweep), rgba(255, 255, 255, 0) 0turn 0.70turn, rgba(255, 255, 255, 0.35) 0.86turn, rgba(255, 255, 255, 0.95) 0.985turn, rgba(255, 255, 255, 0) 1turn), conic-gradient(from 210deg, var(--teal), var(--sky) 30%, var(--blue) 50%, var(--teal-deep) 75%, var(--teal)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 0.6px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 0.6px)); animation: pgt-mark-sweep 7s linear infinite; } .pgt-mark > img { position: relative; z-index: 1; display: block; width: calc(var(--s) - 2 * var(--bezel) - 2 * var(--ring)) !important; height: calc(var(--s) - 2 * var(--bezel) - 2 * var(--ring)) !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; object-fit: contain; background: #fff !important; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05); } /* the glass dome over the disc */ .pgt-mark::after { content: ''; position: absolute; inset: calc(var(--bezel) + var(--ring)); z-index: 2; border-radius: 50%; pointer-events: none; background: radial-gradient(70% 45% at 38% 12%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(2, 32, 48, 0.07)); mix-blend-mode: soft-light; box-shadow: inset 0 -1px 3px rgba(2, 32, 48, 0.10); } @keyframes pgt-mark-sweep { to { --pgt-sweep: 1turn; } } /* hover: a touch of lift, the sweep quickens */ a:hover > .pgt-mark, button:hover > .pgt-mark, .pgt-mark:hover { transform: translateY(-1px) scale(1.04); } a:hover > .pgt-mark::before, button:hover > .pgt-mark::before, .pgt-mark:hover::before { animation-duration: 2.2s; } /* dark surfaces: smoked glass, a stronger aura */ .dark .pgt-mark, [data-theme="dark"] .pgt-mark, .pgt-mark.on-dark { background: radial-gradient(85% 85% at 30% 14%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 55%), linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.02)); box-shadow: 0 calc(var(--s) * 0.10) calc(var(--s) * 0.32) calc(var(--s) * -0.08) rgba(0, 0, 0, 0.65), 0 0 calc(var(--s) * 0.45) calc(var(--s) * -0.08) rgba(20, 224, 196, 0.50), inset 0 1px 1px rgba(255, 255, 255, 0.40), inset 0 -1px 2px rgba(0, 0, 0, 0.40); } /* live data (kiosk, connected): a signal pulse leaves the mark */ .pgt-mark.is-live { outline: max(1.5px, calc(var(--s) * 0.03)) solid rgba(20, 224, 196, 0); animation: pgt-mark-ping 2.6s cubic-bezier(.2, .7, .3, 1) infinite; } @keyframes pgt-mark-ping { 0% { outline-offset: 0; outline-color: rgba(20, 224, 196, 0.60); } 75%, 100% { outline-offset: calc(var(--s) * 0.34); outline-color: rgba(20, 224, 196, 0); } } /* no data: the ring dims to slate with a red cut, the sweep stops */ .pgt-mark.is-offline::before { animation: none; background: conic-gradient(from 210deg, #ef4444, #f97316 18%, #94a3b8 30%, #64748b 75%, #ef4444); } .pgt-mark.is-offline > img { filter: grayscale(0.55); } @media (prefers-reduced-motion: reduce) { .pgt-mark::before, .pgt-mark.is-live { animation: none; } .pgt-mark { transition: none; } }