/* Ko-fi Theme for Stamp3D Activate by adding data-theme="kofi" to Switch with the theme button in the header */ /* ─── CSS Variable Overrides ─── */ [data-theme="kofi"] { --ink: #292929; --ink-muted: #717171; --ink-faint: #ABABAB; --paper: #F5F5F5; --paper-warm: #FFFFFF; --paper-mid: #EBEBEB; --stamp-red: #29ABE0; --stamp-red-dark: #1A8BBF; --stamp-red-light: #E8F6FC; --stamp-red-rgb: 41,171,224; --accent: #FE9F6D; --accent-light: #FFF3ED; --border: rgba(0,0,0,0.07); --border-strong: rgba(0,0,0,0.14); --radius: 12px; --radius-lg: 20px; --shadow: 0 2px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 48px rgba(0,0,0,0.12); } /* ─── Body & Base ─── */ [data-theme="kofi"] body { font-family: 'Nunito', sans-serif; background: #ddeaf5; position: relative; } [data-theme="kofi"] body::before { content: ''; position: fixed; inset: 0; background: url('paper-texture.jpg') repeat; background-size: 600px 600px; opacity: 0.3; pointer-events: none; z-index: 0; } [data-theme="kofi"] body > * { position: relative; z-index: 1; } [data-theme="kofi"] .signup-modal-backdrop, [data-theme="kofi"] .progress-overlay { position: fixed; } /* ─── Header ─── */ [data-theme="kofi"] header { background: #FFFFFF; color: #292929; border-bottom: 1px solid rgba(0,0,0,0.07); box-shadow: 0 1px 8px rgba(0,0,0,0.06); } [data-theme="kofi"] .logo { font-family: 'Nunito', sans-serif; font-weight: 800; color: #29ABE0; letter-spacing: -0.01em; } [data-theme="kofi"] .logo-icon { background: #29ABE0; border-radius: 50%; } [data-theme="kofi"] .header-note { font-family: 'Nunito', sans-serif; color: #ABABAB; font-size: 0.8rem; } /* ─── Hero ─── */ [data-theme="kofi"] .hero { background: transparent; color: #292929; } [data-theme="kofi"] .hero::before { display: none; } [data-theme="kofi"] .hero h1 { font-family: 'Nunito', sans-serif; font-weight: 800; color: #292929; } [data-theme="kofi"] .hero h1 em { color: #29ABE0; font-style: normal; } [data-theme="kofi"] .hero p { color: #717171; } [data-theme="kofi"] .stamp-preview-badge { background: rgba(41,171,224,0.1); border-color: rgba(41,171,224,0.25); color: #29ABE0; font-family: 'Nunito', sans-serif; letter-spacing: 0.04em; } /* ─── Cards ─── */ [data-theme="kofi"] .card { border: none; box-shadow: 0 2px 16px rgba(0,0,0,0.08); } [data-theme="kofi"] .card-header-icon { background: #E8F6FC; } [data-theme="kofi"] .card-title { font-family: 'Nunito', sans-serif; font-weight: 700; } /* ─── Tabs ─── */ [data-theme="kofi"] .tab-btn, [data-theme="kofi"] .preview-tab-btn { font-family: 'Nunito', sans-serif; font-weight: 600; } [data-theme="kofi"] .tab-btn.active, [data-theme="kofi"] .preview-tab-btn.active { color: #29ABE0; } /* ─── Form Elements ─── */ [data-theme="kofi"] label { font-family: 'Nunito', sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: #292929; margin-bottom: 5px; } [data-theme="kofi"] input[type="text"], [data-theme="kofi"] select, [data-theme="kofi"] textarea { font-family: 'Nunito', sans-serif; border-radius: 10px; } [data-theme="kofi"] input[type="text"]:focus, [data-theme="kofi"] select:focus, [data-theme="kofi"] textarea:focus { border-color: #29ABE0; box-shadow: 0 0 0 3px rgba(41,171,224,0.12); } [data-theme="kofi"] input[type="range"] { accent-color: #29ABE0; } [data-theme="kofi"] .range-val { color: #29ABE0; } /* ─── Font Selector ─── */ [data-theme="kofi"] .font-opt:hover, [data-theme="kofi"] .font-opt.selected { border-color: #29ABE0; background: #E8F6FC; } /* ─── Upload Zone ─── */ [data-theme="kofi"] .upload-zone:hover, [data-theme="kofi"] .upload-zone.drag-over { border-color: #29ABE0; background: #E8F6FC; } /* ─── Layout Selector ─── */ [data-theme="kofi"] .layout-opt:hover, [data-theme="kofi"] .layout-opt.selected { border-color: #29ABE0; background: #E8F6FC; } [data-theme="kofi"] .layout-opt.selected .lo-label { color: #1A8BBF; } /* ─── Shape Selector ─── */ [data-theme="kofi"] .shape-opt:hover, [data-theme="kofi"] .shape-opt.active { border-color: #29ABE0; background: #E8F6FC; } [data-theme="kofi"] .shape-opt.active .so-name, [data-theme="kofi"] .shape-opt.active svg { color: #1A8BBF; } [data-theme="kofi"] .so-name { font-family: 'Nunito', sans-serif; font-weight: 600; } /* ─── Handle Selector ─── */ [data-theme="kofi"] .handle-opt:hover, [data-theme="kofi"] .handle-opt.selected { border-color: #29ABE0; background: #E8F6FC; } [data-theme="kofi"] .handle-opt.selected .ho-name, [data-theme="kofi"] .handle-opt.selected .ho-desc { color: #1A8BBF; } /* ─── Align Buttons ─── */ [data-theme="kofi"] .align-btn:hover, [data-theme="kofi"] .align-btn.selected { border-color: #29ABE0; background: #E8F6FC; } /* ─── Relief Selector ─── */ [data-theme="kofi"] .relief-opt:hover, [data-theme="kofi"] .relief-opt.selected { border-color: #29ABE0; background: #E8F6FC; } [data-theme="kofi"] .relief-opt.selected .ro-name { color: #1A8BBF; } [data-theme="kofi"] .relief-opt.selected .ro-val { color: #29ABE0; } [data-theme="kofi"] .relief-hint { color: #29ABE0; } /* ─── Download Button ─── */ [data-theme="kofi"] .btn-download { background: #29ABE0; border-radius: 50px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0; } [data-theme="kofi"] .btn-download:hover { background: #1A8BBF; box-shadow: 0 4px 20px rgba(41,171,224,0.4); } /* ─── Tip Button ─── */ [data-theme="kofi"] .btn-tip { background: #FFDD00; color: #292929; font-family: 'Nunito', sans-serif; font-weight: 700; border-radius: 50px; } [data-theme="kofi"] .btn-tip:hover { background: #F0CF00; transform: translateY(-1px); } /* ─── Tip Jar Section ─── */ [data-theme="kofi"] .tip-jar { background: linear-gradient(135deg, #FFF8E7 0%, #FFF3ED 100%); border-color: rgba(254,159,109,0.3); } /* ─── Print Tips ─── */ [data-theme="kofi"] .tips { background: #FFF3ED; border-left-color: #FE9F6D; } [data-theme="kofi"] .tips h4 { color: #FE9F6D; } [data-theme="kofi"] .tips li { color: #7D4A2A; } [data-theme="kofi"] .tips li::before { color: #FE9F6D; } /* ─── Status Bar ─── */ [data-theme="kofi"] .status-dot { background: #29ABE0; } [data-theme="kofi"] .status-bar { font-family: 'Nunito', sans-serif; } /* ─── Toggle Switch ─── */ [data-theme="kofi"] .toggle input:checked + .toggle-slider { background: #29ABE0; } /* ─── Progress ─── */ [data-theme="kofi"] .progress-bar-fill { background: #29ABE0; } [data-theme="kofi"] .progress-title { font-family: 'Nunito', sans-serif; font-weight: 800; } /* ─── Supply Chips / Aff Links ─── */ [data-theme="kofi"] .aff-link { color: #29ABE0; border-bottom-color: rgba(41,171,224,0.35); } [data-theme="kofi"] .supply-chip:hover { border-color: #29ABE0; background: #E8F6FC; color: #1A8BBF; } /* ─── Help Section ─── */ [data-theme="kofi"] .help-section-title { font-family: 'Nunito', sans-serif; font-weight: 800; } [data-theme="kofi"] .help-card h3 svg { color: #29ABE0; } [data-theme="kofi"] .help-card li::before { color: #29ABE0; } /* ─── Printer Type Buttons ─── */ [data-theme="kofi"] #printer-fdm.active, [data-theme="kofi"] #printer-resin.active { border-color: #29ABE0; background: #E8F6FC; color: #1A8BBF; } /* ─── Advanced Toggle ─── */ [data-theme="kofi"] .advanced-toggle { font-family: 'Nunito', sans-serif; } /* ─── Footer ─── */ [data-theme="kofi"] footer { color: #ABABAB; } /* ─── Theme Switcher Button (shared, not scoped) ─── */ .theme-switcher { display: flex; align-items: center; gap: 6px; padding: 5px 13px; border: 1.5px solid rgba(255,255,255,0.22); border-radius: 50px; background: transparent; color: rgba(250,249,246,0.75); font-family: 'DM Sans', sans-serif; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; white-space: nowrap; flex-shrink: 0; } .theme-switcher:hover { border-color: rgba(255,255,255,0.5); color: rgba(250,249,246,1); background: rgba(255,255,255,0.08); } [data-theme="kofi"] .theme-switcher { border-color: rgba(41,171,224,0.35); color: #29ABE0; font-family: 'Nunito', sans-serif; font-weight: 600; background: transparent; } [data-theme="kofi"] .theme-switcher:hover { border-color: #29ABE0; background: #E8F6FC; color: #1A8BBF; }