/* Theme Name: Fromm MP32 Modern Theme URI: https://frommp32.com/ Description: Modern responsive child theme for Fromm MP32. Generated by the Allstrap platform tooling; palette variant applied per-site so the network does not share a single visual fingerprint. Author: Allstrap Template: neve Version: 2.0.0 License: GNU General Public License v2 or later Text Domain: frommp32-modern */ :root { --site-ink: #23272A; --site-text: #34393C; --site-accent: #C2412D; --site-accent-dark: #9F3525; --site-accent-soft: #F8E8E6; --site-on-accent: #FFFFFF; --site-bg: #FFFFFF; --site-muted: #5F666B; --site-surface: #F3F4F5; --site-surface-alt: #F8F9FA; --site-border: #DCDCDD; --site-border-strong: #C1C3C3; --site-radius: 12px; --site-radius-sm: 8px; --site-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 12px rgba(17, 24, 39, .06); --site-shadow-lift: 0 10px 24px rgba(17, 24, 39, .10), 0 2px 6px rgba(17, 24, 39, .06); --site-measure: 68ch; } /* Bridge into neve's own custom properties, which is what actually paints the header, links, buttons and cards. The selector is doubled deliberately: the theme emits its customiser values as inline CSS in the same , so matching its `:root` would leave the winner decided by source order. */ :root:root { --nv-primary-accent: #C2412D; --nv-secondary-accent: #9F3525; --nv-site-bg: #FFFFFF; --nv-light-bg: #F3F4F5; --nv-text-color: #34393C; } /* -------------------------------------------------------------- foundations */ body { background: var(--site-bg); color: var(--site-text); -webkit-font-smoothing: antialiased; line-height: 1.65; } h1, h2, h3, h4, h5, h6 { color: var(--site-ink); line-height: 1.2; letter-spacing: -0.015em; } h1 { font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3rem); } h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.05rem); } h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); } a { color: var(--site-accent); text-underline-offset: 0.15em; } a:hover, a:focus { color: var(--site-accent-dark); } /* The inherited themes suppressed focus outlines entirely, which leaves the site unusable by keyboard. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .button:focus-visible { outline: 3px solid var(--site-accent); outline-offset: 2px; border-radius: 2px; } /* Several legacy themes shipped fixed pixel widths that caused horizontal scroll on phones. */ img, video, iframe { max-width: 100%; height: auto; } table { display: block; overflow-x: auto; max-width: 100%; } /* Readable measure on prose pages only - applying it to listings would squeeze the card grid. */ .single .entry-content > *, .page .entry-content > * { max-width: var(--site-measure); } .single .entry-content > :is(.alignwide, .alignfull, figure, table, .wp-block-image), .page .entry-content > :is(.alignwide, .alignfull, figure, table, .wp-block-image) { max-width: none; } /* ------------------------------------------------------------------ header */ .site-header { background: var(--site-bg); border-bottom: 1px solid var(--site-border); box-shadow: 0 1px 0 rgba(17, 24, 39, .02); } .custom-logo { max-height: 54px; width: auto; } /* The wordmark already spells the site name, so a theme that also prints the title text renders it twice side by side. */ body.wp-custom-logo :is(.site-title, .main-title, .site-description, .brand .site-title) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --------------------------------------------------------------- page intro */ /* The blog index of every one of these sites renders a bare grid of cards with no H1 and no statement of what the site is - bad for a reader arriving from search, and bad for the search result itself. */ .site-intro { grid-column: 1 / -1; flex-basis: 100%; width: 100%; box-sizing: border-box; margin: 0 0 2.25rem; padding: clamp(1.5rem, 1.1rem + 2.2vw, 2.75rem); background: linear-gradient(160deg, var(--site-surface) 0%, var(--site-bg) 70%); border: 1px solid var(--site-border); border-top: 4px solid var(--site-accent); border-radius: var(--site-radius); } /* Three bars, echoing the strapping motif in the site's own wordmark. */ .site-intro__mark { display: flex; gap: 5px; margin-bottom: 1.15rem; } .site-intro__mark span { width: 7px; height: 28px; background: var(--site-accent); border-radius: 2px; } .site-intro__mark span:nth-child(2) { opacity: .65; } .site-intro__mark span:nth-child(3) { opacity: .35; } .site-intro__title { margin: 0 0 .55rem; } .site-intro--bare { padding: clamp(1.1rem, .9rem + 1.1vw, 1.6rem) clamp(1.25rem, 1rem + 1.4vw, 2rem); } .site-intro--bare .site-intro__mark { margin-bottom: .8rem; } .site-intro--bare .site-intro__mark span { height: 22px; } .site-intro--bare .site-intro__title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); } .site-intro__lede { margin: 0; max-width: var(--site-measure); color: var(--site-muted); font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); } /* ------------------------------------------------------------- post listing */ :is(.home, .blog, .archive, .search) :is(article.post, .loop-entry, .entry.loop-entry) { background: var(--site-bg); border: 1px solid var(--site-border); border-radius: var(--site-radius); box-shadow: var(--site-shadow); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } :is(.home, .blog, .archive, .search) :is(article.post, .loop-entry):hover { transform: translateY(-3px); border-color: var(--site-border-strong); box-shadow: var(--site-shadow-lift); } .entry-title { margin-top: 0; } .entry-title a { color: var(--site-ink); text-decoration: none; } .entry-title a:hover, .entry-title a:focus { color: var(--site-accent); } /* Most of this network's posts date from 2012-2018. The content is evergreen, so a prominent stale date reads as an abandoned site; keep it available but quiet. */ :is(.entry-meta, .post-meta, .entry-taxonomies, .cat-links, .posted-on) { font-size: .82rem; color: var(--site-muted); } :is(.entry-meta, .post-meta) a { color: var(--site-muted); } :is(.entry-meta, .post-meta) a:hover { color: var(--site-accent); } /* Belt and braces: the default category is also stripped in functions.php, but a theme that renders it from its own markup is covered here too. */ .category-link-uncategorized, .cat-links a[href*="/category/uncategorized"] { display: none; } :is(.more-link, .read-more, .post-more-link, .entry-more a) { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; color: var(--site-accent); } :is(.more-link, .read-more, .post-more-link):hover { color: var(--site-accent-dark); } /* ------------------------------------------------------------------ blocks */ .button, button, input[type="submit"], .wp-block-button__link { background: var(--site-accent); color: var(--site-on-accent); border: 0; border-radius: var(--site-radius-sm); padding: .72em 1.45em; font-weight: 600; transition: background .16s ease; } .button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background: var(--site-accent-dark); color: var(--site-on-accent); } blockquote { margin: 1.75rem 0; padding: .35rem 0 .35rem 1.25rem; border-left: 4px solid var(--site-accent); color: var(--site-ink); font-style: normal; } :is(.widget, .sidebar .widget, .wp-block-group.is-style-card) { background: var(--site-surface); border: 1px solid var(--site-border); border-radius: var(--site-radius-sm); padding: 1.15rem 1.3rem; margin-bottom: 1.35rem; } .widget-title, .wp-block-heading.widget-title { margin-top: 0; font-size: 1.05rem; } /* ------------------------------------------------------------------ footer */ /* Only the accent rule is applied here. Each parent builds its footer from its own row structure and colours those rows from its own variables - which the bridge above has already repointed at this site's palette - so repainting the region from outside fights that structure. Astra is the clear case: it colours its copyright row itself, and forcing a background and text colour onto the wrapper left the row's link unreadable against it. */ .site-footer { border-top: 4px solid var(--site-accent); } .site-footer .widget { background: transparent; border: 0; padding: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }