/** * Advertiser Marketplace — consolidated theme stylesheet. * Combined from block-styles / header-footer / patterns / accessibility * into one request to cut render-blocking round trips. Sections are kept * clearly delimited below since this theme has no build step — this file * IS the source, not a compiled artifact. */ /* ========================================================================= 1. BLOCK STYLE VARIATIONS (pill, score, stat-tile, card, featured-card, dark-band) ========================================================================= */ /** * CSS for the block style variations registered in inc/block-styles.php. * Class names follow WordPress's own convention: selecting a style named * "pill" on core/paragraph adds `.is-style-pill` to that block's wrapper. */ .wp-block-paragraph.is-style-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; line-height: 1.4; } .wp-block-paragraph.is-style-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .wp-block-paragraph.is-style-score { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; } .wp-block-group.is-style-stat-tile { background: var(--wp--preset--color--surface-2); border-radius: var(--wp--custom--radius--control); padding: 14px 16px; } .wp-block-group.is-style-stat-tile > .wp-block-heading { font-size: 22px; margin-bottom: 4px; } /* * card / featured-card / dark-band are also declared under * styles.blocks.core/group.variations in theme.json, but that mechanism * isn't emitting CSS in testing (registered correctly in * WP_Block_Styles_Registry, yet no .is-style-* rule appears in the * generated global-styles-inline-css) — a WordPress quirk not fully * root-caused. Defining the rules directly here, the same way pill/score/ * stat-tile already work, sidesteps it entirely. */ .wp-block-group.is-style-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--card, 12px); padding: 20px; } .wp-block-group.is-style-featured-card { background: var(--wp--preset--color--surface); border: 2px solid var(--wp--preset--color--blue); border-radius: var(--wp--custom--radius--card, 12px); padding: 22px; } .wp-block-group.is-style-dark-band { background: var(--wp--preset--color--navy); color: #ffffff; padding-top: 80px; padding-bottom: 80px; } .wp-block-group.is-style-dark-band .wp-block-heading { color: #ffffff; } /* ========================================================================= 2. HEADER / FOOTER ========================================================================= */ /** * Styling for parts/header.html and parts/footer.html that core block * attributes can't express directly (link hover states, the mobile overlay * menu's own colour scheme, fine header spacing). */ /* ---------- Header ---------- */ .site-header { border-bottom: 1px solid var(--wp--preset--color--border); padding: 14px var(--wp--style--root--padding-right, 32px); z-index: 60; } .site-header .wp-block-navigation { gap: 4px; } .site-header .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 9px 12px; border-radius: 8px; color: var(--wp--preset--color--text-secondary); } .site-header .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface-2); } .site-header-login a { color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; } /* Core Navigation's mobile overlay renders on via a portal, so it can't be reached by the .site-header selector scope above. */ .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--surface); } /* * Core Navigation switches to the hamburger overlay at its own hardcoded * 600px breakpoint, independent of every other breakpoint in this theme * (767px/1023px). Confirmed by testing at 768px: with 6 top-level items * plus a logo and two CTAs, core's ">=600px = show inline nav" rule kicks * in far too early for the available width — "Resources" wraps onto a * second line and the header balloons from ~68px to 157px tall. Realigning * the hamburger threshold to this theme's own 1023px tablet/mobile * boundary instead, so the header behaves consistently with the rest of * the page at every width in between. */ @media (max-width: 1023px) { .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } } /* ---------- Footer ---------- */ .site-footer .wp-block-navigation { gap: 10px; } .site-footer .wp-block-navigation-item > .wp-block-navigation-item__content { color: #c7cfeb; font-size: 13.5px; padding: 0; } .site-footer .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: #ffffff; } .site-footer-bottom .wp-block-navigation { gap: 18px; } .site-footer-bottom .wp-block-navigation-item > .wp-block-navigation-item__content { color: #8b96c4; font-size: 12.5px; padding: 0; } .site-footer-bottom .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: #ffffff; } .wp-block-social-links .wp-social-link { background: rgba(255, 255, 255, 0.08); } .wp-block-social-links .wp-social-link:hover { background: rgba(255, 255, 255, 0.16); } @media (max-width: 767px) { .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ========================================================================= 3. ACCESSIBILITY (skip link, focus states, touch targets) ========================================================================= */ /** * Cross-cutting accessibility rules: skip link, visible focus states, and * minimum touch target sizing. Kept in its own file so this pass is easy * to review independently of visual/component styling. */ /* * No custom skip link here — WordPress core auto-injects one for block * themes (targeting the first
, styled via its own * wp-block-template-skip-link-inline-css), so a theme-authored one would * just duplicate it. Confirmed present in the rendered page during testing. */ /* ---------- Visible focus states ---------- */ /* * A single, consistent focus ring for every interactive element, rather * than relying on inconsistent browser defaults that some of the button/ * link color resets above already dim. `:focus-visible` keeps it from * appearing on mouse clicks, only keyboard/assistive-tech focus. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .wp-block-button__link:focus-visible, .wp-block-search__button:focus-visible { outline: 2px solid var(--wp--preset--color--blue); outline-offset: 2px; border-radius: 4px; } /* Buttons already have their own border-radius; keep the ring flush with it instead of the generic 4px above. */ .wp-block-button__link:focus-visible { outline-offset: 3px; } /* ---------- Minimum 44px touch targets ---------- */ .wp-block-social-link { min-width: 44px; min-height: 44px; } .wp-block-social-link a { width: 44px; height: 44px; } .wp-block-navigation-item > .wp-block-navigation-item__content { min-height: 44px; display: flex; align-items: center; } .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .amp-faq-list summary { min-height: 44px; display: flex; align-items: center; } /* * The Solutions/Resources dropdown chevron is a separate small toggle * button next to the nav link text (core markup, not something this theme * controls the HTML for) — found rendering at 9x9px during testing, well * under the 44px minimum. The icon itself should stay visually compact; * only the clickable hit area needs to grow, via padding rather than * width/height so the chevron glyph doesn't balloon with it. */ .wp-block-navigation-submenu__toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; } .site-header-login a { min-height: 44px; display: inline-flex; align-items: center; } /* ========================================================================= 4. PATTERN STYLES (all 13 homepage sections) ========================================================================= */ /** * Styling for the 13 patterns under /patterns. Each pattern's outer group * carries a className (amp-hero, amp-trust, etc.) matched here, plus the * shared .amp-field / .amp-listing-row components reused across the * marketplace, link-monitoring, and campaign-management patterns. */ /* ---------- Shared: labeled field / row components ---------- */ .amp-listing-panel { background: var(--wp--preset--color--surface); overflow: hidden; } .amp-listing-rows > li, .amp-listing-rows .wp-block-post { list-style: none; margin: 0; } .amp-listing-row { padding: 14px 20px; border-bottom: 1px solid var(--wp--preset--color--border); align-items: center; row-gap: 10px; } .amp-listing-rows > :last-child .amp-listing-row { border-bottom: 0; } .amp-field { min-width: 64px; } .amp-field-site { min-width: 180px; flex: 1 1 180px; } .amp-field-label { color: var(--wp--preset--color--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 2px; } .amp-field-value { margin: 0; color: var(--wp--preset--color--text-primary); } .amp-favicon { width: 26px; height: 26px; border-radius: 6px; background: var(--wp--preset--color--navy); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; margin: 0; } .amp-domain { font-weight: 600; margin: 0; } @media (max-width: 767px) { .amp-listing-row { flex-direction: column; align-items: flex-start; gap: 8px; } .amp-field { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .amp-field-label { margin: 0; } } /* ---------- Hero ---------- */ .amp-hero { text-align: center; } /* ---------- Trust ---------- */ .amp-trust h3 { margin: 0 0 4px; } .amp-trust p { margin: 0; } @media (max-width: 480px) { .amp-trust-grid { grid-template-columns: 1fr !important; } } /* ---------- SEO Metrics ---------- */ .amp-report-card { background: var(--wp--preset--color--surface); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background-color: var(--wp--preset--color--border); overflow: hidden; } .amp-metric-tile { background: var(--wp--preset--color--surface); padding: 20px; } .amp-metric-tile--span2 { grid-column: span 2; } .amp-metric-tile--span4 { grid-column: span 4; } .amp-metric-label { text-transform: uppercase; letter-spacing: 0.03em; color: var(--wp--preset--color--text-muted); margin: 0 0 8px; } @media (max-width: 1023px) { .amp-report-card { grid-template-columns: repeat(2, 1fr); } .amp-metric-tile--span2, .amp-metric-tile--span4 { grid-column: span 2; } } @media (max-width: 767px) { .amp-report-card { grid-template-columns: 1fr; } .amp-metric-tile--span2, .amp-metric-tile--span4 { grid-column: span 1; } } /* ---------- How It Works ---------- */ .amp-step-number { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--color--navy); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0; } /* ---------- Campaign Management ---------- */ .amp-campaign-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; } .amp-campaign-metrics .amp-metric-tile { border: 1px solid var(--wp--preset--color--border); border-radius: 12px; } .amp-campaign-card { border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 12px; } .amp-campaign-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .amp-campaign-head h3 { margin: 0; } .amp-campaign-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 12px; border-top: 1px solid var(--wp--preset--color--border); font-size: 13px; } .amp-campaign-meta strong { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--wp--preset--color--text-muted); margin-bottom: 3px; } @media (max-width: 1023px) { .amp-campaign-metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .amp-campaign-meta { grid-template-columns: 1fr; gap: 8px; } } /* ---------- Agency ---------- */ .amp-benefit-card p { margin: 0; } @media (max-width: 1023px) { .amp-benefit-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 767px) { .amp-benefit-grid { grid-template-columns: 1fr !important; } } /* ---------- Link Monitoring ---------- */ .amp-monitor-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .amp-monitor-summary .amp-metric-tile { border: 1px solid var(--wp--preset--color--border); border-radius: 12px; } @media (max-width: 767px) { .amp-monitor-summary { grid-template-columns: repeat(2, 1fr); } } /* ---------- Analytics ---------- */ .amp-analytics .amp-metric-tile h3 { margin: 0 0 8px; } /* ---------- Testimonials ---------- */ .amp-testimonial-card { border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: 20px; height: 100%; } .amp-testimonial-card .wp-block-post-title { margin: 0 0 2px; } .amp-testimonial-role { color: var(--wp--preset--color--text-secondary); font-size: 12px; margin: 0 0 12px; } .amp-testimonial-card .wp-block-post-content p:first-child { margin-top: 0; } /* Shared by the testimonials Query Loop and the case-study/blog archive template — both use a 3-column wp:post-template grid with no per-instance className, so this targets the block's own stable class name. */ @media (max-width: 1023px) { .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .wp-block-post-template { grid-template-columns: 1fr; } } /* ---------- Pricing ---------- */ .amp-pricing-toggle { display: inline-flex; gap: 4px; background: var(--wp--preset--color--surface-2); border: 1px solid var(--wp--preset--color--border); border-radius: 10px; padding: 4px; margin: 0 auto 32px; } .amp-pricing-toggle button { font: inherit; padding: 9px 20px; min-height: 44px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--wp--preset--color--text-secondary); border: 0; background: none; cursor: pointer; } .amp-pricing-toggle button.is-active { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--text-primary); box-shadow: 0 8px 20px rgba(11, 18, 32, 0.08); } .amp-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .amp-price-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; padding: 22px; position: relative; } .amp-price-card.is-featured { border: 2px solid var(--wp--preset--color--blue); } .amp-price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--wp--preset--color--blue); color: #ffffff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; } .amp-price-card h3 { margin: 0 0 4px; font-size: 16px; } .amp-price-desc { font-size: 12.5px; color: var(--wp--preset--color--text-secondary); margin: 0 0 16px; } .amp-price-value { font-size: 32px; font-weight: 700; } .amp-price-note { font-size: 11.5px; color: var(--wp--preset--color--text-muted); margin: 4px 0 16px; } .amp-price-card .wp-block-button__link { width: 100%; justify-content: center; display: flex; } .amp-price-features { list-style: none; margin: 18px 0 0; padding: 0; font-size: 13px; color: var(--wp--preset--color--text-secondary); } .amp-price-features li { padding: 5px 0; } @media (max-width: 1023px) { .amp-price-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .amp-price-grid { grid-template-columns: 1fr; } .amp-price-card.is-featured { order: -1; } } /* ---------- FAQ ---------- */ .amp-faq-list details { border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: 0; margin-bottom: 10px; overflow: hidden; } .amp-faq-list summary { padding: 16px 18px; font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none; } .amp-faq-list summary::-webkit-details-marker { display: none; } .amp-faq-list summary::after { content: "+"; float: right; color: var(--wp--preset--color--text-muted); } .amp-faq-list details[open] summary::after { content: "−"; } .amp-faq-list details > div { padding: 0 18px 16px; font-size: 13.5px; color: var(--wp--preset--color--text-secondary); line-height: 1.6; }