diff --git a/theme/404.php b/theme/404.php new file mode 100644 index 0000000..17b7406 --- /dev/null +++ b/theme/404.php @@ -0,0 +1,18 @@ + + +
+
ERROR 404 · PAGE NOT FOUND · MISFILED
+

+ This page
has been
parked in the lot. +

+

+ The page you're looking for has been circled back on indefinitely. + Try navigating from the top, or use the search. +

+
+ ← Back to shop + Browse products +
+
+ + diff --git a/theme/archive.php b/theme/archive.php new file mode 100644 index 0000000..e4e7109 --- /dev/null +++ b/theme/archive.php @@ -0,0 +1,69 @@ + + +
+
FORM 09 · THE MEMO · WEEKLY DISPATCH
+
+ The Memo.
+ Dispatches from the chronically employed. +
+
PUBLISHED WEEKLY · CIRCULATE TO YOUR DEPARTMENT · VOL. 4 · NO.
+
+ +
+ + name : 'Feature'; + $wc = max(1, ceil(str_word_count(strip_tags(get_the_content())) / 200)); + ?> + +
+ <?php the_title_attribute(); ?> +
+
+
· · MIN
+

+

+ Read dispatch → +
+ + + +
+ name : 'Notes'; + $wc2 = max(1, ceil(str_word_count(strip_tags(get_the_content())) / 200)); + ?> + +
+ <?php the_title_attribute(); ?> +
+
· · MIN
+
+ + +
+ +
+ 2]); ?> +
+ + + +

+ Nothing dispatched yet. The memo is delayed. (Again.) +

+ +
+ + diff --git a/theme/footer.php b/theme/footer.php new file mode 100644 index 0000000..ee42a90 --- /dev/null +++ b/theme/footer.php @@ -0,0 +1,4 @@ + + + + diff --git a/theme/front-page.php b/theme/front-page.php new file mode 100644 index 0000000..b87d192 --- /dev/null +++ b/theme/front-page.php @@ -0,0 +1,349 @@ + 6, + 'status' => 'publish', + 'orderby' => 'popularity', + 'order' => 'DESC', +]); + +// Fetch product categories +$categories = get_terms([ + 'taxonomy' => 'product_cat', + 'hide_empty' => true, + 'parent' => 0, + 'number' => 4, + 'exclude' => [get_option('default_product_cat')], +]); + +// Fetch recent blog posts +$blog_posts = get_posts([ + 'numberposts' => 3, + 'post_status' => 'publish', + 'post_type' => 'post', +]); + +// Shop URL +$shop_url = get_permalink(wc_get_page_id('shop')); +?> + + +
+
+
+
FORM 01 · NEW ARRIVALS · WEEK
+

+ Office
+ supplies for
+ people who hate
+ the office. +

+

+ Mugs, canvases, planners, and apparel for the chronically CC'd. Each item + is a quiet rebellion you can drink coffee out of. Synergize responsibly. +

+
+ + Shop the catalog + + + Read the memo + publish; ?> items · ships in 3-5 biz days +
+
+ +
+ 1, 'featured' => true, 'status' => 'publish']); + if (!empty($hero_products)) { + $hp = $hero_products[0]; + $img_id = $hp->get_image_id(); + if ($img_id) { + echo wp_get_attachment_image($img_id, 'rar-hero', false, ['style' => 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;']); + } + } + ?> +
FIG. 1 — HERO PRODUCT · 11OZ CERAMIC
+
Best Seller
+
+
+ + +
+ '; + echo '
' . esc_html($num) . '
'; + echo '
' . esc_html($label) . '
'; + echo '
'; + } + ?> + +
+ + +
+ SEE INDEX P. 4'); ?> +
+ ['DEPT. 01', 'For passive aggression at room temp.'], + 'canvas' => ['DEPT. 02', 'Wall art for the soul-tired.'], + 'planners' => ['DEPT. 03', 'Productivity, with a wink.'], + 'apparel' => ['DEPT. 04', 'Casual Friday, but make it bitter.'], + ]; + + if (!empty($categories)) { + foreach ($categories as $i => $cat) { + $slug = $cat->slug; + $meta = $cat_meta[$slug] ?? ['DEPT. 0' . ($i + 1), $cat->description ?: 'Office essentials.']; + $url = get_term_link($cat); + ?> + +
+ + count); ?> items +
+
name); ?>
+
+ + Browse + + + + + +
+ + items +
+
+
+ Browse → + + +
+
+ + +
+ SUBJECT TO CHANGE'); ?> +
+ + + get_image_id(); + $img_url = $img_id ? wp_get_attachment_image_url($img_id, 'rar-product-card') : ''; + $sku = $product->get_sku() ?: 'SKU-' . $product->get_id(); + $cat_terms = get_the_terms($product->get_id(), 'product_cat'); + $cat_name = $cat_terms ? $cat_terms[0]->name : 'Product'; + $price = $product->get_price_html(); + $url = get_permalink($product->get_id()); + ?> + +
+
SKU
+ + <?php echo esc_attr($product->get_name()); ?> + +
+ + is_featured()) : ?> +
Featured
+ +
+
+
+
get_name()); ?>
+
+ + + View · + + +
+
+ + + + + + +
+
SKU
+
+
+
+
+
+
+ + View → +
+
+ + + +
+
+ + +
+ SEE FULL CATALOG →'); ?> +

+ Every design lives across multiple products. Pick a phrase you'd like to commit to + and we'll show you every form it ships in — mug, canvas, tee, sticker, the works. +

+
+ ['bg' => '#FBF8EF', 'fg' => '#1A1A1A'], + 'ink' => ['bg' => '#1A1A1A', 'fg' => '#F5F1E8'], + 'olive' => ['bg' => '#7B8C5A', 'fg' => '#F5F1E8'], + ]; + foreach ($designs as [$title, $tag, $color, $lines, $count]) { + $cm = $color_map[$color]; + $designs_url = home_url('/designs/'); + ?> + +
+
+ ' . esc_html($line) . '
'; ?> +
+
+
+
+
+
+ products + + Shop design · + + +
+
+ + + +
+ Browse all designs → +
+
+ + +
+
MEMO 04 · CC: THE DESK-BOUND
+
+
❝ AS SEEN IN ❞
+
+ "Finally, a brand that gets that the meeting could have been an email, + and the email could have been silence." +
+
— The Cubicle Quarterly ·
+
+ FAST CO. + OFFICE LIFE MAG + THE PROCRASTINATOR + HR WEEKLY (REGRETTABLY) +
+
+
+ + + +
+ VOL. 4 · NO. ' . date('W')); ?> +
+ ID, 'rar-blog-thumb'); + $cats = get_the_category($post->ID); + $cat_name = $cats ? $cats[0]->name : 'Field Notes'; + $read_time = max(1, ceil(str_word_count(strip_tags(get_post_field('post_content', $post->ID))) / 200)); + ?> + +
+ + <?php echo esc_attr($post->post_title); ?> + +
+
· post_date))); ?> · MIN
+
post_title); ?>
+ + +
+
+ +
+ VOL. 4 · NO. 17'); ?> +
+ + +
+
· · MIN
+
+ + +
+
+ + + diff --git a/theme/functions.php b/theme/functions.php new file mode 100644 index 0000000..62f07dc --- /dev/null +++ b/theme/functions.php @@ -0,0 +1,323 @@ + __('Primary Navigation', 'rar-storefront'), + 'footer' => __('Footer Navigation', 'rar-storefront'), + ]); +} +add_action('after_setup_theme', 'rar_setup'); + +// ─── Enqueue Assets ───────────────────────────────────────────────────────── +function rar_enqueue_assets() { + // Google Fonts + wp_enqueue_style( + 'rar-fonts', + 'https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap', + [], + null + ); + + // Theme stylesheet + wp_enqueue_style('rar-style', get_stylesheet_uri(), ['rar-fonts'], '1.0.0'); + + // Theme JS + wp_enqueue_script('rar-main', get_template_directory_uri() . '/js/rar.js', [], '1.0.0', true); + + // Pass data to JS + wp_localize_script('rar-main', 'rarData', [ + 'ajaxUrl' => admin_url('admin-ajax.php'), + 'nonce' => wp_create_nonce('rar-nonce'), + 'cartUrl' => wc_get_cart_url(), + 'shopUrl' => get_permalink(wc_get_page_id('shop')), + ]); +} +add_action('wp_enqueue_scripts', 'rar_enqueue_assets'); + +// ─── Remove default WC styles we override ─────────────────────────────────── +add_filter('woocommerce_enqueue_styles', function($styles) { + // Keep WooCommerce core but remove some defaults we fully override + return $styles; +}); + +// ─── Widget Areas ──────────────────────────────────────────────────────────── +function rar_register_sidebars() { + register_sidebar([ + 'name' => 'Shop Filter Sidebar', + 'id' => 'shop-filter', + 'before_widget' => '
', + 'after_widget' => '
', + 'before_title' => '

