/* * Layout refinements. * * Loaded after the main stylesheet. The main stylesheet matches the Figma frames pixel for pixel, * with fixed widths, fixed font sizes and page-by-page overrides; these rules replace that with one * fluid template for the course and service pages and cap the height of every top banner, so the * pages read comfortably from 320px phones to wide monitors. * * Every selector starts from #dkw, an id on . The rules being replaced are scoped as tightly * as body.dkw-rtl.single-dkw_course .dkw-course-page--a1-german ..., one per page; a single id * outranks all of them at once, so one template rule can stand in for fifteen page-specific ones * without a specificity race. The one !important below answers an !important in the main * stylesheet, which nothing else can override. */ /* --------------------------------------------------------------------------------------------- * Top banners * * The banners were sized from the window width, so on a laptop screen, which is wide but short, * they ran past the bottom of the window: 125% of the height on the home page, 141% on About and * 149% on the course list at 1600x770. Each is now also capped by the window height. * ------------------------------------------------------------------------------------------- */ @media (min-width: 1051px) { /* The home banner: the height of the window, as on the academy's own site, and nothing else about it changes. Two things in the original depend on the old, taller box and are adjusted to match: the photo was a fixed 2409px wide, so a shorter box simply cut off the bottom of it, the people and the logo; it now fills the box from the bottom up. And the text sat on 205px of empty space, which in a shorter box pushed it up under the header; that space is now a share of the box, so the text stays in the lower half where it was. The photo's bottom edge is a decorative red and yellow strip; 58% keeps the whole crowd and the logo above it. */ #dkw .dkw-figma-hero { height: min(60.1vw, 100vh); min-height: 540px; background-size: cover; background-position: center 58%; } #dkw .dkw-figma-hero .dkw-figma-hero__content { padding-bottom: calc(min(60.1vw, 100vh) * 0.13); } #dkw .dkw-figma-hero .dkw-figma-hero__overlay { background: linear-gradient(rgba(0, 0, 0, 0.39) 0, rgba(0, 0, 0, 0.39) 95%, rgb(250, 245, 242) 100%); } /* About and the course list: capped at the window height and otherwise as they were. Their original width formulas are kept; only the window cap is new. The fade into the page is moved lower so it no longer covers the people, and on About the photo is taken from a little further down so the faces sit in view rather than under the fade. */ #dkw .dkw-about-page-hero { height: min(68vw, 100vh); min-height: 460px; align-items: flex-end; padding-bottom: calc(min(68vw, 100vh) * 0.13); } #dkw .dkw-about-page-hero .dkw-container { padding-top: 0; } #dkw .dkw-about-page-hero > img { object-position: 50% 30%; } #dkw .dkw-about-page-hero__overlay { background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 88%, rgba(255, 252, 250, 0.96) 99%, rgb(255, 252, 250) 100%); } /* On both, the text is set in the lower half of the picture, ending about 13% above its bottom, as on the home page and the academy's own site; in the old, taller boxes that is where it appeared on a laptop screen. The course list's text used to sit on 439px of empty space, which no window-height box can hold. Its paragraph was 30px, four lines that ran off the screen; it is the one size that has to come down for the text to fit. */ #dkw .dkw-courses-archive-hero { height: min(71.8vw, 100vh); min-height: 460px; align-items: flex-end; padding-bottom: calc(min(71.8vw, 100vh) * 0.13); } /* An older rule pins this block to the top with align-self, which overrides the banner. */ #dkw .dkw-courses-archive-hero .dkw-container { align-self: flex-end; padding-block: 0; } #dkw .dkw-courses-archive-hero__overlay { background: linear-gradient(rgba(8, 15, 19, 0) 0, rgba(8, 15, 19, 0) 85%, rgba(255, 252, 250, 0.96) 98%, rgb(255, 252, 250) 100%); } #dkw .dkw-courses-archive-hero p { max-width: 1000px; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.85; } } /* --------------------------------------------------------------------------------------------- * Course and service pages: one template * * From tablets up. Tablets used to get the phone layout at desktop type sizes, a single column * with 52px headings and a lot of empty space; they now get the same picture-beside-text rows as * a desktop, scaled down through the clamp() values. * ------------------------------------------------------------------------------------------- */ @media (min-width: 701px) { /* The banner keeps its original look, full width under the header, and is only shorter: 90% of its old height. It used to be an absolutely placed picture in a box of fixed height, with the title card hung below it at a measured offset and room reserved for it in the next section; the picture is now in the flow and the card simply follows it, so a longer title, as in German and English, pushes the content down instead of landing on it. These pictures have lettering painted into them, and a full-width box shorter than the picture has to leave some of its height out; each picture is positioned so that what is left out is background, not lettering (see the list after this block). */ #dkw body.single-dkw_course .dkw-detail-cover, #dkw body.page-template-page-service-detail .dkw-service-page-hero-shell { display: block; height: auto; min-height: 0; padding: 60px 0 10px; } #dkw body.single-dkw_course .dkw-detail-cover .dkw-course-banner, #dkw body.page-template-page-service-detail .dkw-service-page-hero-shell .dkw-service-page-hero { position: relative; inset: auto; display: block; width: 100%; height: calc((clamp(430px, 38.5vw, 740px) - 70px) * 0.9); margin: 0; border-radius: 0; object-fit: cover; object-position: 50% 50%; } /* Each picture is placed so that what the shorter box leaves out is background rather than lettering, faces or logos. Percentages were read off each picture at full height. These repeat the general rule's selector with the page added, so they outrank it. */ /* The student stands head to toe; keep the head. */ #dkw body.single-dkw_course .dkw-course-page--a1-german .dkw-detail-cover .dkw-course-banner, #dkw body.single-dkw_course .dkw-course-page--a2-german .dkw-detail-cover .dkw-course-banner, #dkw body.single-dkw_course .dkw-course-page--b1-german .dkw-detail-cover .dkw-course-banner, #dkw body.single-dkw_course .dkw-course-page--b2-german .dkw-detail-cover .dkw-course-banner, #dkw body.single-dkw_course .dkw-course-page--c1-german .dkw-detail-cover .dkw-course-banner { object-position: 50% 15%; } /* Faces at the top. */ #dkw body.single-dkw_course .dkw-course-page--b2-pflege .dkw-detail-cover .dkw-course-banner { object-position: 50% 10%; } /* "DKW Diplom" and the line under it sit between 12% and 84%. */ #dkw body.single-dkw_course .dkw-course-page--dkw-diplom .dkw-detail-cover .dkw-course-banner { object-position: 50% 42%; } /* Headset, "train to hire" and the laptop sit between 12% and 85%. */ #dkw body.single-dkw_course .dkw-course-page--germany-career-path .dkw-detail-cover .dkw-course-banner { object-position: 50% 46%; } /* The title at 18% and the line under the book at 86-89%. */ #dkw body.single-dkw_course .dkw-course-page--arabic-teacher .dkw-detail-cover .dkw-course-banner { object-position: 50% 60%; } /* "Conversation Course" runs down to 92%; the tops of the two heads give way first. */ #dkw body.single-dkw_course .dkw-course-page--conversation .dkw-detail-cover .dkw-course-banner { object-position: 50% 80%; } /* The headline at 12-35% and the laptop; the table edge below gives way. */ #dkw body.page-template-page-service-detail .dkw-service-page--certified-translation .dkw-service-page-hero-shell .dkw-service-page-hero { object-position: 50% 40%; } /* The telc picture has its logo at the very top edge and "CERTIFICATION" near the bottom one, so at the common height one of them had to go. At the client's choice this page alone is taller: tall enough to show 87% of the picture, logo and slogan both, and never shorter than the other pages. */ #dkw body.page-template-page-service-detail .dkw-service-page--telc-exam .dkw-service-page-hero-shell .dkw-service-page-hero { height: max(calc((clamp(430px, 38.5vw, 740px) - 70px) * 0.9), calc(100vw * 859 / 1920 * 0.87)); object-position: 50% 15%; } /* "Travel Services" is written along the bottom edge. */ #dkw body.page-template-page-service-detail .dkw-service-page--travel-service .dkw-service-page-hero-shell .dkw-service-page-hero { object-position: 50% 100%; } #dkw body.page-template-page-service-detail .dkw-service-page-hero-shell .dkw-detail-cover__content { position: static; inset: auto; width: auto; height: auto; margin: 40px auto 0; padding: 0 32px; transform: none; } /* The red title pill: the same size on every course and service page. */ #dkw body.single-dkw_course .dkw-course-intro > h1, #dkw body.page-template-page-service-detail .dkw-detail-cover__card { width: fit-content; max-width: min(760px, 100%); height: auto; min-height: 0; margin: 0 auto; padding: 14px 48px; white-space: normal; } #dkw body.single-dkw_course .dkw-course-intro > h1, #dkw body.page-template-page-service-detail .dkw-detail-cover__card h1 { font-size: clamp(28px, 2.4vw, 40px); line-height: 1.35; } #dkw body.page-template-page-service-detail .dkw-detail-cover__card h1 { margin: 0; } /* A readable measure. The sections ran 1540px wide on a 1600px window. */ #dkw body.single-dkw_course .dkw-course-figma-container, #dkw body.page-template-page-service-detail .dkw-course-figma-container { width: auto; max-width: 1200px; height: auto; min-height: 0; margin-inline: auto; padding: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 32px); } #dkw body.single-dkw_course .dkw-course-intro { padding-top: 40px; } #dkw body.page-template-page-service-detail .dkw-service-intro-row { padding-top: 48px; } #dkw body.single-dkw_course .dkw-course-intro > h1 { margin-bottom: 56px; } /* Picture beside text. The picture keeps the side it has today, which is the same physical side in every language. The rows are laid out left to right on purpose, in Arabic too, so the grid areas below name physical sides; the text inside is switched back to its own direction further down. */ #dkw body.single-dkw_course .dkw-course-intro-grid, #dkw body.single-dkw_course .dkw-course-visual-section, #dkw body.page-template-page-service-detail .dkw-service-intro-row, #dkw body.page-template-page-service-detail .dkw-service-detail-row { display: grid; direction: ltr; column-gap: clamp(28px, 4vw, 64px); align-items: center; height: auto; min-height: 0; } /* picture on the left */ #dkw body.single-dkw_course .dkw-course-intro-grid, #dkw body.single-dkw_course .dkw-course-visual-section--reverse, #dkw body.page-template-page-service-detail .dkw-service-intro-row { grid-template-columns: minmax(0, clamp(220px, 30vw, 380px)) minmax(0, 1fr); grid-template-areas: "img txt"; } /* picture on the right */ #dkw body.single-dkw_course .dkw-course-visual-section:not(.dkw-course-visual-section--reverse), #dkw body.page-template-page-service-detail .dkw-service-detail-row { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(220px, 30vw, 380px)); grid-template-areas: "txt img"; } #dkw body.single-dkw_course .dkw-course-intro-grid > img, #dkw body.single-dkw_course .dkw-course-visual-section > img, #dkw body.page-template-page-service-detail .dkw-service-intro-row > img, #dkw body.page-template-page-service-detail .dkw-service-detail-row > img { grid-area: img; position: static; inset: auto; justify-self: center; width: auto; max-width: 100%; height: auto; max-height: 440px; margin: 0; object-fit: contain; transform: none; } #dkw body.single-dkw_course .dkw-course-intro-grid > div, #dkw body.single-dkw_course .dkw-course-visual-section > div, #dkw body.page-template-page-service-detail .dkw-service-intro-row > div, #dkw body.page-template-page-service-detail .dkw-service-detail-row > div { grid-area: txt; position: static; inset: auto; width: auto; max-width: none; height: auto; margin: 0; transform: none; } /* The picture in the first row sits right under the title, so it is kept a little shorter. */ #dkw body.single-dkw_course .dkw-course-intro-grid > img, #dkw body.page-template-page-service-detail .dkw-service-intro-row > img { max-height: 360px; } /* Nothing inside the text column may be wider than the column. On wide screens an older rule set the introduction on some service pages to a fixed 1238px, which ran it across the picture beside it. */ #dkw body.single-dkw_course .dkw-course-intro-grid > div *, #dkw body.single-dkw_course .dkw-course-visual-section > div *, #dkw body.page-template-page-service-detail .dkw-service-intro-row > div *, #dkw body.page-template-page-service-detail .dkw-service-detail-row > div * { max-width: 100%; } #dkw body.single-dkw_course .dkw-course-editor-copy, #dkw body.page-template-page-service-detail .dkw-service-editor-copy { width: auto; } /* On wide screens the introduction and the buttons were nudged into place with transforms (up to 85px down on the travel page) to meet the old layout; in this one they only push the text out of line. */ #dkw body.single-dkw_course .dkw-course-editor-copy, #dkw body.page-template-page-service-detail .dkw-service-editor-copy, #dkw body.single-dkw_course .dkw-course-contact-buttons, #dkw body.page-template-page-service-detail .dkw-course-contact-buttons { transform: none; } /* The text itself reads in the page's own direction again. */ #dkw body.dkw-rtl.single-dkw_course .dkw-course-intro-grid > div, #dkw body.dkw-rtl.single-dkw_course .dkw-course-visual-section > div, #dkw body.dkw-rtl.page-template-page-service-detail .dkw-service-intro-row > div, #dkw body.dkw-rtl.page-template-page-service-detail .dkw-service-detail-row > div { direction: rtl; } /* Type */ #dkw body.single-dkw_course .dkw-course-figma-container h2, #dkw body.page-template-page-service-detail .dkw-course-figma-container h2 { margin: 0 0 20px; font-size: clamp(26px, 2.1vw, 34px); line-height: 1.4; } #dkw body.single-dkw_course .dkw-course-figma-container p, #dkw body.single-dkw_course .dkw-course-figma-container ul, #dkw body.single-dkw_course .dkw-course-figma-container li, #dkw body.page-template-page-service-detail .dkw-course-figma-container p, #dkw body.page-template-page-service-detail .dkw-course-figma-container ul, #dkw body.page-template-page-service-detail .dkw-course-figma-container li { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.85; } #dkw body.single-dkw_course .dkw-course-figma-container ul, #dkw body.page-template-page-service-detail .dkw-course-figma-container ul { width: auto; height: auto; gap: 10px; } /* Contact buttons */ #dkw body.single-dkw_course .dkw-course-contact-buttons, #dkw body.page-template-page-service-detail .dkw-course-contact-buttons { gap: 16px; margin-top: 32px; } #dkw body.single-dkw_course .dkw-course-contact-buttons a, #dkw body.page-template-page-service-detail .dkw-course-contact-buttons a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-width: 180px; height: auto; min-height: 48px; padding: 10px 28px; font-size: 16px; line-height: 1.3; } #dkw body.single-dkw_course .dkw-course-contact-buttons a :is(svg, img, i), #dkw body.page-template-page-service-detail .dkw-course-contact-buttons a :is(svg, img, i) { width: 22px; height: 22px; font-size: 22px; flex: none; } /* The logo beside the "why" heading */ #dkw body.single-dkw_course .dkw-course-why-brand, #dkw body.page-template-page-service-detail .dkw-service-benefits-brand { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 32px; width: auto; height: auto; margin: 0 auto 32px; } #dkw body.single-dkw_course .dkw-course-why-brand img, #dkw body.page-template-page-service-detail .dkw-service-benefits-brand img { width: 200px; height: auto; } /* The heading was nudged 101px down with a transform to line up with the old, larger logo. */ #dkw body.single-dkw_course .dkw-course-why-brand h2, #dkw body.page-template-page-service-detail .dkw-service-benefits-brand h2 { align-self: center; margin: 0; transform: none; } #dkw body.single-dkw_course .dkw-course-why > ul, #dkw body.page-template-page-service-detail .dkw-service-benefits-row > ul { width: auto; max-width: 900px; margin-inline: auto; } /* Registration */ #dkw body.single-dkw_course .dkw-course-registration, #dkw body.page-template-page-service-detail .dkw-course-registration { height: auto; min-height: 0; padding: 56px 32px 88px; } #dkw body.single-dkw_course .dkw-course-register-card, #dkw body.page-template-page-service-detail .dkw-course-register-card { width: auto; max-width: 880px; height: auto; min-height: 0; margin-inline: auto; padding: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 56px); } #dkw body.single-dkw_course .dkw-course-register-card h2, #dkw body.page-template-page-service-detail .dkw-course-register-card h2 { margin-bottom: 12px; font-size: clamp(24px, 2vw, 30px); } #dkw body.single-dkw_course .dkw-course-register-card > p, #dkw body.page-template-page-service-detail .dkw-course-register-card > p { margin-bottom: 32px; font-size: 16px; } /* The fields were 72px boxes with up to 93px of air under each. */ #dkw body.single-dkw_course .dkw-course-register-card .dkw-register-form > label, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-register-form > label { margin-bottom: 20px; font-size: 16px; } #dkw body.single-dkw_course .dkw-course-register-card .dkw-register-form > label > span, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-register-form > label > span { height: 54px; min-height: 0; } #dkw body.single-dkw_course .dkw-course-register-card .dkw-register-form input, #dkw body.single-dkw_course .dkw-course-register-card .dkw-register-form select, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-register-form input, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-register-form select { font-size: 16px; } #dkw body.single-dkw_course .dkw-course-register-card .dkw-register-form hr, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-register-form hr { margin: 4px 0 24px; } #dkw body.single-dkw_course .dkw-course-register-card fieldset, #dkw body.page-template-page-service-detail .dkw-course-register-card fieldset { margin-bottom: 20px; } #dkw body.single-dkw_course .dkw-course-register-card legend, #dkw body.page-template-page-service-detail .dkw-course-register-card legend { margin-bottom: 12px; font-size: 16px; } #dkw body.single-dkw_course .dkw-course-register-card .dkw-study-method, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-study-method { gap: 16px; } /* The main stylesheet fixes these at 99px with !important, which only another !important can lift; this is the one place it is needed. */ #dkw body.single-dkw_course .dkw-course-register-card .dkw-study-method span, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-study-method span { min-height: 60px !important; } #dkw body.single-dkw_course .dkw-course-register-card .dkw-register-branch, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-register-branch { margin-bottom: 28px; } #dkw body.single-dkw_course .dkw-course-register-card .dkw-register-branch select, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-register-branch select { height: 48px; } #dkw body.single-dkw_course .dkw-course-register-card .dkw-register-form button, #dkw body.page-template-page-service-detail .dkw-course-register-card .dkw-register-form button { height: auto; min-height: 56px; padding: 12px 24px; font-size: 20px; } } /* --------------------------------------------------------------------------------------------- * Phone and tablet header * * The logo on the right and three round buttons on the left, menu, language and theme, in every * language, as on the academy's current site. The theme button was not reachable at all on phones * before; it was hidden and not in the menu either. * ------------------------------------------------------------------------------------------- */ @media (max-width: 1050px) { /* Laid out left to right in every language, so "left" and "right" below are the physical sides; the menus that open from the bar are switched back to the page's direction. */ #dkw .dkw-figma-nav { display: flex; direction: ltr; align-items: center; gap: 8px; } /* The buttons live in the desktop action group; flattening it lets them line up with the menu button and the logo. What the phone bar does not show is hidden. */ #dkw .dkw-figma-nav > .dkw-nav-actions { display: contents; } #dkw .dkw-nav-actions > .dkw-course-search, #dkw .dkw-nav-actions > .dkw-nav-separator, #dkw .dkw-nav-actions > .dkw-login-link, #dkw .dkw-nav-actions > .dkw-register-link { display: none; } #dkw .dkw-figma-nav > .dkw-mobile-toggle { order: 1; margin: 0; } #dkw .dkw-nav-actions > .dkw-language { order: 2; } #dkw .dkw-nav-actions > .dkw-theme-toggle { order: 3; } #dkw .dkw-figma-nav > .dkw-figma-logo { order: 4; margin: 0 0 0 auto; } #dkw .dkw-figma-nav > .dkw-figma-logo img { width: auto; height: 40px; } #dkw .dkw-figma-nav > .dkw-mobile-toggle, #dkw .dkw-nav-actions .dkw-language__current, #dkw .dkw-nav-actions > .dkw-theme-toggle { display: grid; place-items: center; width: 38px; min-width: 0; height: 38px; min-height: 0; margin: 0; padding: 0; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; font-size: 14px; font-weight: 700; line-height: 1; } #dkw .dkw-nav-actions > .dkw-theme-toggle { font-size: 18px; } /* The three bars of the menu button, sized for a round button. As a grid item each bar got a third of the button's height, which spread them about 12px apart; packed in a column they sit 4px apart. */ #dkw .dkw-figma-nav > .dkw-mobile-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } #dkw .dkw-figma-nav > .dkw-mobile-toggle span { width: 16px; height: 2px; margin: 0; border-radius: 1px; } /* The language button shows only the code; the globe and the arrow do not fit a circle. */ #dkw .dkw-nav-actions .dkw-language__current > span { display: none; } /* The switcher now sits on the left, so its list opens towards the page, not off the edge. */ #dkw .dkw-nav-actions .dkw-language__menu { right: auto; left: 0; } #dkw body.dkw-rtl .dkw-figma-menu, #dkw body.dkw-rtl .dkw-language__menu { direction: rtl; } /* "Subscribe" is styled white-on-clear for the dark desktop bar; in the white phone menu that made it invisible. Its colour is locked with !important in the main stylesheet, so it gets a red ground here instead, which keeps the white text readable. */ #dkw .dkw-figma-menu .dkw-subscribe-link { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; background: var(--dkw-red, #84001a); border-color: var(--dkw-red, #84001a); border-radius: 10px; font-weight: 700; } } /* --------------------------------------------------------------------------------------------- * Type on phones and tablets * * Headings kept their desktop sizes below 1050px: section titles ran 29-38px on a phone and up to * 58px on a tablet, the "Our branches" title 59px and 96px. Each is now sized from the window * width between a phone and a tablet value. Only the roles listed are touched; small headings * inside cards were already the right size and are left alone, since a blanket rule would have * made them bigger. * ------------------------------------------------------------------------------------------- */ @media (max-width: 1050px) { /* Page titles: about 26px on a phone, 38px on a tablet. */ #dkw .dkw-figma-hero__content > h1, #dkw .dkw-about-page-hero h1, #dkw .dkw-courses-archive-hero h1, #dkw .dkw-legal-page h1, #dkw .dkw-page-hero h1 { font-size: clamp(26px, 3vw + 15px, 40px); line-height: 1.35; } /* Section titles: about 22px on a phone, 32px on a tablet. */ #dkw main section > .dkw-container > h2, #dkw main .dkw-container > .dkw-register-copy > h2, #dkw main .dkw-container > .dkw-about-copy > h2, #dkw main .dkw-container > article > h2, #dkw main .dkw-purpose-grid > article > h2, #dkw main .dkw-register-card > h2 { font-size: clamp(22px, 2.6vw + 12px, 32px); line-height: 1.4; } /* "Our branches" is a display title painted over the orange band, so it stays larger. */ #dkw main .dkw-about-locations-intro > .dkw-container > h2 { font-size: clamp(34px, 6vw + 12px, 56px); } /* Card titles on About ran 24-30px. */ #dkw main .dkw-about-values__grid > article h3, #dkw main .dkw-about-why-grid > article h3, #dkw main .dkw-about-location-card h3, #dkw main .dkw-about-story article h3 { font-size: clamp(18px, 1.2vw + 14px, 24px); line-height: 1.4; } /* Running text: 16px on a phone, 17px on a tablet (it was up to 25px). */ #dkw main .dkw-figma-hero__content > p, #dkw main .dkw-about-editor p, #dkw main .dkw-about-team__intro, #dkw main .dkw-legal-content p, #dkw main .dkw-legal-lead, #dkw main .dkw-legal-cta p, #dkw main .dkw-page-hero .dkw-lead, #dkw main .dkw-course-editor-copy p, #dkw main .dkw-service-editor-copy p, #dkw main .dkw-course-figma-container li, #dkw main .dkw-about-story article p, #dkw main .dkw-about-story article li, #dkw main .dkw-about-accreditation article li, #dkw main .dkw-about-team__grid article p { font-size: clamp(16px, 0.3vw + 15px, 17px); line-height: 1.85; } /* The "save course" heart on each course card was 41px square, a little under a comfortable touch target. */ #dkw main .dkw-figma-course-card .dkw-course-footer button { min-width: 44px; min-height: 44px; } } /* --------------------------------------------------------------------------------------------- * Phones * ------------------------------------------------------------------------------------------- */ @media (max-width: 700px) { /* The home headline was held to the screen width less 120px, 240px on a 360px phone, which broke it over four lines; 20px each side is enough. */ #dkw .dkw-figma-hero__content { max-width: calc(100% - 40px); } /* Course and service pages keep their stacked order, picture then text or the other way round as designed, with the pictures held to a phone-sized height. */ #dkw body.single-dkw_course .dkw-course-intro > h1 { width: fit-content; max-width: 100%; margin-inline: auto; padding: 10px 28px; font-size: clamp(22px, 6vw, 28px); line-height: 1.35; } #dkw body.page-template-page-service-detail .dkw-detail-cover__card h1 { font-size: clamp(22px, 6vw, 28px); line-height: 1.35; } #dkw body.single-dkw_course .dkw-course-figma-container h2, #dkw body.page-template-page-service-detail .dkw-course-figma-container h2 { font-size: clamp(21px, 5.6vw, 24px); line-height: 1.4; } #dkw body.single-dkw_course .dkw-course-intro-grid > img, #dkw body.single-dkw_course .dkw-course-visual-section > img, #dkw body.page-template-page-service-detail .dkw-service-intro-row > img, #dkw body.page-template-page-service-detail .dkw-service-detail-row > img { width: auto; max-width: 100%; height: auto; max-height: 220px; margin-inline: auto; object-fit: contain; } #dkw body.single-dkw_course .dkw-course-why-brand img, #dkw body.page-template-page-service-detail .dkw-service-benefits-brand img { width: 140px; height: auto; } /* WhatsApp and call: two equal buttons, tall enough to tap comfortably. */ #dkw body.single-dkw_course .dkw-course-contact-buttons, #dkw body.page-template-page-service-detail .dkw-course-contact-buttons { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 24px; } #dkw body.single-dkw_course .dkw-course-contact-buttons a, #dkw body.page-template-page-service-detail .dkw-course-contact-buttons a { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 0; min-height: 48px; padding: 10px 12px; font-size: 15px; line-height: 1.3; } /* The footer ran 1,900px on a phone: a 240px logo and eleven course links one to a line in 12px type. The course links now sit in two columns, About and Services side by side, and the links are larger to read and tap. The columns of .dkw-footer-grid are, in order: brand, courses, about, services, newsletter. */ #dkw .dkw-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 28px; } #dkw .dkw-footer-grid > .dkw-footer-brand, #dkw .dkw-footer-grid > div:nth-child(2), #dkw .dkw-footer-grid > div:nth-child(5) { grid-column: 1 / -1; } #dkw .dkw-footer-brand img { width: 140px; height: auto; } #dkw .dkw-footer-grid > div:nth-child(2) ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; } #dkw .dkw-footer-grid li { min-height: 0; margin: 0; } #dkw .dkw-footer-grid li a { display: flex; align-items: center; min-height: 40px; padding-block: 6px; font-size: 14px; line-height: 1.4; } #dkw .dkw-footer-grid h2 { margin-bottom: 8px; } } /* --------------------------------------------------------------------------------------------- * The Arabic teacher course * * This page is built differently from the other ten courses, and three of its devices clash with * the template above. These rules apply at every width. * ------------------------------------------------------------------------------------------- */ /* Each feature's title and description are drawn by ::before and ::after, and the item's own text is hidden by giving it font-size:0. The template's list size would bring that hidden text back on top of them, so it is held at zero here and the two drawn parts are sized instead. */ #dkw body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-why > ul li { height: auto; min-height: 0; gap: 6px; font-size: 0; } #dkw body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-why > ul li::before { font-size: clamp(18px, 1.6vw + 10px, 26px); font-weight: 800; line-height: 1.3; } #dkw body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-why > ul li::after { font-size: clamp(15px, 0.6vw + 12px, 19px); line-height: 1.7; } /* The WhatsApp and call buttons were pinned at top:1188px, a position measured against the old page height; once the page got shorter they landed in the next section. They now sit in the flow, under the introduction, where they are on every other course page. */ #dkw body.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-contact-buttons { position: static; inset: auto; width: auto; margin-top: 24px; transform: none; flex-wrap: nowrap; justify-content: center; } /* Its introduction has no picture or paragraph beside the buttons, so it is one column and the buttons are centred under the title. */ #dkw body.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-intro-grid { display: block; } /* The logo beside "Course features" was pushed 396px sideways to meet the old, wider layout. */ #dkw body.single-dkw_course .dkw-course-why-brand img, #dkw body.page-template-page-service-detail .dkw-service-benefits-brand img { transform: none; } /* Two white patches drawn with ::before and ::after once covered part of the old, absolutely placed layout of this page; in the flowing layout they sat on empty page as white blocks. This is the only page that has them. */ #dkw body.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section::before, #dkw body.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section::after { display: none; } /* On wide screens the course-content list was pulled 164px sideways over the picture beside it, and its three stat cards were fixed at 340px each, 1040px in a 692px column. They now share the column's width. */ @media (min-width: 701px) { #dkw body.single-dkw_course .dkw-course-visual-section > div > ul, #dkw body.page-template-page-service-detail .dkw-service-detail-row > div > ul { margin-inline: 0; } #dkw body.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section > div > ul { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 32px; row-gap: 18px; align-items: start; } #dkw body.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section > div > ul > li { width: auto; min-width: 0; margin-inline: 0; overflow-wrap: break-word; } } /* The English introduction is a single lead sentence above two centred contact buttons. Keep the sentence on the same visual axis, rather than inheriting the generic left alignment. */ #dkw:not([dir="rtl"]) body.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-editor-copy { text-align: center; } #dkw:not([dir="rtl"]) body.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-editor-copy p { margin-inline: auto; } /* --------------------------------------------------------------------------------------------- * Header menus and the home page's closing buttons * ------------------------------------------------------------------------------------------- */ @media (min-width: 1051px) { /* The drop-down menus open from the left edge of their menu item. In Arabic the items run right to left, so the menus ran on past the right edge of the window and the start of every line was cut off ("Services" at every width, the others below 1600px). In Arabic they now open from the item's right edge, over the page. */ #dkw[dir="rtl"] .dkw-nav-submenu { left: auto; right: 0; } /* The two buttons beside the registration form are 190px wide with a 67px line height, sized for the Arabic labels. The English and German labels are longer, wrapped onto two lines and made each button 138px tall. In those languages they now widen to fit the label on one line; the Arabic buttons are unchanged. */ #dkw:not([dir="rtl"]) body.home .dkw-register-copy a { width: auto; min-width: 190px; padding-inline: 24px; white-space: nowrap; } } /* --------------------------------------------------------------------------------------------- * About: "Our values" on laptop screens * * From 1880px up the five values sit three over two in a section 706px tall, each as wide as its * text. Below that an older rule gave each value half the width, so they fell into three rows, * while the section kept its 706px height: the fifth value ran out of the section and over the * branches map beneath it, and the 47px titles wrapped. Between 1051 and 1879px the values now keep * the wide-screen arrangement, three over two, with the type scaled down with the width of the * window (the page margins are wider here, so a little more than in proportion), so each title * stays on one line; the section is as tall as its content. * 1880px and wider are unchanged, and so are the English and German pages, whose longer titles * are laid out two to a row at every width and already fit. * ------------------------------------------------------------------------------------------- */ @media (min-width: 1051px) and (max-width: 1879px) { #dkw[dir="rtl"] .dkw-about-values { height: auto; } #dkw[dir="rtl"] .dkw-about-values .dkw-about-values__grid { width: auto; max-width: 100%; margin-inline: 0; gap: clamp(44px, 5.3vw, 100px) clamp(20px, 1.7vw, 32px); justify-content: center; } #dkw[dir="rtl"] .dkw-about-values__grid > article { flex: 0 1 auto; width: auto; max-width: none; order: 1; } /* A full-width break after the third value, so the other two always form the second row. */ #dkw[dir="rtl"] .dkw-about-values__grid::after { content: ""; flex: 0 0 100%; order: 2; } #dkw[dir="rtl"] .dkw-about-values__grid > article:nth-child(n+4) { order: 3; } #dkw[dir="rtl"] .dkw-about-values__grid > article h3 { font-size: clamp(26px, 2.3vw, 47px); white-space: nowrap; } #dkw[dir="rtl"] .dkw-about-values__grid > article p { font-size: clamp(16px, 1.18vw, 24px); } #dkw[dir="rtl"] .dkw-about-values h2 { font-size: clamp(40px, 3.03vw, 57px); } } /* --------------------------------------------------------------------------------------------- * About: "Our values" in English and German * * These pages inherited the Arabic layout: text set to the right, the check mark pushed to the far * left of each value, away from its title, and the values two to a row with the fifth left on its * own, at every width. The titles are much longer than the Arabic ones and ran to two or three * lines. From 1051px up the values now read left to right, three over two like the Arabic page, * each check mark beside its title; the type scales with the window, and a title may take two * lines at most, with the titles of a row starting level. The section had a 706px minimum * height, which left a wide empty band under the values; it is now as tall as its content. * ------------------------------------------------------------------------------------------- */ @media (min-width: 1051px) { #dkw:not([dir="rtl"]) .dkw-about-values { min-height: 0; } #dkw:not([dir="rtl"]) .dkw-about-values h2 { font-size: clamp(38px, 3.03vw, 57px); text-align: left; } #dkw:not([dir="rtl"]) .dkw-about-values .dkw-about-values__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(40px, 4vw, 76px) clamp(24px, 2.2vw, 44px); width: auto; max-width: 100%; margin-inline: 0; text-align: left; } #dkw:not([dir="rtl"]) .dkw-about-values__grid > article { grid-column: span 2; width: auto; max-width: none; align-items: start; text-align: left; } #dkw:not([dir="rtl"]) .dkw-about-values__grid > article:nth-child(4) { grid-column: 2 / span 2; } #dkw:not([dir="rtl"]) .dkw-about-values__grid > article:nth-child(5) { grid-column: 4 / span 2; } /* The check mark sits on the first line of the title, which may wrap. */ #dkw:not([dir="rtl"]) .dkw-about-values__grid > article i { margin-top: 0.3em; } #dkw:not([dir="rtl"]) .dkw-about-values__grid > article h3 { font-size: clamp(22px, 1.75vw, 34px); line-height: 1.2; text-align: left; } #dkw:not([dir="rtl"]) .dkw-about-values__grid > article p { font-size: clamp(15px, 1.06vw, 20px); text-align: left; } } /* --------------------------------------------------------------------------------------------- * Service pages: the red title pill on wide screens * * From 1880px up an older rule keeps the travel page's long title on one line, 1082px wide, while * the pill is at most 760px wide, so the title ran out of both ends of the pill and its white * letters vanished against the page. The title now wraps inside the pill at every width, as it * already did below 1880px. * ------------------------------------------------------------------------------------------- */ @media (min-width: 701px) { #dkw body.page-template-page-service-detail .dkw-detail-cover__card h1 { white-space: normal; text-align: center; } } /* --------------------------------------------------------------------------------------------- * Course cards: the label and the rating * * The label above each course title and the rating beside it share one line. On laptop screens the * cards are too narrow for both, and each wrapped onto two lines side by side. Each now stays on one * line, and the rating moves under the label when there is no room beside it. * ------------------------------------------------------------------------------------------- */ #dkw .dkw-figma-course-card .dkw-course-meta { flex-wrap: wrap; row-gap: 4px; } #dkw .dkw-figma-course-card .dkw-course-meta > span { white-space: nowrap; } /* --------------------------------------------------------------------------------------------- * Partner logos: the fifteenth logo (SLS) * * Each logo on the home page is sized from its own width in the design; the new one gets the size * of its neighbours. On About the second row was a grid of six, so a seventh logo fell onto a line * of its own below the section's fixed height and was cut off: that row now has seven places, like * the first. On tablets and phones the About rows are four across instead of three, so seven logos * make a line of four and a line of three rather than leaving one on its own. On the home page, at * the same sizes, the two rows run together as one list, so the fifteen logos fill every line * (five lines of three on a phone) instead of each row ending in a short line. * ------------------------------------------------------------------------------------------- */ @media (min-width: 1051px) { #dkw .dkw-partners .dkw-partner-row figure:has(img[src*="/logo15."]) { --dkw-logo-width: 150; } #dkw .dkw-about-partners .dkw-partner-row--2 { grid-template-columns: repeat(7, minmax(0, 1fr)); } } @media (max-width: 1050px) { #dkw .dkw-about-partners .dkw-partner-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } #dkw .dkw-partners:not(.dkw-about-partners) .dkw-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } #dkw .dkw-partners:not(.dkw-about-partners) .dkw-container > h2 { flex: 0 0 100%; } #dkw .dkw-partners:not(.dkw-about-partners) .dkw-partner-row { display: contents; } } /* --------------------------------------------------------------------------------------------- * Footer newsletter button * * The gold button carried dark red text on computers (3.4:1) and white text on phones (3.1:1), both * too faint to read comfortably. It now carries a deeper maroon at every size (5.4:1), in light and * dark mode alike; the gold is unchanged. * ------------------------------------------------------------------------------------------- */ #dkw .dkw-figma-footer .dkw-footer-form button { color: #45000f; } /* --------------------------------------------------------------------------------------------- * Service pages: the optional parts (used by the ECL page) * * A service can add a lead-in above its first list and a note below it, a row of information cards, * the date of the next exam round and its own call to action above the form. They take the type * sizes of the rows around them; the selectors carry the service template's own prefix, which the * page's general heading and text rules use, so these win where they differ. The ECL cover has its logo at the top edge and its title low * down, so, like the telc page, it is taller than the common cover: tall enough to show the picture * from just under its top edge to just under the title. * ------------------------------------------------------------------------------------------- */ #dkw body.page-template-page-service-detail .dkw-service-page .dkw-service-lead { margin: 0 0 12px; font-size: clamp(16px, 1.01vw, 19px); line-height: 1.85; } #dkw body.page-template-page-service-detail .dkw-service-page .dkw-service-note { margin: 18px 0 0; color: #555; font-size: clamp(16px, 1.01vw, 19px); line-height: 1.85; } #dkw body.page-template-page-service-detail .dkw-service-info-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 1.7vw, 32px); } #dkw body.page-template-page-service-detail .dkw-service-info-cards > article { padding: clamp(22px, 1.8vw, 34px); background: #fff; border: 1px solid #efe3de; border-radius: 18px; box-shadow: 0 12px 34px rgba(132, 0, 26, .06); } #dkw body.page-template-page-service-detail .dkw-service-info-cards h2 { margin: 0 0 14px; color: #84001a; font-size: clamp(20px, 1.3vw, 25px); line-height: 1.4; } #dkw body.page-template-page-service-detail .dkw-service-info-cards p, #dkw body.page-template-page-service-detail .dkw-service-info-cards li { margin: 0; color: #161616; font-size: clamp(16px, 1.01vw, 19px); line-height: 1.85; } #dkw body.page-template-page-service-detail .dkw-service-info-cards p + p, #dkw body.page-template-page-service-detail .dkw-service-info-cards p + ul { margin-top: 10px; } #dkw body.page-template-page-service-detail .dkw-service-info-cards ul { margin: 0; padding-inline-start: 1.2em; } #dkw body.page-template-page-service-detail .dkw-service-highlight p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; width: fit-content; max-width: 100%; margin: 0 auto; padding: clamp(16px, 1.4vw, 24px) clamp(24px, 2.4vw, 46px); color: #fff; background: #6d1416; border-radius: 22px; text-align: center; } #dkw body.page-template-page-service-detail .dkw-service-highlight span { font-size: clamp(16px, 1.1vw, 21px); opacity: .9; } #dkw body.page-template-page-service-detail .dkw-service-highlight strong { font-size: clamp(22px, 1.7vw, 32px); font-weight: 800; } @media (max-width: 1050px) { #dkw body.page-template-page-service-detail .dkw-service-info-cards { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 701px) { #dkw body.page-template-page-service-detail .dkw-service-page--ecl-exam .dkw-service-page-hero-shell .dkw-service-page-hero { height: max(calc((clamp(430px, 38.5vw, 740px) - 70px) * 0.9), calc(100vw * 600 / 1600)); object-position: 50% 30%; } } #dkw#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page .dkw-service-note { color: #bdbdc3; } #dkw#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-info-cards > article { background: #212125; border-color: #34343a; box-shadow: none; } #dkw#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-info-cards h2 { color: #ff8791; } #dkw#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-info-cards p, #dkw#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-info-cards li, #dkw#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page .dkw-service-lead { color: #dcdce0; } /* --------------------------------------------------------------------------------------------- * Dark mode * * The theme switch adds dkw-dark to , and the main stylesheet answered it with six rules * that turned the text white but left most sections, cards and forms white, so large parts of the * site showed white text on white. The first group below gives every rule in the main stylesheet * and in this file that paints a light background, dark text or a light border a dark twin, with * the same selector and media query, so each one follows its original exactly. Rules that set a * coloured fill, a clear background or a coloured border are repeated as they are, so the order in * which the rules override one another stays what it is in light mode. The colours: light backgrounds * become dark greys (tinted ones keep their hue), dark text becomes light, brand-red text becomes * a lighter red that reads on dark. A rule that paints a coloured button or badge keeps its text * colour, and the white buttons that sit on photographs or on the red cards are repeated unchanged, * so they look as they do in light mode. The second group is written by hand: the fades at the * foot of the top pictures, the study-method choices on the red registration card, a light-ink * copy of the logo, and white tiles behind the partner logos, several of which are black lettering * that would otherwise disappear on dark. Three drawings had a white background, or white patches * painted into them, that the light page hid; dark mode shows cleaned copies of them instead, under * new names, so no cached copy of the originals gets in the way. * Nothing here applies unless dkw-dark is set, so the light site is untouched. * ------------------------------------------------------------------------------------------- */ #dkw.dkw-dark body{color:#ededee;background-color:#212125} #dkw.dkw-dark a{color:inherit} #dkw.dkw-dark button{color:inherit} #dkw.dkw-dark .skip-link:focus{color:#ededee;background-color:#212125} #dkw.dkw-dark .dkw-figma-header{color:#ffffff;background-color:rgba(24,23,28,0.72);border-bottom-color:rgba(255,255,255,0.12)} #dkw.dkw-dark .dkw-figma-header.is-sticky{color:#ffffff;background-color:rgba(24,23,28,0.88);border-color:rgba(255,255,255,0.12)} #dkw.dkw-dark .dkw-figma-menu>a:hover,#dkw.dkw-dark .dkw-nav-dropdown>a:hover{color:#f8b301} #dkw.dkw-dark .dkw-subscribe-link{color:#ffffff!important;background-color:transparent;border-color:#3a3a40} #dkw.dkw-dark .dkw-nav-submenu{color:#ededee;background-color:#212125} #dkw.dkw-dark .dkw-nav-submenu a:hover{color:#ff8791;background-color:#28282d} #dkw.dkw-dark .dkw-course-search{color:#ededee;background-color:#212125} #dkw.dkw-dark .dkw-course-search input{color:#ededee;background-color:transparent} #dkw.dkw-dark .dkw-search-status{color:#ff8791} #dkw.dkw-dark .dkw-course-search input::placeholder{color:#bdbdc3} #dkw.dkw-dark .dkw-theme-toggle{color:inherit;background-color:transparent} #dkw.dkw-dark .dkw-nav-separator{background-color:currentcolor} #dkw.dkw-dark .dkw-register-link{color:#ffffff;background-color:#84001a} #dkw.dkw-dark .dkw-mobile-toggle{background-color:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25)} #dkw.dkw-dark .dkw-mobile-toggle span{background-color:currentcolor} #dkw.dkw-dark .dkw-language__current{color:inherit;background-color:transparent} #dkw.dkw-dark .dkw-language__menu{color:#ededee;background-color:#212125} #dkw.dkw-dark .dkw-language__menu a:hover,#dkw.dkw-dark .dkw-language__menu a[aria-current=page]{color:#ff8791;background-color:#2a1d20} #dkw.dkw-dark .dkw-language__menu a span{color:#ffffff;background-color:#84001a} #dkw.dkw-dark .dkw-figma-hero{color:#ffffff} #dkw.dkw-dark .dkw-hero-button{color:#84001a;background-color:#ffffff} #dkw.dkw-dark .dkw-courses-archive-hero{color:#ffffff} #dkw.dkw-dark .dkw-courses-archive-why{background-color:#28282d} #dkw.dkw-dark .dkw-figma-stats{background-color:#28282d} #dkw.dkw-dark .dkw-figma-stat{border-left-color:#3a3a40} #dkw.dkw-dark .dkw-figma-stat p{color:#ededee} #dkw.dkw-dark .dkw-figma-stat b{color:#ff8791} #dkw.dkw-dark .dkw-partners{background-color:#28282d} #dkw.dkw-dark .dkw-partners h2,#dkw.dkw-dark .dkw-courses-panel>h2,#dkw.dkw-dark .dkw-why-figma h2{color:#ff8791} #dkw.dkw-dark .dkw-figma-courses{background-color:#28282d} #dkw.dkw-dark .dkw-courses-panel{background-color:#212125;border-color:rgba(0,0,0,0.02)} #dkw.dkw-dark .dkw-figma-course-card{background-color:#28282d} #dkw.dkw-dark .dkw-course-meta{color:#ededee} #dkw.dkw-dark .dkw-rating{color:#f8b301} #dkw.dkw-dark .dkw-rating b{color:#ededee} #dkw.dkw-dark .dkw-rating small{color:#bdbdc3} #dkw.dkw-dark .dkw-course-copy h3{color:#ededee} #dkw.dkw-dark .dkw-course-copy p{color:#bdbdc3} #dkw.dkw-dark .dkw-course-footer a{color:#ffffff;background-color:#b52619} #dkw.dkw-dark .dkw-course-footer button{color:#ffffff;background-color:#212529} #dkw.dkw-dark .dkw-outline-button{color:#ff8791;background-color:transparent;border-color:#6d1416} #dkw.dkw-dark .dkw-outline-button:hover{color:#ffffff;background-color:#6d1416} #dkw.dkw-dark .dkw-about-figma{background-color:#212125} #dkw.dkw-dark .dkw-about-copy>span{color:#ff8791;background-color:rgba(0,0,0,0.05)} #dkw.dkw-dark .dkw-about-copy h2 em{color:#ff8791} #dkw.dkw-dark .dkw-about-copy p{color:#ff8791} #dkw.dkw-dark .dkw-red-button{color:#ffffff;background-color:#b52619} #dkw.dkw-dark .dkw-red-button:hover{background-color:#601414} #dkw.dkw-dark .dkw-why-figma{background-color:#212125} #dkw.dkw-dark .dkw-why-card{background-color:#212125;border-color:#3a3a40} #dkw.dkw-dark .dkw-why-card--red{border-color:#84001a} #dkw.dkw-dark .dkw-why-card b{color:#bdbdc3;background-color:#212125;border-color:#3a3a40} #dkw.dkw-dark .dkw-why-card--red b{color:#ff8791;border-color:#84001a} #dkw.dkw-dark .dkw-why-card p{color:#bdbdc3} #dkw.dkw-dark .dkw-services-figma{background-color:#212125} #dkw.dkw-dark .dkw-services-figma h2{color:#ff8791} #dkw.dkw-dark .dkw-service-icon{color:#ff8791;background-color:#28282d;border-color:#3a3a40} #dkw.dkw-dark .dkw-service-grid a{color:#ffffff;background-color:#84001a} #dkw.dkw-dark .dkw-testimonials-figma{background-color:#84001a} #dkw.dkw-dark .dkw-testimonials-figma h2{color:#ffffff} #dkw.dkw-dark .dkw-testimonial-grid article{background-color:#212125} #dkw.dkw-dark .dkw-avatar{color:#ffffff} #dkw.dkw-dark .dkw-avatar--green{background-color:#6bcb5b} #dkw.dkw-dark .dkw-avatar--orange{background-color:#ff9f43} #dkw.dkw-dark .dkw-avatar--blue{background-color:#4d3cff} #dkw.dkw-dark .dkw-testimonial-grid header span{color:#ff7f32} #dkw.dkw-dark .dkw-testimonial-grid p{color:#bdbdc3} #dkw.dkw-dark .dkw-faq-figma{background-color:#212125} #dkw.dkw-dark .dkw-faq-figma h2{color:#ff8791} #dkw.dkw-dark .dkw-title-divider::before,#dkw.dkw-dark .dkw-title-divider::after{background-color:#6d1416} #dkw.dkw-dark .dkw-title-divider span{background-color:#212125;border-color:#6d1416} #dkw.dkw-dark .dkw-faq-grid details{background-color:#28282d;border-color:#3a3a40} #dkw.dkw-dark .dkw-faq-grid summary{color:#ff8791} #dkw.dkw-dark .dkw-faq-grid summary i{color:#ffffff;background-color:#6d1416} #dkw.dkw-dark .dkw-faq-grid details p{color:#bdbdc3} #dkw.dkw-dark .dkw-register-figma{color:#ffffff;background-color:#212125} #dkw.dkw-dark .dkw-register-figma::before{background-color:#3a0008} #dkw.dkw-dark .dkw-register-card{background-color:#84001a;border-color:rgba(255,255,255,0.08)} #dkw.dkw-dark .dkw-register-card::before{background-color:transparent} #dkw.dkw-dark .dkw-register-card>h2{color:#ffffff} #dkw.dkw-dark .dkw-register-card>p{color:rgba(255,255,255,0.86)} #dkw.dkw-dark .dkw-register-form label{color:#ffffff} #dkw.dkw-dark .dkw-register-form label>span{background-color:transparent;border-color:#3a3a40} #dkw.dkw-dark .dkw-register-form label i{color:rgba(255,255,255,0.9)} #dkw.dkw-dark .dkw-register-form input,#dkw.dkw-dark .dkw-register-form select{color:#ffffff;background-color:transparent} #dkw.dkw-dark .dkw-register-form input::placeholder{color:rgba(255,255,255,0.64)} #dkw.dkw-dark .dkw-register-question{color:rgba(255,255,255,0.9)} #dkw.dkw-dark .dkw-register-form hr{border-top-color:rgba(255,255,255,0.28)} #dkw.dkw-dark .dkw-register-form legend{color:#ffffff} #dkw.dkw-dark .dkw-register-branch select{color:#bdbdc3;background-color:#212125} #dkw.dkw-dark .dkw-register-form>button{color:#84001a;background-color:#f0ece9} #dkw.dkw-dark .dkw-register-form>button:hover{background-color:#e1dad5} #dkw.dkw-dark .dkw-form-notice{color:#89e5b8;background-color:#1b2a22} #dkw.dkw-dark .dkw-register-copy{color:#ffffff} #dkw.dkw-dark .dkw-register-copy h2{color:#ffffff} #dkw.dkw-dark .dkw-register-copy p{color:#dddddd} #dkw.dkw-dark .dkw-register-copy a{color:#ffffff;border-color:#ffffff} #dkw.dkw-dark .dkw-register-copy a:last-child{color:#111111;background-color:#ffffff} #dkw.dkw-dark .dkw-figma-footer{color:#ffffff} #dkw.dkw-dark .dkw-footer-brand p,#dkw.dkw-dark .dkw-footer-grid>div>p{color:#eeeeee} #dkw.dkw-dark .dkw-footer-social span{color:#ffffff!important} #dkw.dkw-dark .dkw-footer-grid h2{color:#ffffff} #dkw.dkw-dark .dkw-footer-grid a{color:rgba(255,255,255,0.75)} #dkw.dkw-dark .dkw-footer-grid a:hover{color:#ffffff} #dkw.dkw-dark .dkw-footer-form label{background-color:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.25)} #dkw.dkw-dark .dkw-footer-form input{color:#ffffff;background-color:transparent} #dkw.dkw-dark .dkw-footer-form input::placeholder{color:rgba(255,255,255,0.62)} #dkw.dkw-dark .dkw-footer-bottom{background-color:#110002;border-top-color:rgba(255,255,255,0.08)} #dkw.dkw-dark .dkw-footer-bottom p{color:rgba(255,255,255,0.6)} #dkw.dkw-dark .dkw-footer-bottom nav a:last-child{color:#3ca0e0} #dkw.dkw-dark .dkw-scroll-top{color:#ffffff;background-color:#84001a} #dkw.dkw-dark .dkw-page-hero{color:#ffffff} #dkw.dkw-dark .dkw-page-hero .dkw-kicker{color:#f8b301} #dkw.dkw-dark .dkw-lead{color:rgba(255,255,255,0.78)} #dkw.dkw-dark .dkw-content a{color:#ff8791} #dkw.dkw-dark .dkw-course-card{background-color:#28282d} #dkw.dkw-dark .dkw-badge{color:#ffffff;background-color:#84001a} #dkw.dkw-dark .dkw-course-card__meta{color:#bdbdc3} #dkw.dkw-dark .dkw-course-card p{color:#bdbdc3} #dkw.dkw-dark .dkw-text-link{color:#ff8791} #dkw.dkw-dark .dkw-course-aside{background-color:#28282d} #dkw.dkw-dark .dkw-course-facts li{border-bottom-color:#3a3a40} #dkw.dkw-dark .dkw-button{color:#ffffff;background-color:#84001a} #dkw.dkw-dark .dkw-figma-course-page{background-color:#212125} #dkw.dkw-dark .dkw-course-intro>h1{color:#ffffff;background-color:#6d1416} #dkw.dkw-dark .dkw-course-editor-copy h2,#dkw.dkw-dark .dkw-course-editor-copy h3{color:#ff8791} #dkw.dkw-dark .dkw-course-contact-buttons a{color:#ff8791;background-color:#212125;border-color:#8b181b} #dkw.dkw-dark .dkw-course-contact-buttons a:first-child{color:#ffffff;background-color:#bd231d} @media(max-width:1050px){#dkw.dkw-dark .dkw-figma-menu{color:#ededee;background-color:#212125}#dkw.dkw-dark .dkw-figma-menu>a,#dkw.dkw-dark .dkw-nav-dropdown>a{border-bottom-color:#3a3a40}#dkw.dkw-dark .dkw-figma-stat{border-bottom-color:#3a3a40}} #dkw.dkw-dark .dkw-about-page-hero{color:#ffffff;background-color:#231718} #dkw.dkw-dark .dkw-about-page-hero__copy span,#dkw.dkw-dark .dkw-section-kicker{color:#f2b400} #dkw.dkw-dark .dkw-about-page-hero__copy p{color:rgba(255,255,255,0.86)} #dkw.dkw-dark .dkw-about-story{background-color:#212125} #dkw.dkw-dark .dkw-about-editor h2{color:#ff8791} #dkw.dkw-dark .dkw-about-editor h3{color:#ff8791} #dkw.dkw-dark .dkw-about-purpose{background-color:#28282d} #dkw.dkw-dark .dkw-purpose-grid article{background-color:#212125} #dkw.dkw-dark .dkw-purpose-grid i{color:#ffffff;background-color:#86181b} #dkw.dkw-dark .dkw-purpose-grid h2{color:#ff8791} #dkw.dkw-dark .dkw-purpose-grid p{color:#bdbdc3} #dkw.dkw-dark .dkw-about-values-title{color:#ff8791} #dkw.dkw-dark .dkw-page-cta{color:#ffffff} #dkw.dkw-dark .dkw-page-cta a{color:#ff8791;background-color:#212125;border-color:#3a3a40} #dkw.dkw-dark .dkw-page-cta .dkw-page-cta__secondary{color:#ffffff;background-color:transparent} #dkw.dkw-dark .dkw-legal-hero{background-color:#212125} #dkw.dkw-dark .dkw-legal-hero span{color:#ff8791} #dkw.dkw-dark .dkw-legal-hero h1{color:#ededee} #dkw.dkw-dark .dkw-legal-hero p{color:#bdbdc3} #dkw.dkw-dark .dkw-legal-illustration{border-color:#e3b6a9} #dkw.dkw-dark .dkw-legal-illustration i,#dkw.dkw-dark .dkw-legal-illustration b,#dkw.dkw-dark .dkw-legal-illustration em{color:#ffffff;background-color:#97191f} #dkw.dkw-dark .dkw-legal-content h2{color:#ff8791} #dkw.dkw-dark .dkw-service-page-hero{color:#ffffff;background-color:#241517} #dkw.dkw-dark .dkw-service-page-hero a{color:#ff8791;background-color:#212125} #dkw.dkw-dark .dkw-service-page-copy{background-color:#212125} #dkw.dkw-dark .dkw-service-page-copy article h2,#dkw.dkw-dark .dkw-service-page-copy article h3,#dkw.dkw-dark .dkw-service-page-copy aside h2{color:#ff8791} #dkw.dkw-dark .dkw-service-page-copy aside{background-color:#212125;border-color:#3a3a40} #dkw.dkw-dark .dkw-contact-page{background-color:#28282d} #dkw.dkw-dark .dkw-contact-page textarea{color:#ededee;background-color:transparent} #dkw.dkw-dark .dkw-contact-direct a{color:#ffffff;background-color:#86181b} #dkw.dkw-dark .dkw-service-page{background-color:#212125} #dkw.dkw-dark .dkw-service-page-hero-shell{background-color:#f58a00} #dkw.dkw-dark .dkw-service-page-hero{background-color:#f58a00} #dkw.dkw-dark .dkw-trial-hero-title{color:#ffffff;background-color:#72000d} #dkw.dkw-dark .dkw-service-page-title{color:#ffffff;background-color:#6d1416} #dkw.dkw-dark .dkw-service-detail-row h2,#dkw.dkw-dark .dkw-service-benefits-row h2{color:#ededee} #dkw.dkw-dark .dkw-service-detail-row li::marker,#dkw.dkw-dark .dkw-service-benefits-row li::marker{color:#ededee} #dkw.dkw-dark .dkw-service-page .dkw-course-registration{background-color:#212125} #dkw.dkw-dark .dkw-about-final{background-color:#212125} #dkw.dkw-dark .dkw-about-page-stats{background-color:#2a1d20} #dkw.dkw-dark .dkw-about-stat-grid .dkw-figma-stat{border-inline-start-color:#d9c8c1} #dkw.dkw-dark .dkw-about-partners{background-color:#2a1d20} #dkw.dkw-dark .dkw-about-partners h2{color:#ff8791} #dkw.dkw-dark .dkw-about-story{background-color:#212125} #dkw.dkw-dark .dkw-about-story h2{color:#ededee} #dkw.dkw-dark .dkw-about-story h2::after{background-color:#7f1518} #dkw.dkw-dark .dkw-about-editor{color:#ff8791} #dkw.dkw-dark .dkw-about-inline-cta{color:#ffffff;background-color:#8e1719} #dkw.dkw-dark .dkw-about-purpose{background-color:#212125} #dkw.dkw-dark .dkw-purpose-grid article{background-color:#212125;border-color:#8a1719} #dkw.dkw-dark .dkw-purpose-grid i{color:#ff8791;background-color:transparent} #dkw.dkw-dark .dkw-about-values-title{color:#ff8791} #dkw.dkw-dark .dkw-about-why-grid article{background-color:#28282d;border-bottom-color:#8d1719} #dkw.dkw-dark .dkw-about-why-grid span{color:#ffffff;background-color:#7f1518;border-color:#3a3a40} #dkw.dkw-dark .dkw-about-why-grid h3{color:#ededee} #dkw.dkw-dark .dkw-about-accreditation{background-color:#212125} #dkw.dkw-dark .dkw-about-accreditation h2,#dkw.dkw-dark .dkw-about-values h2,#dkw.dkw-dark .dkw-about-team h2{color:#ededee} #dkw.dkw-dark .dkw-about-accreditation ul{color:#ff8791} #dkw.dkw-dark .dkw-about-values{background-color:#212125} #dkw.dkw-dark .dkw-about-values__grid i{color:#ff8791} #dkw.dkw-dark .dkw-about-values__grid h3{color:#ededee} #dkw.dkw-dark .dkw-about-locations-intro{color:#ffffff} #dkw.dkw-dark .dkw-about-locations-intro::before{border-color:#3a3a40} #dkw.dkw-dark .dkw-about-locations-intro h2{color:#ffcf35} #dkw.dkw-dark .dkw-about-map span{color:#ffffff;background-color:#7d1618;border-color:#3a3a40} #dkw.dkw-dark .dkw-about-map span:nth-child(1){color:#1683ca;background-color:#1683ca} #dkw.dkw-dark .dkw-about-map span:nth-child(2){color:#741acb;background-color:#741acb} #dkw.dkw-dark .dkw-about-map span:nth-child(3){color:#ec008c;background-color:#ec008c} #dkw.dkw-dark .dkw-about-map span:nth-child(4){color:#df2519;background-color:#df2519} #dkw.dkw-dark .dkw-about-map span:nth-child(5){color:#10ad87;background-color:#10ad87} #dkw.dkw-dark .dkw-about-locations{background-color:#212125} #dkw.dkw-dark .dkw-about-location-grid{background-color:#2a1d20} #dkw.dkw-dark .dkw-about-location-card{background-color:#28282d} #dkw.dkw-dark .dkw-about-location-card h3{color:#ededee} #dkw.dkw-dark .dkw-about-location-card a{color:#ededee} #dkw.dkw-dark .dkw-about-location-card p{color:#bdbdc3} #dkw.dkw-dark .dkw-about-location-card .dkw-location-map{color:#ffffff;background-color:#d83424} #dkw.dkw-dark .dkw-about-team{background-color:#212125} #dkw.dkw-dark .dkw-about-team__grid h3{color:#ededee} #dkw.dkw-dark .dkw-legal-page{background-color:#212125} #dkw.dkw-dark .dkw-legal-page .dkw-legal-sheet{background-color:#2a1d20} #dkw.dkw-dark .dkw-legal-watermark{color:#dec9be} #dkw.dkw-dark .dkw-legal-sheet>h1{color:#ededee} #dkw.dkw-dark .dkw-legal-page .dkw-legal-content{color:#ededee} #dkw.dkw-dark .dkw-legal-page .dkw-legal-content h2{color:#ededee} #dkw.dkw-dark .dkw-legal-cta a{color:#ffffff;background-color:#d93424} #dkw.dkw-dark .dkw-figma-reference-crop{background-color:#28282d} #dkw.dkw-dark .dkw-about-map span{color:#ededee;background-color:var(--dkw-pin)} #dkw.dkw-dark .dkw-about-map span::before{background-color:#212125} #dkw.dkw-dark .dkw-home-founders{background-color:#212125} #dkw.dkw-dark .dkw-home-founders h2{color:#ff8791} #dkw.dkw-dark .dkw-home-founders__intro{color:#bdbdc3} #dkw.dkw-dark .dkw-home-founders__grid article{background-color:#212125} #dkw.dkw-dark .dkw-home-founders__grid h3{color:#ededee} #dkw.dkw-dark .dkw-detail-cover{background-color:#29191b} #dkw.dkw-dark .dkw-detail-cover__card{color:#ededee;background-color:#212125;border-inline-start-color:#84001a} #dkw.dkw-dark .dkw-detail-cover__card span{color:#ff8791} #dkw.dkw-dark .dkw-detail-cover__card a{color:#ffffff;background-color:#84001a} #dkw.dkw-dark .dkw-course-page--arabic-teacher .dkw-detail-cover{background-color:#f58a00} @media(min-width:1051px){#dkw.dkw-dark .dkw-figma-stats .dkw-figma-stat:not(:first-child){border-inline-start-color:#3a3a40}} #dkw.dkw-dark .dkw-mission-points{color:#bdbdc3} #dkw.dkw-dark .dkw-about-why-grid p{color:#bdbdc3} #dkw.dkw-dark .dkw-about-values__grid p{color:#ededee} @media(min-width:1051px){#dkw.dkw-dark .post-type-archive-dkw_course .dkw-figma-header{background-color:rgba(24,23,28,0.2)}#dkw.dkw-dark .dkw-why-figma.dkw-courses-archive-why{background-color:#212125}#dkw.dkw-dark .dkw-figma-courses.dkw-courses-archive-grid{background-color:#28282d}#dkw.dkw-dark .dkw-figma-course-card{background-color:#28282d}#dkw.dkw-dark .dkw-services-figma.dkw-courses-archive-services{background-color:#212125}} @media(min-width:1051px){#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page{background-color:#212125}#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page-hero-shell .dkw-detail-cover__card{background-color:#6d1416}#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page-hero-shell .dkw-detail-cover__card h1{color:#ffffff}} @media(min-width:1051px){#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section:not(.dkw-course-visual-section--reverse) li:nth-child(n+4){background-color:#34343a}#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section:not(.dkw-course-visual-section--reverse) li:nth-child(n+4)::before{color:#ff8791}#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section:not(.dkw-course-visual-section--reverse) li:nth-child(n+4)::after{color:#ededee}} @media(min-width:1051px){#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-why>ul li::before{color:#ededee}#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-why>ul li::after{color:#ededee}} @media(min-width:1051px){#dkw.dkw-dark body.page-template-page-about .dkw-about-final{background-color:#212125}#dkw.dkw-dark body.page-template-page-about .dkw-about-page-stats{background-color:#28282d}#dkw.dkw-dark body.page-template-page-about .dkw-about-partners{background-color:#28282d}} @media(min-width:1051px){#dkw.dkw-dark body.page-id-5 .dkw-about-final,#dkw.dkw-dark body.dkw-page-about .dkw-about-final{background-color:#212125}#dkw.dkw-dark body.page-id-5 .dkw-about-page-stats,#dkw.dkw-dark body.dkw-page-about .dkw-about-page-stats{background-color:#28282d}#dkw.dkw-dark body.page-id-5 .dkw-about-partners,#dkw.dkw-dark body.dkw-page-about .dkw-about-partners{background-color:#28282d}} @media(min-width:1051px){#dkw.dkw-dark body.page-id-5 .dkw-about-story h2,#dkw.dkw-dark body.dkw-page-about .dkw-about-story h2{color:#ededee}#dkw.dkw-dark body.page-id-5 .dkw-about-story__accent,#dkw.dkw-dark body.dkw-page-about .dkw-about-story__accent{color:#ff8791}#dkw.dkw-dark body.page-id-5 .dkw-about-story .dkw-about-inline-cta,#dkw.dkw-dark body.dkw-page-about .dkw-about-story .dkw-about-inline-cta{background-color:#b52619}#dkw.dkw-dark body.page-id-5 .dkw-purpose-grid article,#dkw.dkw-dark body.dkw-page-about .dkw-purpose-grid article{border-color:#6d1416}#dkw.dkw-dark body.page-id-5 .dkw-purpose-grid h2,#dkw.dkw-dark body.dkw-page-about .dkw-purpose-grid h2{color:#ededee}#dkw.dkw-dark body.page-id-5 .dkw-purpose-grid i,#dkw.dkw-dark body.dkw-page-about .dkw-purpose-grid i{background-color:transparent}#dkw.dkw-dark body.page-id-5 .dkw-about-why-grid article,#dkw.dkw-dark body.dkw-page-about .dkw-about-why-grid article{background-color:#212125}#dkw.dkw-dark body.page-id-5 .dkw-about-why-grid span,#dkw.dkw-dark body.dkw-page-about .dkw-about-why-grid span{color:#ededee;background-color:#212125;border-color:#b8b8b8}#dkw.dkw-dark body.page-id-5 .dkw-about-why-grid article:nth-child(even) span,#dkw.dkw-dark body.dkw-page-about .dkw-about-why-grid article:nth-child(even) span{color:#ff8791;border-color:#6c1416}#dkw.dkw-dark body.page-id-5 .dkw-about-why-grid h3,#dkw.dkw-dark body.dkw-page-about .dkw-about-why-grid h3{color:#ededee}#dkw.dkw-dark body.page-id-5 .dkw-about-accreditation h2,#dkw.dkw-dark body.dkw-page-about .dkw-about-accreditation h2{color:#ededee}#dkw.dkw-dark body.page-id-5 .dkw-about-values h2,#dkw.dkw-dark body.dkw-page-about .dkw-about-values h2{color:#ff8791}#dkw.dkw-dark body.page-id-5 .dkw-about-values__grid i,#dkw.dkw-dark body.dkw-page-about .dkw-about-values__grid i{background-color:transparent}#dkw.dkw-dark body.page-id-5 .dkw-about-values__grid h3,#dkw.dkw-dark body.dkw-page-about .dkw-about-values__grid h3{color:#ededee}#dkw.dkw-dark body.page-id-5 .dkw-about-team>div>h2,#dkw.dkw-dark body.dkw-page-about .dkw-about-team>div>h2{color:#ededee}} @media(min-width:1051px){#dkw.dkw-dark body.home .dkw-figma-hero{background-color:#28282d}#dkw.dkw-dark body.home .dkw-course-search{color:#ffffff;background-color:rgba(9,9,10,0.72);border-color:rgba(255,255,255,0.08)}#dkw.dkw-dark body.home .dkw-course-search input{color:#ffffff}#dkw.dkw-dark body.home .dkw-course-search input::placeholder{color:rgba(255,255,255,0.34)}#dkw.dkw-dark body.home .dkw-language__current,#dkw.dkw-dark body.home .dkw-theme-toggle{background-color:rgba(255,255,255,0.12)}} #dkw.dkw-dark .dkw-service-art{color:#ff8791} #dkw.dkw-dark .dkw-footer-bottom{background-color:transparent} #dkw.dkw-dark .dkw-footer-legal{color:rgba(255,255,255,0.58)} #dkw.dkw-dark .dkw-footer-bottom .dkw-footer-legal a{color:rgba(255,255,255,0.62)} #dkw.dkw-dark .dkw-footer-bottom .dkw-footer-legal a:first-child{color:#3ca0e0} #dkw.dkw-dark .dkw-footer-legal span{color:rgba(255,255,255,0.58)} @media(min-width:1051px){#dkw.dkw-dark body.page-id-5 .dkw-about-locations-intro,#dkw.dkw-dark body.dkw-page-about .dkw-about-locations-intro{background-color:transparent}#dkw.dkw-dark body.page-id-5 .dkw-about-location-card>div>a[href^="tel:"],#dkw.dkw-dark body.dkw-page-about .dkw-about-location-card>div>a[href^="tel:"]{color:#ededee}#dkw.dkw-dark body.page-id-5 .dkw-about-location-card>div>a[href^="tel:"]::after,#dkw.dkw-dark body.dkw-page-about .dkw-about-location-card>div>a[href^="tel:"]::after{background-color:transparent}#dkw.dkw-dark body.page-id-5 .dkw-about-location-card .dkw-location-save,#dkw.dkw-dark body.dkw-page-about .dkw-about-location-card .dkw-location-save{background-color:#1b1b1b}} @media(min-width:1051px){#dkw.dkw-dark .dkw-course-search{color:#ffffff;background-color:rgba(9,9,10,0.72);border-color:rgba(255,255,255,0.08)}#dkw.dkw-dark .dkw-course-search input{color:#ffffff}#dkw.dkw-dark .dkw-course-search input::placeholder{color:rgba(255,255,255,0.34)}#dkw.dkw-dark .dkw-language__current,#dkw.dkw-dark .dkw-theme-toggle{background-color:rgba(255,255,255,0.12)}} @media(min-width:1051px){#dkw.dkw-dark body.home .dkw-register-copy a:last-child{color:#84001a}} @media(min-width:1051px){#dkw.dkw-dark body.home .dkw-figma-courses{background-color:#212125}#dkw.dkw-dark body.home .dkw-courses-panel{background-color:#212125}#dkw.dkw-dark body.home .dkw-courses-panel>h2{color:#ededee}#dkw.dkw-dark body.home .dkw-figma-course-card{background-color:#28282d}#dkw.dkw-dark body.home .dkw-rating{color:#f5883a}} @media(min-width:1051px){#dkw.dkw-dark body.post-type-archive-dkw_course .dkw-figma-courses{background-color:#212125}#dkw.dkw-dark body.post-type-archive-dkw_course .dkw-courses-panel{background-color:#212125}#dkw.dkw-dark body.post-type-archive-dkw_course .dkw-courses-panel>h2{color:#ededee}#dkw.dkw-dark body.post-type-archive-dkw_course .dkw-figma-course-card{background-color:#28282d}#dkw.dkw-dark body.post-type-archive-dkw_course .dkw-rating{color:#f5883a}} @media(min-width:1051px){#dkw.dkw-dark body.page-template-page-legal .dkw-legal-sheet--terms .dkw-legal-cta p{color:#ff8791}} @media(min-width:1051px){#dkw.dkw-dark body.page-template-page-legal .dkw-legal-sheet--intro>p{color:#ededee}#dkw.dkw-dark body.page-template-page-legal .dkw-legal-sheet--intro .dkw-legal-more{color:#ffffff;background-color:#d93424}} @media(max-width:1050px){#dkw.dkw-dark .dkw-legal-sheet--intro .dkw-legal-more{color:#ffffff;background-color:#d93424}} @media(min-width:1880px){#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section:not(.dkw-course-visual-section--reverse) ul li:nth-child(-n+3)::before{background-color:#2d2422}} @media(min-width:1880px){#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section:not(.dkw-course-visual-section--reverse)::before{background-color:#212125}#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-visual-section:not(.dkw-course-visual-section--reverse)::after{background-color:#212125}} @media(min-width:1880px){#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-contact-buttons a{color:#ff8791;background-color:transparent;border-color:#6d1416}#dkw.dkw-dark body.dkw-rtl.single-dkw_course .dkw-course-page--arabic-teacher .dkw-course-contact-buttons a:first-child{color:#ffffff;background-color:#bd231d}} @media(min-width:1051px){#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page .dkw-course-contact-buttons a{color:#ff8791;background-color:transparent;border-color:#6d1416}#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page .dkw-course-contact-buttons a:nth-child(1){color:#ffffff;background-color:#bd231d}} @media(min-width:1051px){#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page-hero-shell{background-color:#212125}} @media(min-width:1051px){#dkw.dkw-dark body .dkw-register-card.dkw-course-register-card{background-color:#820e18}#dkw.dkw-dark body .dkw-register-card.dkw-course-register-card .dkw-register-form input,#dkw.dkw-dark body .dkw-register-card.dkw-course-register-card .dkw-register-form select{color:#dbdbdb}#dkw.dkw-dark body .dkw-register-card.dkw-course-register-card .dkw-register-form input::placeholder{color:#dbdbdb}} #dkw.dkw-dark body.single-dkw_course .dkw-detail-cover--course{background-color:#212125} #dkw.dkw-dark .dkw-figma-header{background-color:rgba(25,36,36,0.43)} @media(min-width:1880px){#dkw.dkw-dark .dkw-figma-menu .dkw-nav-dropdown>a>span{background-color:transparent}#dkw.dkw-dark .dkw-nav-actions .dkw-nav-separator{background-color:#3d4242}} @media(min-width:1880px){#dkw.dkw-dark body.home .dkw-why-card{background-color:transparent}#dkw.dkw-dark body.home .dkw-why-card::before{background-color:#34343a}#dkw.dkw-dark body.home .dkw-why-card::after{background-color:#212125}#dkw.dkw-dark body.home .dkw-why-card--red::before{background-color:#6d1416}#dkw.dkw-dark body.home .dkw-why-figma{background-color:#212125}} #dkw.dkw-dark body .dkw-register-card{background-color:#820e18} @media(max-width:1050px){#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page-hero-shell{background-color:#212125}#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page-hero-shell .dkw-detail-cover__card{background-color:#6d1416}#dkw.dkw-dark body.page-template-page-service-detail .dkw-service-page-hero-shell .dkw-detail-cover__card h1{color:#ffffff}#dkw.dkw-dark body.single-dkw_course .dkw-detail-cover{background-color:#212125}#dkw.dkw-dark body.page-id-5 .dkw-about-locations-intro,#dkw.dkw-dark body.page-template-page-about .dkw-about-locations-intro,#dkw.dkw-dark body.dkw-page-about .dkw-about-locations-intro{background-color:transparent}} @media (max-width: 1050px){#dkw#dkw.dkw-dark .dkw-figma-nav > .dkw-mobile-toggle,#dkw#dkw.dkw-dark .dkw-nav-actions .dkw-language__current,#dkw#dkw.dkw-dark .dkw-nav-actions > .dkw-theme-toggle{color:#ffffff;background-color:rgba(255,255,255,0.08);border-color:#3a3a40}#dkw#dkw.dkw-dark .dkw-figma-menu .dkw-subscribe-link{background-color:#84001a;border-color:#84001a}} /* Written by hand. */ #dkw.dkw-dark{color-scheme:dark;--dkw-paper:#212125;--dkw-ink:#ededee;--dkw-muted:#bdbdc3} #dkw.dkw-dark body{background-color:#1b1b1e} #dkw.dkw-dark input::placeholder,#dkw.dkw-dark textarea::placeholder{color:#9a9aa2} @media (min-width:1051px){ #dkw.dkw-dark .dkw-figma-hero .dkw-figma-hero__overlay{background:linear-gradient(rgba(0,0,0,.39) 0,rgba(0,0,0,.39) 95%,var(--dkw-fade,#212125) 100%)} #dkw.dkw-dark .dkw-about-page-hero__overlay{background:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0) 88%,var(--dkw-fade,#212125) 100%)} #dkw.dkw-dark .dkw-courses-archive-hero__overlay{background:linear-gradient(rgba(8,15,19,0) 0,rgba(8,15,19,0) 85%,var(--dkw-fade,#212125) 100%)} } @media (max-width:1050px){ #dkw.dkw-dark .dkw-about-final .dkw-about-page-hero__overlay{background:linear-gradient(180deg,rgba(13,8,8,.12) 0,rgba(18,9,9,.17) 52%,#212125 100%)} #dkw.dkw-dark .dkw-courses-archive-hero__overlay{background:linear-gradient(to bottom,rgba(8,15,19,.52) 0,rgba(8,15,19,.36) 64%,#212125 100%)} } #dkw.dkw-dark .dkw-study-method span{color:#fbe9eb!important;background:rgba(0,0,0,.28)!important} #dkw.dkw-dark .dkw-study-method input:checked+span{color:#84001a!important;background:#eccbcf!important} #dkw.dkw-dark .dkw-course-why-brand img,#dkw.dkw-dark .dkw-service-benefits-brand img{object-position:-99999px 0;background:url("../images/figma/dkw-logo-real-1-dark.svg") center/contain no-repeat} #dkw.dkw-dark .dkw-partners figure{background-color:#fff;border-radius:12px} #dkw.dkw-dark img[src*="/courses/conversation-1."]{object-position:-99999px 0;background:url("../images/figma/courses/conversation-1-dark.webp") center/contain no-repeat} #dkw.dkw-dark img[src*="/courses/student_thinking-art."]{object-position:-99999px 0;background:url("../images/figma/courses/student_thinking-art-dark.webp") center/contain no-repeat} #dkw.dkw-dark img[src*="/courses/student_thinking."]{object-position:-99999px 0;background:url("../images/figma/courses/student_thinking-dark.webp") center/contain no-repeat} /* 4.3.2: keep all four home benefits visible on compact desktop widths. */ @media (min-width:1051px) and (max-width:1879px){ body.home .dkw-why-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,60px);justify-content:stretch} body.home .dkw-why-card{width:auto;min-width:0} } /* 4.3.2: the About photo must remain fully visible on phones. */ @media (max-width:700px){ body.page-template-page-about .dkw-about-story__media,body.page-id-5 .dkw-about-story__media,body.dkw-page-about .dkw-about-story__media{height:auto;aspect-ratio:auto} body.page-template-page-about .dkw-about-story__media>img,body.page-id-5 .dkw-about-story__media>img,body.dkw-page-about .dkw-about-story__media>img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center} }