diff --git a/pages/pricing.php b/pages/pricing.php index 5d1aeb6..77f4702 100644 --- a/pages/pricing.php +++ b/pages/pricing.php @@ -18,18 +18,18 @@ return <<<'ORIBI_SYNC_CONTENT' - - + + - + - - + + - + - + diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 5360e2b..ebe6b92 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -1973,6 +1973,44 @@ p:last-child { margin-bottom: 0; } } .pricing-card.featured { } + +/* Track Differentiation */ +.pricing-card[data-track="diy"] { + border-top: 4px solid var(--color-accent); +} +.pricing-card[data-track="diy"]:hover { + border-top-color: var(--color-accent-dk); +} + +.pricing-card[data-track="design"] { + border-top: 4px solid var(--color-primary); +} +.pricing-card[data-track="design"]:hover { + border-top-color: var(--color-primary-dk); +} + +/* Track Badge */ +.pricing-track-badge { + position: absolute; + top: 12px; + right: 12px; + background: transparent; + color: var(--color-text-muted); + font-size: .7rem; + font-weight: 700; + letter-spacing: .15em; + text-transform: uppercase; + padding: 0; + border-radius: 0; + margin: 0; +} +.pricing-card[data-track="diy"] .pricing-track-badge { + color: var(--color-accent-dk); +} +.pricing-card[data-track="design"] .pricing-track-badge { + color: var(--color-primary-dk); +} + .pricing-badge { position: absolute; top: -14px; diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 3c95322..08b281a 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -537,6 +537,7 @@ add_action('init', function () { 'btnUrl' => ['type' => 'string', 'default' => '/contact'], 'featured' => ['type' => 'boolean', 'default' => false], 'badge' => ['type' => 'string', 'default' => ''], + 'track' => ['type' => 'string', 'default' => ''], 'imgId' => ['type' => 'number', 'default' => 0], 'imgUrl' => ['type' => 'string', 'default' => ''], 'imgAlt' => ['type' => 'string', 'default' => ''], @@ -1424,6 +1425,7 @@ function oribi_render_pricing_section($a, $content, $block) function oribi_render_pricing_card($a) { $featured = !empty($a['featured']); + $track = !empty($a['track']) ? $a['track'] : ''; $img_id = !empty($a['imgId']) ? intval($a['imgId']) : 0; $img_url = !empty($a['imgUrl']) ? $a['imgUrl'] : ''; $img_alt = !empty($a['imgAlt']) ? $a['imgAlt'] : ''; @@ -1444,12 +1446,23 @@ function oribi_render_pricing_card($a) } } + // Track labels + $track_labels = [ + 'diy' => 'DIY', + 'design' => 'Full Service', + ]; + $track_label = isset($track_labels[$track]) ? $track_labels[$track] : ''; + ob_start(); ?> -