.sd-sprint-card { position: relative; background: #11314a; border: 1px solid rgba(255,246,232,0.08); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 40px rgba(17,49,74,0.35), inset 0 1px 0 rgba(255,255,255,0.04); font-family: 'DM Sans', sans-serif; } .sd-sprint-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,246,232,0.08) 30%, rgba(255,246,232,0.12) 50%, rgba(255,246,232,0.08) 70%, transparent 100%); z-index: 1; } .sd-sprint-top { display: grid; grid-template-columns: 1fr; min-height: 320px; } .sd-sprint-timeline { padding: 32px 28px 28px 36px; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .sd-spr-days { display: grid; grid-template-columns: repeat(10, 1fr); margin-bottom: 16px; min-width: 480px; } .sd-spr-day { text-align: center; font-size: 10px; font-weight: 600; color: rgba(255,246,232,0.3); letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid rgba(255,246,232,0.06); } .sd-spr-rows { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 480px; padding-top: 12px; } .sd-spr-row { position: relative; z-index: 1; min-height: 42px; display: grid; grid-template-columns: repeat(10, 1fr); } .sd-spr-row:hover { z-index: 50; } .sd-spr-bar { position: relative; border-radius: 10px; display: flex; align-items: center; padding: 8px 14px; font-size: 12px; font-weight: 600; color: #FFF6E8; letter-spacing: 0.02em; white-space: nowrap; text-overflow: ellipsis; overflow: visible; cursor: default; opacity: 0; will-change: transform, opacity; transition: filter 0.2s ease; } .sd-spr-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%); border-radius: 10px 10px 0 0; pointer-events: none; } .sd-spr-bar:hover { filter: brightness(1.15); } .sd-spr-bar.sd-bar-highlight { filter: brightness(1.25); } .sd-spr-bar:hover .sd-spr-tip { opacity: 1; pointer-events: auto; } .sd-spr-pulse { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255,246,232,0.6); animation: sd-spr-pulse 2.5s ease-in-out infinite, sd-spr-ping 2.5s ease-out infinite; will-change: transform, box-shadow; } @keyframes sd-spr-pulse { 0%, 100% { opacity: 0.3; transform: translateY(-50%) scale(1); } 50% { opacity: 0.9; transform: translateY(-50%) scale(1.8); } } @keyframes sd-spr-ping { 0%   { box-shadow: 0 0 0 0 rgba(255,246,232,0.35); } 70%  { box-shadow: 0 0 0 8px rgba(255,246,232,0); } 100% { box-shadow: 0 0 0 8px rgba(255,246,232,0); } } @media (prefers-reduced-motion: reduce) { .sd-spr-pulse { animation: none !important; } } .sd-spr-tip { position: absolute; left: 50%; background: #FFF6E8; color: #11314a; padding: 12px 16px; border-radius: 12px; font-size: 12px; font-weight: 400; line-height: 1.5; white-space: normal; min-width: 220px; max-width: 320px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 100; box-shadow: 0 12px 32px rgba(0,0,0,0.25); } .sd-spr-tip strong { display: block; font-weight: 700; margin-bottom: 4px; font-size: 13px; } .sd-spr-tip { bottom: calc(100% + 14px); transform: translateX(-50%) translateY(8px); } .sd-spr-bar:hover .sd-spr-tip { transform: translateX(-50%) translateY(0); } .sd-spr-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #FFF6E8; } .sd-tip-below { bottom: auto; top: calc(100% + 14px); transform: translateX(-50%) translateY(-8px); } .sd-spr-bar:hover .sd-tip-below { transform: translateX(-50%) translateY(0); } .sd-tip-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #FFF6E8; } .sd-spr-bar[data-idx="0"] .sd-spr-tip { left: 0; transform: translateX(0) translateY(8px); } .sd-spr-bar[data-idx="0"]:hover .sd-spr-tip { transform: translateX(0) translateY(0); } .sd-spr-bar[data-idx="0"] .sd-spr-tip::after { left: 20px; } .sd-spr-bar[data-idx="4"] .sd-spr-tip, .sd-spr-bar[data-idx="5"] .sd-spr-tip { left: auto; right: 0; transform: translateX(0) translateY(-8px); } .sd-spr-bar[data-idx="4"]:hover .sd-spr-tip, .sd-spr-bar[data-idx="5"]:hover .sd-spr-tip { transform: translateX(0) translateY(0); } .sd-spr-bar[data-idx="4"] .sd-spr-tip::after, .sd-spr-bar[data-idx="5"] .sd-spr-tip::after { left: auto; right: 20px; transform: none; } .sd-day-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #DB635D; opacity: 0; z-index: 100; pointer-events: none; box-shadow: 0 0 10px 3px rgba(219,99,93,0.3); } .sd-day-marker::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #DB635D; box-shadow: 0 0 8px 2px rgba(219,99,93,0.4); } .sd-sprint-ceremonies { display: none; border-left: 1px solid rgba(255,246,232,0.06); padding: 28px 24px; flex-direction: column; gap: 16px; justify-content: center; } .sd-spr-cer-card { display: flex; align-items: flex-start; gap: 14px; background: rgba(255,246,232,0.05); border: 1px solid rgba(255,246,232,0.06); border-radius: 12px; padding: 16px 14px; opacity: 0; will-change: transform, opacity; transition: background 0.3s ease; } .sd-spr-cer-card:hover { background: rgba(255,246,232,0.08); } .sd-spr-cer-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .sd-spr-cer-text { flex: 1; min-width: 0; } .sd-spr-cer-title { font-size: 13px; font-weight: 700; color: #FFF6E8; line-height: 1.2; margin-bottom: 4px; } .sd-spr-cer-desc { font-size: 11px; font-weight: 400; color: rgba(255,246,232,0.5); line-height: 1.45; } .sd-sprint-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,246,232,0.06); } .sd-spr-stat { text-align: center; padding: 24px 16px; background: rgba(255,246,232,0.03); border-right: 1px solid rgba(255,246,232,0.06); will-change: transform, opacity; transition: background 0.3s ease; } .sd-spr-stat:last-child { border-right: none; } .sd-spr-stat:hover { background: rgba(255,246,232,0.06); } .sd-spr-stat-num { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px; } .sd-spr-stat-title { font-size: 14px; font-weight: 700; color: rgba(255,246,232,0.85); letter-spacing: 0.01em; margin-bottom: 3px; } .sd-spr-stat-desc { font-size: 11px; font-weight: 400; color: rgba(255,246,232,0.45); letter-spacing: 0.02em; } .sd-spr-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 36px; border-top: 1px solid rgba(255,246,232,0.04); } .sd-spr-legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,246,232,0.5); font-weight: 500; } .sd-spr-legend-dot { width: 10px; height: 10px; border-radius: 4px; flex-shrink: 0; } @media (max-width: 860px) { .sd-sprint-top { grid-template-columns: 1fr; } .sd-sprint-ceremonies { display: none; } .sd-sprint-stats { grid-template-columns: repeat(2, 1fr); } .sd-spr-stat:nth-child(2) { border-right: none; } .sd-spr-stat:nth-child(1), .sd-spr-stat:nth-child(2) { border-bottom: 1px solid rgba(255,246,232,0.06); } } @media (max-width: 600px) { .sd-sprint-top { grid-template-columns: 1fr; } .sd-sprint-ceremonies { display: none; } .sd-sprint-timeline { padding: 16px 12px; overflow-x: hidden; } .sd-spr-days { min-width: 0; } .sd-spr-day { font-size: 8px; letter-spacing: 0; padding-bottom: 8px; } .sd-spr-day:nth-child(even) { visibility: hidden; } .sd-spr-rows { min-width: 0; } .sd-spr-bar { font-size: 10px; padding: 6px 8px; } .sd-spr-tip { display: none; } } @media (max-width: 560px) { .sd-sprint-timeline { padding: 24px 16px 20px; } .sd-sprint-stats { grid-template-columns: 1fr; } .sd-spr-stat { border-right: none; border-bottom: 1px solid rgba(255,246,232,0.06); } .sd-spr-stat:last-child { border-bottom: none; } .sd-spr-legend { padding: 12px 16px; } } @media (max-width: 480px) { .sd-sprint-card { border-radius: 14px; } .sd-sprint-top { min-height: 0; } .sd-sprint-timeline { padding: 18px 14px 14px; } .sd-spr-rows { gap: 6px; } .sd-spr-row { min-height: 34px; } .sd-spr-bar { font-size: 11px; padding: 7px 10px; border-radius: 8px; } .sd-spr-stat { padding: 18px 14px; } .sd-spr-stat-num { font-size: 26px; margin-bottom: 4px; } .sd-spr-stat-title { font-size: 13px; } .sd-spr-stat-desc { font-size: 11px; } .sd-spr-legend { display: none !important; } } @media (hover: none) { .sd-spr-bar:hover { filter: none; } .sd-spr-cer-card:hover { background: rgba(255,246,232,0.05); } .sd-spr-stat:hover { background: rgba(255,246,232,0.03); } }