{"id":287,"date":"2026-05-11T22:22:07","date_gmt":"2026-05-11T22:22:07","guid":{"rendered":"https:\/\/yuhanshe.annenbergprhosting.com\/?page_id=287"},"modified":"2026-05-12T20:45:28","modified_gmt":"2026-05-12T20:45:28","slug":"spotify-instagram-ads","status":"publish","type":"page","link":"https:\/\/yuhanshe.annenbergprhosting.com\/?page_id=287","title":{"rendered":"Spotify Ads"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Spotify Mental Health Mode <\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300&#038;display=swap\" rel=\"stylesheet\" \/>\n  <style>\n    :root {\n      --spotify-green: #1DB954;\n      --spotify-black: #121212;\n      --spotify-dark: #181818;\n      --spotify-card: #282828;\n      --spotify-text: #FFFFFF;\n      --spotify-muted: #B3B3B3;\n      --spotify-border: #333333;\n      --glow: rgba(29, 185, 84, 0.25);\n    }\n\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n    body {\n      background-color: var(--spotify-black);\n      color: var(--spotify-text);\n      font-family: 'DM Sans', sans-serif;\n      min-height: 100vh;\n      overflow-x: hidden;\n    }\n\n    \/* \u2500\u2500 HERO \u2500\u2500 *\/\n    .hero {\n      position: relative;\n      text-align: center;\n      padding: 64px 24px 48px;\n      overflow: hidden;\n    }\n\n    .hero::before {\n      content: '';\n      position: absolute;\n      top: -60px; left: 50%;\n      transform: translateX(-50%);\n      width: 600px; height: 600px;\n      background: radial-gradient(ellipse at center, rgba(29,185,84,0.18) 0%, transparent 70%);\n      pointer-events: none;\n      animation: pulse 6s ease-in-out infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }\n      50%       { opacity: 1;   transform: translateX(-50%) scale(1.1); }\n    }\n\n    \/* Logo + badge on the same horizontal line *\/\n    .hero-top {\n      display: inline-flex;\n      align-items: center;\n      gap: 14px;\n      margin-bottom: 28px;\n      animation: fadeUp 0.7s ease both;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    .hero-logo {\n      display: inline-flex;\n      align-items: center;\n      gap: 9px;\n    }\n\n    .hero-logo svg { width: 34px; height: 34px; flex-shrink: 0; }\n\n    .hero-logo span {\n      font-size: 21px;\n      font-weight: 700;\n      letter-spacing: -0.4px;\n      line-height: 1;\n    }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      background: var(--spotify-card);\n      border: 1px solid var(--spotify-border);\n      border-radius: 100px;\n      padding: 5px 14px;\n      font-size: 11px;\n      color: var(--spotify-muted);\n      letter-spacing: 0.07em;\n      text-transform: uppercase;\n      line-height: 1;\n    }\n\n    .hero h1 {\n      font-size: clamp(30px, 5vw, 52px);\n      font-weight: 700;\n      line-height: 1.1;\n      letter-spacing: -1.5px;\n      margin-bottom: 14px;\n      animation: fadeUp 0.7s 0.1s ease both;\n      color: #FFFFFF;\n    }\n\n    .hero h1 em {\n      font-style: normal;\n      color: var(--spotify-green);\n    }\n\n    .hero p {\n      font-size: 15px;\n      color: var(--spotify-muted);\n      max-width: 440px;\n      margin: 0 auto 12px;\n      line-height: 1.6;\n      animation: fadeUp 0.7s 0.2s ease both;\n    }\n\n    .divider {\n      width: 48px; height: 2px;\n      background: var(--spotify-green);\n      margin: 0 auto 56px;\n      animation: fadeUp 0.7s 0.25s ease both;\n    }\n\n    \/* \u2500\u2500 GRID: always 2 columns \u2500\u2500 *\/\n    .grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 28px;\n      max-width: 880px;\n      margin: 0 auto;\n      padding: 0 28px 72px;\n    }\n\n    \/* \u2500\u2500 AD CARD \u2500\u2500 *\/\n    .ad-card {\n      background: var(--spotify-dark);\n      border-radius: 14px;\n      overflow: hidden;\n      border: 1px solid var(--spotify-border);\n      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),\n                  box-shadow 0.35s ease,\n                  border-color 0.35s ease;\n      animation: fadeUp 0.6s ease both;\n      cursor: pointer;\n    }\n\n    .ad-card:hover {\n      transform: translateY(-7px);\n      box-shadow: 0 20px 55px rgba(0,0,0,0.6), 0 0 0 1px var(--spotify-green), 0 0 36px var(--glow);\n      border-color: var(--spotify-green);\n    }\n\n    .ad-card:nth-child(1) { animation-delay: 0.1s; }\n    .ad-card:nth-child(2) { animation-delay: 0.2s; }\n    .ad-card:nth-child(3) { animation-delay: 0.3s; }\n    .ad-card:nth-child(4) { animation-delay: 0.4s; }\n\n    \/* Instagram top bar *\/\n    .insta-top {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 11px 13px;\n      background: var(--spotify-dark);\n    }\n\n    .insta-account { display: flex; align-items: center; gap: 9px; }\n\n    .insta-avatar {\n      width: 30px; height: 30px;\n      background: var(--spotify-green);\n      border-radius: 50%;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .insta-avatar svg { width: 17px; height: 17px; }\n    .insta-info { line-height: 1.2; }\n\n    .insta-name {\n      font-size: 12px; font-weight: 600;\n      display: flex; align-items: center; gap: 3px;\n    }\n\n    .insta-name svg { width: 11px; height: 11px; }\n    .insta-sponsored { font-size: 10px; color: var(--spotify-muted); }\n\n    .insta-dots { display: flex; gap: 3px; align-items: center; }\n    .insta-dots span { width: 4px; height: 4px; background: var(--spotify-muted); border-radius: 50%; }\n\n    \/* Image *\/\n    .ad-image {\n      position: relative;\n      aspect-ratio: 1 \/ 1;\n      overflow: hidden;\n      background: #000;\n    }\n\n    .ad-image img {\n      width: 100%; height: 100%;\n      object-fit: cover;\n      display: block;\n      transition: transform 0.5s ease;\n    }\n\n    .ad-card:hover .ad-image img { transform: scale(1.04); }\n\n    .ad-label {\n      position: absolute;\n      top: 10px; right: 10px;\n      background: rgba(0,0,0,0.65);\n      backdrop-filter: blur(6px);\n      border: 1px solid rgba(255,255,255,0.15);\n      border-radius: 100px;\n      padding: 3px 9px;\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.05em;\n      color: var(--spotify-green);\n      text-transform: uppercase;\n    }\n\n    \/* CTA bar *\/\n    .ad-cta {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 9px 13px;\n      background: #2d6a3f;\n      font-size: 13px;\n      font-weight: 600;\n    }\n\n    .ad-cta-arrow { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }\n\n    \/* Actions *\/\n    .insta-actions {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 9px 13px 5px;\n    }\n\n    .insta-actions-left { display: flex; gap: 12px; align-items: center; }\n\n    .insta-actions svg {\n      width: 20px; height: 20px;\n      stroke: var(--spotify-text);\n      fill: none;\n      stroke-width: 1.8;\n      cursor: pointer;\n      transition: stroke 0.2s;\n    }\n\n    .insta-actions svg:hover { stroke: var(--spotify-green); }\n\n    \/* Caption *\/\n    .ad-caption { padding: 4px 13px 13px; }\n\n    .ad-caption-text {\n      font-size: 12px;\n      line-height: 1.55;\n      color: var(--spotify-text);\n    }\n\n    .ad-caption-text strong { font-weight: 700; }\n\n    .ad-caption-tags {\n      margin-top: 5px;\n      font-size: 11px;\n      color: #4a9eff;\n      line-height: 1.6;\n    }\n\n    \/* \u2500\u2500 FOOTER + DISCLAIMER \u2500\u2500 *\/\n    .footer {\n      border-top: 1px solid var(--spotify-border);\n      padding: 40px 28px 52px;\n      max-width: 880px;\n      margin: 0 auto;\n    }\n\n    .footer-main {\n      text-align: center;\n      margin-bottom: 28px;\n      color: var(--spotify-muted);\n      font-size: 13px;\n    }\n\n    .footer-main span { color: var(--spotify-green); font-weight: 600; }\n\n    .disclaimer {\n      background: var(--spotify-dark);\n      border: 1px solid var(--spotify-border);\n      border-radius: 10px;\n      padding: 24px 28px;\n    }\n\n    .disclaimer h3 {\n      font-size: 11px;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--spotify-green);\n      margin-bottom: 14px;\n    }\n\n    .disclaimer p {\n      font-size: 12px;\n      line-height: 1.75;\n      color: var(--spotify-muted);\n      margin-bottom: 10px;\n    }\n\n    .disclaimer p:last-of-type { margin-bottom: 0; }\n\n    .disclaimer-note {\n      margin-top: 18px;\n      padding-top: 14px;\n      border-top: 1px solid var(--spotify-border);\n      font-size: 11px;\n      color: #666;\n      text-align: center;\n      letter-spacing: 0.05em;\n    }\n\n    \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\n    @keyframes fadeUp {\n      from { opacity: 0; transform: translateY(20px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n    @media (max-width: 580px) {\n      .grid { grid-template-columns: 1fr; padding: 0 16px 48px; gap: 20px; }\n      .hero { padding: 48px 16px 36px; }\n      .footer { padding: 32px 16px 44px; }\n      .disclaimer { padding: 18px 16px; }\n    }\n\/* \u2500\u2500 \u65b0\u589e OOH & Flyer \u6837\u5f0f \u2500\u2500 *\/\n    .section-title {\n      max-width: 880px;\n      margin: 60px auto 24px;\n      padding: 0 28px;\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--spotify-green);\n      letter-spacing: -0.5px;\n    }\n\n    \/* \u8c03\u6574\u6d77\u62a5\u548c\u4f20\u5355\u7684\u56fe\u7247\u6bd4\u4f8b *\/\n    .ooh-image { aspect-ratio: 4 \/ 5 !important; } \n    .flyer-image { aspect-ratio: 1 \/ 1.41 !important; } \n\n    .ad-description {\n      padding: 15px 13px 20px;\n      background: var(--spotify-dark);\n    }\n\n    .ad-description strong {\n      display: block;\n      font-size: 14px;\n      color: #fff;\n      margin-bottom: 6px;\n    }\n\n    .ad-description p {\n      font-size: 12px;\n      color: var(--spotify-muted);\n      line-height: 1.5;\n    }\n\n    \/* \u8ba9\u4f20\u5355\u90e8\u5206\u5c45\u4e2d\u4e14\u4e0d\u8981\u592a\u5bbd *\/\n    .single-col {\n      grid-template-columns: 1fr;\n      max-width: 500px;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <!-- HERO -->\n  <header class=\"hero\">\n    <div class=\"hero-top\">\n      <div class=\"hero-logo\">\n        <svg viewBox=\"0 0 168 168\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <circle cx=\"84\" cy=\"84\" r=\"84\" fill=\"#1DB954\"\/>\n          <path d=\"M122.3 117.5c-1.6 0-2.6-.5-3.9-1.3C105.2 108 89.3 104 72.2 104c-10.2 0-20.5 1.6-29.7 3.9-1.3.3-3 .9-4.1.9-3.3 0-5.5-2.6-5.5-5.5 0-3.5 2.2-5.3 4.9-5.9 11.4-2.7 23-4.3 34.4-4.3 19.4 0 37.7 4.5 52.3 13.6 2.2 1.3 3.5 2.9 3.5 5.5 0 3.2-2.6 5.3-5.7 5.3zm9.5-24.5c-2 0-3.3-.8-4.6-1.6-14.1-8.4-34.6-13.5-56.4-13.5-11.7 0-22.7 1.7-31.1 4.1-1.7.5-2.8 1-4.2 1-4 0-7-3.1-7-7 0-4 2.3-6.5 5.6-7.5 10.4-3 22.4-5 37-5 24 0 46.4 5.8 62.9 16 3 1.8 4.7 4.1 4.7 7.5 0 3.9-3.1 6.9-7 7zm10.5-27.8c-1.8 0-3.1-.5-4.6-1.4-16.3-9.7-40.4-14.9-64.3-14.9-13.2 0-25.8 1.7-37.1 4.8-1.8.5-3 1-4.9 1-4.9 0-8.7-3.9-8.7-8.8s3.1-7.9 6.9-9c13-3.6 27.2-5.6 43.8-5.6 26.6 0 53 6 71.7 17.3 3 1.8 5.1 4.4 5.1 8.4 0 4.9-3.9 8.8-8.7 8.8z\" fill=\"#fff\"\/>\n        <\/svg>\n        <span>Spotify<\/span>\n      <\/div>\n      <div class=\"badge\">Ads<\/div>\n    <\/div>\n\n    <h1>Mental Health <em>Mode<\/em><\/h1>\n    <p>Instagram ads, OOH and flyer from the Mental Health Mode campaign.<\/p>\n    <div class=\"divider\"><\/div>\n  <\/header>\n\n  <!-- AD GRID -->\n  <main class=\"grid\">\n\n    <!-- AD 1 -->\n    <article class=\"ad-card\">\n      <div class=\"insta-top\">\n        <div class=\"insta-account\">\n          <div class=\"insta-avatar\">\n            <svg viewBox=\"0 0 168 168\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"84\" cy=\"84\" r=\"84\" fill=\"#1DB954\"\/><path d=\"M122.3 117.5c-1.6 0-2.6-.5-3.9-1.3C105.2 108 89.3 104 72.2 104c-10.2 0-20.5 1.6-29.7 3.9-1.3.3-3 .9-4.1.9-3.3 0-5.5-2.6-5.5-5.5 0-3.5 2.2-5.3 4.9-5.9 11.4-2.7 23-4.3 34.4-4.3 19.4 0 37.7 4.5 52.3 13.6 2.2 1.3 3.5 2.9 3.5 5.5 0 3.2-2.6 5.3-5.7 5.3zm9.5-24.5c-2 0-3.3-.8-4.6-1.6-14.1-8.4-34.6-13.5-56.4-13.5-11.7 0-22.7 1.7-31.1 4.1-1.7.5-2.8 1-4.2 1-4 0-7-3.1-7-7 0-4 2.3-6.5 5.6-7.5 10.4-3 22.4-5 37-5 24 0 46.4 5.8 62.9 16 3 1.8 4.7 4.1 4.7 7.5 0 3.9-3.1 6.9-7 7zm10.5-27.8c-1.8 0-3.1-.5-4.6-1.4-16.3-9.7-40.4-14.9-64.3-14.9-13.2 0-25.8 1.7-37.1 4.8-1.8.5-3 1-4.9 1-4.9 0-8.7-3.9-8.7-8.8s3.1-7.9 6.9-9c13-3.6 27.2-5.6 43.8-5.6 26.6 0 53 6 71.7 17.3 3 1.8 5.1 4.4 5.1 8.4 0 4.9-3.9 8.8-8.7 8.8z\" fill=\"#fff\"\/><\/svg>\n          <\/div>\n          <div class=\"insta-info\">\n            <div class=\"insta-name\">spotify <svg viewBox=\"0 0 24 24\" fill=\"#3897f0\"><path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg><\/div>\n            <div class=\"insta-sponsored\">Sponsored<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"insta-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"ad-image\">\n        <img decoding=\"async\" src=\"https:\/\/yuhanshe.annenbergprhosting.com\/wp-content\/uploads\/2026\/05\/ig-ad-1.png\" alt=\"Ad 1: Person with headphones relaxing in a cozy room\" \/>\n        <span class=\"ad-label\">Ad 01<\/span>\n      <\/div>\n      <div class=\"ad-cta\">\n        <span>Listen Now<\/span>\n        <div class=\"ad-cta-arrow\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M9 18l6-6-6-6\"\/><\/svg><\/div>\n      <\/div>\n      <div class=\"insta-actions\">\n        <div class=\"insta-actions-left\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/><\/svg>\n          <svg viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\n          <svg viewBox=\"0 0 24 24\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\n        <\/div>\n        <svg viewBox=\"0 0 24 24\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"\/><\/svg>\n      <\/div>\n      <div class=\"ad-caption\">\n        <p class=\"ad-caption-text\"><strong>spotify<\/strong> Your music. Your space. Your moment. Mental Health Mode is here. For the moments when choosing feels like too much. Just tap. We&#8217;ll take it from here.<\/p>\n        <p class=\"ad-caption-tags\">#SpotifyMentalHealthMode #TapBreatheLetItPlay #YourSpaceYours<\/p>\n      <\/div>\n    <\/article>\n\n    <!-- AD 2 -->\n    <article class=\"ad-card\">\n      <div class=\"insta-top\">\n        <div class=\"insta-account\">\n          <div class=\"insta-avatar\">\n            <svg viewBox=\"0 0 168 168\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"84\" cy=\"84\" r=\"84\" fill=\"#1DB954\"\/><path d=\"M122.3 117.5c-1.6 0-2.6-.5-3.9-1.3C105.2 108 89.3 104 72.2 104c-10.2 0-20.5 1.6-29.7 3.9-1.3.3-3 .9-4.1.9-3.3 0-5.5-2.6-5.5-5.5 0-3.5 2.2-5.3 4.9-5.9 11.4-2.7 23-4.3 34.4-4.3 19.4 0 37.7 4.5 52.3 13.6 2.2 1.3 3.5 2.9 3.5 5.5 0 3.2-2.6 5.3-5.7 5.3zm9.5-24.5c-2 0-3.3-.8-4.6-1.6-14.1-8.4-34.6-13.5-56.4-13.5-11.7 0-22.7 1.7-31.1 4.1-1.7.5-2.8 1-4.2 1-4 0-7-3.1-7-7 0-4 2.3-6.5 5.6-7.5 10.4-3 22.4-5 37-5 24 0 46.4 5.8 62.9 16 3 1.8 4.7 4.1 4.7 7.5 0 3.9-3.1 6.9-7 7zm10.5-27.8c-1.8 0-3.1-.5-4.6-1.4-16.3-9.7-40.4-14.9-64.3-14.9-13.2 0-25.8 1.7-37.1 4.8-1.8.5-3 1-4.9 1-4.9 0-8.7-3.9-8.7-8.8s3.1-7.9 6.9-9c13-3.6 27.2-5.6 43.8-5.6 26.6 0 53 6 71.7 17.3 3 1.8 5.1 4.4 5.1 8.4 0 4.9-3.9 8.8-8.7 8.8z\" fill=\"#fff\"\/><\/svg>\n          <\/div>\n          <div class=\"insta-info\">\n            <div class=\"insta-name\">spotify <svg viewBox=\"0 0 24 24\" fill=\"#3897f0\"><path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg><\/div>\n            <div class=\"insta-sponsored\">Sponsored<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"insta-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"ad-image\">\n        <img decoding=\"async\" src=\"https:\/\/yuhanshe.annenbergprhosting.com\/wp-content\/uploads\/2026\/05\/11-1.png\" alt=\"Ad 2: Apple Watch showing Mental Health Mode\" \/>\n        <span class=\"ad-label\">Ad 02<\/span>\n      <\/div>\n      <div class=\"ad-cta\">\n        <span>Listen Now<\/span>\n        <div class=\"ad-cta-arrow\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M9 18l6-6-6-6\"\/><\/svg><\/div>\n      <\/div>\n      <div class=\"insta-actions\">\n        <div class=\"insta-actions-left\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/><\/svg>\n          <svg viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\n          <svg viewBox=\"0 0 24 24\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\n        <\/div>\n        <svg viewBox=\"0 0 24 24\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"\/><\/svg>\n      <\/div>\n      <div class=\"ad-caption\">\n        <p class=\"ad-caption-text\"><strong>spotify<\/strong> You don&#8217;t have to choose. Mental Health Mode finds the right music, so you can just press play. Breathe. We got you.<\/p>\n        <p class=\"ad-caption-tags\">#SpotifyMentalHealthMode #TapBreatheLetItPlay #YourSpaceYours<\/p>\n      <\/div>\n    <\/article>\n\n    <!-- AD 3 -->\n    <article class=\"ad-card\">\n      <div class=\"insta-top\">\n        <div class=\"insta-account\">\n          <div class=\"insta-avatar\">\n            <svg viewBox=\"0 0 168 168\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"84\" cy=\"84\" r=\"84\" fill=\"#1DB954\"\/><path d=\"M122.3 117.5c-1.6 0-2.6-.5-3.9-1.3C105.2 108 89.3 104 72.2 104c-10.2 0-20.5 1.6-29.7 3.9-1.3.3-3 .9-4.1.9-3.3 0-5.5-2.6-5.5-5.5 0-3.5 2.2-5.3 4.9-5.9 11.4-2.7 23-4.3 34.4-4.3 19.4 0 37.7 4.5 52.3 13.6 2.2 1.3 3.5 2.9 3.5 5.5 0 3.2-2.6 5.3-5.7 5.3zm9.5-24.5c-2 0-3.3-.8-4.6-1.6-14.1-8.4-34.6-13.5-56.4-13.5-11.7 0-22.7 1.7-31.1 4.1-1.7.5-2.8 1-4.2 1-4 0-7-3.1-7-7 0-4 2.3-6.5 5.6-7.5 10.4-3 22.4-5 37-5 24 0 46.4 5.8 62.9 16 3 1.8 4.7 4.1 4.7 7.5 0 3.9-3.1 6.9-7 7zm10.5-27.8c-1.8 0-3.1-.5-4.6-1.4-16.3-9.7-40.4-14.9-64.3-14.9-13.2 0-25.8 1.7-37.1 4.8-1.8.5-3 1-4.9 1-4.9 0-8.7-3.9-8.7-8.8s3.1-7.9 6.9-9c13-3.6 27.2-5.6 43.8-5.6 26.6 0 53 6 71.7 17.3 3 1.8 5.1 4.4 5.1 8.4 0 4.9-3.9 8.8-8.7 8.8z\" fill=\"#fff\"\/><\/svg>\n          <\/div>\n          <div class=\"insta-info\">\n            <div class=\"insta-name\">spotify <svg viewBox=\"0 0 24 24\" fill=\"#3897f0\"><path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg><\/div>\n            <div class=\"insta-sponsored\">Sponsored<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"insta-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"ad-image\">\n        <img decoding=\"async\" src=\"https:\/\/yuhanshe.annenbergprhosting.com\/wp-content\/uploads\/2026\/05\/21-1.png\" alt=\"Ad 3: iPhone showing the Mental Health Mode app screen\" \/>\n        <span class=\"ad-label\">Ad 03<\/span>\n      <\/div>\n      <div class=\"ad-cta\">\n        <span>Listen Now<\/span>\n        <div class=\"ad-cta-arrow\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M9 18l6-6-6-6\"\/><\/svg><\/div>\n      <\/div>\n      <div class=\"insta-actions\">\n        <div class=\"insta-actions-left\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/><\/svg>\n          <svg viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\n          <svg viewBox=\"0 0 24 24\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\n        <\/div>\n        <svg viewBox=\"0 0 24 24\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"\/><\/svg>\n      <\/div>\n      <div class=\"ad-caption\">\n        <p class=\"ad-caption-text\"><strong>spotify<\/strong> No need to search. No need to choose. Mental Health Mode finds the right music, so you can just press play. Breathe. We got you.<\/p>\n        <p class=\"ad-caption-tags\">#SpotifyMentalHealthMode #YourSpaceYours #PressPlay<\/p>\n      <\/div>\n    <\/article>\n\n    <!-- AD 4 -->\n    <article class=\"ad-card\">\n      <div class=\"insta-top\">\n        <div class=\"insta-account\">\n          <div class=\"insta-avatar\">\n            <svg viewBox=\"0 0 168 168\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"84\" cy=\"84\" r=\"84\" fill=\"#1DB954\"\/><path d=\"M122.3 117.5c-1.6 0-2.6-.5-3.9-1.3C105.2 108 89.3 104 72.2 104c-10.2 0-20.5 1.6-29.7 3.9-1.3.3-3 .9-4.1.9-3.3 0-5.5-2.6-5.5-5.5 0-3.5 2.2-5.3 4.9-5.9 11.4-2.7 23-4.3 34.4-4.3 19.4 0 37.7 4.5 52.3 13.6 2.2 1.3 3.5 2.9 3.5 5.5 0 3.2-2.6 5.3-5.7 5.3zm9.5-24.5c-2 0-3.3-.8-4.6-1.6-14.1-8.4-34.6-13.5-56.4-13.5-11.7 0-22.7 1.7-31.1 4.1-1.7.5-2.8 1-4.2 1-4 0-7-3.1-7-7 0-4 2.3-6.5 5.6-7.5 10.4-3 22.4-5 37-5 24 0 46.4 5.8 62.9 16 3 1.8 4.7 4.1 4.7 7.5 0 3.9-3.1 6.9-7 7zm10.5-27.8c-1.8 0-3.1-.5-4.6-1.4-16.3-9.7-40.4-14.9-64.3-14.9-13.2 0-25.8 1.7-37.1 4.8-1.8.5-3 1-4.9 1-4.9 0-8.7-3.9-8.7-8.8s3.1-7.9 6.9-9c13-3.6 27.2-5.6 43.8-5.6 26.6 0 53 6 71.7 17.3 3 1.8 5.1 4.4 5.1 8.4 0 4.9-3.9 8.8-8.7 8.8z\" fill=\"#fff\"\/><\/svg>\n          <\/div>\n          <div class=\"insta-info\">\n            <div class=\"insta-name\">spotify <svg viewBox=\"0 0 24 24\" fill=\"#3897f0\"><path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg><\/div>\n            <div class=\"insta-sponsored\">Sponsored<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"insta-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"ad-image\">\n        <img decoding=\"async\" src=\"https:\/\/yuhanshe.annenbergprhosting.com\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-2026\u5e745\u670811\u65e5-16_00_30.png\" alt=\"Ad 4: Dark background with glowing green orb and headline\" \/>\n        <span class=\"ad-label\">Ad 04<\/span>\n      <\/div>\n      <div class=\"ad-cta\">\n        <span>Listen Now<\/span>\n        <div class=\"ad-cta-arrow\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M9 18l6-6-6-6\"\/><\/svg><\/div>\n      <\/div>\n      <div class=\"insta-actions\">\n        <div class=\"insta-actions-left\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/><\/svg>\n          <svg viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\n          <svg viewBox=\"0 0 24 24\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\n        <\/div>\n        <svg viewBox=\"0 0 24 24\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"\/><\/svg>\n      <\/div>\n      <div class=\"ad-caption\">\n        <p class=\"ad-caption-text\"><strong>spotify<\/strong> Some days, deciding is hard. That&#8217;s why we made Mental Health Mode. We pick the music. You just breathe. Press play, and let it be easy.<\/p>\n        <p class=\"ad-caption-tags\">#SpotifyMentalHealthMode #TapBreatheLetItPlay #YourSpaceYours<\/p>\n      <\/div>\n    <\/article>\n\n  <\/main>\n\n  <!-- FOOTER + DISCLAIMER -->\n  <footer class=\"footer\">\n<!-- OUT OF HOME SECTION -->\n  <h2 class=\"section-title\">Out of Home Ads<\/h2>\n  <section class=\"grid\">\n    \n    <!-- Bus Shelter -->\n    <article class=\"ad-card\">\n      <div class=\"ad-image ooh-image\">\n        <img decoding=\"async\" src=\"https:\/\/yuhanshe.annenbergprhosting.com\/wp-content\/uploads\/2026\/05\/\u5c4f\u5e55\u622a\u56fe-2026-05-12-140922.png\"Bus Shelter Ad\">\n        <span class=\"ad-label\">Bus Shelter<\/span>\n      <\/div>\n      <div class=\"ad-description\">\n        <strong>Bus shelter<\/strong>\n        <p>The dynamic bus shelter will pulsate with the rhythm of breathing.<\/p>\n      <\/div>\n    <\/article>\n\n    <!-- Poster -->\n    <article class=\"ad-card\">\n      <div class=\"ad-image ooh-image\">\n        <img decoding=\"async\" src=\"https:\/\/yuhanshe.annenbergprhosting.com\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-2026\u5e745\u670811\u65e5-16_53_31.png\" alt=\"Street Poster\">\n        <span class=\"ad-label\">Poster<\/span>\n      <\/div>\n      <div class=\"ad-description\">\n        <strong>Posters<\/strong>\n        <p>The poster series reflects different emotional states through texture and tone, while keeping one simple idea at the center, music that meets you where you are.<\/p>\n      <\/div>\n    <\/article>\n\n  <\/section>\n\n  <!-- FLYER SECTION -->\n  <h2 class=\"section-title\">Campaign Flyer<\/h2>\n  <section class=\"grid single-col\">\n    \n    <article class=\"ad-card\">\n      <div class=\"ad-image flyer-image\">\n        <img decoding=\"async\" src=\"https:\/\/yuhanshe.annenbergprhosting.com\/wp-content\/uploads\/2026\/05\/Mental-Health-Mode-flyer.png\" alt=\"Campaign Flyer\">\n        <span class=\"ad-label\">Flyer<\/span>\n      <\/div>\n      <div class=\"ad-description\">\n        <strong>Flyer<\/strong>\n        <p>A guide for introducing Mental Health Mode.<\/p>\n      <\/div>\n    <\/article>\n\n  <\/section>\n    <div class=\"footer-main\">\n      Ad Showcase \u00b7 <span>Spotify Mental Health Mode<\/span> \n    <\/div>\n    <div class=\"disclaimer\">\n      <h3>Academic Disclaimer<\/h3>\n      <p>This website was created as a class project for an academic course at the USC Annenberg School for Communication and Journalism. It is a conceptual campaign exercise and is not affiliated with, endorsed by, or associated with Spotify, or any of their parent companies, subsidiaries, or partners. All brand names, logos, and trademarks referenced on this site belong to their respective owners. No commercial use is intended or implied. This project was produced solely for educational purposes.<\/p>\n      <p>Artificial intelligence tools, specifically ChatGPT, and Claude were used in the design and layout of this campaign website, as well as for proofreading and copy refinement throughout the campaign materials.<\/p>\n      <div class=\"disclaimer-note\">For educational use only &nbsp;\u00b7&nbsp; Not for commercial distribution<\/div>\n    <\/div>\n  <\/footer>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Spotify Mental Health Mode Spotify Ads Mental Health Mode Instagram ads, OOH and flyer from the Mental Health Mode campaign. spotify Sponsored Ad 01 Listen Now spotify Your music. Your space. Your moment. Mental Health Mode is here. For the moments when choosing feels like too much. Just tap. We&#8217;ll take it from here. #SpotifyMentalHealthMode [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-287","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yuhanshe.annenbergprhosting.com\/index.php?rest_route=\/wp\/v2\/pages\/287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yuhanshe.annenbergprhosting.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yuhanshe.annenbergprhosting.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yuhanshe.annenbergprhosting.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yuhanshe.annenbergprhosting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=287"}],"version-history":[{"count":6,"href":"https:\/\/yuhanshe.annenbergprhosting.com\/index.php?rest_route=\/wp\/v2\/pages\/287\/revisions"}],"predecessor-version":[{"id":314,"href":"https:\/\/yuhanshe.annenbergprhosting.com\/index.php?rest_route=\/wp\/v2\/pages\/287\/revisions\/314"}],"wp:attachment":[{"href":"https:\/\/yuhanshe.annenbergprhosting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}