/* app.css */ /* ───────────────────────────────────────────────────────────────────────────── FONTS & VARIABLES Declared once here. footer.css and top-menu.css should REMOVE their own duplicate @font-face and :root blocks and rely on these shared declarations. ───────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Nunito Sans'; src: url('fonts/Geist-Regular.woff2') format('woff2'); font-weight: normal; } @font-face { font-family: 'Gabarito'; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: normal; } :root { --primary-blue: #0062ff; --black: #000000; --white: #ffffff; --light-blue: #f0f6ff; --gray: #e0e0e0; /* Shared with footer.css */ --deep-gray: #111111; --text-muted: #666666; --border-color: #f0f0f0; } /* ───────────────────────────────────────────────────────────────────────────── APP PAGE WRAPPER Instead of styling bare `body` (which would clash with top-menu.css and footer.css), we wrap the app content in `.app-page` and style that. In your HTML replace: →

…

───────────────────────────────────────────────────────────────────────────── */ .app-page { background-color: #f4f7f6; padding: 20px; display: flex; justify-content: center; /* Stretch to fill remaining viewport height below the top-bar */ min-height: calc(100vh - 121px); /* 121px = top-bar height; adjust if needed */ box-sizing: border-box; } /* ───────────────────────────────────────────────────────────────────────────── ALL APP STYLES — scoped under .app-card so they never leak into the top-menu or footer. ───────────────────────────────────────────────────────────────────────────── */ /* Reset only inside the card */ .app-card * { box-sizing: border-box; margin: 0; padding: 0; } /* Material Icons — scoped to .app-card to avoid overriding icons in the top-menu or footer */ .app-card .material-icons { vertical-align: middle; font-size: 1.1rem; margin-right: 5px; line-height: 1; display: inline-flex; align-items: center; } /* Hidden utility — scoped so it only affects elements inside .app-card */ .app-card .hidden { display: none !important; } .app-card { font-family: 'Nunito Sans', sans-serif; background-color: var(--white); color: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; width: 100%; max-width: 900px; text-align: center; padding: 40px 20px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } .app-card header { margin-bottom: 32px; padding: 0 20px; } .app-card h1 { font-family: 'Gabarito', sans-serif; color: var(--primary-blue); letter-spacing: -1px; margin-bottom: 8px; text-align: center; width: 100%; font-size: clamp(1.5rem, 4vw, 2.5rem); } .app-card h1 span { color: #000; } .app-card p.subtitle { font-size: 1rem; opacity: 0.7; } /* Upload Box */ .app-card .upload-container { border: 3px dashed var(--primary-blue); border-radius: 16px; padding: 50px 30px; cursor: pointer; transition: 0.3s; width: 80%; max-width: 500px; margin: 0 auto; } .app-card .upload-container:hover { background-color: var(--light-blue); } /* Status Bar */ .app-card #statusBar { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 18px; border-radius: 30px; background: var(--light-blue); font-size: 0.92rem; font-weight: 600; color: var(--primary-blue); min-width: 260px; justify-content: center; transition: background 0.3s; } .app-card #statusBar.idle { display: none !important; } .app-card #statusBar.busy { background: #fff3cd; color: #856404; } .app-card #statusBar.error { background: #fde8e8; color: #c0392b; } .app-card #statusBar.success { background: #e8f0fe; color: #1a73e8; } .app-card .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary-blue); flex-shrink: 0; animation: app-pulse 1.5s infinite; } .app-card #statusBar.busy .status-dot { background: #f0a500; } .app-card #statusBar.error .status-dot { background: #c0392b; animation: none; } .app-card #statusBar.success .status-dot { background: #1a73e8; animation: none; } /* Renamed from `pulse` to `app-pulse` to avoid clashing with any other keyframe named `pulse` in top-menu.css or footer.css */ @keyframes app-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } /* Progress Bar */ .app-card #progressContainer { margin-top: 16px; width: 80%; max-width: 500px; } .app-card .progress-bar-bg { width: 100%; height: 6px; background: var(--gray); border-radius: 4px; overflow: hidden; } .app-card #progressBar { height: 100%; background: var(--primary-blue); width: 0%; transition: width 0.3s ease; } /* Buttons */ .app-card .btn { display: inline-flex; align-items: center; justify-content: center; background-color: var(--primary-blue); color: var(--white); padding: 13px 28px; font-family: 'Gabarito', sans-serif; font-weight: 700; border-radius: 12px; border: none; cursor: pointer; font-size: 1rem; transition: background 0.2s, transform 0.15s; text-align: center; gap: 6px; } .app-card .btn .material-icons { margin-right: 0; } .app-card .btn:hover { background-color: #0050d2; transform: translateY(-1px); } .app-card .btn:active { transform: translateY(0); } .app-card .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .app-card .btn-secondary { background-color: var(--gray); color: var(--black); } .app-card .btn-secondary:hover { background-color: #cccccc; } .app-card .btn-ghost { background-color: #f5f5f5; color: #555; border: 1.5px solid #ddd; } .app-card .btn-ghost:hover { background-color: #e8e8e8; } .app-card .btn-ghost:disabled { opacity: 0.35; } .app-card .btn-full { width: 100%; } /* Enhance done / permanently locked state */ .app-card .btn-enhance-done { background-color: #c8dafe !important; color: #1a4fbf !important; border: 1.5px solid #93b4fa !important; cursor: not-allowed !important; opacity: 0.7 !important; } .app-card .btn-enhance-done:hover { background-color: #c8dafe !important; transform: none !important; } /* Editor Layout */ .app-card #editorContainer { width: 100%; display: flex; flex-wrap: wrap; gap: 32px; margin-top: 30px; justify-content: center; align-items: flex-start; } .app-card .canvas-section { display: flex; flex-direction: column; align-items: center; gap: 12px; /* wide enough for: padding-left(28) + canvas(300) + border(8) + gap(8) + bracket(20) + padding-right(30) */ width: 360px; } /* Canvas wrapper — extra space for dimension lines */ .app-card .canvas-wrapper { position: relative; padding-left: 28px; padding-top: 28px; padding-right: 30px; /* room for right-side head-size bracket */ } /* Canvas */ /* NOTE: width & height are set via inline style by app-passport-maker.js (driven by PASSPORT_CANVAS_CONFIG.canvasDisplayWidth/Height in index.html). Do not hardcode pixel dimensions here — change them in the config block. */ .app-card .canvas-container { position: relative; border-radius: 10px; border: 4px solid #757678; box-shadow: 0 4px 20px rgba(0,0,0,0.12); overflow: hidden; background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; background-color: #f8f8f8; } .app-card #renderCanvas { width: 100%; height: 100%; cursor: grab; touch-action: none; display: block; } .app-card #renderCanvas:active { cursor: grabbing; } .app-card #canvasLoader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.88); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } .app-card .canvas-spinner { width: 40px; height: 40px; border: 4px solid var(--gray); border-top: 4px solid var(--primary-blue); border-radius: 50%; animation: app-spin 1s linear infinite; margin-bottom: 12px; } .app-card #canvasLoader p { font-size: 0.85rem; font-weight: 700; color: var(--primary-blue); margin: 0; } /* Renamed from `spin` to `app-spin` to avoid clashing with any other keyframe named `spin` elsewhere */ @keyframes app-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .app-card .canvas-hint { display: flex; align-items: center; font-size: 0.78rem; color: #999; margin-top: -4px; margin-bottom: 4px; } .app-card .canvas-hint .material-icons { font-size: 1rem; margin-right: 4px; } /* Dimension lines */ /* NOTE: width (dim-line-h) and height (dim-line-v) are set via inline style by the config script in index.html (dimensionLabelH/V + canvasDisplayWidth/Height). Do not hardcode pixel dimensions here. */ .app-card .dim-line-h { position: absolute; top: 6px; left: 28px; height: 14px; pointer-events: none; } .app-card .dim-line-h svg { width: 100%; height: 100%; overflow: visible; } .app-card .dim-line-v { position: absolute; left: 6px; top: 28px; width: 14px; pointer-events: none; } .app-card .dim-line-v svg { width: 100%; height: 100%; overflow: visible; } /* Canvas info icon */ .app-card .canvas-info-icon { position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; z-index: 20; cursor: default; } .app-card .canvas-info-icon .ci-dot { width: 18px; height: 18px; background: var(--primary-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; font-family: Georgia, serif; font-style: italic; line-height: 1; box-shadow: 0 1px 4px rgba(0,98,255,0.25); transition: background 0.15s, transform 0.15s; user-select: none; } .app-card .canvas-info-icon:hover .ci-dot { background: #0050d2; transform: scale(1.1); } .app-card .canvas-info-icon .ci-tooltip { visibility: hidden; opacity: 0; position: absolute; left: calc(100% + 8px); top: 0; background: #1e293b; color: #fff; font-size: 0.74rem; font-weight: 500; line-height: 1.5; padding: 10px 12px; border-radius: 10px; width: 300px; text-align: left; box-shadow: 0 4px 20px rgba(0,0,0,0.22); pointer-events: none; z-index: 100; transition: opacity 0.18s, visibility 0.18s; font-family: 'Nunito Sans', sans-serif; } .app-card .canvas-info-icon .ci-tooltip::before { content: ''; position: absolute; right: 100%; top: 6px; width: 0; height: 0; border-style: solid; border-width: 5px 5px 5px 0; border-color: transparent #1e293b transparent transparent; } .app-card .canvas-info-icon .ci-tooltip .ci-tooltip-title { font-size: 0.78rem; font-weight: 700; color: #93c5fd; margin-bottom: 5px; display: block; font-family: 'Gabarito', sans-serif; } .app-card .canvas-info-icon .ci-tooltip ul { margin: 5px 0 0 0; padding-left: 14px; } .app-card .canvas-info-icon .ci-tooltip ul li { margin-bottom: 3px; } .app-card .canvas-info-icon:hover .ci-tooltip { visibility: visible; opacity: 1; } /* Undo/Redo bar */ .app-card .history-bar { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; } .app-card .history-bar .btn-ghost { padding: 7px 14px; font-size: 0.82rem; border-radius: 8px; flex: 1; } .app-card .history-bar .history-label { font-size: 0.75rem; color: #aaa; min-width: 70px; text-align: center; } /* Tools Panel */ .app-card .tools-section { display: flex; flex-direction: column; gap: 22px; text-align: left; min-width: 270px; max-width: 320px; width: 100%; } .app-card .tool-group { background: #fafbfc; border: 1px solid #ebebeb; border-radius: 12px; padding: 16px 18px; width: 100%; } .app-card .tool-group h3 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin-bottom: 12px; font-family: 'Gabarito', sans-serif; } /* AI Actions */ .app-card .ai-actions-col { display: flex; flex-direction: column; gap: 10px; } .app-card .ai-action-item { display: flex; align-items: center; gap: 0; background: #fff; border: 1.5px solid #d6e4ff; border-radius: 12px; overflow: visible; transition: box-shadow 0.2s, border-color 0.2s; } .app-card .ai-action-item:hover { box-shadow: 0 2px 12px rgba(0,98,255,0.10); border-color: #93b4fa; } .app-card .ai-action-btn { flex: 1; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #0062ff 0%, #1a7aff 100%); color: #fff; padding: 13px 16px; font-family: 'Gabarito', sans-serif; font-weight: 700; font-size: 0.95rem; border: none; cursor: pointer; transition: background 0.2s, opacity 0.2s; text-align: left; border-radius: 10px 0 0 10px; } .app-card .ai-action-btn .material-icons { font-size: 1.15rem; margin: 0; flex-shrink: 0; opacity: 0.9; } .app-card .ai-action-btn:hover { background: linear-gradient(135deg, #0050d2 0%, #0062ff 100%); } .app-card .ai-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .app-card .ai-action-btn:disabled:hover { background: linear-gradient(135deg, #0062ff 0%, #1a7aff 100%); } .app-card .ai-action-btn.done { background: linear-gradient(135deg, #c8dafe 0%, #dce8ff 100%) !important; color: #1a4fbf !important; cursor: not-allowed !important; opacity: 0.85 !important; } .app-card .ai-action-info { width: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f0f6ff; align-self: stretch; border-left: 1.5px solid #d6e4ff; border-radius: 0 10px 10px 0; position: relative; overflow: visible; cursor: default; } .app-card .ai-action-info .material-icons { font-size: 1rem; margin: 0; color: #6a9de8; transition: color 0.15s; } .app-card .ai-action-info:hover .material-icons { color: var(--primary-blue); } .app-card .ai-action-info .tooltip { visibility: hidden; opacity: 0; position: absolute; right: 0; top: calc(100% + 7px); background: #1e293b; color: #fff; font-size: 0.78rem; font-weight: 500; line-height: 1.4; padding: 7px 10px; border-radius: 8px; width: 200px; text-align: left; box-shadow: 0 4px 16px rgba(0,0,0,0.18); pointer-events: none; z-index: 100; transition: opacity 0.18s, visibility 0.18s; } .app-card .ai-action-info .tooltip::before { content: ''; position: absolute; bottom: 100%; right: 14px; width: 0; height: 0; border-style: solid; border-width: 0 5px 5px 5px; border-color: transparent transparent #1e293b transparent; } .app-card .ai-action-info:hover .tooltip { visibility: visible; opacity: 1; } /* Color Palette */ .app-card .color-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .app-card .color-swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid #ddd; cursor: pointer; transition: transform 0.15s, border-color 0.15s; } .app-card .color-swatch:hover { transform: scale(1.12); } .app-card .color-swatch.active { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(0,98,255,0.18); transform: scale(1.12); } .app-card .color-swatch.transparent-swatch { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; background-color: #fff; } .app-card .custom-color-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .app-card .custom-color-row .color-wheel-btn { width: 36px; height: 36px; border-radius: 8px; cursor: pointer; padding: 0; background: none; border: 2px solid #ddd; overflow: hidden; flex-shrink: 0; transition: border-color 0.15s, transform 0.15s; position: relative; } .app-card .custom-color-row .color-wheel-btn:hover { border-color: var(--primary-blue); transform: scale(1.1); } .app-card .custom-color-row .color-wheel-btn img { width: 100%; height: 100%; object-fit: cover; display: block; } .app-card .custom-color-row input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } .app-card .custom-color-row label { font-size: 0.88rem; color: #666; cursor: pointer; } .app-card .select-row { display: flex; flex-direction: column; gap: 8px; } .app-card .select-row select { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1.5px solid var(--gray); font-size: 0.92rem; font-family: 'Nunito Sans', sans-serif; background: #fff; color: #333; outline: none; cursor: pointer; } .app-card .select-row select:focus { border-color: var(--primary-blue); } .app-card .custom-bg-btn { background: var(--light-blue); color: var(--primary-blue); border: 1.5px solid var(--primary-blue); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 0.88rem; font-weight: 700; width: 100%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; gap: 6px; } .app-card .custom-bg-btn .material-icons { margin-right: 0; font-size: 1.1rem; } .app-card .custom-bg-btn:hover { background: #d8eaff; } /* Position controls */ .app-card .move-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; justify-items: center; margin-top: 6px; } .app-card .move-controls .ctrl-btn { background: #f0f0f0; border: none; border-radius: 8px; width: 36px; height: 36px; cursor: pointer; transition: background 0.15s; display: flex; align-items: center; justify-content: center; color: #333; } .app-card .move-controls .ctrl-btn .material-icons { margin: 0; font-size: 1.2rem; } .app-card .move-controls .ctrl-btn:hover { background: #dde8ff; color: var(--primary-blue); } .app-card .zoom-row { display: flex; gap: 6px; align-items: center; margin-top: 12px; } .app-card .zoom-row input[type="range"] { flex: 1; accent-color: var(--primary-blue); } .app-card .zoom-row span { font-size: 0.82rem; color: #666; min-width: 36px; text-align: right; display: flex; align-items: center; } .app-card .zoom-row span .material-icons { font-size: 1.1rem; margin: 0; color: #999; } .app-card .divider { width: 100%; height: 1px; background: #ebebeb; margin: 4px 0; } .app-card .divider--spaced { margin: 12px 0; } /* Upload hint sub-text */ .app-card .upload-hint { margin-top: 10px; opacity: 0.6; } /* Progress bar — extra top spacing when rendered below status bar */ .app-card .progress-bar-bg--spaced { margin-top: 10px; } /* Reset button top spacing */ .app-card .btn-reset-spacing { margin-top: 10px; } /* Footer links list reset */ .footer-links { list-style: none; padding: 0; } /* ───────────────────────────────────────────────────────────────────────────── HEAD ZONE OVERLAY & BRACKET ───────────────────────────────────────────────────────────────────────────── */ /* Overlay sits inside .canvas-container (dashed lines only, no label) */ .app-card .head-zone-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; } /* Each dashed guide line — animated marching ants */ .app-card .hz-line { position: absolute; left: 0; width: 100%; height: 2px; background-image: repeating-linear-gradient( 90deg, #22c55e 0px, #22c55e 6px, transparent 6px, transparent 11px ); background-size: 11px 100%; animation: hz-march 0.45s linear infinite; } @keyframes hz-march { from { background-position: 0 0; } to { background-position: 11px 0; } } /* Right-side bracket ruler — positioned absolutely in .canvas-wrapper by JS */ .app-card .dim-line-head { position: absolute; pointer-events: none; overflow: visible; } .app-card .dim-line-head svg { overflow: visible; display: block; }