/*! QC ROI Calculator styles — built 2026-09-08 * Source of truth is src/. Do not edit assets/ by hand — run `node build.js`. */ /*! * QC Verification Value Calculator — styles * ============================================================================= * Every rule is scoped to .qcvvc (the calculator) or .qcvvc-ovl (the capture * modal, which is appended to so it cannot be clipped). Every custom * property is namespaced --vvc-*. Nothing is declared on :root and there are no * bare element selectors, so styles neither leak into nor inherit from the host * theme. * * Every internal class carries a vvc- prefix. That is deliberate: WordPress and * Elementor ship broad utility class names, and an unprefixed `.panel` or * `.grid` under `.qcvvc` would tie with a theme's own `.elementor .panel` on * specificity and lose on source order. * * Rebrand note (Sennep / Webflow, Dec 2026): everything brand-specific is in * the single token block below. Re-skinning should be a token swap. * =========================================================================== */ /* ============================================================================= 1. TOKENS — the whole brand surface. §11 Colours are the exact values from Elementor > Site Settings > Global Colours. ========================================================================== */ .qcvvc, .qcvvc-ovl { /* ---- type ---- [OPEN-7] Families still unconfirmed — the Global Fonts screenshot showed the preview canvas rather than the panel naming the families, so this is a neutral-grotesque placeholder. Confirm Primary/Secondary/Text/Accent and change these two lines; nothing else depends on them. */ --vvc-font-display: 'Inter', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif; --vvc-font-ui: 'Inter', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif; /* ---- system colours ---- */ --vvc-turquoise: #3DA5AA; /* results panel, selected options, eyebrows */ --vvc-prussian: #28465A; /* nav, secondary button border */ --vvc-prussian-dark: #234155; /* headings, figures, body ink */ --vvc-warm-grey: #F5F5F0; /* inputs panel background */ /* ---- custom colours ---- */ --vvc-orange: #FF914D; /* PRIMARY CTA fill */ --vvc-white: #FFFFFF; /* ---- derived (not in the palette — kept together so a rebrand is contained) ---- */ --vvc-turquoise-dark: #2F878B; /* hover, small text needing contrast on white */ --vvc-turquoise-tint: #ECF6F6; /* active chips */ --vvc-orange-dark: #E87833; /* primary CTA hover */ --vvc-orange-tint: #FFF2E8; /* 'Identified early' card fill */ --vvc-orange-ink: #B85E1C; /* text on orange tint (#FF914D fails as text) */ --vvc-body: #5A7180; /* body copy */ --vvc-muted: #7E929E; /* small print and units */ --vvc-line: rgba(35, 65, 85, .12); /* borders */ --vvc-line-2: rgba(35, 65, 85, .22); /* input borders */ --vvc-green: #2E8B63; /* compliance card — NOT in the brand palette, */ --vvc-green-soft: #EAF4EF; /* flagged for design sign-off */ --vvc-ink: var(--vvc-prussian-dark); /* ---- shape ---- */ --vvc-r: 14px; /* cards */ --vvc-r-lg: 18px; /* panels */ --vvc-r-input: 10px; --vvc-pill: 999px; /* ---- layout ---- */ --vvc-col: 390px; /* inputs column max width */ --vvc-gap: 26px; --vvc-sticky-top: 120px; /* clears the live site's sticky nav + announcement bar */ } /* ============================================================================= 2. HOST DEFENCE Elementor and WordPress themes apply broad element selectors (button, input, select, details, summary). Neutralise them inside our scope before styling. !important policy — deliberately narrow. Tier 1 below is ordinary neutralisation and carries no !important: our scoped selectors already out-specify a theme's bare element rules. Tier 2 covers the interactive controls only (button, input, select, summary), because page builders and form plugins do sometimes ship `button { ... !important }`. Where Tier 2 applies, the matching component rules in sections 4, 6 and 8 must also carry !important; they out-specify this reset, so the cascade still resolves in our favour. Values still come from the tokens, so a rebrand is unaffected. Do not spread !important beyond these controls. ========================================================================== */ .qcvvc, .qcvvc-ovl { font-family: var(--vvc-font-ui); color: var(--vvc-ink); line-height: 1.55; font-size: 16px; font-weight: 400; text-align: left; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; } .qcvvc *, .qcvvc *::before, .qcvvc *::after, .qcvvc-ovl *, .qcvvc-ovl *::before, .qcvvc-ovl *::after { box-sizing: border-box; } /* ---- Tier 1: structural elements ---- */ .qcvvc div, .qcvvc section, .qcvvc span, .qcvvc label, .qcvvc p, .qcvvc h2, .qcvvc h3, .qcvvc ul, .qcvvc li, .qcvvc details, .qcvvc-ovl div, .qcvvc-ovl span, .qcvvc-ovl label, .qcvvc-ovl p, .qcvvc-ovl h2 { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; text-align: inherit; float: none; width: auto; min-width: 0; } .qcvvc a, .qcvvc-ovl a { text-decoration: none; box-shadow: none; background: none; } /* ---- Tier 2: interactive controls ---- */ .qcvvc button, .qcvvc input, .qcvvc select, .qcvvc summary, .qcvvc-ovl button, .qcvvc-ovl input { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: 1.55 !important; letter-spacing: normal !important; text-transform: none !important; text-shadow: none !important; text-align: left !important; color: inherit !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline-offset: 0; min-width: 0 !important; max-width: none !important; width: auto !important; height: auto !important; float: none !important; text-decoration: none !important; -webkit-appearance: none !important; appearance: none !important; transform: none !important; } .qcvvc details, .qcvvc summary { display: block; } .qcvvc summary { list-style: none !important; } .qcvvc summary::-webkit-details-marker { display: none; } .qcvvc summary::marker { content: ""; } /* Themes frequently force `p { display: block }`, which beats the [hidden] attribute. Restore it. */ .qcvvc [hidden], .qcvvc-ovl [hidden] { display: none !important; } /* Screen-reader-only headings: the host page owns the

, but the component still needs a semantic outline starting at

. / .qcvvc .vvc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } / ============================================================================= 3. LAYOUT — §6 ========================================================================== / .qcvvc .vvc-grid { display: grid; grid-template-columns: minmax(0, var(--vvc-col)) minmax(0, 1fr); gap: var(--vvc-gap); align-items: start; } @media (max-width: 980px) { .qcvvc .vvc-grid { grid-template-columns: 1fr; } } .qcvvc .vvc-panel { background: var(--vvc-warm-grey); border: 1px solid var(--vvc-line); border-radius: var(--vvc-r-lg); padding: 26px; } @media (min-width: 981px) { .qcvvc .vvc-sticky { position: sticky; top: var(--vvc-sticky-top); } } @media (max-width: 420px) { .qcvvc .vvc-panel { padding: 18px; } } / ============================================================================= 4. INPUTS ========================================================================== / .qcvvc .vvc-fld { margin-bottom: 22px; } .qcvvc .vvc-fld:last-child { margin-bottom: 0; } .qcvvc .vvc-lab { display: flex; align-items: baseline; gap: 9px; font-size: 15px; font-weight: 700; color: var(--vvc-ink); margin-bottom: 9px; letter-spacing: -.01em; } .qcvvc .vvc-n { font-size: 11px; font-weight: 700; color: var(--vvc-turquoise-dark); background: var(--vvc-white); border: 1px solid rgba(61, 165, 170, .35); border-radius: var(--vvc-pill); padding: 2px 9px; flex: none; position: relative; top: -1px; letter-spacing: .06em; } .qcvvc .vvc-hint { font-size: 13.5px; color: var(--vvc-body); margin: -4px 0 10px; line-height: 1.5; } .qcvvc .vvc-select, .qcvvc .vvc-input { width: 100% !important; padding: 12px 14px !important; border: 1px solid var(--vvc-line-2) !important; border-radius: var(--vvc-r-input) !important; font-size: 16px !important; / 16px prevents iOS zoom-on-focus / font-weight: 600 !important; color: var(--vvc-ink) !important; background: var(--vvc-white) !important; letter-spacing: -.01em !important; min-height: 46px !important; } .qcvvc .vvc-select { cursor: pointer; padding-right: 36px !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' stroke='%235C7A88' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 13px center !important; background-size: 12px !important; background-color: var(--vvc-white) !important; } .qcvvc .vvc-select:focus-visible, .qcvvc .vvc-input:focus-visible { outline: 2px solid var(--vvc-turquoise); outline-offset: 1px; border-color: var(--vvc-turquoise); } .qcvvc .vvc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .qcvvc .vvc-volcol { background: var(--vvc-white); border: 1px solid var(--vvc-line); border-radius: 12px; padding: 13px; min-width: 0; } / Tighter than the full-width inputs, but still on the 46px minimum target. / .qcvvc .vvc-volcol .vvc-input { padding: 10px 11px !important; font-size: 15px !important; min-height: 46px !important; } @media (max-width: 420px) { .qcvvc .vvc-volcol { padding: 10px; } } .qcvvc .vvc-mini { font-size: 13px; font-weight: 700; display: block; margin-bottom: 7px; color: var(--vvc-body); } .qcvvc .vvc-inrow { display: flex; align-items: center; gap: 9px; } .qcvvc .vvc-pfx { color: var(--vvc-body); font-weight: 700; font-size: 15px; flex: none; } / ---- option buttons (§4.2, §4.3) ---- / .qcvvc .vvc-opts { display: grid; gap: 8px; } .qcvvc .vvc-opt { display: block; width: 100% !important; text-align: left !important; background: var(--vvc-white) !important; border: 1px solid var(--vvc-line-2) !important; border-radius: 12px !important; padding: 13px 15px !important; cursor: pointer; min-height: 46px !important; transition: border-color .15s, background .15s, box-shadow .15s; } .qcvvc .vvc-opt:hover { border-color: var(--vvc-turquoise) !important; box-shadow: 0 4px 14px -10px rgba(29, 62, 82, .5); } .qcvvc .vvc-opt .vvc-t { font-size: 15px; font-weight: 700; display: block; letter-spacing: -.01em; color: var(--vvc-ink); } .qcvvc .vvc-opt .vvc-s { font-size: 13.5px; color: var(--vvc-body); display: block; margin-top: 2px; line-height: 1.45; } .qcvvc .vvc-opt[aria-pressed="true"] { background: var(--vvc-turquoise) !important; border-color: var(--vvc-turquoise) !important; } .qcvvc .vvc-opt[aria-pressed="true"] .vvc-t { color: var(--vvc-white); } .qcvvc .vvc-opt[aria-pressed="true"] .vvc-s { color: rgba(255, 255, 255, .86); } .qcvvc .vvc-opt:focus-visible { outline: 2px solid var(--vvc-turquoise-dark); outline-offset: 2px; } / ---- preset chips ---- / .qcvvc .vvc-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; } .qcvvc .vvc-chip { border: 1px solid var(--vvc-line-2) !important; background: var(--vvc-white) !important; border-radius: var(--vvc-pill) !important; padding: 6px 10px !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--vvc-body) !important; text-align: center !important; cursor: pointer; min-height: 30px; transition: border-color .15s, background .15s, color .15s; } .qcvvc .vvc-chip:hover { border-color: var(--vvc-turquoise) !important; color: var(--vvc-ink) !important; } .qcvvc .vvc-chip[aria-pressed="true"] { background: var(--vvc-turquoise-tint) !important; border-color: var(--vvc-turquoise) !important; color: var(--vvc-turquoise-dark) !important; } .qcvvc .vvc-chip:focus-visible { outline: 2px solid var(--vvc-turquoise); outline-offset: 2px; } / Touch devices get the full 46px target the brief requires; pointer devices keep the signed-off chip density. / @media (pointer: coarse) { .qcvvc .vvc-chip { min-height: 46px; padding: 12px 14px !important; } } .qcvvc .vvc-total { font-size: 13.5px; color: var(--vvc-body); margin-top: 11px; font-weight: 700; } / ---- assumptions disclosure ---- / .qcvvc .vvc-adv { margin-top: 22px; border-top: 1px solid var(--vvc-line); padding-top: 18px; } .qcvvc .vvc-adv > summary { cursor: pointer; font-size: 14px !important; font-weight: 700 !important; color: var(--vvc-turquoise-dark) !important; list-style: none !important; display: flex; align-items: center; gap: 8px; padding: 11px 0 !important; min-height: 46px; } .qcvvc .vvc-adv > summary::before { content: "+"; font-weight: 700; font-size: 16px; line-height: 1; } .qcvvc .vvc-adv[open] > summary::before { content: "\2013"; } .qcvvc .vvc-adv > summary:focus-visible { outline: 2px solid var(--vvc-turquoise); outline-offset: 2px; border-radius: 6px; } .qcvvc .vvc-advbody { margin-top: 13px; } .qcvvc .vvc-locked { background: var(--vvc-white); border: 1px solid var(--vvc-line); border-radius: 12px; padding: 14px 15px; margin-top: 14px; font-size: 13px; color: var(--vvc-body); line-height: 1.55; } .qcvvc .vvc-locked b { color: var(--vvc-ink); font-weight: 700; } / ============================================================================= 5. RESULTS — §6 ========================================================================== / .qcvvc .vvc-hero { background: var(--vvc-turquoise); color: var(--vvc-white); border-radius: var(--vvc-r-lg); padding: 32px 30px; } @media (max-width: 420px) { .qcvvc .vvc-hero { padding: 24px 20px; } } .qcvvc .vvc-kick { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .28); } .qcvvc .vvc-big { font-family: var(--vvc-font-display); font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--vvc-white); overflow-wrap: anywhere; } .qcvvc .vvc-bsub { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .94); margin-top: 12px; } .qcvvc .vvc-bfoot { font-size: 15px; color: rgba(255, 255, 255, .85); margin-top: 12px; max-width: 52ch; line-height: 1.55; } .qcvvc .vvc-cons { display: inline-block; margin-top: 20px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); border-radius: var(--vvc-pill); padding: 8px 16px; font-size: 13.5px; color: var(--vvc-white); font-weight: 700; } .qcvvc .vvc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } @media (max-width: 680px) { .qcvvc .vvc-cards { grid-template-columns: 1fr; } } .qcvvc .vvc-card { background: var(--vvc-white); border: 1px solid var(--vvc-line); border-radius: var(--vvc-r); padding: 22px 24px; min-width: 0; } @media (max-width: 420px) { .qcvvc .vvc-card { padding: 18px 18px; } } .qcvvc .vvc-card .vvc-cap { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vvc-turquoise-dark); margin-bottom: 12px; } .qcvvc .vvc-card .vvc-val { font-family: var(--vvc-font-display); font-size: 2rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.02; font-variant-numeric: tabular-nums; color: var(--vvc-ink); overflow-wrap: anywhere; } .qcvvc .vvc-card .vvc-unit { font-family: var(--vvc-font-ui); font-size: 14px; font-weight: 700; color: var(--vvc-muted); letter-spacing: 0; margin-left: 2px; / the unit string carries its own leading space, for SRs / } .qcvvc .vvc-card .vvc-unit:empty { margin-left: 0; } .qcvvc .vvc-card .vvc-desc { font-size: 14.5px; color: var(--vvc-body); margin-top: 10px; line-height: 1.55; } / Amber card. #B85E1C on #FFF2E8 is the tightest pairing in the component (contrast 4.9:1) — do not lighten the ink. / .qcvvc .vvc-card.vvc-flag { background: var(--vvc-orange-tint); border-color: rgba(255, 145, 77, .35); } .qcvvc .vvc-card.vvc-flag .vvc-cap, .qcvvc .vvc-card.vvc-flag .vvc-val { color: var(--vvc-orange-ink); } / Green compliance card. #2E8B63 on #EAF4EF = 4.6:1. / .qcvvc .vvc-card.vvc-green { background: var(--vvc-green-soft); border-color: rgba(46, 139, 99, .25); } .qcvvc .vvc-card.vvc-green .vvc-cap, .qcvvc .vvc-card.vvc-green .vvc-val { color: var(--vvc-green); } .qcvvc .vvc-card.vvc-green .vvc-unit { color: var(--vvc-green); opacity: .75; } / ============================================================================= 6. ACTIONS — full pills; primary is orange, the site's action colour. §11 ========================================================================== / .qcvvc .vvc-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; align-items: center; } .qcvvc .vvc-btn { border: 2px solid transparent !important; cursor: pointer; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; text-align: center !important; gap: 9px; font-weight: 700 !important; font-size: 16px !important; padding: 14px 30px !important; border-radius: var(--vvc-pill) !important; min-height: 50px; width: auto !important; transition: background .15s, border-color .15s; } .qcvvc .vvc-btn-p { background: var(--vvc-orange) !important; color: var(--vvc-white) !important; } .qcvvc .vvc-btn-p:hover { background: var(--vvc-orange-dark) !important; color: var(--vvc-white) !important; } .qcvvc .vvc-btn-g { background: var(--vvc-white) !important; border-color: var(--vvc-prussian) !important; color: var(--vvc-prussian) !important; } .qcvvc .vvc-btn-g:hover { background: var(--vvc-warm-grey) !important; } .qcvvc .vvc-btn:focus-visible { outline: 2px solid var(--vvc-turquoise-dark); outline-offset: 3px; } .qcvvc .vvc-ok { font-size: 14px; font-weight: 700; color: var(--vvc-green); } / ============================================================================= 7. METHODOLOGY — native
, no custom JS accordion. §12 ========================================================================== / .qcvvc .vvc-foot { margin-top: 30px; font-size: 14px; color: var(--vvc-body); max-width: 84ch; line-height: 1.6; } .qcvvc .vvc-foottitle { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vvc-turquoise-dark); margin-bottom: 10px; } .qcvvc .vvc-facc { border-top: 1px solid var(--vvc-line); } .qcvvc .vvc-facc:last-of-type { border-bottom: 1px solid var(--vvc-line); } .qcvvc .vvc-facc > summary { cursor: pointer; list-style: none !important; display: flex; align-items: center; gap: 10px; padding: 15px 2px !important; min-height: 46px; font-size: 15px !important; font-weight: 700 !important; color: var(--vvc-ink) !important; } .qcvvc .vvc-facc > summary::before { content: "+"; font-weight: 700; color: var(--vvc-turquoise); font-size: 17px; width: 12px; flex: none; text-align: center; } .qcvvc .vvc-facc[open] > summary::before { content: "\2013"; } .qcvvc .vvc-facc > summary:hover { color: var(--vvc-turquoise-dark); } .qcvvc .vvc-facc > summary:focus-visible { outline: 2px solid var(--vvc-turquoise); outline-offset: -2px; border-radius: 6px; } .qcvvc .vvc-faccbody { padding: 0 2px 16px 22px; } .qcvvc .vvc-faccbody p { margin-bottom: 10px; } .qcvvc .vvc-faccbody p:last-child { margin-bottom: 0; } / ============================================================================= 8. CAPTURE MODAL — §9 Appended to , so it carries its own copy of the token block (top of file) and cannot be clipped by the embed container. ========================================================================== / .qcvvc-ovl { position: fixed; inset: 0; background: rgba(29, 62, 82, .6); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 999999; / above Elementor sticky headers and popups / } .qcvvc-ovl.is-open { display: flex; } .qcvvc-ovl .vvc-modal { background: var(--vvc-white); border-radius: var(--vvc-r-lg); box-shadow: 0 40px 80px -30px rgba(29, 62, 82, .5); max-width: 430px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; padding: 32px; color: var(--vvc-ink); } @media (max-width: 420px) { .qcvvc-ovl .vvc-modal { padding: 22px; } } .qcvvc-ovl .vvc-mtitle { font-family: var(--vvc-font-display); font-size: 1.45rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -.02em; line-height: 1.15; } .qcvvc-ovl .vvc-msub { font-size: 15px; color: var(--vvc-body); margin-bottom: 22px; line-height: 1.55; } .qcvvc-ovl .vvc-fw { margin-bottom: 15px; } .qcvvc-ovl .vvc-fw label { font-size: 13.5px; font-weight: 700; display: block; margin-bottom: 6px; } .qcvvc-ovl .vvc-fw input { width: 100% !important; padding: 12px 14px !important; border: 1px solid var(--vvc-line-2) !important; border-radius: var(--vvc-r-input) !important; font-size: 16px !important; min-height: 46px !important; color: var(--vvc-ink) !important; background: var(--vvc-white) !important; } .qcvvc-ovl .vvc-fw input:focus-visible { outline: 2px solid var(--vvc-turquoise); outline-offset: 1px; border-color: var(--vvc-turquoise); } .qcvvc-ovl .vvc-err { font-size: 13px; color: var(--vvc-orange-ink); font-weight: 700; margin-top: 5px; } .qcvvc-ovl .vvc-mrow { display: flex; gap: 10px; margin-top: 22px; justify-content: flex-end; } .qcvvc-ovl .vvc-btn { border: 2px solid transparent !important; cursor: pointer; font-weight: 700 !important; font-size: 15px !important; padding: 12px 24px !important; border-radius: var(--vvc-pill) !important; text-align: center !important; min-height: 46px; width: auto !important; } .qcvvc-ovl .vvc-btn-p { background: var(--vvc-orange) !important; color: var(--vvc-white) !important; } .qcvvc-ovl .vvc-btn-p:hover { background: var(--vvc-orange-dark) !important; } .qcvvc-ovl .vvc-btn-g { background: var(--vvc-white) !important; border-color: var(--vvc-prussian) !important; color: var(--vvc-prussian) !important; } .qcvvc-ovl .vvc-btn-g:hover { background: var(--vvc-warm-grey) !important; } .qcvvc-ovl .vvc-btn:focus-visible { outline: 2px solid var(--vvc-turquoise-dark); outline-offset: 3px; } .qcvvc-ovl .vvc-priv { font-size: 13px; color: var(--vvc-muted); margin-top: 18px; line-height: 1.5; } .qcvvc-ovl .vvc-priv a { color: var(--vvc-turquoise-dark); text-decoration: underline; } / ============================================================================= 9. PREFERENCES AND PRINT ========================================================================== / @media (prefers-reduced-motion: reduce) { .qcvvc , .qcvvc-ovl * { transition: none !important; animation: none !important; } .qcvvc .vvc-sticky { position: static; } } @media print { .qcvvc .vvc-acts, .qcvvc .vvc-chips, .qcvvc-ovl { display: none !important; } .qcvvc .vvc-grid { grid-template-columns: 1fr; } .qcvvc .vvc-sticky { position: static; } .qcvvc .vvc-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .qcvvc .vvc-facc > .vvc-faccbody { display: block !important; } }