', + 'after_title' => '

', + ]); +} +add_action('widgets_init', 'rar_register_sidebars'); + +// ─── WooCommerce: remove default wrappers ─────────────────────────────────── +remove_action('woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); +remove_action('woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); + +add_action('woocommerce_before_main_content', function() { + echo '
'; +}); +add_action('woocommerce_after_main_content', function() { + echo '
'; +}); + +// ─── Remove WC breadcrumb (we build our own) ──────────────────────────────── +remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20); + +// ─── Product loop: 3 columns ──────────────────────────────────────────────── +add_filter('loop_shop_columns', fn() => 3); +add_filter('loop_shop_per_page', fn() => 12, 20); + +// ─── Custom product loop template ─────────────────────────────────────────── +add_filter('woocommerce_product_loop_start', function($html) { + return ''; +}); + +// ─── Helper: announcement bar ─────────────────────────────────────────────── +function rar_announcement_bar() { + $msg = get_option('rar_announcement', 'FREE DESK-CHAIR DELIVERY ON ORDERS OVER $40 · CIRCULATE TO YOUR TEAM · DOC. REV. 04.26'); + if ($msg) { + echo '
' . esc_html($msg) . '
'; + } +} + +// ─── Helper: nav ──────────────────────────────────────────────────────────── +function rar_nav() { + $cart_count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0; + $cart_url = wc_get_cart_url(); + $shop_url = get_permalink(wc_get_page_id('shop')); + ?> + + + + '; + if (function_exists('woocommerce_breadcrumb')) { + woocommerce_breadcrumb(['wrap_before' => '', 'wrap_after' => '', 'before' => '', 'after' => '', 'delimiter' => ' / ']); + } else { + echo 'Home / '; + if (is_singular()) { + echo '' . get_the_title() . ''; + } elseif (is_archive()) { + echo '' . get_the_archive_title() . ''; + } + } + echo ''; +} + +// ─── Helper: section header ────────────────────────────────────────────────── +function rar_section_head($form, $title, $meta = '') { + echo '
'; + echo '
'; + echo '
' . esc_html($form) . '
'; + echo '

' . esc_html($title) . '

'; + echo '
'; + if ($meta) { + echo '
' . wp_kses_post($meta) . '
'; + } + echo '
'; +} + +// ─── Add WooCommerce cart fragment support ─────────────────────────────────── +add_filter('woocommerce_add_to_cart_fragments', function($fragments) { + $cart_count = WC()->cart->get_cart_contents_count(); + $fragments['.rar-nav__cart'] = ' + + + + + Cart (' . $cart_count . ') + '; + return $fragments; +}); + +// ─── Custom image sizes ────────────────────────────────────────────────────── +add_image_size('rar-product-card', 600, 600, true); +add_image_size('rar-blog-thumb', 800, 450, true); +add_image_size('rar-hero', 900, 1125, true); + +// ─── Page templates ────────────────────────────────────────────────────────── +add_filter('theme_page_templates', function($templates) { + $templates['page-designs.php'] = 'Designs Index'; + $templates['page-design-detail.php'] = 'Design Detail'; + $templates['page-about.php'] = 'About'; + return $templates; +}); + +// ─── AJAX: add to cart from homepage ──────────────────────────────────────── +add_action('wp_ajax_rar_add_to_cart', 'rar_ajax_add_to_cart'); +add_action('wp_ajax_nopriv_rar_add_to_cart', 'rar_ajax_add_to_cart'); +function rar_ajax_add_to_cart() { + check_ajax_referer('rar-nonce', 'nonce'); + $product_id = absint($_POST['product_id'] ?? 0); + $qty = absint($_POST['qty'] ?? 1); + if ($product_id) { + WC()->cart->add_to_cart($product_id, $qty); + wp_send_json_success(['count' => WC()->cart->get_cart_contents_count()]); + } + wp_send_json_error(); +} + +// ─── Customizer settings ───────────────────────────────────────────────────── +add_action('customize_register', function($wp_customize) { + $wp_customize->add_section('rar_options', [ + 'title' => __('Reply All Regrets Settings', 'rar-storefront'), + 'priority' => 30, + ]); + $wp_customize->add_setting('rar_announcement', [ + 'default' => 'FREE DESK-CHAIR DELIVERY ON ORDERS OVER $40 · CIRCULATE TO YOUR TEAM · DOC. REV. 04.26', + 'transport' => 'refresh', + ]); + $wp_customize->add_control('rar_announcement', [ + 'label' => __('Announcement Bar Text', 'rar-storefront'), + 'section' => 'rar_options', + 'type' => 'text', + ]); + $wp_customize->add_setting('rar_hero_tagline', [ + 'default' => 'Office supplies for people who hate the office.', + 'transport' => 'postMessage', + ]); + $wp_customize->add_control('rar_hero_tagline', [ + 'label' => __('Hero Tagline', 'rar-storefront'), + 'section' => 'rar_options', + 'type' => 'textarea', + ]); +}); diff --git a/theme/header.php b/theme/header.php new file mode 100644 index 0000000..142dc61 --- /dev/null +++ b/theme/header.php @@ -0,0 +1,12 @@ + +> + + + + + +> + + + + diff --git a/theme/index.php b/theme/index.php new file mode 100644 index 0000000..66ff95f --- /dev/null +++ b/theme/index.php @@ -0,0 +1,24 @@ + + +
+ +
+ + + +
+ +
+ +
·
+
+ + +
+ + +

Nothing filed yet. Check back later.

