diff --git a/public/css/style.css b/public/css/style.css index 93dee54..7fb0b6b 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -798,6 +798,182 @@ section { color: var(--muted); } +.footer-right { + display: flex; + align-items: center; + gap: 0.6rem; +} + +.footer-sep { + color: var(--border); +} + +.footer a { + color: var(--dim); + transition: color 0.2s; +} + +.footer a:hover { + color: var(--accent); +} + +/* ============================================= + COOKIE CONSENT BANNER + ============================================= */ +.cookie-banner { + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 200; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + padding: 1.25rem 2.5rem; + background: var(--dark); + border-top: 1px solid var(--border); + flex-wrap: wrap; +} + +.cookie-banner[hidden] { display: none; } + +.cookie-text { + font-size: 0.78rem; + color: var(--dim); + line-height: 1.6; + flex: 1; + min-width: 0; +} + +.cookie-text a { + color: var(--accent); + text-decoration: underline; + margin-left: 0.4rem; +} + +.cookie-actions { + display: flex; + gap: 0.75rem; + flex-shrink: 0; +} + +.cookie-btn { + font-family: var(--font-mono); + font-size: 0.72rem; + letter-spacing: 0.1em; + text-transform: uppercase; + padding: 0.55rem 1.25rem; + border: 1px solid var(--border); + background: transparent; + color: var(--dim); + cursor: pointer; + transition: color 0.2s, border-color 0.2s, background 0.2s; +} + +.cookie-btn:hover { + color: var(--text); + border-color: var(--muted); +} + +.cookie-btn-accept { + background: var(--accent); + color: var(--black); + border-color: var(--accent); +} + +.cookie-btn-accept:hover { + background: var(--white); + border-color: var(--white); + color: var(--black); +} + +/* ============================================= + PRIVACY POLICY PAGE + ============================================= */ +.policy-wrap { + max-width: 760px; + margin: 0 auto; + padding: 7rem 2.5rem 6rem; +} + +.policy-wrap h1 { + font-family: var(--font-display); + font-size: clamp(3rem, 6vw, 5.5rem); + line-height: 1; + color: var(--white); + letter-spacing: 0.02em; + margin-bottom: 0.5rem; +} + +.policy-effective { + font-size: 0.72rem; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--dim); + margin-bottom: 3.5rem; +} + +.policy-section { + margin-bottom: 2.5rem; + border-top: 1px solid var(--border); + padding-top: 2rem; +} + +.policy-section h2 { + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--accent); + margin-bottom: 1rem; +} + +.policy-section p, +.policy-section li { + font-size: 0.88rem; + color: var(--dim); + line-height: 1.9; + margin-bottom: 0.8rem; +} + +.policy-section ul { + list-style: none; + padding: 0; +} + +.policy-section ul li::before { + content: '→ '; + color: var(--accent); +} + +.policy-section a { + color: var(--accent); + text-decoration: underline; +} + +.policy-section a:hover { + color: var(--white); +} + +.policy-back { + display: inline-block; + font-size: 0.75rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--dim); + border-bottom: 1px solid var(--border); + padding-bottom: 0.2rem; + margin-bottom: 3rem; + transition: color 0.2s, border-color 0.2s; +} + +.policy-back:hover { + color: var(--accent); + border-color: var(--accent); +} + /* ============================================= ANIMATIONS ============================================= */ @@ -878,8 +1054,28 @@ section { text-align: center; } + .footer-right { + justify-content: center; + } + .projects-footer { flex-direction: column; align-items: flex-start; } + + .cookie-banner { + padding: 1.25rem 1.5rem; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .cookie-actions { + width: 100%; + justify-content: flex-end; + } + + .policy-wrap { + padding: 6rem 1.5rem 4rem; + } } diff --git a/public/index.html b/public/index.html index ad6b120..6a8bdbe 100644 --- a/public/index.html +++ b/public/index.html @@ -11,14 +11,13 @@ - +
@@ -243,10 +242,25 @@