AI update: הוסף את הלוגו של העסק בהדר (Header) של האתר. כתובת הלוגו: https://h1944.co.il/wp-content/uploads/2020/05/logo.png
הלוגו
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
--color-bg-alt: #161616;
|
||||
--color-bg-card: #1c1c1c;
|
||||
--color-text: #f5f5f0;
|
||||
--color-text-muted: #b8b8b8;
|
||||
--color-text-muted: #a8a8a8;
|
||||
--color-gold: #c9a962;
|
||||
--color-gold-light: #e8d5a3;
|
||||
--color-gold-dark: #a08339;
|
||||
@@ -132,13 +132,14 @@ button:focus-visible {
|
||||
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);
|
||||
padding-block: var(--space-sm);
|
||||
transition: background var(--transition-base), padding var(--transition-base);
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: rgba(15, 15, 15, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding-block: var(--space-xs);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
@@ -152,23 +153,27 @@ button:focus-visible {
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.logo-year {
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: 0.2em;
|
||||
.logo-image {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
max-width: 180px;
|
||||
object-fit: contain;
|
||||
transition: height var(--transition-base), opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.site-header.scrolled .logo-image {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.logo:hover .logo-image {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
@@ -233,10 +238,19 @@ button:focus-visible {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.logo-image {
|
||||
height: 42px;
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
.site-header.scrolled .logo-image {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 100%;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
@@ -245,16 +259,15 @@ button:focus-visible {
|
||||
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 {
|
||||
.nav-links.active {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
transform: translateX(0);
|
||||
html[dir="rtl"] .nav-links.active {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
@@ -274,6 +287,17 @@ button:focus-visible {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.logo-image {
|
||||
height: 36px;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.site-header.scrolled .logo-image {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
@@ -430,7 +454,7 @@ button:focus-visible {
|
||||
position: absolute;
|
||||
bottom: var(--space-lg);
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -440,18 +464,22 @@ button:focus-visible {
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
[dir="rtl"] .scroll-indicator {
|
||||
transform: translateX(50%);
|
||||
html[dir="ltr"] .scroll-indicator {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; transform: translateX(-50%) translateY(10px); }
|
||||
0%, 100% { opacity: 1; transform: translateX(50%) translateY(0); }
|
||||
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); }
|
||||
html[dir="ltr"] .scroll-indicator {
|
||||
animation-name: bounce-ltr;
|
||||
}
|
||||
|
||||
@keyframes bounce-ltr {
|
||||
0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
50% { opacity: 0.5; transform: translateX(-50%) translateY(10px); }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -474,8 +502,8 @@ button:focus-visible {
|
||||
}
|
||||
|
||||
.pen-illustration {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
width: 140px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
@@ -483,6 +511,13 @@ button:focus-visible {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.pen-illustration {
|
||||
width: 120px;
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section Styles */
|
||||
.section-header {
|
||||
text-align: center;
|
||||
@@ -522,32 +557,42 @@ button:focus-visible {
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
@media (min-width: 768px) {
|
||||
.services-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.services-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 500px) {
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.service-card {
|
||||
display: block;
|
||||
padding: var(--space-lg);
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid transparent;
|
||||
transition: all var(--transition-base);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.service-card:hover,
|
||||
.service-card:focus-within {
|
||||
.service-card:focus {
|
||||
border-color: var(--color-gold);
|
||||
transform: translateY(-4px);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.service-card:focus-within {
|
||||
.service-card:focus-visible {
|
||||
outline: 2px solid var(--color-gold);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -599,6 +644,7 @@ button:focus-visible {
|
||||
.kaweco-content p {
|
||||
font-size: var(--size-step-0);
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* About */
|
||||
@@ -717,7 +763,7 @@ button:focus-visible {
|
||||
.about-content > p {
|
||||
color: var(--color-text-muted);
|
||||
margin-block-end: var(--space-md);
|
||||
max-width: 55ch;
|
||||
max-width: 50ch;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -734,16 +780,20 @@ button:focus-visible {
|
||||
|
||||
.timeline {
|
||||
flex-direction: row;
|
||||
gap: var(--space-xs);
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
min-width: auto;
|
||||
padding: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
|
||||
.timeline-item .year {
|
||||
font-size: var(--size-step-1);
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
width: 20px;
|
||||
width: 24px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
@@ -916,19 +966,19 @@ a.contact-item:focus {
|
||||
.contact-map iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: grayscale(100%) invert(92%) contrast(90%);
|
||||
filter: grayscale(80%) contrast(95%) brightness(90%);
|
||||
}
|
||||
|
||||
.map-btn {
|
||||
position: absolute;
|
||||
bottom: var(--space-md);
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[dir="rtl"] .map-btn {
|
||||
transform: translateX(50%);
|
||||
html[dir="ltr"] .map-btn {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -964,8 +1014,17 @@ a.contact-item:focus {
|
||||
border-block-end: 1px solid rgba(201, 169, 98, 0.1);
|
||||
}
|
||||
|
||||
.footer-brand .logo-text {
|
||||
font-size: var(--size-step-2);
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
max-width: 150px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
@@ -1023,6 +1082,10 @@ a.contact-item:focus {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user