/*================================================== Ishtiaq Ali.com Hero 4.0 Module A Layout Foundation ==================================================*/ /*================================================== 01. HERO ==================================================*/ .hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:min(820px,100vh); padding-top:calc(var(--header-height) + var(--space-7)); padding-bottom:var(--space-11); } /*================================================== 02. BACKGROUND ==================================================*/ .hero-background{ position:absolute; inset:0; z-index:-1; } .hero-grid{ position:absolute; inset:0; background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px); background-size:60px 60px; opacity:.45; mask-image: radial-gradient(circle at center, rgba(0,0,0,1), rgba(0,0,0,.45), transparent); } .hero-glow{ position:absolute; border-radius:50%; filter:blur(120px); } .hero-glow-1{ width:520px; height:520px; top:-180px; right:-120px; background:rgba(91,108,255,.16); } .hero-glow-2{ width:420px; height:420px; left:-120px; bottom:-120px; background:rgba(39,197,255,.08); } .hero-noise{ position:absolute; inset:0; opacity:.02; background-image: radial-gradient(circle at 25% 25%,#fff 1px,transparent 0), radial-gradient(circle at 75% 75%,#fff 1px,transparent 0); background-size:140px 140px; } /*================================================== 03. LAYOUT ==================================================*/ .hero-layout{ display:grid; grid-template-columns: minmax(0,1fr) minmax(480px,580px); align-items:center; gap:clamp(4rem,6vw,7rem); } .hero-content{ display:flex; flex-direction:column; align-items:flex-start; } .hero-dashboard{ width:100%; display:flex; justify-content:flex-end; align-items:flex-start; padding-top:2rem; } /*================================================== 04. CONTENT SPACING ==================================================*/ .hero-badge{ margin-bottom:2rem; } .hero-title{ margin:0; line-height:.88; } .hero-description{ margin-top:3rem; /* max-width:430px; */ } .hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; } .hero-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; width:100%; margin-top:4rem; padding-top:2rem; border-top:1px solid var(--border-subtle); } /*================================================== 05. RESPONSIVE ==================================================*/ @media (max-width:1200px){ .hero{ min-height:auto; } .hero-layout{ grid-template-columns:1fr; gap:5rem; } .hero-dashboard{ justify-content:center; } } @media (max-width:768px){ .hero{ padding-top:calc(var(--header-height) + var(--space-8)); padding-bottom:var(--space-10); } .hero-content{ align-items:center; text-align:center; } .hero-actions{ justify-content:center; } .hero-metrics{ grid-template-columns:repeat(2,1fr); } } @media (max-width:540px){ .hero-actions{ width:100%; flex-direction:column; } .hero-actions .btn{ width:100%; } .hero-metrics{ grid-template-columns:1fr; gap:1.25rem; } } /*================================================== 06. DASHBOARD PANEL ==================================================*/ .dashboard-panel{ width:100%; max-width:620px; border-radius:var(--radius-xl); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05), 0 0 80px rgba(91,108,255,.15); overflow:hidden; transition: transform var(--transition-base) var(--ease), box-shadow var(--transition-base) var(--ease); } .dashboard-panel:hover{ transform:translateY(-8px); box-shadow: 0 40px 90px rgba(0,0,0,.45), var(--shadow-glow); } /*================================================== HEADER ==================================================*/ .dashboard-panel .panel__header{ display:flex; align-items:center; justify-content:space-between; } .dashboard-intro{ margin-bottom:1.25rem; } .dashboard-intro .panel__subtitle{ display:block; margin-bottom:.35rem; letter-spacing:.08em; text-transform:uppercase; } .dashboard-intro .panel__title{ font-size:1.35rem; line-height:1.3; } /*================================================== HEALTH ==================================================*/ .dashboard-health{ display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; } .dashboard-health h2{ font-size:3rem; line-height:1; margin:.35rem 0; } .health-progress{ width:100%; height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); } .health-progress span{ display:block; width:98%; height:100%; border-radius:inherit; background:linear-gradient( 90deg, #7C5CFF, #5B8DFF ); } /*================================================== KPI GRID ==================================================*/ .dashboard-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1.5rem; } .dashboard-kpis .metric-card{ min-height:82px; justify-content:center; padding:1rem; } /*================================================== SECTIONS ==================================================*/ .dashboard-section{ margin-top:var(--space-7); } .dashboard-section:first-of-type{ margin-top:0; } .dashboard-section .panel__subtitle{ display:block; margin-bottom:1rem; text-transform:uppercase; letter-spacing:.08em; } /*================================================== CHIPS ==================================================*/ .dashboard-chips{ display:flex; flex-wrap:wrap; gap:.75rem; } /*================================================== ACTIVITY ==================================================*/ .dashboard-section .activity-list{ margin-top:.5rem; } /*================================================== WINDOW DOTS ==================================================*/ .window-dots{ display:flex; align-items:center; } .status-pill{ flex-shrink:0; } /*================================================== RESPONSIVE ==================================================*/ @media (max-width:768px){ .dashboard-kpis{ grid-template-columns:1fr; } .dashboard-health h2{ font-size:2.6rem; } } /*================================================== DASHBOARD FOOTER ==================================================*/ .dashboard-footer{ padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.06); } .dashboard-tags{ display:flex; flex-wrap:wrap; gap:.75rem; } .dashboard-tags .chip{ font-size:.75rem; padding:.55rem .9rem; } /*================================================== HERO DASHBOARD — LIGHT THEME ==================================================*/ /* Dashboard title */ [data-theme="light"] .hero .dashboard-panel .panel__title{ color:#0F172A; } /* Platform Health label */ [data-theme="light"] .hero .dashboard-health small{ color:#64748B; } /* Main health value */ [data-theme="light"] .hero .dashboard-health h2{ color:#0F172A; } /* Health progress track */ [data-theme="light"] .hero .health-progress{ background:#E2E8F0; } /* KPI labels */ [data-theme="light"] .hero .dashboard-kpis .metric-card__label{ color:#475569; } /* Normal KPI cards */ [data-theme="light"] .hero .dashboard-kpis .metric-card{ color:#0F172A; background:rgba(255,255,255,.42); border:1px solid rgba(15,23,42,.08); box-shadow: 0 8px 24px rgba(15,23,42,.035); } [data-theme="light"] .hero .dashboard-kpis .metric-card:first-child{ background:#0F172A; border-color:#1E293B; } /* Featured Performance card */ [data-theme="light"] .hero .dashboard-kpis .metric-card:first-child{ background:#0F172A; border-color:#1E293B; } /* Featured Performance label */ [data-theme="light"] .hero .dashboard-kpis .metric-card:first-child .metric-card__label{ color:#93C5FD; } /* Featured Performance value */ [data-theme="light"] .hero .dashboard-kpis .metric-card:first-child .metric-card__value{ color:#F8FAFC; } /* Technology chips */ [data-theme="light"] .hero .dashboard-tags .chip{ color:#334155; border-color:rgba(15,23,42,.08); } /* Live status */ [data-theme="light"] .hero .status-pill{ color:#16A34A; }