/* 訃告底紋 — 網頁預覽同 server 生成嘅 JPG/PDF 共用呢一份，
   所以客人喺畫面見到嘅樣，同下載出嚟嗰張一定一樣。

   全部底紋都係內嵌 SVG（data URI），唔用圖片檔：
   1. puppeteer 唔使等外部圖片載入，生成快啲又唔會靜靜地漏咗張底
   2. 向量嚟，A4 印出嚟唔會起格
   3. 顏色刻意壓到好淡（3%–7%），白紙黑字先係主角，底紋唔可以搶字 */

.ob-bg-a, .ob-bg-b, .ob-bg-c, .ob-bg-d, .ob-bg-e { background-repeat: no-repeat; }

/* A 素白宣紙 —— 冇圖案，淨係上下各一抹極淡嘅暈色。
   唔知揀咩好嘅時候呢個最穩陣，任何宗教、任何場合都唔會失禮 */
.ob-bg-a {
  background-color: #fdfbf5;
  background-image:
    radial-gradient(ellipse 70% 22% at 50% 0%,   rgba(44, 92, 63, .07), transparent 70%),
    radial-gradient(ellipse 70% 22% at 50% 100%, rgba(44, 92, 63, .06), transparent 70%);
}

/* B 白菊 —— 華人喪禮最通用嘅花，唔屬任何宗教 */
.ob-bg-b {
  background-color: #fdfbf5;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%232c5c3f' opacity='.055'><g><ellipse cx='100' cy='58' rx='12' ry='40'/><ellipse cx='100' cy='58' rx='12' ry='40' transform='rotate(30 100 100)'/><ellipse cx='100' cy='58' rx='12' ry='40' transform='rotate(60 100 100)'/><ellipse cx='100' cy='58' rx='12' ry='40' transform='rotate(90 100 100)'/><ellipse cx='100' cy='58' rx='12' ry='40' transform='rotate(120 100 100)'/><ellipse cx='100' cy='58' rx='12' ry='40' transform='rotate(150 100 100)'/></g><g transform='rotate(15 100 100)'><ellipse cx='100' cy='72' rx='9' ry='27'/><ellipse cx='100' cy='72' rx='9' ry='27' transform='rotate(30 100 100)'/><ellipse cx='100' cy='72' rx='9' ry='27' transform='rotate(60 100 100)'/><ellipse cx='100' cy='72' rx='9' ry='27' transform='rotate(90 100 100)'/><ellipse cx='100' cy='72' rx='9' ry='27' transform='rotate(120 100 100)'/><ellipse cx='100' cy='72' rx='9' ry='27' transform='rotate(150 100 100)'/></g><circle cx='100' cy='100' r='11'/></g></svg>");
  background-position: center 52%;
  background-size: 58% auto;
}

/* C 蓮花 —— 佛教 */
.ob-bg-c {
  background-color: #fdfbf5;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%232c5c3f' opacity='.055'><path d='M100 150 C70 120 70 70 100 34 C130 70 130 120 100 150 Z'/><path d='M100 150 C70 120 70 70 100 34 C130 70 130 120 100 150 Z' transform='rotate(40 100 145)'/><path d='M100 150 C70 120 70 70 100 34 C130 70 130 120 100 150 Z' transform='rotate(-40 100 145)'/><path d='M100 152 C64 134 46 104 44 74 C78 84 98 116 100 152 Z'/><path d='M100 152 C136 134 154 104 156 74 C122 84 102 116 100 152 Z'/><path d='M40 156 q60 22 120 0'/></g></svg>");
  background-position: center 54%;
  background-size: 56% auto;
}

/* D 十字架 —— 基督教／天主教。刻意淨係得個十字架：
   之前加埋百合，填色之後花瓣同十字架黐埋，遠睇似蓮花多過十字架，
   反而令人誤會咗個宗教，倒不如簡單清楚 */
.ob-bg-d {
  background-color: #fdfbf5;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%232c5c3f' opacity='.055'><path d='M88 20 h24 v52 h44 v24 h-44 v84 h-24 v-84 h-44 v-24 h44 z'/></g></svg>");
  background-position: center 52%;
  background-size: 38% auto;
}

/* E 祥雲松柏 —— 中式傳統，上下各一條雲帶，中間留白俾相片同名 */
.ob-bg-e {
  background-color: #fdfbf5;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'><g fill='none' stroke='%232c5c3f' stroke-width='1.6' opacity='.13'><path d='M10 44 q6 -16 20 -12 q4 -16 20 -12 q12 -10 20 4 q14 -2 12 12 q-2 10 -14 10 z'/><path d='M34 44 q-4 -10 4 -14'/><path d='M96 44 q6 -16 20 -12 q4 -16 20 -12 q12 -10 20 4 q14 -2 12 12 q-2 10 -14 10 z'/><path d='M120 44 q-4 -10 4 -14'/><path d='M182 44 q6 -16 20 -12 q4 -16 20 -12 q12 -10 20 4 q14 -2 12 12 q-2 10 -14 10 z'/><path d='M206 44 q-4 -10 4 -14'/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'><g transform='translate(0,60) scale(1,-1)'><g fill='none' stroke='%232c5c3f' stroke-width='1.6' opacity='.13'><path d='M10 44 q6 -16 20 -12 q4 -16 20 -12 q12 -10 20 4 q14 -2 12 12 q-2 10 -14 10 z'/><path d='M34 44 q-4 -10 4 -14'/><path d='M96 44 q6 -16 20 -12 q4 -16 20 -12 q12 -10 20 4 q14 -2 12 12 q-2 10 -14 10 z'/><path d='M120 44 q-4 -10 4 -14'/><path d='M182 44 q6 -16 20 -12 q4 -16 20 -12 q12 -10 20 4 q14 -2 12 12 q-2 10 -14 10 z'/><path d='M206 44 q-4 -10 4 -14'/></g></g></svg>");
  background-position: center top, center bottom;
  background-size: 100% 7%, 100% 7%;
}