-
Loading…
+
+
+
+
+
Seit über 80 Jahren Vertrauen, Qualität und persönliche Beratung
+
Ein moderner Schmuckkatalog für Trauringe, Uhren und Goldschmiedeservice.
+
Entdecken Sie ausgewählte Kollektionen, lernen Sie unsere Services kennen und wechseln Sie mit einem Klick vom Stöbern zur persönlichen Beratung – telefonisch oder per E-Mail.
+
+
+
+
+
+
+
+
Store Snapshot
+
+
+ 80+
+ Jahre Erfahrung
+
+
+ 4
+ klare Katalogbereiche
+
+
+ 1
+ zentrale Anfrage pro Produkt
+
+
+
+
Wiesdorfer Platz 59
+
51373 Leverkusen · Beratung per Telefon und E-Mail
+
+
+
-
AppWizzy AI is collecting your requirements and applying the first changes.
-
This page will refresh automatically as the plan is implemented.
-
- Runtime: Django {{ django_version }} · Python {{ python_version }}
- — UTC {{ current_time|date:"Y-m-d H:i:s" }}
-
- Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
-
-{% endblock %}
\ No newline at end of file
+
+
+
+
+
+ {% for category in categories %}
+
+ {% endfor %}
+
+
+
+
+
+
+
Leistungen
+
Die wichtigsten Inhalte der bisherigen Website – jetzt klarer, schneller, moderner.
+
Die neue Startseite bündelt Trauringe, Schmuck, Uhren und Serviceleistungen in einem ruhigen, leicht navigierbaren Ablauf.
+
+
+ {% for item in service_highlights %}
+
+
+ {{ forloop.counter|stringformat:"02d" }}
+ {{ item.title }}
+ {{ item.text }}
+
+
+ {% endfor %}
+
+
+
+
+
+
+
+ Auswahl
+
Featured Katalog
+
+
Alle Produkte ansehen
+
+
+ {% for product in featured_products %}
+
+
+
+ {{ product.category.name }}
+
+
+
+
+
{{ product.category.name }}
+
{{ product.name }}
+
+
{{ product.price_label }}
+
+
{{ product.short_description }}
+
Details & Anfrage
+
+
+ {% empty %}
+
+
+
Der Katalog ist bereit.
+
Pflegen Sie jetzt Produkte im Admin ein, damit die Startseite automatisch die ersten Highlights zeigt.
+
Produkte im Admin anlegen
+
+
+ {% endfor %}
+
+
+
+
+
+
+
+ Ablauf
+
Vom Produkt zur persönlichen Beratung in drei einfachen Schritten.
+
+
+ {% for step in process_steps %}
+
+
+ {{ step.step }}
+ {{ step.title }}
+ {{ step.text }}
+
+
+ {% endfor %}
+
+
+
+
+
+{% endblock %}
diff --git a/core/templates/core/product_detail.html b/core/templates/core/product_detail.html
new file mode 100644
index 0000000..16d60a8
--- /dev/null
+++ b/core/templates/core/product_detail.html
@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+
+
← Zurück zum Katalog
+
+
+
{{ product.category.name }}
+
{{ product.name }}
+
{{ product.short_description }}
+
+
+
+
{{ product.price_label }}
+ {% if product.material %}
Material · {{ product.material }}
{% endif %}
+ {% if product.collection_note %}
{{ product.collection_note }}
{% endif %}
+
+
+
+
+
+
+
+
+
+
+
+ Über dieses Stück
+ {{ product.description }}
+
+
+
+
+ Warum diese neue Produktseite besser funktioniert
+
+ Klare Preis- und Materialhinweise.
+ Sofort sichtbare Kontaktoptionen per Telefon und E-Mail.
+ Direkte Verbindung in den Admin-gestützten Anfrage-Workflow.
+
+
+
+
+
+
+{% if related_products %}
+
+
+
+ Passend dazu
+
Weitere Stücke aus {{ product.category.name }}
+
+
+ {% for item in related_products %}
+
+
+ {{ item.category.name }}
+
+
{{ item.category.name }}
+
{{ item.name }}
+
{{ item.short_description }}
+
Details ansehen
+
+
+ {% endfor %}
+
+
+{% endif %}
+{% endblock %}
diff --git a/core/tests.py b/core/tests.py
index 7ce503c..931b5ce 100644
--- a/core/tests.py
+++ b/core/tests.py
@@ -1,3 +1,47 @@
from django.test import TestCase
+from django.urls import reverse
-# Create your tests here.
+from .models import Category, ContactInquiry, Product
+
+
+class CatalogFlowTests(TestCase):
+ def setUp(self):
+ self.category = Category.objects.create(
+ name="Trauringe",
+ slug="trauringe",
+ description="Individuelle Ringe und Beratung.",
+ sort_order=1,
+ )
+ self.product = Product.objects.create(
+ category=self.category,
+ name="Signature Trauring",
+ slug="signature-trauring",
+ short_description="Ein klassischer Ring mit warmem Goldton.",
+ description="Ausgewählte Trauringe mit Gravuroption und persönlicher Beratung.",
+ material="Gold",
+ price_from="1290.00",
+ is_featured=True,
+ )
+
+ def test_homepage_uses_catalog_content(self):
+ response = self.client.get(reverse("home"))
+ self.assertContains(response, self.product.name)
+ self.assertContains(response, self.category.name)
+
+ def test_contact_form_creates_inquiry(self):
+ response = self.client.post(
+ reverse("contact"),
+ {
+ "product": self.product.pk,
+ "name": "Anna Becker",
+ "email": "anna@example.com",
+ "phone": "+49 123",
+ "preferred_contact_method": "phone",
+ "subject": "Beratung",
+ "message": "Ich möchte einen Termin für Trauringe.",
+ },
+ )
+ self.assertRedirects(response, reverse("contact_success"))
+ self.assertEqual(ContactInquiry.objects.count(), 1)
+ inquiry = ContactInquiry.objects.first()
+ self.assertEqual(inquiry.product, self.product)
diff --git a/core/urls.py b/core/urls.py
index 6299e3d..442aad9 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -1,7 +1,11 @@
from django.urls import path
-from .views import home
+from .views import catalog, contact, contact_success, home, product_detail
urlpatterns = [
path("", home, name="home"),
+ path("katalog/", catalog, name="catalog"),
+ path("katalog/
/", product_detail, name="product_detail"),
+ path("kontakt/", contact, name="contact"),
+ path("kontakt/danke/", contact_success, name="contact_success"),
]
diff --git a/core/views.py b/core/views.py
index c9aed12..c2fc1ff 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,25 +1,186 @@
-import os
-import platform
+from django.conf import settings
+from django.core.mail import send_mail
+from django.db.models import Count, Q
+from django.shortcuts import get_object_or_404, redirect, render
-from django import get_version as django_version
-from django.shortcuts import render
-from django.utils import timezone
+from .forms import ContactInquiryForm
+from .models import Category, ContactInquiry, Product
+
+
+SERVICE_HIGHLIGHTS = [
+ {
+ "title": "Trauringe & Beratung",
+ "text": "Individuelle Beratung für Trauringe, Materialien und Gravuren – persönlich im Geschäft oder per Anfrage.",
+ },
+ {
+ "title": "Goldschmiedeservice",
+ "text": "Ringweitenänderung, Reinigung, Umarbeitung und Reparaturen mit viel Erfahrung und Fingerspitzengefühl.",
+ },
+ {
+ "title": "Uhren & Revision",
+ "text": "Ausgewählte Uhren und fachkundige Unterstützung bei Pflege, Wartung und Reparatur wertvoller Zeitmesser.",
+ },
+ {
+ "title": "Perlen, Ohrschmuck & Extras",
+ "text": "Perlkettenservice, Ohrlochstechen mit STUDEX-System sowie Geschenkgutscheine für besondere Anlässe.",
+ },
+]
+
+
+PROCESS_STEPS = [
+ {
+ "step": "01",
+ "title": "Kollektion entdecken",
+ "text": "Filtern Sie die Kollektion nach Kategorie und lassen Sie sich inspirieren.",
+ },
+ {
+ "step": "02",
+ "title": "Per Telefon oder E-Mail anfragen",
+ "text": "Zu jedem Produkt gelangen Sie in wenigen Klicks zur passenden Kontaktmöglichkeit.",
+ },
+ {
+ "step": "03",
+ "title": "Persönliche Beratung im Store",
+ "text": "Im Geschäft in Leverkusen klärt das Team Details, Anpassungen und Verfügbarkeit.",
+ },
+]
+
+
+def _catalog_categories():
+ return Category.objects.annotate(
+ product_total=Count("products", filter=Q(products__is_active=True))
+ )
+
+
+def _send_inquiry_notification(inquiry):
+ if not settings.CONTACT_EMAIL_TO:
+ return
+
+ subject = inquiry.subject or "Neue Anfrage über die Website"
+ lines = [
+ f"Name: {inquiry.name}",
+ f"E-Mail: {inquiry.email}",
+ f"Telefon: {inquiry.phone or '-'}",
+ f"Bevorzugte Kontaktart: {inquiry.get_preferred_contact_method_display()}",
+ f"Produkt: {inquiry.product.name if inquiry.product else 'Allgemeine Beratung'}",
+ "",
+ inquiry.message,
+ ]
+
+ try:
+ send_mail(
+ subject=f"Website-Anfrage: {subject}",
+ message="\n".join(lines),
+ from_email=settings.DEFAULT_FROM_EMAIL,
+ recipient_list=settings.CONTACT_EMAIL_TO,
+ fail_silently=True,
+ reply_to=[inquiry.email],
+ )
+ except Exception:
+ return
def home(request):
- """Render the landing screen with loader and environment details."""
- host_name = request.get_host().lower()
- agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
- now = timezone.now()
+ featured_products = Product.objects.filter(is_active=True, is_featured=True).select_related("category")[:4]
+ categories = _catalog_categories().filter(product_total__gt=0)
context = {
- "project_name": "New Style",
- "agent_brand": agent_brand,
- "django_version": django_version(),
- "python_version": platform.python_version(),
- "current_time": now,
- "host_name": host_name,
- "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
- "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+ "meta_title": "Juwelier Thelen | Moderner Schmuck- & Trauringkatalog",
+ "meta_description": "Moderner Katalog für Trauringe, Schmuck, Uhren und Goldschmiedeservice – mit schneller Kontaktaufnahme per Telefon oder E-Mail.",
+ "featured_products": featured_products,
+ "categories": categories,
+ "service_highlights": SERVICE_HIGHLIGHTS,
+ "process_steps": PROCESS_STEPS,
}
return render(request, "core/index.html", context)
+
+
+def catalog(request):
+ selected_category = request.GET.get("category", "").strip()
+ query = request.GET.get("q", "").strip()
+
+ products = Product.objects.filter(is_active=True).select_related("category")
+ if selected_category:
+ products = products.filter(category__slug=selected_category)
+ if query:
+ products = products.filter(
+ Q(name__icontains=query)
+ | Q(short_description__icontains=query)
+ | Q(description__icontains=query)
+ | Q(material__icontains=query)
+ | Q(category__name__icontains=query)
+ )
+
+ context = {
+ "meta_title": "Katalog | Juwelier Thelen",
+ "meta_description": "Entdecken Sie Trauringe, Schmuck und Uhren – klar gefiltert und bereit für eine persönliche Beratung.",
+ "products": products,
+ "categories": _catalog_categories(),
+ "selected_category": selected_category,
+ "query": query,
+ }
+ return render(request, "core/catalog.html", context)
+
+
+def product_detail(request, slug):
+ product = get_object_or_404(
+ Product.objects.filter(is_active=True).select_related("category"),
+ slug=slug,
+ )
+ related_products = (
+ Product.objects.filter(is_active=True, category=product.category)
+ .exclude(pk=product.pk)
+ .select_related("category")[:3]
+ )
+
+ context = {
+ "meta_title": f"{product.name} | Juwelier Thelen",
+ "meta_description": product.short_description,
+ "product": product,
+ "related_products": related_products,
+ }
+ return render(request, "core/product_detail.html", context)
+
+
+def contact(request):
+ selected_product = None
+ product_slug = request.GET.get("product", "").strip()
+
+ if product_slug:
+ selected_product = Product.objects.filter(is_active=True, slug=product_slug).first()
+
+ if request.method == "POST":
+ form = ContactInquiryForm(request.POST)
+ if form.is_valid():
+ inquiry = form.save()
+ _send_inquiry_notification(inquiry)
+ request.session["contact_inquiry_id"] = inquiry.pk
+ return redirect("contact_success")
+ else:
+ initial = {}
+ if selected_product:
+ initial["product"] = selected_product
+ initial["subject"] = f"Anfrage zu {selected_product.name}"
+ form = ContactInquiryForm(initial=initial)
+
+ context = {
+ "meta_title": "Kontakt | Juwelier Thelen",
+ "meta_description": "Fragen zu Trauringen, Schmuck, Uhren oder Serviceleistungen? Kontaktieren Sie Juwelier Thelen per Telefon oder E-Mail.",
+ "form": form,
+ "selected_product": selected_product,
+ }
+ return render(request, "core/contact.html", context)
+
+
+def contact_success(request):
+ inquiry_id = request.session.get("contact_inquiry_id")
+ inquiry = None
+ if inquiry_id:
+ inquiry = ContactInquiry.objects.filter(pk=inquiry_id).select_related("product").first()
+
+ context = {
+ "meta_title": "Anfrage erhalten | Juwelier Thelen",
+ "meta_description": "Vielen Dank für Ihre Anfrage. Das Team meldet sich zeitnah telefonisch oder per E-Mail zurück.",
+ "inquiry": inquiry,
+ }
+ return render(request, "core/contact_success.html", context)
diff --git a/static/css/custom.css b/static/css/custom.css
index 925f6ed..ce06a33 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,4 +1,632 @@
-/* Custom styles for the application */
-body {
- font-family: system-ui, -apple-system, sans-serif;
+/* Brand system */
+:root {
+ --color-bg: #f5efe7;
+ --color-bg-soft: #ece4d7;
+ --color-surface: rgba(255, 250, 244, 0.82);
+ --color-surface-strong: #fffaf4;
+ --color-ink: #171616;
+ --color-muted: #5f605f;
+ --color-brand: #b08a52;
+ --color-brand-dark: #8d6a37;
+ --color-accent: #1d4339;
+ --color-accent-soft: #dce9e3;
+ --color-line: rgba(23, 22, 22, 0.08);
+ --shadow-soft: 0 24px 70px rgba(28, 24, 19, 0.12);
+ --shadow-card: 0 18px 40px rgba(43, 31, 18, 0.1);
+ --radius-xl: 32px;
+ --radius-lg: 24px;
+ --radius-md: 18px;
+ --radius-sm: 14px;
+ --space-section: clamp(4.5rem, 7vw, 7rem);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ margin: 0;
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
+ color: var(--color-ink);
+ background:
+ radial-gradient(circle at top left, rgba(176, 138, 82, 0.18), transparent 30%),
+ radial-gradient(circle at 85% 15%, rgba(29, 67, 57, 0.14), transparent 26%),
+ linear-gradient(180deg, #fbf7f1 0%, var(--color-bg) 46%, #efe8dc 100%);
+ line-height: 1.6;
+}
+
+body::before,
+body::after {
+ content: "";
+ position: fixed;
+ inset: auto;
+ border-radius: 50%;
+ filter: blur(10px);
+ pointer-events: none;
+ z-index: -1;
+}
+
+body::before {
+ width: 18rem;
+ height: 18rem;
+ top: 6rem;
+ right: 4vw;
+ background: rgba(176, 138, 82, 0.12);
+}
+
+body::after {
+ width: 12rem;
+ height: 12rem;
+ bottom: 10rem;
+ left: 3vw;
+ background: rgba(29, 67, 57, 0.1);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.navbar-brand strong,
+.footer-title {
+ font-family: 'Cormorant Garamond', Georgia, serif;
+ letter-spacing: -0.02em;
+ line-height: 1.05;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+a:hover {
+ color: var(--color-brand-dark);
+}
+
+.site-header {
+ background: rgba(251, 247, 241, 0.78);
+ backdrop-filter: blur(24px);
+ border-bottom: 1px solid rgba(23, 22, 22, 0.05);
+}
+
+.navbar-brand {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.85rem;
+ font-size: 1.05rem;
+}
+
+.navbar-brand small {
+ display: block;
+ color: var(--color-muted);
+ font-size: 0.78rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.brand-mark {
+ width: 2.6rem;
+ height: 2.6rem;
+ display: inline-grid;
+ place-items: center;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--color-brand), #ddc08b);
+ color: white;
+ font-family: 'Cormorant Garamond', Georgia, serif;
+ font-size: 1.45rem;
+ box-shadow: 0 12px 30px rgba(176, 138, 82, 0.3);
+}
+
+.nav-link {
+ color: var(--color-ink);
+ font-weight: 500;
+ padding: 0.75rem 1rem !important;
+}
+
+.nav-link:hover,
+.nav-link:focus {
+ color: var(--color-brand-dark);
+}
+
+.section-shell {
+ padding: var(--space-section) 0;
+}
+
+.page-hero-compact {
+ padding-bottom: 2.5rem;
+}
+
+.hero-section {
+ position: relative;
+ overflow: hidden;
+}
+
+.hero-title,
+.page-title {
+ font-size: clamp(3rem, 5vw, 5.4rem);
+ margin-bottom: 1.4rem;
+}
+
+.hero-copy,
+.page-copy,
+.section-heading p,
+.product-body p,
+.service-card p,
+.process-card p,
+.contact-info p,
+.detail-copy p,
+.detail-side p,
+.form-note,
+.footer-title + p {
+ color: var(--color-muted);
+ font-size: 1.05rem;
+}
+
+.hero-copy,
+.page-copy {
+ max-width: 44rem;
+}
+
+.eyebrow {
+ display: inline-block;
+ margin-bottom: 1rem;
+ color: var(--color-accent);
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ font-size: 0.77rem;
+ font-weight: 700;
+}
+
+.glass-panel,
+.product-card,
+.service-card,
+.category-card,
+.empty-state,
+.process-shell,
+.success-card {
+ background: linear-gradient(180deg, rgba(255, 250, 244, 0.9), rgba(255, 255, 255, 0.72));
+ border: 1px solid rgba(255, 255, 255, 0.7);
+ box-shadow: var(--shadow-soft);
+ backdrop-filter: blur(18px);
+ border-radius: var(--radius-xl);
+}
+
+.hero-search,
+.filter-panel,
+.form-panel {
+ padding: 1.35rem;
+}
+
+.hero-actions {
+ margin-top: 1.8rem;
+}
+
+.hero-showcase {
+ padding: 2rem;
+ min-height: 27rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.hero-orb {
+ position: absolute;
+ border-radius: 50%;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(176, 138, 82, 0.12));
+ border: 1px solid rgba(176, 138, 82, 0.16);
+}
+
+.hero-orb-lg {
+ width: 13rem;
+ height: 13rem;
+ top: 2rem;
+ right: -1rem;
+}
+
+.hero-orb-sm {
+ width: 5rem;
+ height: 5rem;
+ left: 1rem;
+ bottom: 2rem;
+}
+
+.stat-grid {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1rem;
+}
+
+.stat-card {
+ padding: 1.4rem;
+ border-radius: var(--radius-md);
+ background: rgba(255, 255, 255, 0.72);
+ border: 1px solid rgba(23, 22, 22, 0.05);
+ box-shadow: var(--shadow-card);
+}
+
+.stat-card strong {
+ display: block;
+ font-family: 'Cormorant Garamond', Georgia, serif;
+ font-size: 2.4rem;
+}
+
+.stat-card span,
+.showcase-note,
+.product-category,
+.detail-label {
+ color: var(--color-muted);
+}
+
+.showcase-note {
+ position: absolute;
+ left: 2rem;
+ right: 2rem;
+ bottom: 2rem;
+ padding: 1.1rem 1.2rem;
+ border-radius: var(--radius-md);
+ background: rgba(29, 67, 57, 0.08);
+}
+
+.category-card,
+.service-card,
+.product-card {
+ padding: 1.6rem;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.category-card:hover,
+.service-card:hover,
+.product-card:hover,
+.contact-banner:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 28px 70px rgba(28, 24, 19, 0.16);
+}
+
+.category-chip,
+.product-visual span,
+.process-step {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 999px;
+ padding: 0.35rem 0.75rem;
+ font-size: 0.78rem;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+}
+
+.category-chip,
+.process-step {
+ background: rgba(29, 67, 57, 0.09);
+ color: var(--color-accent);
+}
+
+.product-visual {
+ min-height: 12rem;
+ border-radius: var(--radius-lg);
+ margin-bottom: 1.25rem;
+ background:
+ radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.95), transparent 36%),
+ linear-gradient(140deg, rgba(176, 138, 82, 0.22), rgba(29, 67, 57, 0.18));
+ position: relative;
+ overflow: hidden;
+}
+
+.product-visual::before,
+.product-visual::after {
+ content: "";
+ position: absolute;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.75);
+}
+
+.product-visual::before {
+ width: 7rem;
+ height: 7rem;
+ right: 1.25rem;
+ top: 1.25rem;
+}
+
+.product-visual::after {
+ width: 3.6rem;
+ height: 3.6rem;
+ left: 1.4rem;
+ bottom: 1.1rem;
+}
+
+.product-visual span {
+ position: absolute;
+ left: 1rem;
+ top: 1rem;
+ background: rgba(255, 250, 244, 0.9);
+ color: var(--color-accent);
+}
+
+.product-body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.product-body h2,
+.product-body h3,
+.service-card h3,
+.category-card h2,
+.process-card h3,
+.contact-banner h2,
+.contact-info h2,
+.detail-copy h2,
+.detail-side h2,
+.form-panel h2 {
+ font-size: clamp(1.8rem, 2vw, 2.4rem);
+ margin-bottom: 0.9rem;
+}
+
+.product-category {
+ margin-bottom: 0.25rem;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+ font-size: 0.75rem;
+ font-weight: 700;
+}
+
+.product-price,
+.detail-price {
+ color: var(--color-brand-dark);
+ font-size: 1.1rem;
+}
+
+.product-meta {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-top: auto;
+ padding-top: 1rem;
+ color: var(--color-muted);
+}
+
+.text-link,
+.back-link {
+ color: var(--color-accent);
+ font-weight: 700;
+}
+
+.text-link:hover,
+.back-link:hover {
+ color: var(--color-brand-dark);
+}
+
+.section-heading {
+ max-width: 42rem;
+ margin-bottom: 2rem;
+}
+
+.section-heading h2,
+.footer-title {
+ font-size: clamp(2.4rem, 3vw, 3.6rem);
+ margin-bottom: 0.8rem;
+}
+
+.service-icon {
+ width: 3rem;
+ height: 3rem;
+ display: inline-grid;
+ place-items: center;
+ border-radius: 50%;
+ margin-bottom: 1rem;
+ background: rgba(176, 138, 82, 0.12);
+ color: var(--color-brand-dark);
+ font-weight: 700;
+}
+
+.process-shell,
+.contact-banner,
+.success-card,
+.detail-card,
+.detail-copy,
+.detail-side,
+.contact-info {
+ padding: 2rem;
+}
+
+.process-card {
+ padding: 1.2rem;
+ border-radius: var(--radius-md);
+ background: rgba(255, 255, 255, 0.55);
+ border: 1px solid rgba(23, 22, 22, 0.05);
+ height: 100%;
+}
+
+.contact-banner {
+ padding: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2rem;
+}
+
+.contact-method {
+ margin-bottom: 1.5rem;
+}
+
+.contact-method span,
+.footer-heading {
+ display: block;
+ margin-bottom: 0.35rem;
+ color: var(--color-muted);
+ font-size: 0.84rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+}
+
+.contact-method a,
+.site-footer a {
+ font-size: 1.05rem;
+ font-weight: 600;
+}
+
+.selected-product-note {
+ margin-top: 2rem;
+ padding: 1.25rem;
+ border-radius: var(--radius-md);
+ background: rgba(29, 67, 57, 0.08);
+}
+
+.site-footer {
+ border-top: 1px solid rgba(23, 22, 22, 0.06);
+ background: rgba(255, 250, 244, 0.65);
+ backdrop-filter: blur(18px);
+}
+
+.btn {
+ border-radius: 999px;
+ padding: 0.9rem 1.45rem;
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ border-width: 1px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.btn:hover,
+.btn:focus {
+ transform: translateY(-1px);
+}
+
+.btn-brand {
+ color: #fff;
+ background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
+ border-color: transparent;
+ box-shadow: 0 16px 32px rgba(176, 138, 82, 0.28);
+}
+
+.btn-brand:hover,
+.btn-brand:focus {
+ color: #fff;
+ background: linear-gradient(135deg, #7a5b2f, var(--color-brand-dark));
+}
+
+.btn-ghost {
+ color: var(--color-ink);
+ background: rgba(255, 255, 255, 0.58);
+ border-color: rgba(23, 22, 22, 0.08);
+}
+
+.btn-ghost:hover,
+.btn-ghost:focus {
+ background: rgba(255, 255, 255, 0.88);
+ border-color: rgba(23, 22, 22, 0.14);
+}
+
+.form-control,
+.form-select {
+ min-height: 3.4rem;
+ border-radius: 1rem;
+ border: 1px solid rgba(23, 22, 22, 0.1);
+ background: rgba(255, 255, 255, 0.92);
+ color: var(--color-ink);
+ padding: 0.85rem 1rem;
+}
+
+textarea.form-control {
+ min-height: 9rem;
+}
+
+.form-control:focus,
+.form-select:focus,
+.btn:focus,
+.nav-link:focus,
+a:focus {
+ outline: none;
+ border-color: rgba(176, 138, 82, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(176, 138, 82, 0.16);
+}
+
+.field-error {
+ color: #9b2d2d;
+ font-size: 0.88rem;
+ margin-top: 0.45rem;
+}
+
+.empty-state,
+.success-card {
+ text-align: center;
+ padding: 3rem 2rem;
+}
+
+.success-card {
+ max-width: 48rem;
+}
+
+.success-summary {
+ margin-top: 1.5rem;
+ padding: 1.2rem;
+ border-radius: var(--radius-md);
+ background: rgba(29, 67, 57, 0.08);
+}
+
+.filter-panel {
+ position: relative;
+ z-index: 2;
+}
+
+.detail-list {
+ padding-left: 1.1rem;
+ margin: 0;
+}
+
+.detail-list li {
+ margin-bottom: 0.8rem;
+ color: var(--color-muted);
+}
+
+.back-link {
+ display: inline-block;
+ margin-bottom: 1.25rem;
+}
+
+@media (max-width: 991.98px) {
+ .hero-showcase {
+ min-height: auto;
+ }
+
+ .contact-banner {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+}
+
+@media (max-width: 767.98px) {
+ .section-shell {
+ padding: 4rem 0;
+ }
+
+ .hero-title,
+ .page-title {
+ font-size: 2.6rem;
+ }
+
+ .glass-panel,
+ .product-card,
+ .service-card,
+ .category-card,
+ .contact-banner,
+ .success-card,
+ .process-shell,
+ .detail-card,
+ .detail-copy,
+ .detail-side,
+ .contact-info {
+ border-radius: 1.5rem;
+ }
}
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 108056f..ce06a33 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -1,21 +1,632 @@
-
+/* Brand system */
:root {
- --bg-color-start: #6a11cb;
- --bg-color-end: #2575fc;
- --text-color: #ffffff;
- --card-bg-color: rgba(255, 255, 255, 0.01);
- --card-border-color: rgba(255, 255, 255, 0.1);
+ --color-bg: #f5efe7;
+ --color-bg-soft: #ece4d7;
+ --color-surface: rgba(255, 250, 244, 0.82);
+ --color-surface-strong: #fffaf4;
+ --color-ink: #171616;
+ --color-muted: #5f605f;
+ --color-brand: #b08a52;
+ --color-brand-dark: #8d6a37;
+ --color-accent: #1d4339;
+ --color-accent-soft: #dce9e3;
+ --color-line: rgba(23, 22, 22, 0.08);
+ --shadow-soft: 0 24px 70px rgba(28, 24, 19, 0.12);
+ --shadow-card: 0 18px 40px rgba(43, 31, 18, 0.1);
+ --radius-xl: 32px;
+ --radius-lg: 24px;
+ --radius-md: 18px;
+ --radius-sm: 14px;
+ --space-section: clamp(4.5rem, 7vw, 7rem);
}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
body {
margin: 0;
- font-family: 'Inter', sans-serif;
- background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
- color: var(--text-color);
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- text-align: center;
- overflow: hidden;
- position: relative;
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
+ color: var(--color-ink);
+ background:
+ radial-gradient(circle at top left, rgba(176, 138, 82, 0.18), transparent 30%),
+ radial-gradient(circle at 85% 15%, rgba(29, 67, 57, 0.14), transparent 26%),
+ linear-gradient(180deg, #fbf7f1 0%, var(--color-bg) 46%, #efe8dc 100%);
+ line-height: 1.6;
+}
+
+body::before,
+body::after {
+ content: "";
+ position: fixed;
+ inset: auto;
+ border-radius: 50%;
+ filter: blur(10px);
+ pointer-events: none;
+ z-index: -1;
+}
+
+body::before {
+ width: 18rem;
+ height: 18rem;
+ top: 6rem;
+ right: 4vw;
+ background: rgba(176, 138, 82, 0.12);
+}
+
+body::after {
+ width: 12rem;
+ height: 12rem;
+ bottom: 10rem;
+ left: 3vw;
+ background: rgba(29, 67, 57, 0.1);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.navbar-brand strong,
+.footer-title {
+ font-family: 'Cormorant Garamond', Georgia, serif;
+ letter-spacing: -0.02em;
+ line-height: 1.05;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+a:hover {
+ color: var(--color-brand-dark);
+}
+
+.site-header {
+ background: rgba(251, 247, 241, 0.78);
+ backdrop-filter: blur(24px);
+ border-bottom: 1px solid rgba(23, 22, 22, 0.05);
+}
+
+.navbar-brand {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.85rem;
+ font-size: 1.05rem;
+}
+
+.navbar-brand small {
+ display: block;
+ color: var(--color-muted);
+ font-size: 0.78rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.brand-mark {
+ width: 2.6rem;
+ height: 2.6rem;
+ display: inline-grid;
+ place-items: center;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--color-brand), #ddc08b);
+ color: white;
+ font-family: 'Cormorant Garamond', Georgia, serif;
+ font-size: 1.45rem;
+ box-shadow: 0 12px 30px rgba(176, 138, 82, 0.3);
+}
+
+.nav-link {
+ color: var(--color-ink);
+ font-weight: 500;
+ padding: 0.75rem 1rem !important;
+}
+
+.nav-link:hover,
+.nav-link:focus {
+ color: var(--color-brand-dark);
+}
+
+.section-shell {
+ padding: var(--space-section) 0;
+}
+
+.page-hero-compact {
+ padding-bottom: 2.5rem;
+}
+
+.hero-section {
+ position: relative;
+ overflow: hidden;
+}
+
+.hero-title,
+.page-title {
+ font-size: clamp(3rem, 5vw, 5.4rem);
+ margin-bottom: 1.4rem;
+}
+
+.hero-copy,
+.page-copy,
+.section-heading p,
+.product-body p,
+.service-card p,
+.process-card p,
+.contact-info p,
+.detail-copy p,
+.detail-side p,
+.form-note,
+.footer-title + p {
+ color: var(--color-muted);
+ font-size: 1.05rem;
+}
+
+.hero-copy,
+.page-copy {
+ max-width: 44rem;
+}
+
+.eyebrow {
+ display: inline-block;
+ margin-bottom: 1rem;
+ color: var(--color-accent);
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ font-size: 0.77rem;
+ font-weight: 700;
+}
+
+.glass-panel,
+.product-card,
+.service-card,
+.category-card,
+.empty-state,
+.process-shell,
+.success-card {
+ background: linear-gradient(180deg, rgba(255, 250, 244, 0.9), rgba(255, 255, 255, 0.72));
+ border: 1px solid rgba(255, 255, 255, 0.7);
+ box-shadow: var(--shadow-soft);
+ backdrop-filter: blur(18px);
+ border-radius: var(--radius-xl);
+}
+
+.hero-search,
+.filter-panel,
+.form-panel {
+ padding: 1.35rem;
+}
+
+.hero-actions {
+ margin-top: 1.8rem;
+}
+
+.hero-showcase {
+ padding: 2rem;
+ min-height: 27rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.hero-orb {
+ position: absolute;
+ border-radius: 50%;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(176, 138, 82, 0.12));
+ border: 1px solid rgba(176, 138, 82, 0.16);
+}
+
+.hero-orb-lg {
+ width: 13rem;
+ height: 13rem;
+ top: 2rem;
+ right: -1rem;
+}
+
+.hero-orb-sm {
+ width: 5rem;
+ height: 5rem;
+ left: 1rem;
+ bottom: 2rem;
+}
+
+.stat-grid {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1rem;
+}
+
+.stat-card {
+ padding: 1.4rem;
+ border-radius: var(--radius-md);
+ background: rgba(255, 255, 255, 0.72);
+ border: 1px solid rgba(23, 22, 22, 0.05);
+ box-shadow: var(--shadow-card);
+}
+
+.stat-card strong {
+ display: block;
+ font-family: 'Cormorant Garamond', Georgia, serif;
+ font-size: 2.4rem;
+}
+
+.stat-card span,
+.showcase-note,
+.product-category,
+.detail-label {
+ color: var(--color-muted);
+}
+
+.showcase-note {
+ position: absolute;
+ left: 2rem;
+ right: 2rem;
+ bottom: 2rem;
+ padding: 1.1rem 1.2rem;
+ border-radius: var(--radius-md);
+ background: rgba(29, 67, 57, 0.08);
+}
+
+.category-card,
+.service-card,
+.product-card {
+ padding: 1.6rem;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.category-card:hover,
+.service-card:hover,
+.product-card:hover,
+.contact-banner:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 28px 70px rgba(28, 24, 19, 0.16);
+}
+
+.category-chip,
+.product-visual span,
+.process-step {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 999px;
+ padding: 0.35rem 0.75rem;
+ font-size: 0.78rem;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+}
+
+.category-chip,
+.process-step {
+ background: rgba(29, 67, 57, 0.09);
+ color: var(--color-accent);
+}
+
+.product-visual {
+ min-height: 12rem;
+ border-radius: var(--radius-lg);
+ margin-bottom: 1.25rem;
+ background:
+ radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.95), transparent 36%),
+ linear-gradient(140deg, rgba(176, 138, 82, 0.22), rgba(29, 67, 57, 0.18));
+ position: relative;
+ overflow: hidden;
+}
+
+.product-visual::before,
+.product-visual::after {
+ content: "";
+ position: absolute;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.75);
+}
+
+.product-visual::before {
+ width: 7rem;
+ height: 7rem;
+ right: 1.25rem;
+ top: 1.25rem;
+}
+
+.product-visual::after {
+ width: 3.6rem;
+ height: 3.6rem;
+ left: 1.4rem;
+ bottom: 1.1rem;
+}
+
+.product-visual span {
+ position: absolute;
+ left: 1rem;
+ top: 1rem;
+ background: rgba(255, 250, 244, 0.9);
+ color: var(--color-accent);
+}
+
+.product-body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.product-body h2,
+.product-body h3,
+.service-card h3,
+.category-card h2,
+.process-card h3,
+.contact-banner h2,
+.contact-info h2,
+.detail-copy h2,
+.detail-side h2,
+.form-panel h2 {
+ font-size: clamp(1.8rem, 2vw, 2.4rem);
+ margin-bottom: 0.9rem;
+}
+
+.product-category {
+ margin-bottom: 0.25rem;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+ font-size: 0.75rem;
+ font-weight: 700;
+}
+
+.product-price,
+.detail-price {
+ color: var(--color-brand-dark);
+ font-size: 1.1rem;
+}
+
+.product-meta {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-top: auto;
+ padding-top: 1rem;
+ color: var(--color-muted);
+}
+
+.text-link,
+.back-link {
+ color: var(--color-accent);
+ font-weight: 700;
+}
+
+.text-link:hover,
+.back-link:hover {
+ color: var(--color-brand-dark);
+}
+
+.section-heading {
+ max-width: 42rem;
+ margin-bottom: 2rem;
+}
+
+.section-heading h2,
+.footer-title {
+ font-size: clamp(2.4rem, 3vw, 3.6rem);
+ margin-bottom: 0.8rem;
+}
+
+.service-icon {
+ width: 3rem;
+ height: 3rem;
+ display: inline-grid;
+ place-items: center;
+ border-radius: 50%;
+ margin-bottom: 1rem;
+ background: rgba(176, 138, 82, 0.12);
+ color: var(--color-brand-dark);
+ font-weight: 700;
+}
+
+.process-shell,
+.contact-banner,
+.success-card,
+.detail-card,
+.detail-copy,
+.detail-side,
+.contact-info {
+ padding: 2rem;
+}
+
+.process-card {
+ padding: 1.2rem;
+ border-radius: var(--radius-md);
+ background: rgba(255, 255, 255, 0.55);
+ border: 1px solid rgba(23, 22, 22, 0.05);
+ height: 100%;
+}
+
+.contact-banner {
+ padding: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2rem;
+}
+
+.contact-method {
+ margin-bottom: 1.5rem;
+}
+
+.contact-method span,
+.footer-heading {
+ display: block;
+ margin-bottom: 0.35rem;
+ color: var(--color-muted);
+ font-size: 0.84rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+}
+
+.contact-method a,
+.site-footer a {
+ font-size: 1.05rem;
+ font-weight: 600;
+}
+
+.selected-product-note {
+ margin-top: 2rem;
+ padding: 1.25rem;
+ border-radius: var(--radius-md);
+ background: rgba(29, 67, 57, 0.08);
+}
+
+.site-footer {
+ border-top: 1px solid rgba(23, 22, 22, 0.06);
+ background: rgba(255, 250, 244, 0.65);
+ backdrop-filter: blur(18px);
+}
+
+.btn {
+ border-radius: 999px;
+ padding: 0.9rem 1.45rem;
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ border-width: 1px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.btn:hover,
+.btn:focus {
+ transform: translateY(-1px);
+}
+
+.btn-brand {
+ color: #fff;
+ background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
+ border-color: transparent;
+ box-shadow: 0 16px 32px rgba(176, 138, 82, 0.28);
+}
+
+.btn-brand:hover,
+.btn-brand:focus {
+ color: #fff;
+ background: linear-gradient(135deg, #7a5b2f, var(--color-brand-dark));
+}
+
+.btn-ghost {
+ color: var(--color-ink);
+ background: rgba(255, 255, 255, 0.58);
+ border-color: rgba(23, 22, 22, 0.08);
+}
+
+.btn-ghost:hover,
+.btn-ghost:focus {
+ background: rgba(255, 255, 255, 0.88);
+ border-color: rgba(23, 22, 22, 0.14);
+}
+
+.form-control,
+.form-select {
+ min-height: 3.4rem;
+ border-radius: 1rem;
+ border: 1px solid rgba(23, 22, 22, 0.1);
+ background: rgba(255, 255, 255, 0.92);
+ color: var(--color-ink);
+ padding: 0.85rem 1rem;
+}
+
+textarea.form-control {
+ min-height: 9rem;
+}
+
+.form-control:focus,
+.form-select:focus,
+.btn:focus,
+.nav-link:focus,
+a:focus {
+ outline: none;
+ border-color: rgba(176, 138, 82, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(176, 138, 82, 0.16);
+}
+
+.field-error {
+ color: #9b2d2d;
+ font-size: 0.88rem;
+ margin-top: 0.45rem;
+}
+
+.empty-state,
+.success-card {
+ text-align: center;
+ padding: 3rem 2rem;
+}
+
+.success-card {
+ max-width: 48rem;
+}
+
+.success-summary {
+ margin-top: 1.5rem;
+ padding: 1.2rem;
+ border-radius: var(--radius-md);
+ background: rgba(29, 67, 57, 0.08);
+}
+
+.filter-panel {
+ position: relative;
+ z-index: 2;
+}
+
+.detail-list {
+ padding-left: 1.1rem;
+ margin: 0;
+}
+
+.detail-list li {
+ margin-bottom: 0.8rem;
+ color: var(--color-muted);
+}
+
+.back-link {
+ display: inline-block;
+ margin-bottom: 1.25rem;
+}
+
+@media (max-width: 991.98px) {
+ .hero-showcase {
+ min-height: auto;
+ }
+
+ .contact-banner {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+}
+
+@media (max-width: 767.98px) {
+ .section-shell {
+ padding: 4rem 0;
+ }
+
+ .hero-title,
+ .page-title {
+ font-size: 2.6rem;
+ }
+
+ .glass-panel,
+ .product-card,
+ .service-card,
+ .category-card,
+ .contact-banner,
+ .success-card,
+ .process-shell,
+ .detail-card,
+ .detail-copy,
+ .detail-side,
+ .contact-info {
+ border-radius: 1.5rem;
+ }
}