/* ============================================================ CHERRY BLOSSOM THEME — hanami in a woodblock print. Same class surface as editorial/theme.css, so shared header, footer, drawer and component classes stay styled. Built from the spring prints of ukiyo-e and shin-hanga: flat colour on washi paper, every shape outlined in indigo by the key block, a sky shading down from Prussian blue (bokashi), flowering cherry boughs, petals drifting onto a river, a red picnic cloth on the bank and the artist's red seal stamped in a corner. By day washi, indigo and blossom pink; after dark yozakura — the night blossom lit by paper lanterns over the dark river, not the day turned inside out. The theme sets the --theme-* accent ramp itself (indigo by day, blossom pink by night), so the admin's accent colour setting does not apply while it is active. ============================================================ */ :root { --font-display: 'Zen Antique', 'Shippori Mincho', 'Hiragino Mincho ProN', 'Noto Serif', Georgia, serif; --font-ui: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans', system-ui, 'Segoe UI', sans-serif; --paper: #f7f0e3; --paper-2: #fffaf1; --paper-3: #efe5d2; --ink: #1c2848; --ink-2: #34416a; --ink-soft: #6b7190; --rule: rgba(28, 40, 72, 0.15); --rule-soft: rgba(28, 40, 72, 0.08); --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 0 rgba(28, 40, 72, .08), 0 8px 18px -12px rgba(28, 40, 72, .35); --shadow-md: 0 2px 0 rgba(28, 40, 72, .08), 0 20px 34px -18px rgba(28, 40, 72, .45); /* Prussian blue, the blue of the shin-hanga sky */ --theme-50: #eef1f8; --theme-100: #dbe2f0; --theme-200: #b5c3df; --theme-300: #8aa0c9; --theme-400: #5b77ad; --theme-500: #345592; --theme-600: #24407a; --theme-700: #1d3464; --theme-800: #182a51; --theme-900: #121f3d; --theme-500-rgb: 52, 85, 146; --theme-600-rgb: 36, 64, 122; /* Blossom, bark and seal */ --sakura: #f7c3cf; --sakura-2: #ec8fa6; --sakura-3: #c9506f; --bark: #3a2b36; --key: #1f2f57; /* the key block's indigo outline */ --seal: #c8372d; --seal-paper: #fbf4e8; --mosen: #c8372d; /* the red picnic cloth */ --river: #2c4f86; --lantern: #ffb35a; /* Yozakura, the colour of the footer, winners, wallet and splash at night */ --night: #121a36; --night-2: #1a2447; --night-3: #253159; --on-night: #f7efe6; --on-night-soft: rgba(247, 239, 230, .78); /* Names other themes' shared markup reaches for */ --gold: #b0322a; --gold-2: #ec8fa6; --gold-soft: rgba(36, 64, 122, 0.08); --gold-ink: #1c2848; --felt: #121a36; --felt-2: #1a2447; --on-felt: #f7efe6; --on-felt-soft: rgba(247, 239, 230, 0.78); --peacock: #2f7a74; --peacock-soft: rgba(47, 122, 116, 0.11); --red: #24407a; --red-soft: rgba(36, 64, 122, 0.09); --rose: #c9506f; --rose-soft: rgba(201, 80, 111, 0.1); --notify-accent: var(--theme-500); --nav-accent: var(--theme-600); --hdr-strip-bg: #1a2447; --hdr-strip-rule: transparent; --text-primary: var(--ink); /* Buttons: indigo by day, blossom by night */ --btn-bg: #24407a; --btn-bg-hover: #2f4f90; --btn-ink: #ffffff; /* Lettering on the accent itself (cart badges, accent-filled buttons) */ --theme-600-ink: #ffffff; --btn-shadow: 0 2px 0 #142852, 0 10px 18px -10px rgba(36, 64, 122, .7); --btn-shadow-hover: 0 3px 0 #142852, 0 14px 22px -10px rgba(36, 64, 122, .75); /* The theme's border band: a sprig of blossom and falling petals between two indigo key lines */ --cb-band: url("data:image/svg+xml;utf8,") repeat-x left center / 96px 14px; --cb-band-night: url("data:image/svg+xml;utf8,") repeat-x left center / 96px 14px; /* Petals drifting over the page */ --petals: url("data:image/svg+xml;utf8,"); /* A flowering bough for CSS-only corners (wallet, login, earn, cards) */ --bough: url("data:image/svg+xml;utf8,"); --bough-night: url("data:image/svg+xml;utf8,"); /* The river: indigo water with white crests curling over in the woodblock manner, petals afloat on it (hanaikada), 200×44 */ --river-waves: url("data:image/svg+xml;utf8,"); --river-waves-night: url("data:image/svg+xml;utf8,"); /* The night of the yozakura: indigo deepening upward, lantern light warming the lower edge, a few petals catching it */ --yoru-bg: radial-gradient(560px 240px at 50% 112%, rgba(255, 168, 90, .3), transparent 70%), radial-gradient(420px 260px at 88% -40px, rgba(247, 195, 207, .14), transparent 70%), linear-gradient(180deg, #0d1330 0%, #162048 60%, #222c5a 100%); --page-bg: var(--petals) repeat, var(--paper); } html.dark { --paper: #10162e; --paper-2: #18203f; --paper-3: #212a4f; --ink: #f5eee6; --ink-2: #ddd5cd; --ink-soft: #a4a9c4; --rule: rgba(245, 238, 230, 0.14); --rule-soft: rgba(245, 238, 230, 0.07); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 18px -10px rgba(0, 0, 0, .7); --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 20px 36px -16px rgba(0, 0, 0, .85); /* Blossom lit from below by the lanterns */ --theme-50: #1a2142; --theme-100: #232c53; --theme-200: #5a3a52; --theme-300: #fbd2dc; --theme-400: #f8b9c8; --theme-500: #f29db2; --theme-600: #f6b0c1; --theme-700: #f9c7d3; --theme-800: #fcdde5; --theme-900: #fff0f3; --theme-500-rgb: 242, 157, 178; --theme-600-rgb: 246, 176, 193; --gold: #ffb35a; --gold-2: #f6b0c1; --gold-soft: rgba(242, 157, 178, 0.12); --felt: #0b1026; --felt-2: #18203f; --peacock: #6fc7bd; --peacock-soft: rgba(111, 199, 189, 0.13); --red: #f6b0c1; --red-soft: rgba(242, 157, 178, 0.13); --rose: #f29db2; --rose-soft: rgba(242, 157, 178, 0.13); --nav-accent: var(--theme-500); --hdr-strip-bg: #0b1026; --btn-bg: #f4a6b9; --btn-bg-hover: #f8bccb; --btn-ink: #2a0f1d; /* The night accent is pale blossom: white on it reads as disabled. */ --theme-600-ink: #2a0f1d; --btn-shadow: 0 2px 0 #b9637c, 0 10px 26px -10px rgba(244, 166, 185, .55); --btn-shadow-hover: 0 3px 0 #b9637c, 0 14px 30px -10px rgba(244, 166, 185, .7); --cb-band: var(--cb-band-night); --petals: url("data:image/svg+xml;utf8,"); --page-bg: radial-gradient(900px 420px at 86% -160px, rgba(255, 179, 90, 0.07), transparent 70%) no-repeat, radial-gradient(900px 420px at 8% -140px, rgba(247, 195, 207, 0.08), transparent 70%) no-repeat, var(--petals) repeat, var(--paper); } /* ── Materials ── What the skins (assets/css/skin/) and the plugin designs build every surface from, so a panel, a toast or a ticket reads as the same print: - washi: the paper's long fibres, laid over any surface; - the mount: a key line, a washi margin and a hairline, as a print is mounted (--cb-mount, inset shadows, so it sits on any background); - kentō: the registration marks cut into the corner of a block, an L and a bar, in the lower corners of sheets; - off register: the colour block printed a hair off its key line (--cb-offset), for the chosen tab, pill or page; - bokashi: Prussian blue wiped down the block, for table heads, the tops of sheets and progress; - the seal: hanko stamps (bloom, wave, branch, tick, cross) for corners, the current page, success and failure; - a lone petal and a sakura as images, for bullets, separators and full stops; - pigments for states: pine for good, ochre for waiting, beni for bad, ai for news. */ :root { --washi: url("data:image/svg+xml;utf8,"); --key-line: rgba(31, 47, 87, .55); --cb-mount: inset 0 0 0 1px var(--rule), inset 0 0 0 5px var(--paper-2), inset 0 0 0 6px var(--key-line); --cb-offset: 3px 3px 0 #f2a7b8; --cb-offset-rtl: -3px 3px 0 #f2a7b8; --kento: linear-gradient(var(--key-line), var(--key-line)) left 8px bottom 8px / 12px 1.5px no-repeat, linear-gradient(var(--key-line), var(--key-line)) left 8px bottom 8px / 1.5px 12px no-repeat, linear-gradient(var(--key-line), var(--key-line)) right 8px bottom 8px / 16px 1.5px no-repeat; --bokashi: linear-gradient(180deg, #1d3464 0%, #2f4f8b 55%, #46669f 100%); --bokashi-sky: linear-gradient(180deg, #5f80b4 0, #a9c1dd 30%, #e6ecee 70%, var(--paper-2) 100%); --bokashi-soft: linear-gradient(180deg, rgba(36, 64, 122, .14), rgba(36, 64, 122, 0) 70%); --on-bokashi: #fbf5ea; --seal-bloom: url("data:image/svg+xml;utf8,"); --seal-wave: url("data:image/svg+xml;utf8,"); --seal-branch: url("data:image/svg+xml;utf8,"); --seal-tick: url("data:image/svg+xml;utf8,"); --seal-cross: url("data:image/svg+xml;utf8,"); --sakura-img: url("data:image/svg+xml;utf8,"); --petal-img: url("data:image/svg+xml;utf8,"); --bud-img: url("data:image/svg+xml;utf8,"); --cb-pine: #3c6e4f; --cb-pine-soft: rgba(60, 110, 79, .13); --cb-ochre: #a8741a; --cb-ochre-soft: rgba(216, 154, 43, .17); --cb-beni: #c8372d; --cb-beni-soft: rgba(200, 55, 45, .1); --cb-ai: #24407a; --cb-ai-soft: rgba(36, 64, 122, .1); --cb-fuji: #6a5a9c; --cb-fuji-soft: rgba(106, 90, 156, .12); --lacquer: #1b1420; --lacquer-well: radial-gradient(circle at 30% 25%, #d8463a, #a92a24 70%); --mosen-bg: repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, .05) 3px 4px), linear-gradient(180deg, #c03a30, #cf4436); --sheet: var(--washi), var(--paper-2); --veil: rgba(18, 26, 54, .58); /* The HTML5 games and the arena (earn-games posts these into each board): washi boards with raised cells of paper, indigo ink, blossom for the highlight, and tiles rising from pale blossom through the pigments of the print to the night's indigo. */ --game-bg: #f7f0e3; --game-surface: #ece0c9; --game-surface-2: #fffaf1; --game-ink: #1c2848; --game-muted: #6b7190; --game-accent: #24407a; --game-accent-ink:#ffffff; --game-good: #3c6e4f; --game-bad: #c8372d; --game-tile-1: #fbe3e9; --game-tile-2: #f7c3cf; --game-tile-3: #ec8fa6; --game-tile-4: #d89a2b; --game-tile-5: #c8372d; --game-tile-6: #3c6e4f; --game-tile-7: #24407a; --game-tile-8: #121a36; --game-radius: 6px; --game-font: 'Zen Kaku Gothic New', 'Hiragino Sans', system-ui, sans-serif; --game-font-css: "/assets/themes/cherry-blossom/assets/fonts/fonts.css"; --game-arena-screen: #f7f0e3; --game-arena-coins: #a8741a; --game-arena-win: #3c6e4f; --game-arena-danger: #c8372d; --game-pattern: url("data:image/svg+xml;utf8,"); /* Lottery draw-machine balls in the print's pigments */ --px-ball-1: #c8372d; --px-ball-1-hi: #f4b2a8; --px-ball-2: #24407a; --px-ball-2-hi: #a9c1e9; --px-ball-3: #c9506f; --px-ball-3-hi: #f7c3cf; --px-ball-4: #3c6e4f; --px-ball-4-hi: #b5dcc1; --px-ball-5: #b8862b; --px-ball-5-hi: #f3d590; --px-ball-6: #6a5a9c; --px-ball-6-hi: #d2c8ee; } html.dark { --washi: url("data:image/svg+xml;utf8,"); --key-line: rgba(247, 195, 207, .34); --cb-offset: 3px 3px 0 rgba(185, 99, 124, .9); --cb-offset-rtl: -3px 3px 0 rgba(185, 99, 124, .9); --bokashi: linear-gradient(180deg, #070b1c 0%, #141c40 60%, #1f2a55 100%); --bokashi-sky: linear-gradient(180deg, #070b1c 0, #121a3c 34%, #1d2852 70%, var(--paper-2) 100%); --bokashi-soft: linear-gradient(180deg, rgba(255, 179, 90, .1), rgba(255, 179, 90, 0) 70%); --on-bokashi: #f9c7d3; --sakura-img: url("data:image/svg+xml;utf8,"); --petal-img: url("data:image/svg+xml;utf8,"); --bud-img: url("data:image/svg+xml;utf8,"); --cb-pine: #8fcca6; --cb-pine-soft: rgba(143, 204, 166, .14); --cb-ochre: #f0c56a; --cb-ochre-soft: rgba(240, 197, 106, .15); --cb-beni: #ff9a8a; --cb-beni-soft: rgba(255, 138, 120, .14); --cb-ai: #a9c1f0; --cb-ai-soft: rgba(169, 193, 240, .13); --cb-fuji: #c3b5ee; --cb-fuji-soft: rgba(195, 181, 238, .14); --mosen-bg: repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, .07) 3px 4px), linear-gradient(180deg, #8e2a2a, #a5352f); --veil: rgba(4, 7, 20, .7); /* Yozakura boards: night paper, lantern-lit cells, blossom picked out */ --game-bg: #10162e; --game-surface: #18203f; --game-surface-2: #253159; --game-ink: #f5eee6; --game-muted: #a4a9c4; --game-accent: #f4a6b9; --game-accent-ink:#2a0f1d; --game-good: #8fcca6; --game-bad: #ff8a7a; --game-tile-1: #222c55; --game-tile-2: #3a3266; --game-tile-3: #6a3a5c; --game-tile-4: #b9637c; --game-tile-5: #f29db2; --game-tile-6: #ffb35a; --game-tile-7: #fbd9e1; --game-tile-8: #fff6ea; --game-arena-screen: #10162e; --game-arena-coins: #ffb35a; --game-arena-win: #8fcca6; --game-arena-danger: #ff8a7a; --game-pattern: url("data:image/svg+xml;utf8,"); --px-ball-1: #e0574a; --px-ball-1-hi: #ffc2b8; --px-ball-2: #4a6fb8; --px-ball-2-hi: #c3d4f5; --px-ball-3: #e07a97; --px-ball-3-hi: #fbd9e1; --px-ball-4: #4f8a63; --px-ball-4-hi: #c2e6cd; --px-ball-5: #d39a33; --px-ball-5-hi: #ffe2a3; --px-ball-6: #8a78c4; --px-ball-6-hi: #ddd3f6; } /* ── Base ── Tailwind's compiled sheet loads after the theme, so selectors that must beat its single-class utilities carry an extra html qualifier. */ html body { background: var(--page-bg); color: var(--ink); font-family: var(--font-ui); } html .font-sans { font-family: var(--font-ui); } /* Zen Antique comes in one weight; shared markup asks for semibold and bold, which must not be smeared into a fake bold. */ html .font-display, h1.display, h2.display, h3.display { font-family: var(--font-display); font-weight: 400; font-synthesis: none; letter-spacing: 0; } html .font-display.font-bold, html .font-display.font-semibold, html .font-display.font-black, html .font-display.font-extrabold { font-weight: 400; } .display-italic { font-style: normal; } html .font-display.italic, html .italic.font-display { font-family: var(--font-ui); font-style: normal; font-weight: 500; } /* Figures in tabular columns read better in the UI face */ html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0; } ::selection { background: #f7c3cf; color: #1c2848; } .text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--theme-500); } .ed-eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--theme-600); } .ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; } /* Section eyebrow — a small red seal in front of the label */ html .section-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--theme-600); margin-bottom: 0.7rem; } html .section-eyebrow::before { content: ''; flex-shrink: 0; width: 12px; height: 12px; background: var(--seal); box-shadow: inset 0 0 0 1.5px var(--seal), inset 0 0 0 2.5px var(--seal-paper); border-radius: 1px; } .btn-view-all { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; color: var(--ink); padding: .3rem .1rem 2px; border-bottom: 2px solid var(--sakura-2); text-decoration: none; transition: gap 0.18s ease; } .btn-view-all:hover { gap: 0.75rem; } [dir="rtl"] .btn-view-all svg { transform: scaleX(-1); } .ed-rule { background-color: var(--rule); } .ed-rule-soft { background-color: var(--rule-soft); } .ed-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--petals); } .ed-folio { font-family: var(--font-display); font-weight: 400; color: var(--theme-600); } [data-cb-phase][hidden] { display: none !important; } [dir="rtl"] .cb-flip-rtl { transform: scaleX(-1); } /* ── Header ── */ #desktopHeader .hdr-search { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; } #desktopHeader .hdr-search:focus-within { border-color: var(--theme-500); box-shadow: 0 0 0 3px var(--red-soft); } .ed-search { background: transparent; border: none; } .hdr-strip, .hdr-strip .ed-status { color: rgba(247, 239, 230, 0.88); } .hdr-strip a:hover, .hdr-strip button:hover { color: #f9c7d3; } /* The blossom band under the main header bar and wherever a section needs a border */ .cb-band { height: 14px; background: var(--cb-band); } .cb-band--night { background: var(--cb-band-night); } /* The season chip in the status strip */ .cb-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; color: #f9c7d3; } .cb-strip-chip svg { width: 14px; height: 14px; flex-shrink: 0; --p: #f7c3cf; --o: #f7c3cf; --c: #c8372d; } /* The desktop strip shares its line with the menu; the second half of the chip joins it only where there is room for both, and the day's date gives way to the chip below 1440px. Where a long language still runs out of room, cherry-blossom.js marks the strip .cb-strip-tight and the chip keeps only its short form. */ @media (max-width: 639px), (min-width: 1024px) and (max-width: 1439px) { .cb-strip-chip__extra { display: none; } } @media (min-width: 1024px) and (max-width: 1439px) { .hdr-strip .cb-strip-date { display: none; } } .cb-strip-chip__short, .cb-strip-tight .cb-strip-chip__full { display: none; } .cb-strip-tight .cb-strip-chip__short { display: inline; } .ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); } .ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; } @media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } } .ed-subnav-eyebrow { flex-shrink: 0; font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--theme-600); white-space: nowrap; padding-right: 1.25rem; border-right: 1px solid var(--rule); } [dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); } .ed-subnav-items { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; } .ed-subnav-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.85rem; border-radius: 999px; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; color: var(--ink-2); text-decoration: none; } .ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; } .ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); } .ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); } .ed-subnav-item:focus-visible { outline: 2px solid var(--theme-500); outline-offset: 2px; } /* ── Links and buttons ── */ .ed-link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-ui); font-size: 0.92rem; font-weight: 700; color: var(--ink); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid var(--sakura-2); transition: gap 0.18s ease; } .ed-link-arrow:hover { gap: 0.7rem; } html .ed-btn-primary, html .ed-plan-cta, html .drawer-login { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.8rem 1.6rem; white-space: nowrap; font-family: var(--font-ui); font-size: 0.97rem; font-weight: 700; color: var(--btn-ink); background: var(--btn-bg); border: 0; border-radius: 8px; box-shadow: var(--btn-shadow); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover { background: var(--btn-bg-hover); color: var(--btn-ink); transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); } html .ed-btn-primary:active, html .ed-plan-cta:active { transform: translateY(1px); } html.dark .ed-btn-primary, html.dark .ed-btn-primary:hover, html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); } html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta, html body .ed-plan-cta, html.dark body .ed-plan-cta { background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow); } html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta { background: #f4a6b9; color: #2a0f1d; box-shadow: 0 2px 0 #b9637c; } .ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--theme-500); outline-offset: 3px; } .ed-btn-secondary { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.76rem 1.4rem; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; transition: background 0.15s ease, border-color .15s ease; } .ed-btn-secondary:hover { background: var(--paper-3); border-color: var(--ink-soft); } html.dark .ed-btn-secondary { color: var(--ink); } :is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); } /* ── Cards: washi with a fine key line, a lift on hover ── */ html .ed-plan, html .shop-card { position: relative; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.18s ease, box-shadow 0.18s ease; } html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } html .ed-plan-featured { position: relative; background: var(--yoru-bg); color: #f7efe6; border: 1px solid rgba(247, 195, 207, .3); border-radius: var(--radius); overflow: hidden; } .ed-plan-featured::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--cb-band-night); pointer-events: none; } .ed-plan-hairline { border-color: var(--rule); } .ed-plan-featured .ed-plan-hairline { border-color: rgba(247, 239, 230, .2); } /* ── Status text ── */ .ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-soft); } .ed-topnav-link { color: rgba(247, 239, 230, 0.88); text-decoration: none; transition: color 0.16s ease; } .ed-topnav-link:hover, .ed-topnav-link.active { color: #f9c7d3; } /* ── Drawer ── */ .drawer-section-label { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem; } .drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); } .drawer-nav-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 1.5rem; font-family: var(--font-ui); font-size: 1rem; font-weight: 500; color: var(--ink-2); text-decoration: none; } .drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); } .drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; } .drawer-logout { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 8px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; color: var(--theme-600); border: 1px solid var(--theme-600); text-decoration: none; } .drawer-logout:hover { background: var(--gold-soft); } .mobile-glass-header { background: rgba(247, 240, 227, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--rule); } html.dark .mobile-glass-header { background: rgba(16, 22, 46, 0.94); } .ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--sakura-2); } [x-cloak] { display: none !important; } .ed-dropdown { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-md); overflow: hidden; } .ed-dropdown-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.68rem 1rem; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500; color: var(--ink-2); text-decoration: none; } .ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); } .ed-section-cap { font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--theme-600); padding: 0.9rem 1rem 0.4rem; } .ed-mobile-link.active { color: var(--nav-accent); } /* ── A falling petal on its own (.cb-petal: placed by --x/--y, sized by --s, turned by --r, timed by --w) and a paper lantern (.cb-lantern), for the footer, splash and hero. ── */ .cb-petal { position: absolute; left: var(--x); top: var(--y); width: var(--s, 12px); height: calc(var(--s, 12px) * .82); background: var(--sakura); border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%; clip-path: polygon(0 0, 38% 0, 50% 22%, 62% 0, 100% 0, 100% 100%, 0 100%); transform: rotate(var(--r, 0deg)); pointer-events: none; } .cb-petal--deep { background: var(--sakura-2); } @media (prefers-reduced-motion: no-preference) { .cb-petal--fall { animation: cb-fall 9s ease-in-out 1 forwards; animation-delay: var(--w, 0s); } } @keyframes cb-fall { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 8px 10px; rotate: 30deg; } } /* A paper lantern (chōchin): a round lit body ribbed across, black caps */ .cb-lantern { position: absolute; left: var(--x); top: var(--y); width: calc(14px * var(--k, 1)); height: calc(18px * var(--k, 1)); border-radius: 46% / 40%; background: repeating-linear-gradient(180deg, transparent 0 calc(3px * var(--k, 1)), rgba(160, 40, 30, .35) calc(3px * var(--k, 1)) calc(3.6px * var(--k, 1))), radial-gradient(ellipse 60% 55% at 50% 55%, #fff4d8, #ffc06a 55%, #f08a3c 100%); box-shadow: 0 0 calc(18px * var(--k, 1)) calc(4px * var(--k, 1)) rgba(255, 170, 80, .42); pointer-events: none; } .cb-lantern::before, .cb-lantern::after { content: ''; position: absolute; left: 22%; right: 22%; height: calc(2.5px * var(--k, 1)); background: #1b1420; border-radius: 1px; } .cb-lantern::before { top: calc(-1px * var(--k, 1)); } .cb-lantern::after { bottom: calc(-1px * var(--k, 1)); } @media (prefers-reduced-motion: no-preference) { .cb-lantern { animation: cb-sway 6s ease-in-out 2 forwards; animation-delay: var(--w, 0s); transform-origin: 50% -40%; } } @keyframes cb-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } } /* ── Dark/light toggle: a print pulled from the block ── assets/themes/cherry-blossom/assets/js/cherry-blossom.js registers it: a sheet of washi in the new mode's colours is laid down over the page from its top edge, the key block and then the colour block print a flowering bough onto it, the mode flips beneath, and the sheet is peeled back from its lower corner, folding over on itself, to show the page printed in its new colours. */ .px-fx--cb-pull { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; perspective: 1400px; } .px-fx--cb-pull.is-to-dark { --fx-paper: #141b3a; --fx-back: #2a3462; --fx-key: #070b1c; --fx-p: #fbd9e1; --fx-p2: #f2a5b8; --fx-c: #ff8a5c; --fx-sky: #263166; } .px-fx--cb-pull.is-to-light { --fx-paper: #f7f0e3; --fx-back: #fffaf1; --fx-key: #1f2f57; --fx-p: #f7c3cf; --fx-p2: #ec8fa6; --fx-c: #c8372d; --fx-sky: #a9c1dd; } .px-fx--cb-pull .cb-fx-sheet, .px-fx--cb-pull .cb-fx-fold, .px-fx--cb-pull .cb-fx-flap { position: absolute; inset: 0; } .px-fx--cb-pull .cb-fx-sheet { background: linear-gradient(180deg, var(--fx-sky) 0, var(--fx-paper) 38%); transform-origin: 50% 0; transform: rotateX(-82deg); opacity: 0; transition: transform .34s cubic-bezier(.3, .7, .3, 1), opacity .12s ease; } .px-fx--cb-pull.is-laid .cb-fx-sheet { transform: none; opacity: 1; } .px-fx--cb-pull .cb-fx-bough { position: absolute; top: -2vh; left: -4vw; width: min(118vw, 1400px); height: auto; --o: var(--fx-key); --bark: var(--fx-key); --p: var(--fx-p); --p2: var(--fx-p2); --c: var(--fx-c); } .px-fx--cb-pull.is-rtl .cb-fx-bough { left: auto; right: -4vw; transform: scaleX(-1); } .px-fx--cb-pull .cb-fx-bough--low { top: auto; left: auto; bottom: -4vh; right: -6vw; width: min(70vw, 820px); transform: rotate(180deg); } .px-fx--cb-pull.is-rtl .cb-fx-bough--low { right: auto; left: -6vw; transform: rotate(180deg) scaleX(-1); } .px-fx--cb-pull .cb-fx-petal { position: absolute; width: 22px; height: 18px; background: var(--fx-p2); border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%; clip-path: polygon(0 0, 38% 0, 50% 22%, 62% 0, 100% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity .01s linear; } .px-fx--cb-pull.is-coloured .cb-fx-petal { opacity: .9; } /* Two impressions: the key block alone, then the colours over it */ .px-fx--cb-pull .cb-fx-bough [fill^="var(--p"], .px-fx--cb-pull .cb-fx-bough circle { fill-opacity: 0; transition: fill-opacity .01s linear .12s; } .px-fx--cb-pull .cb-fx-bough { opacity: 0; transition: opacity .01s linear; } .px-fx--cb-pull.is-keyed .cb-fx-bough { opacity: 1; } .px-fx--cb-pull.is-coloured .cb-fx-bough [fill^="var(--p"], .px-fx--cb-pull.is-coloured .cb-fx-bough circle { fill-opacity: 1; } .px-fx--cb-pull .cb-fx-seal { position: absolute; left: 6vw; bottom: 8vh; width: 72px; height: 72px; opacity: 0; transform: scale(1.6); transition: opacity .1s ease, transform .18s cubic-bezier(.3, 1.5, .5, 1); } .px-fx--cb-pull.is-rtl .cb-fx-seal { left: auto; right: 6vw; } .px-fx--cb-pull.is-coloured .cb-fx-seal { opacity: 1; transform: none; } /* The back of the sheet as it folds over; the shadow it casts sits on the wrapper, since a clip-path would cut it off the flap itself */ .px-fx--cb-pull .cb-fx-fold { filter: drop-shadow(-6px -6px 14px rgba(0, 0, 0, .3)); } .px-fx--cb-pull .cb-fx-flap { background: var(--fx-back); } /* ── Footer: the riverbank under the blossom in both modes — the river along its top edge carrying petals, a bough reaching over it and, after dark, lanterns strung under the branch ── */ .cb-footer { --paper: #1a2447; --paper-2: #222d55; --paper-3: #2b3762; --ink: #f7efe6; --ink-2: #e4dcd2; --ink-soft: #b0b5cd; --rule: rgba(247, 239, 230, 0.15); --rule-soft: rgba(247, 239, 230, 0.08); --theme-500: #f6b0c1; --theme-600: #f6b0c1; --theme-700: #f9c7d3; --theme-500-rgb: 246, 176, 193; position: relative; } html.dark .cb-footer { --paper: #0b1026; --paper-2: #151c3a; --paper-3: #1e2648; } .cb-footer-top { position: relative; height: 126px; margin-bottom: -1px; overflow: hidden; } /* The river: the bank's water in the footer's own indigo below the crests */ .cb-footer-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: url("data:image/svg+xml;utf8,") repeat-x left bottom / 200px 44px; } html.dark .cb-footer-top::after { filter: brightness(.5) saturate(1.2); } /* The far bank, a band of mist across the water */ .cb-footer-top::before { content: ''; position: absolute; left: 0; right: 0; bottom: 30px; height: 22px; background: linear-gradient(180deg, transparent, rgba(255, 250, 241, .55) 50%, transparent); } html.dark .cb-footer-top::before { background: linear-gradient(180deg, transparent, rgba(255, 179, 90, .14) 50%, transparent); } .cb-footer-top__bough { position: absolute; top: -6px; right: -20px; width: min(560px, 74vw); height: auto; --o: #1f2f57; --bark: #3a2b36; transform: scaleX(-1); } [dir="rtl"] .cb-footer-top__bough { right: auto; left: -20px; transform: none; } html.dark .cb-footer-top__bough { --o: #070b1c; --bark: #070b1c; --p: #fbd9e1; --p2: #f2a5b8; --c: #ff8a5c; } .cb-footer-top .cb-lantern { display: none; } html.dark .cb-footer-top .cb-lantern { display: block; } .cb-footer a:hover { color: #f9c7d3; } html .cb-footer .ed-footer-heading { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; letter-spacing: 0; text-transform: none; color: #f9c7d3; } html.dark #desktopFooter li { color: var(--ink-2) !important; } html .ed-floating-nav { background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow-md); } html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .92rem; font-weight: 500; color: var(--ink-2); } html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); } html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; } html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; } /* The newsletter on a sheet of washi, a red seal stamped in its corner and a twig of blossom along its foot */ html body .cb-footer .ed-newsletter { position: relative; background: var(--bough) no-repeat right -40px bottom -14px / 240px 80px, url("data:image/svg+xml;utf8,"), #fbf5ea; color: #1c2848; border: 0; border-radius: 6px; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(28, 40, 72, .1); overflow: hidden; } [dir="rtl"] body .cb-footer .ed-newsletter { background-position: left -40px bottom -14px, 0 0, 0 0; } html body .cb-footer .ed-newsletter::before { content: ''; position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; pointer-events: none; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; transform: rotate(4deg); opacity: .92; } [dir="rtl"] body .cb-footer .ed-newsletter::before { right: auto; left: 14px; transform: rotate(-4deg); } html body .cb-footer .ed-newsletter::after { display: none; } html body .cb-footer .ed-newsletter > * { position: relative; } html body .cb-footer .ed-newsletter, html body .cb-footer .ed-newsletter * { --ink: #1c2848; --ink-2: #34416a; } html body .cb-footer .ed-newsletter h4, html.dark body .cb-footer .ed-newsletter h4 { color: #1c2848 !important; font-family: var(--font-display); font-weight: 400; } html.dark body .cb-footer .ed-newsletter p:not(#newsletter-msg) { color: #34416a !important; } html body .cb-footer .ed-newsletter-input, html.dark body .cb-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #1c2848 !important; border: 1px solid rgba(28, 40, 72, .2) !important; border-radius: 8px; } html body .cb-footer .ed-newsletter-input::placeholder { color: #6b7190; } html body .cb-footer .ed-newsletter-input:focus { border-color: #24407a !important; box-shadow: 0 0 0 3px rgba(36, 64, 122, .15); } html body .cb-footer .ed-newsletter-btn { background: #24407a; color: #ffffff; border: 0; border-radius: 8px; font-family: var(--font-ui); font-weight: 700; } html body .cb-footer .ed-newsletter-age { color: #34416a; } /* Logo card: the light-mode logo on a slip of washi with the red seal in its corner, wherever it sits on the night (footer, app splash). */ .cb-plaque { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.2rem 1rem 1.6rem; background: #fbf5ea; border-radius: 4px; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(28, 40, 72, .1), inset 0 0 0 5px #fbf5ea, inset 0 0 0 6px rgba(28, 40, 72, .22); } .cb-plaque::after { content: ''; position: absolute; right: 9px; bottom: 9px; width: 14px; height: 14px; background: #c8372d; box-shadow: inset 0 0 0 1.5px #c8372d, inset 0 0 0 2.5px #fbf4e8; } [dir="rtl"] .cb-plaque { padding: 1rem 1.6rem 1rem 2.2rem; } [dir="rtl"] .cb-plaque::after { right: auto; left: 9px; } /* Long titles and descriptions show in full; a card grows instead of clipping them. */ html [class*="line-clamp-"] { -webkit-line-clamp: unset; } html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } /* .text-fit (assets/css/header.css) shrinks a title to one line with JS, measured before the display face loads; under this theme it wraps. */ html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } /* On phones a heading never splits mid-word; only a word wider than the whole column may still break. */ @media (max-width: 639px) { html body :is(.text-fit, :is(h1, h2, h3).truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; } /* the auction page's "similar auctions" link ("Andere Auktionen durchstöbern") drops under its heading */ html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; } } /* ── Dark-mode greys from assets/css/header.css ── header.css forces a neutral near-black palette onto Tailwind's light utilities with !important; these follow the theme's own surfaces. */ html.dark body { background-color: var(--paper) !important; } html.dark .mobile-glass-header { background: rgba(16, 22, 46, 0.94) !important; border-bottom-color: var(--rule) !important; } html.dark #desktopFooter { background: var(--paper) !important; } html.dark .floating-nav-shell, html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(24, 32, 63, 0.96) !important; } html.dark .premium-side-menu { background: var(--paper) !important; } html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--rule) !important; } html.dark .premium-profile-header { background: var(--paper-2) !important; } html.dark .premium-dropdown, html.dark #mobileExploreSheet .bg-white, html.dark #logoutModal .bg-white, html.dark .bg-white, html.dark [x-data] .bg-white, html.dark .bg-white.shadow-xl, html.dark .bg-slate-50, html.dark .bg-slate-100, html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; } html.dark .bg-gray-50, html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; } html.dark .bg-gray-100, html.dark #mobileExploreSheet .bg-gray-100, html.dark thead { background-color: var(--paper-3) !important; } html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; } html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; } html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; } html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; } html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; } html.dark .search-input, html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; } html.dark .gradient-bg { background: linear-gradient(-45deg, #212a4f, #10162e, #262f58, #0b1026) !important; } html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; } /* header.css fills every dark-mode field with a navy #0d1117; here fields take the theme's own night. Same selector shape so it outranks it. */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark), html.dark textarea:not(.no-dark), html.dark select:not(.no-dark) { background-color: #0b1026 !important; border-color: rgba(245, 238, 230, .2) !important; color: #f5eee6 !important; } /* Inverted panels: shared markup paints some panels with background var(--ink) and letters them in var(--paper), which only works while ink is dark. After dark those panels take the deepest night. */ html.dark [style*="background: var(--ink)"], html.dark [style*="background:var(--ink)"], html.dark [style*="background-color: var(--ink)"], html.dark [style*="background-color:var(--ink)"] { --ink: #0b1026; --paper: #f5eee6; border-color: rgba(247, 195, 207, .3); } html header.safe-top-header[style] { background: rgba(247, 240, 227, .95) !important; } html.dark header.safe-top-header[style] { background: rgba(16, 22, 46, .95) !important; } /* The winners page's tab bar, near-black in assets/css/pages/winners.css */ html.dark .wn-tab-bar { background: rgba(16, 22, 46, .95); } /* ── Login / register / forgot-password brand panel: the yozakura, a bough across its top corner ── */ :root, html.dark { --brand-gradient: var(--yoru-bg); --brand-glow-1: rgba(255, 179, 90, 0.26); --brand-glow-2: rgba(247, 195, 207, 0.24); } .brand-panel { background: var(--river-waves-night) repeat-x left bottom / 200px 44px, var(--yoru-bg) !important; } /* assets/css/pages/login.css loads after the theme and draws ::after as a round glow; here it is a flowering bough reaching in from the corner. */ html .brand-panel::after { content: ''; position: absolute; top: 0 !important; right: 0 !important; left: auto !important; bottom: auto !important; width: 380px !important; height: 127px !important; border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: scaleX(-1) !important; background: var(--bough-night) no-repeat right top / 380px 127px !important; box-shadow: none !important; } [dir="rtl"] .brand-panel::after { right: auto !important; left: 0 !important; transform: none !important; } .brand-panel .text-purple-200, .brand-panel [class*="text-purple-200"] { color: rgba(247, 239, 230, 0.84) !important; } .brand-panel h2 { font-family: var(--font-display); font-weight: 400 !important; } /* ── Wallet balance card: a night print — a bough of lit blossom across its corner and the river along its foot, petals afloat ── */ html body .wallet-hero { position: relative; background: var(--river-waves-night) repeat-x left bottom / 200px 44px, var(--yoru-bg); border: 1px solid rgba(247, 195, 207, .25); border-radius: 12px; box-shadow: var(--shadow-md), inset 0 0 0 5px rgba(255, 250, 241, .04); color: #f7efe6; overflow: hidden; padding-bottom: 4.2rem !important; } /* The artist's seal in the lower corner */ html body .wallet-hero::before { content: ''; position: absolute; right: 18px; bottom: 12px; left: auto; top: auto; width: 30px; height: 30px; border: 0; border-radius: 0; transform: rotate(-3deg); background: url("data:image/svg+xml;utf8,") center / contain no-repeat; pointer-events: none; } /* A bough of lit blossom reaching in from the right, clear of the labels along the top and the balance */ html body .wallet-hero::after { content: ''; position: absolute; right: -14px; top: 30%; left: auto; bottom: auto; width: 330px; height: 110px; background: var(--bough-night) no-repeat center / contain; border: 0; border-radius: 0; opacity: 1; transform: scaleX(-1); pointer-events: none; } html[dir="rtl"] body .wallet-hero::before { right: auto; left: 18px; } html[dir="rtl"] body .wallet-hero::after { right: auto; left: -14px; transform: none; } @media (max-width: 639px) { html body .wallet-hero::after { width: 180px; height: 60px; top: 34%; right: -8px; } html[dir="rtl"] body .wallet-hero::after { right: auto; left: -6px; } } html body .wallet-hero > * { position: relative; z-index: 1; } html body .wallet-balance-num { font-family: var(--font-ui); font-variation-settings: normal; font-weight: 700; letter-spacing: -.02em; color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums; } html body .wallet-hero-btn-primary { background: #f4a6b9; color: #2a0f1d; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 8px; } html body .wallet-hero-btn-primary:hover { background: #f8bccb; color: #2a0f1d; } html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #f7efe6; border-color: rgba(247, 239, 230, .45); border-radius: 8px; background: rgba(18, 26, 54, .55); } /* ── Mystery box card (styled by assets/css/pages/home.css): a box under the blossom band ── */ html .ed-card-mystery { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } html .ed-card-mystery::before { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 14px; border-radius: 0; background: var(--cb-band); opacity: 1; z-index: 2; } html .ed-card-mystery img { position: relative; z-index: 1; } /* ── Product page buy box: the blossom band along its top ── */ html body .pd-buybox { position: relative; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-md); overflow: hidden; } html body .pd-buybox::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--cb-band); } html body .pd-buybox .font-display.text-4xl { color: var(--theme-600); overflow-wrap: normal; } .pd-title { font-weight: 400 !important; } /* The mystery box plugin's own button is ink on paper and dynamic-theme's ".dark button" turns its label the colour of its fill; readable here on plugin releases without their own fix. */ html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); } /* Shared markup's stock purple, indigo and blue accents (coupon buttons, tier chips, focus rings) take the theme's indigo. */ html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); } html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); } html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); } /* Solid purple action buttons (coupon Apply and the like) sit beside a field and take the colour of the main buttons. */ html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white { background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 8px; } html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); } html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; } html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(36, 64, 122, .3); } html.dark .border-violet-200 { border-color: rgba(242, 157, 178, .35) !important; } html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(36, 64, 122, .35); } html .focus\:border-purple-400:focus { border-color: var(--theme-500); } /* Shared buttons drawn in the accent with white lettering (Place Order, Buy Now bars) are the theme's main buttons. */ html .bg-theme-600.text-white, html .bg-theme-500.text-white, html .bg-blue-600.text-white, html .bg-blue-500.text-white { background: var(--btn-bg) !important; color: var(--btn-ink) !important; box-shadow: var(--btn-shadow) !important; } html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; } html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(255, 255, 255, .3); border-top-color: var(--btn-ink); } /* ── Winners page cards ── */ html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); } html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } /* ── Cart and checkout: the order total under the blossom band ── Picked out by what the panels contain, so no copies of their markup (or their Alpine hooks) live in the theme. */ html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 10px !important; } html .rounded-2xl:has(> div > div > #summary-total), html section.rounded-2xl:has([x-text="totalDisplay()"]) { position: relative; background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 12px !important; box-shadow: var(--shadow-md) !important; overflow: hidden; padding-top: 1.6rem !important; } html .rounded-2xl:has(> div > div > #summary-total)::before, html section.rounded-2xl:has([x-text="totalDisplay()"])::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--cb-band); } html .rounded-2xl:has(> div > div > #summary-total) > div, html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; } html #summary-total, html section.rounded-2xl [x-text="totalDisplay()"] { font-family: var(--font-ui); font-weight: 700; font-size: 1.7rem; color: var(--theme-600); overflow-wrap: normal; } /* The status strip holds one line, never wrapping inside its 32px. */ .hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; } .hdr-strip .ed-status { font-size: 11px; letter-spacing: .05em; } @media (max-width: 1023px) { .hdr-strip .cb-strip-chip { font-size: 10px; gap: .35rem; } } /* Small phones: the dark-mode switch and the App chip in the header drop their words and keep their icons. */ @media (max-width: 419px) { html .hdr-strip .dark-mode-toggle span { display: none; } html .mobile-glass-header .pwa-chip__label { display: none; } html .mobile-glass-header .pwa-chip { padding: 0 .6rem; } } /* ── My Winnings: each prize as a woodblock print — a sky shading down from Prussian blue, a bough across the top, the prize on the river bank and the red seal in the corner, mounted on a washi margin ── */ .cb-win { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; } .cb-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .cb-win__print { position: relative; margin: 10px 10px 0; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--river-waves) repeat-x -40px bottom / 160px 35px, linear-gradient(180deg, #5f80b4 0, #a9c1dd 22%, #e6ecee 52%, #f6efe2 80%); border: 1.5px solid var(--key); border-radius: 3px; overflow: hidden; } .cb-win:nth-child(3n+2) .cb-win__print { background-position: -110px bottom, 0 0; } .cb-win:nth-child(3n+3) .cb-win__print { background-position: -10px bottom, 0 0; } html.dark .cb-win__print { background: var(--river-waves-night) repeat-x -40px bottom / 160px 35px, radial-gradient(70% 50% at 50% 92%, rgba(255, 179, 90, .28), transparent 70%), linear-gradient(180deg, #0b1026, #1a2450 60%, #2a3466); border-color: rgba(247, 195, 207, .35); } .cb-win__bough { position: absolute; top: -10px; right: -16px; width: 62%; height: auto; pointer-events: none; transform: scaleX(-1); } [dir="rtl"] .cb-win__bough { right: auto; left: -16px; transform: none; } html.dark .cb-win__bough { --o: #070b1c; --bark: #070b1c; --p: #fbd9e1; --p2: #f2a5b8; --c: #ff8a5c; } .cb-win__plate { position: relative; z-index: 1; width: 52%; aspect-ratio: 1; margin-top: 6%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fffaf1; box-shadow: 0 0 0 1.5px var(--key), 0 0 0 6px rgba(255, 250, 241, .7), 0 10px 18px -8px rgba(28, 40, 72, .5); overflow: hidden; } html.dark .cb-win__plate { box-shadow: 0 0 0 1.5px #070b1c, 0 0 0 6px rgba(247, 195, 207, .18), 0 0 26px rgba(255, 179, 90, .3); } .cb-win__plate img { width: 78%; height: 78%; object-fit: contain; transition: transform .3s ease; } .cb-win:hover .cb-win__plate img { transform: scale(1.06); } .cb-win__seal { position: absolute; z-index: 2; left: 10px; bottom: 10px; width: 28px; height: 28px; transform: rotate(-4deg); } [dir="rtl"] .cb-win__seal { left: auto; right: 10px; transform: rotate(4deg); } .cb-win__print > .absolute { z-index: 3; top: .7rem; } .cb-win__tag { display: inline-flex; align-items: center; padding: .2rem .55rem; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #1c2848; background: #fffaf1; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(28, 40, 72, .35); } .cb-win__tag--open { color: #ffffff; background: #c8372d; box-shadow: none; } .cb-win__tag--done { color: #ffffff; background: #24407a; box-shadow: none; } html.dark .cb-win__tag--done { color: #2a0f1d; background: #f4a6b9; } .cb-win__name { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; } .cb-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); } .cb-win__price { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.35rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; white-space: nowrap; } .cb-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; } .cb-win__cart, .cb-win__btn-off { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 8px; font-weight: 700; } .cb-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); } .cb-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); } .cb-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; } .cb-win__claimed { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .5rem; font-size: .9rem; font-weight: 700; color: var(--theme-600); background: var(--rose-soft); border-radius: 8px; } /* After dark the accent is pale blossom, so shared pieces that letter it in white (the game arena's Play button, the cart badge) take the buttons' dark ink instead. */ html.dark .arena-play { color: var(--btn-ink); text-shadow: none; } html.dark .arena-play .pic { background: rgba(42, 15, 29, .12); } html.dark .arena-play .cost { border-left-color: rgba(42, 15, 29, .25); } html.dark .cart-count-badge { color: var(--btn-ink); } /* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues for the shared .px-tone-* chips and notes, each set so its chip and text read at 4.5:1 or better on this theme's paper in light and dark. */ html:root { --px-good: #3b6d4e; --px-warn: #b45309; --px-crit: #c8372d; --px-info: #24407a; } html.dark:root { --px-good: #8fcca6; --px-warn: #fbbf23; --px-crit: #f6b1c2; --px-info: #a8c0f0; } /* Changing language, the scene (cherry-blossom.js): a gust of petals blows across the old name and carries it off before the reload; after it the petals drift down into a ring round the new name. Each petal sits in a layer the size of the field, so its drift is a translate in % of the field and its place in the ring is where it rests. The print is the same on both pages, so the reload never shows. */ .cb-lang-stage { overflow: hidden; background: color-mix(in srgb, var(--night) 50%, transparent); } .cb-lang-print { position: relative; display: flex; flex-direction: column; align-items: center; width: min(560px, 100%); box-sizing: border-box; padding: 18px 18px 16px; background: var(--washi), var(--paper-2); color: var(--ink); border-radius: 6px; box-shadow: var(--cb-mount), 0 34px 70px -30px rgba(0, 0, 0, .6); font-family: var(--font-ui); } .cb-lang-branch { position: absolute; left: 16px; top: 14px; width: 96px; height: 34px; box-sizing: border-box; border-top: 3px solid var(--ink-soft); border-radius: 100% 0 0 0 / 100% 0 0 0; opacity: .9; } .cb-lang-branch i { position: absolute; width: 20px; height: 20px; background: var(--sakura-img) center / contain no-repeat; } .cb-lang-branch i:nth-child(1) { left: 6px; top: -6px; } .cb-lang-branch i:nth-child(2) { left: 40px; top: -14px; width: 16px; height: 16px; } .cb-lang-branch i:nth-child(3) { left: 78px; top: -12px; } .cb-lang-field { position: relative; display: grid; place-items: center; width: 100%; min-height: 170px; padding: 36px 16%; box-sizing: border-box; } .cb-lang-old, .cb-lang-new { grid-area: 1 / 1; max-width: 100%; text-align: center; overflow-wrap: anywhere; font: 400 clamp(26px, 7.6vw, 42px)/1.15 var(--font-display); } .cb-lang-new { color: var(--theme-600); opacity: 0; } .cb-lang-petals { position: absolute; inset: 0; pointer-events: none; } .cb-lang-petals i { position: absolute; inset: 0; } .cb-lang-petals i::before { content: ''; position: absolute; width: 14px; height: 15px; margin: -7px 0 0 -7px; background: var(--petal-img) center / contain no-repeat; } .cb-lang-petals i:nth-child(1) { --x: -30%; --y: -8%; } .cb-lang-petals i:nth-child(1)::before { left: 93%; top: 60%; transform: rotate(-30deg); } .cb-lang-petals i:nth-child(2) { --x: 4%; --y: -30%; } .cb-lang-petals i:nth-child(2)::before { left: 82%; top: 78%; transform: rotate(40deg); } .cb-lang-petals i:nth-child(3) { --x: -24%; --y: -35%; } .cb-lang-petals i:nth-child(3)::before { left: 62%; top: 89%; transform: rotate(120deg); } .cb-lang-petals i:nth-child(4) { --x: 43%; --y: -33%; } .cb-lang-petals i:nth-child(4)::before { left: 38%; top: 89%; transform: rotate(-75deg); } .cb-lang-petals i:nth-child(5) { --x: 51%; --y: -16%; } .cb-lang-petals i:nth-child(5)::before { left: 18%; top: 78%; transform: rotate(15deg); } .cb-lang-petals i:nth-child(6) { --x: 38%; --y: -16%; } .cb-lang-petals i:nth-child(6)::before { left: 7%; top: 60%; transform: rotate(160deg); } .cb-lang-petals i:nth-child(7) { --x: 68%; --y: 2%; } .cb-lang-petals i:nth-child(7)::before { left: 7%; top: 40%; transform: rotate(-140deg); } .cb-lang-petals i:nth-child(8) { --x: 6%; --y: 36%; } .cb-lang-petals i:nth-child(8)::before { left: 18%; top: 22%; transform: rotate(70deg); } .cb-lang-petals i:nth-child(9) { --x: -22%; --y: 35%; } .cb-lang-petals i:nth-child(9)::before { left: 38%; top: 11%; transform: rotate(-10deg); } .cb-lang-petals i:nth-child(10) { --x: -5%; --y: 27%; } .cb-lang-petals i:nth-child(10)::before { left: 62%; top: 11%; transform: rotate(95deg); } .cb-lang-petals i:nth-child(11) { --x: -51%; --y: 18%; } .cb-lang-petals i:nth-child(11)::before { left: 82%; top: 22%; transform: rotate(-50deg); } .cb-lang-petals i:nth-child(12) { --x: -42%; --y: 20%; } .cb-lang-petals i:nth-child(12)::before { left: 93%; top: 40%; transform: rotate(200deg); } .cb-lang-foot { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font: 700 12px/1 var(--font-ui); letter-spacing: .14em; } .cb-lang-side { display: inline-flex; align-items: center; gap: 6px; } .cb-lang-side img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } .cb-lang-wind { color: var(--sakura-2); } /* Out: the print comes up, the gust crosses the old name and takes it. */ .px-lang-stage-out .cb-lang-print { animation: cb-lang-print-in .35s cubic-bezier(.2, .8, .3, 1.1) both; } .px-lang-stage-out .cb-lang-petals i { animation: cb-lang-gust .38s cubic-bezier(.3, .6, .4, 1) .2s both; } .px-lang-stage-out .cb-lang-petals i:nth-child(2) { animation-delay: .225s; } .px-lang-stage-out .cb-lang-petals i:nth-child(3) { animation-delay: .25s; } .px-lang-stage-out .cb-lang-petals i:nth-child(4) { animation-delay: .275s; } .px-lang-stage-out .cb-lang-petals i:nth-child(5) { animation-delay: .3s; } .px-lang-stage-out .cb-lang-petals i:nth-child(6) { animation-delay: .325s; } .px-lang-stage-out .cb-lang-petals i:nth-child(7) { animation-delay: .35s; } .px-lang-stage-out .cb-lang-petals i:nth-child(8) { animation-delay: .375s; } .px-lang-stage-out .cb-lang-petals i:nth-child(9) { animation-delay: .4s; } .px-lang-stage-out .cb-lang-petals i:nth-child(10) { animation-delay: .425s; } .px-lang-stage-out .cb-lang-petals i:nth-child(11) { animation-delay: .45s; } .px-lang-stage-out .cb-lang-petals i:nth-child(12) { animation-delay: .475s; } .px-lang-stage-out .cb-lang-old { animation: cb-lang-blow .5s ease-in .35s both; } /* In: from where the gust left them, the petals settle and the new name forms. */ .px-lang-stage-in .cb-lang-old { opacity: 0; transform: translateX(14%) skewX(-10deg); filter: blur(5px); } .px-lang-stage-in .cb-lang-petals i { animation: cb-lang-settle .55s ease-in-out both; } .px-lang-stage-in .cb-lang-petals i:nth-child(even) { animation-delay: .06s; } .px-lang-stage-in .cb-lang-petals i:nth-child(3n) { animation-delay: .12s; } .px-lang-stage-in .cb-lang-new { animation: cb-lang-form .45s ease-out .38s both; } .px-lang-stage-in .cb-lang-print { animation: cb-lang-print-out .25s ease-in 1s both; } @keyframes cb-lang-print-in { from { transform: translateY(20px) rotate(1deg); opacity: 0; } } @keyframes cb-lang-print-out { to { transform: translateY(-14px); opacity: 0; } } @keyframes cb-lang-gust { 0% { transform: translate(calc(var(--x) - 80%), calc(var(--y) - 24%)); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)); opacity: 1; } } @keyframes cb-lang-settle { from { transform: translate(var(--x), var(--y)); } to { transform: none; } } @keyframes cb-lang-blow { to { opacity: 0; transform: translateX(14%) skewX(-10deg); filter: blur(5px); } } @keyframes cb-lang-form { from { transform: scale(.92); filter: blur(6px); opacity: 0; } to { transform: none; filter: none; opacity: 1; } } @media (max-width: 460px) { .cb-lang-print { padding: 16px 12px 14px; } .cb-lang-field { padding: 34px 14%; } .cb-lang-branch { width: 72px; } .cb-lang-branch i:nth-child(3) { display: none; } } /* Phones: the hero's two buttons stay side by side, each as wide as its label needs, their text and padding shrinking with the screen; a label still too long takes two even lines inside its button. A home section's title and its "View all" link share one row too: the title keeps a little under half of it, breaking between words if it must, and only a very long link label takes two lines. */ @media (max-width: 639px) { html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; } html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) { flex: 1 1 auto; min-width: min-content; width: auto; margin: 0; justify-content: center; text-align: center; white-space: normal; text-wrap: balance; padding-inline: clamp(.5rem, 2.6vw, 1.25rem); font-size: clamp(.75rem, 3.5vw, .9375rem); line-height: 1.15; } html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) > :is(svg, i, img) { flex: none; } html body div.flex.justify-between:has(> div h2.text-fit):has(> a) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; column-gap: .75rem; } html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > div { flex: 1 1 0; min-width: 45%; } html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 55%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; } html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; } } /* Recent winners strip. It also stops while one of its cards has focus, slides towards the reading side on right-to-left pages (the shared loop only runs leftwards, which empties the row there), and holds still with each winner shown once when there are too few of them to fill the row (data-wt-still, set by assets/js/components/home/winner-ticker.js). */ html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; } @keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } @media (prefers-reduced-motion: no-preference) { html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; } } html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; } html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; } /* Windows (wallet, sign-out and the plugins' windows) sit on their own panel, so the secondary text, accent links and buttons in them take the deeper shades below to read at 4.5:1 there; the page around keeps its own. */ html:not(.dark) [role="dialog"] { --ink-soft: #656b88; } /* rev 868fe5109c9f2a2b */