/* ========================================================= DARTS UNIVERSE — Prediction-Tool (Turnierbaum) Ergaenzt du-base.css (Tokens, Buttons, Felder kommen von dort). Hier nur, was der Turnierbaum braucht -- unveraendert aus der statischen Fassung uebernommen. 1. Seitenrahmen 2. Kopf 3. Zustaende 4. Steuerleiste 5. Turnierbaum 6. Champion 7. Download 8. Responsive ========================================================= */ /* ---------- 1. SEITENRAHMEN ---------- */ /* Der Verlauf sitzt auf unserem Container, nicht auf : das Theme soll seinen Hintergrund behalten duerfen. */ .du-pred{ background: radial-gradient(1100px 620px at 12% -8%, rgba(77,84,191,.22), transparent 62%), linear-gradient(180deg, var(--navy-850) 0%, var(--navy-950) 46%, var(--navy-900) 100%); } .du-pred .btn--sm, .du-adm .btn--sm{padding:11px 20px;font-size:.85rem;gap:8px;} .du-pred .btn--sm svg, .du-adm .btn--sm svg{width:16px;height:16px;} /* ---------- 2. KOPF ---------- */ .section--tool-head{ position:relative; /* Fallback 0px fuer Themes ohne fixen Header */ padding-block:calc(var(--header-h, 0px) + clamp(64px,7vw,96px)) 34px; text-align:center; } .tool-head__glow{ position:absolute;top:-180px;left:50%;transform:translateX(-50%); width:min(900px,90vw);height:520px; background:radial-gradient(closest-side, rgba(242,228,35,.14), transparent 70%); pointer-events:none; } /* Der Reset in du-base.css setzt h1/p/ul auf margin:0 und schlaegt mit seinem Elementnamen jede einklassige Regel. Alles, was hier einen Abstand braucht, wird darum mit .du-pred vorangestellt. */ .du-pred .tool-head__title{ position:relative; font-family:var(--f-display); font-weight:900;font-style:italic; font-size:clamp(2.2rem,5.4vw,4rem); line-height:1.02;letter-spacing:-.03em; text-transform:uppercase; margin-bottom:22px; } /* Zwischen Ueberschrift und Turnierkarte steht bewusst Luft -- die Karte ist ein eigener Block, kein Anhaengsel der Zeile darueber. Der Abstand liegt im padding: benachbarte margins fielen sonst zusammen und es bliebe beim alten Wert der Ueberschrift. */ .tool-head__meta{position:relative;padding-top:clamp(16px,2.6vw,30px);margin-bottom:30px;} /* ---- Turnierkarte im Kopf ---- Name, Ort und Termin in einem Stueck, mit der Goldkante und der Dartscheibe als Markenzeichen. Steht das Turnier noch an, laeuft darunter die Uhr -- das ist der lebendige Teil der Karte. */ .tcard{ position:relative; width:min(100%,460px); margin-inline:auto; text-align:center; padding:22px 26px 26px; border-radius:var(--radius); border:1px solid var(--line-strong); background: radial-gradient(440px 230px at 100% 0%, rgba(242,228,35,.12), transparent 72%), linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.02)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overflow:hidden; transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); } .tcard::before{ content:""; position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg, var(--gold), var(--gold-deep)); } .tcard:hover{ border-color:rgba(242,228,35,.45); transform:translateY(-3px); box-shadow:0 24px 54px -30px rgba(242,228,35,.7); } .tcard__board{ position:absolute;right:-28px;top:-28px; width:154px;height:154px; color:var(--gold);opacity:.10; pointer-events:none; transition:transform .9s var(--ease), opacity .4s var(--ease); } .tcard__board svg{width:100%;height:100%;stroke-width:1.1;} .tcard:hover .tcard__board{transform:rotate(26deg) scale(1.07);opacity:.2;} .du-pred .tcard__status{ position:relative; display:inline-flex;align-items:center;gap:8px; padding:5px 14px 5px 11px; border-radius:99px; border:1px solid var(--line-strong); background:rgba(10,7,32,.45); font-size:.7rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase; color:var(--mute); margin-bottom:14px; } .tcard__dot{ flex:0 0 auto; width:7px;height:7px;border-radius:50%; background:var(--mute-dim); } .tcard[data-status="live"] .tcard__status{color:#8BEFB4;border-color:rgba(106,224,150,.45);} .tcard[data-status="live"] .tcard__dot{ background:#6AE096; animation:tcardPulse 1.9s var(--ease) infinite; } .tcard[data-status="upcoming"] .tcard__dot{background:var(--gold);} @keyframes tcardPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(106,224,150,.55);} 60% {box-shadow:0 0 0 7px rgba(106,224,150,0);} } .du-pred .tcard__name{ position:relative; font-family:var(--f-display); font-weight:900;font-style:italic; font-size:clamp(1.4rem,2.6vw,1.95rem); line-height:1.08;letter-spacing:-.025em; color:var(--gold); margin-bottom:15px; } .tcard__facts{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;} .tcard__fact{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--mute);} .tcard__fact svg{ flex:0 0 auto;width:17px;height:17px; color:var(--gold);opacity:.85;stroke-width:1.7; } .tcard__countdown{ position:relative; margin-top:19px;padding-top:16px; border-top:1px solid var(--line); } .tcard__countdown-label{ display:block; font-size:.68rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--mute-dim); margin-bottom:10px; } .tcard__clock{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;} /* Jede Einheit bekommt denselben Anteil der Breite -- vierstellige Tage-Zahlen sprengen die Zeile dann nicht mehr. */ .tcard__clock-unit{ flex:1 1 0; min-width:66px; padding:12px 10px 10px; border-radius:12px; border:1px solid var(--line); background:rgba(10,7,32,.45); text-align:center; } .tcard__clock-unit b{ display:block; font-family:var(--f-display); font-weight:900;font-style:italic; font-size:1.55rem;line-height:1.1; color:var(--gold); font-variant-numeric:tabular-nums; } .tcard__clock-unit em{ display:block;font-style:normal; font-size:.63rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--mute-dim); margin-top:5px; } .du-pred .tool-head__lead{ position:relative; max-width:62ch;margin-inline:auto; font-size:clamp(.96rem,1.5vw,1.08rem); } /* Turnierseite: Ueberschrift, Karte und Einstiegstext stehen als eine mittige Spur untereinander -- wie auf der Uebersicht. */ .du-pred .section--tool-head-single{text-align:center;} /* ---------- 3. ZUSTAENDE ---------- */ .tool-state{ text-align:center; padding:clamp(48px,7vw,88px) clamp(22px,4vw,56px); margin-block:24px clamp(60px,8vw,110px); border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .tool-state p{color:var(--mute);max-width:56ch;margin-inline:auto;} .du-pred .tool-state h2{ font-family:var(--f-display); font-weight:900;font-style:italic; font-size:clamp(1.4rem,3vw,2.1rem); margin-bottom:14px; letter-spacing:-.02em; } .tool-state__ico{ display:grid;place-items:center; width:64px;height:64px;margin:0 auto 20px; border-radius:50%; border:1px solid rgba(242,228,35,.3); background:rgba(242,228,35,.08); } .tool-state__ico svg{ width:30px;height:30px; fill:none;stroke:var(--gold);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round; } .tool-state__actions{ display:flex;flex-wrap:wrap;justify-content:center;gap:12px; margin-top:28px; } .tool-state--error{border-color:rgba(255,107,129,.35);} .tool-state--error h2{color:#FF9AAB;} .tool-state__spinner{ display:block; width:34px;height:34px;margin:0 auto 18px; border:2px solid rgba(255,255,255,.14); border-top-color:var(--gold); border-radius:50%; animation:bkSpin .9s linear infinite; } @keyframes bkSpin{to{transform:rotate(360deg);}} /* ---------- 4. STEUERLEISTE ---------- */ .bk-bar{ display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:18px; padding:16px 20px; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } /* Ueber dem Baum stehen nur noch Zoom und Zuruecksetzen, der Fortschritt sitzt unter dem Baum in einer eigenen Leiste. */ .bk-bar--tools{ width:max-content;max-width:100%; margin-left:auto; padding:10px 12px; } .bk-bar--progress{margin-top:20px;} .bk-bar--progress .bk-bar__progress{flex:1 1 100%;} .bk-bar__progress{flex:1 1 260px;min-width:220px;} .bk-progress{ height:7px;border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; } .bk-progress__fill{ display:block;height:100%;width:0; border-radius:99px; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); transition:width .45s var(--ease-out); } .bk-progress.is-complete .bk-progress__fill{ box-shadow:0 0 18px rgba(242,228,35,.75); } .du-pred .bk-bar__count{ margin-top:9px; font-size:.82rem;font-weight:600; color:var(--mute); } .bk-bar__tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .bk-zoom{ display:flex;align-items:center;gap:2px; padding:4px; border-radius:99px; border:1px solid var(--line); background:rgba(10,7,32,.4); } .bk-zoom__btn{ width:32px;height:32px; border-radius:50%; color:var(--white); font-size:1.1rem;font-weight:700;line-height:1; transition:background .3s var(--ease), color .3s var(--ease); } .bk-zoom__btn:hover:not(:disabled){background:rgba(242,228,35,.14);color:var(--gold);} .bk-zoom__btn:disabled{opacity:.3;cursor:not-allowed;} .bk-zoom__value{ min-width:52px;text-align:center; font-size:.78rem;font-weight:600;color:var(--mute); } /* ---------- 5. TURNIERBAUM ---------- */ .bk-scroll{ --bk-scale:1; margin-top:20px; padding:clamp(16px,2.4vw,28px) var(--gutter); overflow:auto; overscroll-behavior-x:contain; cursor:grab; /* Zarte Kanten, damit der Baum aus der Flaeche "herauslaeuft" */ mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%); } .bk-scroll.is-dragging{cursor:grabbing;user-select:none;} .bk-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;} .bk-scroll::-webkit-scrollbar{height:10px;width:10px;} .bk-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:99px;} .bk-scroll::-webkit-scrollbar-thumb{background:rgba(242,228,35,.32);border-radius:99px;} .bk-scroll::-webkit-scrollbar-thumb:hover{background:rgba(242,228,35,.5);} /* Der Viewport traegt die skalierten Masse, damit die Scrollbalken stimmen; die Buehne darin wird tatsaechlich transformiert. */ .bk-viewport{ transform-origin:0 0; } .bk-stage{ position:relative; transform:scale(var(--bk-scale)); transform-origin:0 0; } .bk-links{position:absolute;left:0;pointer-events:none;overflow:visible;} .bk-links path{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5;} .bk-round{ position:absolute;top:0; display:flex;flex-direction:column;gap:2px; } .bk-round__name{ font-size:.72rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--gold); } .bk-round__mode{font-size:.72rem;color:var(--mute-dim);font-weight:500;} /* Eine Paarung */ .bkm{ position:absolute; display:flex;flex-direction:column; border-radius:var(--radius-sm); border:1px solid var(--line); background:linear-gradient(160deg, var(--navy-700), var(--navy-800)); overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .bkm.is-open{ border-color:rgba(242,228,35,.22); box-shadow:0 0 0 1px rgba(242,228,35,.07); } .bkm:has(.is-picked){border-color:rgba(242,228,35,.32);} .bkm.is-walkover{opacity:.62;} .bkm__side{ flex:1; display:flex;align-items:center;gap:9px; padding:0 11px; text-align:left; font-size:.83rem; color:rgba(255,255,255,.88); border:0;background:none; width:100%; position:relative; transition:background .25s var(--ease), color .25s var(--ease); } .bkm__side + .bkm__side{border-top:1px solid rgba(255,255,255,.08);} button.bkm__side{cursor:pointer;} button.bkm__side:hover{background:rgba(242,228,35,.1);color:var(--white);} button.bkm__side:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;} .bkm__side.is-picked{ background:rgba(242,228,35,.14); color:var(--white);font-weight:600; } .bkm__side.is-picked::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--gold); } .bkm__side.is-out{color:var(--mute-dim);} .bkm__side.is-bye, .bkm__side.is-pending{color:var(--mute-dim);font-style:italic;font-size:.79rem;} .bkm__flag{ flex:0 0 auto; width:22px;height:16px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(0,0,0,.35); } .bkm__flag img{width:100%;height:100%;object-fit:cover;display:block;} .bkm__flag.is-empty{box-shadow:none;background:rgba(255,255,255,.06);} .bkm__name{ flex:1 1 auto; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .bkm__seed{ flex:0 0 auto; font-size:.7rem;font-weight:600; color:var(--mute-dim); font-variant-numeric:tabular-nums; } .bkm__side.is-picked .bkm__seed{color:var(--gold);} /* ---------- 6. CHAMPION ---------- */ .bk-champ{ position:absolute; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px; padding:14px; border-radius:var(--radius); border:1px dashed var(--line-strong); background:rgba(255,255,255,.04); text-align:center; } .bk-champ.is-set{ border-style:solid; border-color:var(--gold); background:linear-gradient(160deg, rgba(242,228,35,.16), rgba(242,228,35,.05)); box-shadow:0 14px 40px -16px rgba(242,228,35,.75); } .bk-champ__label{ font-size:.64rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--gold); } .bk-champ__player{display:flex;align-items:center;gap:10px;max-width:100%;} .bk-champ__player img{ width:28px;height:21px;border-radius:3px;object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.35); flex:0 0 auto; } .bk-champ__name{ font-family:var(--f-display); font-weight:900;font-style:italic; font-size:1.05rem;letter-spacing:-.02em; color:var(--white); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .bk-champ__name.is-empty{ font-size:.92rem;font-weight:500;color:var(--mute-dim); } .du-pred .bk-hint{ margin-top:12px; font-size:.8rem;color:var(--mute-dim); text-align:center; } /* ---------- 7. DOWNLOAD ---------- */ .section--export{padding-block:clamp(56px,7vw,96px);} .export{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,60px); align-items:center; } .du-pred .export__title{margin-bottom:16px;} .export__card{ padding:clamp(24px,3vw,34px); border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } /* Die Sperre ist bewusst laut: ein blasser Tooltip wuerde uebersehen -- und ein Bild ohne Namen ist als Beleg wertlos. */ .export__gate{ display:flex;align-items:flex-start;gap:14px; padding:16px 18px; border-radius:var(--radius-sm); margin-bottom:22px; border:1px solid; transition:border-color .4s var(--ease), background .4s var(--ease); } .export__gate[data-state="locked"]{ border-color:rgba(242,228,35,.55); background:rgba(242,228,35,.09); animation:gatePulse 2.6s var(--ease) infinite; } .export__gate[data-state="ready"]{ border-color:rgba(106,224,150,.45); background:rgba(106,224,150,.09); animation:none; } @keyframes gatePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(242,228,35,.30);} 55% {box-shadow:0 0 0 9px rgba(242,228,35,0);} } .export__gate.is-nudged{animation:gateShake .5s var(--ease);} @keyframes gateShake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 45%{transform:translateX(6px);} 70%{transform:translateX(-3px);} } .export__gate-ico{ flex:0 0 auto; display:grid;place-items:center; width:38px;height:38px;border-radius:50%; } .export__gate-ico svg{ width:19px;height:19px; fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round; grid-area:1/1; } .export__gate[data-state="locked"] .export__gate-ico{ background:rgba(242,228,35,.18); } .export__gate[data-state="locked"] .ico-lock{stroke:var(--gold);} .export__gate[data-state="locked"] .ico-check{display:none;} .export__gate[data-state="ready"] .export__gate-ico{ background:rgba(106,224,150,.18); } .export__gate[data-state="ready"] .ico-check{stroke:#6AE096;} .export__gate[data-state="ready"] .ico-lock{display:none;} .export__gate-text strong{ display:block; font-size:.96rem;font-weight:700; color:var(--white); margin-bottom:3px; } .export__gate[data-state="locked"] .export__gate-text strong{color:var(--gold);} .export__gate-text p{font-size:.86rem;line-height:1.55;color:var(--mute);} /* Formatwahl: zwei grosse Kacheln statt kleiner Radiopunkte */ .du-pred .export__format{margin:0 0 16px;padding:0;border:0;min-width:0;} .export__format-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .du-pred .export__format legend{ margin-bottom:10px;padding:0; font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--mute-dim); } .fmt{position:relative;display:block;cursor:pointer;} .fmt input{position:absolute;opacity:0;pointer-events:none;} .fmt__box{ display:flex;align-items:center;gap:12px; height:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:rgba(255,255,255,.03); transition:border-color .3s var(--ease), background .3s var(--ease); } .fmt:hover .fmt__box{border-color:var(--line-strong);} .fmt input:checked + .fmt__box{ border-color:rgba(242,228,35,.6); background:rgba(242,228,35,.08); } .fmt input:focus-visible + .fmt__box{outline:2px solid var(--gold);outline-offset:2px;} .fmt__ico{ flex:0 0 auto;width:32px;height:24px; fill:none;stroke:var(--mute);stroke-width:1.8; transition:stroke .3s var(--ease); } .fmt input:checked + .fmt__box .fmt__ico{stroke:var(--gold);} .fmt__text{display:flex;flex-direction:column;line-height:1.25;min-width:0;} .fmt__text strong{font-size:.9rem;font-weight:700;color:var(--white);} .fmt__text small{font-size:.76rem;color:var(--mute);} .export__row{ display:flex;flex-wrap:wrap;gap:14px;align-items:stretch; } .field--user{flex:1 1 220px;} .field--user input{height:100%;} .export__btn{flex:0 0 auto;} .export__btn.is-locked{ background:rgba(255,255,255,.07); color:var(--mute-dim); box-shadow:none; animation:none; cursor:not-allowed; } .export__btn.is-locked::after{opacity:0;} .export__btn.is-locked:hover{transform:none;box-shadow:none;} .export__btn.is-locked .export__btn-ico{opacity:.4;} .export__btn.is-busy{pointer-events:none;opacity:.75;} .du-pred .export__note{ margin-top:14px;min-height:1.3em; font-size:.86rem;color:var(--mute); } .export__note.is-ok{color:#6AE096;} .export__note.is-warn{color:#FFD166;} /* Schlanker Footer fuer Unterseiten */ .footer__inner--slim{grid-template-columns:1.3fr 1fr auto;} /* ---------- 8. RESPONSIVE ---------- */ @media (max-width:1000px){ .export{grid-template-columns:1fr;} } @media (max-width:900px){ .footer__inner--slim{grid-template-columns:1fr;} .bk-bar{flex-direction:column;align-items:stretch;} .bk-bar--tools{width:auto;} /* In der Spalte wird aus flex-basis eine Hoehe -- ohne das hier reisst die Leiste 260 px auf. */ .bk-bar__progress{flex:0 0 auto;min-width:0;} .bk-bar__tools{justify-content:space-between;} .section--tool-head{padding-block:calc(var(--header-h, 0px) + 56px) 26px;} } @media (max-width:620px){ .bk-scroll{ mask-image:none;-webkit-mask-image:none; padding-inline:16px; margin-top:16px; } .export__row{flex-direction:column;} .export__btn{width:100%;} /* Kopf: weniger Luft, damit der Turnierbaum frueher im Bild ist. */ .section--tool-head{padding-block:calc(var(--header-h, 0px) + 44px) 18px;} .tool-head__glow{top:-140px;height:340px;} .du-pred .tool-head__title{margin-bottom:16px;} .tool-head__meta{margin-bottom:22px;} .tcard{padding:18px 18px 20px;} .tcard__board{width:118px;height:118px;right:-22px;top:-22px;} .du-pred .tcard__name{font-size:1.32rem;margin-bottom:13px;} .tcard__clock{gap:7px;} .tcard__clock-unit{min-width:0;flex:1 1 0;padding:10px 5px 8px;} .tcard__clock-unit b{font-size:1.3rem;} .du-pred .tool-head__lead{font-size:.95rem;line-height:1.7;} /* Steuerleiste: Zoom und Zuruecksetzen bleiben in einer Zeile -- gestapelt fraesse die Leiste ein Drittel des Schirms. */ .bk-bar{padding:14px 16px;gap:14px;} .bk-bar__tools{gap:10px;} .bk-bar--tools{padding:10px;} .bk-bar--tools .bk-bar__tools{flex-wrap:nowrap;gap:8px;} .du-pred .bk-bar--tools .btn--sm{padding:11px 14px;} .bk-zoom__value{min-width:44px;} /* Zustandskarten und Download ohne die grossen Innenabstaende. */ .tool-state{ padding:clamp(30px,8vw,46px) 20px; margin-block:18px clamp(44px,10vw,64px); } .du-pred .tool-state h2{font-size:1.32rem;} .tool-state__actions{flex-direction:column;align-items:stretch;margin-top:22px;} .tool-state__actions .btn{width:100%;} .section--export{padding-block:clamp(40px,9vw,58px);} .export__card{padding:20px 18px;} .export__gate{padding:14px;gap:11px;margin-bottom:18px;} .export__gate-ico{width:32px;height:32px;} } /* ---------- 9. MOTION-PRAEFERENZ ---------- */ @media (prefers-reduced-motion:reduce){ .export__gate[data-state="locked"], .export__gate.is-nudged, .tcard__dot, .tool-state__spinner{animation:none;} .tcard, .tcard__board{transition:none;} .tcard:hover{transform:none;} .tcard:hover .tcard__board{transform:none;} .bk-progress__fill{transition:none;} }