/* ============================================================ § 1 · DESIGN TOKENS & CSS CUSTOM PROPERTIES ============================================================ */ :root { /* Color Palette */ --c-black: #080808; --c-black-pure: #000000; --c-charcoal-deep: #0d0d0d; --c-charcoal: #141414; --c-charcoal-mid: #1a1a1a; --c-charcoal-light:#232323; --c-gold: #c2a04e; --c-gold-bright: #d4b565; --c-gold-dim: rgba(194,160,78,.10); --c-gold-border: rgba(194,160,78,.18); --c-gold-glow: rgba(194,160,78,.04); --c-white: #ede9df; --c-white-70: rgba(237,233,223,.70); --c-white-50: rgba(237,233,223,.50); --c-white-30: rgba(237,233,223,.30); --c-white-15: rgba(237,233,223,.15); --c-white-08: rgba(237,233,223,.08); --c-white-04: rgba(237,233,223,.04); /* Typography */ --ff-display: 'Bebas Neue', sans-serif; --ff-serif: 'Cormorant Garamond', serif; --ff-body: 'Inter', sans-serif; /* Easing */ --ease-smooth: cubic-bezier(.25,.46,.45,.94); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: .25s; --t-med: .5s; --t-slow: .85s; /* Layout */ --container: 1300px; --gutter: clamp(1.25rem,4vw,4rem); --section-y: clamp(4rem,8vw,9rem); } /* ============================================================ § 2 · RESET & BASE ============================================================ */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; overflow-x:hidden; font-size:16px; } body { font-family: var(--ff-body); background: var(--c-black); color: var(--c-white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } ::selection { background:var(--c-gold); color:var(--c-black); } ::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-track { background:var(--c-black); } ::-webkit-scrollbar-thumb { background:var(--c-gold); border-radius:2px; } img, video { max-width:100%; display:block; } a { text-decoration:none; color:inherit; } ul { list-style:none; } button { cursor:pointer; border:none; background:none; font-family:inherit; } /* ============================================================ § 3 · LAYOUT UTILITIES ============================================================ */ .container { width:100%; max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); } .section-pad { padding-top:var(--section-y); padding-bottom:var(--section-y); } .sep { width:100%; height:1px; background:linear-gradient(to right,transparent,var(--c-gold-border),transparent); } /* ============================================================ § 4 · TYPOGRAPHY UTILITIES ============================================================ */ .u-label { display:block; font-family:var(--ff-body); font-size:.6rem; font-weight:400; letter-spacing:.42rem; text-transform:uppercase; color:var(--c-gold); margin-bottom:.7rem; } .u-divider { width:42px; height:1px; background:var(--c-gold); opacity:.5; margin-bottom:1.6rem; } .u-title { font-family:var(--ff-display); font-size:clamp(2.2rem,4.5vw,3.8rem); letter-spacing:.1rem; line-height:1; color:var(--c-white); margin-bottom:.3rem; } .u-subtitle { font-family:var(--ff-serif); font-size:clamp(.9rem,1.4vw,1.15rem); font-style:italic; font-weight:300; color:var(--c-white-50); margin-bottom:3rem; } /* ============================================================ § 5 · BUTTON COMPONENTS ============================================================ */ .btn { display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.9rem; font-family:var(--ff-body); font-size:.58rem; font-weight:400; letter-spacing:.26rem; text-transform:uppercase; transition:all var(--t-med) var(--ease-smooth); white-space:nowrap; } .btn--gold { border:1px solid var(--c-gold-border); color:var(--c-gold); } .btn--gold:hover { background:var(--c-gold); color:var(--c-black); border-color:var(--c-gold); } .btn--ghost { border:1px solid var(--c-white-15); color:var(--c-white-50); } .btn--ghost:hover { border-color:var(--c-white-70); color:var(--c-white); } /* ============================================================ § 6 · CINEMATIC VISUAL SLOT COMPONENT ============================================================ */ .vis-slot { position:relative; width:100%; height:100%; overflow:hidden; } .vis-slot img, .vis-slot video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; } .vis-art { position:absolute; inset:0; z-index:1; } .vis-slot::after { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.055; 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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ § 7 · CSS ART BACKGROUNDS ============================================================ */ .art--hero { background:linear-gradient(170deg,#0a0a0a 0%,#111 35%,#0e0e0e 70%,#080808 100%); } .art--hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 80% at 62% 85%,rgba(194,160,78,.07) 0%,transparent 60%), radial-gradient(ellipse 40% 60% at 58% 50%,rgba(194,160,78,.04) 0%,transparent 55%), radial-gradient(ellipse 20% 80% at 55% 100%,rgba(194,160,78,.12) 0%,transparent 40%); animation:artHeroPulse 8s ease-in-out infinite alternate; } @keyframes artHeroPulse { 0%{opacity:.6} 100%{opacity:1} } .art--hero::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:clamp(160px,28vw,320px); height:clamp(280px,55vh,580px); background:linear-gradient(to top,rgba(194,160,78,.05) 0%,transparent 70%); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Cellipse cx='100' cy='90' rx='42' ry='52'/%3E%3Cpath d='M38 400 Q30 260 60 210 Q80 185 100 180 Q120 185 140 210 Q170 260 162 400Z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Cellipse cx='100' cy='90' rx='42' ry='52'/%3E%3Cpath d='M38 400 Q30 260 60 210 Q80 185 100 180 Q120 185 140 210 Q170 260 162 400Z'/%3E%3C/svg%3E"); mask-size:contain; mask-repeat:no-repeat; mask-position:bottom center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:bottom center; filter:blur(2px); } .art--about { background:linear-gradient(145deg,#0c0c0c 0%,#181410 50%,#0a0a0a 100%); } .art--about::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 80% 60% at 30% 30%,rgba(194,160,78,.06) 0%,transparent 55%), radial-gradient(ellipse 50% 80% at 70% 90%,rgba(194,160,78,.04) 0%,transparent 50%), linear-gradient(180deg,transparent 0%,rgba(10,8,5,.6) 100%); } .art--about::after { content:''; position:absolute; top:10%; left:20%; width:3px; height:70%; background:linear-gradient(to bottom,transparent,rgba(194,160,78,.15),transparent); filter:blur(4px); } .art--cover-warm { background:linear-gradient(135deg,#0e0c0a 0%,#1a1208 40%,#0c0c0e 100%); } .art--cover-warm::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 70% 70% at 40% 60%,rgba(194,160,78,.09) 0%,transparent 55%), radial-gradient(ellipse 40% 40% at 80% 20%,rgba(194,160,78,.05) 0%,transparent 45%); animation:coverPulse 6s ease-in-out infinite alternate; } .art--cover-cool { background:linear-gradient(145deg,#0a0c10 0%,#0e1018 50%,#080808 100%); } .art--cover-cool::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 80% at 60% 40%,rgba(100,120,180,.06) 0%,transparent 55%), radial-gradient(ellipse 80% 50% at 20% 80%,rgba(194,160,78,.04) 0%,transparent 50%); animation:coverPulse 7s ease-in-out infinite alternate; } .art--cover-deep { background:linear-gradient(160deg,#0c0e0c 0%,#101410 50%,#0a0a0a 100%); } .art--cover-deep::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 50% 90% at 50% 30%,rgba(194,160,78,.05) 0%,transparent 55%), radial-gradient(ellipse 90% 40% at 50% 100%,rgba(194,160,78,.07) 0%,transparent 50%); animation:coverPulse 8s ease-in-out infinite alternate; } .art--cover-dusk { background:linear-gradient(150deg,#0e0a0c 0%,#14090e 50%,#0a0808 100%); } .art--cover-dusk::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 65% 65% at 55% 45%,rgba(160,94,130,.07) 0%,transparent 55%), radial-gradient(ellipse 45% 70% at 25% 85%,rgba(194,160,78,.05) 0%,transparent 50%); animation:coverPulse 9s ease-in-out infinite alternate; } @keyframes coverPulse { 0%{opacity:.5} 100%{opacity:1} } .art--g1{background:linear-gradient(135deg,#0a0a0a 0%,#161210 60%,#0e0c0a 100%);} .art--g1::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 55% 60%,rgba(194,160,78,.08) 0%,transparent 55%),linear-gradient(to top,rgba(10,8,5,.5) 0%,transparent 50%);} .art--g2{background:linear-gradient(160deg,#0c0c0e 0%,#101014 100%);} .art--g2::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 40% 60% at 45% 40%,rgba(194,160,78,.06) 0%,transparent 50%),radial-gradient(ellipse 80% 30% at 50% 100%,rgba(194,160,78,.05) 0%,transparent 45%);} .art--g3{background:linear-gradient(180deg,#0e0c0a 0%,#141210 100%);} .art--g3::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(194,160,78,.04) 0%,transparent 50%,rgba(194,160,78,.03) 100%);} .art--g4{background:linear-gradient(145deg,#0a0e0a 0%,#0e120e 100%);} .art--g4::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(194,160,78,.05) 0%,transparent 55%);} .art--g5{background:linear-gradient(160deg,#0e0a0a 0%,#140e0e 100%);} .art--g5::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 30% 70%,rgba(194,160,78,.06) 0%,transparent 50%);} .art--g6{background:linear-gradient(135deg,#0c0c0a 0%,#161612 100%);} .art--g6::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 60% 50%,rgba(194,160,78,.05) 0%,transparent 55%);} .art-label { position:absolute; bottom:0; left:0; right:0; z-index:4; padding:3rem 1.2rem 1rem; background:linear-gradient(to top,rgba(8,8,8,.8) 0%,transparent 100%); opacity:0; transition:opacity var(--t-med); } .art-label span { font-size:.5rem; letter-spacing:.22rem; text-transform:uppercase; color:var(--c-gold); } .light-beam { position:absolute; pointer-events:none; z-index:2; background:linear-gradient(to bottom,transparent,rgba(194,160,78,.04),transparent); width:1px; filter:blur(3px); } /* ============================================================ § 8 · PRELOADER ============================================================ */ .preloader { position:fixed; inset:0; background:var(--c-black-pure); z-index:99999; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity 1s ease .5s, visibility 1s ease .5s; } .preloader.is-done { opacity:0; visibility:hidden; pointer-events:none; } .preloader__name { font-family:var(--ff-display); font-size:clamp(2rem,5vw,3.5rem); letter-spacing:1.5rem; color:var(--c-gold); animation:plBreathe 2s ease-in-out infinite; } .preloader__bar { width:40px; height:1px; background:var(--c-gold); margin-top:1.5rem; animation:plBar 2s ease-in-out infinite; } @keyframes plBreathe { 0%,100%{opacity:.2} 50%{opacity:1} } @keyframes plBar { 0%,100%{width:40px;opacity:.3} 50%{width:90px;opacity:1} } /* ============================================================ § 9 · NAVIGATION ============================================================ */ .nav { position:fixed; top:0; left:0; width:100%; z-index:9000; padding:1.4rem var(--gutter); display:flex; align-items:center; justify-content:space-between; transition:all var(--t-med) var(--ease-smooth); } .nav.is-scrolled { padding-top:.9rem; padding-bottom:.9rem; background:rgba(8,8,8,.95); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); border-bottom:1px solid var(--c-white-04); } .nav__logo { font-family:var(--ff-display); font-size:1.3rem; letter-spacing:.5rem; color:var(--c-gold); transition:opacity var(--t-fast); } .nav__logo:hover { opacity:.6; } .nav__menu { display:flex; gap:2.5rem; } .nav__link { font-size:.6rem; font-weight:300; letter-spacing:.2rem; text-transform:uppercase; color:var(--c-white-50); position:relative; transition:color var(--t-fast); } .nav__link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--c-gold); transition:width var(--t-med) var(--ease-smooth); } .nav__link:hover { color:var(--c-gold); } .nav__link:hover::after { width:100%; } .nav__burger { display:none; flex-direction:column; gap:5px; padding:4px; z-index:9001; } .nav__burger span { display:block; width:24px; height:1px; background:var(--c-gold); transition:all var(--t-med) var(--ease-smooth); transform-origin:center; } .nav__burger.is-open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); } .nav__burger.is-open span:nth-child(2) { opacity:0; } .nav__burger.is-open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); } .mobile-menu { position:fixed; inset:0; background:rgba(8,8,8,.98); backdrop-filter:blur(40px); z-index:8999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8rem; opacity:0; visibility:hidden; transition:all var(--t-med) ease; } .mobile-menu.is-open { opacity:1; visibility:visible; } .mobile-menu a { font-family:var(--ff-display); font-size:2rem; letter-spacing:.5rem; color:var(--c-white); transition:color var(--t-fast); } .mobile-menu a:hover { color:var(--c-gold); } /* ============================================================ § 10 · HERO SECTION ============================================================ */ .hero { position:relative; width:100%; height:100vh; min-height:600px; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; } .hero__bg { position:absolute; inset:0; z-index:0; } .hero__bg .vis-slot { opacity:.8; } .hero__gradient { position:absolute; inset:0; z-index:2; background:linear-gradient(to bottom, rgba(8,8,8,.5) 0%, rgba(8,8,8,.1) 30%, rgba(8,8,8,.2) 65%, rgba(8,8,8,.96) 100%); } .hero__content { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; padding:0 var(--gutter); max-width:820px; opacity:0; animation:heroReveal 1.4s var(--ease-out) forwards; } @keyframes heroReveal { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } } .hero__topline { width:1px; height:45px; background:linear-gradient(to bottom,transparent,var(--c-gold)); margin-bottom:1.8rem; opacity:.5; } .hero__name { font-family:var(--ff-display); font-size:clamp(3rem,9vw,7.5rem); letter-spacing:clamp(.6rem,2.5vw,2rem); line-height:.85; color:var(--c-white); margin-bottom:.5rem; } .hero__tagline { font-family:var(--ff-serif); font-size:clamp(.85rem,1.5vw,1.1rem); font-style:italic; font-weight:300; color:var(--c-gold); letter-spacing:.1rem; margin-bottom:.8rem; } .hero__roles { font-size:clamp(.48rem,.85vw,.62rem); font-weight:300; letter-spacing:.3rem; text-transform:uppercase; color:var(--c-white-50); margin-bottom:2.5rem; } .hero__roles span { color:rgba(237,233,223,.2); margin:0 .05rem; } .hero__actions { display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; } .hero__eq { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:4; display:flex; align-items:flex-end; gap:3px; height:22px; opacity:.18; } .eq-bar { width:1.5px; background:var(--c-gold); border-radius:1px; animation:eqPulse var(--eq-speed,1s) ease-in-out infinite; animation-delay:var(--eq-delay,0s); } @keyframes eqPulse { 0%,100%{height:2px} 50%{height:var(--eq-height,14px)} } .hero__scroll { position:absolute; bottom:1.8rem; right:var(--gutter); z-index:4; display:flex; flex-direction:column; align-items:center; gap:.4rem; } .hero__scroll-text { writing-mode:vertical-rl; font-size:.5rem; letter-spacing:.18rem; text-transform:uppercase; color:var(--c-white-30); } .hero__scroll-line { width:1px; height:28px; background:var(--c-gold); opacity:.5; animation:scrollPulse 2.5s ease-in-out infinite; } @keyframes scrollPulse { 0%,100%{height:12px;opacity:.25} 50%{height:28px;opacity:.7} } /* ============================================================ § 11 · ABOUT SECTION ============================================================ */ .about { background:var(--c-black); } .about__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:center; } .about__image-wrapper { position:relative; } .about__frame { width:100%; aspect-ratio:3/4; position:relative; border:1px solid var(--c-white-04); } .about__corner { position:absolute; width:55px; height:55px; opacity:.35; } .about__corner--tl { top:-12px; left:-12px; border-top:1px solid var(--c-gold); border-left:1px solid var(--c-gold); } .about__corner--br { bottom:-12px; right:-12px; border-bottom:1px solid var(--c-gold); border-right:1px solid var(--c-gold); } .about__heading { font-family:var(--ff-serif); font-size:clamp(1.5rem,2.8vw,2.5rem); font-weight:300; line-height:1.2; color:var(--c-white); margin-bottom:1.5rem; } .about__text { font-size:.88rem; line-height:2; color:var(--c-white-50); font-weight:300; margin-bottom:.8rem; } .skill-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; } .skill-tag { padding:.38rem .95rem; border:1px solid var(--c-gold-border); font-size:.52rem; letter-spacing:.18rem; text-transform:uppercase; color:var(--c-gold); transition:all var(--t-fast); } .skill-tag:hover { background:var(--c-gold-dim); border-color:var(--c-gold); } /* ============================================================ § 12 · RELEASES / MUSIC SECTION ============================================================ */ .releases { background:var(--c-charcoal-deep); } .release-list { display:flex; flex-direction:column; gap:5rem; } .release-card { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; opacity:0; transform:translateY(25px); transition:all var(--t-slow) var(--ease-smooth); } .release-card.is-visible { opacity:1; transform:translateY(0); } .release-card:nth-child(even) { direction:rtl; } .release-card:nth-child(even) > * { direction:ltr; } .release-card__cover { position:relative; width:100%; aspect-ratio:1; overflow:hidden; } .release-card__cover .vis-slot { transition:transform .7s var(--ease-smooth); } .release-card:hover .release-card__cover .vis-slot { transform:scale(1.04); } .release-card__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:50%; border:1px solid var(--c-gold-border); background:rgba(8,8,8,.4); display:flex; align-items:center; justify-content:center; z-index:5; transition:all var(--t-med) var(--ease-smooth); cursor:pointer; } .release-card:hover .release-card__play { background:var(--c-gold); border-color:var(--c-gold); transform:translate(-50%,-50%) scale(1.1); } .release-card__play-icon { width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--c-gold); margin-left:2px; transition:border-color var(--t-fast); } .release-card:hover .release-card__play-icon { border-color:transparent transparent transparent var(--c-black); } .release-card__watermark { position:absolute; bottom:1.2rem; left:1.2rem; font-family:var(--ff-serif); font-size:1rem; font-style:italic; font-weight:300; letter-spacing:.12rem; color:rgba(194,160,78,.12); pointer-events:none; z-index:4; } .release-card__badge { position:absolute; top:1rem; right:1rem; padding:.25rem .7rem; border:1px solid var(--c-gold-border); font-family:var(--ff-body); font-size:.42rem; letter-spacing:.18rem; text-transform:uppercase; color:var(--c-gold); background:rgba(8,8,8,.6); z-index:5; } .release-card__type { font-size:.5rem; letter-spacing:.3rem; text-transform:uppercase; color:var(--c-gold); font-weight:300; margin-bottom:.5rem; } .release-card__title { font-family:var(--ff-serif); font-size:clamp(1.6rem,2.8vw,2.5rem); font-weight:400; letter-spacing:.04rem; line-height:1.15; color:var(--c-white); margin-bottom:.5rem; transition:color var(--t-fast); text-transform:none; } .release-card:hover .release-card__title { color:var(--c-gold); } .release-card__date { font-size:.52rem; letter-spacing:.15rem; color:var(--c-white-30); margin-bottom:.8rem; text-transform:uppercase; } .release-card__desc { font-family:var(--ff-serif); font-size:.97rem; line-height:1.75; color:var(--c-white-50); font-weight:300; margin-bottom:1.4rem; } .release-card__platforms { display:flex; gap:.5rem; flex-wrap:wrap; } .platform-link { padding:.45rem 1rem; border:1px solid var(--c-white-08); font-family:var(--ff-body); font-size:.5rem; letter-spacing:.16rem; text-transform:uppercase; color:var(--c-white-50); transition:all var(--t-fast); display:inline-block; } .platform-link:hover { border-color:var(--c-gold); color:var(--c-gold); } .release-card__wave { display:flex; align-items:center; gap:2px; height:20px; margin-top:1rem; opacity:.15; } .wave-bar { width:1.5px; background:var(--c-gold); border-radius:1px; } /* ============================================================ § 13 · VISUALS / GALLERY SECTION ============================================================ */ .visuals { background:var(--c-black); } .gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:220px; gap:.9rem; } .gallery-item { position:relative; overflow:hidden; cursor:pointer; } .gallery-item:nth-child(1) { grid-column:1/8; grid-row:1/3; } .gallery-item:nth-child(2) { grid-column:8/13; grid-row:1/2; } .gallery-item:nth-child(3) { grid-column:8/13; grid-row:2/3; } .gallery-item:nth-child(4) { grid-column:1/5; grid-row:3/4; } .gallery-item:nth-child(5) { grid-column:5/9; grid-row:3/4; } .gallery-item:nth-child(6) { grid-column:9/13; grid-row:3/4; } .gallery-item:nth-child(n+7) { grid-column:span 4; } .gallery-item .vis-slot { transition:transform .65s var(--ease-smooth); } .gallery-item:hover .vis-slot { transform:scale(1.06); } .gallery-item:hover .art-label { opacity:1; } /* ============================================================ § 14 · AUDIO EXPERIENCE SECTION ============================================================ */ .audio-exp { background:var(--c-charcoal-deep); } .audio-exp__inner { display:flex; flex-direction:column; align-items:center; text-align:center; } .audio-exp__list { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(3rem,6vw,6rem); margin-top:3rem; width:100%; } .audio-exp__item { display:flex; flex-direction:column; align-items:center; text-align:center; } .audio-exp__item .u-title { font-size:clamp(1.4rem, 2.5vw, 2rem); letter-spacing:0.15rem; margin-bottom:0.2rem; } .audio-exp__item .u-subtitle { margin-bottom:1.5rem; font-size:0.9rem; } .audio-exp__wave { display:flex; align-items:center; justify-content:center; gap:2px; height:45px; opacity:.15; } .ambient-bar { width:1.5px; background:var(--c-gold); border-radius:1px; animation:ambientPulse var(--ab-speed,1.5s) ease-in-out infinite; animation-delay:var(--ab-delay,0s); } @keyframes ambientPulse { 0%,100%{height:2px} 50%{height:var(--ab-height,18px)} } .audio-exp__orb { width:120px; height:120px; border-radius:50%; border:1px solid var(--c-gold-border); display:flex; align-items:center; justify-content:center; margin:2rem 0 1.2rem; cursor:pointer; position:relative; transition:all var(--t-med); } .audio-exp__orb::before, .audio-exp__orb::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(194,160,78,.05); pointer-events:none; } .audio-exp__orb::before { width:165px; height:165px; animation:orbPulse 4s ease-in-out infinite; } .audio-exp__orb::after { width:210px; height:210px; animation:orbPulse 4s ease-in-out infinite .7s; } @keyframes orbPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:.3} } .audio-exp__orb:hover { border-color:var(--c-gold); box-shadow:0 0 60px rgba(194,160,78,.08); } .audio-exp__icon { font-family:var(--ff-display); font-size:.85rem; letter-spacing:.2rem; color:var(--c-gold); } .audio-exp__hint { font-size:.5rem; letter-spacing:.35rem; text-transform:uppercase; color:var(--c-white-30); } /* ============================================================ § 15 · SOCIAL SECTION ============================================================ */ .social { background:var(--c-black); } .social__inner { text-align:center; } .social__grid { display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; } .social-card { display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:1.4rem 1.1rem; border:1px solid var(--c-white-04); min-width:95px; position:relative; overflow:hidden; transition:all var(--t-med) var(--ease-smooth); } .social-card::before { content:''; position:absolute; bottom:0; left:0; width:100%; height:0; background:var(--c-gold-dim); transition:height var(--t-med); } .social-card:hover { border-color:var(--c-gold-border); transform:translateY(-3px); } .social-card:hover::before { height:100%; } .social-card__icon { position:relative; z-index:1; } .social-card__icon svg { width:18px; height:18px; fill:var(--c-white-30); transition:fill var(--t-fast); } .social-card:hover .social-card__icon svg { fill:var(--c-gold); } .social-card__name { font-size:.46rem; letter-spacing:.2rem; text-transform:uppercase; color:var(--c-white-30); transition:color var(--t-fast); position:relative; z-index:1; } .social-card:hover .social-card__name { color:var(--c-gold); } /* ============================================================ § 16 · CONTACT SECTION ============================================================ */ .contact { background:var(--c-charcoal-deep); position:relative; overflow:hidden; } .contact__ambient { position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse at 50% 0%,rgba(194,160,78,.03) 0%,transparent 50%), radial-gradient(ellipse at 50% 100%,rgba(194,160,78,.02) 0%,transparent 40%); } .contact__inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; } .contact__heading { font-family:var(--ff-serif); font-size:clamp(1.6rem,3.5vw,2.8rem); font-weight:300; line-height:1.25; color:var(--c-white); margin-bottom:1.4rem; } .contact__desc { max-width:520px; font-family:var(--ff-serif); font-size:clamp(.88rem,1.3vw,1.05rem); font-weight:300; font-style:italic; line-height:1.9; color:var(--c-white-50); margin-bottom:2.5rem; } .contact__services { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:3rem; max-width:620px; } .service-pill { padding:.55rem 1.4rem; border:1px solid var(--c-gold-border); font-family:var(--ff-body); font-size:.5rem; font-weight:400; letter-spacing:.22rem; text-transform:uppercase; color:var(--c-gold); transition:all var(--t-med) var(--ease-smooth); position:relative; overflow:hidden; } .service-pill::before { content:''; position:absolute; inset:0; background:var(--c-gold); transform:scaleX(0); transform-origin:left; transition:transform var(--t-med) var(--ease-smooth); z-index:0; } .service-pill span { position:relative; z-index:1; transition:color var(--t-med); } .service-pill:hover::before { transform:scaleX(1); } .service-pill:hover span { color:var(--c-black); } .contact__divider { width:50px; height:1px; background:var(--c-gold); opacity:.3; margin-bottom:3rem; } .contact__form-wrap { width:100%; max-width:560px; } .form { display:flex; flex-direction:column; gap:1.6rem; } .form__field { position:relative; } .form__input, .form__select, .form__textarea { width:100%; padding:1rem 0; background:transparent; border:none; border-bottom:1px solid var(--c-white-08); color:var(--c-white); font-family:var(--ff-body); font-size:.82rem; font-weight:300; letter-spacing:.03rem; outline:none; transition:border-color var(--t-med) var(--ease-smooth); -webkit-appearance:none; appearance:none; } .form__select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c2a04e' stroke-width='1' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .2rem center; padding-right:1.5rem; } .form__select option { background:var(--c-charcoal); color:var(--c-white); } .form__textarea { resize:vertical; min-height:100px; } .form__input:focus, .form__select:focus, .form__textarea:focus { border-bottom-color:var(--c-gold); } .form__label { position:absolute; top:1rem; left:0; font-size:.58rem; letter-spacing:.16rem; text-transform:uppercase; color:var(--c-white-30); pointer-events:none; transition:all var(--t-med) var(--ease-smooth); } .form__input:focus ~ .form__label, .form__input:not(:placeholder-shown) ~ .form__label, .form__textarea:focus ~ .form__label, .form__textarea:not(:placeholder-shown) ~ .form__label { top:-.7rem; font-size:.45rem; color:var(--c-gold); } .form__reveal { overflow:hidden; max-height:0; opacity:0; transform:translateY(-6px); margin-top:0; transition:max-height .5s var(--ease-smooth), opacity .4s var(--ease-smooth), transform .4s var(--ease-smooth), margin .4s var(--ease-smooth); } .form__reveal.is-open { max-height:120px; opacity:1; transform:translateY(0); margin-top:1.2rem; } .form__reveal .form__input { border-bottom-color:rgba(194,160,78,.12); } .form__reveal .form__input:focus { border-bottom-color:var(--c-gold); } .form__reveal .form__label { color:rgba(194,160,78,.5); } .form__reveal .form__input:focus ~ .form__label, .form__reveal .form__input:not(:placeholder-shown) ~ .form__label { top:-.7rem; font-size:.45rem; color:var(--c-gold); } .form__submit-wrap { display:flex; justify-content:center; margin-top:.5rem; } .form__submit { padding:.9rem 2.8rem; border:1px solid var(--c-gold-border); background:transparent; font-family:var(--ff-body); font-size:.58rem; font-weight:400; letter-spacing:.3rem; text-transform:uppercase; color:var(--c-gold); cursor:pointer; transition:all var(--t-med) var(--ease-smooth); position:relative; overflow:hidden; min-width:200px; } .form__submit::before { content:''; position:absolute; inset:0; background:var(--c-gold); transform:scaleY(0); transform-origin:bottom; transition:transform var(--t-med) var(--ease-smooth); z-index:0; } .form__submit-text { position:relative; z-index:1; transition:color var(--t-med); display:flex; align-items:center; justify-content:center; gap:.5rem; } .form__submit:hover::before { transform:scaleY(1); } .form__submit:hover .form__submit-text { color:var(--c-black); } .form__submit:disabled { opacity:.5; pointer-events:none; } .form__spinner { width:12px; height:12px; border-radius:50%; border:1px solid rgba(194,160,78,.3); border-top-color:var(--c-gold); animation:spin .8s linear infinite; display:none; } .form__submit.is-loading .form__spinner { display:block; } .form__submit.is-loading .form__submit-label { display:none; } @keyframes spin { to { transform:rotate(360deg); } } .form-success { display:none; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding:2.5rem 0; animation:successReveal .8s var(--ease-out) forwards; } .form-success.is-shown { display:flex; } @keyframes successReveal { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } } .form-success__icon { width:50px; height:50px; border-radius:50%; border:1px solid var(--c-gold); display:flex; align-items:center; justify-content:center; } .form-success__icon svg { width:22px; height:22px; stroke:var(--c-gold); fill:none; stroke-width:2; } .form-success__title { font-family:var(--ff-serif); font-size:1.2rem; font-weight:400; color:var(--c-gold); } .form-success__text { font-size:.8rem; font-weight:300; color:var(--c-white-50); line-height:1.7; } .form-error { display:none; align-items:center; justify-content:center; gap:.6rem; margin-top:1rem; padding:.75rem 1.2rem; border:1px solid rgba(200,80,80,.2); background:rgba(200,80,80,.04); } .form-error.is-shown { display:flex; } .form-error__icon { color:rgba(220,100,100,.7); font-size:.85rem; flex-shrink:0; } .form-error__text { font-size:.58rem; letter-spacing:.08rem; color:rgba(237,233,223,.5); text-align:left; line-height:1.5; } .contact__email-block { margin-top:2.8rem; display:flex; flex-direction:column; align-items:center; gap:.8rem; } .contact__email-label { font-size:.5rem; letter-spacing:.4rem; text-transform:uppercase; color:var(--c-white-30); } .contact__email-link { display:inline-flex; align-items:center; gap:.7rem; padding:.7rem 1.6rem; border:1px solid var(--c-gold-border); color:var(--c-gold-bright); font-family:var(--ff-body); font-size:clamp(.75rem,1.2vw,.88rem); font-weight:300; letter-spacing:.08rem; transition:all var(--t-med) var(--ease-smooth); position:relative; overflow:hidden; cursor:pointer; } .contact__email-link::before { content:''; position:absolute; inset:0; background:var(--c-gold-dim); transform:scaleX(0); transform-origin:left; transition:transform var(--t-med) var(--ease-smooth); } .contact__email-link:hover { border-color:var(--c-gold); color:var(--c-white); box-shadow:0 0 30px rgba(194,160,78,.06); transform:translateY(-1px); } .contact__email-link:hover::before { transform:scaleX(1); } .contact__email-icon { position:relative; z-index:1; display:flex; align-items:center; opacity:.6; transition:opacity var(--t-fast); flex-shrink:0; } .contact__email-link:hover .contact__email-icon { opacity:1; } .contact__email-icon svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; } .contact__email-text { position:relative; z-index:1; } /* ============================================================ § 17 · FOOTER ============================================================ */ .footer { background:var(--c-black); padding:3rem var(--gutter); text-align:center; } .footer__logo { font-family:var(--ff-display); font-size:1.1rem; letter-spacing:.6rem; color:var(--c-gold); opacity:.4; margin-bottom:.8rem; } .footer__copy { font-size:.55rem; letter-spacing:.2rem; color:rgba(237,233,223,.15); text-transform:uppercase; } /* ============================================================ § 18 · SCROLL REVEAL ANIMATION ============================================================ */ .reveal { opacity:0; transform:translateY(22px); transition:all var(--t-slow) var(--ease-smooth); } .reveal.is-visible { opacity:1; transform:translateY(0); } .reveal--d1 { transition-delay:.1s; } .reveal--d2 { transition-delay:.2s; } .reveal--d3 { transition-delay:.3s; } .reveal--d4 { transition-delay:.4s; } .reveal--d5 { transition-delay:.5s; } /* ============================================================ § 19 · AMBIENT PARTICLES ============================================================ */ .particles { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; } .particle { position:absolute; background:var(--c-gold); border-radius:50%; opacity:0; animation:particleDrift var(--p-speed,20s) linear infinite; animation-delay:var(--p-delay,0s); } @keyframes particleDrift { 0% { opacity:0; transform:translateY(100vh) scale(.4); } 6% { opacity:.18; } 94% { opacity:.05; } 100% { opacity:0; transform:translateY(-5vh) scale(1); } } /* ============================================================ § 20 · RESPONSIVE STYLES ============================================================ */ @media (max-width:1100px) { .gallery-grid { grid-template-columns:1fr 1fr; grid-auto-rows:240px; } .gallery-item:nth-child(n) { grid-column:auto; grid-row:auto; } } @media (max-width:900px) { .about__grid { grid-template-columns:1fr; gap:2.5rem; } .about__frame { max-width:380px; margin:0 auto; } .release-card { grid-template-columns:1fr; gap:1.5rem; } .release-card:nth-child(even) { direction:ltr; } .release-card__cover { max-width:420px; margin:0 auto; width:100%; } } @media (max-width:768px) { .nav__menu { display:none; } .nav__burger { display:flex; } .hero__actions { flex-direction:column; align-items:center; width:100%; } .hero__actions .btn { width:100%; max-width:240px; } .hero__scroll { display:none; } .gallery-grid { grid-template-columns:1fr 1fr; grid-auto-rows:180px; gap:.6rem; } .social__grid { gap:.6rem; } .social-card { min-width:78px; padding:1.1rem .8rem; } .contact__services { gap:.4rem; } .service-pill { padding:.45rem 1rem; font-size:.47rem; } .release-card__title { font-size:clamp(1.4rem,5vw,2rem); } } @media (max-width:520px) { .hero__name { font-size:clamp(2.4rem,13vw,3.2rem); letter-spacing:clamp(.4rem,2vw,1rem); } .hero__roles { letter-spacing:.18rem; } .skill-tags { justify-content:center; } .release-card__platforms { justify-content:center; } .gallery-grid { grid-template-columns:1fr; grid-auto-rows:200px; } .contact__heading { font-size:clamp(1.4rem,5vw,1.8rem); } .contact__services { flex-direction:column; align-items:center; } .service-pill { width:100%; max-width:260px; text-align:center; } .contact__email-link { font-size:.7rem; } }
TOUFIK

T O U F I K

One Man Music Industry

Singer • Rapper • Songwriter • Producer • Audio Engineer

Explore Music Watch Visuals Contact
The Artist

"One Man. Every Role."

I make music the way I feel it — emotional, cinematic, personal, and real.

From writing and recording to production, mixing, and visuals, everything is built independently to create a complete artistic experience.

The Releases

THE RELEASES

"A world behind every sound."

The Visuals

VISUAL UNIVERSE

"Every frame tells a story."

Audio Experience

FEEL THE SOUND

"Close your eyes. Press play."

Get In Touch

LET'S BUILD SOMETHING REAL.

Built for emotion, atmosphere, and real connection through sound.
Available for vocal work, songwriting, production, and creative collaborations.

Inquiry Sent Successfully
Your inquiry has been sent successfully.
TOUFIK will reach out through email soon.