Initial commit - Payfrit WordPress theme
This commit is contained in:
John Mizerek
commit
6fdb5259ae
16 changed files with 1093 additions and 0 deletions
18
footer.php
Normal file
18
footer.php
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<ul class="footer-links">
|
||||
<li><a href="<?php echo home_url('/restaurants/'); ?>">Restaurants</a></li>
|
||||
<li><a href="<?php echo home_url('/how-payfrit-works/'); ?>">How Payfrit Works</a></li>
|
||||
<li><a href="<?php echo payfrit_get_option('login_url'); ?>">Login</a></li>
|
||||
</ul>
|
||||
<p class="footer-copy">© <?php echo date('Y'); ?> Payfrit</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
103
front-page.php
Normal file
103
front-page.php
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<?php
|
||||
/**
|
||||
* Template Name: Home
|
||||
* Home page template
|
||||
*/
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-bg">
|
||||
<!-- Replace with actual hero image -->
|
||||
<?php echo payfrit_image('hero'); ?>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1>Pay the way you already live.</h1>
|
||||
<p class="subhead">Order, pay, and get service from your phone — without waiting, scanning, or awkward moments.</p>
|
||||
<div class="hero-ctas">
|
||||
<?php echo payfrit_cta_button('signup', 'btn btn-primary', 'Create account'); ?>
|
||||
<a href="<?php echo home_url('/restaurants/'); ?>" class="btn btn-secondary">Restaurants</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why it feels better -->
|
||||
<section class="features">
|
||||
<div class="container">
|
||||
<div class="features-header">
|
||||
<h2>Why it feels better</h2>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<h3>Sit anywhere</h3>
|
||||
<p>Pick your spot. The table, the bar, the patio. You're not waiting to be seated.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Order when you're ready</h3>
|
||||
<p>Browse the menu on your phone. Add things when you want them. No flagging anyone down.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Pay instantly</h3>
|
||||
<p>When you're done, you're done. No waiting for the check. No awkward card handoff.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Leave when you want</h3>
|
||||
<p>Your time is yours. Stay for another round or head out. You're in control.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- For Restaurants -->
|
||||
<section class="for-restaurants">
|
||||
<div class="container">
|
||||
<div class="split-content">
|
||||
<div class="split-text">
|
||||
<h2>For restaurants</h2>
|
||||
<p class="subhead">Modern ordering and payment — without replacing your POS.</p>
|
||||
<ul>
|
||||
<li>Guests order and pay from their phone</li>
|
||||
<li>Staff stays in control</li>
|
||||
<li>Tables, bars, seats, anywhere</li>
|
||||
<li>Cash, card, or balance — your rules</li>
|
||||
</ul>
|
||||
<?php echo payfrit_cta_button('signup', 'btn btn-primary', 'Restaurant onboarding'); ?>
|
||||
<p class="small-text">No contracts. Ever.</p>
|
||||
</div>
|
||||
<div class="split-image">
|
||||
<!-- Replace with actual KDS/kitchen image -->
|
||||
<?php echo payfrit_image('kds', 'Kitchen display system'); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How it works -->
|
||||
<section class="how-it-works">
|
||||
<div class="container">
|
||||
<h2>How it works</h2>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<span class="step-number">1</span>
|
||||
<h3>Sit anywhere</h3>
|
||||
<p>Pick a table, grab a seat at the bar, find your spot.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-number">2</span>
|
||||
<h3>Order and pay from your phone</h3>
|
||||
<p>Browse the menu, order what you want, pay when you're ready.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-number">3</span>
|
||||
<h3>Food and service arrive</h3>
|
||||
<p>That's it. Enjoy your meal.</p>
|
||||
</div>
|
||||
</div>
|
||||
<?php echo payfrit_cta_button('signup', 'btn btn-primary', 'Create account'); ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
85
functions.php
Normal file
85
functions.php
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<?php
|
||||
/**
|
||||
* Payfrit Theme Functions
|
||||
*/
|
||||
|
||||
// Theme setup
|
||||
function payfrit_setup() {
|
||||
add_theme_support('title-tag');
|
||||
add_theme_support('post-thumbnails');
|
||||
add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
|
||||
|
||||
register_nav_menus(array(
|
||||
'primary' => __('Primary Menu', 'payfrit'),
|
||||
'footer' => __('Footer Menu', 'payfrit'),
|
||||
));
|
||||
}
|
||||
add_action('after_setup_theme', 'payfrit_setup');
|
||||
|
||||
// Enqueue styles
|
||||
function payfrit_scripts() {
|
||||
wp_enqueue_style('payfrit-style', get_stylesheet_uri(), array(), '1.0');
|
||||
}
|
||||
add_action('wp_enqueue_scripts', 'payfrit_scripts');
|
||||
|
||||
// Remove WordPress junk from head
|
||||
remove_action('wp_head', 'wp_generator');
|
||||
remove_action('wp_head', 'wlwmanifest_link');
|
||||
remove_action('wp_head', 'rsd_link');
|
||||
remove_action('wp_head', 'wp_shortlink_wp_head');
|
||||
remove_action('wp_head', 'rest_output_link_wp_head');
|
||||
remove_action('wp_head', 'wp_oembed_add_discovery_links');
|
||||
remove_action('wp_head', 'print_emoji_detection_script', 7);
|
||||
remove_action('wp_print_styles', 'print_emoji_styles');
|
||||
|
||||
// Disable Gutenberg for pages (we're using custom templates)
|
||||
function payfrit_disable_gutenberg($current_status, $post_type) {
|
||||
if ($post_type === 'page') return false;
|
||||
return $current_status;
|
||||
}
|
||||
add_filter('use_block_editor_for_post_type', 'payfrit_disable_gutenberg', 10, 2);
|
||||
|
||||
// Custom image sizes
|
||||
add_image_size('hero', 1920, 1080, true);
|
||||
add_image_size('feature', 800, 600, true);
|
||||
|
||||
// Theme options - CTA URLs
|
||||
function payfrit_get_option($key) {
|
||||
$options = array(
|
||||
'signup_url' => 'https://biz.payfrit.com/portal/index.html',
|
||||
'login_url' => 'https://biz.payfrit.com/portal/index.html',
|
||||
'venues_email' => 'venues@payfrit.com',
|
||||
);
|
||||
return isset($options[$key]) ? $options[$key] : '';
|
||||
}
|
||||
|
||||
// Helper function for theme images
|
||||
function payfrit_image($name, $alt = '') {
|
||||
$uri = get_template_directory_uri();
|
||||
|
||||
// Map image names to their extensions
|
||||
$images = array(
|
||||
'hero' => 'png',
|
||||
'kds' => 'png',
|
||||
'crowd' => 'png',
|
||||
'diners-phone' => 'jpg',
|
||||
'diners-table' => 'jpg',
|
||||
'venue-kds' => 'jpg',
|
||||
);
|
||||
|
||||
$ext = isset($images[$name]) ? $images[$name] : 'jpg';
|
||||
return sprintf('<img src="%s/images/%s.%s" alt="%s">', $uri, esc_attr($name), $ext, esc_attr($alt));
|
||||
}
|
||||
|
||||
// Helper function for CTA buttons
|
||||
function payfrit_cta_button($type = 'signup', $class = 'btn btn-primary', $text = 'Create account') {
|
||||
$url = payfrit_get_option('signup_url');
|
||||
|
||||
if ($type === 'login') {
|
||||
$url = payfrit_get_option('login_url');
|
||||
} elseif ($type === 'venues') {
|
||||
$url = 'mailto:' . payfrit_get_option('venues_email') . '?subject=Large%20Venue%20Inquiry';
|
||||
}
|
||||
|
||||
return sprintf('<a href="%s" class="%s">%s</a>', esc_url($url), esc_attr($class), esc_html($text));
|
||||
}
|
||||
31
header.php
Normal file
31
header.php
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
<head>
|
||||
<meta charset="<?php bloginfo('charset'); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Pay the way you already live. Order, pay, and get service from your phone.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
<body <?php body_class(); ?>>
|
||||
|
||||
<header class="site-header">
|
||||
<nav class="nav-container">
|
||||
<a href="<?php echo home_url(); ?>" class="logo">Payfrit</a>
|
||||
|
||||
<button class="nav-toggle" aria-label="Toggle navigation" onclick="document.querySelector('.nav-links').classList.toggle('active')">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li><a href="<?php echo home_url('/restaurants/'); ?>">Restaurants</a></li>
|
||||
<li><a href="<?php echo home_url('/large-venues/'); ?>">Large Venues</a></li>
|
||||
<li><a href="<?php echo home_url('/how-payfrit-works/'); ?>">How Payfrit Works</a></li>
|
||||
<li><a href="<?php echo payfrit_get_option('login_url'); ?>" class="btn-login">Login</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
32
images/README.txt
Normal file
32
images/README.txt
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
PAYFRIT THEME - REQUIRED IMAGES
|
||||
================================
|
||||
|
||||
Place these images in this folder:
|
||||
|
||||
1. hero.jpg
|
||||
- Homepage hero background
|
||||
- People mid-meal, relaxed, NO visible phones
|
||||
- Warm lighting, candid feel
|
||||
- Size: 1920x1080 or larger
|
||||
|
||||
2. kds.jpg
|
||||
- Kitchen display system / staff using screen
|
||||
- Used on Home and Restaurants pages
|
||||
- Size: 800x600 or larger
|
||||
|
||||
3. diners-phone.jpg
|
||||
- People at restaurant using phones
|
||||
- Relaxed, natural, social
|
||||
- Size: 800x600 or larger
|
||||
|
||||
4. diners-table.jpg
|
||||
- Friends at table in restaurant
|
||||
- Size: 800x600 or larger
|
||||
|
||||
5. venue-kds.jpg
|
||||
- Large venue kitchen/operations
|
||||
- Size: 800x600 or larger
|
||||
|
||||
6. crowd.jpg (optional)
|
||||
- Stadium/venue crowd or concourse
|
||||
- Size: 800x600 or larger
|
||||
BIN
images/crowd.png
Normal file
BIN
images/crowd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
images/diners-phone.jpg
Normal file
BIN
images/diners-phone.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
images/diners-table.jpg
Normal file
BIN
images/diners-table.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
images/hero.png
Normal file
BIN
images/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
images/kds.png
Normal file
BIN
images/kds.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
images/venue-kds.jpg
Normal file
BIN
images/venue-kds.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
27
index.php
Normal file
27
index.php
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?php
|
||||
/**
|
||||
* Default template fallback
|
||||
* Redirects to home page since we only have specific page templates
|
||||
*/
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1><?php the_title(); ?></h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<?php
|
||||
if (have_posts()) :
|
||||
while (have_posts()) : the_post();
|
||||
the_content();
|
||||
endwhile;
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
63
page-how-it-works.php
Normal file
63
page-how-it-works.php
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<?php
|
||||
/**
|
||||
* Template Name: How It Works
|
||||
* How It Works page template
|
||||
*/
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>How Payfrit Works</h1>
|
||||
<p class="subhead">Three steps. That's it.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Steps -->
|
||||
<section class="how-it-works" style="padding-top: 0;">
|
||||
<div class="container">
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<span class="step-number">1</span>
|
||||
<h3>Sit anywhere</h3>
|
||||
<p>Pick a table, grab a seat at the bar, find your spot. No waiting to be seated.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-number">2</span>
|
||||
<h3>Order and pay from your phone</h3>
|
||||
<p>Browse the menu, add what you want, pay when you're ready. All from your phone.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-number">3</span>
|
||||
<h3>Food and service arrive</h3>
|
||||
<p>Your order goes to the kitchen. Food shows up. That's it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Visual Section -->
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<div class="split-content">
|
||||
<div class="split-image">
|
||||
<?php echo payfrit_image('diners-table', 'Friends at restaurant'); ?>
|
||||
</div>
|
||||
<div class="split-text">
|
||||
<h2>No app to download</h2>
|
||||
<p class="subhead">Works in your browser. Just open and order.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="how-it-works">
|
||||
<div class="container">
|
||||
<h2>Ready to try it?</h2>
|
||||
<?php echo payfrit_cta_button('signup', 'btn btn-primary', 'Create account'); ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
72
page-large-venues.php
Normal file
72
page-large-venues.php
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<?php
|
||||
/**
|
||||
* Template Name: Large Venues
|
||||
* Large Venues page template
|
||||
*/
|
||||
get_header();
|
||||
|
||||
// Build mailto link with body
|
||||
$email = 'venues@payfrit.com';
|
||||
$subject = rawurlencode('Large Venue Inquiry');
|
||||
$body = rawurlencode("Venue name:\n\nVenue type:\n\nApprox. monthly volume:\n\nPrimary challenge (e.g. halftime congestion):\n\nTimeline:\n\nComments:\n");
|
||||
$mailto = "mailto:{$email}?subject={$subject}&body={$body}";
|
||||
?>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>Large Venues</h1>
|
||||
<p class="subhead">Stadiums, arenas, casinos, festivals. Ordering and payment infrastructure built for scale.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content -->
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<div class="split-content">
|
||||
<div class="split-text">
|
||||
<h2>Operations at scale</h2>
|
||||
<ul>
|
||||
<li>Thousands of concurrent orders</li>
|
||||
<li>Multiple service points, one system</li>
|
||||
<li>Real-time kitchen and bar coordination</li>
|
||||
<li>Works alongside existing infrastructure</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="split-image">
|
||||
<?php echo payfrit_image('venue-kds', 'Venue operations'); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section reverse">
|
||||
<div class="container">
|
||||
<div class="split-content">
|
||||
<div class="split-text">
|
||||
<h2>Reduce wait times</h2>
|
||||
<ul>
|
||||
<li>Guests order from their seats</li>
|
||||
<li>No lines at concession stands</li>
|
||||
<li>Halftime rush becomes manageable</li>
|
||||
<li>More sales, better experience</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="split-image">
|
||||
<?php echo payfrit_image('crowd', 'Venue crowd'); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="how-it-works">
|
||||
<div class="container">
|
||||
<h2>Talk to us</h2>
|
||||
<p class="subhead" style="margin: 0 auto 40px;">Large venue deployments require coordination. Let's discuss your operation.</p>
|
||||
<a href="<?php echo $mailto; ?>" class="btn btn-primary">Large Venue Onboarding</a>
|
||||
<p class="venue-qualifier">Designed for venues operating at scale.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
68
page-restaurants.php
Normal file
68
page-restaurants.php
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<?php
|
||||
/**
|
||||
* Template Name: Restaurants
|
||||
* Restaurants page template
|
||||
*/
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>Restaurants</h1>
|
||||
<p class="subhead">Payfrit adds modern ordering and payment — without replacing your POS.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content -->
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<div class="split-content">
|
||||
<div class="split-text">
|
||||
<h2>Your guests, empowered</h2>
|
||||
<ul>
|
||||
<li>Customers order and pay from their phone</li>
|
||||
<li>No app download required</li>
|
||||
<li>Works at tables, bars, seats, anywhere</li>
|
||||
<li>Supports cash, card, and balance-based businesses</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="split-image">
|
||||
<?php echo payfrit_image('diners-phone', 'Diners using phones'); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section reverse">
|
||||
<div class="container">
|
||||
<div class="split-content">
|
||||
<div class="split-text">
|
||||
<h2>Staff remains in control</h2>
|
||||
<ul>
|
||||
<li>Orders appear on your kitchen display</li>
|
||||
<li>No hardware swaps needed</li>
|
||||
<li>Works alongside your existing POS</li>
|
||||
<li>Your staff, your workflow</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="split-image">
|
||||
<?php echo payfrit_image('kds', 'Kitchen display system'); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="how-it-works">
|
||||
<div class="container">
|
||||
<h2>Ready to get started?</h2>
|
||||
<p class="subhead" style="margin: 0 auto 40px;">No contracts. Ever.</p>
|
||||
<?php echo payfrit_cta_button('signup', 'btn btn-primary', 'Restaurant onboarding'); ?>
|
||||
<div class="mt-24">
|
||||
<?php echo payfrit_cta_button('signup', 'btn btn-link', 'Or create an account to explore'); ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
594
style.css
Normal file
594
style.css
Normal file
|
|
@ -0,0 +1,594 @@
|
|||
/*
|
||||
Theme Name: Payfrit v1
|
||||
Theme URI: https://payfrit.com
|
||||
Author: Payfrit
|
||||
Description: Clean, minimal theme for Payfrit - Pay the way you already live.
|
||||
Version: 1.0
|
||||
License: Proprietary
|
||||
Text Domain: payfrit-v1
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
CSS Variables
|
||||
======================================== */
|
||||
:root {
|
||||
--black: #0a0a0a;
|
||||
--black-light: #141414;
|
||||
--black-lighter: #1a1a1a;
|
||||
--green: #00ff88;
|
||||
--green-hover: #00cc6a;
|
||||
--green-dim: rgba(0, 255, 136, 0.1);
|
||||
--white: #ffffff;
|
||||
--gray: #a0a0a0;
|
||||
--gray-dark: #666666;
|
||||
--border: #2a2a2a;
|
||||
|
||||
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
--max-width: 1200px;
|
||||
--nav-height: 72px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Reset & Base
|
||||
======================================== */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Typography
|
||||
======================================== */
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.subhead {
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.35rem);
|
||||
color: var(--gray);
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Layout
|
||||
======================================== */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
section {
|
||||
padding: 64px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Navigation
|
||||
======================================== */
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: var(--nav-height);
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--white);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-size: 0.95rem;
|
||||
color: var(--gray);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.nav-links .btn-login {
|
||||
padding: 10px 20px;
|
||||
background: var(--black-lighter);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--white);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-links .btn-login:hover {
|
||||
background: var(--black-light);
|
||||
border-color: var(--gray-dark);
|
||||
}
|
||||
|
||||
/* Mobile Nav */
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.nav-toggle span {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--white);
|
||||
margin: 6px 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: var(--nav-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
flex-direction: column;
|
||||
background: var(--black);
|
||||
padding: 32px 24px;
|
||||
gap: 24px;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Buttons
|
||||
======================================== */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px 32px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--green);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--green-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--white);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--black-lighter);
|
||||
border-color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: var(--green);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Hero Section
|
||||
======================================== */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: var(--nav-height);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-bg img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.hero-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(10, 10, 10, 0.3) 0%,
|
||||
rgba(10, 10, 10, 0.7) 50%,
|
||||
rgba(10, 10, 10, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero .subhead {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.hero-ctas {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-ctas {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-ctas .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Features Grid
|
||||
======================================== */
|
||||
.features {
|
||||
background: var(--black-light);
|
||||
}
|
||||
|
||||
.features-header {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.features-header h2 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 32px;
|
||||
background: var(--black);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
margin-bottom: 12px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
For Restaurants Section
|
||||
======================================== */
|
||||
.for-restaurants {
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
.split-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.split-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.split-text h2 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.split-text ul {
|
||||
list-style: none;
|
||||
margin: 24px 0 32px;
|
||||
}
|
||||
|
||||
.split-text li {
|
||||
padding: 12px 0;
|
||||
padding-left: 28px;
|
||||
position: relative;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.split-text li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--green);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.split-image {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-dark);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
How It Works Section
|
||||
======================================== */
|
||||
.how-it-works {
|
||||
background: var(--black-light);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.how-it-works h2 {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 48px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.steps {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.step {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--green-dim);
|
||||
color: var(--green);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
margin-bottom: 8px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Page Headers
|
||||
======================================== */
|
||||
.page-header {
|
||||
padding-top: calc(var(--nav-height) + 80px);
|
||||
padding-bottom: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-header .subhead {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Content Sections
|
||||
======================================== */
|
||||
.content-section {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.content-section:nth-child(even) {
|
||||
background: var(--black-light);
|
||||
}
|
||||
|
||||
.content-section.reverse .split-content {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.content-section.reverse .split-content > * {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Large Venues
|
||||
======================================== */
|
||||
.venue-qualifier {
|
||||
font-size: 0.95rem;
|
||||
color: var(--gray-dark);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Footer
|
||||
======================================== */
|
||||
.site-footer {
|
||||
padding: 48px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
font-size: 0.95rem;
|
||||
color: var(--gray);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Utilities
|
||||
======================================== */
|
||||
.text-center { text-align: center; }
|
||||
.text-green { color: var(--green); }
|
||||
.mt-16 { margin-top: 16px; }
|
||||
.mt-24 { margin-top: 24px; }
|
||||
.mt-32 { margin-top: 32px; }
|
||||
.mb-16 { margin-bottom: 16px; }
|
||||
.mb-24 { margin-bottom: 24px; }
|
||||
.mb-32 { margin-bottom: 32px; }
|
||||
Reference in a new issue