diff --git a/styles.css b/styles.css index 3400811..1734c64 100644 --- a/styles.css +++ b/styles.css @@ -501,6 +501,13 @@ textarea:focus { grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center; + padding: 1rem 1.15rem; + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 28px; + background: + linear-gradient(135deg, rgba(10, 12, 17, 0.9), rgba(22, 26, 35, 0.78)); + box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24); + backdrop-filter: blur(10px); } .brand-link { @@ -536,6 +543,7 @@ textarea:focus { flex: 0 0 auto; width: 3.7rem; height: auto; + filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)); } .brand-link-mark { @@ -543,20 +551,36 @@ textarea:focus { max-width: 100%; width: 7.4rem; height: auto; - mix-blend-mode: screen; + filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28)); } .phase-title { text-align: center; + padding-inline: 0.6rem; } .phase-title h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); + color: #ffffff; + text-shadow: 0 4px 18px rgba(0, 0, 0, 0.26); } .phase-subtitle { margin: 0.25rem 0 0; + color: rgba(245, 247, 251, 0.88); + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); +} + +.phase-header .eyebrow { + margin-bottom: 0.35rem; + color: #7aa8ff; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.16); +} + +.phase-header .button.ghost { + background: rgba(10, 12, 17, 0.65); + border-color: rgba(255, 255, 255, 0.14); } .utility-button {