/* Theme Name: Just Imagine Theme URI: https://www.partyrentalstudio.com/ Author: Kreetiv Studio Author URI: https://www.kreetiv.com/ Description: Custom block theme for Just Imagine (Event Rentals & Design), ported from the approved design comp. Cloned from the PRS Base starter; pairs with the PRS Storefront plugin v1.28.0+. Version: 1.7.2 Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: just-imagine */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:ital,wght@0,300;0,400;0,500;1,400&display=swap'); /* ============================================================ Ported from src/Just Imagine Site.dc.html. Colors, fonts and spacing come from theme.json presets; only structure and decorative detail live here. House rules for this design: no border radius anywhere, hairline rules (rgba ink) instead of borders, letterspaced uppercase eyebrows, Playfair for display + Jost for UI. ============================================================ */ .screen-reader-text { clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; position: absolute; word-wrap: normal; } :root { --ji-hairline: rgba(43, 38, 34, 0.18); --ji-hairline-soft: rgba(43, 38, 34, 0.08); } /* ============ Header ============ */ .site-header { position: sticky; top: 0; z-index: 30; background: rgba(246, 242, 234, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ji-hairline-soft); } /* ============================================================ Chrome layout, declared explicitly. WordPress generates a per-container CSS rule for each flex group (justify-content + gap) and prints it in . On pages rendered by the PRS plugin the chrome renders after wp_head(), so those generated rules can be missing entirely and the header collapses to the left. Declaring the same layout here makes the header and footer independent of that timing: this stylesheet is always in . Values match what the block editor generates, so nothing changes on theme-rendered pages. ============================================================ */ /* Header: logo left, nav + utilities right */ .site-header > .wp-block-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; } /* Header right-hand cluster: nav then IG / EMAIL / cart */ .site-header > .wp-block-group > .wp-block-group:not(.ji-logomark) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1.875rem; } .site-header .wp-block-navigation__container { gap: 1.875rem; } /* Footer: four columns, then the legal row */ .site-footer > .wp-block-columns { gap: 2.75rem 3.5rem; } .site-footer .ji-footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Home: kill the root block gap above the hero so it starts at y=0. Without this, WordPress pushes
down by one blockGap, which leaves a cream strip across the top and drops the absolutely positioned header out of alignment with the hero. */ body.home .wp-site-blocks > main, body.home .entry-content, body.home .entry-content > .ji-hero { margin-block-start: 0; } /* No gap before the footer: every section in this design carries its own bottom padding, so the block gap WordPress inserts between
and the footer template part reads as dead space. Also collapse the empty paragraphs the editor tends to leave behind at the end of a page. */ .wp-site-blocks > footer { margin-block-start: 0; } .entry-content > p:empty, .entry-content > .wp-block-spacer:last-child { display: none; } .entry-content > :last-child { margin-block-end: 0; } /* Home: header sits over the hero image, no fill */ body.home .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: 0; } /* Logo lettermark — white block, two lines, wide tracking. Swap this group for a wp:site-logo block once the new logo lands. */ .ji-logomark { background: #FFFFFF; border: 1px solid rgba(43, 38, 34, 0.14); padding: 10px 12px; line-height: 1.25; text-align: center; } body.home .ji-logomark { border-color: transparent; padding: 12px 14px; } .ji-logomark .wp-block-site-title, .ji-logomark .wp-block-site-title a { font-family: var(--wp--preset--font-family--body); font-size: 9px; font-weight: 400; letter-spacing: 0.34em; line-height: 1.25; text-transform: uppercase; color: var(--wp--preset--color--contrast); text-decoration: none; margin: 0; } .ji-logomark .wp-block-site-logo { margin: 0; } .ji-logomark .wp-block-site-logo img { max-width: 150px; height: auto; display: block; } /* Nav */ .site-header .wp-block-navigation { color: #4A423B; font-size: 14px; letter-spacing: 0.02em; } .site-header .wp-block-navigation a { text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; } .site-header .wp-block-navigation a:hover, .site-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--contrast); border-bottom-color: var(--wp--preset--color--accent); } /* Utility links (IG / EMAIL / cart) sit after a hairline divider */ .ji-navutils { display: flex; align-items: center; gap: 22px; } .ji-navutils::before { content: ''; display: block; width: 1px; height: 18px; background: rgba(43, 38, 34, 0.15); } .ji-navutils a { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #4A423B; text-decoration: none; } .ji-navutils a:hover { color: var(--wp--preset--color--primary); } .ji-cart-link { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.06em; color: var(--wp--preset--color--contrast); } /* Keep the nav and utility links from colliding as the viewport narrows: tighten gaps first, then allow a wrap. */ @media (max-width: 1200px) { .site-header .wp-block-navigation { column-gap: 1.25rem; } .ji-navutils { gap: 16px; } } @media (max-width: 900px) { .site-header .wp-block-navigation { column-gap: 1rem; font-size: 13px; } .ji-navutils { gap: 14px; } .ji-navutils a { font-size: 12px; } } /* ============ Home hero + service index ============ */ .ji-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .ji-hero-media { position: absolute; inset: 0; margin: 0 !important; max-width: none !important; z-index: 0; } /* WordPress renders the image inside a
, and that figure sizes to the photo's own aspect ratio. `height:100%` on the therefore resolved against an auto-height parent and the photo stopped short of the hero's bottom edge — below ~1300px wide the last service row and the CTA fell onto bare page background, reading as a white gap above the footer. Taking the figure out of flow pins the photo to the hero box at any window shape. */ .ji-hero-media .wp-block-image, .ji-hero-media figure { position: absolute; inset: 0; margin: 0; max-width: none; } .ji-hero-media img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; } /* Cream wash for text legibility. Kept deliberately light so the photography stays vivid (client note: comp was too faded). */ .ji-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 82% at 6% 52%, rgba(246, 242, 234, 0.62) 0%, rgba(245, 240, 231, 0.42) 34%, rgba(242, 236, 226, 0.18) 62%, rgba(240, 233, 221, 0) 88%); } .ji-hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 180px; padding-bottom: 5.5rem; } /* Numbered service index */ .ji-service-index { border-top: 1px solid var(--ji-hairline); } .ji-service-row { display: grid; grid-template-columns: 56px 1fr minmax(0, 230px); align-items: baseline; gap: 28px; padding: 22px 8px; border-bottom: 1px solid var(--ji-hairline); transition: background-color 0.25s ease, padding-left 0.25s ease; } .ji-service-row:hover { background: rgba(255, 255, 255, 0.34); padding-left: 20px; } .ji-service-row .ji-service-num { font-family: var(--wp--preset--font-family--display); font-size: 14px; letter-spacing: 0.1em; color: var(--wp--preset--color--primary); margin: 0; } .ji-service-row h2 { margin: 0; font-size: clamp(2.25rem, 5.4vw, 4.75rem); line-height: 1.04; text-shadow: 0 1px 20px rgba(246, 242, 234, 0.8); } .ji-service-row h2 a { text-decoration: none; } .ji-service-row .ji-service-note { margin: 0; font-size: 13px; line-height: 1.6; letter-spacing: 0.02em; color: #3F3833; text-align: right; text-wrap: pretty; text-shadow: 0 1px 12px rgba(246, 242, 234, 0.9); } .ji-hero-cta { margin-top: 2.75rem; } @media (max-width: 781px) { .ji-service-row { grid-template-columns: 40px 1fr; gap: 6px 18px; padding: 18px 4px; } .ji-service-row .ji-service-note { grid-column: 2; text-align: left; max-width: none; } .ji-hero-inner { padding-top: 140px; } } /* ============ Shared editorial pieces ============ */ /* Letterspaced uppercase eyebrow above titles */ .ji-eyebrow { font-size: var(--wp--preset--font-size--eyebrow); letter-spacing: 0.34em; text-transform: uppercase; color: var(--wp--preset--color--primary); margin: 0 0 1.625rem; } /* Italic Playfair lead line */ .ji-lead-italic { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: var(--wp--preset--font-size--x-large); line-height: 1.5; color: var(--wp--preset--color--primary); } /* Panel band (beige) */ .ji-panel { background: var(--wp--preset--color--muted); border-top: 1px solid var(--ji-hairline-soft); border-bottom: 1px solid var(--ji-hairline-soft); } /* Hairline-topped column, used for side notes */ .ji-rule-top { border-top: 1px solid var(--ji-hairline); padding-top: 1.5rem; } .ji-rule-left { border-left: 1px solid rgba(43, 38, 34, 0.15); padding-left: 2.75rem; } /* Pull quote with oversized bronze quote mark */ .ji-quote { padding-top: 2.375rem; } .ji-quote blockquote { margin: 0; border: 0; padding: 0; } .ji-quote blockquote p { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.24; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); text-wrap: pretty; margin: 0; } .ji-quote blockquote cite { display: block; margin-top: 1.625rem; font-family: var(--wp--preset--font-family--body); font-style: normal; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--primary); } .ji-quote-mark { font-family: var(--wp--preset--font-family--display); font-size: 64px; line-height: 0.8; color: var(--wp--preset--color--accent); margin: 0; } /* "What to expect" dash lists */ .ji-dash-list { list-style: none; padding: 0; margin: 0; } .ji-dash-list li { display: grid; grid-template-columns: 16px 1fr; gap: 14px; font-size: 15px; line-height: 1.65; color: var(--wp--preset--color--secondary); margin-bottom: 14px; } .ji-dash-list li::before { content: '—'; color: var(--wp--preset--color--accent); } /* Investment / price card */ .ji-investment { background: var(--wp--preset--color--muted); padding: 1.875rem 2rem; } .ji-investment .ji-investment-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; } .ji-investment h4 { margin: 0; } .ji-investment .ji-price { font-family: var(--wp--preset--font-family--display); font-size: 1.625rem; color: var(--wp--preset--color--contrast); white-space: nowrap; margin: 0; } .ji-investment .ji-retainer { font-size: 14px; line-height: 1.7; color: #5A5049; text-wrap: pretty; } /* Add-on pills (square, hairline) */ .ji-pills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .ji-pills li { border: 1px solid rgba(43, 38, 34, 0.2); padding: 9px 16px; font-size: 13px; letter-spacing: 0.04em; color: var(--wp--preset--color--secondary); } /* Numbered step columns */ .ji-step { border-top: 1px solid rgba(43, 38, 34, 0.2); padding-top: 1.375rem; } .ji-step .ji-step-num { font-family: var(--wp--preset--font-family--display); font-size: 15px; letter-spacing: 0.1em; color: var(--wp--preset--color--accent); margin: 0 0 0.875rem; } .ji-step p { font-size: 15px; line-height: 1.7; text-wrap: pretty; } /* Overlaid caption on a wide image */ .ji-image-quote { position: relative; } .ji-image-quote .ji-image-quote-text { font-family: var(--wp--preset--font-family--display); font-size: clamp(2.125rem, 4.6vw, 4rem); line-height: 1.12; letter-spacing: -0.015em; color: #FBF7F0; text-shadow: 0 2px 26px rgba(30, 22, 14, 0.55); max-width: 16ch; text-wrap: pretty; } /* Prev / next service links */ .ji-pagenav { border-top: 1px solid rgba(43, 38, 34, 0.12); } .ji-pagenav a { font-family: var(--wp--preset--font-family--display); font-size: 1.875rem; text-decoration: none; } /* ============ Footer ============ */ .site-footer { background: var(--wp--preset--color--contrast); color: #EFE7DA; } .site-footer .ji-logomark { display: inline-block; background: var(--wp--preset--color--base); border-color: transparent; } .site-footer p, .site-footer a { color: #EFE7DA; } .site-footer a { text-decoration: none; font-size: 15px; } .site-footer a:hover { color: var(--wp--preset--color--accent); } .site-footer .ji-footer-heading { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 0.375rem; } .site-footer .ji-footer-tagline { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.1875rem; line-height: 1.5; max-width: 32ch; } .ji-footer-legal { border-top: 1px solid rgba(239, 231, 218, 0.18); padding-top: 1.25rem; } .ji-footer-legal p, .ji-footer-legal a { font-size: 12px; letter-spacing: 0.1em; color: rgba(239, 231, 218, 0.6); } /* ============ Contact form (Info and contact) ============ */ .ji-form label { display: flex; flex-direction: column; gap: 9px; } .ji-form .ji-field-label, .ji-form label > span:first-child { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #5A5049; } .ji-form input[type="text"], .ji-form input[type="email"], .ji-form input[type="tel"], .ji-form input[type="date"], .ji-form select { background: transparent; border: 0; border-bottom: 1px solid rgba(43, 38, 34, 0.3); border-radius: 0; padding: 10px 2px; font-family: var(--wp--preset--font-family--body); font-size: 16px; color: var(--wp--preset--color--contrast); outline: none; width: 100%; } .ji-form textarea { background: transparent; border: 1px solid rgba(43, 38, 34, 0.3); border-radius: 0; padding: 14px; font-family: var(--wp--preset--font-family--body); font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--contrast); outline: none; resize: vertical; width: 100%; } .ji-form input:focus, .ji-form select:focus { border-bottom-color: var(--wp--preset--color--primary); } .ji-form textarea:focus { border-color: var(--wp--preset--color--primary); } .ji-form input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--wp--preset--color--primary); } .ji-form button[type="submit"], .ji-form input[type="submit"] { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border: 0; border-radius: 0; padding: 16px 40px; font-family: var(--wp--preset--font-family--body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; } .ji-form button[type="submit"]:hover, .ji-form input[type="submit"]:hover { background: var(--wp--preset--color--primary); color: #FFFFFF; } /* Meet the Maker: this heading sits in a narrow nested column next to the portrait, so the global h1 size (up to 92px) breaks mid-word. Use the size from the design comp instead. Written as CSS rather than a pattern change so it also fixes pages that were already created. */ .wp-block-columns:has(> .ji-arch) h1, .wp-block-column > .wp-block-columns h1 { font-size: clamp(2.375rem, 4.4vw, 3.625rem); line-height: 1.04; } /* Arch-masked portrait (Meet the Maker) */ .ji-arch img { width: 100%; height: auto; border-radius: 50vw 50vw 0 0; } /* ============ Catalog page intro ============ */ /* The plugin's category page ignores WordPress page content, so views/prs/categories.php renders it above the grid inside .ji-catalog-intro. Content there is ordinary blocks, so the client edits it like any page. */ .ji-catalog-intro { margin-bottom: var(--wp--preset--spacing--50); } /* Photo bleeding to the page edge beside a text column */ .ji-split .wp-block-columns { align-items: stretch; } .ji-split-media, .ji-split-media figure, .ji-split-media img { height: 100%; margin: 0; } .ji-split-media img { width: 100%; object-fit: cover; min-height: 420px; } .ji-split-text { padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40) clamp(1.5rem, 4vw, 4rem); } .ji-split-text h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); margin-bottom: var(--wp--preset--spacing--30); } /* Three "How it works" cards on the beige surface */ .ji-step-card { background: var(--wp--preset--color--muted); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); text-align: center; } .ji-step-card h3 { font-family: var(--wp--preset--font-family--body); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; margin: 0 0 0.875rem; } .ji-step-card p { font-size: 0.9375rem; line-height: 1.7; text-wrap: pretty; } @media (max-width: 781px) { .ji-split-media img { min-height: 260px; } .ji-split-text { padding: var(--wp--preset--spacing--30) clamp(1.25rem, 4vw, 3rem); } } /* ============ Rental Collection (PRS storefront pages) ============ */ /* Align the plugin's storefront containers with the theme's content width. The plugin pins several wrappers to max-width:1400px independently (.prs-categories, .prs-products, .prs-filter-container, .prs-search-results) plus a Bootstrap-style .prs-container ladder, so a storefront page rendered 1400px wide while the page's own content sat at 1144px: two competing widths on one page. All of them are re-pinned to the theme's contentSize, read from WordPress's own global style variable so this stays correct if the width changes in theme.json. Specificity is `html body .x` to outrank the plugin's `body .x` regardless of stylesheet load order; horizontal padding only, so the plugin keeps its own vertical rhythm. */ html body .prs-container.prs-container, html body .content_wrap.content_wrap, html body .prs-categories.prs-categories, html body .prs-products.prs-products, html body .prs-filter-container.prs-filter-container, html body .prs-search-results.prs-search-results { --ji-gutter: clamp(1.25rem, 4vw, 3rem); box-sizing: border-box; width: 100%; max-width: calc(var(--wp--style--global--content-size, 1144px) + (2 * var(--ji-gutter))); padding-left: var(--ji-gutter); padding-right: var(--ji-gutter); margin-left: auto; margin-right: auto; } /* ...but only once per page. The plugin nests some of those same wrappers inside each other (.prs-products lives inside .prs-category-detail .prs-container on a category page), so the rule above applied its gutter twice and the product grid sat 48px inside the page title. Any wrapper that already has a padded ancestor drops its own gutter and width cap. */ html body .prs-container .prs-categories.prs-categories, html body .prs-container .prs-products.prs-products, html body .prs-container .prs-filter-container.prs-filter-container, html body .prs-container .prs-search-results.prs-search-results, html body .content_wrap .prs-categories.prs-categories, html body .content_wrap .prs-products.prs-products { max-width: none; padding-left: 0; padding-right: 0; } /* The plugin also insets its own section headers by 20px and caps them at 1500px, which put the category title on a third left edge. Flush them to the container so title, intro and grid share one margin. */ html body .prs-category-header.prs-category-header, html body .prs-products-header.prs-products-header, html body .prs-search-header.prs-search-header { max-width: none; padding-left: 0; padding-right: 0; } /* The intro renders inside the same flow, so keep one consistent rhythm between it and the grid rather than stacking both margins. */ .ji-catalog-intro > :last-child { margin-bottom: 0; } .ji-catalog-intro + .prs-categories, .ji-catalog-intro ~ .prs-container { margin-top: 0; } /* The plugin ships its own visual language (Inter, rounded corners, card shadows, a 1400px grid) and defends it with two-class selectors. Every rule below therefore uses `html body` plus a repeated class name so it outranks the plugin regardless of stylesheet order, without !important. Goal: the storefront reads as the same publication as the rest of the site — Playfair display, Jost UI, hairlines, square corners. ============================================================ */ /* ---- Typography baseline ---- */ html body .prs-container.prs-container, html body .prs-category-detail.prs-category-detail, html body .prs-product-detail.prs-product-detail { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--secondary); } html body .prs-category-title.prs-category-title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(2.125rem, 4vw, 3.25rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--wp--preset--color--contrast); /* The plugin fills these headings with a clipped linear-gradient (-webkit-background-clip:text + transparent text-fill), which paints over `color` entirely — the heading rendered near-black instead of the theme ink. Unset the whole mechanism, not just the colour. */ background-image: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; } html body .prs-category-description.prs-category-description, html body .prs-product-detail__desc.prs-product-detail__desc { font-family: var(--wp--preset--font-family--body); font-size: 1rem; line-height: 1.8; color: var(--wp--preset--color--secondary); } html body .prs-product-detail__desc.prs-product-detail__desc { margin-top: 2rem; } /* ---- Category tiles ---- */ html body .prs-category.prs-category { background: transparent; border: 0; border-radius: 0; box-shadow: none; text-decoration: none; } html body .prs-category__image.prs-category__image { display: block; overflow: hidden; background: #ffffff; border-radius: 0; aspect-ratio: 1 / 1; } html body .prs-category__image.prs-category__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } html body .prs-category.prs-category:hover .prs-category__image img { transform: scale(1.04); } html body .prs-category__name.prs-category__name { display: block; margin-top: 1rem; font-family: var(--wp--preset--font-family--display); font-size: 1.1875rem; font-weight: 500; letter-spacing: 0; text-align: center; color: var(--wp--preset--color--contrast); transition: color 0.25s ease; } html body .prs-category.prs-category:hover .prs-category__name { color: var(--wp--preset--color--primary); } /* ---- Product grid ---- */ html body .prs-product.prs-product { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; text-decoration: none; transition: none; } html body .prs-product.prs-product:hover { transform: none; box-shadow: none; } html body .prs-product__image.prs-product__image { display: block; overflow: hidden; background: #ffffff; border-radius: 0; aspect-ratio: 1 / 1; } html body .prs-product__image.prs-product__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } html body .prs-product.prs-product:hover .prs-product__image img { transform: scale(1.04); } /* The plugin wraps the name and price in a white panel with 15px of padding, which reads as a card sitting on the cream page. The category tiles set the house style: caption text directly on the page background, flush with the image edge, separated by space rather than a container. */ html body .prs-product__meta.prs-product__meta { display: block; background: transparent; padding: 1.125rem 0 0.25rem; text-align: left; } html body .prs-product__title.prs-product__title { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--wp--preset--color--contrast); transition: color 0.25s ease; } /* Hovering a card turns the name the plugin's primary blue, which is the one colour that never appears anywhere else on this site. Bronze instead, to match the category tiles. */ html body .prs-product.prs-product:hover .prs-product__title { color: var(--wp--preset--color--accent); } html body .prs-product__price.prs-product__price, html body .prs-product__price-row.prs-product__price-row { font-family: var(--wp--preset--font-family--body); font-size: 0.875rem; letter-spacing: 0.02em; color: #5A5049; } html body .prs-combo-badge.prs-combo-badge { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); border-radius: 0; font-family: var(--wp--preset--font-family--body); font-size: 10px; letter-spacing: 0.16em; padding: 3px 7px; } /* ---- Product detail ---- */ /* The media panel ships as a floating card: 24px radius, a 40px drop shadow, an inset white ring and a cool grey fill. Flatten it to match the category tiles — square, no shadow, plain white behind transparent PNGs. */ html body .prs-product-detail__media.prs-product-detail__media, html body .prs-slider.prs-slider { background: #ffffff; border: 0; border-radius: 0; box-shadow: none; } html body .prs-product-detail__media.prs-product-detail__media img, html body .prs-slider.prs-slider img { border-radius: 0; } html body .prs-product-detail__title.prs-product-detail__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(1.75rem, 2.2vw, 2.125rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); background-image: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; } html body .prs-product-detail__price.prs-product-detail__price { font-family: var(--wp--preset--font-family--display); font-size: 1.625rem; color: var(--wp--preset--color--contrast); } /* The add-to-cart form is shipped as a white rounded panel (16px radius, border, drop shadow) with 24px of side padding. Two problems: the padding pushed the title and price off the description's left edge, and the panel is the last white card left on a page whose image panel and product tiles are already flat. Flatten it — the hairline above the button carries the grouping, so the panel isn't doing any work the theme needs. */ html body .prs-add-to-cart-form.prs-add-to-cart-form, html body .prs-product-detail__info.prs-product-detail__info { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; } /* The photo carries its own 1px border, which now sits 1px proud of the flattened panel on each side. */ html body .prs-product-detail__media.prs-product-detail__media img { border: 0; max-width: 100%; } html body .prs-product-detail__actions.prs-product-detail__actions { border-top: 1px solid var(--ji-hairline); padding-top: 1.5rem; margin-top: 1.5rem; } /* ---- Buttons: match the theme's button element ---- */ html body .prs-btn.prs-btn, html body .prs-btn-success.prs-btn-success, html body .prs-check-availability.prs-check-availability, html body .prs-add-to-cart.prs-add-to-cart, html body .prs-check-now.prs-check-now, html body .prs-cart-button.prs-cart-button { font-family: var(--wp--preset--font-family--body); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 0; padding: 1rem 2.25rem; background: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); transition: background-color 0.25s ease, color 0.25s ease; } html body .prs-btn.prs-btn:hover, html body .prs-btn-success.prs-btn-success:hover, html body .prs-check-availability.prs-check-availability:hover, html body .prs-add-to-cart.prs-add-to-cart:hover, html body .prs-check-now.prs-check-now:hover, html body .prs-cart-button.prs-cart-button:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #ffffff; } /* Back link reads as a quiet text link, not a button */ html body .prs-btn-back.prs-btn-back { background: transparent; border: 0; padding: 0; color: var(--wp--preset--color--secondary); letter-spacing: 0.14em; } html body .prs-btn-back.prs-btn-back:hover { background: transparent; color: var(--wp--preset--color--primary); } /* ---- Forms: availability, dates, sort ---- */ html body .prs-form-group.prs-form-group input, html body .prs-form-group.prs-form-group select, html body .prs-date-group.prs-date-group input, html body .prs-time-group.prs-time-group select, html body .prs-sort-bar__select.prs-sort-bar__select { font-family: var(--wp--preset--font-family--body); border-radius: 0; border: 0; border-bottom: 1px solid rgba(43, 38, 34, 0.3); background: transparent; padding: 10px 2px; color: var(--wp--preset--color--contrast); } html body .prs-date-label.prs-date-label, html body .prs-location-label.prs-location-label, html body .prs-fulfillment-title.prs-fulfillment-title { font-family: var(--wp--preset--font-family--body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #5A5049; } html body .prs-toggle-btn.prs-toggle-btn { border-radius: 0; font-family: var(--wp--preset--font-family--body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } /* ---- Modal ---- */ html body .prs-modal-content.prs-modal-content { border-radius: 0; background: var(--wp--preset--color--base); border: 1px solid var(--ji-hairline); } html body .prs-modal-title.prs-modal-title, html body .prs-item-modal__name.prs-item-modal__name { font-family: var(--wp--preset--font-family--display); font-weight: 400; color: var(--wp--preset--color--contrast); } /* ---- Empty states ---- */ html body .prs-empty.prs-empty { background: var(--wp--preset--color--muted); border-radius: 0; font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--secondary); } /* ---- Cart button floating action ---- */ html body .prs-cart-fab.prs-cart-fab { border-radius: 0; background: var(--wp--preset--color--contrast); } /* ============ Starter section-pack overrides ============ */ /* core/css/sections.css ships rounded, card-style defaults. This design is hairline-and-square, so square everything off and re-tune the pieces we actually use (FAQ, gallery, quote band). */ .sp-card, .sp-quote-card, .sp-faq details, .sp-citylinks li, .sp-step-number { border-radius: 0 !important; } .sp-faq details { background: transparent; border: 0; border-bottom: 1px solid var(--ji-hairline); padding: 1.375rem 0; margin-bottom: 0; } .sp-faq summary { font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.005em; } .sp-faq details[open] summary { color: var(--wp--preset--color--primary); } .sp-quote-card { background: transparent; border: 0; border-top: 1px solid var(--ji-hairline); padding: 1.5rem 0 0; } .sp-quote-band { background: var(--wp--preset--color--muted); } .sp-quote-band blockquote p { font-family: var(--wp--preset--font-family--display); font-style: italic; } /* ============ Interior page pieces ============ */ /* Centered page intro (eyebrow + title + lead) */ .ji-page-intro { text-align: center; } /* The intro paragraph used to be capped at 60ch and centred in the content column, which left it floating off-axis from the heading above it. It now runs the full content width like every other block on the page. Shared by the FAQ, Styling + Fabrication and Which-service intros. */ .ji-page-intro > p:last-child { margin-left: 0; margin-right: 0; } /* Offer article: media column fills its full height */ .ji-offer-media, .ji-offer-media figure, .ji-offer-media img { height: 100%; margin: 0; } .ji-offer-media img { width: 100%; object-fit: cover; min-height: 460px; } /* Product cards (Sound Memoirs phone collection) */ .ji-product-card figure { margin: 0; background: #FFFFFF; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; } .ji-product-card figure img { width: 100%; height: 100%; object-fit: contain; } .ji-product-card .ji-product-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 1rem; } .ji-product-card .ji-product-row h3 { font-size: 1.1875rem; font-weight: 500; margin: 0; } .ji-product-card .ji-product-price { font-size: 14px; color: #5A5049; margin: 0; } .ji-product-card .ji-product-note { font-size: 13px; line-height: 1.6; color: #5A5049; margin: 0.375rem 0 0; } /* Outline button variant (Add to bag) */ .ji-btn-outline .wp-block-button__link { background: transparent; border: 1px solid rgba(43, 38, 34, 0.28); color: var(--wp--preset--color--contrast); padding: 13px 18px; font-size: 11px; letter-spacing: 0.18em; width: 100%; text-align: center; } .ji-btn-outline .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } /* "Which service is right for me?" comparison blocks */ .ji-choice { border-top: 1px solid var(--ji-hairline); padding-top: 1.75rem; } .ji-choice .ji-choice-num { font-family: var(--wp--preset--font-family--display); font-size: 14px; letter-spacing: 0.1em; color: var(--wp--preset--color--primary); margin: 0 0 0.75rem; } .ji-choice h3 { margin: 0 0 0.5rem; font-size: 1.75rem; } .ji-choice .ji-choice-for { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.0625rem; line-height: 1.5; color: var(--wp--preset--color--primary); margin: 0 0 1rem; } .ji-choice .ji-choice-price { font-size: 14px; letter-spacing: 0.04em; color: #5A5049; margin-top: 1rem; } /* Wide image with an overlaid caption (Sound Memoirs). Same construction as the hero: absolute media layer, gradient scrim, content above. Image stays a normal image block so it can be swapped in the editor. */ .ji-image-quote { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; } .ji-image-quote-media { position: absolute; inset: 0; margin: 0 !important; max-width: none !important; z-index: 0; } .ji-image-quote-media figure, .ji-image-quote-media img { width: 100%; height: 100%; margin: 0; object-fit: cover; } .ji-image-quote::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(40, 30, 20, 0.42) 0%, rgba(40, 30, 20, 0.12) 46%, rgba(40, 30, 20, 0) 70%); } .ji-image-quote-inner { position: relative; z-index: 2; width: 100%; } @media (max-width: 781px) { .ji-image-quote { min-height: 420px; } .ji-offer-media img { min-height: 320px; } } /* ============ Cart / quote request ============ */ /* The cart ships in the plugin's own palette: Inter, #eee hairlines, a grey card for the summary, green action buttons, purple coupon controls and a blue event bar. Everything below re-skins it onto the theme's language without touching plugin files. Same specificity trick as the storefront pages: `html body` plus a repeated class, so it outranks the plugin's `body .prs-cart-container .x` rules regardless of load order. */ /* The plugin's cart wrappers are content-box, so their own horizontal padding is added on top of width:100% and the page scrolled sideways by ~30px on a phone. Border-box first, then everything below can set padding freely. */ html body .prs-cart-container.prs-cart-container, html body .prs-cart-container.prs-cart-container *, html body .prs-event-bar.prs-event-bar, html body .prs-event-bar.prs-event-bar * { box-sizing: border-box; } html body .prs-cart-title.prs-cart-title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(2.125rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--wp--preset--color--contrast); background-image: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; } html body .addons-container.addons-container h1 { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.75rem; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); border-bottom: 1px solid var(--ji-hairline); padding-bottom: 0.875rem; margin-bottom: 1.5rem; } /* ---- Hairlines: #eee / #e5e5e5 read blue-grey against cream ---- */ html body .prs-cart-left.prs-cart-left { border-top-color: var(--ji-hairline); } html body .prs-cart-item.prs-cart-item, html body .addon-item.addon-item { border-bottom-color: var(--ji-hairline); } /* ---- Line items ---- */ html body .prs-cart-img.prs-cart-img img { border-radius: 0; } html body .prs-cart-info.prs-cart-info h3 { font-family: var(--wp--preset--font-family--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--wp--preset--color--contrast); } html body .prs-cart-item-link.prs-cart-item-link { color: var(--wp--preset--color--contrast); text-decoration: none; transition: color 0.25s ease; } html body .prs-cart-item-link.prs-cart-item-link:hover { color: var(--wp--preset--color--accent); text-decoration: none; } html body .prs-cart-info.prs-cart-info p, html body .prs-cart-options.prs-cart-options, html body .addon-price.addon-price { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--secondary); } html body .prs-item-total.prs-item-total, html body .addon-total.addon-total { font-family: var(--wp--preset--font-family--body); font-weight: 500; color: var(--wp--preset--color--contrast); } html body .prs-cart-combo.prs-cart-combo, html body .text-green.text-green { color: var(--wp--preset--color--accent); } /* Remove control: a grey circle that turns red. Square hairline that fills with ink instead — the palette has no red and doesn't need one here. */ html body .remove-btn.remove-btn { background: transparent; border: 1px solid var(--ji-hairline); border-radius: 0; color: var(--wp--preset--color--secondary); transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } html body .remove-btn.remove-btn:hover { background-color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } /* ---- Summary panel: grey rounded card with a shadow becomes a hairline box, so it still reads as a panel without the card idiom ---- */ html body .prs-cart-summary.prs-cart-summary { background: transparent; border: 1px solid var(--ji-hairline); border-radius: 0; box-shadow: none; padding: 2rem; } html body .prs-cart-summary.prs-cart-summary h2 { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.375rem; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); } html body .prs-cart-summary.prs-cart-summary .prs-summary-item, html body .prs-cart-summary.prs-cart-summary .prs-summary-extra-fee { align-items: baseline; font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--contrast); margin: 0.5rem 0; } /* Row labels were bold 700; uppercase micro instead, matching the form labels used elsewhere on the site. */ html body .prs-cart-summary.prs-cart-summary .prs-summary-item span:first-child, html body .prs-cart-summary.prs-cart-summary .prs-summary-extra-fee span:first-child { font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--secondary); } html body .prs-summary-total.prs-summary-total { align-items: baseline; border-top: 1px solid var(--ji-hairline); font-family: var(--wp--preset--font-family--body); font-weight: 400; color: var(--wp--preset--color--contrast); } html body .prs-summary-total.prs-summary-total span:first-child { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--secondary); } html body .prs-summary-total.prs-summary-total span:last-child { font-family: var(--wp--preset--font-family--display); font-size: 1.375rem; } /* ---- Actions: green pills become the site's square ink button ---- */ html body .checkout-btn.checkout-btn, html body .request-quote-btn.request-quote-btn, html body .request-quote-btn--primary.request-quote-btn--primary { display: block; width: 100%; box-sizing: border-box; text-align: center; font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; padding: 16px 24px; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--contrast); border-radius: 0; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } html body .checkout-btn.checkout-btn:hover, html body .request-quote-btn.request-quote-btn:hover, html body .request-quote-btn--primary.request-quote-btn--primary:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); } html body .checkout-btn.checkout-btn.disabled, html body .checkout-btn.checkout-btn:disabled { background: var(--wp--preset--color--muted); border-color: var(--wp--preset--color--muted); color: var(--wp--preset--color--secondary); } html body .prs-continue-shopping.prs-continue-shopping { font-family: var(--wp--preset--font-family--body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--accent); text-decoration: none; margin-top: 1.125rem; transition: color 0.25s ease; } html body .prs-continue-shopping.prs-continue-shopping:hover { color: var(--wp--preset--color--contrast); text-decoration: none; } html body .prs-cart-summary.prs-cart-summary .prs-or-divider { font-family: var(--wp--preset--font-family--body); font-weight: 400; letter-spacing: 0.18em; color: var(--wp--preset--color--secondary); } html body .prs-cart-summary.prs-cart-summary .prs-or-divider::before, html body .prs-cart-summary.prs-cart-summary .prs-or-divider::after { background: var(--ji-hairline); } /* ---- Coupon: purple link + purple pill button ---- */ html body .prs-coupon-toggle.prs-coupon-toggle { font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent); } html body .prs-coupon-toggle.prs-coupon-toggle:hover { color: var(--wp--preset--color--contrast); } html body .prs-coupon-label.prs-coupon-label { font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--secondary); } html body .prs-cart-summary.prs-cart-summary .prs-coupon-input { font-family: var(--wp--preset--font-family--body); background: transparent; border: 1px solid var(--ji-hairline); border-radius: 0; padding: 11px 12px; color: var(--wp--preset--color--contrast); } html body .prs-cart-summary.prs-cart-summary .prs-coupon-input:focus { border-color: var(--wp--preset--color--accent); outline: none; } html body .prs-coupon-btn.prs-coupon-btn { font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--contrast); border-radius: 0; padding: 11px 18px; transition: background-color 0.25s ease, border-color 0.25s ease; } html body .prs-coupon-btn.prs-coupon-btn:hover:not(:disabled) { background-color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } html body .prs-coupon-btn.prs-coupon-btn:disabled { background-color: var(--wp--preset--color--muted); border-color: var(--wp--preset--color--muted); color: var(--wp--preset--color--secondary); } /* ---- Add-on controls ---- */ html body .addons-container.addons-container select, html body .addons-container.addons-container input[type="text"], html body .addons-container.addons-container input[type="number"] { font-family: var(--wp--preset--font-family--body); background-color: transparent; border: 1px solid var(--ji-hairline); border-radius: 0; padding: 11px 12px; color: var(--wp--preset--color--contrast); } html body .addon-details.addon-details h3 { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1rem; color: var(--wp--preset--color--contrast); } /* ---- Event bar: light-blue info strip with a blue outline button ---- */ html body .prs-event-bar.prs-event-bar { background-color: transparent; border: 1px solid var(--ji-hairline); border-radius: 0; padding: 14px 18px; font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--secondary); } html body .prs-event-bar.prs-event-bar svg { color: var(--wp--preset--color--accent); } html body .prs-event-bar__date.prs-event-bar__date, html body .prs-event-bar__mode.prs-event-bar__mode { font-weight: 500; color: var(--wp--preset--color--contrast); } html body .prs-event-bar__sep.prs-event-bar__sep { color: var(--ji-hairline); } html body .prs-event-bar__change.prs-event-bar__change { background: transparent; border: 1px solid var(--ji-hairline); border-radius: 0; font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--contrast); padding: 8px 16px; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } html body .prs-event-bar__change.prs-event-bar__change:hover { background-color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } /* The two columns are sized 60% + 30% with a 20px gap, so ~10% of the row is never claimed and the summary's right edge stopped short of the content edge. Let the item list take the remaining space and give the summary a real width instead of a percentage. Scoped above the plugin's 768px breakpoint — below that it stacks the columns, and a flex-basis in a column container would set heights. */ @media (min-width: 769px) { html body .prs-cart-container.prs-cart-container { gap: clamp(1.5rem, 3vw, 3rem); align-items: flex-start; } html body .prs-cart-container.prs-cart-container .prs-cart-left { flex: 1 1 auto; min-width: 0; max-width: none; } html body .prs-cart-container.prs-cart-container .prs-cart-summary { flex: 0 0 clamp(17.5rem, 32%, 23.75rem); max-width: none; } } /* ============ Header cart counter ============ */ /* The plugin keeps the authoritative count (it renders a floating cart FAB and exposes window.prsUpdateCartCount). assets/js/cart-count.js wraps that hook to mirror the count into the header icon; this is just the badge. */ .ji-cart-link { position: relative; display: inline-flex; align-items: center; } .ji-cart-count { position: absolute; top: -7px; right: -9px; display: none; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--body); font-size: 9px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; } .ji-cart-link--has-items .ji-cart-count { display: inline-flex; } /* ============ Enquiry form: notice + honeypot ============ */ /* The honeypot has to be reachable by a bot parsing the HTML but invisible and unfocusable for people, so it is moved off-canvas rather than hidden with display:none (which some bots skip). */ .ji-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .ji-form__notice { margin: 0 0 2rem; padding: 1rem 1.25rem; max-width: 620px; border-left: 2px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--body); font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--secondary); } .ji-form__notice--error { border-left-color: var(--wp--preset--color--contrast); }