diff --git a/index.html b/index.html new file mode 100644 index 0000000..c9ce137 --- /dev/null +++ b/index.html @@ -0,0 +1,429 @@ + + + + + + + המדריך | ציוד משרדי מאז 1944 + + + + + + + + + + + + + +
+ +
+ +
+
+
+
יבואן רשמי של Kaweco בישראל
+

+ חנות אחת. + שלושה דורות. + משפחה אחת. +

+

מ־1944 מספקים ציוד משרדי איכותי בנתניה

+
+ מה תמצאו אצלנו + בואו לבקר +
+
+ + +
+ +
+
+
+ מה אנחנו מציעים +

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

+

מגוון רחב של מוצרים ושירותים לבית, למשרד ולבית הספר

+
+ +
+
+
+ +
+

ציוד לבית הספר

+

כל מה שהתלמיד צריך להצלחה – מחברות, עטים, תיקים ועוד

+
+ +
+
+ +
+

ציוד משרדי

+

פתרונות מקצועיים לכל משרד – מהדקים ועד ציוד ארגוני

+
+ +
+
+ +
+

נייר ומוצריו

+

מגוון סוגי נייר לכל שימוש – הדפסה, כתיבה ויצירה

+
+ +
+
+ +
+

תיוק ואחסון

+

פתרונות תיוק וארגון חכמים לסדר מושלם במשרד

+
+ +
+
+ +
+

ראשי דיו וטונרים

+

ראשי דיו וטונרים מקוריים ותואמים לכל סוגי המדפסות

+
+ +
+
+ +
+

ציוד היקפי למחשב

+

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

+
+ +
+
+ +
+

מוצרי סלולר

+

אביזרים ומוצרים נלווים לטלפונים חכמים

+
+ +
+
+ +
+

מיכון משרדי

+

מגרסות, כורכים, למינטורים וציוד מיכון מתקדם

+
+
+
+
+ +
+
+
+

יבואן רשמי של
Kaweco

+

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

+
+
+
+ +
+
+
+
+
+
+ 1944 + הקמת החנות +
+ +
+ דור שני + המשך המסורת +
+ +
+ דור שלישי + היום +
+
+ +
+ +
+ הסיפור שלנו +

שלושה דורות,
משפחה אחת

+
+

״אילו היה לי כישרון לכתוב סיפור ולא למכור כלי כתיבה, היה לי את ה׳בסט סלר׳ הכי טוב בעולם.״

+ — אורי ברנדס ז״ל +
+

מאז 1944, חנות המדריך בנתניה מספקת ציוד משרדי איכותי ללקוחות נאמנים. שלושה דורות של משפחה אחת, עם סיפורים שרק בעל חנות ברחוב יכול להכיר – לצחוק ולפעמים לבכות.

+

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

+
+
+
+
+ +
+
+
+ שאלות נפוצות +

יש לכם שאלות?

+
+ +
+
+ + מה שעות הפתיחה של החנות? + + +
+

החנות פתוחה בימים א׳–ה׳. מומלץ להתקשר לפני הביקור לוודא שעות פתיחה מעודכנות: 09-833-0274

+
+
+ +
+ + איך אפשר להגיע לחנות? + + +
+

החנות ממוקמת ברחוב סמילנסקי 2, נתניה – במרכז העיר, עם חניה זמינה באזור.

+
+
+ +
+ + מה ההבדל בין טונר מקורי לתואם? + + +
+

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

+
+
+ +
+ + איפה אפשר לראות את עטי Kaweco? + + +
+

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

+
+
+ +
+ + האם ניתן להזמין מוצרים מיוחדים? + + +
+

בהחלט! אנחנו מתמחים במציאת פתרונות ייחודיים ללקוחותינו. אם יש מוצר שאתם מחפשים ולא מוצאים – דברו איתנו ונעשה כל מאמץ להשיג אותו.

+
+
+ +
+ + האם יש תנאים מיוחדים לעסקים? + + +
+

