Initial AI-generated site
This commit is contained in:
+113
@@ -0,0 +1,113 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>G.r.e 13 ike | Lefkada, Greece</title>
|
||||||
|
<meta name="description" content="G.r.e 13 ike - Registered business in Lefkada, Ionian Islands, Greece. Tax ID: 801637545">
|
||||||
|
<meta property="og:title" content="G.r.e 13 ike | Lefkada, Greece">
|
||||||
|
<meta property="og:description" content="Registered business in Lefkada, Greece. ΑΦΜ: 801637545">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='%230d4f6e'/><text x='50' y='68' font-family='system-ui' font-size='40' fill='%23fff' text-anchor='middle' font-weight='600'>G</text></svg>">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||||
|
|
||||||
|
<main id="main-content" class="page">
|
||||||
|
<header class="header">
|
||||||
|
<div class="header-inner">
|
||||||
|
<div class="logo-mark" aria-hidden="true">G</div>
|
||||||
|
<div class="header-text">
|
||||||
|
<h1 class="company-name">G.r.e 13 ike</h1>
|
||||||
|
<p class="company-location">Lefkada, Ionian Islands</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="hero" aria-label="Lefkada island landscape">
|
||||||
|
<div class="hero-image">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1586861635167-e5223aadc9fe?w=1200&h=500&fit=crop&crop=center&q=80"
|
||||||
|
alt="Aerial view of Lefkada island coastline with turquoise Ionian Sea"
|
||||||
|
loading="eager"
|
||||||
|
width="1200"
|
||||||
|
height="500"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about" class="section section--about">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">About Us</h2>
|
||||||
|
<p class="about-text">
|
||||||
|
G.r.e 13 ike is a registered Greek private company (IKE) based in Lefkada,
|
||||||
|
in the beautiful Ionian Islands region of western Greece.
|
||||||
|
</p>
|
||||||
|
<p class="about-text" lang="el">
|
||||||
|
Η G.r.e 13 ike είναι εγγεγραμμένη ελληνική Ιδιωτική Κεφαλαιουχική Εταιρεία
|
||||||
|
με έδρα τη Λευκάδα, στα Ιόνια Νησιά.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="section section--contact">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Contact</h2>
|
||||||
|
<div class="contact-layout">
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-icon" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="contact-content">
|
||||||
|
<h3 class="contact-label">Telephone <span lang="el">/ Τηλέφωνο</span></h3>
|
||||||
|
<a href="tel:+306985602452" class="contact-value contact-link">+30 698 560 2452</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-icon" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||||
|
<circle cx="12" cy="10" r="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="contact-content">
|
||||||
|
<h3 class="contact-label">Address <span lang="el">/ Διεύθυνση</span></h3>
|
||||||
|
<address class="contact-value">
|
||||||
|
Lefkadiou Hern 4<br>
|
||||||
|
Lefkada 31100, Greece
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-item contact-item--tax">
|
||||||
|
<div class="contact-icon" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="4" width="18" height="16" rx="2"/>
|
||||||
|
<path d="M7 8h10M7 12h10M7 16h6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="contact-content">
|
||||||
|
<h3 class="contact-label">Tax ID <span lang="el">/ ΑΦΜ</span></h3>
|
||||||
|
<span class="contact-value contact-value--mono">801637545</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p class="footer-text">© 2025 G.r.e 13 ike</p>
|
||||||
|
<p class="footer-legal" lang="el">Με επιφύλαξη παντός δικαιώματος</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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();
|
||||||
|
}
|
||||||
|
})();
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user