/* ========================================================================== SalzburgerLand Card Checker — styles Hebrew RTL · Austrian Alps palette ========================================================================== */ :root { --green-primary: #2E7D32; --green-light: #81C784; --green-soft: #E8F5E9; --blue-alpine: #1565C0; --blue-soft: #E3F2FD; --gold: #F9A825; --gold-soft: #FFF8E1; --cream: #FAFAF7; --navy: #1A237E; --teal: #00897B; /* accent — replaces the former orange */ --teal-dark: #00695C; --teal-soft: #E0F2F1; --red: #C62828; --red-soft: #FFEBEE; --ink: #22252E; --muted: #6B7280; --line: #E5E7EB; --line-soft: #DCE1E7; /* visible-but-quiet border: chip bar, search */ --warm-cream: #FAF8F3; --white: #FFFFFF; --radius: 14px; --radius-sm: 10px; --shadow-sm: 0 1px 3px rgba(26,35,126,.08), 0 1px 2px rgba(26,35,126,.06); --shadow-md: 0 4px 14px rgba(26,35,126,.10); --shadow-lg: 0 12px 32px rgba(26,35,126,.16); --card-h: 296px; /* tallest measured front face: 287px @1400 */ --maxw: 1240px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Assistant', 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--cream); color: var(--ink); font-size: 16px; line-height: 1.55; /* `clip` not `hidden`: hidden would make a scroll container and the sticky widget inside it would never unstick */ overflow-x: clip; } body.calc-open { overflow: hidden; } h1, h2, h3, h4 { font-family: 'Frank Ruhl Libre', 'Segoe UI', Georgia, serif; margin: 0; color: var(--navy); line-height: 1.25; } button { font-family: inherit; cursor: pointer; } a { color: var(--blue-alpine); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Buttons ------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 999px; padding: 11px 22px; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .btn-buy { background: linear-gradient(180deg, var(--teal), var(--teal-dark)); color: #fff; box-shadow: 0 6px 18px rgba(0,105,92,.32); } .btn-buy:hover { box-shadow: 0 10px 24px rgba(0,105,92,.42); } .btn-buy.small { padding: 9px 16px; font-size: 14px; } .btn-ghost { background: var(--warm-cream); color: var(--navy); border-color: #E0D9CB; box-shadow: var(--shadow-sm); } .btn-ghost:hover { background: #FFFDF8; border-color: #D3C9B6; } .btn-ghost[aria-expanded="true"] { background: var(--gold); border-color: var(--gold); color: #3E2723; } .btn-outline { background: #fff; color: var(--green-primary); border-color: var(--green-primary); } .btn-outline:hover { background: var(--green-soft); } .btn-green { background: var(--green-primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-green:hover { background: #1B5E20; } .chev { font-size: 12px; transition: transform .2s; } [aria-expanded="true"] .chev { transform: rotate(180deg); } /* ---------- Hero --------------------------------------------------------- */ .hero { position: relative; background: #1B3A2A url('hero.jpg') center 42% / cover no-repeat; padding: 30px 0 34px; text-align: center; color: #fff; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,26,45,.55) 0%, rgba(10,26,45,.42) 45%, rgba(10,26,45,.72) 100%); } .hero > .wrap { position: relative; z-index: 1; } .logo-pill { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.94); border-radius: 999px; padding: 8px 26px; box-shadow: var(--shadow-md); margin-bottom: 16px; } .logo-pill img { display: block; height: 46px; width: auto; } .hero h1 { color: #fff; font-size: clamp(26px, 4.4vw, 42px); font-weight: 700; text-shadow: 0 2px 14px rgba(0,0,0,.45); } .hero .sub { margin: 10px auto 20px; max-width: 640px; font-size: clamp(15px, 1.8vw, 18px); color: #F0F4F1; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .hero-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .season-badge { display: inline-block; margin-bottom: 14px; background: rgba(249,168,37,.95); color: #3E2723; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 5px 14px; } /* ---------- Hero panels -------------------------------------------------- */ .panel { display: none; margin: 16px auto 0; max-width: 800px; text-align: right; background: rgba(255,255,255,.97); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px 20px; animation: fade .2s ease; } .panel.open { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; } .tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: -2px; } .tab[aria-selected="true"] { color: var(--green-primary); border-bottom-color: var(--green-primary); } .tabpanel { display: none; font-size: 15px; } .tabpanel.open { display: block; } .tabpanel ul { margin: 0; padding-inline-start: 20px; } .tabpanel li { margin-bottom: 7px; } .tabpanel h4 { margin: 12px 0 6px; font-size: 16px; } .ptable { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 15px; } .ptable th, .ptable td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; } .ptable th { background: var(--green-soft); color: var(--navy); font-weight: 700; } .ptable td:first-child { text-align: right; font-weight: 600; } .note-box { background: var(--gold-soft); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 15px; margin-top: 10px; } .panel .disclaimer { font-size: 15px; margin: 0; line-height: 1.65; padding-inline-start: 20px; } .panel .disclaimer li { margin-bottom: 6px; } .panel .disclaimer li:last-child { margin-bottom: 0; } /* ---------- Toolbar ------------------------------------------------------ */ .toolbar { background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 16px 0; } /* box + purchase button share one row; the button matches the box height */ .family-block { display: flex; align-items: stretch; gap: 12px; margin-bottom: 14px; } .family-block .family-row { flex: 1 1 auto; margin-bottom: 0; } .family-block .family-buy { flex: 0 0 auto; border-radius: var(--radius); padding: 0 14px; font-size: 14px; text-align: center; line-height: 1.3; white-space: nowrap; } .family-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: linear-gradient(135deg, var(--green-soft), var(--blue-soft)); border: 1px solid var(--green-light); border-radius: var(--radius); padding: 3px 8px; min-height: 44px; margin-bottom: 14px; } .family-row .fam-title { font-weight: 800; color: var(--navy); font-size: 14px; white-space: nowrap; } .steppers { display: flex; gap: 10px; flex-wrap: wrap; } /* toolbar steppers are compacted so title + 3 steppers fit one 44px header row */ .family-row .steppers { gap: 6px; } .family-row .stepper { gap: 3px; padding: 2px 3px 2px 2px; } .family-row .stepper button { width: 28px; height: 28px; font-size: 16px; } .family-row .stepper output { min-width: 18px; font-size: 14px; } .family-row .stepper .lbl { font-size: 12px; padding: 0 4px; } .stepper { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 4px; box-shadow: var(--shadow-sm); } .stepper .lbl { font-size: 13px; font-weight: 700; color: var(--navy); padding: 0 8px; white-space: nowrap; } .stepper .lbl .free { color: var(--green-primary); font-weight: 800; } .stepper button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--green-light); background: var(--green-soft); color: var(--green-primary); font-size: 18px; font-weight: 800; line-height: 1; display: grid; place-items: center; } .stepper button:hover { background: var(--green-light); color: #fff; } .stepper button:disabled { opacity: .4; cursor: not-allowed; } .stepper output { min-width: 26px; text-align: center; font-weight: 800; font-size: 16px; color: var(--navy); } .fam-hint { font-size: .75rem; color: var(--muted); font-weight: 600; white-space: nowrap; } .infant-note { font-size: .72rem; color: #888; font-weight: 400; } /* chip bar and search share one row: chips right (RTL first), search left */ .filters-row { display: flex; gap: 12px; align-items: center; flex-wrap: nowrap; } .search { position: relative; flex: 0 1 200px; max-width: 200px; min-width: 0; } .search input { width: 100%; border: 1.5px solid var(--teal); border-radius: 999px; padding: 10px 38px 10px 14px; font-size: 15px; font-family: inherit; background: var(--cream); } .search input:focus { outline: 2px solid var(--green-light); outline-offset: 0; background: #fff; } .search .ico { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1 1 auto; min-width: 0; /* wrap inside the bar rather than dropping below the search */ order: -1; /* RTL: first flex item sits on the right */ border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 7px 9px; } .chips .group-label { font-size: 13px; color: var(--muted); font-weight: 700; } .chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 11px; font-size: 14px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: all .15s; } .chip[hidden] { display: none; } /* .chip's display would otherwise beat the UA rule */ .chip svg { flex: none; color: var(--teal); transition: color .15s; } .chip:hover { border-color: var(--green-light); background: var(--green-soft); } .chip[aria-pressed="true"] { background: var(--green-primary); border-color: var(--green-primary); color: #fff; } .chip[aria-pressed="true"] svg { color: currentColor; } .chip.star svg { color: var(--gold); } .chip.star[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #3E2723; } /* clear-filters lives above the grid now, not in the chip bar (which must stay single-row); margin-inline-start:auto puts it at the grid's left edge in RTL */ .clear-filters-btn { display: block; margin-inline-start: auto; margin-bottom: 8px; font-size: .8rem; color: var(--teal); background: none; border: 1px solid var(--teal); border-radius: 6px; padding: 4px 10px; cursor: pointer; } .clear-filters-btn[hidden] { display: none; } /* beats the author display:block */ .clear-filters-btn:hover { background: var(--teal-soft); } /* inline "read more" link — calculator foot + hero explanation tab */ .info-link { display: inline-block; margin-top: 12px; color: var(--teal); font-weight: 700; font-size: 14.5px; text-decoration: none; border-bottom: 1px solid rgba(0,137,123,.35); padding-bottom: 1px; } .info-link:hover { color: var(--teal-dark); border-bottom-color: var(--teal-dark); } /* ---------- Grid & cards ------------------------------------------------- */ main { padding: 22px 0 40px; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .card { position: relative; height: var(--card-h); perspective: 1400px; } .card-inner { position: relative; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; } .card.flipped .card-inner { transform: rotateY(180deg); } .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; border: 1.5px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 14px 12px; display: flex; flex-direction: column; overflow: hidden; } .card:not(.flipped) .face-front:hover { box-shadow: var(--shadow-md); } .card:not(.flipped):hover { transform: translateY(-3px); transition: transform .18s; } .face-back { transform: rotateY(180deg); overflow-y: auto; } .card.selected .face { border-color: var(--green-primary); box-shadow: 0 0 0 2px var(--green-soft), var(--shadow-md); } /* select badge — top-left corner */ .pick { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1.5px solid var(--green-light); border-radius: 999px; padding: 3px 9px 3px 6px; font-size: 12px; font-weight: 700; color: var(--green-primary); box-shadow: var(--shadow-sm); cursor: pointer; user-select: none; } .pick:hover { background: var(--green-soft); } .pick input { accent-color: var(--green-primary); width: 15px; height: 15px; margin: 0; cursor: pointer; } .card.selected .pick { background: var(--green-primary); border-color: var(--green-primary); color: #fff; } .card-head { padding-inline-end: 86px; margin-bottom: 4px; } .card-title { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--navy); } .card-de { font-size: 12.5px; color: var(--muted); line-height: 1.3; margin-top: 1px; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 5px 0 6px; } .card-meta svg { flex: none; } .badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; } .tag { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: var(--blue-soft); color: var(--blue-alpine); } .tag.cat { background: var(--green-soft); color: var(--green-primary); } .tag.pop { background: var(--gold-soft); color: #8D6E00; } .tag.warn { background: var(--red-soft); color: var(--red); border: 1px solid #F3C6C6; } .card-desc { font-size: 13.5px; color: #4B5060; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .more { align-self: flex-start; background: none; border: 0; padding: 3px 0; color: var(--blue-alpine); font-size: 13.5px; font-weight: 700; text-decoration: underline; } .more:hover { color: var(--navy); } .card-foot { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); } .benefit { font-size: 13.5px; font-weight: 800; color: var(--green-primary); } .price { font-size: 13.5px; color: #333A45; font-weight: 600; margin-top: 2px; } .price.na { color: var(--muted); font-style: italic; font-weight: 600; } /* back face */ .face-back h4 { font-size: 16px; margin-bottom: 6px; padding-inline-end: 4px; } .back-body { font-size: 13.5px; color: #414653; line-height: 1.55; } .back-body p { margin: 0 0 8px; } .back-row { display: flex; gap: 6px; margin-bottom: 7px; font-size: 13px; } .back-row .k { font-weight: 800; color: var(--navy); flex: none; } .back-actions { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .mini { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid var(--line); background: #fff; color: var(--navy); } .mini:hover { background: var(--cream); } .mini.nav { background: var(--blue-alpine); border-color: var(--blue-alpine); color: #fff; } .mini.nav:hover { background: #0D47A1; } .mini.back { background: var(--green-soft); border-color: var(--green-light); color: var(--green-primary); } .warn-box { background: var(--red-soft); border-inline-start: 3px solid var(--red); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: #8E1F1F; font-weight: 600; margin-bottom: 8px; } .empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); } /* ---------- Pagination --------------------------------------------------- */ .pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; } .pager button { min-width: 38px; height: 38px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; color: var(--navy); } .pager button:hover:not(:disabled) { border-color: var(--green-primary); color: var(--green-primary); } .pager button[aria-current="page"] { background: var(--green-primary); border-color: var(--green-primary); color: #fff; } .pager button:disabled { opacity: .4; cursor: not-allowed; } .pager .dots { color: var(--muted); padding: 0 2px; } /* ---------- Floating widget ---------------------------------------------- */ /* Standalone: sticky, never fixed. It floats right so the grid (which reserves a 300px right gutter above 1181px) lays out beside it instead of below it. Physical `float:right`/`right` on purpose: the widget must sit on the right edge even though the document is RTL (where inline-end resolves to the left). */ .widget { position: sticky; top: 80px; z-index: 60; float: right; margin: 0 16px 16px 0; width: 268px; background: #fff; border: 1.5px solid var(--green-primary); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; font-size: 14px; transition: opacity .25s ease, transform .25s ease, visibility .25s; } /* stays out of the way until the hero is scrolled past */ .widget.stowed { opacity: 0; visibility: hidden; transform: translateX(24px); pointer-events: none; } /* embedded: same sticky treatment as standalone, no JS. If the host sizes the frame to the full document the frame never scrolls, so this resolves to the flow position; if the frame ever gets its own scrollbar it follows the scroll. */ body.embedded .widget { position: sticky; top: 80px; float: right; margin: 0 16px 16px 0; } /* clickable: opens the full-calculator overlay, same as the button below it */ .sw-screen-hint { display: block; width: 100%; background: none; border: 0; padding: 0; font-family: inherit; font-size: .72rem; text-align: center; margin: 2px 0 6px; color: var(--teal); text-decoration: underline; cursor: pointer; } .sw-screen-hint:hover { color: var(--teal-dark); } .widget-head { display: flex; align-items: center; gap: 8px; background: var(--green-primary); color: #fff; padding: 9px 12px; } .widget-head .t { font-weight: 800; font-size: 14.5px; } .widget-head .cnt { background: var(--gold); color: #3E2723; border-radius: 999px; min-width: 22px; text-align: center; padding: 0 7px; font-size: 13px; font-weight: 800; } .widget-head .toggle { margin-inline-start: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.15); color: #fff; font-size: 17px; font-weight: 800; line-height: 1; display: grid; place-items: center; } .widget-head .toggle:hover { background: rgba(255,255,255,.3); } .widget-body { padding: 10px 12px 12px; } .widget.min .widget-body { display: none; } .wlist { list-style: none; margin: 0 0 10px; padding: 0; max-height: 208px; overflow-y: auto; } .wlist li { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .wlist li:last-child { border-bottom: 0; } .wlist .nm { flex: 1; line-height: 1.35; } .wlist .pr { color: var(--muted); font-size: 12.5px; white-space: nowrap; } .wlist .rm { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--red-soft); color: var(--red); font-size: 13px; font-weight: 800; line-height: 1; display: grid; place-items: center; } .wlist .rm:hover { background: var(--red); color: #fff; } .wempty { color: var(--muted); font-size: 13.5px; text-align: center; padding: 14px 4px; } .wtotal { background: var(--cream); border-radius: var(--radius-sm); padding: 8px 10px; font-weight: 800; color: var(--navy); font-size: 14.5px; text-align: center; } .verdict { margin-top: 8px; border-radius: var(--radius-sm); padding: 8px 10px; font-weight: 800; font-size: 14px; text-align: center; } .verdict.good { background: var(--green-soft); color: #1B5E20; border: 1px solid var(--green-light); } .verdict.wait { background: var(--gold-soft); color: #8D5A00; border: 1px solid #FFD54F; } .widget .btn { width: 100%; margin-top: 9px; padding: 9px 14px; font-size: 14px; } /* ---------- Calculator (slide-up overlay) -------------------------------- */ /* fullscreen backdrop; `hidden` on the element keeps it out of the layout until the widget's "פתח מחשבון מלא" opens it */ .calc-container { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; } .calc-container[hidden] { display: none; } /* embedded: fixed would pin to the tall iframe document, so JS parks an absolute container over the host viewport (top/height set inline) */ body.embedded .calc-container { position: absolute; inset: auto 0 auto 0; } .calc-overlay { position: absolute; inset: 0; background: rgba(10, 26, 45, .58); animation: calcFade .2s ease; } @keyframes calcFade { from { opacity: 0; } to { opacity: 1; } } @keyframes calcUp { from { transform: translateY(100%); } to { transform: none; } } .calc { background: #fff; border: 1.5px solid var(--green-light); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 22px; margin: 8px auto 40px; max-width: 860px; scroll-margin-top: 20px; } .calc-panel { position: relative; z-index: 1; width: 100%; max-width: 900px; margin: 0 auto; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg); animation: calcUp .28s cubic-bezier(.22, .7, .3, 1); } /* embedded: `vh` is the *iframe* height (as tall as the whole page), so 90vh would let the panel grow far past the host viewport. The container's height is the host viewport (set inline by JS), so bound the panel to that instead. */ body.embedded .calc-panel { max-height: 90%; } .calc-top { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; } .calc-close { padding: 8px 16px; font-size: 14px; } /* last element in the panel, below the PDF button and the info link */ .calc-back-link { display: block; text-align: center; font-size: .8rem; color: var(--teal); font-weight: 700; text-decoration: underline; margin-top: 16px; padding-bottom: 8px; } .calc-back-link:hover { color: var(--teal-dark); } .calc h2 { font-size: 24px; margin-bottom: 4px; } .calc .lead { color: var(--muted); font-size: 15px; margin: 0 0 16px; } .calc .steppers { margin-bottom: 10px; } .family-under4-note { margin: 0 0 10px; font-size: 13px; color: #888; } .calc-notes { margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; color: #4B5060; } .calc-notes li { margin-bottom: 4px; } .calc-notes li::before { content: '•'; color: var(--green-primary); font-weight: 800; margin-inline-end: 7px; } .result { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .result .line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 15.5px; } .result .line:last-of-type { border-bottom: 0; } .result .line .k { font-weight: 700; color: var(--navy); } .result .line .v { font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; } /* label + value hug each other on one line instead of splitting to the edges */ .result .line.inline { display: block; } .result .result-label { font-weight: 700; color: var(--navy); } .result .result-value { font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; } .cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; } .opt { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; text-align: center; background: #fff; position: relative; } .opt .n { font-size: 14px; font-weight: 700; color: var(--muted); } .opt .p { font-size: 24px; font-weight: 800; color: var(--navy); font-family: 'Frank Ruhl Libre', serif; } .opt.best { border-color: var(--green-primary); background: var(--green-soft); box-shadow: 0 0 12px 3px rgba(0, 137, 123, .45); /* glow marks the cheaper card */ } .opt.best .p { color: var(--green-primary); } .opt .flag { position: absolute; top: -10px; inset-inline-start: 50%; transform: translateX(50%); background: var(--green-primary); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 10px; white-space: nowrap; } .big-verdict { margin-top: 12px; border-radius: var(--radius-sm); padding: 14px; text-align: center; font-size: 19px; font-weight: 800; font-family: 'Frank Ruhl Libre', serif; } .big-verdict.good { background: var(--green-soft); color: #1B5E20; border: 2px solid var(--green-primary); } .big-verdict.wait { background: var(--gold-soft); color: #8D5A00; border: 2px solid var(--gold); } .big-verdict small { display: block; font-size: 14px; font-weight: 600; margin-top: 4px; font-family: 'Assistant', sans-serif; } .encourage { background: var(--blue-soft); border-inline-start: 4px solid var(--blue-alpine); border-radius: var(--radius-sm); padding: 12px 14px; margin: 14px 0; font-size: 14.5px; line-height: 1.6; color: #14406E; } .calc-actions { display: flex; gap: 10px; flex-wrap: wrap; } .calc-actions .btn-buy { flex: 1 1 260px; padding: 13px 22px; font-size: 16px; } /* ---------- Mobile calculator bar ---------------------------------------- */ .mobile-calc-bar { display: none; } /* embedded: fixed would pin to the bottom of the whole iframe document, so JS parks an absolute bar on the host viewport's bottom edge instead */ body.embedded .mobile-calc-bar { position: absolute; bottom: auto; } /* the calculator it opens is already on screen — don't cover the panel */ body.calc-open .mobile-calc-bar { display: none; } /* ---------- Footer ------------------------------------------------------- */ .foot { background: #fff; border-top: 1px solid var(--line); padding: 18px 0; text-align: center; font-size: 13.5px; color: var(--muted); } .foot a { font-weight: 700; } /* ---------- Print / PDF -------------------------------------------------- */ #printArea { display: none; } @media print { @page { size: A4; margin: 14mm; } body { background: #fff; } body > *:not(#printArea) { display: none !important; } #printArea { display: block !important; direction: rtl; color: #000; font-size: 12pt; } #printArea .plogo { text-align: center; } #printArea .plogo img { height: 46px; } #printArea .credit { text-align: center; font-size: 10pt; color: #444; margin: 4px 0 14px; } #printArea h1 { font-size: 20pt; text-align: center; margin-bottom: 4px; color: #2E7D32; } #printArea .pdate { text-align: center; font-size: 10pt; color: #555; margin-bottom: 16px; } #printArea h2 { font-size: 14pt; margin: 14px 0 6px; color: #1A237E; border-bottom: 1px solid #999; padding-bottom: 3px; } #printArea table { width: 100%; border-collapse: collapse; font-size: 10.5pt; } #printArea th, #printArea td { border: 1px solid #999; padding: 5px 7px; text-align: right; } #printArea th { background: #E8F5E9; } #printArea td.num, #printArea th.num { text-align: center; white-space: nowrap; } #printArea tfoot td { font-weight: bold; background: #F5F5F5; } #printArea .pverdict { margin-top: 12px; padding: 10px; border: 2px solid #2E7D32; border-radius: 8px; font-weight: bold; text-align: center; font-size: 13pt; } #printArea .pfoot { margin-top: 22px; text-align: center; } #printArea .pfoot img { height: 34px; } #printArea .pnote { font-size: 9.5pt; color: #555; margin-top: 10px; line-height: 1.5; } } /* ---------- Responsive --------------------------------------------------- */ /* reserve the widget's column so cards never slide underneath it */ @media (min-width: 1181px) { .toolbar > .wrap, main > .wrap, .foot > .wrap { padding-right: 300px; } } /* From 1400px up the widget sits further right than the reserved gutter, so the toolbar can borrow 80px back — that is what lets all six chips share one row. */ @media (min-width: 1400px) { .toolbar > .wrap { padding-right: 220px; } } @media (max-width: 1180px) { .widget { position: static; float: none; width: auto; max-width: var(--maxw); margin: 0 auto 20px; padding: 0; opacity: 1; visibility: visible; transform: none; pointer-events: auto; } body.embedded .widget { position: static; float: none; top: auto !important; margin: 0 auto 20px; } .widget .wlist { max-height: 260px; } } @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } .calc { padding: 18px 14px; } } @media (max-width: 639px) { :root { --card-h: 324px; } /* tallest measured front face: 312px @390 */ body { font-size: 15px; } .hero { padding: 22px 0 26px; } .logo-pill img { height: 38px; } .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .face { padding: 11px 10px 10px; } .card-head { padding-inline-end: 0; margin-top: 26px; } .pick { inset-inline-end: 6px; top: 6px; } .card-title { font-size: 15px; } .card-desc { font-size: 12.5px; } /* stack: search on top, chip bar below */ .filters-row { flex-direction: column; align-items: stretch; } .search { flex: 0 0 auto; width: 100%; max-width: none; } .chips { order: 0; } .cards2 { grid-template-columns: 1fr; } .calc-actions .btn { width: 100%; } /* the widget overlaps content inside the host iframe at this width */ .widget { display: none; } /* ...so the bottom bar becomes the only way into the full calculator */ .mobile-calc-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #00897B; color: #fff; padding: 10px 16px; align-items: center; justify-content: space-between; z-index: 200; box-shadow: 0 -2px 8px rgba(0,0,0,.15); } .mobile-calc-summary { font-size: .85rem; } .mobile-calc-btn { background: #fff; color: #00897B; border: none; border-radius: 6px; padding: 6px 14px; font-size: .85rem; font-weight: 700; cursor: pointer; } /* keep the bar from covering the end of the page */ body { padding-bottom: 56px; } /* overlay panel: edge to edge, still slides up from the bottom */ .calc-panel { width: 100%; max-width: none; margin: 0; max-height: 92vh; } /* purchase button drops below the box, centred on its own row */ .family-block { flex-direction: column; gap: 10px; } .family-block .family-buy { align-self: center; padding: 11px 20px; font-size: 15px; } .family-row { gap: 8px; padding: 10px 12px; } .steppers { width: 100%; } .stepper { flex: 1 1 100%; justify-content: space-between; } /* full-width steppers on mobile — no need for the desktop compaction */ .family-row .steppers { gap: 8px; } .family-row .stepper { gap: 6px; padding: 4px 6px 4px 4px; } .family-row .stepper button { width: 30px; height: 30px; font-size: 18px; } .family-row .stepper output { min-width: 26px; font-size: 16px; } .family-row .stepper .lbl { font-size: 13px; padding: 0 8px; } .result .line { font-size: 14.5px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }