diff --git a/index.html b/index.html new file mode 100644 index 0000000..64583ab --- /dev/null +++ b/index.html @@ -0,0 +1,329 @@ + + + + + + + אורלי חן עיצוב שיער | סלון יוקרתי ברמת גן + + + + + + + + + + + +
+ +
+ +
+
+
+
+ +
+
+

סלון עיצוב שיער יוקרתי

+

+ השיער שלך, + היצירה שלי +

+

עיצוב שיער, צביעה מקצועית ואיסופים לאירועים
ברמת גן והסביבה

+ + + להזמנת תור: 050-636-8779 + +
+ +
+ +
+
+
+ +

מומחיות ללא פשרות

+
+
+
+
+ +
+

תספורות

+

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

+
+
+
+ +
+

צביעה מקצועית

+

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

+
+
+
+ +
+

איסוף לאירועים

+

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

+
+
+
+ +
+

טיפולי שיער

+

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

+
+
+
+
+ + + +
+
+
+
+
+ +
+ אורלי חן + מעצבת שיער +
+
+
+
+ +

יצירת יופי, שיער אחר שיער

+

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

+

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

+

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

+
+ סלון ברמת גן | יחס אישי לכל לקוחה | מקצועיות ברמה הגבוהה ביותר +
+
+
+
+
+ +
+
+
+ +

מוכנה לשינוי?

+

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

+ + + התקשרי עכשיו: 050-636-8779 + +
+
+
+ +
+
+
+
+ +

בואי נדבר

+
+ + + 050-636-8779 + +
+ + רמת גן והסביבה +
+
+

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

