/* ============================================================ SPRING SALE THEME — a potting bench in a greenhouse, first warm morning of spring. Same class surface as editorial/theme.css, so shared header, footer, drawer and component classes stay styled. Built from the potting shed: the white frame and dewy panes of a small greenhouse, terracotta pots, seed packets printed in bright inks (tomato, carrot, sunflower, violet), wooden plant labels, garden twine, a galvanised watering can and trays of seedlings. Fresh leaf green on greenhouse cream by day; after dark the greenhouse at dusk, string lights along the frame and the plants gone to silhouettes. The theme sets the --theme-* accent ramp itself (leaf green by day, a lit sprout green by night), so the admin's accent colour setting does not apply while it is active. ============================================================ */ :root { --font-display: 'Corben', 'Work Sans', Georgia, 'PingFang SC', 'Microsoft YaHei', serif; --font-ui: 'Work Sans', system-ui, 'Segoe UI', 'Noto Sans', sans-serif; --paper: #f6f4ea; --paper-2: #ffffff; --paper-3: #ebe8da; --ink: #22301f; --ink-2: #3f4a37; --ink-soft: #69725f; --rule: rgba(34, 48, 31, 0.14); --rule-soft: rgba(34, 48, 31, 0.07); --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(34, 48, 31, .07), 0 6px 16px -8px rgba(34, 48, 31, .24); --shadow-md: 0 2px 4px rgba(34, 48, 31, .07), 0 18px 34px -16px rgba(34, 48, 31, .38); /* Leaf green */ --theme-50: #eef7e9; --theme-100: #dcefd3; --theme-200: #b4d9a6; --theme-300: #79b86b; --theme-400: #43973f; --theme-500: #2f7d32; --theme-600: #276b2a; --theme-700: #205a23; --theme-800: #1a481d; --theme-900: #143716; --theme-500-rgb: 47, 125, 50; --theme-600-rgb: 39, 107, 42; /* Seed-packet inks, terracotta, soil and the shed's wood and zinc */ --spr-tomato: #e0412e; --spr-carrot: #ec7a1f; --spr-sun: #f2b821; --spr-violet: #7a4fb5; --spr-hyacinth: #5a6fd0; --spr-leaf-c: #4c9a3c; --spr-terra: #c8643b; --spr-terra-2: #a8552f; --spr-soil: #4a3222; --spr-wood: #c9a46a; --spr-zinc: #a9b3b5; --spr-frame: #ffffff; --spr-window: #ffcf6b; /* The greenhouse at dusk: footer, winners, splash and login in both modes */ --dusk: #14231f; --dusk-2: #1b2e29; --dusk-3: #253c35; --on-dusk: #f2f0e4; --on-dusk-soft: rgba(242, 240, 228, .76); /* Names other themes' shared markup reaches for */ --gold: #a8701a; --gold-2: #f2b821; --gold-soft: rgba(47, 125, 50, 0.08); --gold-ink: #22301f; --felt: #14231f; --felt-2: #1b2e29; --on-felt: #f2f0e4; --on-felt-soft: rgba(242, 240, 228, 0.78); --peacock: #2f7d32; --peacock-soft: rgba(47, 125, 50, 0.12); --red: #c93a28; --red-soft: rgba(224, 65, 46, 0.09); --rose: #c8643b; --rose-soft: rgba(47, 125, 50, 0.08); --notify-accent: var(--theme-500); --nav-accent: var(--theme-600); --hdr-strip-bg: #1c2e27; --hdr-strip-rule: transparent; --text-primary: var(--ink); /* Buttons: leaf green with white lettering by day, a lit sprout green after dark */ --btn-bg: #2f7d32; --btn-bg-hover: #358534; --btn-ink: #ffffff; --btn-shadow: 0 2px 0 #1b4d1e, 0 10px 20px -10px rgba(47, 125, 50, .7); --btn-shadow-hover: 0 3px 0 #1b4d1e, 0 14px 24px -10px rgba(47, 125, 50, .75); /* A seed tray: a strip of dark potting soil with seedlings coming up along it, tall and short. The theme's band wherever a section needs an edge. */ --spr-band: url("data:image/svg+xml;utf8,"); --spr-band-dusk: url("data:image/svg+xml;utf8,"); /* A shelf in the potting shed with pots standing along it: tulips, a seedling, daffodils; for the tops of night panels */ --spr-shelf: url("data:image/svg+xml;utf8,"); /* Seeds dropped on the bench and the odd sprout, very faint */ --spr-faint: url("data:image/svg+xml;utf8,"); /* String lights along the greenhouse frame: a sagging wire, warm bulbs and their glow on the glass */ --spr-lights: url("data:image/svg+xml;utf8,"); /* Dew on a night pane, for layers over the dark scenes */ --spr-panes: url("data:image/svg+xml;utf8,"); --dusk-bg: radial-gradient(620px 240px at 50% 118%, rgba(255, 200, 110, .2), transparent 70%), radial-gradient(420px 240px at 92% -60px, rgba(143, 209, 111, .12), transparent 70%), radial-gradient(380px 220px at 6% -40px, rgba(90, 111, 208, .14), transparent 70%), linear-gradient(180deg, #101c19 0%, #15261f 58%, #1f342d 100%); --page-bg: radial-gradient(1000px 420px at 92% -200px, rgba(242, 184, 33, 0.09), transparent 70%) no-repeat, radial-gradient(900px 380px at 0% -160px, rgba(76, 154, 60, 0.08), transparent 70%) no-repeat, var(--spr-faint) repeat, var(--paper); } html.dark { --paper: #0f1714; --paper-2: #16211d; --paper-3: #1f2d28; --ink: #eef0e4; --ink-2: #d5dacb; --ink-soft: #a5ae9c; --rule: rgba(238, 240, 228, 0.13); --rule-soft: rgba(238, 240, 228, 0.07); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .7); --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 36px -14px rgba(0, 0, 0, .85); /* A sprout green that glows a little under the string lights */ --theme-50: #18261c; --theme-100: #1d2f22; --theme-200: #2e5a2a; --theme-300: #b6e6a0; --theme-400: #a3da86; --theme-500: #8fd16f; --theme-600: #9bd67e; --theme-700: #b9e3a3; --theme-800: #d3eec4; --theme-900: #eef9e6; --theme-500-rgb: 143, 209, 111; --theme-600-rgb: 155, 214, 126; --gold: #ffcf6b; --gold-2: #ffdc8a; --gold-soft: rgba(143, 209, 111, 0.12); --felt: #0a1311; --felt-2: #16211d; --peacock: #8fd16f; --peacock-soft: rgba(143, 209, 111, 0.13); --red: #ff8a74; --red-soft: rgba(255, 138, 116, 0.13); --rose: #f09a70; --rose-soft: rgba(143, 209, 111, 0.12); --nav-accent: var(--theme-500); --hdr-strip-bg: #0a1311; --btn-bg: #8fd16f; --btn-bg-hover: #a5dc88; --btn-ink: #0e1a13; --btn-shadow: 0 2px 0 #4f8f3c, 0 10px 26px -10px rgba(143, 209, 111, .45); --btn-shadow-hover: 0 3px 0 #4f8f3c, 0 14px 30px -10px rgba(143, 209, 111, .6); --spr-band: var(--spr-band-dusk); --spr-faint: url("data:image/svg+xml;utf8,"); --page-bg: radial-gradient(900px 420px at 86% -160px, rgba(255, 200, 110, 0.08), transparent 70%) no-repeat, radial-gradient(900px 420px at 8% -140px, rgba(143, 209, 111, 0.07), transparent 70%) no-repeat, var(--spr-faint) repeat, var(--paper); } /* ── The potting shed's materials ── Every surface beyond the hero and footer is built from these, so a panel anywhere in the shop reads as the greenhouse at a glance: - the seed tray (--spr-band above) along the top of sheets, and the coloured bar printed across a seed packet (--spr-band-thin) for table heads, tabs and sticky bars; - greenhouse glass (--spr-glass): a pale pane in its white glazing bars with dew beaded on it, as the stage behind every product picture; after dark the same pane holding the string lights; - a terracotta pot (--spr-pot-mask) for icon medallions and the current page, filled in the colour the markup asked for (skin/system.css paints them); - the greenhouse frame (--spr-rim): white bar and a green line round a chosen option, a price or a frame; - a plant label's tie hole (--spr-eyelet) at the leading end of rows, toasts and tickets; - garden twine (--spr-twine) as the rule under every title; - a seedling (--spr-sprout-img) for full stops, list markers and the signal; a fresh leaf (--spr-leaf-img) tucked at the corners of frames; the watering can (--spr-can-img) and dew (--spr-panes) on night panels. */ :root { --spr-c1: #4c9a3c; --spr-c2: #e0412e; --spr-c3: #f2b821; --spr-c4: #7a4fb5; --spr-c5: #ec7a1f; --spr-green-ink: #1f5a22; --spr-tomato-ink: #a8321f; --spr-sun-ink: #87590a; --spr-violet-ink: #5a3590; --spr-leaf-ink: #2f6b2c; --spr-green-soft: rgba(76, 154, 60, .11); --spr-tomato-soft: rgba(224, 65, 46, .1); --spr-sun-soft: rgba(242, 184, 33, .17); --spr-violet-soft: rgba(122, 79, 181, .11); --spr-leaf-soft: rgba(76, 154, 60, .12); --theme-600-ink: #ffffff; --spr-band-img: var(--spr-band); --spr-band-thin-img: url("data:image/svg+xml;utf8,"); --spr-band-thin: var(--spr-band-thin-img) repeat-x left top / 60px 6px; /* Two strands of jute twisted together */ --spr-twine-img: url("data:image/svg+xml;utf8,"); --spr-twine: var(--spr-twine-img) repeat-x left 3px / 48px 10px; --spr-sprout-img: url("data:image/svg+xml;utf8,"); --spr-sprout: var(--spr-sprout-img) center / contain no-repeat; --spr-sprout-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; /* A terracotta pot side on: its rolled rim and tapering body. As a mask it shapes icon medallions and the current page. */ --spr-pot-mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; --spr-pot-relief: drop-shadow(0 1px 0 rgba(74, 50, 34, .4)) drop-shadow(0 4px 4px rgba(34, 48, 31, .2)); /* The greenhouse frame round a chosen option or a frame */ --spr-rim: 0 0 0 2px #ffffff, 0 0 0 4px #2f7d32, 0 10px 20px -12px rgba(34, 48, 31, .5); /* A plant label's tie hole, at the leading end (left in LTR) */ --spr-eyelet: radial-gradient(circle at 15px 1.35rem, var(--paper) 0 4px, #c9a46a 4.4px 6px, transparent 6.4px); --spr-eyelet-rtl: radial-gradient(circle at calc(100% - 15px) 1.35rem, var(--paper) 0 4px, #c9a46a 4.4px 6px, transparent 6.4px); /* Greenhouse glass: dew on a pale pane, white glazing bars across it */ --spr-glass-drops: url("data:image/svg+xml;utf8,"); --spr-glass: var(--spr-glass-drops) 0 0 / 150px 150px, radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, .6), transparent 75%), linear-gradient(180deg, #eaf2e6 0%, #d7e6d6 100%); --spr-mist: linear-gradient(180deg, #eef3ea, #e4ece2); --spr-leaf-img: url("data:image/svg+xml;utf8,"); --spr-leaf: var(--spr-leaf-img) center / contain no-repeat; --spr-can-img: url("data:image/svg+xml;utf8,"); --spr-can: var(--spr-can-img) center / contain no-repeat; /* A row coming up: progress, meters, timers */ --spr-flow: linear-gradient(180deg, rgba(255, 255, 255, .4) 0 30%, transparent 30%), linear-gradient(90deg, #b9df8e, #5fae3f 55%, #2f7d32); /* The paper of a seed packet */ --spr-cream: #fbf6e6; --spr-cream-ink: #22301f; } html.dark { --spr-c1: #8fd16f; --spr-c2: #ff8a74; --spr-c3: #ffcf6b; --spr-c4: #c2a4f0; --spr-c5: #ffa45c; --spr-green-ink: #b6e6a0; --spr-tomato-ink: #ffa292; --spr-sun-ink: #ffdc8a; --spr-violet-ink: #d6bff7; --spr-leaf-ink: #b4e69c; --spr-green-soft: rgba(143, 209, 111, .12); --spr-tomato-soft: rgba(255, 138, 116, .13); --spr-sun-soft: rgba(255, 207, 107, .14); --spr-violet-soft: rgba(194, 164, 240, .14); --spr-leaf-soft: rgba(143, 209, 111, .12); --theme-600-ink: #0e1a13; --spr-band-img: var(--spr-band-dusk); --spr-band-thin-img: url("data:image/svg+xml;utf8,"); --spr-twine-img: url("data:image/svg+xml;utf8,"); --spr-sprout-img: url("data:image/svg+xml;utf8,"); --spr-pot-relief: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 8px rgba(255, 207, 107, .2)); --spr-rim: 0 0 0 2px #16211d, 0 0 0 4px #ffcf6b, 0 0 20px -2px rgba(255, 207, 107, .35); --spr-eyelet: radial-gradient(circle at 15px 1.35rem, var(--paper) 0 4px, #8a6f48 4.4px 6px, transparent 6.4px); --spr-eyelet-rtl: radial-gradient(circle at calc(100% - 15px) 1.35rem, var(--paper) 0 4px, #8a6f48 4.4px 6px, transparent 6.4px); --spr-glass-drops: url("data:image/svg+xml;utf8,"); --spr-glass: var(--spr-glass-drops) 0 0 / 150px 150px, var(--spr-lights) 0 0 / 520px 220px, radial-gradient(60% 50% at 50% 45%, rgba(255, 207, 107, .1), transparent 75%), linear-gradient(180deg, #13221d 0%, #1b2e29 100%); --spr-mist: linear-gradient(180deg, #172a23, #13201b); --spr-flow: linear-gradient(180deg, rgba(255, 255, 255, .3) 0 30%, transparent 30%), linear-gradient(90deg, #ffe6b0, #ffcf6b 45%, #8fd16f); --spr-cream: #f3ecd8; } /* ── Game palette ── The earn arena hands these to every HTML5 board, so tiles, cells and letters take the shed's colours: by day a cream board with tiles rising from sprout green through the seed-packet inks to violet; after dark the greenhouse at dusk with tiles lit like the string lights. */ :root { --game-bg: #eef2e4; --game-surface: #d9e2cc; --game-surface-2: #ffffff; --game-ink: #22301f; --game-muted: #69725f; --game-accent: #2f7d32; --game-accent-ink:#ffffff; --game-good: #3b8a2f; --game-bad: #c93a28; --game-tile-1: #eef7e9; --game-tile-2: #cfe9c0; --game-tile-3: #86c255; --game-tile-4: #4c9a3c; --game-tile-5: #f2b821; --game-tile-6: #ec7a1f; --game-tile-7: #e0412e; --game-tile-8: #7a4fb5; --game-radius: 10px; --game-font: 'Corben', 'Work Sans', Georgia, serif; --game-font-css: "/assets/themes/spring-sale/assets/fonts/fonts.css"; /* Arena chrome (assets/css/game-arena.css): the potting bench, not a dark screen */ --game-arena-screen: #eef2e4; --game-arena-coins: #a8701a; --game-arena-win: #3b8a2f; --game-arena-danger: #c93a28; --game-pattern: url("data:image/svg+xml;utf8,"); } html.dark { --game-bg: #13201b; --game-surface: #0b1310; --game-surface-2: #1f342c; --game-ink: #eef0e4; --game-muted: #a5ae9c; --game-accent: #8fd16f; --game-accent-ink:#0e1a13; --game-good: #9fd98a; --game-bad: #ff8a74; --game-tile-1: #1f342c; --game-tile-2: #2e5a2a; --game-tile-3: #4f8f3c; --game-tile-4: #8fd16f; --game-tile-5: #ffcf6b; --game-tile-6: #ffa45c; --game-tile-7: #ff8a74; --game-tile-8: #c2a4f0; --game-arena-screen: #13201b; --game-arena-coins: #ffdb8a; --game-arena-win: #9fd98a; --game-arena-danger: #ff8a74; --game-pattern: url("data:image/svg+xml;utf8,"); } /* Corben is drawn for Latin; Work Sans adds Vietnamese but has no Cyrillic or Greek. Where a language's own letters would fall back mid-word, headings use the interface face, or the system's. */ html:is([lang="vi"], [lang="bn"], [lang="zh-CN"], [lang="ar"], [lang="ur"]) { --font-display: 'Work Sans', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; } html:is([lang="ru"], [lang="gr"]) { --font-display: Georgia, 'Segoe UI', system-ui, serif; --font-ui: 'Segoe UI', system-ui, 'Noto Sans', sans-serif; } /* ── 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); } html .font-display, h1.display, h2.display, h3.display { font-family: var(--font-display); font-weight: 600; font-synthesis: none; letter-spacing: 0; } .display-italic { font-style: normal; } /* Corben has no italic: the small italic asides shared markup sets in the display face (card blurbs, bid notes) are set upright in the UI face instead. */ 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: #dcefd3; color: #22301f; } .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; } /* A seedling: section eyebrows wear it */ .spr-drop, html .section-eyebrow::before { background: var(--spr-sprout-img) center / contain no-repeat; } .spr-drop { display: inline-block; flex-shrink: 0; width: 10px; height: 14px; } /* A tiny seed packet with a tomato printed on it: the hero kicker and the sale chip */ .spr-pkt { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; } html .section-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; 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: 10px; height: 14px; } .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-image: var(--spr-faint); } .ed-folio { font-family: var(--font-display); font-weight: 600; color: var(--theme-600); } [data-spr-phase][hidden] { display: none !important; } [dir="rtl"] .spr-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 rgba(var(--theme-500-rgb), .16); } .ed-search { background: transparent; border: none; } .hdr-strip, .hdr-strip .ed-status { color: rgba(242,240,228, 0.88); } .hdr-strip a:hover, .hdr-strip button:hover { color: #ffdb8a; } /* The seed tray under the main header bar and wherever a section needs an edge */ .spr-band { height: 14px; background: var(--spr-band); } .spr-band--dusk { background: var(--spr-band-dusk); } /* The sale chip in the status strip */ .spr-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; color: #ffdb8a; } .spr-strip-chip .spr-pkt { width: 15px; height: 15px; } /* The desktop strip shares its line with the menu; the chip's note joins it only on the widest screens, and the day's date gives way to the chip below 1440px. Where a long language still runs out of room, spring-sale.js marks the strip .spr-strip-tight and the chip keeps only its short form. */ @media (max-width: 639px), (min-width: 1024px) and (max-width: 1679px) { .spr-strip-chip__extra { display: none; } } @media (min-width: 1024px) and (max-width: 1439px) { .hdr-strip .spr-strip-date { display: none; } } .spr-strip-chip__short, .spr-strip-tight .spr-strip-chip__full { display: none; } .spr-strip-tight .spr-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.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.94rem; 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.6rem; white-space: nowrap; font-family: var(--font-ui); font-size: 1rem; font-weight: 700; 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, html.dark body .ed-plan-featured .ed-plan-cta { background: #ffcf6b; color: #14231f; box-shadow: 0 2px 0 #8d6516; } .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: 1px 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: white with 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(--spr-lights) repeat-x left bottom / 520px 220px, var(--dusk-bg); color: #f2f0e4; border: 1px solid rgba(255,207,107, .3); border-radius: var(--radius); overflow: hidden; } .ed-plan-featured::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--spr-band-dusk); pointer-events: none; } .ed-plan-hairline { border-color: var(--rule); } .ed-plan-featured .ed-plan-hairline { border-color: rgba(242,240,228, .2); } /* ── Status text ── */ .ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-soft); } .ed-topnav-link { color: rgba(242,240,228, 0.88); text-decoration: none; transition: color 0.16s ease; } .ed-topnav-link:hover, .ed-topnav-link.active { color: #ffdb8a; } /* ── 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: 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; } .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: 1px solid var(--theme-600); text-decoration: none; } .drawer-logout:hover { background: var(--gold-soft); } .mobile-glass-header { background: rgba(246,244,234, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--rule); } html.dark .mobile-glass-header { background: rgba(15,23,20, 0.95); } .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: 14px; 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.96rem; 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: 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 bulb on the string lights breathing a little brighter (.spr-bulb, placed by --x and --y over the lights tile, timed by --w) */ .spr-bulb { position: absolute; left: var(--x); top: var(--y, 0); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 241, 196, .95) 0 12%, rgba(255, 207, 107, .45) 30%, transparent 68%); opacity: .55; } @media (prefers-reduced-motion: no-preference) { .spr-bulb { animation: spr-breathe 4.2s ease-in-out 3 both; animation-delay: var(--w, 0s); } } @keyframes spr-breathe { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.12); } } /* Leaves stirring as the greenhouse door opens and shuts (.spr-sway on an SVG group, pivoting at its base) */ @media (prefers-reduced-motion: no-preference) { .spr-sway { animation: spr-sway 5.5s ease-in-out 3 both; animation-delay: var(--w, 0s); transform-box: fill-box; transform-origin: 50% 100%; } } @keyframes spr-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.8deg); } } /* ── Dark/light toggle: the hedge ── assets/themes/spring-sale/assets/js/spring-sale.js registers it: seedlings sprout along the bottom edge of the screen, shoot up and thicken into a hedge whose leafy crown climbs past the top; the mode changes behind the leaves, then shears clip the hedge away from the top down, a flat cut line falling with clippings tumbling off it. Its colours are fixed, so nothing on it changes at the flip. */ .px-fx--spr-hedge { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; } .px-fx--spr-hedge .spr-fx-sprouts { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; } .px-fx--spr-hedge .spr-fx-sprouts i { position: absolute; bottom: -6px; left: var(--x); width: 26px; height: var(--h, 54px); margin-left: -13px; background: url("data:image/svg+xml;utf8,") center bottom / 100% 100% no-repeat; transform: scaleY(0); transform-origin: 50% 100%; } .px-fx--spr-hedge.is-sprouting .spr-fx-sprouts i { transform: scaleY(1); transition: transform .32s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0s); } /* The shears take the last of the sprouts with the hedge */ .px-fx--spr-hedge.is-trimming .spr-fx-sprouts i { transform: scaleY(0); transition: transform .25s ease-in calc(.5s + var(--d, 0s) * .4); } .px-fx--spr-hedge .spr-fx-hedge { position: absolute; left: -2px; right: -2px; bottom: 0; height: calc(100% + 64px); background: url("data:image/svg+xml;utf8,") 13px 7px / 118px 118px, url("data:image/svg+xml;utf8,") 0 0 / 80px 80px; transform: translateY(100%); } .px-fx--spr-hedge .spr-fx-hedge::before { content: ''; position: absolute; left: 0; right: 0; top: -46px; height: 48px; background: url("data:image/svg+xml;utf8,") 0 0 / 96px 48px repeat-x; } .px-fx--spr-hedge.is-growing .spr-fx-hedge { transform: translateY(0); transition: transform .72s cubic-bezier(.45, .05, .3, 1); } /* Clipped flat: the crown goes, the cut line shows the paler inside of the leaves, and the hedge is taken down from the top */ .px-fx--spr-hedge.is-trimming .spr-fx-hedge::before { display: none; } .px-fx--spr-hedge .spr-fx-hedge { clip-path: inset(0 0 0 0); } .px-fx--spr-hedge.is-trimming .spr-fx-hedge { clip-path: inset(100% 0 0 0); transition: clip-path .7s cubic-bezier(.55, 0, .45, 1); } .px-fx--spr-hedge .spr-fx-cut { position: absolute; left: 0; right: 0; top: 0; height: 6px; opacity: 0; background: linear-gradient(180deg, #b9df8e, #5fae3f); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); } .px-fx--spr-hedge.is-trimming .spr-fx-cut { opacity: 1; top: 100%; transition: top .7s cubic-bezier(.55, 0, .45, 1); } .px-fx--spr-hedge .spr-fx-clips i { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 16px; opacity: 0; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .px-fx--spr-hedge.is-trimming .spr-fx-clips i { animation: spr-fx-clip .9s cubic-bezier(.3, .2, .6, 1) both; animation-delay: var(--d, 0s); } @keyframes spr-fx-clip { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--dx), 220px) rotate(var(--r)); } } /* ── Footer: the potting shed at dusk in both modes — string lights sagging along the eaves, a few bulbs breathing, and a shelf of pots standing in silhouette above the links ── */ .spr-footer { --paper: #14231f; --paper-2: #1b2e29; --paper-3: #253c35; --ink: #f2f0e4; --ink-2: #dde0d3; --ink-soft: #b0b8a6; --rule: rgba(242,240,228, 0.15); --rule-soft: rgba(242,240,228, 0.08); --theme-500: #ffcf6b; --theme-600: #ffcf6b; --theme-700: #ffdc8a; --theme-500-rgb: 255, 207, 107; position: relative; } html.dark .spr-footer { --paper: #0b1310; --paper-2: #16211d; --paper-3: #1f2d28; } .spr-footer-top { position: relative; height: 128px; margin-bottom: -1px; overflow: hidden; background: var(--spr-lights) repeat-x left top / 520px 220px, var(--spr-shelf) repeat-x left bottom / 120px 40px, radial-gradient(700px 120px at 50% 0, rgba(255, 207, 107, .16), transparent 70%), linear-gradient(180deg, #213730 0%, #14231f 100%); } html.dark .spr-footer-top { background: var(--spr-lights) repeat-x left top / 520px 220px, var(--spr-shelf) repeat-x left bottom / 120px 40px, radial-gradient(700px 120px at 50% 0, rgba(255, 207, 107, .14), transparent 70%), linear-gradient(180deg, #15241f 0%, #0b1310 100%); } /* The pots after dark: the shelf's colours dimmed to silhouettes */ .spr-footer-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(180deg, rgba(20, 35, 31, .35), rgba(20, 35, 31, .15)); pointer-events: none; } .spr-footer a:hover { color: #ffdb8a; } html .spr-footer .ed-footer-heading { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: #ffdb8a; } html.dark #desktopFooter li { color: var(--ink-2) !important; } /* header.css greys every footer h4 after dark with an ID rule */ html.dark #desktopFooter .ed-footer-heading { color: #ffdb8a !important; } html.dark #desktopFooter .ed-newsletter h4 { color: #22301f !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: 600; 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 packet paper under the seed tray, a packet of seeds leaning in its corner */ html body .spr-footer .ed-newsletter { position: relative; background: radial-gradient(260px 160px at 100% 60%, rgba(76,154,60, .12), transparent 70%), #fbf6e6; color: #22301f; border: 0; border-radius: 18px; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6); overflow: hidden; padding-top: 2.5rem; padding-bottom: 2.2rem; } html body .spr-footer .ed-newsletter::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none; background: var(--spr-band); } html body .spr-footer .ed-newsletter::after { content: ''; position: absolute; right: 24px; bottom: 18px; top: auto; left: auto; width: 54px; height: 68px; display: block; border-radius: 0; opacity: 1; filter: drop-shadow(0 4px 3px rgba(34,48,31, .22)); transform: rotate(-7deg); pointer-events: none; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; } [dir="rtl"] body .spr-footer .ed-newsletter::after { right: auto; left: 22px; transform: rotate(6deg) scaleX(-1); } @media (max-width: 767px) { html body .spr-footer .ed-newsletter::after { width: 34px; height: 43px; bottom: auto; top: 24px; right: 14px; } [dir="rtl"] body .spr-footer .ed-newsletter::after { right: auto; left: 14px; } } html body .spr-footer .ed-newsletter, html body .spr-footer .ed-newsletter * { --ink: #22301f; --ink-2: #3f4a37; } html body .spr-footer .ed-newsletter h4, html.dark body .spr-footer .ed-newsletter h4 { color: #22301f !important; font-family: var(--font-display); font-weight: 600; } html.dark body .spr-footer .ed-newsletter p:not(#newsletter-msg) { color: #3f4a37 !important; } html body .spr-footer .ed-newsletter-input, html.dark body .spr-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #22301f !important; border: 1px solid rgba(34,48,31, .2) !important; border-radius: 999px; } html body .spr-footer .ed-newsletter-input::placeholder { color: #6a7360; } html body .spr-footer .ed-newsletter-input:focus { border-color: #2f7d32 !important; box-shadow: 0 0 0 3px rgba(47,125,50, .16); } html body .spr-footer .ed-newsletter-btn { background: #2f7d32; color: #ffffff; border: 0; border-radius: 999px; font-family: var(--font-ui); font-weight: 700; } html body .spr-footer .ed-newsletter-age { color: #3f4a37; } /* Logo card: the light-mode logo on a sheet of packet paper under a strip of seed tray, wherever it sits at dusk (footer, app splash) */ .spr-plaque { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1.55rem 1.6rem 1.05rem; background: #fbf6e6; border-radius: 18px; box-shadow: 0 0 0 1px rgba(34,48,31, .12), 0 14px 28px -12px rgba(0, 0, 0, .6); overflow: hidden; } .spr-plaque::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--spr-band); pointer-events: none; } /* 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; } /* ── 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(15,23,20, 0.95) !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(22,33,29, 0.96) !important; } html.dark .premium-side-menu { background: var(--paper) !important; } /* The phone language sheet: header.css paints it near-black after dark */ html.dark #langSheet { background: var(--paper-2) !important; border-top: 1px solid var(--rule) !important; } 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-3) !important; } html #langSheet .lang-row[style*="background"] { background: var(--rose-soft) !important; box-shadow: inset 0 0 0 1px rgba(var(--theme-500-rgb), .3); } html.dark #langSheet .lang-drag-handle { background: rgba(238,240,228, .2); } 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, #1f2d28, #0f1714, #1a1c38, #0a1311) !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 evening. 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: #0a1311 !important; border-color: rgba(238,240,228, .2) !important; color: #eef0e4 !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 evening. */ 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: #0a1311; --paper: #eef0e4; border-color: rgba(143,209,111, .3); } html header.safe-top-header[style] { background: rgba(246,244,234, .95) !important; } html.dark header.safe-top-header[style] { background: rgba(15,23,20, .95) !important; } /* The winners page's tab bar, near-black in assets/css/pages/winners.css */ html.dark .wn-tab-bar { background: rgba(15,23,20, .95); } /* ── Login / register / forgot-password brand panel: the greenhouse at dusk, string lights along the top, glazing bars on the glass and a pot of tulips on the bench in its corner ── */ :root, html.dark { --brand-gradient: var(--dusk-bg); --brand-glow-1: rgba(255,200,110, 0.22); --brand-glow-2: rgba(143,209,111, 0.2); } .brand-panel { background: var(--spr-lights) repeat-x left top / 520px 220px, linear-gradient(90deg, transparent calc(50% - 3px), rgba(230, 242, 221, .1) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)) 0 0 / 220px 100%, linear-gradient(180deg, transparent 200px, rgba(230, 242, 221, .1) 200px 206px, transparent 206px) 0 40px / 100% 260px, var(--spr-panes) 0 0 / 180px 180px, var(--dusk-bg) !important; } /* assets/css/pages/login.css loads after the theme and draws ::after as a round glow; here it is the pot of tulips. */ html .brand-panel::after { content: ''; position: absolute; top: auto !important; bottom: 7% !important; right: 7% !important; left: auto !important; width: 150px !important; height: 160px !important; border-radius: 0 !important; opacity: 1 !important; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)) !important; transform: none !important; background: url("data:image/svg+xml;utf8,") center bottom / contain no-repeat !important; box-shadow: none !important; } [dir="rtl"] .brand-panel::after { right: auto !important; left: 7% !important; } /* login.css's other glow becomes the shelf of pots along the top */ html .brand-panel::before { top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 40px !important; border-radius: 0 !important; opacity: .55 !important; filter: none !important; transform: none !important; background: var(--spr-shelf) 0 0 / 120px 40px repeat-x !important; } .brand-panel .text-purple-200, .brand-panel [class*="text-purple-200"] { color: rgba(242,240,228, 0.84) !important; } .brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; } /* ── Wallet balance card: a seed crate — dark-stained planks with the balance stencilled across them, seed packets standing in it along the top and a seedling potted at its corner ── */ html body .wallet-hero { position: relative; background: url("data:image/svg+xml;utf8,") 0 34px / 220px 46px, radial-gradient(80% 70% at 30% 40%, rgba(255, 207, 107, .12), transparent 70%), linear-gradient(180deg, #5a3a24 0%, #4a2f1d 60%, #3c2616 100%); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 6px #6b4630, inset 0 0 0 7px rgba(0, 0, 0, .25), 0 2px 0 #2a1a10, 0 22px 40px -18px rgba(34,48,31, .7); color: #fbf6e6; overflow: hidden; padding-top: calc(1.5rem + 26px) !important; } /* The packets standing in the crate */ html body .wallet-hero::before { content: ''; position: absolute; left: 10px; right: 10px; top: 0; bottom: auto; width: auto; height: 34px; border: 0; border-radius: 0; transform: none; opacity: 1; background: url("data:image/svg+xml;utf8,") 0 0 / 150px 34px repeat-x; pointer-events: none; } /* The seedling potted at its corner */ html body .wallet-hero::after { content: ''; position: absolute; right: 30px; bottom: 16px; top: auto; left: auto; width: 56px; height: 75px; border-radius: 0; transform: none; opacity: 1; background: url("data:image/svg+xml;utf8,") center bottom / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); pointer-events: none; } html[dir="rtl"] body .wallet-hero::after { right: auto; left: 30px; } @media (max-width: 639px) { html body .wallet-hero::after { width: 34px; height: 46px; top: 104px; bottom: auto; right: 16px; } html[dir="rtl"] body .wallet-hero::after { right: auto; left: 16px; } } html body .wallet-hero > * { position: relative; z-index: 1; } /* Shared markup letters the eyebrow, counts and rules in faint white for a black card; on the stained wood they need more body. */ html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: rgba(251, 246, 230, .84) !important; } html body .wallet-hero .h-px { background: repeating-linear-gradient(90deg, rgba(251, 246, 230, .5) 0 5px, transparent 5px 9px) !important; } /* Stencilled: the display serif, a touch of paint wear */ html body .wallet-balance-num { font-family: var(--font-display); font-variation-settings: normal; font-weight: 700; letter-spacing: .01em; color: #fbf6e6; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); } html body .wallet-hero-btn-primary { background: #f2b821; color: #22301f; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 6px; box-shadow: 0 2px 0 #8d6516; } html body .wallet-hero-btn-primary:hover { background: #f7c94a; color: #22301f; } html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #fbf6e6; border-color: rgba(251, 246, 230, .55); border-radius: 6px; } html.dark body .wallet-hero { background: url("data:image/svg+xml;utf8,") 0 34px / 220px 46px, radial-gradient(70% 60% at 30% 30%, rgba(255, 207, 107, .18), transparent 70%), linear-gradient(180deg, #3e281a 0%, #301e12 60%, #24160c 100%); box-shadow: inset 0 0 0 6px #4a3222, inset 0 0 0 7px rgba(0, 0, 0, .3), 0 2px 0 #120b06, 0 0 50px -14px rgba(255,200,110, .3); } /* ── Prize card styled by assets/css/pages/home.css: the seed tray across its top ── */ 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(--spr-band); opacity: 1; z-index: 2; } html .ed-card-mystery img { position: relative; z-index: 1; } /* ── Product page buy box: the seed tray along its top ── */ html body .pd-buybox { position: relative; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 18px; 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(--spr-band); } html body .pd-buybox .font-display.text-4xl { font-weight: 600; color: var(--theme-600); overflow-wrap: normal; } .pd-title { font-weight: 600 !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 leaf green. */ 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(47,125,50, .3); } html.dark .border-violet-200 { border-color: rgba(143,209,111, .35) !important; } html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(47,125,50, .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); } /* The game arena's Play button letters itself in white on the accent; after dark the accent is a pale sprout green, so it takes the button ink. */ html.dark .arena-play { color: var(--btn-ink); text-shadow: none; } html.dark .arena-play .pic { background: rgba(12,22,18, .12); } html.dark .arena-play .cost { border-left-color: rgba(12,22,18, .3); } /* ── 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 on a white panel under the seed tray ── 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: 16px !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: 18px !important; box-shadow: var(--shadow-md) !important; overflow: hidden; padding-top: 1.7rem !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(--spr-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 .spr-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 is a seed packet — an ink band printed across its top under a folded flap, the prize as the picture in an arched window standing in a bed of soil, the type and status on wooden plant labels and a fold line above the details ── */ .spr-win { --ink-band: #e0412e; position: relative; background: var(--spr-cream); border: 1px solid rgba(34, 48, 31, .18); border-radius: 4px 4px 10px 10px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; } .spr-win:nth-child(5n+2) { --ink-band: #f2b821; } .spr-win:nth-child(5n+3) { --ink-band: #7a4fb5; } .spr-win:nth-child(5n+4) { --ink-band: #4c9a3c; } .spr-win:nth-child(5n+5) { --ink-band: #ec7a1f; } .spr-win:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-md); } html.dark .spr-win { background: #1b2a23; border-color: rgba(238, 240, 228, .14); } .spr-win__scene { position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 3.4rem 14px 1.1rem; background: var(--ink-band); border-radius: 3px 3px 0 0; } /* The packet's folded flap, a crease at its foot */ .spr-win__scene::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(0, 0, 0, .1)); border-bottom: 1px dashed rgba(34, 48, 31, .35); } /* The arched window the picture is printed in: a spring sky over a bed of soil */ .spr-win__window { position: absolute; left: 12px; right: 12px; top: 2.4rem; bottom: .7rem; border-radius: 999px 999px 6px 6px; background: url("data:image/svg+xml;utf8,") left bottom / 100% 26% no-repeat, radial-gradient(40% 30% at 70% 22%, rgba(255, 241, 196, .9), transparent 70%), linear-gradient(180deg, #e8f3df 0%, #cfe6c4 100%); box-shadow: inset 0 0 0 3px #fbf6e6, inset 0 0 0 4px rgba(34, 48, 31, .2); } html.dark .spr-win__window { background: url("data:image/svg+xml;utf8,") left bottom / 100% 26% no-repeat, var(--spr-lights) 0 -10px / 420px 178px, linear-gradient(180deg, #1b3029 0%, #14231f 100%); box-shadow: inset 0 0 0 3px #2a3d34, inset 0 0 0 4px rgba(0, 0, 0, .3); } .spr-win__prize { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; width: 56%; aspect-ratio: 1; padding-bottom: 6%; } .spr-win__prize img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(34,48,31, .3)); transition: transform .3s ease; } .spr-win:hover .spr-win__prize img { transform: translateY(-4px) scale(1.04); } .spr-win__scene > .absolute { z-index: 3; top: .9rem; } .spr-win__tag { display: inline-flex; align-items: center; padding: .24rem .9rem .24rem .6rem; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #3a2606; background: linear-gradient(180deg, #ecd3a0, #d9b77a); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); border-radius: 2px; } [dir="rtl"] .spr-win__tag { padding: .24rem .6rem .24rem .9rem; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); } .spr-win__tag--open { color: #3a2606; background: linear-gradient(180deg, #ffd85c, #f2b821); } .spr-win__tag--done { color: #ffffff; background: linear-gradient(180deg, #43973f, #2f7d32); } .spr-win__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; } .spr-win__label { padding-top: .6rem; border-top: 1px dashed rgba(34, 48, 31, .3); } html.dark .spr-win__label { border-top-color: rgba(238, 240, 228, .2); } .spr-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; } .spr-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .92rem; } .spr-win__cart, .spr-win__btn-off { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; font-weight: 700; } .spr-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); } .spr-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); } .spr-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; } .spr-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(--rose-soft); border-radius: 999px; } /* The hero's scene is drawn by components/home/hero.css, which arrives after this sheet; until it does, the bare SVGs would paint at their natural size, so the scene waits out of sight. */ .spr-hero__scene { visibility: hidden; max-height: 0; overflow: hidden; } /* Phones: headings break only between words, never mid-word. */ @media (max-width: 639px) { html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.5rem, 8vw, 1.875rem); } html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; } } /* Phone page headers: the display face at text-lg made "Investitionsplan" run to three lines and out of the bar; a notch smaller fits two. */ @media (max-width: 639px) { html body h1.truncate { font-size: clamp(.95rem, 4.4vw, 1.125rem); line-height: 1.15; } } /* The page section titles (text-4xl) in this heavy face are wider than a phone for one German word ("funktioniert's"); scale with the screen. */ @media (max-width: 639px) { html body h2.font-display.text-fit.text-4xl { font-size: clamp(1.6rem, 8.6vw, 2.25rem); } } /* Phones: a ticket's two dates stack rather than run into each other; the bids page's four tiles go two by two ("Gesamtgebote" was cut off); the auction page's browse link drops under its heading ("Andere Auktionen durchstöbern" pushed the page wider). */ @media (max-width: 639px) { html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; } html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; } } /* 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: #37812c; --px-warn: #aa5c08; --px-crit: #c83a28; --px-info: #8d54e3; } html.dark:root { --px-good: #a0d98c; --px-warn: #fbbf23; --px-crit: #ffa18f; --px-info: #c7acf1; } /* Changing language, the scene (spring-sale.js): the old pennant drops off the glass, the casements swing open and a breeze carries in blossom and a new pennant with the new name; after the reload it flutters and the blossom settles. The view and the pennant are the same in both modes, so their colours are fixed. The window is the same on both pages, so the reload never shows. */ .spr-lang-stage { background: rgba(20, 35, 31, .55); } .spr-lang-scene { position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 22px 22px 0; overflow: hidden; background: var(--paper-3); border-radius: var(--radius, 14px); box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .6); font-family: var(--font-ui); } .spr-lang-window { position: relative; display: grid; place-items: center; min-height: 200px; box-sizing: border-box; padding: 26px 16px; overflow: hidden; background: radial-gradient(90% 40% at 30% 112%, #8fc56f 60%, transparent 61%), radial-gradient(80% 36% at 85% 112%, #a8d488 60%, transparent 61%), linear-gradient(180deg, #bfe3f2, #e4f3f7 70%); border: 10px solid #ffffff; border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: 0 0 0 1px rgba(34, 48, 31, .18); } .spr-lang-pane { position: absolute; top: 0; bottom: 0; z-index: 2; width: 50%; box-sizing: border-box; border: 6px solid #ffffff; background: linear-gradient(125deg, rgba(255, 255, 255, .6) 0 18%, rgba(255, 255, 255, .14) 18% 34%, rgba(255, 255, 255, .42) 34% 40%, rgba(255, 255, 255, .16) 40%); box-shadow: inset 0 0 0 1px rgba(34, 48, 31, .12); } .spr-lang-pane-l { left: 0; transform-origin: left center; transform: perspective(700px) rotateY(78deg); } .spr-lang-pane-r { right: 0; transform-origin: right center; transform: perspective(700px) rotateY(-78deg); } .spr-lang-old { position: absolute; left: 50%; top: 24%; z-index: 4; max-width: 70%; box-sizing: border-box; padding: 6px 28px 6px 12px; background: #e0412e; color: #ffffff; font: 600 15px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); transform: translate(-50%, 18px) rotate(-10deg); opacity: 0; } .spr-lang-breeze, .spr-lang-blossom { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .spr-lang-breeze i { position: absolute; left: 6%; width: 52%; height: 26px; border-top: 2px solid rgba(255, 255, 255, .95); border-radius: 50%; opacity: 0; transform: translateX(60%); } .spr-lang-breeze i:nth-child(1) { top: 22%; } .spr-lang-breeze i:nth-child(2) { top: 48%; left: 14%; } .spr-lang-breeze i:nth-child(3) { top: 72%; } .spr-lang-blossom i { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 9px; border-radius: 100% 0; background: #f5a9c2; transform: rotate(var(--r)); } .spr-lang-blossom i:nth-child(3n) { background: #ffffff; box-shadow: inset 0 0 0 1px #f5a9c2; } .spr-lang-pennant { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; padding: 12px 42px 12px 18px; background: #276a2e; color: #ffffff; transform-origin: left center; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%); } .spr-lang-pennant img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #ffffff; } .spr-lang-name { min-width: 0; font: 400 clamp(22px, 6.4vw, 36px)/1.15 var(--font-display); overflow-wrap: anywhere; } .spr-lang-sill { display: block; height: 14px; margin: 0 -22px; background: linear-gradient(180deg, #c9a46a, #a07a44); } /* Out: the old pennant drops, the casements open, the breeze blows in. */ .px-lang-stage-out .spr-lang-scene { animation: spr-lang-up .32s cubic-bezier(.2, .8, .3, 1.1) both; } .px-lang-stage-out .spr-lang-old { animation: spr-lang-off .22s ease-in .26s both; } .px-lang-stage-out .spr-lang-pane-l { animation: spr-lang-swing-l .44s cubic-bezier(.3, .6, .3, 1) .38s both; } .px-lang-stage-out .spr-lang-pane-r { animation: spr-lang-swing-r .44s cubic-bezier(.3, .6, .3, 1) .38s both; } .px-lang-stage-out .spr-lang-breeze i { animation: spr-lang-gust .42s ease-out .5s both; } .px-lang-stage-out .spr-lang-blossom i { animation: spr-lang-blow .42s cubic-bezier(.2, .7, .3, 1) calc(.5s + var(--d, 0s)) both; } .px-lang-stage-out .spr-lang-pennant { animation: spr-lang-fly .42s cubic-bezier(.2, .8, .3, 1.1) .56s both; } /* In: it starts where out ended; the pennant flutters, the blossom settles. */ .px-lang-stage-in .spr-lang-pennant { animation: spr-lang-flutter .8s ease-in-out .05s both; } .px-lang-stage-in .spr-lang-blossom i { animation: spr-lang-settle .85s ease-in .1s both; } .px-lang-stage-in .spr-lang-scene { animation: spr-lang-away .28s ease-in 1s both; } @keyframes spr-lang-up { from { transform: translateY(40px); opacity: 0; } } @keyframes spr-lang-away { to { transform: translateY(26px); opacity: 0; } } @keyframes spr-lang-off { from { transform: translate(-50%, 0); opacity: 1; } } @keyframes spr-lang-swing-l { from { transform: perspective(700px) rotateY(0deg); } } @keyframes spr-lang-swing-r { from { transform: perspective(700px) rotateY(0deg); } } @keyframes spr-lang-gust { from { opacity: 0; transform: translateX(-60%) scaleX(.4); } 40% { opacity: .9; } } @keyframes spr-lang-blow { from { transform: translate(-280px, 40px) rotate(0deg); opacity: 0; } 30% { opacity: 1; } } @keyframes spr-lang-fly { from { transform: translate(-130%, 30px) rotate(-12deg); opacity: 0; } 30% { opacity: 1; } 75% { transform: translate(3%, -3px) rotate(2deg); } } @keyframes spr-lang-flutter { 25% { transform: rotate(-2deg) skewY(-2deg); } 55% { transform: rotate(1.5deg) skewY(1.5deg); } 80% { transform: rotate(-.5deg); } } @keyframes spr-lang-settle { to { transform: translate(40px, 90px) rotate(calc(var(--r) + 160deg)); opacity: 0; } } @media (max-width: 460px) { .spr-lang-scene { padding: 16px 16px 0; } .spr-lang-sill { margin: 0 -16px; } .spr-lang-window { min-height: 180px; padding: 22px 10px; border-width: 8px; } .spr-lang-pennant { padding: 10px 34px 10px 14px; } } /* 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: #666f5c; } /* rev 868fe5109c9f2a2b */