/* ============================================== TATTOO ATMOSPHERE — visual skin only No layout, sizing, or placement changes. Load last in to override polish layers. ============================================== */ :root { --ink-black: #080808; --ink-charcoal: #12100e; --ink-warm: #1a1512; --gold-soft: #c9a962; --gold-muted: rgba(201, 169, 98, 0.55); --gold-glow: rgba(201, 169, 98, 0.18); --cream: #f5f0e8; --cream-dim: #d4cfc4; --accent-ink-green: #2d8f6f; --accent-ink-green-bright: #3cb88a; --bg-gradient: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(45, 143, 111, 0.14) 0%, transparent 55%), radial-gradient(ellipse 90% 60% at 100% 50%, rgba(201, 169, 98, 0.06) 0%, transparent 50%), radial-gradient(ellipse 70% 50% at 0% 80%, rgba(26, 21, 18, 0.9) 0%, transparent 60%), linear-gradient(180deg, #0e0c0a 0%, #080808 45%, #050505 100%); --glass-border: rgba(201, 169, 98, 0.08); --glass-border-strong: rgba(201, 169, 98, 0.16); --text-dim: #a8a095; --text-muted: #7a756c; /* Remap legacy tokens (variables.css) → one studio palette site-wide */ --deep-black: var(--ink-black); --navy-dark: var(--ink-charcoal); --accent-green: var(--accent-ink-green-bright); --accent-green-glow: rgba(60, 184, 138, 0.22); --accent-purple: var(--accent-ink-green-bright); --accent-purple-glow: rgba(60, 184, 138, 0.22); --neon-green: var(--accent-ink-green-bright); --neon-purple: var(--accent-ink-green-bright); --glass-bg: rgba(12, 10, 9, 0.55); --panel-glass-bg: rgba(14, 12, 10, 0.72); --panel-glass-border: rgba(201, 169, 98, 0.10); --prompt-glass-bg: rgba(8, 8, 8, 0.45); --prompt-glass-border: rgba(201, 169, 98, 0.14); --header-glass-bg: rgba(8, 8, 8, 0.72); --header-glass-border: rgba(201, 169, 98, 0.10); --text-white: var(--cream); } /* Subtle ink grain — very light, non-interactive */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; } body { background: var(--bg-gradient); background-attachment: fixed; background-color: var(--ink-black); } /* Editorial headings — body text unchanged */ h1, h2, h3, .fa-hero-title, .community-header h1, .pricing-container h1, main.container h1 { font-family: 'Cormorant Garamond', 'Unbounded', Georgia, serif; font-weight: 600; letter-spacing: 0.02em; } h1, .fa-hero-title, .community-header h1, .pricing-container h1, main.container > h1, .fa-page h1 { color: var(--cream); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 0 40px var(--gold-glow); } h2, h3, .fa-card h2, .fa-public-bio-card h2 { color: var(--cream-dim); font-weight: 600; } h2::after, h3::after, .fa-card > h2::after, .fa-public-gallery-card > h2::after, .fa-inquiry-card > h2::after, .fa-public-bio-card > h2::after, .community-header h1::after, .pricing-container h1::after, main.container > h1::after, .fa-page .fa-hero-title::after { content: ""; display: block; width: 56px; height: 1px; margin-top: 10px; background: linear-gradient(90deg, var(--gold-soft) 0%, rgba(60, 184, 138, 0.35) 55%, transparent 100%); opacity: 0.85; } h3::after { width: 40px; margin-top: 8px; opacity: 0.65; } /* Premium section labels — flash-sheet style, no size change */ label, .fa-field > label, .fa-search-grid > div > label, .auth-form label { font-size: inherit; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft) !important; opacity: 0.88; font-weight: 600; } /* Logo — subtle premium glow, no size change */ .site-logo { filter: drop-shadow(0 0 12px rgba(201, 169, 98, 0.15)); } .site-logo--footer { filter: drop-shadow(0 0 10px rgba(201, 169, 98, 0.12)); } /* Header — studio bar, not transit app */ .main-header { background: rgba(8, 8, 8, 0.72) !important; border-bottom-color: rgba(201, 169, 98, 0.1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .brand, .nav-link { letter-spacing: 0.06em; } .nav-link.active, .nav-link:hover { color: var(--gold-soft); } /* Hamburger — gold glass (components.css still ships legacy neon green) */ .mobile-toggle { background: rgba(201, 169, 98, 0.12) !important; border-color: rgba(201, 169, 98, 0.28) !important; box-shadow: 0 4px 15px rgba(201, 169, 98, 0.12) !important; } .mobile-toggle:hover { background: rgba(201, 169, 98, 0.18) !important; border-color: rgba(201, 169, 98, 0.42) !important; box-shadow: 0 6px 20px rgba(201, 169, 98, 0.16) !important; } .mobile-toggle span:not(.msg-unread-badge) { background: var(--gold-soft) !important; } /* Cards & panels — ink on paper, less neon glass */ .glass-card, .fa-card, .post, .post-form, .pricing-card, .locked-panel, .video-sidebar, main.container > .glass-card, .dm-messenger, .fa-inquiry-card, .fa-public-hero, .fa-public-bio-card, .fa-public-gallery-card { position: relative; background: linear-gradient(145deg, rgba(22, 18, 15, 0.88) 0%, rgba(12, 10, 9, 0.92) 100%) !important; border-color: rgba(201, 169, 98, 0.12) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 80px rgba(201, 169, 98, 0.02) !important; } .glass-card::before, .fa-card::before, .pricing-card::before, .post::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.04; background: repeating-linear-gradient( -12deg, transparent, transparent 3px, rgba(201, 169, 98, 0.35) 3px, rgba(201, 169, 98, 0.35) 4px ); } .glass-card:hover, .fa-card:hover, .pricing-card:hover, .post:hover { border-color: rgba(201, 169, 98, 0.2) !important; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 0 30px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* Buttons — keep size/placement; warmer CTA */ .btn-primary { background: linear-gradient(135deg, var(--accent-ink-green-bright) 0%, var(--accent-ink-green) 100%) !important; color: #f8fafc !important; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px rgba(45, 143, 111, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } .btn-primary:hover { background: linear-gradient(135deg, #45c99a 0%, var(--accent-ink-green-bright) 100%) !important; box-shadow: 0 12px 28px rgba(45, 143, 111, 0.32), 0 0 20px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .btn-secondary { background: rgba(201, 169, 98, 0.06) !important; border-color: rgba(201, 169, 98, 0.22) !important; color: var(--cream-dim) !important; } .btn-secondary:hover { background: rgba(201, 169, 98, 0.12) !important; border-color: rgba(201, 169, 98, 0.35) !important; color: var(--cream) !important; } /* Inputs — gallery form feel */ input, textarea, select, .fa-input, .auth-form input, .comment-textarea { background: rgba(8, 8, 8, 0.6) !important; border-color: rgba(201, 169, 98, 0.14) !important; color: var(--cream) !important; } input::placeholder, textarea::placeholder, .fa-input::placeholder { color: rgba(168, 160, 149, 0.65); } input:focus, textarea:focus, select:focus, .fa-input:focus { border-color: rgba(201, 169, 98, 0.4) !important; box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.15), 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } label, .fa-muted, .fa-hero-sub, .fa-feedback { color: var(--text-dim); } /* Style chips & tags — muted studio labels, not app pills */ .fa-style-chip, .fa-style-tag { border-color: rgba(201, 169, 98, 0.35) !important; background: rgba(201, 169, 98, 0.08) !important; color: var(--cream-dim) !important; } .fa-style-chip:hover { border-color: var(--gold-muted) !important; background: rgba(201, 169, 98, 0.16) !important; color: var(--cream) !important; box-shadow: 0 0 14px var(--gold-glow) !important; } .fa-tag { background: rgba(201, 169, 98, 0.1) !important; color: var(--cream-dim) !important; border: 1px solid rgba(201, 169, 98, 0.2); } /* Find Artist — portfolio-forward list rows */ .fa-artist-list-item { border-color: rgba(201, 169, 98, 0.14) !important; background: linear-gradient(90deg, rgba(201, 169, 98, 0.04) 0%, rgba(8, 8, 8, 0.3) 100%) !important; box-shadow: inset 3px 0 0 transparent; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s; } .fa-artist-list-item:hover { border-color: rgba(201, 169, 98, 0.3) !important; background: linear-gradient(90deg, rgba(201, 169, 98, 0.08) 0%, rgba(18, 16, 14, 0.5) 100%) !important; box-shadow: inset 3px 0 0 var(--gold-soft), 0 8px 28px rgba(0, 0, 0, 0.35); } .fa-artist-list-name { color: var(--cream) !important; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 600; } .fa-artist-list-distance { color: var(--gold-soft) !important; } .fa-artist-list-avatar, .fa-artist-list-avatar-fallback { border-color: rgba(201, 169, 98, 0.4) !important; } .fa-artist-list-avatar-fallback { background: rgba(201, 169, 98, 0.12) !important; color: var(--gold-soft) !important; } /* ── Site-wide premium photo treatment (layout unchanged) ── */ .ta-polish-photo, .fa-artist-list-preview, .fa-artist-photo, .fa-public-gallery img, .fa-gallery img, .fa-artist-list-previews img, .fa-public-avatar, .fa-profile-photo, .tattoo-card img, .post-content img, .post img, .my-designs-card img, .design-thumb img, #qe-output-img, #qe-thumb-img, .sketch-recent-thumb, .video-main-player img, .fa-artist-list-avatar { filter: contrast(1.08) saturate(1.12) brightness(0.98); border: 1px solid rgba(201, 169, 98, 0.22) !important; box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.35), 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25) !important; } .fa-artist-list-preview, .fa-artist-list-previews img { border-color: rgba(201, 169, 98, 0.28) !important; } .fa-public-avatar, .fa-profile-photo, .fa-artist-list-avatar { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 20px var(--gold-glow) !important; } .tattoo-card img { transition: filter 0.35s ease, box-shadow 0.35s ease; } .tattoo-card:hover img { filter: contrast(1.1) saturate(1.15) brightness(1.02); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25), 0 10px 32px rgba(0, 0, 0, 0.55), 0 0 24px var(--gold-glow) !important; } .fa-upload-zone { border-color: rgba(201, 169, 98, 0.25) !important; background: rgba(8, 8, 8, 0.35); } .fa-upload-zone:hover, .fa-upload-zone.is-dragover { border-color: var(--gold-muted) !important; background: rgba(201, 169, 98, 0.04); } /* Artist public profile */ .fa-public-avatar, .fa-profile-photo { border: 2px solid rgba(201, 169, 98, 0.4) !important; } .fa-public-shop { color: var(--gold-soft); font-style: italic; } /* Home hero — solid readable type (avoids gradient-clip blur blocks) */ .hero h1 { font-family: 'Cormorant Garamond', 'Unbounded', Georgia, serif; font-weight: 700; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--cream) !important; color: var(--cream) !important; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85), 0 0 36px var(--gold-glow) !important; filter: none !important; } .hero p { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--cream-dim) !important; color: var(--cream-dim) !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75) !important; } .hero p.hero-tagline { -webkit-text-fill-color: var(--gold-soft) !important; color: var(--gold-soft) !important; } /* Feature cards on home — tattoo showcase uses .tattoo-card above */ /* Pricing / community accents */ .dm-thread:hover, .dm-thread.is-active { border-color: rgba(201, 169, 98, 0.25) !important; background: rgba(201, 169, 98, 0.06) !important; } .dm-bubble-row.is-mine .dm-bubble { background: linear-gradient(135deg, rgba(45, 143, 111, 0.35) 0%, rgba(45, 143, 111, 0.2) 100%) !important; border: 1px solid rgba(60, 184, 138, 0.25); } .dm-bubble-row:not(.is-mine) .dm-bubble { background: rgba(201, 169, 98, 0.08) !important; border: 1px solid rgba(201, 169, 98, 0.12); } .dm-messenger { border-color: rgba(201, 169, 98, 0.12) !important; } /* Home tattoo showcase cards */ .tattoo-card { border-color: rgba(201, 169, 98, 0.15) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); } .tattoo-card.active { border-color: rgba(201, 169, 98, 0.35) !important; box-shadow: 0 0 28px var(--gold-glow), 0 16px 40px rgba(0, 0, 0, 0.5) !important; } .card-overlay span { color: var(--cream); font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.04em; } /* Footer — premium studio close */ footer { border-top: 1px solid rgba(201, 169, 98, 0.2) !important; background: linear-gradient(180deg, rgba(6, 6, 6, 0.95) 0%, #030303 100%) !important; box-shadow: inset 0 1px 0 rgba(201, 169, 98, 0.1); } footer::before { background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(201, 169, 98, 0.22) 0%, rgba(60, 184, 138, 0.08) 40%, transparent 75%) !important; height: 2px !important; } .footer-brand p { color: var(--cream-dim) !important; letter-spacing: 0.02em; line-height: 1.6; } .footer-links h3 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--gold-soft); letter-spacing: 0.06em; } .footer-links a:hover { color: var(--gold-soft); } .copyright { border-top-color: rgba(201, 169, 98, 0.12) !important; color: var(--text-muted) !important; letter-spacing: 0.04em; } /* Pricing / community accents */ .pricing-card.featured, .popular-badge { border-color: var(--gold-muted) !important; } /* ── Site-wide design unity: editors, tools, matching panels & buttons ── */ /* Shared ink panel surface — same card on every tool page */ .tg-sidebar, .qe-sidebar, .tg-panel-center, .qe-panel-center, .qe-panel-right, .tryon-panel-left, .tryon-panel-right, .tryon-panel-center, .print-tools-panel, .st-main-panel, .st-sidebar, .pa-panel { background: linear-gradient(145deg, rgba(22, 18, 15, 0.88) 0%, rgba(12, 10, 9, 0.92) 100%) !important; border-color: rgba(201, 169, 98, 0.12) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* Prompt / resolution inputs — gold frame, cream text (not neon teal) */ .tg-sidebar-textarea, #tg-prompt-side, #tg-negative-prompt, #qe-prompt-desktop { background: rgba(8, 8, 8, 0.55) !important; border-color: rgba(201, 169, 98, 0.14) !important; color: var(--cream) !important; } .tg-sidebar-textarea:focus, #tg-prompt-side:focus, #tg-negative-prompt:focus, #qe-prompt-desktop:focus { border-color: rgba(201, 169, 98, 0.38) !important; box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.12), 0 8px 20px rgba(0, 0, 0, 0.25) !important; } .res-box { background: rgba(8, 8, 8, 0.45) !important; border-color: rgba(201, 169, 98, 0.14) !important; } .res-box:focus-within { border-color: rgba(201, 169, 98, 0.38) !important; background: rgba(12, 10, 9, 0.65) !important; box-shadow: 0 0 14px var(--gold-glow) !important; } .res-tag { background: rgba(201, 169, 98, 0.06) !important; border-right-color: rgba(201, 169, 98, 0.12) !important; color: var(--gold-soft) !important; } .res-box input { color: var(--accent-ink-green-bright) !important; } /* Reset / secondary header controls — same gold outline everywhere */ .stencil-top-reset-btn, .editor-reset-top-btn, .st-top-reset-btn, .tryon-top-reset-btn { background: rgba(201, 169, 98, 0.06) !important; border: 1px solid rgba(201, 169, 98, 0.22) !important; color: var(--cream-dim) !important; } .stencil-top-reset-btn:hover, .editor-reset-top-btn:hover, .st-top-reset-btn:hover, .tryon-top-reset-btn:hover { background: rgba(201, 169, 98, 0.12) !important; border-color: rgba(201, 169, 98, 0.35) !important; color: var(--cream) !important; } /* Tool toggles — gold active ring (generate buttons stay green via .btn-primary) */ .qe-tool-btn:hover, .qe-action-btn:hover, .tryon-tool-btn:hover, .tg-tool-btn:hover { border-color: rgba(201, 169, 98, 0.28) !important; background: rgba(201, 169, 98, 0.06) !important; } .qe-tool-btn.active, .qe-action-btn.active, .tryon-tool-btn.active, .tg-tool-btn.active { background: rgba(201, 169, 98, 0.12) !important; border-color: rgba(201, 169, 98, 0.38) !important; color: var(--cream) !important; box-shadow: 0 0 14px var(--gold-glow) !important; } /* History thumbnails — consistent gold frame */ .sketch-recent-thumb, .sketch-recent-thumb:hover { border-color: rgba(201, 169, 98, 0.28) !important; } .sketch-recent-thumb:hover { box-shadow: 0 4px 14px var(--gold-glow) !important; } .sketch-recents-strip { border-color: rgba(201, 169, 98, 0.08) !important; } /* Prompt Assistant — secondary gold chip, not bright teal box */ .pa-trigger-btn { background: rgba(201, 169, 98, 0.08) !important; border: 1px solid rgba(201, 169, 98, 0.28) !important; color: var(--gold-soft) !important; } .pa-trigger-btn:hover { background: rgba(201, 169, 98, 0.14) !important; border-color: rgba(201, 169, 98, 0.42) !important; color: var(--cream) !important; box-shadow: 0 0 14px var(--gold-glow) !important; } .pa-panel, .pa-modal-content { border-color: rgba(201, 169, 98, 0.16) !important; background: linear-gradient(145deg, rgba(22, 18, 15, 0.96) 0%, rgba(10, 9, 8, 0.98) 100%) !important; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 24px var(--gold-glow) !important; } .pa-suggestion-chip:hover, .pa-suggestion-chip.is-selected { border-color: rgba(201, 169, 98, 0.35) !important; background: rgba(201, 169, 98, 0.1) !important; } .pa-apply-btn { background: linear-gradient(135deg, var(--accent-ink-green-bright) 0%, var(--accent-ink-green) 100%) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #f8fafc !important; } /* Style Trainer — upload zone & cards match site panels */ .st-upload-zone { border-color: rgba(201, 169, 98, 0.32) !important; background: rgba(201, 169, 98, 0.04) !important; } .st-upload-zone:hover, .st-upload-zone.dragover { border-color: rgba(201, 169, 98, 0.48) !important; background: rgba(201, 169, 98, 0.08) !important; } .st-upload-label strong, .st-note strong { color: var(--gold-soft) !important; } .st-trainer-credits, .st-model-card, .st-preview-card { border-color: rgba(201, 169, 98, 0.16) !important; background: linear-gradient(145deg, rgba(22, 18, 15, 0.88) 0%, rgba(12, 10, 9, 0.92) 100%) !important; } .st-model-card:hover, .st-model-card.is-selected { border-color: rgba(201, 169, 98, 0.32) !important; box-shadow: 0 0 18px var(--gold-glow) !important; } /* Course & tutorials lesson nav — gold active, not neon stripe */ .lesson-nav-btn { border-color: rgba(201, 169, 98, 0.12) !important; background: rgba(8, 8, 8, 0.4) !important; } .lesson-nav-btn:hover { border-color: rgba(201, 169, 98, 0.28) !important; background: rgba(201, 169, 98, 0.06) !important; } .lesson-nav-btn.active { background: linear-gradient(to right, rgba(201, 169, 98, 0.12), transparent) !important; border-color: rgba(201, 169, 98, 0.35) !important; color: var(--cream) !important; box-shadow: inset 3px 0 0 var(--gold-soft) !important; } .lesson-nav-btn .lesson-number { color: var(--gold-soft) !important; } .video-sidebar { border-color: rgba(201, 169, 98, 0.12) !important; } /* My Designs lightbox actions — same secondary / primary pattern */ .design-thumb { background: rgba(12, 10, 9, 0.55) !important; border-color: rgba(201, 169, 98, 0.14) !important; } .design-thumb:hover { border-color: rgba(201, 169, 98, 0.28) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 16px var(--gold-glow) !important; } .action-btn, .qe-btn, .remix-btn, .tryon-btn, .print-btn { background: rgba(201, 169, 98, 0.06) !important; border-color: rgba(201, 169, 98, 0.22) !important; color: var(--cream-dim) !important; } .action-btn:hover, .qe-btn:hover, .remix-btn:hover, .tryon-btn:hover, .print-btn:hover { background: rgba(201, 169, 98, 0.12) !important; border-color: rgba(201, 169, 98, 0.35) !important; color: var(--cream) !important; box-shadow: 0 0 14px var(--gold-glow) !important; } .download-btn { background: linear-gradient(135deg, var(--accent-ink-green-bright) 0%, var(--accent-ink-green) 100%) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #f8fafc !important; } .download-btn:hover { box-shadow: 0 12px 22px rgba(45, 143, 111, 0.28), 0 0 16px var(--gold-glow) !important; } /* Generate / apply CTAs — one green gradient on every tool */ .tg-sidebar-generate-btn, .tg-generate-btn, #tg-generate-btn, .sketch-generate-btn, .mb-generate-btn, .st-train-btn { background: linear-gradient(135deg, var(--accent-ink-green-bright) 0%, var(--accent-ink-green) 100%) !important; color: #f8fafc !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 8px 24px rgba(45, 143, 111, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } .tg-sidebar-generate-btn:hover, .tg-generate-btn:hover, #tg-generate-btn:hover, .sketch-generate-btn:hover, .mb-generate-btn:hover, .st-train-btn:hover { background: linear-gradient(135deg, #45c99a 0%, var(--accent-ink-green-bright) 100%) !important; box-shadow: 0 12px 28px rgba(45, 143, 111, 0.32), 0 0 18px var(--gold-glow) !important; } /* Output panel active glow — gold on all editors */ .qe-panel-right.active-glow, .qe-output-wrap.active-glow, body.quick-edit-page .qe-panel-right:focus-within { border-color: rgba(201, 169, 98, 0.32) !important; box-shadow: inset 0 0 40px rgba(201, 169, 98, 0.05), 0 0 28px var(--gold-glow) !important; } /* ── Try-On page — match site ink/gold palette (try-on.css uses legacy teal) ── */ .tryon-layout { background: radial-gradient(ellipse 80% 50% at 12% 8%, rgba(201, 169, 98, 0.05) 0%, transparent 55%), radial-gradient(ellipse 70% 45% at 88% 92%, rgba(45, 143, 111, 0.06) 0%, transparent 50%) !important; } .tryon-top-reset-btn { background: rgba(201, 169, 98, 0.06) !important; border-color: rgba(201, 169, 98, 0.22) !important; color: var(--cream-dim) !important; } .tryon-top-reset-btn:hover { background: rgba(201, 169, 98, 0.12) !important; border-color: rgba(201, 169, 98, 0.35) !important; color: var(--cream) !important; } .tryon-card { border-color: rgba(201, 169, 98, 0.16) !important; background: linear-gradient(145deg, rgba(22, 18, 15, 0.75) 0%, rgba(12, 10, 9, 0.85) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.4) !important; } .tryon-card::before { background: linear-gradient(135deg, rgba(201, 169, 98, 0.12), transparent 60%) !important; } .tryon-card:hover { border-color: rgba(201, 169, 98, 0.32) !important; background: linear-gradient(145deg, rgba(28, 22, 18, 0.82) 0%, rgba(14, 12, 10, 0.9) 100%) !important; box-shadow: 0 0 22px var(--gold-glow), inset 0 0 20px rgba(201, 169, 98, 0.04) !important; } .tryon-card:hover::before { background: linear-gradient(135deg, rgba(201, 169, 98, 0.28), transparent 80%) !important; } .tryon-card-title { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--cream) !important; letter-spacing: 0.03em; } .tryon-card-subtitle, .tryon-credits-text { color: var(--text-dim) !important; } .tryon-apply-btn { background: linear-gradient(135deg, var(--accent-ink-green-bright) 0%, var(--accent-ink-green) 100%) !important; color: #f8fafc !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 8px 24px rgba(45, 143, 111, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } .tryon-apply-btn:hover:not(:disabled) { background: linear-gradient(135deg, #45c99a 0%, var(--accent-ink-green-bright) 100%) !important; box-shadow: 0 12px 28px rgba(45, 143, 111, 0.32), 0 0 18px var(--gold-glow) !important; } .tryon-panel-right, .tryon-panel-center { border-color: rgba(201, 169, 98, 0.14) !important; background: linear-gradient(145deg, rgba(22, 18, 15, 0.88) 0%, rgba(12, 10, 9, 0.92) 100%) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } .tryon-panel-right.active-glow { border-color: rgba(201, 169, 98, 0.35) !important; box-shadow: inset 0 0 40px rgba(201, 169, 98, 0.06), 0 0 28px var(--gold-glow) !important; } .tryon-output-placeholder { color: var(--text-dim) !important; } .tryon-output-thumbnail { border-color: rgba(201, 169, 98, 0.35) !important; background: rgba(201, 169, 98, 0.06) !important; filter: contrast(1.06) saturate(1.08); } .tryon-output-thumbnail:hover, .tryon-output-thumbnail.active { border-color: var(--gold-soft) !important; box-shadow: 0 0 14px var(--gold-glow) !important; } .tryon-recent-slot { border-color: rgba(201, 169, 98, 0.2) !important; } .tryon-recent-slot.empty { border-color: rgba(201, 169, 98, 0.25) !important; background: rgba(201, 169, 98, 0.04) !important; } .tryon-recent-slot:not(.empty):hover { border-color: var(--gold-muted) !important; box-shadow: 0 0 12px var(--gold-glow) !important; } .tryon-modal-content { border-color: rgba(201, 169, 98, 0.18) !important; background: linear-gradient(145deg, rgba(22, 18, 15, 0.96) 0%, rgba(10, 9, 8, 0.98) 100%) !important; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 32px var(--gold-glow) !important; } .tryon-modal-header h3 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--cream) !important; } .tryon-modal-header p { color: var(--text-dim) !important; } .tryon-tool-btn:hover, .tryon-tool-btn.active { background: rgba(201, 169, 98, 0.12) !important; border-color: rgba(201, 169, 98, 0.35) !important; color: var(--gold-soft) !important; } .tryon-card-btn:hover { background: rgba(201, 169, 98, 0.12) !important; border-color: rgba(201, 169, 98, 0.35) !important; color: var(--cream) !important; } .tryon-card-label { color: var(--gold-soft) !important; } .tryon-recents-strip { border-color: rgba(201, 169, 98, 0.1) !important; } /* Generated result — always preserve source aspect ratio (no vertical squash) */ #center-preview-img, .tryon-center-img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center center !important; } .tryon-center-workspace { min-height: 0 !important; min-width: 0 !important; overflow: hidden !important; } /* Custom select (Find Artist radius) */ .fa-select-trigger { background: rgba(8, 8, 8, 0.6) !important; border-color: rgba(201, 169, 98, 0.18) !important; color: var(--cream) !important; } .fa-select-menu { background: rgba(14, 12, 10, 0.96) !important; border-color: rgba(201, 169, 98, 0.2) !important; } .fa-select-option:hover, .fa-select-option.is-selected { background: rgba(201, 169, 98, 0.12) !important; color: var(--cream) !important; } /* Generator / Magic Sketch — style dropdown (gold studio panels, not neon green) */ .tg-select-trigger, .tg-mini-select-trigger { background: rgba(8, 8, 8, 0.6) !important; border-color: rgba(201, 169, 98, 0.18) !important; color: var(--cream) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 20px rgba(0, 0, 0, 0.2) !important; } .tg-select-trigger:hover, .tg-mini-select-trigger:hover, .tg-style-search:focus { border-color: rgba(201, 169, 98, 0.38) !important; box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.12), 0 8px 20px rgba(0, 0, 0, 0.25) !important; } .tg-select-menu { background: rgba(14, 12, 10, 0.98) !important; border-color: rgba(201, 169, 98, 0.2) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } .tg-search-wrap { background: rgba(8, 8, 8, 0.5) !important; border-bottom-color: rgba(201, 169, 98, 0.12) !important; } .tg-style-search { background: rgba(8, 8, 8, 0.55) !important; border-color: rgba(201, 169, 98, 0.14) !important; color: var(--cream) !important; } .tg-style-search::placeholder { color: var(--cream-dim) !important; opacity: 0.75; } .tg-option { color: var(--cream-dim) !important; } .tg-option:hover, .tg-option.selected { background: rgba(201, 169, 98, 0.12) !important; color: var(--cream) !important; } .tg-option.selected::after { color: var(--gold-soft) !important; } /* Section titles in forms */ .fa-section-title { color: var(--gold-soft); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; letter-spacing: 0.04em; } /* Notification badge — keep visible */ .nav-badge, .msg-unread-badge { box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); } /* Community & pricing pages */ .community-header { border-bottom: 1px solid rgba(201, 169, 98, 0.12); padding-bottom: 16px; } .post-author.is-official { color: var(--gold-soft); } .pricing-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--cream); } .price { color: var(--gold-soft); } /* Inbox filter pills (artist dashboard / account) */ .fa-msg-style-pill, .fa-msg-unread-pill { border-color: rgba(201, 169, 98, 0.3) !important; background: rgba(201, 169, 98, 0.08) !important; color: var(--cream-dim) !important; } .fa-msg-style-pill.is-active, .fa-msg-filter.is-active { border-color: var(--gold-muted) !important; background: rgba(201, 169, 98, 0.18) !important; color: var(--cream) !important; } /* ── Site Polish C: cross-page consistency ── */ main.container, .fa-page, .account-container, .pricing-container, .community-page-container, .tutorials-page-container { position: relative; } .contact-form label, .pricing-card .feature-list li::marker { color: var(--gold-soft); } .pricing-card { overflow: hidden; } .pricing-card.featured { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 0 40px rgba(201, 169, 98, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } .post { border-left: 2px solid rgba(201, 169, 98, 0.08); } .post:hover { border-left-color: rgba(201, 169, 98, 0.25); } .tutorials-page-container h2, .contact-page h1 { font-family: 'Cormorant Garamond', Georgia, serif; } /* Nav: green + gold premium mix */ .nav-link.active { color: var(--accent-ink-green-bright) !important; text-shadow: 0 0 12px rgba(60, 184, 138, 0.25); } /* Style Trainer — quality dropdown + fields (style-trainer.css hardcodes teal rgba) */ html body.style-trainer-page .st-note { background: rgba(201, 169, 98, 0.07) !important; border-color: rgba(201, 169, 98, 0.25) !important; } html body.style-trainer-page .st-trainer-credits { border-color: rgba(201, 169, 98, 0.22) !important; background: rgba(201, 169, 98, 0.06) !important; } html body.style-trainer-page .st-trainer-credits.has-credit { border-color: rgba(201, 169, 98, 0.45) !important; background: rgba(201, 169, 98, 0.10) !important; } html body.style-trainer-page .st-select-trigger, html body.style-trainer-page .st-select.open .st-select-trigger { background: linear-gradient(180deg, rgba(201, 169, 98, 0.10), rgba(201, 169, 98, 0.03)), rgba(9, 14, 24, 0.72) !important; border-color: rgba(201, 169, 98, 0.28) !important; color: var(--cream) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.28) !important; } html body.style-trainer-page .st-select-trigger:hover, html body.style-trainer-page .st-select-trigger:focus, html body.style-trainer-page .st-select.open .st-select-trigger:hover, html body.style-trainer-page .st-select.open .st-select-trigger:focus { border-color: rgba(201, 169, 98, 0.42) !important; background: linear-gradient(180deg, rgba(201, 169, 98, 0.14), rgba(201, 169, 98, 0.05)), rgba(255, 255, 255, 0.05) !important; box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.12), 0 8px 24px rgba(0, 0, 0, 0.28) !important; } html body.style-trainer-page .st-select-arrow { border-right-color: var(--gold-soft) !important; border-bottom-color: var(--gold-soft) !important; } html body.style-trainer-page .st-select-menu { background: linear-gradient(180deg, rgba(14, 12, 10, 0.98), rgba(8, 8, 8, 0.98)) !important; border-color: rgba(201, 169, 98, 0.24) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(201, 169, 98, 0.08) !important; } html body.style-trainer-page .st-select-option:hover, html body.style-trainer-page .st-select-option:focus { background: rgba(201, 169, 98, 0.12) !important; color: var(--cream) !important; } html body.style-trainer-page .st-select-option.is-selected { background: linear-gradient(135deg, rgba(201, 169, 98, 0.22), rgba(201, 169, 98, 0.10)) !important; color: var(--cream) !important; box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.28) !important; } html body.style-trainer-page .st-input { border-color: rgba(201, 169, 98, 0.18) !important; color: var(--cream) !important; } html body.style-trainer-page .st-input:focus { border-color: rgba(201, 169, 98, 0.42) !important; box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.12) !important; } html body.style-trainer-page .st-upload-zone { border-color: rgba(201, 169, 98, 0.28) !important; background: rgba(201, 169, 98, 0.04) !important; } html body.style-trainer-page .st-upload-zone:hover, html body.style-trainer-page .st-upload-zone.dragover { border-color: rgba(201, 169, 98, 0.42) !important; background: rgba(201, 169, 98, 0.08) !important; } html body.style-trainer-page .st-upload-icon { stroke: var(--gold-soft) !important; } html body.style-trainer-page .st-upload-label strong, html body.style-trainer-page .st-trainer-credit-row strong, html body.style-trainer-page .st-count-badge, html body.style-trainer-page .st-progress-title, html body.style-trainer-page .st-complete-title { color: var(--gold-soft) !important; } html body.style-trainer-page .st-thumb { border-color: rgba(201, 169, 98, 0.18) !important; } html body.style-trainer-page .st-thumb:hover { border-color: rgba(201, 169, 98, 0.35) !important; } html body.style-trainer-page .st-progress-bar { background: linear-gradient(90deg, var(--gold-soft), rgba(201, 169, 98, 0.55)) !important; } html body.style-trainer-page .st-spinner { border-color: rgba(201, 169, 98, 0.2) !important; border-top-color: var(--gold-soft) !important; } html body.style-trainer-page .st-browse-btn { color: var(--gold-soft) !important; border-color: rgba(201, 169, 98, 0.45) !important; } html body.style-trainer-page .st-browse-btn:hover { background: rgba(201, 169, 98, 0.12) !important; border-color: rgba(201, 169, 98, 0.55) !important; } html body.style-trainer-page .st-complete-check { stroke: var(--gold-soft) !important; } html body.style-trainer-page .st-complete-box { background: rgba(201, 169, 98, 0.07) !important; border-color: rgba(201, 169, 98, 0.24) !important; } /* Mobile composer + param row — gold accents (mobile-prompt-unify still uses legacy neon tokens) */ @media (max-width: 1024px) { html body #tg-composer .tg-prompt-wrapper:focus-within, html body #qe-mobile-composer .tg-prompt-wrapper:focus-within { border-color: rgba(201, 169, 98, 0.38) !important; } html body #tg-composer .tg-num-input, html body #qe-mobile-composer .tg-num-input { color: var(--gold-soft) !important; } html body #btn-m-clear-image, html body #qe-mobile-upload-btn, html body #btn-ts-clear, html body #mp-btn-ts-clear, html body #mp-mobile-upload-btn { border-color: rgba(201, 169, 98, 0.32) !important; background: linear-gradient(180deg, rgba(201, 169, 98, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%), linear-gradient(180deg, rgba(7, 20, 34, 0.94) 0%, rgba(4, 13, 24, 0.94) 100%) !important; color: var(--gold-soft) !important; } html body #btn-m-clear-image:active, html body #qe-mobile-upload-btn:active, html body #btn-ts-clear:active, html body #mp-btn-ts-clear:active, html body #mp-mobile-upload-btn:active { border-color: rgba(201, 169, 98, 0.52) !important; } } @media (prefers-reduced-motion: reduce) { body::after { display: none; } }