+ +
+ + diff --git a/theme/js/rar.js b/theme/js/rar.js new file mode 100644 index 0000000..70128a4 --- /dev/null +++ b/theme/js/rar.js @@ -0,0 +1,230 @@ +/** + * Reply All Regrets — Interactive features + * Filter sidebar, sort, view toggle, gallery switcher, qty controls + */ +(function () { + 'use strict'; + + // ─── Gallery switcher ──────────────────────────────────────────────────── + window.rarSwitchGallery = function (index, url) { + var img = document.getElementById('rar-gallery-img'); + var counter = document.getElementById('rar-gallery-counter'); + var label = document.getElementById('rar-gallery-label'); + var thumbs = document.querySelectorAll('.rar-gallery__thumb'); + + if (img) img.src = url; + if (counter) counter.textContent = index + 1; + if (label) label.textContent = 'FIG. ' + (index + 1) + ' — PRODUCT VIEW'; + + thumbs.forEach(function (t, i) { + t.classList.toggle('active', i === index); + }); + }; + + // ─── Grid / List view toggle ───────────────────────────────────────────── + window.rarSetView = function (view) { + var grid = document.getElementById('rar-product-grid'); + var gridBtn = document.getElementById('rar-grid-btn'); + var listBtn = document.getElementById('rar-list-btn'); + + if (!grid) return; + + if (view === 'list') { + grid.classList.add('list-view'); + if (gridBtn) gridBtn.classList.remove('active'); + if (listBtn) listBtn.classList.add('active'); + } else { + grid.classList.remove('list-view'); + if (gridBtn) gridBtn.classList.add('active'); + if (listBtn) listBtn.classList.remove('active'); + } + + try { localStorage.setItem('rar-view', view); } catch (e) {} + }; + + // Restore saved view preference + (function () { + try { + var saved = localStorage.getItem('rar-view'); + if (saved === 'list') { rarSetView('list'); } + } catch (e) {} + })(); + + // ─── Sort menu close on outside click ──────────────────────────────────── + document.addEventListener('click', function (e) { + var sortMenu = document.getElementById('rar-sort-menu'); + var sortBtn = document.querySelector('.rar-sort-btn'); + if (sortMenu && !sortMenu.contains(e.target) && sortBtn && !sortBtn.contains(e.target)) { + sortMenu.classList.remove('open'); + } + }); + + // ─── Filter: category/attribute ────────────────────────────────────────── + window.rarApplyFilter = function (checkbox) { + var url = new URL(window.location.href); + if (checkbox.checked) { + url.searchParams.set(checkbox.name, checkbox.value); + } else { + url.searchParams.delete(checkbox.name); + } + window.location.href = url.toString(); + }; + + window.rarPriceFilter = function (checkbox) { + var url = new URL(window.location.href); + // Uncheck siblings + document.querySelectorAll('[id^="price-"]').forEach(function (c) { + if (c !== checkbox) c.checked = false; + }); + if (checkbox.checked) { + url.searchParams.set('min_price', checkbox.dataset.min); + url.searchParams.set('max_price', checkbox.dataset.max); + } else { + url.searchParams.delete('min_price'); + url.searchParams.delete('max_price'); + } + window.location.href = url.toString(); + }; + + window.rarStockFilter = function (checkbox) { + var url = new URL(window.location.href); + if (checkbox.checked) { + url.searchParams.set('availability', 'instock'); + } else { + url.searchParams.delete('availability'); + } + window.location.href = url.toString(); + }; + + window.rarApplyAllFilters = function () { + // Collect all checked filters and navigate + var url = new URL(window.location.href); + document.querySelectorAll('.rar-filter-item input[type=checkbox]:checked').forEach(function (c) { + if (c.name && c.value) url.searchParams.set(c.name, c.value); + }); + window.location.href = url.toString(); + }; + + // ─── Designs index: tag filter ────────────────────────────────────────── + window.rarFilterDesigns = function (tag, btn) { + var cards = document.querySelectorAll('[data-design-tag]'); + var buttons = document.querySelectorAll('.rar-design-filter-btn'); + + buttons.forEach(function (b) { b.classList.remove('active'); }); + btn.classList.add('active'); + + cards.forEach(function (card) { + if (tag === 'All' || card.dataset.designTag === tag) { + card.style.display = ''; + } else { + card.style.display = 'none'; + } + }); + }; + + // ─── Qty controls ──────────────────────────────────────────────────────── + document.addEventListener('click', function (e) { + if (e.target.matches('.rar-qty__btn')) { + var wrap = e.target.closest('.rar-qty'); + if (!wrap) return; + var display = wrap.querySelector('.rar-qty__val'); + var input = wrap.querySelector('input[type=number], input.qty'); + var current = parseInt(display ? display.textContent : (input ? input.value : 1)) || 1; + + if (e.target.dataset.action === 'plus') { + current++; + } else if (e.target.dataset.action === 'minus') { + current = Math.max(1, current - 1); + } + + if (display) display.textContent = current; + if (input) { + input.value = current; + input.dispatchEvent(new Event('change', { bubbles: true })); + } + } + }); + + // ─── Nav: highlight current section ────────────────────────────────────── + (function () { + var path = window.location.pathname; + var links = document.querySelectorAll('.rar-nav__links a'); + links.forEach(function (link) { + var href = link.getAttribute('href') || ''; + if (href && href !== '/' && path.indexOf(href) === 0) { + link.style.color = 'var(--stamp)'; + } + }); + })(); + + // ─── Cart count update via WooCommerce fragments ────────────────────────── + document.addEventListener('wc_fragments_refreshed', function () { + // WooCommerce will update .rar-nav__cart via the fragments filter in functions.php + }); + + // ─── Announcement bar close ─────────────────────────────────────────────── + var bar = document.querySelector('.rar-bar'); + if (bar) { + bar.style.cursor = 'pointer'; + bar.title = 'Click to dismiss'; + bar.addEventListener('click', function () { + bar.style.display = 'none'; + try { sessionStorage.setItem('rar-bar-dismissed', '1'); } catch (e) {} + }); + try { + if (sessionStorage.getItem('rar-bar-dismissed') === '1') bar.style.display = 'none'; + } catch (e) {} + } + + // ─── WooCommerce quantity controls (override default +/-) ───────────────── + // Replace WC's quantity input with our styled controls + function initQtyControls() { + document.querySelectorAll('.quantity:not(.rar-qty-init)').forEach(function (wrap) { + var input = wrap.querySelector('input.qty, input[type=number]'); + if (!input) return; + wrap.classList.add('rar-qty-init'); + + var minusBtn = document.createElement('button'); + minusBtn.type = 'button'; + minusBtn.className = 'rar-qty__btn'; + minusBtn.dataset.action = 'minus'; + minusBtn.innerHTML = ''; + minusBtn.style.cssText = 'padding:0 14px;border-right:1px solid var(--ink);display:flex;align-items:center;'; + + var plusBtn = document.createElement('button'); + plusBtn.type = 'button'; + plusBtn.className = 'rar-qty__btn'; + plusBtn.dataset.action = 'plus'; + plusBtn.innerHTML = ''; + plusBtn.style.cssText = 'padding:0 14px;border-left:1px solid var(--ink);display:flex;align-items:center;'; + + input.style.cssText = 'padding:0 18px;font-family:var(--mono);font-size:14px;min-width:50px;text-align:center;border:none;background:transparent;'; + + wrap.style.cssText = 'display:flex;align-items:stretch;border:1.5px solid var(--ink);'; + wrap.insertBefore(minusBtn, input); + wrap.appendChild(plusBtn); + + [minusBtn, plusBtn].forEach(function (btn) { + btn.addEventListener('click', function () { + var val = parseInt(input.value) || 1; + var step = parseInt(input.step) || 1; + if (btn.dataset.action === 'plus') { + input.value = val + step; + } else { + input.value = Math.max(parseInt(input.min) || 1, val - step); + } + input.dispatchEvent(new Event('change', { bubbles: true })); + }); + }); + }); + } + + // Run on DOM ready and after any AJAX + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initQtyControls); + } else { + initQtyControls(); + } + document.addEventListener('wc_fragments_refreshed', initQtyControls); + +})(); diff --git a/theme/page-about.php b/theme/page-about.php new file mode 100644 index 0000000..67ddf53 --- /dev/null +++ b/theme/page-about.php @@ -0,0 +1,89 @@ + + +
+ Home / About +
+ +
+
+
FORM 11 · ABOUT · COMPANY FILE
+

+ We make things
+ for people who are
+ mostly fine. +

+
+ + + +

Reply All Regrets™ was founded on the premise that office culture deserves better merchandise. We make mugs, canvases, planners, and apparel for the chronically employed — people who have sent a reply-all they regret, attended a meeting that could have been an email, and circled back when they absolutely should not have.

+

Everything ships from Cleveland. Everything is dishwasher safe. Most things are HR safe.

+ +
+
+
+
+ Mostly
fine.™ +
+
+
+ +
+
FORM 11-A · BY THE NUMBERS
+ +
+ '; + echo '
' . esc_html($num) . '
'; + echo '
' . esc_html($label) . '
'; + echo '
'; + } + ?> + + +
+
FORM 11-B · ORIGIN STORY
+

+ It started with a mug. +

+

+ The "Per My Last Email" mug was designed in 2024 after one too many unnecessary reply-all + chains. The original batch of 50 sold out in a weekend. We have since shipped to 41 states, + been featured in 3 workplace humor newsletters, and received one cease-and-desist from a + consulting firm whose name we will not mention here. +

+

+ We believe that the best way to survive office culture is to laugh at it loudly, + drink your coffee from a mug that says what you wish you could, and hang something + honest on the wall behind your monitor. +

+
+ +
+
FORM 11-C · PRESS
+
+ ' . esc_html($p) . ''; + } + ?> +
+
+
+ + diff --git a/theme/page.php b/theme/page.php new file mode 100644 index 0000000..e0f11cc --- /dev/null +++ b/theme/page.php @@ -0,0 +1,21 @@ + + +
+ Home / +
+ +
+
PAGE ·
+

+
+ +
+
+ + diff --git a/theme/single.php b/theme/single.php new file mode 100644 index 0000000..5561668 --- /dev/null +++ b/theme/single.php @@ -0,0 +1,100 @@ +name : 'Field Notes'; +$wc = max(1, ceil(str_word_count(strip_tags(get_the_content())) / 200)); +$thumb = get_the_post_thumbnail_url(get_the_ID(), 'full'); +?> + +
+ Home / + The Memo / + +
+ +
+
+ · · MIN READ +
+

+
+ By + · + +
+
+ + +
+
+ <?php the_title_attribute(); ?> +
+
+ + +
+ + + + +
+
+ ' . esc_html($tag->name) . ''; + } + } + ?> +
+
+
+ + +
+
+ 'border-radius:2px;border:1px solid var(--hairline-strong);flex-shrink:0;']); ?> +
+
Filed by
+
+

