/* ============================================================ PAC Store Stylesheet -- inapta.org / APTA Indiana PAC catalog Scope: page-id-18030 ("APTA Indiana PAC -- Donate, Register & Sponsor") Purpose: card-grid + filter-row styling for the WooCommerce [products] shortcode grid on the PAC store page. All selectors are scoped under .page-id-18030 so this file is safe to load site-wide via without affecting other product grids (e.g. Fall Conference registration pages). Card look-and-feel matched to the vc_cta3 "outline" card style used on https://inapta.org/events/2026-fall-conference/: - border #f0f0f0 / 3px, radius 5px - Roboto font throughout (title 400 weight, not bold) - 20-28px inset padding on all sides (not edge-to-edge image) - button background-image gradient overlay + hover shift, copied exactly from the reference page's .vc_btn3-style-custom rule (linear-gradient darken overlay, background-position shifts 0/-100% -> 0/100% on hover) NOTE: the reference vc_cta3-style-outline card has NO box-shadow in its actual CSS. The subtle shadow below is a deliberate design addition, not a match to the reference -- remove if unwanted. Multiple theme rules fight this and all need explicit !important overrides here, not just higher specificity: 1. #upside-single-content h2 / #upside-page-content h2 -- ID selector, font-weight:700 + font-family:Roboto 2. default button styles -- font-family:Raleway 3. .woocommerce * { border-color:#777 !important; } -- blanket !important on every element in .woocommerce scope 4. #main-content a { text-decoration:underline !important; } fixed by prefixing with body.page-id-18030 #main-content (note the order -- .page-id-18030 is a class on , an ANCESTOR of #main-content, not a descendant) Card uses display:flex; flex-direction:column so the "Add to cart" button can be pinned to the bottom via margin-top:auto, keeping all buttons in a row aligned regardless of title length. CSS Grid's default row stretch already makes every card in a row equal height, so this is enough -- no JS needed. UNITS: converted to rem throughout ahead of the sitewide design refresh. IMPORTANT -- this theme sets to font-size:62.5% SITE-WIDE (10px root, not the browser default 16px), a legacy trick from the old "1rem = 10px, just move the decimal" pattern. All rem values below are scaled against that ACTUAL 10px root (divide intended px by 10, not 16) so the rendered sizes match what was already approved -- e.g. font-size:4.4rem renders at 44px (was 2.75rem under a false 16px-root assumption in an earlier pass, which rendered at only 27.5px -- caught by comparing computed getComputedStyle output against the intended pixel values, not by trusting the rem math alone). Anyone reusing these values elsewhere on the site MUST check that page's actual root font-size first -- it is not guaranteed to be 16px just because it's not this page. Border WIDTHS are kept in px on purpose -- hairline borders (2-3px) are meant to stay crisp regardless of root font-size. Media query breakpoints use em, NOT scaled by the 10px root -- per spec, em/rem inside a media query condition resolves against the browser's default/initial font size (typically 16px), ignoring any page-level html{font-size} override. So 56.25em and 37.5em below correctly mean 900px/600px regardless of this page's 10px root. STATUS: starter file. Once the design is finalized, roll these rules into the upside-child theme's style.css -- keep the .page-id-18030 prefix if the styling should stay page-specific, or drop it if it should apply to every WooCommerce grid. If the sitewide refresh normalizes the root to 16px (recommended -- the 62.5% trick is legacy and no longer necessary now that rem is well-supported), ALL rem values in this file will need to be divided by 1.6 to keep the same rendered sizes. ============================================================ */ /* --- Filter row: item count (left) + filter select (right) --- */ .page-id-18030 .pac-filter-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem;margin:2.4rem 0 0.8rem;font-family:"Roboto",Arial,sans-serif;} .page-id-18030 .pac-item-count{font-size:1.6rem;color:#555;} .page-id-18030 .pac-filter-select{border:1px solid #949494;color:#1b1b1b;background-color:#fff;border-radius:0.4rem;height:4.8rem;padding:0 3.2rem 0 1.6rem;font-size:1.6rem;font-weight:400;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231b1b1b' fill-rule='evenodd' d='M8.7 11.7a1 1 0 0 1-1.4 0l-6-6 1.4-1.4L8 9.58l5.3-5.3 1.4 1.42-6 6Z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.6rem center;background-size:1.6rem;transition:border-color .15s ease,box-shadow .15s ease;} .page-id-18030 .pac-filter-select:hover{border-color:#1b1b1b;} .page-id-18030 .pac-filter-select:focus{outline:none;border-color:#1b1b1b;box-shadow:0 0 0 0.2rem rgba(27,27,27,0.15);} .page-id-18030 ul.products li.product.pac-hidden{display:none !important;} /* --- Card grid (matched to vc_cta3 outline card style) --- */ .page-id-18030 ul.products.columns-3::before, .page-id-18030 ul.products.columns-3::after{display:none !important;content:none !important;} .page-id-18030 ul.products.columns-3{display:grid !important;grid-template-columns:repeat(3,1fr);gap:2.4rem;list-style:none;margin:0;padding:0;} .page-id-18030 ul.products li.product{display:flex;flex-direction:column;background:#fff;border:3px solid #f0f0f0;border-color:#f0f0f0 !important;border-radius:0.5rem;overflow:hidden;box-shadow:0 0.2rem 0.8rem rgba(0,0,0,0.06);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;padding:2rem;text-align:left;float:none !important;width:100% !important;max-width:none !important;box-sizing:border-box;margin:0 !important;font-family:"Roboto",Arial,sans-serif;} .page-id-18030 ul.products li.product:hover{border-color:#357ebf !important;box-shadow:0 0.4rem 1.4rem rgba(0,0,0,0.1);transform:translateY(-0.3rem);} .page-id-18030 ul.products li.product a.woocommerce-LoopProduct-link, body.page-id-18030 #main-content ul.products li.product a.woocommerce-LoopProduct-link{display:block;text-decoration:none !important;color:inherit;} .page-id-18030 ul.products li.product a.woocommerce-LoopProduct-link:hover, .page-id-18030 ul.products li.product a.woocommerce-LoopProduct-link:focus, body.page-id-18030 #main-content ul.products li.product a.woocommerce-LoopProduct-link:hover, body.page-id-18030 #main-content ul.products li.product a.woocommerce-LoopProduct-link:focus{text-decoration:none !important;} .page-id-18030 .woocommerce ul.products li.product a img, .page-id-18030 ul.products li.product a img{display:block !important;width:100%;aspect-ratio:1/1;object-fit:cover;height:auto;border-radius:0.4rem;margin:0 0 1.6rem;} .page-id-18030 ul.products li.product h2.woocommerce-loop-product__title{font-size:2.2rem;line-height:1.15;font-weight:400 !important;font-family:"Roboto",Arial,sans-serif !important;color:#357ebf;padding:0;margin:0 0 1rem;text-decoration:none !important;} .page-id-18030 ul.products li.product .price{display:block;padding:0;margin:0 0 1.6rem;font-weight:700;font-size:2.8rem;color:#222;font-family:"Roboto",Arial,sans-serif;text-decoration:none !important;} .page-id-18030 ul.products li.product a.button, body.page-id-18030 #main-content ul.products li.product a.button{display:flex;align-items:center;justify-content:center;width:100%;height:auto !important;box-sizing:border-box;margin-top:auto;margin-left:0;margin-right:0;margin-bottom:0;padding:1.4rem 2rem;text-align:center;white-space:nowrap;line-height:1.4;background-color:#1e73be !important;background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1)) !important;background-repeat:repeat-x;background-size:200%;background-position:0 -100%;color:#fff !important;border-radius:0.5rem;font-size:1.6rem;font-weight:400;font-family:"Roboto",Arial,sans-serif !important;border:none !important;text-decoration:none !important;transition:background-position .2s ease,background-color .2s ease;} .page-id-18030 ul.products li.product a.button:hover, .page-id-18030 ul.products li.product a.button:focus, body.page-id-18030 #main-content ul.products li.product a.button:hover, body.page-id-18030 #main-content ul.products li.product a.button:focus{background-color:#175a94 !important;background-position:0 100%;text-decoration:none !important;} .page-id-18030 ul.products li.product a.button::after{content:"\f105";font-family:"FontAwesome";font-weight:normal;margin-left:1rem;} @media (max-width:56.25em){.page-id-18030 ul.products.columns-3{grid-template-columns:repeat(2,1fr);}} @media (max-width:37.5em){.page-id-18030 ul.products.columns-3{grid-template-columns:1fr;}.page-id-18030 .pac-filter-row{flex-direction:column;align-items:stretch;}.page-id-18030 .pac-filter-select{width:100%;}}