/* * cast.css * Parta Cast -cast.parta.app * Design system: Industrial Precision * Dark theme · Monospace accents · Silicone orange · Tight grid * * Stack: Bootstrap 5.3.2 base + this file * Font: DM Mono (technical) + DM Sans (body) via Google Fonts * Loaded in HTML -no @import here (performance) */ /* ═══════════════════════════════════════════════════════════════ 1. DESIGN TOKENS ═══════════════════════════════════════════════════════════════ */ :root { /* Palette */ --c-bg : #0c0d0e; --c-bg-2 : #141517; --c-bg-3 : #1c1e21; --c-bg-4 : #252729; --c-surface : #1e2023; --c-border : #2e3135; --c-border-light: #3a3e44; --c-orange : #ff6b2b; --c-orange-dim : #cc4f18; --c-orange-glow : rgba(255, 107, 43, 0.18); --c-orange-pale : rgba(255, 107, 43, 0.08); --c-blue : #4488ff; --c-blue-dim : rgba(68, 136, 255, 0.15); --c-green : #00e08a; --c-green-dim : rgba(0, 224, 138, 0.12); --c-amber : #ffaa00; --c-red : #ff4455; --c-red-dim : rgba(255, 68, 85, 0.12); --c-text : #e8eaed; --c-text-2 : #9aa0a6; --c-text-3 : #5f6368; --c-text-inv : #0c0d0e; /* Typography */ --font-mono : 'DM Mono', 'Fira Code', monospace; --font-body : 'DM Sans', system-ui, sans-serif; --fs-xs : 0.6875rem; /* 11px */ --fs-sm : 0.8125rem; /* 13px */ --fs-base : 0.9375rem; /* 15px */ --fs-md : 1.0625rem; /* 17px */ --fs-lg : 1.25rem; --fs-xl : 1.5rem; --fs-2xl : 2rem; --fs-3xl : 2.75rem; --lh-tight : 1.2; --lh-base : 1.55; /* Spacing */ --sp-1 : 0.25rem; --sp-2 : 0.5rem; --sp-3 : 0.75rem; --sp-4 : 1rem; --sp-5 : 1.25rem; --sp-6 : 1.5rem; --sp-8 : 2rem; --sp-10 : 2.5rem; --sp-12 : 3rem; --sp-16 : 4rem; /* Radius */ --r-sm : 3px; --r-base : 6px; --r-md : 10px; --r-lg : 16px; /* Shadows */ --shadow-sm : 0 1px 3px rgba(0,0,0,0.4); --shadow-md : 0 4px 16px rgba(0,0,0,0.5); --shadow-lg : 0 12px 40px rgba(0,0,0,0.6); --shadow-orange : 0 0 24px var(--c-orange-glow); --shadow-inset : inset 0 1px 0 rgba(255,255,255,0.04); /* Transitions */ --t-fast : 120ms ease; --t-base : 220ms ease; --t-slow : 380ms ease; /* Wizard */ --wizard-steps : 7; --step-dot-size : 28px; } /* ═══════════════════════════════════════════════════════════════ 2. RESET & BASE ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family : var(--font-body); font-size : var(--fs-base); line-height : var(--lh-base); color : var(--c-text); background-color: var(--c-bg); min-height : 100vh; overflow-x : hidden; } /* Grain overlay -subtle industrial texture */ body::before { content : ''; position : fixed; inset : 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); opacity : 0.025; pointer-events: none; z-index : 9999; } /* Bootstrap dark mode override */ [data-bs-theme="dark"] { --bs-body-bg : var(--c-bg); --bs-body-color : var(--c-text); } /* ═══════════════════════════════════════════════════════════════ 3. TYPOGRAPHY ═══════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family : var(--font-body); font-weight : 600; line-height : var(--lh-tight); color : var(--c-text); margin : 0; } .mono { font-family : var(--font-mono); font-size : 0.92em; letter-spacing: 0.01em; } .label-tag { font-family : var(--font-mono); font-size : var(--fs-xs); letter-spacing : 0.12em; text-transform : uppercase; color : var(--c-text-3); } .label-tag.orange { color: var(--c-orange); } .label-tag.green { color: var(--c-green); } .label-tag.blue { color: var(--c-blue); } .text-muted-2 { color: var(--c-text-2) !important; } .text-muted-3 { color: var(--c-text-3) !important; } .text-orange { color: var(--c-orange) !important; } .text-green { color: var(--c-green) !important; } .text-blue { color: var(--c-blue) !important; } .text-amber { color: var(--c-amber) !important; } .text-danger-cast { color: var(--c-red) !important; } /* ═══════════════════════════════════════════════════════════════ 4. LAYOUT -NAVBAR ═══════════════════════════════════════════════════════════════ */ .cast-navbar { background : var(--c-bg-2); border-bottom: 1px solid var(--c-border); padding : var(--sp-3) var(--sp-6); display : flex; align-items : right; justify-content: space-between; position : sticky; top : 0; z-index : 100; backdrop-filter: blur(12px); padding-left: 10%; padding-right: 10%; } .cast-navbar__brand { display : flex; align-items : center; gap : var(--sp-3); text-decoration: none; } .cast-navbar__logo { width : 28px; height : 28px; background : var(--c-orange); border-radius: var(--r-sm); display : flex; align-items : center; justify-content: center; font-family : var(--font-mono); font-size : var(--fs-xs); font-weight : 700; color : var(--c-text-inv); letter-spacing: -0.02em; flex-shrink : 0; } .cast-navbar__name { font-family : var(--font-mono); font-size : var(--fs-sm); font-weight : 500; color : var(--c-text); letter-spacing: 0.04em; } .cast-navbar__name span { color: var(--c-orange); } .cast-navbar__meta { font-family : var(--font-mono); font-size : var(--fs-xs); color : var(--c-text-3); letter-spacing: 0.06em; } /* ═══════════════════════════════════════════════════════════════ 5. WIZARD PROGRESS BAR ═══════════════════════════════════════════════════════════════ */ .wizard-track { background : var(--c-bg-2); border-bottom: 1px solid var(--c-border); padding : var(--sp-4) var(--sp-6); overflow-x : auto; scrollbar-width: none; } .wizard-track::-webkit-scrollbar { display: none; } .wizard-steps { display : flex; align-items : center; gap : 0; min-width : max-content; margin : 0 auto; max-width : 860px; } .wizard-step { display : flex; align-items : center; gap : var(--sp-2); cursor : default; user-select : none; position : relative; flex : 1; } .wizard-step:not(:last-child)::after { content : ''; flex : 1; height : 1px; background : var(--c-border); margin : 0 var(--sp-2); transition : background var(--t-base); min-width : 20px; } .wizard-step.done:not(:last-child)::after { background: var(--c-orange-dim); } .wizard-step__dot { width : var(--step-dot-size); height : var(--step-dot-size); border-radius : 50%; border : 1.5px solid var(--c-border); background : var(--c-bg-3); display : flex; align-items : center; justify-content : center; font-family : var(--font-mono); font-size : var(--fs-xs); font-weight : 600; color : var(--c-text-3); transition : all var(--t-base); flex-shrink : 0; } .wizard-step.active .wizard-step__dot { border-color : var(--c-orange); background : var(--c-orange-pale); color : var(--c-orange); box-shadow : var(--shadow-orange); } .wizard-step.done .wizard-step__dot { border-color : var(--c-orange); background : var(--c-orange); color : var(--c-text-inv); } .wizard-step__label { font-size : var(--fs-xs); font-family : var(--font-mono); color : var(--c-text-3); white-space : nowrap; letter-spacing: 0.04em; transition : color var(--t-base); } .wizard-step.active .wizard-step__label { color: var(--c-orange); } .wizard-step.done .wizard-step__label { color: var(--c-text-2); } /* ═══════════════════════════════════════════════════════════════ 6. WIZARD PANELS ═══════════════════════════════════════════════════════════════ */ .wizard-body { flex : 1; padding : var(--sp-8) var(--sp-6); max-width: 1200px; margin : 0 auto; width : 100%; } .wizard-panel { display : none; animation : panelIn 280ms ease both; } .wizard-panel.active { display: block; } @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════ 7. UPLOAD ZONE ═══════════════════════════════════════════════════════════════ */ .upload-zone { border : 1.5px dashed var(--c-border-light); border-radius : var(--r-md); background : var(--c-bg-2); padding : var(--sp-16) var(--sp-8); text-align : center; cursor : pointer; transition : all var(--t-base); position : relative; overflow : hidden; } .upload-zone::before { content : ''; position : absolute; inset : 0; background: radial-gradient(ellipse at 50% 0%, var(--c-orange-pale) 0%, transparent 70%); opacity : 0; transition: opacity var(--t-base); } .upload-zone:hover, .upload-zone.drag-over { border-color: var(--c-orange); background : var(--c-bg-3); } .upload-zone:hover::before, .upload-zone.drag-over::before { opacity: 1; } .upload-zone__icon { font-size : 3rem; color : var(--c-text-3); margin-bottom: var(--sp-4); transition : color var(--t-base), transform var(--t-base); display : block; } .upload-zone:hover .upload-zone__icon, .upload-zone.drag-over .upload-zone__icon { color : var(--c-orange); transform: translateY(-4px); } .upload-zone__title { font-size : var(--fs-md); font-weight: 500; color : var(--c-text); margin-bottom: var(--sp-2); } .upload-zone__sub { font-size : var(--fs-sm); color : var(--c-text-3); font-family: var(--font-mono); } .upload-zone__formats { display : flex; justify-content: center; gap : var(--sp-2); margin-top : var(--sp-4); flex-wrap : wrap; } /* ═══════════════════════════════════════════════════════════════ 8. CANVAS / 3D VIEWPORT ═══════════════════════════════════════════════════════════════ */ .viewport-wrap { background : var(--c-bg-2); border : 1px solid var(--c-border); border-radius: var(--r-md); overflow : hidden; position : relative; } .viewport-wrap canvas { display: block; width : 100% !important; height : 100% !important; } .viewport-toolbar { position : absolute; top : var(--sp-3); right : var(--sp-3); display : flex; flex-direction : column; gap : var(--sp-2); z-index : 10; } .viewport-btn { width : 32px; height : 32px; background : rgba(14, 15, 16, 0.85); border : 1px solid var(--c-border); border-radius : var(--r-sm); color : var(--c-text-2); font-size : var(--fs-sm); display : flex; align-items : center; justify-content : center; cursor : pointer; transition : all var(--t-fast); backdrop-filter : blur(8px); } .viewport-btn:hover { color : var(--c-orange); border-color: var(--c-orange); background : rgba(14,15,16,0.95); } .viewport-overlay { position : absolute; bottom : var(--sp-3); left : var(--sp-3); display : flex; flex-direction: column; gap : var(--sp-1); pointer-events: none; } .viewport-stat { font-family : var(--font-mono); font-size : var(--fs-xs); color : var(--c-text-3); background : rgba(12,13,14,0.75); padding : 2px var(--sp-2); border-radius: var(--r-sm); backdrop-filter: blur(4px); letter-spacing: 0.04em; } /* ═══════════════════════════════════════════════════════════════ 9. STATS PANEL ═══════════════════════════════════════════════════════════════ */ .stats-grid { display : grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap : var(--sp-3); } .stat-card { background : var(--c-bg-3); border : 1px solid var(--c-border); border-radius: var(--r-base); padding : var(--sp-3) var(--sp-4); transition : border-color var(--t-fast); } .stat-card:hover { border-color: var(--c-border-light); } .stat-card__label { font-family : var(--font-mono); font-size : var(--fs-xs); color : var(--c-text-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--sp-1); } .stat-card__value { font-family : var(--font-mono); font-size : var(--fs-md); font-weight : 500; color : var(--c-text); line-height : 1.2; } .stat-card__unit { font-size : var(--fs-xs); color : var(--c-text-3); margin-left: 2px; } .stat-card.ok { border-left: 2px solid var(--c-green); } .stat-card.warn { border-left: 2px solid var(--c-amber); } .stat-card.error { border-left: 2px solid var(--c-red); } .stat-card.accent { border-left: 2px solid var(--c-orange); } /* ═══════════════════════════════════════════════════════════════ 10. MANIFOLD STATUS BADGE ═══════════════════════════════════════════════════════════════ */ .manifold-badge { display : inline-flex; align-items : center; gap : var(--sp-2); padding : var(--sp-2) var(--sp-3); border-radius : var(--r-base); font-family : var(--font-mono); font-size : var(--fs-sm); font-weight : 500; letter-spacing : 0.04em; } .manifold-badge.ok { background: var(--c-green-dim); border : 1px solid var(--c-green); color : var(--c-green); } .manifold-badge.error { background: var(--c-red-dim); border : 1px solid var(--c-red); color : var(--c-red); } .manifold-badge.checking { background: var(--c-blue-dim); border : 1px solid var(--c-blue); color : var(--c-blue); } /* ═══════════════════════════════════════════════════════════════ 11. PARAMETER CONTROLS ═══════════════════════════════════════════════════════════════ */ .param-group { background : var(--c-bg-2); border : 1px solid var(--c-border); border-radius: var(--r-md); padding : var(--sp-5); margin-bottom: var(--sp-4); } .param-group__title { font-family : var(--font-mono); font-size : var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color : var(--c-text-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom : 1px solid var(--c-border); } .param-row { display : flex; align-items : center; justify-content: space-between; gap : var(--sp-4); padding : var(--sp-2) 0; } .param-row:not(:last-child) { border-bottom: 1px solid var(--c-border); } .param-label { font-size : var(--fs-sm); color : var(--c-text-2); flex : 1; min-width : 0; } .param-label small { display : block; font-family: var(--font-mono); font-size : var(--fs-xs); color : var(--c-text-3); margin-top: 2px; } .param-control { display : flex; align-items: center; gap : var(--sp-2); flex-shrink: 0; } /* Range slider */ .cast-range { -webkit-appearance: none; appearance : none; width : 120px; height : 3px; background : var(--c-border-light); border-radius : 2px; outline : none; cursor : pointer; } .cast-range::-webkit-slider-thumb { -webkit-appearance: none; width : 14px; height : 14px; border-radius : 50%; background : var(--c-orange); cursor : pointer; box-shadow : 0 0 0 3px var(--c-orange-pale); transition : box-shadow var(--t-fast); } .cast-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 5px var(--c-orange-glow); } .cast-range::-moz-range-thumb { width : 14px; height : 14px; border-radius: 50%; background : var(--c-orange); cursor : pointer; border : none; } .range-value { font-family : var(--font-mono); font-size : var(--fs-sm); color : var(--c-orange); min-width : 48px; text-align : right; } /* Select */ .cast-select { background : var(--c-bg-3); border : 1px solid var(--c-border); border-radius: var(--r-base); color : var(--c-text); font-family : var(--font-mono); font-size : var(--fs-sm); padding : var(--sp-2) var(--sp-3); outline : none; cursor : pointer; transition : border-color var(--t-fast); appearance : none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235f6368'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } .cast-select:focus { border-color: var(--c-orange); } .cast-select option { background: var(--c-bg-3); } /* Toggle / chip group */ .chip-group { display : flex; gap : var(--sp-2); flex-wrap: wrap; } .chip { font-family : var(--font-mono); font-size : var(--fs-xs); padding : var(--sp-1) var(--sp-3); border-radius: var(--r-sm); border : 1px solid var(--c-border); background : var(--c-bg-3); color : var(--c-text-2); cursor : pointer; transition : all var(--t-fast); letter-spacing: 0.04em; white-space : nowrap; } .chip:hover { border-color: var(--c-border-light); color: var(--c-text); } .chip.active { border-color: var(--c-orange); background : var(--c-orange-pale); color : var(--c-orange); } /* ═══════════════════════════════════════════════════════════════ 12. PARTING LINE CONTROLS ═══════════════════════════════════════════════════════════════ */ .parting-controls { background : var(--c-bg-2); border : 1px solid var(--c-border); border-radius: var(--r-md); padding : var(--sp-4); } .parting-mode-tabs { display : flex; gap : var(--sp-2); margin-bottom: var(--sp-4); } .parting-mode-tab { flex : 1; padding : var(--sp-2) var(--sp-3); border-radius: var(--r-base); border : 1px solid var(--c-border); background : var(--c-bg-3); color : var(--c-text-2); font-family : var(--font-mono); font-size : var(--fs-xs); letter-spacing: 0.04em; text-align : center; cursor : pointer; transition : all var(--t-fast); } .parting-mode-tab:hover { border-color: var(--c-border-light); } .parting-mode-tab.active { border-color: var(--c-green); background : var(--c-green-dim); color : var(--c-green); } /* ═══════════════════════════════════════════════════════════════ 13. PREVIEW / HOLE LEGEND ═══════════════════════════════════════════════════════════════ */ .hole-legend { display : flex; flex-wrap: wrap; gap : var(--sp-3); } .hole-legend__item { display : flex; align-items: center; gap : var(--sp-2); font-family: var(--font-mono); font-size : var(--fs-xs); color : var(--c-text-2); } .hole-legend__dot { width : 10px; height : 10px; border-radius: 50%; flex-shrink : 0; } /* ═══════════════════════════════════════════════════════════════ 14. QUOTE / PREVENTIVO PANEL ═══════════════════════════════════════════════════════════════ */ .quote-panel { background : var(--c-bg-2); border : 1px solid var(--c-border); border-radius: var(--r-md); overflow : hidden; } .quote-panel__header { background : var(--c-bg-3); border-bottom: 1px solid var(--c-border); padding : var(--sp-4) var(--sp-5); display : flex; align-items : center; justify-content: space-between; } .quote-panel__title { font-family : var(--font-mono); font-size : var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color : var(--c-text-2); } .quote-panel__body { padding: var(--sp-5); } .quote-line { display : flex; justify-content: space-between; align-items : center; padding : var(--sp-3) 0; font-size : var(--fs-sm); color : var(--c-text-2); } .quote-line:not(:last-child) { border-bottom: 1px solid var(--c-border); } .quote-line__label { color: var(--c-text-2); } .quote-line__value { font-family : var(--font-mono); color : var(--c-text); font-weight : 500; } .quote-total { background : var(--c-orange-pale); border-top : 1px solid var(--c-orange); padding : var(--sp-4) var(--sp-5); display : flex; justify-content: space-between; align-items : center; } .quote-total__label { font-family : var(--font-mono); font-size : var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color : var(--c-orange); } .quote-total__amount { font-family : var(--font-mono); font-size : var(--fs-xl); font-weight : 600; color : var(--c-orange); } /* ═══════════════════════════════════════════════════════════════ 15. BUTTONS ═══════════════════════════════════════════════════════════════ */ .btn-cast { font-family : var(--font-mono); font-size : var(--fs-sm); letter-spacing: 0.06em; padding : var(--sp-3) var(--sp-6); border-radius: var(--r-base); border : 1.5px solid transparent; cursor : pointer; transition : all var(--t-fast); display : inline-flex; align-items : center; gap : var(--sp-2); white-space : nowrap; text-decoration: none; line-height : 1; } .btn-cast-primary { background : var(--c-orange); border-color: var(--c-orange); color : var(--c-text-inv); font-weight : 600; } .btn-cast-primary:hover { background : var(--c-orange-dim); border-color: var(--c-orange-dim); box-shadow : var(--shadow-orange); color : var(--c-text-inv); } .btn-cast-primary:disabled { opacity: 0.4; cursor : not-allowed; box-shadow: none; } .btn-cast-outline { background : transparent; border-color: var(--c-border-light); color : var(--c-text-2); } .btn-cast-outline:hover { border-color: var(--c-text-2); color : var(--c-text); } .btn-cast-ghost { background : transparent; border-color: transparent; color : var(--c-text-3); padding-left : var(--sp-2); padding-right: var(--sp-2); } .btn-cast-ghost:hover { color : var(--c-text-2); background : var(--c-bg-3); } /* Wizard nav buttons */ .wizard-nav { display : flex; justify-content: space-between; align-items : center; margin-top : var(--sp-8); padding-top : var(--sp-6); border-top : 1px solid var(--c-border); } /* ═══════════════════════════════════════════════════════════════ 16. ALERTS & TOASTS ═══════════════════════════════════════════════════════════════ */ .cast-alert { display : flex; gap : var(--sp-3); align-items : flex-start; padding : var(--sp-3) var(--sp-4); border-radius: var(--r-base); border : 1px solid; font-size : var(--fs-sm); margin-bottom: var(--sp-3); } .cast-alert.info { background: var(--c-blue-dim); border-color: var(--c-blue); color: var(--c-blue); } .cast-alert.success { background: var(--c-green-dim); border-color: var(--c-green); color: var(--c-green); } .cast-alert.warning { background: rgba(255,170,0,0.1); border-color: var(--c-amber); color: var(--c-amber); } .cast-alert.danger { background: var(--c-red-dim); border-color: var(--c-red); color: var(--c-red); } .cast-alert i { margin-top: 1px; flex-shrink: 0; } /* Toast container */ .toast-container { position : fixed; bottom : var(--sp-5); right : var(--sp-5); z-index : 9000; display : flex; flex-direction: column; gap : var(--sp-2); pointer-events: none; } .cast-toast { background : var(--c-bg-3); border : 1px solid var(--c-border-light); border-radius: var(--r-base); padding : var(--sp-3) var(--sp-4); font-family : var(--font-mono); font-size : var(--fs-xs); color : var(--c-text-2); box-shadow : var(--shadow-lg); pointer-events: auto; animation : toastIn 220ms ease both; display : flex; align-items : center; gap : var(--sp-2); max-width : 320px; } @keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .cast-toast.orange { border-left: 3px solid var(--c-orange); } .cast-toast.green { border-left: 3px solid var(--c-green); } .cast-toast.red { border-left: 3px solid var(--c-red); } /* ═══════════════════════════════════════════════════════════════ 17. LOADING / SPINNER ═══════════════════════════════════════════════════════════════ */ .cast-spinner { width : 20px; height : 20px; border : 2px solid var(--c-border-light); border-top : 2px solid var(--c-orange); border-radius: 50%; animation : spin 600ms linear infinite; flex-shrink : 0; } @keyframes spin { to { transform: rotate(360deg); } } .processing-overlay { position : absolute; inset : 0; background : rgba(12,13,14,0.82); display : flex; flex-direction : column; align-items : center; justify-content : center; gap : var(--sp-4); z-index : 50; backdrop-filter : blur(4px); border-radius : inherit; } .processing-overlay__label { font-family : var(--font-mono); font-size : var(--fs-sm); color : var(--c-text-2); letter-spacing: 0.06em; } /* ═══════════════════════════════════════════════════════════════ 18. FORMAT BADGE ═══════════════════════════════════════════════════════════════ */ .fmt-badge { font-family : var(--font-mono); font-size : var(--fs-xs); padding : 2px var(--sp-2); border-radius: var(--r-sm); letter-spacing: 0.06em; text-transform: uppercase; font-weight : 600; } .fmt-badge.stl { background: rgba(68,136,255,0.15); color: var(--c-blue); border: 1px solid rgba(68,136,255,0.3); } .fmt-badge.tmf { background: rgba(0,224,138,0.10); color: var(--c-green); border: 1px solid rgba(0,224,138,0.3); } .fmt-badge.obj { background: rgba(255,170,0,0.10); color: var(--c-amber); border: 1px solid rgba(255,170,0,0.3); } /* ═══════════════════════════════════════════════════════════════ 19. STEP SECTION HEADERS ═══════════════════════════════════════════════════════════════ */ .step-header { margin-bottom: var(--sp-6); } .step-header__eyebrow { font-family : var(--font-mono); font-size : var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color : var(--c-orange); margin-bottom: var(--sp-2); display : flex; align-items : center; gap : var(--sp-2); } .step-header__eyebrow::before { content : ''; display : inline-block; width : 20px; height : 1px; background: var(--c-orange); } .step-header__title { font-size : var(--fs-xl); font-weight: 600; color : var(--c-text); margin-bottom: var(--sp-2); } .step-header__desc { font-size: var(--fs-sm); color : var(--c-text-2); max-width: 560px; line-height: var(--lh-base); } /* ═══════════════════════════════════════════════════════════════ 20. RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .wizard-body { padding: var(--sp-5) var(--sp-4); } .wizard-track { padding: var(--sp-3) var(--sp-4); } .wizard-step__label { display: none; } .cast-navbar { padding: var(--sp-3) var(--sp-4); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .param-row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); } .cast-range { width: 100%; } .wizard-nav { flex-direction: column; gap: var(--sp-3); } .btn-cast { width: 100%; justify-content: center; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr 1fr; } .upload-zone { padding: var(--sp-10) var(--sp-4); } } /* ═══════════════════════════════════════════════════════════════ 21. SCROLLBAR ═══════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--c-bg-2); } ::-webkit-scrollbar-thumb { background: var(--c-border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); } /* ═══════════════════════════════════════════════════════════════ 22. LIGHT THEME Applied via [data-theme="light"] on . Overrides CSS custom properties only -all components adapt. ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { --c-bg : #f5f5f3; --c-bg-2 : #efefed; --c-bg-3 : #e8e8e6; --c-bg-4 : #dededc; --c-surface : #ebebea; --c-border : #d0d0ce; --c-border-light: #b8b8b6; --c-orange : #d94f10; --c-orange-dim : #b83d0a; --c-orange-glow : rgba(217, 79, 16, 0.18); --c-orange-pale : rgba(217, 79, 16, 0.08); --c-blue : #1a5fd4; --c-blue-dim : rgba(26, 95, 212, 0.12); --c-green : #0a7c4e; --c-green-dim : rgba(10, 124, 78, 0.10); --c-amber : #c47600; --c-red : #c4202e; --c-red-dim : rgba(196, 32, 46, 0.10); --c-text : #1a1a18; --c-text-2 : #4a4a48; --c-text-3 : #7a7a78; --c-text-inv : #f5f5f3; --shadow-sm : 0 1px 3px rgba(0,0,0,0.10); --shadow-md : 0 4px 16px rgba(0,0,0,0.12); --shadow-lg : 0 12px 40px rgba(0,0,0,0.14); --shadow-inset : inset 0 1px 0 rgba(255,255,255,0.6); } /* Light theme -grain overlay lighter */ [data-theme="light"] body::before { opacity: 0.015; } /* Light theme -Bootstrap override */ [data-theme="light"] { color-scheme: light; } /* ── System preference fallback (no JS / no localStorage) ── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --c-bg : #f5f5f3; --c-bg-2 : #efefed; --c-bg-3 : #e8e8e6; --c-bg-4 : #dededc; --c-surface : #ebebea; --c-border : #d0d0ce; --c-border-light: #b8b8b6; --c-orange : #d94f10; --c-orange-dim : #b83d0a; --c-orange-glow : rgba(217, 79, 16, 0.18); --c-orange-pale : rgba(217, 79, 16, 0.08); --c-blue : #1a5fd4; --c-blue-dim : rgba(26, 95, 212, 0.12); --c-green : #0a7c4e; --c-green-dim : rgba(10, 124, 78, 0.10); --c-amber : #c47600; --c-red : #c4202e; --c-red-dim : rgba(196, 32, 46, 0.10); --c-text : #1a1a18; --c-text-2 : #4a4a48; --c-text-3 : #7a7a78; --c-text-inv : #f5f5f3; --shadow-sm : 0 1px 3px rgba(0,0,0,0.10); --shadow-md : 0 4px 16px rgba(0,0,0,0.12); --shadow-lg : 0 12px 40px rgba(0,0,0,0.14); } } /* ═══════════════════════════════════════════════════════════════ 23. THEME TOGGLE BUTTON ═══════════════════════════════════════════════════════════════ */ .theme-toggle { width : 32px; height : 32px; background : var(--c-bg-3); border : 1px solid var(--c-border); border-radius : var(--r-base); color : var(--c-text-2); display : flex; align-items : center; justify-content : center; cursor : pointer; transition : all var(--t-fast); font-size : var(--fs-sm); flex-shrink : 0; } .theme-toggle:hover { color : var(--c-orange); border-color: var(--c-orange); } /* Icon swap */ .theme-toggle .icon-dark { display: block; } .theme-toggle .icon-light { display: none; } [data-theme="light"] .theme-toggle .icon-dark { display: none; } [data-theme="light"] .theme-toggle .icon-light { display: block; } /* ── Locale selector ─────────────────────────────────────── */ .locale-select { background : var(--c-bg-3); border : 1px solid var(--c-border); border-radius: var(--r-base); color : var(--c-text-2); font-family : var(--font-mono); font-size : var(--fs-xs); padding : 0 var(--sp-2); height : 32px; outline : none; cursor : pointer; transition : border-color var(--t-fast); appearance : none; letter-spacing: 0.04em; min-width : 54px; } .locale-select:focus { border-color: var(--c-orange); } .locale-select option { background: var(--c-bg-3); color: var(--c-text); } /* ═══════════════════════════════════════════════════════════════ 24. RTL SUPPORT Applied when (Arabic and other RTL locales). Mirrors layout-sensitive properties. ═══════════════════════════════════════════════════════════════ */ [dir="rtl"] { /* Navbar */ .cast-navbar__brand { flex-direction: row-reverse; } /* Wizard steps connector */ .wizard-step:not(:last-child)::after { order: -1; } /* Step header eyebrow line */ .step-header__eyebrow::before { order: 1; } /* Param rows */ .param-row { flex-direction: row-reverse; } /* Range value */ .range-value { text-align: left; } /* Quote lines */ .quote-line { flex-direction: row-reverse; } .quote-total { flex-direction: row-reverse; } /* Wizard nav */ .wizard-nav { flex-direction: row-reverse; } /* Cast alerts */ .cast-alert { flex-direction: row-reverse; } /* Stat cards */ .stat-card.ok, .stat-card.warn, .stat-card.error, .stat-card.accent { border-left : none; border-right : 2px solid; } .stat-card.ok { border-right-color: var(--c-green); } .stat-card.warn { border-right-color: var(--c-amber); } .stat-card.error { border-right-color: var(--c-red); } .stat-card.accent { border-right-color: var(--c-orange); } /* Toast */ .cast-toast { flex-direction: row-reverse; } .cast-toast.orange { border-left: none; border-right: 3px solid var(--c-orange); } .cast-toast.green { border-left: none; border-right: 3px solid var(--c-green); } .cast-toast.red { border-left: none; border-right: 3px solid var(--c-red); } .toast-container { left: var(--sp-5); right: auto; } /* Select arrow */ .cast-select { background-position: left 10px center; padding-right: var(--sp-3); padding-left : 28px; } /* Process card line */ .process-card::before { transform-origin: right; } /* FAQ */ .faq-q { flex-direction: row-reverse; } /* Footer */ .cast-footer__inner { flex-direction: row-reverse; } .cast-footer__legal { flex-direction: row-reverse; } } /* ═══════════════════════════════════════════════════════════════ 25. INDEX PAGE -HERO ═══════════════════════════════════════════════════════════════ */ .hero { min-height : 100vh; display : flex; flex-direction : column; justify-content: center; padding : var(--sp-16) var(--sp-6); position : relative; overflow : hidden; } /* Animated grid background */ .hero::before { content : ''; position : absolute; inset : 0; background : linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px); background-size: 48px 48px; mask-image : radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%); opacity : 0.35; animation : gridDrift 24s linear infinite; pointer-events : none; } @keyframes gridDrift { 0% { transform: translate(0, 0); } 100% { transform: translate(48px, 48px); } } /* Orange glow blob */ .hero__blob { position : absolute; width : 600px; height : 600px; border-radius : 50%; background : radial-gradient(circle, var(--c-orange-glow) 0%, transparent 70%); top : 50%; left : 55%; transform : translate(-50%, -50%); pointer-events: none; animation : blobPulse 6s ease-in-out infinite; z-index : 0; } @keyframes blobPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -52%) scale(1.08); opacity: 0.7; } } .hero__inner { position : relative; z-index : 1; max-width: 1200px; margin : 0 auto; width : 100%; } .hero__eyebrow { font-family : var(--font-mono); font-size : var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color : var(--c-orange); margin-bottom: var(--sp-5); display : flex; align-items : center; gap : var(--sp-3); animation : fadeUp 600ms ease both; } .hero__eyebrow::before { content : ''; width : 32px; height : 1px; background: var(--c-orange); flex-shrink: 0; } [dir="rtl"] .hero__eyebrow { flex-direction: row-reverse; } [dir="rtl"] .hero__eyebrow::before { order: 1; } .hero__title { font-size : clamp(2.8rem, 7vw, 5.5rem); font-weight : 700; line-height : 1.02; letter-spacing: -0.03em; color : var(--c-text); margin-bottom: var(--sp-6); animation : fadeUp 600ms 100ms ease both; } .hero__title em { font-style: normal; color : var(--c-orange); position : relative; } .hero__title em::after { content : ''; position : absolute; bottom : 4px; left : 0; right : 0; height : 3px; background : var(--c-orange); border-radius : 2px; animation : lineGrow 800ms 600ms ease both; transform-origin: left; } [dir="rtl"] .hero__title em::after { transform-origin: right; } @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hero__sub { font-size : var(--fs-md); color : var(--c-text-2); max-width : 540px; line-height : 1.65; margin-bottom: var(--sp-8); animation : fadeUp 600ms 200ms ease both; } .hero__actions { display : flex; gap : var(--sp-4); flex-wrap: wrap; animation: fadeUp 600ms 300ms ease both; } .hero__stats { display : flex; gap : var(--sp-8); margin-top: var(--sp-12); animation : fadeUp 600ms 400ms ease both; flex-wrap : wrap; } .hero__stat { display : flex; flex-direction: column; gap : var(--sp-1); } .hero__stat-value { font-family : var(--font-mono); font-size : var(--fs-xl); font-weight : 500; color : var(--c-text); letter-spacing: -0.02em; } .hero__stat-label { font-family : var(--font-mono); font-size : var(--fs-xs); color : var(--c-text-3); letter-spacing: 0.1em; text-transform: uppercase; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Hero CTA buttons */ .btn-hero-primary { background : var(--c-orange); color : var(--c-text-inv); font-family : var(--font-mono); font-size : var(--fs-base); font-weight : 600; letter-spacing: 0.04em; padding : var(--sp-4) var(--sp-8); border-radius: var(--r-base); border : none; cursor : pointer; text-decoration: none; display : inline-flex; align-items : center; gap : var(--sp-3); transition : all var(--t-base); } .btn-hero-primary:hover { background: var(--c-orange-dim); color : var(--c-text-inv); transform : translateY(-2px); box-shadow: 0 8px 32px var(--c-orange-glow); } .btn-hero-secondary { background : transparent; color : var(--c-text-2); font-family : var(--font-mono); font-size : var(--fs-base); letter-spacing: 0.04em; padding : var(--sp-4) var(--sp-6); border-radius: var(--r-base); border : 1px solid var(--c-border-light); cursor : pointer; text-decoration: none; display : inline-flex; align-items : center; gap : var(--sp-2); transition : all var(--t-base); } .btn-hero-secondary:hover { border-color: var(--c-text-2); color : var(--c-text); } /* ═══════════════════════════════════════════════════════════════ 26. INDEX PAGE -SECTIONS ═══════════════════════════════════════════════════════════════ */ .index-section { padding : var(--sp-16) var(--sp-6); max-width: 1200px; margin : 0 auto; } .section-divider { border : none; border-top: 1px solid var(--c-border); margin : 0; } .section-label { font-family : var(--font-mono); font-size : var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color : var(--c-text-3); margin-bottom: var(--sp-3); } .section-title { font-size : clamp(1.8rem, 4vw, 2.8rem); font-weight : 600; letter-spacing: -0.02em; color : var(--c-text); margin-bottom: var(--sp-4); } .section-sub { font-size : var(--fs-base); color : var(--c-text-2); max-width : 500px; line-height: 1.65; } /* ── Process cards ───────────────────────────────────────── */ .process-grid { display : grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap : var(--sp-4); margin-top : var(--sp-10); } .process-card { background : var(--c-bg-2); border : 1px solid var(--c-border); border-radius: var(--r-md); padding : var(--sp-6); position : relative; overflow : hidden; transition : border-color var(--t-base), transform var(--t-base); } .process-card::before { content : ''; position : absolute; top : 0; left : 0; right : 0; height : 2px; background : linear-gradient(90deg, var(--c-orange) 0%, transparent 100%); transform : scaleX(0); transform-origin: left; transition : transform var(--t-slow); } [dir="rtl"] .process-card::before { background : linear-gradient(270deg, var(--c-orange) 0%, transparent 100%); transform-origin: right; } .process-card:hover { border-color: var(--c-border-light); transform: translateY(-3px); } .process-card:hover::before { transform: scaleX(1); } .process-card__num { font-family : var(--font-mono); font-size : var(--fs-3xl); font-weight : 700; color : var(--c-bg-4); line-height : 1; margin-bottom: var(--sp-4); letter-spacing: -0.04em; user-select : none; } .process-card__icon { font-size : 1.6rem; color : var(--c-orange); margin-bottom: var(--sp-3); display : block; } .process-card__title { font-size : var(--fs-md); font-weight : 600; color : var(--c-text); margin-bottom: var(--sp-2); } .process-card__desc { font-size : var(--fs-sm); color : var(--c-text-2); line-height: 1.6; } /* ── Kit cards ───────────────────────────────────────────── */ .kit-grid { display : grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap : var(--sp-4); margin-top : var(--sp-10); } .kit-card { background : var(--c-bg-2); border : 1px solid var(--c-border); border-radius: var(--r-md); padding : var(--sp-5); text-align : center; transition : border-color var(--t-base); } .kit-card:hover { border-color: var(--c-orange); } .kit-card__icon { font-size: 2rem; margin-bottom: var(--sp-3); display: block; } .kit-card__title { font-size: var(--fs-base); font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-2); } .kit-card__desc { font-size: var(--fs-xs); color: var(--c-text-3); font-family: var(--font-mono); line-height: 1.5; } /* ── Pricing card ────────────────────────────────────────── */ .pricing-card { background : var(--c-bg-2); border : 1px solid var(--c-border); border-radius: var(--r-lg); overflow : hidden; max-width : 480px; margin : var(--sp-10) auto 0; } .pricing-card__header { background : var(--c-bg-3); border-bottom: 1px solid var(--c-border); padding : var(--sp-6) var(--sp-8); text-align : center; } .pricing-card__tag { font-family : var(--font-mono); font-size : var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color : var(--c-orange); margin-bottom: var(--sp-3); } .pricing-card__title { font-size: var(--fs-xl); font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-2); } .pricing-card__sub { font-size: var(--fs-sm); color: var(--c-text-3); font-family: var(--font-mono); } .pricing-card__body { padding: var(--sp-6) var(--sp-8); } .pricing-line { display : flex; justify-content: space-between; align-items : center; padding : var(--sp-3) 0; font-size : var(--fs-sm); border-bottom : 1px solid var(--c-border); color : var(--c-text-2); } .pricing-line:last-child { border-bottom: none; } .pricing-line__value { font-family: var(--font-mono); color: var(--c-text); } .pricing-card__cta { padding : var(--sp-6) var(--sp-8); border-top: 1px solid var(--c-border); text-align: center; background: var(--c-orange-pale); } /* ── FAQ ─────────────────────────────────────────────────── */ .faq-list { margin-top: var(--sp-8); max-width: 720px; } .faq-item { border-bottom: 1px solid var(--c-border); } .faq-q { width : 100%; background : none; border : none; color : var(--c-text); font-family : var(--font-body); font-size : var(--fs-base); font-weight : 500; text-align : left; padding : var(--sp-5) 0; cursor : pointer; display : flex; justify-content: space-between; align-items : center; gap : var(--sp-4); transition : color var(--t-fast); } [dir="rtl"] .faq-q { text-align: right; flex-direction: row-reverse; } .faq-q:hover { color: var(--c-orange); } .faq-q i { flex-shrink: 0; transition : transform var(--t-base); color : var(--c-text-3); } .faq-item.open .faq-q i { transform: rotate(45deg); color: var(--c-orange); } .faq-a { font-size : var(--fs-sm); color : var(--c-text-2); line-height: 1.65; max-height : 0; overflow : hidden; transition : max-height var(--t-slow), padding var(--t-base); } .faq-item.open .faq-a { max-height: 300px; padding-bottom: var(--sp-5); } /* ── Scroll reveal ───────────────────────────────────────── */ .reveal { opacity : 0; transform: translateY(24px); transition: opacity 560ms ease, transform 560ms ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── Footer ──────────────────────────────────────────────── */ .cast-footer { background: var(--c-bg-2); border-top: 1px solid var(--c-border); padding : var(--sp-10) var(--sp-6); margin-top: var(--sp-16); } .cast-footer__inner { max-width : 1200px; margin : 0 auto; display : flex; justify-content: space-between; align-items : flex-start; gap : var(--sp-8); flex-wrap : wrap; } .cast-footer__brand { font-family: var(--font-mono); font-size : var(--fs-sm); color : var(--c-text-3); } .cast-footer__brand strong { color : var(--c-text); display : block; margin-bottom: var(--sp-2); font-size : var(--fs-base); } .cast-footer__links { display : flex; gap : var(--sp-5); flex-wrap: wrap; } .cast-footer__links a { font-family : var(--font-mono); font-size : var(--fs-xs); color : var(--c-text-3); text-decoration: none; letter-spacing : 0.06em; transition : color var(--t-fast); } .cast-footer__links a:hover { color: var(--c-orange); } .cast-footer__legal { width : 100%; font-family : var(--font-mono); font-size : var(--fs-xs); color : var(--c-text-3); padding-top : var(--sp-6); border-top : 1px solid var(--c-border); margin-top : var(--sp-6); display : flex; justify-content: space-between; flex-wrap : wrap; gap : var(--sp-3); } /* ── Index responsive ────────────────────────────────────── */ @media (max-width: 768px) { .hero { padding: var(--sp-12) var(--sp-4); } .hero__blob { width: 300px; height: 300px; } .index-section { padding: var(--sp-12) var(--sp-4); } .hero__stats { gap: var(--sp-6); } .cast-footer__inner { flex-direction: column; } .process-grid { grid-template-columns: 1fr; } }