+
+
+
+ + + 3, + 'post__not_in' => [get_the_ID()], + 'category__in' => wp_get_post_categories(get_the_ID()), + 'post_status' => 'publish', +]); +if (!empty($related)) : +?> +
+ +
+ ID, 'rar-blog-thumb'); + $rc = get_the_category($rp->ID); + $rcat = $rc ? $rc[0]->name : 'Notes'; + ?> + +
+ <?php echo esc_attr($rp->post_title); ?> +
+
· post_date))); ?>
+
post_title); ?>
+ + +
+
+ + + diff --git a/theme/style.css b/theme/style.css new file mode 100644 index 0000000..3f1d961 --- /dev/null +++ b/theme/style.css @@ -0,0 +1,1052 @@ +/* +Theme Name: RAR Storefront +Theme URI: https://shop.k9stryker.com +Description: Reply All Regrets™ — Retro office aesthetic storefront for WooCommerce. Corporate-mocking parody with manila, ink, stamp red, and olive color palette. +Version: 1.0.0 +Author: REPA +Text Domain: rar-storefront +*/ + +/* ───────── CSS Variables ───────── */ +:root { + --manila: #F5F1E8; + --manila-dark: #E8DFC8; + --manila-deep: #D9CDA8; + --ink: #1A1A1A; + --ink-soft: #2B2B2B; + --ink-muted: #5A5249; + --ink-faint: #8A8175; + --paper: #FBF8EF; + --stamp: #C8533C; + --stamp-dark: #9E3F2C; + --olive: #7B8C5A; + --olive-dark: #5F6E45; + --rule: #1A1A1A; + --hairline: rgba(26, 26, 26, 0.18); + --hairline-strong: rgba(26, 26, 26, 0.55); + + --serif: "Fraunces", "Playfair Display", Georgia, serif; + --mono: "JetBrains Mono", "Courier Prime", "Courier New", monospace; + --sans: "Inter", -apple-system, system-ui, sans-serif; +} + +/* ───────── Base reset ───────── */ +*, *::before, *::after { box-sizing: border-box; } + +html, body { + margin: 0; + padding: 0; + font-family: var(--sans); + color: var(--ink); + background: var(--manila); + -webkit-font-smoothing: antialiased; + letter-spacing: -0.005em; +} + +body { min-height: 100vh; } + +a { color: inherit; text-decoration: none; } +img { display: block; max-width: 100%; } +button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; } + +/* ───────── Type utilities ───────── */ +.rar-mono { font-family: var(--mono); letter-spacing: 0; } +.rar-serif { font-family: var(--serif); letter-spacing: -0.02em; } +.rar-uppercase { + text-transform: uppercase; + letter-spacing: 0.12em; + font-family: var(--mono); + font-weight: 500; +} + +/* ───────── Form-label tag (FORM 27-B style) ───────── */ +.rar-form-tag { + display: inline-flex; + align-items: center; + gap: 8px; + font-family: var(--mono); + font-size: 10px; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--ink-muted); +} +.rar-form-tag::before { + content: ""; + width: 8px; height: 8px; + background: var(--stamp); + border-radius: 50%; +} + +/* ───────── Announcement bar ───────── */ +.rar-bar { + background: var(--stamp); + color: var(--manila); + font-family: var(--mono); + font-size: 10px; + letter-spacing: 0.22em; + text-transform: uppercase; + text-align: center; + padding: 7px 16px; + border-bottom: 1px solid var(--ink); +} + +/* ───────── Navigation ───────── */ +.rar-nav { + background: var(--ink); + color: var(--manila); + padding: 10px 32px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 3px double var(--manila); + position: sticky; + top: 0; + z-index: 100; +} +.rar-nav__logo { display: flex; align-items: baseline; gap: 10px; } +.rar-nav__logo-mark { + font-family: var(--serif); + font-weight: 600; + font-size: 22px; + letter-spacing: -0.02em; + text-decoration: none; + color: var(--manila); +} +.rar-nav__logo-sub { + font-family: var(--mono); + font-size: 9px; + letter-spacing: 0.22em; + text-transform: uppercase; + color: rgba(245, 241, 232, 0.55); +} +.rar-nav__links { + display: flex; + gap: 24px; + font-family: var(--mono); + font-size: 11px; + letter-spacing: 0.16em; + text-transform: uppercase; +} +.rar-nav__links a { + position: relative; + padding: 4px 0; + cursor: pointer; + transition: color 0.15s; + color: var(--manila); +} +.rar-nav__links a:hover, +.rar-nav__links .current-menu-item > a, +.rar-nav__links .current_page_item > a { color: var(--stamp); } +.rar-nav__icons { + display: flex; + align-items: center; + gap: 16px; + font-family: var(--mono); + font-size: 11px; + letter-spacing: 0.12em; + text-transform: uppercase; +} +.rar-nav__icons a { color: var(--manila); transition: color 0.15s; } +.rar-nav__icons a:hover { color: var(--stamp); } +.rar-nav__cart { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + background: var(--stamp); + color: var(--manila) !important; + border-radius: 2px; + cursor: pointer; + transition: background 0.15s; +} +.rar-nav__cart:hover { background: var(--stamp-dark) !important; } + +/* ───────── Buttons ───────── */ +.rar-btn { + font-family: var(--mono); + font-size: 11px; + letter-spacing: 0.18em; + text-transform: uppercase; + padding: 14px 22px; + border-radius: 2px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: all 0.15s; + border: 1.5px solid var(--ink); + background: var(--ink); + color: var(--manila); + cursor: pointer; +} +.rar-btn:hover { background: var(--stamp); border-color: var(--stamp); } +.rar-btn--ghost { background: transparent; color: var(--ink); } +.rar-btn--ghost:hover { background: var(--ink); color: var(--manila); border-color: var(--ink); } +.rar-btn--stamp { background: var(--stamp); border-color: var(--stamp); } +.rar-btn--stamp:hover { background: var(--stamp-dark); border-color: var(--stamp-dark); } + +/* ───────── Rubber stamp ───────── */ +.rar-stamp { + display: inline-block; + font-family: var(--mono); + font-weight: 700; + font-size: 14px; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--stamp); + border: 2.5px solid var(--stamp); + padding: 6px 14px; + border-radius: 4px; + transform: rotate(-6deg); + opacity: 0.85; +} +.rar-stamp--olive { color: var(--olive-dark); border-color: var(--olive-dark); } + +/* ───────── Striped placeholder ───────── */ +.rar-placeholder { + position: relative; + background: repeating-linear-gradient(135deg, var(--manila-deep) 0px, var(--manila-deep) 14px, var(--manila-dark) 14px, var(--manila-dark) 28px); + border: 1px solid var(--hairline-strong); + display: flex; align-items: center; justify-content: center; + overflow: hidden; +} +.rar-placeholder__label { + font-family: var(--mono); + font-size: 10px; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--ink-soft); + background: var(--paper); + padding: 5px 10px; + border: 1px solid var(--ink); + text-align: center; + max-width: 80%; +} + +/* ───────── Product Cards ───────── */ +.rar-card { + background: var(--paper); + border: 1px solid var(--hairline-strong); + border-radius: 2px; + overflow: hidden; + transition: transform 0.18s, box-shadow 0.18s; + display: block; +} +.rar-card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08); +} +.rar-card__media { + aspect-ratio: 1 / 1; + background: repeating-linear-gradient(135deg, var(--manila-deep) 0px, var(--manila-deep) 14px, var(--manila-dark) 14px, var(--manila-dark) 28px); + display: flex; align-items: center; justify-content: center; + position: relative; + overflow: hidden; +} +.rar-card__media img { + width: 100%; height: 100%; + object-fit: cover; + position: absolute; inset: 0; +} +.rar-card__sku { + position: absolute; top: 10px; left: 10px; + font-family: var(--mono); + font-size: 9px; + letter-spacing: 0.16em; + color: var(--ink-muted); + background: var(--paper); + padding: 3px 7px; + border: 1px solid var(--hairline-strong); + z-index: 1; +} +.rar-card__body { + padding: 14px 16px 18px; + border-top: 1px solid var(--hairline); +} +.rar-card__cat { + font-family: var(--mono); + font-size: 9px; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--ink-faint); + margin-bottom: 6px; +} +.rar-card__title { + font-family: var(--serif); + font-size: 17px; + font-weight: 500; + line-height: 1.18; + margin-bottom: 10px; + color: var(--ink); + letter-spacing: -0.01em; +} +.rar-card__row { + display: flex; + justify-content: space-between; + align-items: baseline; + font-family: var(--mono); + font-size: 11px; +} +.rar-card__price { font-weight: 600; } +.rar-card__badge { + position: absolute; top: 10px; right: 10px; + padding: 3px 8px; + background: var(--stamp); + color: var(--manila); + font-family: var(--mono); + font-size: 9px; + letter-spacing: 0.16em; + text-transform: uppercase; + z-index: 1; +} + +/* ───────── Section header ───────── */ +.rar-section-head { + display: flex; + align-items: flex-end; + justify-content: space-between; + border-bottom: 1.5px solid var(--ink); + padding-bottom: 16px; + margin-bottom: 32px; +} +.rar-section-head h2 { + font-family: var(--serif); + font-size: 38px; + font-weight: 500; + letter-spacing: -0.025em; + margin: 0; + line-height: 1; +} +.rar-section-head__meta { + font-family: var(--mono); + font-size: 10px; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--ink-muted); + text-align: right; +} + +/* ───────── Folder tab ───────── */ +.rar-folder-tab { + display: inline-block; + background: var(--manila-dark); + border: 1px solid var(--hairline-strong); + border-bottom: none; + padding: 8px 18px 10px; + font-family: var(--mono); + font-size: 10px; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--ink-soft); + border-radius: 4px 4px 0 0; + position: relative; + margin-bottom: -1px; +} + +/* ───────── Misc ───────── */ +.rar-divider { border-top: 1px dashed var(--hairline-strong); margin: 24px 0; } +.rar-tag { + display: inline-block; + font-family: var(--mono); font-size: 9px; + letter-spacing: 0.16em; text-transform: uppercase; + padding: 3px 7px; border: 1px solid var(--ink); background: var(--paper); +} +.rar-lined { + background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(26,26,26,0.08) 27px, rgba(26,26,26,0.08) 28px); + background-color: var(--paper); +} + +/* ───────── Footer ───────── */ +.rar-footer { + background: var(--ink); + color: var(--manila); + padding: 50px 32px 24px; + border-top: 4px double var(--manila); +} +.rar-footer__grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 40px; + margin-bottom: 40px; +} +.rar-footer__col-title { + font-family: var(--mono); font-size: 10px; + letter-spacing: 0.22em; text-transform: uppercase; + color: rgba(245,241,232,0.5); margin-bottom: 14px; +} +.rar-footer__col ul { + list-style: none; padding: 0; margin: 0; + display: flex; flex-direction: column; gap: 8px; font-size: 13px; +} +.rar-footer__col a { cursor: pointer; transition: color 0.15s; color: var(--manila); } +.rar-footer__col a:hover { color: var(--stamp); } +.rar-footer__legal { + border-top: 1px solid rgba(245,241,232,0.18); + padding-top: 18px; + display: flex; justify-content: space-between; + font-family: var(--mono); font-size: 10px; + letter-spacing: 0.16em; text-transform: uppercase; + color: rgba(245,241,232,0.55); +} +.rar-footer__newsletter { + display: flex; gap: 8px; margin-top: 22px; +} +.rar-footer__newsletter input { + flex: 1; max-width: 240px; padding: 10px 12px; + background: transparent; + border: 1px solid rgba(245,241,232,0.3); + color: var(--manila); font-family: var(--mono); font-size: 11px; + letter-spacing: 0.06em; outline: none; border-radius: 2px; +} +.rar-footer__newsletter input::placeholder { color: rgba(245,241,232,0.4); } + +/* ───────── Hero Section ───────── */ +.rar-hero { + padding: 64px 56px 56px; + border-bottom: 1px solid var(--hairline-strong); +} +.rar-hero__grid { + display: grid; + grid-template-columns: 1.1fr 1fr; + gap: 56px; + align-items: center; +} +.rar-hero h1 { + font-family: var(--serif); + font-size: clamp(52px, 6vw, 88px); + font-weight: 500; + line-height: 0.95; + margin: 0 0 24px; + letter-spacing: -0.03em; +} +.rar-hero__em { color: var(--stamp); font-style: italic; } +.rar-hero__sub { + font-size: 16px; line-height: 1.55; max-width: 480px; + margin: 0 0 32px; color: var(--ink-muted); +} +.rar-hero__cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } +.rar-hero__meta { + font-family: var(--mono); font-size: 10px; color: var(--ink-faint); + letter-spacing: 0.16em; text-transform: uppercase; margin-left: 8px; +} +.rar-hero__image { + position: relative; + aspect-ratio: 4 / 5; + background: repeating-linear-gradient(135deg, var(--manila-deep) 0px, var(--manila-deep) 14px, var(--manila-dark) 14px, var(--manila-dark) 28px); + border: 1px solid var(--hairline-strong); + display: flex; align-items: center; justify-content: center; + overflow: hidden; +} +.rar-hero__image img { + width: 100%; height: 100%; object-fit: cover; + position: absolute; inset: 0; +} +.rar-hero__image-label { + position: absolute; top: 16px; left: 16px; + padding: 6px 10px; + background: var(--paper); border: 1px solid var(--ink); + font-family: var(--mono); font-size: 10px; + letter-spacing: 0.18em; text-transform: uppercase; + z-index: 1; +} +.rar-hero__stamp { position: absolute; bottom: 18px; right: 18px; z-index: 1; } + +.rar-metrics { + display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; + margin-top: 56px; padding-top: 24px; + border-top: 1.5px solid var(--ink); +} +.rar-metrics__item { + padding: 0 24px; + border-right: 1px solid var(--hairline); +} +.rar-metrics__item:last-child { border-right: none; } +.rar-metrics__num { + font-family: var(--serif); font-size: 36px; font-weight: 500; line-height: 1; +} +.rar-metrics__label { + font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; + text-transform: uppercase; color: var(--ink-muted); margin-top: 6px; +} + +/* ───────── Category Cards ───────── */ +.rar-cats { padding: 72px 56px; background: var(--paper); } +.rar-cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } +.rar-cat-card { + display: block; padding: 20px 18px 24px; + border: 1px solid var(--hairline-strong); + background: var(--manila); + transition: background 0.18s; + cursor: pointer; +} +.rar-cat-card:hover { background: var(--manila-dark); } +.rar-cat-card__header { + display: flex; justify-content: space-between; align-items: baseline; +} +.rar-cat-card__sku { + font-family: var(--mono); font-size: 9px; + letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); +} +.rar-cat-card__count { + font-family: var(--mono); font-size: 10px; color: var(--ink-muted); +} +.rar-cat-card__name { + font-family: var(--serif); font-size: 32px; font-weight: 500; + margin-top: 14px; margin-bottom: 8px; letter-spacing: -0.02em; +} +.rar-cat-card__desc { + font-size: 12px; color: var(--ink-muted); line-height: 1.5; margin-bottom: 16px; +} +.rar-cat-card__browse { + font-family: var(--mono); font-size: 10px; + letter-spacing: 0.18em; text-transform: uppercase; + display: inline-flex; align-items: center; gap: 6px; +} + +/* ───────── Products grid ───────── */ +.rar-products { padding: 72px 56px; } +.rar-products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } + +/* ───────── Designs section ───────── */ +.rar-designs { padding: 72px 56px; border-top: 1px solid var(--hairline-strong); } +.rar-designs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } +.rar-design-card__artwork { + display: flex; flex-direction: column; align-items: center; justify-content: center; + padding: 10px; + font-family: var(--serif); font-style: italic; font-weight: 500; + font-size: 20px; line-height: 1.15; text-align: center; +} + +/* ───────── Editorial / Quote ───────── */ +.rar-editorial { + padding: 80px 56px; + background: var(--ink); color: var(--manila); + position: relative; overflow: hidden; +} +.rar-editorial__memo { + position: absolute; top: 28px; right: 56px; + font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; + color: rgba(245,241,232,0.4); text-transform: uppercase; +} +.rar-editorial__inner { max-width: 820px; margin: 0 auto; text-align: center; } +.rar-editorial__as-seen { + font-family: var(--serif); font-size: 12px; letter-spacing: 0.4em; + text-transform: uppercase; color: var(--stamp); margin-bottom: 32px; +} +.rar-editorial__quote { + font-family: var(--serif); font-size: 40px; font-weight: 400; + line-height: 1.2; font-style: italic; + letter-spacing: -0.015em; margin: 0; +} +.rar-editorial__attr { + font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; + text-transform: uppercase; margin-top: 36px; color: rgba(245,241,232,0.7); +} +.rar-editorial__press { + margin-top: 56px; display: flex; gap: 64px; justify-content: center; + font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; + text-transform: uppercase; color: rgba(245,241,232,0.5); + flex-wrap: wrap; +} + +/* ───────── Blog teasers ───────── */ +.rar-blog-section { padding: 72px 56px; background: var(--paper); } +.rar-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } +.rar-blog-card { cursor: pointer; display: block; } +.rar-blog-card__thumb { + width: 100%; aspect-ratio: 16/9; + background: repeating-linear-gradient(135deg, var(--manila-deep) 0px, var(--manila-deep) 14px, var(--manila-dark) 14px, var(--manila-dark) 28px); + overflow: hidden; position: relative; +} +.rar-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; } +.rar-blog-card__tag { + padding-top: 18px; + font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; + text-transform: uppercase; color: var(--stamp); margin-bottom: 10px; +} +.rar-blog-card__title { + font-family: var(--serif); font-size: 22px; font-weight: 500; + line-height: 1.2; letter-spacing: -0.015em; +} + +/* ───────── Category / Archive Page ───────── */ +.rar-breadcrumb { + padding: 14px 56px; + border-bottom: 1px solid var(--hairline-strong); + background: var(--manila-dark); + font-family: var(--mono); font-size: 10px; + letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); +} +.rar-breadcrumb span { color: var(--ink); } + +.rar-cat-hero { padding: 32px 56px 24px; } +.rar-cat-hero__inner { + border: 1.5px solid var(--ink); background: var(--paper); + padding: 36px 36px 28px; + display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: flex-end; +} +.rar-cat-hero h1 { + font-family: var(--serif); font-size: clamp(40px, 5vw, 76px); + font-weight: 500; line-height: 0.95; margin: 0; letter-spacing: -0.03em; +} +.rar-cat-hero__stats { + display: flex; gap: 18px; font-family: var(--mono); font-size: 10px; + letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); +} + +.rar-toolbar { + display: flex; align-items: center; justify-content: space-between; + padding: 16px 56px; + border-top: 1px solid var(--hairline-strong); + border-bottom: 1px solid var(--hairline-strong); + background: var(--manila); + position: sticky; top: 0; z-index: 4; +} +.rar-toolbar__left { + font-family: var(--mono); font-size: 11px; + letter-spacing: 0.16em; text-transform: uppercase; +} +.rar-toolbar__right { display: flex; gap: 14px; align-items: center; } + +.rar-view-toggle { display: flex; border: 1px solid var(--ink); } +.rar-view-toggle__btn { + padding: 7px 14px; font-family: var(--mono); font-size: 10px; + letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; border: none; +} +.rar-view-toggle__btn.active { background: var(--ink); color: var(--manila); } +.rar-view-toggle__btn:not(.active) { background: transparent; color: var(--ink); } + +.rar-sort-wrap { position: relative; } +.rar-sort-btn { + padding: 7px 14px; font-family: var(--mono); font-size: 10px; + letter-spacing: 0.16em; text-transform: uppercase; + border: 1px solid var(--ink); background: var(--paper); + display: inline-flex; align-items: center; gap: 8px; cursor: pointer; +} +.rar-sort-menu { + position: absolute; top: calc(100% + 4px); right: 0; z-index: 10; + background: var(--paper); border: 1px solid var(--ink); min-width: 180px; + display: none; +} +.rar-sort-menu.open { display: block; } +.rar-sort-menu button { + display: block; width: 100%; text-align: left; + padding: 10px 14px; font-family: var(--mono); font-size: 10px; + letter-spacing: 0.16em; text-transform: uppercase; + border: none; background: transparent; cursor: pointer; +} +.rar-sort-menu button:hover { background: var(--manila-dark); } +.rar-sort-menu button.active { background: var(--manila-dark); } + +.rar-cat-layout { + display: grid; grid-template-columns: 240px 1fr; gap: 48px; + padding: 40px 56px; +} +.rar-filter-sidebar { } +.rar-filter-group { + padding: 18px 0; border-top: 1px solid var(--hairline-strong); +} +.rar-filter-group__label { + font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; + text-transform: uppercase; margin-bottom: 10px; + display: flex; justify-content: space-between; align-items: center; +} +.rar-filter-item { + display: flex; align-items: center; gap: 10px; + padding: 6px 0; cursor: pointer; font-size: 13px; +} +.rar-filter-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ink); } +.rar-filter-apply { border-top: 1px solid var(--hairline-strong); padding-top: 18px; } +.rar-filter-apply .rar-btn { width: 100%; } + +.rar-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } +.rar-product-grid.list-view { grid-template-columns: 1fr; gap: 14px; } +.rar-product-grid.list-view .rar-card { display: grid; grid-template-columns: 180px 1fr; } +.rar-product-grid.list-view .rar-card__media { aspect-ratio: 1/1; } + +.rar-pagination { + margin-top: 48px; padding-top: 24px; + border-top: 1px solid var(--hairline-strong); + display: flex; justify-content: space-between; align-items: center; +} +.rar-page-btns { display: flex; gap: 6px; } +.rar-page-btn { + width: 36px; height: 36px; + border: 1px solid var(--ink); + background: var(--paper); color: var(--ink); + font-family: var(--mono); font-size: 12px; cursor: pointer; + display: flex; align-items: center; justify-content: center; +} +.rar-page-btn.active, .rar-page-btn:hover { background: var(--ink); color: var(--manila); } + +/* ───────── Product Detail ───────── */ +.rar-product-detail { padding: 40px 56px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; } +.rar-gallery { display: grid; grid-template-columns: 72px 1fr; gap: 16px; } +.rar-gallery__thumbs { display: flex; flex-direction: column; gap: 10px; } +.rar-gallery__thumb { + aspect-ratio: 1/1; border: 1px solid var(--hairline-strong); + background: repeating-linear-gradient(135deg, var(--manila-deep) 0 6px, var(--manila-dark) 6px 12px); + cursor: pointer; overflow: hidden; +} +.rar-gallery__thumb.active { border: 2px solid var(--ink); } +.rar-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } +.rar-gallery__main { + aspect-ratio: 1/1; position: relative; + background: repeating-linear-gradient(135deg, var(--manila-deep) 0 14px, var(--manila-dark) 14px 28px); + border: 1px solid var(--hairline-strong); overflow: hidden; + display: flex; align-items: center; justify-content: center; +} +.rar-gallery__main img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } +.rar-gallery__label { + position: absolute; top: 16px; left: 16px; + padding: 6px 10px; background: var(--paper); border: 1px solid var(--ink); + font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; + z-index: 1; +} + +.rar-product-info { } +.rar-product-info h1 { + font-family: var(--serif); font-size: 52px; font-weight: 500; + line-height: 0.98; margin: 0 0 14px; letter-spacing: -0.025em; +} +.rar-product-subtitle { + font-family: var(--serif); font-style: italic; font-size: 18px; + color: var(--ink-muted); margin: 0 0 24px; +} +.rar-product-price { + font-family: var(--serif); font-size: 36px; font-weight: 500; + margin-bottom: 4px; +} +.rar-product-price-sub { + font-family: var(--mono); font-size: 11px; color: var(--ink-faint); + letter-spacing: 0.08em; margin-bottom: 28px; +} +.rar-product-desc { font-size: 14px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 28px; } + +.rar-variant-label { + font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; + text-transform: uppercase; margin-bottom: 10px; + display: flex; justify-content: space-between; +} +.rar-color-swatches { display: flex; gap: 10px; margin-bottom: 22px; } +.rar-swatch { + width: 44px; height: 44px; border: 1px solid var(--hairline-strong); + padding: 4px; background: var(--paper); cursor: pointer; +} +.rar-swatch.active { border: 2px solid var(--ink); padding: 3px; } +.rar-swatch__inner { width: 100%; height: 100%; border-radius: 1px; } + +.rar-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 28px; } +.rar-size-btn { + padding: 14px 12px; text-align: left; + border: 1px solid var(--hairline-strong); background: var(--paper); cursor: pointer; +} +.rar-size-btn.active { border: 2px solid var(--ink); background: var(--manila-dark); } +.rar-size-btn__label { font-family: var(--serif); font-size: 18px; font-weight: 500; } +.rar-size-btn__sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-top: 2px; } + +.rar-qty-cart { display: flex; gap: 10px; margin-bottom: 24px; } +.rar-qty { + display: flex; align-items: stretch; border: 1.5px solid var(--ink); +} +.rar-qty__btn { + padding: 0 14px; border: none; background: none; cursor: pointer; + font-size: 16px; display: flex; align-items: center; +} +.rar-qty__btn:first-child { border-right: 1px solid var(--ink); } +.rar-qty__btn:last-child { border-left: 1px solid var(--ink); } +.rar-qty__val { + padding: 0 18px; display: inline-flex; align-items: center; + font-family: var(--mono); font-size: 14px; min-width: 50px; justify-content: center; +} +.rar-add-to-cart { flex: 1; } + +.rar-spec-list { + border-top: 1px solid var(--ink); padding-top: 20px; margin-top: 24px; +} +.rar-spec-list__label { + font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; + text-transform: uppercase; margin-bottom: 14px; +} +.rar-spec-list ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.6; } +.rar-spec-list li { + display: flex; gap: 12px; padding: 8px 0; + border-bottom: 1px dashed var(--hairline); +} +.rar-spec-list li:last-child { border-bottom: none; } +.rar-spec-num { font-family: var(--mono); color: var(--stamp); font-size: 11px; flex-shrink: 0; } + +.rar-shipping-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; } +.rar-shipping-item__key { + font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; + text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; +} +.rar-shipping-item__val { font-size: 13px; } + +/* ───────── Reviews ───────── */ +.rar-reviews { background: var(--paper); padding: 64px 56px; border-top: 1px solid var(--hairline-strong); } +.rar-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } +.rar-review { + background: var(--manila); border: 1px solid var(--hairline-strong); + padding: 22px 22px 24px; +} +.rar-review__stars { color: var(--stamp); font-size: 14px; margin-bottom: 14px; } +.rar-review__text { + font-family: var(--serif); font-style: italic; font-size: 16px; + line-height: 1.45; margin: 0 0 18px; +} +.rar-review__meta { + font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; + text-transform: uppercase; color: var(--ink-muted); + display: flex; justify-content: space-between; +} + +/* ───────── Blog styles ───────── */ +.rar-blog-header { + padding: 56px 56px 36px; border-bottom: 1px solid var(--hairline-strong); +} +.rar-blog-masthead { + font-family: var(--serif); font-size: clamp(48px, 6vw, 84px); + font-weight: 500; line-height: 0.97; margin: 0; letter-spacing: -0.03em; +} +.rar-blog-subtitle { + font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; + text-transform: uppercase; color: var(--ink-muted); margin-top: 18px; +} +.rar-blog-body { padding: 48px 56px; } +.rar-blog-archive { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; } +.rar-blog-thumb { + aspect-ratio: 16/9; width: 100%; + background: repeating-linear-gradient(135deg, var(--manila-deep) 0px, var(--manila-deep) 14px, var(--manila-dark) 14px, var(--manila-dark) 28px); + overflow: hidden; +} +.rar-blog-thumb img { width: 100%; height: 100%; object-fit: cover; } +.rar-post-meta { + font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; + text-transform: uppercase; color: var(--stamp); margin: 12px 0 8px; +} +.rar-post-title { + font-family: var(--serif); font-size: 22px; font-weight: 500; + line-height: 1.2; letter-spacing: -0.015em; +} + +/* ───────── Single post ───────── */ +.rar-post-header { padding: 56px 56px 36px; border-bottom: 1px solid var(--hairline-strong); } +.rar-post-header h1 { + font-family: var(--serif); font-size: clamp(32px, 4vw, 60px); + font-weight: 500; line-height: 1.1; margin: 16px 0 0; letter-spacing: -0.025em; +} +.rar-post-content { max-width: 720px; margin: 0 auto; padding: 48px 56px; } +.rar-post-content p { font-size: 17px; line-height: 1.7; margin-bottom: 24px; } +.rar-post-content h2 { font-family: var(--serif); font-size: 32px; font-weight: 500; margin: 48px 0 16px; } +.rar-post-content h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 32px 0 12px; } +.rar-post-content blockquote { + border-left: 4px solid var(--stamp); padding-left: 24px; margin: 32px 0; + font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.4; + color: var(--ink-muted); +} + +/* ───────── About page ───────── */ +.rar-about-hero { + padding: 80px 56px; + display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; + border-bottom: 1px solid var(--hairline-strong); +} +.rar-about-hero h1 { + font-family: var(--serif); font-size: clamp(40px, 5vw, 72px); + font-weight: 500; line-height: 0.97; margin: 0 0 24px; letter-spacing: -0.03em; +} +.rar-about-manifesto { + font-size: 16px; line-height: 1.7; color: var(--ink-muted); +} +.rar-about-body { padding: 64px 56px; } +.rar-about-stats { + display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; + border: 1.5px solid var(--ink); margin: 48px 0; +} +.rar-about-stat { + padding: 32px 24px; border-right: 1px solid var(--hairline-strong); +} +.rar-about-stat:last-child { border-right: none; } +.rar-about-stat__num { font-family: var(--serif); font-size: 48px; font-weight: 500; line-height: 1; } +.rar-about-stat__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin-top: 8px; } + +/* ───────── Cart / Checkout ───────── */ +.rar-cart-page { padding: 48px 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; } +.rar-cart-header { + padding: 32px 56px; border-bottom: 1px solid var(--hairline-strong); +} +.rar-cart-header h1 { + font-family: var(--serif); font-size: 52px; font-weight: 500; + margin: 0; letter-spacing: -0.025em; +} +.rar-cart-item { + display: grid; grid-template-columns: 80px 1fr auto; + gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--hairline); + align-items: start; +} +.rar-cart-item__thumb { + width: 80px; aspect-ratio: 1; + background: repeating-linear-gradient(135deg, var(--manila-deep) 0 10px, var(--manila-dark) 10px 20px); + overflow: hidden; +} +.rar-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; } +.rar-cart-item__title { font-family: var(--serif); font-size: 18px; font-weight: 500; } +.rar-cart-item__meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-muted); margin-top: 4px; } +.rar-cart-item__price { font-family: var(--mono); font-size: 14px; font-weight: 600; } +.rar-cart-summary { + background: var(--paper); border: 1px solid var(--hairline-strong); + padding: 28px; position: sticky; top: 80px; +} +.rar-cart-summary__title { + font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; + text-transform: uppercase; margin-bottom: 20px; color: var(--ink-muted); +} +.rar-cart-line { + display: flex; justify-content: space-between; align-items: baseline; + padding: 8px 0; font-size: 14px; + border-bottom: 1px dashed var(--hairline); +} +.rar-cart-total { + display: flex; justify-content: space-between; align-items: baseline; + padding-top: 16px; margin-top: 8px; + font-family: var(--serif); font-size: 26px; font-weight: 500; +} + +/* ───────── WooCommerce Overrides ───────── */ +.woocommerce-page .woocommerce, .woocommerce { max-width: none !important; } +.woocommerce ul.products { margin: 0 !important; padding: 0 !important; } +.woocommerce ul.products li.product { margin: 0 !important; list-style: none; } +.woocommerce-product-gallery__wrapper { gap: 0 !important; } + +.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, +.woocommerce #respond input#submit { + font-family: var(--mono) !important; + font-size: 11px !important; + letter-spacing: 0.18em !important; + text-transform: uppercase !important; + padding: 14px 22px !important; + border-radius: 2px !important; + border: 1.5px solid var(--ink) !important; + background: var(--ink) !important; + color: var(--manila) !important; + transition: all 0.15s !important; +} +.woocommerce a.button:hover, .woocommerce button.button:hover, +.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { + background: var(--stamp) !important; + border-color: var(--stamp) !important; +} +.woocommerce a.button.alt, .woocommerce button.button.alt, +.woocommerce input.button.alt, .woocommerce #respond input#submit.alt { + background: var(--stamp) !important; + border-color: var(--stamp) !important; +} + +.woocommerce form .form-row input.input-text, +.woocommerce form .form-row textarea { + border: 1.5px solid var(--ink) !important; + border-radius: 2px !important; + font-family: var(--sans) !important; + padding: 12px 14px !important; + background: var(--paper) !important; + color: var(--ink) !important; +} +.woocommerce form .form-row input.input-text:focus, +.woocommerce form .form-row textarea:focus { + border-color: var(--stamp) !important; + outline: none !important; + box-shadow: none !important; +} + +.woocommerce-checkout .woocommerce-checkout-payment { + background: var(--paper) !important; + border: 1px solid var(--hairline-strong) !important; + border-radius: 2px !important; +} + +.woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message { + border-top: 3px solid var(--stamp) !important; + border-radius: 2px !important; + font-family: var(--mono) !important; +} + +/* Price styling */ +.woocommerce span.price, .woocommerce ins .amount { + font-family: var(--serif) !important; + font-size: 16px !important; + font-weight: 500 !important; + color: var(--ink) !important; +} +.woocommerce del { color: var(--ink-faint) !important; } + +/* Star ratings */ +.woocommerce .star-rating span::before { color: var(--stamp) !important; } +.woocommerce .star-rating { color: var(--stamp) !important; } + +/* Pagination */ +.woocommerce nav.woocommerce-pagination ul li a, +.woocommerce nav.woocommerce-pagination ul li span { + font-family: var(--mono) !important; + border: 1px solid var(--ink) !important; + padding: 8px 12px !important; +} +.woocommerce nav.woocommerce-pagination ul li span.current { + background: var(--ink) !important; + color: var(--manila) !important; +} + +/* Tabs */ +.woocommerce div.product .woocommerce-tabs ul.tabs li a { + font-family: var(--mono) !important; + font-size: 11px !important; + letter-spacing: 0.16em !important; + text-transform: uppercase !important; +} +.woocommerce div.product .woocommerce-tabs ul.tabs li.active { + background: var(--paper) !important; + border-bottom-color: var(--paper) !important; +} + +/* Cart table */ +.woocommerce table.cart, .woocommerce-cart table.cart { + font-family: var(--sans) !important; +} +.woocommerce table.cart td { border-bottom: 1px solid var(--hairline) !important; } +.woocommerce table.cart .product-name a { font-family: var(--serif) !important; font-size: 16px !important; } + +/* Notices */ +.woocommerce-store-notice { background: var(--stamp) !important; color: var(--manila) !important; } + +/* ───────── Responsive ───────── */ +@media (max-width: 1024px) { + .rar-hero__grid, .rar-product-detail, .rar-cart-page { grid-template-columns: 1fr; } + .rar-cats__grid, .rar-products__grid, .rar-designs__grid { grid-template-columns: repeat(2, 1fr); } + .rar-footer__grid { grid-template-columns: 1fr 1fr; } + .rar-cat-layout { grid-template-columns: 1fr; } + .rar-filter-sidebar { display: none; } + .rar-nav__links { display: none; } + .rar-editorial__press { gap: 24px; } + .rar-metrics { grid-template-columns: repeat(2, 1fr); } + .rar-about-hero { grid-template-columns: 1fr; } + .rar-review-grid { grid-template-columns: 1fr; } + .rar-blog-grid, .rar-blog-archive { grid-template-columns: 1fr 1fr; } +} + +@media (max-width: 640px) { + .rar-hero, .rar-cats, .rar-products, .rar-designs, .rar-editorial, + .rar-blog-section, .rar-breadcrumb, .rar-toolbar, .rar-cat-hero, + .rar-cat-layout, .rar-reviews, .rar-blog-header, .rar-blog-body, + .rar-post-header, .rar-post-content, .rar-about-hero, .rar-about-body, + .rar-cart-header, .rar-cart-page { padding-left: 20px; padding-right: 20px; } + .rar-cats__grid, .rar-products__grid, .rar-designs__grid, + .rar-blog-grid, .rar-blog-archive, .rar-review-grid { grid-template-columns: 1fr; } + .rar-nav { padding: 10px 16px; } + .rar-footer { padding: 40px 20px 20px; } + .rar-footer__grid { grid-template-columns: 1fr; gap: 24px; } + .rar-metrics { grid-template-columns: repeat(2, 1fr); } + .rar-editorial__quote { font-size: 26px; } + .rar-about-stats { grid-template-columns: repeat(2, 1fr); } + .rar-gallery { grid-template-columns: 1fr; } + .rar-gallery__thumbs { flex-direction: row; } +} diff --git a/theme/woocommerce/archive-product.php b/theme/woocommerce/archive-product.php new file mode 100644 index 0000000..20a255a --- /dev/null +++ b/theme/woocommerce/archive-product.php @@ -0,0 +1,236 @@ +name : 'Shop'; +$cat_desc = $is_category ? $term->description : ''; +$cat_count = $is_category ? $term->count : wp_count_posts('product')->publish; +$cat_slug = $is_category ? $term->slug : 'shop'; + +// Category descriptions +$cat_desc_map = [ + 'mugs' => '47 ceramics, 12 enamels, and a few we honestly forgot to count. Dishwasher safe. Microwave safe. HR safe (mostly).', + 'canvas' => 'Print-on-demand wall art for the soul-tired and decoratively passive-aggressive.', + 'planners' => 'For the person who plans a lot and does a little. Or the other way around.', + 'apparel' => 'Wear your grievances. Business casual with a quiet fury.', +]; +if (empty($cat_desc)) { + $cat_desc = $cat_desc_map[$cat_slug] ?? 'The complete collection. Curated for the chronically employed.'; +} + +// Sort order +$orderby = isset($_GET['orderby']) ? sanitize_text_field($_GET['orderby']) : 'menu_order'; +?> + + +
+ Shop / + + Departments / + + + All Products + +
+ + +
+ +
DEPT. ·
+ +
+
+

+ .
+ +

+
+
+

+
+ ITEMS + · + FREE SHIP OVER $40 +
+
+
+
+ + +
+
+ Showing + +
+
+ +
+ + +
+ + +
+ +
+ query->get_catalog_ordering_args(); + foreach (wc_get_catalog_ordering_args() as $val => $opt) { + $current = (isset($_GET['orderby']) ? $_GET['orderby'] : get_option('woocommerce_default_catalog_orderby')) === $val; + $url = add_query_arg('orderby', $val); + echo '' . esc_html($opt) . ''; + } + ?> +
+
+
+
+ + +
+ + + + + +
+
+ get_image_id(); + $img_url = $img_id ? wp_get_attachment_image_url($img_id, 'rar-product-card') : ''; + $sku = $product->get_sku() ?: 'SKU-' . $product->get_id(); + $cats = get_the_terms(get_the_ID(), 'product_cat'); + $catname = $cats ? $cats[0]->name : ''; + $price = $product->get_price_html(); + $url = get_permalink(); + $stock = $product->get_stock_status(); + $tag = $product->is_featured() ? 'Featured' : ''; + if ($product->is_on_sale()) $tag = 'Sale'; + if ($stock === 'onbackorder') $tag = 'Backorder'; + $stock_label = $stock === 'instock' ? 'IN STOCK' : ($stock === 'onbackorder' ? 'BACKORDER' : 'OUT OF STOCK'); + $stock_color = $stock === 'instock' ? 'var(--olive-dark)' : ($stock === 'onbackorder' ? 'var(--ink-faint)' : 'var(--stamp)'); + ?> + +
+
SKU
+ +
+ + + <?php echo esc_attr($product->get_name()); ?> + +
get_name())); ?>
+ +
+
+ +
+ +
get_name()); ?>
+
+ + +
+
+ + No products found. The warehouse is confused.

