.sd-aio-wrap { position: relative; background: transparent; border: 1px solid rgba(17,49,74,0.1); border-radius: 16px; max-width: 760px; margin: 0 auto; overflow: hidden; font-family: 'DM Sans', sans-serif; } .sd-aio-chrome { display: flex; align-items: center; padding: 12px 16px; background: rgba(17,49,74,0.03); border-bottom: 1px solid rgba(17,49,74,0.08); gap: 8px; } .sd-aio-dots { display: flex; gap: 6px; flex-shrink: 0; } .sd-aio-dot { width: 10px; height: 10px; border-radius: 50%; } .sd-aio-dot--r { background: rgba(255,246,232,0.3); } .sd-aio-dot--y { background: rgba(255,246,232,0.5); } .sd-aio-dot--g { background: rgba(255,246,232,0.7); } .sd-aio-chrome-title { font-size: 11px; font-weight: 600; color: rgba(17,49,74,0.45); margin-left: 8px; letter-spacing: 0.02em; } .sd-aio-gantt { padding: 0; } .sd-aio-weeks { display: grid; grid-template-columns: 160px 1fr 1fr; border-bottom: 1px solid rgba(17,49,74,0.1); } .sd-aio-week-spacer {} .sd-aio-week { text-align: center; padding: 14px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(17,49,74,0.5); position: relative; } .sd-aio-week::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(17,49,74,0.08); } .sd-aio-phase { border-bottom: 1px solid rgba(17,49,74,0.05); } .sd-aio-phase:last-child { border-bottom: none; } .sd-aio-phase-label-row { display: grid; grid-template-columns: 160px 1fr; } .sd-aio-phase-label { padding: 14px 16px 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .sd-aio-phase-label--1 { color: rgba(17,49,74,0.7); } .sd-aio-phase-label--2 { color: rgba(17,49,74,0.5); } .sd-aio-task { display: grid; grid-template-columns: 160px 1fr; align-items: center; min-height: 36px; } .sd-aio-task-name { padding: 0 16px; font-size: 12px; font-weight: 500; color: rgba(17,49,74,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-aio-task-track { position: relative; height: 36px; display: flex; align-items: center; } .sd-aio-task-track::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(17,49,74,0.05); pointer-events: none; z-index: 0; } .sd-aio-bar { position: absolute; height: 22px; border-radius: 6px; z-index: 1; transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: default; opacity: 0; will-change: transform, opacity; } .sd-aio-bar:hover { transform: scaleX(1.02) scaleY(1.1); } .sd-aio-bar--1 { background: rgba(17,49,74,0.7); box-shadow: 0 2px 8px rgba(17,49,74,0.15); } .sd-aio-bar--1:hover { box-shadow: 0 4px 16px rgba(17,49,74,0.25); } .sd-aio-bar--2 { background: rgba(17,49,74,0.45); box-shadow: 0 2px 8px rgba(17,49,74,0.1); } .sd-aio-bar--2:hover { box-shadow: 0 4px 16px rgba(17,49,74,0.2); } .sd-aio-bar-tip { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: #11314a; background: rgba(17,49,74,0.08); padding: 3px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 10; } .sd-aio-bar:hover .sd-aio-bar-tip { opacity: 1; } .sd-aio-footer { display: flex; align-items: center; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid rgba(17,49,74,0.06); background: rgba(17,49,74,0.02); } .sd-aio-footer-icon { width: 16px; height: 16px; border-radius: 50%; background: rgba(17,49,74,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sd-aio-footer-icon svg { width: 10px; height: 10px; } .sd-aio-footer-text { font-size: 11px; font-weight: 400; color: rgba(17,49,74,0.4); line-height: 1.5; } .sd-aio-footer-text strong { color: rgba(17,49,74,0.6); font-weight: 600; } @media (max-width: 640px) { .sd-aio-gantt { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sd-aio-gantt-inner { min-width: 540px; } .sd-aio-weeks { grid-template-columns: 120px 1fr 1fr; } .sd-aio-task { grid-template-columns: 120px 1fr; } .sd-aio-phase-label-row { grid-template-columns: 120px 1fr; } .sd-aio-task-name { font-size: 11px; padding: 0 12px; } } @media (max-width: 540px) { .sd-aio-gantt { overflow-x: hidden; } .sd-aio-gantt-inner { min-width: 0; } .sd-aio-weeks { display: none; } .sd-aio-phase-label-row { grid-template-columns: 1fr; } .sd-aio-phase-label-row > div:last-child { display: none; } .sd-aio-task { grid-template-columns: 1fr; min-height: 0; } .sd-aio-task-name { padding: 6px 16px; font-size: 13px; color: rgba(17,49,74,0.7); white-space: normal; } .sd-aio-task-track { display: none; } .sd-aio-phase { padding-bottom: 10px; } .sd-aio-phase-label { padding: 18px 16px 6px; font-size: 10px; } .sd-aio-phase-label--1::before { content: 'WEEK 1 \00B7 '; opacity: 0.7; } .sd-aio-phase-label--2::before { content: 'WEEK 2 \00B7 '; opacity: 0.7; } .sd-aio-footer { padding: 12px 16px 14px; } .sd-aio-footer-text { font-size: 11px; } } @media (hover: none) { .sd-aio-bar:hover { transform: none; } }