/* ========================================================================== Avyukt Dental Rate List — styles Namespaced with "avdrl-" to avoid clashing with your theme. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Open+Sans:wght@400;600;700&display=swap'); .avdrl-wrap, .avdrl-wrap * { box-sizing: border-box; } /* Full front-page background behind the rate card. Belt-and-braces: JS (print.js) also sets this on on load so it works in every browser, even ones without :has() support. */ body:has(.avdrl-wrap){ background-color: #fcf3e2; } :root{ --avdrl-wood-dark: #3b2314; --avdrl-wood-mid: #6e4426; --avdrl-wood-light: #a97a3f; --avdrl-gold-light: #f2c869; --avdrl-accent: #f3e3c3; --avdrl-row-alt: #faf3e6; --avdrl-border: #c8a06a; --avdrl-text: #2b1a0f; --avdrl-cat-text: #fff3d9; /* Single variable holding the FULL, multi-layer page background so it can never accidentally end up as an invalid (and therefore ignored) "background" declaration. */ --avdrl-page-bg: linear-gradient(rgba(255,247,232,0.92), rgba(255,247,232,0.92)), linear-gradient(135deg, #efe1c4, #d8c093 45%, #efe1c4); } /* ---- On-screen wrapper -------------------------------------------------- */ .avdrl-wrap{ font-family: 'Open Sans', Arial, sans-serif; color: var(--avdrl-text); max-width: 960px; margin: 24px auto; padding: 0 12px; } .avdrl-instructions{ background: #fff8e6; border: 1px solid #e7cd8a; border-left: 4px solid var(--avdrl-wood-mid); color: var(--avdrl-text); font-size: 13.5px; line-height: 1.5; padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; } /* ---- The printable card ------------------------------------------------- On screen this simply previews at an A4-like proportion. In print it becomes the literal page (see @media print below). No outer border, no divider under the logo — the wood/parchment background itself is the page. */ .avdrl-page{ position: relative; width: 100%; padding: 14px 18px; background: var(--avdrl-page-bg); box-shadow: 0 4px 24px rgba(0,0,0,.25); /* on-screen depth only, never printed */ overflow: hidden; } .avdrl-header{ text-align: center; padding-bottom: 2px; margin-bottom: 6px; } .avdrl-logo{ max-width: 35%; width: 100%; height: auto; } .avdrl-note-bar{ background: var(--avdrl-accent); color: var(--avdrl-wood-dark); text-align: center; font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; padding: 4px 8px; margin-bottom: 8px; border-radius: 3px; border: 1px solid var(--avdrl-border); text-transform: uppercase; letter-spacing: .3px; } /* Two-column table grid, with a little breathing room between the individual treatment tables and between the two columns. */ .avdrl-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-bottom: 8px; } .avdrl-section{ margin-bottom: 18px; break-inside: avoid; } .avdrl-section:last-child{ margin-bottom: 0; } .avdrl-section-title{ background: linear-gradient(90deg, var(--avdrl-wood-dark), var(--avdrl-wood-mid)); color: var(--avdrl-cat-text); font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; padding: 4px 8px; text-transform: uppercase; letter-spacing: .5px; border-radius: 2px 2px 0 0; } .avdrl-section table{ width: 100%; border-collapse: collapse; border: 1px solid var(--avdrl-border); border-top: none; background: #fffaf0; } .avdrl-section tr:nth-child(even){ background: var(--avdrl-row-alt); } .avdrl-section tr:nth-child(odd){ background: #fffaf0; } .avdrl-section td{ padding: 3.5px 7px; font-family: 'Open Sans', Arial, sans-serif; font-size: 9.5px; line-height: 1.35; border-bottom: 1px solid var(--avdrl-border); vertical-align: middle; } .avdrl-section td:last-child{ text-align: right; font-weight: 700; color: var(--avdrl-wood-mid); white-space: nowrap; width: 36%; } .avdrl-sub{ font-size: 7.8px; font-weight: 400; } .avdrl-sub-hd td{ background: var(--avdrl-accent); font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 700; color: var(--avdrl-wood-dark); text-transform: uppercase; letter-spacing: .3px; } .avdrl-sub-hd td:last-child{ text-align: right; color: var(--avdrl-wood-dark); } .avdrl-note-row td{ font-size: 8.2px; color: #8a6a44; font-style: italic; background: #fdf6ea; } .avdrl-note-row td:last-child{ color: #8a6a44; font-weight: 400; } /* ---- Pricing notes ------------------------------------------------------- General terms shown once, above the footer. */ .avdrl-pricing-notes{ background: #fdf6ea; border: 1px solid var(--avdrl-border); border-radius: 3px; padding: 8px 12px; margin-bottom: 8px; } .avdrl-pricing-notes .avdrl-notes-title{ font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; color: var(--avdrl-wood-dark); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; } .avdrl-pricing-notes ul{ margin: 0; padding-left: 15px; color: #6b4e33; } .avdrl-pricing-notes li{ font-family: 'Open Sans', Arial, sans-serif; font-size: 8.8px; line-height: 1.45; font-style: italic; } /* Footer sits in normal document flow right after the pricing notes, so it always renders — nothing can push it off the visible page. */ .avdrl-footer-bar{ border: 2px solid var(--avdrl-wood-mid); border-radius: 4px; background: var(--avdrl-accent); color: var(--avdrl-wood-dark); text-align: center; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; padding: 5px 8px; text-transform: uppercase; letter-spacing: .3px; } .avdrl-copyright{ text-align: center; font-family: 'Open Sans', Arial, sans-serif; font-size: 9px; color: var(--avdrl-wood-light); margin-top: 4px; } /* ---- Floating Print / Save-as-PDF button --------------------------------- */ .avdrl-print-btn{ position: sticky; bottom: 18px; float: right; margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; background: var(--avdrl-wood-dark); color: var(--avdrl-gold-light); border: none; border-radius: 30px; padding: 12px 20px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .15s ease, background .15s ease; } .avdrl-print-btn:hover{ background: var(--avdrl-wood-mid); transform: translateY(-2px); } .avdrl-print-btn:disabled{ opacity: .7; cursor: wait; transform: none; } .avdrl-print-icon{ font-size: 17px; } @media (max-width: 700px){ .avdrl-page{ aspect-ratio: auto; } .avdrl-grid{ grid-template-columns: 1fr; } .avdrl-print-btn{ float: none; display: flex; justify-content: center; width: 100%; } } /* ========================================================================== PRINT — a true, full-bleed A4 sheet (background reaches every edge of the paper; content sized to land on a single page). ========================================================================== */ @media print{ @page{ size: A4 portrait; margin: 0; /* the 15px inset is done with padding below, inside the coloured page, so the background reaches the physical edges of the sheet. */ } html, body{ margin: 0 !important; padding: 0 !important; width: 210mm; background: var(--avdrl-page-bg) !important; } .avdrl-wrap{ max-width: none; margin: 0; padding: 0; } .avdrl-instructions, .avdrl-print-btn{ display: none !important; } .avdrl-page{ aspect-ratio: auto; width: 210mm; height: 297mm; margin: 0; padding: 15px 20px; box-shadow: none; overflow: hidden; page-break-after: avoid; } .avdrl-section{ break-inside: avoid; } }