.sd-onb-wrap { position: relative; background: #11314a; border: 1px solid rgba(255,246,232,0.08); border-radius: 16px; max-width: 860px; margin: 0 auto; overflow: hidden; font-family: 'DM Sans', sans-serif; box-shadow: 0 12px 48px rgba(17,49,74,0.45), inset 0 1px 0 rgba(255,255,255,0.04); } .sd-onb-wrap::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.14) 50%, rgba(255,246,232,0.08) 70%, transparent 100%); z-index: 2; } .sd-onb-chrome { display: flex; align-items: center; padding: 12px 16px; background: rgba(0,0,0,0.15); border-bottom: 1px solid rgba(255,246,232,0.06); gap: 8px; } .sd-onb-dots { display: flex; gap: 6px; flex-shrink: 0; } .sd-onb-dot { width: 10px; height: 10px; border-radius: 50%; } .sd-onb-dot--r { background: #ff5f57; } .sd-onb-dot--y { background: #febc2e; } .sd-onb-dot--g { background: #28c840; } .sd-onb-chrome-title { font-size: 11px; font-weight: 600; color: rgba(255,246,232,0.35); margin-left: 8px; letter-spacing: 0.02em; } .sd-onb-header { padding: 32px 28px 20px; border-bottom: 1px solid rgba(255,246,232,0.06); } .sd-onb-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #DB635D; margin: 0 0 10px; } .sd-onb-title { font-size: 26px; font-weight: 800; color: #FFF6E8; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.2; } .sd-onb-accent { color: #DB635D; } .sd-onb-intro { font-size: 14px; font-weight: 400; color: rgba(255,246,232,0.45); margin: 0; line-height: 1.6; max-width: 600px; } .sd-onb-gantt { padding: 0; } .sd-onb-weeks { display: grid; grid-template-columns: 180px 1fr 1fr 1fr; border-bottom: 1px solid rgba(255,246,232,0.08); } .sd-onb-week-spacer { } .sd-onb-week { text-align: center; padding: 14px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,246,232,0.50); position: relative; } .sd-onb-week::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(255,246,232,0.06); } .sd-onb-phase { border-bottom: 1px solid rgba(255,246,232,0.04); } .sd-onb-phase:last-child { border-bottom: none; } .sd-onb-phase-label-row { display: grid; grid-template-columns: 180px 1fr; } .sd-onb-phase-label { padding: 16px 20px 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .sd-onb-phase-label--1 { color: #DB635D; } .sd-onb-phase-label--2 { color: #5492B6; } .sd-onb-phase-label--3 { color: #F6C893; } .sd-onb-task { display: grid; grid-template-columns: 180px 1fr; align-items: center; min-height: 36px; } .sd-onb-task-name { padding: 0 20px; font-size: 12px; font-weight: 500; color: rgba(255,246,232,0.70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-onb-task-track { position: relative; height: 36px; display: flex; align-items: center; } .sd-onb-task-track::before, .sd-onb-task-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,246,232,0.04); pointer-events: none; z-index: 0; } .sd-onb-task-track::before { left: 33.333%; } .sd-onb-task-track::after  { left: 66.666%; } .sd-onb-bar { position: absolute; height: 22px; border-radius: 6px; z-index: 1; transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: default; } .sd-onb-bar:hover { transform: scaleX(1.02) scaleY(1.1); } .sd-onb-bar--1 { background: linear-gradient(90deg, #DB635D 0%, #E07A75 100%); box-shadow: 0 2px 8px rgba(219,99,93,0.25); } .sd-onb-bar--1:hover { box-shadow: 0 4px 16px rgba(219,99,93,0.45); } .sd-onb-bar--2 { background: linear-gradient(90deg, #5492B6 0%, #6FA8C8 100%); box-shadow: 0 2px 8px rgba(84,146,182,0.25); } .sd-onb-bar--2:hover { box-shadow: 0 4px 16px rgba(84,146,182,0.45); } .sd-onb-bar--3 { background: linear-gradient(90deg, #F6C893 0%, #F8D5A8 100%); box-shadow: 0 2px 8px rgba(246,200,147,0.25); } .sd-onb-bar--3:hover { box-shadow: 0 4px 16px rgba(246,200,147,0.45); } .sd-onb-bar-tip { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: #FFF6E8; background: rgba(0,0,0,0.70); padding: 3px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 10; } .sd-onb-bar:hover .sd-onb-bar-tip { opacity: 1; } .sd-onb-client { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 16px 24px 20px; border-top: 1px solid rgba(255,246,232,0.06); background: rgba(0,0,0,0.08); } .sd-onb-client-icon { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,246,232,0.06); display: flex; align-items: center; justify-content: center; margin-top: 1px; } .sd-onb-client-icon svg { width: 10px; height: 10px; } .sd-onb-client-text { font-size: 11px; font-weight: 400; color: rgba(255,246,232,0.35); line-height: 1.5; } .sd-onb-client-text strong { color: rgba(255,246,232,0.55); font-weight: 600; } .sd-onb-footer { height: 8px; } .sd-onb-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0.6; } .sd-onb-glow--1 { top: 15%; right: -5%; background: radial-gradient(circle, rgba(219,99,93,0.06) 0%, transparent 70%); } .sd-onb-glow--2 { bottom: 25%; left: -8%; background: radial-gradient(circle, rgba(84,146,182,0.05) 0%, transparent 70%); } .sd-onb-glow--3 { bottom: -5%; right: 15%; background: radial-gradient(circle, rgba(246,200,147,0.05) 0%, transparent 70%); } @media (max-width: 700px) { .sd-onb-wrap { border-radius: 12px; } .sd-onb-header { padding: 24px 20px 16px; } .sd-onb-title { font-size: 20px; } .sd-onb-intro { font-size: 13px; } .sd-onb-gantt { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sd-onb-gantt-inner { min-width: 640px; } .sd-onb-weeks { grid-template-columns: 140px 1fr 1fr 1fr; } .sd-onb-task { grid-template-columns: 140px 1fr; } .sd-onb-phase-label-row { grid-template-columns: 140px 1fr; } .sd-onb-task-name { font-size: 11px; padding: 0 14px; } .sd-onb-phase-label { padding: 14px 14px 4px; } .sd-onb-client { padding: 14px 16px 16px; } } @media (max-width: 600px) { .sd-onb-gantt { overflow-x: hidden; } .sd-onb-gantt-inner { min-width: 0; } .sd-onb-weeks { display: none; } .sd-onb-phase-label-row { grid-template-columns: 1fr; } .sd-onb-phase-label-row > div:last-child { display: none; } .sd-onb-task { grid-template-columns: 1fr; min-height: 0; } .sd-onb-task-name { padding: 6px 16px; font-size: 13px; color: rgba(255,246,232,0.70); white-space: normal; } .sd-onb-task-track { display: none; } .sd-onb-phase { padding-bottom: 10px; } .sd-onb-phase-label { padding: 18px 16px 6px; font-size: 10px; position: relative; } .sd-onb-phase-label--1::before { content: 'WEEK 1 \00B7 '; opacity: 0.7; } .sd-onb-phase-label--2::before { content: 'WEEK 2 \00B7 '; opacity: 0.7; } .sd-onb-phase-label--3::before { content: 'WEEK 3 \00B7 '; opacity: 0.7; } .sd-onb-client { padding: 14px 16px 16px; } .sd-onb-client-text { font-size: 11px; } } @media (max-width: 480px) { .sd-onb-task-name { font-size: 12px; padding: 5px 14px; } .sd-onb-phase-label { padding: 16px 14px 6px; font-size: 9px; } .sd-onb-client { padding: 12px 14px 14px; } } @media (hover: none) { .sd-onb-bar:hover { transform: none; box-shadow: 0 2px 8px rgba(17,49,74,0.15); } }