.home-dashboard { display: flex; flex-direction: column; gap: clamp(2.2rem, 4vw, 3.75rem); padding: .25rem 0 3rem; } .home-intro, .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .home-intro h1 { margin: .2rem 0 0; color: var(--ph-text); font-size: clamp(1.9rem, 3vw, 2.55rem); font-weight: 760; line-height: 1.12; } .home-intro p { margin: .55rem 0 0; font-size: 1rem; } .section-eyebrow { display: block; color: var(--ph-primary); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; } .platform-status { display: inline-flex; align-items: center; flex: 0 0 auto; gap: .55rem; padding: .48rem .75rem; color: var(--ph-text-muted); background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: 999px; font-size: .78rem; font-weight: 650; box-shadow: var(--ph-shadow-sm); } .status-dot { width: .52rem; height: .52rem; background: #35a58a; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, #35a58a 14%, transparent); } .dashboard-section { display: flex; flex-direction: column; gap: 1.15rem; } .section-heading h2 { margin: .25rem 0 0; color: var(--ph-text); font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 730; } .section-heading > p { max-width: 38rem; margin: 0 0 .12rem; font-size: .9rem; line-height: 1.45; text-align: right; } .featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .featured-card, .management-card { position: relative; color: var(--ph-text); cursor: pointer; text-align: left; font: inherit; } .featured-card { display: flex; min-height: 18rem; flex-direction: column; justify-content: space-between; padding: 1.55rem; overflow: hidden; background: linear-gradient(145deg, var(--ph-surface-raised), var(--ph-surface)); border: 1px solid var(--feature-border); border-radius: var(--ph-radius-lg); box-shadow: var(--ph-shadow-sm); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .featured-card::after { position: absolute; right: -5rem; bottom: -7rem; width: 14rem; height: 14rem; background: radial-gradient(circle, var(--feature-glow), transparent 68%); border-radius: 50%; content: ""; pointer-events: none; } .featured-card:hover, .featured-card:focus-visible { border-color: var(--feature-color); box-shadow: var(--ph-shadow-md); outline: none; transform: translateY(-2px); } .tone-blue { --feature-color: #719bea; --feature-border: color-mix(in srgb, #719bea 52%, var(--ph-border)); --feature-glow: color-mix(in srgb, #719bea 17%, transparent); } .tone-green { --feature-color: #55b7a4; --feature-border: color-mix(in srgb, #55b7a4 52%, var(--ph-border)); --feature-glow: color-mix(in srgb, #55b7a4 17%, transparent); } .featured-card-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .feature-icon, .management-icon, .metric-icon, .activity-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .feature-icon { width: 3.3rem; height: 3.3rem; color: var(--feature-color); background: color-mix(in srgb, var(--feature-color) 9%, var(--ph-surface)); border: 1px solid color-mix(in srgb, var(--feature-color) 35%, var(--ph-border)); border-radius: .75rem; font-size: 1.2rem; } .feature-tag { padding: .38rem .65rem; color: var(--feature-color); background: color-mix(in srgb, var(--feature-color) 9%, transparent); border: 1px solid color-mix(in srgb, var(--feature-color) 28%, transparent); border-radius: 999px; font-size: .65rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; } .featured-copy { display: flex; flex-direction: column; gap: .45rem; max-width: 36rem; margin: 1.5rem 0; } .featured-copy strong { color: var(--ph-text); font-size: 1.45rem; line-height: 1.15; } .featured-copy small { color: var(--ph-text-muted); font-size: .9rem; line-height: 1.55; } .card-action { display: inline-flex; align-items: center; gap: .6rem; z-index: 1; color: var(--feature-color); font-size: .84rem; font-weight: 700; } .card-action i, .management-arrow { transition: transform .18s ease; } .featured-card:hover .card-action i, .management-card:hover .management-arrow { transform: translateX(3px); } .management-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; } .management-card { display: grid; min-height: 10rem; align-content: start; grid-template-columns: 2.55rem minmax(0, 1fr) auto; gap: .9rem; padding: 1.15rem; background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); box-shadow: var(--ph-shadow-sm); transition: transform .18s ease, border-color .18s ease, background-color .18s ease; } .management-card:hover, .management-card:focus-visible { background: var(--ph-surface-raised); border-color: var(--ph-border-strong); outline: none; transform: translateY(-2px); } .management-icon { width: 2.55rem; height: 2.55rem; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 9%, var(--ph-surface-subtle)); border: 1px solid color-mix(in srgb, var(--accent-color) 25%, var(--ph-border)); border-radius: .65rem; } .management-copy { display: flex; min-width: 0; flex-direction: column; gap: .32rem; align-self: end; grid-column: 1 / 4; margin-top: 1rem; } .management-copy strong { color: var(--ph-text); font-size: .95rem; } .management-copy small { color: var(--ph-text-muted); font-size: .75rem; line-height: 1.35; } .management-arrow { align-self: center; color: var(--ph-text-muted); font-size: .75rem; } .section-heading-compact { align-items: center; } .sample-label { color: var(--ph-text-muted); font-size: .72rem; } .overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .65fr); gap: 1rem; } .metrics-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-lg); box-shadow: var(--ph-shadow-sm); } .metric-item { display: flex; min-height: 7.5rem; align-items: center; gap: .9rem; padding: 1.2rem; } .metric-item:nth-child(even) { border-left: 1px solid var(--ph-border); } .metric-item:nth-child(n+3) { border-top: 1px solid var(--ph-border); } .metric-icon, .activity-icon { color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 10%, var(--ph-surface-subtle)); border: 1px solid color-mix(in srgb, var(--accent-color) 24%, var(--ph-border)); } .metric-icon { width: 2.8rem; height: 2.8rem; border-radius: .7rem; } .metric-copy { display: flex; min-width: 0; flex-direction: column; gap: .28rem; } .metric-copy strong { color: var(--ph-text); font-size: 1.65rem; line-height: 1; } .metric-copy small { color: var(--ph-text-muted); font-size: .78rem; } .activity-panel { overflow: hidden; background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-lg); box-shadow: var(--ph-shadow-sm); } .activity-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; background: var(--ph-surface-subtle); border-bottom: 1px solid var(--ph-border); } .activity-header h3 { margin: 0; color: var(--ph-text); font-size: .95rem; } .activity-header p { margin: .2rem 0 0; font-size: .72rem; } .activity-header > i { color: var(--ph-text-muted); } .activity-item { display: flex; min-height: 4.2rem; align-items: center; gap: .75rem; padding: .75rem 1.2rem; } .activity-item + .activity-item { border-top: 1px solid var(--ph-border); } .activity-icon { width: 2.1rem; height: 2.1rem; border-radius: .55rem; font-size: .75rem; } .activity-item strong, .activity-item small { display: block; } .activity-item strong { color: var(--ph-text); font-size: .8rem; } .activity-item small { margin-top: .15rem; color: var(--ph-text-muted); font-size: .7rem; } .accent-blue { --accent-color: #5288c7; } .accent-green { --accent-color: #49a38b; } .accent-indigo { --accent-color: #7186ab; } .accent-orange { --accent-color: #d59a34; } .accent-teal { --accent-color: #55a0b0; } .accent-violet { --accent-color: #8d62b5; } .accent-red { --accent-color: #cc604e; } @media (max-width: 1199.98px) { .management-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .overview-grid { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .home-dashboard { gap: 2.5rem; } .home-intro, .section-heading { align-items: flex-start; flex-direction: column; gap: .8rem; } .section-heading > p { max-width: none; text-align: left; } .featured-grid, .management-grid { grid-template-columns: 1fr; } .featured-card { min-height: 15rem; } .management-card { min-height: 8.5rem; } } @media (max-width: 479.98px) { .platform-status { align-self: flex-start; } .metrics-panel { grid-template-columns: 1fr; } .metric-item:nth-child(even) { border-left: 0; } .metric-item:nth-child(n+2) { border-top: 1px solid var(--ph-border); } .feature-tag { max-width: 9.5rem; text-align: center; } } @media (prefers-reduced-motion: reduce) { .featured-card, .management-card, .card-action i, .management-arrow { transition: none; } }