@tailwind base; @tailwind components; @tailwind utilities; /* ---------------------------------------------------------------------------- Day/night palette. JS sets data-phase={dawn|day|dusk|night} on . Each phase drives a small set of CSS vars; the page transitions smoothly thanks to the `transition-colors duration-1000` on . ---------------------------------------------------------------------------- */ :root, html[data-phase="day"] { --bg: #fff7e4; /* warm cream */ --bg-grad: #ffeec2; /* soft sun wash */ --card: #ffffff; --ink: #3a2e1f; --accent: #f2a541; /* sunshine yellow */ } html[data-phase="dawn"] { --bg: #ffe7d6; --bg-grad: #ffc9c9; --card: #fff4ea; --ink: #4a2e2a; --accent: #ff8a65; } html[data-phase="dusk"] { --bg: #ffd6a8; --bg-grad: #f7a07e; --card: #fff1de; --ink: #3d2417; --accent: #e6553a; } html[data-phase="night"] { --bg: #1a1f3a; --bg-grad: #2a3358; --card: #2d365a; --ink: #f1ecd8; /* moonlight */ --accent: #f9d976; /* lantern */ } @layer base { body { font-family: "Nunito", system-ui, sans-serif; } html { scroll-behavior: smooth; } /* Belt-and-braces: never let stray wide content push horizontal scroll on the whole page (the channel nav scrolls inside itself instead). */ html, body { overflow-x: hidden; } } @layer components { /* Channel pill row may exceed viewport on mobile once enough channels are configured. Let it scroll inside its own rounded container and hide the scrollbar chrome so it still reads as a clean pill. */ .pete-channel-nav { scrollbar-width: none; -ms-overflow-style: none; } .pete-channel-nav::-webkit-scrollbar { display: none; } } @layer utilities { .font-display { font-family: "Fredoka", "Nunito", system-ui, sans-serif; letter-spacing: -0.01em; } /* Soft signage shadow — Animal Crossing wooden plank vibe. */ .shadow-pete { box-shadow: 0 4px 0 rgba(60,40,20,0.10), 0 8px 24px rgba(60,40,20,0.08); } .shadow-pete-lg { box-shadow: 0 6px 0 rgba(60,40,20,0.12), 0 16px 32px rgba(60,40,20,0.12); } /* Per-channel theme colors. Kept as plain utilities so Tailwind doesn't need to know to safelist them. */ .bg-theme-gaming { background-color: #4caf7d; } .bg-theme-tech { background-color: #5aa9e6; } .bg-theme-politics { background-color: #e07a5f; } .bg-theme-eu { background-color: #003399; } .bg-theme-music { background-color: #b079d6; } .bg-theme-anime { background-color: #ec5e8a; } .bg-theme-foss { background-color: #d97706; } .bg-theme-kids { background-color: #14b8a6; } .bg-theme-finance { background-color: #10b981; } .bg-theme-lego { background-color: #d01012; } .bg-theme-adventure { background-color: #6d4bd8; } .text-theme-gaming { color: #2d8a5a; } .text-theme-tech { color: #2f7fb8; } .text-theme-politics { color: #b8523a; } .text-theme-eu { color: #003399; } .text-theme-music { color: #8a4fb8; } .text-theme-anime { color: #c33a6a; } .text-theme-foss { color: #b8530a; } .text-theme-kids { color: #0f766e; } .text-theme-finance { color: #059669; } .text-theme-lego { color: #b00d0e; } .text-theme-adventure { color: #5836b8; } .decoration-theme-gaming { text-decoration-color: #4caf7d; } .decoration-theme-tech { text-decoration-color: #5aa9e6; } .decoration-theme-politics { text-decoration-color: #e07a5f; } .decoration-theme-eu { text-decoration-color: #003399; } .decoration-theme-music { text-decoration-color: #b079d6; } .decoration-theme-anime { text-decoration-color: #ec5e8a; } .decoration-theme-foss { text-decoration-color: #d97706; } .decoration-theme-kids { text-decoration-color: #14b8a6; } .decoration-theme-finance { text-decoration-color: #10b981; } .decoration-theme-lego { text-decoration-color: #d01012; } .decoration-theme-adventure { text-decoration-color: #6d4bd8; } .border-theme-gaming { border-color: #4caf7d; } .border-theme-tech { border-color: #5aa9e6; } .border-theme-politics { border-color: #e07a5f; } .border-theme-eu { border-color: #003399; } .border-theme-music { border-color: #b079d6; } .border-theme-anime { border-color: #ec5e8a; } .border-theme-foss { border-color: #d97706; } .border-theme-kids { border-color: #14b8a6; } .border-theme-finance { border-color: #10b981; } .border-theme-lego { border-color: #d01012; } .border-theme-adventure { border-color: #6d4bd8; } /* "Posted to Matrix" glow — soft pulsing aura in the channel's theme color. */ .glow-theme-gaming { box-shadow: 0 0 0 2px rgba(76,175,125,0.35), 0 0 24px 4px rgba(76,175,125,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-tech { box-shadow: 0 0 0 2px rgba(90,169,230,0.35), 0 0 24px 4px rgba(90,169,230,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-politics { box-shadow: 0 0 0 2px rgba(224,122,95,0.35), 0 0 24px 4px rgba(224,122,95,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-eu { box-shadow: 0 0 0 2px rgba(0,51,153,0.35), 0 0 24px 4px rgba(0,51,153,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-music { box-shadow: 0 0 0 2px rgba(176,121,214,0.35), 0 0 24px 4px rgba(176,121,214,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-anime { box-shadow: 0 0 0 2px rgba(236,94,138,0.35), 0 0 24px 4px rgba(236,94,138,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-foss { box-shadow: 0 0 0 2px rgba(217,119,6,0.35), 0 0 24px 4px rgba(217,119,6,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-kids { box-shadow: 0 0 0 2px rgba(20,184,166,0.35), 0 0 24px 4px rgba(20,184,166,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-finance { box-shadow: 0 0 0 2px rgba(16,185,129,0.35), 0 0 24px 4px rgba(16,185,129,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-lego { box-shadow: 0 0 0 2px rgba(208,16,18,0.35), 0 0 24px 4px rgba(208,16,18,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-adventure { box-shadow: 0 0 0 2px rgba(109,75,216,0.35), 0 0 24px 4px rgba(109,75,216,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } @keyframes pete-glow-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* "PAYWALLED" diagonal rubber stamp overlay — slapped across the whole card when the source is gated and no archive snapshot worked. The card stays clickable (link still goes to the original); the stamp is just visual warning. pointer-events:none keeps it from eating clicks. */ .paywall-stamp { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 5; background: rgba(255, 250, 240, 0.18); } .paywall-stamp::before { content: "PAYWALLED"; font-family: var(--font-display, ui-sans-serif), system-ui, sans-serif; font-weight: 900; font-size: clamp(1rem, 3.2vw, 1.75rem); letter-spacing: 0.12em; color: rgba(180, 30, 30, 0.85); border: 0.28rem double rgba(180, 30, 30, 0.85); padding: 0.3rem 0.9rem; transform: rotate(-15deg); text-shadow: 0 1px 0 rgba(255,255,255,0.4); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15); background: rgba(255, 240, 230, 0.55); border-radius: 0.25rem; /* slight roughness to mimic a real ink stamp */ filter: contrast(1.05); } } /* ---------------------------------------------------------------------------- Feed / reader mode. A focused, one-story-at-a-time overlay driven by reader.js. Left/right arrows page through the stories currently on screen, marking each read as it's shown. Styling leans on the phase palette vars so it recolours with day/night like everything else. ---------------------------------------------------------------------------- */ @layer components { .pete-reader-backdrop { position: absolute; inset: 0; background: rgba(20, 14, 6, 0.55); backdrop-filter: blur(6px); } html[data-phase="night"] .pete-reader-backdrop { background: rgba(6, 8, 20, 0.65); } .pete-reader-shell { position: relative; height: 100%; width: 100%; max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; padding: max(env(safe-area-inset-top), 0.75rem) 1rem 0.75rem; gap: 0.75rem; } .pete-reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; color: #fff; } .pete-reader-progress { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .pete-reader-nav { display: flex; align-items: center; gap: 0.4rem; } .pete-reader-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.7rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 700; font-size: 0.95rem; border: 2px solid rgba(255, 255, 255, 0.18); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease; } .pete-reader-btn:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); } .pete-reader-btn:disabled { opacity: 0.35; cursor: default; transform: none; } .pete-reader-btn-open { background: var(--accent); border-color: transparent; color: #1c1305; text-decoration: none; } .pete-reader-btn-open:hover { background: var(--accent); filter: brightness(1.08); } /* Active/pressed toolbar toggle (Listen while speaking, Aa while menu open). */ .pete-reader-btn[aria-pressed="true"], .pete-reader-btn[aria-expanded="true"] { background: var(--accent); border-color: transparent; color: #1c1305; } /* Text-options popover, anchored under the Aa button in the reader bar. */ .pete-reader-type { position: relative; display: inline-flex; } .pete-reader-typemenu[hidden] { display: none; } .pete-reader-typemenu { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 10; width: 15rem; padding: 0.75rem; border-radius: 1rem; background: var(--card); color: var(--ink); border: 2px solid rgba(0, 0, 0, 0.08); box-shadow: 0 10px 30px rgba(20, 14, 6, 0.28); display: flex; flex-direction: column; gap: 0.6rem; } html[data-phase="night"] .pete-reader-typemenu { border-color: rgba(255, 255, 255, 0.12); } .pete-reader-typerow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .pete-reader-typelabel { font-size: 0.8rem; font-weight: 700; opacity: 0.7; } .pete-reader-typebtns { display: inline-flex; gap: 0.25rem; } .pete-reader-typebtns button { min-width: 2rem; height: 2rem; padding: 0 0.55rem; border-radius: 0.6rem; background: rgba(20, 14, 6, 0.06); color: var(--ink); font-weight: 700; font-size: 0.82rem; border: 2px solid transparent; cursor: pointer; transition: background 0.15s ease; } html[data-phase="night"] .pete-reader-typebtns button { background: rgba(255, 255, 255, 0.08); } .pete-reader-typebtns button:hover { background: rgba(20, 14, 6, 0.12); } .pete-reader-typebtns button.is-active { background: var(--accent); color: #1c1305; border-color: transparent; } .pete-reader-voicerow[hidden] { display: none; } .pete-reader-voice { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.4rem; border-radius: 0.55rem; border: 1px solid rgba(20, 14, 6, 0.18); background: rgba(20, 14, 6, 0.06); color: inherit; max-width: 11rem; cursor: pointer; } html[data-phase="night"] .pete-reader-voice { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); } .pete-reader-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 1.75rem; } .pete-reader-scroll:focus { outline: none; } .pete-reader-article { background: var(--card); color: var(--ink); border-radius: 1.75rem; border: 2px solid rgba(0, 0, 0, 0.06); box-shadow: 0 6px 0 rgba(60, 40, 20, 0.12), 0 16px 32px rgba(60, 40, 20, 0.18); padding: clamp(1.25rem, 4vw, 2.5rem); } html[data-phase="night"] .pete-reader-article { border-color: rgba(255, 255, 255, 0.08); } .pete-reader-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.85rem; } .pete-reader-chip { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 9999px; padding: 0.15rem 0.65rem; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .pete-reader-source { font-weight: 700; opacity: 0.75; } .pete-reader-time { opacity: 0.55; } .pete-reader-title { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin-bottom: 1rem; } .pete-reader-hero { width: 100%; border-radius: 1.1rem; margin-bottom: 1.25rem; background: rgba(0, 0, 0, 0.05); } /* Reader typography, driven by the Aa popover and persisted per-device. The size lives as a CSS var on the scroll container; font + paper are classes. */ .pete-reader-scroll { --reader-fs: 1.08rem; } .pete-reader-body { font-size: var(--reader-fs); line-height: 1.75; } .pete-reader-body p { margin-bottom: 1.05em; } .pete-reader-body p:last-child { margin-bottom: 0; } .pete-reader-scroll.is-size-s { --reader-fs: 0.98rem; } .pete-reader-scroll.is-size-m { --reader-fs: 1.08rem; } .pete-reader-scroll.is-size-l { --reader-fs: 1.22rem; } .pete-reader-scroll.is-size-xl { --reader-fs: 1.4rem; } .pete-reader-scroll.is-serif .pete-reader-body { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; } /* Sepia paper: warm background + ink regardless of day/night phase. */ .pete-reader-scroll.is-sepia .pete-reader-article { background: #f6ecd6; color: #4a3a28; border-color: rgba(74, 58, 40, 0.16); } .pete-reader-scroll.is-sepia .pete-reader-note { border-top-color: rgba(74, 58, 40, 0.18); opacity: 0.8; } .pete-reader-scroll.is-sepia .pete-reader-hero { background: rgba(74, 58, 40, 0.08); } /* Currently-spoken paragraph highlight while reading aloud. */ .pete-reader-body p.is-speaking { background: color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 0.4rem; box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--accent) 32%, transparent); } .pete-reader-note { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.85rem; opacity: 0.7; } html[data-phase="night"] .pete-reader-note { border-color: rgba(255, 255, 255, 0.12); } .pete-reader-note a { color: var(--accent); font-weight: 700; } .pete-reader-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: clamp(2rem, 8vw, 4rem) 1rem; color: var(--ink); } .pete-reader-empty-emoji { font-size: 2.5rem; } /* Transient confirmation toast (e.g. "Link copied") shown over the reader. */ .pete-reader-toast { position: absolute; left: 50%; bottom: 4.5rem; transform: translate(-50%, 0.5rem); z-index: 20; padding: 0.5rem 0.9rem; border-radius: 9999px; background: rgba(20, 14, 6, 0.9); color: #fff; font-weight: 700; font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .pete-reader-toast.is-shown { opacity: 1; transform: translate(-50%, 0); } .pete-reader-hint { text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .pete-reader-hint kbd { font-family: ui-monospace, monospace; background: rgba(255, 255, 255, 0.16); border-radius: 0.3rem; padding: 0.05rem 0.3rem; } @media (max-width: 640px) { .pete-reader-hint { display: none; } /* With Listen/Share/Aa added, let the toolbar wrap instead of overflowing. */ .pete-reader-bar { flex-wrap: wrap; } .pete-reader-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.4rem; } } /* "You might also like" rail, shown under the article in feed mode. Lives inside the reader's scroll area, below the article card. */ .pete-reader-related { width: 100%; margin: 0.85rem auto 0; } .pete-reader-related-title { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 0.95rem; color: #fff; margin: 0 0 0.6rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .pete-reader-related-grid { display: grid; gap: 0.6rem; } .pete-reader-related-card { display: flex; align-items: center; gap: 0.75rem; background: var(--card); color: var(--ink); border-radius: 1rem; border: 2px solid rgba(0, 0, 0, 0.06); padding: 0.6rem; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .pete-reader-related-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(60, 40, 20, 0.16); } html[data-phase="night"] .pete-reader-related-card { border-color: rgba(255, 255, 255, 0.08); } .pete-reader-related-thumb { width: 4.5rem; height: 3.25rem; flex-shrink: 0; object-fit: cover; border-radius: 0.6rem; background: rgba(0, 0, 0, 0.06); } .pete-reader-related-meta { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .pete-reader-related-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.7rem; } .pete-reader-related-source { font-weight: 700; opacity: 0.7; } .pete-reader-related-headline { font-weight: 700; line-height: 1.25; font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Grid treatment for stories already read in feed mode: dimmed, with a small corner check. Hovering restores full opacity so nothing feels lost. */ [data-story-card][data-read="1"] { opacity: 0.5; transition: opacity 0.2s ease; } [data-story-card][data-read="1"]:hover { opacity: 1; } [data-story-card][data-read="1"]::after { content: "✓"; position: absolute; top: 0.6rem; right: 0.6rem; z-index: 6; display: grid; place-items: center; height: 1.5rem; width: 1.5rem; border-radius: 9999px; background: rgba(20, 14, 6, 0.72); color: #fff; font-size: 0.8rem; font-weight: 700; } /* ---- the casino --------------------------------------------------------- Cards are dealt, not swapped in: each one starts at the shoe in the corner, flies to its place, and turns over. The whole point of the table is that you watch it happen, so this is written as one animation per card with a delay, and the JS just says which cards exist and in what order. */ .pete-felt { background: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,0.10), transparent 60%), linear-gradient(160deg, #2f7d5b 0%, #24614a 55%, #1c4d3c 100%); } /* The shoe: where every card comes from. */ .pete-shoe { position: absolute; top: 1.25rem; right: 1.25rem; height: 4.2rem; width: 3rem; border-radius: 0.55rem; background: linear-gradient(150deg, #b4553f, #8d3f2f); border: 2px solid rgba(0,0,0,0.18); box-shadow: 0 4px 0 rgba(0,0,0,0.18), inset 0 0 0 3px rgba(255,255,255,0.12); } .pete-shoe::after { content: ""; position: absolute; inset: 0.45rem 0.4rem auto 0.4rem; height: 0.5rem; border-radius: 0.2rem; background: rgba(0,0,0,0.22); } .pete-hand { display: flex; flex-wrap: wrap; gap: 0.6rem; min-height: 6.6rem; } /* One card. The wrapper does the flight, the inner face does the flip, so the two never fight over the same transform. */ .pete-card { perspective: 700px; height: 6.4rem; width: 4.5rem; animation: pete-deal 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .pete-card-inner { position: relative; height: 100%; width: 100%; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } /* Face-down is the resting state of a card that hasn't been turned over: the hole card sits like this until the dealer plays. */ .pete-card[data-face="down"] .pete-card-inner { transform: rotateY(180deg); } .pete-card-front, .pete-card-back { position: absolute; inset: 0; display: grid; border-radius: 0.55rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 3px 0 rgba(0,0,0,0.18), 0 6px 14px rgba(0,0,0,0.22); } .pete-card-front { place-items: center; background: #fdfaf2; border: 2px solid rgba(30,20,10,0.12); color: #2b2118; font-family: "Fredoka", "Nunito", system-ui, sans-serif; line-height: 1; } .pete-card-front[data-red="1"] { color: #cc3d4a; } .pete-card-back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 6px, transparent 6px 12px), linear-gradient(150deg, #b4553f, #8d3f2f); border: 2px solid rgba(0,0,0,0.15); } .pete-card-rank { font-size: 1.5rem; font-weight: 700; } .pete-card-suit { font-size: 1.15rem; margin-top: 0.1rem; } /* The flight itself: out of the shoe (up and to the right), scaled down and spinning slightly, into place. */ @keyframes pete-deal { from { opacity: 0; transform: translate(var(--deal-x, 14rem), var(--deal-y, -7rem)) scale(0.72) rotate(9deg); } to { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); } } /* A settled hand: the winning side gets a little lift, so a win reads at a glance rather than only in the text. */ .pete-hand[data-won="1"] .pete-card { animation: pete-deal 0.42s cubic-bezier(0.22,1,0.36,1) backwards, pete-win 0.6s ease 0.1s; } @keyframes pete-win { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-0.6rem); } } /* Chips: the denominations you bet with. */ .pete-chip { background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.28), transparent 60%), var(--chip, #e07a5f); border: 3px dashed rgba(255,255,255,0.55); box-shadow: 0 3px 0 rgba(60,40,20,0.22), 0 6px 14px rgba(60,40,20,0.18); } .pete-chip[data-chip="5"] { --chip: #5aa9e6; } .pete-chip[data-chip="25"] { --chip: #4caf7d; } .pete-chip[data-chip="100"] { --chip: #2b2118; } .pete-chip[data-chip="500"] { --chip: #b079d6; } .pete-chip[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .pete-card { animation: none; } .pete-card-inner { transition: none; } .pete-hand[data-won="1"] .pete-card { animation: none; } } }