diff --git a/css/main.css b/css/main.css index bf9be8b..e477e72 100644 --- a/css/main.css +++ b/css/main.css @@ -82,6 +82,7 @@ padding: 0; margin: 0; box-sizing: border-box; + -webkit-tap-highlight-color: transparent; } body, input, button, textarea, select { @@ -1064,8 +1065,10 @@ a { color: var(--color-primary); text-decoration: none; } -a:hover { - color: var(--color-primary); +@media (hover: hover) { + a:hover { + color: var(--color-primary); + } } .navbar-link { @@ -1074,9 +1077,11 @@ a:hover { opacity: var(--navlink-opacity); transition: var(--transition-default); } -.navbar-link:hover { - color: var(--color-primary); - text-decoration: none; +@media (hover: hover) { + .navbar-link:hover { + color: var(--color-primary); + text-decoration: none; + } } .btn-primary, .btn-contact, .btn-learn-more, .btn-signin { @@ -1093,10 +1098,12 @@ a:hover { .btn-primary span, .btn-contact span, .btn-learn-more span, .btn-signin span { color: white; } -.btn-primary:hover, .btn-contact:hover, .btn-learn-more:hover, .btn-signin:hover { - background-color: var(--color-gray-600); - color: var(--color-white); - text-decoration: none; +@media (hover: hover) { + .btn-primary:hover, .btn-contact:hover, .btn-learn-more:hover, .btn-signin:hover { + background-color: var(--color-gray-600); + color: var(--color-white); + text-decoration: none; + } } .btn-signin { @@ -1149,10 +1156,12 @@ a:hover { align-items: center; transition: var(--transition-default); } -.btn-dl:hover { - background-color: var(--color-gray-600); - color: var(--color-white); - text-decoration: none; +@media (hover: hover) { + .btn-dl:hover { + background-color: var(--color-gray-600); + color: var(--color-white); + text-decoration: none; + } } .btn-chevron, .chevron-discovermore { @@ -1403,8 +1412,10 @@ a:hover { .faq-accordion summary span { color: var(--color-heading); } -.faq-accordion summary:hover { - background-color: var(--color-faqchevronbg); +@media (hover: hover) { + .faq-accordion summary:hover { + background-color: var(--color-faqchevronbg); + } } .faq-accordion p { padding-inline: 1.5rem; diff --git a/css/scss/abstracts/mixins/_mixins-buttons.scss b/css/scss/abstracts/mixins/_mixins-buttons.scss index 8d44b29..bb1669c 100644 --- a/css/scss/abstracts/mixins/_mixins-buttons.scss +++ b/css/scss/abstracts/mixins/_mixins-buttons.scss @@ -1,3 +1,5 @@ +@use './mixins-media' as *; + @mixin btn { border-radius: 8px; border: none; @@ -12,9 +14,11 @@ } &:hover { - background-color: var(--color-gray-600); - color: var(--color-white); - text-decoration: none; + @include hover { + background-color: var(--color-gray-600); + color: var(--color-white); + text-decoration: none; + } } } diff --git a/css/scss/abstracts/mixins/_mixins-media.scss b/css/scss/abstracts/mixins/_mixins-media.scss index dd7fa1c..ea8ca00 100644 --- a/css/scss/abstracts/mixins/_mixins-media.scss +++ b/css/scss/abstracts/mixins/_mixins-media.scss @@ -6,6 +6,12 @@ @mixin desktop { @media (width >= 1400px) { - @content + @content; + } +} + +@mixin hover { + @media (hover: hover) { + @content; } } \ No newline at end of file diff --git a/css/scss/base/_reset.scss b/css/scss/base/_reset.scss index edf89c3..44ac1e7 100644 --- a/css/scss/base/_reset.scss +++ b/css/scss/base/_reset.scss @@ -2,4 +2,5 @@ padding: 0; margin: 0; box-sizing: border-box; + -webkit-tap-highlight-color: transparent; } \ No newline at end of file diff --git a/css/scss/components/_buttons.scss b/css/scss/components/_buttons.scss index 21ce097..b99714f 100644 --- a/css/scss/components/_buttons.scss +++ b/css/scss/components/_buttons.scss @@ -60,9 +60,11 @@ transition: var(--transition-default); &:hover { - background-color: var(--color-gray-600); - color: var(--color-white); - text-decoration: none; + @include hover { + background-color: var(--color-gray-600); + color: var(--color-white); + text-decoration: none; + } } } diff --git a/css/scss/components/_faq.scss b/css/scss/components/_faq.scss index 8e5ed6f..59ce333 100644 --- a/css/scss/components/_faq.scss +++ b/css/scss/components/_faq.scss @@ -1,3 +1,5 @@ +@use '../abstracts/' as *; + .faq-accordion { --_faq-border: 1px solid var(--color-faqoutline); margin-top: 3.5rem; @@ -38,7 +40,9 @@ } &:hover { - background-color: var(--color-faqchevronbg); + @include hover { + background-color: var(--color-faqchevronbg); + } } /* Hide marker */ diff --git a/css/scss/components/_links.scss b/css/scss/components/_links.scss index dc5624a..b0bc5ec 100644 --- a/css/scss/components/_links.scss +++ b/css/scss/components/_links.scss @@ -1,9 +1,13 @@ +@use '../abstracts/' as *; + a { color: var(--color-primary); text-decoration: none; &:hover { - color: var(--color-primary); + @include hover { + color: var(--color-primary); + } } } @@ -14,7 +18,9 @@ a { transition: var(--transition-default); &:hover { - color: var(--color-primary); - text-decoration: none; + @include hover { + color: var(--color-primary); + text-decoration: none; + } } } \ No newline at end of file