/* ============================================================ TMD branding — activates ONLY when has class "brand-tmd". The "brand-tmd" class is added by a tiny detector script (in the header + content snippets) when ?src=tmd OR the "src" cookie = tmd. IMPORTANT: Every rule below is scoped under html.brand-tmd, so this file is completely INERT for the default page and for ?src=ella — even if it is loaded globally. Nothing here touches Ella branding. Assets (Partial URLs must match): /trusted-medical-logo.png /tmd-man-image.png (sign-in person) /tmd-register-image.png (register hero banner) /tmd-account-created-image.png (account-created hero) /tmd-dashboard-image.png (dashboard hero leaf photo) /tmd-healthprofile-card.png (dashboard Health Profile card) /tmd-newaward-card.png (dashboard Awards card) /tmd-searchregistry-card.png (dashboard Participate / registry card) ============================================================ */ /* ---------- Shared: logos ---------- */ html.brand-tmd #logoImage, html.brand-tmd .login-header img, html.brand-tmd #mainContent .login-header img { content: url("/trusted-medical-logo.png"); } html.brand-tmd .eh-header img, html.brand-tmd .eh-header__logo, html.brand-tmd header img[src*="ellalogo"] { content: url("/trusted-medical-logo.png"); } /* Standard Power Pages header (logo comes from the "Mobile Header" snippet) */ html.brand-tmd .navbar-brand img, html.brand-tmd .navbar-header img, html.brand-tmd .top-bar img[src*="ellalogo"] { content: url("/trusted-medical-logo.png"); } html.brand-tmd footer img, html.brand-tmd .footer img, html.brand-tmd .footer-section img, html.brand-tmd .footer-section .footer-logo, html.brand-tmd img.footer-logo, html.brand-tmd .footer-bottom img, html.brand-tmd #footer img { content: url("/tmd-footer-logo.png"); width: 460px !important; /* enlarged TMD footer logo (matches design) */ max-width: 100% !important; /* but never overflow on small screens */ height: auto !important; } html.brand-tmd .footer-section .footer-tagline--ella { display: none !important; } /* ---------- Sign-in + Forgot-password: person image (replaces Login_Woman_*) ---------- */ html.brand-tmd body:has(#submit-signin-local)::after, html.brand-tmd body:has(#local-login-heading)::after, html.brand-tmd body:has(#submit-forgot-password)::after { background-image: url("/tmd-man-image.png") !important; background-position: bottom right !important; background-repeat: no-repeat !important; background-size: auto !important; display: block !important; } @media (min-width: 768px) { html.brand-tmd body:has(#submit-signin-local)::after, html.brand-tmd body:has(#local-login-heading)::after, html.brand-tmd body:has(#submit-forgot-password)::after { background-image: url("/tmd-man-image.png") !important; background-position: bottom right !important; background-repeat: no-repeat !important; background-size: auto !important; display: block !important; } } /* ---------- Register: hero ---------- */ html.brand-tmd body:has([id*="SecureRegister"]) #content-container, html.brand-tmd body:has(.eh-signup--tmd) #content-container { background: #011E41 !important; } @media (min-width: 768px) { html.brand-tmd body:has([id*="SecureRegister"]) #content-container::before, html.brand-tmd body:has(.eh-signup--tmd) #content-container::before { display: none !important; background: none !important; background-image: none !important; } /* Replaces /signup_banner.png */ html.brand-tmd body:has([id*="SecureRegister"]) #content-container::after, html.brand-tmd body:has(.eh-signup--tmd) #content-container::after { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-image: url("/tmd-register-image.png") !important; background-position: bottom right !important; background-repeat: no-repeat !important; background-color: transparent !important; background-size: auto !important; pointer-events: none !important; z-index: 0 !important; } } /* ---------- Account created: hero image ---------- The theme paints its default (Ella) hero on .hero-cover::before (background-image: /account-created-hero-bg-1.png). We simply swap that image for the TMD one, in the exact same spot. */ html.brand-tmd .hero-cover::before { background-image: url("/tmd-account-created-image.png") !important; } /* ---------- Dashboard (Participant Portal): hero leaf photo ---------- Tank CSS Participant Portal paints the leaf-shaped hero photo as a background on .hero / .hero::after (or ::before). Swap only that photo; layout and card structure stay the same. Middle-card swaps are ready in dashboard-content-snippet.liquid — wire when you share filenames. */ html.brand-tmd .tank-css-participant-portal-page .hero::after, html.brand-tmd .tank-css-participant-portal-page .hero::before, html.brand-tmd .tank-css-participant-portal-page .hero-main::after { background-image: url("/tmd-dashboard-image.png") !important; } /* ---------- Register: marketing layout ---------- */ html.brand-tmd .eh-signup--tmd .eh-signup__join { max-width: 720px; gap: 14px; } html.brand-tmd .eh-signup--tmd .eh-signup__join h2 { font-size: 34px; } html.brand-tmd .eh-signup--tmd .eh-signup__join p { font-weight: 500; max-width: 620px; margin-inline: auto; } html.brand-tmd .eh-signup__info--tmd { align-items: center; } html.brand-tmd .eh-signup__img--tmd img { max-width: 430px; } html.brand-tmd .eh-signup--tmd .eh-signup__content h3 { font-size: 24px; margin-bottom: 8px; } html.brand-tmd .eh-signup__who--tmd .eh-signup__who-img img { border-radius: 16px; } @media (min-width: 992px) { html.brand-tmd .eh-signup__info--tmd { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }