/* DocPro branding panel — recreated from the left-hand

of the live log-in page. Plain CSS, no build step. Design tokens were captured directly from the live site (navy #00324d, slate-100/400 text, Inter, 40px padding). */ :root { --navy: #00324d; /* brand navy panel background (bg-[#00324d]) */ --white: #ffffff; /* hero heading */ --text: #f1f5f9; /* slate-100, base panel text */ --text-muted: #94a3b8; /* slate-400, feature + footer text */ --accent: #5ab4e5; /* sky accent, matches the logo "PRO" */ --panel-padding: 40px; /* p-10 */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } /* The original panel is `hidden md:flex flex-col ... p-10`. Here it IS the page, so it fills the viewport instead of being a hideable half-width accent. */ .brand-panel { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; /* center the content block on the horizontal axis */ padding: var(--panel-padding); background-color: var(--navy); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } /* The content grows to fill the space above the footer and centers the logo + hero + features group vertically; max-width keeps the hero wrapping onto a few lines like the original. */ .brand-content { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 32rem; text-align: center; /* center the hero + feature text within the block */ } .brand-logo { display: block; height: 128px; /* h-32 */ width: auto; margin: 0 0 2.5rem; /* flush-left, aligned with the hero + feature list */ } .brand-hero { margin: 0 0 2rem; font-size: 48px; font-weight: 600; line-height: 1.25; color: var(--white); text-align: left; /* left-aligned, flush with the feature list below */ } .feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; text-align: left; /* rows stay flush-left, aligned with the hero above */ } .feature-list li { display: flex; align-items: center; gap: 0.75rem; font-size: 16px; color: var(--text-muted); } .feature-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent); } /* Contact icons (email + WhatsApp) sit in a row below the feature list, flush-left with the rest of the group. */ .contact-icons { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; } /* inline-flex so the anchor hugs its icon with no baseline gap below it */ .contact-link { display: inline-flex; } .contact-icon { height: 64px; width: auto; } /* WhatsApp glyph reads larger at the same height, so trim it a quarter (48px). */ .contact-icon--whatsapp { height: 48px; } /* Sits after the flex:1 content, so it rests centered at the bottom of the panel. */ .brand-footer { padding-top: 2rem; font-size: 12px; color: var(--text-muted); } /* Subtle entrance, enabled only once JS adds .is-loaded and the user hasn't asked to reduce motion. Without JS the content simply shows immediately. */ @media (prefers-reduced-motion: no-preference) { .js .brand-content { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; } /* `is-loaded` is set on ; `brand-content` is a descendant of it. */ .is-loaded .brand-content { opacity: 1; transform: none; } } @media (max-width: 640px) { :root { --panel-padding: 24px; } .brand-logo { height: 96px; margin-bottom: 2rem; } .brand-hero { font-size: 34px; } }