/* ============================================================ Dante cart / checkout — VWA overrides ============================================================ Dante renders the whole cart, delegate-details and payment flow itself into
and loads its own Content/CSS/Site/client.css at runtime. We cannot change that markup — only its presentation. SPECIFICITY NOTE: Dante appends client.css to when dante.initialise() runs, so it lands AFTER this file in document order. An equal-specificity rule would lose on source order, so every override here is prefixed with `body` to win on specificity instead of position. That is enough for Dante's single-class rules (`#dante .button-info`, 1,1,0), but NOT for the two families below, which is why the first pass silently had no effect on them: - `#dante table.details thead th` etc. are 1,2,3. A `body #dante table tr` selector is only 1,1,4 and loses. Table rules here therefore name `.details` too. - `#dante .foreground-light { color: #fff !important }` can only be beaten by an !important of higher specificity. The clear-cart rule below is the one place that needs it. Class → control mapping. Dante's cart view styles its buttons with the `background-*` / `foreground-*` utilities, NOT the `button-*` variants, so both families are covered — that is why Checkout stayed blue and Apply stayed black after the first pass. .button-info / .background-info → Checkout (their blue) .button-dark / .background-dark → Apply voucher (their black) .background-grey → Clear cart (their grey slab) table.details → the cart line-item table .tile-container → the white card panels ============================================================ */ /* ------------------------------------------------------------------ Design tokens. This file is copied verbatim from the Astro build, where these come from course-page-ux.css. The current site has no :root token layer, so they are declared here. Values are the 2026 design system as signed off — change them there and here together. ------------------------------------------------------------------ */ :root { --vwa-green: #4a8226; --vwa-green-dark: #3d6b1e; --vwa-green-light: #eef6e0; --cta: var(--vwa-green); --cta-hover: var(--vwa-green-dark); --cta-ink: #ffffff; --theme-ink: #2f5518; --ink: #1a1e1b; --ink-2: #2d322f; --ink-3: #4a4f4b; --muted: #6b716d; --line: #e6e6e3; --paper-2: #f5f3ee; --haccp-blue-dark: #154d75; --haccp-blue-light: #e8f3fa; --ethical-red: #8b2c2a; --ethical-red-dark: #6e2220; --ethical-red-light: #f8e8e7; } /* ---- Card panels ---------------------------------------------------- */ body #dante .tile-container { background-color: #fff; border: 1px solid var(--line); border-radius: 8px; } body #dante .tile-title, body #dante .tile-header { font-family: 'Poppins', sans-serif; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-transform: none; } body #dante .tile-divider { border-color: var(--line); } /* ---- Typography ----------------------------------------------------- */ body #dante, body #dante * { font-family: 'Poppins', sans-serif; } body #dante { font-size: 15px; line-height: 1.6; color: var(--ink-2); } /* Dante's utility font-size ramp runs small; lift the body copy so the cart is readable without pushing the layout around. */ body #dante .fs85, body #dante .fs95 { font-size: 14px; } body #dante .fs100 { font-size: 15px; } body #dante .fs110, body #dante .fs120 { font-size: 17px; } body #dante .fs150 { font-size: 21px; } body #dante .fs180, body #dante .fs200 { font-size: 26px; } /* ---- Line-item table ------------------------------------------------ */ body #dante .table-data { font-size: 15px; } body #dante thead, body #dante .table-data:before { font-weight: 500; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; } body #dante table.details tr { border-bottom: 1px solid var(--line); } /* The rule under the column headings. Dante hardcodes it to their teal #00a098, which is the only off-brand colour on the checkout page. */ body #dante table.details thead th { background-color: transparent; border-bottom-color: var(--line); } body #dante table.details td, body #dante table.details th { padding-top: 14px; padding-bottom: 14px; } /* Dante zebra-stripes rows; a hairline rule reads calmer. */ body #dante table.details tbody tr:nth-of-type(2n+1), body #dante table.details tbody tr:nth-of-type(2n+2) { background-color: transparent; } /* Their hover is rgba(0,0,0,0.35) with white text — far too heavy for a two-line cart. */ body #dante table.details tbody tr:hover { background-color: var(--paper-2); color: var(--ink); } /* ---- Buttons -------------------------------------------------------- */ body #dante .button { font-family: 'Poppins', sans-serif; font-weight: 500; border-radius: 6px; letter-spacing: 0; text-transform: none; } /* Primary action (Checkout / Continue / Pay) — the same CTA green as every Book button on the site, never Dante's blue. Left alone deliberately: the bare `.button-command`, which is also the ✕ / confirm control in their modals, not a primary action. */ body #dante .button-info, body #dante .button.background-info, body #dante .button-command.button-info { background-color: var(--cta); color: var(--cta-ink) !important; } body #dante .button-info:hover, body #dante .button.background-info:hover, body #dante .button-command.button-info:hover { background-color: var(--cta-hover); color: var(--cta-ink) !important; } /* Apply voucher — quiet, paired with the input, not a black slab. */ body #dante .button-dark, body #dante .button.background-dark { background-color: var(--theme-ink, var(--ink)); color: #fff !important; } body #dante .button-dark:hover, body #dante .button.background-dark:hover { background-color: var(--ink); } /* Clear cart — a destructive secondary action; ghost it so it stops competing with Checkout for attention (a brief complaint about the old basket). The !important is not optional: Dante ships this button with `.foreground-light { color: #fff !important }`, which on a ghosted background rendered the label invisible — the client's "can't read the clear cart button". */ body #dante .background-grey, body #dante .button.background-grey { background-color: transparent; color: var(--ink-3) !important; border: 1px solid var(--line); } body #dante .background-grey:hover, body #dante .button.background-grey:hover { background-color: var(--paper-2); color: var(--ethical-red) !important; border-color: var(--ethical-red); } body #dante .button-ok, body #dante .button.background-ok { background-color: var(--cta); color: var(--cta-ink) !important; } body #dante .button-hazard, body #dante .button.background-hazard { background-color: var(--ethical-red); color: #fff !important; } /* Ghost buttons — the cart's quantity +/- and anything else Dante renders as `.button.background-transparent`. Dante gives them no colour of their own, so they inherited this site's global `.button { color: #fff }` from style1.css: white glyphs on a transparent background over a white cart, i.e. invisible. A generic class name shared by two systems, not a Dante bug. (1,3,0) beats that (0,1,0) without needing !important. */ body #dante .button.background-transparent { color: var(--ink-3); } body #dante .button.background-transparent:hover, body #dante .button.background-transparent:focus { color: var(--cta); } /* Dante marks these glyphs `fa fa-minus` / `fa fa-plus`, FA4 syntax pointing at the family name "FontAwesome". This site ships only the Duotone and Brands FA6 faces — no Solid — so U+F068 had no font to render in and came out as tofu. fa-plus survived only because FA6 maps it to a literal '+'. Duotone cannot stand in: it needs paired ::before/::after layers, and forcing the family alone renders nothing at all. So draw both in Poppins, which is already loaded, and depend on no icon font here. */ body #dante .fa-minus::before, body #dante .fa-plus::before { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; line-height: 1; } body #dante .fa-minus::before { content: "\2212"; } /* U+2212, matches the + */ body #dante .fa-plus::before { content: "+"; } /* Optional-product stepper (Lead Auditor accommodation, the L4 exam choice). Dante renders it as bare `.button.button-small` — no background-transparent — inside a row pinned to 24.5px, so it inherited the CTA fill and outgrew its row: the count wrapped under the price (client, 2026-09-14). Draw it as the same ghost stepper the course row uses, and let the row take its height. */ body #dante [data-productid] .flex-end[style*="height"] { height: auto !important; align-items: center; } body #dante [data-productid] .button-small { background: transparent !important; border: 0; padding: 0 8px; height: 32px; color: var(--ink-3); } body #dante [data-productid] .button-small:hover, body #dante [data-productid] .button-small:focus { color: var(--cta); } body #dante [data-productid] .total { padding-top: 4px; } /* Comfortable hit targets — Dante's standard button is 31px tall. */ body #dante .button-standard, body #dante .button-medium { height: 44px; padding: 0 20px; } body #dante .button-large { height: 48px; border-radius: 6px; } /* Voucher code: the field and Apply are one control, so they share a height and the pair carries the rounding — left on the input, right on the button. Dante sets `height: 43px` on the input and `border-radius: 0` on the button inline, and our own .button-large rule made the button 48px against a 44px field, which is what left it looking deeper and square against a rounded edge. Inline styles need !important; the heights do not. */ body #dante #vouchercodeform input[type=text] { height: 44px !important; border: 1px solid var(--line) !important; border-right: 0 !important; border-radius: 6px 0 0 6px; } body #dante #vouchercodeform .button { height: 44px; width: auto; padding: 0 24px; border-radius: 0 6px 6px 0 !important; white-space: nowrap; } /* ---- Form fields ---------------------------------------------------- */ body #dante input[type=text], body #dante input[type=email], body #dante input[type=password], body #dante input[type=number], body #dante textarea, body #dante .combobox { min-height: 44px; border: 1px solid var(--line); border-radius: 6px; font-family: 'Poppins', sans-serif; font-size: 15px; color: var(--ink); } body #dante input[type=text]:focus, body #dante input[type=email]:focus, body #dante input[type=password]:focus, body #dante input[type=number]:focus, body #dante textarea:focus { border-color: var(--cta); outline: 2px solid var(--cta); outline-offset: 1px; } body #dante label { font-size: 13.5px; font-weight: 500; color: var(--ink-3); } /* ---- Notices -------------------------------------------------------- */ body #dante .note { border-radius: 8px; font-size: 14.5px; } body #dante .note-ok, body #dante .note-background-ok { background-color: var(--vwa-green-light); color: var(--vwa-green-dark); } body #dante .note-hazard, body #dante .note-background-hazard { background-color: var(--ethical-red-light); color: var(--ethical-red-dark); } body #dante .note-info, body #dante .note-background-info { background-color: var(--haccp-blue-light); color: var(--haccp-blue-dark); } /* ---- Delegate details accordion ------------------------------------- */ body #dante .delegate-accordion { border: 1px solid var(--line); border-radius: 8px; } body #dante .delegate-accordion-header { font-weight: 500; color: var(--ink); } /* ---- Modals --------------------------------------------------------- */ body .dante-modal-container { border-radius: 10px; } body .dante-modal-header, body .dante-modal-title { font-family: 'Poppins', sans-serif; font-weight: 500; color: var(--ink); } /* ---- Mobile --------------------------------------------------------- */ @media (max-width: 768px) { body #dante { font-size: 14.5px; } body #dante .button-standard, body #dante .button-medium, body #dante .button-large { width: 100%; } }