diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 7baf0ce..85f9d6b 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -122,6 +122,31 @@ color: $text-color; } +// Back-link button mixin (shared component) +@mixin back-link-styles { + display: inline-block; + margin-top: $spacing-lg; + padding: $spacing-sm $spacing-md; + color: white; + background-color: var(--primary-color, $primary-color); + border: none; + border-radius: $border-radius-sm; + text-decoration: none; + transition: background-color 0.2s ease; + font-weight: 500; + + &:hover { + background-color: var(--primary-hover, $secondary-color); + color: white; + text-decoration: none; + } + + &:focus { + outline: 2px solid currentColor; + outline-offset: 2px; + } +} + // Responsive breakpoint mixins @mixin mobile { @media (max-width: $mobile) { diff --git a/src/scss/pages/_privacy.scss b/src/scss/pages/_privacy.scss index 1845d46..57855c9 100644 --- a/src/scss/pages/_privacy.scss +++ b/src/scss/pages/_privacy.scss @@ -1,17 +1,21 @@ +// Import variables and mixins +@use '../variables' as *; +@use '../mixins' as *; + // Privacy page specific styles .privacy-container { max-width: 800px; margin: 0 auto; - padding: 20px; + padding: $spacing-md; } .privacy-header { text-align: center; - margin-bottom: 40px; + margin-bottom: $spacing-xl; &__title-wrapper { position: relative; - margin-bottom: 20px; + margin-bottom: $spacing-md; } &__title-content { @@ -27,32 +31,27 @@ border-radius: 50%; width: 50px; height: 50px; - display: flex; - align-items: center; - justify-content: center; + @include flex-center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px var(--shadow); .theme-icon { - font-size: 20px; + font-size: $font-size-lg; } } } .privacy-content { - background: var(--card-bg); - padding: 30px; - border-radius: 8px; - box-shadow: 0 2px 4px var(--shadow); + @include card($spacing-lg); line-height: 1.6; h2 { color: var(--text-color); - margin-top: 30px; - margin-bottom: 15px; + margin-top: $spacing-lg; + margin-bottom: $spacing-md; border-bottom: 1px solid var(--border-color); - padding-bottom: 10px; + padding-bottom: $spacing-sm; &:first-child { margin-top: 0; @@ -60,87 +59,58 @@ } ul { - margin: 15px 0; - padding-left: 30px; + margin: $spacing-md 0; + padding-left: $spacing-lg; } li { - margin-bottom: 8px; + margin-bottom: $spacing-xs; } - // Fix link visibility and styling + // Regular links within content (higher specificity than base styles) a:not(.back-link) { - color: var(--link-color) !important; - text-decoration: underline !important; + color: var(--link-color); + text-decoration: underline; font-weight: 500; &:hover { - color: var(--link-hover) !important; - text-decoration: underline !important; + color: var(--link-hover); + text-decoration: underline; } } + // Back-link button using shared mixin .back-link { - display: inline-block !important; - margin-top: 30px !important; - padding: 10px 20px !important; - color: white !important; - background-color: var(--primary-color, #2196F3) !important; - border: none !important; - border-radius: 4px !important; - text-decoration: none !important; - transition: background-color 0.2s ease !important; - font-weight: 500 !important; - - &:hover { - background-color: var(--primary-hover, #1976D2) !important; - color: white !important; - text-decoration: none !important; - } + @include back-link-styles; } } .effective-date { - color: #666; - font-size: 0.9em; + color: var(--text-secondary); + font-size: $font-size-sm; text-align: center; - margin-bottom: 30px; + margin-bottom: $spacing-lg; } .contact-info { - background: var(--toggle-bg); - padding: 20px; - border-radius: 6px; - margin-top: 20px; + background: var(--bg-secondary); + padding: $spacing-md; + border-radius: $border-radius-sm; + margin-top: $spacing-md; border: 1px solid var(--border-color); a { - color: var(--link-color) !important; - text-decoration: underline !important; + color: var(--link-color); + text-decoration: underline; font-weight: 500; &:hover { - color: var(--link-hover) !important; + color: var(--link-hover); } } } // Global back-link styling (for cases where it's used outside .privacy-content) a.back-link { - display: inline-block !important; - margin-top: 30px !important; - padding: 10px 20px !important; - color: white !important; - background-color: var(--primary-color, #2196F3) !important; - border: none !important; - border-radius: 4px !important; - text-decoration: none !important; - transition: background-color 0.2s ease !important; - font-weight: 500 !important; - - &:hover { - background-color: var(--primary-hover, #1976D2) !important; - color: white !important; - text-decoration: none !important; - } + @include back-link-styles; }