diff --git a/index.html b/index.html new file mode 100644 index 0000000..0cbd766 --- /dev/null +++ b/index.html @@ -0,0 +1,312 @@ + + + + + + שרית הספרית | מספרה בחולון + + + + + + + + + + + + + +
+ +
+ + + +
+
+ +
+

מספרה בחולון

+

+ יופי שמרגישים + בכל תספורת +

+

גישה אישית וחמה, תוצאות מקצועיות. אצל שרית, כל לקוחה מקבלת את היחס המיוחד שמגיע לה.

+ + + התקשרי עכשיו + 050-400-1413 + +
+ +
+ +
+
+
+ מה אנחנו מציעות +

השירותים שלנו

+
+
+
+
+ +
+

תספורות

+

תספורת מותאמת אישית לכל סגנון ומבנה פנים. משיחת ייעוץ ועד לתוצאה מושלמת — כי כל אישה ייחודית.

+
+
+
+ +
+

צביעות שיער

+

מגוון טכניקות צביעה — מאומברה עדינה ועד שינוי צבע דרמטי. חומרים איכותיים בלבד.

+
+
+
+ +
+

החלקות

+

החלקות קראטין וברזילאיות לשיער חלק, בריא וזוהר לאורך זמן.

+
+
+
+ +
+

טיפולי שיער

+

טיפולים מזינים ומשקמים לשיער פגום, יבש או צבוע. החזרת הברק והחיות.

+
+
+
+
+ +
+
+
+ +
+ הסיפור שלנו +

מספרה עם לב

+

+ כבר למעלה מ-15 שנה, שרית מקבלת את פני לקוחותיה באווירה ביתית וחמה. המספרה בחולון הפכה לבית שני עבור נשים רבות שמחפשות לא רק תספורת מקצועית, אלא גם אוזן קשבת וחיוך חם. +

+

+ אצלנו, כל לקוחה היא מיוחדת. אנחנו מאמינות שיופי אמיתי בא מבפנים, והתפקיד שלנו הוא לעזור לך להרגיש הכי טוב שאת יכולה. +

+
    +
  • + + יחס אישי לכל לקוחה +
    • +
  • + + חומרים איכותיים בלבד +
    • +
  • + + אווירה ביתית ונעימה +
    • +
+
+
+
+
+ +
+
+
+ מה אומרות עלינו +

הלקוחות שלנו מספרות

+
+
+
+
+ + + + + +
+

"שרית פשוט קסומה! כבר שנים שאני מסתפרת רק אצלה. היא תמיד יודעת בדיוק מה מתאים לי, והאווירה במספרה פשוט ביתית ונעימה."

+
+
מ
+ מיכל כ. +
+
+
+
+ + + + + +
+

"עשיתי אצל שרית החלקה קראטין והתוצאה מדהימה! השיער חלק, בריא ומבריק. ממליצה בחום."

+
+
ר
+ רונית ש. +
+
+
+
+ + + + + +
+

"סוף סוף מצאתי מספרה שמבינה אותי! שרית הקשיבה בדיוק למה שרציתי והתוצאה הייתה מעבר לציפיות."

+
+
ל
+ לימור ד. +
+
+
+
+
+ +
+
+
+
+ בואי נדבר +

מוזמנת ליצור קשר

+

רוצה לקבוע תור? יש לך שאלה? נשמח לשמוע ממך!

+
+ +
+ +
+
+ טלפון להזמנת תור + 050-400-1413 +
+ +
+
+ +
+
+ מיקום + חולון +
+
+
+
+
+
+

מוכנה להרגיש מדהימה?

+

התקשרי עכשיו וקבעי את התור הבא שלך

