/* embed.css — chromeless (?embed=1) widget mode for JLIG calculator tools. * * Deliberately ISOLATED from jlfg-v1.css (loaded by 300+ pages). Every rule * is scoped under html.embed-mode, so linking this on a normal tool page is * inert — it only takes effect when the inline head bootstrap adds the class * (i.e. when the page is loaded as an embed). Linking it in (rather * than injecting via JS) avoids a flash of full chrome before hide. * * Strategy: visual chrome (nav/hero/footer/FABs) is hidden here; heavy * SCRIPTS (chat, cookie-consent, session, account-nav, trackers) are stripped * in the tool's bootstrap, not merely hidden — a hidden script still executes. */ /* ---- hide the full-site chrome inside the iframe ---- */ html.embed-mode, html.embed-mode body { background: #fff; } html.embed-mode .nav, html.embed-mode .crumb, html.embed-mode .hero, html.embed-mode .cta-bar, html.embed-mode .footer, html.embed-mode .sticky-call, html.embed-mode .jlig-fab-schedule { display: none !important; } /* tighten the tool to the iframe viewport (no outer page margins) */ html.embed-mode .calc-wrap { margin: 0 auto; padding: 1rem 1rem 0; max-width: 700px; } html.embed-mode .method { margin-top: 1.25rem; } /* ---- compact branded header (shown ONLY in embed mode) ---- */ .embed-brand, .embed-powered { display: none; } html.embed-mode .embed-brand { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-bottom: 1px solid #e2e8f0; font-family: 'DM Sans', system-ui, sans-serif; } html.embed-mode .embed-brand-mark { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; color: #001f3f; text-decoration: none; line-height: 1.1; white-space: nowrap; } html.embed-mode .embed-brand-sub { font-size: .72rem; color: #64748b; } /* optional partner co-brand strip (populated by embed.js from ?partner) */ html.embed-mode .embed-partner { display: flex; align-items: center; gap: .45rem; margin-left: auto; font-size: .72rem; color: #64748b; text-align: right; } html.embed-mode .embed-partner img { height: 22px; width: auto; border-radius: 4px; } /* ---- CONDENSED, responsive layout ------------------------------------------ The full page stacks 5 padded cards (each with a heading + hint + per-field sub-hints) + a long "How DIME works" explainer → ~2300px, result far below the fold. In embed mode we want the DIME inputs AND the estimate visible together with minimal whitespace, so we: - drop the explainer + all the hint/sub-hint prose, - flatten the cards (no card chrome, tight spacing) into one tidy form, - put the estimate first (mobile) or in a side rail (desktop). */ html.embed-mode .method { display: none; } html.embed-mode .calc-wrap > .calc-card .hint, html.embed-mode .calc-row label small { display: none; } /* strip prose */ html.embed-mode .calc-wrap { padding: .7rem .85rem .3rem; } html.embed-mode .calc-card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 .5rem; } html.embed-mode .calc-card h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); margin: 0 0 .35rem; padding-top: .5rem; border-top: 1px solid var(--border); } html.embed-mode .calc-card:first-of-type h2 { border-top: 0; padding-top: 0; } html.embed-mode .calc-row { margin-bottom: .4rem; grid-template-columns: 1fr 116px; gap: .6rem; } html.embed-mode .calc-row label { font-size: .88rem; font-weight: 500; } html.embed-mode .calc-row input[type=number] { padding: .45rem .6rem; font-size: .95rem; } html.embed-mode .result-card { padding: 1rem 1.15rem; margin: 0 0 .7rem; border-radius: 12px; } html.embed-mode .result-card h2 { font-size: .85rem; margin-bottom: .25rem; } html.embed-mode .result-amount { font-size: clamp(1.7rem, 5.5vw, 2.3rem); margin-bottom: .45rem; } html.embed-mode .result-card p { font-size: .8rem; line-height: 1.45; margin: 0 auto .8rem; } html.embed-mode .result-explain { font-size: .8rem; padding: .65rem .85rem; line-height: 1.55; } /* Mobile (single column): estimate FIRST so the number is visible immediately. */ @media (max-width: 639px) { html.embed-mode .calc-wrap { display: flex; flex-direction: column; } html.embed-mode .result-card { order: -2; } html.embed-mode .result-explain { order: -1; } } /* Desktop/tablet: inputs left, estimate in a side rail — DIME + amount in view together, no scroll. */ @media (min-width: 640px) { html.embed-mode .calc-wrap { display: grid; grid-template-columns: 1fr 260px; gap: 0 1.2rem; max-width: 880px; align-items: start; } html.embed-mode .calc-card { grid-column: 1; } html.embed-mode .result-explain { grid-column: 1; } html.embed-mode .result-card { grid-column: 2; grid-row: 1 / span 99; align-self: start; margin: 0; } } /* ---- "Powered by" backlink footer (shown ONLY in embed mode) ---- */ html.embed-mode .embed-powered { display: flex; justify-content: center; padding: .9rem 1rem 1.3rem; font-family: 'DM Sans', system-ui, sans-serif; } html.embed-mode .embed-powered a { font-size: .8rem; color: #001f3f; text-decoration: none; font-weight: 600; opacity: .85; } html.embed-mode .embed-powered a:hover { opacity: 1; text-decoration: underline; }