/* style.css - Carbon Yellow Dark Theme */ /* ── Theme tokens ─────────────────────────────────────────────────────────── Every colour token in theme.js resolves through one of these. The values below ARE the 3Dash palette — nothing here is a placeholder, and with the vars unset the site renders exactly as it did before they existed. They are variables so the QUOTE WIDGET can be re-skinned to a shop's own site: widget-themes.js overwrites this set on inside the embed. Only the widget does that. The 3Dash marketing pages always run the defaults. Solid colours are `R G B` triplets, not hex, because theme.js feeds them to Tailwind as `rgb(var(--t-x) / )` — that is what keeps opacity modifiers like `bg-primary/20` working. The two line colours are full rgba() values instead: they are alpha by nature and take no modifier. */ :root { --t-primary: 250 204 21; /* fill colour — solid bg, never text */ --t-primary-hover: 234 179 8; --t-on-primary: 17 17 17; /* text/icons sitting ON a primary fill */ --t-ink: 17 17 17; /* body text and the darkest surface */ --t-page: 250 250 248; --t-card: 255 255 255; --t-well: 17 17 17; /* the 3D viewer's dark island */ --t-line: rgba(0, 0, 0, 0.10); --t-line-bright: rgba(0, 0, 0, 0.25); --t-viewer-bg: #0A0A0A; /* inside the canvas, behind the model */ } html { scroll-behavior: smooth; } body { background-color: #0A0A0A; color: #FFFFFF; } /* Dark glassmorphism navbar */ .glass { background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Dropzone (light content area; the hero nozzle box styles itself) */ .drop-zone { border: 2px dashed var(--t-line-bright); background-color: rgb(var(--t-page)); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .drop-zone:hover { border-color: rgb(var(--t-primary)); background-color: rgb(var(--t-primary) / 0.06); } .drop-zone.dragover { border-color: rgb(var(--t-primary)); background-color: rgb(var(--t-primary) / 0.12); transform: scale(1.01); } /* Three.js Viewer */ #viewer-container canvas { border-radius: 0.75rem; outline: none; cursor: grab; background: var(--t-viewer-bg); } #viewer-container canvas:active { cursor: grabbing; } /* Accent loader */ .loader { border: 3px solid rgb(var(--t-primary) / 0.1); border-top: 3px solid rgb(var(--t-primary)); border-radius: 50%; width: 36px; height: 36px; animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Skeleton */ .skeleton { background: #1C1C1E; position: relative; overflow: hidden; border-radius: 0.5rem; } .skeleton::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.03) 20%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0)); animation: shimmer 2s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* Custom Scrollbar for Dark Mode */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #0A0A0A; } ::-webkit-scrollbar-thumb { background: #333333; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #444444; } /* Hide scrollbar for Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Specific UI Elements Overrides */ .primary-gradient-text { background: linear-gradient(135deg, #FACC15 0%, #F59E0B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .wallet-card-new { background: linear-gradient(135deg, #1C1C1E 0%, #111111 100%); border: 1px solid rgba(250, 204, 21, 0.2); }