/* ============================================================ GymXYZ — Planning diffusé, l'affiche à publier ------------------------------------------------------------ 1080 × 1350 (4:5), the tallest format Instagram allows in the feed and still readable as a thumbnail. Lifted pixel for pixel from design/Planning diffusé - 3 styles.html. THREE THINGS DIFFER FROM THE PROTOTYPE, EACH ON PURPOSE: 1 · `.post` IS SELF-SUFFICIENT. It sets its own font and its own custom properties instead of inheriting them from the page. The poster is rasterised by serialising it into an SVG , and inside one of those there is no and no page cascade: anything inherited is silently lost. The subtitle came out in Times the first time. Nothing in this file may rely on a rule outside it. 2 · THE COLUMN COUNT IS A VARIABLE, --poster-cols, set on the root by PosterLayout. Every day is drawn with the same number so the columns stay aligned down the poster, and a day of four would otherwise start a second row that overlaps the day beneath it. 3 · `.slot.hidden` REPLACES THE PROTOTYPE'S INLINE STYLE, and `.more` is new — the cell that counts what a very busy day could not fit. A NEW CUSTOMER IS A BLOCK IN THIS FILE, not a component. The only wording that does not live in CSS is the call across the foot — see PosterLayout.Call. ============================================================ */ /* ---------- shared skeleton ---------- */ .post { width: 1080px; height: 1350px; overflow: hidden; display: flex; flex-direction: column; position: relative; /* Self-sufficient: see note 1 above. */ font-family: "Montserrat", sans-serif; --font-sans: "Montserrat", sans-serif; --poster-cols: 3; } .post .days { flex: 1; display: flex; flex-direction: column } .post .day { flex: 1; display: flex; align-items: center; gap: 26px; min-height: 0 } .post .dcol { flex: none; width: 150px } .post .dname { line-height: 1 } .post .dnum { line-height: 1 } .post .slots { flex: 1; display: grid; grid-template-columns: repeat(var(--poster-cols), 1fr); grid-auto-rows: max-content; gap: 12px; align-content: center; align-items: stretch; min-width: 0; height: 100%; } .post .slot { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px } .post .slot.hidden { visibility: hidden } .post .m { margin-top: auto } .post .h { font-variant-numeric: tabular-nums; white-space: nowrap } .post .n { text-wrap: balance } .post .rest { font-style: normal; grid-column: 1 / -1; align-self: center } .post .more { display: flex; align-items: center; justify-content: center; min-width: 0 } /* ============================================================ 1 · GymXYZ — TechXYZ ink + azure spark, Orbitron ============================================================ */ .p-gx { background: #0C2236; color: #fff } .p-gx::before { content: ""; position: absolute; inset: auto -180px -300px auto; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(0,171,252,.30), rgba(0,171,252,0) 62%); pointer-events: none; } .p-gx::after { content: ""; position: absolute; top: -260px; left: -220px; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(0,171,252,.16), rgba(0,171,252,0) 65%); pointer-events: none; } .p-gx .head { position: relative; padding: 38px 60px 14px } .p-gx .wm { font-family: "Orbitron", var(--font-sans); font-size: 34px; letter-spacing: .02em; line-height: 1 } .p-gx .wm b { font-weight: 700 } .p-gx .wm span { font-weight: 500; color: #00ABFC } .p-gx .eyebrow { margin-top: 20px; font-size: 20px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #00ABFC } .p-gx h1 { color: #fff; margin: 14px 0 0; font-family: "Orbitron", var(--font-sans); font-weight: 700; font-size: 50px; line-height: 1; letter-spacing: .005em } .p-gx .sub { margin-top: 12px; font-size: 20px; font-weight: 500; color: rgba(255,255,255,.62) } .p-gx .days { position: relative; padding: 0 60px 4px } .p-gx .day { border-top: 1px solid rgba(255,255,255,.12) } .p-gx .day:first-child { border-top: 0 } .p-gx .dname { font-size: 26px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase } .p-gx .dnum { margin-top: 8px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.42); letter-spacing: .06em } .p-gx .slot { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 16px } .p-gx .slot.full { background: rgba(0,171,252,.14); border-color: rgba(0,171,252,.45) } .p-gx .h { font-size: 22px; font-weight: 700; color: #00ABFC; line-height: 1.2 } .p-gx .n { font-size: 23px; font-weight: 700; line-height: 1.1 } .p-gx .m { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.5); line-height: 1.2 } .p-gx .slot.full .m { color: #7ED0FF; font-weight: 700 } .p-gx .rest { font-size: 20px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.26); align-self: center } .p-gx .more { font-size: 20px; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.34) } .p-gx .foot { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 60px 28px; border-top: 1px solid rgba(255,255,255,.12) } .p-gx .cta { font-size: 26px; font-weight: 700 } .p-gx .cta em { font-style: normal; color: #00ABFC } .p-gx .tag { margin-left: auto; font-size: 19px; font-weight: 500; color: rgba(255,255,255,.5) } /* ============================================================ 2 · Team Trainer's — monochrome, Anton, énergie « rock » ============================================================ */ .p-tt { background: #fff; color: #1A1A1D } .p-tt .head { background: #1A1A1D; color: #fff; padding: 34px 60px 26px } .p-tt .wm { font-family: "Anton", sans-serif; font-size: 34px; letter-spacing: .03em; text-transform: uppercase; line-height: 1 } .p-tt h1 { color: #fff; margin: 20px 0 0; font-family: "Anton", sans-serif; font-size: 84px; line-height: .9; letter-spacing: .005em; text-transform: uppercase } .p-tt .rule { display: flex; align-items: baseline; gap: 20px; margin-top: 16px } .p-tt .rule .dates { font-size: 25px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase } .p-tt .rule .line { flex: 1; height: 4px; background: rgba(255,255,255,.28) } .p-tt .rule .n { font-size: 19px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6) } .p-tt .days { padding: 0 60px } .p-tt .day { border-bottom: 2px solid #E2E2E5 } .p-tt .day:last-child { border-bottom: 0 } .p-tt .dname { font-family: "Anton", sans-serif; font-size: 42px; letter-spacing: .02em; text-transform: uppercase } .p-tt .dnum { margin-top: 6px; font-size: 16px; font-weight: 700; letter-spacing: .12em; color: #8C8C95 } .p-tt .slot { border: 2px solid #1A1A1D; border-radius: 4px; padding: 9px 15px; background: #fff } .p-tt .slot.k2 { background: #1A1A1D; color: #fff } .p-tt .slot.k3 { background: #EAEAEC; border-color: #EAEAEC } .p-tt .h { font-size: 21px; font-weight: 800; letter-spacing: .02em; line-height: 1.2 } .p-tt .n { font-family: "Anton", sans-serif; font-size: 26px; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase } .p-tt .m { font-size: 15px; font-weight: 600; color: #6E6E76; line-height: 1.2 } .p-tt .slot.k2 .m { color: rgba(255,255,255,.62) } .p-tt .rest { font-family: "Anton", sans-serif; font-size: 30px; letter-spacing: .14em; text-transform: uppercase; color: #D2D2D7; align-self: center } .p-tt .more { font-family: "Anton", sans-serif; font-size: 24px; letter-spacing: .08em; text-transform: uppercase; color: #A8A8B0 } .p-tt .foot { display: flex; align-items: center; gap: 20px; background: #1A1A1D; color: #fff; padding: 22px 60px 30px } .p-tt .cta { font-family: "Anton", sans-serif; font-size: 30px; letter-spacing: .02em; text-transform: uppercase } .p-tt .tag { margin-left: auto; font-size: 20px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.62) } /* ============================================================ 3 · Leyssa Coaching — rose poudré / sauge, Dancing Script Two columns by design: fewer classes, more air. Never a postal address — the zone alone. ============================================================ */ .p-ly { background: #FBF5F4; color: #4A2A38 } .p-ly::before { content: ""; position: absolute; top: -320px; right: -260px; width: 820px; height: 820px; border-radius: 50%; background: radial-gradient(circle, rgba(234,240,226,.9), rgba(251,245,244,0) 68%); pointer-events: none; } .p-ly .head { position: relative; padding: 44px 70px 24px; text-align: center } .p-ly .mark { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid #F1C2D0; margin-bottom: 12px } .p-ly .wm { font-family: "Dancing Script", cursive; font-weight: 700; font-size: 58px; line-height: 1; color: #B54C66 } .p-ly .eyebrow { margin-top: 18px; font-size: 18px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #B98C99 } .p-ly h1 { color: #4A2A38; margin: 12px 0 0; font-size: 40px; font-weight: 700; letter-spacing: .01em; line-height: 1.1 } .p-ly .days { position: relative; padding: 8px 70px 0 } .p-ly .day { border-top: 1px solid #EEDFE1 } .p-ly .day:first-child { border-top: 0 } .p-ly .dname { font-family: "Dancing Script", cursive; font-weight: 700; font-size: 40px; line-height: 1; color: #B54C66 } .p-ly .dnum { margin-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #B98C99 } .p-ly .slot { background: #FCF1F4; border: 1px solid #F1C2D0; border-radius: 18px; padding: 11px 18px } .p-ly .slot.sage { background: #EFF3E8; border-color: #D8E2C7 } .p-ly .h { display: inline-block; font-size: 19px; font-weight: 700; color: #9A3F56; line-height: 1.2 } .p-ly .slot.sage .h { color: #67784F } .p-ly .n { font-size: 23px; font-weight: 700; line-height: 1.1; color: #4A2A38 } .p-ly .m { font-size: 15px; font-weight: 500; color: #8B6472; line-height: 1.2 } .p-ly .rest { font-size: 19px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #D6BEC4; align-self: center } .p-ly .more { font-size: 19px; font-weight: 600; letter-spacing: .08em; color: #C9AEB5 } .p-ly .foot { position: relative; text-align: center; padding: 22px 70px 34px } .p-ly .cta { font-family: "Dancing Script", cursive; font-weight: 700; font-size: 42px; color: #B54C66; line-height: 1 } .p-ly .tag { margin-top: 12px; font-size: 19px; font-weight: 600; letter-spacing: .12em; color: #8B6472 } .p-ly .tag span { color: #C9AEB5; margin: 0 10px } /* ------------------------------------------------------------ Off-screen staging. The poster is rendered at its true size so the browser lays it out exactly as it will be rasterised, then moved out of view rather than hidden: display:none and visibility:hidden both stop the layout that the capture needs. ------------------------------------------------------------ */ .gx-poster-stage { position: fixed; top: 0; left: -20000px; width: 1080px; height: 1350px; pointer-events: none; z-index: -1; }