/*========================================== */ :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)}
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.
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.
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.
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 MusicKnowles 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.
Main portal — bmi.com
Manage works, catalog, and royalty payments
Register compositions under Knowles Music Publishing
Performance, digital, and sync royalty details
Sync licensing, TV/film, advertising placements
All contracts are prepared for Knowles Music Publishing (BMI) and Poor-Boys Record Label, Samson, Alabama. View, download, and print below.
Standard exclusive recording contract for new artists signing with Poor-Boys Record Label. Covers recordings, masters, royalty splits, and release obligations.
Single-song or co-publishing agreement administered through Knowles Music Publishing (BMI). Covers composition rights, mechanical royalties, and sync licensing.
Exclusive or non-exclusive producer agreement covering beat licensing, production royalties, and co-writing credits under Poor-Boys Record Label productions.
Agreement for collaborative songwriting sessions. Defines percentage splits, BMI co-registration, and ownership of jointly created compositions.
Agreement governing distribution of recordings through Ditto Music and third-party platforms including SoundCloud, Spotify, Apple Music, and TIDAL.
Proprietary license asserting ownership of AI-assisted compositions and creative works under Knowles Music Publishing. Defines AI authorship policy and rights assertion.
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.
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.
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 CWKRECORDSBMI-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 PUBLISHERThe 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 LABELMusic 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