Implement lower-priority UX enhancements
- Add subtle noise texture overlay for luxury feel (body::before) - Optimize mobile homepage: service cards 2-up layout, reduced padding/sizes - Add agent contact details section above gallery/listings on profile pages - Create Join Our Team recruitment page with benefits grid and team preview - Enhance Buyers/Sellers guide cards with visual section, gradient backgrounds 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
+1
-1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,204 @@
|
||||
<?php
|
||||
/**
|
||||
* Template Name: Join Our Team
|
||||
* Template for displaying the recruitment/careers page
|
||||
*
|
||||
* @package HomeProz
|
||||
*/
|
||||
|
||||
// Prevent direct access
|
||||
if (!defined('ABSPATH')) {
|
||||
exit;
|
||||
}
|
||||
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<main id="primary" class="site-main join-page-main">
|
||||
|
||||
<?php
|
||||
// Get hero content from ACF or defaults
|
||||
$hero_title = get_field('hero_title') ?: 'Join Our Team';
|
||||
$hero_subtitle = get_field('hero_subtitle') ?: 'Build your real estate career with HomeProz in Albert Lea and surrounding communities.';
|
||||
$hero_bg = get_field('hero_background');
|
||||
$has_bg_class = $hero_bg ? 'has-background' : '';
|
||||
$bg_style = $hero_bg ? 'style="background-image: url(' . esc_url($hero_bg) . ');"' : '';
|
||||
?>
|
||||
<!-- Archive Hero -->
|
||||
<section class="archive-hero <?php echo esc_attr($has_bg_class); ?>" <?php echo $bg_style; ?>>
|
||||
<?php if ($hero_bg) : ?>
|
||||
<div class="archive-hero-overlay"></div>
|
||||
<?php endif; ?>
|
||||
<div class="container">
|
||||
<h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
|
||||
<?php if ($hero_subtitle) : ?>
|
||||
<p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Join Section -->
|
||||
<section class="join-why-section">
|
||||
<div class="container">
|
||||
<div class="join-intro">
|
||||
<?php
|
||||
// Page content from editor
|
||||
while (have_posts()) :
|
||||
the_post();
|
||||
if (get_the_content()) :
|
||||
the_content();
|
||||
else :
|
||||
// Default content if none provided
|
||||
?>
|
||||
<p>HomeProz Real Estate is always looking for talented, driven individuals to join our growing team. Whether you're an experienced agent or just starting your real estate career, we offer the support, training, and resources you need to succeed.</p>
|
||||
<?php
|
||||
endif;
|
||||
endwhile;
|
||||
?>
|
||||
</div>
|
||||
|
||||
<div class="join-benefits-grid">
|
||||
<div class="join-benefit-card">
|
||||
<div class="join-benefit-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="join-benefit-title">Supportive Team</h3>
|
||||
<p class="join-benefit-text">Work alongside experienced professionals who are invested in your success and growth.</p>
|
||||
</div>
|
||||
|
||||
<div class="join-benefit-card">
|
||||
<div class="join-benefit-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="join-benefit-title">Training & Development</h3>
|
||||
<p class="join-benefit-text">Continuous learning opportunities to sharpen your skills and stay ahead in the market.</p>
|
||||
</div>
|
||||
|
||||
<div class="join-benefit-card">
|
||||
<div class="join-benefit-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="3" y1="9" x2="21" y2="9"/>
|
||||
<line x1="9" y1="21" x2="9" y2="9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="join-benefit-title">Marketing Support</h3>
|
||||
<p class="join-benefit-text">Professional marketing tools and resources to help you showcase properties effectively.</p>
|
||||
</div>
|
||||
|
||||
<div class="join-benefit-card">
|
||||
<div class="join-benefit-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="join-benefit-title">Local Expertise</h3>
|
||||
<p class="join-benefit-text">Deep knowledge of Albert Lea and surrounding Minnesota communities to serve clients better.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Current Team Preview -->
|
||||
<section class="join-team-section">
|
||||
<div class="container">
|
||||
<header class="join-team-header">
|
||||
<h2 class="join-team-title">Meet the Team</h2>
|
||||
<p class="join-team-subtitle">Get to know the professionals you'll be working with</p>
|
||||
</header>
|
||||
|
||||
<?php
|
||||
// Query active agents (limit to 4 for preview)
|
||||
$all_agents = get_posts([
|
||||
'post_type' => 'agent',
|
||||
'posts_per_page' => -1,
|
||||
'post_status' => 'publish',
|
||||
]);
|
||||
|
||||
// Filter out disabled agents
|
||||
$agents = [];
|
||||
foreach ($all_agents as $agent) {
|
||||
$disabled = get_field('agent_disabled', $agent->ID);
|
||||
if (!$disabled) {
|
||||
$order = get_field('agent_order', $agent->ID);
|
||||
$agents[] = [
|
||||
'post' => $agent,
|
||||
'order' => $order ? (int) $order : 10,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by order
|
||||
usort($agents, function($a, $b) {
|
||||
return $a['order'] - $b['order'];
|
||||
});
|
||||
|
||||
// Limit to 4
|
||||
$agents = array_slice($agents, 0, 4);
|
||||
?>
|
||||
|
||||
<?php if (!empty($agents)) : ?>
|
||||
<div class="join-team-grid">
|
||||
<?php foreach ($agents as $agent_item) :
|
||||
$agent = $agent_item['post'];
|
||||
$agent_title = get_field('agent_title', $agent->ID);
|
||||
$agent_photo_id = get_post_thumbnail_id($agent->ID);
|
||||
$agent_photo_url = $agent_photo_id ? wp_get_attachment_image_url($agent_photo_id, 'medium') : '';
|
||||
?>
|
||||
<div class="join-team-member">
|
||||
<div class="join-team-photo">
|
||||
<?php if ($agent_photo_url) : ?>
|
||||
<img src="<?php echo esc_url($agent_photo_url); ?>" alt="<?php echo esc_attr($agent->post_title); ?>">
|
||||
<?php else : ?>
|
||||
<div class="join-team-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<h3 class="join-team-name"><?php echo esc_html($agent->post_title); ?></h3>
|
||||
<?php if ($agent_title) : ?>
|
||||
<p class="join-team-role"><?php echo esc_html($agent_title); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="join-team-cta">
|
||||
<a href="<?php echo esc_url(home_url('/about/')); ?>" class="btn btn-secondary">
|
||||
View Full Team
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php
|
||||
// Contact CTA Section
|
||||
get_template_part('template-parts/components/cta-section', null, array(
|
||||
'title' => 'Ready to Start Your Journey?',
|
||||
'text' => 'Contact us to learn more about opportunities at HomeProz Real Estate.',
|
||||
'button_text' => 'Get in Touch',
|
||||
'button_url' => home_url('/contact/'),
|
||||
'style' => 'accent',
|
||||
));
|
||||
?>
|
||||
|
||||
</main>
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
@@ -48,42 +48,70 @@ $resource_pages = get_pages(array(
|
||||
<div class="container">
|
||||
<div class="resources-featured-grid">
|
||||
<!-- Buyer's Guide -->
|
||||
<div class="resource-featured-card">
|
||||
<article class="resource-featured-card resource-featured-card--buyer">
|
||||
<a href="<?php echo esc_url(home_url('/resources/buyers-guide/')); ?>" class="resource-card-link-overlay" aria-hidden="true" tabindex="-1"></a>
|
||||
<div class="resource-featured-icon">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
<div class="resource-featured-visual">
|
||||
<div class="resource-featured-badge">Guide</div>
|
||||
<div class="resource-featured-icon-large">
|
||||
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="resource-featured-title">Buyer's Guide</h2>
|
||||
<p class="resource-featured-description">
|
||||
Ready to buy your first home or next property? Our comprehensive guide walks you through every step of the home buying process, from getting pre-approved to closing day.
|
||||
</p>
|
||||
<span class="btn btn-primary">
|
||||
Read the Buyer's Guide
|
||||
</span>
|
||||
</div>
|
||||
<div class="resource-featured-content">
|
||||
<h2 class="resource-featured-title">Buyer's Guide</h2>
|
||||
<p class="resource-featured-description">
|
||||
Ready to buy your first home or next property? Our comprehensive guide walks you through every step of the home buying process, from getting pre-approved to closing day.
|
||||
</p>
|
||||
<ul class="resource-featured-highlights">
|
||||
<li>Getting Pre-Approved</li>
|
||||
<li>Finding Your Dream Home</li>
|
||||
<li>Making an Offer</li>
|
||||
<li>Closing Day</li>
|
||||
</ul>
|
||||
<span class="btn btn-primary">
|
||||
Read the Guide
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Seller's Guide -->
|
||||
<div class="resource-featured-card">
|
||||
<article class="resource-featured-card resource-featured-card--seller">
|
||||
<a href="<?php echo esc_url(home_url('/resources/sellers-guide/')); ?>" class="resource-card-link-overlay" aria-hidden="true" tabindex="-1"></a>
|
||||
<div class="resource-featured-icon">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
<line x1="12" y1="11" x2="12" y2="17"/>
|
||||
<line x1="9" y1="14" x2="15" y2="14"/>
|
||||
</svg>
|
||||
<div class="resource-featured-visual">
|
||||
<div class="resource-featured-badge">Guide</div>
|
||||
<div class="resource-featured-icon-large">
|
||||
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
<line x1="12" y1="11" x2="12" y2="17"/>
|
||||
<line x1="9" y1="14" x2="15" y2="14"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="resource-featured-title">Seller's Guide</h2>
|
||||
<p class="resource-featured-description">
|
||||
Thinking about selling? Learn how to prepare your home for the market, price it right, and navigate the selling process to get the best possible return on your investment.
|
||||
</p>
|
||||
<span class="btn btn-primary">
|
||||
Read the Seller's Guide
|
||||
</span>
|
||||
</div>
|
||||
<div class="resource-featured-content">
|
||||
<h2 class="resource-featured-title">Seller's Guide</h2>
|
||||
<p class="resource-featured-description">
|
||||
Thinking about selling? Learn how to prepare your home for the market, price it right, and navigate the selling process to get the best possible return.
|
||||
</p>
|
||||
<ul class="resource-featured-highlights">
|
||||
<li>Preparing Your Home</li>
|
||||
<li>Pricing Strategies</li>
|
||||
<li>Marketing Your Property</li>
|
||||
<li>Negotiating Offers</li>
|
||||
</ul>
|
||||
<span class="btn btn-primary">
|
||||
Read the Guide
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -160,6 +160,53 @@ while (have_posts()) :
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Contact Details (mobile-friendly, above listings) -->
|
||||
<?php if ($agent_phone || $agent_email) : ?>
|
||||
<section class="agent-section agent-contact-details">
|
||||
<h2 class="section-title">Contact <?php the_title(); ?></h2>
|
||||
<div class="contact-details-grid">
|
||||
<?php if ($agent_phone) : ?>
|
||||
<a href="tel:<?php echo esc_attr(preg_replace('/[^0-9]/', '', $agent_phone)); ?>" class="contact-detail-item">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||||
</svg>
|
||||
<div class="contact-detail-content">
|
||||
<span class="contact-detail-label">Phone</span>
|
||||
<span class="contact-detail-value"><?php echo esc_html($agent_phone); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($agent_email) : ?>
|
||||
<a href="mailto:<?php echo esc_attr($agent_email); ?>" class="contact-detail-item">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
<div class="contact-detail-content">
|
||||
<span class="contact-detail-label">Email</span>
|
||||
<span class="contact-detail-value"><?php echo esc_html($agent_email); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($agent_website) : ?>
|
||||
<a href="<?php echo esc_url($agent_website); ?>" target="_blank" rel="noopener noreferrer" class="contact-detail-item">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="2" y1="12" x2="22" y2="12"/>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||
</svg>
|
||||
<div class="contact-detail-content">
|
||||
<span class="contact-detail-label">Website</span>
|
||||
<span class="contact-detail-value">Visit Website</span>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Photo Gallery -->
|
||||
<?php if ($agent_gallery && is_array($agent_gallery) && count($agent_gallery) > 0) : ?>
|
||||
<section class="agent-section agent-gallery-section">
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
@import '../template-parts/content/content-404.scss';
|
||||
@import '../template-parts/content/content-homepage.scss';
|
||||
@import '../template-parts/content/content-about.scss';
|
||||
@import '../template-parts/content/content-join.scss';
|
||||
@import '../template-parts/content/content-contact.scss';
|
||||
@import '../template-parts/content/content-archive.scss';
|
||||
@import '../template-parts/sidebar/blog-sidebar.scss';
|
||||
@@ -85,6 +86,20 @@ body {
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
// Subtle noise texture overlay for luxury feel
|
||||
&::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
opacity: 0.03;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
|
||||
@@ -186,6 +186,69 @@
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
// Contact Details Section (above listings)
|
||||
.agent-contact-details {
|
||||
background-color: var(--color-bg-card);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
|
||||
.contact-details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-bg-dark);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.375rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-accent);
|
||||
background-color: rgba(159, 55, 48, 0.1);
|
||||
}
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-detail-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.contact-detail-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.contact-detail-value {
|
||||
font-size: 1rem;
|
||||
color: var(--color-text);
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
// Biography
|
||||
.agent-bio {
|
||||
.agent-short-bio {
|
||||
|
||||
@@ -7,11 +7,19 @@
|
||||
.service-cards-section {
|
||||
padding: 5rem 0;
|
||||
background-color: var(--color-bg-card);
|
||||
|
||||
@media (max-width: 640px) {
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.service-cards-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.service-cards-title {
|
||||
@@ -23,6 +31,11 @@
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.service-cards-subtitle {
|
||||
@@ -30,6 +43,10 @@
|
||||
color: var(--color-text-muted);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.service-cards-grid {
|
||||
@@ -42,8 +59,8 @@
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,6 +81,10 @@
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.service-card-link-overlay {
|
||||
@@ -85,6 +106,17 @@
|
||||
background-color: rgba(159, 55, 48, 0.1);
|
||||
border-radius: 50%;
|
||||
color: var(--color-accent);
|
||||
|
||||
@media (max-width: 640px) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-card-title {
|
||||
@@ -92,6 +124,11 @@
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.service-card-description {
|
||||
@@ -99,6 +136,12 @@
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.service-card-btn {
|
||||
@@ -113,6 +156,16 @@
|
||||
&:hover svg {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline button variant (if not already defined)
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* Join Our Team Page Styles
|
||||
*
|
||||
* @package HomeProz
|
||||
*/
|
||||
|
||||
.Join_Page {
|
||||
.join-page-main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Intro Section
|
||||
.join-why-section {
|
||||
padding: 4rem 0;
|
||||
background-color: var(--color-bg-dark);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.join-intro {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 3rem;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
// Benefits Grid
|
||||
.join-benefits-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.5rem;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.join-benefit-card {
|
||||
background-color: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.join-benefit-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 1rem;
|
||||
background-color: rgba(159, 55, 48, 0.1);
|
||||
border-radius: 50%;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.join-benefit-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.join-benefit-text {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Team Preview Section
|
||||
.join-team-section {
|
||||
padding: 4rem 0;
|
||||
background-color: var(--color-bg-card);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.join-team-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.join-team-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2.25rem;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.join-team-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.join-team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.join-team-member {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.join-team-photo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto 1rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--color-border);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.join-team-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-bg-dark);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.join-team-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.join-team-role {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.join-team-cta {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -26,20 +26,29 @@
|
||||
|
||||
.resource-featured-card {
|
||||
position: relative;
|
||||
background-color: var(--color-bg-dark);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 2.5rem;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-accent);
|
||||
|
||||
.resource-featured-visual {
|
||||
background-size: 110%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: var(--color-accent-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-card-link-overlay {
|
||||
@@ -51,30 +60,140 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.resource-featured-icon {
|
||||
.resource-featured-visual {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 1.5rem;
|
||||
background-color: rgba(159, 55, 48, 0.1);
|
||||
min-height: 200px;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
width: 200px;
|
||||
min-height: 280px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-featured-card--buyer .resource-featured-visual {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2d1f1f 50%, #3d2a2a 100%);
|
||||
|
||||
&::before {
|
||||
background: radial-gradient(circle at 30% 70%, rgba(159, 55, 48, 0.2) 0%, transparent 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.resource-featured-card--seller .resource-featured-visual {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #1f2d1f 50%, #2a3d2a 100%);
|
||||
|
||||
&::before {
|
||||
background: radial-gradient(circle at 70% 30%, rgba(46, 125, 50, 0.2) 0%, transparent 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.resource-featured-badge {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.resource-featured-icon-large {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
color: var(--color-accent);
|
||||
|
||||
@media (max-width: 639px) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
svg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resource-featured-content {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-featured-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.75rem;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-featured-description {
|
||||
font-size: 1rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.resource-featured-highlights {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 1.5rem 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.5rem;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-muted);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.resources-additional-section {
|
||||
|
||||
Reference in New Issue
Block a user