כן, אנחנו עובדים עם עסקים רבים באזור. צרו קשר לשיחה על הצרכים שלכם ונשמח להתאים הצעה.

+
+
+
+
+
+ +
+
+
+
+ בואו לבקר +

יצירת קשר

+

נשמח לראות אתכם בחנות או לשמוע מכם

+ +
+ +
+ +
+
+ טלפון + 09-833-0274 +
+ + + +
+ +
+
+ כתובת + סמילנסקי 2, נתניה + מיקוד 4243201 +
+ +
+
+ +
+ + + פתח בגוגל מפות + + +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..f6371e0 --- /dev/null +++ b/script.js @@ -0,0 +1,102 @@ +(function() { + 'use strict'; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Mobile Navigation + const mobileToggle = document.querySelector('.mobile-toggle'); + const navLinks = document.querySelector('.nav-links'); + + if (mobileToggle && navLinks) { + mobileToggle.addEventListener('click', () => { + const isExpanded = mobileToggle.getAttribute('aria-expanded') === 'true'; + mobileToggle.setAttribute('aria-expanded', !isExpanded); + mobileToggle.classList.toggle('active'); + navLinks.classList.toggle('active'); + + if (!isExpanded) { + const firstLink = navLinks.querySelector('a'); + if (firstLink) firstLink.focus(); + } + }); + + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + mobileToggle.setAttribute('aria-expanded', 'false'); + mobileToggle.classList.remove('active'); + navLinks.classList.remove('active'); + }); + }); + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && navLinks.classList.contains('active')) { + mobileToggle.setAttribute('aria-expanded', 'false'); + mobileToggle.classList.remove('active'); + navLinks.classList.remove('active'); + mobileToggle.focus(); + } + }); + } + + // Header scroll effect + const header = document.querySelector('.site-header'); + + function handleScroll() { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.classList.add('scrolled'); + } else { + header.classList.remove('scrolled'); + } + } + + window.addEventListener('scroll', handleScroll, { passive: true }); + + // Reveal on scroll + const revealElements = document.querySelectorAll('.reveal'); + + if (prefersReducedMotion) { + revealElements.forEach(el => el.classList.add('visible')); + } else { + const revealObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + revealElements.forEach(el => revealObserver.observe(el)); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + target.scrollIntoView({ + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + + target.setAttribute('tabindex', '-1'); + target.focus({ preventScroll: true }); + } + }); + }); + + // Current year in footer + const yearSpan = document.querySelector('.current-year'); + if (yearSpan) { + yearSpan.textContent = new Date().getFullYear(); + } + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1111f2c --- /dev/null +++ b/style.css @@ -0,0 +1,1057 @@ +:root { + --color-bg: #0f0f0f; + --color-bg-alt: #161616; + --color-bg-card: #1c1c1c; + --color-text: #f5f5f0; + --color-text-muted: #b8b8b8; + --color-gold: #c9a962; + --color-gold-light: #e8d5a3; + --color-gold-dark: #a08339; + --color-accent: #d4af37; + + --font-display: 'Frank Ruhl Libre', serif; + --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: 6rem; + --space-3xl: 10rem; + + --size-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); + --size-step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem); + --size-step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.8rem); + --size-step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem); + --size-step-4: clamp(2.25rem, 1.75rem + 2.5vw, 4rem); + --size-step-5: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem); + + --transition-fast: 150ms ease; + --transition-base: 300ms ease; + --transition-slow: 500ms ease; +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + scroll-padding-top: 100px; +} + +body { + font-family: var(--font-body); + font-size: var(--size-step-0); + line-height: 1.7; + color: var(--color-text); + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100px; + inset-inline-start: var(--space-md); + background: var(--color-gold); + color: var(--color-bg); + padding: var(--space-sm) var(--space-md); + z-index: 9999; + border-radius: 0 0 4px 4px; + font-weight: 500; + transition: top var(--transition-fast); +} + +.skip-link:focus { + top: 0; +} + +h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 700; + line-height: 1.2; +} + +a { + color: inherit; + text-decoration: none; + transition: color var(--transition-fast); +} + +a:hover { + color: var(--color-gold); +} + +a:focus-visible { + outline: 2px solid var(--color-gold); + outline-offset: 4px; +} + +img, svg { + display: block; + max-width: 100%; +} + +button { + font: inherit; + color: inherit; + background: none; + border: none; + cursor: pointer; +} + +button:focus-visible { + outline: 2px solid var(--color-gold); + outline-offset: 4px; +} + +.container { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + background: linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%); + padding-block: var(--space-md); + transition: background var(--transition-base); +} + +.site-header.scrolled { + background: rgba(15, 15, 15, 0.95); + backdrop-filter: blur(10px); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +.logo { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0; +} + +.logo-text { + font-family: var(--font-display); + font-size: var(--size-step-2); + font-weight: 700; + color: var(--color-gold); + letter-spacing: 0.02em; +} + +.logo-year { + font-size: 0.7rem; + color: var(--color-text-muted); + letter-spacing: 0.2em; +} + +.nav-links { + display: flex; + align-items: center; + gap: var(--space-lg); + list-style: none; +} + +.nav-links a { + font-size: 0.9rem; + font-weight: 500; + position: relative; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -4px; + inset-inline-start: 0; + width: 0; + height: 1px; + background: var(--color-gold); + transition: width var(--transition-base); +} + +.nav-links a:hover::after, +.nav-links a:focus::after { + width: 100%; +} + +.nav-cta { + padding: var(--space-xs) var(--space-md); + background: var(--color-gold); + color: var(--color-bg) !important; + border-radius: 2px; +} + +.nav-cta::after { + display: none; +} + +.nav-cta:hover, +.nav-cta:focus { + background: var(--color-gold-light); + color: var(--color-bg) !important; +} + +.mobile-toggle { + display: none; + flex-direction: column; + gap: 5px; + padding: var(--space-xs); +} + +.mobile-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--color-text); + transition: var(--transition-base); +} + +@media (max-width: 768px) { + .nav-links { + position: fixed; + top: 0; + inset-inline-end: 0; + width: 280px; + height: 100vh; + height: 100dvh; + flex-direction: column; + align-items: flex-start; + gap: var(--space-md); + padding: var(--space-3xl) var(--space-lg); + background: var(--color-bg-alt); + transform: translateX(100%); + transition: transform var(--transition-base); + } + + [dir="rtl"] .nav-links { + transform: translateX(-100%); + } + + .nav-links.active { + transform: translateX(0); + } + + .mobile-toggle { + display: flex; + } + + .mobile-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .mobile-toggle.active span:nth-child(2) { + opacity: 0; + } + + .mobile-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); + } +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-lg); + font-weight: 500; + border-radius: 2px; + transition: all var(--transition-base); +} + +.btn:focus-visible { + outline: 2px solid var(--color-gold-light); + outline-offset: 4px; +} + +.btn-primary { + background: var(--color-gold); + color: var(--color-bg); +} + +.btn-primary:hover, +.btn-primary:focus { + background: var(--color-gold-light); + color: var(--color-bg); + transform: translateY(-2px); +} + +.btn-secondary { + background: transparent; + color: var(--color-text); + border: 1px solid var(--color-text-muted); +} + +.btn-secondary:hover, +.btn-secondary:focus { + border-color: var(--color-gold); + color: var(--color-gold); +} + +/* Hero */ +.hero { + min-height: 100vh; + min-height: 100dvh; + display: grid; + grid-template-columns: 1.2fr 0.8fr; + align-items: center; + gap: var(--space-xl); + padding: var(--space-3xl) var(--space-md); + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + background: + radial-gradient(ellipse at 30% 20%, rgba(201, 169, 98, 0.08) 0%, transparent 50%), + radial-gradient(ellipse at 70% 80%, rgba(201, 169, 98, 0.04) 0%, transparent 50%); + pointer-events: none; +} + +.hero-content { + max-width: 650px; + margin-inline-start: auto; + z-index: 1; +} + +.hero-badge { + display: inline-block; + padding: var(--space-xs) var(--space-md); + background: rgba(201, 169, 98, 0.1); + border: 1px solid var(--color-gold); + color: var(--color-gold); + font-size: 0.85rem; + margin-block-end: var(--space-lg); +} + +.hero-title { + font-size: var(--size-step-5); + margin-block-end: var(--space-md); +} + +.title-line { + display: block; +} + +.title-line.accent { + color: var(--color-gold); +} + +.hero-subtitle { + font-size: var(--size-step-1); + color: var(--color-text-muted); + margin-block-end: var(--space-xl); +} + +.hero-cta { + display: flex; + flex-wrap: wrap; + gap: var(--space-md); +} + +.hero-visual { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.pen-illustration { + width: 180px; + height: 360px; + animation: float 6s ease-in-out infinite; +} + +@keyframes float { + 0%, 100% { transform: translateY(0) rotate(-5deg); } + 50% { transform: translateY(-20px) rotate(5deg); } +} + +.floating-elements { + position: absolute; + inset: 0; +} + +.float-item { + position: absolute; + font-size: 1.5rem; + opacity: 0.2; + color: var(--color-gold); +} + +.float-1 { + top: 10%; + inset-inline-start: 10%; +} + +.float-2 { + top: 60%; + inset-inline-end: 20%; +} + +.float-3 { + bottom: 20%; + inset-inline-start: 30%; +} + +.scroll-indicator { + position: absolute; + bottom: var(--space-lg); + inset-inline-start: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-xs); + color: var(--color-text-muted); + font-size: 0.85rem; + animation: bounce 2s ease-in-out infinite; +} + +[dir="rtl"] .scroll-indicator { + transform: translateX(50%); +} + +@keyframes bounce { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; transform: translateX(-50%) translateY(10px); } +} + +[dir="rtl"] @keyframes bounce { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; transform: translateX(50%) translateY(10px); } +} + +@media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + text-align: center; + padding-block-start: calc(var(--space-3xl) + 60px); + } + + .hero-content { + margin-inline: auto; + } + + .hero-cta { + justify-content: center; + } + + .hero-visual { + order: -1; + } + + .pen-illustration { + width: 100px; + height: 200px; + } + + .scroll-indicator { + display: none; + } +} + +/* Section Styles */ +.section-header { + text-align: center; + margin-block-end: var(--space-2xl); +} + +.section-tag { + display: inline-block; + font-size: 0.85rem; + color: var(--color-gold); + letter-spacing: 0.1em; + text-transform: uppercase; + margin-block-end: var(--space-sm); +} + +.section-title { + font-size: var(--size-step-4); +} + +.section-desc { + font-size: var(--size-step-1); + color: var(--color-text-muted); + max-width: 550px; + margin-inline: auto; + margin-block-start: var(--space-sm); +} + +/* Services */ +.services { + padding-block: var(--space-3xl); + background: var(--color-bg-alt); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-md); +} + +@media (min-width: 900px) { + .services-grid { + grid-template-columns: repeat(4, 1fr); + } +} + +@media (max-width: 600px) { + .services-grid { + grid-template-columns: 1fr; + } +} + +.service-card { + padding: var(--space-lg); + background: var(--color-bg-card); + border: 1px solid transparent; + transition: all var(--transition-base); +} + +.service-card:hover, +.service-card:focus-within { + border-color: var(--color-gold); + transform: translateY(-4px); +} + +.service-card:focus-within { + outline: 2px solid var(--color-gold); + outline-offset: 2px; +} + +.service-icon { + width: 48px; + height: 48px; + margin-block-end: var(--space-md); + color: var(--color-gold); +} + +.service-card h3 { + font-size: var(--size-step-1); + margin-block-end: var(--space-xs); +} + +.service-card p { + color: var(--color-text-muted); + font-size: 0.9rem; + line-height: 1.6; +} + +/* Kaweco Banner */ +.kaweco-banner { + padding-block: var(--space-2xl); + background: var(--color-bg); + text-align: center; + position: relative; + border-block: 1px solid rgba(201, 169, 98, 0.15); +} + +.kaweco-content { + position: relative; + max-width: 600px; + margin-inline: auto; +} + +.kaweco-content h2 { + font-size: var(--size-step-3); + margin-block-end: var(--space-md); +} + +.kaweco-brand { + font-family: 'Georgia', serif; + font-style: italic; + color: var(--color-gold); +} + +.kaweco-content p { + font-size: var(--size-step-0); + color: var(--color-text-muted); +} + +/* About */ +.about { + padding-block: var(--space-3xl); +} + +.about-layout { + display: grid; + grid-template-columns: 0.8fr 1.2fr; + gap: var(--space-2xl); + align-items: center; +} + +.about-visual { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-xl); +} + +.timeline { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-sm); +} + +.timeline-item { + display: flex; + flex-direction: column; + align-items: center; + padding: var(--space-md); + background: var(--color-bg-alt); + border: 1px solid var(--color-gold); + min-width: 150px; +} + +.timeline-item .year { + font-family: var(--font-display); + font-size: var(--size-step-2); + color: var(--color-gold); + font-weight: 700; +} + +.timeline-item .event { + font-size: 0.85rem; + color: var(--color-text-muted); +} + +.timeline-line { + width: 1px; + height: 30px; + background: var(--color-gold); + opacity: 0.5; +} + +.about-decoration { + color: var(--color-gold); +} + +.heritage-badge { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 140px; + height: 140px; + border: 2px solid var(--color-gold); + border-radius: 50%; + background: rgba(201, 169, 98, 0.05); +} + +.heritage-number { + font-family: var(--font-display); + font-size: var(--size-step-3); + font-weight: 700; + color: var(--color-gold); + line-height: 1; +} + +.heritage-text { + font-size: 0.85rem; + color: var(--color-text-muted); +} + +.about-content .section-tag, +.about-content .section-title { + text-align: start; +} + +.about-content .section-title { + margin-block-end: var(--space-lg); +} + +.founder-quote { + padding: var(--space-lg); + background: var(--color-bg-alt); + border-inline-start: 3px solid var(--color-gold); + margin-block-end: var(--space-lg); +} + +.founder-quote p { + font-family: var(--font-display); + font-size: var(--size-step-1); + font-style: italic; + margin-block-end: var(--space-sm); +} + +.founder-quote cite { + font-style: normal; + font-size: 0.9rem; + color: var(--color-gold); +} + +.about-content > p { + color: var(--color-text-muted); + margin-block-end: var(--space-md); + max-width: 55ch; +} + +@media (max-width: 900px) { + .about-layout { + grid-template-columns: 1fr; + } + + .about-visual { + order: -1; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } + + .timeline { + flex-direction: row; + gap: var(--space-xs); + } + + .timeline-item { + min-width: auto; + padding: var(--space-sm); + } + + .timeline-line { + width: 20px; + height: 1px; + } + + .about-content .section-tag, + .about-content .section-title { + text-align: center; + } + + .about-content > p { + text-align: center; + margin-inline: auto; + } + + .founder-quote { + border-inline-start: none; + border-block-start: 3px solid var(--color-gold); + text-align: center; + } +} + +/* FAQ */ +.faq { + padding-block: var(--space-3xl); + background: var(--color-bg-alt); +} + +.faq-list { + max-width: 800px; + margin-inline: auto; +} + +.faq-item { + border-block-end: 1px solid rgba(201, 169, 98, 0.2); +} + +.faq-item summary { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-lg) 0; + cursor: pointer; + list-style: none; +} + +.faq-item summary::-webkit-details-marker { + display: none; +} + +.faq-item summary:focus-visible { + outline: 2px solid var(--color-gold); + outline-offset: 4px; +} + +.faq-item summary span { + font-size: var(--size-step-0); + font-weight: 500; +} + +.faq-icon { + width: 24px; + height: 24px; + color: var(--color-gold); + transition: transform var(--transition-base); + flex-shrink: 0; + margin-inline-start: var(--space-md); +} + +.faq-item[open] .faq-icon { + transform: rotate(45deg); +} + +.faq-answer { + padding-block-end: var(--space-lg); + color: var(--color-text-muted); + animation: fadeIn var(--transition-base); +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Contact */ +.contact { + padding-block: var(--space-3xl); +} + +.contact-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-2xl); + align-items: start; +} + +.contact-info .section-tag, +.contact-info .section-title { + text-align: start; +} + +.contact-info > p { + color: var(--color-text-muted); + margin-block-end: var(--space-xl); +} + +.contact-details { + 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-bg-alt); + transition: all var(--transition-base); +} + +a.contact-item:hover, +a.contact-item:focus { + background: var(--color-bg-card); + color: var(--color-text); +} + +.contact-icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(201, 169, 98, 0.1); + border-radius: 50%; + flex-shrink: 0; +} + +.contact-icon svg { + width: 24px; + height: 24px; + color: var(--color-gold); +} + +.contact-text { + display: flex; + flex-direction: column; +} + +.contact-text .label { + font-size: 0.85rem; + color: var(--color-text-muted); +} + +.contact-text .value { + font-size: var(--size-step-1); + font-weight: 500; +} + +.contact-text .value-sub { + font-size: 0.85rem; + color: var(--color-text-muted); +} + +.contact-map { + position: relative; + aspect-ratio: 4/3; + background: var(--color-bg-alt); + overflow: hidden; +} + +.contact-map iframe { + width: 100%; + height: 100%; + filter: grayscale(100%) invert(92%) contrast(90%); +} + +.map-btn { + position: absolute; + bottom: var(--space-md); + inset-inline-start: 50%; + transform: translateX(-50%); + white-space: nowrap; +} + +[dir="rtl"] .map-btn { + transform: translateX(50%); +} + +@media (max-width: 900px) { + .contact-layout { + grid-template-columns: 1fr; + } + + .contact-info .section-tag, + .contact-info .section-title, + .contact-info > p { + text-align: center; + } + + .contact-map { + aspect-ratio: 16/9; + } +} + +/* Footer */ +.site-footer { + padding-block: var(--space-2xl); + background: var(--color-bg-alt); + border-block-start: 1px solid rgba(201, 169, 98, 0.2); +} + +.footer-content { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + gap: var(--space-lg); + padding-block-end: var(--space-xl); + border-block-end: 1px solid rgba(201, 169, 98, 0.1); +} + +.footer-brand .logo-text { + font-size: var(--size-step-2); +} + +.footer-brand p { + color: var(--color-text-muted); + font-size: 0.9rem; +} + +.footer-links { + display: flex; + flex-wrap: wrap; + gap: var(--space-md) var(--space-lg); +} + +.footer-links a { + font-size: 0.9rem; + color: var(--color-text-muted); +} + +.footer-links a:hover, +.footer-links a:focus { + color: var(--color-gold); +} + +.footer-contact { + display: flex; + flex-direction: column; + gap: var(--space-xs); + text-align: end; +} + +.footer-contact a { + color: var(--color-gold); + font-weight: 500; +} + +.footer-contact span { + font-size: 0.9rem; + color: var(--color-text-muted); +} + +.footer-bottom { + padding-block-start: var(--space-lg); + text-align: center; +} + +.footer-bottom p { + font-size: 0.85rem; + color: var(--color-text-muted); +} + +@media (max-width: 768px) { + .footer-content { + flex-direction: column; + align-items: center; + text-align: center; + } + + .footer-links { + justify-content: center; + } + + .footer-contact { + text-align: center; + } +} + +/* Reveal Animations */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity var(--transition-slow), transform var(--transition-slow); +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +@media (prefers-reduced-motion: reduce) { + .reveal { + opacity: 1; + transform: none; + } + + .pen-illustration, + .scroll-indicator { + animation: none; + } +} \ No newline at end of file