* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: #111;
background: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.site-header {
height: 92px;
width: 100%;
display: flex;
align-items: center;
padding: 0 5vw;
border-bottom: 1px solid #eee;
gap: 4vw;
background: #fff;
}
.brand {
width: 250px;
height: 62px;
overflow: hidden;
display: flex;
align-items: center;
}
.brand img {
width: 100%;
height: 100%;
object-fit: contain;
}
.site-header nav {
display: flex;
gap: 38px;
margin-left: auto;
}
.site-header nav a {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
color: #222;
padding: 14px 0;
}
.site-header nav a.active {
border-bottom: 2px solid #111;
}
.social {
display: flex;
gap: 18px;
align-items: center;
}
.top {
font-size: 18px;
}
.menu {
display: none;
background: none;
border: 0;
font-size: 32px;
}
.hero {
min-height: 560px;
padding: 30px 7vw 35px;
display: grid;
grid-template-columns: 1.08fr 0.92fr;
align-items: center;
gap: 6vw;
background: radial-gradient(circle at 32% 42%, #fff 0, #fafafa 45%, #f4f4f4 100%);
}
.hero-copy {
text-align: center;
}
.hero-logo {
width: min(610px, 100%);
height: 330px;
object-fit: contain;
filter: drop-shadow(0 14px 12px #aaa);
}
.hero-copy p {
font-size: 12px;
letter-spacing: 5px;
line-height: 1.7;
}
.form-card {
max-width: 570px;
width: 100%;
margin: auto;
background: rgba(255, 255, 255, 0.9);
border-radius: 18px;
padding: 30px 34px;
box-shadow: 0 12px 40px #ddd;
}
.form-card h1 {
text-align: center;
font-size: 27px;
margin: 0 0 2px;
}
.form-card h3 {
text-align: center;
font-size: 13px;
font-weight: 400;
margin: 0;
}
.form-card > p {
text-align: center;
color: #999;
font-size: 11px;
margin: 6px 0 16px;
}
.form-card form {
display: grid;
gap: 9px;
}
.form-card label {
height: 42px;
border: 1px solid #ddd;
border-radius: 7px;
display: flex;
align-items: center;
padding: 0 13px;
gap: 11px;
color: #888;
}
.form-card input,
.form-card select,
.form-card textarea {
width: 100%;
height: 100%;
border: 0;
outline: 0;
background: transparent;
font: 12px Arial;
color: #333;
}
.about-field {
height: 70px !important;
align-items: flex-start !important;
padding-top: 12px !important;
}
.form-card textarea {
resize: none;
}
.upload {
height: 58px !important;
position: relative;
cursor: pointer;
}
.upload input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.upload b {
font-size: 12px;
color: #555;
}
.upload small {
margin-left: auto;
}
.form-card button {
height: 48px;
border: 0;
border-radius: 8px;
background: #090909;
color: #fff;
font-weight: 700;
font-size: 14px;
cursor: pointer;
}
.form-card button b {
float: right;
margin-right: 15px;
}
.mobile-apply {
display: none;
}
.quick {
display: none;
}
.artists {
padding: 22px 7vw 30px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.section-head h2 {
font-size: 22px;
}
.section-head span {
font-size: 9px;
letter-spacing: 3px;
}
.artist-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 14px;
}
.artist {
min-width: 0;
text-align: center;
}
.artist-box {
aspect-ratio: 1.2;
background: linear-gradient(145deg, #f5f5f5, #e6e6e6);
border-radius: 8px;
display: grid;
place-items: center;
box-shadow: 0 7px 12px #ddd;
}
.artist-box img {
width: 72%;
height: 72%;
object-fit: contain;
}
.artist small {
font-size: 8px;
letter-spacing: 2px;
display: block;
margin-top: 10px;
}
footer {
padding: 28px 7vw;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 40px;
}
footer > div + div {
border-left: 1px solid #ddd;
padding-left: 40px;
}
footer b {
font-size: 12px;
}
footer p {
font-size: 9px;
color: #777;
line-height: 1.6;
}
.follow .social {
font-size: 18px;
color: #111;
}
.follow p {
gap: 15px;
}
@media (max-width: 760px) {
.site-header {
height: 70px;
padding: 0 24px;
border: 0;
}
.brand,
.site-header nav,
.top {
display: none;
}
.menu {
display: block;
font-size: 0;
}
.menu:after {
content: "☰";
font-size: 32px;
}
.hero {
display: block;
min-height: 0;
padding: 18px 7vw 12px;
background: #fff;
}
.hero-copy {
padding-top: 10px;
}
.hero-logo {
height: 340px;
width: 100%;
filter: drop-shadow(0 12px 12px #bbb);
}
.form-card {
display: none;
}
.mobile-apply {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
}
.mobile-apply strong {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
line-height: 1;
}
.mobile-apply strong small {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
line-height: 1.2;
}
.mobile-apply strong span {
display: block;
font-size: 25px;
font-weight: 800;
letter-spacing: 1px;
line-height: 1.1;
}
.mobile-apply > b {
font-size: 44px;
font-weight: 300;
}
.quick {
display: grid;
grid-template-columns: repeat(5, 1fr);
padding: 10px 5vw 30px;
gap: 0;
}
.quick a {
text-align: center;
border-right: 1px solid #ddd;
text-decoration: none;
color: #111;
padding: 0 6px;
}
.quick a:last-child {
border: 0;
}
.quick b {
display: block;
font-size: 29px;
height: 40px;
}
.quick span {
font-size: 8px;
letter-spacing: 2px;
line-height: 1.5;
}
.artists {
padding: 8px 7vw 35px;
border: 0;
}
.section-head {
justify-content: center;
}
.section-head h2 {
text-transform: uppercase;
font-size: 16px;
letter-spacing: 7px;
font-weight: 400;
margin-bottom: 24px;
}
.section-head span {
display: none;
}
.artist-grid {
grid-template-columns: repeat(5, 1fr);
gap: 18px 10px;
}
.artist-box {
aspect-ratio: 1;
/*background: linear-gradient(145deg, #333, #222);*/
box-shadow: 0 8px 10px #ccc;
}
.artist-box img {
filter: invert(1);
opacity: 0.25;
}
.artist small {
font-size: 8px;
letter-spacing: 2px;
}
footer {
display: block;
border-top: 1px solid #eee;
margin: 0 7vw;
padding: 30px 0;
text-align: center;
}
footer > div:not(.follow) {
display: none;
}
.follow b {
display: none;
}
.follow .social {
justify-content: center;
font-size: 25px;
gap: 34px;
}
.follow p {
margin: 0;
}
.upload small {
display: none;
}
}
@media (max-width: 430px) {
.hero-logo {
height: 285px;
}
.mobile-apply {
height: 96px;
padding: 0 20px;
}
.mobile-apply strong {
font-size: 16px;
}
.mobile-apply > span {
font-size: 25px;
}
.quick {
padding-left: 2vw;
padding-right: 2vw;
}
.artist-grid {
gap: 16px 8px;
}
}
/* Featured artists slider and footer refinements */
.artist-controls {
display: flex;
align-items: center;
gap: 10px;
}
.artist-controls span {
font-size: 11px;
letter-spacing: 2px;
margin-right: 10px;
}
.artist-controls button {
width: 38px;
height: 38px;
border: 1px solid #bbb;
border-radius: 50%;
background: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
color: #111;
}
.artist-controls button:hover,
.artist-controls button:focus-visible {
background: #111;
color: #fff;
}
.artist-grid {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding: 5px 0 15px;
}
.artist-grid::-webkit-scrollbar {
display: none;
}
.artist {
flex: 0 0 calc((100% - 9 * 14px) / 10);
scroll-snap-align: start;
}
.artist-box img {
max-width: 100%;
}
footer {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
footer > div + div {
padding-left: 24px;
}
footer b {
font-size: 16px;
}
footer p {
font-size: 13px;
line-height: 1.6;
}
.follow .social {
display: flex;
gap: 11px;
margin-top: 15px;
flex-wrap: wrap;
}
.follow .social a {
display: inline-flex;
width: 30px;
height: 30px;
color: #111;
align-items: center;
justify-content: center;
}
.follow svg {
height: 24px;
width: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.follow svg .filled {
fill: currentColor;
}
.footer-question a {
font-size: 13px;
color: #111;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 4px;
}
@media (max-width: 1100px) {
.artist {
flex-basis: calc((100% - 4 * 14px) / 5);
}
footer {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
footer > div + div {
border: 0;
padding-left: 0;
}
}
@media (max-width: 760px) {
.artists {
padding: 8px 7vw 30px;
}
.section-head {
justify-content: space-between;
gap: 12px;
}
.section-head h2 {
font-size: 15px;
letter-spacing: 3px;
margin: 0 0 20px;
}
.artist-controls {
margin-bottom: 20px;
}
.artist-controls span {
display: none;
}
.artist-controls button {
width: 34px;
height: 34px;
}
.artist-grid {
display: flex;
gap: 12px;
}
.artist {
flex-basis: calc((100% - 2 * 12px) / 3);
}
footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 0 7vw;
text-align: left;
}
footer > div:not(.follow) {
display: block;
}
footer > div + div {
border: 0;
padding: 0;
}
footer b {
font-size: 15px;
}
footer p {
font-size: 12px;
}
.follow b {
display: block;
}
.follow .social {
justify-content: flex-start;
gap: 10px;
}
.footer-question {
grid-column: 1/-1;
padding-top: 8px;
border-top: 1px solid #eee !important;
}
}
@media (max-width: 420px) {
.artist {
flex-basis: calc((100% - 12px) / 2);
}
.section-head h2 {
letter-spacing: 2px;
}
}
/* Header icons, responsive menu, artist placeholders */
.site-header .social.top {
display: flex;
flex: 0 0 auto;
gap: 14px;
}
.site-header .social.top a {
display: inline-flex;
width: 22px;
height: 22px;
color: #111;
align-items: center;
justify-content: center;
}
.site-header .social.top svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.site-header .social.top svg .filled {
fill: currentColor;
}
.artist-placeholder {
font-size: clamp(32px, 4vw, 54px);
color: #777;
font-weight: 300;
line-height: 1;
}
.question-icon {
display: inline-flex;
width: 26px;
height: 26px;
border: 2px solid currentColor;
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 17px;
margin-right: 5px;
}
.footer-question b {
display: flex;
align-items: center;
white-space: nowrap;
}
@media (max-width: 760px) {
.site-header {
position: relative;
z-index: 10;
}
.site-header .social.top {
display: none;
}
.site-header nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 12px 22px #0002;
padding: 14px 24px 24px;
flex-direction: column;
gap: 0;
margin: 0;
}
.site-header nav.is-open {
display: flex;
}
.site-header nav a {
font-size: 13px;
letter-spacing: 2px;
padding: 15px;
border-bottom: 1px solid #eee;
}
.menu {
font-size: 32px;
line-height: 1;
cursor: pointer;
}
.menu:after {
content: none;
}
.artist-placeholder {
font-size: 42px;
color: #999;
}
.footer-question b {
white-space: normal;
}
}
/* Mobile application form */
@media (max-width: 760px) {
.hero {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.hero-copy {
order: 0;
}
.mobile-apply {
order: 1;
width: 100%;
max-width: 570px;
margin-bottom: 22px;
}
.form-card {
display: block;
order: 2;
max-width: 570px;
padding: 26px 20px 28px;
margin: 0 auto 22px;
background: #fff;
box-shadow: 0 6px 28px #00000016;
border: 1px solid #eee;
scroll-margin-top: 85px;
}
.form-card h1 {
font-size: 23px;
}
.form-card h3 {
font-size: 14px;
}
.form-card > p {
font-size: 12px;
margin: 9px 0 18px;
}
.form-card form {
gap: 12px;
}
.form-card label {
height: 50px;
}
.form-card input,
.form-card select,
.form-card textarea {
font-size: 15px;
}
.about-field {
height: 90px !important;
}
.form-card button {
height: 52px;
font-size: 15px;
}
.upload b {
font-size: 14px;
}
}
/* Shared pages and branded social icons */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.social-links {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 33px;
height: 33px;
border-radius: 8px;
color: white;
}
.social-link svg {
height: 20px;
width: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.social-link .filled {
fill: currentColor;
}
.social-link.instagram {
background: linear-gradient(40deg, #f9ce34, #ee2a7b, #6228d7);
}
.social-link.snapchat {
background: #fffc00;
color: #111;
}
.social-link.facebook {
background: #1877f2;
}
.social-link.youtube {
background: #ff0033;
}
.social-link.tiktok {
background: #000;
color: #fff;
}
.social-link.tiktok svg,
.social-link.tiktok svg path {
fill: currentColor !important;
stroke: none !important;
}
.header-social {
flex: none;
}
.header-social .social-links {
gap: 9px;
}
.header-social .social-link {
width: 28px;
height: 28px;
}
.site-header nav a.active {
border-bottom: 2px solid #111;
}
.follow .social-links {
margin-top: 14px;
}
footer a {
color: #111;
font-size: 13px;
text-decoration: none;
font-weight: 600;
}
footer a:hover {
text-decoration: underline;
}
.footer-question a {
font-size: 13px;
}
.page-wrap {
width: min(1400px, 86vw);
margin: auto;
}
.page-hero {
background: linear-gradient(130deg, #101010, #303030);
color: white;
padding: 90px 0 95px;
}
.eyebrow {
display: block;
font-size: 12px;
letter-spacing: 4px;
font-weight: 700;
color: #a29b82;
}
.page-hero h1 {
font-size: clamp(38px, 5vw, 76px);
letter-spacing: 0.04em;
line-height: 1.08;
margin: 22px 0;
}
.page-hero p {
font-size: 16px;
letter-spacing: 2px;
line-height: 1.6;
}
.page-section {
padding: 85px 0 100px;
}
.page-section h2 {
font-size: clamp(26px, 3vw, 42px);
line-height: 1.15;
margin: 18px 0;
}
.about-layout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 8vw;
}
.body-copy p {
font-size: 17px;
line-height: 1.85;
color: #444;
margin: 0 0 25px;
}
.rule {
width: 90px;
height: 3px;
background: #a29b82;
}
.statement {
background: #f4f4f4;
text-align: center;
padding: 80px 0;
}
.statement p {
font-size: clamp(25px, 3vw, 42px);
line-height: 1.35;
margin: 0 0 40px;
}
.statement strong,
.statement span {
display: block;
letter-spacing: 3px;
}
.statement span {
margin-top: 9px;
font-style: italic;
letter-spacing: 1px;
}
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.service-card {
background: #f7f7f7;
padding: 40px;
min-height: 230px;
border-top: 3px solid #111;
}
.service-number {
color: #999;
font-size: 14px;
letter-spacing: 2px;
}
.service-card h2 {
font-size: 26px;
}
.service-card p,
.contact-layout p {
font-size: 16px;
color: #555;
line-height: 1.7;
}
.artist-page-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 25px;
}
.artist-page-grid .artist-box {
aspect-ratio: 1;
}
.artist-page-grid .artist small {
font-size: 11px;
}
.contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8vw;
}
.contact-card {
background: #f7f7f7;
padding: 40px;
}
.contact-row {
border-top: 1px solid #ddd;
padding: 20px 0;
display: grid;
gap: 8px;
}
.contact-row a {
color: #111;
}
.contact-row .social-links {
margin-top: 5px;
}
.mobile-apply {
border: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
}
button.mobile-apply {
width: 100%;
}
@media (max-width: 760px) {
.header-social {
display: none;
}
.page-hero {
padding: 60px 0;
}
.page-hero h1 {
font-size: 38px;
}
.page-hero p {
font-size: 13px;
}
.page-section {
padding: 55px 0;
}
.about-layout,
.contact-layout {
grid-template-columns: 1fr;
gap: 24px;
}
.body-copy p {
font-size: 15px;
}
.service-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.service-card {
min-height: 0;
padding: 28px;
}
.artist-page-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.artist-page-grid .artist-placeholder {
color: #999;
}
.contact-card {
padding: 25px;
}
.form-card:not(.is-open) {
display: none;
}
.mobile-apply {
display: flex;
}
.statement {
padding: 60px 0;
}
.statement p {
font-size: 25px;
}
}
/* Supplied brand artwork and consistent type on every page */
body {
font-family: Arial, Helvetica, sans-serif;
}
.brand img {
object-fit: contain;
object-position: left center;
}
.hero-logo {
object-fit: contain;
}
@media (max-width: 760px) {
.subpage .site-header {
justify-content: space-between;
gap: 16px;
}
.subpage .site-header .brand {
display: flex;
width: min(195px, 67vw);
height: 54px;
flex: 0 1 auto;
overflow: visible;
}
.subpage .site-header .brand img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: left center;
}
.subpage .site-header .menu {
margin-left: auto;
flex: none;
}
.subpage .site-header nav.is-open {
display: flex;
}
.hero-logo {
max-width: 100%;
}
}
/* Increase header artwork by 30% for a more readable tagline */
@media (min-width: 761px) {
.site-header {
gap: 2vw;
}
.site-header .brand {
width: 325px;
height: 110px;
flex: 0 0 325px;
}
.site-header nav {
gap: clamp(15px, 2vw, 38px);
}
}
@media (max-width: 1150px) and (min-width: 761px) {
.site-header {
padding-inline: 3vw;
}
.site-header .brand {
width: 292px;
height: 73px;
flex-basis: 292px;
}
.site-header nav a {
letter-spacing: 2px;
}
.header-social .social-links {
gap: 5px;
}
}
@media (max-width: 760px) {
.subpage .site-header {
height: 78px;
}
.subpage .site-header .brand {
width: min(280px, 70vw);
height: 90px;
}
.subpage .site-header .brand img {
object-position: left center;
}
}
/* ===== UPDATED MODERN ARTIST APPLICATION FORM ===== */
.form-card form{display:flex;flex-direction:column;gap:11px}
.form-card .modern-field{width:100%}
.form-card .modern-field input,.form-card .modern-field select,.form-card .modern-field textarea{display:block;width:100%;box-sizing:border-box;border:1px solid #dcdcdc;border-radius:8px;background:#fff;color:#111;font-family:inherit;font-size:13px;font-weight:400;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.form-card .modern-field input,.form-card .modern-field select{height:46px;padding:0 15px}
.form-card .modern-field textarea{height:78px;min-height:78px;padding:13px 15px;resize:vertical}
.form-card .modern-field input::placeholder,.form-card .modern-field textarea::placeholder{color:#777;opacity:1}
.form-card .modern-field input:focus,.form-card .modern-field select:focus,.form-card .modern-field textarea:focus{border-color:#111;box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.form-card .modern-field select{cursor:pointer}
.modern-upload{position:relative;width:100%}
.modern-upload>input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.form-card form .modern-upload .upload-content{width:100%;height:auto;min-height:70px;display:flex;align-items:center;gap:13px;padding:11px 13px;margin:0;border:1px dashed #c8c8c8;border-radius:8px;background:#fafafa;color:#111;cursor:pointer}
.form-card form .modern-upload .upload-content:hover{border-color:#111;background:#f7f7f7}
.upload-plus{display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;border-radius:50%;background:#111;color:#fff;font-size:21px;font-weight:300;line-height:1}
.upload-text{display:flex;flex-direction:column;flex:1;gap:3px;text-align:left}
.upload-text strong{color:#111;font-size:12px;font-weight:600}
.upload-text small{color:#777;font-size:10px;line-height:1.4}
.choose-files{display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding:0 12px;border:1px solid #d6d6d6;border-radius:6px;background:#fff;color:#111;font-size:10px;font-weight:600;white-space:nowrap}
.selected-files{width:100%}
.selected-file-list{display:flex;flex-direction:column;gap:4px}
.selected-file-item{padding:6px 9px;border-radius:5px;background:#f6f6f6;color:#555;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.application-consent{width:100%;margin:3px 0 4px;padding:0;border:0;background:transparent}
.form-card form .consent-checkbox{display:flex;align-items:flex-start;width:100%;height:auto;min-height:0;gap:9px;margin:0;padding:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none;color:#555;cursor:pointer}
.form-card form .consent-checkbox input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;display:block;width:15px;height:15px;min-width:15px;max-width:15px;margin:2px 0 0;padding:0;border:initial;border-radius:0;background:initial;box-shadow:none;cursor:pointer}
.form-card form .consent-checkbox>span{display:block;flex:1;margin:0;padding:0;color:#555;font-size:11px;font-weight:400;line-height:1.45;text-align:left}
.form-card form .consent-checkbox a{color:#111;font-weight:600;text-decoration:underline}
.form-card form .consent-checkbox a:hover{text-decoration:none}
.form-error{width:100%;color:#b00020;font-size:11px;line-height:1.4}
.form-errors{margin-bottom:10px;padding:10px 12px;border:1px solid #efc8c8;border-radius:6px;background:#fff7f7;color:#a40000;font-size:11px}
.form-errors ul{margin:0;padding-left:18px}
.form-success{margin-bottom:10px;padding:10px 12px;border:1px solid #bcdcc4;border-radius:6px;background:#f4fff6;color:#16652a;font-size:11px}
.form-card form>button[type=submit]{width:100%;height:48px;min-height:48px;margin-top:2px;border:0;border-radius:7px;background:#050505;color:#fff;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.form-card form>button[type=submit]:hover{opacity:.88}
.form-card form>button[type=submit]:active{transform:translateY(1px)}
.form-card form>button[type=submit] b{float:right;margin-right:15px}
@media(max-width:760px){
.form-card form{gap:10px}
.form-card .modern-field input,.form-card .modern-field select{height:46px;font-size:13px}
.form-card .modern-field textarea{height:82px;min-height:82px;font-size:13px}
.form-card form .modern-upload .upload-content{min-height:68px;padding:10px 12px;gap:10px}
.upload-plus{width:32px;height:32px;min-width:32px;font-size:19px}
.upload-text strong{font-size:11px}
.upload-text small{display:block;font-size:9px}
.choose-files{display:none}
.form-card form .consent-checkbox>span{font-size:10px;line-height:1.5}
.form-card form>button[type=submit]{height:47px;min-height:47px;font-size:13px}
}
/* =========================================================
RECAPTCHA
========================================================= */
.recaptcha-wrapper {
width: 100%;
margin: 4px 0;
overflow: hidden;
}
.recaptcha-wrapper .g-recaptcha {
transform-origin: left top;
}
/* =========================================================
SUBMIT LOADER
========================================================= */
.submit-loader {
width: 100%;
padding: 5px 0;
}
.submit-loader-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
color: #111;
font-size: 11px;
font-weight: 600;
}
.loader-spinner {
width: 14px;
height: 14px;
border: 2px solid #ddd;
border-top-color: #111;
border-radius: 50%;
animation: form-spinner .7s linear infinite;
}
@keyframes form-spinner {
to {
transform: rotate(360deg);
}
}
.submit-progress {
position: relative;
width: 100%;
height: 4px;
overflow: hidden;
border-radius: 10px;
background: #e5e5e5;
}
.submit-progress-bar {
position: absolute;
width: 35%;
height: 100%;
border-radius: 10px;
background: #111;
animation:
form-progress 1.2s ease-in-out infinite;
}
@keyframes form-progress {
0% {
left: -35%;
}
100% {
left: 100%;
}
}
.submit-loader small {
display: block;
margin-top: 6px;
color: #777;
font-size: 9px;
}
#artist-submit:disabled {
opacity: .55;
cursor: not-allowed;
}
/* reCAPTCHA mobile */
@media (max-width: 400px) {
.recaptcha-wrapper .g-recaptcha {
transform: scale(.88);
}
.recaptcha-wrapper {
min-height: 69px;
}
}
/* =========================================================
AJAX FORM MESSAGES
========================================================= */
.application-message {
width: 100%;
box-sizing: border-box;
margin: 12px 0 15px;
padding: 12px 14px;
border-radius: 8px;
font-size: 12px;
line-height: 1.5;
}
.application-error {
border: 1px solid #efc8c8;
background: #fff7f7;
color: #a40000;
}
/* =========================================================
SUCCESS MESSAGE
========================================================= */
.application-success-large {
box-sizing: border-box;
width: 100%;
padding: 30px 20px;
text-align: center;
border: 1px solid #cfe4d4;
background: #f7fff8;
color: #111;
}
.application-success-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin: 0 auto 14px;
border-radius: 50%;
background: #111;
color: #fff;
font-size: 27px;
font-weight: 700;
}
.application-success-large strong {
display: block;
margin-bottom: 8px;
font-size: 18px;
font-weight: 700;
}
.application-success-large p {
margin: 0 0 8px;
color: #444;
font-size: 13px;
line-height: 1.5;
}
.application-success-large small {
display: block;
color: #777;
font-size: 11px;
}
/* =========================================================
MOBILE SUCCESS
========================================================= */
@media (max-width: 760px) {
.application-message {
width: 100%;
margin: 12px 0;
}
.application-success-large {
width: 100%;
min-height: 220px;
padding: 35px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.application-success-icon {
width: 58px;
height: 58px;
font-size: 30px;
}
.application-success-large strong {
font-size: 20px;
}
.application-success-large p {
font-size: 14px;
line-height: 1.6;
}
.application-success-large small {
font-size: 12px;
}
}
.success-refresh-message {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #ddd;
font-size: 12px;
color: #666;
}
.success-refresh-message strong {
display: inline;
margin: 0 3px;
font-size: 14px;
color: #111;
}
.back-home-now {
margin-top: 15px;
padding: 10px 22px;
border: 0;
border-radius: 5px;
background: #111;
color: #fff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.back-home-now:hover {
opacity: 0.85;
}
@media (max-width: 760px) {
.success-refresh-message {
margin-top: 22px;
font-size: 12px;
}
.back-home-now {
width: 100%;
max-width: 220px;
}
}
/* =========================================================
MOBILE HOME PAGE - SOCIAL ICONS IN HEADER
========================================================= */
@media (max-width: 760px) {
/* Home page header */
body:not(.subpage) .site-header {
display: flex;
align-items: center;
width: 100%;
height: 70px;
padding: 0 24px;
gap: 0;
}
/* Hamburger on left */
body:not(.subpage) .site-header .menu {
display: block;
flex: 0 0 auto;
margin: 0;
}
.site-header .menu {
color: #000 !important;
}
/* Social icons on right */
body:not(.subpage) .site-header .header-social {
display: flex !important;
align-items: center;
margin-left: auto;
flex: 0 0 auto;
}
body:not(.subpage) .site-header .header-social .social-links {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 6px;
}
body:not(.subpage) .site-header .header-social .social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
flex: 0 0 27px;
border-radius: 7px;
}
body:not(.subpage) .site-header .header-social .social-link svg {
width: 16px;
height: 16px;
}
}
/* Smaller mobile screens */
@media (max-width: 390px) {
body:not(.subpage) .site-header {
padding-left: 18px;
padding-right: 18px;
}
body:not(.subpage) .site-header .header-social .social-links {
gap: 5px;
}
body:not(.subpage) .site-header .header-social .social-link {
width: 25px;
height: 25px;
flex-basis: 25px;
}
body:not(.subpage) .site-header .header-social .social-link svg {
width: 15px;
height: 15px;
}
}
/* =========================================================
MOBILE - JOIN AS AN ARTIST BUTTON
========================================================= */
@media (max-width: 767px) {
button.mobile-apply {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100% !important;
height: 52px;
margin: 18px 0 32px;
padding: 0 20px;
background: #111;
color: #fff;
border: 0;
border-radius: 11px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1.5px;
box-shadow: 0 7px 16px rgba(0, 0, 0, 0.16);
}
button.mobile-apply .apply-svg {
display: block;
width: 16px;
height: 16px;
color: #fff;
flex: 0 0 16px;
}
button.mobile-apply span {
white-space: nowrap;
}
}
/* =========================================================
UPCOMING TALENT - PORTRAIT DESIGN
Shared by home page and Artists page
========================================================= */
/* Home section */
.artists {
padding: 34px 7vw 38px;
background: #fff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.artists .section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 18px;
}
.artists .section-head h2 {
margin: 0;
color: #111;
font-size: 22px;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
}
.artist-controls {
display: flex;
align-items: center;
gap: 9px;
}
.artist-controls span {
margin-right: 10px;
color: #111;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.5px;
white-space: nowrap;
}
.artist-controls button {
width: 38px;
height: 38px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d1d1d1;
border-radius: 50%;
background: #fff;
color: #111;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.artist-controls button svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.artist-controls button:hover,
.artist-controls button:focus-visible {
background: #111;
border-color: #111;
color: #fff;
}
/* Desktop: exactly 10 cards on one row */
.artists .artist-grid {
display: flex;
width: 100%;
gap: 10px;
padding: 5px 0 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.artists .artist-grid::-webkit-scrollbar {
display: none;
}
.artists .artist {
flex: 0 0 calc((100% - 90px) / 10);
min-width: 0;
text-align: center;
scroll-snap-align: start;
}
.artist-photo-box {
position: relative;
width: 100%;
aspect-ratio: 1.28 / 1;
overflow: hidden;
display: block;
background: #ededed;
border-radius: 6px;
box-shadow: 0 5px 12px rgba(0, 0, 0, .09);
}
.artist-photo-box img,
.artists .artist-box.artist-photo-box img,
.artist-page-grid .artist-box.artist-photo-box img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
filter: none;
opacity: 1;
transition: transform .3s ease;
}
.artist:hover .artist-photo-box img {
transform: scale(1.025);
}
.artists .artist small,
.artist-page-grid .artist small {
display: block;
margin-top: 10px;
color: #111;
font-size: 8px;
font-weight: 500;
line-height: 1;
letter-spacing: 2px;
white-space: nowrap;
}
/* Artists listing page */
.artist-listing-section {
padding-top: 60px;
}
.artist-page-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.artist-page-heading h2 {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.15;
}
.artist-page-heading span {
font-size: 10px;
font-weight: 600;
letter-spacing: 2.5px;
white-space: nowrap;
}
.artist-page-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 32px 18px;
}
.artist-page-grid .artist-box.artist-photo-box {
aspect-ratio: 1.28 / 1;
}
.artist-page-grid .artist small {
font-size: 9px;
}
/* Tablet */
@media (max-width: 1100px) and (min-width: 768px) {
.artists .artist {
flex-basis: calc((100% - 40px) / 5);
}
.artist-page-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Mobile */
@media (max-width: 767px) {
.artists {
padding: 22px 7vw 30px;
border-top: 0;
}
.artists .section-head {
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
}
.artists .section-head h2 {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.artist-controls {
margin: 0;
gap: 8px;
}
.artist-controls span {
display: none;
}
.artist-controls button {
width: 35px;
height: 35px;
}
.artists .artist-grid {
gap: 11px;
padding: 2px 0 10px;
}
/* About 2.35 cards visible so users know it can slide */
.artists .artist {
flex: 0 0 calc((100% - 22px) / 2.35);
}
.artist-photo-box {
aspect-ratio: 1.28 / 1;
border-radius: 6px;
}
.artists .artist small,
.artist-page-grid .artist small {
margin-top: 9px;
font-size: 7px;
letter-spacing: 1.5px;
}
.artist-listing-section {
padding-top: 42px;
}
.artist-page-heading {
margin-bottom: 20px;
}
.artist-page-heading h2 {
font-size: 18px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.artist-page-heading span {
display: none;
}
.artist-page-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 12px;
}
.artist-page-grid .artist-box.artist-photo-box {
aspect-ratio: 1.28 / 1;
}
}
@media (max-width: 390px) {
.artists .artist {
flex-basis: calc((100% - 11px) / 2.15);
}
}
/* =========================================================
UPCOMING TALENT - SMOOTH SLIDER
========================================================= */
.artist-grid {
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.artist-grid::-webkit-scrollbar {
display: none;
}
.artist-grid .artist {
scroll-snap-align: start;
scroll-snap-stop: normal;
}
/* =========================================================
FINAL HOME HERO - BACKGROUND + DIRECT APPLICATION FORM
This block intentionally overrides older mobile-apply rules.
========================================================= */
.hero {
position: relative;
min-height: 560px;
padding: 30px 7vw 35px;
display: grid;
grid-template-columns: 1.08fr 0.92fr;
align-items: center;
gap: 6vw;
background:
linear-gradient(rgba(255,255,255,.40), rgba(255,255,255,.40)),
url("../images/hero-talent-bg.jpg") center center / cover no-repeat;
}
/* Join button is no longer used: application form is always visible. */
.mobile-apply,
button.mobile-apply {
display: none !important;
}
@media (max-width: 760px) {
.hero {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
padding: 18px 7vw 28px;
gap: 20px;
background:
linear-gradient(rgba(255,255,255,.48), rgba(255,255,255,.48)),
url("../images/hero-talent-bg.jpg") center top / cover no-repeat;
}
.hero-copy {
order: 1;
padding-top: 10px;
}
.hero-logo {
width: 100%;
height: 285px;
object-fit: contain;
filter: drop-shadow(0 12px 12px rgba(0,0,0,.20));
}
.form-card,
.form-card:not(.is-open) {
display: block !important;
order: 2;
width: 100%;
max-width: 570px;
margin: 0 auto;
padding: 26px 20px 28px;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
background: rgba(255,255,255,.94);
border: 1px solid rgba(255,255,255,.85);
border-radius: 18px;
box-shadow: 0 12px 35px rgba(0,0,0,.13);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
scroll-margin-top: 85px;
}
.form-card h1 { font-size: 23px; }
.form-card h3 { font-size: 14px; }
.form-card > p { margin: 9px 0 18px; font-size: 12px; }
.form-card form { gap: 12px; }
.form-card label { height: 50px; }
.form-card input,
.form-card select,
.form-card textarea { font-size: 15px; }
.about-field { height: 90px !important; }
.form-card button { height: 52px; font-size: 15px; }
.upload b { font-size: 14px; }
}
@media (max-width: 430px) {
.hero {
padding-left: 5vw;
padding-right: 5vw;
}
.hero-logo {
height: 260px;
}
.form-card {
padding: 24px 16px 26px;
}
}
/* =========================================================
FINAL HOME HERO
Desktop: image covers FULL hero section
Mobile: image only behind LEFT/LOGO hero-copy section
========================================================= */
.mobile-apply,
button.mobile-apply {
display: none !important;
}
/* =========================================================
DESKTOP - FULL HERO BACKGROUND
========================================================= */
@media (min-width: 761px) {
.hero {
position: relative;
min-height: 650px;
display: grid;
grid-template-columns: 1.08fr 0.92fr;
align-items: center;
padding: 30px 7vw 35px;
gap: 6vw;
background:
linear-gradient(
rgba(255, 255, 255, 0.30),
rgba(255, 255, 255, 0.30)
),
url("../images/hero-talent-bg.jpg")
center center / cover no-repeat;
}
/*
* On desktop the artwork belongs to .hero,
* so hero-copy must NOT have its own image/card background.
*/
.hero-copy {
position: relative;
min-width: 0;
min-height: 500px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 30px;
overflow: visible;
text-align: center;
background: transparent;
border-radius: 0;
}
.hero-copy::before {
display: none;
content: none;
}
.hero-logo {
position: relative;
z-index: 2;
display: block;
width: min(610px, 100%);
height: 330px;
margin: 0 auto;
object-fit: contain;
filter:
drop-shadow(
0 14px 12px rgba(0, 0, 0, 0.20)
);
}
.hero-tagline {
position: relative;
z-index: 2;
text-align: center;
}
/*
* White application card floats above
* the full-width desktop hero artwork.
*/
.form-card {
position: relative;
z-index: 3;
display: block;
width: 100%;
max-width: 570px;
margin: 25px auto;
padding: 34px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 18px;
box-shadow:
0 12px 38px rgba(0, 0, 0, 0.12);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
}
/* =========================================================
MOBILE
Background image ONLY behind hero-copy/logo.
Form remains on clean white background below.
========================================================= */
@media (max-width: 760px) {
.hero {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
padding: 0 0 28px;
gap: 0;
background: #fff;
}
.hero-copy {
position: relative;
order: 1;
width: 100%;
min-height: 410px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 25px 7vw 28px;
overflow: hidden;
text-align: center;
border-radius: 0;
background:
linear-gradient(
rgba(255, 255, 255, 0.38),
rgba(255, 255, 255, 0.38)
),
url("../images/hero-talent-bg.jpg")
center center / cover no-repeat;
}
.hero-copy::before {
content: "";
display: block;
position: absolute;
inset: 0;
background:
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.04) 60%,
rgba(255, 255, 255, 0.08) 100%
);
pointer-events: none;
}
.hero-logo {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-width: 520px;
height: 285px;
margin: 0 auto;
object-fit: contain;
filter:
drop-shadow(
0 10px 10px rgba(0, 0, 0, 0.18)
);
}
.hero-tagline {
position: relative;
z-index: 2;
width: 100%;
}
/*
* Always show the application form on mobile.
* No Join as an Artist button / is-open requirement.
*/
.form-card,
.form-card:not(.is-open) {
display: block !important;
order: 2;
width: calc(100% - 28px);
max-width: 570px;
margin: 20px auto 0;
padding: 26px 20px 28px;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
background: #fff;
border: 1px solid #ececec;
border-radius: 15px;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.mobile-apply,
button.mobile-apply {
display: none !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 430px) {
.hero-copy {
min-height: 360px;
padding: 18px 20px 22px;
}
.hero-logo {
height: 255px;
}
.form-card,
.form-card:not(.is-open) {
width: calc(100% - 24px);
margin-top: 14px;
}
}
/* =========================================================
FINAL HERO LOGO SPACING OVERRIDE
The current logo artwork already contains the Debut Nation
name and both tagline lines, so no separate tagline is used.
========================================================= */
.hero-tagline,
.hero-global-text,
.hero-tagline-line,
.hero-border-text {
display: none !important;
}
@media (min-width: 761px) {
.hero-logo {
width: min(610px, 100%);
height: auto;
margin: 0 auto;
object-fit: contain;
}
}
@media (max-width: 760px) {
.hero {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
padding: 0 0 20px;
gap: 0;
background: #fff;
}
.hero-copy {
position: relative;
order: 1;
width: 100%;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 18px 7vw;
overflow: hidden;
text-align: center;
border-radius: 0;
background:
linear-gradient(
rgba(255, 255, 255, 0.38),
rgba(255, 255, 255, 0.38)
),
url("../images/hero-talent-bg.jpg")
center center / cover no-repeat;
}
.hero-copy::before {
content: "";
display: block;
position: absolute;
inset: 0;
background:
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.04) 60%,
rgba(255, 255, 255, 0.08) 100%
);
pointer-events: none;
}
.hero-logo {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-width: 340px;
height: auto !important;
margin: 0 auto;
object-fit: contain;
filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.16));
}
.form-card,
.form-card:not(.is-open) {
display: block !important;
order: 2;
width: calc(100% - 28px);
max-width: 570px;
margin: 14px auto 0;
padding: 26px 20px 28px;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
background: #fff;
border: 1px solid #ececec;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.mobile-apply,
button.mobile-apply {
display: none !important;
}
}
@media (max-width: 430px) {
.hero {
padding-bottom: 14px;
}
.hero-copy {
min-height: 0;
padding: 12px 20px;
}
.hero-logo {
width: 100%;
max-width: 320px;
height: auto !important;
}
.form-card,
.form-card:not(.is-open) {
width: calc(100% - 24px);
margin-top: 12px;
padding: 24px 16px 26px;
}
}
@media (max-width: 360px) {
.hero-copy {
padding-left: 16px;
padding-right: 16px;
}
.hero-logo {
max-width: 300px;
}
}