diff --git a/src/App.css b/src/App.css index b4a3809..911d431 100644 --- a/src/App.css +++ b/src/App.css @@ -960,7 +960,6 @@ blockquote cite { .tech-grid article, .ports-grid article, .partner-list span, -.qr-card, .stage-panel { border: 1px solid var(--tech-line); background: var(--tech-card); @@ -1182,15 +1181,35 @@ blockquote cite { .qr-card { display: grid; justify-items: center; - gap: 1rem; - padding: 1.75rem; + align-self: center; + gap: 1.35rem; + margin-block: 1.75rem; + padding: 3.75rem 1.75rem 3.5rem; + border: 1px solid rgba(201, 154, 69, 0.2); + border-radius: 1.25rem; + background: rgba(255, 255, 255, 0.045); + box-shadow: inset 0 1px 0 rgba(255, 244, 223, 0.06); + backdrop-filter: blur(1.125rem); } .qr-card img { - width: 15rem; - height: 15rem; - border-radius: 1.125rem; + width: 14.5rem; + height: 14.5rem; + padding: 0.65rem; + border-radius: 0.75rem; background: #fff; + box-sizing: border-box; + object-fit: contain; +} + +.qr-card span { + max-width: 13.5rem; + margin: 0; + color: rgba(255, 244, 223, 0.72); + font-size: 0.8125rem; + letter-spacing: 0.08em; + line-height: 1.6; + text-align: center; } .footer { @@ -1852,8 +1871,8 @@ blockquote cite { bottom: 3.625rem; } @keyframes floatBottle { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-0.75rem); } + 0%, 100% { transform: translateY(0) rotate(-10deg); } + 50% { transform: translateY(-2rem) rotate(0deg); } } @media (max-width: 1100px) { @@ -2143,13 +2162,20 @@ blockquote cite { } .qr-card { - padding: 0.75rem !important; - gap: 0.5rem !important; + margin-block: clamp(0.75rem, 2vh, 1.5rem) !important; + padding: 2.25rem 0.9rem 2.1rem !important; + gap: 0.85rem !important; } .qr-card img { width: min(28vh, 11rem) !important; height: min(28vh, 11rem) !important; + padding: 0.45rem !important; +} + +.qr-card span { + font-size: clamp(0.7rem, 1.2vh, 0.8125rem) !important; + line-height: 1.5 !important; } .contact-person strong {