diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css index 02f1fc9..9865692 100644 --- a/src/pages/HomePage.css +++ b/src/pages/HomePage.css @@ -21,9 +21,9 @@ body { max-width: 1080px; } -@supports (transform: scale(calc(100dvh / 620px))) { +@supports (transform: scale(calc(100dvh / 660px))) { .frame-wrap { - --composition-scale: clamp(0.78, calc(100dvh / 620px), 1); + --composition-scale: clamp(0.76, calc(100dvh / 660px), 1); } } @@ -83,13 +83,54 @@ body { 0 30px 80px rgba(0, 0, 0, 0.5); } -.trust-badge { +#mlh-trust-badge { + display: block; position: fixed; top: 0; - right: 16px; - width: clamp(74px, 9vw, 108px); - height: auto; - z-index: 5; + right: 50px; + width: 10%; + min-width: 60px; + max-width: 100px; + transform-origin: top center; + transition: transform 0.18s ease, filter 0.18s ease; + z-index: 10000; +} +#mlh-trust-badge:hover, +#mlh-trust-badge:focus-visible { + filter: drop-shadow(0 0 8px rgba(76, 214, 230, 0.32)); + outline: none; + transform: scale(1.04); +} +#mlh-trust-badge img { + display: block; + width: 100%; +} +#mlh-trust-badge .badge-layer { + pointer-events: none; +} +#mlh-trust-badge .badge-cyan, +#mlh-trust-badge .badge-pink { + position: absolute; + inset: 0; +} +#mlh-trust-badge .badge-cyan { + filter: brightness(0) saturate(100%) invert(79%) sepia(46%) saturate(1059%) hue-rotate(142deg) brightness(95%) contrast(90%); + opacity: 0.95; + transform: translate(-2px, -2px); + z-index: 1; +} +#mlh-trust-badge .badge-pink { + filter: brightness(0) saturate(100%) invert(33%) sepia(99%) saturate(2307%) hue-rotate(314deg) brightness(96%) contrast(92%); + opacity: 0.95; + transform: translate(2px, 2px); + z-index: 2; +} +#mlh-trust-badge .badge-white { + position: relative; + filter: + drop-shadow(0 0 4px rgba(244, 242, 255, 0.75)) + drop-shadow(0 0 12px rgba(76, 214, 230, 0.35)); + z-index: 3; } /* ---------- Top-right CTA ---------- */ @@ -158,6 +199,18 @@ body { .terminal .key { color: var(--ink); } .terminal .arrow { color: var(--cyan); } .terminal .val { color: var(--ink); letter-spacing: 1px; } +.terminal .val a { + transition: color 0.18s ease, text-shadow 0.18s ease; +} +.terminal .val a:hover, +.terminal .val a:focus-visible { + color: var(--cyan); + text-shadow: + 0 0 3px rgba(76, 214, 230, 0.72), + 0 0 9px rgba(76, 214, 230, 0.45), + 0 0 18px rgba(76, 214, 230, 0.28); + outline: none; +} /* ---------- Title ---------- */ .title-wrap { @@ -300,6 +353,47 @@ body { opacity: 0.95; } +/* ---------- Policy links ---------- */ +.policy-links { + position: relative; + z-index: 6; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0 12px; + font-family: 'VT323', 'Courier New', monospace; + font-size: var(--cta-font-size); + letter-spacing: 0.5px; + line-height: 1; + text-align: center; + color: #fff; + -webkit-text-fill-color: #fff; + text-shadow: + 0 0 4px rgba(255, 255, 255, 0.95), + 0 0 10px rgba(255, 255, 255, 0.65), + 0 0 20px rgba(76, 214, 230, 0.45); +} +.policy-links a { + color: #fff; + -webkit-text-fill-color: #fff; + transition: color 0.18s ease, text-shadow 0.18s ease; +} +.policy-links a:hover, +.policy-links a:focus-visible { + color: var(--cyan); + -webkit-text-fill-color: var(--cyan); + text-shadow: + 0 0 4px rgba(76, 214, 230, 1), + 0 0 12px rgba(76, 214, 230, 0.85), + 0 0 26px rgba(76, 214, 230, 0.55); + outline: none; +} +.policy-separator { + color: #fff; + -webkit-text-fill-color: #fff; +} + /* ---------- Footer chrome ---------- */ .corners::before, .corners::after, @@ -318,9 +412,9 @@ body { @media (max-width: 720px) { body { padding: clamp(8px, 2.5dvh, 16px) 16px; } - @supports (transform: scale(calc(100dvh / 600px))) { + @supports (transform: scale(calc(100dvh / 640px))) { .frame-wrap { - --composition-scale: clamp(0.84, calc(100dvh / 600px), 1); + --composition-scale: clamp(0.82, calc(100dvh / 640px), 1); } } .frame-stage { @@ -336,16 +430,15 @@ body { --twentyseven-offset: 72%; } .frame { padding: var(--frame-pad-top) 22px var(--frame-pad-bottom); } - .trust-badge { top: 0; right: 12px; width: clamp(58px, 12vw, 82px); } .title-wrap { margin-left: -10px; } .loader-bar { width: 72%; } } @media (max-width: 480px) { body { padding: clamp(6px, 2dvh, 10px) 10px; } - @supports (transform: scale(calc(100dvh / 520px))) { + @supports (transform: scale(calc(100dvh / 560px))) { .frame-wrap { - --composition-scale: clamp(0.88, calc(100dvh / 520px), 1); + --composition-scale: clamp(0.86, calc(100dvh / 560px), 1); } } .frame-stage { @@ -366,7 +459,6 @@ body { --twentyseven-offset: 68%; } .frame { padding: var(--frame-pad-top) 16px var(--frame-pad-bottom); } - .trust-badge { top: 0; right: 8px; width: clamp(48px, 15vw, 64px); } .title-wrap { margin-left: -4px; } .loader-bar { width: 78%; } } diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 319396b..a935974 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,17 +1,41 @@ import './HomePage.css'; +const mlhBadgeSrc = + 'https://logged-assets.s3.amazonaws.com/trust-badge/2027/mlh-trust-badge-2027-white.svg'; + const HomePage = () => { return (
- MLH official member badge for the 2027 season + + + + Major League Hacking 2026 Hackathon Season +
Want to participate? Fill out the interest form. @@ -25,7 +49,13 @@ const HomePage = () => { location{' '} ->{' '} - clemson university + + clemson university +
@@ -77,6 +107,20 @@ const HomePage = () => {
see you soon
+ +
);