'; + endif; + ?> +
+ + +
+ + Page of max_num_pages); ?> + +
+ 2, + 'prev_text' => '‹', + 'next_text' => '›', + 'screen_reader_text' => ' ', + 'before_page_number' => '', + 'after_page_number' => '', + ]); + ?> +
+
+
+
+ + diff --git a/theme/woocommerce/single-product.php b/theme/woocommerce/single-product.php new file mode 100644 index 0000000..fb43154 --- /dev/null +++ b/theme/woocommerce/single-product.php @@ -0,0 +1,209 @@ +get_sku() ?: 'SKU-' . $product->get_id(); +$cats = get_the_terms(get_the_ID(), 'product_cat'); +$catname = $cats ? $cats[0]->name : 'Product'; +$cat_url = $cats ? get_term_link($cats[0]) : get_permalink(wc_get_page_id('shop')); +$gallery_ids = $product->get_gallery_image_ids(); +$main_img_id = $product->get_image_id(); +$all_imgs = $main_img_id ? array_merge([$main_img_id], $gallery_ids) : $gallery_ids; +$price = $product->get_price_html(); +$stock = $product->get_stock_status(); +$stock_label = $stock === 'instock' ? '● IN STOCK' : ($stock === 'onbackorder' ? '◐ BACKORDER' : '○ OUT OF STOCK'); +$stock_color = $stock === 'instock' ? 'var(--olive-dark)' : ($stock === 'onbackorder' ? 'var(--stamp)' : 'var(--ink-faint)'); +?> + + +
+ Shop / + / + +
+ + +
+ + + + + +
+
+ · get_type())); ?> · +
+ +

