/* * Diploma Recognition customer-facing visual contract * Applied by locale-nav.css AFTER the landing, guide and legal page styles. * Keep dark-grey content, Caveat display typography and green interactive * accents consistent across all five public languages. * Transactional controls, warnings, form values and links retain legible sans. */ /* Self-hosted Caveat (audit L-07). SIL Open Font License 1.1 — see * assets/fonts/OFL.txt. Variable font covering weights 400-700, split into the * latin and latin-ext subsets. Serving it from our own origin means no request * to fonts.googleapis.com / fonts.gstatic.com before consent, and the CSP no * longer needs an exception for Google Fonts. * Source: Google Fonts (Caveat v23), https://fonts.google.com/specimen/Caveat */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/caveat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/caveat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --dr-ink: #58625e; --dr-secondary-ink: #64716a; --dr-green: #21845b; --dr-caveat: 'Caveat','Segoe Print',cursive; --dr-body: Inter,'Helvetica Neue',Arial,sans-serif; --ink: var(--dr-ink); --ink2: var(--dr-ink); --al-text: var(--dr-ink); --al-head: var(--dr-ink); --al-head-2: var(--dr-ink); --dr-body-copy: var(--dr-ink); --dr-text-dark: var(--dr-ink); --dr-heading-dark: var(--dr-ink); } html body { color: var(--dr-ink); } body :is(main,article,.sheet,.clause,.detail,.hero,.footer) { color: var(--dr-ink); } /* High-specificity brand-local rules override old black text declarations. * No blanket rule on span/a/strong: this keeps branded green action states * and inverse white text, including child spans in primary buttons. */ body :is(main,article,.sheet,.clause,.detail) :is( p,li,dt,dd,blockquote,address,label,legend,summary,figcaption,table,td,th ):not(.eyebrow):not(.label):not(.form-status):not(.error):not(.success) { color: var(--dr-ink) !important; } body :is(input:not([type=checkbox]):not([type=radio]),textarea,select,[contenteditable=true]) { color: var(--dr-ink) !important; } body :is(input,textarea)::placeholder {color:var(--dr-secondary-ink);} body :is(header,footer,.site-header,.site-nav,.links) :is( a:not(.button):not(.button-red):not(.button-dark):not(.nav-cta), small:not(.brandname small),p,li ):not(.dr-client-portal-button):not(.dr-client-portal-menu) { color: var(--dr-ink); } /* Display titles use Caveat, irrespective of whether the previous page uses * serif, Inter or Helvetica for headings. Reading copy in the hero * (.hero .lead / .hero-copy > p) is deliberately excluded: it is body text and * stays in the body sans (audit L-08). */ body :is(h1,h2), body :is(.form-title,.section-title,.section-subtitle,.page-title, .section-header > p,.eyebrow, .route-detail-head > span,.editorial-byline,.preview-label) { font-family: var(--dr-caveat) !important; font-weight: 600; letter-spacing: 0 !important; line-height: 1.14; text-transform: none; } body :is(h1,h2,h3,h4,h5,h6) {color:var(--dr-ink) !important;} body .eyebrow, body .preview-label { font-size: clamp(1.125rem,1.6vw,1.375rem); color: var(--dr-green) !important; } body :is(.section-header > p,.section-subtitle) { font-size: clamp(1.375rem,2.1vw,1.875rem) !important; color: var(--dr-ink) !important; line-height: 1.25; } /* The corporate wordmark remains green in every localized site header and footer. */ body :is(.site-header,.footer-top,header,.legal-wordmark) :is( .brandname,.brand-title,.legal-wordmark strong ), body header .brand,body .legal-wordmark strong { font-family: var(--dr-caveat) !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; color: var(--dr-green) !important; line-height: 1.08; } body :is(.site-header,.footer-top,header,.legal-wordmark) :is( .brandname small,.brand small,.legal-wordmark small ) { font-family: var(--dr-caveat) !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none !important; color: var(--dr-ink) !important; font-size: clamp(1rem,1.25vw,1.25rem); line-height: 1.2; } /* Preserve interactive green and white-on-green contrast. */ body :is(a:hover,a:focus-visible):not(.button):not(.nav-cta):not(.button-red) { color: #176a49; } body :is(.button-red,.button-dark,.nav-cta,.dr-client-portal-button) { color: #fff !important; } body :is(.button-red,.button-dark,.nav-cta,.dr-client-portal-button) :is(span,strong,small) { color: inherit; } /* Do not change document warnings, form success/error indicators or legal * hyperlinks: those are semantic, not the former generic black typography. */ @media(max-width:700px) { body :is(.section-header > p,.section-subtitle) { font-size: 1.375rem !important; } } /* Visually recognizable display style on legal/service subheadings that the * previous 14–18px serif sizing made appear almost like sans-serif. */ body main :is(.detail h2,.seo-detail-content h2,.section h2) { font-family: var(--dr-caveat) !important; font-size: clamp(1.75rem,2.8vw,2.25rem) !important; font-weight: 600 !important; line-height: 1.15; letter-spacing: 0 !important; color: var(--dr-ink) !important; } body :is(.site-header,.footer-top,header,.legal-wordmark) :is( .brandname small,.brand small,.legal-wordmark small ) { font-size: clamp(1.125rem,1.5vw,1.375rem) !important; } /* Typography hierarchy (owner correction): H1-H2 use the Caveat display face; H3 and below use the body sans (Arial/Helvetica), never Caveat. Strong-level headings such as the end-of-page CTA title follow the same rule. */ html body :is(h1, h2), body main :is(.detail h2,.seo-detail-content h2,.section h2) { font-family: var(--dr-caveat) !important; } html body :is(h3, h4, h5, h6) { font-family: Arial, Helvetica, sans-serif !important; } body main .end-cta strong { font-family: Arial, Helvetica, sans-serif !important; font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 600; line-height: 1.25; } /* L-08 — hero reading text is body copy, not display type. The hero intro paragraph and the "working languages" line stay in the body sans at a comfortable reading size (16-19px, line-height 1.7), so long de/fr sentences are no longer set in the handwritten face at 22-30px. Caveat remains on H1/H2, the eyebrow and the wordmark. */ body :is(.hero .lead, .hero-copy > p) { font-family: var(--dr-body) !important; font-size: clamp(1rem, 1.35vw, 1.1875rem) !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.7; color: var(--dr-ink) !important; } body .hero-copy > .working-languages { font-family: var(--dr-body) !important; font-size: clamp(0.8125rem, 0.95vw, 0.875rem) !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.5; color: var(--dr-ink) !important; } /* L-10 — WCAG 2.2 AA 2.5.8 target size (24 x 24 CSS px minimum). Independent controls (site navigation, breadcrumbs, footer links, service and route CTAs) get a real >=24px hit area via min-height/padding. Their visual position is unchanged; only the clickable box grows. */ body :is(.links,.site-nav) a:not(.button):not(.button-red):not(.button-dark):not(.nav-cta):not(.dr-client-portal-button) { min-height: 24px; padding-block: 2px; box-sizing: border-box; } body .service-footer a, body .route > a, body .route-detail-cta, body .breadcrumbs a { min-height: 24px; box-sizing: border-box; } body .footer-top a:not(.brand), body .footer-contact-group a, body .footer-row a, body footer > .shell > a, body footer .shell > a[data-dr-contract-kind] { min-height: 24px; box-sizing: border-box; } body .footer-contact-group a, body .footer-row a, body footer > .shell > a, body footer .shell > a[data-dr-contract-kind] { display: inline-flex; align-items: center; padding-block: 2px; } /* The injected service-conditions link follows the legal-identity line; keep a readable gap instead of touching the preceding text (footer L-10). */ body footer .shell > a[data-dr-contract-kind="service_conditions"] { margin-inline-start: .8em; } /* Consent-banner privacy link: a standalone control, so it also needs a 24px hit area. Styled here (not in ads-consent.css) to keep the L-04 component file untouched. */ body .dr-ads-consent > a { display: inline-flex; align-items: center; min-height: 24px; padding-block: 2px; box-sizing: border-box; } /* Keyboard-only skip link (.sr-only, visually hidden until focused) and links that live inside a sentence keep their natural inline flow and rely on the WCAG 2.2 2.5.8 spacing exception: the footer professional-title tooltip source link (.footer-professional-tooltip a) and the Knowledge paragraph links (.detail p a). The consent-banner privacy link is owned by ads-consent.css (L-04 workstream). */ /* * Editorial list markers: typographic dashes instead of round bullets. * Keep