/* * iamcarhacker.com design system (site-wide) * * One palette and one set of components for the whole site: Members area, * My Files, community, experiences form, comparison tool, archives. * Feature files keep their own scoped CSS but take colors from these * variables only, so changing a token here changes it everywhere. * * Tokens: --chmem-* (name kept for compatibility, used by many files) * Components: .ch-mem-* (cards, buttons, badges, forms, rows, profile, attach box) * .ch-dash-* (account dashboard tab menu) * * Loaded by design-system.php on every front-end page. */ :root{ /* Same palette as the immo tools (--chimmo-*) and dashboard widgets, under a --chmem-* namespace so both can coexist on the same page without collision. */ --chmem-ink:#14171c; --chmem-body:#54606e; --chmem-line:#e2e5e9; --chmem-bg-soft:#f4f5f7; --chmem-primary:#1e3a8a; --chmem-primary-dark:#1e40af; --chmem-accent:#ea580c; --chmem-good-bg:#f0fdf4; --chmem-good-line:#86efac; --chmem-good-ink:#065f46; --chmem-warn-bg:#fffbeb; --chmem-warn-line:#f5dc9b; --chmem-warn-ink:#92400e; --chmem-r:6px; --chmem-maxw:1100px; } /* ---- layout shell ---- */ .ch-mem-wrap{max-width:var(--chmem-maxw);margin:0 auto;width:100%;box-sizing:border-box} .ch-mem-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px} .ch-mem-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:780px){ .ch-mem-grid-2,.ch-mem-grid-3{grid-template-columns:1fr} } /* ---- typography ---- */ .ch-mem-title{font-size:28px;font-weight:700;color:var(--chmem-ink);letter-spacing:-.01em;margin:0 0 8px} .ch-mem-subtitle{font-size:15px;color:var(--chmem-body);line-height:1.55;margin:0 0 28px} .ch-mem-section-title{font-size:18px;font-weight:700;color:var(--chmem-ink);margin:0 0 14px} /* ---- card ---- */ .ch-mem-card{ background:#fff;border:1px solid var(--chmem-line);border-radius:var(--chmem-r); padding:22px 24px;margin-bottom:16px; } .ch-mem-card:last-child{margin-bottom:0} .ch-mem-card-soft{background:var(--chmem-bg-soft);border:1px solid var(--chmem-line);border-radius:var(--chmem-r);padding:18px 20px} /* ---- buttons ---- !important on background/color/border: theme link-color rules (e.g. GeneratePress ".inside-article a { color: var(--accent-2) }") are more specific than a bare class selector and were overriding these, so buttons rendered as [colored border + colored text on white] instead of a solid filled button. Forcing here since these are deliberately theme-independent components. */ .ch-mem-btn{ display:inline-block;padding:11px 22px;border-radius:var(--chmem-r); font-weight:600;font-size:15px;text-decoration:none !important;text-align:center; border:0;cursor:pointer;transition:background .15s,opacity .15s; } .ch-mem-btn-primary{ background:var(--chmem-primary) !important; color:#fff !important; border:none !important; } .ch-mem-btn-primary:hover{background:var(--chmem-primary-dark) !important;color:#fff !important} .ch-mem-btn-secondary{ background:#fff !important; color:var(--chmem-primary) !important; border:1px solid var(--chmem-primary) !important; } .ch-mem-btn-secondary:hover{background:var(--chmem-bg-soft) !important} .ch-mem-btn-sm{padding:6px 14px;font-size:13px} .ch-mem-btn:disabled{opacity:.6;cursor:default} /* ---- badges ---- */ .ch-mem-badge{display:inline-block;padding:3px 10px;border-radius:4px;font-size:12px;font-weight:600;white-space:nowrap} .ch-mem-badge-neutral{background:var(--chmem-bg-soft);color:var(--chmem-body)} .ch-mem-badge-good{background:#dcfce7;color:#15803d} .ch-mem-badge-warn{background:var(--chmem-warn-bg);color:var(--chmem-warn-ink)} .ch-mem-badge-accent{background:#ffe4d5;color:#9a3412} .ch-mem-badge-info{background:#dbeafe;color:#1d4ed8} /* ---- avatars ---- */ .ch-mem-avatar{border-radius:50%;object-fit:cover;display:inline-block;background:var(--chmem-bg-soft)} .ch-mem-avatar-sm{width:36px;height:36px} .ch-mem-avatar-md{width:56px;height:56px} .ch-mem-avatar-lg{width:96px;height:96px} /* ---- list rows (questions, shares, activity) ---- */ .ch-mem-row{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 18px;border:1px solid var(--chmem-line);border-radius:var(--chmem-r); text-decoration:none;color:inherit;background:#fff;transition:border-color .15s,background .15s; } .ch-mem-row + .ch-mem-row{margin-top:10px} .ch-mem-row:hover{border-color:var(--chmem-primary);background:var(--chmem-bg-soft)} .ch-mem-row-title{font-weight:600;color:var(--chmem-ink) !important;font-size:15px;text-decoration:none !important} .ch-mem-row-meta{font-size:13px;color:var(--chmem-body) !important} /* ---- author line (name + avatar + date), used on questions/answers ---- */ .ch-mem-author{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--chmem-body)} .ch-mem-author a{color:var(--chmem-ink) !important;font-weight:600;text-decoration:none !important} .ch-mem-author a:hover{text-decoration:underline !important} /* ---- small inline "vote" link (Thanks), not a full button ---- */ .ch-mem-vote-link{ background:none;border:none;padding:0;cursor:pointer; font-size:13px;color:var(--chmem-body);font-weight:500; display:inline-flex;align-items:center;gap:5px;white-space:nowrap; } .ch-mem-vote-link:hover:not(:disabled){color:var(--chmem-primary)} .ch-mem-vote-link:disabled{opacity:.55;cursor:default} .ch-mem-answer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px} /* ---- forms ---- */ .ch-mem-input,.ch-mem-textarea,.ch-mem-select{ display:block;width:100%;box-sizing:border-box; padding:11px 14px;font-size:15px;color:var(--chmem-ink); border:1px solid var(--chmem-line);border-radius:var(--chmem-r);background:#fff; margin:0 0 12px; } .ch-mem-label{display:block;font-size:13px;font-weight:600;color:var(--chmem-ink);margin:0 0 6px} /* ---- empty state ---- */ .ch-mem-empty{color:var(--chmem-body);font-style:italic;padding:20px 0} /* ---- profile page ---- */ .ch-mem-profile-card{ max-width:420px;margin:0 auto;text-align:center; background:#fff;border:1px solid var(--chmem-line);border-radius:var(--chmem-r); padding:32px 28px; } .ch-mem-profile-name{font-size:20px;font-weight:700;color:var(--chmem-ink);margin:14px 0 6px} .ch-mem-profile-bio{font-size:14.5px;color:var(--chmem-body);line-height:1.5;margin:0 0 20px} /* ---- attached-file box (MHH Auto style: file + stats + download) ---- */ .ch-mem-attach-box{ border:1px solid var(--chmem-line);border-radius:var(--chmem-r); background:var(--chmem-bg-soft);margin:20px 0 6px;overflow:hidden; } .ch-mem-attach-title{ font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:var(--chmem-body);padding:10px 16px;border-bottom:1px solid var(--chmem-line); } .ch-mem-attach-row{ display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;flex-wrap:wrap; } .ch-mem-attach-icon{font-size:20px;line-height:1} .ch-mem-attach-name{font-weight:600;color:var(--chmem-ink);font-size:14.5px;margin-right:auto} .ch-mem-attach-stat{font-size:13px;color:var(--chmem-body);white-space:nowrap} @media (max-width:480px){ .ch-mem-attach-row{gap:8px 14px} .ch-mem-attach-name{width:100%;margin-right:0} } /* ---- dashboard tab menu (customer-dashboard, my-files) ----------- Shared here so both pages look identical automatically. The customer-dashboard page (Account dashboard tweaks Code Snippet) applies grid layout directly to SureCart's wrapper and adds these same classes via JS; my-files uses .ch-dash-tabgrid directly via [carhacker_my_files_dashboard]. */ .ch-dash-tabgrid{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start} .ch-dash-tabs{grid-column:1;display:flex;flex-direction:column;gap:4px;position:sticky;top:90px} .ch-dash-tab{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;border-radius:var(--chmem-r);font-size:14px;font-weight:600;color:var(--chmem-body);cursor:pointer} .ch-dash-tab:hover{background:var(--chmem-bg-soft)} .ch-dash-tab--active{background:var(--chmem-primary);color:#fff !important} .ch-dash-tab--logout{margin-top:12px;padding-top:12px;border-top:1px solid var(--chmem-line);color:#dc2626 !important;text-decoration:none !important} .ch-dash-panel{grid-column:2;background:#fff;border:1px solid var(--chmem-line);border-radius:var(--chmem-r);padding:22px 24px} @media (max-width:700px){ .ch-dash-tabgrid{grid-template-columns:1fr} .ch-dash-tabs{flex-direction:row;flex-wrap:wrap;position:static} } /* ---- responsive video embeds ---- BuddyBoss used to force 16:9 on embedded videos, GeneratePress does not, so raw oEmbed iframes (for example the Procedure Builder video) kept their width/height attributes and YouTube cropped the thumbnail. Skips iframes that already have an aspect-ratio wrapper (.ch-video__wrap, Gutenberg embed blocks). */ .entry-content :is(iframe[src*="youtube.com"],iframe[src*="youtube-nocookie.com"],iframe[src*="player.vimeo.com"]):not(.ch-video__wrap iframe):not(.wp-has-aspect-ratio iframe){ display:block;width:100% !important;max-width:100%;height:auto !important;aspect-ratio:16 / 9; border:0;border-radius:var(--chmem-r);background:#000;margin:0 0 16px; } /* ---- old Gutenberg callouts (reviews, guides, old procedures) ---- Paragraphs/groups colored with the BuddyBoss palette (ch-warning, ch-field, ch-facts, ch-tip, ch-tool). GeneratePress has no such colors, so they lost their background and only kept the padding. Same look as the Procedure Builder callouts. */ .entry-content :is(.has-ch-warning-background-color,.has-ch-field-background-color,.has-ch-facts-background-color,.has-ch-tip-background-color,.has-ch-tool-background-color){ border:1px solid;border-left-width:4px;border-radius:var(--chmem-r); padding:14px 18px !important;margin:18px 0 24px;font-size:.96em;line-height:1.6; } .entry-content .has-ch-warning-background-color{background:#fef2f2 !important;border-color:#fecaca;border-left-color:#dc2626;color:#7f1d1d} .entry-content :is(.has-ch-field-background-color,.has-ch-facts-background-color){background:#fff7ed !important;border-color:#fed7aa;border-left-color:var(--chmem-accent);color:#7c2d12} .entry-content :is(.has-ch-tip-background-color,.has-ch-tool-background-color){background:#f0fdf4 !important;border-color:#bbf7d0;border-left-color:#16a34a;color:#14532d} .entry-content :is(.has-ch-warning-background-color,.has-ch-field-background-color,.has-ch-facts-background-color,.has-ch-tip-background-color,.has-ch-tool-background-color) a{color:inherit;text-decoration:underline} .entry-content :is(.has-ch-warning-background-color,.has-ch-field-background-color,.has-ch-facts-background-color,.has-ch-tip-background-color,.has-ch-tool-background-color) > :last-child{margin-bottom:0} /* ---- CH Builders blocks: buttons on the design system ---- The theme link color was painting button text blue on green/dark buttons. Primary = navy, secondary = navy outline. */ .entry-content a.ch-cblock__btn, .entry-content a.ch-rej__btn, .entry-content a.ch-guides__btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; font-weight:700;font-size:14px;line-height:1.3;padding:10px 18px;border-radius:var(--chmem-r); text-decoration:none !important;white-space:nowrap;transition:background .15s,color .15s,border-color .15s; background:var(--chmem-primary);border:1px solid var(--chmem-primary);color:#fff !important; } .entry-content a.ch-cblock__btn:hover, .entry-content a.ch-rej__btn:hover, .entry-content a.ch-guides__btn:hover{background:var(--chmem-primary-dark);border-color:var(--chmem-primary-dark);color:#fff !important} .entry-content a.ch-rej__btn, .entry-content a.ch-rej__btn--ghost{background:#fff;color:var(--chmem-primary) !important} .entry-content a.ch-rej__btn:hover{background:var(--chmem-primary);color:#fff !important} .entry-content .ch-cblock{background:#fff;border-color:var(--chmem-line);border-radius:var(--chmem-r)} .entry-content .ch-cblock__btn{margin-top:16px} .entry-content .ch-rej__tier{border-radius:var(--chmem-r)} .entry-content .ch-rej__tier--green{border-color:#16a34a} .entry-content .ch-rej__winitem a{color:var(--chmem-ink) !important;text-decoration:none} .entry-content .ch-guides{background:#fff;border-color:var(--chmem-line);border-radius:var(--chmem-r)} /* ---- procedure cards (archive, related, "procedures tested with this tool") ---- Always loaded, so cards never depend on inline