/* ═══════════════════════════════════════════════════════ FYORD — Shared Theme CSS Handles dark ↔ light mode via [data-theme] on Dark mode is the default; light mode overrides follow. ═══════════════════════════════════════════════════════ */ /* ── THEME TOGGLE BUTTON ─────────────────────────────── */ #p3dp-theme-btn { position: fixed; bottom: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--surface, #111); border: 1px solid var(--border-mid, #2a2a2a); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; z-index: 99999; box-shadow: 0 2px 12px rgba(0,0,0,.4); transition: transform .2s ease, background .25s, border-color .25s, box-shadow .25s; line-height: 1; padding: 0; } #p3dp-theme-btn:hover { transform: scale(1.12) rotate(12deg); box-shadow: 0 6px 32px rgba(0,0,0,.4); } #p3dp-theme-btn:active { transform: scale(.96); } /* ── LIGHT MODE ROOT VARS ────────────────────────────── */ html[data-theme="light"] { --bg: #f2f2f3; --surface: #ffffff; --surface-2: #f7f7f8; --border: #e8e8e8; --border-mid: #d5d5d5; --text: #111111; --muted: #555555; --dim: #999999; /* app-page aliases */ --s2: #f5f5f6; --s3: #eeeeef; --bm: #d8d8d8; color-scheme: light; } /* ── LIGHT MODE: GLOBAL ───────────────────────────────── */ html[data-theme="light"] body { background: var(--bg) !important; color: var(--text) !important; } html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4 { color: #111 !important; } /* ── LIGHT MODE: LANDING PAGE ────────────────────────── */ html[data-theme="light"] nav { background: rgba(255,255,255,.92) !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="light"] nav.pinned { background: rgba(255,255,255,.97) !important; backdrop-filter: blur(18px); } html[data-theme="light"] .nav-links a { color: #444 !important; } html[data-theme="light"] .nav-links a:hover { color: #111 !important; } html[data-theme="light"] .nav-logo { color: #111 !important; } html[data-theme="light"] .btn-ghost { color: #555 !important; border-color: var(--border-mid) !important; } html[data-theme="light"] .btn-ghost:hover { color: #111 !important; } /* Hero stays dark for visual impact */ html[data-theme="light"] .hero { background: #0d0d0f !important; } /* Stats bar — keep dark */ html[data-theme="light"] .stats-bar { background: #111 !important; } /* Sections */ html[data-theme="light"] .hiw-section, html[data-theme="light"] .services-section, html[data-theme="light"] .materials-section, html[data-theme="light"] .why-section, html[data-theme="light"] .pricing-section, html[data-theme="light"] .upload-cta { background: var(--bg) !important; } html[data-theme="light"] .gallery-section { background: var(--surface-2) !important; } html[data-theme="light"] .section-title { color: #111 !important; } html[data-theme="light"] .section-sub { color: #555 !important; } html[data-theme="light"] .section-tag { color: var(--accent) !important; } html[data-theme="light"] .hiw-card { background: var(--surface) !important; border-color: var(--border) !important; } html[data-theme="light"] .hiw-card h3 { color: #111 !important; } html[data-theme="light"] .hiw-card p { color: #555 !important; } html[data-theme="light"] .why-card { background: var(--surface) !important; border-color: var(--border) !important; } html[data-theme="light"] .why-card h3 { color: #111 !important; } html[data-theme="light"] .why-card p { color: #555 !important; } html[data-theme="light"] .mat-card { border-color: var(--border) !important; } html[data-theme="light"] .mat-name { color: #111 !important; } html[data-theme="light"] .mat-sub { color: #666 !important; } html[data-theme="light"] .price-card { background: var(--surface) !important; border-color: var(--border) !important; } html[data-theme="light"] .price-card th, html[data-theme="light"] .price-card td { color: #333 !important; } html[data-theme="light"] .upload-zone { background: var(--surface) !important; border-color: var(--border-mid) !important; } html[data-theme="light"] .upload-zone h3 { color: #111 !important; } html[data-theme="light"] .upload-zone p { color: #555 !important; } html[data-theme="light"] .fmt-tag { background: var(--s2) !important; color: #444 !important; border-color: var(--border) !important; } html[data-theme="light"] .lock-note { color: #888 !important; } /* Footer stays dark */ html[data-theme="light"] footer { background: #0d0d0f !important; } /* ── LIGHT MODE: APP PAGES (header, sidebar, cards) ─── */ html[data-theme="light"] header, html[data-theme="light"] .topbar { background: var(--surface) !important; border-bottom-color: var(--border) !important; } html[data-theme="light"] .topbar-title { color: #111 !important; } html[data-theme="light"] .topbar-sub { color: #555 !important; } html[data-theme="light"] .h-breadcrumb a, html[data-theme="light"] .h-breadcrumb { color: #666 !important; } html[data-theme="light"] .h-sep { background: var(--border) !important; } /* Sidebar */ html[data-theme="light"] .sidebar { background: var(--surface) !important; border-right-color: var(--border) !important; } html[data-theme="light"] .sb-logo { border-bottom-color: var(--border) !important; } html[data-theme="light"] .sb-wordmark { color: #111 !important; } html[data-theme="light"] .sb-section { color: #aaa !important; } html[data-theme="light"] .sb-item { color: #555 !important; } html[data-theme="light"] .sb-item:hover { background: var(--s2) !important; color: #111 !important; } html[data-theme="light"] .sb-item.active { background: rgba(249,115,22,.1) !important; } html[data-theme="light"] .sb-user { border-top-color: var(--border) !important; } html[data-theme="light"] .sb-user-name { color: #222 !important; } html[data-theme="light"] .sb-user-email { color: #888 !important; } html[data-theme="light"] .sb-user-cog { color: #aaa !important; } /* Cards */ html[data-theme="light"] .card, html[data-theme="light"] .stat-card, html[data-theme="light"] .summary-card, html[data-theme="light"] .quick-actions, html[data-theme="light"] .mat-usage, html[data-theme="light"] .orders-table { background: var(--surface) !important; border-color: var(--border) !important; } html[data-theme="light"] .stat-value { color: #111 !important; } html[data-theme="light"] .stat-label { color: #777 !important; } html[data-theme="light"] .section-title-sm { color: #111 !important; } html[data-theme="light"] .sum-total-val { color: #111 !important; } html[data-theme="light"] .sum-total-label { color: #111 !important; } html[data-theme="light"] .sum-label { color: #666 !important; } html[data-theme="light"] .sum-val { color: #333 !important; } html[data-theme="light"] .summary-hd { color: #111 !important; border-bottom-color: var(--border) !important; } /* Table rows */ html[data-theme="light"] .tbl-hd { color: #888 !important; border-bottom-color: var(--border) !important; } html[data-theme="light"] .tbl-row { border-bottom-color: var(--border) !important; } html[data-theme="light"] .tbl-row:hover { background: var(--s2) !important; } html[data-theme="light"] .tbl-file-name { color: #111 !important; } html[data-theme="light"] .tbl-file-meta { color: #777 !important; } html[data-theme="light"] .tbl-file-icon { background: var(--s2) !important; border-color: var(--border) !important; } html[data-theme="light"] .tbl-cell { color: #555 !important; } html[data-theme="light"] .tbl-cell.bold { color: #222 !important; } /* Detail panel */ html[data-theme="light"] .detail-panel { background: var(--surface) !important; border-left-color: var(--border) !important; } html[data-theme="light"] .dp-title { color: #111 !important; } html[data-theme="light"] .dp-close { background: var(--s2) !important; border-color: var(--border) !important; color: #555 !important; } html[data-theme="light"] .dp-info-item { background: var(--s2) !important; } html[data-theme="light"] .dp-info-label { color: #888 !important; } html[data-theme="light"] .dp-info-val { color: #222 !important; } html[data-theme="light"] .dp-section-hd { color: #888 !important; border-bottom-color: var(--border) !important; } html[data-theme="light"] .tl-name { color: #222 !important; } html[data-theme="light"] .tl-desc { color: #666 !important; } html[data-theme="light"] .dp-btn { background: var(--s2) !important; border-color: var(--border) !important; color: #333 !important; } /* Quick actions */ html[data-theme="light"] .qa-item { background: var(--s2) !important; border-color: var(--border) !important; } html[data-theme="light"] .qa-label { color: #111 !important; } html[data-theme="light"] .qa-sub { color: #777 !important; } /* Forms */ html[data-theme="light"] .form-input, html[data-theme="light"] .form-input-auth { background: var(--s2) !important; border-color: var(--bm) !important; color: #111 !important; } html[data-theme="light"] .form-label { color: #666 !important; } /* Delivery options */ html[data-theme="light"] .delivery-opt { border-color: var(--border) !important; } html[data-theme="light"] .delivery-opt:hover { background: var(--s2) !important; } html[data-theme="light"] .delivery-name { color: #111 !important; } html[data-theme="light"] .delivery-desc { color: #666 !important; } /* Payment section */ html[data-theme="light"] .pay-method { border-color: var(--border) !important; } html[data-theme="light"] .pay-method:hover { background: var(--s2) !important; } html[data-theme="light"] .pay-name { color: #555 !important; } html[data-theme="light"] .bank-opt { border-color: var(--border) !important; } html[data-theme="light"] .bank-name { color: #555 !important; } html[data-theme="light"] .card-icon-pill { background: var(--s2) !important; border-color: var(--border) !important; color: #555 !important; } html[data-theme="light"] .promo-input { background: var(--s2) !important; border-color: var(--border) !important; color: #111 !important; } html[data-theme="light"] .promo-apply { background: var(--s3) !important; border-color: var(--border) !important; color: #333 !important; } /* Quote page panels */ html[data-theme="light"] .config-panel, html[data-theme="light"] .ann-panel { background: var(--surface) !important; border-color: var(--border) !important; } html[data-theme="light"] .panel-hd { color: #111 !important; border-bottom-color: var(--border) !important; } html[data-theme="light"] .file-card { background: var(--s2) !important; border-color: var(--border) !important; } html[data-theme="light"] .mat-option { border-color: var(--border) !important; } html[data-theme="light"] .mat-option:not(.selected) { background: var(--s2) !important; } html[data-theme="light"] .svc-item { border-bottom-color: var(--border) !important; } html[data-theme="light"] .svc-label { color: #333 !important; } html[data-theme="light"] .price-breakdown { background: var(--s2) !important; border-color: var(--border) !important; } html[data-theme="light"] .p-row span { color: #555 !important; } html[data-theme="light"] .ann-card { background: var(--s2) !important; border-color: var(--border) !important; } html[data-theme="light"] .ann-text { color: #333 !important; } html[data-theme="light"] .ann-meta { color: #777 !important; } /* SVG viewer canvas always stays dark */ html[data-theme="light"] .viewer-area { background: #1a1a1e !important; } /* Login page right panel */ html[data-theme="light"] .right-panel { background: var(--surface) !important; } html[data-theme="light"] .tab-btn { color: #666 !important; } html[data-theme="light"] .tab-btn.active { color: #111 !important; } html[data-theme="light"] .input-label { color: #555 !important; } html[data-theme="light"] .input-field { background: var(--s2) !important; border-color: var(--bm) !important; color: #111 !important; } html[data-theme="light"] .divider-line { background: var(--border) !important; } html[data-theme="light"] .divider-text { color: #999 !important; } html[data-theme="light"] .sso-btn { background: var(--surface) !important; border-color: var(--bm) !important; color: #333 !important; } /* Toast */ html[data-theme="light"] #toast { background: #ffffff !important; border-color: var(--border) !important; color: #222 !important; box-shadow: 0 8px 32px rgba(0,0,0,.15) !important; } /* Banner */ html[data-theme="light"] .new-order-banner { background: rgba(249,115,22,.08) !important; } /* ── LIGHT MODE: MISSING OVERRIDES (pricing + gallery + service breadcrumbs) ─ */ /* Pricing section — these are
and , not heading tags */ html[data-theme="light"] .price-title { color: #111 !important; } html[data-theme="light"] .tier-price { color: #222 !important; } html[data-theme="light"] .tier-qty { color: #555 !important; } html[data-theme="light"] .price-spec { color: #666 !important; } html[data-theme="light"] .tier-row { background: var(--surface-2) !important; } /* How-it-works cards use --surface which becomes white; h3 covered by global rule */ html[data-theme="light"] .hiw-step { background: var(--surface) !important; } html[data-theme="light"] .hiw-step p { color: #555 !important; } html[data-theme="light"] .hiw-tag { color: #444 !important; } /* Service breadcrumb hover (service pages link proto3dp.css) */ html[data-theme="light"] .breadcrumb a:hover { color: #111 !important; } html[data-theme="light"] .breadcrumb a { color: #666 !important; } /* Gallery captions are on dark gradient overlay — keep white */ /* (no override needed — they're always on dark bg) */ /* Stat cells stay dark background, just ensure numbers/labels render */ html[data-theme="light"] .stat-num, html[data-theme="light"] .stat-cell-val { color: var(--accent) !important; } html[data-theme="light"] .stat-cell-lbl { color: #555 !important; } /* Upload CTA section text */ html[data-theme="light"] .upload-zone p { color: #555 !important; } /* ── LIGHT MODE: QUOTE PAGE SPECIFIC ──────────────────── */ /* Logo text color in quote/portal app header */ html[data-theme="light"] .h-logo { color: #111 !important; } html[data-theme="light"] .h-breadcrumb .curr { color: #111 !important; } /* Viewer toolbar (always dark background — keep text light) */ html[data-theme="light"] .viewer-toolbar { background: #1a1a1a !important; border-bottom-color: #333 !important; } html[data-theme="light"] .tb-btn { color: #ccc !important; } html[data-theme="light"] .tb-btn:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; } html[data-theme="light"] .tb-zoom-label { color: #aaa !important; } html[data-theme="light"] .layer-toggle { color: #aaa !important; } /* Quote left panel text */ html[data-theme="light"] .file-name { color: #111 !important; } html[data-theme="light"] .file-size { color: #666 !important; } html[data-theme="light"] .dim-chip { background: #eee !important; border-color: #ddd !important; color: #555 !important; } html[data-theme="light"] .dim-chip span { color: #111 !important; } html[data-theme="light"] .mat-name-s { color: #333 !important; } html[data-theme="light"] .cp-label { color: #aaa !important; } html[data-theme="light"] .thick-select { background: #fff !important; border-color: #ddd !important; color: #111 !important; } html[data-theme="light"] .svc-name { color: #222 !important; } html[data-theme="light"] .svc-cost { color: #555 !important; } html[data-theme="light"] .p-row { color: #333 !important; } html[data-theme="light"] .p-total { color: #111 !important; } /* Annotation sidebar text */ html[data-theme="light"] .ann-panel { background: #fff !important; } html[data-theme="light"] .panel-hd { color: #111 !important; } html[data-theme="light"] .ann-tool { background: #f0f0f0 !important; border-color: #ddd !important; color: #333 !important; } html[data-theme="light"] .ann-tool.active { background: rgba(249,115,22,.1) !important; } html[data-theme="light"] .ann-empty { color: #888 !important; } /* Comment textarea in annotation panel */ html[data-theme="light"] textarea, html[data-theme="light"] .comment-input { background: #f5f5f5 !important; border-color: #ddd !important; color: #111 !important; } html[data-theme="light"] textarea::placeholder { color: #aaa !important; } /* Bottom status bar */ html[data-theme="light"] .status-bar { background: #1a1a1a !important; border-top-color: #333 !important; } /* h-btn in light mode */ html[data-theme="light"] .h-btn { background: #f0f0f0 !important; border-color: #ddd !important; color: #333 !important; } html[data-theme="light"] .h-btn:hover { background: #e8e8e8 !important; color: #111 !important; } html[data-theme="light"] .h-btn.primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } html[data-theme="light"] .h-btn.saved { background: rgba(34,197,94,.1) !important; border-color: #166534 !important; color: #166534 !important; } /* User menu */ html[data-theme="light"] .user-menu { background: #fff !important; border-color: #e0e0e0 !important; } html[data-theme="light"] .user-menu a, html[data-theme="light"] .user-menu button { color: #222 !important; } html[data-theme="light"] .user-menu .signout { color: #dc2626 !important; border-top-color: #e8e8e8 !important; } html[data-theme="light"] .user-menu-email { color: #666 !important; } /* Portal file cards + upload zone */ html[data-theme="light"] .file-card { background: #f7f7f8 !important; border-color: #e0e0e0 !important; } html[data-theme="light"] .file-card .file-name { color: #111 !important; } html[data-theme="light"] .file-card .file-meta { color: #777 !important; } html[data-theme="light"] .upload-zone { background: #f7f7f8 !important; } html[data-theme="light"] .upload-title { color: #111 !important; } html[data-theme="light"] .upload-sub { color: #777 !important; } html[data-theme="light"] .fmt-pill { background: #eee !important; color: #555 !important; } /* ── NAV DROPDOWN ── */ .has-drop { position: relative; } .has-drop .dropdown { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); list-style: none; background: var(--surface); border: 1px solid var(--border-mid); border-radius: 14px; padding: 10px 0; min-width: 230px; box-shadow: 0 24px 64px rgba(0,0,0,.55); z-index: 300; } .has-drop:hover .dropdown { display: block; } .dropdown li a { display: block; padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--muted); transition: color .15s, background .15s; } .dropdown li a:hover { color: var(--text); background: var(--surface-2); }