diff --git a/assets/css/main.css b/assets/css/main.css index 040eca0..f9308b3 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -154,10 +154,24 @@ a:hover { width: auto; } +.brand-info { + display: flex; + flex-direction: column; +} + .brand-text { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); + line-height: 1; +} + +.brand-subtitle { + font-size: 0.8rem; + font-weight: 400; + color: var(--text-light); + margin-top: 2px; + line-height: 1; } .navbar-menu { @@ -205,6 +219,40 @@ a:hover { font-weight: 500; } +.header-contact-info { + display: flex; + align-items: center; + gap: 12px; +} + +.phone-numbers { + display: flex; + flex-direction: column; + gap: 1px; +} + +.phone-number { + font-weight: 600; + font-size: 0.9rem; + line-height: 1.2; + color: var(--primary-color); + text-decoration: none; + transition: var(--transition); +} + +.phone-number:hover { + color: var(--primary-dark); + text-decoration: underline; +} + +.work-hours { + font-size: 0.75rem; + color: var(--text-light); + font-weight: 400; + white-space: nowrap; + margin-top: 2px; +} + .mobile-menu-toggle { display: none; flex-direction: column; @@ -692,6 +740,11 @@ a:hover { margin-top: 3rem; } +.contact .contact-info { + display: flex; + flex-direction: column; +} + .contact-item { display: flex; gap: 1rem; @@ -822,6 +875,42 @@ a:hover { } /* Responsive Design */ +@media (max-width: 1024px) { + .phone-number { + font-size: 0.85rem; + } + + .work-hours { + font-size: 0.7rem; + } +} + +@media (max-width: 900px) { + .header-contact-info { + flex-direction: column; + gap: 4px; + } + + .phone-numbers { + flex-direction: row; + gap: 0; + } + + .phone-number { + font-size: 0.8rem; + } + + .phone-number:not(:last-child)::after { + content: ", "; + margin-right: 4px; + color: var(--text-light); + } + + .work-hours { + margin-top: 0; + } +} + @media (max-width: 768px) { .container { padding: 0 15px; diff --git a/index.html b/index.html index 62b29f9..5e7dcc8 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,10 @@