/* * Components added during the Elementor exit. * * Kept in its own file rather than appended to style.css so that * deploying them to production is always a matter of copying a new file * in, never overwriting one that production may have drifted away from * since this local export was taken. Enqueued after style.css in * edd-widgets.php, so anything here wins on equal specificity. */ /* * Absorbed from Elementor kit 87016 ("Imported Kit"). * * Everything in this block is currently supplied by that kit's * generated stylesheet, scoped to the `elementor-kit-87016` class * Elementor puts on . It is site-wide: the base font and line * height for every page, the heading line height, and the colour of * every button and submit input on the site. * * All of it disappears the moment Elementor is deactivated -- including * on pages that were migrated and signed off long before, which is the * failure mode the playbook flags before phase 7: pages that look * finished while Elementor is active and move when it goes. * * Restating the same values here at a lower specificity means nothing * changes now (the kit still wins while it exists, with identical * values) and nothing changes then (these take over seamlessly). This * block is the reason phase 7 should be uneventful; do not delete it * with the plugin. */ body { font-family: "Inter", "Open Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; font-weight: 400; line-height: 1.5em; } h1 { font-weight: 600; line-height: 1.3em; } button, input[type="button"], input[type="submit"] { background-color: var(--primary-color); color: #fff; border-radius: 8px; } button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { background-color: var(--primary-dark-color); } /* The buy box shows one row per source: this store, then an external marketplace when one is recorded. The rows are divided horizontally, each keeping the sales / rating split the single row used to have. */ .sales-ratings-row + .sales-ratings-row { border-top: 1px solid var(--border-color); } /* The sales half takes the slack, so the rating column stays only as wide as it needs and its source line has room to sit on one line. */ .sales-ratings-wrap .total_sales { flex: 1 1 auto; min-width: 0; } .sales-ratings-wrap .ratings { flex: 0 1 auto; display: flex; flex-direction: column; justify-content: center; } /* The external row is supporting evidence, not the headline, so it sits a step quieter than the store's own figures above it. */ .sales-ratings-row--external .fs-5 { font-size: 1rem !important; } .sales-ratings-row--external .edd-star-ratings { font-size: 13px; } /* Source attribution under a sales total or rating. Deliberately quiet -- it is there to be checked, not to compete with the figure above. */ .ul-proof-breakdown { font-size: 13px; color: var(--text-muted); } .ul-proof-source { font-size: 13px; color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--grey-300); text-underline-offset: 2px; } a.ul-proof-source:hover { color: var(--primary-dark-color); text-decoration-color: var(--primary-color); } /* Shown instead of a rating when a product has no reviews of its own. An invitation is worth more than a blank column, and unlike the old "No reviews yet" it gives the reader something to do. */ .ul-proof-invite { font-size: 14px; color: var(--text-muted); text-decoration: none; } .ul-proof-invite:hover { color: var(--primary-dark-color); } /* ============================================================ FOOTER Replaces Elementor library template 86974. Ported at visual parity against baseline/phase0-before/desktop/notfound.png -- same grey ground, rule under the logo, four columns with the stats last, and a bottom bar -- so the only intended visual differences are the two content fixes (copyright year, and the first column no longer being a second "Company"). ============================================================ */ .ul-footer { background-color: var(--grey-50); padding: 40px 0 24px; margin-top: 80px; } .ul-footer-brand { padding-bottom: 24px; } .ul-footer-logo img { max-height: 36px; width: auto; } /* Laid out with its own flex rules rather than col-* classes: the grid in this stylesheet only defines .col-md-6 / .col-sm-6, and the Bootstrap build in uilib-utilities.css contains no column classes at all, so anything like col-lg-3 would silently collapse to full width. */ .ul-footer-cols { display: flex; flex-wrap: wrap; gap: 32px; border-top: 1px solid var(--grey-200); padding-top: 32px; } .ul-footer-col { flex: 1 1 180px; min-width: 0; } .ul-footer-col--stats { flex: 0 1 340px; } @media (max-width: 767px) { .ul-footer-cols { gap: 24px 32px; } .ul-footer-col { flex-basis: 40%; } .ul-footer-col--stats { flex-basis: 100%; } } .ul-footer-heading { font-size: 15px; color: var(--text-primary); margin-bottom: 16px; } .ul-footer-menu, .ul-footer-tag-list { list-style: none; margin: 0; padding: 0; } .ul-footer-menu li { margin-bottom: 10px; } .ul-footer-menu a { color: var(--text-muted); text-decoration: none; font-size: 14px; } .ul-footer-menu a:hover { color: var(--primary-dark-color); } .ul-footer-stats .fs-2 { color: var(--text-primary); line-height: 1.2; } .ul-footer-tags { border-top: 1px solid var(--grey-200); margin-top: 20px; padding-top: 16px; } .ul-footer-tag-list { display: flex; flex-wrap: wrap; gap: 16px; } .ul-footer-tag-list a { color: var(--text-disabled); text-decoration: none; font-size: 14px; } .ul-footer-tag-list a:hover { color: var(--primary-dark-color); } .ul-footer-bottom { border-top: 1px solid var(--grey-200); margin-top: 32px; padding-top: 20px; gap: 16px; } .ul-footer-copyright { font-size: 14px; } .ul-footer-social { list-style: none; margin: 0; padding: 0; gap: 8px; } .ul-footer-social a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background-color: var(--grey-300); text-decoration: none; } .ul-footer-social a:hover { background-color: var(--primary-color); } @media (max-width: 991px) { .ul-footer { margin-top: 48px; } .ul-footer-stats { margin-top: 8px; } } /* ============================================================ PRODUCT HERO Replaces Elementor library template 86982. Reproduces its geometry, measured off baseline/phase0-before/desktop/ product-variable-2tier.png: a 66/33 split of the 1380px container with 20px gutters, featured image left, buy box right, related links capped at 500px under the image. ============================================================ */ .ul-download-hero { padding-top: 20px; } .ul-hero-row { display: flex; flex-wrap: wrap; margin-left: -20px; margin-right: -20px; } .ul-hero-media { flex: 0 0 66.666%; max-width: 66.666%; padding: 0 20px; } .ul-hero-buybox { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 20px; } .ul-hero-thumb img { max-width: 100%; height: auto; display: block; border-radius: 8px; } .ul-hero-related { max-width: 500px; margin-top: 20px; } /* The buy box stacks its two parts with the same rhythm the Elementor column had between widgets. */ .ul-hero-buybox > * + * { margin-top: 16px; } .ul-download-info { margin-top: 20px; } @media (max-width: 991px) { .ul-hero-media, .ul-hero-buybox { flex: 0 0 100%; max-width: 100%; } .ul-hero-buybox { margin-top: 24px; } } /* ============================================================ HOMEPAGE Replaces Elementor page 87021. Values taken from that page's generated kit CSS (uploads/elementor/css/post-87021.css) and from baseline/phase0-before/desktop/home.png, then rewritten in this stylesheet's own tokens — the Elementor globals --e-global-color-a7a29e5 and --e-global-color-text resolve to #f9fafb and #1e293b, which are --grey-50 and --text-primary here. Restating them locally is what stops this page moving when Elementor is switched off. ============================================================ */ /* 160/190 rather than the section's own 140/180: in Elementor the header sat in a section of its own above this one, and its column padding added ~20px of flow above the hero and ~10px below the last widget. [ul_header] is echoed directly now, so that spacing is folded into the hero's padding instead of being reproduced as empty wrappers. */ .ul-home-hero { background-color: var(--grey-50); padding: 160px 0 190px; text-align: center; } /* 1.5, not the 1.3em the kit gives a bare h1: Elementor's heading widget overrode that with the kit's primary typography line height (--e-global-typography-primary-line-height: 1.5em) at a higher specificity, and that is what the baseline screenshot shows. The selector is scoped through .ul-home-hero so it outranks `.elementor-kit-87016 h1` both before and after Elementor goes. */ .ul-home-hero .ul-home-title { font-size: 32px; font-weight: 700; line-height: 1.5; color: #2c3647; margin: 0; } /* 30px is the kit's own widget spacing (--widgets-spacing: 30px, applied as .elementor-widget:not(:last-child){margin-block-end}), which is what separated these three widgets. */ .ul-home-search { display: flex; justify-content: center; margin-top: 30px; } .ul-home-search input[type="text"] { min-width: 320px; } .ul-home-stat { margin-top: 30px; line-height: 1.5; } /* Straddles the hero's lower edge, as the Elementor section did. The 10px top padding is that section's column padding, which offset the -65px pull to a net 55px overlap. */ .ul-home-catnav { margin-top: -65px; padding-top: 10px; padding-bottom: 10px; } /* Elementor's columns padded content by 10px inside the 1380px container, where .px-3 pads by 16px. These containers therefore drop .px-3 in the markup rather than overriding it -- the Bootstrap utilities are generated with !important and cannot be overridden from here at all. */ .ul-home-hero .container, .ul-home-catnav .container, .ul-home-section .container { padding-left: 10px; padding-right: 10px; } .ul-home-section--featured { padding: 40px 0 50px; } .ul-home-section--freebies { padding: 10px 0 60px; } .ul-home-section-title { font-size: 22px; font-weight: 600; line-height: 1.5; color: var(--text-primary); margin: 0 0 8px 20px; } @media (max-width: 1023px) { .ul-home-hero .ul-home-title { font-size: 28px; } } /* No mobile overrides at all. The kit's only responsive rules were container max-widths and the h1 dropping to 28px at 1023px, so the hero padding and the search field's 320px minimum applied at every width. Adding breakpoints Elementor never had is how a "parity" port stops being one. */ /* ============================================================ PRODUCT DESCRIPTION Typography for product descriptions written in the native WordPress editor. These used to be built in Elementor, which supplied its own container, grid and spacing; content coming out of the editor has none of that, so the rhythm has to live here instead. Deliberately plain and semantic — headings, paragraphs, lists and images — because that is the whole set of things the native editor produces. ============================================================ */ .ul-download-content { padding: 40px 0 20px; } .ul-download-content .container { padding-left: 10px; padding-right: 10px; } /* Long-form prose sits at a comfortable measure rather than the full 1380px container, which is sized for the product grid. */ .ul-download-content .container > * { max-width: 760px; margin-left: auto; margin-right: auto; } .ul-download-content h2, .ul-download-content h3, .ul-download-content h4 { color: var(--text-primary); margin: 40px auto 8px; line-height: 1.4; } .ul-download-content h2 { font-size: 24px; } .ul-download-content h3 { font-size: 19px; } .ul-download-content h4 { font-size: 16px; } /* First heading should not push the block away from the tabs. */ .ul-download-content h2:first-child, .ul-download-content h3:first-child, .ul-download-content h4:first-child { margin-top: 0; } .ul-download-content p { color: var(--text-muted); margin: 0 auto 16px; line-height: 1.7; } .ul-download-content ul, .ul-download-content ol { color: var(--text-muted); line-height: 1.7; padding-left: 22px; margin: 0 auto 16px; max-width: 760px; } .ul-download-content li { margin-bottom: 6px; } .ul-download-content a { color: var(--primary-dark-color); } .ul-download-content b, .ul-download-content strong { color: var(--text-primary); } /* Images and embeds are allowed the full container width — product screenshots are the one thing worth breaking the measure for. */ .ul-download-content img, .ul-download-content iframe, .ul-download-content video { max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: 8px; } .ul-download-content figure { max-width: 100%; margin: 24px auto; } @media (max-width: 767px) { .ul-download-content { padding: 24px 0 16px; } .ul-download-content h2 { font-size: 21px; } .ul-download-content h3 { font-size: 18px; } } /* ============================================================ MY ACCOUNT Replaces the Elementor tabs widget on page 6854. Reuses .download-page-tabs so the account tabs and the product page's Details/Reviews tabs stay the same component. ============================================================ */ .ul-account { padding-bottom: 60px; } /* The product page's tabs sit under a hero and need the space; here they follow the site header, so the 80px top padding would leave the page looking empty. */ .ul-account-tabs { padding-top: 0; margin-top: 24px; } .ul-account-panel { padding-top: 32px; } /* ============================================================ PAGE CONTENT Pages built in Elementor got their container and gutters from Elementor's own sections; page.php echoed the_content() bare. Native content needs the container to come from the theme, or it runs edge to edge — which it did on every page, checkout included. ============================================================ */ .ul-page-content { padding: 8px 0 56px; } .ul-page-content > .container > *:first-child { margin-top: 0; } @media (max-width: 767px) { .ul-page-content { padding-bottom: 32px; } }