/* Live Ranking · Thanksgiving phone skin ("Harvest Table", owner decision 2026-10-07), from the Holiday Themes canvas boards TG-Ranking-Phone and -Anim. Every rule is scoped to #ranking-content.ranking-design.rkd-thanksgiving, so no other screen or feature is touched; the classic screens never match. The screens: a recipe-card panel under a cranberry gingham banner with a golden leaf, the prompt on a pie-dough card with its baked-crust shadow, the instruction in soft brown, each option an inked place card (the phone's own order on an espresso disc, the option's colour on a pip by its place in the document, the name in the ink, a drawn grip; the row being dragged lifts, tilts and turns gold), Submit on a pumpkin card in cream Fraunces, and the end screens: "Ranking submitted!" under the county-fair prize rosette with a sage tick, "Ranking closed" under a cranberry padlock with two fallen leaves. No paused face (a stop shows "Ranking closed", held back by index.html until the display's TOP PICK rosette lands, stopDelayMs). No Borda points or figures anywhere. /ranking-designs/thanksgiving.js decorates the screens (rkt-* classes): which entrances play (only when a screen or a ranking arrives, never on a snapshot that only re-renders the same list), which end screen shows, and the rosette, padlock and leaf drawings. The theme's web fonts (the Mac's bundled faces, ShowThemeFonts) are declared below; the colours are ShowThemePalettes.swift's ThanksgivingPalette (the eight options by position, one dark-crust ink). The panel colour lives on this in-flow panel, never on html/body or a fixed element (the iOS 26 rule). The drag code moves rows with `transform` (and measures them 8 px apart), so the entrances animate `translate` / `rotate` / `scale` instead and the list's gap stays 8 px. */ @font-face { font-family: 'Sidekick Trivia Fraunces'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-fraunces-extra-bold-v1.woff2') format('woff2'); } @font-face { font-family: 'Sidekick Trivia Fraunces'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/sidekick-trivia-fraunces-black-v1.woff2') format('woff2'); } @font-face { font-family: 'Sidekick Trivia Fraunces'; font-style: italic; font-weight: 900; font-display: swap; src: url('/fonts/sidekick-trivia-fraunces-black-italic-v1.woff2') format('woff2'); } @font-face { font-family: 'Sidekick Trivia Bricolage'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-bricolage-semi-bold-v1.woff2') format('woff2'); } @font-face { font-family: 'Sidekick Trivia Bricolage'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-bricolage-bold-v1.woff2') format('woff2'); } @font-face { font-family: 'Sidekick Trivia Bricolage'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-bricolage-extra-bold-v1.woff2') format('woff2'); } /* ── The panel: a recipe card under the gingham banner ── */ #ranking-content.ranking-design.rkd-thanksgiving { --rkt-ink: #2A160D; --rkt-cream: #FFF4E2; --rkt-paper: #FFF8EC; --rkt-dough: #FBE8C6; --rkt-crust: #C9842F; --rkt-gold: #E9A81A; --rkt-cranberry: #A8233D; --rkt-pumpkin: #D9611C; --rkt-shadow: #140803; --rkt-muted: #6B5040; --rkt-serve: cubic-bezier(0.34, 1.56, 0.64, 1); --rkt-row: 66px; --rkt-c: #D9611C; --rkt-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 108'%3E%3Cpath d='M50 2 L57 20 L66 14 L64 34 L78 24 L76 36 L92 34 L84 48 L96 54 L78 62 L82 74 L62 70 L58 78 L52 74 L53 98 L47 98 L48 74 L42 78 L38 70 L18 74 L22 62 L4 54 L16 48 L8 34 L24 36 L22 24 L36 34 L34 14 L43 20 Z' fill='%23E9A81A' stroke='%232A160D' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E"); position: relative; isolation: isolate; margin: -8px -4px 0; padding: 0 16px 22px; min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); box-sizing: border-box; border: 4px solid var(--rkt-ink); border-radius: 26px; overflow: hidden; text-align: center; font-family: 'Sidekick Trivia Bricolage', system-ui, sans-serif; font-weight: 800; color: var(--rkt-ink); background: var(--rkt-paper); } /* The banner: cranberry gingham with a golden maple leaf. */ #ranking-content.ranking-design.rkd-thanksgiving::before { content: 'Live Ranking'; display: block; margin: 0 -16px 20px; padding: 15px 18px 13px; background: var(--rkt-leaf) no-repeat calc(50% - 82px) 50% / 30px 30px, repeating-linear-gradient(90deg, rgba(233, 168, 26, 0.22) 0 18px, rgba(0, 0, 0, 0) 18px 34px), repeating-linear-gradient(0deg, rgba(233, 168, 26, 0.22) 0 18px, rgba(0, 0, 0, 0) 18px 34px), var(--rkt-cranberry); border-bottom: 4px solid var(--rkt-ink); color: var(--rkt-cream); font-family: 'Sidekick Trivia Fraunces', Georgia, serif; font-weight: 900; font-style: italic; font-size: 26px; line-height: 1; text-indent: 40px; white-space: nowrap; } /* ── The prompt: a pie-dough card on its baked crust ── */ #ranking-content.ranking-design.rkd-thanksgiving #ranking-question { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 92px; margin: 0 6px 18px; padding: 14px 16px; box-sizing: border-box; background: var(--rkt-dough); color: var(--rkt-ink); border: 4px solid var(--rkt-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--rkt-crust); font-family: 'Sidekick Trivia Fraunces', Georgia, serif; font-weight: 800; font-size: 25px; line-height: 1.12; overflow-wrap: anywhere; } /* A long prompt (thanksgiving.js marks one over 48 characters) steps down. */ #ranking-content.ranking-design.rkd-thanksgiving.rkt-long #ranking-question { font-size: 20px; } /* ── The instruction ── */ #ranking-content.ranking-design.rkd-thanksgiving .ranking-instruction { margin: 0 -6px 14px; color: var(--rkt-muted); font-family: 'Sidekick Trivia Bricolage', system-ui, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3; white-space: nowrap; } /* ── The list: inked place cards, 8 px apart (initRankingDrag's measure) ── */ #ranking-content.ranking-design.rkd-thanksgiving .ranking-list { gap: 8px; margin: 0 6px 22px; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item { height: var(--rkt-row); min-height: 0; box-sizing: border-box; gap: 10px; padding: 0 12px 0 8px; border-radius: 16px; color: var(--rkt-ink); background: var(--rkt-paper); border: 5px solid var(--rkt-ink); box-shadow: inset 0 0 0 5px rgba(255, 244, 226, 0.16), 0 5px 0 var(--rkt-shadow); transition: box-shadow 0.12s ease, background-color 0.12s ease; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item[data-index="0"] { --rkt-c: #D9611C; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item[data-index="1"] { --rkt-c: #A8233D; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item[data-index="2"] { --rkt-c: #3E7B4E; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item[data-index="3"] { --rkt-c: #B98309; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item[data-index="4"] { --rkt-c: #6E3B70; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item[data-index="5"] { --rkt-c: #2C6674; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item[data-index="6"] { --rkt-c: #8E4A22; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item[data-index="7"] { --rkt-c: #4E5E8C; } /* The phone's own order, cream on an espresso disc. */ #ranking-content.ranking-design.rkd-thanksgiving .ranking-item .rank-number { flex: 0 0 auto; width: 40px; height: 40px; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--rkt-ink); color: var(--rkt-cream); font-family: 'Sidekick Trivia Fraunces', Georgia, serif; font-weight: 900; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item .rank-number.rkt-bump { animation: rktBump 0.3s var(--rkt-serve); } /* The option's colour, by its place in the document. */ #ranking-content.ranking-design.rkd-thanksgiving .ranking-item .rank-color { flex: 0 0 auto; width: 14px; height: 38px; box-sizing: border-box; border-radius: 7px; background: var(--rkt-c); border: 3px solid var(--rkt-ink); } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item .rank-name { font-family: 'Sidekick Trivia Bricolage', system-ui, sans-serif; font-weight: 800; font-size: 20px; line-height: 1.05; color: var(--rkt-ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; } /* A long name (thanksgiving.js) on two smaller lines. */ #ranking-content.ranking-design.rkd-thanksgiving .ranking-item .rkt-n2 { font-size: 17px; } /* The grip: three drawn bars instead of the ☰ glyph. */ #ranking-content.ranking-design.rkd-thanksgiving .ranking-item .drag-handle { flex: 0 0 auto; width: 26px; height: 18px; font-size: 0; color: transparent; background: linear-gradient(var(--rkt-ink), var(--rkt-ink)) 0 0 / 100% 4px no-repeat, linear-gradient(var(--rkt-ink), var(--rkt-ink)) 0 50% / 100% 4px no-repeat, linear-gradient(var(--rkt-ink), var(--rkt-ink)) 0 100% / 100% 4px no-repeat; } /* The row being dragged lifts, tilts and turns gold (the drag owns `transform`). */ #ranking-content.ranking-design.rkd-thanksgiving .ranking-item.dragging { opacity: 1; background: var(--rkt-gold); box-shadow: inset 0 0 0 5px rgba(255, 244, 226, 0.16), 0 11px 0 var(--rkt-shadow), 0 18px 26px rgba(0, 0, 0, 0.3); rotate: -2.5deg; } /* ── Submit: the pumpkin place card ── */ #ranking-content.ranking-design.rkd-thanksgiving .ranking-submit-btn { width: calc(100% - 12px); margin: 0 6px; height: 66px; padding: 0 12px; background: var(--rkt-pumpkin); color: var(--rkt-cream); border: 5px solid var(--rkt-ink); border-radius: 18px; box-shadow: inset 0 0 0 5px rgba(255, 244, 226, 0.16), 0 9px 0 var(--rkt-shadow); font-family: 'Sidekick Trivia Fraunces', Georgia, serif; font-weight: 900; font-size: 30px; line-height: 1; text-shadow: 2px 2px 0 var(--rkt-ink); transition: transform 0.1s, box-shadow 0.1s; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submit-btn:active:not(:disabled) { transform: translateY(6px); box-shadow: inset 0 0 0 5px rgba(255, 244, 226, 0.16), 0 3px 0 var(--rkt-shadow); } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submit-btn:disabled { opacity: 1; background: #B9A48E; color: #F3E6CF; } /* ── The end screens: the prize rosette, and the cranberry padlock ── */ #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted { position: relative; padding: 10px 0 20px; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted > div:first-child { position: relative; width: 230px; height: 276px; margin: 0 auto 18px !important; font-size: 0 !important; color: transparent; } /* What thanksgiving.js adds stays hidden outside this design. */ .rkt-only { display: none; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-only.rkt-icon { display: block; position: absolute; inset: 0; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-only.rkt-leaves { display: block; position: relative; height: 120px; margin-top: 18px; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-icon .rkt-lock { display: none; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted.rkt-closed .rkt-icon .rkt-rosette { display: none; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted.rkt-closed .rkt-icon .rkt-lock { display: block; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted:not(.rkt-closed) .rkt-leaves { display: none; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted.rkt-closed > div:first-child { width: 180px; height: 180px; margin: 30px auto 34px !important; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-rosette { rotate: -6deg; transform-origin: 50% 40%; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-rosette .rkt-tick { stroke-dasharray: 100 200; stroke-dashoffset: 0; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-leaves svg { position: absolute; overflow: visible; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-leaves .rkt-leaf-a { left: 22px; top: 0; width: 100px; height: 100px; rotate: 20deg; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-leaves .rkt-leaf-b { right: 30px; top: 28px; width: 86px; height: 86px; rotate: -30deg; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted h2 { position: relative; margin: 0 -12px 12px; color: var(--rkt-ink); font-family: 'Sidekick Trivia Fraunces', Georgia, serif; font-weight: 900; font-size: 30px; line-height: 1.05; white-space: nowrap; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted.rkt-closed h2 { font-size: clamp(36px, calc(11.5vw - 2px), 44px); } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted p { position: relative; margin: 0; color: var(--rkt-muted); font-family: 'Sidekick Trivia Bricolage', system-ui, sans-serif; font-weight: 600; font-size: 21px; line-height: 1.3; } /* ── Entrances: only when a screen or a ranking arrives (.rkt-enter) ── */ /* The prompt drops onto the table with a list; an end screen keeps it put. */ #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter:not(.rkt-done) #ranking-question { animation: rktDrop 0.75s var(--rkt-serve) backwards; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-instruction { animation: rktRise 0.6s 0.45s var(--rkt-serve) backwards; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-item { animation: rktServe 0.75s 0.2s var(--rkt-serve) backwards; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-item:nth-child(2) { animation-delay: 0.32s; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-item:nth-child(3) { animation-delay: 0.44s; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-item:nth-child(4) { animation-delay: 0.56s; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-item:nth-child(5) { animation-delay: 0.68s; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-item:nth-child(6) { animation-delay: 0.8s; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-item:nth-child(7) { animation-delay: 0.92s; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-item:nth-child(8) { animation-delay: 1.04s; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-submit-btn { animation: rktRise 0.75s 0.9s var(--rkt-serve) backwards; } /* "Ranking submitted!": the rosette pops on turning to rest, its tick draws on, the words rise. */ #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-submitted.rkt-submitted .rkt-rosette { animation: rktRosette 0.6s 0.25s var(--rkt-serve) backwards; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-submitted.rkt-submitted .rkt-tick { animation: rktDraw 0.35s 0.7s ease-in-out backwards; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-submitted.rkt-submitted h2, #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-submitted.rkt-submitted p { animation: rktRise 0.6s 0.1s var(--rkt-serve) backwards; } /* "Ranking closed" lands 0.7 s after it shows: the padlock pops 0.2 s in over 0.5 s (RankingThanksgivingDesign.phoneClosedLanding; the tests read this timing), its words rising with it. The Mac's stopDelayMs is the TOP PICK rosette's landing less 0.7 s, so it lands with the projector's rosette. Then the padlock gives a shake and the leaves settle. */ #ranking-content.ranking-design.rkd-thanksgiving .rkt-lock { animation: rktPop 0.5s 0.2s var(--rkt-serve) backwards; } #ranking-content.ranking-design.rkd-thanksgiving:not(.rkt-enter) .rkt-lock { animation: none; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-submitted.rkt-closed h2, #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-submitted.rkt-closed p { animation: rktRise 0.5s 0.2s var(--rkt-serve) backwards; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-submitted.rkt-closed .rkt-icon { animation: rktShake 0.5s 0.6s ease-out; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-enter .ranking-submitted.rkt-closed .rkt-leaves svg { animation: rktFall 0.9s 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes rktDrop { from { translate: 0 -600px; rotate: -7deg; } } @keyframes rktServe { from { translate: 440px 0; rotate: 6deg; } } @keyframes rktRise { from { translate: 0 420px; } } @keyframes rktPop { from { scale: 0.001; } } @keyframes rktRosette { from { scale: 0.001; rotate: -36deg; } } @keyframes rktDraw { from { stroke-dashoffset: 100; } } @keyframes rktShake { 20% { rotate: 9deg; } 45% { rotate: -7deg; } 70% { rotate: 4deg; } 100% { rotate: 0deg; } } @keyframes rktFall { from { translate: 0 -260px; } } @keyframes rktBump { 50% { scale: 1.2; } } /* ── 6+ options (index.html's .compact): shorter cards ── */ #ranking-content.ranking-design.rkd-thanksgiving.compact { --rkt-row: 50px; padding-bottom: 16px; } #ranking-content.ranking-design.rkd-thanksgiving.compact::before { margin-bottom: 14px; padding: 12px 18px 10px; font-size: 22px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-submit-btn { height: 56px; font-size: 26px; } #ranking-content.ranking-design.rkd-thanksgiving.compact #ranking-question { min-height: 0; margin-bottom: 14px; padding: 10px 14px; font-size: 24px; } #ranking-content.ranking-design.rkd-thanksgiving.compact.rkt-long #ranking-question { font-size: 19px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-instruction { margin-bottom: 10px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-list { margin-bottom: 16px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-item { padding: 0 12px 0 8px; gap: 10px; border-width: 4px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-item .rank-number { width: 32px; height: 32px; font-size: 18px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-item .rank-color { height: 28px; width: 12px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-item .rank-name { font-size: 19px; -webkit-line-clamp: 1; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-item .rkt-n2 { font-size: 16px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-item .drag-handle { height: 15px; background-size: 100% 3px; } /* ── Shorter phones: everything still fits one screen ── */ @media (max-height: 740px) { #ranking-content.ranking-design.rkd-thanksgiving { --rkt-row: 56px; padding: 0 12px 14px; } #ranking-content.ranking-design.rkd-thanksgiving::before { margin: 0 -12px 12px; padding: 11px 18px 9px; font-size: 22px; } #ranking-content.ranking-design.rkd-thanksgiving #ranking-question { min-height: 0; padding: 10px 12px; margin-bottom: 12px; font-size: 23px; } #ranking-content.ranking-design.rkd-thanksgiving.rkt-long #ranking-question { font-size: 18px; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-instruction { font-size: 14px; margin-bottom: 10px; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-list { margin-bottom: 14px; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item .rank-number { width: 34px; height: 34px; font-size: 19px; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item .rank-color { height: 32px; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-item .rank-name { font-size: 19px; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submit-btn { height: 54px; font-size: 26px; } #ranking-content.ranking-design.rkd-thanksgiving.compact { --rkt-row: 44px; padding: 0 12px 6px; } #ranking-content.ranking-design.rkd-thanksgiving.compact::before { margin-bottom: 8px; padding: 9px 18px 7px; font-size: 19px; } #ranking-content.ranking-design.rkd-thanksgiving.compact #ranking-question { margin: 0 6px 8px; padding: 7px 10px; border-width: 3px; font-size: 19px; } #ranking-content.ranking-design.rkd-thanksgiving.compact.rkt-long #ranking-question { font-size: 15px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-instruction { font-size: 13px; margin-bottom: 6px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-list { margin-bottom: 10px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-submit-btn { height: 48px; font-size: 23px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-item .rank-number { width: 28px; height: 28px; font-size: 16px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-item .rank-color { height: 24px; } #ranking-content.ranking-design.rkd-thanksgiving.compact .ranking-item .rank-name { font-size: 17px; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted > div:first-child { width: 190px; height: 228px; margin-bottom: 12px !important; } #ranking-content.ranking-design.rkd-thanksgiving .ranking-submitted.rkt-closed > div:first-child { width: 150px; height: 150px; margin: 16px auto 24px !important; } #ranking-content.ranking-design.rkd-thanksgiving .rkt-only.rkt-leaves { height: 96px; margin-top: 10px; } } @media (prefers-reduced-motion: reduce) { #ranking-content.ranking-design.rkd-thanksgiving *, #ranking-content.ranking-design.rkd-thanksgiving *::before, #ranking-content.ranking-design.rkd-thanksgiving *::after, #ranking-content.ranking-design.rkd-thanksgiving { animation: none !important; transition: none !important; } }