/*========================================== */ :root{ --gold:#C8A84B; --gold-light:#E6C96D; --gold-dark:#9A7A2A; --crimson:#8B1A1A; --crimson-bright:#D13030; --black:#080808; --black2:#111111; --black3:#1A1A1A; --black4:#222222; --cream:#F0EAD6; --cream-dim:#C8BFA8; --steel:#4A90A4; --glass:rgba(255,255,255,0.04); --glass-border:rgba(200,168,75,0.2); --font-display:'Bebas Neue',sans-serif; --font-body:'Raleway',sans-serif; --font-serif:'Playfair Display',serif; --font-mono:'DM Mono',monospace; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{ background:var(--black); color:var(--cream); font-family:var(--font-body); overflow-x:hidden; in cursor:default; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{cursor:pointer;font-family:var(--font-body)} input,textarea,select{font-family:var(--font-body)} /* SCROLLBAR */ ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:var(--black2)} ::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:3px} /* ============================================================ GRAIN OVERLAY ============================================================ */ body::before{ content:'';position:fixed;inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none;z-index:9999;opacity:.35 } /* ============================================================ NAV ============================================================ */ #nav{ position:fixed;top:0;left:0;right:0;z-index:1000; padding:14px 40px; display:flex;align-items:center;justify-content:space-between; background:linear-gradient(180deg,rgba(8,8,8,.98) 0%,rgba(8,8,8,.8) 100%); backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); transition:padding .3s } #nav.scrolled{padding:10px 40px;border-bottom-color:rgba(200,168,75,.35)} .nav-logo{ display:flex;align-items:center;gap:12px } .nav-logo .logo-ring{ width:48px;height:48px;position:relative } .logo-vinyl{ width:48px;height:48px;border-radius:50%; background:radial-gradient(circle at 50% 50%,#333 0%,#000 25%,#1a1a1a 26%,#0d0d0d 45%,#222 46%,#111 65%,#1c1c1c 66%,#0a0a0a 85%,#2a2a2a 86%,#111 100%); animation:vinylSpin 4s linear infinite; box-shadow:0 0 0 2px var(--gold-dark),0 0 20px rgba(200,168,75,.3) } .logo-center{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:10px;height:10px;border-radius:50%; background:var(--gold);box-shadow:0 0 8px var(--gold) } .nav-title{ display:flex;flex-direction:column;line-height:1 } .nav-title span:first-child{ font-family:var(--font-display);font-size:1.6rem; letter-spacing:3px;color:var(--gold); text-shadow:0 0 20px rgba(200,168,75,.4) } .nav-title span:last-child{ font-size:.6rem;letter-spacing:2px;color:var(--cream-dim); font-weight:500;text-transform:uppercase } .nav-links{ display:flex;align-items:center;gap:8px;list-style:none } .nav-links a{ font-size:.7rem;letter-spacing:2px;text-transform:uppercase; font-weight:600;color:var(--cream-dim);padding:6px 10px; border-radius:3px;transition:all .2s } .nav-links a:hover{color:var(--gold);background:rgba(200,168,75,.08)} .nav-cta{ background:linear-gradient(135deg,var(--gold),var(--gold-dark)) !important; color:var(--black) !important;font-weight:700 !important; padding:8px 16px !important;border-radius:4px !important } .nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(200,168,75,.4) !important} #hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px} #hamburger span{ width:24px;height:2px;background:var(--gold); border-radius:1px;transition:all .3s } /* ============================================================ HERO ============================================================ */ #hero{ height:100vh;min-height:700px; display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden; background:radial-gradient(ellipse at 20% 50%,rgba(139,26,26,.15) 0%,transparent 60%), radial-gradient(ellipse at 80% 50%,rgba(200,168,75,.08) 0%,transparent 60%), var(--black) } .hero-bg-vinyl{ position:absolute;right:-120px;top:50%;transform:translateY(-50%); width:700px;height:700px;border-radius:50%; background:radial-gradient(circle at 50%,#1a1a1a 0%,#0a0a0a 20%,#222 21%,#111 38%,#1c1c1c 39%,#0a0a0a 55%,#2a2a2a 56%,#111 72%,#1c1c1c 73%,#0a0a0a 88%,#333 89%,#1a1a1a 100%); animation:vinylSpin 18s linear infinite; opacity:.4; box-shadow:inset 0 0 80px rgba(200,168,75,.08) } .hero-bg-vinyl::after{ content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:80px;height:80px;border-radius:50%; background:radial-gradient(circle,var(--gold-dark),#6a4a10); box-shadow:0 0 40px rgba(200,168,75,.4) } .hero-content{ position:relative;z-index:2;text-align:left;padding:0 40px;max-width:780px } .hero-eyebrow{ font-size:.7rem;letter-spacing:5px;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:20px; display:flex;align-items:center;gap:12px } .hero-eyebrow::before{ content:'';width:40px;height:1px;background:var(--gold) } .hero-h1{ font-family:var(--font-display);font-size:clamp(4rem,8vw,8rem); letter-spacing:4px;line-height:.9;color:var(--cream); margin-bottom:8px } .hero-h1 span{color:var(--gold);text-shadow:0 0 40px rgba(200,168,75,.5)} .hero-sub{ font-family:var(--font-display);font-size:clamp(1.2rem,3vw,2.2rem); letter-spacing:6px;color:var(--cream-dim);margin-bottom:32px } .hero-desc{ font-size:.95rem;line-height:1.8;color:var(--cream-dim); max-width:520px;margin-bottom:40px;font-weight:300 } .hero-btns{display:flex;gap:16px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:8px; padding:14px 32px;font-size:.75rem;letter-spacing:2px; text-transform:uppercase;font-weight:700; border:none;border-radius:4px;transition:all .3s } .btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--black);box-shadow:0 4px 20px rgba(200,168,75,.3) } .btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(200,168,75,.5)} .btn-outline{ background:transparent;color:var(--gold); border:1px solid var(--gold); } .btn-outline:hover{background:rgba(200,168,75,.1);transform:translateY(-2px)} .hero-badges{ display:flex;gap:24px;margin-top:48px;align-items:center } .badge{ display:flex;flex-direction:column;align-items:center;gap:4px } .badge-num{ font-family:var(--font-display);font-size:1.8rem;color:var(--gold) } .badge-label{ font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--cream-dim) } .hero-eq{ position:absolute;bottom:40px;left:50%;transform:translateX(-50%); display:flex;gap:4px;align-items:flex-end } .eq-bar{ width:4px;background:linear-gradient(to top,var(--gold-dark),var(--gold)); border-radius:2px;animation:eqBounce var(--d,0.5s) ease-in-out infinite alternate } @keyframes eqBounce{0%{height:4px}100%{height:var(--h,20px)}} @keyframes vinylSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* ============================================================ SECTION COMMON ============================================================ */ section{padding:100px 40px;position:relative} .section-header{text-align:center;margin-bottom:64px} .section-tag{ display:inline-block;font-size:.65rem;letter-spacing:3px; text-transform:uppercase;color:var(--gold);font-weight:600; margin-bottom:12px } .section-title{ font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem); letter-spacing:3px;color:var(--cream);line-height:1.05 } .section-title span{color:var(--gold)} .section-line{ width:60px;height:2px;background:linear-gradient(90deg,var(--gold),transparent); margin:20px auto 0 } .container{max-width:1200px;margin:0 auto} /* ============================================================ PLAYER SECTION ============================================================ */ #player{background:var(--black2)} .player-grid{ display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start } .player-card{ background:var(--glass);border:1px solid var(--glass-border); border-radius:16px;overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5) } .player-card-header{ padding:20px 24px;background:rgba(200,168,75,.06); border-bottom:1px solid var(--glass-border); display:flex;align-items:center;gap:12px } .player-card-header i{color:var(--gold);font-size:1.2rem} .player-card-header h3{ font-family:var(--font-display);font-size:1.2rem; letter-spacing:2px;color:var(--cream) } .player-card-header .loop-badge{ margin-left:auto;background:rgba(200,168,75,.2); color:var(--gold);font-size:.6rem;letter-spacing:1px; padding:3px 8px;border-radius:20px;font-weight:700; animation:pulse 2s infinite } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} .player-card iframe{ width:100%;border:none;display:block } .player-info{padding:20px 24px} .player-info p{ font-size:.8rem;color:var(--cream-dim);line-height:1.6;margin-bottom:12px } .player-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .stream-btn{ display:inline-flex;align-items:center;gap:6px; padding:7px 14px;border-radius:20px;font-size:.7rem; font-weight:600;letter-spacing:1px;transition:all .2s; border:1px solid transparent } .sb-tidal{background:#000;color:#fff;border-color:#333} .sb-tidal:hover{border-color:var(--gold);color:var(--gold)} .sb-soundcloud{background:#ff5500;color:#fff} .sb-soundcloud:hover{opacity:.85;transform:translateY(-1px)} .sb-spotify{background:#1DB954;color:#fff} .sb-spotify:hover{opacity:.85;transform:translateY(-1px)} .sb-apple{background:#fc3c44;color:#fff} .sb-apple:hover{opacity:.85;transform:translateY(-1px)} .sb-amazon{background:#FF9900;color:#000} .sb-amazon:hover{opacity:.85;transform:translateY(-1px)} .sb-youtube{background:#FF0000;color:#fff} .sb-youtube:hover{opacity:.85;transform:translateY(-1px)} /* ============================================================ RADIO SECTION ============================================================ */ #radio{ background:linear-gradient(135deg,var(--black) 0%,rgba(139,26,26,.08) 50%,var(--black) 100%) } .radio-grid{ display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start } .radio-embed-wrapper{ background:var(--glass);border:1px solid var(--glass-border); border-radius:16px;overflow:hidden } .radio-embed-wrapper iframe{width:100%;border:none;display:block} .radio-sidebar{display:flex;flex-direction:column;gap:20px} .radio-feature-card{ background:var(--glass);border:1px solid var(--glass-border); border-radius:12px;padding:24px; } .radio-feature-card h4{ font-family:var(--font-display);letter-spacing:2px; color:var(--gold);margin-bottom:8px;font-size:1rem } .radio-feature-card p{font-size:.8rem;color:var(--cream-dim);line-height:1.6} .radio-feature-card .radio-link{ display:inline-flex;align-items:center;gap:6px; color:var(--gold);font-size:.75rem;font-weight:600; margin-top:12px;letter-spacing:1px; transition:gap .2s } .radio-feature-card .radio-link:hover{gap:10px} /* ============================================================ UPLOAD SECTION ============================================================ */ #upload{background:var(--black3)} .upload-area{ border:2px dashed var(--gold-dark);border-radius:20px; padding:60px 40px;text-align:center; background:rgba(200,168,75,.03);transition:all .3s;cursor:pointer; position:relative;overflow:hidden;margin-bottom:40px } .upload-area:hover,.upload-area.drag-over{ border-color:var(--gold);background:rgba(200,168,75,.07); transform:scale(1.005) } .upload-icon{ font-size:3rem;color:var(--gold-dark);margin-bottom:20px; transition:all .3s } .upload-area:hover .upload-icon{color:var(--gold);transform:translateY(-4px)} .upload-title{ font-family:var(--font-display);font-size:2rem;letter-spacing:3px; color:var(--cream);margin-bottom:8px } .upload-sub{font-size:.85rem;color:var(--cream-dim);margin-bottom:24px} .upload-formats{ display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px } .fmt-tag{ padding:4px 12px;background:rgba(200,168,75,.1); border:1px solid rgba(200,168,75,.2);border-radius:20px; font-size:.65rem;letter-spacing:1px;color:var(--gold-light);font-weight:600 } #fileInput{position:absolute;inset:0;opacity:0;cursor:pointer} .upload-meta-form{ display:grid;grid-template-columns:1fr 1fr;gap:20px } .form-group{display:flex;flex-direction:column;gap:8px} .form-group label{ font-size:.7rem;letter-spacing:2px;text-transform:uppercase; color:var(--gold);font-weight:600 } .form-group input,.form-group select,.form-group textarea{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); color:var(--cream);padding:12px 16px;border-radius:8px; font-size:.85rem;outline:none;transition:border-color .2s } .form-group input:focus,.form-group select:focus,.form-group textarea:focus{ border-color:var(--gold) } .form-group select option{background:var(--black3)} .form-group.full{grid-column:1/-1} .upload-submit{ grid-column:1/-1;margin-top:8px; display:flex;gap:16px;justify-content:flex-end } /* ============================================================ DISTRIBUTION SECTION ============================================================ */ #distribution{background:var(--black2)} .dist-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:48px } .dist-card{ background:var(--glass);border:1px solid var(--glass-border); border-radius:12px;padding:28px 20px;text-align:center; transition:all .3s;cursor:pointer } .dist-card:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:0 16px 40px rgba(200,168,75,.15) } .dist-icon{font-size:2.4rem;margin-bottom:14px} .dist-name{ font-family:var(--font-display);letter-spacing:2px;font-size:1rem; color:var(--cream);margin-bottom:6px } .dist-desc{font-size:.72rem;color:var(--cream-dim);line-height:1.5} .dist-arrow{ display:inline-flex;align-items:center;gap:4px; color:var(--gold);font-size:.7rem;font-weight:600; margin-top:12px;transition:gap .2s } .dist-card:hover .dist-arrow{gap:8px} .ditto-highlight{ background:rgba(200,168,75,.06);border:1px solid rgba(200,168,75,.3); border-radius:16px;padding:32px; display:flex;align-items:center;gap:32px;flex-wrap:wrap } .ditto-logo{ font-family:var(--font-display);font-size:3rem;letter-spacing:4px; color:var(--gold);text-shadow:0 0 30px rgba(200,168,75,.4) } .ditto-info{flex:1} .ditto-info h3{ font-family:var(--font-display);font-size:1.5rem;letter-spacing:2px; color:var(--cream);margin-bottom:8px } .ditto-info p{font-size:.85rem;color:var(--cream-dim);line-height:1.7;max-width:500px} /* ============================================================ BMI SECTION ============================================================ */ #bmi{ background:linear-gradient(135deg,var(--black) 0%,rgba(74,144,164,.06) 50%,var(--black) 100%) } .bmi-layout{ display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center } .bmi-visual{ position:relative;display:flex;align-items:center;justify-content:center } .bmi-circle{ width:320px;height:320px;border-radius:50%; background:radial-gradient(circle at 35% 35%,rgba(74,144,164,.15),rgba(200,168,75,.08),transparent); border:1px solid rgba(200,168,75,.2); display:flex;flex-direction:column;align-items:center;justify-content:center; position:relative } .bmi-logo-text{ font-family:var(--font-display);font-size:5rem;letter-spacing:8px; color:var(--steel);text-shadow:0 0 40px rgba(74,144,164,.5); margin-bottom:8px } .bmi-tagline{ font-size:.7rem;letter-spacing:3px;text-transform:uppercase; color:var(--cream-dim) } .bmi-affiliated{ position:absolute;top:-10px;right:20px; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--black);font-size:.6rem;font-weight:700; letter-spacing:2px;padding:5px 14px;border-radius:20px } .bmi-orbit{ position:absolute; border:1px dashed rgba(200,168,75,.15);border-radius:50%; animation:orbitSpin 20s linear infinite } .bmi-orbit-1{width:380px;height:380px} .bmi-orbit-2{width:440px;height:440px;animation-duration:30s;animation-direction:reverse} @keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .bmi-content h2{ font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem); letter-spacing:3px;color:var(--cream);margin-bottom:20px;line-height:1.1 } .bmi-content h2 span{color:var(--gold)} .bmi-content p{ font-size:.9rem;color:var(--cream-dim);line-height:1.8;margin-bottom:24px } .bmi-links-list{ display:flex;flex-direction:column;gap:12px;margin-bottom:32px } .bmi-link-item{ display:flex;align-items:center;gap:14px; background:var(--glass);border:1px solid var(--glass-border); border-radius:10px;padding:14px 18px;transition:all .2s } .bmi-link-item:hover{ border-color:var(--gold);background:rgba(200,168,75,.06); transform:translateX(4px) } .bmi-link-icon{ width:36px;height:36px;border-radius:8px; background:rgba(74,144,164,.15); display:flex;align-items:center;justify-content:center; color:var(--steel);font-size:1rem;flex-shrink:0 } .bmi-link-text h4{ font-size:.85rem;font-weight:600;color:var(--cream);margin-bottom:2px } .bmi-link-text p{font-size:.72rem;color:var(--cream-dim)} .bmi-link-arrow{ margin-left:auto;color:var(--gold-dark);transition:transform .2s } .bmi-link-item:hover .bmi-link-arrow{transform:translateX(4px)} /* ============================================================ CONTRACTS SECTION ============================================================ */ #contracts{background:var(--black3)} .contracts-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px } .contract-card{ background:var(--glass);border:1px solid var(--glass-border); border-radius:14px;padding:28px;transition:all .3s; display:flex;flex-direction:column } .contract-card:hover{ transform:translateY(-4px);border-color:var(--gold); box-shadow:0 12px 40px rgba(200,168,75,.12) } .contract-icon{ width:50px;height:50px;border-radius:10px; background:rgba(200,168,75,.1);border:1px solid rgba(200,168,75,.2); display:flex;align-items:center;justify-content:center; color:var(--gold);font-size:1.3rem;margin-bottom:16px } .contract-card h3{ font-family:var(--font-display);letter-spacing:2px;font-size:1.1rem; color:var(--cream);margin-bottom:8px } .contract-card p{ font-size:.78rem;color:var(--cream-dim);line-height:1.6; flex:1;margin-bottom:20px } .contract-badges{ display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px } .c-badge{ font-size:.58rem;letter-spacing:1px;padding:3px 8px;border-radius:4px; font-weight:700;text-transform:uppercase } .c-badge-bmi{background:rgba(74,144,164,.2);color:var(--steel)} .c-badge-legal{background:rgba(200,168,75,.15);color:var(--gold-light)} .c-badge-std{background:rgba(255,255,255,.08);color:var(--cream-dim)} .contract-btns{display:flex;gap:8px;margin-top:auto} .cbtn{ flex:1;padding:10px;border:none;border-radius:8px; font-size:.7rem;font-weight:700;letter-spacing:1px; text-transform:uppercase;transition:all .2s; display:flex;align-items:center;justify-content:center;gap:6px } .cbtn-view{background:rgba(200,168,75,.1);color:var(--gold);border:1px solid rgba(200,168,75,.2)} .cbtn-view:hover{background:rgba(200,168,75,.2)} .cbtn-dl{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--black)} .cbtn-dl:hover{box-shadow:0 4px 16px rgba(200,168,75,.3);transform:translateY(-1px)} /* ============================================================ APP DOWNLOAD SECTION ============================================================ */ #app{ background:radial-gradient(ellipse at 50% 0%,rgba(139,26,26,.12) 0%,var(--black) 60%), var(--black) } .app-layout{ display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center } .app-phone{ display:flex;justify-content:center;position:relative } .phone-frame{ width:240px;height:480px; background:linear-gradient(145deg,#2a2a2a,#1a1a1a); border-radius:36px;border:2px solid rgba(255,255,255,.1); position:relative;overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.1); animation:phoneFloat 4s ease-in-out infinite } @keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .phone-notch{ position:absolute;top:10px;left:50%;transform:translateX(-50%); width:80px;height:22px;background:#111;border-radius:0 0 12px 12px; z-index:2 } .phone-screen{ position:absolute;inset:0; background:linear-gradient(135deg,#0a0a0a,#1a1a1a); display:flex;flex-direction:column;align-items:center;padding:50px 16px 20px } .phone-logo{ font-family:var(--font-display);font-size:1.4rem;letter-spacing:3px; color:var(--gold);margin-bottom:4px } .phone-sublabel{ font-size:.5rem;letter-spacing:2px;color:var(--cream-dim);margin-bottom:16px } .phone-vinyl{ width:80px;height:80px;border-radius:50%; background:radial-gradient(circle,#333 0%,#000 20%,#222 21%,#111 40%,#1c1c1c 41%,#000 58%,#2a2a2a 59%,#111 100%); animation:vinylSpin 3s linear infinite; margin-bottom:12px; box-shadow:0 0 0 2px var(--gold-dark) } .phone-track{ font-size:.55rem;color:var(--cream-dim);margin-bottom:4px;text-align:center } .phone-trackname{ font-size:.7rem;color:var(--cream);font-weight:600;margin-bottom:12px;text-align:center } .phone-progress{ width:100%;height:2px;background:rgba(255,255,255,.1);border-radius:1px;margin-bottom:8px } .phone-progress-fill{ width:60%;height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold)); border-radius:1px } .phone-controls{ display:flex;gap:16px;align-items:center;margin-bottom:12px } .phone-controls i{color:var(--cream-dim);font-size:.75rem} .phone-controls .ph-play{ width:28px;height:28px;border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex;align-items:center;justify-content:center; color:var(--black);font-size:.8rem } .phone-menu{ display:flex;justify-content:space-around;width:100%;margin-top:auto } .phone-menu i{color:var(--cream-dim);font-size:.85rem} .phone-menu .active i{color:var(--gold)} .app-glow{ position:absolute; width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,rgba(200,168,75,.12),transparent 70%); top:50%;left:50%;transform:translate(-50%,-50%); pointer-events:none } .app-info h2{ font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem); letter-spacing:3px;color:var(--cream);margin-bottom:16px;line-height:1.1 } .app-info h2 span{color:var(--gold)} .app-info p{ font-size:.9rem;color:var(--cream-dim);line-height:1.8;margin-bottom:32px } .app-features{ display:flex;flex-direction:column;gap:12px;margin-bottom:36px } .app-feat{ display:flex;align-items:center;gap:12px; font-size:.82rem;color:var(--cream-dim) } .app-feat i{color:var(--gold);width:16px;text-align:center} .store-btns{display:flex;gap:16px;flex-wrap:wrap} .store-btn{ display:flex;align-items:center;gap:12px; background:var(--glass);border:1px solid var(--glass-border); padding:12px 20px;border-radius:10px;transition:all .3s } .store-btn:hover{ border-color:var(--gold);background:rgba(200,168,75,.08); transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3) } .store-btn i{font-size:1.6rem;color:var(--cream)} .store-btn-text{display:flex;flex-direction:column} .store-btn-text small{ font-size:.58rem;letter-spacing:1px;color:var(--cream-dim);text-transform:uppercase } .store-btn-text span{font-size:.9rem;font-weight:700;color:var(--cream)} .pwa-install{ display:flex;align-items:center;gap:10px; font-size:.75rem;color:var(--gold);cursor:pointer; margin-top:16px;padding:10px 16px;border-radius:8px; border:1px dashed rgba(200,168,75,.3);transition:all .2s;width:fit-content } .pwa-install:hover{background:rgba(200,168,75,.08)} /* ============================================================ ABOUT SECTION ============================================================ */ #about{background:var(--black2)} .about-grid{ display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start } .about-text h2{ font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem); letter-spacing:3px;color:var(--cream);line-height:1.1;margin-bottom:20px } .about-text h2 span{color:var(--gold)} .about-text p{ font-size:.88rem;color:var(--cream-dim);line-height:1.9;margin-bottom:16px } .about-highlight{ background:rgba(200,168,75,.06);border-left:3px solid var(--gold); padding:16px 20px;border-radius:0 8px 8px 0; font-style:italic;font-family:var(--font-serif); color:var(--cream);font-size:1rem;line-height:1.7;margin:24px 0 } .labels-stack{display:flex;flex-direction:column;gap:20px} .label-card{ background:var(--glass);border:1px solid var(--glass-border); border-radius:14px;padding:24px } .label-card:hover{border-color:rgba(200,168,75,.4)} .label-card-header{ display:flex;align-items:center;gap:14px;margin-bottom:12px } .label-icon{ width:44px;height:44px;border-radius:10px; background:rgba(200,168,75,.1); display:flex;align-items:center;justify-content:center; color:var(--gold);font-size:1.2rem } .label-card h3{ font-family:var(--font-display);font-size:1.1rem; letter-spacing:2px;color:var(--gold) } .label-card h3 small{ display:block;font-size:.6rem;color:var(--cream-dim); font-family:var(--font-body);letter-spacing:1px;margin-top:2px } .label-card p{font-size:.78rem;color:var(--cream-dim);line-height:1.6} .label-card .label-badge{ display:inline-block;margin-top:10px; background:rgba(74,144,164,.15);color:var(--steel); font-size:.6rem;letter-spacing:1px;padding:3px 10px;border-radius:4px;font-weight:600 } /* ============================================================ FOOTER ============================================================ */ footer{ background:var(--black);border-top:1px solid rgba(200,168,75,.1); padding:64px 40px 32px } .footer-grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px; max-width:1200px;margin:0 auto 48px; } .footer-brand h3{ font-family:var(--font-display);font-size:2rem;letter-spacing:4px; color:var(--gold);margin-bottom:4px } .footer-brand .sub{ font-size:.65rem;letter-spacing:3px;color:var(--cream-dim);margin-bottom:16px } .footer-brand p{ font-size:.8rem;color:var(--cream-dim);line-height:1.7; max-width:300px;margin-bottom:20px } .footer-social{display:flex;gap:10px} .social-btn{ width:36px;height:36px;border-radius:8px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center; color:var(--cream-dim);font-size:.85rem;transition:all .2s } .social-btn:hover{background:rgba(200,168,75,.15);color:var(--gold);border-color:rgba(200,168,75,.3)} .footer-col h4{ font-size:.65rem;letter-spacing:3px;text-transform:uppercase; color:var(--gold);margin-bottom:16px;font-weight:600 } .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px} .footer-col ul li a{ font-size:.78rem;color:var(--cream-dim);transition:color .2s } .footer-col ul li a:hover{color:var(--gold)} .footer-bottom{ max-width:1200px;margin:0 auto; padding-top:24px;border-top:1px solid rgba(255,255,255,.05); display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:12px } .footer-bottom p{font-size:.72rem;color:var(--cream-dim)} .footer-bottom .rights{color:var(--gold-dark)} /* ============================================================ CHAT WIDGET ============================================================ */ #chat-widget{ position:fixed;bottom:24px;right:24px;z-index:2000 } #chat-toggle{ width:56px;height:56px;border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); border:none;display:flex;align-items:center;justify-content:center; font-size:1.3rem;color:var(--black);cursor:pointer; box-shadow:0 8px 24px rgba(200,168,75,.4); transition:all .3s;position:relative } #chat-toggle:hover{transform:scale(1.08);box-shadow:0 12px 32px rgba(200,168,75,.5)} .chat-dot{ position:absolute;top:2px;right:2px; width:14px;height:14px;border-radius:50%; background:#22c55e;border:2px solid var(--black); animation:chatPulse 2s infinite } @keyframes chatPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}} #chat-panel{ position:absolute;bottom:68px;right:0; width:320px;height:460px; background:var(--black3);border:1px solid var(--glass-border); border-radius:16px;overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6); display:none;flex-direction:column; animation:chatSlide .2s ease } @keyframes chatSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} #chat-panel.open{display:flex} .chat-header{ background:rgba(200,168,75,.08);border-bottom:1px solid var(--glass-border); padding:14px 16px;display:flex;align-items:center;gap:10px } .chat-avatar{ width:36px;height:36px;border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex;align-items:center;justify-content:center; color:var(--black);font-size:.9rem;flex-shrink:0 } .chat-header-info{flex:1} .chat-header-info strong{ display:block;font-size:.85rem;color:var(--cream) } .chat-header-info span{ font-size:.68rem;color:#22c55e; display:flex;align-items:center;gap:4px } .chat-header-info span::before{ content:'';width:6px;height:6px;border-radius:50%;background:#22c55e } .chat-close{ background:none;border:none;color:var(--cream-dim); font-size:1.1rem;cursor:pointer;padding:4px;transition:color .2s } .chat-close:hover{color:var(--crimson-bright)} .chat-messages{ flex:1;overflow-y:auto;padding:16px; display:flex;flex-direction:column;gap:12px } .chat-messages::-webkit-scrollbar{width:3px} .chat-messages::-webkit-scrollbar-thumb{background:var(--gold-dark)} .msg{display:flex;flex-direction:column;gap:4px} .msg.bot{align-items:flex-start} .msg.user{align-items:flex-end} .msg-bubble{ max-width:230px;padding:10px 14px;border-radius:12px; font-size:.78rem;line-height:1.5 } .msg.bot .msg-bubble{ background:rgba(255,255,255,.06);color:var(--cream); border-radius:4px 12px 12px 12px } .msg.user .msg-bubble{ background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--black);font-weight:600; border-radius:12px 4px 12px 12px } .msg-time{font-size:.6rem;color:var(--cream-dim)} .typing-indicator{ display:flex;gap:4px;align-items:center;padding:10px 14px; background:rgba(255,255,255,.06);border-radius:4px 12px 12px 12px; width:fit-content } .typing-dot{ width:6px;height:6px;border-radius:50%; background:var(--cream-dim); animation:typingBounce .8s ease-in-out infinite } .typing-dot:nth-child(2){animation-delay:.15s} .typing-dot:nth-child(3){animation-delay:.3s} @keyframes typingBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}} .chat-input-row{ padding:12px;border-top:1px solid var(--glass-border); display:flex;gap:8px;background:rgba(0,0,0,.2) } #chatInput{ flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1); color:var(--cream);padding:10px 14px;border-radius:8px; font-size:.8rem;outline:none;resize:none; transition:border-color .2s } #chatInput:focus{border-color:var(--gold)} #chatSend{ width:38px;height:38px;border-radius:8px; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); border:none;display:flex;align-items:center;justify-content:center; color:var(--black);font-size:.9rem;cursor:pointer;flex-shrink:0; align-self:flex-end;transition:all .2s } #chatSend:hover{transform:scale(1.05)} /* ============================================================ MODAL ============================================================ */ .modal-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.85); z-index:3000;display:none;align-items:center;justify-content:center; padding:20px;backdrop-filter:blur(8px) } .modal-overlay.open{display:flex} .modal-box{ background:var(--black3);border:1px solid var(--glass-border); border-radius:16px;width:100%;max-width:720px;max-height:90vh; overflow:hidden;display:flex;flex-direction:column } .modal-header{ padding:20px 24px;background:rgba(200,168,75,.06); border-bottom:1px solid var(--glass-border); display:flex;align-items:center;gap:12px } .modal-header h3{ font-family:var(--font-display);letter-spacing:2px;font-size:1.3rem; color:var(--gold);flex:1 } .modal-close{ background:none;border:none;color:var(--cream-dim); font-size:1.2rem;cursor:pointer;padding:4px;transition:color .2s } .modal-close:hover{color:var(--crimson-bright)} .modal-body{ flex:1;overflow-y:auto;padding:28px 24px; font-size:.82rem;line-height:1.9;color:var(--cream-dim) } .modal-body::-webkit-scrollbar{width:4px} .modal-body::-webkit-scrollbar-thumb{background:var(--gold-dark)} .modal-body h4{ font-family:var(--font-display);letter-spacing:2px;color:var(--gold); font-size:1rem;margin:20px 0 8px } .modal-body p{margin-bottom:10px} .modal-body ol,.modal-body ul{ padding-left:20px;margin-bottom:10px } .modal-body li{margin-bottom:6px} .modal-footer{ padding:16px 24px;border-top:1px solid var(--glass-border); display:flex;gap:12px;justify-content:flex-end; background:rgba(0,0,0,.2) } /* ============================================================ UPLOAD PROGRESS ============================================================ */ #uploadProgress{ display:none;margin-top:16px } .progress-bar-wrap{ height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-bottom:8px } .progress-bar-fill{ height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold)); border-radius:3px;width:0%;transition:width .3s } .progress-label{font-size:.72rem;color:var(--cream-dim);text-align:right} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ .dist-grid{grid-template-columns:repeat(2,1fr)} .contracts-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} } @media(max-width:768px){ #nav{padding:12px 20px} .nav-links{display:none} #hamburger{display:flex} section{padding:64px 20px} .hero-content{padding:0 20px} .player-grid,.radio-grid,.bmi-layout,.app-layout,.about-grid{grid-template-columns:1fr} .upload-meta-form{grid-template-columns:1fr} .contracts-grid{grid-template-columns:1fr} .dist-grid{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr 1fr} .ditto-highlight{flex-direction:column} .hero-bg-vinyl{width:400px;height:400px;right:-80px;opacity:.25} #chat-panel{width:290px} .bmi-circle{width:240px;height:240px} .bmi-orbit-1{width:280px;height:280px} .bmi-orbit-2{width:320px;height:320px} } @media(max-width:480px){ .dist-grid,.footer-grid{grid-template-columns:1fr} .hero-btns,.store-btns{flex-direction:column} .hero-badges{gap:16px} } /* Mobile Nav Menu */ #mobile-menu{ display:none;position:fixed;inset:0;background:rgba(8,8,8,.97); z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:32px } #mobile-menu.open{display:flex} #mobile-menu a{ font-family:var(--font-display);font-size:2.5rem;letter-spacing:4px; color:var(--cream-dim);transition:color .2s } #mobile-menu a:hover{color:var(--gold)}
Music Radio Upload Distribute BMI Contracts App About
BMI Affiliated · Samson, Alabama

CWKRECORDS

Knowles Music Publishing

Where authentic Southern soul meets psychedelic sound. Home of Poor-Boys Record Label — publishing, protecting, and distributing original music worldwide through Ditto Music, SoundCloud, Tidal, Spotify, Apple Music, and beyond.

BMIAffiliated
∞Distribution
100%Royalties Protected
ALBased

Cecil Knowles on Tidal

TIDAL — Cecil Knowles

⟳ LOOP ON

Stream Cecil Knowles on Tidal — HiFi lossless quality. Music published through Knowles Music Publishing (BMI). All rights reserved © Cecil Wayne Knowles / Poor-Boys Record Label.

SoundCloud — Unknown Album

⟳ LOOP ON

Listen to Unknown — the debut album from Cecil Knowles. Available on SoundCloud and all major platforms via Ditto Music distribution. Features original psychedelic rock in the 1968 style.

iHeart Radio

Tune in to iHeart Radio for classic rock, soul, blues, and psychedelic sounds. Hear music from Cecil Knowles and artists on Poor-Boys Record Label.

Search Cecil Knowles on iHeart

iHeart Artist Profile

Get your music featured on iHeart Radio stations. Submit through our distribution pipeline via Ditto Music for maximum radio exposure.

Artist Hub

Submit to Stations

Poor-Boys Record Label artists can submit new releases for iHeart Radio station consideration. Contact our A&R department through the chat widget.

Contact A&R

iHeart Podcast Network

Launch your music podcast on the iHeart Podcast Network — available to CWKRECORDS artists and affiliates.

Podcast Network

Genre: Classic Rock & Soul

Our catalog spans psychedelic 1968-era rock, Southern soul, R&B blues, and original compositions. Tune into the stations that match our sound.

Classic Rock Station

Upload Your Music

Drop Your Track Here
Drag & drop audio files or click to browse
MP3 WAV FLAC AIFF M4A OGG 320kbps+
Browse Files
Uploading... 0%

Distribution Network

Primary Distributor — Ditto Music

CWKRECORDS distributes all Knowles Music Publishing and Poor-Boys Record Label releases through Ditto Music — delivering music to 200+ streaming platforms and digital stores worldwide, with 100% royalty retention and full ISRC/UPC assignment.

Visit Ditto Music
BMI
Broadcast Music Inc.
AFFILIATED

Royalties. Rights. Recognition.

Knowles Music Publishing is a fully registered BMI-affiliated publisher. Every composition, recording, and lyric released under CWKRECORDS and Poor-Boys Record Label is protected by BMI performance rights — ensuring Cecil Knowles and all affiliated songwriters receive royalties every time their music is performed, broadcast, or streamed.

Access BMI Portal

Artist Contracts

All contracts are prepared for Knowles Music Publishing (BMI) and Poor-Boys Record Label, Samson, Alabama. View, download, and print below.

Recording Artist Agreement

Standard exclusive recording contract for new artists signing with Poor-Boys Record Label. Covers recordings, masters, royalty splits, and release obligations.

BMI LEGAL STANDARD

Songwriter / Publishing Agreement

Single-song or co-publishing agreement administered through Knowles Music Publishing (BMI). Covers composition rights, mechanical royalties, and sync licensing.

BMI LEGAL

Producer / Beat Licensing Agreement

Exclusive or non-exclusive producer agreement covering beat licensing, production royalties, and co-writing credits under Poor-Boys Record Label productions.

LEGAL STANDARD

Co-Writer Agreement

Agreement for collaborative songwriting sessions. Defines percentage splits, BMI co-registration, and ownership of jointly created compositions.

BMI STANDARD

Distribution & Royalty Agreement

Agreement governing distribution of recordings through Ditto Music and third-party platforms including SoundCloud, Spotify, Apple Music, and TIDAL.

LEGAL DITTO

AI-Generated Content License

Proprietary license asserting ownership of AI-assisted compositions and creative works under Knowles Music Publishing. Defines AI authorship policy and rights assertion.

BMI PROPRIETARY
RECORDS · POOR-BOYS
CURRENTLY PLAYING
All Lit Up And Ready
Cecil Knowles
1:243:47

The Official
CWKRECORDS App

Stream Cecil Knowles and all Poor-Boys Record Label artists, manage your artist account, upload tracks, access contracts, and stay connected — all from your phone.

Stream Cecil Knowles & Poor-Boys Label catalog
Upload tracks directly to CWKRECORDS
Sign and download artist contracts
Track royalties & BMI distributions
Real-time A&R messaging & chat
Built-in iHeart Radio integration
Secure artist portal login
Install as App (PWA) — No App Store Required

Cecil Wayne Knowles
& CWKRECORDS

Born from the red clay and pine forests of Samson, Alabama, CWKRECORDS represents the creative life's work of Cecil Wayne Knowles — musician, songwriter, and music publisher operating at the intersection of classic soul, blues, and psychedelic rock.

"Music is the one thing that can't be taken away from you once it's in your soul. Every track we put out carries that Alabama authenticity."
— Cecil Wayne Knowles

Under the CWKRECORDS umbrella, Knowles Music Publishing (BMI-affiliated) handles all publishing rights and royalty administration, while Poor-Boys Record Label serves as the official recording imprint — releasing music distributed worldwide through Ditto Music with SoundCloud as the primary streaming home.

The catalog spans original psychedelic rock in the 1968 tradition, soulful R&B ballads, electric blues, and introspective singer-songwriter compositions. CWKRECORDS is actively signing new artists to the Poor-Boys roster — bringing Southern authenticity to a global audience.

Sign with CWKRECORDS

Knowles Music PublishingDBA · Samson, Alabama

BMI-affiliated music publishing company handling copyright registration, royalty collection, sync licensing, and mechanical licensing for all compositions by Cecil Wayne Knowles and affiliated songwriters.

BMI PUBLISHER

Poor-Boys Record LabelSub-Label of CWKRECORDS

The recording imprint of CWKRECORDS. Releasing authentic Southern music worldwide. Distributed through Ditto Music and SoundCloud. Home to artist Cecil Knowles and an expanding roster of original talent.

ACTIVE LABEL

Distribution PartnersGlobal Reach via Ditto

Music reaches 200+ platforms including Spotify, Apple Music, TIDAL, Amazon Music, YouTube Music, Pandora, iHeart, Deezer, and more — through Ditto Music with full ISRC/UPC control and 100% royalty retention.

200+ PLATFORMS
CWKRECORDS A&R Online now
👋 Welcome to CWKRECORDS! I'm your A&R assistant. How can I help you today?
Just now
Ask me about signing with Poor-Boys Record Label, artist contracts, music uploads, BMI publishing, or our distribution network.
Just now