+ + get_short_description()) : ?> +

get_short_description()); ?>

+ + + +
+ get_rating_count() > 0) : ?> + get_average_rating()); ?> + + get_average_rating()); ?> · get_rating_count()); ?> reviews + + · + + + + +
+ + +
+
USD · ship $4.50 · free over $40
+ + + get_description()) : ?> +
get_description(), 40)); ?>
+ + + + + + + get_attributes(); ?> + +
+
SECTION 4-A · SPECIFICATIONS
+
    + get_name()); + $attr_vals = $attr->is_taxonomy() + ? wc_get_product_terms($product->get_id(), $attr->get_name(), ['fields' => 'names']) + : $attr->get_options(); + ?> +
  • + . + : +
    • + +
+
+ + + +
+
+
Ships
+
In 3-5 biz days · USPS
+
+
+
Returns
+
30-day grievance window
+
+
+
Origin
+
Cleveland, OH
+
+
+
Stock
+
get_stock_quantity() ?? '—'); ?> units
+
+
+
+
+ + +
+ +
+ + +get_rating_count() > 0) : ?> +
+ get_rating_count()) . ' REVIEWS
AVG. ' . esc_html($product->get_average_rating()) . ' ★'); ?> + +
+ + + +get_id(), 3); +if (!empty($related_ids)) : + $related_products = array_filter(array_map('wc_get_product', $related_ids)); + ?> +
+ +
+ get_image_id(); + $ru = $ri ? wp_get_attachment_image_url($ri, 'rar-product-card') : ''; + $rc = get_the_terms($rp->get_id(), 'product_cat'); + $rcat = $rc ? $rc[0]->name : ''; + ?> + +
+
SKU get_sku() ?: $rp->get_id()); ?>
+ + <?php echo esc_attr($rp->get_name()); ?> + +
get_name())); ?>
+ +
+
+
+
get_name()); ?>
+
+ get_price_html()); ?> + → +
+
+ + +
+
+ + +