/* ===================================================================== IVORY & OAK CHESS — Stylesheet --------------------------------------------------------------------- Table of contents 1. Design tokens (color, type, spacing) + theme + board-color + piece-style variants, all driven by data-attributes on 2. Reset & base 3. App shell / topbar 4. Layout grid (board column + sidebar) 5. Player bars & captured-piece trays 6. Board frame, coordinates, squares, pieces 7. Move highlights, drag/selection states, check glow 8. Promotion picker & thinking badge 9. Board controls 10. Sidebar: tabs, "New game" panel, move list, settings panel 11. Swatches (board colors / piece styles) & switches 12. Modal (game over) 13. Animations & motion 14. Responsive breakpoints 15. Accessibility (focus rings, reduced motion) ===================================================================== */ /* -------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------- */ :root{ /* Type */ --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace; /* Radii / shadow / motion */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-1: 0 1px 2px rgba(0,0,0,.25); --shadow-2: 0 6px 20px rgba(0,0,0,.35); --shadow-3: 0 16px 48px rgba(0,0,0,.45); --ease: cubic-bezier(.4,0,.2,1); --dur-fast: .12s; --dur-med: .22s; --dur-slow: .4s; --accent-red: #d1574a; --accent-green: #6f9a52; --focus-ring: #7fb2e0; } /* ---- Theme: dark (default) ---- */ html[data-theme="dark"]{ --bg-canvas: #11151a; --bg-canvas-2: #0d1013; --bg-surface: #1a2027; --bg-surface-2: #222a33; --bg-inset: #0c0f12; --border: #2c343e; --border-soft: #232a32; --text-primary: #ece7de; --text-secondary: #9aa3ac; --text-tertiary: #6b7480; --accent-brass: #c9a24a; --accent-brass-strong: #e6c669; --overlay-scrim: rgba(6,8,10,.68); } /* ---- Theme: light ---- */ html[data-theme="light"]{ --bg-canvas: #eef0ea; --bg-canvas-2: #e5e7e0; --bg-surface: #ffffff; --bg-surface-2: #f4f2ea; --bg-inset: #dfe1d8; --border: #d9dad0; --border-soft: #e5e6de; --text-primary: #24262b; --text-secondary: #5c6169; --text-tertiary: #868c92; --accent-brass: #a8813a; --accent-brass-strong: #8d6a2c; --overlay-scrim: rgba(40,38,32,.45); } /* ---- Board color themes ---- */ html[data-board="walnut"]{ --sq-light:#eddcc0; --sq-dark:#a3714a; } html[data-board="green"]{ --sq-light:#eeeed2; --sq-dark:#769656; } html[data-board="ocean"]{ --sq-light:#dfe6ea; --sq-dark:#4c7899; } html[data-board="slate"]{ --sq-light:#e9e9ea; --sq-dark:#6f6f76; } html[data-board="midnight"]{ --sq-light:#e6e0f7; --sq-dark:#5b4b8a; } html[data-board="coral"]{ --sq-light:#ffe9dd; --sq-dark:#c96a52; } /* ---- Piece style "materials" (skins applied to the shared silhouette) ---- */ html[data-pieces="classic"]{ --pw-fill: #f7f3ea; --pw-stroke:#2a2a28; --pb-fill: #26241f; --pb-stroke:#000000; } html[data-pieces="wood"]{ --pw-fill: #e8caa0; --pw-stroke:#7a4f26; --pb-fill: #6b3f22; --pb-stroke:#3a2210; } html[data-pieces="marble"]{ --pw-fill: #ffffff; --pw-stroke:#9aa0a6; --pb-fill: #4b525a; --pb-stroke:#20242a; } html[data-pieces="gold"]{ --pw-fill: #f4e2a8; --pw-stroke:#8a6a1e; --pb-fill: #241f14; --pb-stroke:#000000; } /* -------------------------------------------------------------------- 2. RESET & BASE -------------------------------------------------------------------- */ *, *::before, *::after{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; background:var(--bg-canvas); color:var(--text-primary); font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background var(--dur-med) var(--ease), color var(--dur-med) var(--ease); } button{ font:inherit; color:inherit; } button{ cursor:pointer; } ol,ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,p{ margin:0; } svg{ display:block; } .icon{ width:20px; height:20px; fill:currentColor; } /* -------------------------------------------------------------------- 3. APP SHELL / TOPBAR -------------------------------------------------------------------- */ .app{ min-height:100%; display:flex; flex-direction:column; animation:app-fade-in .5s var(--ease); } .topbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--bg-canvas); background:color-mix(in srgb, var(--bg-canvas) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft); } .brand{ display:flex; align-items:center; gap:10px; } .brand-mark{ width:30px; height:30px; color:var(--accent-brass); } .brand-mark use{ fill:currentColor; } .brand-text{ display:flex; flex-direction:column; line-height:1.05; } .brand-name{ font-family:var(--font-display); font-size:19px; letter-spacing:.02em; } .brand-tag{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-tertiary); } .topbar-actions{ display:flex; align-items:center; gap:10px; } .engine-pill{ display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:var(--bg-surface); border:1px solid var(--border); font-size:12.5px; color:var(--text-secondary); } .engine-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--text-tertiary); transition:background var(--dur-med); } .engine-pill .dot.ok{ background:var(--accent-green); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-green) 25%, transparent); } .engine-pill .dot.warn{ background:#d3a23a; } .engine-pill .dot.busy{ background:var(--accent-brass); animation:pulse-dot 1s infinite; } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:var(--bg-surface); border:1px solid var(--border); transition:transform var(--dur-fast) var(--ease), background var(--dur-fast); } .icon-btn:hover{ background:var(--bg-surface-2); transform:translateY(-1px); } .icon-btn:active{ transform:scale(.94); } .icon-btn .icon-moon{ display:none; } html[data-theme="dark"] .icon-btn .icon-sun{ display:none; } html[data-theme="dark"] .icon-btn .icon-moon{ display:block; } .only-mobile{ display:none; } /* -------------------------------------------------------------------- 4. LAYOUT GRID -------------------------------------------------------------------- */ .layout{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; max-width:1320px; width:100%; margin:0 auto; padding:28px 24px 48px; align-items:start; } .board-column{ display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; } /* -------------------------------------------------------------------- 5. PLAYER BARS & CAPTURED TRAYS -------------------------------------------------------------------- */ .player-bar{ width:100%; max-width:640px; display:flex; align-items:center; gap:12px; padding:8px 4px; } .player-id{ display:flex; align-items:center; gap:10px; min-width:120px; } .player-avatar{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-surface-2); border:1px solid var(--border); font-size:16px; } .player-meta{ display:flex; flex-direction:column; line-height:1.15; } .player-name{ font-weight:600; font-size:14.5px; } .player-sub{ font-size:11.5px; color:var(--text-tertiary); } .captured-tray{ flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:1px; min-height:22px; } .captured-tray .cap-piece{ width:18px; height:18px; opacity:.92; margin-right:-6px; } .captured-tray .cap-piece svg{ width:100%; height:100%; } .material-diff{ font-family:var(--font-mono); font-size:12.5px; color:var(--accent-green); min-width:28px; text-align:right; } /* -------------------------------------------------------------------- 6. BOARD FRAME, COORDINATES, SQUARES, PIECES -------------------------------------------------------------------- */ .board-shell{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; } .board-frame{ position:relative; width:min(100%, 640px); padding:22px 22px 30px 34px; background: linear-gradient(155deg, color-mix(in srgb, var(--accent-brass) 16%, var(--bg-inset)) 0%, var(--bg-inset) 40%); border-radius:var(--radius-lg); box-shadow:var(--shadow-2), inset 0 0 0 1px var(--border-soft); } /* brass corner accents — the signature detail */ .board-frame::before, .board-frame::after{ content:""; position:absolute; width:26px; height:26px; pointer-events:none; border:2px solid var(--accent-brass); opacity:.65; border-radius:3px; } .board-frame::before{ top:8px; left:8px; border-right:none; border-bottom:none; } .board-frame::after{ bottom:8px; right:8px; border-left:none; border-top:none; } .board{ position:relative; display:grid; grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(8, 1fr); width:100%; aspect-ratio:1/1; border-radius:3px; overflow:hidden; box-shadow:0 2px 14px rgba(0,0,0,.4); touch-action:none; } .square{ position:relative; display:flex; align-items:center; justify-content:center; background:var(--sq-light); } .square.dark{ background:var(--sq-dark); } .board.thinking .piece{ cursor:default; } .board.thinking .square{ cursor:default; } .rank-labels{ position:absolute; left:7px; top:22px; bottom:30px; width:20px; display:flex; flex-direction:column; justify-content:space-around; align-items:center; pointer-events:none; } .file-labels{ position:absolute; left:34px; right:22px; bottom:7px; height:16px; display:flex; justify-content:space-around; align-items:center; pointer-events:none; } .rank-labels span, .file-labels span{ font-size:11px; font-weight:700; color:var(--text-tertiary); } .square.capture-flash::before{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent-red) 55%, transparent) 0%, transparent 70%); animation:capture-flash .26s ease-out; pointer-events:none; } @keyframes capture-flash{ from{ opacity:1; transform:scale(.6);} to{ opacity:0; transform:scale(1.3);} } .piece{ position:relative; z-index:5; width:84%; height:84%; cursor:grab; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); transition:transform var(--dur-fast) var(--ease); touch-action:none; } .piece:active{ cursor:grabbing; } .piece.piece-white{ color:var(--pw-fill); } .piece.piece-black{ color:var(--pb-fill); } .piece svg{ width:100%; height:100%; overflow:visible; } .piece.piece-white svg{ fill:var(--pw-fill); stroke:var(--pw-stroke); stroke-width:1.5px; paint-order:stroke; } .piece.piece-black svg{ fill:var(--pb-fill); stroke:var(--pb-stroke); stroke-width:1.5px; paint-order:stroke; } .piece .piece-eye{ fill:var(--sq-light) !important; stroke:none !important; } .piece.dragging{ z-index:50; cursor:grabbing; filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); transition:none; } .piece.piece-lift{ transform:scale(1.08); } .piece.piece-capturing{ animation:piece-capture-out var(--dur-med) var(--ease) forwards; } .piece.piece-enter{ animation:piece-enter-pop var(--dur-med) var(--ease); } /* -------------------------------------------------------------------- 7. HIGHLIGHTS / SELECTION / CHECK -------------------------------------------------------------------- */ .square.last-move{ background-color:rgba(201,162,74,.42); background-image:linear-gradient(color-mix(in srgb, var(--accent-brass) 42%, transparent), color-mix(in srgb, var(--accent-brass) 42%, transparent)); } .square.selected{ background-color:rgba(255,255,255,.38); background-image:linear-gradient(color-mix(in srgb, #ffffff 38%, transparent), color-mix(in srgb, #ffffff 38%, transparent)); } .square.legal-move::after{ content:""; position:absolute; width:32%; height:32%; border-radius:50%; background:rgba(0,0,0,.24); background:color-mix(in srgb, #000000 24%, transparent); pointer-events:none; } .square.dark.legal-move::after{ background:rgba(0,0,0,.3); background:color-mix(in srgb, #000000 30%, transparent); } .square.legal-capture::after{ content:""; position:absolute; inset:6%; border-radius:50%; background:transparent; border:5px solid rgba(0,0,0,.26); border-color:color-mix(in srgb, #000000 26%, transparent); pointer-events:none; } .square.drop-hover{ box-shadow:inset 0 0 0 4px color-mix(in srgb, var(--accent-brass) 70%, transparent); } .square.in-check{ animation:check-pulse 1.1s ease-in-out infinite; } .square.hint{ cursor:pointer; } /* -------------------------------------------------------------------- 8. PROMOTION PICKER & THINKING BADGE -------------------------------------------------------------------- */ .promo-picker{ position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; gap:14px; background:var(--overlay-scrim); backdrop-filter:blur(2px); border-radius:3px; animation:fade-in var(--dur-fast) var(--ease); } .promo-btn{ width:64px; height:64px; border-radius:var(--radius-md); background:var(--bg-surface); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; padding:8px; box-shadow:var(--shadow-2); transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast); } .promo-btn:hover{ transform:translateY(-3px); border-color:var(--accent-brass); } .promo-btn .piece{ width:100%; height:100%; cursor:pointer; } .thinking-badge{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:45; display:flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:color-mix(in srgb, var(--bg-canvas-2) 90%, transparent); border:1px solid var(--border); color:var(--text-secondary); font-size:12.5px; box-shadow:var(--shadow-1); animation:fade-in var(--dur-fast) var(--ease); } .spinner{ width:11px; height:11px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--accent-brass); animation:spin .7s linear infinite; } /* -------------------------------------------------------------------- 9. BOARD CONTROLS -------------------------------------------------------------------- */ .board-controls{ display:flex; gap:10px; width:100%; max-width:640px; } .ctrl-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 12px; border-radius:var(--radius-md); background:var(--bg-surface); border:1px solid var(--border); font-size:13.5px; font-weight:600; transition:transform var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast); } .ctrl-btn .icon{ width:16px; height:16px; } .ctrl-btn:hover{ background:var(--bg-surface-2); border-color:var(--accent-brass); } .ctrl-btn:active{ transform:scale(.96); } .ctrl-btn:disabled{ opacity:.4; pointer-events:none; } /* -------------------------------------------------------------------- 10. SIDEBAR -------------------------------------------------------------------- */ .sidebar{ background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); position:sticky; top:78px; max-height:calc(100vh - 100px); display:flex; flex-direction:column; } .tabs{ display:flex; border-bottom:1px solid var(--border-soft); flex-shrink:0; } .tab{ flex:1; padding:13px 8px; text-align:center; font-size:13px; font-weight:600; color:var(--text-tertiary); background:transparent; border:none; border-bottom:2px solid transparent; transition:color var(--dur-fast), border-color var(--dur-fast); } .tab:hover{ color:var(--text-primary); } .tab.active{ color:var(--accent-brass); border-bottom-color:var(--accent-brass); } .tab-panel{ padding:20px; overflow-y:auto; } .tab-panel[hidden]{ display:none; } .panel-title{ font-family:var(--font-display); font-size:18px; margin-bottom:16px; } .field{ margin-bottom:20px; } .field-label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); margin-bottom:9px; } .field-row{ display:flex; align-items:center; justify-content:space-between; } .field-row .field-label{ margin-bottom:0; } .segmented{ display:flex; background:var(--bg-surface-2); border-radius:var(--radius-md); padding:3px; gap:3px; } .seg-btn{ flex:1; padding:8px 6px; border-radius:7px; background:transparent; border:none; font-size:12.5px; font-weight:600; color:var(--text-secondary); transition:background var(--dur-fast), color var(--dur-fast); } .seg-btn[aria-pressed="true"]{ background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--shadow-1); } .diff-list{ display:flex; flex-direction:column; gap:8px; } .diff-btn{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 13px; border-radius:var(--radius-md); background:var(--bg-surface-2); border:1px solid transparent; text-align:left; transition:border-color var(--dur-fast), transform var(--dur-fast); } .diff-btn:hover{ transform:translateY(-1px); } .diff-btn[aria-pressed="true"]{ border-color:var(--accent-brass); background:color-mix(in srgb, var(--accent-brass) 12%, var(--bg-surface-2)); } .diff-name{ font-weight:700; font-size:13.5px; display:block; } .diff-desc{ font-size:11.5px; color:var(--text-tertiary); display:block; margin-top:1px; } .diff-stars{ display:flex; gap:2px; flex-shrink:0; } .diff-stars .star{ width:7px; height:7px; border-radius:50%; background:var(--border); } .diff-stars .star.on{ background:var(--accent-brass); } .btn-primary{ width:100%; padding:13px; border-radius:var(--radius-md); border:none; background:linear-gradient(155deg, var(--accent-brass-strong), var(--accent-brass)); color:#1a1408; font-weight:700; font-size:14px; box-shadow:0 4px 14px color-mix(in srgb, var(--accent-brass) 35%, transparent); transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast); } .btn-primary:hover{ transform:translateY(-1px); } .btn-primary:active{ transform:scale(.98); } .btn-secondary{ padding:13px 18px; border-radius:var(--radius-md); background:var(--bg-surface-2); border:1px solid var(--border); font-weight:600; font-size:14px; color:var(--text-primary); } .btn-secondary:hover{ background:var(--bg-inset); } .pgn-actions{ margin-top:14px; text-align:center; } .link-btn{ background:none; border:none; color:var(--text-tertiary); font-size:12px; text-decoration:underline; text-underline-offset:3px; } .link-btn:hover{ color:var(--accent-brass); } /* Move list */ .move-list{ display:flex; flex-direction:column; gap:1px; font-family:var(--font-mono); font-size:13px; } .move-empty{ color:var(--text-tertiary); font-family:var(--font-body); font-size:13px; } .move-row{ display:grid; grid-template-columns:32px 1fr 1fr; gap:6px; padding:5px 6px; border-radius:6px; } .move-row:nth-child(odd){ background:var(--bg-surface-2); } .move-num{ color:var(--text-tertiary); } .move-san{ padding:2px 6px; border-radius:4px; color:var(--text-primary); } .move-san.current{ background:color-mix(in srgb, var(--accent-brass) 30%, transparent); font-weight:700; } .move-san.empty{ visibility:hidden; } /* -------------------------------------------------------------------- 11. SWATCHES & SWITCHES -------------------------------------------------------------------- */ .switch{ width:42px; height:24px; border-radius:999px; padding:2px; background:var(--bg-inset); border:1px solid var(--border); display:flex; align-items:center; transition:background var(--dur-fast); } .switch-knob{ width:18px; height:18px; border-radius:50%; background:var(--text-tertiary); transition:transform var(--dur-fast) var(--ease), background var(--dur-fast); } .switch[aria-checked="true"]{ background:color-mix(in srgb, var(--accent-brass) 55%, var(--bg-inset)); } .switch[aria-checked="true"] .switch-knob{ transform:translateX(18px); background:#fff; } .swatch-row{ display:flex; gap:10px; flex-wrap:wrap; } .swatch{ width:36px; height:36px; border-radius:9px; overflow:hidden; border:2px solid transparent; box-shadow:0 0 0 1px var(--border); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; transition:border-color var(--dur-fast), transform var(--dur-fast); } .swatch:hover{ transform:translateY(-2px); } .swatch.active{ border-color:var(--accent-brass); } .swatch span{ display:block; } .swatch-row-pieces .swatch{ display:flex; align-items:center; justify-content:center; background:var(--bg-surface-2); grid-template-columns:none; grid-template-rows:none; } .swatch-row-pieces .swatch svg{ width:22px; height:22px; } /* -------------------------------------------------------------------- 12. MODAL -------------------------------------------------------------------- */ .modal-overlay{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:var(--overlay-scrim); backdrop-filter:blur(4px); padding:20px; animation:fade-in var(--dur-med) var(--ease); } .modal-overlay[hidden]{ display:none; } .modal{ width:100%; max-width:360px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-3); padding:30px 26px 26px; text-align:center; animation:modal-pop var(--dur-med) var(--ease); } .modal-icon{ font-size:40px; margin-bottom:10px; } .modal h2{ font-family:var(--font-display); font-size:23px; margin-bottom:8px; } .modal p{ color:var(--text-secondary); font-size:14px; margin-bottom:22px; line-height:1.5; } .modal-actions{ display:flex; gap:10px; } .modal-actions button{ flex:1; } /* -------------------------------------------------------------------- 13. ANIMATIONS -------------------------------------------------------------------- */ @keyframes app-fade-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } } @keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } } @keyframes modal-pop{ from{ opacity:0; transform:scale(.94) translateY(6px);} to{ opacity:1; transform:none; } } @keyframes spin{ to{ transform:rotate(360deg); } } @keyframes pulse-dot{ 0%,100%{ opacity:1;} 50%{ opacity:.4; } } @keyframes piece-capture-out{ from{ opacity:1; transform:scale(1);} to{ opacity:0; transform:scale(.35); } } @keyframes piece-enter-pop{ from{ transform:scale(.7); opacity:.4; } to{ transform:scale(1); opacity:1; } } @keyframes check-pulse{ 0%,100%{ box-shadow:inset 0 0 0 0 rgba(209,87,74,0); } 50%{ box-shadow:inset 0 0 22px 6px rgba(209,87,74,.75); } } /* -------------------------------------------------------------------- 14. RESPONSIVE -------------------------------------------------------------------- */ @media (max-width:980px){ .layout{ grid-template-columns:1fr; padding:16px 14px 90px; gap:18px; } .sidebar{ position:static; max-height:none; } .only-mobile{ display:inline-flex; } } @media (max-width:560px){ .topbar{ padding:10px 14px; } .brand-tag{ display:none; } .engine-pill span:not(.dot){ display:none; } .engine-pill{ padding:6px 8px; } .board-frame{ padding:14px 14px 20px 22px; border-radius:12px; } .player-id{ min-width:0; } .player-name{ font-size:13px; } .board-controls{ gap:8px; } .ctrl-btn{ font-size:12px; padding:10px 6px; } .ctrl-btn .label{ display:none; } } /* -------------------------------------------------------------------- 15. ACCESSIBILITY -------------------------------------------------------------------- */ :focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } button{ font-family:inherit; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }