/** * VYNE+ "For Artists" landing page. * * Ported from the standalone design (whole pages/vyneplus_for-Artists_01). * All rules are scoped under .artists-page so the page's own palette + base * styles never leak onto the shared v2 chrome (topbar / footer live outside * the wrapper and keep their home-v2.css styling). The site header/footer are * intentionally the theme's v2 chrome — the standalone topbar/notif/footer * were dropped on import. * * Fonts (Cormorant Garamond / Jost / JetBrains Mono) come from the Google * Fonts stylesheet already enqueued for v2 pages — no @font-face here. */ .artists-page { --bg: #080605; --bg-2: #0d0a07; --panel: #15110c; --panel-2: #1d1712; --line: rgba(231, 210, 176, 0.14); --line-soft: rgba(231, 210, 176, 0.07); --gold: #c15a3a; --gold-soft: #e08a6a; --gold-deep: #8f3320; --ink: #f7ece5; --body: #cbb6ac; --muted: #9a7f74; --a-serif: 'Cormorant Garamond', serif; --a-sans: 'Jost', sans-serif; --a-mono: 'JetBrains Mono', ui-monospace, monospace; --a-shell: 1680px; --a-pad: clamp(24px, 5vw, 120px); background: var(--bg); color: var(--body); font-family: var(--a-sans); font-weight: 300; -webkit-font-smoothing: antialiased; } .artists-page ::selection { background: var(--gold); color: #1a0d08; } .artists-page a { color: inherit; text-decoration: none; } .artists-page .shell { max-width: var(--a-shell); margin: 0 auto; padding: 0 var(--a-pad); } .artists-page .kicker { font-family: var(--a-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); } .artists-page h1, .artists-page h2, .artists-page h3 { font-family: var(--a-serif); font-weight: 500; color: var(--ink); } .artists-page em { font-style: italic; color: var(--gold-soft); } .artists-page .sec-h { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; margin: 14px 0 0; } .artists-page .sec-lead { font-family: var(--a-serif); font-size: clamp(18px, 2vw, 24px); line-height: 1.5; color: var(--body); max-width: 62ch; margin-top: 20px; } .artists-page .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--a-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; padding: 16px 32px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ink); transition: all 0.2s; } .artists-page .btn:hover { border-color: var(--gold-soft); } .artists-page .btn.primary { background: linear-gradient(180deg, #c65a3a, #8f2f1c); color: #f7ece5; border-color: transparent; } .artists-page .btn.primary:hover { background: linear-gradient(180deg, #d66c48, #a5381f); } /* Hero */ /* display/min-height are load-bearing: home-v2.css's global .hero is the * homepage's flex hero with min-height:94svh, which forced this hero to the * viewport height (940px) instead of the design's 881px — the inner .hero-full * already carries the design's own min-height: min(88vh, 900px). */ .artists-page .hero { display: block; min-height: 0; border-bottom: 1px solid var(--line-soft); } .artists-page .hero-full { position: relative; width: 100%; min-height: min(88vh, 900px); overflow: hidden; } .artists-page .hero-full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .artists-page .hero-scrim { position: absolute; inset: 0; background: linear-gradient(255deg, rgba(6,4,3,0.78) 0%, rgba(6,4,3,0.35) 34%, rgba(6,4,3,0) 62%), linear-gradient(0deg, rgba(6,4,3,0.55) 0%, rgba(6,4,3,0) 45%); } .artists-page .hero-overlay { position: relative; z-index: 2; min-height: min(88vh, 900px); display: flex; align-items: center; justify-content: flex-end; padding-top: clamp(48px, 8vh, 110px); padding-bottom: clamp(40px, 7vh, 90px); padding-right: clamp(40px, 9vw, 200px); } .artists-page .hero-br .eyebrow { font-family: var(--a-mono); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-soft); display: inline-flex; align-items: center; gap: 14px; } .artists-page .hero-br .eyebrow::before { content: ''; width: 44px; height: 1px; background: var(--gold-deep); } .artists-page .hero-br h1 { font-size: clamp(40px, 5vw, 76px); line-height: 0.98; margin: 20px 0 0; font-weight: 400; text-shadow: 0 2px 30px rgba(0,0,0,0.5); } .artists-page .hero-br { max-width: 500px; text-align: left; transform: translateY(32%); } .artists-page .hero-br .sub { font-family: var(--a-serif); font-size: clamp(17px, 1.8vw, 22px); line-height: 1.5; color: var(--ink); margin-top: 22px; } .artists-page .hero-cta { margin-top: 26px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } /* Benefits */ .artists-page .band.abenefits { padding: clamp(30px, 4vw, 52px) 0; background: linear-gradient(180deg, #2a0c07 0%, #1c0906 55%, #12100b 100%); border-top: 1px solid rgba(224,138,106,0.14); border-bottom: 1px solid rgba(224,138,106,0.14); } .artists-page .ab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); } .artists-page .ab-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .artists-page .ab-ic { width: 96px; height: 96px; display: grid; place-items: center; border: 1px solid rgba(240,160,130,0.4); background: rgba(240,160,130,0.06); color: #f0a082; } .artists-page .ab-ic svg { width: 42px; height: 42px; } .artists-page .ab-t { font-family: var(--a-serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); color: #fbeee8; margin-top: 18px; } .artists-page .ab-b { font-family: var(--a-serif); font-size: clamp(14px, 1.4vw, 17px); line-height: 1.5; color: #d6b0a4; margin-top: 8px; max-width: 34ch; } @media (max-width: 760px) { .artists-page .ab-grid { grid-template-columns: 1fr; gap: 32px; } } /* Sections */ .artists-page .band { padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid var(--line-soft); } .artists-page .band.alt { background: linear-gradient(180deg, #0d0a07, #080605); } .artists-page #how { padding-top: clamp(40px, 5vw, 64px); border-top: none; } /* How it works — 3 steps */ .artists-page .how-head { max-width: 62ch; } .artists-page .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: clamp(44px, 5vw, 68px); counter-reset: step; } .artists-page .step { position: relative; } .artists-page .step .sphoto { aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--line); background: #14100b; margin-bottom: 24px; } .artists-page .step .sphoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; } .artists-page .step:hover .sphoto img { transform: scale(1.04); } .artists-page .step .stopline { border-top: 2px solid var(--gold-deep); padding-top: 22px; } .artists-page .step .snum { font-family: var(--a-serif); font-style: italic; font-size: 52px; color: var(--gold-soft); line-height: 0.8; } .artists-page .step h3 { font-size: 27px; font-style: italic; font-weight: 500; margin-top: 14px; } .artists-page .step p { font-family: var(--a-serif); font-size: 17px; line-height: 1.6; color: var(--body); margin-top: 12px; } /* Artist profile preview */ .artists-page .profile-block { background: linear-gradient(180deg, #f6e6e2, #f2ddd8); color: #2a1614; padding-top: clamp(40px, 5vw, 68px); padding-bottom: clamp(40px, 5vw, 68px); } .artists-page .profile-block .kicker { color: #a84f38; } .artists-page .profile-block .sec-h { color: #2a1210; } .artists-page .profile-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: start; margin-top: clamp(28px, 3vw, 40px); } .artists-page .profile-grid .mock { margin-top: clamp(-140px, -9vw, -60px); } .artists-page .profile-txt p { font-family: var(--a-serif); font-size: clamp(17px, 1.8vw, 22px); line-height: 1.6; color: #4a3f2a; } .artists-page .profile-list { list-style: none; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; } .artists-page .profile-list li { font-family: var(--a-serif); font-size: 19px; color: #241c14; padding-left: 26px; position: relative; } .artists-page .profile-list li::before { content: "\266A"; position: absolute; left: 0; color: #9b7833; } .artists-page .profile-url { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--a-mono); font-size: 13px; letter-spacing: 0.06em; color: #6a5c44; background: #fff; border: 1px solid rgba(42,33,26,0.18); padding: 12px 16px; } .artists-page .profile-url b { color: #9b7833; font-weight: 500; } /* mock artist page */ .artists-page .mock { border: 1px solid rgba(42,33,26,0.2); background: #0a0807; box-shadow: 0 30px 70px rgba(120,90,40,0.22); overflow: hidden; } .artists-page .mock-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #14100b; border-bottom: 1px solid var(--line-soft); } .artists-page .mock-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #3a3128; } .artists-page .mock-bar .url { flex: 1; text-align: center; font-family: var(--a-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--muted); } .artists-page .mock-hero { display: grid; grid-template-columns: 128px 1fr; gap: 18px; padding: 24px; align-items: center; } .artists-page .mock-ava { aspect-ratio: 1; background: linear-gradient(135deg, #2a2118, #443524); border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold-deep); font-family: var(--a-serif); font-style: italic; font-size: 13px; text-align: center; } .artists-page .mock-name { font-family: var(--a-serif); font-size: 30px; color: var(--ink); } .artists-page .mock-bio { font-family: var(--a-serif); font-size: 13px; line-height: 1.5; color: var(--body); margin-top: 6px; } .artists-page .mock-social { display: flex; gap: 8px; margin-top: 12px; } .artists-page .mock-social span { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); } .artists-page .mock-songs { padding: 0 24px 24px; } .artists-page .mock-songs .mst { font-family: var(--a-mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; } .artists-page .mock-song { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-soft); background: var(--panel); margin-bottom: 8px; } .artists-page .mock-song .play { width: 30px; height: 30px; border-radius: 50%; background: rgba(201,164,76,0.1); border: 1px solid rgba(201,164,76,0.3); color: var(--gold); display: grid; place-items: center; flex: 0 0 auto; } .artists-page .mock-song .sn { font-family: var(--a-serif); font-style: italic; font-size: 16px; color: var(--ink); flex: 1; } .artists-page .mock-song .sd { font-family: var(--a-mono); font-size: 10px; color: var(--muted); } .artists-page .mock-song.sel { border-color: var(--gold-deep); background: #1d1712; } .artists-page .mock-order { margin: 0 24px 24px; padding: 14px; text-align: center; font-family: var(--a-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #f7ece5; background: linear-gradient(180deg, #c65a3a, #8f2f1c); } /* Artist stories / articles */ .artists-page .stories-head { max-width: 60ch; } .artists-page .stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); margin-top: clamp(36px, 5vw, 56px); } .artists-page .story-art { border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; } .artists-page .story-art:hover { border-color: var(--gold-deep); transform: translateY(-3px); } .artists-page .story-art .sa-photo { aspect-ratio: 4/3; overflow: hidden; background: #0a0807; } .artists-page .story-art .sa-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transition: transform 0.5s; } .artists-page .story-art:hover .sa-photo img { transform: scale(1.04); } .artists-page .story-art .sa-body { padding: clamp(20px, 1.8vw, 28px); display: flex; flex-direction: column; gap: 12px; flex: 1; } .artists-page .story-art .st-tag { font-family: var(--a-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); } .artists-page .story-art .sa-h { font-family: var(--a-serif); font-style: italic; font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--ink); } .artists-page .story-art .sa-ex { font-family: var(--a-serif); font-size: 16px; line-height: 1.55; color: var(--body); } .artists-page .story-art .sa-more { margin-top: auto; font-family: var(--a-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); transition: color 0.2s; } .artists-page .story-art .sa-more:hover { color: var(--ink); } /* FAQ */ .artists-page .faq-wrap { max-width: 960px; margin: clamp(36px, 5vw, 56px) auto 0; } .artists-page .faq-cat { font-family: var(--a-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin: 40px 0 8px; } .artists-page .faq-cat:first-child { margin-top: 0; } .artists-page .faq-item { border-bottom: 1px solid var(--line); } .artists-page .faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--ink); font-family: var(--a-serif); font-size: clamp(18px, 2vw, 24px); padding: 22px 44px 22px 0; cursor: pointer; position: relative; } .artists-page .faq-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--a-sans); font-weight: 300; font-size: 26px; color: var(--gold); } .artists-page .faq-item.open .faq-q::after { content: "\2212"; } .artists-page .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .artists-page .faq-a-inner { padding: 0 44px 24px 0; font-family: var(--a-serif); font-size: 17px; line-height: 1.65; color: var(--body); } /* CTA banner */ .artists-page .cta-banner { text-align: center; background: linear-gradient(180deg, #1c1610, #100c08); } .artists-page .cta-banner h2 { font-size: clamp(34px, 5vw, 60px); } .artists-page .cta-banner p { font-family: var(--a-serif); font-size: clamp(18px, 2vw, 23px); color: var(--body); max-width: 52ch; margin: 18px auto 0; } .artists-page .cta-banner .hero-cta { justify-content: center; margin-top: 30px; } /* Floating CTA */ .artists-page .float-cta { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(140%); z-index: 60; opacity: 0; transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1), opacity 0.45s; } .artists-page .float-cta.show { transform: translateX(-50%) translateY(0); opacity: 1; } .artists-page .float-cta button { display: inline-flex; align-items: center; gap: 12px; font-family: var(--a-sans); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: #f7ece5; background: linear-gradient(180deg, #d66c48, #a5381f); border: none; padding: 17px 34px; border-radius: 999px; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(224,138,106,0.4); transition: transform 0.2s, box-shadow 0.2s; } .artists-page .float-cta button:hover { transform: translateY(-2px); } .artists-page .float-cta button .glyph { font-family: var(--a-serif); font-size: 18px; } @media (max-width: 1000px) { .artists-page .hero-full, .artists-page .hero-overlay { min-height: auto; } .artists-page .hero-full > img { position: absolute; } .artists-page .hero-overlay { min-height: 78vh; justify-content: flex-start; align-items: flex-end; } .artists-page .hero-br { max-width: 100%; } .artists-page .steps { grid-template-columns: 1fr; } .artists-page .profile-grid { grid-template-columns: 1fr; } .artists-page .stories-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .artists-page .stories-grid { grid-template-columns: 1fr; } } /* The For-Artists design sets no base font-size (16px / normal line-height) while * the theme's global body is 17px/1.6 — correct for the homepage, but it inflated * every text block here, making each section 45–137px taller than the design. * Scope the design's own base to this page only. */ .artists-page { font-size: 16px; line-height: normal; } /* The theme's global .sub is a 380px dark hero box (used on the homepage); on this * page .sub is just the hero paragraph, so reset it back to flowing text. */ .artists-page .sub { background: none; height: auto; min-height: 0; display: block; /* …and the rest of that card: its 1px frame and the 2px gold hairline it draws as ::after were showing up as stray rules around the hero copy. */ border: 0; padding: 0; overflow: visible; } .artists-page .sub::after { content: none; } .artists-page .sa-ex { margin-top: 0; } /* The design's `* { box-sizing: border-box; margin: 0; padding: 0 }` reset wasn't * ported either, so UA paragraph margins and