/* ============================================================================ Ciputra IVF — pricing-pages embed styles. Scoped under .ivf-embed-content / #ivf-compare so nothing leaks into the rest of the WordPress theme. Mirrors the patient app's PAGE_STYLE (price grid) and PKG_STYLE (package cards) so the server-fetched fragments look identical to the live tool. Source of truth: deploy/wp-staging/assets/ivf-embed/embed.css (this repo) — deployed to the WP web root at /ivf-embed/embed.css. ============================================================================ */ .ivf-embed-content { --ivf-ink:#191C1D; --ivf-muted:#5b6566; --ivf-line:#EDEEEF; --ivf-ink-soft:#475569; --ivf-ink-faint:#64748B; --ivf-accent:#00696b; --ivf-teal-dark:#00474a; color:var(--ivf-ink); font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } .ivf-embed-content .sub { color:var(--ivf-ink-soft); font-size:1.08rem; line-height:1.55; max-width:64ch; margin:0 0 30px; } .ivf-embed-content .disclaimer { color:var(--ivf-muted); font-size:.85rem; line-height:1.5; margin-top:26px; } /* ── page gutter fix ──────────────────────────────────────────────────────── */ /* The theme DOUBLE-pads our content: the alignfull post-content group carries `has-global-padding` (≈32px side padding) ON TOP OF the page hero's gutter, so the intro text + cards sit ~32px deeper than the page title (≈48px vs 16px on mobile) and waste width. Drop the group's extra side padding so its content aligns to the title and fills the column. embed.css loads only on the pricing pages, so this only touches those pages' own content group. */ .entry-content > .wp-block-group.alignfull.has-global-padding { padding-left:0; padding-right:0; } /* ── price list — single full-width zebra table ────────────────────────────── Restyles the fetched .rate-grid > .rate-card > h2 + .rate-row fragment into one readable table: teal section bands, zebra rows, prices right-aligned. Capped to a comfortable measure (not the full 1080 column) so the eye doesn't travel far between item and price; left-aligned to sit under the page title. */ .ivf-embed-content .rate-grid { display:block; max-width:880px; background:#fff; border:1px solid #e3e7e7; border-radius:18px; overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 40px rgba(16,24,40,.05); } .ivf-embed-content .rate-card { display:block; background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; } /* section band header. The WP theme zeroes padding-top on .ivf-page-content headings via an !important reset (it lands in a stylesheet this embed can't out-specify), which pins the band title to the top edge. Force the top padding back with !important so the title stays vertically centered (matches the 14px bottom padding under align-items:center). */ .ivf-embed-content .rate-card h2 { display:flex; align-items:center; gap:11px; margin:0; background:#eaf4f3; padding:14px 24px; padding-top:14px !important; border-top:1px solid #dceae9; font-family:Manrope,system-ui,sans-serif; font-weight:700; font-size:.92rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ivf-teal-dark); } .ivf-embed-content .rate-card:first-child h2 { border-top:0; } .ivf-embed-content .rate-card h2::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ivf-accent); } /* rows + per-section zebra */ .ivf-embed-content .rate-row { display:flex; align-items:baseline; gap:8px 18px; padding:14px 24px; border:0; flex-wrap:wrap; } .ivf-embed-content .rate-card .rate-row:nth-of-type(even) { background:#F6FAFA; } .ivf-embed-content .rate-n { color:var(--ivf-ink); font-size:1.01rem; line-height:1.4; flex:1 1 240px; min-width:0; } .ivf-embed-content .rate-v { color:var(--ivf-teal-dark); font-weight:700; font-size:.95rem; white-space:nowrap; margin-left:auto; text-align:right; font-variant-numeric:tabular-nums; } .ivf-embed-content .rate-v .per { color:var(--ivf-muted); font-weight:500; font-size:.78em; } .ivf-embed-content .rate-foot { margin:0; padding:6px 24px 14px; background:#F6FAFA; color:var(--ivf-muted); font-size:.83rem; line-height:1.5; } /* noticeable note callout for the price-list disclaimer (icon via ::before) */ .ivf-rate-embed .disclaimer { display:flex; gap:13px; align-items:flex-start; max-width:880px; margin:24px 0 0; padding:16px 20px; border-radius:14px; background:#FFF8E4; border:1px solid #F0E1AC; font-size:.95rem; line-height:1.55; font-weight:500; color:#4d4636; } .ivf-rate-embed .disclaimer::before { content:""; flex:none; width:21px; height:21px; margin-top:1px; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23B07D00'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%2011v5M12%207.5h.01'/%3E%3C/svg%3E") no-repeat center/contain; } /* keep the closing CTA aligned to the capped table */ .ivf-price-cta { max-width:880px; } /* ── package cards (match the app's .pkg-card "soft clinical luxury") ─────── */ .ivf-pkg-embed { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:22px; } .ivf-pkg-embed .pkg { flex:1 1 300px; max-width:460px; } .ivf-pkg-embed > .disclaimer { flex-basis:100%; text-align:center; margin-top:4px; } .ivf-embed-content .pkg { background:#fff; border:1px solid var(--ivf-line); border-radius:26px; padding:28px 26px; margin:0; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04); transition:transform .2s ease, box-shadow .2s ease; } .ivf-embed-content .pkg:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(25,28,29,.10); } .ivf-embed-content .pkg h2 { font-family:Manrope,system-ui,sans-serif; font-size:1.4rem; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:var(--ivf-accent); margin:0 0 2px; } .ivf-embed-content .pkg .tagline { font-size:.9rem; line-height:1.45; color:var(--ivf-ink-soft); margin:0 0 2px; } /* price: small kicker → big display number → uppercase per-step note */ .ivf-embed-content .pkg .price { display:flex; flex-direction:column; align-items:flex-start; margin:18px 0 4px; font-size:inherit; } .ivf-embed-content .pkg .price .from { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ivf-ink-faint); margin-bottom:3px; } .ivf-embed-content .pkg .price strong { font-family:Manrope,system-ui,sans-serif; font-size:1.95rem; font-weight:800; line-height:1.05; color:var(--ivf-ink); font-variant-numeric:tabular-nums; } .ivf-embed-content .pkg .price .note { font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ivf-ink-faint); margin-top:7px; } /* pay-in-stages safety ribbon, rendered right after the price (copy via data-lang) */ .ivf-pkg-embed .pkg .price::after { content:""; align-self:stretch; margin-top:15px; background:#F0F9F9 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230F766E%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%205%206v5c0%204.4%203%207.6%207%209%204-1.4%207-4.6%207-9V6z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E") no-repeat 12px 10px; background-size:16px 16px; border:1px solid #CFE8E7; border-radius:12px; padding:10px 14px 10px 36px; color:var(--ivf-accent); font-size:.8rem; font-weight:600; line-height:1.35; } .ivf-pkg-embed[data-lang="id"] .pkg .price::after { content:"Pembayaran bertahap, tidak langsung semua sekaligus."; } .ivf-pkg-embed[data-lang="en"] .pkg .price::after { content:"Pay in stages \2014 not everything at once."; } /* feature section headers */ .ivf-embed-content .pkg h3 { font-family:Manrope,system-ui,sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ivf-ink); margin:20px 0 10px; } /* feature lists — teal check for includes, muted ✗ for excludes */ .ivf-embed-content .pkg .feats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; } .ivf-embed-content .pkg .feats li { position:relative; padding-left:27px; font-size:.9rem; line-height:1.4; color:var(--ivf-ink-soft); } .ivf-embed-content .pkg .feats li::before { content:""; position:absolute; left:0; top:1px; width:17px; height:17px; background-repeat:no-repeat; background-position:center; background-size:contain; } .ivf-embed-content .pkg .feats.inc li::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230F766E%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); } .ivf-embed-content .pkg .feats.exc li { color:var(--ivf-ink-faint); } .ivf-embed-content .pkg .feats.exc li::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394A3B8%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E"); } /* the last feature list sits flush to the card bottom */ .ivf-embed-content .pkg .feats:last-of-type { margin-bottom:0; } @media (max-width:520px){ .ivf-embed-content .pkg { padding:22px 16px; } } /* ── lead-package highlighting (premium = dark teal, popular = teal ring) ──── */ /* The fetched SSR fragment carries no tone class — only data-pkg-id — so the two PUBLIC packages are targeted by id (the same stable hook the customise buttons already use). Mirrors the patient app's .tone-premium / .tone-popular so every surface reads the same. ⚠ If the public package ids change, update these ids. */ /* status pill leading each highlighted card. ::before = the card's first flex item, so it sits ABOVE the title with no DOM edit and no overlap on long names. */ .ivf-pkg-embed .pkg[data-pkg-id="all_in_fresh"]::before, .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"]::before { align-self:flex-start; margin:0 0 14px; padding:5px 13px; border-radius:9999px; font:700 .72rem/1 Manrope,system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; } /* POPULAR (Fresh ET): stays white, marked with a teal ring + teal pill */ .ivf-pkg-embed .pkg[data-pkg-id="all_in_fresh"] { border-color:transparent; box-shadow:0 0 0 2px var(--ivf-accent), 0 8px 28px rgba(0,105,107,.10); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fresh"]:hover { box-shadow:0 0 0 2px var(--ivf-accent), 0 16px 44px rgba(0,105,107,.16); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fresh"]::before { background:var(--ivf-accent); color:#fff; } .ivf-pkg-embed[data-lang="id"] .pkg[data-pkg-id="all_in_fresh"]::before { content:"Populer"; } .ivf-pkg-embed[data-lang="en"] .pkg[data-pkg-id="all_in_fresh"]::before { content:"Most popular"; } /* PREMIUM (Frozen ET): full dark-teal card + gold pill + gold action */ .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] { background:linear-gradient(165deg,#075753,#04403d); border-color:transparent; color:#EAF7F6; box-shadow:0 18px 48px rgba(4,52,49,.34); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"]:hover { box-shadow:0 26px 60px rgba(4,52,49,.42); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"]::before { background:#FED65B; color:#5a4500; box-shadow:0 4px 14px rgba(116,92,0,.35); } .ivf-pkg-embed[data-lang="id"] .pkg[data-pkg-id="all_in_fet"]::before { content:"\2605\00a0\00a0Pilihan Unggulan"; } .ivf-pkg-embed[data-lang="en"] .pkg[data-pkg-id="all_in_fet"]::before { content:"\2605\00a0\00a0Featured choice"; } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] h2 { color:#fff; } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .tagline { color:rgba(255,255,255,.74); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .price .from { color:rgba(255,255,255,.62); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .price strong { color:#fff; } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .price .note { color:rgba(255,255,255,.6); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] h3 { color:rgba(255,255,255,.92); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .feats li { color:rgba(255,255,255,.9); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .feats.exc li { color:rgba(255,255,255,.55); } /* light-stroke icon variants (the white-card defaults are teal/grey, invisible on dark) */ .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .feats.inc li::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A7E8E2%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .feats.exc li::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23AEB9C2%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E"); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .price::after { background:rgba(255,255,255,.10) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A7E8E2%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%205%206v5c0%204.4%203%207.6%207%209%204-1.4%207-4.6%207-9V6z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E") no-repeat 12px 10px; background-size:16px 16px; border-color:rgba(255,255,255,.22); color:#EAF7F6; } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .ivf-pkg-customise { background:#FED65B; color:#5a4500; box-shadow:0 8px 22px rgba(0,0,0,.28); } .ivf-pkg-embed .pkg[data-pkg-id="all_in_fet"] .ivf-pkg-customise:hover { background:#FFE07A; } /* one orchestrated page-load: cards rise + fade in, staggered. `backwards` fill (not forwards) so the hover-lift transform isn't pinned after the animation. */ @media (prefers-reduced-motion: no-preference) { .ivf-pkg-embed .pkg { animation:ivfPkgRise .55s cubic-bezier(.2,.7,.2,1) backwards; } .ivf-pkg-embed .pkg:nth-child(2) { animation-delay:.09s; } .ivf-pkg-embed .pkg:nth-child(3) { animation-delay:.18s; } @keyframes ivfPkgRise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } } /* ── compare-a-quote: the live tool, embedded ────────────────────────────── */ .ivf-embed { margin-top:14px; } #ivf-compare, #ivf-packages { width:100%; border:0; display:block; min-height:760px; } /* Phones: let the tool run edge-to-edge (escape the page's side padding). WP's mobile breakpoint is 781px; the iframe is not a direct constrained child. */ @media (max-width:781px) { #ivf-compare, #ivf-packages { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } } /* ── packages: per-card "Customise this package" button ───────────────────── */ /* injected by packages-embed.js into each card; bottom-aligned + full-width so it reads as the card's primary action. Inherits the card's --ivf-accent. */ .ivf-embed-content .pkg .ivf-pkg-customise { margin-top:24px; align-self:stretch; cursor:pointer; border:0; border-radius:9999px; background:var(--ivf-accent); color:#fff; font:700 1rem/1.2 "Plus Jakarta Sans",system-ui,-apple-system,sans-serif; padding:15px 22px; box-shadow:0 6px 18px rgba(0,77,79,.20); transition:background .15s ease, transform .05s ease; } .ivf-embed-content .pkg .ivf-pkg-customise:hover { background:var(--ivf-teal-dark); } .ivf-embed-content .pkg .ivf-pkg-customise:active { transform:translateY(1px); } .ivf-embed-content .pkg .ivf-pkg-customise:focus-visible { outline:3px solid rgba(0,105,107,.35); outline-offset:2px; } /* the SSR card grid steps aside while the tool is open (the grid's display:flex outranks the bare [hidden] attribute, so it needs an explicit rule). */ .ivf-pkg-embed[hidden] { display:none; } /* ── packages: the reveal target (tool + back bar + secondary link) ───────── */ .ivf-pkgtool { --ivf-accent:#00696b; --ivf-teal-dark:#00474a; --ivf-muted:#5b6566; font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; margin-top:8px; } /* prominent "build your own estimate" banner — mirrors the patient app's .byo-primary; click-anywhere card that reveals the tool on the from-scratch builder (route "hitung") */ .ivf-byo { display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; width:100%; text-align:left; cursor:pointer; border:0; margin:28px 0 2px; padding:26px 30px; border-radius:26px; background:linear-gradient(135deg,#00696b,#0f766e); color:#fff; box-shadow:0 12px 40px rgba(25,28,29,.08); transition:transform .2s ease, box-shadow .2s ease; font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } .ivf-pkgtool.is-open .ivf-byo { display:none; } .ivf-byo:hover { transform:translateY(-2px); box-shadow:0 16px 50px rgba(25,28,29,.14); } .ivf-byo:focus-visible { outline:3px solid rgba(0,105,107,.45); outline-offset:3px; } .ivf-byo-text { flex:1 1 auto; min-width:0; } .ivf-byo-title { display:flex; align-items:center; gap:10px; font-family:Manrope,system-ui,sans-serif; font-size:1.32rem; font-weight:600; color:#fff; } .ivf-byo-ico { width:22px; height:22px; color:#6EC6C8; flex:none; } .ivf-byo-sub { display:block; color:rgba(255,255,255,.82); margin-top:8px; font-size:.96rem; max-width:40em; } .ivf-byo-cta { display:inline-flex; align-items:center; gap:8px; flex:none; background:#FED65B; color:#745C00; border-radius:12px; padding:13px 22px; font-weight:600; font-size:.96rem; box-shadow:0 10px 26px rgba(116,92,0,.3); } .ivf-byo:hover .ivf-byo-cta { background:#F0C33F; } .ivf-byo-arrow { width:18px; height:18px; } @media (max-width:560px){ .ivf-byo { flex-direction:column; align-items:flex-start; } } /* "have a code?" card — the special-code entry (mirrors the patient app's code-card). Submitting drives the tool's own code input; both the builder banner and this card step aside while the tool is open. */ .ivf-pkgtool.is-open .ivf-byo, .ivf-pkgtool.is-open .ivf-or, .ivf-pkgtool.is-open .ivf-codecard { display:none; } .ivf-or { display:flex; align-items:center; gap:16px; margin:26px 0 18px; color:var(--ivf-ink-faint); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; } .ivf-or::before, .ivf-or::after { content:""; height:1px; background:#dfe4e4; flex:1; } .ivf-codecard { background:#fff; border:1.5px dashed #cdd5d5; border-radius:26px; padding:32px 30px; text-align:center; } .ivf-codecard-ico { width:48px; height:48px; border-radius:14px; background:#FFF3CC; color:#FED65B; display:grid; place-items:center; margin:0 auto 14px; } .ivf-codecard-ico-svg { width:24px; height:24px; } .ivf-codecard h3 { font-family:Manrope,system-ui,sans-serif; font-size:1.3rem; font-weight:800; letter-spacing:-.01em; color:var(--ivf-accent); margin:0; } .ivf-codecard p { color:var(--ivf-ink-soft); margin:8px auto 0; font-size:.96rem; line-height:1.5; max-width:38em; } .ivf-codecard-form { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; } .ivf-codecard-input { width:220px; max-width:100%; padding:13px 16px; text-align:center; border-radius:12px; border:1.5px solid #d3dbdb; background:#fbfcfc; color:var(--ivf-ink); font:600 .95rem/1 "Plus Jakarta Sans",system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; } .ivf-codecard-input::placeholder { color:#9aa6a6; letter-spacing:.12em; } .ivf-codecard-input:focus { outline:none; border-color:#FED65B; box-shadow:0 0 0 3px #FFF3CC; } .ivf-codecard-btn { cursor:pointer; border:0; border-radius:12px; background:var(--ivf-accent); color:#fff; font:700 .98rem/1 "Plus Jakarta Sans",system-ui,sans-serif; padding:13px 26px; box-shadow:0 8px 20px rgba(0,77,79,.20); transition:background .15s ease, transform .05s ease; } .ivf-codecard-btn:hover { background:var(--ivf-teal-dark); } .ivf-codecard-btn:active { transform:translateY(1px); } .ivf-codecard-btn:focus-visible { outline:3px solid rgba(0,105,107,.35); outline-offset:2px; } .ivf-codecard-msg { min-height:1.2em; margin-top:14px; font-size:.9rem; font-weight:600; } .ivf-codecard-msg.ok { color:var(--ivf-teal-dark); } .ivf-codecard-msg.bad { color:#B42318; } /* "← see all packages" bar, shown only while the tool is open */ .ivf-pkgtool-bar { margin:4px 0 10px; } .ivf-pkgtool-bar[hidden] { display:none; } .ivf-pkgtool-back { display:inline-flex; align-items:center; gap:6px; cursor:pointer; border:1px solid #d7e0e0; background:#fff; border-radius:9999px; color:var(--ivf-accent); font:600 .92rem/1 "Plus Jakarta Sans",system-ui,sans-serif; padding:9px 16px; transition:background .15s ease, border-color .15s ease; } .ivf-pkgtool-back:hover { background:#f0f9f9; border-color:#cfe8e7; } .ivf-pkgtool-back:focus-visible { outline:3px solid rgba(0,105,107,.35); outline-offset:2px; } .ivf-pkgtool-frame[hidden] { display:none; } /* ── packages: sticky estimate bar ────────────────────────────────────────── */ /* Rendered by THIS page while the tool is open on a package's Customise view (or the builder): the parent owns the real screen scroll, so position:fixed works — inside the full-height, non-scrolling iframe it can't pin, which is why the app hides its own bar when embedded. Driven live by the tool's "barstate" postMessage; taps relay back as "baraction". Same look as the tool page's bar (embed-block.html) — keep the two in sync. The DOM is built by packages-embed.js (the page CSP `script-src 'self'` blocks inline