/* ============================================================================= TRMNL Badge Builder — Shared Stylesheet Used by both index.html (recipe-page) and author-badge.html (author-page). Pages set a class on to allow page-specific overrides: index.html → author-badge.html → ============================================================================= */ /* ----------------------------------------------------------------------------- Reset ----------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ----------------------------------------------------------------------------- Base / Body ----------------------------------------------------------------------------- */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: #3d3d3e; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } /* ----------------------------------------------------------------------------- Container index.html uses max-width: 600px; author-badge.html uses max-width: 700px. ----------------------------------------------------------------------------- */ .container { background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); width: 100%; padding: 40px; } /* Recipe badge builder (index.html) */ .recipe-page .container { max-width: 600px; } /* Author badge builder (author-badge.html) */ .author-page .container { max-width: 700px; } /* ----------------------------------------------------------------------------- Typography ----------------------------------------------------------------------------- */ h1 { color: #333; margin-bottom: 10px; font-size: 28px; } .subtitle { color: #666; margin-bottom: 30px; font-size: 14px; } /* ----------------------------------------------------------------------------- Header ----------------------------------------------------------------------------- */ .header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } .logo { flex-shrink: 0; } .logo svg { width: 48px; height: 48px; } .header-text h1 { margin: 0; margin-bottom: 8px; } .header-text .subtitle { margin: 0; } /* ----------------------------------------------------------------------------- Navigation Pill ----------------------------------------------------------------------------- */ .nav-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: #c73d2a; text-decoration: none; font-size: 12px; transition: color 0.2s; } .nav-pill:hover { color: #a73525; text-decoration: underline; } /* ----------------------------------------------------------------------------- Form — General ----------------------------------------------------------------------------- */ .form-group { margin-bottom: 24px; } label { display: block; font-weight: 600; color: #333; margin-bottom: 8px; font-size: 14px; } svg.label-icon { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: text-top; margin-right: 6px; fill: #c73d2a; } .label-hint { font-weight: 400; color: #999; font-size: 12px; margin-left: 4px; } .label-hint a { color: #c73d2a; text-decoration: none; transition: color 0.2s; } .label-hint a:hover { color: #a73525; text-decoration: underline; } /* ----------------------------------------------------------------------------- Text / Select Inputs ----------------------------------------------------------------------------- */ input[type='text'], select { width: 100%; padding: 10px 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 14px; transition: border-color 0.2s; } /* Focus ring color differs between pages. index.html uses the TRMNL orange; author-badge.html uses a muted brown. */ .recipe-page input[type='text']:focus, .recipe-page select:focus { outline: none; border-color: #f8654b; } .author-page input[type='text']:focus, .author-page select:focus { outline: none; border-color: #a07068; } /* ----------------------------------------------------------------------------- Checkbox ----------------------------------------------------------------------------- */ .checkbox-group { display: flex; align-items: center; gap: 8px; } input[type='checkbox'] { width: 18px; height: 18px; cursor: pointer; accent-color: #f8654b; } .checkbox-label { margin: 0; font-weight: 400; cursor: pointer; } /* ----------------------------------------------------------------------------- Radio Group (recipe-page only) ----------------------------------------------------------------------------- */ .radio-group { display: flex; gap: 16px; margin-top: 8px; } .radio-option { display: flex; align-items: center; gap: 6px; } .radio-option input[type='radio'] { width: 16px; height: 16px; cursor: pointer; accent-color: #f8654b; } .radio-label { margin: 0; font-weight: 400; cursor: pointer; font-size: 14px; color: #333; } /* ----------------------------------------------------------------------------- Row layout (recipe-page only) ----------------------------------------------------------------------------- */ .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; } .row .form-group { min-width: 140px; flex: 1; } /* ----------------------------------------------------------------------------- Tooltip ----------------------------------------------------------------------------- */ [data-tooltip] { position: relative; } [data-tooltip]::after, [data-tooltip]::before { pointer-events: none; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(6px); background: #3d3d3e; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.4; padding: 6px 10px; border-radius: 6px; white-space: nowrap; z-index: 100; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } [data-tooltip]::before { content: ''; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%) translateY(6px); border: 5px solid transparent; border-top-color: #3d3d3e; z-index: 100; } [data-tooltip]:hover::after, [data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* ----------------------------------------------------------------------------- Shimmer Loading Animation ----------------------------------------------------------------------------- */ @keyframes shimmer-sweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%) !important; background-size: 200% 100% !important; animation: shimmer-sweep 1.2s ease-in-out infinite; border-radius: 4px; } /* ----------------------------------------------------------------------------- Hint / Feedback Row ----------------------------------------------------------------------------- */ .hint-feedback-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 4px; } /* url-hint has margin-top in index.html only; author-badge.html omits it. */ .url-hint { font-size: 12px; color: #999; } .recipe-page .url-hint { margin-top: 4px; } /* ----------------------------------------------------------------------------- Recipe Feedback (recipe-page only) ----------------------------------------------------------------------------- */ .recipe-feedback { display: flex; align-items: center; gap: 6px; font-size: 12px; min-height: 18px; flex-shrink: 0; } .recipe-feedback.success { color: #388e3c; } .recipe-feedback.error { color: #d32f2f; } .recipe-feedback .icon { font-size: 14px; } /* ----------------------------------------------------------------------------- Author Feedback (author-page only) ----------------------------------------------------------------------------- */ .author-feedback { display: flex; align-items: center; gap: 6px; font-size: 12px; min-height: 18px; flex-shrink: 0; } .author-feedback.success { color: #388e3c; } .author-feedback.error { color: #d32f2f; } .author-feedback .icon { font-size: 14px; } /* ----------------------------------------------------------------------------- Feedback / status text helpers (recipe-page only) ----------------------------------------------------------------------------- */ .error { color: #d32f2f; font-size: 12px; margin-top: 4px; } .success { color: #388e3c; font-size: 12px; margin-top: 4px; } /* ----------------------------------------------------------------------------- Button — common active state ----------------------------------------------------------------------------- */ button:active { transform: scale(0.98); } /* ----------------------------------------------------------------------------- Button Group (author-page only) ----------------------------------------------------------------------------- */ .button-group { display: flex; gap: 12px; margin-bottom: 24px; } .generate-btn { background: #f8654b; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; flex: 1; } .generate-btn:hover { background: #e8523a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(248, 101, 75, 0.3); } .generate-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; } /* ----------------------------------------------------------------------------- Input + Customize Toggle Inline Row (author-page only) ----------------------------------------------------------------------------- */ .input-action-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .input-action-row input[type='text'] { flex: 1; margin: 0; } @media (max-width: 480px) { .input-action-row { flex-wrap: wrap; } .input-action-row input[type='text'] { flex-basis: 100%; } .author-page .customize-toggle { flex: 1; justify-content: center; } } /* ----------------------------------------------------------------------------- Customize Appearance Toggle The two pages share the toggle's visual style but differ in alignment and padding: recipe-page: align-self: flex-end; padding: 8px 12px author-page: align-self: stretch; padding: 10px 12px Icon/chevron SVG sizes also differ (16 px vs 14 px). ----------------------------------------------------------------------------- */ .customize-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 2px solid #e0e0e0; color: #695a58; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 6px; flex-shrink: 0; white-space: nowrap; transition: border-color 0.2s, color 0.2s; } .recipe-page .customize-toggle { align-self: flex-end; padding: 8px 12px; } .author-page .customize-toggle { align-self: stretch; padding: 10px 12px; } .customize-toggle:hover { border-color: #f8654b; color: #f8654b; } /* Toggle icon / chevron — recipe-page uses 16 px, author-page uses 14 px */ .recipe-page .toggle-icon, .recipe-page .toggle-chevron { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } .recipe-page .toggle-chevron { transition: transform 0.2s; } .author-page .customize-toggle svg.toggle-icon { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; } .author-page .customize-toggle svg.toggle-chevron { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; transition: transform 0.2s; margin-left: 2px; } .customize-toggle[aria-expanded='true'] .toggle-chevron, .customize-toggle[aria-expanded='true'] svg.toggle-chevron { transform: rotate(180deg); } .customize-active-dot { border-radius: 50%; background: #f8654b; flex-shrink: 0; } /* recipe-page: 6 px dot; author-page: 7 px dot */ .recipe-page .customize-active-dot { width: 6px; height: 6px; } .author-page .customize-active-dot { width: 7px; height: 7px; } /* recipe-page only — full-width toggle on very small screens */ @media (max-width: 480px) { .recipe-page .customize-toggle { flex-basis: 100%; justify-content: center; } } /* ----------------------------------------------------------------------------- Customize Panel Both pages animate max-height for open/close but differ in transition timing, and only author-page adds a background/border to the panel itself. ----------------------------------------------------------------------------- */ .customize-panel { overflow: hidden; max-height: 0; } /* recipe-page: single transition in both directions */ .recipe-page .customize-panel { transition: max-height 0.35s ease; } .recipe-page .customize-panel.open { max-height: 600px; } /* author-page: different timing curve + adds visual background/border */ .author-page .customize-panel { transition: max-height 0.25s ease-out; background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 16px; } .author-page .customize-panel.open { transition: max-height 0.3s ease-in; } /* ----------------------------------------------------------------------------- Customize Panel Inner recipe-page wraps content in a bordered box; author-page uses a flex row. ----------------------------------------------------------------------------- */ .customize-panel-inner { padding: 16px; } .recipe-page .customize-panel-inner { border: 2px solid #e0e0e0; border-radius: 8px; margin-bottom: 16px; } .recipe-page .customize-panel-inner .form-group { min-width: 0; } /* Badge Scale needs extra min-width to prevent label + value pill wrapping when the scale value changes to larger values like 2.5x or 3x */ .recipe-page .customize-panel-inner .row > .form-group:nth-child(2) { min-width: 165px; } .author-page .customize-panel-inner { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; } /* ----------------------------------------------------------------------------- Customize Column (author-page only) ----------------------------------------------------------------------------- */ .customize-col { display: flex; flex-direction: column; } .customize-section-label { font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } /* ----------------------------------------------------------------------------- Glyph Selector Swatch size: recipe-page uses 35 px; author-page uses 40 px. Hidden radio technique also differs (display:none vs. visually-hidden). ----------------------------------------------------------------------------- */ .glyph-group { display: flex; gap: 10px; } /* recipe-page adds top margin to the group (it sits inside a plain .form-group) */ .recipe-page .glyph-group { margin-top: 8px; } .glyph-option { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; } /* recipe-page hides the radio input entirely */ .recipe-page .glyph-option input[type='radio'] { display: none; } /* author-page keeps the radio visually hidden but accessible */ .author-page .glyph-option input[type='radio'] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .glyph-swatch { border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; transition: border-color 0.2s; } .recipe-page .glyph-swatch { width: 35px; height: 35px; } .author-page .glyph-swatch { width: 40px; height: 40px; } .glyph-option input[type='radio']:checked + .glyph-swatch { border-color: #667eea; } .author-page .glyph-option input[type='radio']:focus-visible + .glyph-swatch { outline: 2px solid #667eea; outline-offset: 2px; } .glyph-swatch svg { width: 24px; height: 24px; } .glyph-label { font-size: 11px; color: #666; font-weight: 400; margin: 0; } /* ----------------------------------------------------------------------------- Color Pickers Picker size: recipe-page uses 35 px; author-page uses 40 px. ----------------------------------------------------------------------------- */ .color-row { display: flex; gap: 16px; } /* recipe-page adds top margin to the row (it sits inside a plain .form-group) */ .recipe-page .color-row { margin-top: 8px; } .color-item { display: flex; flex-direction: column; align-items: center; gap: 5px; } .color-label-text { font-size: 11px; color: #666; font-weight: 400; } input[type='color'] { border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; padding: 2px; background: none; transition: border-color 0.2s; } .recipe-page input[type='color'] { width: 35px; height: 35px; } .author-page input[type='color'] { width: 40px; height: 40px; } input[type='color']:focus { outline: none; border-color: #667eea; } /* ----------------------------------------------------------------------------- Scale Slider (recipe-page only) ----------------------------------------------------------------------------- */ .scale-control { margin-top: 8px; } input[type='range'] { width: 100%; cursor: pointer; accent-color: #f8654b; margin: 8px 0 2px; } .scale-ticks { display: flex; justify-content: space-between; font-size: 10px; color: #999; } .scale-value-pill { display: inline-block; background: #f8654b; color: white; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; min-width: 28px; text-align: center; } /* ----------------------------------------------------------------------------- Badge Preview (recipe-page only — single recipe preview area) ----------------------------------------------------------------------------- */ .preview-section { background: #f5f5f5; border: 2px solid #e0e0e0; border-radius: 8px; padding: 20px; margin: 5px 0; text-align: center; min-height: 80px; display: flex; flex-direction: column; justify-content: center; } .preview-label { font-size: 12px; color: #999; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; } .preview-image { min-height: 60px; display: flex; align-items: center; justify-content: center; padding: 8px 0; } .preview-image img { max-width: 100%; image-rendering: crisp-edges; } /* ----------------------------------------------------------------------------- Recipe Info Card (recipe-page only) ----------------------------------------------------------------------------- */ .recipe-info { margin-top: 16px; padding: 12px 16px; background: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; text-align: left; display: none; align-items: center; gap: 12px; } .recipe-info.show { display: flex; } .recipe-info-thumbnail { width: 42px; height: 42px; border-radius: 10px; border: 1px solid #e0e0e0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); flex-shrink: 0; background: #f5f5f5; display: flex; align-items: center; justify-content: center; padding: 4px; } .recipe-info-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } .recipe-info-thumbnail svg { width: 24px; height: 24px; } .recipe-info-text { flex: 1; min-width: 0; } .recipe-name { font-size: 14px; font-weight: 600; color: #3d3d3e; margin-bottom: 6px; } .recipe-stats { font-size: 13px; color: #666; line-height: 1.4; } /* ----------------------------------------------------------------------------- Code Output Section code-section margin-top: recipe-page uses 30 px; author-page uses 24 px. ----------------------------------------------------------------------------- */ .recipe-page .code-section { margin-top: 30px; } .author-page .code-section { margin-top: 24px; } .code-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 12px; } /* recipe-page splits the header into left/right groups */ .code-header-left { display: flex; align-items: center; gap: 12px; } .code-header-right { display: flex; align-items: center; gap: 12px; } .code-type { font-weight: 600; color: #333; font-size: 14px; } /* ----------------------------------------------------------------------------- Copy Button ----------------------------------------------------------------------------- */ .copy-btn { background: #f8654b; color: white; border: none; padding: 8px 14px; border-radius: 4px; font-size: 13px; cursor: pointer; transition: all 0.2s; font-weight: 500; display: flex; align-items: center; gap: 6px; } .copy-btn:hover { background: #e8523a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(248, 101, 75, 0.3); } .copy-btn.copied { background: #4caf50; } .copy-btn::before { content: '📋'; font-size: 14px; } .copy-btn.copied::before { content: '✓'; } /* ----------------------------------------------------------------------------- Code Block author-page adds margin-bottom and white-space: pre-wrap for multi-line code. ----------------------------------------------------------------------------- */ code { display: block; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; padding: 12px; font-family: 'Monaco', 'Courier New', monospace; font-size: 12px; color: #333; word-break: break-all; overflow-x: auto; line-height: 1.5; } .author-page code { margin-bottom: 16px; white-space: pre-wrap; } /* ----------------------------------------------------------------------------- Tabs Tab section top margin: recipe-page uses 30 px; author-page uses 20 px. ----------------------------------------------------------------------------- */ .recipe-page .tabs { margin: 30px 0 12px 0; } .author-page .tabs { margin: 20px 0 12px 0; } .tabs { display: flex; gap: 8px; border-bottom: 2px solid #e0e0e0; } .tab-btn { background: none; border: none; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #999; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; } .tab-btn:hover { color: #667eea; } .tab-btn.active { color: #667eea; border-bottom-color: #667eea; } .tab-content { display: none; } .tab-content.active { display: block; } /* ----------------------------------------------------------------------------- Syntax Highlighting ----------------------------------------------------------------------------- */ .syntax-protocol { color: #667eea; font-weight: 500; } .syntax-domain { color: #d32f2f; font-weight: 500; } .syntax-path { color: #555; } .syntax-param-key { color: #388e3c; } .syntax-param-val { color: #f57c00; } .syntax-bracket { color: #666; } /* ----------------------------------------------------------------------------- New Badge Indicator (recipe-page only) ----------------------------------------------------------------------------- */ .new-badge { display: inline-block; background: #f8654b; color: white; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; vertical-align: middle; animation: pulse-new 2s ease-in-out 3; } @keyframes pulse-new { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ----------------------------------------------------------------------------- Author Stats Section (author-page only) ----------------------------------------------------------------------------- */ .author-stats-section { background: #fff5f3; border: 2px solid #f5e0db; border-radius: 8px; padding: 24px; margin: 24px 0; display: none; } .author-stats-section.show { display: block; } .stats-header { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; } .stat-card { background: white; border: 1px solid #e0e0e0; border-radius: 6px; padding: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; } .stat-badge-container { height: 32px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; } .stat-badge-container svg { max-width: 100%; height: auto; max-height: 32px; } .stat-number { font-size: 28px; font-weight: 700; color: #f8654b; margin-bottom: 4px; } .stat-label { font-size: 12px; color: #999; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; } .combined-badges { background: white; border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .badge-item { display: inline-flex; align-items: center; gap: 6px; background: #f5f5f5; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; } .badge-item-name { color: #333; } .badge-item-value { background: #f8654b; color: white; padding: 2px 6px; border-radius: 3px; } /* ----------------------------------------------------------------------------- Individual Recipes Section (author-page only) ----------------------------------------------------------------------------- */ .individual-recipes-section { margin: 24px 0; display: none; } .individual-recipes-section.show { display: block; } .recipes-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .recipes-header { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 0; padding-left: 20px; position: relative; } .recipes-header::before { content: '📋'; position: absolute; left: 0; font-size: 18px; } .recipes-list { display: grid; gap: 12px; } .recipe-item { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .recipe-item-thumbnail { width: 42px; height: 42px; border-radius: 10px; border: 1px solid #e0e0e0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); flex-shrink: 0; background: #f5f5f5; display: flex; align-items: center; justify-content: center; padding: 4px; } .recipe-item-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } .recipe-item-thumbnail svg { width: 24px; height: 24px; } .recipe-item-info { flex: 1; min-width: 0; } .recipe-item-name { font-weight: 600; color: #333; margin-bottom: 6px; font-size: 14px; } .recipe-item-stats { font-size: 13px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recipe-item-stats .recipe-id-link { color: inherit; text-decoration: none; } .recipe-item-action { flex-shrink: 0; } .show-badges-btn { background: #f8654b; color: white; border: none; padding: 8px 16px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .show-badges-btn:hover { background: #e8523a; } .show-badges-btn.expanded { background: #6b7280; } .show-badges-btn.expanded:hover { background: #4b5563; } .show-badges-btn.loading { background: #9ca3af; cursor: wait; pointer-events: none; } .show-badges-btn.loading::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 6px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: btn-spinner 0.6s linear infinite; vertical-align: middle; } @keyframes btn-spinner { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- Recipe Badges Preview (author-page only) ----------------------------------------------------------------------------- */ .recipe-badges-container { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .recipe-badges-container.expanded { max-height: 1000px; transition: max-height 0.3s ease-in; } .recipe-badges-content { padding: 16px; border-top: 1px solid #e0e0e0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } .recipe-badge-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; } .recipe-badge-image { background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; padding: 12px; min-height: 40px; display: flex; align-items: center; justify-content: center; width: 100%; } .recipe-badge-image svg { max-width: 100%; height: auto; max-height: 32px; } .recipe-badge-copy-btn { background: #f0f0f0; color: #333; border: 1px solid #ddd; padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; width: 100%; } .recipe-badge-copy-btn:hover { background: #e0e0e0; border-color: #999; } .recipe-badge-copy-btn.copied { background: #4caf50; color: white; border-color: #4caf50; } /* ----------------------------------------------------------------------------- Copy All Buttons (author-page only) ----------------------------------------------------------------------------- */ .copy-all-global-btn { background: #f8654b; color: white; border: none; padding: 8px 16px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .copy-all-global-btn:hover { background: #e8523a; } .copy-all-global-btn.copied { background: #4caf50; } .copy-all-recipe-btn { background: #f0f0f0; color: #333; border: 1px solid #ddd; padding: 10px 16px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; grid-column: 1 / -1; } .copy-all-recipe-btn:hover { background: #e0e0e0; border-color: #999; } .copy-all-recipe-btn.copied { background: #4caf50; color: white; border-color: #4caf50; } /* ----------------------------------------------------------------------------- Badge Preview Section (author-page only) ----------------------------------------------------------------------------- */ .badge-preview-section { margin-top: 16px; padding-top: 16px; border-top: 2px solid #e0e0e0; } .badge-preview-section .preview-label { font-weight: 600; color: #333; font-size: 13px; margin-bottom: 12px; } .badge-preview { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 4px; padding: 16px; display: flex; flex-direction: row; gap: 16px; align-items: center; flex-wrap: wrap; } .badge-preview svg { max-width: 100%; height: auto; } /* ----------------------------------------------------------------------------- Footer ----------------------------------------------------------------------------- */ .footer { margin-top: 40px; padding-top: 30px; border-top: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; color: #999; } .footer-text { margin: 0; } .footer a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #999; text-decoration: none; transition: transform 0.2s, color 0.2s; font-size: 14px; } .footer a:hover { transform: scale(1.1); color: #f8654b; } .footer svg { width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; } /* ============================================================================= Responsive — Mobile Devices ============================================================================= */ @media (max-width: 600px) { body { align-items: flex-start; padding: 12px; } .container { padding: 24px 20px; border-radius: 8px; } h1 { font-size: 22px; } .header { gap: 12px; margin-bottom: 20px; } .logo svg { width: 36px; height: 36px; } .hint-feedback-row { flex-wrap: wrap; } .customize-panel-inner { flex-direction: column; gap: 16px; } /* recipe-page only */ .recipe-page .customize-panel-inner .row { flex-direction: column; gap: 16px; } /* author-page only */ .recipes-header-row { flex-wrap: wrap; gap: 8px; } } @media (max-width: 480px) { .container { padding: 16px; } h1 { font-size: 20px; } .header { flex-direction: column; gap: 8px; align-items: flex-start; } .subtitle { font-size: 13px; } /* author-page only */ .recipe-item { flex-direction: column; align-items: flex-start; gap: 10px; } .recipe-item-action { width: 100%; } .show-badges-btn { width: 100%; } .stats-grid { grid-template-columns: 1fr; } }