into content; styled automatically) */
.cm-entry-content details {
background: var(--ctc-surface);
border: 1px solid var(--ctc-border);
border-radius: 8px;
padding: 13px 16px;
margin-bottom: 10px;
}
.cm-entry-content summary { font-weight: 600; cursor: pointer; font-size: 15px; }
.cm-entry-content details p { margin: 10px 0 0; color: var(--ctc-muted); font-size: 14.5px; }
/* Related-tools grid (use
in content/widgets) */
.ctc-tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
gap: 12px;
margin: 14px 0 24px;
}
.ctc-tools-grid a {
display: block;
background: var(--ctc-surface);
border: 1px solid var(--ctc-border);
border-radius: 10px;
padding: 14px;
font-size: 14px;
font-weight: 600;
color: var(--ctc-text);
text-decoration: none;
}
.ctc-tools-grid a small { display: block; font-weight: 400; color: var(--ctc-muted); font-size: 12.5px; }
.ctc-tools-grid a:hover { border-color: var(--ctc-accent); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12); }
/* ---------- Sidebar ---------- */
#cm-secondary .widget,
.cm-secondary .widget {
background: var(--ctc-surface);
border: 1px solid var(--ctc-border);
border-radius: var(--ctc-radius);
padding: 18px;
margin-bottom: 18px;
box-shadow: none;
}
#cm-secondary .widget-title,
.cm-secondary .widget-title,
.ctc-side-title {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--ctc-accent);
border: none;
margin-bottom: 10px;
}
#cm-secondary .widget a { font-size: 13.5px; color: var(--ctc-text); }
#cm-secondary .widget a:hover { color: var(--ctc-accent); }
.ctc-sidebar-ads .ctc-side-widget:last-child { position: sticky; top: 76px; }
/* Ad widgets in the rail sit flush (no card chrome) so 300px units fit cleanly.
The sky ad is the last rail widget and sticks on scroll, per the mockup. */
#cm-secondary .ctc-side-ad,
#cm-secondary > .widget:last-child {
background: transparent;
border: none;
padding: 0;
}
#cm-secondary > .widget:last-child { position: sticky; top: 76px; }
/* ---------- Reserved ad slots (CLS = 0) ---------- */
.ctc-ad {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 0 auto;
width: 100%; /* prevents collapse to 0-width when the unit is empty */
}
/* Dashed placeholder look ONLY when showing the admin label, never around real ads */
.ctc-ad:has(.ctc-ad-label) {
background: #fafbfc;
border: 1px dashed #e3e8ee;
border-radius: 8px;
}
.ctc-ad-label { color: #b0a26b; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; }
.ctc-ad--leaderboard { min-height: 90px; max-width: 728px; }
.ctc-leaderboard-wrap { max-width: 1200px; margin: 18px auto 0; padding: 0 20px; }
.ctc-ad--incontent { min-height: 280px; max-width: 336px; margin: 26px auto; }
.ctc-ad--inarticle { min-height: 250px; max-width: 728px; margin: 26px auto; }
.ctc-ad--mrec { min-height: 250px; width: 300px; }
.ctc-ad--sky { min-height: 600px; width: 300px; }
.ctc-ad--anchor {
position: fixed;
bottom: 0; left: 0; right: 0;
min-height: 60px;
z-index: 50;
border-radius: 0;
display: none;
background: #fff;
border-top: 1px solid var(--ctc-border);
}
/* ---------- Footer ---------- */
#cm-footer, .cm-footer, footer.cm-footer-builder {
background: #16222e;
color: #9fb0c0;
font-size: 13.5px;
}
#cm-footer a, .cm-footer a, footer.cm-footer-builder a { color: #9fb0c0; }
#cm-footer a:hover, .cm-footer a:hover { color: #fff; }
#cm-footer .widget-title, .cm-footer .widget-title { color: #fff; font-size: 14px; }
/* ---------- Mobile ---------- */
@media (max-width: 980px) {
.ctc-ad--sky, .ctc-ad--mrec, .ctc-sidebar-ads { display: none; }
.ctc-ad--anchor { display: flex; }
body { padding-bottom: 64px; } /* room for anchor ad */
.cm-entry-title, .entry-title { font-size: 23px; }
.card-body { padding: 16px; }
/* Responsive safety: keep fixed-width children inside the viewport so the
content column doesn't overflow/clip (submit button, ad , inputs). */
html, body { overflow-x: hidden; } /* page-level guard only — NOT .cm-row,
which also matches the header's mobile row and would clip the menu panel */
#cm-primary, #cm-primary * { max-width: 100%; }
/* .cm-posts is a CSS grid; its grid item (the article) defaults to
min-width:auto and won't shrink below content, ballooning past the
viewport. Let it shrink to the track. */
#cm-primary .cm-posts, #cm-primary .cm-posts > *,
#cm-primary article, #cm-primary .cm-entry-summary { min-width: 0; }
.btn, .btn-lg, .ct-submission-button { width: auto; max-width: 100%; }
.ctc-urlrow { flex-wrap: wrap; }
/* AdSense locks its /iframe to a fixed px width (e.g. 406px on
localhost), which stretches the article. Force it to the container width. */
.ctc-ad, .ctc-leaderboard-wrap { overflow: hidden; }
.ctc-ad, .ctc-ad ins.adsbygoogle, .adsbygoogle,
.ctc-ad iframe, #cm-primary iframe, .adsbygoogle iframe { max-width: 100% !important; }
.ctc-ad ins.adsbygoogle, .ctc-ad iframe, #cm-primary iframe { width: 100% !important; }
}
/* ---------- Kill ColorMag magazine leftovers ---------- */
.cm-related-posts,
.cm-post-views,
.cm-reading-time { display: none; }
/* Legacy 2018-era tool icon images at the top of each converter page —
hidden until the content pass replaces them. Remove this rule if any
2018 upload should stay visible. */
.cm-entry-content img[src*="/uploads/2018/"] { display: none; }
/* =============================================================
Category / archive / search overview pages
Restyle ColorMag's old blog/search layouts into clean tile cards.
Archives use .cm-posts; search uses .article-container. Scoped to
archive + search so single converter pages are untouched.
============================================================= */
body.archive .cm-page-header,
body.search .cm-page-header {
max-width: 1200px;
margin: 0 auto;
padding: 6px 20px 0;
}
body.archive .cm-page-header .cm-page-title,
body.archive .cm-page-header h1,
body.search .cm-page-header .cm-page-title,
body.search .cm-page-header h1 {
font-size: 26px;
font-weight: 700;
color: var(--ctc-text);
}
/* Neutralize ColorMag's blue page-title highlight block */
body.archive .cm-page-title span,
body.search .cm-page-title span {
background: none !important;
color: var(--ctc-text) !important;
padding: 0 !important;
}
/* Result grids (archive: .cm-posts, search: .article-container) */
body.archive .cm-posts.cm-layout-2,
body.search .article-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
max-width: 1200px;
margin: 8px auto 0;
}
body.archive #cm-primary article,
body.search #cm-primary article {
background: var(--ctc-surface) !important;
border: 1px solid var(--ctc-border) !important;
border-radius: var(--ctc-radius);
padding: 18px 20px !important;
margin: 0 !important;
width: auto !important;
float: none !important;
box-shadow: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
body.archive #cm-primary article:hover,
body.search #cm-primary article:hover {
border-color: var(--ctc-accent) !important;
box-shadow: 0 2px 10px rgba(37, 99, 235, 0.10);
}
/* ColorMag's style-1 makes the first post full-width; normalize it */
body.archive .cm-posts.cm-layout-2 article:first-child { grid-column: auto !important; }
/* Hide legacy 256px icons + redundant category/meta rows */
body.archive #cm-primary .cm-featured-image,
body.search #cm-primary .cm-featured-image,
body.archive #cm-primary .cm-entry-header-meta,
body.search #cm-primary .cm-entry-header-meta,
body.archive #cm-primary .cm-below-entry-meta,
body.search #cm-primary .cm-below-entry-meta { display: none; }
body.archive #cm-primary .cm-entry-title,
body.search #cm-primary .cm-entry-title { font-size: 16px; line-height: 1.35; margin: 0 0 8px; }
body.archive #cm-primary .cm-entry-title a,
body.search #cm-primary .cm-entry-title a { color: var(--ctc-text); }
body.archive #cm-primary .cm-entry-title a:hover,
body.search #cm-primary .cm-entry-title a:hover { color: var(--ctc-accent); }
body.archive #cm-primary .cm-entry-summary,
body.search #cm-primary .cm-entry-summary,
body.archive #cm-primary .cm-entry-summary p,
body.search #cm-primary .cm-entry-summary p {
font-size: 13.5px;
color: var(--ctc-muted);
margin: 0;
}
body.archive #cm-primary .cm-entry-summary,
body.search #cm-primary .cm-entry-summary {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.archive #cm-primary .more-link,
body.archive #cm-primary .cm-read-more,
body.archive #cm-primary .cm-readmore-button,
body.search #cm-primary .more-link,
body.search #cm-primary .cm-read-more,
body.search #cm-primary .cm-readmore-button {
display: inline-block;
margin-top: 10px;
font-size: 13px;
font-weight: 600;
color: var(--ctc-accent);
}
/* =============================================================
Landing / start page (front page)
============================================================= */
body.home .cm-entry-header { text-align: center; margin-bottom: 6px; }
body.home .cm-entry-title { font-size: 34px; line-height: 1.2; }
.ctc-hero-lead {
font-size: 17px;
color: var(--ctc-muted);
max-width: 720px;
margin: 0 auto 6px;
text-align: center;
}
.ctc-section-title { font-size: 20px; font-weight: 700; margin: 30px 0 14px; }
.ctc-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 14px;
}
.ctc-cat-grid a {
display: block;
background: var(--ctc-surface);
border: 1px solid var(--ctc-border);
border-radius: var(--ctc-radius);
padding: 20px;
color: var(--ctc-text);
text-decoration: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
.ctc-cat-grid a:hover { border-color: var(--ctc-accent); box-shadow: 0 2px 10px rgba(37, 99, 235, 0.10); }
.ctc-cat-grid .ico { font-size: 28px; display: block; margin-bottom: 8px; line-height: 1; }
.ctc-cat-grid b { display: block; font-size: 16px; margin-bottom: 3px; }
.ctc-cat-grid small { color: var(--ctc-muted); font-size: 13px; }
/* =============================================================
2026 mockup refinements (top section + FAQ section)
============================================================= */
/* ---------- Logo: ⚡ Conversion-Tool (mark orange, suffix accent) ---------- */
.cm-site-title a { display: inline-flex; align-items: baseline; }
.cm-site-title { font-size: 21px !important; }
.ctc-logo-mark { color: #f59e0b; margin-right: 7px; font-size: 0.9em; }
.ctc-logo-suffix { color: var(--ctc-accent); }
/* ---------- Nav: a touch more refined/elegant ---------- */
#cm-primary-nav a, #cm-primary-nav .menu a {
font-size: 14px;
font-weight: 500;
padding: 8px 13px !important;
}
/* ---------- Breadcrumb: left-aligned with the content (it's a flex item in
.site, so margin:auto was centering it). Full-width outer, centered inner. -- */
.ctc-breadcrumbs {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
align-self: stretch;
}
.ctc-breadcrumbs-inner {
max-width: 1200px;
margin: 14px auto 2px;
padding: 0 20px;
font-size: 12.5px;
color: var(--ctc-muted);
text-align: left;
}
/* ---------- Byline under the H1 (rating + free) ---------- */
.ctc-byline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 14px;
margin: 4px 0 20px;
font-size: 13.5px;
color: var(--ctc-muted);
}
.ctc-byline .ctc-byline-rating { display: inline-flex; align-items: center; }
.ctc-byline .ctc-byline-rating > div,
.ctc-byline .yasr-visitor-votes { margin: 0 !important; }
.ctc-byline-free::before { content: "\2713 "; color: #16a34a; font-weight: 700; } /* ✓ */
/* ---------- Long-form content + FAQ as cards (design-faqsection mockup) ---------- */
.ctc-prose,
.ctc-faq,
.ctc-page-card {
background: var(--ctc-surface);
border: 1px solid var(--ctc-border);
border-radius: var(--ctc-radius);
padding: 26px 30px;
margin: 24px 0;
}
.ctc-page-card { margin-top: 8px; }
.ctc-page-card > :first-child { margin-top: 0; }
.ctc-page-card h2 { font-size: 21px; margin: 26px 0 10px; }
.ctc-page-card p, .ctc-page-card li { font-size: 15.5px; color: #33455a; }
/* Code/URL boxes (e.g. the API examples) must wrap inside the content card */
#cm-primary pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
box-sizing: border-box;
margin: 14px 0;
padding: 14px 16px;
background: var(--ctc-bg);
border: 1px solid var(--ctc-border);
border-radius: 8px;
font-size: 13px;
color: var(--ctc-text);
}
#cm-primary pre a { overflow-wrap: anywhere; word-break: break-all; }
.ctc-prose > h2:first-child,
.ctc-faq > h2:first-child { margin-top: 0; }
.ctc-faq > h2 { font-size: 22px; margin-bottom: 16px; }
.ctc-faq details {
background: var(--ctc-bg);
border: 1px solid var(--ctc-border);
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 10px;
}
.ctc-faq details:last-child { margin-bottom: 0; }
.ctc-faq summary {
list-style: none;
cursor: pointer;
font-weight: 700;
font-size: 15.5px;
color: var(--ctc-text);
position: relative;
padding-left: 22px;
}
.ctc-faq summary::-webkit-details-marker { display: none; }
.ctc-faq summary::before {
content: "\25B6"; /* ► closed */
position: absolute;
left: 2px; top: 2px;
color: var(--ctc-accent);
font-size: 11px;
}
.ctc-faq details[open] summary::before { content: "\25BC"; } /* ▼ open */
.ctc-faq .ctc-faq-a,
.ctc-faq details .ctc-faq-a {
margin-top: 10px;
color: var(--ctc-muted);
font-size: 14.5px;
line-height: 1.55;
}
/* ---------- Tool options: clean labeled grid (no heavy blue alert) ---------- */
.my-form .alert-info {
background: transparent !important;
border: none !important;
color: var(--ctc-text) !important;
padding: 0 !important;
margin: 12px 0 0 !important;
display: flex;
flex-wrap: wrap;
gap: 16px 18px;
align-items: flex-start;
}
.my-form .alert-info > h2 {
flex: 1 1 100%;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ctc-muted);
margin: 4px 0 0;
font-weight: 700;
}
.my-form .alert-info > p { margin: 0; flex: 1 1 220px; min-width: 0; }
.my-form .alert-info > p:not(:has(label)) {
flex: 1 1 100%;
color: var(--ctc-muted);
font-size: 12.5px;
line-height: 1.5;
}
.my-form .alert-info > br { display: none; }
.my-form .alert-info .ctc-field { display: block; }
.my-form .alert-info label,
.my-form .alert-info label strong {
display: block;
font-weight: 600;
text-transform: uppercase;
font-size: 11.5px;
letter-spacing: 0.5px;
color: var(--ctc-muted);
margin: 0 0 5px;
}
.my-form .alert-info .form-control { width: 100%; }
/* Output format + algorithm selects span the full width (not narrow columns) */
.my-form .alert-info > p:has(select[name="audioformat"]),
.my-form .alert-info > p:has(select[name="audiomethod"]) { flex: 1 1 100%; }
/* =============================================================
2026 mockup refinements v3 (rating, share, dropdowns, related icons)
============================================================= */
/* Compact read-only rating: ★ 4.9 (281 ratings) */
.ctc-byline-rating { font-weight: 600; color: var(--ctc-text); }
.ctc-byline-rating .ctc-star { color: #f5a623; }
.ctc-byline-rating .ctc-rating-count { color: var(--ctc-muted); font-weight: 400; }
/* Share button (replaces the old social-icon row) */
.ctc-share-btn {
background: transparent;
border: 1px solid var(--ctc-border);
color: var(--ctc-muted);
border-radius: 8px;
padding: 3px 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.ctc-share-btn:hover { border-color: var(--ctc-accent); color: var(--ctc-accent); background: var(--ctc-accent-soft); }
/* Hide the legacy social-icon share row (Facebook/X/Pinterest/Email) */
.ctc-share { display: none !important; }
/* Prettier top-bar dropdowns: rounded items, inset hover with a subtle slide */
#cm-primary-nav .sub-menu { padding: 8px !important; }
#cm-primary-nav .sub-menu a {
padding: 8px 12px !important;
border-radius: 8px !important;
transition: background .12s ease, color .12s ease, padding-left .12s ease;
}
#cm-primary-nav .sub-menu a:hover,
#cm-primary-nav .sub-menu li:hover > a {
background: var(--ctc-accent-soft) !important;
color: var(--ctc-accent) !important;
padding-left: 16px !important;
}
#cm-primary-nav .sub-menu .menu-item-has-children > a::after {
content: "\203A"; /* › flyout indicator */
float: right;
color: var(--ctc-muted);
margin-left: 10px;
}
/* Related-tools tiles: leading icon (mockup) */
.ctc-tools-grid a .ctc-tool-ico { font-size: 1.05em; margin-right: 5px; }
/* ---------- URL row: full-width input + Fetch button (mockup) ---------- */
/* Card grouping the "paste a link" + cloud-import controls */
.ctc-link-card {
background: var(--ctc-bg);
border: 1px solid var(--ctc-border);
border-radius: var(--ctc-radius);
padding: 18px;
margin-bottom: 14px;
}
.ctc-urlrow { display: flex; flex-wrap: nowrap; gap: 10px; align-items: stretch; margin-bottom: 6px; }
.ctc-link-card .ctc-urlrow { margin-bottom: 0; }
.ctc-url-input { flex: 1 1 auto; min-width: 0; width: auto !important; }
.ctc-fetch-btn { flex: 0 0 auto; padding: 11px 26px !important; white-space: nowrap; }
.ctc-cloud { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 8px 0 4px; }
.ctc-link-card .ctc-cloud { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--ctc-border); }
.ctc-cloud img { height: 30px; width: auto; }
/* ---------- Footer: 3-column layout (mockup) ---------- */
.ctc-footer-cols {
display: flex;
flex-wrap: wrap;
gap: 24px 64px;
max-width: 1200px;
margin: 0 auto;
padding: 38px 20px 24px;
}
.ctc-footer-col h4 { color: #fff; font-size: 14px; margin: 0 0 12px; font-weight: 700; }
.ctc-footer-col a { display: block; color: #9fb0c0; padding: 3px 0; font-size: 13.5px; }
.ctc-footer-col a:hover { color: #fff; }
.ctc-footer-bar {
border-top: 1px solid rgba(255, 255, 255, 0.08);
max-width: 1200px;
margin: 0 auto;
padding: 16px 20px;
color: #7e91a3;
font-size: 13px;
}
@media (max-width: 640px) {
.ctc-urlrow { flex-wrap: wrap; }
.ctc-fetch-btn { width: 100%; }
}