/* * The Creative Education website: Direction A, "Clear". * * One stylesheet, loaded on the site and in the editor. Patterns are built from * core blocks with the class names below; nothing in a pattern carries an * inline colour or size, so dark mode and any later change of palette happen * here and nowhere else. * * The tokens (section 1) are learn.'s src/styles/tokens.css, written in by * tools/theme/build_tokens.py. Every colour below is a var(--ce-*); CI fails * on a hex colour anywhere else (tools/theme/check_colours.py). * * Contents: 1 tokens · 2 base · 3 buttons · 4 sections · 5 type helpers · * 6 cards and grids · 7 hero · 8 steps · 9 pricing · 10 testimonial · 11 FAQ · * 12 CTA and enquiry · 13 courses · 14 resources · 15 header · 16 footer · * 17 prose (posts, legal) · 18 forms · 19 catalogue · 20 misc */ /* 1 Tokens ------------------------------------------------------------- */ /* tokens:start — generated by tools/theme/build_tokens.py from the platform's src/styles/tokens.css. Do not edit. */ :root { /* Type. learn. loads the same two faces with next/font. */ --ce-font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --ce-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --ce-text-small: 0.9375rem; --ce-text-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --ce-text-lead: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); --ce-text-card: clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem); --ce-text-section: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); --ce-text-display: clamp(2.5rem, 1.4rem + 4vw, 4.375rem); /* Shape and measure */ --ce-r-pill: 999px; --ce-r-panel: 32px; --ce-r-card: 20px; --ce-r-card-sm: 16px; --ce-r-control: 12px; --ce-wide: 82rem; /* 1312px: 1440 less 64px each side */ --ce-text: 47.5rem; /* 760px reading column */ --ce-form: 42rem; /* a form's column on learn. (design language audit, 11 October 2026) */ --ce-reading: 45rem; /* a page of reading on learn.: a lesson, a certificate's facts */ --ce-gx: clamp(1rem, 4.4vw, 4rem); /* side gutter: 16px on a phone, 64px at 1440 */ --ce-sy: clamp(3.5rem, 6.7vw, 6rem); /* section padding: 56px to 96px */ /* The header, wider than 1180px, where the menu is in a row. It tightens from 1440px down so every item stays on one line at 1181px. */ --ce-header-logo: clamp(2.25rem, 1.11rem + 1.544vw, 2.5rem); --ce-header-gap: clamp(1rem, -0.14rem + 1.544vw, 1.25rem); --ce-header-px: clamp(1.5rem, -5.34rem + 9.266vw, 3rem); --ce-nav-px: clamp(0.4375rem, -0.4175rem + 1.158vw, 0.625rem); --ce-nav-text: clamp(0.875rem, 0.59rem + 0.386vw, 0.9375rem); --ce-header-button-px: clamp(1rem, -0.14rem + 1.544vw, 1.25rem); --ce-header-button-text: clamp(0.9375rem, 0.6525rem + 0.386vw, 1rem); /* Surfaces. The website's page is canvas, with paper and sky as bands. The signed-in app's page is app-canvas: paper by day, so white cards lift off it (as the handoff's own product screens draw it), and canvas at night. */ --ce-canvas: #ffffff; --ce-app-canvas: #f4f6fa; --ce-paper: #f4f6fa; --ce-card: #ffffff; --ce-sky: #e8eefa; --ce-sky-line: #c9d6f2; /* Lines. line is decorative; control is the edge of a control and has to clear 3:1 (1.4.11). */ --ce-line: #d5dbe6; --ce-control: #7a8499; /* Text */ --ce-ink: #131a2e; --ce-muted: #4a5470; /* Links are link blue, and navy under the pointer. */ --ce-link: #27519f; --ce-link-hover: #1b3a6b; /* Navy. navy is the band and stays navy at night. strong is navy text, outlines and the solid button, and lifts to light blue at night. */ --ce-navy: #1b3a6b; --ce-navy-line: #8a9cc4; /* not the handoff's: the edge a navy band needs on the dark page, 3:1 */ --ce-on-navy-strong: #ffffff; /* headings and links on a navy band */ --ce-on-navy: #e3e9f5; --ce-on-navy-muted: #c9d6f2; --ce-strong: #1b3a6b; --ce-strong-hover: #131a2e; --ce-strong-soft: #e4e9f2; --ce-on-strong: #ffffff; /* Yellow: fills only, never text, and the same by day and night. */ --ce-yellow: #fcd916; --ce-yellow-hover: #eccb0c; --ce-on-yellow: #131a2e; --ce-yellow-body: #4a5470; /* Status. Success and error are the handoff's; their tints and the warning pair are the ones its product screens draw. */ --ce-success: #0f6b3e; --ce-success-tint: #e3f3ea; --ce-warning: #5c4a00; --ce-warning-tint: #fff7cc; --ce-error: #b3261e; --ce-error-tint: #fbeae8; --ce-error-on-navy: #ff9b8f; /* a cross on a navy band: the night error red, which clears 4.5:1 there */ /* Focus: a link-blue ring by day, yellow at night and on navy. */ --ce-focus: #27519f; --ce-focus-on-navy: #fcd916; /* The footer: an ink band. */ --ce-footer: #131a2e; --ce-footer-line: #2c3654; --ce-footer-field: #182038; --ce-on-footer: #eef1f7; --ce-footer-link: #c9d3e6; --ce-footer-muted: #aab3c7; /* Subjects: tags, icons and course covers only, always with the subject's name beside them. Each has a full colour (motifs, dots), a tint (cover and tag backgrounds) and a text shade (the name). Which subject a topic belongs to is in src/styles/subjects.json. */ --ce-safeguarding: #1b3a6b; --ce-safeguarding-tint: #e4e9f2; --ce-safeguarding-text: #1b3a6b; --ce-mental-health: #0f6b66; --ce-mental-health-tint: #dcefed; --ce-mental-health-text: #0b4f4b; --ce-send: #6b2f63; --ce-send-tint: #f1e3ef; --ce-send-text: #6b2f63; --ce-behaviour: #a4431f; --ce-behaviour-tint: #f8e5dc; --ce-behaviour-text: #8a3517; --ce-leadership: #8a6a00; /* ochre, not blue: three blues beside a navy brand could not be told apart (wireframes v6.3) */ --ce-leadership-tint: #f7eecb; --ce-leadership-text: #6b5200; --ce-teaching: #2f6b2a; --ce-teaching-tint: #e2efdc; --ce-teaching-text: #24561f; --ce-curriculum: #a3285a; --ce-curriculum-tint: #f8e1ea; --ce-curriculum-text: #8a1f4b; --ce-neutral: #7a8499; --ce-neutral-tint: #f4f6fa; --ce-neutral-text: #4a5470; --ce-shadow-card: 0 1px 2px rgb(19 26 46 / 0.05), 0 2px 8px rgb(19 26 46 / 0.06); --ce-shadow-panel: 0 2px 16px rgb(19 26 46 / 0.12); --ce-shadow-pop: 0 18px 40px rgb(19 26 46 / 0.14); /* WordPress's presets point at the tokens, so dark mode reaches blocks too. */ --wp--preset--color--canvas: var(--ce-canvas); --wp--preset--color--paper: var(--ce-paper); --wp--preset--color--sky: var(--ce-sky); --wp--preset--color--line: var(--ce-line); --wp--preset--color--control: var(--ce-control); --wp--preset--color--ink: var(--ce-ink); --wp--preset--color--muted: var(--ce-muted); --wp--preset--color--navy: var(--ce-navy); --wp--preset--color--link: var(--ce-link); --wp--preset--color--yellow: var(--ce-yellow); --wp--preset--color--success: var(--ce-success); --wp--preset--color--error: var(--ce-error); --wp--preset--color--on-navy: var(--ce-on-navy); --wp--preset--color--on-navy-muted: var(--ce-on-navy-muted); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:root { --ce-canvas: #0e1322; --ce-app-canvas: #0e1322; --ce-paper: #182038; --ce-card: #182038; --ce-sky: #243056; --ce-sky-line: #3a4a78; --ce-line: #2c3654; --ce-control: #737e98; /* not the handoff's #6b7690: that reaches 2.83:1 on sky; this clears 3:1 */ --ce-ink: #eef1f7; --ce-muted: #aab3c7; --ce-link: #9dbaf2; --ce-link-hover: #c6daff; --ce-strong: #9dbaf2; --ce-strong-hover: #c6daff; --ce-strong-soft: #1f2b4d; --ce-on-strong: #0e1322; --ce-success: #7fd1a4; --ce-success-tint: #15302a; --ce-warning: #f0c85c; --ce-warning-tint: #2e2a1a; --ce-error: #ff9b8f; --ce-error-tint: #3a1f24; --ce-focus: #fcd916; --ce-footer: #0a0e1a; --ce-safeguarding: #7f9ed6; --ce-safeguarding-tint: #1f2b4d; --ce-safeguarding-text: #b7c7e6; --ce-mental-health: #4fb3aa; --ce-mental-health-tint: #14302e; --ce-mental-health-text: #7cc7c0; --ce-send: #c97fbd; --ce-send-tint: #2e1c2c; --ce-send-text: #e0a3d6; --ce-behaviour: #e08a64; --ce-behaviour-tint: #33201a; --ce-behaviour-text: #f2a584; --ce-leadership: #d9b44a; --ce-leadership-tint: #2e2716; --ce-leadership-text: #e8c96a; --ce-teaching: #7cbf6e; --ce-teaching-tint: #1a2c17; --ce-teaching-text: #9ed492; --ce-curriculum: #e07aa3; --ce-curriculum-tint: #331a25; --ce-curriculum-text: #f0a3c2; --ce-neutral-tint: #1d2640; --ce-neutral-text: #aab3c7; --ce-shadow-card: 0 1px 2px rgb(0 0 0 / 0.4); --ce-shadow-panel: 0 2px 16px rgb(0 0 0 / 0.5); --ce-shadow-pop: 0 18px 40px rgb(0 0 0 / 0.5); color-scheme: dark; } } /* tokens:end */ /* 2 Base ----------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; } body { margin: 0; background: var(--ce-canvas); color: var(--ce-ink); font-family: var(--ce-font-body); -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0; text-wrap: balance; } h1 { letter-spacing: -0.04em; line-height: 1.02; } h2 { letter-spacing: -0.03em; } h3 { letter-spacing: -0.02em; } p { margin: 0; text-wrap: pretty; } a { color: var(--ce-link); text-underline-offset: 3px; } a:hover { color: var(--ce-link-hover); } :focus-visible { outline: 3px solid var(--ce-focus); outline-offset: 3px; } .ce-on-navy :focus-visible, .ce-s--navy :focus-visible, .ce-footer :focus-visible, .ce-linkband :focus-visible, .ce-card--navy :focus-visible { outline-color: var(--ce-focus-on-navy); } .screen-reader-text, .ce-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ce-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1.25rem; border-radius: var(--ce-r-pill); background: var(--ce-yellow); color: var(--ce-on-yellow); font-weight: 700; text-decoration: none; } .ce-skip:focus { top: 1rem; } main { display: block; } /* WordPress's own spacing is switched off (theme.json blockGap 0); spacing lives here. */ .wp-site-blocks > * + * { margin-block-start: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* 3 Buttons --------------------------------------------------------------- */ .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; } .wp-block-buttons.is-content-justification-center { justify-content: center; } .wp-block-button__link, .ce-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.25rem; padding: 0 1.625rem; border-radius: var(--ce-r-pill); background: var(--ce-yellow); color: var(--ce-on-yellow); border: 0; font: 700 1.0625rem/1.2 var(--ce-font-body); text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.15s; } .wp-block-button__link:hover, .ce-btn:hover { color: var(--ce-on-yellow); background: var(--ce-yellow-hover); } .ce-actions--lg .wp-block-button__link, .ce-btn--lg { min-height: 3.5rem; padding-inline: 1.875rem; font-size: 1.125rem; } /* Secondary: outline navy */ .is-style-secondary .wp-block-button__link, .ce-btn--secondary { background: transparent; color: var(--ce-strong); box-shadow: inset 0 0 0 2px var(--ce-strong); } .is-style-secondary .wp-block-button__link:hover, .ce-btn--secondary:hover { color: var(--ce-strong); background: var(--ce-paper); } /* Solid navy: inside cards */ .is-style-solid .wp-block-button__link, .ce-btn--solid { background: var(--ce-strong); color: var(--ce-on-strong); } .is-style-solid .wp-block-button__link:hover, .ce-btn--solid:hover { color: var(--ce-on-strong); background: var(--ce-strong-hover); } /* White: on a navy band, next to a yellow one */ .is-style-inverse .wp-block-button__link, .ce-btn--inverse { background: transparent; color: var(--ce-on-navy-strong); box-shadow: inset 0 0 0 2px var(--ce-on-navy-strong); } .is-style-inverse .wp-block-button__link:hover, .ce-btn--inverse:hover { color: var(--ce-on-navy-strong); background: rgba(255, 255, 255, 0.08); } .is-style-white .wp-block-button__link, .ce-btn--white { background: var(--ce-on-navy-strong); color: var(--ce-navy); } .is-style-white .wp-block-button__link:hover, .ce-btn--white:hover { color: var(--ce-navy); background: var(--ce-on-navy); } .ce-btn--block, .ce-actions--block .wp-block-button, .ce-actions--block .wp-block-button__link { width: 100%; } /* An arrow link: "See how it works →" */ .ce-arrow a, a.ce-arrow { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 700; color: var(--ce-strong); text-decoration: none; } .ce-arrow a::after, a.ce-arrow::after { content: ""; width: 1.125rem; height: 1.125rem; flex-shrink: 0; background: currentColor; -webkit-mask: var(--ce-i-arrow) center / contain no-repeat; mask: var(--ce-i-arrow) center / contain no-repeat; } .ce-arrow a:hover, a.ce-arrow:hover { text-decoration: underline; } /* 4 Sections -------------------------------------------------------------- */ /* Every pattern is a section: full width, its content held to the wide measure. */ .ce-s { position: relative; padding: var(--ce-sy) var(--ce-gx); display: flex; flex-direction: column; gap: clamp(1.75rem, 3vw, 2.75rem); } .ce-s > * { width: 100%; max-width: var(--ce-wide); margin-inline: auto !important; } .ce-s--paper { background: var(--ce-paper); } .ce-s--navy { background: var(--ce-navy); color: var(--ce-on-navy-strong); } .ce-s--navy h2, .ce-s--navy h3 { color: var(--ce-on-navy-strong); } .ce-s--navy p { color: var(--ce-on-navy); } .ce-s--navy a:not(.wp-block-button__link):not(.ce-btn) { color: var(--ce-on-navy-strong); } .ce-s--top-0 { padding-top: 0; } .ce-s--bottom-0 { padding-bottom: 0; } .ce-s--center { text-align: center; align-items: center; } .ce-s--center > * { max-width: 44rem; } .ce-s--center .wp-block-buttons { justify-content: center; } .ce-s--narrow > * { max-width: var(--ce-text); } /* An inset panel: a rounded band inside the gutters (testimonials, some CTAs) */ .ce-s--inset { margin: 0 var(--ce-gx); padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4.5rem); border-radius: clamp(1.25rem, 2.2vw, var(--ce-r-panel)); background: var(--ce-sky); } @media (min-width: 1440px) { .ce-s--inset { margin-inline: calc((100% - var(--ce-wide)) / 2); } } .ce-s--inset.ce-s--navy { background: var(--ce-navy); } .ce-s--inset.ce-s--paper { background: var(--ce-paper); } .ce-s--inset > * { max-width: none; } /* Space around an inset panel, so it isn't flush with its neighbours */ .ce-s--inset { margin-block: var(--ce-sy); } .ce-s--inset + .ce-s:not(.ce-s--paper):not(.ce-s--navy) { padding-top: 0; } .ce-s:not(.ce-s--paper):not(.ce-s--navy):not(.ce-s--inset) + .ce-s--inset { margin-top: 0; } /* A section's heading row: heading (and intro) on the left, a link or intro on the right */ .ce-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 4rem; flex-wrap: wrap; } .ce-head > :first-child { flex: 1 1 28rem; } .ce-head > .ce-intro, .ce-head > p { flex: 0 1 32.5rem; font-size: 1.0625rem; line-height: 1.55; color: var(--ce-muted); } .ce-s--navy .ce-head > p { color: var(--ce-on-navy); } .ce-head .ce-arrow { flex: 0 0 auto; } .ce-head--stacked { flex-direction: column; align-items: flex-start; gap: 1rem; } .ce-head.ce-head--stacked > * { flex: none; } .ce-head--stacked > p { max-width: 46rem; } .ce-proof { margin-top: 1.75rem; font-weight: 700; color: var(--ce-ink); } .ce-head__text { display: flex; flex-direction: column; gap: 0.75rem; } .ce-head__text > p { font-size: 1.125rem; color: var(--ce-muted); } /* 5 Type helpers ------------------------------------------------------------ */ .ce-eyebrow { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ce-link); } .ce-s--navy .ce-eyebrow, .ce-on-navy .ce-eyebrow { color: var(--ce-on-navy-muted); } .ce-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; color: var(--ce-muted); max-width: 37.5rem; } .ce-muted { color: var(--ce-muted); } .ce-small { font-size: 0.9375rem; line-height: 1.5; color: var(--ce-muted); } .ce-strong { font-weight: 700; } .ce-note { font-size: 0.9375rem; line-height: 1.5; color: var(--ce-muted); } .ce-s--navy .ce-note { color: var(--ce-on-navy-muted); } .ce-h-sm { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); } .ce-h-cta { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1.02; letter-spacing: -0.035em; } .ce-label { font-weight: 700; font-size: 1.125rem; } .ce-figure { font-family: var(--ce-font-display); font-weight: 800; font-size: clamp(2.25rem, 1.8rem + 1.4vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.05; } /* A row of facts with icons: "52 minutes · 1 CPD hour · Certificate" */ .ce-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: 1rem; font-weight: 600; } .ce-facts li, .ce-facts > p { display: inline-flex; align-items: center; gap: 0.5rem; } .ce-facts li::before, .ce-facts > p::before { content: ""; width: 1.25rem; height: 1.25rem; flex-shrink: 0; background: var(--ce-success); -webkit-mask: var(--ce-i-tick) center / contain no-repeat; mask: var(--ce-i-tick) center / contain no-repeat; } /* Tick and cross lists */ .ce-ticks, .ce-crosses { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; font-size: 1.0625rem; line-height: 1.5; } .ce-ticks li, .ce-crosses li { position: relative; padding-left: 2rem; } .ce-ticks li::before, .ce-crosses li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.25rem; height: 1.25rem; background: var(--ce-success); -webkit-mask: var(--ce-i-tick) center / contain no-repeat; mask: var(--ce-i-tick) center / contain no-repeat; } .ce-crosses li::before { background: var(--ce-error); -webkit-mask-image: var(--ce-i-cross); mask-image: var(--ce-i-cross); } .ce-s--navy .ce-ticks li::before { background: var(--ce-yellow); } .ce-ticks--2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.875rem 2rem; } /* The design's placeholder labels: "Sample quote" */ .ce-sample { font-size: 0.8em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* 6 Cards and grids ------------------------------------------------------------ */ .ce-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(var(--ce-cols, 3), minmax(0, 1fr)); } .ce-grid--2 { --ce-cols: 2; gap: 1.5rem; } .ce-grid--3 { --ce-cols: 3; } .ce-grid--4 { --ce-cols: 4; } .ce-grid--5 { --ce-cols: 5; } @media (max-width: 1100px) { .ce-grid--4, .ce-grid--5 { --ce-cols: 2; } .ce-grid--3 { --ce-cols: 2; } } @media (max-width: 680px) { .ce-grid { --ce-cols: 1 !important; } } /* Cards in a row share their rows, so headings and text line up across the row when the cards are built alike (icon, heading, text, arrow link). Each card spans one row per block it holds, so a card built differently never overlaps. */ .ce-grid--align > .ce-card { display: grid; grid-template-rows: subgrid; grid-row: span 1; row-gap: 0.75rem; align-content: start; } .ce-grid--align > .ce-card:has(> :nth-child(2)) { grid-row: span 2; } .ce-grid--align > .ce-card:has(> :nth-child(3)) { grid-row: span 3; } .ce-grid--align > .ce-card:has(> :nth-child(4)) { grid-row: span 4; } .ce-grid--align > .ce-card:has(> :nth-child(5)) { grid-row: span 5; } .ce-grid--align > .ce-card:has(> :nth-child(6)) { grid-row: span 6; } .ce-grid--align > .ce-card > .ce-arrow { align-self: end; } /* Add-ons under a set of price bands */ .ce-addons { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: flex; flex-direction: column; gap: 1.25rem; } .ce-addons > h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); } .ce-addons .ce-card__top { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .ce-card { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; border-radius: var(--ce-r-card); background: var(--ce-paper); color: var(--ce-ink); } .ce-s--paper .ce-card, .ce-card--white { background: var(--ce-card); } .ce-card--line { background: transparent; box-shadow: inset 0 0 0 1px var(--ce-line); } .ce-s--paper .ce-card--line { background: var(--ce-card); } .ce-card--yellow { background: var(--ce-yellow); color: var(--ce-on-yellow); } .ce-card--yellow h3, .ce-card--yellow p, .ce-card--yellow a { color: var(--ce-on-yellow) !important; } .ce-card--navy { background: var(--ce-navy); color: var(--ce-on-navy-strong); } .ce-card--navy h3 { color: var(--ce-on-navy-strong); } .ce-card--navy p { color: var(--ce-on-navy); } .ce-card--lg { padding: 2rem; gap: 0.875rem; } .ce-card--tall { min-height: 12.875rem; } .ce-card p { font-size: 1rem; line-height: 1.58; color: var(--ce-muted); } .ce-card--lg p { font-size: 1.0625rem; line-height: 1.6; } .ce-card h3 { font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem); } .ce-card > .ce-arrow, .ce-card > .wp-block-buttons { margin-top: auto; } .ce-card > .ce-arrow { padding-top: 0.25rem; } /* A whole card that's a link: the arrow link stretches over the card */ .ce-card--link .ce-arrow a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } .ce-card--link:hover { box-shadow: inset 0 0 0 2px var(--ce-strong); } .ce-card--link.ce-card--yellow:hover { box-shadow: inset 0 0 0 2px var(--ce-on-yellow); } .ce-card--link:focus-within { outline: 3px solid var(--ce-focus); outline-offset: 3px; } .ce-card--link .ce-arrow a:focus-visible { outline: none; } /* A card whose heading sits on one line with a price or tag */ .ce-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .ce-card__top > p { font-weight: 700; color: var(--ce-ink) !important; } .ce-card__top h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); } /* Icons (the ce/icon block) */ .ce-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ce-strong); } .ce-icon svg { width: 1.5rem; height: 1.5rem; } .ce-icon--tile { width: 3.25rem; height: 3.25rem; border-radius: 0.875rem; background: var(--ce-navy); color: var(--ce-on-navy-strong); } .ce-icon--tile svg { width: 1.625rem; height: 1.625rem; } .ce-icon--soft { width: 3rem; height: 3rem; border-radius: 0.75rem; background: var(--ce-sky); color: var(--ce-strong); } .ce-icon--round { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--ce-sky); color: var(--ce-strong); } .ce-icon--round svg { width: 1.25rem; height: 1.25rem; } .ce-icon--yellow { width: 3rem; height: 3rem; border-radius: 0.75rem; background: var(--ce-yellow); color: var(--ce-on-yellow); } .ce-icon--bare svg { width: 2rem; height: 2rem; } .ce-card--yellow .ce-icon { color: var(--ce-on-yellow); } .ce-s--navy .ce-icon--bare { color: var(--ce-yellow); } /* A number badge */ .ce-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--ce-yellow); color: var(--ce-on-yellow); font: 800 1rem/1 var(--ce-font-display); flex-shrink: 0; } /* A photo in a card or beside text */ .ce-photo img, img.ce-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--ce-r-card); } .ce-photo { margin: 0; } .ce-photo--tall img { aspect-ratio: 13 / 10; } .ce-photo--wide img { aspect-ratio: 16 / 9; } /* Split: two columns of content, text and something else */ .ce-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .ce-split--start { align-items: start; } .ce-split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem); } .ce-split--wide-left { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); } @media (max-width: 900px) { .ce-split { grid-template-columns: minmax(0, 1fr) !important; } } .ce-stack { display: flex; flex-direction: column; gap: 1.25rem; } .ce-stack--tight { gap: 0.625rem; } .ce-stack--loose { gap: 1.625rem; } /* 7 Hero --------------------------------------------------------------------- */ .ce-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 37.5rem); gap: clamp(2rem, 4.5vw, 4rem); align-items: center; } .ce-hero > .ce-stack { gap: 1.625rem; } .ce-s.ce-s--hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(3.5rem, 6vw, 5rem); } .ce-hero h1 { font-size: var(--wp--preset--font-size--display); } .ce-hero__offer { display: flex; flex-direction: column; gap: 0.5rem; font-size: 1rem; } .ce-hero__offer p:first-child { font-weight: 700; } .ce-hero__offer p + p { color: var(--ce-muted); } @media (max-width: 1000px) { .ce-hero { grid-template-columns: minmax(0, 1fr); } } /* Hero, compact: centred, no picture */ .ce-hero--compact { text-align: center; align-items: center; display: flex; flex-direction: column; gap: 1.25rem; } .ce-hero--compact .ce-lead { margin-inline: auto; } .ce-hero--compact .wp-block-buttons { justify-content: center; } .ce-hero--compact h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); } .ce-hero--left { text-align: left; align-items: flex-start; } .ce-hero--left .ce-lead { margin-inline: 0; } .ce-hero--left .wp-block-buttons { justify-content: flex-start; } /* Hero, course variant: paper band with breadcrumb */ .ce-s--hero-course { background: var(--ce-paper); padding-top: 1.75rem; padding-bottom: clamp(3.5rem, 6vw, 5rem); gap: 2.25rem; } .ce-hero--course { grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem); gap: clamp(2rem, 5vw, 4.5rem); } .ce-hero--course h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.625rem); letter-spacing: -0.035em; line-height: 1.03; } .ce-hero--course .ce-hero__media img, .ce-hero--course .ce-hero__media .ce-cover { width: 100%; height: clamp(15rem, 28vw, 25rem); object-fit: cover; border-radius: 1.5rem; display: block; } @media (max-width: 1000px) { .ce-hero--course { grid-template-columns: minmax(0, 1fr); } .ce-hero--course .ce-hero__media { order: -1; } } /* The product-screen panel beside a hero */ /* Real product screenshots (the ce/shot block) */ .ce-shot { margin: 0; border-radius: 0.875rem; overflow: hidden; background: var(--ce-card); box-shadow: 0 0 0 1px var(--ce-line), var(--ce-shadow-pop, 0 18px 40px -18px rgba(19, 26, 46, 0.35)); } .ce-shot img { display: block; width: 100%; height: auto; } .ce-shot--phone { max-width: 19rem; margin-inline: auto; border-radius: 2rem; border: 0.5rem solid var(--ce-ink); box-shadow: var(--ce-shadow-pop, 0 18px 40px -18px rgba(19, 26, 46, 0.35)); } .ce-shots { border-radius: var(--ce-r-panel); padding: clamp(1.5rem, 3vw, 2.75rem) 0 0 clamp(1.5rem, 3vw, 2.75rem); overflow: hidden; background: var(--ce-sky); } .ce-shots--yellow { background: var(--ce-yellow); } .ce-shots--paper { background: var(--ce-paper); } .ce-shots .ce-shot--screen { border-radius: 0.875rem 0 0 0; margin-right: -1px; } .ce-shots:has(.ce-shot--phone) { padding: clamp(1.5rem, 3vw, 2.75rem); } /* In a step card, the top-left of the screen, larger, cropped by the card */ .ce-step__screen:has(.ce-shot) { align-items: flex-start; justify-content: flex-start; } .ce-step__screen .ce-shot { flex: none; width: 165%; margin: 1.25rem 0 0 1.25rem; border-radius: 0.625rem 0 0 0; } .ce-step__screen .ce-shot--phone { width: 60%; margin: 1.25rem auto 0; border-radius: 1.25rem 1.25rem 0 0; border-bottom: 0; } .ce-screens { position: relative; height: 35rem; border-radius: var(--ce-r-panel); background: var(--ce-yellow); overflow: hidden; } .ce-screens--sky { background: var(--ce-sky); } .ce-screens--paper { background: var(--ce-paper); } .ce-screens--shot { height: auto; padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; align-items: center; justify-content: center; } .ce-screens__sun { position: absolute; right: -8rem; bottom: -8rem; width: 26rem; opacity: 0.3; pointer-events: none; } .ce-screens__a { position: absolute; left: 2.5rem; top: 2.5rem; } .ce-screens__b { position: absolute; right: 1.5rem; bottom: 1.75rem; } .ce-screens--b-left .ce-screens__a { left: 3.75rem; top: 2.25rem; } .ce-screens--b-left .ce-screens__b { right: auto; left: 1.5rem; } @media (max-width: 1000px) { .ce-screens { height: auto; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .ce-screens__a, .ce-screens__b { position: static; } .ce-screens__b { display: none; } } @media (max-width: 560px) { .ce-screens { border-radius: 1.5rem; padding: 1rem; } } /* A drawn product screen (the ce/screen block) */ .ce-screen { --s: 1; width: calc(480px * var(--s)); height: calc(var(--h) * var(--s)); overflow: hidden; color: #131a2e; font-family: var(--ce-font-body); max-width: 100%; } .ce-screen__inner { width: 480px; transform: scale(var(--s)); transform-origin: 0 0; padding: 4px; } @media (max-width: 560px) { .ce-screen { --s: 0.62 !important; } } /* Breadcrumb */ .ce-crumbs { font-size: 0.9375rem; color: var(--ce-muted); } .ce-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; margin: 0; padding: 0; list-style: none; } .ce-crumbs li + li::before { content: "/"; margin-right: 0.625rem; } .ce-crumbs a { color: var(--ce-link); } /* 8 Steps ------------------------------------------------------------------------- */ .ce-steps { display: grid; grid-template-columns: repeat(var(--ce-cols, 4), minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: ce-step; } .ce-steps--3 { --ce-cols: 3; } .ce-steps--5 { --ce-cols: 5; gap: 1rem; } .ce-steps--5 .ce-step--plain { padding: 1.5rem; } @media (max-width: 1100px) { .ce-steps { --ce-cols: 2; } } @media (max-width: 680px) { .ce-steps { --ce-cols: 1; } } .ce-step { counter-increment: ce-step; display: flex; flex-direction: column; border-radius: var(--ce-r-card); background: var(--ce-card); color: var(--ce-ink); overflow: hidden; } .ce-s--paper .ce-step, .ce-s--canvas .ce-step { box-shadow: inset 0 0 0 1px var(--ce-line); } .ce-step__screen { height: 15.625rem; background: var(--ce-paper); display: flex; align-items: center; justify-content: center; overflow: hidden; } .ce-step__screen .ce-screen { --s: 0.6 !important; } .ce-step__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; } .ce-step__body::before { content: counter(ce-step); display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--ce-yellow); color: var(--ce-on-yellow); font: 800 1rem/1 var(--ce-font-display); } .ce-step h3 { font-size: 1.375rem; letter-spacing: -0.01em; color: var(--ce-ink) !important; } .ce-step p { font-size: 1rem; line-height: 1.55; color: var(--ce-muted) !important; } /* Steps without screens: numbered cards */ .ce-step--plain { padding: 1.75rem; gap: 0.75rem; background: var(--ce-paper); } .ce-s--paper .ce-step--plain { background: var(--ce-card); box-shadow: none; } .ce-step--plain::before { content: counter(ce-step); display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--ce-yellow); color: var(--ce-on-yellow); font: 800 1rem/1 var(--ce-font-display); } /* 9 Pricing -------------------------------------------------------------------------- */ .ce-band { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.75rem; border-radius: var(--ce-r-card); box-shadow: inset 0 0 0 1px var(--ce-line); background: var(--ce-canvas); } .ce-s--paper .ce-band { background: var(--ce-card); } .ce-band > .wp-block-buttons { margin-top: auto; padding-top: 0.625rem; } .ce-band .wp-block-button, .ce-band .wp-block-button__link { width: 100%; } .ce-band .ce-label { font-size: 1.125rem; } .ce-band .ce-small { font-size: 0.9375rem; } .ce-band--feature { box-shadow: inset 0 0 0 2px var(--ce-strong); } .ce-band--paper { background: var(--ce-paper); box-shadow: none; } /* The comparison table */ .ce-table { overflow-x: auto; } .ce-table table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ce-line); border-radius: var(--ce-r-card); overflow: hidden; font-size: 1rem; } /* WordPress's table block draws dark borders on every cell and a 3px line under the head: take them all off, then draw ours. */ .wp-block-table.ce-table :is(thead, tbody, tfoot, tr, th, td) { border: 0; } .wp-block-table.ce-table th, .wp-block-table.ce-table td { padding: 1.125rem 1.25rem; text-align: left; vertical-align: top; border-top: 1px solid var(--ce-line); } .wp-block-table.ce-table table > :first-child > tr:first-child > :is(th, td) { border-top: 0; } .ce-table thead th { background: var(--ce-paper); font-weight: 700; } .wp-block-table.ce-table :is(td + td, th + th, th + td) { border-left: 1px solid var(--ce-line); } .ce-table tbody th, .ce-table td:first-child { background: var(--ce-paper); font-weight: 600; } .ce-table strong { font-family: var(--ce-font-display); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.02em; } .ce-table figcaption, .ce-table .wp-element-caption { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ce-muted); } @media (max-width: 800px) { .ce-table table:has(tr > :nth-child(4)) { min-width: 44rem; } /* On a phone the row names stay put while the bands scroll past them. */ .ce-table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--ce-line); } } /* 10 Testimonial ---------------------------------------------------------------------- */ .ce-testimonial { display: grid; grid-template-columns: minmax(0, 23.75rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .ce-testimonial--quote-only { grid-template-columns: minmax(0, 1fr); } @media (max-width: 900px) { .ce-testimonial { grid-template-columns: minmax(0, 1fr); } } .ce-rating { display: flex; flex-direction: column; gap: 0.625rem; } .ce-rating__figure { font: 800 clamp(4.5rem, 3rem + 5vw, 7.5rem)/0.9 var(--ce-font-display); letter-spacing: -0.05em; color: var(--ce-strong); } .ce-rating__text { font-size: 1.1875rem; line-height: 1.45; font-weight: 600; } .ce-rating__source { font-size: 0.875rem; color: var(--ce-muted); } .ce-rating .ce-eyebrow { color: var(--ce-strong); } .ce-quote, .wp-block-quote.ce-quote { margin: 0; padding: 0 0 0 clamp(0rem, 4vw, 3.5rem); border: 0; border-left: 2px solid var(--ce-sky-line); display: flex; flex-direction: column; gap: 1.375rem; } .ce-testimonial--quote-only .ce-quote { border-left: 0; padding-left: 0; } @media (max-width: 900px) { .ce-quote, .wp-block-quote.ce-quote { border-left: 0; padding-left: 0; border-top: 2px solid var(--ce-sky-line); padding-top: 1.5rem; } } .ce-quote::before { content: ""; width: 2.75rem; height: 2.25rem; background: var(--ce-strong); -webkit-mask: var(--ce-i-quote) left center / contain no-repeat; mask: var(--ce-i-quote) left center / contain no-repeat; } .ce-quote p { font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.25 var(--ce-font-display); letter-spacing: -0.02em; color: var(--ce-ink); } .ce-quote cite { font-style: normal; font-size: 1.0625rem; color: var(--ce-muted); } /* 11 FAQ -------------------------------------------------------------------------------- */ .ce-faq { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: clamp(1.75rem, 4.5vw, 4rem); align-items: start; } @media (max-width: 900px) { .ce-faq { grid-template-columns: minmax(0, 1fr); } } .ce-faq__list { border-top: 1px solid var(--ce-line); } .ce-faq .wp-block-details { border-bottom: 1px solid var(--ce-line); padding: 0; margin: 0; } .ce-faq .wp-block-details summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 4.75rem; padding: 0.75rem 0; font-weight: 700; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.35; cursor: pointer; list-style: none; } .ce-faq .wp-block-details summary::-webkit-details-marker { display: none; } .ce-faq .wp-block-details summary::after { content: ""; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 999px; background: var(--ce-paper) var(--ce-i-plus-ink) center / 1.125rem no-repeat; } .ce-faq .wp-block-details[open] summary::after { background: var(--ce-strong) var(--ce-i-minus-white) center / 1.125rem no-repeat; } .ce-faq .wp-block-details > :not(summary) { max-width: 47.5rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ce-muted); margin: 0 0 1.5rem; } .ce-faq .wp-block-details > :not(summary) + :not(summary) { margin-top: -0.75rem; } @media (prefers-color-scheme: dark) { .ce-faq .wp-block-details summary::after { background-image: var(--ce-i-plus-white); } .ce-faq .wp-block-details[open] summary::after { background-image: var(--ce-i-minus-ink); } } /* 12 CTA and enquiry ----------------------------------------------------------------------- */ .ce-s--cta { padding-block: clamp(3.5rem, 6vw, 5.5rem); gap: 1.375rem; } .ce-s--cta h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1.02; letter-spacing: -0.035em; } .ce-s--cta p { font-size: 1.1875rem; line-height: 1.55; } .ce-s--cta .ce-note { font-size: 0.9375rem; } /* The card version: a rounded navy panel with text left, buttons right */ .ce-cta-card { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; flex-wrap: wrap; } .ce-cta-card > .ce-stack { flex: 1 1 26rem; gap: 0.625rem; } .ce-cta-card h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); } .ce-cta-card .ce-cta-card__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.875rem; } @media (max-width: 800px) { .ce-cta-card .ce-cta-card__actions { align-items: flex-start; } } /* Enquiry: text on the left, the form in a white card on the right */ .ce-enquiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } @media (max-width: 1000px) { .ce-enquiry { grid-template-columns: minmax(0, 1fr); } } /* Beside a tall form, the words stay in view while the form scrolls past */ @media (min-width: 1001px) { .ce-enquiry > .ce-stack { position: sticky; top: 6.5rem; } } /* "What happens next": a short numbered list */ .ce-next { margin: 0.5rem 0 0; padding: 0; list-style: none; counter-reset: ce-next; display: flex; flex-direction: column; gap: 1rem; } .ce-next li { counter-increment: ce-next; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.875rem; align-items: start; line-height: 1.5; } .ce-next li::before { content: counter(ce-next); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--ce-yellow); color: var(--ce-on-yellow); font: 800 0.9375rem/1 var(--ce-font-display); } .ce-next strong { font-weight: 700; } .ce-s--navy .ce-next strong { color: var(--ce-on-navy-strong); } /* Other ways to reach us, under the steps */ .ce-reach { margin-top: 0.75rem; padding-top: 1.25rem; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 25%, transparent); display: flex; flex-direction: column; gap: 0.75rem; } .ce-enquiry__form { background: var(--ce-card); color: var(--ce-ink); border-radius: var(--ce-r-card); padding: clamp(1.25rem, 3vw, 2.25rem); } .ce-s--navy .ce-enquiry__form { background: var(--ce-card); color: var(--ce-ink); } .ce-s--navy .ce-enquiry__form p { color: var(--ce-muted); } .ce-enquiry__form h3 { color: var(--ce-ink) !important; } .ce-s--navy .ce-enquiry__form h3 { color: var(--ce-ink) !important; } .ce-contact-lines { display: flex; flex-direction: column; gap: 0.75rem; font-size: 1.0625rem; } .ce-contact-lines strong { display: block; font-size: 0.9375rem; } /* 13 Courses ------------------------------------------------------------------------------ */ .ce-shelf { position: relative; } .ce-shelf__row { display: grid; grid-template-columns: repeat(var(--ce-cols, 4), minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .ce-shelf--3 .ce-shelf__row { --ce-cols: 3; } .ce-shelf__row > li { display: flex; } @media (max-width: 1100px) { .ce-shelf__row { --ce-cols: 2 !important; } } /* Phones: a row that scrolls sideways */ @media (max-width: 680px) { .ce-shelf__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin-inline: calc(var(--ce-gx) * -1); padding: 0.25rem var(--ce-gx) 1rem; scrollbar-width: thin; } .ce-shelf__row > li { flex: 0 0 min(78%, 18rem); scroll-snap-align: start; } } .ce-shelf__nav { display: flex; gap: 0.625rem; } .ce-shelf__nav button { width: 3rem; height: 3rem; border-radius: 999px; border: 2px solid var(--ce-strong); background: var(--ce-canvas); color: var(--ce-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .ce-shelf__nav button:disabled { border-color: var(--ce-line); color: var(--ce-muted); cursor: default; } .ce-shelf__empty { padding: 1.5rem; border-radius: var(--ce-r-card-sm); background: var(--ce-paper); color: var(--ce-muted); } .ce-shelf__group + .ce-shelf__group { margin-top: 3rem; } .ce-shelf__group > h3 { margin-bottom: 1.25rem; } /* A course card */ .ce-course { position: relative; display: flex; flex-direction: column; width: 100%; border: 1px solid var(--ce-line); border-radius: var(--ce-r-card-sm); overflow: hidden; background: var(--ce-canvas); color: var(--ce-ink); text-decoration: none; } .ce-s--paper .ce-course { background: var(--ce-card); } .ce-course:hover { border-color: var(--ce-strong); box-shadow: inset 0 0 0 1px var(--ce-strong); } .ce-course:focus-within { outline: 3px solid var(--ce-focus); outline-offset: 3px; } .ce-course__img { width: 100%; height: 10.625rem; object-fit: cover; display: block; } .ce-shelf--3 .ce-course__img, .ce-shelf--3 .ce-course .ce-cover { height: 13.75rem; } .ce-course__body { padding: 1.125rem 1.25rem 1.375rem; display: flex; flex-direction: column; gap: 0.625rem; flex-grow: 1; } .ce-course__title { margin: 0; font: 700 1.25rem/1.2 var(--ce-font-display); letter-spacing: -0.01em; } .ce-course__title a { color: inherit; text-decoration: none; } .ce-course__title a::before { content: ""; position: absolute; inset: 0; } .ce-course__title a:focus-visible { outline: none; } .ce-course__meta { font-size: 0.875rem; color: var(--ce-muted); } .ce-course__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; } .ce-course__access { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--ce-line); display: flex; flex-direction: column; gap: 0.375rem; } .ce-course--compact .ce-course__body { border-top: 5px solid var(--subject, var(--ce-neutral)); } /* Access lines: always words, with an icon */ .ce-access { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.3; color: var(--ce-muted); margin: 0; } .ce-access svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .ce-access--main { font-weight: 700; color: var(--ce-ink); } .ce-access--main svg { color: var(--ce-strong); } .ce-access--free svg { color: var(--ce-success); } /* Subject tags */ .ce-tag { display: inline-flex; align-items: center; gap: 0.4375rem; height: 1.75rem; padding: 0 0.6875rem 0 0.5625rem; border-radius: 999px; background: var(--tint, var(--ce-neutral-tint)); color: var(--text, var(--ce-neutral-text)); font-size: 0.8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; align-self: flex-start; } .ce-tag::before { content: ""; width: 0.5625rem; height: 0.5625rem; border-radius: 3px; background: var(--subject, var(--ce-neutral)); } .ce-tag--lg { height: 1.875rem; font-size: 0.875rem; padding: 0 0.75rem 0 0.625rem; } .ce-tag--role { background: var(--ce-ink); color: var(--ce-canvas); padding: 0 0.6875rem; } .ce-tag--role::before { display: none; } a.ce-tag:hover { text-decoration: underline; color: var(--text, var(--ce-neutral-text)); } .ce-subject-safeguarding { --subject: var(--ce-safeguarding); --tint: var(--ce-safeguarding-tint); --text: var(--ce-safeguarding-text); } .ce-subject-mental-health { --subject: var(--ce-mental-health); --tint: var(--ce-mental-health-tint); --text: var(--ce-mental-health-text); } .ce-subject-send { --subject: var(--ce-send); --tint: var(--ce-send-tint); --text: var(--ce-send-text); } .ce-subject-behaviour { --subject: var(--ce-behaviour); --tint: var(--ce-behaviour-tint); --text: var(--ce-behaviour-text); } .ce-subject-leadership { --subject: var(--ce-leadership); --tint: var(--ce-leadership-tint); --text: var(--ce-leadership-text); } .ce-subject-teaching { --subject: var(--ce-teaching); --tint: var(--ce-teaching-tint); --text: var(--ce-teaching-text); } .ce-subject-curriculum { --subject: var(--ce-curriculum); --tint: var(--ce-curriculum-tint); --text: var(--ce-curriculum-text); } .ce-subject-neutral { --subject: var(--ce-neutral); --tint: var(--ce-neutral-tint); --text: var(--ce-neutral-text); } /* A course cover: the subject's tint and one of its pictures (no text, no people); the icon tile only on a course or topic page */ .ce-cover { position: relative; display: block; height: 8.75rem; background: var(--tint, var(--ce-neutral-tint)); overflow: hidden; flex-shrink: 0; } .ce-cover svg.ce-cover__motif { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: var(--subject, var(--ce-neutral)); } .ce-cover__icon { position: absolute; left: 1rem; top: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: var(--ce-canvas); display: flex; align-items: center; justify-content: center; color: var(--subject, var(--ce-neutral)); } .ce-cover__icon svg { width: 1.375rem; height: 1.375rem; } @media (max-width: 680px) { .ce-cover, .ce-course__img { height: 6.875rem; } } /* The course page's modules list */ .ce-modules { border: 1px solid var(--ce-line); border-radius: var(--ce-r-card); overflow: hidden; } .ce-modules__head { padding: 1.25rem 1.5rem; background: var(--ce-paper); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .ce-modules__head h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; } .ce-modules__head span { font-size: 0.9375rem; color: var(--ce-muted); } .ce-modules ol { margin: 0; padding: 0; list-style: none; } .ce-modules li { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--ce-line); } .ce-modules__n { width: 2rem; height: 2rem; border-radius: 999px; background: var(--ce-sky); color: var(--ce-strong); font-weight: 700; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ce-modules li:first-child .ce-modules__n { background: var(--ce-navy); color: var(--ce-on-navy-strong); } .ce-modules__t { flex-grow: 1; font-weight: 600; font-size: 1rem; } .ce-modules__d { font-size: 0.875rem; color: var(--ce-muted); white-space: nowrap; } .ce-about h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); } .ce-about .ce-prose { font-size: 1.125rem; } /* "Part of a pathway" band, and other navy link bands */ .ce-linkband { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2rem; align-items: center; padding: 2rem 2.25rem; border-radius: 1.5rem; background: var(--ce-navy); color: var(--ce-on-navy-strong); } .ce-linkband h2, .ce-linkband h3 { color: var(--ce-on-navy-strong); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); } .ce-linkband p { color: var(--ce-on-navy); font-size: 1.0625rem; line-height: 1.5; } .ce-linkband .ce-eyebrow { color: var(--ce-on-navy-muted); } @media (max-width: 700px) { .ce-linkband { grid-template-columns: minmax(0, 1fr); } } /* "Good to know" strip */ .ce-gtk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; margin: 0; padding: 0; list-style: none; } @media (max-width: 1100px) { .ce-gtk { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .ce-gtk { grid-template-columns: minmax(0, 1fr); } } .ce-gtk > * { display: flex; align-items: center; gap: 0.875rem; font-size: 1rem; line-height: 1.4; } /* 14 Resources ------------------------------------------------------------------------------ */ .ce-resources { display: grid; grid-template-columns: repeat(var(--ce-cols, 3), minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .ce-resources--4 { --ce-cols: 4; } @media (max-width: 1100px) { .ce-resources { --ce-cols: 2 !important; } } @media (max-width: 640px) { .ce-resources { --ce-cols: 1 !important; } } .ce-resource { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ce-line); border-radius: var(--ce-r-card-sm); overflow: hidden; background: var(--ce-canvas); height: 100%; } .ce-s--paper .ce-resource { background: var(--ce-card); } .ce-resource:hover { border-color: var(--ce-strong); box-shadow: inset 0 0 0 1px var(--ce-strong); } .ce-resource:focus-within { outline: 3px solid var(--ce-focus); outline-offset: 3px; } /* The whole cover, never its top half: guide covers are A4 portrait. */ .ce-resource__img { aspect-ratio: 16 / 10; background: var(--ce-yellow); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1.25rem; } .ce-resource__img img { width: auto; max-width: 100%; height: 100%; object-fit: contain; box-shadow: 0 8px 24px rgba(19, 26, 46, 0.18); border-radius: 4px; display: block; } .ce-resource__img--photo { padding: 0; } .ce-resource__img--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; } .ce-resource__body { padding: 1.125rem 1.25rem 1.375rem; display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; } .ce-resource__kind { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ce-muted); } .ce-resource__title { margin: 0; font: 700 1.1875rem/1.25 var(--ce-font-display); letter-spacing: -0.01em; } .ce-resource__title a { color: var(--ce-ink); text-decoration: none; } .ce-resource__title a::before { content: ""; position: absolute; inset: 0; } .ce-resource__title a:focus-visible { outline: none; } .ce-resource__desc { font-size: 0.9375rem; line-height: 1.5; color: var(--ce-muted); } .ce-resource__foot { margin-top: auto; padding-top: 0.625rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--ce-strong); } .ce-resource__how { display: inline-flex; align-items: center; gap: 0.375rem; } .ce-resource__foot svg { width: 1.125rem; height: 1.125rem; } .ce-resource__topic { padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--ce-paper); color: var(--ce-muted); font-weight: 600; } /* The list version: rows */ .ce-resources--list { grid-template-columns: minmax(0, 1fr) !important; gap: 0; border-top: 1px solid var(--ce-line); } .ce-resources--list .ce-resource { flex-direction: row; align-items: center; border: 0; border-bottom: 1px solid var(--ce-line); border-radius: 0; gap: 1.25rem; padding: 1rem 0; background: transparent; } .ce-resources--list .ce-resource:hover { box-shadow: none; } .ce-resources--list .ce-resource__img { width: 5.5rem; flex-shrink: 0; aspect-ratio: 1; padding: 0.5rem 0.5rem 0; border-radius: 0.75rem; } .ce-resources--list .ce-resource__body { padding: 0; } .ce-resources--list .ce-resource__img img { height: 100%; } /* The library (/resources/): two columns of cards, each with the whole cover at its side. */ .ce-resources--library { --ce-cols: 2 !important; } @media (max-width: 900px) { .ce-resources--library { --ce-cols: 1 !important; } } .ce-resources--library .ce-resource { flex-direction: row; align-items: flex-start; gap: 1.25rem; padding: 1.25rem; } .ce-resources--library .ce-resource__img { width: 7rem; flex-shrink: 0; aspect-ratio: 1 / 1.414; padding: 0; border-radius: 6px; } .ce-resources--library .ce-resource__img img { width: 100%; height: 100%; object-fit: cover; box-shadow: none; } .ce-resources--library .ce-resource__body { padding: 0; align-self: stretch; } @media (max-width: 480px) { .ce-resources--library .ce-resource__img { width: 5rem; } } .ce-libfilters { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 1.75rem; scroll-margin-top: 6rem; } .ce-libfilters__how { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; } .ce-libfilters__label { font-size: 0.9375rem; font-weight: 700; color: var(--ce-muted); } .ce-libfilters__count { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--ce-muted); } /* The download box on a guide or resource page */ .ce-download { border-radius: var(--ce-r-card); background: var(--ce-card); box-shadow: inset 0 0 0 1px var(--ce-line); padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1rem; } .ce-s--paper .ce-download { box-shadow: none; } .ce-download h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; } .ce-download__files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.625rem; } .ce-preview { border-radius: var(--ce-r-card); background: var(--ce-yellow); padding: 2rem 2rem 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .ce-preview img { width: 78%; box-shadow: 0 12px 32px rgba(19, 26, 46, 0.2); border-radius: 4px 4px 0 0; display: block; } /* 15 Header ------------------------------------------------------------------------------------ */ .ce-header { position: relative; z-index: 50; background: var(--ce-canvas); border-bottom: 1px solid var(--ce-line); font-family: var(--ce-font-body); } .ce-header__bar { max-width: calc(var(--ce-wide) + 6rem); margin: 0 auto; height: 5.5rem; padding: 0 clamp(1rem, 3.3vw, 3rem); display: flex; align-items: center; gap: var(--ce-header-gap); } /* The desktop header tightens from 1440px down to 1181px, so every item still fits on one line. */ @media (min-width: 1181px) { .ce-header__bar { padding-inline: var(--ce-header-px); } } .ce-header__logo { display: flex; flex-shrink: 0; margin-right: clamp(0.5rem, 1.5vw, 1.25rem); } .ce-header__logo img { height: var(--ce-header-logo); width: auto; display: block; } .ce-logo--dark { display: none !important; } @media (prefers-color-scheme: dark) { .ce-logo--light { display: none !important; } .ce-logo--dark { display: block !important; } } .ce-nav { flex-grow: 1; } .ce-nav > ul { display: flex; align-items: center; gap: clamp(0.25rem, 0.8vw, 0.75rem); margin: 0; padding: 0; list-style: none; } .ce-nav__item { position: relative; } .ce-nav__top { position: relative; display: flex; align-items: center; gap: 0.375rem; height: 2.75rem; padding: 0 var(--ce-nav-px); border: 0; border-radius: 999px; background: transparent; color: var(--ce-ink); font: 600 var(--ce-nav-text)/1 var(--ce-font-body); text-decoration: none; cursor: pointer; white-space: nowrap; } .ce-nav__top:hover, .ce-nav__top[aria-expanded="true"] { background: var(--ce-paper); color: var(--ce-ink); } .ce-nav__top svg { width: 1rem; height: 1rem; transition: transform 0.15s; } .ce-nav__top[aria-expanded="true"] svg { transform: rotate(180deg); } .ce-nav__top[aria-current="page"]::after, .ce-nav__item.is-current > .ce-nav__top::after { content: ""; position: absolute; left: var(--ce-nav-px); right: var(--ce-nav-px); bottom: -1.375rem; height: 4px; border-radius: 4px; background: var(--ce-yellow); } .ce-nav__panel { position: absolute; top: calc(100% + 0.875rem); left: -1rem; width: 32.5rem; padding: 0.75rem; background: var(--ce-canvas); border: 1px solid var(--ce-line); border-radius: var(--ce-r-card); box-shadow: var(--ce-shadow-pop); display: flex; flex-direction: column; gap: 0.25rem; } .ce-nav__panel[hidden] { display: none; } .ce-nav__panel a { display: flex; gap: 1rem; padding: 1rem; border-radius: 0.875rem; color: var(--ce-ink); text-decoration: none; } .ce-nav__panel a:hover, .ce-nav__panel a:focus-visible { background: var(--ce-paper); } .ce-nav__panel .ce-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--ce-sky); } .ce-nav__col:first-child > a:first-of-type .ce-icon { background: var(--ce-yellow); color: var(--ce-on-yellow); } /* A dropdown grouped by "#" headings in the menu: one column per group */ .ce-nav__cols { display: grid; gap: 0.25rem; } .ce-nav__col { display: flex; flex-direction: column; gap: 0.25rem; } .ce-nav__panel:has(.ce-nav__cols--2) { width: 50rem; } .ce-nav__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .ce-nav__cols--2 > .ce-nav__col + .ce-nav__col { padding-left: 0.75rem; border-left: 1px solid var(--ce-line); } .ce-nav__h { margin: 0.5rem 1rem 0.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ce-muted); } .ce-nav__panel .ce-nav__more { align-self: flex-start; align-items: center; gap: 0.5rem; margin-top: 0.25rem; padding: 0.75rem 1rem; font-weight: 700; color: var(--ce-link); } .ce-nav__more svg { width: 1.125rem; height: 1.125rem; } .ce-nav__panel .ce-icon svg { width: 1.375rem; height: 1.375rem; } .ce-nav__t { display: block; font-weight: 700; font-size: 1.0625rem; } .ce-nav__d { display: block; font-size: 0.9375rem; line-height: 1.45; color: var(--ce-muted); margin-top: 0.125rem; } .ce-header__cta { display: flex; align-items: center; gap: clamp(0.5rem, 1.2vw, 1.25rem); flex-shrink: 0; } .ce-header__cta .ce-btn { min-height: 3rem; padding: 0 var(--ce-header-button-px); font-size: var(--ce-header-button-text); white-space: nowrap; } /* "Log in" is a plain link, so the trial is the header's one button */ .ce-header__login { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.5rem; color: var(--ce-ink); font: 600 var(--ce-header-button-text)/1 var(--ce-font-body); text-decoration: none; white-space: nowrap; } .ce-header__login:hover { text-decoration: underline; text-underline-offset: 0.2em; } .ce-header__menu { display: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: var(--ce-paper); color: var(--ce-ink); align-items: center; justify-content: center; cursor: pointer; } .ce-header__menu svg { width: 1.375rem; height: 1.375rem; } .ce-header__menu .ce-i-close { display: none; } .ce-header__menu[aria-expanded="true"] .ce-i-open { display: none; } .ce-header__menu[aria-expanded="true"] .ce-i-close { display: block; } .ce-mnav { display: none; } .ce-signed-in { display: none !important; } html.ce-is-signed-in .ce-signed-out { display: none !important; } html.ce-is-signed-in .ce-signed-in { display: inline-flex !important; } @media (max-width: 1180px) { .ce-header__bar { height: 4rem; gap: 0.75rem; justify-content: space-between; } .ce-header__logo img { height: 2.125rem; } .ce-nav { display: none; } .ce-header__menu { display: inline-flex; } .ce-header__cta .ce-btn { min-height: 2.75rem; padding: 0 1rem; font-size: 0.9375rem; } .ce-mnav { padding: 0.5rem 1rem 1.5rem; background: var(--ce-canvas); border-top: 1px solid var(--ce-line); } .ce-mnav:not([hidden]) { display: block; } .ce-mnav > ul { margin: 0; padding: 0; list-style: none; } .ce-mnav__row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.5rem; padding: 0; border: 0; border-bottom: 1px solid var(--ce-line); background: none; color: var(--ce-ink); font: 600 1.125rem/1.2 var(--ce-font-body); text-align: left; text-decoration: none; cursor: pointer; } .ce-mnav__row svg { width: 1.25rem; height: 1.25rem; color: var(--ce-muted); flex-shrink: 0; } .ce-mnav__row[aria-expanded="true"] svg { transform: rotate(180deg); } .ce-mnav__sub { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.25rem; margin: 0 0 0.75rem; border-radius: var(--ce-r-card-sm); background: var(--ce-paper); list-style: none; } .ce-mnav__sub[hidden] { display: none; } .ce-mnav__sub a { display: flex; align-items: center; min-height: 3rem; padding: 0 0.875rem; border-radius: 0.75rem; font-weight: 600; color: var(--ce-ink); text-decoration: none; } .ce-mnav__sub a:hover { background: var(--ce-canvas); } .ce-mnav__head { padding: 0.75rem 0.875rem 0.125rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ce-muted); } /* The page we're on: a yellow bar, as under the desktop item */ .ce-mnav [aria-current="page"], .ce-mnav .is-current > .ce-mnav__row { box-shadow: inset 4px 0 0 var(--ce-yellow); padding-left: 0.875rem; } .ce-mnav__sub [aria-current="page"] { font-weight: 700; } .ce-header__trial { display: none !important; } .ce-mnav .ce-btn { width: 100%; margin-top: 1.5rem; } } @media (max-width: 400px) { .ce-header__cta .ce-btn { padding: 0 0.75rem; } } /* When signed in, the member action is solid navy with an arrow */ .ce-header__cta .ce-btn--solid::after, .ce-header__trial::after { content: ""; width: 1.125rem; height: 1.125rem; background: currentColor; -webkit-mask: var(--ce-i-arrow) center / contain no-repeat; mask: var(--ce-i-arrow) center / contain no-repeat; } /* 16 Footer -------------------------------------------------------------------------------------- */ .ce-footer { background: var(--ce-footer); color: var(--ce-on-footer); padding: clamp(3rem, 5vw, 4.5rem) var(--ce-gx) clamp(2.5rem, 3.3vw, 3rem); font-family: var(--ce-font-body); } .ce-footer__in { max-width: var(--ce-wide); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(2.25rem, 3.3vw, 3rem); } .ce-footer__top { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--ce-footer-line); flex-wrap: wrap; } .ce-footer__brand { display: flex; flex-direction: column; gap: 1rem; max-width: 28.75rem; } .ce-footer__logo { display: flex; align-self: flex-start; } .ce-footer__brand img { width: 11.25rem; height: auto; display: block; } .ce-footer__brand p { font-size: 1.0625rem; line-height: 1.55; color: var(--ce-footer-muted); } .ce-footer__news { width: min(28.75rem, 100%); display: flex; flex-direction: column; gap: 0.625rem; } .ce-footer__news h2 { font: 700 1rem/1.3 var(--ce-font-body); color: var(--ce-on-footer); letter-spacing: 0; } .ce-footer__news p { font-size: 0.875rem; color: var(--ce-footer-muted); } .ce-footer__news .ce-btn { align-self: flex-start; margin-top: 0.375rem; } .ce-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } @media (max-width: 900px) { .ce-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ce-footer__cols h2 { font: 700 1rem/1.3 var(--ce-font-body); color: var(--ce-on-footer); letter-spacing: 0; margin-bottom: 0.75rem; } .ce-footer__cols ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .ce-footer__cols a { color: var(--ce-footer-link); text-decoration: none; font-size: 1rem; line-height: 1.4; } .ce-footer__cols a:hover { color: var(--ce-on-footer); text-decoration: underline; } .ce-footer__legal { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--ce-footer-line); font-size: 0.875rem; color: var(--ce-footer-muted); flex-wrap: wrap; } .ce-footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; } .ce-footer__legal a { color: var(--ce-footer-muted); } .ce-footer__legal a:hover { color: var(--ce-on-footer); } .ce-footer__legal .ce-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ce-footer-muted); text-decoration: underline; cursor: pointer; } .ce-footer__legal .ce-linkbtn:hover { color: var(--ce-on-footer); } /* 17 Prose: posts, legal pages, synced descriptions --------------------------------------------- */ .ce-prose { font-size: 1.1875rem; line-height: 1.7; color: var(--ce-ink); } .ce-prose > * + * { margin-top: 1.1em; } .ce-prose h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); margin-top: 1.8em; line-height: 1.15; } .ce-prose h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); margin-top: 1.6em; } .ce-prose h4 { font-size: 1.125rem; margin-top: 1.4em; } .ce-prose h2 + *, .ce-prose h3 + *, .ce-prose h4 + * { margin-top: 0.6em; } .ce-prose ul, .ce-prose ol { padding-left: 1.4em; } .ce-prose li + li { margin-top: 0.4em; } .ce-prose blockquote { margin-left: 0; margin-right: 0; padding: 1.25rem 1.5rem; border-radius: var(--ce-r-card-sm); background: var(--ce-paper); } .ce-prose blockquote p { font-weight: 600; } .ce-prose blockquote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.9375rem; color: var(--ce-muted); } .ce-prose img, .ce-prose figure img { border-radius: var(--ce-r-card-sm); } .ce-prose figure { margin-inline: 0; } .ce-prose figcaption { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ce-muted); } .ce-prose table { width: 100%; border-collapse: collapse; font-size: 1rem; } .ce-prose th, .ce-prose td { padding: 0.625rem 0.75rem; border: 1px solid var(--ce-line); text-align: left; vertical-align: top; } .ce-prose th { background: var(--ce-paper); } .ce-prose hr { border: 0; border-top: 1px solid var(--ce-line); margin-block: 2em; } .ce-prose .wp-block-button__link { text-decoration: none; } .ce-prose--sm { font-size: 1.0625rem; line-height: 1.65; } /* Old imported content sometimes has empty paragraphs */ .ce-prose p:empty { display: none; } /* Article layout: main column and a sticky sidebar */ .ce-article { display: grid; grid-template-columns: minmax(0, 47.5rem) minmax(0, 20rem); gap: clamp(2rem, 6vw, 7.5rem); max-width: 75rem; margin: 0 auto; align-items: start; } /* Only the last box (an article's contents) stays in view, so everything above it can be reached. */ .ce-article__side { align-self: stretch; display: flex; flex-direction: column; gap: 1.5rem; } .ce-article__side > .ce-toc:last-child { position: sticky; top: 2rem; } @media (max-width: 1000px) { .ce-article { grid-template-columns: minmax(0, 1fr); } .ce-article__side > .ce-toc:last-child { position: static; } } .ce-sidebox { border-radius: var(--ce-r-card-sm); background: var(--ce-paper); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .ce-sidebox h2 { font: 700 1.0625rem/1.3 var(--ce-font-body); letter-spacing: 0; } .ce-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.4; } .ce-toc a { color: var(--ce-ink); text-decoration: none; } .ce-toc a:hover { color: var(--ce-link); text-decoration: underline; } .ce-byline { display: flex; align-items: center; gap: 0.875rem; font-size: 0.9375rem; color: var(--ce-muted); flex-wrap: wrap; } .ce-byline img { width: 3rem; height: 3rem; border-radius: 999px; object-fit: cover; } .ce-byline strong { color: var(--ce-ink); } .ce-share { display: flex; gap: 0.5rem; flex-wrap: wrap; } .ce-share a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.875rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ce-line); color: var(--ce-ink); font-size: 0.875rem; font-weight: 600; text-decoration: none; } .ce-share a:hover { box-shadow: inset 0 0 0 1.5px var(--ce-strong); } .ce-article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ce-r-card); display: block; } .ce-article-head { max-width: 75rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; } .ce-article-head h1 { font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem); max-width: 56rem; } /* Posts in a list (blog, related, expert) */ .ce-posts { display: grid; grid-template-columns: repeat(var(--ce-cols, 3), minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; } @media (max-width: 1000px) { .ce-posts { --ce-cols: 2 !important; } } @media (max-width: 640px) { .ce-posts { --ce-cols: 1 !important; } } .ce-post { position: relative; display: flex; flex-direction: column; gap: 0.625rem; padding: 1.5rem; border-radius: var(--ce-r-card-sm); box-shadow: inset 0 0 0 1px var(--ce-line); background: var(--ce-canvas); height: 100%; } .ce-post:hover { box-shadow: inset 0 0 0 2px var(--ce-strong); } .ce-post:focus-within { outline: 3px solid var(--ce-focus); outline-offset: 3px; } .ce-post__img { margin: -1.5rem -1.5rem 0.5rem; } .ce-post__img img, .ce-post__img .ce-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--ce-r-card-sm) var(--ce-r-card-sm) 0 0; } .ce-post__title { margin: 0; font: 700 1.25rem/1.25 var(--ce-font-display); letter-spacing: -0.01em; } .ce-post__title a { color: var(--ce-ink); text-decoration: none; } .ce-post__title a::before { content: ""; position: absolute; inset: 0; } .ce-post__title a:focus-visible { outline: none; } .ce-post__meta { font-size: 0.875rem; color: var(--ce-muted); } .ce-post__excerpt { font-size: 0.9375rem; line-height: 1.55; color: var(--ce-muted); } /* The blog's featured post */ .ce-feature { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; position: relative; } .ce-feature img, .ce-feature .ce-cover { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ce-r-card); display: block; } .ce-feature h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); } .ce-feature h2 a { color: var(--ce-ink); text-decoration: none; } .ce-feature h2 a:hover { text-decoration: underline; } @media (max-width: 800px) { .ce-feature { grid-template-columns: minmax(0, 1fr); } } .ce-blog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } @media (max-width: 1000px) { .ce-blog { grid-template-columns: minmax(0, 1fr); } } .ce-blog .ce-posts { --ce-cols: 2; } .ce-chiplist { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .ce-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ce-line); background: var(--ce-canvas); color: var(--ce-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; } .ce-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ce-strong); color: var(--ce-ink); } .ce-chip[aria-current="page"], .ce-chip.is-active { background: var(--ce-navy); color: var(--ce-on-navy-strong); box-shadow: none; } .ce-chip span { color: var(--ce-muted); font-weight: 500; } .ce-chip.is-active span { color: var(--ce-on-navy-muted); } /* A topic chip wears its subject's colour, as the courses do. */ .ce-chip--subject svg { width: 1rem; height: 1rem; color: var(--subject); flex-shrink: 0; } .ce-chip--subject:hover { box-shadow: inset 0 0 0 1.5px var(--subject); } .ce-chip--subject.is-active { background: var(--tint); color: var(--text); box-shadow: inset 0 0 0 2px var(--subject); } .ce-chip--subject.is-active svg, .ce-chip--subject.is-active span { color: var(--text); } .ce-pagination { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 2.5rem; } .ce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.75rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ce-line); color: var(--ce-ink); text-decoration: none; font-weight: 600; } .ce-pagination .page-numbers.current { background: var(--ce-navy); color: var(--ce-on-navy-strong); box-shadow: none; } /* 18 Forms: HubSpot embeds and our own few fields --------------------------------------------------- */ .ce-form .hs-form, .ce-form form { display: flex; flex-direction: column; gap: 1rem; font-family: var(--ce-font-body); } .ce-form fieldset { max-width: none !important; border: 0; padding: 0; margin: 0; } .ce-form fieldset.form-columns-2 .hs-form-field { width: 50% !important; } .ce-form .hs-form-field { margin-bottom: 1rem; } .ce-form .hs-form-field > label, .ce-field label { display: block; margin-bottom: 0.375rem; font-weight: 700; font-size: 0.9375rem; color: inherit; } .ce-form .hs-form-required { color: var(--ce-error); margin-left: 0.125rem; } .ce-form input[type="text"], .ce-form input[type="email"], .ce-form input[type="tel"], .ce-form input[type="number"], .ce-form input[type="search"], .ce-form select, .ce-form textarea, .ce-input { width: 100% !important; min-height: 3.25rem; padding: 0.75rem 1rem; box-sizing: border-box; border: 1.5px solid var(--ce-control); border-radius: 0.75rem; background: var(--ce-canvas); color: var(--ce-ink); font: 400 1rem/1.4 var(--ce-font-body); } .ce-s--navy .ce-enquiry__form input, .ce-s--navy .ce-enquiry__form select, .ce-s--navy .ce-enquiry__form textarea { background: var(--ce-canvas); color: var(--ce-ink); border-color: var(--ce-control); } .ce-form textarea { min-height: 8rem; } .ce-form input:focus, .ce-form select:focus, .ce-form textarea:focus, .ce-input:focus { outline: 3px solid var(--ce-focus); outline-offset: 1px; border-color: var(--ce-focus); } .ce-form .hs-error-msgs { list-style: none; margin: 0.375rem 0 0; padding: 0; color: var(--ce-error); font-size: 0.875rem; font-weight: 600; } .ce-form .hs-error-msgs label::before { content: "⚠ "; } .ce-form .hs-field-desc, .ce-form .legal-consent-container { font-size: 0.875rem; line-height: 1.5; color: var(--ce-muted); } .ce-form .inputs-list { list-style: none; margin: 0; padding: 0; } .ce-form .hs-form-booleancheckbox-display, .ce-form .hs-form-checkbox-display { display: flex; gap: 0.625rem; align-items: flex-start; font-weight: 500; } .ce-form input[type="checkbox"], .ce-form input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--ce-navy); margin-top: 0.125rem; } .ce-form .hs-button, .ce-form input[type="submit"], .ce-form button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.75rem; border: 0; border-radius: 999px; background: var(--ce-yellow); color: var(--ce-on-yellow); font: 700 1.0625rem/1 var(--ce-font-body); cursor: pointer; } .ce-form .hs-button:hover, .ce-form input[type="submit"]:hover, .ce-form button[type="submit"]:hover { background: var(--ce-yellow-hover); } .ce-form .submitted-message { padding: 1.25rem; border-radius: 0.75rem; background: var(--ce-success-tint); color: var(--ce-ink); font-weight: 600; } .ce-form__missing { padding: 1.25rem; border-radius: 0.75rem; border: 2px dashed var(--ce-control); color: var(--ce-muted); font-size: 0.9375rem; } /* The footer's and resources page's one-line sign-up */ .ce-inline-form { display: flex; gap: 0.5rem; } .ce-inline-form .ce-input { border-radius: 999px; } .ce-footer .ce-form input[type="email"], .ce-footer .ce-form input[type="text"], .ce-footer .ce-form input[type="tel"] { border-radius: 999px; border-color: var(--ce-control); background: var(--ce-footer-field); color: var(--ce-on-footer); } .ce-footer .ce-form .hs-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; } .ce-footer .ce-form .hs-form-field { flex: 1 1 14rem; margin: 0; } .ce-footer .ce-form .hs-form-field > label { color: var(--ce-on-footer); } .ce-footer .ce-form input:focus { outline-color: var(--ce-focus-on-navy); border-color: var(--ce-focus-on-navy); } /* 19 Catalogue ------------------------------------------------------------------------------------- */ .ce-cat { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } @media (max-width: 1000px) { .ce-cat { grid-template-columns: minmax(0, 1fr); } } .ce-cat__filters { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } @media (max-width: 1000px) { .ce-cat__filters { position: static; } /* On a narrow screen the search comes first, then the filters, then the courses. */ .ce-cat { display: flex; flex-direction: column; } .ce-cat__main { display: contents; } .ce-cat__main > * { order: 3; } .ce-cat__main > .ce-search { order: 1; } .ce-cat__filters { order: 2; align-self: stretch; } } .ce-cat__filters > details { border-bottom: 1px solid var(--ce-line); } .ce-cat__filters summary { display: flex; justify-content: space-between; align-items: center; min-height: 3.25rem; font-weight: 700; cursor: pointer; list-style: none; } .ce-cat__filters summary::-webkit-details-marker { display: none; } .ce-cat__filters summary::after { content: ""; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--ce-i-chevron) center / contain no-repeat; mask: var(--ce-i-chevron) center / contain no-repeat; } .ce-cat__filters details[open] summary::after { transform: rotate(180deg); } .ce-cat__filters fieldset { border: 0; margin: 0; padding: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .ce-check { display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; font-size: 0.9375rem; cursor: pointer; } .ce-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--ce-navy); flex-shrink: 0; } .ce-check span { color: var(--ce-muted); margin-left: auto; font-size: 0.875rem; } .ce-cat__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .ce-cat__count { font-weight: 700; } .ce-cat__sort { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; font-size: 0.9375rem; } .ce-cat__sort > span { font-weight: 700; } .ce-cat__sort select { min-height: 2.75rem; width: auto; padding-block: 0; } .ce-cat__sort .ce-btn { min-height: 2.75rem; padding-inline: 1.125rem; font-size: 0.9375rem; } .ce-cat__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .ce-cat__results > li { display: flex; } @media (max-width: 1250px) { .ce-cat__results { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ce-cat__results { grid-template-columns: minmax(0, 1fr); } } .ce-search { display: flex; gap: 0.5rem; width: min(40rem, 100%); margin-inline: auto; } .ce-search .ce-input { border-radius: 999px; padding-inline: 1.25rem; } .ce-explainer { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; padding: 1.25rem 1.5rem; border-radius: var(--ce-r-card-sm); background: var(--ce-paper); margin-bottom: 1.5rem; } .ce-explainer p { font-size: 0.9375rem; } .ce-active-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* 20 Misc ----------------------------------------------------------------------------------------------- */ /* The editor's own view of the dynamic blocks */ .ce-editor-note { padding: 1rem 1.25rem; border-radius: 0.75rem; border: 2px dashed var(--ce-control); color: var(--ce-muted); font: 500 0.9375rem/1.5 var(--ce-font-body); } /* A warning only administrators see on the site */ .ce-admin-note { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--ce-warning-tint); color: var(--ce-warning); font-size: 0.875rem; font-weight: 600; } /* A person: expert cards and the "presented by" line */ .ce-person { display: flex; align-items: center; gap: 0.875rem; padding: 1rem; border-radius: var(--ce-r-card-sm); background: var(--ce-paper); } .ce-person img, .ce-person__ph { width: 3.25rem; height: 3.25rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; background: var(--ce-sky); } .ce-person__name { font-weight: 700; font-size: 1.0625rem; } .ce-person__role { font-size: 0.9375rem; color: var(--ce-muted); } .ce-experts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; } @media (max-width: 900px) { .ce-experts { grid-template-columns: minmax(0, 1fr); } } .ce-expert { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.75rem; border-radius: var(--ce-r-card); background: var(--ce-paper); height: 100%; } .ce-expert img, .ce-expert .ce-person__ph { width: 6rem; height: 6rem; border-radius: 999px; object-fit: cover; } .ce-expert h3 a { color: var(--ce-ink); text-decoration: none; } .ce-expert h3 a::before { content: ""; position: absolute; inset: 0; } .ce-expert:hover { box-shadow: inset 0 0 0 2px var(--ce-strong); } .ce-expert-hero img { width: clamp(8rem, 15vw, 12rem); height: clamp(8rem, 15vw, 12rem); border-radius: 999px; object-fit: cover; } /* Jobs */ .ce-jobs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ce-line); } .ce-job { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--ce-line); flex-wrap: wrap; } .ce-job h3 a { color: var(--ce-ink); text-decoration: none; } .ce-job h3 a::before { content: ""; position: absolute; inset: 0; } .ce-job:hover h3 a { text-decoration: underline; } .ce-job__meta { display: flex; gap: 0.5rem 1.25rem; flex-wrap: wrap; font-size: 0.9375rem; color: var(--ce-muted); } .ce-facts-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--ce-r-card-sm); background: var(--ce-paper); } .ce-facts-box dt { font-size: 0.875rem; color: var(--ce-muted); } .ce-facts-box dd { margin: 0.125rem 0 0; font-weight: 700; } /* 404 */ .ce-404 { font: 800 clamp(5rem, 3rem + 8vw, 10rem)/0.9 var(--ce-font-display); letter-spacing: -0.05em; color: var(--ce-strong); } /* In-house prices */ .ce-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; } @media (max-width: 1100px) { .ce-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ce-prices { grid-template-columns: minmax(0, 1fr); } } /* "Show all" on phones: long lists show three and a button */ @media (max-width: 680px) { .ce-show3:not(.is-expanded) > :nth-child(n+4) { display: none !important; } } .ce-showall { display: none; } @media (max-width: 680px) { .ce-show3:not(.is-expanded) + .ce-showall { display: inline-flex; } } /* Icons used by CSS masks */ :root { --ce-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --ce-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); --ce-i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); --ce-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --ce-i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36'%3E%3Cpath d='M0 36V21.6C0 9.9 6.3 2.7 17 0l2 5.1c-5.6 1.9-8.6 5.8-9 11.1H18V36H0Zm26 0V21.6C26 9.9 32.3 2.7 43 0l1 5.1c-5.6 1.9-8.6 5.8-9 11.1h8V36H26Z'/%3E%3C/svg%3E"); --ce-i-plus-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131a2e' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --ce-i-plus-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef1f7' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --ce-i-minus-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); --ce-i-minus-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1322' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } /* 21 Additions for the theme's blocks -------------------------------------------------------------- */ .ce-course-actions { display: flex; flex-wrap: wrap; gap: 0.875rem 1.5rem; align-items: center; padding-top: 0.25rem; } .ce-login-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 1.0625rem; font-weight: 600; color: var(--ce-link); text-underline-offset: 4px; } .ce-login-link svg { width: 1.125rem; height: 1.125rem; } .ce-login-link--light, .ce-login-link--light:hover { color: var(--ce-on-navy-strong); } .ce-facts--icons li::before { display: none; } .ce-facts--icons li svg { width: 1.125rem; height: 1.125rem; color: var(--ce-strong); } .ce-cover--hero { height: clamp(12rem, 24vw, 20rem); border-radius: 1.5rem; } .ce-cover--hero .ce-cover__icon { width: 3.5rem; height: 3.5rem; left: 1.5rem; top: 1.5rem; border-radius: 0.875rem; } .ce-cover--hero .ce-cover__icon svg { width: 1.875rem; height: 1.875rem; } .ce-hero--course .ce-hero__media .ce-cover { display: block; } /* The shelf's previous/next sit on the heading row above it */ .ce-s > .ce-shelf { position: relative; } .ce-shelf__nav { position: absolute; right: 0; bottom: calc(100% + clamp(1.75rem, 3vw, 2.75rem)); } @media (max-width: 680px) { .ce-shelf__nav { display: none; } } .ce-shelf__row > li[hidden] { display: none; } /* A single screen centred on a panel, beside text */ .ce-split .ce-screens { height: auto; min-height: 24rem; display: flex; align-items: center; justify-content: center; padding: 2rem; } /* In-house prices as rows (on a session page) */ .ce-pricerows { border: 1px solid var(--ce-line); border-radius: var(--ce-r-card); overflow: hidden; } .ce-pricerows__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--ce-paper); } .ce-pricerows__head h3 { font-size: 1.25rem; } .ce-pricerows__head span, .ce-pricerows > p { font-size: 0.9375rem; color: var(--ce-muted); } .ce-pricerows ul { margin: 0; padding: 0; list-style: none; } .ce-pricerows li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--ce-line); } .ce-pricerows li strong { display: block; } .ce-pricerows li span span { display: block; font-size: 0.9375rem; color: var(--ce-muted); } .ce-pricerows li > span:last-child { font-weight: 700; white-space: nowrap; } .ce-pricerows > p { padding: 1rem 1.5rem; border-top: 1px solid var(--ce-line); } /* Legal page */ .ce-legal { display: grid; grid-template-columns: minmax(0, 17.5rem) minmax(0, 47.5rem); gap: clamp(2rem, 6vw, 6rem); max-width: 75rem; margin: 0 auto; align-items: start; } .ce-legal .ce-toc { position: sticky; top: 2rem; } @media (max-width: 900px) { .ce-legal { grid-template-columns: minmax(0, 1fr); } .ce-legal .ce-toc { position: static; } } .ce-shortversion { padding: 1.5rem 1.75rem; border-radius: var(--ce-r-card); background: var(--ce-sky); max-width: 47.5rem; } .ce-shortversion h2 { font-size: 1.375rem; margin-bottom: 0.5rem; } /* 404 */ .ce-404-art { width: 100%; max-width: 26.25rem; height: auto; } .ce-linklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } @media (max-width: 900px) { .ce-linklist { grid-template-columns: minmax(0, 1fr); } } .ce-linklist a { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: var(--ce-r-card-sm); box-shadow: inset 0 0 0 1px var(--ce-line); color: var(--ce-ink); text-decoration: none; height: 100%; } .ce-linklist a:hover { box-shadow: inset 0 0 0 2px var(--ce-strong); } .ce-linklist a > span:nth-child(2) { flex-grow: 1; } .ce-linklist strong { display: block; font-size: 1.0625rem; } .ce-linklist small { display: block; font-size: 0.9375rem; color: var(--ce-muted); } .ce-linklist > li > a > svg { width: 1.25rem; height: 1.25rem; color: var(--ce-muted); flex-shrink: 0; } /* The page's own title band for templates without a hero pattern */ .ce-pagehead { display: flex; flex-direction: column; gap: 1.25rem; } .ce-pagehead h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); } .ce-pagehead .wp-block-post-excerpt__excerpt, .ce-pagehead .wp-block-post-excerpt p { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; color: var(--ce-muted); max-width: 44rem; } .wp-block-post-excerpt { margin: 0; } .wp-block-post-featured-image { margin: 0; } .wp-block-post-featured-image img { border-radius: var(--ce-r-card); width: 100%; height: auto; object-fit: cover; } .ce-guide-hero .wp-block-post-featured-image img { max-height: 26rem; object-fit: contain; background: var(--ce-yellow); padding: 1.5rem 1.5rem 0; } /* A guide: its whole cover beside what's inside. */ .ce-guide-hero__about { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: start; margin-top: 0.5rem; } .ce-guide-hero .ce-guide-hero__cover { margin: 0; } .ce-guide-hero .ce-guide-hero__cover img { width: 100%; height: auto; max-height: none; padding: 0; background: none; border-radius: 6px; box-shadow: 0 10px 28px rgba(19, 26, 46, 0.2); } .ce-guide-hero__h { font: 700 1.25rem/1.3 var(--ce-font-body); letter-spacing: 0; } .ce-guide-hero h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); } @media (max-width: 560px) { .ce-guide-hero__about { grid-template-columns: minmax(0, 1fr); } .ce-guide-hero .ce-guide-hero__cover { max-width: 11rem; } } .ce-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .ce-kind { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 700; color: var(--ce-muted); } .ce-kind svg { width: 1rem; height: 1rem; } /* Post terms rendered as tags */ .wp-block-post-terms.ce-tag-terms a { display: inline-flex; align-items: center; gap: 0.4375rem; height: 1.75rem; padding: 0 0.6875rem; border-radius: 999px; background: var(--ce-paper); color: var(--ce-muted); font-size: 0.8125rem; font-weight: 700; text-decoration: none; } .wp-block-post-terms.ce-tag-terms .wp-block-post-terms__separator { display: none; } .wp-block-post-terms.ce-tag-terms { display: flex; gap: 0.5rem; flex-wrap: wrap; } .ce-s.ce-s--bottom-0 { padding-bottom: 0; } .ce-s.ce-s--top-0 { padding-top: 0; } .ce-split--portrait { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: start; } /* A section built round a list hides itself when the list has nothing in it */ .ce-s--list:not(:has(ul, ol, .ce-editor-note, .ce-feature, .ce-shelf__empty)) { display: none; } /* A topic page's writing (Topic pages): a reading column, then its questions. Gone when there's none. */ .ce-s--hub:not(:has(.ce-hub, .ce-editor-note)) { display: none; } .ce-hub { display: flex; flex-direction: column; gap: var(--ce-sy); } .ce-hub__text { max-width: var(--ce-text); } .ce-hub__text h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 2.5rem; } .ce-hub__text h2:first-child { margin-top: 0; } /* HubSpot's own stylesheet sets short inputs; ours win */ .ce-form .hs-input:not([type="checkbox"]):not([type="radio"]):not(textarea) { height: 3.25rem !important; min-height: 3.25rem; } .ce-form fieldset.form-columns-2 { display: flex; gap: 1rem; } .ce-form fieldset.form-columns-2 .hs-form-field { width: auto !important; flex: 1 1 0; float: none !important; } .ce-form fieldset .input { margin-right: 0 !important; } @media (max-width: 560px) { .ce-form fieldset.form-columns-2 { flex-direction: column; gap: 0; } } /* White cards and plain steps on a navy section keep dark text */ .ce-s--navy .ce-card:not(.ce-card--navy) h3, .ce-s--navy .ce-card:not(.ce-card--navy) h2 { color: var(--ce-ink); } .ce-s--navy .ce-card:not(.ce-card--navy) p, .ce-s--navy .ce-card:not(.ce-card--navy) li { color: var(--ce-muted); } .ce-s--navy .ce-card:not(.ce-card--navy) a:not(.wp-block-button__link) { color: var(--ce-link); } .ce-s--navy .ce-step--plain { background: var(--ce-card); } .ce-s--navy .ce-crosses li::before { background: var(--ce-error-on-navy); } .ce-s--navy .ce-ticks li, .ce-s--navy .ce-crosses li { color: var(--ce-on-navy); } .ce-s--navy h3 + .ce-ticks, .ce-s--navy h3 + .ce-crosses { margin-top: 0.75rem; } .ce-table[tabindex]:focus-visible { outline: 3px solid var(--ce-focus); outline-offset: 3px; } .ce-card > .ce-icon, .ce-stack > .ce-icon, .ce-card__top > .ce-icon { align-self: flex-start; } /* A gated download stays hidden until its form is sent. */ .ce-download__files[hidden] { display: none; } /* In the editor, WordPress holds top-level blocks to the text width (47.5rem). Sections are full width on the site, so they are in the editor too, or two-column layouts collapse. */ .editor-styles-wrapper .is-root-container > .ce-s { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* The cookie question (mu-plugin tracking.php), as learn. draws it: a card bottom right from the medium breakpoint, across the foot of a phone. */ .ce-cookies { position: fixed; z-index: 100; left: 0.75rem; right: 0.75rem; bottom: max(0.75rem, env(safe-area-inset-bottom)); padding: 1rem; border: 1px solid var(--ce-control); border-radius: var(--ce-r-card-sm); background: var(--ce-card); color: var(--ce-ink); box-shadow: var(--ce-shadow-panel); font-size: 0.875rem; line-height: 1.5; } .ce-cookies[hidden] { display: none; } .ce-cookies p { margin: 0; } .ce-cookies__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .ce-cookies .ce-btn { min-height: 2.75rem; padding: 0 1rem; font-size: 0.9375rem; } @media (min-width: 768px) { .ce-cookies { left: auto; right: 1rem; bottom: 1rem; width: 20rem; } } @media print { .ce-cookies { display: none; } }