Discography

{% style %} .album-carousel-{{ section.id }} { position: relative; background: {{ section.settings.bg_color }}; padding: 72px 20px; overflow: hidden; isolation: isolate; } .album-carousel-{{ section.id }} .album-carousel__glow { position: absolute; top: 50%; left: 50%; width: 60vw; height: 60vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, {{ section.settings.accent_color }}22, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; z-index: 0; } .album-carousel-{{ section.id }} .album-carousel__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .album-carousel-{{ section.id }}.is-visible .album-carousel__inner { opacity: 1; transform: translateY(0); } .album-carousel-{{ section.id }} .album-carousel__title { color: {{ section.settings.text_color }}; text-align: center; font-size: clamp(24px, 3.4vw, 38px); text-transform: uppercase; letter-spacing: 2px; margin: 0 0 44px; position: relative; } .album-carousel-{{ section.id }} .album-carousel__title::after { content: ""; display: block; width: 56px; height: 3px; background: {{ section.settings.accent_color }}; margin: 16px auto 0; border-radius: 3px; } .album-carousel-{{ section.id }} .album-carousel__viewport { position: relative; display: flex; align-items: center; gap: 8px; } .album-carousel-{{ section.id }} .album-carousel__mask { flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .album-carousel-{{ section.id }} .album-carousel__track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 12px calc(50% - 100px) 28px; -ms-overflow-style: none; scrollbar-width: none; cursor: grab; outline: none; } .album-carousel-{{ section.id }} .album-carousel__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; } .album-carousel-{{ section.id }} .album-carousel__track:focus-visible { box-shadow: inset 0 0 0 2px {{ section.settings.accent_color }}; border-radius: 8px; } .album-carousel-{{ section.id }} .album-carousel__track::-webkit-scrollbar { display: none; } .album-carousel-{{ section.id }} .album-card { flex: 0 0 200px; scroll-snap-align: center; opacity: .5; transform: scale(.82); filter: saturate(.4) brightness(.75); transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1); will-change: transform, opacity, filter; } .album-carousel-{{ section.id }} .album-card.is-active { opacity: 1; transform: scale(1); filter: saturate(1) brightness(1); } .album-carousel-{{ section.id }} .album-card__link { text-decoration: none; display: block; } .album-carousel-{{ section.id }} .album-card__cover { position: relative; display: block; width: 200px; height: 200px; border-radius: 14px; overflow: hidden; background: #232323; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: box-shadow .4s ease; } .album-carousel-{{ section.id }} .album-card.is-active .album-card__cover { box-shadow: 0 18px 42px rgba(0,0,0,.5), 0 0 0 2px {{ section.settings.accent_color }}55, 0 0 32px {{ section.settings.accent_color }}44; } .album-carousel-{{ section.id }} .album-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); } .album-carousel-{{ section.id }} .album-card:hover .album-card__cover img { transform: scale(1.08); } .album-carousel-{{ section.id }} .album-card__sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); transform: translateX(-120%); transition: transform .7s ease; } .album-carousel-{{ section.id }} .album-card:hover .album-card__sheen { transform: translateX(120%); } .album-carousel-{{ section.id }} .album-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #888; font-size: 13px; text-align: center; padding: 10px; } .album-carousel-{{ section.id }} .album-card__title { display: block; color: {{ section.settings.text_color }}; font-size: 14px; font-weight: 600; margin: 16px 0 6px; text-align: center; transition: color .3s ease; } .album-carousel-{{ section.id }} .album-card__cta { display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: {{ section.settings.accent_color }}; } .album-carousel-{{ section.id }} .album-card__cta svg { transition: transform .3s ease; } .album-carousel-{{ section.id }} .album-card:hover .album-card__cta svg { transform: translateX(3px); } .album-carousel-{{ section.id }} .album-carousel__nav { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); backdrop-filter: blur(6px); color: {{ section.settings.text_color }}; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .3s ease, border-color .3s ease, transform .2s ease, color .3s ease; } .album-carousel-{{ section.id }} .album-carousel__nav:hover { background: {{ section.settings.accent_color }}; border-color: {{ section.settings.accent_color }}; color: #fff; transform: scale(1.08); } .album-carousel-{{ section.id }} .album-carousel__nav:active { transform: scale(.95); } .album-carousel-{{ section.id }} .album-carousel__progress { max-width: 220px; height: 3px; margin: 28px auto 0; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; } .album-carousel-{{ section.id }} .album-carousel__progress-bar { display: block; height: 100%; width: 0%; background: {{ section.settings.accent_color }}; border-radius: 3px; transition: width .35s cubic-bezier(.22,1,.36,1); } .album-carousel-{{ section.id }} .album-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .album-carousel-{{ section.id }} .album-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.25); cursor: pointer; transition: background .3s ease, transform .3s ease, width .3s ease; } .album-carousel-{{ section.id }} .album-carousel__dots button.is-active { background: {{ section.settings.accent_color }}; width: 20px; border-radius: 4px; } @media (max-width: 749px) { .album-carousel-{{ section.id }} .album-carousel__track { padding: 12px calc(50% - 76px) 24px; } .album-carousel-{{ section.id }} .album-card { flex-basis: 152px; } .album-carousel-{{ section.id }} .album-card__cover { width: 152px; height: 152px; } .album-carousel-{{ section.id }} .album-carousel__nav { display: none; } } @media (prefers-reduced-motion: reduce) { .album-carousel-{{ section.id }} * { transition-duration: .01ms !important; scroll-behavior: auto !important; } } {% endstyle %} {% schema %} { "name": "CM - Album Carousel", "settings": [ { "type": "text", "id": "heading", "label": "Section title", "default": "Discography" }, { "type": "checkbox", "id": "autoplay", "label": "Autoplay", "default": true }, { "type": "range", "id": "autoplay_speed", "label": "Autoplay speed", "min": 3000, "max": 9000, "step": 500, "unit": "ms", "default": 5000 }, { "type": "color", "id": "bg_color", "label": "Background color", "default": "#1A1A1A" }, { "type": "color", "id": "text_color", "label": "Text color", "default": "#FFFFFF" }, { "type": "color", "id": "accent_color", "label": "Accent color", "default": "#EC1E79" } ], "blocks": [ { "type": "album", "name": "Album", "settings": [ { "type": "image_picker", "id": "image", "label": "Image (direct upload, takes precedence over URL)" }, { "type": "url", "id": "image_url", "label": "External cover URL" }, { "type": "text", "id": "title", "label": "Album title" }, { "type": "url", "id": "link_url", "label": "Listen / download link" }, { "type": "text", "id": "button_label", "label": "Button text", "default": "Listen" } ] } ], "max_blocks": 20, "presets": [ { "name": "CM - Album Carousel", "blocks": [ { "type": "album", "settings": { "image_url": "https://www.christophe-mae.fr/images/album_feteforaine.jpg", "title": "Fête Foraine", "link_url": "https://christophemae.lnk.to/feteforaineAW" } }, { "type": "album", "settings": { "image_url": "https://www.christophe-mae.fr/images/album_50ansdeja.jpg", "title": "50 ans déjà", "link_url": "https://christophemae.lnk.to/50ansdejaAW" } }, { "type": "album", "settings": { "title": "Pays des Merveilles", "link_url": "https://christophemae.lnk.to/pdmAW" } }, { "type": "album", "settings": { "image_url": "https://www.christophe-mae.fr/images/album-cestdrolelavie.jpg", "title": "C'est drôle la vie", "link_url": "https://christophemae.lnk.to/cdlvAW" } }, { "type": "album", "settings": { "image_url": "https://www.christophe-mae.fr/images/album-monparadis.jpg", "title": "Mon Paradis", "link_url": "https://christophemae.lnk.to/monparadisAW" } }, { "type": "album", "settings": { "image_url": "https://www.christophe-mae.fr/images/album-commealamaison.jpg", "title": "Comme à la Maison", "link_url": "https://christophemae.lnk.to/CommeALaMaisonAW" } }, { "type": "album", "settings": { "image_url": "https://www.christophe-mae.fr/images/album-ontracelaroute-live.jpg", "title": "On Trace la Route - Le Live", "link_url": "https://christophemae.lnk.to/OnTraceLaRouteLiveAW" } }, { "type": "album", "settings": { "image_url": "https://www.christophe-mae.fr/images/album_je-veux-du-bonheur.jpg", "title": "Je Veux du Bonheur", "link_url": "https://christophemae.lnk.to/JeVeuxDuBonheurAW" } }, { "type": "album", "settings": { "image_url": "https://www.christophe-mae.fr/images/album_l-attrape-reves.jpg", "title": "L'Attrape-Rêves", "link_url": "https://christophemae.lnk.to/lattraperevescollectorAW" } }, { "type": "album", "settings": { "image_url": "https://www.christophe-mae.fr/images/La-Vie-d-Artiste-br-Album.jpg", "title": "La Vie d'Artiste", "link_url": "https://christophemae.lnk.to/LaViedartisteAW" } } ] } ] } {% endschema %} {% style %} .video-carousel-{{ section.id }} { position: relative; background: {{ section.settings.bg_color }}; padding: 72px 20px; overflow: hidden; isolation: isolate; } .video-carousel-{{ section.id }} .video-carousel__glow { position: absolute; top: 50%; left: 50%; width: 60vw; height: 60vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, {{ section.settings.accent_color }}22, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; z-index: 0; } .video-carousel-{{ section.id }} .video-carousel__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .video-carousel-{{ section.id }}.is-visible .video-carousel__inner { opacity: 1; transform: translateY(0); } .video-carousel-{{ section.id }} .video-carousel__title { color: {{ section.settings.text_color }}; text-align: center; font-size: clamp(24px, 3.4vw, 38px); text-transform: uppercase; letter-spacing: 2px; margin: 0 0 44px; } .video-carousel-{{ section.id }} .video-carousel__title::after { content: ""; display: block; width: 56px; height: 3px; background: {{ section.settings.accent_color }}; margin: 16px auto 0; border-radius: 3px; } .video-carousel-{{ section.id }} .video-carousel__viewport { position: relative; display: flex; align-items: center; gap: 8px; } .video-carousel-{{ section.id }} .video-carousel__mask { flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .video-carousel-{{ section.id }} .video-carousel__track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 12px calc(50% - 150px) 28px; -ms-overflow-style: none; scrollbar-width: none; cursor: grab; outline: none; } .video-carousel-{{ section.id }} .video-carousel__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; } .video-carousel-{{ section.id }} .video-carousel__track:focus-visible { box-shadow: inset 0 0 0 2px {{ section.settings.accent_color }}; border-radius: 8px; } .video-carousel-{{ section.id }} .video-carousel__track::-webkit-scrollbar { display: none; } .video-carousel-{{ section.id }} .video-card { flex: 0 0 300px; scroll-snap-align: center; opacity: .5; transform: scale(.85); filter: saturate(.4) brightness(.75); transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1); will-change: transform, opacity, filter; } .video-carousel-{{ section.id }} .video-card.is-active { opacity: 1; transform: scale(1); filter: saturate(1) brightness(1); } .video-carousel-{{ section.id }} .video-card__player { position: relative; width: 300px; height: 168px; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: box-shadow .4s ease; } .video-carousel-{{ section.id }} .video-card.is-active .video-card__player { box-shadow: 0 18px 42px rgba(0,0,0,.5), 0 0 0 2px {{ section.settings.accent_color }}55, 0 0 32px {{ section.settings.accent_color }}44; } .video-carousel-{{ section.id }} .video-card__player iframe, .video-carousel-{{ section.id }} .video-card__thumb { width: 100%; height: 100%; display: block; object-fit: cover; border: 0; transition: transform .6s cubic-bezier(.22,1,.36,1); } .video-carousel-{{ section.id }} .video-card:hover .video-card__thumb { transform: scale(1.08); } .video-carousel-{{ section.id }} .video-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); } .video-carousel-{{ section.id }} .video-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: none; background: {{ section.settings.accent_color }}; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; box-shadow: 0 0 0 0 {{ section.settings.accent_color }}66; } .video-carousel-{{ section.id }} .video-card.is-active .video-card__play { box-shadow: 0 0 0 10px {{ section.settings.accent_color }}22; } .video-carousel-{{ section.id }} .video-card__player:hover .video-card__play { transform: translate(-50%, -50%) scale(1.12); } .video-carousel-{{ section.id }} .video-card__title { display: block; color: {{ section.settings.text_color }}; font-size: 14px; font-weight: 600; margin: 16px 0 0; text-align: center; } .video-carousel-{{ section.id }} .video-carousel__nav { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); backdrop-filter: blur(6px); color: {{ section.settings.text_color }}; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .3s ease, border-color .3s ease, transform .2s ease, color .3s ease; } .video-carousel-{{ section.id }} .video-carousel__nav:hover { background: {{ section.settings.accent_color }}; border-color: {{ section.settings.accent_color }}; color: #fff; transform: scale(1.08); } .video-carousel-{{ section.id }} .video-carousel__nav:active { transform: scale(.95); } .video-carousel-{{ section.id }} .video-carousel__progress { max-width: 220px; height: 3px; margin: 28px auto 0; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; } .video-carousel-{{ section.id }} .video-carousel__progress-bar { display: block; height: 100%; width: 0%; background: {{ section.settings.accent_color }}; border-radius: 3px; transition: width .35s cubic-bezier(.22,1,.36,1); } .video-carousel-{{ section.id }} .video-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .video-carousel-{{ section.id }} .video-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.25); cursor: pointer; transition: background .3s ease, transform .3s ease, width .3s ease; } .video-carousel-{{ section.id }} .video-carousel__dots button.is-active { background: {{ section.settings.accent_color }}; width: 20px; border-radius: 4px; } @media (max-width: 749px) { .video-carousel-{{ section.id }} .video-carousel__track { padding: 12px calc(50% - 110px) 24px; } .video-carousel-{{ section.id }} .video-card { flex-basis: 220px; } .video-carousel-{{ section.id }} .video-card__player { width: 220px; height: 124px; } .video-carousel-{{ section.id }} .video-carousel__nav { display: none; } } @media (prefers-reduced-motion: reduce) { .video-carousel-{{ section.id }} * { transition-duration: .01ms !important; scroll-behavior: auto !important; } } {% endstyle %} {% schema %} { "name": "CM - Video Carousel", "settings": [ { "type": "text", "id": "heading", "label": "Section title", "default": "Clips & Videos" }, { "type": "checkbox", "id": "autoplay", "label": "Autoplay", "default": true }, { "type": "range", "id": "autoplay_speed", "label": "Autoplay speed", "min": 3000, "max": 9000, "step": 500, "unit": "ms", "default": 6000 }, { "type": "color", "id": "bg_color", "label": "Background color", "default": "#1A1A1A" }, { "type": "color", "id": "text_color", "label": "Text color", "default": "#FFFFFF" }, { "type": "color", "id": "accent_color", "label": "Accent color", "default": "#EC1E79" } ], "blocks": [ { "type": "video", "name": "Video", "settings": [ { "type": "url", "id": "video_url", "label": "YouTube URL (watch?v=...)" }, { "type": "text", "id": "title", "label": "Video title" } ] } ], "max_blocks": 12, "presets": [ { "name": "CM - Video Carousel", "blocks": [ { "type": "video", "settings": { "video_url": "https://www.youtube.com/watch?v=lCL2OzPmatk", "title": "It's Sunny" } }, { "type": "video", "settings": { "video_url": "https://www.youtube.com/watch?v=qJ5GiJYfOfg", "title": "The People" } }, { "type": "video", "settings": { "video_url": "https://www.youtube.com/watch?v=x60PtgOtqs0", "title": "The Dream Store (duo with Francis Cabrel)" } }, { "type": "video", "settings": { "video_url": "https://www.youtube.com/watch?v=mp-dTEKvjks", "title": "50 Years Already" } }, { "type": "video", "settings": { "video_url": "https://www.youtube.com/watch?v=F55RH0WLiQE", "title": "The Moon" } }, { "type": "video", "settings": { "video_url": "https://www.youtube.com/watch?v=x30kc8zgbm0", "title": "Wonderland" } } ] } ] } {% endschema %}

{{ section.settings.heading }}

{% style %} @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap'); .tour-{{ section.id }} { background: {{ section.settings.bg_color }}; padding: 60px 20px; } .tour-{{ section.id }} .tour__inner { max-width: 900px; margin: 0 auto; } .tour-{{ section.id }} .tour__title { color: {{ section.settings.text_color }}; text-align: center; font-size: 32px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 32px; } .tour-{{ section.id }} .tour__next { font-family: 'Special Elite', 'Courier New', Courier, monospace; position: relative; text-align: center; background: {{ section.settings.countdown_bg_color }}; border: 1px solid {{ section.settings.accent_color }}66; border-radius: 14px; padding: 36px 20px 32px; margin-bottom: 32px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px {{ section.settings.accent_color }}1a; } .tour-{{ section.id }} .tour__next-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px); pointer-events: none; } .tour-{{ section.id }} .tour__next-eyebrow { position: relative; color: {{ section.settings.accent_color }}; text-transform: uppercase; font-size: 13px; letter-spacing: 3px; margin: 0 0 12px; } .tour-{{ section.id }} .tour__next-city { position: relative; color: {{ section.settings.accent_color }}; font-size: clamp(22px, 4vw, 32px); letter-spacing: 1px; margin: 0; text-shadow: 0 0 18px {{ section.settings.accent_color }}66; } .tour-{{ section.id }} .tour__cursor { display: inline-block; margin-left: 3px; animation: tourCursorBlink 1s steps(1) infinite; } .tour-{{ section.id }} .tour__next-date { position: relative; color: {{ section.settings.accent_color }}aa; font-size: 13px; margin: 8px 0 28px; text-transform: uppercase; letter-spacing: 1px; } .tour-{{ section.id }} .tour__countdown { position: relative; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .tour-{{ section.id }} .tour__unit { display: flex; flex-direction: column; align-items: center; min-width: 76px; background: rgba(236,30,121,.06); border: 1px solid {{ section.settings.accent_color }}33; border-radius: 8px; padding: 12px 8px 10px; } .tour-{{ section.id }} .tour__unit-value { display: block; color: {{ section.settings.accent_color }}; font-size: 34px; line-height: 1; text-shadow: 0 0 14px {{ section.settings.accent_color }}77, 0 0 2px {{ section.settings.accent_color }}; animation: tourTick .4s ease; } .tour-{{ section.id }} .tour__unit-label { display: block; color: {{ section.settings.accent_color }}88; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-top: 6px; } .tour-{{ section.id }} .tour__cta { position: relative; display: inline-block; font-family: 'Special Elite', 'Courier New', Courier, monospace; background: {{ section.settings.accent_color }}; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; padding: 14px 32px; border-radius: 30px; transition: opacity .2s, transform .2s; } .tour-{{ section.id }} .tour__cta:hover { opacity: .85; transform: translateY(-2px); } @keyframes tourCursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes tourTick { from { opacity: .15; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .tour-{{ section.id }} .tour__filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .tour-{{ section.id }} .tour__filter { background: transparent; border: 1px solid {{ section.settings.muted_color }}; color: {{ section.settings.text_color }}; padding: 8px 18px; border-radius: 30px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; transition: background .2s, border-color .2s; } .tour-{{ section.id }} .tour__filter.is-active, .tour-{{ section.id }} .tour__filter:hover { background: {{ section.settings.accent_color }}; border-color: {{ section.settings.accent_color }}; color: #fff; } .tour-{{ section.id }} .tour__list { max-height: 640px; overflow-y: auto; padding-right: 6px; } .tour-{{ section.id }} .tour__list::-webkit-scrollbar { width: 6px; } .tour-{{ section.id }} .tour__list::-webkit-scrollbar-thumb { background: {{ section.settings.accent_color }}; border-radius: 6px; } .tour-{{ section.id }} .tour__month { color: {{ section.settings.accent_color }}; text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: 1px; margin: 22px 0 8px; } .tour-{{ section.id }} .tour__month:first-child { margin-top: 0; } .tour-{{ section.id }} .tour__row { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-bottom: 1px solid #2c2c2c; } .tour-{{ section.id }} .tour__row-date { color: {{ section.settings.text_color }}; font-weight: 700; font-size: 14px; min-width: 64px; text-transform: capitalize; } .tour-{{ section.id }} .tour__row-city { color: {{ section.settings.text_color }}; font-size: 14px; flex: 1; } .tour-{{ section.id }} .tour__row-badge { font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; padding: 3px 8px; border-radius: 20px; margin-left: 8px; white-space: nowrap; } .tour-{{ section.id }} .tour__row-badge--tbc { background: {{ section.settings.pale_color }}; color: #1A1A1A; } .tour-{{ section.id }} .tour__row-badge--today { background: {{ section.settings.accent_color }}; color: #fff; } .tour-{{ section.id }} .tour__row-status { color: {{ section.settings.muted_color }}; font-size: 12px; min-width: 70px; text-align: right; } .tour-{{ section.id }} .tour__row.is-past { opacity: .5; } .tour-{{ section.id }} .tour__row-ticket { flex: 0 0 auto; background: transparent; border: 1px solid {{ section.settings.accent_color }}; color: {{ section.settings.accent_color }}; text-decoration: none; font-size: 11px; text-transform: uppercase; font-weight: 700; padding: 6px 14px; border-radius: 20px; transition: background .2s, color .2s; } .tour-{{ section.id }} .tour__row-ticket:hover { background: {{ section.settings.accent_color }}; color: #fff; } @media (max-width: 600px) { .tour-{{ section.id }} .tour__countdown-unit { min-width: 52px; padding: 8px 4px; } .tour-{{ section.id }} .tour__countdown-unit span { font-size: 20px; } .tour-{{ section.id }} .tour__row { flex-wrap: wrap; } .tour-{{ section.id }} .tour__row-status { display: none; } } @media (prefers-reduced-motion: reduce) { .tour-{{ section.id }} .tour__cursor { animation: none; opacity: 1; } .tour-{{ section.id }} .tour__unit-value { animation: none; } } {% endstyle %} {% schema %} { "name": "CM - Tour & Countdown", "settings": [ { "type": "text", "id": "heading", "label": "Section title", "default": "The Tour — Carnival" }, { "type": "url", "id": "songkick_url", "label": "Ticketing link (Songkick)" }, { "type": "color", "id": "bg_color", "label": "Background color", "default": "#1A1A1A" }, { "type": "color", "id": "countdown_bg_color", "label": "Countdown block background", "default": "#000000" }, { "type": "color", "id": "text_color", "label": "Text color", "default": "#FFFFFF" }, { "type": "color", "id": "accent_color", "label": "Accent color", "default": "#EC1E79" }, { "type": "color", "id": "muted_color", "label": "Secondary text color", "default": "#6B6B6B" }, { "type": "color", "id": "pale_color", "label": " 'To be confirmed' badge color", "default": "#FCE9F1" } ], "presets": [ { "name": "CM - Tour & Countdown" } ] } {% endschema %}