/* ========================================================== HASHVIX LAYOUT SYSTEM ========================================================== */ /* ========================================================== PAGE ========================================================== */ .hx-page{ position:relative; width:100%; min-height:100vh; background:var(--hx-bg); overflow:hidden; } /* ========================================================== CONTAINER ========================================================== */ .hx-container{ width:100%; max-width:var(--hx-container); margin:auto; padding-left:32px; padding-right:32px; } .hx-container-sm{ max-width:900px; margin:auto; padding-left:24px; padding-right:24px; } .hx-container-lg{ max-width:1700px; margin:auto; padding-left:40px; padding-right:40px; } /* ========================================================== SECTION ========================================================== */ .hx-section{ position:relative; padding:100px 0; } .hx-section-sm{ padding:60px 0; } .hx-section-lg{ padding:140px 0; } /* ========================================================== GRID ========================================================== */ .hx-grid{ display:grid; gap:30px; } .hx-grid-2{ grid-template-columns:repeat(2,1fr); } .hx-grid-3{ grid-template-columns:repeat(3,1fr); } .hx-grid-4{ grid-template-columns:repeat(4,1fr); } .hx-grid-5{ grid-template-columns:repeat(5,1fr); } .hx-grid-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; } /* ========================================================== FLEX ========================================================== */ .hx-flex{ display:flex; } .hx-flex-center{ display:flex; justify-content:center; align-items:center; } .hx-flex-between{ display:flex; justify-content:space-between; align-items:center; } .hx-flex-around{ display:flex; justify-content:space-around; align-items:center; } .hx-flex-end{ display:flex; justify-content:flex-end; align-items:center; } .hx-flex-column{ display:flex; flex-direction:column; } .hx-flex-wrap{ flex-wrap:wrap; } /* ========================================================== GAP ========================================================== */ .hx-gap-xs{ gap:8px; } .hx-gap-sm{ gap:15px; } .hx-gap{ gap:25px; } .hx-gap-lg{ gap:40px; } .hx-gap-xl{ gap:60px; } /* ========================================================== STACK ========================================================== */ .hx-stack-xs>*+*{ margin-top:8px; } .hx-stack-sm>*+*{ margin-top:15px; } .hx-stack>*+*{ margin-top:25px; } .hx-stack-lg>*+*{ margin-top:40px; } .hx-stack-xl>*+*{ margin-top:70px; } /* ========================================================== WIDTH ========================================================== */ .hx-w-100{ width:100%; } .hx-w-75{ width:75%; } .hx-w-50{ width:50%; } .hx-w-25{ width:25%; } /* ========================================================== HEIGHT ========================================================== */ .hx-h-100{ height:100%; } .hx-vh{ min-height:100vh; } /* ========================================================== POSITION ========================================================== */ .hx-relative{ position:relative; } .hx-absolute{ position:absolute; } .hx-fixed{ position:fixed; } .hx-sticky{ position:sticky; top:100px; z-index:50; } /* ========================================================== DISPLAY ========================================================== */ .hx-block{ display:block; } .hx-inline{ display:inline-block; } .hx-hidden{ display:none; } /* ========================================================== OVERFLOW ========================================================== */ .hx-overflow{ overflow:hidden; } .hx-scroll{ overflow:auto; } /* ========================================================== ALIGN ========================================================== */ .hx-center{ text-align:center; } .hx-left{ text-align:left; } .hx-right{ text-align:right; } /* ========================================================== MARGIN ========================================================== */ .hx-mt{ margin-top:30px; } .hx-mt-lg{ margin-top:60px; } .hx-mb{ margin-bottom:30px; } .hx-mb-lg{ margin-bottom:60px; } .hx-my{ margin:40px 0; } /* ========================================================== PADDING ========================================================== */ .hx-p{ padding:30px; } .hx-p-lg{ padding:50px; } .hx-p-xl{ padding:80px; } /* ========================================================== BORDER RADIUS ========================================================== */ .hx-radius{ border-radius:var(--hx-radius); } .hx-radius-lg{ border-radius:var(--hx-radius-lg); } .hx-radius-xl{ border-radius:var(--hx-radius-xl); } .hx-round{ border-radius:50%; } /* ========================================================== SHADOW ========================================================== */ .hx-shadow{ box-shadow:var(--hx-shadow); } .hx-shadow-lg{ box-shadow:var(--hx-shadow-lg); } /* ========================================================== BACKGROUND ========================================================== */ .hx-bg{ background:var(--hx-bg); } .hx-surface{ background:var(--hx-surface); } .hx-surface-2{ background:var(--hx-surface-2); } .hx-glass{ background:var(--hx-glass); backdrop-filter:blur(30px); border:1px solid var(--hx-border); } .hx-glass-strong{ background:var(--hx-glass-2); backdrop-filter:blur(45px); border:1px solid rgba(255,255,255,.08); } /* ========================================================== HERO LAYOUT ========================================================== */ .hx-hero{ position:relative; padding:140px 0 80px; overflow:hidden; } .hx-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(70px); transform:scale(1.2); opacity:.18; pointer-events:none; } .hx-hero-overlay{ position:absolute; inset:0; background:linear-gradient( 180deg, rgba(5,7,11,0) 0%, rgba(5,7,11,.7) 60%, var(--hx-bg) 100%); } .hx-hero-content{ position:relative; z-index:5; } /* ========================================================== HERO SPLIT ========================================================== */ .hx-hero-grid{ display:grid; grid-template-columns:420px 1fr; gap:60px; align-items:center; } /* ========================================================== PROFILE LAYOUT ========================================================== */ .hx-profile{ position:relative; margin-top:-80px; z-index:5; } .hx-profile-header{ display:flex; gap:40px; align-items:flex-end; } .hx-profile-body{ flex:1; } .hx-profile-actions{ display:flex; gap:15px; margin-top:30px; flex-wrap:wrap; } /* ========================================================== COVER ========================================================== */ .hx-cover{ width:100%; height:380px; overflow:hidden; position:relative; border-radius:var(--hx-radius-xl); } .hx-cover img{ width:100%; height:100%; object-fit:cover; } /* ========================================================== AVATAR WRAPPER ========================================================== */ .hx-avatar-wrapper{ position:relative; display:inline-block; } .hx-avatar-ring{ position:absolute; inset:-6px; border-radius:50%; background:var(--hx-gradient-primary); z-index:-1; filter:blur(8px); opacity:.7; } /* ========================================================== MUSIC GRID ========================================================== */ .hx-music-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap:35px; } /* ========================================================== ARTIST GRID ========================================================== */ .hx-artist-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:30px; } /* ========================================================== DASHBOARD ========================================================== */ .hx-dashboard{ display:grid; grid-template-columns: 320px 1fr; gap:40px; } .hx-dashboard-sidebar{ position:sticky; top:100px; height:max-content; } .hx-dashboard-content{ min-width:0; } /* ========================================================== SIDEBAR MENU ========================================================== */ .hx-sidebar{ display:flex; flex-direction:column; gap:12px; } .hx-sidebar a{ padding:15px 22px; border-radius:18px; background:transparent; color:var(--hx-text-light); font-weight:600; transition:var(--hx-normal); } .hx-sidebar a:hover{ background:var(--hx-glass); color:#fff; transform:translateX(6px); } .hx-sidebar a.active{ background:var(--hx-gradient-primary); color:white; box-shadow:var(--hx-shadow-glow); } /* ========================================================== CONTENT GRID ========================================================== */ .hx-content-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:35px; } /* ========================================================== PANEL ========================================================== */ .hx-panel{ background:var(--hx-surface); border:1px solid var(--hx-border); border-radius:28px; padding:35px; box-shadow:var(--hx-shadow); } /* ========================================================== WRAPPER ========================================================== */ .hx-wrapper{ max-width:1800px; margin:auto; padding:40px; } /* ========================================================== FEATURED ========================================================== */ .hx-featured{ display:grid; grid-template-columns: 380px 1fr; gap:40px; align-items:center; } .hx-featured-cover{ position:relative; overflow:hidden; border-radius:30px; } .hx-featured-cover img{ width:100%; display:block; } .hx-featured-content{ display:flex; flex-direction:column; justify-content:center; } /* ========================================================== PLAYER WRAPPER ========================================================== */ .hx-player-wrapper{ display:flex; align-items:center; gap:30px; padding:25px; background:var(--hx-glass); border-radius:26px; border:1px solid var(--hx-border); backdrop-filter:blur(35px); } /* ========================================================== STATS GRID ========================================================== */ .hx-stats-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:25px; } /* ========================================================== SOCIAL GRID ========================================================== */ .hx-social-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:20px; } /* ========================================================== TIMELINE ========================================================== */ .hx-timeline{ display:flex; flex-direction:column; gap:20px; } /* ========================================================== DIVIDER ========================================================== */ .hx-divider{ width:100%; height:1px; background:rgba(255,255,255,.05); margin:35px 0; } /* ========================================================== SECTION TITLE ========================================================== */ .hx-section-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:35px; } .hx-section-title h2{ font-size:34px; font-weight:800; } .hx-section-title p{ margin-top:6px; color:var(--hx-text-muted); } /* ========================================================== EMPTY STATE ========================================================== */ .hx-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:100px 30px; text-align:center; } .hx-empty i{ font-size:70px; margin-bottom:20px; opacity:.4; } .hx-empty h3{ margin-bottom:15px; } .hx-empty p{ max-width:500px; } /* ========================================================== FLOATING ORBS ========================================================== */ .hx-orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.35; pointer-events:none; z-index:0; } .hx-orb-primary{ width:420px; height:420px; background:var(--hx-primary); top:-120px; right:-120px; } .hx-orb-secondary{ width:320px; height:320px; background:var(--hx-secondary); bottom:-80px; left:-80px; } .hx-orb-accent{ width:260px; height:260px; background:var(--hx-accent); top:45%; left:55%; } /* ========================================================== FLOAT ANIMATION ========================================================== */ @keyframes hxFloat{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-18px); } 100%{ transform:translateY(0px); } } .hx-float{ animation:hxFloat 7s ease-in-out infinite; } /* ========================================================== GLOW ========================================================== */ .hx-glow{ box-shadow: 0 0 0 rgba(79,140,255,0), 0 0 35px rgba(79,140,255,.18); } .hx-glow:hover{ box-shadow: 0 0 60px rgba(79,140,255,.35); } /* ========================================================== MUSIC FEED ========================================================== */ .hx-feed{ display:flex; flex-direction:column; gap:35px; } /* ========================================================== SPLIT ========================================================== */ .hx-split{ display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start; } /* ========================================================== STICKY PLAYER ========================================================== */ .hx-player-sticky{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%); width:min(1200px,92%); z-index:999; } /* ========================================================== FAB ========================================================== */ .hx-fab{ position:fixed; right:35px; bottom:35px; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--hx-gradient-primary); box-shadow:var(--hx-shadow-lg); color:white; font-size:28px; z-index:998; transition:var(--hx-normal); } .hx-fab:hover{ transform:translateY(-6px) scale(1.05); } /* ========================================================== MASONRY ========================================================== */ .hx-masonry{ column-count:3; column-gap:25px; } .hx-masonry>*{ break-inside:avoid; margin-bottom:25px; } /* ========================================================== SIDEBAR STICKY ========================================================== */ .hx-sidebar-sticky{ position:sticky; top:110px; } /* ========================================================== HERO DECORATION ========================================================== */ .hx-hero-decoration{ position:absolute; right:0; top:0; width:650px; height:650px; background: radial-gradient(circle, rgba(79,140,255,.18), transparent 70%); pointer-events:none; } /* ========================================================== MUSIC COVER ========================================================== */ .hx-cover-shadow{ overflow:hidden; border-radius:30px; box-shadow:0 25px 70px rgba(0,0,0,.45); } /* ========================================================== GLASS PANEL ========================================================== */ .hx-glass-panel{ background:rgba(255,255,255,.05); backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,.06); border-radius:28px; padding:35px; } /* ========================================================== HOVER LIFT ========================================================== */ .hx-hover{ transition:var(--hx-normal); } .hx-hover:hover{ transform:translateY(-8px); } /* ========================================================== FADE IN ========================================================== */ @keyframes hxFade{ from{ opacity:0; transform:translateY(25px); } to{ opacity:1; transform:translateY(0); } } .hx-fade{ animation:hxFade .7s ease both; } /* ========================================================== SCALE ========================================================== */ @keyframes hxScale{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } } .hx-scale{ animation:hxScale .45s ease both; } /* ========================================================== PAGE TRANSITION ========================================================== */ .hx-page-enter{ animation:hxFade .5s ease; } /* ========================================================== UTILITIES ========================================================== */ .hx-blur{ backdrop-filter:blur(20px); } .hx-border{ border:1px solid var(--hx-border); } .hx-rounded{ border-radius:var(--hx-radius-xl); } .hx-overflow-hidden{ overflow:hidden; } .hx-pointer{ cursor:pointer; } .hx-transition{ transition:var(--hx-normal); } .hx-shadow-hover:hover{ box-shadow:var(--hx-shadow-glow); } .hx-text-center{ text-align:center; } .hx-uppercase{ text-transform:uppercase; letter-spacing:1px; } .hx-relative{ position:relative; } .hx-z1{ z-index:1; } .hx-z10{ z-index:10; } .hx-z100{ z-index:100; } /* ========================================================== END LAYOUT ========================================================== */