/* ========================================================================== Bet Calculator Betmentor — print.css Two jobs: 1. Article/legal pages print as clean light documents. 2. The calculator's Print Result button injects #print-sheet into ; when present, every other top-level node is hidden so exactly one compact, colourful page prints — no site chrome, no blank pages. ========================================================================== */ /* The sheet is hidden on screen by main.css; the rules below reveal it for print only. A body class is used rather than :has() for wider support. */ @media print { /* Margen de pagina a cero para que la banda de cabecera llegue de verdad a los bordes del papel. El aire lateral lo pone el propio documento; con margenes negativos el navegador recorta lo que sale del area imprimible. */ @page { size: A4 portrait; margin: 0; } html, body { background: #fff !important; color: #101613 !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } /* the nav overlay lock must never leak into print */ body { position: static !important; } /* ------------------------------------------------------------------ CALCULATOR RESULT SHEET ------------------------------------------------------------------ */ body.printing-result > *:not(#print-sheet) { display: none !important; } /* La hoja ocupa todo el papel; la banda de cabecera va a sangre y el resto del contenido recibe su aire lateral por separado. */ #print-sheet { display: block !important; width: 100%; max-width: none; margin: 0; padding: 0 13mm 12mm; box-sizing: border-box; font-family: "Inter", "Segoe UI", system-ui, sans-serif; color: #101613; font-size: 10.5pt; line-height: 1.45; /* nothing after the sheet, so no trailing blank page */ page-break-after: avoid; break-after: avoid; } #print-sheet, #print-sheet * { box-sizing: border-box; } #print-sheet * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* ---- masthead: banda oscura a sangre, igual que la cabecera del sitio ---- El aire lateral lo pone el padding de la hoja; la banda lo anula con margenes negativos. Con width:100% + margenes las tablas se desbordaban por la derecha, por eso el aire va en el contenedor y no en los hijos. */ .ps-head { display: flex; align-items: center; justify-content: space-between; gap: 8mm; margin: 0 -13mm 9mm; padding: 7mm 13mm 6mm; background: #0F1815 !important; border-bottom: 2.5pt solid #23AE6D; } .ps-brand { display: flex; align-items: center; gap: 8pt; } /* en px para que coincida con el logotipo de la cabecera del sitio */ .ps-brand img { width: 155px; height: auto; display: block; } .ps-brand__name { display: flex; flex-direction: column; line-height: 1.1; font-family: "Sora", "Segoe UI", sans-serif; } .ps-brand__l1 { font-size: 12pt; font-weight: 700; color: #FFFFFF; } .ps-brand__l1 em { font-style: normal; color: #FFA800; } .ps-brand__l2 { font-size: 12pt; font-weight: 800; color: #3FD08A; } /* texto claro sobre la banda oscura */ .ps-meta { text-align: right; font-size: 9pt; color: #B7C8C0; } .ps-meta__date { font-weight: 700; color: #FFFFFF; font-size: 10.5pt; } .ps-title { font-family: "Sora", "Segoe UI", sans-serif; font-size: 16pt; font-weight: 800; color: #101613; margin: 0 0 10pt; letter-spacing: -.01em; } .ps-h2 { font-family: "Sora", "Segoe UI", sans-serif; font-size: 10.5pt; font-weight: 700; color: #18894F; text-transform: uppercase; letter-spacing: .09em; margin: 12pt 0 5pt; padding-bottom: 3pt; border-bottom: .8pt solid #D8E4DE; } /* ---- bet facts ---- */ /* minmax(0,…) — a bare 1fr refuses to shrink under its label and pushes the grid past the right margin. */ .ps-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6pt; margin-bottom: 4pt; } .ps-fact { background: #F2F8F5; border: .8pt solid #D8E4DE; border-left: 2.5pt solid #23AE6D; border-radius: 3pt; padding: 5pt 7pt; } .ps-fact--wide { grid-column: 1 / -1; border-left-color: #FFA800; background: #FFF8EA; border-color: #F0E0BE; } .ps-fact span { display: block; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .09em; color: #5A6B63; } .ps-fact strong { font-size: 10.5pt; color: #101613; font-weight: 700; } /* ---- tables ---- */ .ps-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; } .ps-table th { background: #0F1815; color: #fff; text-align: left; padding: 5pt 7pt; font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-family: "Sora", "Segoe UI", sans-serif; } .ps-table th:first-child { border-radius: 3pt 0 0 0; } .ps-table th:last-child { border-radius: 0 3pt 0 0; } .ps-table td { padding: 4.5pt 7pt; border-bottom: .6pt solid #E3EBE7; } .ps-table tbody tr:nth-child(even) td { background: #F7FAF9; } .ps-num { color: #5A6B63; width: 24pt; } .ps-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } .ps-tag { display: inline-block; padding: 1.5pt 6pt; border-radius: 20pt; font-size: 8pt; font-weight: 700; } .ps-tag--win { background: #DFF4E9; color: #14653C; border: .6pt solid #A6DDC2; } .ps-tag--place { background: #FFF1D6; color: #8A5A00; border: .6pt solid #F0D08A; } .ps-tag--lose { background: #FBE4E4; color: #8E2727; border: .6pt solid #EFBDBD; } .ps-table--bd tbody tr:nth-child(even) td { background: #fff; } .ps-table--bd td { border-bottom: .6pt dashed #DCE6E1; } .ps-total td { border-top: 1pt solid #101613; border-bottom: none; font-weight: 700; padding-top: 5pt; } /* ---- headline figures ---- */ .ps-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7pt; margin: 11pt 0 2pt; } .ps-result { border: 1pt solid #D8E4DE; border-radius: 4pt; padding: 8pt 9pt; text-align: center; background: #F7FAF9; } .ps-result span { display: block; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .1em; color: #5A6B63; margin-bottom: 2pt; } .ps-result strong { display: block; font-family: "Sora", "Segoe UI", sans-serif; font-size: 16pt; font-weight: 800; letter-spacing: -.02em; color: #101613; } .ps-result--returns { background: #EAF6F0; border-color: #A6DDC2; } .ps-result--returns strong { color: #14653C; } .ps-result--profit { background: #DFF4E9; border-color: #23AE6D; } .ps-result--profit strong { color: #14653C; } .ps-result--loss { background: #FBE4E4; border-color: #E08585; } .ps-result--loss strong { color: #8E2727; } /* ---- footer ---- */ .ps-foot { margin-top: 12pt; padding-top: 7pt; border-top: .8pt solid #D8E4DE; font-size: 8pt; color: #5A6B63; line-height: 1.5; } .ps-foot p { margin: 0 0 3pt; } .ps-foot strong { color: #8A5A00; } .ps-foot__url { font-weight: 700; color: #18894F; } /* keep related blocks together */ .ps-head, .ps-facts, .ps-results, .ps-foot, .ps-table { page-break-inside: avoid; break-inside: avoid; } /* ------------------------------------------------------------------ ORDINARY PAGE PRINTING (articles, legal, guides) ------------------------------------------------------------------ */ .site-header, .site-footer, .scroll-top, .nav__backdrop, .nav__panel, .progress, .cta, .related, .calc__actions, .blog-filter, .pagination, .hero__actions, .compat-strip, .carousel__controls { display: none !important; } /* Estas reglas son para imprimir paginas normales. Se excluyen de la hoja del calculador: su !important dejaba el encabezado de la tabla en gris oscuro sobre la banda oscura, es decir, ilegible. */ body:not(.printing-result) a { color: #101613 !important; text-decoration: underline; } body:not(.printing-result) :is(h1, h2, h3, h4) { color: #000 !important; } body:not(.printing-result) :is(p, li, td, th, .section__lead, .card__text) { color: #1B2320 !important; } .page-hero, .hero, .err, .section, .section--dark, .section--deep { background: #fff !important; color: #101613 !important; } .page-hero::before, .hero::before, .section--glow::before, .feature::after { display: none !important; } .page-hero__title, .hero__title, .hero__title .hero__title-sub { color: #000 !important; } .feature, .card, .step, .why, .benefit, .tip, .quote, .faq__item, .compat, .vs-card, .calc, .mini-list li, .compare-wrap { background: #fff !important; border: .8pt solid #BFCBC5 !important; box-shadow: none !important; color: #101613 !important; } .faq__item, .card, .feature { break-inside: avoid; } [data-reveal] { opacity: 1 !important; transform: none !important; } .split__media { position: static !important; } }