/* ============================================================ TOBOR ROBOT SHOWCASE — Self-Contained Component Styles All classes prefixed with "tobor__" to prevent global conflicts REQUIRED: Add class "tobor-experience-page" to the tag inside basetwo.html ONLY. e.g. DO NOT add this class to base.html (used by other pages). ============================================================ */ /* =============================================== CUSTOM FONTS =============================================== */ @font-face { font-family: "f1"; src: url("../fonts/Gilroy-Medium.ttf"); } @font-face { font-family: "f2"; src: url("../fonts/Gilroy-Medium.ttf"); } @font-face { font-family: "f3"; src: url("../fonts/Gilroy-SemiBold.ttf"); } @font-face { font-family: "f4"; src: url("../fonts/Gilroy-Bold.ttf"); } @font-face { font-family: "f5"; src: url("../fonts/Gilroy-RegularItalic.ttf"); } /* =============================================== GLOBAL RESET =============================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================================ TOBOR ROBOT SHOWCASE — Self-Contained Component Styles All classes prefixed with "tobor__" to prevent global conflicts ============================================================ */ /* ── Wrapper — fills full viewport, above base-template chrome ── */ .tobor__wrapper { background: radial-gradient(ellipse at 50% 40%, #2e2e2e 0%, #1a1a1a 70%); font-family: "f1", sans-serif; color: #ffffff; position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; border-radius: 0; z-index: 9999; } .tobor__wrapper::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; opacity: 0.35; z-index: 0; } /* ── Tab Panels ── */ .tobor__panel { display: none; position: absolute; inset: 0; width: 100%; height: 100%; animation: toborFadeIn 0.4s ease forwards; z-index: 1; } .tobor__panel--active { display: flex; align-items: center; justify-content: center; } @keyframes toborFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Product Image ── */ .tobor__product-img { max-height: 55vh; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; transition: transform 0.5s ease, opacity 0.3s ease; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55)); } .tobor__product-img:hover { transform: scale(1.02); } /* ── Feature Columns ── */ .tobor__features-col { display: flex; flex-direction: column; gap: 18px; padding: 0 16px; } .tobor__feature-item { opacity: 0; transform: translateX(-14px); animation: toborSlideIn 0.4s ease forwards; } .tobor__features-col--right .tobor__feature-item { transform: translateX(14px); text-align: right; } @keyframes toborSlideIn { to { opacity: 1; transform: translateX(0); } } .tobor__feature-item:nth-child(1) { animation-delay: 0.05s; } .tobor__feature-item:nth-child(2) { animation-delay: 0.12s; } .tobor__feature-item:nth-child(3) { animation-delay: 0.19s; } .tobor__feature-item:nth-child(4) { animation-delay: 0.26s; } .tobor__feature-label { font-family: "f4", sans-serif; font-size: 0.98rem; color: #ffffff; margin: 0 0 3px; letter-spacing: 0.02em; } .tobor__feature-value { font-family: "f3", sans-serif; font-size: 0.92rem; color: #ff4e1a; margin: 0; } /* ── Navigation Arrows ── */ .tobor__nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.1rem; backdrop-filter: blur(6px); } .tobor__nav-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-50%) scale(1.08); } .tobor__nav-btn--prev { left: 12px; } .tobor__nav-btn--next { right: 12px; } /* ── Bottom Pill Tabs ── */ .tobor__tabs-bar { display: flex; justify-content: center; gap: 0; position: absolute; bottom: 24px; left: 0; right: 0; z-index: 30; } .tobor__tab-btn { font-family: "f4", sans-serif; font-size: 0.88rem; border: none; cursor: pointer; padding: 10px 26px; letter-spacing: 0.03em; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); background: #ffffff; color: #1a1a1a; position: relative; z-index: 1; } .tobor__tab-btn:first-child { border-radius: 100px; /* padding: 128px; */ } .tobor__tab-btn:last-child { border-radius: 100px; /* padding: 28px; */ } .tobor__tab-btn:not(:first-child):not(:last-child) { border-radius: 100px; } .tobor__tab-btn+.tobor__tab-btn { margin-left: 4px; } .tobor__tab-btn--active { background: #ff4e1a; color: #fff; box-shadow: 0 4px 18px rgba(255, 78, 26, 0.35); z-index: 2; } .tobor__tab-btn:hover:not(.tobor__tab-btn--active) { background: #e8e8e8; } /* ── 360° View ── */ .tobor__360-stage { display: flex; align-items: center; justify-content: center; width: 100%; perspective: 900px; } .tobor__360-img-wrap { position: relative; display: inline-block; } .tobor__360-badge { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); color: #fff; font-family: "f3", sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; padding: 5px 14px; border-radius: 999px; white-space: nowrap; } /* model-viewer sizing */ .robotViewer-robot { width: 420px; height: 55vh; max-width: 90vw; display: block; background: transparent; } /* ── Anatomy Panel ── FIX: original had broken mixed-in rules (position/max-width etc.) that caused anatomy content to render outside normal flow and appear on the left. Removed. Panel display behaviour comes solely from .tobor__panel rules. */ .tobor__panel--anatomy { /* intentionally empty — inherits absolute fill + flex centering */ } .tobor__anatomy-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* ── Anatomy sub-tabs — pinned top, HIDDEN by default ── FIX: these were always visible (no opacity/pointer-events control), so they overlapped Features and 360° panels on load. */ .tobor__anatomy-sub-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; position: absolute; top: 10px; left: 0; right: 0; z-index: 30; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } /* Toggled by JS in toborActivateTab() */ .tobor__anatomy-sub-tabs--visible { opacity: 1; pointer-events: auto; } .tobor__anatomy-btn { font-family: "f4", sans-serif; font-size: 0.82rem; border: 1.5px solid rgba(255, 255, 255, 0.25); background: transparent; color: #fff; padding: 7px 22px; border-radius: 999px; cursor: pointer; letter-spacing: 0.03em; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .tobor__anatomy-btn:hover:not(.tobor__anatomy-btn--active) { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.07); } .tobor__anatomy-btn--active { background: #ff4e1a; border-color: #ff4e1a; box-shadow: 0 3px 14px rgba(255, 78, 26, 0.4); } /* ── Anatomy Image Area ── FIX: this entire block was missing from the original CSS */ .tobor__anatomy-img-area { position: relative; display: inline-flex; align-items: center; justify-content: center; background: #020617; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 20px; min-height: 260px; } .tobor__anatomy-img { max-height: 55vh; max-width: 80vw; object-fit: contain; display: block; opacity: 0; transition: opacity 0.35s ease; } .tobor__anatomy-img--visible { opacity: 1; } /* ── Dot Hotspots ── */ .tobor__hotspot { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; z-index: 10; } .tobor__hotspot::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255, 78, 26, 0.5); animation: toborPulse 2s ease-out infinite; } @keyframes toborPulse { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1.8); opacity: 0; } } .tobor__hotspot::after { content: attr(data-tobor-label); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); background: #1a1a1a; border: 1px solid rgba(255, 78, 26, 0.6); color: #fff; font-family: "f3", sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; white-space: nowrap; padding: 5px 12px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); z-index: 9999; } .tobor__hotspot:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .tobor__hotspot:hover { transform: scale(1.4); background: #ff4e1a; box-shadow: 0 0 0 5px rgba(255, 78, 26, 0.25); z-index: 100; } .tobor__hotspot:hover::before { animation: none; opacity: 0; } /* ── 360° Single Image Rotation ── */ .tobor__360-img { transform-origin: center center; transition: transform 0.15s ease-out; cursor: grab; user-select: none; -webkit-user-drag: none; } .tobor__360-img.tobor__360-img--dragging { cursor: grabbing; transition: none; } /* ── Responsive ── */ @media (max-width: 991px) { .tobor__product-img { max-height: 45vh; } .tobor__anatomy-img { max-height: 45vh; } .robotViewer-robot { width: 340px; height: 45vh; } .tobor__feature-label { font-size: 0.82rem; } .tobor__feature-value { font-size: 0.76rem; } .tobor__features-col { gap: 18px; } } @media (max-width: 767px) { /* Panel becomes a vertical column — features top, image bottom */ .tobor__panel--active.tobor__panel--features { flex-direction: column; justify-content: flex-start; align-items: stretch; overflow-y: auto; padding: 52px 0 72px; } .tobor__panel--active.tobor__panel--features .row { flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin: 0; } .tobor__panel--active.tobor__panel--features .col-12 { width: 100%; padding: 0; } /* Order: left col first, right col second, image last */ .tobor__panel--active.tobor__panel--features .col-12:nth-child(1) { order: 1; } .tobor__panel--active.tobor__panel--features .col-12:nth-child(3) { order: 2; } .tobor__panel--active.tobor__panel--features .col-12:nth-child(2) { order: 3; } /* Feature columns — no padding, full width */ .tobor__features-col, .tobor__features-col--right { flex-direction: column; gap: 0; padding: 0; width: 100%; } /* Each row: label hard left | value hard right */ .tobor__feature-item { flex: unset; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); opacity: 1; transform: none; animation: none; } .tobor__feature-item:last-child { border-bottom: none; } .tobor__features-col--right .tobor__feature-item { flex-direction: row; } .tobor__feature-label { font-size: 0.68rem; letter-spacing: 0.01em; margin: 0; color: rgba(255, 255, 255, 0.6); text-align: left; flex: 1; } .tobor__feature-value { font-size: 0.68rem; margin: 0; text-align: right; color: #ff4e1a; flex-shrink: 0; } /* Bigger image at bottom */ .tobor__product-img { max-height: 38vh; width: 100%; margin: 10px auto 0; } .tobor__anatomy-img { max-height: 38vh; } /* ── Anatomy sub-tab buttons — smaller on tablet/mobile ── */ .tobor__anatomy-btn { font-size: 0.72rem; padding: 6px 16px; } /* ── Anatomy hotspot tooltip text — smaller on tablet/mobile ── */ .tobor__hotspot::after { font-size: 0.62rem; padding: 4px 10px; white-space: normal; max-width: 160px; text-align: center; } .robotViewer-robot { width: 260px; height: 38vh; } .tobor__nav-btn { width: 36px; height: 36px; font-size: 0.9rem; } .tobor__tab-btn { padding: 9px 18px; font-size: 0.8rem; } } @media (max-width: 480px) { .tobor__tab-btn { padding: 8px 14px; font-size: 0.76rem; } .tobor__anatomy-img { max-height: 50vh; } .robotViewer-robot { width: 220px; height: 50vh; } /* ── Anatomy sub-tab buttons — smaller on mobile ── */ .tobor__anatomy-btn { font-size: 0.68rem; padding: 5px 14px; letter-spacing: 0.01em; } /* ── Anatomy hotspot dots — smaller on mobile ── */ .tobor__hotspot { width: 10px; height: 10px; } /* ── Anatomy hotspot tooltip text — smaller on mobile ── */ .tobor__hotspot::after { font-size: 0.6rem; padding: 4px 8px; letter-spacing: 0.02em; white-space: normal; max-width: 140px; text-align: center; } } /* ── Mobile Features List ── */ .tobor__mobile-features { display: flex; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; padding: 20px; } .tobor__mobile-list { width: 100%; flex-shrink: 0; } .tobor__mobile-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tobor__mobile-row:last-child { border-bottom: none; } .tobor__mobile-label { font-family: "f4", sans-serif; font-size: 0.72rem; color: rgba(255, 255, 255, 0.65); text-align: left; flex: 1; padding-right: 8px; } .tobor__mobile-value { font-family: "f3", sans-serif; font-size: 0.72rem; color: #ff4e1a; text-align: right; flex-shrink: 0; } .tobor__mobile-img-wrap { display: flex; justify-content: center; margin-top: 8px; } .tobor__mobile-img-wrap .tobor__product-img { max-height: 48vh; width: auto; } /* ── Close Button — top right corner ── */ .tobor__close-btn { position: absolute; top: 20px; right: 20px; z-index: 40; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .tobor__close-btn:hover { background: rgba(255, 78, 26, 0.85); border-color: #ff4e1a; transform: scale(1.1) rotate(90deg); }