+
+
+
+ + + + + + + + + + + + + רמת גן + תל אביב + גבעתיים + בני ברק + +
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..f29d704 --- /dev/null +++ b/script.js @@ -0,0 +1,143 @@ +(function() { + 'use strict'; + + // Header scroll effect + var header = document.querySelector('.header'); + + function handleScroll() { + var currentScroll = window.pageYOffset; + + if (currentScroll > 50) { + header.classList.add('scrolled'); + } else { + header.classList.remove('scrolled'); + } + } + + window.addEventListener('scroll', handleScroll, { passive: true }); + + // Mobile navigation toggle + var navToggle = document.querySelector('.nav-toggle'); + var navLinks = document.querySelector('.nav-links'); + + if (navToggle && navLinks) { + navToggle.addEventListener('click', function() { + var isExpanded = navToggle.getAttribute('aria-expanded') === 'true'; + navToggle.setAttribute('aria-expanded', !isExpanded); + navToggle.setAttribute('aria-label', isExpanded ? 'פתיחת תפריט ניווט' : 'סגירת תפריט ניווט'); + navLinks.classList.toggle('active'); + + // Animate hamburger + var spans = navToggle.querySelectorAll('span'); + if (!isExpanded) { + spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)'; + spans[1].style.opacity = '0'; + spans[2].style.transform = 'rotate(-45deg) translate(5px, -5px)'; + } else { + spans[0].style.transform = ''; + spans[1].style.opacity = ''; + spans[2].style.transform = ''; + } + }); + + // Close menu on link click + navLinks.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', function() { + navLinks.classList.remove('active'); + navToggle.setAttribute('aria-expanded', 'false'); + navToggle.setAttribute('aria-label', 'פתיחת תפריט ניווט'); + var spans = navToggle.querySelectorAll('span'); + spans[0].style.transform = ''; + spans[1].style.opacity = ''; + spans[2].style.transform = ''; + }); + }); + } + + // Reveal on scroll + var revealElements = document.querySelectorAll('.reveal'); + + if ('IntersectionObserver' in window) { + var revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + revealElements.forEach(function(el) { + revealObserver.observe(el); + }); + } else { + // Fallback for browsers without IntersectionObserver + revealElements.forEach(function(el) { + el.classList.add('visible'); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + var targetId = this.getAttribute('href'); + if (targetId === '#') return; + + var targetElement = document.querySelector(targetId); + if (targetElement) { + e.preventDefault(); + var headerOffset = 80; + var elementPosition = targetElement.getBoundingClientRect().top; + var offsetPosition = elementPosition + window.pageYOffset - headerOffset; + + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } + }); + }); + + // Add subtle parallax to hero elements (only if motion is allowed) + var heroContent = document.querySelector('.hero-content'); + var heroLines = document.querySelector('.hero-lines'); + var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + if (heroContent && heroLines && !prefersReducedMotion) { + window.addEventListener('scroll', function() { + var scrolled = window.pageYOffset; + var heroSection = document.querySelector('.hero'); + if (!heroSection) return; + var heroHeight = heroSection.offsetHeight; + + if (scrolled < heroHeight) { + var rate = scrolled * 0.3; + heroContent.style.transform = 'translateY(' + rate + 'px)'; + heroLines.style.transform = 'translateY(' + (rate * 0.5) + 'px)'; + } + }, { passive: true }); + } + + // Gallery hover effect enhancement + var galleryItems = document.querySelectorAll('.gallery-item'); + + galleryItems.forEach(function(item) { + item.addEventListener('mouseenter', function() { + galleryItems.forEach(function(otherItem) { + if (otherItem !== item) { + otherItem.style.opacity = '0.6'; + } + }); + }); + + item.addEventListener('mouseleave', function() { + galleryItems.forEach(function(otherItem) { + otherItem.style.opacity = ''; + }); + }); + }); + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d290d94 --- /dev/null +++ b/style.css @@ -0,0 +1,893 @@ +:root { + --black: #0a0a0a; + --white: #f5f5f5; + --gray: #a0a0a0; + --gray-dark: #333333; + --gold: #D4AF37; + --gold-dark: #8B7355; + --gold-faint: rgba(212, 175, 55, 0.1); + + --font-body: 'Heebo', sans-serif; + + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 2rem; + --space-lg: 4rem; + --space-xl: 8rem; + + --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + --transition-fast: 0.2s ease; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +@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-weight: 400; + font-size: 1rem; + line-height: 1.7; + color: var(--white); + background-color: var(--black); + overflow-x: hidden; +} + +.container { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +a { + color: inherit; + text-decoration: none; +} + +img, +svg { + display: block; + max-width: 100%; +} + +button { + font: inherit; + color: inherit; + background: none; + border: none; + cursor: pointer; +} + +/* Typography */ +.section-label { + display: block; + font-family: var(--font-body); + font-size: 0.75rem; + font-weight: 400; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--gold); + margin-block-end: var(--space-sm); +} + +.section-title { + font-family: var(--font-body); + font-size: clamp(2rem, 5vw, 3.5rem); + font-weight: 600; + line-height: 1.2; + color: var(--white); + text-wrap: balance; +} + +/* Header */ +.header { + position: fixed; + top: 0; + inset-inline-start: 0; + inset-inline-end: 0; + z-index: 1000; + padding: var(--space-sm) 0; + background: linear-gradient(to bottom, var(--black), transparent); + transition: background var(--transition); +} + +.header.scrolled { + background: rgba(10, 10, 10, 0.95); + backdrop-filter: blur(10px); +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-xs); + font-family: var(--font-body); + font-size: 1.25rem; + font-weight: 500; + transition: color var(--transition-fast); +} + +.logo:hover, +.logo:focus { + color: var(--gold); +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.nav-links { + display: flex; + gap: var(--space-md); + list-style: none; +} + +.nav-links a { + font-size: 0.875rem; + font-weight: 400; + position: relative; + transition: color var(--transition-fast); +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -4px; + inset-inline-start: 0; + width: 0; + height: 1px; + background: var(--gold); + transition: width var(--transition); +} + +.nav-links a:hover::after, +.nav-links a:focus::after { + width: 100%; +} + +.nav-links a:hover, +.nav-links a:focus { + color: var(--gold); +} + +.nav-cta { + display: inline-flex; + align-items: center; + padding: var(--space-xs) var(--space-sm); + font-size: 0.875rem; + font-weight: 500; + color: var(--black); + background: var(--gold); + border-radius: 2px; + transition: all var(--transition-fast); +} + +.nav-cta:hover, +.nav-cta:focus { + background: var(--white); +} + +.nav-cta-mobile { + display: none; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + background: var(--gold); + border-radius: 50%; + transition: all var(--transition-fast); +} + +.nav-cta-mobile svg { + width: 20px; + height: 20px; + fill: var(--black); +} + +.nav-cta-mobile:hover, +.nav-cta-mobile:focus { + background: var(--white); +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + padding: 5px; +} + +.nav-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--white); + transition: all var(--transition-fast); +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + z-index: 0; +} + +.hero-gradient { + position: absolute; + inset: 0; + background: + radial-gradient(ellipse at 70% 20%, var(--gold-faint) 0%, transparent 50%), + radial-gradient(ellipse at 30% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 50%), + var(--black); +} + +.hero-lines { + position: absolute; + inset: 0; +} + +.hero-lines svg { + width: 100%; + height: 100%; +} + +.hero-content { + position: relative; + z-index: 1; + text-align: center; + padding: var(--space-xl) var(--space-md); +} + +.hero-tagline { + font-size: 0.75rem; + font-weight: 400; + letter-spacing: 0.3em; + text-transform: uppercase; + color: var(--gold); + margin-block-end: var(--space-md); +} + +.hero-title { + font-family: var(--font-body); + font-size: clamp(3rem, 10vw, 7rem); + font-weight: 600; + line-height: 1.1; + margin-block-end: var(--space-md); + text-wrap: balance; +} + +.hero-title-line { + display: block; +} + +.hero-title-line:last-child { + color: var(--gold); +} + +.hero-subtitle { + font-size: 1.125rem; + font-weight: 300; + color: var(--gray); + margin-block-end: var(--space-lg); + max-width: 500px; + margin-inline: auto; +} + +.btn { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-md); + font-size: 1rem; + font-weight: 500; + border-radius: 2px; + transition: all var(--transition); +} + +.btn-icon { + width: 20px; + height: 20px; + fill: currentColor; +} + +.btn-primary { + color: var(--black); + background: var(--gold); +} + +.btn-primary:hover, +.btn-primary:focus { + background: var(--white); + transform: translateY(-2px); +} + +.btn-large { + padding: var(--space-sm) var(--space-lg); + font-size: 1.125rem; +} + +.hero-scroll { + position: absolute; + bottom: var(--space-md); + inset-inline-start: 50%; + transform: translateX(50%); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-xs); + font-size: 0.75rem; + color: var(--gray); + animation: float 2s ease-in-out infinite; +} + +.hero-scroll svg { + width: 24px; + height: 24px; +} + +@keyframes float { + 0%, 100% { transform: translateX(50%) translateY(0); } + 50% { transform: translateX(50%) translateY(10px); } +} + +/* Services */ +.services { + padding: var(--space-xl) 0; +} + +.section-header { + text-align: center; + margin-block-end: var(--space-lg); +} + +.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); + } +} + +.service-card { + position: relative; + padding: var(--space-lg) var(--space-md); + background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%); + border: 1px solid rgba(255,255,255,0.05); + border-radius: 4px; + transition: all var(--transition); +} + +.service-card::before { + content: ''; + position: absolute; + inset: 0; + border-radius: 4px; + background: linear-gradient(135deg, var(--gold-faint) 0%, transparent 50%); + opacity: 0; + transition: opacity var(--transition); +} + +.service-card:hover::before, +.service-card:focus-within::before { + opacity: 1; +} + +.service-card:hover, +.service-card:focus-within { + transform: translateY(-5px); + border-color: var(--gold); +} + +.service-icon { + margin-block-end: var(--space-md); +} + +.service-icon svg { + width: 80px; + height: 80px; +} + +.service-title { + font-family: var(--font-body); + font-size: 1.5rem; + font-weight: 600; + margin-block-end: var(--space-sm); + color: var(--gold); +} + +.service-desc { + font-size: 0.9375rem; + color: var(--gray); + line-height: 1.8; + max-width: 45ch; +} + +/* Gallery */ +.gallery { + padding: var(--space-xl) 0; + background: linear-gradient(180deg, var(--black) 0%, rgba(20,20,20,1) 50%, var(--black) 100%); +} + +.gallery-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 200px); + gap: var(--space-sm); +} + +.gallery-item { + position: relative; + border-radius: 4px; + overflow: hidden; +} + +.gallery-item-large { + grid-column: span 2; + grid-row: span 2; +} + +.gallery-item-tall { + grid-row: span 2; +} + +.gallery-visual { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: flex-start; + padding: var(--space-sm); + transition: transform var(--transition); +} + +.gallery-visual-1 { + background: linear-gradient(135deg, var(--gold) 0%, var(--black) 100%); +} + +.gallery-visual-2 { + background: linear-gradient(180deg, #1a1a1a 0%, var(--gold-dark) 100%); +} + +.gallery-visual-3 { + background: linear-gradient(225deg, var(--white) 0%, var(--gray) 100%); +} + +.gallery-visual-4 { + background: linear-gradient(45deg, var(--black) 0%, #2a2a2a 50%, var(--gold) 100%); +} + +.gallery-visual-5 { + background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 50%, var(--black) 100%); +} + +.gallery-visual-6 { + background: radial-gradient(circle at 30% 30%, var(--gold) 0%, var(--black) 70%); +} + +.gallery-item:hover .gallery-visual, +.gallery-item:focus-within .gallery-visual { + transform: scale(1.05); +} + +.gallery-pattern { + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} + +.gallery-label { + position: relative; + z-index: 1; + font-size: 0.875rem; + font-weight: 500; + color: var(--white); + padding: var(--space-xs) var(--space-sm); + background: rgba(0,0,0,0.85); + backdrop-filter: blur(5px); + border-radius: 2px; +} + +.gallery-label-dark { + color: var(--black); + background: rgba(255,255,255,0.95); +} + +/* About */ +.about { + padding: var(--space-xl) 0; +} + +.about-layout { + display: grid; + grid-template-columns: 1fr 1.5fr; + gap: var(--space-lg); + align-items: center; +} + +.about-visual { + display: flex; + justify-content: center; +} + +.about-frame { + position: relative; +} + +.about-frame svg { + width: 100%; + max-width: 300px; + height: auto; +} + +.about-frame-text { + position: absolute; + bottom: 60px; + inset-inline-start: 50%; + transform: translateX(50%); + text-align: center; +} + +[dir="ltr"] .about-frame-text { + transform: translateX(-50%); +} + +.about-frame-name { + display: block; + font-family: var(--font-body); + font-size: 1.5rem; + font-weight: 500; + color: var(--white); +} + +.about-frame-title { + display: block; + font-family: var(--font-body); + font-size: 0.75rem; + font-weight: 400; + color: var(--gold); + margin-block-start: 0.25rem; +} + +.about-content { + max-width: 600px; +} + +.about-text { + font-size: 1rem; + color: var(--gray); + margin-block-end: var(--space-sm); + max-width: 65ch; +} + +.about-text:last-of-type { + margin-block-end: var(--space-md); +} + +.about-highlight { + padding-block-start: var(--space-md); + border-top: 1px solid rgba(255,255,255,0.1); +} + +.about-highlight-text { + font-size: 1rem; + font-weight: 500; + color: var(--gold); + letter-spacing: 0.02em; +} + +/* CTA Section */ +.cta-section { + padding: var(--space-lg) 0; +} + +.cta-box { + position: relative; + text-align: center; + padding: var(--space-xl); + background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 50%); + border: 1px solid var(--gold); + border-radius: 8px; + overflow: hidden; +} + +.cta-decor { + position: absolute; + top: 50%; + inset-inline-end: -50px; + transform: translateY(-50%); + width: 200px; + height: 200px; + opacity: 0.5; +} + +.cta-title { + font-family: var(--font-body); + font-size: clamp(2rem, 5vw, 3rem); + font-weight: 600; + margin-block-end: var(--space-sm); + text-wrap: balance; +} + +.cta-text { + font-size: 1.125rem; + color: var(--gray); + margin-block-end: var(--space-md); + max-width: 500px; + margin-inline: auto; +} + +/* Contact */ +.contact { + padding: var(--space-xl) 0; + background: linear-gradient(180deg, var(--black) 0%, rgba(15,15,15,1) 100%); +} + +.contact-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-lg); + align-items: center; +} + +.contact-details { + margin-block: var(--space-md); +} + +.contact-item { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) 0; + font-size: 1.125rem; + transition: color var(--transition-fast); +} + +a.contact-item:hover, +a.contact-item:focus { + color: var(--gold); +} + +a.contact-item:hover .contact-icon, +a.contact-item:focus .contact-icon { + fill: var(--white); +} + +.contact-icon { + width: 24px; + height: 24px; + fill: var(--gold); + flex-shrink: 0; + transition: fill var(--transition-fast); +} + +.contact-note { + font-size: 0.9375rem; + color: var(--gray); + line-height: 1.8; + max-width: 50ch; +} + +.map-placeholder { + border-radius: 8px; + overflow: hidden; + border: 1px solid rgba(255,255,255,0.1); +} + +.map-placeholder svg { + width: 100%; + height: auto; +} + +/* Footer */ +.footer { + padding: var(--space-md) 0; + border-top: 1px solid rgba(255,255,255,0.05); +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-brand { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.footer-logo { + width: 30px; + height: 30px; +} + +.footer-name { + font-family: var(--font-body); + font-size: 1rem; + font-weight: 500; +} + +.footer-copy { + font-size: 0.75rem; + color: var(--gray); +} + +/* Reveal Animation */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.8s ease, transform 0.8s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* Mobile Navigation */ +@media (max-width: 768px) { + .nav-links, + .nav-cta { + display: none; + } + + .nav-cta-mobile { + display: flex; + } + + .nav-toggle { + display: flex; + } + + .nav-links.active { + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + inset-inline-start: 0; + inset-inline-end: 0; + background: var(--black); + padding: var(--space-md); + gap: var(--space-sm); + border-top: 1px solid rgba(255,255,255,0.1); + } + + .services-grid { + grid-template-columns: 1fr; + } + + .gallery-grid { + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + } + + .gallery-item-large { + grid-column: span 2; + grid-row: span 1; + } + + .gallery-item-tall { + grid-row: span 1; + } + + .gallery-item { + min-height: 200px; + } + + .about-layout, + .contact-layout { + grid-template-columns: 1fr; + gap: var(--space-md); + } + + .about-visual { + order: -1; + } + + .footer-content { + flex-direction: column; + gap: var(--space-sm); + text-align: center; + } + + .hero-scroll { + transform: translateX(50%); + } +} + +@media (max-width: 480px) { + :root { + --space-lg: 3rem; + --space-xl: 5rem; + } + + .hero-title { + font-size: clamp(2.5rem, 12vw, 4rem); + } + + .gallery-grid { + grid-template-columns: 1fr; + } + + .gallery-item-large { + grid-column: span 1; + } + + .cta-box { + padding: var(--space-lg) var(--space-md); + } + + .btn-large { + padding: var(--space-sm) var(--space-md); + font-size: 1rem; + } +} + +/* Focus States */ +a:focus-visible, +button:focus-visible { + outline: 2px solid var(--gold); + outline-offset: 2px; +} + +/* Skip link for accessibility */ +.skip-link { + position: absolute; + top: -40px; + inset-inline-start: 0; + background: var(--gold); + color: var(--black); + padding: var(--space-xs) var(--space-sm); + z-index: 10000; + transition: top var(--transition-fast); +} + +.skip-link:focus { + top: 0; +} \ No newline at end of file