atarim-connect-screen.css
4 weeks ago
global.css
4 weeks ago
offboarding.css
4 weeks ago
settings.css
4 weeks ago
atarim-connect-screen.css
134 lines
| 1 | /* Atarim connect screen (first-run overlay) styles. |
| 2 | * Backdrop positioning lives inline on #atarim-connect-overlay itself; |
| 3 | * this file holds the card, animation, and state styles. Enqueued only |
| 4 | * on the settings screen for first-time (never-connected) users. */ |
| 5 | |
| 6 | /* ------ tokens (lifted from the app theme) ------ */ |
| 7 | /* ink #272D3C · muted #64748B · border #E7E9EF · green #3ED696 · purple #6D5DF3 · WP blue #21759B */ |
| 8 | |
| 9 | #atarim-connect-overlay, |
| 10 | #atarim-connect-overlay *, |
| 11 | #atarim-connect-overlay *::before, |
| 12 | #atarim-connect-overlay *::after { box-sizing: border-box; } |
| 13 | |
| 14 | /* Backdrop positioning is applied inline on the element itself so no |
| 15 | stylesheet quirk can drop it. Only the state-toggle helper stays here; |
| 16 | !important beats the inline display on inner state wrappers. */ |
| 17 | #atarim-connect-overlay [hidden] { display: none !important; } |
| 18 | |
| 19 | /* ------ dismiss (top-right) ------ */ |
| 20 | #atarim-connect-overlay .atc-dismiss { |
| 21 | position: absolute; top: 16px; right: 16px; |
| 22 | width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; |
| 23 | border: 1px solid #E7E9EF; border-radius: 999px; background: #fff; color: #64748B; |
| 24 | cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: background .2s, color .2s; |
| 25 | } |
| 26 | #atarim-connect-overlay .atc-dismiss:hover { background: #F3F4F6; color: #272D3C; } |
| 27 | |
| 28 | #atarim-connect-overlay .atc { width: 100%; max-width: 470px; padding: 32px 32px 28px; display: flex; flex-direction: column; align-items: center; } |
| 29 | |
| 30 | /* ------ connection visual ------ */ |
| 31 | #atarim-connect-overlay .atc-visual { position: relative; margin-bottom: 32px; display: flex; align-items: center; justify-content: center; width: 100%; } |
| 32 | #atarim-connect-overlay .atc-glow { pointer-events: none; position: absolute; inset: -26px -12px; background: radial-gradient(52% 70% at 50% 50%, rgba(109,93,243,.10), transparent 72%); animation: atcGlow 2.7s ease-in-out infinite; } |
| 33 | |
| 34 | #atarim-connect-overlay .atc-tile { position: relative; flex-shrink: 0; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border: 1px solid #E7E9EF; border-radius: 16px; background: #fff; } |
| 35 | #atarim-connect-overlay .atc-tile--wp { box-shadow: 0 6px 18px -8px rgba(33,117,155,.45); animation: atcTileIn .5s cubic-bezier(.16,1,.3,1) both; } |
| 36 | #atarim-connect-overlay .atc-tile--atarim { box-shadow: 0 6px 18px -8px rgba(109,93,243,.5); animation: atcTileIn .5s cubic-bezier(.34,1.56,.64,1) 1s both; } |
| 37 | |
| 38 | #atarim-connect-overlay .atc-ping { pointer-events: none; position: absolute; inset: -1px; border-radius: 16px; border: 2px solid; opacity: 0; } |
| 39 | #atarim-connect-overlay .atc-ping--wp { border-color: rgba(33,117,155,.35); animation: atcTilePing 2.7s cubic-bezier(.2,.6,.35,1) .3s infinite; } |
| 40 | #atarim-connect-overlay .atc-ping--atarim { border-color: rgba(109,93,243,.4); animation: atcTilePing 2.7s cubic-bezier(.2,.6,.35,1) 2.6s infinite; } |
| 41 | #atarim-connect-overlay .atc-ping--done { border-color: rgba(62,214,150,.55); animation: atcPingOnce .9s cubic-bezier(.2,.6,.35,1) .15s 1 both; } |
| 42 | |
| 43 | #atarim-connect-overlay .atc-line { position: relative; flex: 1; display: flex; align-items: center; padding: 0 4px; min-height: 68px; animation: atcLineReveal .6s ease-out .45s both; } |
| 44 | #atarim-connect-overlay .atc-dash { height: 1px; flex: 1; background-image: linear-gradient(to right, #E7E9EF 55%, transparent 0); background-size: 8px 1px; background-repeat: repeat-x; } |
| 45 | |
| 46 | #atarim-connect-overlay .atc-badge { margin: 0 4px; flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #fff; box-shadow: 0 0 0 4px #fff; } |
| 47 | #atarim-connect-overlay .atc-badge--link { border: 1px solid #E7E9EF; color: #6D5DF3; } |
| 48 | #atarim-connect-overlay .atc-badge--check { background: #3ED696; color: #272D3C; animation: atcPop .5s cubic-bezier(.34,1.56,.64,1) both; } |
| 49 | |
| 50 | /* ------ connecting overlay ------ */ |
| 51 | #atarim-connect-overlay .atc-traffic { pointer-events: none; position: absolute; inset: 0; } |
| 52 | #atarim-connect-overlay .atc-charge { position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background-image: linear-gradient(to right, #6D5DF3 55%, transparent 0); background-size: 8px 1px; background-repeat: repeat-x; animation: atcDashPulse 2.7s ease-in-out infinite; } |
| 53 | #atarim-connect-overlay .atc-streak { position: absolute; top: 50%; width: 44px; height: 2px; border-radius: 999px; transform: translate(-50%,-50%); filter: blur(.5px); } |
| 54 | #atarim-connect-overlay .atc-streak--r { background: linear-gradient(90deg, transparent, #6D5DF3, transparent); animation: atcStreakR 2.7s cubic-bezier(.45,.05,.55,.95) .05s infinite both; } |
| 55 | #atarim-connect-overlay .atc-streak--l { background: linear-gradient(90deg, transparent, #3ED696, transparent); animation: atcStreakL 2.7s cubic-bezier(.45,.05,.55,.95) 2s infinite both; } |
| 56 | |
| 57 | #atarim-connect-overlay .atc-fly { position: absolute; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #E7E9EF; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.06); } |
| 58 | #atarim-connect-overlay .atc-fly--top { top: calc(50% - 11px); animation: atcFlowR 5.4s cubic-bezier(.45,.05,.55,.95) infinite both; } |
| 59 | #atarim-connect-overlay .atc-fly--bottom { top: calc(50% + 11px); animation: atcFlowL 5.4s cubic-bezier(.45,.05,.55,.95) infinite both; } |
| 60 | #atarim-connect-overlay .atc-fly--claude { background: #D97757; border-color: #D97757; } |
| 61 | #atarim-connect-overlay .atc-fly--codex { background: #272D3C; border-color: #272D3C; } |
| 62 | #atarim-connect-overlay .atc-fly--av { width: 26px; height: 26px; border-radius: 8px; overflow: hidden; } |
| 63 | #atarim-connect-overlay .atc-fly--av img { display: block; width: 100%; height: 100%; object-fit: cover; } |
| 64 | #atarim-connect-overlay .atc-fly--av.atc-fly--top { top: calc(50% - 13px); } |
| 65 | #atarim-connect-overlay .atc-fly--av.atc-fly--bottom { top: calc(50% + 13px); } |
| 66 | #atarim-connect-overlay .atc-ic--orange { color: #FF9E33; } #atarim-connect-overlay .atc-ic--pink { color: #E72D68; } #atarim-connect-overlay .atc-ic--ink { color: #272D3C; } |
| 67 | |
| 68 | /* ------ Atarim spinner (per README-spinner.md, delays offset +1s after the tile lands) ------ */ |
| 69 | #atarim-connect-overlay .atc-spinner svg { transform: translate(3px,-5px); } |
| 70 | #atarim-connect-overlay .atc-spinner .mountain { animation: atcAIn 2.6s cubic-bezier(.45,0,.15,1) 1s both; } |
| 71 | #atarim-connect-overlay .atc-spinner .ring { opacity: 0; transform-origin: 25.5px 6.3px; animation: atcRingPing 2.5s cubic-bezier(.2,.6,.35,1) 2.25s infinite; } |
| 72 | #atarim-connect-overlay .atc-spinner .starIn { transform-box: fill-box; transform-origin: center; animation: atcStarIn .6s cubic-bezier(.34,1.56,.64,1) 1.55s both; } |
| 73 | #atarim-connect-overlay .atc-spinner .starPulse { transform-box: fill-box; transform-origin: center; animation: atcStarPulse 2.5s ease-in-out 2.25s infinite; } |
| 74 | |
| 75 | /* ------ copy, card, buttons, footer ------ */ |
| 76 | #atarim-connect-overlay .atc-h1 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; text-align: center; } |
| 77 | #atarim-connect-overlay .atc-desc { margin: 8px 0 0; width: 100%; font-size: 14px; line-height: 1.625; color: #64748B; text-align: center; } |
| 78 | #atarim-connect-overlay .atc-desc b { color: #272D3C; font-weight: 500; } |
| 79 | |
| 80 | #atarim-connect-overlay .atc-site { margin-top: 24px; width: 100%; border: 1px solid #E7E9EF; border-radius: 12px; overflow: hidden; } |
| 81 | #atarim-connect-overlay .atc-site-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; } |
| 82 | #atarim-connect-overlay .atc-site-ic { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #F3F4F6; color: #272D3C; } |
| 83 | #atarim-connect-overlay .atc-site-label { margin: 0; font-size: 11px; font-weight: 500; color: #64748B; } |
| 84 | #atarim-connect-overlay .atc-site-value { margin: 0; font-size: 14px; font-weight: 500; color: #272D3C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 85 | |
| 86 | #atarim-connect-overlay .atc-cta { margin-top: 24px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } |
| 87 | #atarim-connect-overlay .atc-btn { width: 100%; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; background: #3ED696; color: #272D3C; font: 500 14px/1 inherit; font-family: inherit; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: filter .3s; } |
| 88 | #atarim-connect-overlay .atc-btn:hover { filter: brightness(.95); color: #272D3C; } |
| 89 | #atarim-connect-overlay .atc-btn[disabled] { cursor: wait; opacity: .9; } |
| 90 | #atarim-connect-overlay .atc-btn--secondary { background: #fff; color: #272D3C; border: 1px solid #E7E9EF; transition: background .3s; } |
| 91 | #atarim-connect-overlay .atc-btn--secondary:hover { background: #F3F4F6; filter: none; } |
| 92 | #atarim-connect-overlay .atc-spin { animation: atcSpin .8s linear infinite; } |
| 93 | |
| 94 | #atarim-connect-overlay .atc-foot { margin-top: 24px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748B; } |
| 95 | |
| 96 | /* ------ keyframes (uniquely named, safe to leave global) ------ */ |
| 97 | @keyframes atcSpin { to { transform: rotate(360deg); } } |
| 98 | @keyframes atcTileIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } |
| 99 | @keyframes atcLineReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } |
| 100 | @keyframes atcPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } } |
| 101 | @keyframes atcGlow { 0%,100% { opacity: .45; } 50% { opacity: 1; } } |
| 102 | @keyframes atcDashPulse { 0%,100% { opacity: .12; } 50% { opacity: .55; } } |
| 103 | @keyframes atcTilePing { 0% { opacity: .75; transform: scale(1); } 65%,100% { opacity: 0; transform: scale(1.24); } } |
| 104 | @keyframes atcPingOnce { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.28); } } |
| 105 | @keyframes atcStreakR { 0% { left: 3%; opacity: 0; } 12% { opacity: .9; } 45% { left: 97%; opacity: 0; } 100% { left: 97%; opacity: 0; } } |
| 106 | @keyframes atcStreakL { 0% { left: 97%; opacity: 0; } 12% { opacity: .9; } 45% { left: 3%; opacity: 0; } 100% { left: 3%; opacity: 0; } } |
| 107 | @keyframes atcFlowR { |
| 108 | 0% { left: 4%; opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(-8deg); } |
| 109 | 7% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); } |
| 110 | 22% { transform: translate(-50%,calc(-50% - 4px)) scale(1); } |
| 111 | 38% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); } |
| 112 | 45% { left: 96%; opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(8deg); } |
| 113 | 100% { left: 96%; opacity: 0; transform: translate(-50%,-50%) scale(.55); } |
| 114 | } |
| 115 | @keyframes atcFlowL { |
| 116 | 0% { left: 96%; opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(8deg); } |
| 117 | 7% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); } |
| 118 | 22% { transform: translate(-50%,calc(-50% + 4px)) scale(1); } |
| 119 | 38% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); } |
| 120 | 45% { left: 4%; opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(-8deg); } |
| 121 | 100% { left: 4%; opacity: 0; transform: translate(-50%,-50%) scale(.55); } |
| 122 | } |
| 123 | @keyframes atcAIn { from { opacity: 0; transform: translateY(1.8px); } to { opacity: 1; transform: none; } } |
| 124 | @keyframes atcStarIn { from { opacity: 0; transform: scale(0) rotate(-135deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } |
| 125 | @keyframes atcStarPulse { 0%,32%,100% { transform: scale(1); } 12% { transform: scale(1.28); } } |
| 126 | @keyframes atcRingPing { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: .9; } 55% { opacity: 0; transform: scale(1.55); } 100% { opacity: 0; transform: scale(1.55); } } |
| 127 | |
| 128 | @media (prefers-reduced-motion: reduce) { |
| 129 | #atarim-connect-overlay .atc-spinner .mountain, #atarim-connect-overlay .atc-spinner .ring, |
| 130 | #atarim-connect-overlay .atc-spinner .starIn, #atarim-connect-overlay .atc-spinner .starPulse, |
| 131 | #atarim-connect-overlay .atc-fly, #atarim-connect-overlay .atc-streak, #atarim-connect-overlay .atc-charge, |
| 132 | #atarim-connect-overlay .atc-ping, #atarim-connect-overlay .atc-glow { animation-duration: 20s; } |
| 133 | } |
| 134 |