@jjlmoya/utils-motor 1.2.0 → 1.4.0

package/src/tool/carMotorcycleGearRatioCalculator/car-motorcycle-gear-ratio-rpm-speed-calculator.css

@@ -0,0 +1,668 @@
+.gear-tool {
+  --n-paper: #f4f1ed;
+  --n-surface: #fffdf9;
+  --n-surface-soft: #f1e8e0;
+  --n-ink: #2c2520;
+  --n-muted: #746b64;
+  --n-line: #d9ccc0;
+  --n-accent: #a85437;
+  --n-accent-soft: #f0d8cc;
+  --n-accent-strong: #7e3b29;
+  --n-on-accent: #fff;
+  --n-warm: #d78d4e;
+  --n-warm-soft: #f5e0c6;
+  --n-danger: #b1433e;
+  --n-danger-soft: #f3d8d4;
+  --n-shadow: rgba(44, 37, 32, 0.12);
+
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  border-radius: 1.35rem;
+  box-shadow: 0 1rem 2.5rem var(--n-shadow);
+  color: var(--n-ink);
+  display: grid;
+  gap: 1.25rem;
+  padding: clamp(1rem, 2.5vw, 1.75rem);
+}
+
+.theme-dark .gear-tool {
+  --n-paper: #111315;
+  --n-surface: #191b1e;
+  --n-surface-soft: #242629;
+  --n-ink: #f4efe9;
+  --n-muted: #b8afa7;
+  --n-line: #45413e;
+  --n-accent: #df8b61;
+  --n-accent-soft: #503126;
+  --n-accent-strong: #ffc0a0;
+  --n-on-accent: #fff;
+  --n-warm: #e4af65;
+  --n-warm-soft: #4a3826;
+  --n-danger: #ff9385;
+  --n-danger-soft: #542d2b;
+  --n-shadow: rgba(0, 0, 0, 0.35);
+}
+
+.gear-tool-intro {
+  display: grid;
+  gap: 0.3rem;
+  max-width: 50rem;
+}
+
+.tool-kicker,
+.eyebrow,
+.scene-label {
+  color: var(--n-accent);
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.gear-tool-intro p,
+.educational-notice {
+  color: var(--n-muted);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.gear-layout {
+  align-items: start;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(17rem, 0.78fr) minmax(25rem, 1.22fr);
+}
+
+.gear-controls,
+.gear-visual {
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  border-radius: 1.05rem;
+  min-width: 0;
+}
+
+.gear-controls {
+  align-self: start;
+  display: grid;
+  gap: 0.9rem;
+  padding: 0.9rem;
+}
+
+.control-block {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.control-block + .control-block {
+  border-top: 1px solid var(--n-line);
+  padding-top: 0.85rem;
+}
+
+.control-heading {
+  align-items: center;
+  display: flex;
+  font-size: 0.78rem;
+  font-weight: 850;
+  gap: 0.7rem;
+  justify-content: space-between;
+}
+
+.control-note {
+  color: var(--n-muted);
+  font-size: 0.68rem;
+  font-weight: 650;
+  text-align: right;
+}
+
+.profile-chips,
+.unit-switch {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.profile-chip,
+.unit-button,
+.reset-button {
+  appearance: none;
+  border: 1px solid var(--n-line);
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+}
+
+.profile-chip {
+  align-items: center;
+  background: var(--n-surface-soft);
+  border-radius: 0.65rem;
+  display: flex;
+  flex: 1;
+  font-size: 0.78rem;
+  gap: 0.45rem;
+  justify-content: center;
+  min-height: 2.45rem;
+  padding: 0.45rem;
+}
+
+.profile-chip.is-active {
+  background: var(--n-accent);
+  border-color: var(--n-accent);
+  color: var(--n-on-accent);
+}
+
+.profile-chip-mark {
+  align-items: center;
+  background: var(--n-paper);
+  border-radius: 0.3rem;
+  color: var(--n-accent-strong);
+  display: inline-flex;
+  font-size: 0.65rem;
+  font-weight: 900;
+  height: 1.25rem;
+  justify-content: center;
+  width: 1.25rem;
+}
+
+.unit-switch {
+  background: var(--n-surface-soft);
+  border: 1px solid var(--n-line);
+  border-radius: 0.5rem;
+  padding: 0.16rem;
+}
+
+.unit-button {
+  background: transparent;
+  border-color: transparent;
+  border-radius: 0.32rem;
+  color: var(--n-ink);
+  font-size: 0.68rem;
+  font-weight: 850;
+  min-width: 4.1rem;
+  padding: 0.36rem 0.5rem;
+}
+
+.unit-button.is-active {
+  background: var(--n-accent);
+  border-color: var(--n-accent);
+  color: var(--n-on-accent);
+}
+
+.control-grid {
+  display: grid;
+  gap: 0.65rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.input-field,
+.gear-input {
+  color: var(--n-muted);
+  display: grid;
+  font-size: 0.67rem;
+  font-weight: 750;
+  gap: 0.28rem;
+}
+
+.input-with-unit {
+  align-items: center;
+  background: var(--n-surface-soft);
+  border: 1px solid var(--n-line);
+  border-radius: 0.55rem;
+  display: flex;
+  min-height: 2.45rem;
+  overflow: hidden;
+}
+
+.input-with-unit input,
+.gear-input input {
+  background: transparent;
+  border: 0;
+  color: var(--n-ink);
+  font: inherit;
+  min-width: 0;
+  outline: 0;
+  padding: 0.55rem;
+  width: 100%;
+}
+
+.input-with-unit:focus-within,
+.gear-input:focus-within {
+  border-color: var(--n-accent);
+  box-shadow: 0 0 0 3px var(--n-accent-soft);
+}
+
+.input-with-unit b {
+  color: var(--n-accent-strong);
+  font-size: 0.62rem;
+  padding-right: 0.5rem;
+  white-space: nowrap;
+}
+
+.gear-input-grid {
+  display: grid;
+  gap: 0.45rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.gear-input {
+  background: var(--n-surface-soft);
+  border: 1px solid var(--n-line);
+  border-radius: 0.55rem;
+  gap: 0;
+  overflow: hidden;
+}
+
+.gear-input span {
+  border-bottom: 1px solid var(--n-line);
+  color: var(--n-accent-strong);
+  font-size: 0.6rem;
+  padding: 0.3rem 0.45rem;
+}
+
+.reset-button {
+  background: transparent;
+  border-radius: 0.55rem;
+  color: var(--n-muted);
+  font-size: 0.68rem;
+  justify-self: start;
+  padding: 0.45rem 0.6rem;
+}
+
+.gear-visual {
+  display: grid;
+  gap: 0.85rem;
+  padding: 0.9rem;
+}
+
+.gear-results {
+  border-top: 1px solid var(--n-line);
+  display: grid;
+  gap: 0.85rem;
+  padding-top: 1rem;
+}
+
+.transmission-scene {
+  background: var(--n-surface-soft);
+  border: 1px solid var(--n-line);
+  border-radius: 0.85rem;
+  overflow: hidden;
+}
+
+.scene-svg {
+  display: block;
+  height: auto;
+  width: 100%;
+}
+
+.scene-svg text {
+  fill: var(--n-muted);
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.scene-road {
+  fill: none;
+  stroke: var(--n-line);
+  stroke-width: 8;
+}
+
+.scene-shaft,
+.scene-final-drive {
+  fill: none;
+  stroke: var(--n-accent);
+  stroke-linecap: round;
+  stroke-width: 13;
+}
+
+.scene-shaft {
+  animation: shaft-flow var(--engine-duration, 3s) linear infinite;
+  stroke-dasharray: 2 22;
+}
+
+.scene-engine {
+  fill: var(--n-warm-soft);
+  stroke: var(--n-warm);
+  stroke-width: 8;
+}
+
+.scene-engine-core,
+.scene-gear {
+  fill: var(--n-accent-soft);
+  stroke: var(--n-accent);
+  stroke-width: 7;
+}
+
+.scene-gear {
+  stroke-dasharray: 2 15;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.scene-gear-large {
+  animation: gear-turn var(--engine-duration, 3s) linear infinite;
+}
+
+.scene-gear-mid {
+  animation: gear-turn-reverse var(--engine-duration, 3s) linear infinite;
+}
+
+.scene-gear-small {
+  animation: gear-turn var(--engine-duration, 3s) linear infinite;
+}
+
+.scene-wheel {
+  animation: wheel-turn var(--wheel-duration, 2.8s) linear infinite;
+  fill: var(--n-surface);
+  stroke: var(--n-warm);
+  stroke-width: 12;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.scene-wheel-inner,
+.scene-spoke {
+  fill: none;
+  stroke: var(--n-warm);
+  stroke-width: 4;
+}
+
+.scene-readout {
+  border-top: 1px solid var(--n-line);
+  padding: 0.7rem 0.9rem 0.8rem;
+}
+
+.scene-readout-row {
+  display: grid;
+  gap: 0.6rem;
+  grid-template-columns: repeat(3, 1fr);
+  margin-top: 0.35rem;
+}
+
+.scene-readout-row span {
+  color: var(--n-muted);
+  display: grid;
+  font-size: 0.63rem;
+  gap: 0.15rem;
+}
+
+.scene-readout-row b {
+  color: var(--n-ink);
+  font-size: 0.82rem;
+}
+
+.motion-hint {
+  border-top: 1px solid var(--n-line);
+  color: var(--n-muted);
+  display: flex;
+  font-size: 0.65rem;
+  gap: 0.5rem;
+  line-height: 1.4;
+  padding: 0.6rem 0.9rem 0.7rem;
+}
+
+.motion-hint strong {
+  color: var(--n-accent-strong);
+  white-space: nowrap;
+}
+
+.results-head {
+  align-items: end;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+}
+
+.results-head strong {
+  display: block;
+  font-size: clamp(2.2rem, 5vw, 3.7rem);
+  letter-spacing: -0.06em;
+  line-height: 0.98;
+  margin-top: 0.25rem;
+}
+
+.results-context {
+  color: var(--n-muted);
+  display: block;
+  font-size: 0.72rem;
+  margin-top: 0.35rem;
+}
+
+.status-badge {
+  border-radius: 999px;
+  font-size: 0.65rem;
+  font-weight: 850;
+  padding: 0.4rem 0.6rem;
+  white-space: nowrap;
+}
+
+.status-normal {
+  background: var(--n-accent-soft);
+  color: var(--n-accent-strong);
+}
+
+.status-warning {
+  background: var(--n-warm-soft);
+  color: var(--n-warm);
+}
+
+.status-critical {
+  background: var(--n-danger-soft);
+  color: var(--n-danger);
+}
+
+.answer-card {
+  background: var(--n-accent-soft);
+  border-left: 4px solid var(--n-accent);
+  border-radius: 0.75rem;
+  display: grid;
+  gap: 0.6rem;
+  padding: 0.8rem 0.9rem;
+}
+
+.answer-grid {
+  display: grid;
+  gap: 0.7rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.answer-primary,
+.answer-secondary {
+  display: grid;
+  gap: 0.15rem;
+}
+
+.answer-primary span,
+.answer-secondary span {
+  color: var(--n-muted);
+  font-size: 0.65rem;
+}
+
+.answer-primary strong,
+.answer-secondary strong {
+  color: var(--n-ink);
+  font-size: 1.35rem;
+  letter-spacing: -0.03em;
+}
+
+.answer-primary strong small,
+.answer-secondary strong small {
+  font-size: 0.7rem;
+  letter-spacing: 0;
+}
+
+.answer-primary b,
+.answer-secondary b {
+  color: var(--n-accent-strong);
+  font-size: 0.68rem;
+}
+
+.answer-card p {
+  border-top: 1px solid var(--n-line);
+  color: var(--n-muted);
+  font-size: 0.68rem;
+  line-height: 1.4;
+  margin: 0;
+  padding-top: 0.55rem;
+}
+
+.ladder-heading {
+  align-items: baseline;
+  display: flex;
+  gap: 0.6rem;
+  justify-content: space-between;
+}
+
+.ladder-heading > span {
+  color: var(--n-ink);
+  font-size: 0.75rem;
+  font-weight: 850;
+}
+
+.ladder-heading small {
+  color: var(--n-muted);
+  font-size: 0.63rem;
+  text-align: right;
+}
+
+.gear-result-list {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.gear-row {
+  align-items: center;
+  background: var(--n-surface-soft);
+  border: 1px solid transparent;
+  border-radius: 0.55rem;
+  color: var(--n-muted);
+  display: grid;
+  font-size: 0.68rem;
+  gap: 0.6rem;
+  grid-template-columns: 4.3rem 1fr auto auto;
+  padding: 0.55rem 0.65rem;
+}
+
+.gear-row-active {
+  border-color: var(--n-accent);
+  box-shadow: inset 3px 0 0 var(--n-accent);
+}
+
+.gear-number {
+  color: var(--n-accent-strong);
+  font-weight: 850;
+}
+
+.gear-speed,
+.gear-rpm {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.gear-row b {
+  color: var(--n-ink);
+}
+
+.educational-notice {
+  border-top: 1px solid var(--n-line);
+  font-size: 0.72rem;
+  padding-top: 0.75rem;
+}
+
+@keyframes wheel-turn {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes gear-turn {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes gear-turn-reverse {
+  from { transform: rotate(360deg); }
+  to { transform: rotate(0deg); }
+}
+
+@keyframes shaft-flow {
+  from { stroke-dashoffset: 0; }
+  to { stroke-dashoffset: -48; }
+}
+
+@media (max-width: 860px) {
+  .gear-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .gear-controls,
+  .gear-visual {
+    padding: 0.8rem;
+  }
+}
+
+@media (max-width: 520px) {
+  .gear-tool {
+    border-radius: 1rem;
+    padding: 0.75rem;
+  }
+
+  .gear-layout,
+  .gear-results {
+    gap: 0.75rem;
+  }
+
+  .gear-results {
+    padding-top: 0.85rem;
+  }
+
+  .control-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .gear-input-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .results-head {
+    align-items: start;
+    display: grid;
+    gap: 0.4rem;
+  }
+
+  .status-badge {
+    justify-self: start;
+  }
+
+  .results-head strong {
+    font-size: 2.45rem;
+  }
+
+  .answer-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .ladder-heading {
+    align-items: start;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .ladder-heading small {
+    text-align: left;
+  }
+
+  .gear-row {
+    gap: 0.35rem;
+    grid-template-columns: 3.7rem minmax(0, 1fr) auto;
+  }
+
+  .gear-rpm {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .motion-hint {
+    display: grid;
+    gap: 0.2rem;
+  }
+}