pollen-robotics/Reachy_Mini_Assembly_Guide
47
1@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');2 3/* CSS Variables */4:root {5 --background: hsl(244, 7%, 96%);6 --foreground: hsl(0, 0%, 20%);7 --card: hsl(0, 0%, 100%);8 --card-foreground: hsl(0, 0%, 20%);9 --primary: hsl(35, 100%, 50%);10 --primary-foreground: hsl(0, 0%, 100%);11 --secondary: hsl(0, 0%, 100%);12 --secondary-foreground: hsl(0, 0%, 53%);13 --muted: hsl(240, 5%, 96%);14 --muted-foreground: hsl(240, 4%, 46%);15 --accent: hsl(193, 60%, 52%);16 --accent-foreground: hsl(0, 0%, 100%);17 --destructive: hsl(0, 84%, 60%);18 --border: hsl(0, 0%, 88%);19 --input: hsl(0, 0%, 88%);20 --ring: hsl(35, 100%, 50%);21 --radius: 0.75rem;22 --orange: hsl(35, 100%, 50%);23 --yellow: hsl(47, 100%, 56%);24 --cyan: hsl(193, 60%, 52%);25 --navy: hsl(222, 48%, 35%);26 --shadow-sm: 0 2px 8px hsla(0, 0%, 0%, 0.08);27 --shadow-lg: 0 4px 20px hsla(0, 0%, 0%, 0.1);28 --shadow-card: 0 4px 20px hsla(0, 0%, 0%, 0.1);29}30 31/* Reset & Base */32*, *::before, *::after {33 box-sizing: border-box;34 margin: 0;35 padding: 0;36 border-color: var(--border);37}38 39html {40 scroll-behavior: smooth;41}42 43body {44 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;45 background-color: var(--background);46 color: var(--foreground);47 line-height: 1.6;48 -webkit-font-smoothing: antialiased;49 -moz-osx-font-smoothing: grayscale;50}51 52/* Utility Classes */53.hidden {54 display: none !important;55}56 57.min-h-screen {58 min-height: 100vh;59}60 61.bg-background {62 background-color: var(--background);63}64 65/* Container */66.container {67 max-width: 1280px;68 margin: 0 auto;69 padding: 0 1rem;70}71 72.container-full {73 max-width: 100%;74 padding: 0 1rem;75}76 77@media (min-width: 768px) {78 .container-full {79 padding: 0 2rem;80 }81}82 83/* Animations */84@keyframes fade-in {85 from {86 opacity: 0;87 transform: translateY(10px);88 }89 to {90 opacity: 1;91 transform: translateY(0);92 }93}94 95@keyframes slide-in {96 from {97 opacity: 0;98 transform: translateX(20px);99 }100 to {101 opacity: 1;102 transform: translateX(0);103 }104}105 106.animate-fade-in {107 animation: fade-in 0.5s ease-out;108}109 110.animate-slide-in {111 animation: slide-in 0.3s ease-out;112}113 114/* Header */115.header {116 border-bottom: 1px solid var(--border);117 background-color: hsla(0, 0%, 100%, 0.8);118 backdrop-filter: blur(12px);119 -webkit-backdrop-filter: blur(12px);120 position: sticky;121 top: 0;122 z-index: 50;123}124 125.header-content {126 display: flex;127 align-items: center;128 justify-content: space-between;129 padding: 1rem 0;130 flex-wrap: wrap;131 gap: 1rem;132}133 134.header-left {135 display: flex;136 align-items: center;137 gap: 1rem;138}139 140.header-icon {141 width: 3.5rem;142 height: 3.5rem;143 object-fit: contain;144}145 146.header-title {147 font-size: 1.5rem;148 font-weight: 700;149 color: var(--foreground);150}151 152.header-subtitle {153 color: var(--muted-foreground);154 font-size: 0.875rem;155}156 157/* Main Content */158.main-content {159 padding: 2.5rem 0;160}161 162/* Intro Section */163.intro-section {164 text-align: center;165 margin-bottom: 2.5rem;166}167 168.intro-title {169 font-size: 1.875rem;170 font-weight: 700;171 color: var(--foreground);172 margin-bottom: 1rem;173}174 175@media (min-width: 768px) {176 .intro-title {177 font-size: 2.25rem;178 }179}180 181.intro-text {182 font-size: 1.125rem;183 color: var(--muted-foreground);184 max-width: 42rem;185 margin: 0 auto;186}187 188.intro-text strong {189 color: var(--foreground);190}191 192/* Step Viewer */193.step-viewer {194 background-color: var(--card);195 border-radius: 1rem;196 overflow: hidden;197 box-shadow: var(--shadow-card);198 border: 1px solid var(--border);199}200 201/* Image Container */202.image-container {203 position: relative;204 background-color: var(--secondary);205 height: calc(100vh - 300px);206 min-height: 300px;207}208 209.image-wrapper {210 width: 100%;211 height: 100%;212 display: flex;213 align-items: center;214 justify-content: center;215}216 217.step-image {218 width: 100%;219 height: 100%;220 object-fit: contain;221 cursor: pointer;222 transition: transform 0.3s ease;223}224 225.step-image:hover {226 transform: scale(1.02);227}228 229/* Step Counter */230.step-counter {231 position: absolute;232 top: 1rem;233 left: 1rem;234 z-index: 10;235 background-color: hsla(0, 0%, 100%, 0.9);236 backdrop-filter: blur(8px);237 -webkit-backdrop-filter: blur(8px);238 padding: 0.5rem 1rem;239 border-radius: 0.75rem;240}241 242.step-counter span {243 font-size: 1.25rem;244 font-weight: 700;245 color: var(--foreground);246}247 248/* Fullscreen Button */249.fullscreen-btn {250 position: absolute;251 top: 1rem;252 right: 1rem;253 z-index: 10;254 background-color: hsla(0, 0%, 100%, 0.9);255 backdrop-filter: blur(8px);256 -webkit-backdrop-filter: blur(8px);257 border: none;258 border-radius: 0.5rem;259 padding: 0.5rem;260 cursor: pointer;261 box-shadow: var(--shadow-lg);262 transition: background-color 0.2s;263}264 265.fullscreen-btn:hover {266 background-color: var(--card);267}268 269/* Placeholder */270.placeholder {271 width: 100%;272 height: 100%;273 display: flex;274 flex-direction: column;275 align-items: center;276 justify-content: center;277 background: linear-gradient(to bottom right, var(--muted), var(--secondary));278 padding: 2rem;279}280 281.placeholder-circle {282 width: 6rem;283 height: 6rem;284 border-radius: 50%;285 background-color: hsla(240, 4%, 46%, 0.2);286 display: flex;287 align-items: center;288 justify-content: center;289 margin-bottom: 1rem;290}291 292.placeholder-circle span {293 font-size: 2.5rem;294 font-weight: 700;295 color: var(--muted-foreground);296}297 298.placeholder-circle-lg {299 width: 8rem;300 height: 8rem;301}302 303.placeholder-circle-lg span {304 font-size: 3rem;305}306 307.placeholder-text {308 font-size: 1.125rem;309 color: var(--muted-foreground);310}311 312.placeholder-text-lg {313 font-size: 1.25rem;314 color: var(--muted-foreground);315}316 317/* YouTube Embed */318.youtube-desktop {319 display: none;320 position: absolute;321 bottom: 1rem;322 right: 1rem;323 width: 20rem;324 aspect-ratio: 16 / 9;325 z-index: 20;326 border-radius: 0.5rem;327 overflow: hidden;328 box-shadow: var(--shadow-card);329}330 331@media (min-width: 768px) {332 .youtube-desktop {333 display: block;334 }335}336 337.youtube-desktop iframe {338 width: 100%;339 height: 100%;340 border: none;341}342 343.youtube-mobile {344 width: 100%;345 aspect-ratio: 16 / 9;346 background-color: var(--secondary);347}348 349@media (min-width: 768px) {350 .youtube-mobile {351 display: none;352 }353}354 355.youtube-mobile iframe {356 width: 100%;357 height: 100%;358 border: none;359}360 361/* Navigation Controls */362.nav-controls {363 padding: 1.5rem;364 background-color: var(--card);365 border-top: 1px solid var(--border);366}367 368.nav-buttons {369 display: flex;370 align-items: center;371 justify-content: space-between;372 gap: 1rem;373 margin-bottom: 1rem;374 flex-wrap: wrap;375}376 377/* Buttons */378.btn {379 display: inline-flex;380 align-items: center;381 gap: 0.5rem;382 font-size: 1rem;383 font-weight: 500;384 padding: 0.75rem 1.5rem;385 border-radius: 0.5rem;386 border: none;387 cursor: pointer;388 transition: all 0.2s;389 font-family: inherit;390}391 392.btn:disabled {393 opacity: 0.3;394 cursor: not-allowed;395}396 397.btn-outline {398 background-color: transparent;399 border: 1px solid var(--border);400 color: var(--foreground);401}402 403.btn-outline:hover:not(:disabled) {404 background-color: var(--muted);405 gap: 0.75rem;406}407 408.btn-primary {409 background-color: var(--card);410 color: var(--orange);411 border: 1px solid var(--orange);412}413 414.btn-primary:hover:not(:disabled) {415 background-color: var(--orange);416 color: var(--primary-foreground);417 gap: 0.75rem;418}419 420.btn-icon {421 display: inline-flex;422 align-items: center;423 justify-content: center;424 width: 2.25rem;425 height: 2.25rem;426 border-radius: 0.5rem;427 border: 1px solid var(--border);428 background-color: transparent;429 cursor: pointer;430 transition: background-color 0.2s;431}432 433.btn-icon:hover {434 background-color: var(--muted);435}436 437/* Step Indicators */438.step-indicators {439 display: flex;440 align-items: center;441 justify-content: center;442 gap: 0.25rem;443 padding: 0 0.5rem;444}445 446.step-indicator-num {447 width: 1.5rem;448 height: 1.5rem;449 border-radius: 50%;450 font-size: 0.75rem;451 font-weight: 500;452 border: none;453 cursor: pointer;454 transition: all 0.2s;455 background-color: var(--muted);456 color: var(--muted-foreground);457 display: flex;458 align-items: center;459 justify-content: center;460}461 462.step-indicator-num:hover {463 background-color: hsla(240, 5%, 96%, 0.8);464 transform: scale(1.05);465}466 467.step-indicator-num-active {468 background-color: var(--orange);469 color: white;470 box-shadow: 0 2px 8px hsla(35, 100%, 50%, 0.4);471 transform: scale(1.1);472}473 474.step-indicator-nav {475 width: 1.5rem;476 height: 1.5rem;477 border-radius: 50%;478 border: none;479 cursor: pointer;480 background-color: var(--muted);481 color: var(--muted-foreground);482 display: flex;483 align-items: center;484 justify-content: center;485 transition: background-color 0.2s;486}487 488.step-indicator-nav:hover {489 background-color: hsla(240, 5%, 96%, 0.8);490}491 492/* Progress Bar */493.progress-bar-container {494 width: 100%;495 background-color: var(--secondary);496 border-radius: 9999px;497 height: 0.5rem;498 overflow: hidden;499}500 501.progress-bar {502 height: 100%;503 background: linear-gradient(to right, var(--yellow), var(--orange));504 border-radius: 9999px;505 transition: width 0.5s ease-out;506}507 508/* Footer */509.footer {510 border-top: 1px solid var(--border);511 background-color: var(--card);512 margin-top: 4rem;513}514 515.footer-text {516 text-align: center;517 padding: 1.5rem 0;518 color: var(--muted-foreground);519}520 521.footer-link {522 color: var(--foreground);523 text-decoration: underline;524 transition: color 0.2s;525}526 527.footer-link:hover {528 color: var(--orange);529}530 531/* Fullscreen Modal */532.fullscreen-modal {533 position: fixed;534 inset: 0;535 z-index: 100;536 background-color: var(--background);537 display: flex;538 flex-direction: column;539 animation: fade-in 0.3s ease-out;540}541 542.fullscreen-header {543 display: flex;544 align-items: center;545 justify-content: space-between;546 padding: 1rem;547 background-color: var(--card);548 border-bottom: 1px solid var(--border);549 flex-shrink: 0;550}551 552.fullscreen-title {553 font-size: 1.125rem;554 font-weight: 700;555 color: var(--foreground);556}557 558.fullscreen-controls {559 display: flex;560 align-items: center;561 gap: 0.5rem;562}563 564.zoom-level {565 min-width: 3.75rem;566 text-align: center;567 font-weight: 500;568 color: var(--foreground);569}570 571.fullscreen-content {572 flex: 1;573 position: relative;574 overflow: hidden;575 background-color: var(--secondary);576}577 578.fullscreen-image-container {579 width: 100%;580 height: 100%;581 display: flex;582 align-items: center;583 justify-content: center;584 overflow: hidden;585 cursor: grab;586}587 588.fullscreen-image-container:active {589 cursor: grabbing;590}591 592.fullscreen-image {593 height: 100%;594 width: auto;595 max-width: none;596 object-fit: contain;597 user-select: none;598 transition: transform 0.2s;599}600 601.fullscreen-placeholder {602 position: absolute;603 inset: 0;604}605 606.fullscreen-nav {607 flex-shrink: 0;608}609 610.fullscreen-youtube-mobile {611 flex-shrink: 0;612}613