+ + + 050-400-1413 + +
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..8729228 --- /dev/null +++ b/script.js @@ -0,0 +1,119 @@ +(function() { + 'use strict'; + + // Mobile Menu Toggle + const menuToggle = document.querySelector('.menu-toggle'); + const navLinks = document.querySelector('.nav-links'); + const menuOverlay = document.querySelector('.menu-overlay'); + + function closeMenu() { + menuToggle.setAttribute('aria-expanded', 'false'); + menuToggle.setAttribute('aria-label', 'פתיחת תפריט'); + navLinks.classList.remove('is-open'); + menuOverlay.classList.remove('is-visible'); + menuOverlay.setAttribute('aria-hidden', 'true'); + } + + function openMenu() { + menuToggle.setAttribute('aria-expanded', 'true'); + menuToggle.setAttribute('aria-label', 'סגירת תפריט'); + navLinks.classList.add('is-open'); + menuOverlay.classList.add('is-visible'); + menuOverlay.setAttribute('aria-hidden', 'false'); + } + + if (menuToggle && navLinks && menuOverlay) { + menuToggle.addEventListener('click', function() { + const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true'; + if (isExpanded) { + closeMenu(); + } else { + openMenu(); + } + }); + + // Close menu when clicking overlay + menuOverlay.addEventListener('click', closeMenu); + + // Close menu when clicking a link + navLinks.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', closeMenu); + }); + + // Close menu on Escape key + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && navLinks.classList.contains('is-open')) { + closeMenu(); + menuToggle.focus(); + } + }); + } + + // Reveal on Scroll + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + if (!prefersReducedMotion) { + const revealElements = document.querySelectorAll('.reveal'); + + const revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + root: null, + rootMargin: '0px 0px -60px 0px', + threshold: 0.1 + }); + + revealElements.forEach(function(el) { + revealObserver.observe(el); + }); + } else { + // Show all elements immediately if reduced motion is preferred + document.querySelectorAll('.reveal').forEach(function(el) { + el.classList.add('is-visible'); + }); + } + + // Smooth scroll for anchor links (fallback for browsers without CSS scroll-behavior) + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const targetElement = document.querySelector(targetId); + if (targetElement) { + e.preventDefault(); + targetElement.scrollIntoView({ + behavior: prefersReducedMotion ? 'auto' : 'smooth', + block: 'start' + }); + } + }); + }); + + // Header shadow on scroll + const header = document.querySelector('.header'); + + if (header) { + let ticking = false; + + window.addEventListener('scroll', function() { + if (!ticking) { + window.requestAnimationFrame(function() { + if (window.pageYOffset > 50) { + header.style.boxShadow = '0 2px 20px rgba(61, 50, 41, 0.1)'; + } else { + header.style.boxShadow = 'none'; + } + ticking = false; + }); + ticking = true; + } + }, { passive: true }); + } + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..21fe76c --- /dev/null +++ b/style.css @@ -0,0 +1,998 @@ +:root { + --color-bg: #FAF7F2; + --color-cream: #FFF8F0; + --color-text: #3D3229; + --color-text-light: #5C5248; + --color-warm: #C9A87C; + --color-accent: #8B6914; + --color-accent-light: #A67C00; + --color-sage: #A8B5A0; + --color-white: #FFFFFF; + + --font-body: 'Heebo', sans-serif; + + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2.5rem; + --space-xl: 4rem; + --space-2xl: 5rem; + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --radius-full: 9999px; + + --transition-fast: 0.2s ease; + --transition-medium: 0.4s ease; + --transition-slow: 0.6s ease; + + --max-line: 60ch; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + overflow-x: hidden; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +body { + font-family: var(--font-body); + font-size: 1rem; + font-weight: 400; + line-height: 1.7; + color: var(--color-text); + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; +} + +.container { + width: 100%; + max-width: 1100px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +a { + color: inherit; + text-decoration: none; +} + +img, +svg { + display: block; + max-width: 100%; +} + +ul { + list-style: none; +} + +button { + font: inherit; + color: inherit; + background: none; + border: none; + cursor: pointer; +} + +/* Skip to Content (Accessibility) */ +.skip-link { + position: absolute; + top: -100px; + inset-inline-start: var(--space-md); + padding: var(--space-sm) var(--space-md); + background: var(--color-accent); + color: var(--color-white); + border-radius: var(--radius-sm); + z-index: 200; + transition: top var(--transition-fast); + font-weight: 500; +} + +.skip-link:focus { + top: var(--space-sm); +} + +/* Header */ +.header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 100; + background: rgba(250, 247, 242, 0.95); + backdrop-filter: blur(10px); + border-block-end: 1px solid rgba(201, 168, 124, 0.2); +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1100px; + margin-inline: auto; + padding: var(--space-sm) var(--space-md); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-xs); + font-family: var(--font-body); + font-size: 1.25rem; + font-weight: 600; + color: var(--color-text); + transition: color var(--transition-fast); +} + +.logo:hover { + color: var(--color-accent); +} + +.logo-icon { + width: 36px; + height: 36px; + color: var(--color-warm); +} + +.nav-links { + display: none; + gap: var(--space-lg); +} + +.nav-links a { + font-size: 0.95rem; + font-weight: 400; + color: var(--color-text-light); + padding: var(--space-xs); + border-radius: var(--radius-sm); + transition: color var(--transition-fast), background var(--transition-fast); +} + +.nav-links a:hover { + color: var(--color-accent); +} + +.nav-links a:focus-visible { + color: var(--color-accent); + background: rgba(201, 168, 124, 0.15); + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} + +.nav-cta { + display: none; + padding: var(--space-xs) var(--space-md); + font-size: 0.9rem; + font-weight: 500; + color: var(--color-white); + background: var(--color-accent); + border-radius: var(--radius-full); + transition: background var(--transition-fast), transform var(--transition-fast); +} + +.nav-cta:hover { + background: var(--color-text); + transform: translateY(-2px); +} + +.nav-cta:focus-visible { + background: var(--color-text); + outline: 2px solid var(--color-warm); + outline-offset: 2px; +} + +.menu-toggle { + display: flex; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 32px; + height: 32px; + padding: 4px; +} + +.menu-toggle span { + display: block; + width: 100%; + height: 2px; + background: var(--color-text); + border-radius: 2px; + transition: transform var(--transition-fast), opacity var(--transition-fast); +} + +.menu-toggle[aria-expanded="true"] span:nth-child(1) { + transform: translateY(7px) rotate(45deg); +} + +.menu-toggle[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} + +.menu-toggle[aria-expanded="true"] span:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); +} + +@media (min-width: 768px) { + .nav-links { + display: flex; + } + + .nav-cta { + display: block; + } + + .menu-toggle { + display: none; + } +} + +/* Mobile Menu Overlay */ +.menu-overlay { + position: fixed; + inset: 0; + z-index: 90; + background: rgba(61, 50, 41, 0.4); + opacity: 0; + visibility: hidden; + transition: opacity var(--transition-fast), visibility var(--transition-fast); +} + +.menu-overlay.is-visible { + opacity: 1; + visibility: visible; +} + +/* Mobile Menu */ +.nav-links.is-open { + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + inset-inline: 0; + z-index: 95; + padding: var(--space-md); + background: var(--color-cream); + border-block-end: 1px solid rgba(201, 168, 124, 0.3); + gap: var(--space-sm); + box-shadow: 0 10px 30px rgba(61, 50, 41, 0.1); +} + +.nav-links.is-open a { + padding: var(--space-xs) 0; +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + display: grid; + grid-template-columns: 1fr; + align-items: center; + padding: calc(80px + var(--space-xl)) var(--space-md) var(--space-xl); + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + z-index: -1; + overflow: hidden; +} + +.hero-shape { + position: absolute; + border-radius: 50%; +} + +.hero-shape-1 { + width: min(500px, 80vw); + height: min(500px, 80vw); + top: -150px; + inset-inline-end: -50px; + background: linear-gradient(135deg, var(--color-warm) 0%, transparent 70%); + opacity: 0.15; +} + +.hero-shape-2 { + width: 300px; + height: 300px; + bottom: 10%; + inset-inline-start: -100px; + background: var(--color-sage); + opacity: 0.1; +} + +.hero-shape-3 { + width: 150px; + height: 150px; + top: 40%; + inset-inline-end: 20%; + background: var(--color-accent); + opacity: 0.08; +} + +.hero-content { + max-width: 560px; +} + +.hero-tag { + display: inline-block; + margin-block-end: var(--space-sm); + padding: var(--space-xs) var(--space-md); + font-size: 0.85rem; + font-weight: 500; + color: var(--color-text); + background: rgba(201, 168, 124, 0.2); + border-radius: var(--radius-full); +} + +.hero-title { + font-family: var(--font-body); + font-size: clamp(2.5rem, 8vw, 3.75rem); + font-weight: 600; + line-height: 1.15; + margin-block-end: var(--space-md); +} + +.hero-title-line { + display: block; +} + +.hero-title-line.accent { + color: var(--color-accent); +} + +.hero-desc { + font-size: 1.125rem; + color: var(--color-text-light); + margin-block-end: var(--space-lg); + max-width: var(--max-line); +} + +.cta-button { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-md) var(--space-lg); + font-size: 1rem; + font-weight: 500; + color: var(--color-white); + background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-warm) 100%); + border-radius: var(--radius-lg); + box-shadow: 0 4px 20px rgba(139, 105, 20, 0.3); + transition: transform var(--transition-fast), box-shadow var(--transition-fast); +} + +.cta-button:hover { + transform: translateY(-3px); + box-shadow: 0 8px 30px rgba(139, 105, 20, 0.4); +} + +.cta-button:focus-visible { + outline: 3px solid var(--color-accent); + outline-offset: 3px; + transform: translateY(-3px); + box-shadow: 0 8px 30px rgba(139, 105, 20, 0.4); +} + +.cta-button svg { + width: 20px; + height: 20px; +} + +.cta-phone { + font-weight: 600; + letter-spacing: 0.05em; +} + +.hero-visual { + display: none; + position: relative; +} + +.hero-scissors { + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 200px; + margin: 0 auto; + background: var(--color-cream); + border-radius: 50%; + box-shadow: 0 20px 60px rgba(61, 50, 41, 0.1); +} + +.scissors-icon { + width: 100px; + height: 100px; + color: var(--color-accent); +} + +.hero-decorations { + position: absolute; + inset: 0; + pointer-events: none; +} + +.deco-dot { + position: absolute; + border-radius: 50%; + background: var(--color-warm); +} + +.deco-dot-1 { + width: 16px; + height: 16px; + top: 10%; + inset-inline-start: 20%; + opacity: 0.4; +} + +.deco-dot-2 { + width: 24px; + height: 24px; + bottom: 20%; + inset-inline-end: 15%; + background: var(--color-sage); + opacity: 0.5; +} + +.deco-dot-3 { + width: 12px; + height: 12px; + top: 60%; + inset-inline-start: 10%; + background: var(--color-accent); + opacity: 0.3; +} + +.deco-line { + position: absolute; + width: 60px; + height: 2px; + background: var(--color-warm); + opacity: 0.3; +} + +.deco-line-1 { + top: 25%; + inset-inline-end: 5%; + transform: rotate(-30deg); +} + +.deco-line-2 { + bottom: 30%; + inset-inline-start: 5%; + transform: rotate(20deg); +} + +@media (min-width: 768px) { + .hero { + grid-template-columns: 1.1fr 0.9fr; + gap: var(--space-xl); + padding-inline: var(--space-lg); + } + + .hero-visual { + display: block; + } +} + +@media (min-width: 1024px) { + .hero { + padding-inline: var(--space-xl); + } + + .hero-scissors { + width: 240px; + height: 240px; + } + + .scissors-icon { + width: 120px; + height: 120px; + } +} + +/* Section Common */ +.section-header { + text-align: center; + margin-block-end: var(--space-xl); +} + +.section-tag { + display: inline-block; + margin-block-end: var(--space-xs); + font-size: 0.85rem; + font-weight: 500; + color: var(--color-text); + background: rgba(201, 168, 124, 0.25); + padding: 0.25em 0.75em; + border-radius: var(--radius-sm); +} + +.section-title { + font-family: var(--font-body); + font-size: clamp(1.75rem, 5vw, 2.5rem); + font-weight: 600; + color: var(--color-text); +} + +/* Services */ +.services { + padding: var(--space-2xl) 0; + background: var(--color-cream); +} + +.services-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); +} + +.service-card { + padding: var(--space-lg); + background: var(--color-white); + border-radius: var(--radius-lg); + box-shadow: 0 2px 20px rgba(61, 50, 41, 0.05); + transition: transform var(--transition-medium), box-shadow var(--transition-medium); +} + +.service-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 40px rgba(61, 50, 41, 0.1); +} + +.service-icon { + width: 56px; + height: 56px; + margin-block-end: var(--space-md); + padding: var(--space-sm); + color: var(--color-accent); + background: rgba(201, 168, 124, 0.12); + border-radius: var(--radius-md); +} + +.service-icon svg { + width: 100%; + height: 100%; +} + +.service-card h3 { + font-family: var(--font-body); + font-size: 1.25rem; + font-weight: 600; + margin-block-end: var(--space-xs); +} + +.service-card p { + font-size: 0.95rem; + color: var(--color-text-light); + line-height: 1.6; + max-width: var(--max-line); +} + +@media (min-width: 600px) { + .services-grid { + grid-template-columns: repeat(2, 1fr); + gap: var(--space-lg); + } +} + +/* About */ +.about { + padding: var(--space-2xl) 0; +} + +.about-layout { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xl); + align-items: center; +} + +.about-visual { + display: flex; + justify-content: center; + padding: var(--space-md); +} + +.about-frame { + position: relative; + width: 260px; + height: 260px; +} + +.about-pattern { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; + width: 100%; + height: 100%; + padding: 20px; + background: var(--color-cream); + border-radius: var(--radius-lg); +} + +.about-pattern span { + background: var(--color-warm); + border-radius: var(--radius-sm); + opacity: 0.15; +} + +.about-pattern span:nth-child(5) { + background: var(--color-accent); + opacity: 0.25; +} + +.about-badge { + position: absolute; + bottom: -10px; + inset-inline-end: -10px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100px; + height: 100px; + background: var(--color-accent); + color: var(--color-white); + border-radius: 50%; + box-shadow: 0 8px 30px rgba(139, 105, 20, 0.3); +} + +.about-badge-number { + font-size: 1.75rem; + font-weight: 600; + line-height: 1; +} + +.about-badge-text { + font-size: 0.75rem; + font-weight: 400; + margin-top: 2px; +} + +.about-content { + max-width: 520px; +} + +.about-text { + margin-block-end: var(--space-md); + color: var(--color-text-light); + font-size: 1.05rem; + max-width: var(--max-line); +} + +.about-values { + display: flex; + flex-direction: column; + gap: var(--space-sm); + margin-block-start: var(--space-lg); +} + +.about-values li { + display: flex; + align-items: center; + gap: var(--space-sm); + font-weight: 500; +} + +.about-values svg { + width: 20px; + height: 20px; + color: var(--color-accent); + flex-shrink: 0; +} + +@media (min-width: 768px) { + .about-layout { + grid-template-columns: 0.8fr 1.2fr; + } + + .about-visual { + padding: var(--space-lg); + } + + .about-badge { + bottom: -20px; + inset-inline-end: -20px; + } +} + +/* Reviews */ +.reviews { + padding: var(--space-2xl) 0; + background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-cream) 100%); +} + +.reviews-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); +} + +.review-card { + padding: var(--space-lg); + background: var(--color-white); + border-radius: var(--radius-lg); + box-shadow: 0 4px 24px rgba(61, 50, 41, 0.06); + border-inline-start: 4px solid transparent; + transition: border-color var(--transition-fast); +} + +.review-card:first-child { + border-inline-start-color: var(--color-accent); +} + +.review-stars { + display: flex; + gap: 2px; + margin-block-end: var(--space-md); +} + +.review-stars svg { + width: 18px; + height: 18px; + color: var(--color-warm); +} + +.review-text { + font-size: 1.05rem; + line-height: 1.7; + color: var(--color-text); + margin-block-end: var(--space-md); + max-width: var(--max-line); +} + +.review-author { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.review-avatar { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + color: var(--color-white); + background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-warm) 100%); + border-radius: 50%; +} + +.review-author cite { + font-style: normal; + font-weight: 500; + color: var(--color-text-light); +} + +@media (min-width: 768px) { + .reviews-grid { + grid-template-columns: repeat(3, 1fr); + gap: var(--space-lg); + } +} + +/* Contact */ +.contact { + padding: var(--space-2xl) 0; +} + +.contact-layout { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xl); +} + +.contact-content { + max-width: 480px; +} + +.contact-text { + color: var(--color-text-light); + margin-block-end: var(--space-lg); + font-size: 1.05rem; +} + +.contact-info { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.contact-item { + display: flex; + align-items: center; + gap: var(--space-md); + padding: var(--space-md); + background: var(--color-cream); + border-radius: var(--radius-md); + transition: background var(--transition-fast), box-shadow var(--transition-fast); +} + +.contact-item-phone:hover { + background: rgba(201, 168, 124, 0.25); + box-shadow: 0 4px 20px rgba(139, 105, 20, 0.15); +} + +.contact-item-phone:focus-visible { + outline: 3px solid var(--color-accent); + outline-offset: 2px; + background: rgba(201, 168, 124, 0.25); +} + +.contact-icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-accent); + background: var(--color-white); + border-radius: var(--radius-md); + flex-shrink: 0; +} + +.contact-icon svg { + width: 24px; + height: 24px; +} + +.contact-details { + display: flex; + flex-direction: column; +} + +.contact-label { + font-size: 0.85rem; + color: var(--color-text-light); +} + +.contact-value { + font-size: 1.1rem; + font-weight: 500; + color: var(--color-text); +} + +.contact-cta { + display: flex; + align-items: center; + justify-content: center; +} + +.cta-card { + width: 100%; + max-width: 400px; + padding: var(--space-xl); + text-align: center; + background: linear-gradient(135deg, var(--color-text) 0%, #5a4d40 100%); + border-radius: var(--radius-lg); + color: var(--color-white); +} + +.cta-card h3 { + font-family: var(--font-body); + font-size: 1.5rem; + font-weight: 600; + margin-block-end: var(--space-xs); +} + +.cta-card p { + opacity: 0.85; + margin-block-end: var(--space-lg); +} + +.cta-button-large { + width: 100%; + justify-content: center; + padding: var(--space-md); + font-size: 1.25rem; + background: var(--color-white); + color: var(--color-text); + box-shadow: none; +} + +.cta-button-large:hover { + background: var(--color-cream); + transform: none; + box-shadow: none; +} + +.cta-button-large:focus-visible { + outline: 3px solid var(--color-warm); + outline-offset: 3px; + background: var(--color-cream); + transform: none; +} + +.cta-button-large svg { + color: var(--color-accent); +} + +@media (min-width: 768px) { + .contact-layout { + grid-template-columns: 1fr 1fr; + align-items: center; + } +} + +/* Footer */ +.footer { + padding: var(--space-lg) 0; + background: var(--color-text); + color: var(--color-white); +} + +.footer-content { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-sm); + text-align: center; +} + +.footer-brand { + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: 1.1rem; + font-weight: 500; +} + +.footer-logo { + width: 32px; + height: 32px; + color: var(--color-warm); +} + +.footer-copy { + font-size: 0.85rem; + opacity: 0.75; +} + +/* Reveal Animation */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity var(--transition-slow), transform var(--transition-slow); +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +/* Focus Styles */ +a:focus-visible, +button:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} \ No newline at end of file