diff --git a/index.html b/index.html index 0757f6e..47ea1bf 100644 --- a/index.html +++ b/index.html @@ -11,11 +11,19 @@ /> - - + Winbit diff --git a/public/fonts/IBMPlexSans-Bold.otf b/public/fonts/IBMPlexSans-Bold.otf new file mode 100644 index 0000000..5ae5057 Binary files /dev/null and b/public/fonts/IBMPlexSans-Bold.otf differ diff --git a/public/fonts/IBMPlexSans-Medium.otf b/public/fonts/IBMPlexSans-Medium.otf new file mode 100644 index 0000000..02bb792 Binary files /dev/null and b/public/fonts/IBMPlexSans-Medium.otf differ diff --git a/public/fonts/IBMPlexSans-Regular.otf b/public/fonts/IBMPlexSans-Regular.otf new file mode 100644 index 0000000..51b38a2 Binary files /dev/null and b/public/fonts/IBMPlexSans-Regular.otf differ diff --git a/public/fonts/IBMPlexSans-SemiBold.otf b/public/fonts/IBMPlexSans-SemiBold.otf new file mode 100644 index 0000000..23e9734 Binary files /dev/null and b/public/fonts/IBMPlexSans-SemiBold.otf differ diff --git a/public/fonts/IBMPlexSansCondensed-Bold.otf b/public/fonts/IBMPlexSansCondensed-Bold.otf new file mode 100644 index 0000000..340f2c2 Binary files /dev/null and b/public/fonts/IBMPlexSansCondensed-Bold.otf differ diff --git a/public/fonts/IBMPlexSansCondensed-Medium.otf b/public/fonts/IBMPlexSansCondensed-Medium.otf new file mode 100644 index 0000000..1b3f78d Binary files /dev/null and b/public/fonts/IBMPlexSansCondensed-Medium.otf differ diff --git a/public/fonts/IBMPlexSansCondensed-SemiBold.otf b/public/fonts/IBMPlexSansCondensed-SemiBold.otf new file mode 100644 index 0000000..afb39f3 Binary files /dev/null and b/public/fonts/IBMPlexSansCondensed-SemiBold.otf differ diff --git a/public/images/login/logo-winbit-wordmark-ink.png b/public/images/login/logo-winbit-wordmark-ink.png new file mode 100644 index 0000000..998d75d Binary files /dev/null and b/public/images/login/logo-winbit-wordmark-ink.png differ diff --git a/src/index.css b/src/index.css index a3ed357..b162075 100644 --- a/src/index.css +++ b/src/index.css @@ -723,14 +723,9 @@ } .login-brand__name { - margin: 0; - font-family: var(--wb-font); - font-size: 1.35rem; - font-weight: 700; - letter-spacing: 0.14em; - line-height: 1; - color: var(--login-ink); - text-transform: uppercase; + display: block; + height: 1.65rem; + width: auto; } .login-brand__tagline { @@ -740,7 +735,7 @@ font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; - color: var(--login-green); + color: var(--login-green-deep); } /* Bloque de login desplazado a la derecha (como el mock) */ @@ -769,18 +764,18 @@ .login-panel__accent { display: block; - width: 1.85rem; - height: 2px; + width: 3.75rem; + height: 1px; margin: 0 auto 0.85rem; - background: var(--login-green-mid); + background: linear-gradient(90deg, transparent, var(--login-green-mid), transparent); } .login-panel__title { margin: 0; font-family: var(--wb-font-display); font-size: clamp(1.4rem, 5.2vw, 1.9rem); - font-weight: 600; - letter-spacing: 0.09em; + font-weight: 700; + letter-spacing: 0.01em; line-height: 1.15; text-transform: uppercase; color: #f7f3ea; @@ -864,6 +859,14 @@ .login-cta__shape--stroke .login-cta__inner { background: #121412; min-height: calc(var(--login-cta-h) - 3px); + clip-path: polygon( + var(--login-chamfer) 0, + 100% 0, + 100% calc(100% - var(--login-chamfer)), + calc(100% - var(--login-chamfer)) 100%, + 0 100%, + 0 var(--login-chamfer) + ); } .login-cta--outline:hover:not(:disabled) .login-cta__shape--stroke .login-cta__inner { @@ -885,6 +888,7 @@ /* Costura diagonal 45° (paralela al chaflán) */ clip-path: polygon(0 0, 100% 0, calc(100% - var(--login-cta-h)) 100%, 0 100%); margin-right: calc(var(--login-cta-h) * -0.42); + padding-right: 1.5rem; } .login-cta-google__mark { diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx index 730bc69..67f7f21 100644 --- a/src/pages/LoginPage.jsx +++ b/src/pages/LoginPage.jsx @@ -9,6 +9,9 @@ import { useTranslation } from 'react-i18next'; /** Mark Winbit W con fondo transparente (para zona crema). */ const WINBIT_MARK_SRC = '/images/login/logo-winbit-w-clear.png'; +/** Wordmark "WINBIT" oficial, recortado del logo institucional y recoloreado a tinta (para zona crema). */ +const WINBIT_WORDMARK_SRC = '/images/login/logo-winbit-wordmark-ink.png'; + /** G monocromo (blanco sobre verde), como en el mock. */ const GoogleMark = () => (
-

WINBIT

+ WINBIT

{t('auth.login.tagline')}

diff --git a/src/styles/winbit-brand.css b/src/styles/winbit-brand.css index 3ea6dc2..0d9b451 100644 --- a/src/styles/winbit-brand.css +++ b/src/styles/winbit-brand.css @@ -1,6 +1,63 @@ /** * Winbit design tokens — official palette (Aug 2026). */ + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('/fonts/IBMPlexSans-Regular.otf') format('opentype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('/fonts/IBMPlexSans-Medium.otf') format('opentype'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('/fonts/IBMPlexSans-SemiBold.otf') format('opentype'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('/fonts/IBMPlexSans-Bold.otf') format('opentype'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans Condensed'; + src: url('/fonts/IBMPlexSansCondensed-Medium.otf') format('opentype'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans Condensed'; + src: url('/fonts/IBMPlexSansCondensed-SemiBold.otf') format('opentype'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans Condensed'; + src: url('/fonts/IBMPlexSansCondensed-Bold.otf') format('opentype'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + :root { /* Surfaces */ --wb-bg: #0d0f0e;