/*
Theme Name: Wordless H5
Theme URI: https://h.whisprr.net
Author: Whisprr
Description: Structured multilingual H5 landing page for h.whisprr.net.
Version: 2.0.0
Requires at least: 6.0
Text Domain: wordless-h5
*/

@font-face { font-family: "YeZiAoYeHei"; src: url("./fonts/YeZiGongChangAoYeHei.ttf") format("truetype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "RubikH5"; src: url("./fonts/Rubik-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "RubikH5"; src: url("./fonts/Rubik-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PromptH5"; src: url("./fonts/Prompt-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "PromptH5"; src: url("./fonts/Prompt-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PromptH5"; src: url("./fonts/Prompt-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PromptH5"; src: url("./fonts/Prompt-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PromptH5"; src: url("./fonts/Prompt-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #12083f; }
body { overflow-x: hidden; font-family: "RubikH5", Arial, sans-serif; }
.wordless-page { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; background: #12083f; }
.wordless-link-wrap { display: block; width: 100%; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.h5-canvas { --h5w: min(100vw, 750px); position: relative; width: var(--h5w); min-height: calc(var(--h5w) * 1830 / 750); overflow: hidden; background: url("./assets/page-bg.png") center top / 100% 100% no-repeat; color: #fff; isolation: isolate; }
.hero-figure { position: absolute; left: calc(-54 / 750 * 100%); top: calc(-190 / 1830 * 100%); width: calc(1162 / 750 * 100%); height: auto; z-index: 1; pointer-events: none; }
.eyebrow { position: absolute; left: calc(58 / 750 * 100%); top: calc(83 / 1830 * 100%); z-index: 2; color: rgba(255,255,255,.46); font: 300 calc(var(--h5w) * 28 / 750) / 1 "RubikH5", Arial, sans-serif; letter-spacing: calc(var(--h5w) * 17 / 750); text-transform: uppercase; white-space: nowrap; }
.hero-title { position: absolute; left: calc(54 / 750 * 100%); top: calc(190 / 1830 * 100%); width: calc(390 / 750 * 100%); z-index: 2; margin: 0; font-family: "YeZiAoYeHei", "PromptH5", sans-serif; font-weight: 900; font-size: calc(var(--h5w) * 80 / 750); line-height: 1.32; color: #ff4039; text-shadow: 3px 0 0 #29e8ff, -3px 0 0 #fff35d, 0 3px 0 #29e8ff, 0 -3px 0 #29e8ff, 7px 7px 0 rgba(61,60,204,.78); }
.lang-th .hero-title, .lang-vi .hero-title, .lang-en .hero-title { width: calc(610 / 750 * 100%); font-family: "PromptH5", sans-serif; font-size: calc(var(--h5w) * 66 / 750); line-height: 1.08; }
.lang-th .hero-title { width: calc(470 / 750 * 100%); font-size: calc(var(--h5w) * 64 / 750); }
.lang-en .hero-title { width: calc(510 / 750 * 100%); font-family: "RubikH5", sans-serif; font-size: calc(var(--h5w) * 68 / 750); line-height: 1.02; text-transform: uppercase; }
.hero-title .line { display: block; }
.hero-pill { position: absolute; left: calc(40 / 750 * 100%); top: calc(447 / 1830 * 100%); z-index: 2; min-width: calc(357 / 750 * 100%); min-height: calc(65 / 1830 * 100%); display: inline-flex; align-items: center; justify-content: center; padding: calc(var(--h5w) * 12 / 750) calc(var(--h5w) * 30 / 750); border-radius: 999px; background: #cce6eb; color: #1d1d1f; font-family: "YeZiAoYeHei", "PromptH5", sans-serif; font-size: calc(var(--h5w) * 34 / 750); font-weight: 900; line-height: 1.2; white-space: nowrap; }
.lang-th .hero-pill, .lang-vi .hero-pill, .lang-en .hero-pill { justify-content: flex-start; min-width: calc(525 / 750 * 100%); font-family: "PromptH5", sans-serif; font-size: calc(var(--h5w) * 25 / 750); font-weight: 700; }
.lang-en .hero-pill { font-family: "RubikH5", sans-serif; font-size: calc(var(--h5w) * 24 / 750); }
.rent-panel { position: absolute; left: calc(19 / 750 * 100%); top: calc(948 / 1830 * 100%); z-index: 3; width: calc(712 / 750 * 100%); min-height: calc(693 / 1830 * 100%); padding: calc(var(--h5w) * 48 / 750) calc(var(--h5w) * 19 / 750) calc(var(--h5w) * 21 / 750); border-radius: calc(var(--h5w) * 10 / 750); background: #3868f7; box-shadow: 0 calc(var(--h5w) * -25 / 750) calc(var(--h5w) * 36 / 750) rgba(17,14,55,.3); }
.section-title { margin: 0 0 calc(var(--h5w) * 24 / 750); text-align: center; color: #fff; font-family: "YeZiAoYeHei", "PromptH5", sans-serif; font-size: calc(var(--h5w) * 44 / 750); font-weight: 900; line-height: 1.15; text-shadow: calc(var(--h5w) * 4 / 750) calc(var(--h5w) * 5 / 750) 0 rgba(44,49,147,.55); }
.lang-th .section-title, .lang-vi .section-title, .lang-en .section-title { font-family: "PromptH5", sans-serif; font-size: calc(var(--h5w) * 35 / 750); font-weight: 900; }
.lang-en .section-title { font-family: "RubikH5", sans-serif; font-size: calc(var(--h5w) * 34 / 750); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--h5w) * 19 / 750); }
.product-card { position: relative; min-height: calc(var(--h5w) * 267 / 750); overflow: hidden; border-radius: calc(var(--h5w) * 10 / 750); background: #b9e8ff; box-shadow: 0 calc(var(--h5w) * 5 / 750) calc(var(--h5w) * 8 / 750) rgba(16,35,95,.4); }
.product-image { position: absolute; left: 50%; top: calc(var(--h5w) * 16 / 750); width: calc(var(--h5w) * 122 / 750); height: calc(var(--h5w) * 151 / 750); object-fit: contain; transform: translateX(-50%); }
.product-card:nth-child(5) .product-image, .product-card:nth-child(6) .product-image { top: calc(var(--h5w) * 12 / 750); height: calc(var(--h5w) * 150 / 750); }
.tag { position: absolute; left: 0; top: calc(var(--h5w) * 132 / 750); min-width: 100%; min-height: calc(var(--h5w) * 35 / 750); display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--h5w) * 7 / 750); color: #fff; font-family: "YeZiAoYeHei", "PromptH5", sans-serif; font-size: calc(var(--h5w) * 20 / 750); font-weight: 900; line-height: 1; text-shadow: 1px 1px 0 rgba(91,70,70,.55); white-space: nowrap; }
.tag-orange { background: #ff8d45; } .tag-red { background: #f04a34; } .tag-dark { background: #4a4a4a; } .tag-purple { background: #b638e8; }
.lang-th .tag, .lang-vi .tag, .lang-en .tag { font-family: "PromptH5", sans-serif; font-size: calc(var(--h5w) * 13 / 750); font-weight: 700; }
.lang-en .tag { font-family: "RubikH5", sans-serif; font-size: calc(var(--h5w) * 12 / 750); }
.name { position: absolute; left: 0; right: 0; top: calc(var(--h5w) * 171 / 750); color: #1f1f25; font-family: "RubikH5", "PromptH5", sans-serif; font-size: calc(var(--h5w) * 20 / 750); font-weight: 400; line-height: 1; text-align: center; white-space: nowrap; }
.price { position: absolute; left: 0; right: 0; top: calc(var(--h5w) * 188 / 750); display: flex; align-items: baseline; justify-content: center; color: #ff383b; font-family: "RubikH5", "PromptH5", sans-serif; line-height: 1; }
.currency { margin-right: calc(var(--h5w) * 3 / 750); font-size: calc(var(--h5w) * 15 / 750); font-weight: 700; }
.amount { font-size: calc(var(--h5w) * 26 / 750); font-weight: 700; }
.period { margin-left: calc(var(--h5w) * 2 / 750); font-family: "YeZiAoYeHei", "PromptH5", sans-serif; font-size: calc(var(--h5w) * 16 / 750); color: #ff383b; }
.rent-row { position: absolute; left: calc(var(--h5w) * 9 / 750); right: calc(var(--h5w) * 9 / 750); bottom: calc(var(--h5w) * 10 / 750); display: grid; grid-template-columns: 1fr calc(var(--h5w) * 50 / 750); min-height: calc(var(--h5w) * 39 / 750); }
.first-month { display: flex; align-items: center; justify-content: center; border-radius: calc(var(--h5w) * 10 / 750) 0 0 calc(var(--h5w) * 10 / 750); background: #060606; color: #fff; font-family: "YeZiAoYeHei", "PromptH5", sans-serif; font-size: calc(var(--h5w) * 17 / 750); font-weight: 900; line-height: 1; white-space: nowrap; }
.grab { display: flex; align-items: center; justify-content: center; border-radius: 0 calc(var(--h5w) * 10 / 750) calc(var(--h5w) * 10 / 750) 0; background: linear-gradient(180deg, #604fff, #c575ff); color: #fff; font-family: "YeZiAoYeHei", "PromptH5", sans-serif; font-size: calc(var(--h5w) * 28 / 750); font-weight: 900; line-height: 1; text-shadow: 1px 2px 0 rgba(31,31,95,.65); }
.lang-th .first-month, .lang-vi .first-month, .lang-en .first-month { font-family: "PromptH5", sans-serif; font-size: calc(var(--h5w) * 12 / 750); font-weight: 700; }
.lang-en .first-month { font-family: "RubikH5", sans-serif; font-size: calc(var(--h5w) * 11 / 750); }
.lang-th .grab, .lang-vi .grab, .lang-en .grab { font-family: "PromptH5", sans-serif; font-size: calc(var(--h5w) * 16 / 750); font-weight: 700; }
.lang-en .grab { font-family: "RubikH5", sans-serif; font-size: calc(var(--h5w) * 13 / 750); }
.cta { position: absolute; left: calc(20 / 750 * 100%); bottom: calc(39 / 1830 * 100%); z-index: 3; width: calc(710 / 750 * 100%); min-height: calc(120 / 1830 * 100%); display: flex; align-items: center; justify-content: center; border-radius: calc(var(--h5w) * 10 / 750); background: linear-gradient(180deg, #35cde2 0%, #2867f9 100%); color: #fff; font-family: "YeZiAoYeHei", "PromptH5", sans-serif; font-size: calc(var(--h5w) * 56 / 750); font-weight: 900; line-height: 1; text-shadow: calc(var(--h5w) * 4 / 750) calc(var(--h5w) * 5 / 750) 0 rgba(46,51,143,.7); }
.lang-th .cta, .lang-vi .cta, .lang-en .cta { font-family: "PromptH5", sans-serif; font-size: calc(var(--h5w) * 42 / 750); font-weight: 900; }
.lang-en .cta {
  padding-bottom: calc(var(--h5w) * 6 / 750);
  font-family: "RubikH5", sans-serif;
  font-size: calc(var(--h5w) * 40 / 750);
  line-height: 1.15;
}
.lang-switch {
  position: absolute;
  right: calc(var(--h5w) * 20 / 750);
  top: calc(var(--h5w) * 20 / 750);
  z-index: 5;
  min-width: calc(var(--h5w) * 156 / 750);
  font-family: "RubikH5", "PromptH5", sans-serif;
}

.lang-current {
  height: calc(var(--h5w) * 46 / 750);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--h5w) * 10 / 750);
  border: 0;
  border-radius: calc(var(--h5w) * 23 / 750);
  padding: 0 calc(var(--h5w) * 18 / 750) 0 calc(var(--h5w) * 20 / 750);
  background: linear-gradient(180deg, rgba(38, 35, 120, 0.96), rgba(8, 10, 56, 0.88));
  box-shadow:
    inset 0 0 0 calc(var(--h5w) * 1 / 750) rgba(91, 232, 255, 0.28),
    0 calc(var(--h5w) * 9 / 750) calc(var(--h5w) * 20 / 750) rgba(4, 2, 38, 0.4);
  color: #fff;
  font: 900 calc(var(--h5w) * 17 / 750) / 1 "RubikH5", "PromptH5", sans-serif;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.lang-caret {
  width: calc(var(--h5w) * 9 / 750);
  height: calc(var(--h5w) * 9 / 750);
  border-right: calc(var(--h5w) * 2 / 750) solid currentColor;
  border-bottom: calc(var(--h5w) * 2 / 750) solid currentColor;
  transform: translateY(calc(var(--h5w) * -2 / 750)) rotate(45deg);
  opacity: 0.9;
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--h5w) * 8 / 750);
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--h5w) * 18 / 750);
  background: rgba(8, 9, 44, 0.92);
  box-shadow: inset 0 0 0 1px rgba(52, 224, 255, 0.16), 0 calc(var(--h5w) * 12 / 750) calc(var(--h5w) * 26 / 750) rgba(3, 2, 26, 0.45);
  opacity: 0;
  transform: translateY(calc(var(--h5w) * -6 / 750));
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.lang-switch.open .lang-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-option {
  min-height: calc(var(--h5w) * 42 / 750);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--h5w) * 18 / 750);
  color: rgba(255, 255, 255, 0.82);
  font-size: calc(var(--h5w) * 15 / 750);
  font-weight: 900;
  text-decoration: none;
}

.lang-option.active {
  color: #10133b;
  background: linear-gradient(90deg, #3be8ff, #ffffff);
}

.lang-option:not(.active):hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 430px) { .product-grid { gap: calc(var(--h5w) * 16 / 750); } .lang-th .tag, .lang-vi .tag, .lang-en .tag { font-size: calc(var(--h5w) * 12 / 750); } }