/* ===================================================================== IVF PRICE EXPLORER — STYLES Aesthetic: matches the Ciputra IVF clinic website (ccivfstageing .permaiserver.com) so the embedded tool reads as the same site — teal #00696b primary, gold accent, clean #f8f9fa canvas, white cards. Manrope (headings) + Plus Jakarta Sans (body). ===================================================================== */ /* ---------- Self-hosted fonts: Manrope (headings) + Plus Jakarta Sans (body) ---------- Lifted verbatim from the Ciputra IVF WordPress theme (assets/fonts) so the patient app's type renders identically to the clinic website it embeds into. Variable woff2, latin + latin-ext subsets (Manrope 500–800, PJS 400–700). */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url("fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/pjs-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/pjs-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/pjs-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/pjs-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Metric-matched fallbacks (capsize) — occupy the same vertical space as the web font so there's no layout shift while the woff2 loads. */ @font-face { font-family: 'Manrope Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 99.4839%; ascent-override: 107.153%; descent-override: 30.1556%; line-gap-override: 0%; } @font-face { font-family: 'Plus Jakarta Sans Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 104.9796%; ascent-override: 98.8763%; descent-override: 21.147%; line-gap-override: 0%; } /* ---------- Tokens ---------- Palette mirrors the Ciputra IVF theme.json. The original warm names are kept as token slugs (so every existing rule keeps working) but now resolve to the clinic site's teal/gold system: --pine/--terra → teal, --gold → the site's gold accent. Warm CTAs that sit on teal panels are re-pointed to gold in the rules below. */ :root { --ivory: #F8F9FA; /* page canvas (theme: background) */ --ivory-2: #EBEDEE; /* raised surface (theme: surface) */ --card: #FFFFFF; /* cards (theme: white) */ --ink: #191C1D; /* headings + strong text (theme: heading) */ --ink-soft: #475569; /* secondary text / nav (theme: nav) */ --ink-faint: #64748B; /* muted text (theme: muted) */ --pine: #00696B; /* PRIMARY teal — brand, buttons, links (theme: primary) */ --pine-2: #0F766E; /* darker teal — hover / active (theme: nav-active) */ --pine-ghost: #F0F9F9; /* teal surface tint (theme: primary-surface) */ --sage: #6EC6C8; /* light teal (theme: primary-light) */ --terra: #00696B; /* warm accent collapsed into teal (CTAs on teal → gold) */ --terra-deep: #0F766E; --terra-soft: #E3F2F1; /* teal tint (was warm peach) */ --apricot: #6EC6C8; /* gradient partner → light teal */ --gold: #FED65B; /* gold accent — premium + CTAs on teal (theme: gold) */ --gold-text: #745C00; /* readable gold text (theme: gold-dark) */ --gold-soft: #FFF3CC; /* pale gold fill */ --warn: #B42318; /* functional warning red (decoupled from branding) */ --warn-soft: #FDE7E3; --good: #0F766E; /* success teal */ --line: #EDEEEF; /* hairline — synced to live ciputraivf.com --wp--preset--color--border */ --line-strong: #D7DADC; /* stronger border (theme: surface-high) */ --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px rgba(16,24,40,.04); --shadow-md: 0 12px 40px rgba(25,28,29,.08); /* theme: card shadow */ --shadow-lg: 0 26px 60px rgba(0,105,107,.16); /* teal-tinted elevation */ --r: 18px; --r-sm: 12px; --r-lg: 26px; --r-pill: 999px; --r-btn: 12px; /* button radius — matches the clinic site */ --font-display: "Manrope", "Manrope Fallback", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-body: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --maxw: 1180px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--ivory); line-height: 1.55; font-size: 16px; letter-spacing: .003em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.modal-open { overflow: hidden; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 540; line-height: 1.08; letter-spacing: -.01em; font-optical-sizing: auto; } img { max-width: 100%; display: block; } /* default inline-icon size (container rules below override for larger icons) */ svg { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: middle; } /* ---------- Atmosphere: orbs + grain ---------- */ .bg-orbs { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .bg-orbs::before, .bg-orbs::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; } .bg-orbs::before { width: 60vw; height: 60vw; top: -22vw; right: -16vw; background: radial-gradient(circle at 30% 30%, #C6E9E9, transparent 62%); } .bg-orbs::after { width: 52vw; height: 52vw; bottom: -24vw; left: -18vw; background: radial-gradient(circle at 60% 40%, #CDE9E7, transparent 60%); } .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Layout shell ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); } /* ---------- Header ---------- */ .app-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--ivory) 82%, transparent); border-bottom: 1px solid var(--line); } .app-header .wrap { display: flex; align-items: center; gap: 18px; height: 72px; } .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; } .brand-logo { height: 44px; width: auto; display: block; } .brand-app { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); border-left: 1px solid var(--line-strong); padding-left: 14px; max-width: 132px; line-height: 1.45; } .nav { display: flex; gap: 4px; margin-inline: auto; } .nav-link { padding: 8px 14px; border-radius: var(--r-pill); font-size: .92rem; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--line-strong); transition: background .2s, color .2s, border-color .2s; white-space: nowrap; } .nav-link:hover { background: var(--pine-ghost); color: var(--pine); border-color: var(--pine-2); } .nav-link.is-active { background: var(--pine); color: #FFFFFF; border-color: var(--pine); } .header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .lang-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--card); font-size: .82rem; font-weight: 600; color: var(--pine); transition: border-color .2s, transform .12s; } .lang-toggle:hover { border-color: var(--pine-2); } .lang-toggle:active { transform: scale(.97); } /* ---------- Embedded mode (WordPress iframe) ---------- is set by app.js when FRAMED. The clinic's WP page already supplies the site header (Ciputra IVF brand + nav) and the page's own section title, on a flat #f8f9fa canvas. So inside the embed we: (1) let the WP canvas show through (transparent body, no teal orbs / grain), and (2) de-chrome our header into a plain nav toolbar — the brand lockup is already dropped in markup — so it reads as one continuous page section, not a second website bolted in. */ html.embedded body { background: transparent; } html.embedded .bg-orbs, html.embedded .grain { display: none; } html.embedded .app-header { position: static; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; } /* brand removed → nav sits at the start, language toggle pushed to the right */ html.embedded .app-header .wrap { height: auto; padding-block: 12px; gap: 12px; } html.embedded .nav { margin-inline: 0 auto; } /* the WP

already introduces the tool — tuck the nav toolbar right under it instead of opening with a big empty band */ html.embedded .view { padding-top: clamp(8px, 2.5vw, 22px); } /* Bare embed (?chrome=bare): the host WP pricing page already supplies the title, nav, and intro (e.g. /bandingkan-penawaran-bayi-tabung). Shed our own header and the view heading so only the working widget shows — no duplicate nav/title/intro. The header is already not rendered by app.js when BARE; this also drops the heading block and lets the widget sit flush under the WP "Cara kerjanya" steps. */ html.chrome-bare .app-header { display: none; } /* chrome=bare drops the per-view heading too; chrome=bare-head (.chrome-keephead) keeps it — on the packages page the heading names which package is being customised, so it stays and the view keeps the normal embedded top pad. */ html.chrome-bare:not(.chrome-keephead) .view-head { display: none; } html.chrome-bare:not(.chrome-keephead) .view { padding-top: 0; } /* The floating estimate bar (.mobilebar) is position:fixed, which pins to the *iframe's* viewport — but the WP embed auto-grows the iframe to full content height (deploy/wp-staging/embed-block.html), so the iframe never scrolls and the bar just glues to the bottom of the content instead of floating over the screen. So inside the embed we drop the floating bar and lead with the in-flow .summary estimate card instead (it already carries the live total, the full breakdown, and the Continue/Compare CTAs). Same reasoning as the static header above. */ html.embedded .mobilebar { display: none; } html.embedded .cfg-grid { padding-bottom: 0; } /* reclaim space the fixed bar reserved */ html.embedded .summary { position: static; } /* sticky is inert with no iframe scroll */ /* ---------- Standalone clinic chrome (estimasi domain, no iframe) ---------- Mirrors the static pages' slim chrome (api/src/routes/seoPage.shared.ts CHROME_STYLE): white clinic header (logo · Beranda · "Hubungi Kami" popup), the shared four-tab pricing nav beneath it, and the clinic footer. Rendered only when !FRAMED — the WP embeds never see any of this. Keep the two CSS blocks visually in sync. */ .site-hd { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .hd-in, .ft-in { max-width: 1180px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .hd-in { display: flex; align-items: center; gap: 22px; min-height: 64px; } .hd-logo img { display: block; height: 40px; width: auto; } .hd-nav { display: flex; gap: 20px; flex-wrap: wrap; margin-right: auto; } .hd-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; } .hd-nav a:hover { color: var(--pine); } .hd-contact { display: inline-flex; align-items: center; gap: 8px; background: var(--pine); color: #fff; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .9rem; padding: 9px 18px; border-radius: 999px; white-space: nowrap; } .hd-contact:hover { background: var(--pine-2); } .rel-nav { display: flex; gap: 8px; flex-wrap: wrap; padding: 18px 0 0; } .rel-tab { text-decoration: none; font-weight: 600; font-size: .9rem; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--pine); background: #fff; } .rel-tab:hover { border-color: var(--pine); } .rel-tab.is-active { background: var(--pine); color: #fff; border-color: var(--pine); } .hk-popup { position: fixed; inset: 0; z-index: 60; } .hk-backdrop { position: absolute; inset: 0; background: rgba(15, 32, 32, .45); } .hk-card { position: absolute; top: 76px; right: max(20px, calc((100vw - 1180px) / 2 + 40px)); width: min(360px, calc(100vw - 32px)); background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 24px 64px rgba(16, 24, 40, .28); } .hk-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; } .hk-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--pine); margin: 0; } .hk-close { border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--ink-soft); padding: 4px 8px; border-radius: 8px; } .hk-close:hover { background: var(--pine-ghost); color: var(--ink); } .hk-mod { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; margin: 0 0 10px; } .hk-mod:hover { border-color: var(--pine); background: var(--pine-ghost); } .hk-mod-t { display: block; font-weight: 700; color: var(--pine); font-size: .95rem; } .hk-mod-s { display: block; color: var(--ink-soft); font-size: .84rem; margin-top: 2px; } .hk-locs { border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; } .hk-loc { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; font-size: .86rem; } .hk-loc + .hk-loc { border-top: 1px solid var(--line); } .hk-loc-place { color: var(--ink-soft); } .hk-loc-place b { color: var(--ink); font-weight: 600; } .hk-loc a { color: var(--pine); text-decoration: none; font-weight: 600; white-space: nowrap; } .site-ft { background: #00474A; color: #dbe7e7; margin-top: 48px; } .site-ft .ft-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; padding-top: 40px; padding-bottom: 32px; } .site-ft h3 { font-size: .95rem; color: #fff; margin: 0 0 12px; } .site-ft ul { list-style: none; margin: 0; padding: 0; } .site-ft li { margin: 6px 0; } .site-ft a { color: #cfe0e0; text-decoration: none; font-size: .9rem; } .site-ft a:hover { color: #fff; } .ft-brand img { height: 44px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; } .ft-contact { font-size: .9rem; line-height: 1.9; margin: 14px 0 0; } .ft-bottom { border-top: 1px solid rgba(255, 255, 255, .12); } .ft-bottom .ft-in { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 16px; font-size: .82rem; color: #a9c2c2; } @media (max-width: 781px) { .hd-in { gap: 14px; } .site-ft .ft-in { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .hd-logo img { height: 32px; } .hd-contact { padding: 8px 13px; font-size: .84rem; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: var(--r-btn); font-weight: 600; font-size: .96rem; transition: transform .12s ease, box-shadow .2s, background .2s, color .2s; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: var(--pine); color: #FFFFFF; box-shadow: 0 8px 22px rgba(0,105,107,.24); } .btn-primary:hover { background: var(--pine-2); box-shadow: 0 12px 28px rgba(0,105,107,.3); } /* "Hot" CTA — gold on teal/white, mirroring the clinic site's gold accent buttons. */ .btn-terra { background: var(--gold); color: var(--ink); box-shadow: 0 8px 22px rgba(116,92,0,.22); } .btn-terra:hover { background: #F0C33F; } .btn-ghost { background: transparent; color: var(--pine); border: 1.5px solid var(--line-strong); } .btn-ghost:hover { border-color: var(--pine); background: var(--pine-ghost); } /* "Sesuaikan paket" — soft teal-filled secondary on package cards (more visible than the old text link). */ .btn-customize { background: var(--pine-ghost); color: var(--pine-2); border: 1.5px solid #CFE8E7; } .btn-customize:hover { border-color: var(--pine); background: var(--terra-soft); } .btn-block { width: 100%; } .btn-sm { padding: 9px 15px; font-size: .86rem; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ---------- View transitions ---------- */ .view { padding: clamp(28px, 5vw, 56px) 0 120px; } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .reveal { animation: riseIn .6s cubic-bezier(.22,.61,.36,1) both; } .r1 { animation-delay: .04s; } .r2 { animation-delay: .12s; } .r3 { animation-delay: .2s; } .r4 { animation-delay: .28s; } .r5 { animation-delay: .36s; } .r6 { animation-delay: .44s; } .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terra-deep); } .kicker::before { content: ""; width: 22px; height: 1.5px; background: var(--terra); } .muted { color: var(--ink-soft); } /* ---------- Hero / welcome ---------- */ .hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; min-height: 64vh; } .hero-title { font-size: clamp(2.5rem, 5.4vw, 4rem); margin: 18px 0 0; color: var(--pine); letter-spacing: -.022em; } .hero-title .em { font-style: italic; color: var(--terra); } .hero-sub { font-size: 1.16rem; color: var(--ink-soft); margin-top: 22px; max-width: 30em; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-reassure { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; } .reassure-item { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--ink-soft); font-weight: 500; } .reassure-item svg { width: 18px; height: 18px; color: var(--pine-2); flex-shrink: 0; } .hero-note { margin-top: 30px; font-size: .82rem; color: var(--ink-faint); max-width: 34em; } /* hero decorative card */ .hero-visual { position: relative; } .hero-card { background: var(--card); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); position: relative; z-index: 2; } .hero-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .hero-card-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .hero-card-total { font-family: var(--font-display); font-size: 2.1rem; color: var(--pine); font-weight: 580; } .hero-bar { display: flex; flex-direction: column; gap: 11px; } .hero-barrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; font-size: .9rem; } .hero-barrow .track { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--ivory-2); overflow: hidden; } .hero-barrow .fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pine-2), var(--sage)); } .hero-barrow .fill.terra { background: linear-gradient(90deg, var(--terra), var(--apricot)); } .hero-badge { position: absolute; z-index: 3; background: var(--card); box-shadow: var(--shadow-md); border-radius: var(--r-pill); padding: 9px 15px; font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); } .hero-badge.b1 { top: -16px; right: 8px; color: var(--terra-deep); } .hero-badge.b2 { bottom: 24px; left: -26px; color: var(--pine); } .hero-badge svg { width: 16px; height: 16px; } /* ---------- Section heads ---------- */ .view-head { max-width: 40em; margin-bottom: 30px; } .view-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); color: var(--pine); } .view-head p { font-size: 1.05rem; color: var(--ink-soft); margin-top: 12px; } /* ---------- Configurator ---------- */ .cfg-grid { display: grid; grid-template-columns: 1fr 372px; gap: 40px; align-items: start; padding-bottom: 92px; } .section { margin-bottom: 30px; } .section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .section-title { font-size: 1.3rem; color: var(--pine); } .section-desc { font-size: .92rem; color: var(--ink-soft); margin-bottom: 16px; margin-top: -4px; } .option { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 17px 19px; margin-bottom: 12px; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; transition: border-color .2s, box-shadow .2s, transform .12s; } .option.is-on { border-color: var(--pine-2); box-shadow: 0 0 0 1px var(--pine-2), var(--shadow-md); } .option.is-included { background: color-mix(in srgb, var(--pine) 11%, var(--card)); border-color: color-mix(in srgb, var(--pine) 30%, transparent); } .option-main { min-width: 0; } .option-name { font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .option-info { font-size: .87rem; color: var(--ink-soft); margin-top: 4px; } .option-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; } .option-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); } .option-price .per { font-weight: 500; color: var(--ink-faint); font-size: .82rem; } .tag { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); } .tag-included { background: var(--pine); color: #fff; } .tag-lock { background: var(--gold-soft); color: var(--gold-text); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .tag-lock svg { width: 11px; height: 11px; } /* toggle add button */ .opt-toggle { border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); padding: 8px 17px; font-weight: 600; font-size: .88rem; color: var(--pine); background: var(--card); transition: all .18s; display: inline-flex; align-items: center; gap: 7px; min-width: 96px; justify-content: center; } .opt-toggle:hover { border-color: var(--pine); background: var(--pine-ghost); } .opt-toggle.is-on { background: var(--pine); color: #FFFFFF; border-color: var(--pine); } .opt-toggle.is-on svg { transform: none; } /* price slider on a toggle add-on — only shown once the item is added */ .opt-slider { display: none; margin-top: 14px; } .option.is-on .opt-slider { display: block; } .opt-slider-input { -webkit-appearance: none; appearance: none; width: 100%; max-width: 360px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--pine-2), var(--sage)); outline: none; cursor: pointer; } .opt-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 3px solid var(--pine); box-shadow: var(--shadow-sm); cursor: pointer; } .opt-slider-input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 3px solid var(--pine); box-shadow: var(--shadow-sm); cursor: pointer; } .opt-slider-scale { display: flex; justify-content: space-between; margin-top: 7px; max-width: 360px; font-size: .76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .opt-slider-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; font-size: .8rem; line-height: 1.45; color: var(--ink-soft); } .opt-slider-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--pine-2); } /* stepper */ .stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--ivory-2); border-radius: var(--r-pill); padding: 4px; } .stepper-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--card); color: var(--pine); font-size: 1.25rem; font-weight: 600; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .1s, background .15s; } .stepper-btn:hover { background: var(--pine-ghost); } .stepper-btn:active { transform: scale(.9); } .stepper-btn[disabled] { opacity: .4; box-shadow: none; } .stepper-val { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } /* level select (stimulation) */ .levels { display: inline-flex; background: var(--ivory-2); border-radius: var(--r-pill); padding: 4px; gap: 2px; flex-wrap: wrap; } .level-btn { padding: 7px 13px; border-radius: var(--r-pill); font-size: .84rem; font-weight: 600; color: var(--ink-soft); transition: all .16s; white-space: nowrap; } .level-btn.is-on { background: var(--pine); color: #FFFFFF; box-shadow: var(--shadow-sm); } /* locked state */ .option.is-locked .option-aside { position: relative; } .option.is-locked .stepper, .option.is-locked .levels, .option.is-locked .opt-toggle { opacity: .55; filter: grayscale(.3); } .lock-cta { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--gold-text); cursor: pointer; } .lock-cta svg { width: 13px; height: 13px; } .option.is-locked.flash { animation: lockFlash .9s ease; } @keyframes lockFlash { 0%,100% { box-shadow: var(--shadow-sm); } 35% { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(190,149,64,.35); } } /* ---------- Summary (sticky) ---------- */ .summary { position: sticky; top: 92px; } .summary-card { background: linear-gradient(180deg, var(--pine), #004D4E); color: #FFFFFF; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .summary-card::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; top: -90px; right: -70px; background: radial-gradient(circle, rgba(110,198,200,.26), transparent 70%); } .summary-title { font-size: 1.18rem; color: #fff; margin-bottom: 4px; position: relative; } .summary-sub { font-size: .82rem; color: rgba(255,255,255,.62); margin-bottom: 16px; } .summary-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; max-height: 320px; overflow-y: auto; position: relative; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; } .summary-lines::-webkit-scrollbar { width: 5px; } .summary-lines::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 99px; } .summary-lines::-webkit-scrollbar-track { background: transparent; } /* name wraps (never pushes the price out); price keeps its own line, always fully shown */ .sum-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: .9rem; } .sum-line-name { color: rgba(255,255,255,.82); min-width: 0; overflow-wrap: anywhere; line-height: 1.35; } .sum-line-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .sum-line.is-new { animation: sumPop .5s ease; } @keyframes sumPop { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } .summary-empty { font-size: .9rem; color: rgba(255,255,255,.6); padding: 8px 0 16px; } .sum-divider { height: 1px; background: rgba(255,255,255,.18); margin: 6px 0 14px; } /* Label sits ABOVE the number so the figure spans the full card width and never gets clipped by large IDR totals (the old single-row layout cut "Rp 91.874.008"). */ .summary-total { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .total-label { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .14em; } .total-value { font-family: var(--font-display); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.04; letter-spacing: -.02em; white-space: nowrap; max-width: 100%; font-size: clamp(1.75rem, 1.1rem + 3vw, 2.15rem); } .summary-note { font-size: .76rem; color: rgba(255,255,255,.55); margin-top: 12px; } .summary-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; } /* let long bilingual CTA labels wrap to two centred lines instead of being clipped by the card's overflow:hidden (the base .btn is white-space:nowrap). */ .summary-actions .btn { white-space: normal; text-wrap: balance; line-height: 1.25; min-height: 50px; padding-top: 12px; padding-bottom: 12px; } .summary-actions .btn-primary { background: var(--gold); color: var(--ink); box-shadow: 0 8px 20px rgba(116,92,0,.28); } .summary-actions .btn-primary:hover { background: #F0C33F; } .summary-actions .btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,.3); } .summary-actions .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); } .summary-reset { background: none; color: rgba(255,255,255,.6); font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; margin-top: 4px; align-self: center; } /* sticky estimate bar (configurator) — all screen sizes */ .mobilebar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; } .mobilebar .mb-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(16,24,40,.1); padding: 12px max(16px, calc((100% - var(--maxw)) / 2 + 40px)); } .mobilebar .mb-total { display: flex; flex-direction: column; } .mobilebar .mb-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); } .mobilebar .mb-val { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--pine); font-variant-numeric: tabular-nums; } .mobilebar .mb-actions { margin-left: auto; display: flex; gap: 10px; } /* slide-up estimate detail sheet */ .mobilebar .mb-sheet { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; background: var(--card); border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -20px 50px rgba(16,24,40,.14); padding: 20px max(16px, calc((100% - var(--maxw)) / 2 + 40px)) 24px; max-height: 64vh; overflow-y: auto; transform: translateY(112%); visibility: hidden; transition: transform .32s cubic-bezier(.33,1,.68,1), visibility .32s; } .mobilebar.sheet-open .mb-sheet { transform: translateY(0); visibility: visible; } .mb-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .mb-sheet-title { font-size: 1.05rem; color: var(--pine); } .mb-sheet-close { background: var(--ivory-2); border-radius: var(--r-pill); width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-soft); } .mb-sheet-close:hover { color: var(--pine); } .mb-sheet-close svg { width: 18px; height: 18px; } .mb-sheet-lines { display: flex; flex-direction: column; gap: 9px; } /* lines are reused from the dark sidebar card — recolor for the light sheet */ .mb-sheet .sum-line-name { color: var(--ink-soft); } .mb-sheet .sum-line-val { color: var(--ink); } .mb-sheet .sum-divider { background: var(--line); margin: 12px 0; } .mb-sheet .mb-sheet-total { display: flex; align-items: center; justify-content: space-between; } .mb-sheet .mb-sheet-total .mb-val { font-size: 1.5rem; } .mobilebar-backdrop { position: fixed; inset: 0; z-index: 49; background: rgba(16,24,40,.32); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .mobilebar-backdrop.show { opacity: 1; visibility: visible; } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(31,24,18,.5); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 20px; animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--card); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 38px); width: min(480px, 100%); box-shadow: var(--shadow-lg); position: relative; animation: riseIn .4s cubic-bezier(.22,.61,.36,1) both; max-height: 92vh; overflow-y: auto; } .modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--ivory-2); color: var(--ink-soft); display: grid; place-items: center; font-size: 1.1rem; } .modal-close:hover { background: var(--line); } .modal-kicker { color: var(--gold-text); } .modal-kicker::before { background: var(--gold); } .modal-title { font-size: 1.55rem; color: var(--pine); margin: 12px 0 8px; } .modal-sub { font-size: .95rem; color: var(--ink-soft); margin-bottom: 22px; } .gate-unlocks { list-style: none; margin: -12px 0 20px; padding: 0; display: grid; gap: 8px; } .gate-unlocks li { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; color: var(--ink-soft); } .gate-unlocks svg { width: 14px; height: 14px; color: var(--pine); flex-shrink: 0; margin-top: 2px; } .field { margin-bottom: 15px; } .field-label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; } .field-input { width: 100%; padding: 13px 15px; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--ivory); transition: border-color .18s, box-shadow .18s; font-size: 1rem; } .field-input:focus { outline: none; border-color: var(--pine-2); box-shadow: 0 0 0 3px var(--pine-ghost); background: var(--card); } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 8px; font-size: .9rem; color: var(--ink-soft); cursor: pointer; } .checkbox-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pine); flex-shrink: 0; } .field-error { color: var(--warn); font-size: .84rem; margin: 8px 0 4px; display: none; } .field-error.show { display: block; } .modal-actions { margin-top: 18px; } .modal-privacy { font-size: .76rem; color: var(--ink-faint); margin-top: 14px; display: flex; gap: 8px; align-items: flex-start; } .modal-privacy svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--pine-2); } /* "A word about our robot" — AI-fallibility acknowledge overlay */ .ai-notice-bot { width: 58px; height: 58px; border-radius: 50%; background: var(--ivory-2); display: grid; place-items: center; font-size: 1.8rem; margin-bottom: 4px; animation: riseIn .5s cubic-bezier(.22,.61,.36,1) both .1s; } /* ---------- AI realism check ---------- */ .ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .ai-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); } .ai-ages { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .issues-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .issue-chip { padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--card); font-size: .85rem; font-weight: 500; color: var(--ink-soft); transition: all .16s; } .issue-chip:hover { border-color: var(--sage); } .issue-chip.is-on { background: var(--pine-ghost); border-color: var(--pine-2); color: var(--pine); font-weight: 600; } textarea.field-input { resize: vertical; min-height: 70px; font-family: inherit; } .ai-result { display: flex; flex-direction: column; gap: 16px; } .ai-empty { border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); padding: 40px 28px; text-align: center; color: var(--ink-faint); background: color-mix(in srgb, var(--card) 50%, transparent); } .ai-empty svg { width: 42px; height: 42px; color: var(--sage); margin: 0 auto 14px; } .ai-analyzing { display: flex; align-items: center; gap: 14px; padding: 28px; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--line); font-weight: 500; color: var(--pine); } .ai-analyzing-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ai-analyzing-note { font-weight: 400; font-size: .82rem; line-height: 1.35; color: var(--ink-faint); } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--pine-ghost); border-top-color: var(--pine-2); animation: spin .8s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* 30-second countdown ring on the "reading your price list" waiting screen */ .countdown-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; } .countdown-ring svg { width: 56px; height: 56px; display: block; transform: rotate(-90deg); } .countdown-ring .cr-track { fill: none; stroke: var(--pine-ghost); stroke-width: 4; } .countdown-ring .cr-arc { fill: none; stroke: var(--pine-2); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1s linear; } .countdown-ring .cr-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; color: var(--pine); font-variant-numeric: tabular-nums; } .countdown-ring.is-almost svg { animation: cr-pulse 1.2s ease-in-out infinite; } @keyframes cr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* Waiting screen with a rotating credibility "slideshow" below the countdown row */ .comp-analyzing { flex-direction: column; align-items: stretch; gap: 16px; } .comp-analyzing-row { display: flex; align-items: center; gap: 14px; } .comp-promo { display: flex; align-items: center; gap: 10px; min-height: 24px; padding-top: 14px; border-top: 1px solid var(--line); opacity: 1; transition: opacity .35s ease; } .comp-promo.is-fading { opacity: 0; } .comp-promo-icon { display: inline-flex; flex-shrink: 0; color: var(--pine-2); } .comp-promo-icon svg { width: 18px; height: 18px; } .comp-promo-text { font-size: .9rem; line-height: 1.4; font-weight: 500; color: var(--pine); } .ai-card { border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow-sm); animation: riseIn .5s both; border: 1px solid var(--line); background: var(--card); } .ai-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; } .ai-card-head svg { width: 22px; height: 22px; flex-shrink: 0; } .ai-card-title { font-size: 1.12rem; } .ai-card.verdict { background: linear-gradient(180deg, var(--pine-ghost), var(--card)); border-color: color-mix(in srgb, var(--pine-2) 30%, transparent); } .ai-card.verdict .ai-card-head svg { color: var(--pine-2); } .ai-card.missing { background: var(--card); border-color: color-mix(in srgb, var(--gold) 50%, transparent); } .ai-card.missing .ai-card-head svg { color: var(--gold); } .ai-card.surprises { background: linear-gradient(180deg, var(--warn-soft), var(--card)); border-color: color-mix(in srgb, var(--warn) 28%, transparent); } .ai-card.surprises .ai-card-head svg { color: var(--warn); } .ai-card p { color: var(--ink-soft); font-size: .95rem; } .ai-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .ai-item { display: flex; gap: 12px; align-items: flex-start; } .ai-item .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-top: 9px; flex-shrink: 0; opacity: .6; } .ai-item .body { flex: 1; } .ai-item .body strong { color: var(--ink); } .ai-item .body .sub { font-size: .88rem; color: var(--ink-soft); } .ai-missing-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--card); border-radius: var(--r-sm); border: 1px solid var(--line); } .ai-missing-row .price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); font-size: .9rem; } /* ---------- Packages ---------- */ .pkg-yours { background: var(--card); border: 1.5px solid var(--pine-2); border-radius: var(--r-lg); padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; box-shadow: var(--shadow-md); } .pkg-yours .label { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); } .pkg-yours .val { font-family: var(--font-display); font-size: 2rem; color: var(--pine); font-weight: 580; font-variant-numeric: tabular-nums; } .pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; } .pkg-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; position: relative; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; overflow: hidden; } .pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .pkg-card.tone-popular { border-color: var(--pine-2); box-shadow: 0 0 0 1px var(--pine-2), var(--shadow-md); } .pkg-card.tone-premium { background: linear-gradient(180deg, #075753, #054240); color: #EAF7F6; border-color: transparent; } .pkg-card.tone-premium .pkg-name, .pkg-card.tone-premium .pkg-price { color: #fff; } .pkg-card.tone-premium .pkg-tagline { color: rgba(255,255,255,.7); } .pkg-card.tone-premium .pkg-feat { color: rgba(255,255,255,.9); } .pkg-card.tone-premium .pkg-feat.no { color: rgba(255,255,255,.5); } .pkg-card.tone-event { background: var(--card); border-color: var(--gold); } .pkg-card.tone-promo { border-style: dashed; border-color: var(--terra); } .pkg-badge { position: absolute; top: 16px; right: 16px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); background: var(--pine); color: #FFFFFF; } .pkg-card.tone-event .pkg-badge { background: var(--gold); } .pkg-card.tone-promo .pkg-badge { background: var(--terra); } .pkg-name { font-size: 1.4rem; color: var(--pine); } /* Reserve room on the right for the absolute top-right badge (e.g. "MOST POPULAR") so a long package name never tucks underneath it — on mobile or desktop. */ .pkg-card:has(.pkg-badge) .pkg-name { padding-right: 9rem; } .pkg-tagline { font-size: .86rem; color: var(--ink-soft); margin-top: 2px; } .pkg-price { font-family: var(--font-display); font-size: 1.95rem; font-weight: 600; color: var(--ink); margin: 16px 0 4px; font-variant-numeric: tabular-nums; } .pkg-pricewrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; } .pkg-pricewrap .pkg-price { margin: 0; } .pkg-was { font-size: 1rem; color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--terra); } .pkg-card.tone-premium .pkg-was { color: rgba(255,255,255,.55); } .code-price-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--terra-deep); background: var(--terra-soft); padding: 3px 9px; border-radius: var(--r-pill); margin-bottom: 12px; align-self: flex-start; } .code-price-tag svg { width: 13px; height: 13px; } .pkg-card.tone-premium .code-price-tag { color: #fff; background: rgba(254,214,91,.35); } .pkg-vs { font-size: .8rem; font-weight: 600; margin-bottom: 16px; } .pkg-vs.cheaper { color: var(--pine-2); } .pkg-vs.more { color: var(--terra-deep); } /* ── Pay-as-you-go: safety ribbon, savings chip, per-step ledger ── */ .payg-ribbon { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 2px; background: var(--pine-ghost); color: var(--pine); border: 1px solid #CFE8E7; border-radius: var(--r-sm); padding: 9px 12px; font-size: .8rem; font-weight: 560; line-height: 1.35; } .payg-ribbon svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--pine-2); } .pkg-price-note { display: block; font-family: var(--font-body); font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; } .payg-save { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 4px; align-self: flex-start; background: var(--pine-ghost); color: var(--pine-2); border: 1px solid #CFE8E7; font-size: .78rem; font-weight: 680; padding: 4px 11px; border-radius: var(--r-pill); } .payg-save svg { width: 13px; height: 13px; } .payg-toggle { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 8px 0; background: none; border: none; cursor: pointer; color: var(--pine-2); font-family: var(--font-body); font-size: .84rem; font-weight: 640; } .payg-toggle svg { width: 14px; height: 14px; transition: transform .2s; } .payg-toggle.open svg { transform: rotate(180deg); } .payg-ledger { display: none; margin: 2px 0 16px; } .payg-ledger.open { display: block; animation: paygfade .2s ease; } /* "See the steps & prices" disclosure — SET ASIDE for now (not deleted). The toggle button (data-pkgtoggle) and its ledger stay in the markup/JS; this rule hides the whole feature. Remove these two selectors to bring it back. */ .payg-toggle[data-pkgtoggle], .payg-ledger { display: none !important; } @keyframes paygfade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .payg-help { font-size: .74rem; color: var(--ink-faint); background: var(--ivory-2); border-radius: var(--r-sm); padding: 7px 10px; margin-bottom: 8px; } .payg-callout { font-size: .8rem; font-weight: 560; line-height: 1.4; color: var(--pine); background: var(--pine-ghost); border: 1px solid #CFE8E7; border-radius: var(--r-sm); padding: 10px 11px; margin-bottom: 10px; } .payg-callout b { font-weight: 760; } .payg-step { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--r-sm); font-size: .82rem; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s; } .payg-step:hover { background: var(--ivory-2); } .payg-step-name { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); } .payg-step-price { font-weight: 660; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .payg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; } .payg-step.paid { background: var(--pine-ghost); border-color: #CFE8E7; } .payg-step.paid .payg-dot { background: var(--pine-2); } .payg-step.paid .payg-step-name { color: var(--pine); } .payg-step.after { opacity: .4; } /* dark "premium" (FET) card overrides */ .pkg-card.tone-premium .payg-ribbon, .pkg-card.tone-premium .payg-callout { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #EAF7F6; } .pkg-card.tone-premium .payg-ribbon svg { color: var(--sage); } .pkg-card.tone-premium .payg-save { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #EAF7F6; } .pkg-card.tone-premium .pkg-price-note { color: rgba(255,255,255,.6); } .pkg-card.tone-premium .payg-toggle { color: var(--sage); } .pkg-card.tone-premium .payg-help { background: rgba(0,0,0,.18); color: rgba(255,255,255,.7); } .pkg-card.tone-premium .payg-step-name { color: rgba(255,255,255,.85); } .pkg-card.tone-premium .payg-step-price { color: #fff; } .pkg-card.tone-premium .payg-step:hover { background: rgba(255,255,255,.08); } .pkg-card.tone-premium .payg-step.paid { background: rgba(127,168,153,.18); border-color: rgba(127,168,153,.4); } .pkg-card.tone-premium .payg-step.paid .payg-step-name { color: #EAF7F6; } .pkg-card.tone-premium .payg-dot { background: rgba(255,255,255,.4); } .pkg-card.tone-premium .payg-step.paid .payg-dot { background: var(--sage); } /* "your plan may grow" honest-extras note (builder) */ .extras-note { margin-top: 18px; } .extras-note strong { display: block; margin-bottom: 5px; font-size: .98rem; } .extras-note .extras-intro { margin: 0 0 9px; } .extras-list { margin: 0; padding-left: 18px; display: grid; gap: 5px; } .extras-list li { font-size: .9rem; line-height: 1.45; } /* Desktop: the includes/excludes list is always expanded — side-by-side cards are easy to compare and the "See what's included" toggle is redundant, so it's hidden here. On mobile (≤980px) the list collapses behind that toggle so the stacked cards stay short — see the max-width:980px block below. The CTA is kept bottom-aligned by .pkg-cta { margin-top: auto }, so no flex:1 is needed here. */ .pkg-feats { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; } .pkg-feats-toggle { display: none; } .pkg-feat { display: flex; gap: 9px; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); } .pkg-feat svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--pine-2); } .pkg-feat.no { color: var(--ink-faint); } .pkg-feat.no svg { color: var(--terra); } .pkg-cta { margin-top: auto; display: flex; flex-direction: column; gap: 8px; align-items: center; } .pkg-card.tone-premium .btn-ghost { color: #EAF7F6; border-color: rgba(255,255,255,.4); } .pkg-card.tone-premium .btn-ghost:hover { background: rgba(255,255,255,.12); } .pkg-card.tone-premium .btn-customize { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #EAF7F6; } .pkg-card.tone-premium .btn-customize:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); } .pkg-modify-link { background: none; border: none; padding: 2px 4px; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; color: var(--pine); text-decoration: underline; text-underline-offset: 3px; } .pkg-modify-link:hover { color: var(--pine-2); } .pkg-card.tone-premium .pkg-modify-link { color: #EAF7F6; } .code-box { margin-top: 30px; background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .code-box .label { font-weight: 600; color: var(--pine); display: flex; align-items: center; gap: 9px; } .code-box .label svg { width: 18px; height: 18px; color: var(--gold); } .code-input { padding: 11px 15px; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--ivory); letter-spacing: .08em; text-transform: uppercase; width: 160px; } .code-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .code-msg { font-size: .85rem; font-weight: 600; width: 100%; } .code-msg.ok { color: var(--pine-2); } .code-msg.bad { color: var(--warn); } /* ---------- Competitor ---------- */ .comp-grid { display: grid; gap: 26px; } /* Compare-a-quote intro: illustration + upload merged into one hero */ .comp-hero-card { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; } /* left: illustration grounded on a soft branded panel */ .comp-hero-art { display: flex; align-items: flex-end; justify-content: center; padding: 30px 30px 0; border-right: 1px solid var(--line); background: radial-gradient(120% 90% at 82% 112%, rgba(254, 214, 91, .15), transparent 60%), linear-gradient(165deg, var(--pine-ghost), #fff 80%); } .comp-hero-art img { width: 100%; max-width: 420px; height: auto; display: block; } /* right: the upload call-to-action */ .comp-hero-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 34px; } .comp-up-ic { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 16px; border-radius: var(--r-pill); background: var(--pine-ghost); color: var(--pine); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pine) 14%, transparent); } .comp-up-ic svg { width: 26px; height: 26px; } .comp-hero-upload h3 { color: var(--ink); font-size: 1.22rem; margin-bottom: 6px; } .comp-hero-upload p { color: var(--ink-soft); font-size: .92rem; margin: 0 auto 20px; max-width: 30ch; } /* prioritized CTA stack: equal-width primary over secondary at every breakpoint */ .comp-hero-upload .upload-actions { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 300px; margin: 0 auto; } .comp-hero-upload .upload-actions .btn { justify-content: center; } @media (max-width: 760px) { .comp-hero-card { grid-template-columns: 1fr; } .comp-hero-art { padding: 22px 26px 0; border-right: none; border-bottom: 1px solid var(--line); } .comp-hero-art img { max-width: 320px; } .comp-hero-upload { padding: 26px 22px 30px; } } .upload-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .upload-filename { font-size: .85rem; color: var(--pine-2); margin-top: 14px; font-weight: 600; } /* Sample-only explainer banner at the top of the demo analysis result */ .comp-sample-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 14px 16px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold-text) 24%, transparent); border-radius: var(--r-sm); color: var(--gold-text); font-size: .92rem; line-height: 1.45; } .comp-sample-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } /* Sample-only conversion nudge shown inside the analysis result */ .comp-try-cta { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 14px; margin: 16px 0; padding: 18px 20px; background: var(--pine-ghost); border: 1px solid color-mix(in srgb, var(--pine) 18%, transparent); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .comp-try-cta-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--card); color: var(--pine); box-shadow: var(--shadow-sm); } .comp-try-cta-ic svg { width: 20px; height: 20px; } .comp-try-cta-text strong { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 2px; } .comp-try-cta-text p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.4; } .comp-try-cta .btn-block { grid-column: 1 / -1; margin-top: 4px; white-space: normal; text-wrap: balance; } .comp-try-cta .btn-primary { background: var(--gold); color: var(--ink); box-shadow: 0 8px 20px rgba(116,92,0,.24); } .comp-try-cta .btn-primary:hover { background: #F0C33F; box-shadow: 0 12px 26px rgba(116,92,0,.3); } .comp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 8px; } .comp-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); } .comp-col.theirs { border-top: 3px solid var(--ink-faint); } .comp-col.ours { border-top: 3px solid var(--pine-2); } .comp-col h4 { font-size: .95rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; } .comp-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .9rem; border-bottom: 1px solid var(--line); } .comp-line:last-child { border-bottom: none; } .comp-line .v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .comp-line.missing .n { color: var(--warn); } .comp-line.missing .v { color: var(--warn); } .flags { display: flex; flex-direction: column; gap: 10px; } .flag { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-sm); font-size: .92rem; } .flag svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; } .flag-warn { background: var(--warn-soft); color: var(--warn); } .flag-warn strong { color: var(--ink); } .flag-good { background: var(--pine-ghost); color: var(--pine); } .flag-good strong { color: var(--ink); } .flag-note { background: var(--ivory-2); color: var(--ink-soft); } .flag-note strong { color: var(--ink); } .flag .price { font-weight: 700; font-variant-numeric: tabular-nums; } /* uploaded-photo analysis: narrative summary + missing subtotal */ .comp-read { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--pine-2); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); } .comp-read p { color: var(--ink-soft); font-size: .94rem; line-height: 1.6; } .comp-read .ai-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .comp-read .ai-card-head svg { width: 20px; height: 20px; color: var(--pine-2); } .comp-missing-sum { margin-top: 4px; padding: 12px 16px; background: var(--warn-soft); border-radius: var(--r-sm); border-bottom: none; font-weight: 700; color: var(--ink); } .comp-missing-sum .v { color: var(--warn); } /* toggled their-promo-vs-ours comparison */ .comp-col-price { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .comp-col.theirs .comp-col-price { color: var(--ink-soft); } .comp-col.ours .comp-col-price { color: var(--pine); } .comp-missing-list { margin-top: 14px; } .comp-missing-list > strong { display: block; color: var(--ink); font-size: .92rem; margin-bottom: 10px; } .comp-missing-list ul { list-style: none; padding: 0; } .comp-missing-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: .9rem; border-bottom: 1px solid var(--line); } .comp-missing-list li .n { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); } .comp-missing-list li .n svg { width: 16px; height: 16px; color: var(--warn); } .comp-missing-list li .price { font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; white-space: nowrap; } .comp-li-right { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } /* Patient override: "this is actually included in their package" */ .comp-override-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; color: var(--pine); background: var(--pine-ghost); border: 1px solid var(--pine-2); border-radius: 999px; padding: 5px 11px; transition: background .15s, color .15s, border-color .15s; } .comp-override-btn:hover { background: var(--pine); color: #FFFFFF; border-color: var(--pine); } .comp-override-btn svg { width: 13px; height: 13px; } .comp-line-override .n { color: var(--pine); } .comp-override-right { display: inline-flex; align-items: center; gap: 8px; } .comp-undo-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 3px; line-height: 0; transition: color .15s, border-color .15s, background .15s; } .comp-undo-btn:hover { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); } .comp-undo-btn svg { width: 13px; height: 13px; } .comp-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; } .comp-total-card { padding: 18px 20px; border-radius: var(--r); } .comp-total-card.their { background: var(--ivory-2); } .comp-total-card.true { background: var(--pine); color: #FFFFFF; } .comp-total-card .lab { font-size: .8rem; opacity: .75; } .comp-total-card .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; } /* ---------- Competitor teaser (pre-gate) ---------- */ .comp-teaser-stats { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; margin-top: 6px; align-items: stretch; } .comp-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); } .comp-stat .lab { font-size: .8rem; color: var(--ink-soft); } .comp-stat .num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--ink); } .comp-stat .sub { font-size: .78rem; color: var(--ink-faint); margin-top: 4px; } /* Hero the "hidden costs" card — it's the conversion hook, so let it dominate. */ .comp-stat.warn { border: 1px solid color-mix(in srgb, var(--warn) 26%, var(--line)); border-top: 3px solid var(--warn); background: linear-gradient(180deg, var(--warn-soft), var(--card) 72%); } .comp-stat.warn .num { color: var(--warn); font-size: 1.95rem; } /* Full-result "bottom line": a scannable 3-up of the headline figures (their price → hidden costs → likely true total) above the AI prose. */ .comp-summary-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 2px; align-items: stretch; } .comp-summary-band .comp-stat { padding: 14px 16px; } .comp-summary-band .comp-stat .num { font-size: 1.42rem; } .comp-summary-band .comp-stat.warn .num { font-size: 1.42rem; color: var(--warn); } .comp-stat.headline { border: 1px solid color-mix(in srgb, var(--pine) 30%, var(--line)); border-top: 3px solid var(--pine); background: linear-gradient(180deg, var(--pine-ghost), var(--card) 72%); } .comp-stat.headline .num { color: var(--pine); } /* AI narrative: supporting prose under the band, with money figures highlighted. */ .comp-narrative { margin-top: 14px; } .comp-money { font-weight: 700; color: var(--pine-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Locked breakdown: a skeleton-shimmer placeholder under a lock overlay. */ .comp-locked { position: relative; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); } .comp-locked-blur { padding: 18px 20px; background: var(--card); } .comp-sk-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); } .comp-sk-row:last-child { border-bottom: 0; } .sk { position: relative; overflow: hidden; border-radius: var(--r-pill); background: var(--pine-ghost); } .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(0,105,107,.10), transparent); animation: sk-sweep 1.6s ease-in-out infinite; } .sk-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; } .sk-line { height: 11px; } .sk-pill { width: 72px; height: 14px; margin-left: auto; } .sk-val { width: 92px; height: 14px; margin-left: auto; } .sk-num { width: 62%; height: 24px; margin-top: 8px; border-radius: 8px; } .comp-total-card.true .sk { background: rgba(255,255,255,.22); } .comp-total-card.true .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent); } @keyframes sk-sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } .comp-locked-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; background: linear-gradient(180deg, rgba(248,249,250,.55), rgba(248,249,250,.9)); backdrop-filter: blur(1px); } .comp-lock-badge { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-text); box-shadow: var(--shadow-sm); animation: lock-pulse 2.4s ease-in-out infinite; } .comp-lock-badge svg { width: 22px; height: 22px; } .comp-locked-label { font-size: .92rem; font-weight: 600; color: var(--pine); max-width: 24em; } @keyframes lock-pulse { 0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(254,214,91,.5); } 50% { box-shadow: var(--shadow-sm), 0 0 0 9px rgba(254,214,91,0); } } @media (prefers-reduced-motion: reduce) { .sk::after, .comp-lock-badge { animation: none; } } .disclaimer { font-size: .82rem; color: var(--ink-faint); margin-top: 22px; display: flex; gap: 9px; align-items: flex-start; max-width: 60em; } .disclaimer svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; } /* ---------- Contact ---------- */ .contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px,4vw,44px); box-shadow: var(--shadow-md); max-width: 560px; } .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 26px 0; font-size: .82rem; color: var(--ink-faint); text-align: center; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--pine); color: #FFFFFF; padding: 13px 22px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); font-weight: 600; font-size: .9rem; z-index: 90; transition: opacity .3s, transform .3s; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 38px; min-height: auto; } .hero-visual { max-width: 440px; } .cfg-grid { grid-template-columns: 1fr; } /* When the builder collapses to one column, let the grid children shrink to the container instead of forcing their min-content width (which overflowed ~24px). */ .cfg-main, .summary { min-width: 0; } .summary { position: static; } /* Embedded + single column: the summary card stays BELOW the controls, same as the standalone mobile layout. (It used to be pulled to the top with order:-1, but the card's line list grows/shrinks on every tap, which shoved all the controls under the patient's finger up/down. The WP parent's sticky bar now leads with the live total + details + CTA, so nothing is lost.) */ .ai-grid { grid-template-columns: 1fr; } /* Mobile: collapse the includes/excludes list behind the "See what's included" toggle so stacked package cards stay short & comparable. */ .pkg-feats { display: none; } .pkg-feats.open { display: flex; animation: paygfade .2s ease; } .pkg-feats-toggle { display: flex; } /* Header wraps to two rows: brand + language on top, nav pills beneath. */ .app-header .wrap { flex-wrap: wrap; height: auto; padding-block: 10px; gap: 12px; } .brand { order: 1; } .header-right { order: 2; margin-left: auto; } .nav { order: 3; width: 100%; margin: 0; flex-wrap: wrap; justify-content: center; gap: 6px; } } @media (max-width: 620px) { .app-header .wrap { gap: 10px; } .brand-app { display: none; } .brand-logo { height: 36px; } .hero-actions { flex-direction: column; align-items: stretch; } .comp-cols, .comp-totals, .comp-teaser-stats, .comp-summary-band, .ai-ages { grid-template-columns: 1fr; } .option { grid-template-columns: 1fr; } .option-aside { align-items: flex-start; } /* Phones: trim the page gutter + card padding so the cards use the screen width instead of squeezing into the middle. Matters most in the WP embed, where the host page adds its own side padding on top of ours (see deploy/wp-staging). */ .wrap { padding-inline: 14px; } .pkg-card { padding: 18px; } /* Price summary: one card per row, and drop the 290px min track so a single card can never be wider than a narrow phone / the WP embed column. (Rows are already stacked at every width — see the base .rate-row rule.) */ .rate-grid { grid-template-columns: 1fr; } /* sticky estimate bar: compact on small screens */ .summary-card { margin-bottom: 8px; } .mobilebar .mb-bar { gap: 10px; padding: 10px 14px; } .mobilebar .mb-total { min-width: 0; } /* total may shrink so the actions fit */ .mobilebar .mb-val { font-size: 1.15rem; } .mobilebar .mb-actions { gap: 8px; flex-shrink: 0; } .mobilebar .mb-actions .btn { padding: 11px 13px; font-size: .86rem; } } /* On the narrowest phones the total + two buttons can overflow the bar. Keep the "Details / Rincian" word visible (clearer than an icon) and drop its info icon instead, so the price and the primary CTA still fit on one row. */ @media (max-width: 440px) { .mobilebar .mb-actions #mb-details svg { display: none; } .mobilebar .mb-actions #mb-details { gap: 0; padding-inline: 13px; } /* narrowest phones: claw back a few more pixels for card content */ .wrap { padding-inline: 11px; } .pkg-card { padding: 15px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ===================================================================== ADDITIONS — dose slider, rate card, print ===================================================================== */ /* ---------- Stimulation: brand + dose slider ---------- */ .stim-option { align-items: start; } .stim-option .option-aside { padding-top: 2px; } .stim-block { margin-top: 16px; } .stim-row-label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .brand-note { font-size: .8rem; color: var(--ink-soft); margin-top: 9px; } .brand-lock-note { font-size: .78rem; color: var(--gold-text); margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; } .brand-lock-note svg { width: 13px; height: 13px; } .dose-slider { position: relative; height: 56px; margin-top: 4px; } .dose-track { position: absolute; top: 30px; left: 0; right: 0; height: 10px; border-radius: var(--r-pill); overflow: hidden; display: flex; } .dose-zone { height: 100%; } .dose-zone.z-low { width: var(--low); background: color-mix(in srgb, var(--sage) 55%, white); } .dose-zone.z-normal { width: calc(var(--norm) - var(--low)); background: color-mix(in srgb, var(--gold) 48%, white); } .dose-zone.z-above { flex: 1; background: color-mix(in srgb, var(--warn) 32%, white); } .dose-input { position: absolute; top: 25px; left: -2px; width: calc(100% + 4px); height: 20px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; } .dose-input:focus { outline: none; } .dose-input::-webkit-slider-runnable-track { background: transparent; height: 20px; } .dose-input::-moz-range-track { background: transparent; height: 20px; } .dose-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pine); border: 3px solid #fff; box-shadow: var(--shadow-md); margin-top: -2px; } .dose-input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--pine); border: 3px solid #fff; box-shadow: var(--shadow-md); } .dose-input:active::-webkit-slider-thumb { transform: scale(1.08); } .dose-bubble { position: absolute; top: -2px; transform: translateX(-50%); background: var(--pine); color: #FFFFFF; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; } .dose-scale { display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink-faint); margin-top: 2px; font-variant-numeric: tabular-nums; } .dose-scale span:nth-child(2) { color: var(--ink-soft); font-weight: 600; } .dose-zonebar { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; } .zone-tag { font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--ivory-2); color: var(--ink-faint); border: 1px solid transparent; transition: all .15s; } .zone-tag.z-low.on { background: color-mix(in srgb, var(--sage) 24%, white); color: var(--pine); border-color: var(--sage); } .zone-tag.z-normal.on { background: var(--gold-soft); color: #6b531a; border-color: var(--gold); } .zone-tag.z-above.on { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .dose-hint { font-size: .83rem; color: var(--ink-soft); margin-top: 9px; } .stim-notsure { margin-top: 12px; font-size: .8rem; font-weight: 600; color: var(--pine-2); display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; } .stim-notsure svg { width: 14px; height: 14px; } /* ---------- Rate card (price summary) ---------- */ .rate-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; } .rate-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow-sm); } .rate-title { font-size: 1.12rem; color: var(--pine); margin-bottom: 10px; } /* Stacked entry: the product name takes its own full-width line and the figure sits beneath it (all viewports). Replaces the old name-left / price-right row, which squeezed the name column and let long IDR figures overflow the card. */ .rate-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 11px 0; border-bottom: 1px solid var(--line); } .rate-row:last-of-type { border-bottom: none; } .rate-n { font-size: .94rem; color: var(--ink); display: flex; flex-direction: column; gap: 2px; width: 100%; } .rate-sub { font-size: .76rem; color: var(--ink-faint); font-weight: 400; } .rate-v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pine); font-size: .98rem; } .rate-v .per { font-weight: 500; color: var(--ink-faint); font-size: .8rem; } .rate-foot { font-size: .78rem; color: var(--ink-soft); margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong); } /* ---------- Packages-first home: hero band ---------- */ .pkg-hero { max-width: 46em; margin-bottom: 28px; } .pkg-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3rem); color: var(--pine); letter-spacing: -.022em; line-height: 1.06; margin-top: 14px; } .pkg-hero-sub { font-size: 1.12rem; color: var(--ink-soft); margin-top: 18px; max-width: 38em; } .pkg-hero .hero-reassure { margin-top: 24px; } /* ---------- "Help me choose" entry ---------- */ .help-choose { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(120deg, var(--pine-ghost), var(--card) 85%); border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px; } .help-choose-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.18rem; color: var(--pine); font-weight: 600; } .help-choose-title svg { width: 20px; height: 20px; color: var(--terra); } .help-choose-text p { color: var(--ink-soft); margin-top: 6px; font-size: .96rem; max-width: 42em; } .help-choose .btn { white-space: nowrap; } /* ---------- "Build your own" banner (demoted path to the builder) ---------- */ .byo-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 22px; padding: 22px 26px; cursor: pointer; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--card); transition: border-color .18s, transform .18s, box-shadow .18s; } .byo-banner:hover { border-color: var(--pine); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .byo-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.18rem; color: var(--pine); font-weight: 600; } .byo-title svg { width: 20px; height: 20px; color: var(--pine-2); } .byo-text p { color: var(--ink-soft); margin-top: 6px; font-size: .95rem; max-width: 44em; } .byo-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--terra-deep); white-space: nowrap; } .byo-cta svg { width: 18px; height: 18px; } /* ---------- Builder summary: live "closest package" nudge ---------- */ .cfg-nudge { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); } .cfg-nudge-head { display: flex; align-items: center; gap: 8px; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); } .cfg-nudge-head svg { width: 15px; height: 15px; color: var(--apricot, #E7B98C); } .cfg-nudge-line { font-size: .92rem; color: #FFFFFF; margin: 8px 0 12px; line-height: 1.45; } .cfg-nudge-line strong { color: #fff; } .cfg-nudge-btn { color: #FFFFFF; border-color: rgba(255,255,255,.35); white-space: normal; text-wrap: balance; line-height: 1.3; height: auto; min-height: 46px; padding-top: 11px; padding-bottom: 11px; } .cfg-nudge-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); } /* ---------- Highlighted package (arrived via a nudge) ---------- */ .pkg-card.is-highlight { box-shadow: 0 0 0 3px var(--terra), var(--shadow-md); animation: pkgRing 1.2s ease; } @keyframes pkgRing { 0% { box-shadow: 0 0 0 0 rgba(0,105,107,.5), var(--shadow-md); } 60% { box-shadow: 0 0 0 7px rgba(0,105,107,0), var(--shadow-md); } 100% { box-shadow: 0 0 0 3px var(--terra), var(--shadow-md); } } /* ---------- AI "recommended for you" block ---------- */ .ai-card.ai-rec { background: linear-gradient(180deg, var(--terra-soft), var(--card) 85%); border-color: var(--terra); } .ai-rec .ai-card-title { color: var(--terra-deep); } .ai-rec .ai-card-head svg { color: var(--terra); } .ai-rec-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--pine); font-weight: 600; margin: 6px 0 8px; } .ai-rec p { color: var(--ink-soft); margin-bottom: 14px; } /* ---------- Print (rate card) ---------- */ @media print { .bg-orbs, .grain, .app-header, .site-footer, .mobilebar, .nav, .no-print, .site-hd, .rel-nav, .hk-popup, .site-ft { display: none !important; } body { background: #fff; overflow: visible; } .reveal { opacity: 1 !important; transform: none !important; } .view { padding-bottom: 0; } .rate-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .rate-card { box-shadow: none; border-color: #ccc; break-inside: avoid; } } /* ===== Code-gated packages ===== */ /* builder-forward primary card (no-code landing) */ .byo-primary { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; background: linear-gradient(135deg, var(--pine), var(--pine-2)); color: #FFFFFF; /* breathing room off the package grid above it (was flush, ~0 gap) */ margin-top: 28px; border-radius: var(--r-lg); padding: 26px 30px; box-shadow: var(--shadow-md); cursor: pointer; } .byo-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .byo-primary-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; color: #fff; } .byo-primary-title svg { width: 22px; height: 22px; color: var(--apricot); } .byo-primary-text p { color: rgba(255,255,255,.82); margin-top: 8px; font-size: .96rem; max-width: 40em; } .byo-primary .btn-primary { background: var(--gold); color: var(--ink); box-shadow: 0 10px 26px rgba(116,92,0,.3); } .byo-primary .btn-primary:hover { background: #F0C33F; } .or-line { display: flex; align-items: center; gap: 16px; margin: 26px 0 18px; color: var(--ink-faint); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; } .or-line::before, .or-line::after { content: ""; height: 1px; background: var(--line-strong); flex: 1; } /* quiet "have a code?" card */ .code-card { background: var(--card); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); padding: 30px; text-align: center; } .code-card-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; margin: 0 auto 14px; } .code-card-ico svg { width: 24px; height: 24px; } .code-card h3 { font-size: 1.3rem; color: var(--pine); } .code-card p { color: var(--ink-soft); margin-top: 8px; font-size: .96rem; max-width: 34em; margin-inline: auto; } .code-card .code-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } .code-card .code-input { width: 210px; text-align: center; } .code-card .code-msg { min-height: 1.3em; margin-top: 12px; font-size: .9rem; font-weight: 600; } .code-card .code-msg.ok { color: var(--pine-2); } .code-card .code-msg.bad { color: var(--warn); } /* active-code banner */ .active-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; background: var(--pine-ghost); border: 1.5px solid var(--gold); border-radius: var(--r); padding: 16px 22px; } .active-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--gold); color: #fff; display: grid; place-items: center; flex-shrink: 0; } .active-ico svg { width: 18px; height: 18px; } .active-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .active-lbl { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .active-val { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--pine); } .active-code { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--gold-text); background: var(--card); border: 1px solid var(--gold); border-radius: var(--r-pill); padding: 3px 10px; } .active-change { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--terra-deep); } .active-change:hover { text-decoration: underline; } /* builder contrast (code active) */ .contrast { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; padding: 20px 24px; border: 2px dashed var(--line-strong); border-radius: var(--r); background: var(--card); cursor: pointer; transition: border-color .18s, transform .18s, box-shadow .18s; } .contrast:hover { border-color: var(--pine); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .contrast-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.1rem; color: var(--pine); font-weight: 600; } .contrast-title svg { width: 19px; height: 19px; color: var(--pine-2); } .contrast-text p { color: var(--ink-soft); margin-top: 5px; font-size: .92rem; max-width: 46em; } .contrast-cta { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--terra-deep); white-space: nowrap; } @media (max-width: 560px) { .byo-primary, .contrast { flex-direction: column; align-items: flex-start; } } /* ── Upload history (per-phone) ───────────────────────────────── */ .upload-history { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .uh-head { display: flex; align-items: center; justify-content: space-between; } .uh-head h3 { font-size: .95rem; margin: 0; } .uh-clear { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ink-soft, #6b6257); font-size: .78rem; cursor: pointer; padding: 4px 6px; border-radius: 8px; } .uh-clear:hover { background: var(--ivory-2, #f3ece1); } .upload-hist-row { display: flex; align-items: stretch; gap: 0; background: var(--card, #fff); border: 1px solid var(--line, #e7ddcf); border-radius: 12px; overflow: hidden; transition: border-color .15s; } .upload-hist-row:hover { border-color: var(--pine, #2f5d50); } .uh-open { flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; background: none; border: none; padding: 11px 14px; cursor: pointer; transition: transform .05s; } .uh-open:active { transform: translateY(1px); } .uh-del { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; background: none; border: none; border-left: 1px solid var(--line, #e7ddcf); color: var(--ink-faint, #9a9082); cursor: pointer; transition: color .15s, background .15s; } .uh-del:hover { color: var(--terra-deep, #a3502f); background: var(--ivory-2, #f3ece1); } .uh-del svg { width: 16px; height: 16px; } .uh-file { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .88rem; } .uh-file svg { width: 15px; height: 15px; } .uh-meta { color: var(--ink-soft, #6b6257); font-size: .76rem; } /* undo action inside the toast */ /* pointer-events: auto undoes the .toast's none — without it the action button is click-through (whatever sits underneath, e.g. the sticky bar, gets the tap). */ .toast-action { pointer-events: auto; margin-left: 12px; background: none; border: none; color: var(--gold-text, #8A6A1E); font-weight: 700; font-size: .82rem; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; } .toast-action:hover { text-decoration: underline; } /* ── Competitor market band ───────────────────────────────────── */ .market-band { margin: 14px 0; padding: 14px 16px; border: 1px dashed var(--line, #e7ddcf); border-radius: 14px; background: var(--ivory, #faf5ec); } .market-band .mb-lead { margin: 0 0 8px; font-size: .85rem; color: var(--ink-soft, #6b6257); } .mb-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mb-bar .mb-lo, .mb-bar .mb-hi { font-weight: 700; font-size: .9rem; white-space: nowrap; } .mb-bar .mb-track { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--pine-2), var(--sage)); } .market-band .mb-title { margin: 8px 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .02em; } .market-band .mb-note { margin: 3px 0 0; font-size: .72rem; color: var(--ink-faint, #9a9082); } /* ── compare-a-quote v2 ─────────────────────────────────────────── */ .cq-verdict { background: var(--card, #fff); border-radius: 16px; padding: 18px; box-shadow: 0 6px 24px rgba(0,0,0,.05); } .cq-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pine); margin-bottom: 10px; } .cq-cards { display: flex; gap: 10px; flex-wrap: wrap; } .cq-card { flex: 1; min-width: 200px; border: 1px solid #e3e8e8; border-radius: 12px; padding: 14px; background: #fff; } .cq-card.ours { border: 2px solid var(--pine); } .cq-card-lab { font-size: .7rem; color: #66777a; text-transform: uppercase; letter-spacing: .04em; } .cq-card-lab small { text-transform: none; letter-spacing: 0; color: #98a5a6; } .cq-card-num { font-size: 1.35rem; font-weight: 800; margin-top: 4px; color: #b4543a; } .cq-card.ours .cq-card-num { color: var(--pine); } .cq-card-mid { font-size: 1.05rem; font-weight: 800; color: #445; margin-top: 4px; } .cq-card-gap { font-size: .76rem; font-weight: 700; color: #b4543a; margin-top: 6px; } .cq-card-split { border-top: 1px dashed #dde; margin-top: 8px; padding-top: 8px; } .cq-card-sub { font-size: .68rem; color: #98a5a6; margin-top: 4px; } .cq-badge-row { text-align: center; margin-top: 12px; } .cq-badge { display: inline-block; background: #c9a227; color: #fff; border-radius: 999px; padding: 7px 16px; font-weight: 800; font-size: .9rem; box-shadow: 0 2px 8px rgba(201,162,39,.35); } .cq-badge-soft { background: #66777a; box-shadow: none; } .cq-checkmath { text-align: center; font-size: .72rem; color: #66777a; margin-top: 10px; } .cq-panel { background: #fff; border: 1px solid #e3e8e8; border-radius: 12px; padding: 16px; margin-top: 14px; } .cq-h { margin: 0; font-size: .95rem; } .cq-hint { font-size: .72rem; color: #66777a; margin: 2px 0 10px; } .cq-rcpt-sec { font-size: .64rem; font-weight: 800; color: #98a5a6; letter-spacing: .05em; text-transform: uppercase; margin-top: 8px; } .cq-rcpt-row, .cq-tbl-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f0f2f2; font-size: .82rem; align-items: baseline; } .cq-rcpt-row .n small.cq-verbatim { display: block; font-size: .66rem; color: #aab; } .cq-rcpt-row .v { white-space: nowrap; font-weight: 700; } .cq-edit { border: 0; background: none; color: #bbb; cursor: pointer; font-size: .8rem; padding: 0 2px; } .cq-edit:hover { color: var(--pine); } .cq-edited { color: var(--pine); } .cq-editbox { display: inline-flex; gap: 4px; align-items: center; } .cq-editbox input { width: 110px; padding: 2px 6px; border: 1px solid var(--pine); border-radius: 6px; font-size: .8rem; } .cq-rcpt-sum { display: flex; justify-content: space-between; border-top: 2px solid var(--pine); margin-top: 10px; padding-top: 8px; font-weight: 800; font-size: .86rem; } .cq-rcpt-sum span:last-child { color: #b4543a; } .cq-foot { font-size: .7rem; color: #98a5a6; margin: 8px 0 0; } .cq-tbl-row .them { color: #b4543a; white-space: nowrap; } .cq-tbl-row .us { color: var(--pine); text-align: right; min-width: 40%; } .cq-tbl-row .us small { color: #98a5a6; font-weight: 400; } .cq-tbl-row.cq-cheaper { background: #f4faf4; } .cq-cheaper-tag { font-style: normal; font-size: .64rem; color: #3a7d44; } .cq-incq { border: 1px solid var(--pine); color: var(--pine); background: none; border-radius: 6px; font-size: .66rem; padding: 1px 6px; cursor: pointer; margin-left: 6px; } @media (max-width: 620px) { .cq-cards { flex-direction: column; } .cq-tbl-row { flex-wrap: wrap; } .cq-tbl-row .us { min-width: 100%; } }