/* ============================================================ HARVEST TABLE THEME — a long table set for Thanksgiving. Same class surface as editorial/theme.css, so shared header, footer, drawer and component classes stay styled. Built from the things on a family table in late autumn: a plaid cloth over walnut boards, rounds of wood for serving stands, place cards in a careful hand, wheat in a stoneware crock, tall candles, apples, pears, corn and a lattice pie, maple and oak leaves. Oat linen and cranberry in warm daylight by default; by night the same table by candlelight. The --theme-* ramp is set here, so the admin's accent colour setting does not apply while the theme is active. ============================================================ */ :root { --font-display: 'Young Serif', 'Nunito Sans', Georgia, serif; --font-hand: 'Dancing Script', 'Young Serif', Georgia, cursive; --font-ui: 'Nunito Sans', 'Inter', system-ui, sans-serif; --paper: #f8f1e4; --paper-2: #fffdf8; --paper-3: #f1e6d2; --ink: #2b1d14; --ink-2: #54402f; --ink-soft: #86705d; --rule: rgba(43, 29, 20, 0.13); --rule-soft: rgba(43, 29, 20, 0.07); --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(43, 29, 20, .06), 0 4px 14px -6px rgba(43, 29, 20, .18); --shadow-md: 0 2px 4px rgba(43, 29, 20, .06), 0 16px 32px -14px rgba(43, 29, 20, .34); /* Cranberry */ --theme-50: #fbeeee; --theme-100: #f5d6d6; --theme-200: #e8a9a9; --theme-300: #d77a7b; --theme-400: #c1504f; --theme-500: #a83434; --theme-600: #8f2a2b; --theme-700: #722224; --theme-800: #561a1c; --theme-900: #3a1213; --theme-500-rgb: 168, 52, 52; --theme-600-rgb: 143, 42, 43; /* The cloth's red, the mustard of its overcheck and the forest green of its bands; oak and walnut for the boards; the oat of linen */ --cranberry: #9b2c2c; --mustard: #d79a2b; --mustard-2: #b9801c; --forest: #4e6638; --oak: #b07a43; --oak-2: #8a5a2e; --walnut: #3a2617; --oat: #ecdcc0; --cream: #fffaf0; --berry-soft: rgba(168, 52, 52, 0.09); /* Names other themes' shared markup reaches for */ --gold: #b9801c; --gold-2: #d79a2b; --gold-soft: rgba(168, 52, 52, 0.08); --gold-ink: #2b1d14; --felt: #2a1b11; --felt-2: #1e130c; --on-felt: #fbf3e6; --on-felt-soft: rgba(251, 243, 230, 0.78); --peacock: #4e6638; --peacock-soft: rgba(78, 102, 56, 0.12); --red: var(--theme-500); --red-soft: var(--berry-soft); --rose: var(--theme-500); --notify-accent: var(--theme-500); --nav-accent: var(--theme-600); --hdr-strip-bg: #2a1b11; --hdr-strip-rule: transparent; --text-primary: var(--ink); --btn-bg: #9b2c2c; --btn-bg-hover: #a83434; --btn-ink: #ffffff; --btn-edge: #6a1d1e; --btn-shadow: 0 2px 0 var(--btn-edge), 0 8px 18px -10px rgba(43, 29, 20, .6); --btn-shadow-hover: 0 3px 0 var(--btn-edge), 0 12px 22px -10px rgba(43, 29, 20, .6); /* The tablecloth: a cranberry tartan, forest bands both ways with a mustard overcheck and a cream hairline */ --plaid: repeating-linear-gradient(90deg, transparent 0 25px, rgba(255, 244, 222, .38) 25px 26px, transparent 26px 34px), repeating-linear-gradient(0deg, transparent 0 25px, rgba(255, 244, 222, .38) 25px 26px, transparent 26px 34px), repeating-linear-gradient(90deg, transparent 0 18px, rgba(231, 174, 62, .9) 18px 20px, transparent 20px 34px), repeating-linear-gradient(0deg, transparent 0 18px, rgba(231, 174, 62, .9) 18px 20px, transparent 20px 34px), repeating-linear-gradient(90deg, rgba(40, 60, 34, .5) 0 10px, transparent 10px 34px), repeating-linear-gradient(0deg, rgba(40, 60, 34, .5) 0 10px, transparent 10px 34px), #a3322b; /* The same cloth as a narrow border band: its selvedge */ --plaid-band: repeating-linear-gradient(90deg, transparent 0 13px, rgba(231, 174, 62, .95) 13px 15px, transparent 15px 24px), repeating-linear-gradient(90deg, rgba(40, 60, 34, .55) 0 7px, transparent 7px 24px), linear-gradient(180deg, rgba(255, 244, 222, .3) 0 1px, transparent 1px 38%, rgba(40, 60, 34, .5) 38% 62%, transparent 62% calc(100% - 1px), rgba(0, 0, 0, .25) calc(100% - 1px)), #a3322b; --plaid-band-v: repeating-linear-gradient(0deg, transparent 0 13px, rgba(231, 174, 62, .95) 13px 15px, transparent 15px 24px), repeating-linear-gradient(0deg, rgba(40, 60, 34, .55) 0 7px, transparent 7px 24px), linear-gradient(90deg, rgba(255, 244, 222, .3) 0 1px, transparent 1px 38%, rgba(40, 60, 34, .5) 38% 62%, transparent 62% calc(100% - 1px), rgba(0, 0, 0, .25) calc(100% - 1px)), #a3322b; /* End grain of a round of oak: growth rings round a darker heart */ --wood-rings: radial-gradient(circle at 50% 50%, #8a5a2e 0 3%, transparent 3.5%), repeating-radial-gradient(circle at 50% 50%, #d9ab72 0 3.2%, #c9945a 3.6% 4.6%, #dcb07a 5% 7%), #d1a067; /* Walnut boards: plank joints, long grain, a warm light from above */ --planks: repeating-linear-gradient(180deg, transparent 0 58px, rgba(0, 0, 0, .38) 58px 60px, rgba(255, 220, 170, .05) 60px 61px), repeating-linear-gradient(179.3deg, rgba(255, 218, 168, .04) 0 2px, transparent 2px 9px), repeating-linear-gradient(180.6deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 13px), radial-gradient(700px 300px at 50% -80px, rgba(240, 170, 80, .16), transparent 70%), linear-gradient(180deg, #3f2a1a, #2c1c11); /* Linen: a soft weave over the page */ --linen: repeating-linear-gradient(0deg, rgba(110, 80, 50, .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(110, 80, 50, .03) 0 1px, transparent 1px 4px); /* Leaves as background images where no markup can carry one */ --leaf-maple: url("data:image/svg+xml;utf8,"); --leaf-oak: url("data:image/svg+xml;utf8,"); --leaf-mask: url("data:image/svg+xml;utf8,"); --ear-img: url("data:image/svg+xml;utf8,"); --page-bg: var(--linen), var(--paper); } html.dark { --paper: #1c140f; --paper-2: #271c15; --paper-3: #33251b; --ink: #f6ead8; --ink-2: #e2d0b8; --ink-soft: #ae9880; --rule: rgba(246, 234, 216, 0.13); --rule-soft: rgba(246, 234, 216, 0.07); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -8px rgba(0, 0, 0, .6); --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 36px -14px rgba(0, 0, 0, .8); /* By candlelight the accent is the flame's own amber */ --theme-50: #2a1d10; --theme-100: #3a2814; --theme-200: #5c3f1c; --theme-300: #ffe0a8; --theme-400: #f6c470; --theme-500: #eeac4c; --theme-600: #f3bb64; --theme-700: #ffd99a; --theme-800: #ffe8c2; --theme-900: #fff4e0; --theme-500-rgb: 238, 172, 76; --theme-600-rgb: 243, 187, 100; --berry-soft: rgba(238, 172, 76, 0.13); --gold: #eeac4c; --gold-2: #f6c470; --gold-soft: rgba(238, 172, 76, 0.12); --felt: #140d08; --felt-2: #271c15; --peacock: #9fbd83; --peacock-soft: rgba(159, 189, 131, 0.14); --nav-accent: var(--theme-500); --hdr-strip-bg: #120b07; --btn-bg: #eeac4c; --btn-bg-hover: #f6bd68; --btn-ink: #2a1606; --btn-edge: #a8702a; --btn-shadow: 0 2px 0 var(--btn-edge), 0 8px 22px -8px rgba(238, 172, 76, .4); --btn-shadow-hover: 0 3px 0 var(--btn-edge), 0 12px 28px -8px rgba(238, 172, 76, .55); --linen: repeating-linear-gradient(0deg, rgba(255, 236, 210, .022) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 236, 210, .018) 0 1px, transparent 1px 4px); --page-bg: radial-gradient(900px 440px at 20% -160px, rgba(238, 172, 76, 0.12), transparent 70%) no-repeat, radial-gradient(800px 420px at 88% -140px, rgba(168, 52, 52, 0.12), transparent 70%) no-repeat, var(--linen), var(--paper); } /* ── Materials the skins and plugin parts are cut from ── Five colours from the table (cranberry, mustard, sage, pumpkin and the stoneware blue of the crock), the leaf swag strung over modals and section heads, a sprig of wheat for dividers, the running stitch of the cloth's hem for dashed rules, place-card stock for stat cards and tags, and the stoneware plate products are served on. */ :root { --hv-c1: #9b2c2c; --hv-c2: #c98a1e; --hv-c3: #4e6638; --hv-c4: #c0562f; --hv-c5: #3e5f8c; --hv-kraft: #e4c99b; --hv-kraft-ink: #5b3a22; --hv-art-shadow: rgba(43, 29, 20, .16); --swag: url("data:image/svg+xml;utf8,") repeat-x left top / 132px 36px; --sprig: url("data:image/svg+xml;utf8,") center / contain no-repeat; --stitch: repeating-linear-gradient(90deg, rgba(155, 44, 44, .5) 0 7px, transparent 7px 12px); --stitch-cream: repeating-linear-gradient(90deg, rgba(255, 244, 222, .85) 0 7px, transparent 7px 12px); --oak-ring: inset 0 0 0 3px #6e4423, inset 0 0 0 5px #9b6a3a, inset 0 0 0 6px rgba(255, 230, 190, .35); --card-stock: linear-gradient(180deg, rgba(43, 29, 20, .09) 0 6px, rgba(255, 255, 255, .8) 6px 7px, transparent 7px), #fffaf0; --card-hairline: rgba(155, 44, 44, .3); /* The cloth's selvedge with no stripe across it, for strips of any height */ --plaid-strip: repeating-linear-gradient(90deg, transparent 0 13px, rgba(231, 174, 62, .95) 13px 15px, transparent 15px 24px), repeating-linear-gradient(90deg, rgba(40, 60, 34, .55) 0 7px, transparent 7px 24px), #a3322b; --plate: radial-gradient(closest-side, #fbf6ec 0 66%, rgba(62, 95, 140, .55) 67% 70%, #f4ecdc 71% 86%, #d9c9ad 90%, transparent 100%); --candle-glow: radial-gradient(closest-side, rgba(246, 196, 112, .45), rgba(246, 196, 112, .12) 60%, transparent); } html.dark { --hv-c1: #e47a70; --hv-c2: #f0bf5a; --hv-c3: #a7c283; --hv-c4: #f0905a; --hv-c5: #93b3db; --hv-kraft: #c9a26b; --hv-kraft-ink: #2a1606; --hv-art-shadow: rgba(0, 0, 0, .4); --swag: url("data:image/svg+xml;utf8,") repeat-x left top / 132px 36px; --stitch: repeating-linear-gradient(90deg, rgba(238, 172, 76, .45) 0 7px, transparent 7px 12px); --card-stock: linear-gradient(180deg, rgba(0, 0, 0, .28) 0 6px, rgba(255, 236, 210, .08) 6px 7px, transparent 7px), #2c2018; --card-hairline: rgba(238, 172, 76, .3); --plate: radial-gradient(closest-side, #ede3d0 0 66%, rgba(93, 127, 174, .6) 67% 70%, #e2d6bf 71% 86%, #b8a88c 90%, transparent 100%); --candle-glow: radial-gradient(closest-side, rgba(238, 172, 76, .35), rgba(238, 172, 76, .1) 60%, transparent); } /* ── Game palette ── The earn-games arena hands these to each HTML5 board, so 2048 tiles, hex cells and word-grid letters come out in the table's colours on linen by day and on the candlelit table by night. Tiles rise from oat through mustard, pumpkin and cranberry to sage and walnut. */ :root { --game-bg: #f8f1e4; --game-surface: #ecdcc0; --game-surface-2: #fffaf0; --game-ink: #2b1d14; --game-muted: #86705d; --game-accent: #9b2c2c; --game-accent-ink:#ffffff; --game-good: #4e6638; --game-bad: #b3261e; --game-tile-1: #f3e2bf; --game-tile-2: #e8c467; --game-tile-3: #d79a2b; --game-tile-4: #c8622a; --game-tile-5: #a3322b; --game-tile-6: #6e2021; --game-tile-7: #4e6638; --game-tile-8: #3a2617; --game-radius: 10px; --game-font: 'Young Serif', Georgia, serif; --game-font-css: "/assets/themes/harvest-table/assets/fonts/fonts.css"; /* Arena chrome (assets/css/game-arena.css): linen, not a dark screen */ --game-arena-screen: #f8f1e4; --game-arena-coins: #b9801c; --game-arena-win: #4e6638; --game-arena-danger: #b3261e; --game-pattern: url("data:image/svg+xml;utf8,"); } html.dark { --game-bg: #1c140f; --game-surface: #271c15; --game-surface-2: #33251b; --game-ink: #f6ead8; --game-muted: #ae9880; --game-accent: #eeac4c; --game-accent-ink:#2a1606; --game-good: #a7c283; --game-bad: #e47a70; --game-tile-1: #4a3520; --game-tile-2: #8a6a2e; --game-tile-3: #eeac4c; --game-tile-4: #f0905a; --game-tile-5: #e47a70; --game-tile-6: #c1504f; --game-tile-7: #a7c283; --game-tile-8: #fff4e0; --game-arena-screen: #1c140f; --game-arena-coins: #f0bf5a; --game-arena-win: #a7c283; --game-arena-danger: #e47a70; --game-pattern: url("data:image/svg+xml;utf8,"); } /* ── 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); } /* Young Serif comes in one heavy weight; nothing is synthesised over it */ html .font-display, h1.display, h2.display, h3.display { font-family: var(--font-display); font-weight: 400; font-synthesis: none; letter-spacing: 0; } .display-italic { font-style: normal; } /* Shared markup sets small notes in an italic display face; Young Serif has no italic, so those read in the text face instead */ html .font-display.italic, html .italic.font-serif { font-family: var(--font-ui); font-style: normal; } .hv-hand { font-family: var(--font-hand); font-weight: 700; } ::selection { background: var(--theme-200); color: #2b1d14; } .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: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--theme-600); } .ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; } /* Section eyebrow: a small maple leaf in front of the label */ html .section-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-ui); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--theme-600); margin-bottom: 0.7rem; } html .section-eyebrow::before { content: ''; flex-shrink: 0; width: 15px; height: 15px; background: var(--mustard); -webkit-mask: var(--leaf-mask) center / contain no-repeat; mask: var(--leaf-mask) center / contain no-repeat; transform: rotate(-14deg); } .btn-view-all { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-ui); font-size: 0.92rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; color: var(--ink); padding: .3rem .1rem 2px; border-bottom: 2px solid var(--theme-500); 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: var(--linen); } .ed-folio { font-family: var(--font-display); font-weight: 400; color: var(--theme-600); } /* ── 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(--berry-soft); } .ed-search { background: transparent; border: none; } .hdr-strip, .hdr-strip .ed-status { color: rgba(251, 243, 230, 0.88); } .hdr-strip a:hover, .hdr-strip button:hover { color: #f2c46a; } /* The plaid selvedge under the main header bar and wherever a section needs a border */ .hv-band { height: 10px; background: var(--plaid-band); } /* The season chip in the status strip: a maple leaf and the day */ .hv-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .06em; color: #f2c46a; } .hv-strip-chip svg { width: 14px; height: 14px; flex-shrink: 0; color: #e0703a; transform: rotate(-12deg); } /* The desktop strip shares its line with the menu; the second half of the chip joins it only where there is room for both. */ @media (max-width: 639px), (min-width: 1024px) and (max-width: 1439px) { .hv-strip-chip__extra { display: none; } } .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: 800; 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.92rem; font-weight: 600; 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.95rem; font-weight: 700; color: var(--ink); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid var(--theme-500); 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.55rem; white-space: nowrap; font-family: var(--font-ui); font-size: 1rem; font-weight: 800; color: var(--btn-ink); background: var(--btn-bg); border: 0; border-radius: 999px; 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 { background: #eeac4c; color: #2a1606; box-shadow: 0 2px 0 #a8702a; } .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.98rem; font-weight: 700; color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--rule); border-radius: 999px; 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: soft corners, a fine edge, 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(--planks); color: #fbf3e6; border: 1px solid rgba(215, 154, 43, .3); border-radius: var(--radius); overflow: hidden; } .ed-plan-featured::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--plaid-band); pointer-events: none; } .ed-plan-hairline { border-color: var(--rule); } .ed-plan-featured .ed-plan-hairline { border-color: rgba(251, 243, 230, .2); } /* ── Status text ── */ .ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); } .ed-topnav-link { color: rgba(251, 243, 230, 0.88); text-decoration: none; transition: color 0.16s ease; } .ed-topnav-link:hover, .ed-topnav-link.active { color: #f2c46a; } /* ── Drawer ── */ .drawer-section-label { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-size: 11px; font-weight: 800; 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: 600; 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; } /* header.css makes these full width; with the margins here they would stick out of the closed drawer */ html .drawer-login, html .drawer-logout { display: flex; width: auto; } .drawer-logout { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 999px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; color: var(--theme-600); border: 1.5px solid var(--theme-600); text-decoration: none; } .drawer-logout:hover { background: var(--gold-soft); } .mobile-glass-header { background: rgba(248, 241, 228, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--rule); } html.dark .mobile-glass-header { background: rgba(28, 20, 15, 0.94); } .ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--theme-500); } [x-cloak] { display: none !important; } .ed-dropdown { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; 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.97rem; font-weight: 600; 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: 800; 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 round of wood: end grain with a ring of bark, the theme's serving stand, countdown token and winners board ── */ .hv-round { position: relative; border-radius: 50%; background: var(--wood-rings); box-shadow: inset 0 0 0 3px #6e4423, inset 0 0 0 5px #9b6a3a, inset 0 0 0 6px rgba(255, 230, 190, .35), 0 6px 12px -6px rgba(43, 29, 20, .5); } /* ── A place card: folded card stock, the fold a shade across the top, the guest's name written in by hand ── */ .hv-place { position: relative; background: linear-gradient(180deg, rgba(43, 29, 20, .1) 0 5px, rgba(255, 255, 255, .7) 5px 6px, transparent 6px), #fffaf0; color: #2b1d14; border-radius: 3px; box-shadow: 0 1px 0 rgba(43, 29, 20, .1), 0 10px 14px -8px rgba(43, 29, 20, .45); } .hv-place::after { content: ''; position: absolute; inset: 9px 7px 7px; border: 1px solid rgba(155, 44, 44, .28); border-radius: 2px; pointer-events: none; } /* ── Dark/light toggle: a gust of leaves ── assets/js/harvest-table.js registers the transition: a few leaves skitter ahead of the wind, then a deep drift of maple and oak leaves blows across the screen and settles over it; the mode flips under the pile, and the next gust carries it off the far side. */ .px-fx--hv-gust { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; } .px-fx--hv-gust .hv-gust__pile { position: absolute; top: -10vh; bottom: -10vh; left: 0; width: 150vw; transform: translateX(-160vw); will-change: transform; background: var(--fx-maple) 0 0 / 132px 132px, var(--fx-oak) 47px 61px / 97px 97px, var(--fx-maple2) 83px 19px / 171px 171px, var(--fx-oak2) 21px 103px / 113px 113px, var(--fx-maple3) 66px 77px / 149px 149px, var(--fx-base); } /* Ragged leading and trailing edges: a column of leaves jutting out each side, so the pile never shows a straight line */ .px-fx--hv-gust .hv-gust__pile::before, .px-fx--hv-gust .hv-gust__pile::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; background: var(--fx-maple2) 0 0 / 96px 96px, var(--fx-oak) 30px 50px / 84px 84px; } .px-fx--hv-gust .hv-gust__pile::before { left: -80px; } .px-fx--hv-gust .hv-gust__pile::after { right: -80px; } .px-fx--hv-gust .hv-gust__leaf { position: absolute; left: 0; width: var(--s, 40px); height: var(--s, 40px); color: var(--c, #d79a2b); transform: translate(-30vw, 0); } .px-fx--hv-gust .hv-gust__leaf svg { display: block; width: 100%; height: 100%; } .px-fx--hv-gust.is-in .hv-gust__pile { transition: transform .62s cubic-bezier(.3, .1, .2, 1); transform: translateX(-25vw); } .px-fx--hv-gust.is-out .hv-gust__pile { transition: transform .6s cubic-bezier(.6, 0, .8, .4); transform: translateX(115vw); } .px-fx--hv-gust.is-in .hv-gust__leaf { animation: hv-fly var(--d, .9s) cubic-bezier(.4, .1, .3, 1) var(--delay, 0s) both; } @keyframes hv-fly { 0% { transform: translate(-30vw, 0) rotate(0deg); } 50% { transform: translate(55vw, var(--lift, -40px)) rotate(var(--spin, 360deg)); } 100% { transform: translate(135vw, calc(var(--lift, -40px) * -.5)) rotate(calc(var(--spin, 360deg) * 2)); } } /* In right-to-left pages the wind blows the other way */ [dir="rtl"] .px-fx--hv-gust { transform: scaleX(-1); } /* ── Footer: walnut boards, the tablecloth hanging over its top edge with a stitched hem and a fringe, leaves fallen on it ── */ .hv-footer { --paper: #2c1c11; --paper-2: #382417; --paper-3: #432c1c; --ink: #fbf3e6; --ink-2: #eddcc6; --ink-soft: #c6ad93; --rule: rgba(251, 243, 230, 0.15); --rule-soft: rgba(251, 243, 230, 0.08); --theme-500: #f2c46a; --theme-600: #f2c46a; --theme-700: #f8dca0; --theme-500-rgb: 242, 196, 106; position: relative; } html body #desktopFooter.hv-footer { background: var(--planks) !important; } .hv-cloth { position: relative; z-index: 2; height: 54px; margin-bottom: -18px; background: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 30%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0, transparent 70px, rgba(255, 255, 255, .06) 120px, transparent 170px, rgba(0, 0, 0, .1) 240px), var(--plaid); box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .45); } /* The hem: a turned-under edge with a running stitch, then the fringe */ .hv-cloth::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: repeating-linear-gradient(90deg, rgba(255, 244, 222, .85) 0 7px, transparent 7px 12px) left 50% / 100% 1.5px no-repeat, linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .05)); } .hv-cloth::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 9px; background: repeating-linear-gradient(90deg, #8a2a25 0 2px, transparent 2px 4px, #c99a45 4px 5px, transparent 5px 7px); -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); } .hv-cloth__leaf { position: absolute; z-index: 1; top: var(--t, 8px); width: var(--s, 30px); height: var(--s, 30px); color: var(--c, #d79a2b); transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); } .hv-cloth__leaf svg { display: block; width: 100%; height: 100%; } .hv-footer a:hover { color: #f2c46a; } 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: .95rem; font-weight: 700; 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: a menu card set on the boards, a sprig of wheat at its corner */ html body .hv-footer .ed-newsletter { position: relative; background: radial-gradient(260px 160px at 100% 0%, rgba(215, 154, 43, .2), transparent 70%), #fffaf0; color: #2b1d14; border: 0; border-radius: 4px; box-shadow: inset 0 0 0 8px #fffaf0, inset 0 0 0 9px rgba(155, 44, 44, .35), inset 0 0 0 12px #fffaf0, inset 0 0 0 13px rgba(155, 44, 44, .2), 0 22px 36px -18px rgba(0, 0, 0, .7); overflow: visible; } html body .hv-footer .ed-newsletter::before { content: ''; position: absolute; inset-inline-end: 18px; top: -26px; width: 26px; height: 62px; background: var(--ear-img) center / contain no-repeat; transform: rotate(18deg); pointer-events: none; } html body .hv-footer .ed-newsletter::after { display: none; } html body .hv-footer .ed-newsletter, html body .hv-footer .ed-newsletter * { --ink: #2b1d14; --ink-2: #54402f; } html body .hv-footer .ed-newsletter h4 { font-family: var(--font-display); font-weight: 400; } html body .hv-footer .ed-newsletter-input { background: #ffffff !important; color: #2b1d14 !important; border: 1px solid rgba(43, 29, 20, .2) !important; border-radius: 999px; } html body .hv-footer .ed-newsletter-input::placeholder { color: #86705d; } html body .hv-footer .ed-newsletter-input:focus { border-color: #9b2c2c !important; box-shadow: 0 0 0 3px rgba(155, 44, 44, .15); } html body .hv-footer .ed-newsletter-btn { background: #9b2c2c; color: #ffffff; border: 0; border-radius: 999px; font-family: var(--font-ui); font-weight: 800; } html body .hv-footer .ed-newsletter-age { color: #54402f; } /* header.css greys every footer heading and darkens every field after dark; the menu card keeps its own ink and its white field */ html.dark #desktopFooter .ed-newsletter h4 { color: #2b1d14 !important; } html.dark #desktopFooter .ed-newsletter p:not(#newsletter-msg) { color: #54402f !important; } html.dark body .hv-footer input.ed-newsletter-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark) { background-color: #ffffff !important; color: #2b1d14 !important; border-color: rgba(43, 29, 20, .2) !important; } [dir="rtl"] .ed-newsletter-btn svg { transform: scaleX(-1); } /* Logo card: the light-mode logo on a cream place card wherever it sits on walnut (footer, app splash) */ .hv-plaque { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.6rem .85rem; } /* 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(28, 20, 15, 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(39, 28, 21, 0.96) !important; } html.dark .premium-side-menu { background: var(--paper) !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; } /* header.css also paints rounded and shadowed white panels near-black with a two-class selector; the same shape here, one notch stronger */ html.dark .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl) { background-color: var(--paper-2) !important; } html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-800:hover { background-color: var(--paper-3) !important; } /* dynamic-theme.css paints its own dark greys from these */ html.dark { --bg-primary: #1c140f; --bg-secondary: #271c15; --bg-tertiary: #33251b; --border-primary: rgba(246, 234, 216, .13); --border-secondary: rgba(246, 234, 216, .25); } html.dark [class*="dark:bg-white/[0.0"], html.dark [class*="dark:bg-white/5"] { background-color: var(--paper-2) !important; } html.dark .bg-slate-50, html.dark .bg-slate-100, html.dark .bg-white\/80, html.dark .bg-white\/90, html.dark .bg-white\/95 { background-color: var(--paper-2) !important; } html.dark .bg-gray-200, html.dark .bg-slate-200, html.dark #logoutModal .bg-gray-100 { background-color: var(--paper-3) !important; } html.dark .from-gray-200 { --tw-gradient-from: var(--paper-3) !important; } html.dark .to-gray-200 { --tw-gradient-to: var(--paper-3) !important; } html.dark option { background-color: #2c2018; color: #f6ead8; } html.dark :is(.auth-btn-login, .desktop-auth-btn-login) { background: var(--paper-2) !important; } html.dark .gradient-bg { background: linear-gradient(-45deg, #33251b, #1c140f, #3a2617, #140d08) !important; } html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; } /* The phone language sheet: header.css paints it near-black after dark; here it is the candlelit table, the chosen language lit amber. */ html.dark #langSheet { background: var(--paper) !important; border-top: 1px solid var(--rule); } html.dark #langSheet .lang-sheet-header { border-bottom-color: var(--rule); } html.dark #langSheet .lang-row span { color: var(--ink) !important; } html.dark #langSheet .lang-row:hover { background: var(--paper-2) !important; } html #langSheet .lang-row[style*="background"] { background: var(--berry-soft) !important; box-shadow: inset 0 0 0 1px rgba(var(--theme-500-rgb), .3); } html.dark #langSheet .lang-drag-handle { background: rgba(246, 234, 216, .2); } /* header.css fills every dark-mode field with a navy #0d1117; here fields take the theme's own walnut. 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: #140d08 !important; border-color: rgba(246, 234, 216, .2) !important; color: #f6ead8 !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 walnut. */ 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: #140d08; --paper: #f6ead8; border-color: rgba(215, 154, 43, .3); } /* Ink-filled hero bands in shared markup (the games list) are walnut boards here, a fold of the plaid cloth along their foot */ html body section.ed-grain[style*="background: var(--ink)"] { background: radial-gradient(520px 300px at 50% 0%, rgba(238, 172, 76, .2), transparent 70%), var(--planks) !important; } html body section.ed-grain[style*="background: var(--ink)"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 240, 215, .25), transparent 30%, rgba(0, 0, 0, .2)), var(--plaid); } html.dark body section.ed-grain[style*="background: var(--ink)"] { --paper: #fbf3e6; } html header.safe-top-header[style] { background: rgba(248, 241, 228, .95) !important; } html.dark header.safe-top-header[style] { background: rgba(28, 20, 15, .95) !important; } /* ── Login / register / forgot-password brand panel: walnut boards, the plaid along their foot ── */ :root, html.dark { --brand-gradient: var(--planks); --brand-glow-1: rgba(238, 172, 76, 0.26); --brand-glow-2: rgba(168, 52, 52, 0.22); } .brand-panel { background: var(--planks) !important; } /* assets/css/pages/login.css loads after the theme and draws ::after as a round glow; here it is the cloth's selvedge. */ html .brand-panel::after { content: ''; position: absolute; left: 0 !important; right: 0 !important; bottom: 22px !important; top: auto !important; width: 100% !important; height: 12px !important; border-radius: 0 !important; transform: none !important; opacity: 1 !important; background: var(--plaid-band) !important; } .brand-panel .text-purple-200, .brand-panel [class*="text-purple-200"] { color: rgba(251, 243, 230, 0.84) !important; } .brand-panel h2 { font-family: var(--font-display); font-weight: 400 !important; } /* ── Wallet balance card: a walnut board by candlelight, a fold of the plaid cloth along its foot and a leaf fallen on it ── */ html body .wallet-hero { position: relative; padding-bottom: calc(1.5rem + 34px) !important; background: radial-gradient(320px 200px at 88% 0%, rgba(238, 172, 76, .26), transparent 70%), var(--planks); border: 1px solid rgba(215, 154, 43, .22); border-radius: 16px; box-shadow: var(--shadow-md); color: #fbf3e6; overflow: hidden; } html body .wallet-hero::before { left: 0; right: 0; top: auto; bottom: 0; height: 22px; border-radius: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 40%), var(--plaid); } html body .wallet-hero::after { content: ''; position: absolute; right: 9%; bottom: 8px; width: 40px; height: 40px; background: var(--leaf-maple) center / contain no-repeat; transform: rotate(24deg); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); pointer-events: none; } html[dir="rtl"] body .wallet-hero::after { right: auto; left: 9%; transform: rotate(-24deg) scaleX(-1); } html body .wallet-balance-num { font-family: var(--font-display); font-variation-settings: normal; font-weight: 400; letter-spacing: 0; overflow-wrap: normal; color: #ffffff; } html body .wallet-hero-btn-primary { background: #eeac4c; color: #2a1606; border: 0; font-family: var(--font-ui); font-weight: 800; border-radius: 999px; } html body .wallet-hero-btn-primary:hover { background: #f6bd68; color: #2a1606; } html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #fbf3e6; border-color: rgba(251, 243, 230, .45); border-radius: 999px; } /* ── Mystery box card (styled by assets/css/pages/home.css): a fold of the plaid down its side ── */ 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; bottom: 0; left: 16%; right: auto; width: 12px; height: auto; border-radius: 0; background: var(--plaid-band-v); opacity: 1; z-index: 0; } [dir="rtl"] .ed-card-mystery::before { left: auto; right: 16%; } html .ed-card-mystery img { position: relative; z-index: 1; } /* ── Product page buy box: the plaid along its top ── */ html body .pd-buybox { position: relative; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; padding-top: 1.9rem; } html body .pd-buybox::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--plaid-band); } html body .pd-buybox .font-display.text-4xl { font-weight: 400; color: var(--theme-600); } .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(--paper); } /* Shared markup's stock purple, indigo and blue accents (coupon buttons, tier chips, focus rings) take the theme's accent. */ 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: 999px; } 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(var(--theme-500-rgb), .3); } html.dark .border-violet-200 { border-color: rgba(var(--theme-500-rgb), .35) !important; } html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(var(--theme-500-rgb), .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, 253, 247, .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 plaid ── 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: 14px !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: 16px !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: 10px; background: var(--plaid-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-display); font-weight: 400; font-size: 1.7rem; color: var(--theme-600); } /* 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 .hv-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; } } /* Tab bars on the Earn hub and the winners page sit on the theme's own paper, not a black band, after dark; the chosen tab is a main button. */ html.dark #pillNavBar, html.dark #pillNavBar > div { background-color: var(--paper-2) !important; border-color: var(--rule) !important; } html .wn-tab-bar { background: rgba(248, 241, 228, .95); } html.dark .wn-tab-bar { background: rgba(39, 28, 21, .96); } html .wn-tab { font-family: var(--font-ui); font-size: 14px; font-weight: 700; } html .wn-tab-active, html.dark .wn-tab-active, html.dark button.wn-tab-active { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); } /* ── My Winnings: each prize served on a wooden board set on a folded plaid napkin, a different wood and cloth for each card ── */ .hv-win { --napkin: var(--plaid); --board: linear-gradient(90deg, #c99258, #d6a368 30%, #c48c50 60%, #d1a067); 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; } .hv-win:nth-child(4n+2) { --napkin: repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 8px, transparent 8px 16px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 8px, transparent 8px 16px), #4e6638; --board: linear-gradient(90deg, #6e4628, #7d5230 35%, #694225 65%, #7a4f2c); } .hv-win:nth-child(4n+3) { --napkin: repeating-linear-gradient(0deg, rgba(155, 44, 44, .32) 0 2px, transparent 2px 9px), repeating-linear-gradient(90deg, rgba(155, 44, 44, .32) 0 2px, transparent 2px 9px), #ecdcc0; --board: linear-gradient(90deg, #a5643c, #b67248 35%, #9e5e37 65%, #b06e44); } .hv-win:nth-child(4n+4) { --napkin: repeating-linear-gradient(0deg, rgba(43, 29, 20, .3) 0 9px, transparent 9px 18px), repeating-linear-gradient(90deg, rgba(43, 29, 20, .3) 0 9px, transparent 9px 18px), #d79a2b; --board: linear-gradient(90deg, #dcc199, #e8d2ad 35%, #d6b98e 65%, #e2c9a2); } .hv-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .hv-win__napkin { position: relative; background: var(--napkin); padding: 16px 16px 14px; } .hv-win__napkin::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 40%, rgba(0, 0, 0, .14)); } /* The board: long grain, rounded ends, a handle with a hole for its leather loop */ .hv-win__board { position: relative; z-index: 1; margin-inline-end: 30px; background: repeating-linear-gradient(178deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 7px), var(--board); border-radius: 14px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 8px 12px -6px rgba(0, 0, 0, .45); } .hv-win__board::after { content: ''; position: absolute; top: 50%; inset-inline-start: 100%; width: 34px; height: 30px; margin-top: -15px; background: radial-gradient(circle at 60% 50%, var(--paper-2) 0 4px, transparent 4.5px), var(--board); border-radius: 0 12px 12px 0; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); } [dir="rtl"] .hv-win__board::after { border-radius: 12px 0 0 12px; background: radial-gradient(circle at 40% 50%, var(--paper-2) 0 4px, transparent 4.5px), var(--board); } .hv-win__board img { position: relative; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .3)); } .hv-win__napkin > .absolute { z-index: 4; } .hv-win__tag { display: inline-flex; align-items: center; padding: .22rem .65rem; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; } .hv-win__tag--open { color: var(--btn-ink); background: var(--btn-bg); border-color: transparent; } .hv-win__tag--done { color: #ffffff; background: #4e6638; border-color: transparent; } html.dark .hv-win__tag--done { color: #140d08; background: #9fbd83; } .hv-win__name { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; } .hv-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); } .hv-win__price { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; } .hv-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .92rem; } .hv-win__cart, .hv-win__btn-off { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; font-weight: 700; } .hv-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); } .hv-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); } .hv-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; } .hv-win__claimed { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .5rem; font-size: .92rem; font-weight: 700; color: var(--theme-600); background: var(--berry-soft); border-radius: 999px; } /* 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: #4e6638; --px-warn: #b45309; --px-crit: #a73434; --px-info: #3e77bb; } html.dark:root { --px-good: #aac487; --px-warn: #fbbf23; --px-crit: #eeaba5; --px-info: #9fbcdf; } /* Changing language, the scene (harvest-table.js): the basket with the old name on its tag is lifted off the table and a fuller one is set down with the new flag and name; after the reload it settles and a few leaves drift down round it. The table is the same on both pages, so the reload never shows. The table, baskets and tags keep their own colours in both modes. */ .hv-lang-stage { background: color-mix(in srgb, #1e130c 52%, transparent); } .hv-lang-table { position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 20px 16px 26px; overflow: hidden; border-radius: var(--radius, 14px); font-family: var(--font-ui, system-ui, sans-serif); background: repeating-linear-gradient(180deg, transparent 0 52px, rgba(58, 38, 23, .38) 52px 54px), repeating-linear-gradient(90deg, rgba(255, 240, 210, .05) 0 3px, transparent 3px 11px, rgba(58, 38, 23, .06) 11px 13px, transparent 13px 29px), linear-gradient(180deg, #c99059, var(--oak, #b07a43) 60%, #9c6a36); box-shadow: inset 0 -6px 0 var(--oak-2, #8a5a2e), 0 34px 70px -28px rgba(0, 0, 0, .65); } .hv-lang-spot { position: relative; z-index: 2; display: grid; } .hv-lang-basket { grid-area: 1 / 1; align-self: end; display: grid; justify-items: center; transform-origin: 50% 100%; } .hv-lang-handle { display: block; width: min(180px, 52%); height: 64px; box-sizing: border-box; border: 7px solid #8a5a2e; border-bottom: 0; border-radius: 100px 100px 0 0; box-shadow: inset 0 2px 0 rgba(255, 230, 190, .3); } .hv-lang-fruit { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: -40px; } .hv-lang-fruit i { width: 36px; height: 34px; margin: 0 -4px; border-radius: 48% 52% 46% 54%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 40%), #9b2c2c; box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .18); } .hv-lang-fruit i:nth-child(2) { background-color: #d79a2b; transform: translateY(-6px); } .hv-lang-fruit i:nth-child(3) { background-color: #4e6638; width: 30px; border-radius: 0 100% 0 100%; transform: translateY(-12px) rotate(-20deg); } .hv-lang-fruit i:nth-child(4) { background-color: #c8622a; width: 42px; transform: translateY(-4px); } .hv-lang-fruit i:nth-child(5) { background-color: #6a2a4a; transform: translateY(-9px); } .hv-lang-fruit i:nth-child(6) { background-color: #4e6638; width: 28px; border-radius: 100% 0 100% 0; transform: translateY(-10px) rotate(24deg); } .hv-lang-body { position: relative; z-index: 2; display: block; width: min(250px, 76%); height: 76px; margin-top: -14px; border-radius: 6px 6px 44px 44px / 6px 6px 28px 28px; background: repeating-linear-gradient(180deg, rgba(58, 38, 23, .28) 0 2px, transparent 2px 13px), repeating-linear-gradient(90deg, #c08a4f 0 10px, #9c6a36 10px 12px, #b07a43 12px 22px, #8a5a2e 22px 24px); box-shadow: inset 0 8px 0 #8a5a2e, inset 0 -6px 10px rgba(58, 38, 23, .4), 0 10px 12px -6px rgba(0, 0, 0, .5); } .hv-lang-tag { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 94%; box-sizing: border-box; margin-top: -46px; padding: 8px 16px; border-radius: 6px; text-align: center; background: #f6e8cb; color: #2b1d14; transform-origin: 50% 0; transform: rotate(-2deg); box-shadow: inset 0 0 0 1px rgba(43, 29, 20, .18), 0 8px 12px -6px rgba(0, 0, 0, .55); } .hv-lang-tag::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 16px; margin-left: -1px; background: #4e6638; } .hv-lang-tag img { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .hv-lang-tag-name { min-width: 0; font: 400 clamp(26px, 8vw, 40px)/1.12 var(--font-display, Georgia, serif); overflow-wrap: anywhere; } .hv-lang-basket-old .hv-lang-tag-name { font-size: 20px; } .hv-lang-basket-old { opacity: 0; transform: translateY(-140px) rotate(-6deg); } .hv-lang-leaves { position: absolute; left: 0; right: 0; bottom: 18px; height: 0; z-index: 1; } .hv-lang-leaves i { --r: 30deg; --dx: 30px; position: absolute; bottom: 0; left: 12%; width: 20px; height: 11px; border-radius: 0 100% 0 100%; background: #d79a2b; opacity: 0; transform: translate(var(--dx), -170px); } .hv-lang-leaves i:nth-child(2) { left: 24%; bottom: 6px; background: #9b2c2c; --r: -50deg; --dx: -24px; } .hv-lang-leaves i:nth-child(3) { left: 38%; bottom: -4px; background: #4e6638; --r: 120deg; --dx: 40px; } .hv-lang-leaves i:nth-child(4) { left: 62%; bottom: 2px; background: #b9801c; --r: -140deg; --dx: -36px; } .hv-lang-leaves i:nth-child(5) { left: 76%; bottom: -6px; background: #9b2c2c; --r: 70deg; --dx: 22px; } .hv-lang-leaves i:nth-child(6) { left: 86%; bottom: 8px; background: #d79a2b; --r: -20deg; --dx: -30px; } /* Out: the old basket lifted away, the fuller one set down. */ .px-lang-stage-out .hv-lang-table { animation: hv-lang-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; } .px-lang-stage-out .hv-lang-basket-old { animation: hv-lang-lift .5s ease-in .3s both; } .px-lang-stage-out .hv-lang-basket-new { animation: hv-lang-set .42s cubic-bezier(.3, .7, .4, 1) .54s both; } /* In: it settles, the tag sways, leaves drift down. */ .px-lang-stage-in .hv-lang-basket-new { animation: hv-lang-settle .45s ease-out both; } .px-lang-stage-in .hv-lang-basket-new .hv-lang-tag { animation: hv-lang-sway .7s ease-in-out .05s both; } .px-lang-stage-in .hv-lang-leaves i { animation: hv-lang-leaf .7s ease-out .1s both; } .px-lang-stage-in .hv-lang-leaves i:nth-child(2n) { animation-delay: .2s; } .px-lang-stage-in .hv-lang-leaves i:nth-child(3n) { animation-delay: .28s; } .px-lang-stage-in .hv-lang-table { animation: hv-lang-away .28s ease-in 1s both; } @keyframes hv-lang-rise { from { transform: translateY(36px); opacity: 0; } } @keyframes hv-lang-away { to { transform: translateY(26px); opacity: 0; } } @keyframes hv-lang-lift { from { opacity: 1; transform: none; } 40% { opacity: 1; transform: translateY(-16px) rotate(-1deg); } } @keyframes hv-lang-set { from { opacity: 0; transform: translateY(-130px) rotate(4deg); } 40% { opacity: 1; } } @keyframes hv-lang-settle { 30% { transform: scale(1.03, .95); } 65% { transform: scale(.99, 1.02); } } @keyframes hv-lang-sway { 25% { transform: rotate(3deg); } 55% { transform: rotate(-3.5deg); } 80% { transform: rotate(-1deg); } } @keyframes hv-lang-leaf { 0% { opacity: 0; transform: translate(var(--dx), -170px) rotate(0deg); } 20% { opacity: 1; } 55% { transform: translate(calc(var(--dx) * -.6), -60px) rotate(calc(var(--r) * -1)); } 100% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); } } @media (max-width: 460px) { .hv-lang-table { padding: 16px 12px 22px; } .hv-lang-fruit i { width: 30px; height: 28px; } .hv-lang-fruit i:nth-child(n+5) { display: none; } .hv-lang-leaves i:nth-child(3), .hv-lang-leaves i:nth-child(4) { 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: #7e6957; } /* rev 868fe5109c9f2a2b */