diff --git a/index.html b/index.html new file mode 100644 index 0000000..c7bbc1e --- /dev/null +++ b/index.html @@ -0,0 +1,113 @@ + + + + + + G.r.e 13 ike | Lefkada, Greece + + + + + + + + + + + + + +
+
+
+ +
+

G.r.e 13 ike

+

Lefkada, Ionian Islands

+
+
+
+ +
+
+ Aerial view of Lefkada island coastline with turquoise Ionian Sea +
+
+ +
+
+

About Us

+

+ G.r.e 13 ike is a registered Greek private company (IKE) based in Lefkada, + in the beautiful Ionian Islands region of western Greece. +

+

+ Η G.r.e 13 ike είναι εγγεγραμμένη ελληνική Ιδιωτική Κεφαλαιουχική Εταιρεία + με έδρα τη Λευκάδα, στα Ιόνια Νησιά. +

+
+
+ +
+
+

Contact

+
+
+ +
+

Telephone / Τηλέφωνο

+ +30 698 560 2452 +
+
+ +
+ +
+

Address / Διεύθυνση

+
+ Lefkadiou Hern 4
+ Lefkada 31100, Greece +
+
+
+ +
+ +
+

Tax ID / ΑΦΜ

+ 801637545 +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..fcf931e --- /dev/null +++ b/script.js @@ -0,0 +1,153 @@ +(function() { + 'use strict'; + + // Check for reduced motion preference + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Reveal on scroll + function initRevealOnScroll() { + if (prefersReducedMotion) { + // If reduced motion is preferred, show all elements immediately + document.querySelectorAll('.reveal').forEach(el => { + el.classList.add('revealed'); + }); + return; + } + + const revealElements = document.querySelectorAll('.reveal'); + + const observerOptions = { + root: null, + rootMargin: '0px 0px -10% 0px', + threshold: 0.1 + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('revealed'); + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + revealElements.forEach(el => observer.observe(el)); + } + + // Smooth scroll for anchor links + function initSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const targetElement = document.querySelector(targetId); + if (!targetElement) return; + + e.preventDefault(); + + targetElement.scrollIntoView({ + behavior: prefersReducedMotion ? 'auto' : 'smooth', + block: 'start' + }); + + // Update focus for accessibility + targetElement.setAttribute('tabindex', '-1'); + targetElement.focus(); + }); + }); + } + + // Header background on scroll + function initHeaderScroll() { + const header = document.querySelector('.site-header'); + if (!header) return; + + let ticking = false; + + function updateHeader() { + const scrollY = window.scrollY; + + if (scrollY > 100) { + header.style.background = 'rgba(245, 240, 232, 0.95)'; + header.style.backdropFilter = 'blur(10px)'; + header.style.boxShadow = '0 2px 20px rgba(139, 109, 76, 0.1)'; + } else { + header.style.background = 'linear-gradient(to bottom, var(--color-cream) 0%, rgba(245, 240, 232, 0) 100%)'; + header.style.backdropFilter = 'none'; + header.style.boxShadow = 'none'; + } + + ticking = false; + } + + window.addEventListener('scroll', () => { + if (!ticking) { + requestAnimationFrame(updateHeader); + ticking = true; + } + }, { passive: true }); + } + + // Parallax effect for hero shapes + function initParallax() { + if (prefersReducedMotion) return; + + const shapes = document.querySelectorAll('.floating-shape'); + if (!shapes.length) return; + + let ticking = false; + + function updateParallax() { + const scrollY = window.scrollY; + const windowHeight = window.innerHeight; + + if (scrollY < windowHeight) { + shapes.forEach((shape, index) => { + const speed = 0.1 + (index * 0.05); + const yOffset = scrollY * speed; + shape.style.transform = `translateY(${yOffset}px)`; + }); + } + + ticking = false; + } + + window.addEventListener('scroll', () => { + if (!ticking) { + requestAnimationFrame(updateParallax); + ticking = true; + } + }, { passive: true }); + } + + // Badge rotation pause on hover + function initBadgeInteraction() { + const badge = document.querySelector('.hero-badge'); + if (!badge) return; + + badge.addEventListener('mouseenter', () => { + badge.style.animationPlayState = 'paused'; + }); + + badge.addEventListener('mouseleave', () => { + badge.style.animationPlayState = 'running'; + }); + } + + // Initialize all + function init() { + initRevealOnScroll(); + initSmoothScroll(); + initHeaderScroll(); + initParallax(); + initBadgeInteraction(); + } + + // Run on DOM ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d5e64a4 --- /dev/null +++ b/style.css @@ -0,0 +1,341 @@ +:root { + /* Mediterranean palette */ + --color-sea-deep: #0d4f6e; + --color-sea-mid: #1a7a9e; + --color-sea-light: #e8f4f8; + --color-sand: #f5f1eb; + --color-terracotta: #c4725a; + + --color-white: #ffffff; + --color-gray-100: #f7f7f7; + --color-gray-200: #e5e5e5; + --color-gray-500: #6b7280; + --color-gray-700: #374151; + --color-gray-900: #111827; + + --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2.5rem; + --space-xl: 4rem; + + --transition-fast: 150ms ease; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-sans); + font-size: 1rem; + line-height: 1.6; + color: var(--color-gray-700); + background-color: var(--color-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100%; + left: var(--space-sm); + padding: var(--space-xs) var(--space-sm); + background: var(--color-sea-deep); + color: var(--color-white); + text-decoration: none; + font-weight: 500; + border-radius: 4px; + z-index: 1000; +} + +.skip-link:focus { + top: var(--space-sm); +} + +/* Layout */ +.page { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.container { + width: 100%; + max-width: 720px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +/* Header */ +.header { + background: var(--color-sea-deep); + color: var(--color-white); + padding: var(--space-lg) var(--space-md); +} + +.header-inner { + max-width: 720px; + margin-inline: auto; + display: flex; + align-items: center; + gap: var(--space-md); +} + +.logo-mark { + width: 56px; + height: 56px; + background: rgba(255, 255, 255, 0.15); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.75rem; + font-weight: 600; + flex-shrink: 0; +} + +.company-name { + font-size: clamp(1.5rem, 4vw, 2rem); + font-weight: 600; + letter-spacing: -0.01em; + line-height: 1.2; +} + +.company-location { + font-size: 0.9375rem; + opacity: 0.8; + margin-top: 0.25rem; +} + +/* Hero */ +.hero { + position: relative; + width: 100%; + aspect-ratio: 2.4 / 1; + max-height: 340px; + overflow: hidden; + background: var(--color-sea-light); +} + +.hero-image { + width: 100%; + height: 100%; +} + +.hero-image img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +/* Sections */ +.section { + padding: var(--space-xl) 0; +} + +.section--about { + background: var(--color-sand); +} + +.section--contact { + background: var(--color-white); +} + +.section-title { + font-size: 1.25rem; + font-weight: 600; + color: var(--color-gray-900); + margin-bottom: var(--space-md); + position: relative; + padding-inline-start: var(--space-sm); +} + +.section-title::before { + content: ''; + position: absolute; + inset-inline-start: 0; + top: 0.125em; + bottom: 0.125em; + width: 3px; + background: var(--color-terracotta); + border-radius: 2px; +} + +/* About */ +.about-text { + font-size: 1rem; + line-height: 1.75; + color: var(--color-gray-700); + max-width: 60ch; + margin-bottom: var(--space-sm); +} + +.about-text:last-child { + margin-bottom: 0; + color: var(--color-gray-500); + font-size: 0.9375rem; +} + +/* Contact */ +.contact-layout { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +@media (min-width: 540px) { + .contact-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-lg); + } + + .contact-item--tax { + grid-column: 1 / -1; + } +} + +.contact-item { + display: flex; + align-items: flex-start; + gap: var(--space-sm); +} + +.contact-icon { + width: 36px; + height: 36px; + color: var(--color-sea-mid); + flex-shrink: 0; + margin-top: 0.125rem; +} + +.contact-icon svg { + width: 100%; + height: 100%; +} + +.contact-label { + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--color-gray-500); + margin-bottom: 0.25rem; +} + +.contact-label span { + font-weight: 400; + opacity: 0.7; +} + +.contact-value { + font-size: 1rem; + color: var(--color-gray-900); + line-height: 1.5; +} + +.contact-value--mono { + font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; + font-size: 0.9375rem; + letter-spacing: 0.02em; +} + +address.contact-value { + font-style: normal; +} + +.contact-link { + color: var(--color-sea-deep); + text-decoration: none; + transition: color var(--transition-fast); +} + +.contact-link:hover { + color: var(--color-sea-mid); + text-decoration: underline; + text-underline-offset: 2px; +} + +.contact-link:focus-visible { + outline: 2px solid var(--color-sea-mid); + outline-offset: 2px; + border-radius: 2px; +} + +/* Footer */ +.footer { + margin-top: auto; + background: var(--color-gray-900); + color: var(--color-gray-200); + padding: var(--space-lg) var(--space-md); + text-align: center; +} + +.footer-text { + font-size: 0.875rem; + font-weight: 500; +} + +.footer-legal { + font-size: 0.8125rem; + opacity: 0.6; + margin-top: 0.25rem; +} + +/* Focus Styles */ +a:focus-visible { + outline: 2px solid var(--color-sea-mid); + outline-offset: 2px; +} + +/* Print */ +@media print { + .hero { + display: none; + } + + .header { + background: none; + color: var(--color-gray-900); + border-bottom: 2px solid currentColor; + } + + .logo-mark { + background: var(--color-gray-200); + } + + .section { + background: none !important; + padding: var(--space-md) 0; + } + + .footer { + background: none; + color: var(--color-gray-700); + border-top: 1px solid var(--color-gray-200); + } +} \ No newline at end of file