/* Design Reference §4 — buttons and text links. */ .kek-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border-radius:999px;font-weight:750;text-decoration:none;transition:transform 180ms ease,background-color 180ms ease}.kek-button:hover{transform:translateY(-2px);background-color:var(--wp--preset--color--kek-blue-dark)}.kek-button--red{background:var(--kek-button-red);border:2px solid var(--kek-button-red);color:#fff}.kek-button--red:hover{background:var(--kek-button-red);border-color:var(--kek-button-red)}.kek-button--light{background:#fff;border:2px solid #fff;color:var(--wp--preset--color--kek-ink)}.kek-button--outline{background:transparent;border:2px solid currentColor;color:var(--wp--preset--color--kek-ink)}.kek-button--readmore{min-height:46px;padding:10px 22px;font-size:.9rem}.kek-text-link{font-weight:800;color:var(--wp--preset--color--kek-ink)}.kek-text-link::after{content:'→';display:inline-block;margin-left:.35em;transition:transform 180ms ease}.kek-text-link:hover{color:var(--wp--preset--color--kek-blue)}.kek-text-link:hover::after{transform:translateX(4px)} /* Design Reference §7 — cards, section bands, and hero backgrounds. */ .kek-card{border:1px solid var(--wp--preset--color--kek-line);border-radius:18px;background:#fff;box-shadow:0 8px 25px rgba(84,84,84,.05);padding:24px}.kek-card:hover{box-shadow:0 18px 45px rgba(38,49,58,.12)}.kek-section-band{padding:64px 20px;background:var(--wp--preset--color--kek-surface)}.kek-section-band--dark{background:var(--wp--preset--color--kek-bg-banner);color:#fff}.kek-section-band--dark h1,.kek-section-band--dark h2,.kek-section-band--dark h3,.kek-section-band--dark .kek-section-heading__title{color:#fff}.kek-section-band--dark .kek-section-heading__lead,.kek-section-band--dark p{color:#e6e6e6}.wp-block-button.kek-button--red>.wp-block-button__link{background-color:var(--kek-button-red)!important;border:0!important;color:#fff;border-radius:999px;padding:12px 24px}.wp-block-button.kek-button--red>.wp-block-button__link:hover,.wp-block-button.kek-button--red>.wp-block-button__link:focus{background-color:var(--kek-button-red)!important;border-color:var(--kek-button-red)!important}.kek-button--light .wp-block-button__link{background:#fff;color:var(--wp--preset--color--kek-ink);border:0;border-radius:999px;padding:12px 24px}.kek-hero-subpage{position:relative;overflow:hidden;padding:105px 20px 95px;background:radial-gradient(circle at 82% 30%,color-mix(in srgb,var(--wp--preset--color--kek-blue-dark) 10%,transparent),transparent 27%),linear-gradient(135deg,var(--wp--preset--color--kek-blue-light) 0%,var(--wp--preset--color--kek-white) 65%);color:var(--wp--preset--color--kek-ink)}.kek-hero-subpage::after{position:absolute;right:-70px;bottom:-170px;width:360px;height:360px;border:55px solid color-mix(in srgb,var(--wp--preset--color--kek-blue) 12%,transparent);border-radius:50%;content:""}.kek-hero-subpage h1{margin-top:14px;margin-bottom:18px;font-size:3.45rem;font-weight:800;line-height:1.08}.kek-hero-subpage .kek-section-heading__eyebrow{color:var(--wp--preset--color--kek-blue)}.kek-section-heading{max-width:720px;margin:0 auto 44px;text-align:center}.kek-section-heading__eyebrow{color:var(--wp--preset--color--kek-blue);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.kek-section-heading__title{margin-top:0;line-height:1.18}.kek-section-heading__lead{color:var(--wp--preset--color--kek-muted)} /* Stage 30 (Stage 9 follow-up) — light hero recoloured to the owner's sample (docs/assets/light-hero-2026-10/). 30.C1 (owner, 2026-10-07): option B as mocked at 30.1 (evidence/30.1/B-6-1440.png) WITHOUT the two dots, on the OLD L3 surface (#f8f7f5 -> #fff, "like a part of the page"). Light category only, one central rule (§8 inv. 10): the :not() keeps the dark --programme hero byte-identical. Peach #f3e7e2 = the sample's #eeddd5 30% toward white — the exact sample colour put the muted lead at 4.45:1 (§8 inv. 11). Below 1180px the half-disc moves to the bottom edge and the ring toward the corner: at B's positions they covered the lead (1.57:1 / 3.92:1, evidence/30.C1). These are position changes only; the colours are the same at every width. Stage 56 (WP-081 B, D62 b, 2026-10-29): recoloured by theme name — surface kek-blue-light, circle kek-bg-accent 60% on white (Muted lead 4.72:1), ring kek-blue 12%, disc kek-blue -> kek-blue-soft, eyebrow kek-blue. Positions unchanged. */ .kek-hero-subpage:not(.kek-hero-subpage--programme){isolation:isolate;background:radial-gradient(circle min(36vw,540px) at 77% 40%,color-mix(in srgb,var(--wp--preset--color--kek-bg-accent) 60%,var(--wp--preset--color--kek-white)) calc(100% - 1px),transparent 100%),linear-gradient(135deg,var(--wp--preset--color--kek-blue-light) 0%,var(--wp--preset--color--kek-white) 65%)}.kek-hero-subpage:not(.kek-hero-subpage--programme)>*{position:relative;z-index:1}.kek-hero-subpage:not(.kek-hero-subpage--programme)::after{border-color:color-mix(in srgb,var(--wp--preset--color--kek-blue) 12%,transparent)}.kek-hero-subpage:not(.kek-hero-subpage--programme)::before{position:absolute;left:-44px;top:58%;width:88px;height:88px;border-radius:50%;background:linear-gradient(90deg,var(--wp--preset--color--kek-blue),var(--wp--preset--color--kek-blue-soft));content:"";pointer-events:none}@media(max-width:1180px){.kek-hero-subpage:not(.kek-hero-subpage--programme)::before{top:auto;bottom:-20px;left:-36px;width:72px;height:72px}}@media(max-width:1180px){.kek-hero-subpage:not(.kek-hero-subpage--programme)::after{right:-200px;bottom:-300px}} /* Design Reference §8 — layout and responsive behavior. */ .kek-container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.kek-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.kek-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.kek-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}[id]{scroll-margin-top:140px}@media(max-width:1024px){.kek-grid-4{grid-template-columns:repeat(2,1fr)}.kek-grid-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.kek-container{width:calc(100% - 28px)}.kek-grid-4,.kek-grid-3,.kek-grid-2{grid-template-columns:1fr}.kek-section-band{padding-block:40px}.kek-hero-subpage{padding-block:68px}.kek-hero-subpage h1{font-size:2.55rem}} @media(prefers-reduced-motion:reduce){.kek-button,.kek-button::after,.kek-text-link::after{transition:none}} /* Design Reference §5 — header refinements beyond Kadence settings. */ #masthead .site-main-header-wrap{box-shadow:0 8px 30px rgba(30,30,30,.07)}#masthead .header-navigation ul.sub-menu{border-top:3px solid var(--kek-menu-line);box-shadow:0 24px 40px rgba(0,0,0,.12);padding:26px 28px}#masthead .header-navigation li.menu-item-691,#mobile-drawer li.menu-item-691{--kek-menu-line:var(--wp--preset--color--kek-blue)}#masthead .header-navigation li.menu-item-8234,#mobile-drawer li.menu-item-8234{--kek-menu-line:var(--wp--preset--color--kek-red)}#masthead .header-button{transition:background-color 180ms ease;white-space:nowrap} /* Design Reference §6 — footer: accreditation strip, dark grid, newsletter, funding overlay. */ .kek-accreditation{background:var(--wp--preset--color--kek-off-white);padding:36px 0;border-bottom:1px solid var(--wp--preset--color--kek-line)}.kek-accreditation.is-layout-constrained>*{max-width:none}.kek-accreditation .kek-accreditation__row{width:min(1400px,calc(100% - 56px));margin-inline:auto;gap:32px 40px;justify-content:space-between;align-items:center}.kek-accreditation img{height:96px;width:auto;border-radius:16px;display:block}.kek-accreditation figure{margin:0;border-radius:16px;overflow:hidden}@media(max-width:720px){.kek-accreditation img{height:64px}.kek-accreditation .kek-accreditation__row{width:calc(100% - 28px);justify-content:center;gap:20px 24px}} /* Ad-hoc (owner, 2026-10-07): all 11 footer accreditation logos on ONE line on desktop (> 1024px). No wrap, 24px gaps; the logos keep 96px where it fits (>= ~1440px) and shrink with the viewport below that (83px at 1280, 61px at 1025). Tablet/phone keep the wrapping row. 11.8 = the 11 logos' summed width-to-height ratio (~11.3) plus margin; re-check if a logo is added or swapped. */ @media (min-width:1025px){.kek-accreditation .kek-accreditation__row{flex-wrap:nowrap;gap:24px}.kek-accreditation .kek-accreditation__row figure{flex:0 0 auto}.kek-accreditation img{height:min(96px,calc((100vw - 300px) / 11.8))}} .kek-footer{background:var(--wp--preset--color--kek-bg-dark);color:#d4d4d4;padding-top:70px}.kek-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:40px;padding-bottom:50px;width:min(1180px,calc(100% - 40px));margin-inline:auto}.kek-footer__grid>.kek-footer__col{margin-block-start:0}.kek-footer__brand{font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:.6em}.kek-footer__title{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;margin-bottom:1em}.kek-footer p{font-size:.9rem;line-height:1.7}.site-footer .kek-footer a:not(.wp-block-button__link){color:#d4d4d4;text-decoration:none}.site-footer .kek-footer a:not(.wp-block-button__link):hover{color:var(--wp--preset--color--kek-blue-soft)} .kek-footer__pills a{display:inline-block;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;color:#fff;margin:6px 8px 0 0}.kek-footer__pills a:hover{background:var(--wp--preset--color--kek-blue);color:#fff} .kek-footer__links{list-style:none;padding:0;margin:0}.kek-footer__links li{margin-bottom:.55em;font-size:.9rem} .kek-footer .mc4wp-form input[type=email]{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;padding:11px 14px;margin-bottom:10px}.kek-footer .mc4wp-form input[type=email]::placeholder{color:#a8a8a8}.kek-footer .mc4wp-form input[type=submit]{border:0;border-radius:999px;background:var(--wp--preset--color--kek-red);color:#fff;font-weight:700;padding:11px 22px;cursor:pointer}.kek-footer .mc4wp-form input[type=submit]:hover{background:var(--wp--preset--color--kek-red-dark)} .site-footer .site-footer-bottom .footer-html{text-align:center;width:100%} @media(max-width:1024px){.kek-footer__grid{grid-template-columns:1fr 1fr}} @media(max-width:720px){.kek-footer__grid{grid-template-columns:1fr;width:calc(100% - 28px)}} /* Design Reference §9 — contact page variants. */ .kek-section-band--white{background:#fff}.kek-card--green{border-top:3px solid var(--wp--preset--color--kek-blue-soft)}.kek-contact-label{color:var(--wp--preset--color--kek-blue);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.2em}.kek-contact-cards .kek-card{padding:32px}.kek-contact-social a{color:var(--wp--preset--color--kek-ink);border-color:var(--wp--preset--color--kek-line);text-decoration:none}.kek-contact-social a:hover{background:var(--wp--preset--color--kek-blue-light);color:var(--wp--preset--color--kek-blue)}.kek-form-section .wpforms-form button[type=submit],.kek-form-section .wpforms-form .wpforms-submit{background:var(--wp--preset--color--kek-red)!important;border-color:var(--wp--preset--color--kek-red)!important;color:#fff!important;border-radius:999px;font-weight:700;padding:12px 28px}.kek-form-section .wpforms-form button[type=submit]:hover,.kek-form-section .wpforms-form .wpforms-submit:hover{background:var(--wp--preset--color--kek-red-dark)!important}.kek-map-card iframe{border-radius:12px;display:block} /* Design Reference §9 — profile page: cert grid + stats band. */ .kek-cert-grid{gap:24px 32px;align-items:center}.kek-cert-grid img{height:120px;width:auto}.kek-cert-grid figure{margin:0} .kek-stats-band .wp-block-column{text-align:center}.kek-stats-band p{color:var(--wp--preset--color--kek-white);font-size:.9rem;letter-spacing:.06em}.kek-stat__number{font-size:2.65rem;line-height:1;color:#fff;margin:0 0 .25em} /* WP-049 — count-up: fixed-width digits; the count span keeps the final width (set by assets/js/stats-count-up.js). */ .kek-stat__number{font-variant-numeric:tabular-nums}.kek-stat__count{display:inline-block} /* Design Reference §8.1 + §9 — home page: course cards, promo/partner strips. */ .kek-promo-strip{padding-block:44px}.kek-promo-strip img{width:100%;height:auto;border-radius:18px}.kek-promo-strip figure{margin:0} /* SX-05 — homepage promo carousel: one full-width image at a time. */ .kek-carousel{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.kek-carousel::-webkit-scrollbar{display:none}.kek-carousel .wp-block-image{scroll-snap-align:center;scroll-snap-stop:always;margin:0 0 18px}.kek-carousel .wp-block-image img{width:100%;height:auto;border-radius:18px;display:block}.kek-carousel__dots{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:10px;z-index:2;list-style:none;padding:0;margin:0}.kek-carousel__dot{width:12px;height:12px;border-radius:50%;border:0;background:rgba(0,0,0,.18);cursor:pointer;padding:0;transition:background-color 180ms ease}.kek-carousel__dot[aria-current=true]{background:var(--wp--preset--color--kek-blue)} .kek-card.kek-course{padding:0;overflow:hidden}.kek-course__thumb{margin:0}.kek-course__thumb img{width:100%;height:175px;object-fit:cover;display:block} .kek-course__body{padding:26px 28px 30px}.kek-course__body h3{font-size:1.3rem;font-weight:800;margin:.2em 0 0} .kek-course__body h3 a{color:var(--wp--preset--color--kek-ink);text-decoration:none}.kek-course__body h3 a:hover{color:var(--wp--preset--color--kek-blue)} .kek-course__meta{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--wp--preset--color--kek-muted);margin-bottom:.4em} .kek-news-grid .wp-block-post-date{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--wp--preset--color--kek-muted)} .kek-news-grid h3 a{color:var(--wp--preset--color--kek-ink);text-decoration:none}.kek-news-grid h3 a:hover{color:var(--wp--preset--color--kek-blue)} .kek-partner-strip .kek-cert-grid img{height:80px;width:auto} /* Design Reference §9 — Stage-4 linear content pages: narrow container + FAQ details. */ .kek-container-narrow{max-width:860px;margin-inline:auto} .kek-container-narrow .wp-block-image img{border-radius:18px;max-width:100%;height:auto} .kek-faq{border:1px solid var(--wp--preset--color--kek-line);border-radius:14px;background:#fff;padding:18px 22px;margin-bottom:14px} .kek-faq summary{font-weight:800;font-size:1.05rem;cursor:pointer;color:var(--wp--preset--color--kek-ink)} .kek-faq[open] summary{color:var(--wp--preset--color--kek-blue);margin-bottom:.6em} .kek-form-section .kek-container-narrow{max-width:760px} /* Design Reference §9 — blog feed (page 841 + Stage 5 reuse). */ .kek-blog-feed{max-width:820px;margin-inline:auto}.kek-blog-feed .kek-card{margin-bottom:28px} .kek-blog-feed h2 a{color:var(--wp--preset--color--kek-ink);text-decoration:none}.kek-blog-feed h2 a:hover{color:var(--wp--preset--color--kek-blue)} .wp-block-query-pagination{margin-top:20px;font-weight:700} /* Design Reference §7 — blog filter chips (Stage 5.1 blog presentation). */ .kek-blog-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:820px;margin:0 auto 30px} .kek-blog-filter a{padding:8px 18px;border:1px solid var(--wp--preset--color--kek-line);border-radius:999px;font-size:.85rem;font-weight:700;color:var(--wp--preset--color--kek-ink);text-decoration:none;background:#fff;transition:border-color .18s,color .18s,background .18s} .kek-blog-filter a:hover{border-color:var(--wp--preset--color--kek-blue);color:var(--wp--preset--color--kek-blue)} .kek-blog-filter a.is-active{background:var(--wp--preset--color--kek-blue);border-color:var(--wp--preset--color--kek-blue);color:#fff} /* §7/§9 — single-column post archives (Kadence post_archive_columns=1) centered like the feed. */ .kadence-posts-list.grid-lg-col-1{max-width:820px;margin-inline:auto} /* Stage EXTRA S-EXTRA-08/S-EXTRA-13E — shared detail and neutral split geometry. */ .kek-programme-detail__layout,.kek-content-form-split__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;align-items:start}.kek-programme-detail__content,.kek-programme-detail__sidebar,.kek-content-form-split__content,.kek-content-form-split__form{width:100%;min-width:0}.kek-programme-detail__sidebar{display:grid;gap:24px}.kek-programme-detail__summary,.kek-programme-detail__form{padding:28px}.kek-programme-detail__summary{border-top:4px solid var(--wp--preset--color--kek-blue);width:100%!important;max-width:none!important;box-sizing:border-box}.kek-programme-detail--seminar .kek-programme-detail__summary{border-top-color:var(--wp--preset--color--kek-blue-soft)}.kek-programme-detail--voucher .kek-programme-detail__summary,.kek-programme-detail--urgent .kek-programme-detail__summary{border-top-color:var(--wp--preset--color--kek-blue-dark)}.kek-programme-detail--corporate .kek-programme-detail__summary{border-top-color:var(--wp--preset--color--kek-blue-dark)}.kek-programme-detail__summary h2,.kek-programme-detail__form h2,.kek-content-form-split__form h2{margin-top:0;font-size:1.35rem}.kek-programme-detail__facts{list-style:none;padding:0;margin:0}.kek-programme-detail__facts li{display:grid;gap:3px;padding:13px 0;border-bottom:1px solid var(--wp--preset--color--kek-line)}.kek-programme-detail__facts li:last-child{border-bottom:0;padding-bottom:0}.kek-programme-detail__fact-label{color:var(--wp--preset--color--kek-muted);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.kek-programme-detail__fact-value{color:var(--wp--preset--color--kek-ink);font-weight:700}.kek-programme-status{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:5px 11px;border-radius:999px;background:var(--wp--preset--color--kek-blue-light);color:var(--wp--preset--color--kek-blue-dark);font-size:.78rem;font-weight:800}.kek-programme-status--open{background:var(--wp--preset--color--kek-bg-accent);color:var(--wp--preset--color--kek-blue-dark)}.kek-programme-status--closed{background:var(--wp--preset--color--kek-surface);color:var(--wp--preset--color--kek-muted)}.kek-programme-status--coming-soon{background:var(--wp--preset--color--kek-red-light);color:var(--wp--preset--color--kek-red-dark)}:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-container{margin-bottom:0}:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-field{padding-block:8px}:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-field-label{color:var(--wp--preset--color--kek-ink);font-weight:700}:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-form select,:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-form textarea{width:100%;max-width:none;border:1px solid var(--wp--preset--color--kek-line);border-radius:12px;background:var(--wp--preset--color--kek-surface);color:var(--wp--preset--color--kek-ink);padding:11px 13px}:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-form select:focus,:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-form textarea:focus{border-color:var(--wp--preset--color--kek-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--wp--preset--color--kek-blue) 18%,transparent);outline:0}:is(.kek-programme-detail__form,.kek-content-form-split__form) .wpforms-form textarea{min-height:120px}.kek-programme-detail .kek-faq summary:focus-visible{outline:3px solid var(--wp--preset--color--kek-blue);outline-offset:4px} /* Design Reference §7.2 / DR-A11 — neutral Content + Form Split pattern. */ .kek-content-form-split{padding-block:64px;background:var(--wp--preset--color--kek-white)}.kek-content-form-split__content,.kek-content-form-split__form{overflow-wrap:break-word}.kek-content-form-split__form{padding:30px}.kek-content-form-split__form .wpforms-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),.kek-content-form-split__form .wpforms-form select{min-height:44px}.kek-content-form-split__form .wpforms-form button,.kek-content-form-split__form .wpforms-form input[type=submit],.kek-content-form-split__content .wp-block-button__link{min-width:44px;min-height:44px}.kek-content-form-split :where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--wp--preset--color--kek-blue)!important;outline-offset:3px!important}.kek-content-form-split__form{position:static} .kek-programme-detail__sidebar{gap:16px} .kek-programme-detail .kek-faq{margin-block:0 8px} @media(max-width:1024px){.kek-programme-detail__layout,.kek-content-form-split__grid{grid-template-columns:1fr}} @media(max-width:720px){.kek-programme-detail__summary,.kek-programme-detail__form{padding:22px}.kek-content-form-split{padding-block:40px}} /* WP006 contact page — tighten the handoff from the split content to maps. */ body.page-id-510 .kek-content-form-split{padding-bottom:20px} body.page-id-510 .kek-maps-section{padding-top:20px} body.page-id-510 .kek-content-form-split__form{margin-top:48px} /* W004 — homepage-only transparent header over the hero, solid on scroll. Kadence supplies the overlay position, transparent background, white nav text and the solid sticky background; these rules only add the contrast and state work Kadence settings cannot express. */ /* `.wp-site-blocks > *` gives the masthead a 24px top margin, which is invisible on a solid header but offsets the absolutely positioned one. */ .transparent-header #masthead,.mobile-transparent-header #masthead,.transparent-header #wrapper>#inner-wrap,.mobile-transparent-header #wrapper>#inner-wrap{top:0;margin-block-start:0} .transparent-header #masthead .site-main-header-wrap,.mobile-transparent-header #masthead .site-main-header-wrap{box-shadow:none} .transparent-header #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start),.mobile-transparent-header #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start){box-shadow:0 8px 30px rgba(30,30,30,.07)} .transparent-header #masthead .site-main-header-wrap .site-header-row-container-inner,.mobile-transparent-header #masthead .site-main-header-wrap .site-header-row-container-inner{transition:background-color 220ms ease} /* Readability scrim behind the floating header, drawn above the slide photo and below the slide text/controls. */ /* Kadence now supplies the approved white-red mark for the transparent state. Keep the legacy white knockout only as a fallback for non-transparent-logo images, then restore the normal full-colour mark once the header is solid. */ .transparent-header #masthead .site-branding img:not(.kadence-transparent-logo),.mobile-transparent-header #mobile-header .site-branding img:not(.kadence-transparent-logo){filter:brightness(0) invert(1);transition:filter 220ms ease} .transparent-header #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding img,.mobile-transparent-header #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding img{filter:none} /* Keep the e-Class pill and dropdown panels legible in the floating state. */ .transparent-header #masthead .header-button{box-shadow:0 6px 18px rgba(0,0,0,.28)} .transparent-header #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-button{box-shadow:none} .transparent-header #masthead .header-navigation ul.sub-menu a,.transparent-header #masthead .header-navigation ul.sub-menu li>a{color:var(--wp--preset--color--kek-ink)} /* Visible focus must survive both states. */ .transparent-header #masthead a:focus-visible,.transparent-header #masthead button:focus-visible,.mobile-transparent-header #masthead a:focus-visible,.mobile-transparent-header #masthead button:focus-visible{outline:3px solid #fff;outline-offset:3px} .transparent-header #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) a:focus-visible,.transparent-header #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) button:focus-visible{outline-color:var(--wp--preset--color--kek-blue)} /* The accessibility toggle is fixed top-right by the plugin. Pinning the transparent header to the very top puts the burger under it, so drop the toggle clear of the header band on the homepage only. Narrow widths park the toggle bottom-right already and are left alone. */ @media only screen and (min-width:992px){.transparent-header .onetap-container-toggle .onetap-toggle,.mobile-transparent-header .onetap-container-toggle .onetap-toggle{margin-top:104px!important}} @media(prefers-reduced-motion:reduce){.transparent-header #masthead .site-branding img,.mobile-transparent-header #mobile-header .site-branding img,.transparent-header #masthead .site-main-header-wrap .site-header-row-container-inner{transition:none}} /* W002 — opt-in programme hero variant for the Σεμινάρια area. Layered after the base .kek-hero-subpage rules above so pages without the modifier are untouched. Design Reference §8.2 sub-page hero, with the blue-led palette of §1 and the §2 default blue eyebrow instead of the base hero's red. */ /* WP-064 B (Stage 36): the photo is the Page's own featured image, set as --kek-hero-photo by inc/programme-hero-photo.php; none → the plain blue hero. Was the shared photo 3271 for every Page. */ .kek-hero-subpage--programme{padding-bottom:84px;background:linear-gradient(135deg,color-mix(in srgb,var(--wp--preset--color--kek-bg-dark) 95%,transparent) 0%,color-mix(in srgb,var(--wp--preset--color--kek-blue-dark) 90%,transparent) 55%,color-mix(in srgb,var(--wp--preset--color--kek-bg-dark) 96%,transparent) 100%),var(--kek-hero-photo,none) center/cover no-repeat,var(--wp--preset--color--kek-bg-dark);border-bottom:none;color:var(--wp--preset--color--kek-blue-light)} /* Calmer decoration than the base ring: one soft wash rather than a 55px-thick circle cutting across the band. */ .kek-hero-subpage--programme::after{right:-150px;bottom:-230px;width:540px;height:540px;border:70px solid rgba(255,255,255,.16);border-radius:50%;background:none} /* S9 D4 - the second circle. `::before` was unused on this variant, so the disc needs no markup. It sits behind the copy because the rule below already lifts every child to z-index 1, and the base hero clips it with `overflow:hidden`. */ .kek-hero-subpage--programme::before{position:absolute;right:120px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none;content:""} .kek-hero-subpage--programme>*{position:relative;z-index:1} .kek-hero-subpage--programme .kek-section-heading__eyebrow{color:var(--wp--preset--color--kek-red-light)} .kek-hero-subpage--programme h1{margin-bottom:22px;letter-spacing:-.01em;color:var(--wp--preset--color--kek-blue-light)} /* The variant's stronger h1 presence is an accent rule, not a larger type size: §2 fixes the sub-page hero h1 at 3.45rem/2.55rem. */ .kek-hero-subpage--programme h1::after{display:block;width:72px;height:5px;margin-top:20px;border-radius:999px;background:var(--wp--preset--color--kek-blue-soft);content:""} /* DR §8.2 caps the sub-page hero lead at 690px. The group uses a constrained layout, and core centres anything narrower than the content column with `margin-inline:auto!important`, which would drift the lead away from the h1. Re-align it to the column start: the same inset core gives the full-width children, tracking whatever content width Kadence sets. */ .kek-hero-subpage--programme .kek-section-heading__lead,.kek-hero-subpage--programme p{max-width:690px;margin-left:max(0px,calc((100% - var(--wp--style--global--content-size))/2))!important;margin-right:auto!important;font-size:1.12rem;color:var(--wp--preset--color--kek-blue-light)} @media(max-width:720px){.kek-hero-subpage--programme{padding-bottom:60px}.kek-hero-subpage--programme::after{right:-190px;bottom:-260px}.kek-hero-subpage--programme h1{margin-bottom:18px}.kek-hero-subpage--programme h1::after{width:56px;height:4px;margin-top:16px}} /* W005 — programme media strip: a full-width band below a programme page that an editor fills with photos or partner logos through ordinary core Image blocks. Mixed logo and photo aspect ratios are put on one optical baseline by a fixed box plus object-fit:contain, so nothing is cropped and nothing sits raggedly. */ .kek-programme-media-strip{padding-block:64px} .kek-programme-media-strip .kek-programme-media-strip__items{gap:28px 40px} .kek-programme-media-strip figure{margin:0} .kek-programme-media-strip img{display:block;width:auto;max-width:240px;height:110px;object-fit:contain} @media(max-width:720px){.kek-programme-media-strip{padding-block:40px}.kek-programme-media-strip .kek-programme-media-strip__items{gap:20px 24px}.kek-programme-media-strip img{max-width:160px;height:80px}} /* WP001-F1 — constrain only the global footer logo widget. WP054-F4: the client asked for the footer mark 1.4x the 200px box that reproduced WP-001's 157px height, so 280px, rendering ~280x220.47 (attachment 8697 is a 127x100 SVG, 1.27:1, so the height follows the width). 280px is deliberate rather than merely asked for: it is under the 342px container a 390px viewport gives, so the mark renders FULL SIZE on a phone and every screen gets the same 1.4x. The 400px it replaced was capped to 342px there, silently making mobile 1.71x while desktop was 2x. The widget is not re-placed (WP052-F16). */ #colophon #media_image-1 img{width:280px;max-width:100%;height:auto} /* Contact info CSS */ .kek-location-grid{display:grid;gap:16px;align-items:stretch} .single-content .kek-locations-band .kek-location-grid>.kek-location-card{margin-block:0} .kek-location-card{min-width:0;box-sizing:border-box;padding:20px;border:1px solid var(--wp--preset--color--kek-line);border-radius:14px;background:var(--wp--preset--color--kek-surface);box-shadow:none} .kek-location-card__title{margin:0 0 16px;color:var(--wp--preset--color--kek-blue-dark);font-size:1.18rem} .kek-location-card a{color:var(--wp--preset--color--kek-blue-dark);text-decoration-thickness:1px;text-underline-offset:3px} .kek-location-card a:hover{color:var(--wp--preset--color--kek-blue)} .kek-location-card a:focus-visible{outline:3px solid var(--wp--preset--color--kek-blue);outline-offset:3px} .kek-locations-band .kek-location-grid{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:720px){.kek-location-card{padding:18px}.kek-locations-band .kek-location-grid{grid-template-columns:minmax(0,1fr)}} /* WP-007 — Pallini profile approval draft. */ .kek-profile-accreditation-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center; margin-top: 32px; } .kek-profile-accreditation-row figure, .kek-profile-why__iso-grid figure { margin: 0; } /* WP-050 (WP050-F7, D23e) — ΕΟΠΠΕΠ and ΦΕΚ capped at 260px, ~73 % of the 355px they rendered at 1440. The bound is the legibility of the numbers printed inside the artwork («ΦΕΚ: 3009 Β′15-06-2022»); do not go lower without re-reading them. min() keeps the old 100 % limit for narrow cells. */ .kek-profile-accreditation-row img { display: block; width: auto; max-width: min(100%, 260px); height: auto; margin-inline: auto; } /* WP-050 (WP050-F2, D23) — Page 6 opening section: the right column is a photo panel. The figure is absolutely positioned, so the photo adds no height and the column stretches to the text column's height at every width (the task: "take the whole column always"). Darkening and blur are baked into the image file (docs/assets/WP-050); never add an overlay or filter here, or they apply twice. 781px is where core stacks wp-block-columns, so the panel goes exactly where it would otherwise drop below the text. */ .wp-block-columns > .wp-block-column.kek-profile-photo { align-self: stretch; position: relative; overflow: hidden; min-height: 0; } .kek-profile-photo > .wp-block-image { position: absolute; inset: 0; margin: 0; } .kek-profile-photo > .wp-block-image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform: scale(1.08); } @media (max-width: 781px) { .wp-block-columns > .wp-block-column.kek-profile-photo { display: none; } } .kek-profile-why__layout { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: 48px; align-items: start; } .kek-profile-why__copy { grid-column: 2; grid-row: 1; min-width: 0; } .kek-profile-why__iso-grid { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; } .kek-profile-why__copy h3 { margin-top: 1.5em; margin-bottom: .45em; color: var(--wp--preset--color--kek-ink); font-size: 1.2rem; } .kek-profile-why__iso-grid img { display: block; width: 100%; height: auto; aspect-ratio: 595 / 842; object-fit: contain; } @media (max-width: 1024px) { .kek-profile-why__layout { gap: 32px; } } @media (max-width: 720px) { .kek-profile-accreditation-row, .kek-profile-why__layout { grid-template-columns: minmax(0, 1fr); } .kek-profile-why__copy, .kek-profile-why__iso-grid { grid-column: 1; } .kek-profile-why__copy { grid-row: 1; } .kek-profile-why__iso-grid { grid-row: 2; } } /* WP-063 (Stage 31, D40) — Page 6 on mobile only: smaller certificate images and tighter paragraph gaps. Scoped to body.page-id-6 and to <= 720px (the theme's mobile breakpoint); desktop and tablet are untouched. - The six ISO certificate scans go from 2 to 3 per row inside a centred 480px box (~106px wide at 390, under half the height). The ΕΟΠΠΕΠ / ΦΕΚ logos are NOT shrunk: WP050-F7 sets 260px as their legibility floor. - (Its paragraph-gap rule was retired by WP-067 / Stage 35: the site-wide mobile spacing below now covers it.) */ @media (max-width: 720px) { body.page-id-6 .kek-profile-why__iso-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 480px; margin-inline: auto; } } /* WP-063 31.C1 (owner, 2026-10-07: "srink them too" / tighter space between sections and headings) — Page 6, <= 720px only. - ΕΟΠΠΕΠ / ΦΕΚ logos 260 -> 180px on mobile. This deliberately overrides WP050-F7's 260px legibility floor ON MOBILE ONLY, on the owner's word; desktop and tablet keep 260px. - (Its band, block, paragraph and heading spacing rules were retired by WP-067 / Stage 35: those values are now the site's own mobile spacing, in the WP-067 block at the end of this file.) */ @media (max-width: 720px) { body.page-id-6 .kek-profile-accreditation-row img { max-width: min(100%, 180px); } } /* --------------------------------------------------------------------------- * WP-025 (Stage 22) — the ESPA publicity strip above the footer. * * Rendered by `inc/footer-funding-strip.php` on `kadence_before_footer`, on * every page. It replaces the closable Convert Pro info bar that Step 22.5 * retires, and WP025-F8 is why it lands first: the two artworks are an * EU-funding publicity obligation and the site must never be without them. * * WP025-F5 and PLAN §8 invariant 12 — the sizing is DERIVED, not chosen. One * shared height is declared once, below, and each artwork's width cap is that * height times its OWN aspect ratio, measured from the file at Step 22.1: * * 1745 599 × 133 → 4.503759 : 1 → 69px × 4.503759 = 310.76px * 1766 770 × 118 → 6.525424 : 1 → 69px × 6.525424 = 450.25px * * Both caps are well inside the intrinsic 599px and 770px, so neither artwork * is upscaled. The WP-052 hero rail's own caps (470px/584px, coefficients * 0.146799/0.118098) belong to attachments 8733/8736 and are NOT reused here — * these are different files with different ratios, and reusing them is exactly * the defect invariant 12 exists to prevent. * * Below 720px the pair STACKS (D29, the owner's one change to the * recommendation). Stacked there is no shared height to hold: the same * `min(, 100%)` rule applies, 100% wins, and `height: auto` lets each * artwork's own ratio size it. That is why no second height is hard-coded * anywhere in this block — 69px appears exactly once. * * Note that Kadence's `global.min.css` sets `img{display:block;height:auto; * max-width:100%}` site-wide. It is that rule which stacks the pair out of the * old 80px bar and clips one artwork at desktop today (Step 22.1). The layout * below is built on flex containers rather than on inline-image behaviour, so * the global rule is what it wants rather than something to fight. * ------------------------------------------------------------------------ */ .kek-footer-funding { /* The one shared height. Both width caps are derived from it. */ --kek-footer-funding-height: 69px; box-sizing: border-box; width: 100%; /* * Flush against both neighbours. `#wrapper` is a flex column and WordPress' * global styles give each of its children `margin-block-start: 24px`, which * is what used to separate `#inner-wrap` from `#colophon`. Left alone that * gap would appear ABOVE the strip and a second one below it, so the band * would float in 24px of page rather than sit directly above the footer * (WP025-F3). The strip takes that slot over: it drops its own margin, and * the rule below drops the footer's for as long as the strip precedes it. * Reverting the strip restores both, because both rules go with it. */ margin: 0; /* Opaque, with a hard boundary: the band simply starts, as the hero rail's does. No gradient, no rule, no shadow. */ background: var(--wp--preset--color--kek-white); } .kek-footer-funding + .site-footer { margin-top: 0; } .kek-footer-funding__inner { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; /* First artwork flush left, second flush right (WP025-F3). */ justify-content: space-between; gap: 16px; width: 100%; /* * No horizontal padding: the artworks run to the edge of the viewport. * The WP-052 hero rail insets its pair by 32px, and this strip did too * until the owner looked at it on 2026-09-17 — "the images do not look * good on the center, please make them to go to the edge … not only on * phones, on web too". Only the safe-area insets remain, so a notched * device does not clip an artwork; each has an explicit 0px fallback so * the declaration stays valid where `env()` is unsupported. */ padding: 8px env(safe-area-inset-right, 0px) 8px env(safe-area-inset-left, 0px); } /* * The cap is carried by the FIGURE, not by the image inside it. A percentage * width on the image resolves against its figure, and a flex item with no * width of its own is sized by its content — so capping the image left each * figure at the file's intrinsic 599px / 770px, and `space-between` pushed * those boxes to the edges while the images sat at their left edge inside * them. The second artwork then measured 346.69px short of flush right at * 1440. Sizing the figure and letting the image fill it puts the derived cap * on the box the layout actually positions. * * `flex-shrink: 1` is deliberate and keeps the shared height between 721px and * the width where the pair stops fitting: shrinkage is distributed in * proportion to each item's base width, so both caps scale by the same factor * and the two rendered heights stay equal all the way down to the 720px * breakpoint, where the pair stacks instead. */ .kek-footer-funding__artwork { flex: 0 1 auto; min-width: 0; margin: 0; padding: 0; } .kek-footer-funding__artwork img { display: block; width: 100%; height: auto; object-fit: contain; } .kek-footer-funding__artwork--first { width: min(calc(var(--kek-footer-funding-height) * 4.503759), 100%); } .kek-footer-funding__artwork--second { width: min(calc(var(--kek-footer-funding-height) * 6.525424), 100%); } @media (max-width: 720px) { /* * D29: stacked, not shrunk side by side. Held side by side at 390px a * 6.525:1 artwork and a 4.504:1 one both render around 26px tall, well * under the legibility the publicity obligation assumes. * * Stacked, each artwork KEEPS ITS EDGE — first flush left, second flush * right, the same arrangement as desktop. This is the sub-detail D29 left * open for Step 22.4. It was first built centred; the owner looked at the * result on 2026-09-17 and asked for the edges instead: "the images do not * look good on the center, please make them to go to the edge". It changes * no measurement, as D29 said it would not. Where an artwork is already * capped by the row's full width there is nothing left to align, which is * why this is visible at 720px and not at 390px. * * WP076-F3 (Stage 50, client 2026-10-18): back to CENTRED, still stacked — * "we can keep them as they are on the phone mode, but can we pls center * them?" A new ticket, not a revert of the 2026-09-17 choice. */ .kek-footer-funding__inner { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; padding: 12px env(safe-area-inset-right, 0px) 12px env(safe-area-inset-left, 0px); } .kek-footer-funding__artwork--first, .kek-footer-funding__artwork--second { align-self: center; } } /* WP-058 — Voucher posts. Everything below is scoped to single Posts. D33: the poster is shown whole. Only the Voucher posts set Kadence's per-post feature position to "above", so this rule reaches nothing else; the site-wide post_feature_ratio stays as it is (changing it would reshape the «Νέα» posts). It mirrors Kadence's own ratio-inherit rules. If Kadence renames these classes, the poster falls back to Kadence's 3:2 crop and nothing else changes. */ .single-post .wp-site-blocks .post-thumbnail.article-post-thumbnail.kadence-thumbnail-position-above { padding-bottom: 0; height: auto; } .single-post .wp-site-blocks .post-thumbnail.article-post-thumbnail.kadence-thumbnail-position-above .post-thumbnail-inner { position: static; } /* 794px is the poster's size in Kadence's default narrow post width. The Voucher posts use the wider "normal" width for the form beside the text, and a square poster at full width there is 1242px tall at 1440. */ .single-post .wp-site-blocks .post-thumbnail.article-post-thumbnail.kadence-thumbnail-position-above img { display: block; width: auto; max-width: min(100%, 794px); height: auto; margin-inline: auto; } /* Text on the left, details and form cards beside it (D32 revised to M3, owner 2026-09-23); the grid and its 1024px stacking are the programme pages' own. These posts use Kadence's per-post "normal" width for room. */ .single-post .kek-post-voucher .kek-programme-detail__summary, .single-post .kek-post-voucher .kek-programme-detail__form { width: 100%; max-width: none; box-sizing: border-box; } .single-post .kek-post-facts { margin: 0; padding-left: 0; } /* The status pill beside the category links in the post header. */ .kek-post-status-header { margin-left: 10px; vertical-align: middle; } /* --------------------------------------------------------------------------- * WP-067 (Stage 35, D44) — one set of spacings for the whole site. "One central value, the tightest wins." * Bands: .kek-section-band and .kek-content-form-split are 64px top and bottom on desktop and tablet (was 92px; 64px is * the tightest band already in use, the programme media strip) and 40px on mobile (was 68px; media strip 48 -> 40px). * Those values live in the bands' own rules above. Kadence's page padding (.content-area) is the Customizer setting * content_spacing (desktop 5 -> 4rem), not CSS. Below: the mobile gaps, which were Page 6's alone (Stage 31) and are * now the site's. The hero and the contact panel keep their own inside spacing. Values and exceptions: * docs FINAL-UNIFORM-SITE.md (documentation repo). * ------------------------------------------------------------------------- */ @media (max-width: 720px) { /* Kadence's own central gap (paragraphs, lists, images, groups, top-level blocks: 2rem) -> 16px on mobile. Blocks with their own margins (post cards, related posts, carousels) keep them: only Kadence's 32px changes. */ .single-content { --global-md-spacing: 16px; } /* The hero and the contact panel keep their inside spacing (PLAN §8 invariants 2, 4, 10). */ .single-content .kek-hero-subpage > *, .single-content .wp-block-kek10-epikoinonia-original > * { --global-md-spacing: 2rem; } /* 20px above a heading instead of Kadence's 1.5em. Same weight as Kadence's rule (.single-content h2), so a heading that is first in its box (Kadence: 0) or styled by a block keeps its own margin. */ .single-content :is(h2, h3, h4):where(:not(.wp-block-kek10-epikoinonia-original *)) { margin-top: 20px; } } /* ------------------------------------------------------------------------- * Stage 34 (WP-066), owner 2026-10-11: boxes that sit side by side in one row are the same height. * The grids already stretch every box to its row's height; what broke it was the 32px bottom margin the block layout * puts on every box but the last (the grid's own 24px gap already spaces them), so boxes 1-2 painted 32px shorter. * From 721px up (2-4 columns) the boxes inside the box grids carry no outer margin. At 720px and below the boxes stack * one per row, are not side by side, and keep today's spacing (Stage 35). No fixed height: the tallest box sets the row. * The margin comes from Kadence's content.min.css (.single-content .wp-block-group, weight 0-2-0, loaded after this file), * so the selector repeats the grid class once to outweigh it (0-3-0) - do not shorten it back. * ------------------------------------------------------------------------- */ @media (min-width: 721px) { .single-content :is(.kek-grid-2, .kek-grid-3, .kek-grid-4):is(.kek-grid-2, .kek-grid-3, .kek-grid-4) > * { margin-top: 0; margin-bottom: 0; } } /* --------------------------------------------------------------------------- * WP-072 (Stage 44): «Πληροφορίες» in the «Με μια ματιά» block - one line per * old row, the old label in bold, the value in normal weight. Kadence's * content.min.css loads after this file and sets paragraph margins at 0-1-1, * so the selector carries three classes to outweigh it. * ------------------------------------------------------------------------- */ .kek-programme-facts .kek-programme-detail__facts .kek-programme-facts__info { font-weight: 400; line-height: 1.5; } .kek-programme-facts .kek-programme-detail__facts .kek-programme-facts__info p { margin: 0; } .kek-programme-facts .kek-programme-detail__facts .kek-programme-facts__info p + p { margin-top: 6px; } .kek-programme-facts .kek-programme-detail__facts .kek-programme-facts__info :is(strong, b) { font-weight: 700; } /* --------------------------------------------------------------------------- * Stage 46 rework (owner, 2026-10-17): the homepage «Γιατί να επιλέξετε το * ΚΕΚ10» band is WHITE like the rest of the site and carries circles like a * loose drawing (46.G1 = R2, the owner's sketch). 46.9 (owner at 46.G2): every * circle is #3F81A5, and the left pair sits on the page's left edge - the small * one whole against it, the big one running off it, as the ring with the hole * runs off the right edge. Pure CSS background layers on the band's own class * `kek-why-band` (Page 509), so they sit behind the white boxes by nature. * #26313a text on #3F81A5 is only 3.09:1, so NO circle may sit under the * heading or the lead (checked at 12 widths, docs evidence 46.9/gen-46.9.js, * which also generates the four @media blocks below - edit the sets there and * regenerate rather than hand-editing). A 4px white outline (`--kek-why-line`) * round the front circle of each overlapping pair keeps two circles of one * colour reading as two; the same white draws the small ring inside the little * disc. Two classes, to outweigh the one-class band rules above whatever the * load order. Positions are from the band's left or right edge. * Stage 56 (WP-081 B, D62 d, 2026-10-29): the circles are kek-bg-accent #C8D9E6 (Ink 9.2:1 on it, Muted only 4.06:1, * so the no-circle-under-the-heading-or-lead rule stays); positions unchanged, the generator needs no re-run. * ------------------------------------------------------------------------- */ .kek-section-band.kek-why-band { --kek-why-circle: var(--wp--preset--color--kek-bg-accent); --kek-why-line: var(--wp--preset--color--kek-white); background-color: var(--wp--preset--color--kek-white); background-repeat: no-repeat; } @media (min-width: 1440px) { .kek-section-band.kek-why-band { background-image: radial-gradient(circle 74px at left 78px top 78px, transparent 69.5px, var(--kek-why-line) 70px, var(--kek-why-line) 73.5px, transparent 74px), radial-gradient(circle 70px at left 78px top 78px, var(--kek-why-circle) 69.5px, transparent 70px), radial-gradient(circle 160px at left 60px top 250px, var(--kek-why-circle) 159.5px, transparent 160px), radial-gradient(circle 87px at right 305px top 167px, transparent 82.5px, var(--kek-why-line) 83px, var(--kek-why-line) 86.5px, transparent 87px), radial-gradient(circle 83px at right 305px top 167px, var(--kek-why-circle) 82.5px, transparent 83px), radial-gradient(circle 22px at right 266px top 58px, var(--kek-why-circle) 21.5px, transparent 22px), radial-gradient(circle 7px at right 228px top 71px, transparent 4.5px, var(--kek-why-line) 5px, var(--kek-why-line) 6.5px, transparent 7px), radial-gradient(circle 14px at right 228px top 71px, var(--kek-why-circle) 13.5px, transparent 14px), radial-gradient(circle 160px at right 61px top 276px, transparent 127.5px, var(--kek-why-circle) 128px, var(--kek-why-circle) 159.5px, transparent 160px); } } @media (min-width: 1025px) and (max-width: 1439px) { .kek-section-band.kek-why-band { background-image: radial-gradient(circle 60px at left 64px top 64px, transparent 55.5px, var(--kek-why-line) 56px, var(--kek-why-line) 59.5px, transparent 60px), radial-gradient(circle 56px at left 64px top 64px, var(--kek-why-circle) 55.5px, transparent 56px), radial-gradient(circle 128px at left 48px top 200px, var(--kek-why-circle) 127.5px, transparent 128px), radial-gradient(circle 64px at right 130px top 150px, transparent 59.5px, var(--kek-why-line) 60px, var(--kek-why-line) 63.5px, transparent 64px), radial-gradient(circle 60px at right 130px top 150px, var(--kek-why-circle) 59.5px, transparent 60px), radial-gradient(circle 18px at right 213px top 46px, var(--kek-why-circle) 17.5px, transparent 18px), radial-gradient(circle 5.5px at right 182px top 57px, transparent 3px, var(--kek-why-line) 3.5px, var(--kek-why-line) 5px, transparent 5.5px), radial-gradient(circle 11px at right 182px top 57px, var(--kek-why-circle) 10.5px, transparent 11px), radial-gradient(circle 128px at right 49px top 221px, transparent 101.5px, var(--kek-why-circle) 102px, var(--kek-why-circle) 127.5px, transparent 128px); } } @media (min-width: 721px) and (max-width: 1024px) { .kek-section-band.kek-why-band { background-image: radial-gradient(circle 30px at left 38px top 60px, var(--kek-why-circle) 29.5px, transparent 30px), radial-gradient(circle 70px at left 10px top 250px, var(--kek-why-circle) 69.5px, transparent 70px), radial-gradient(circle 64px at right 230px bottom 190px, transparent 59.5px, var(--kek-why-line) 60px, var(--kek-why-line) 63.5px, transparent 64px), radial-gradient(circle 60px at right 230px bottom 190px, var(--kek-why-circle) 59.5px, transparent 60px), radial-gradient(circle 14px at right 170px bottom 280px, var(--kek-why-circle) 13.5px, transparent 14px), radial-gradient(circle 4.5px at right 140px bottom 272px, transparent 2px, var(--kek-why-line) 2.5px, var(--kek-why-line) 4px, transparent 4.5px), radial-gradient(circle 9px at right 140px bottom 272px, var(--kek-why-circle) 8.5px, transparent 9px), radial-gradient(circle 120px at right 40px bottom 170px, transparent 95.5px, var(--kek-why-circle) 96px, var(--kek-why-circle) 119.5px, transparent 120px); } } @media (max-width: 720px) { .kek-section-band.kek-why-band { background-image: radial-gradient(circle 12px at left 20px top 20px, var(--kek-why-circle) 11.5px, transparent 12px), radial-gradient(circle 40px at left -12px top 70px, var(--kek-why-circle) 39.5px, transparent 40px), radial-gradient(circle 9px at right 30px top 20px, var(--kek-why-circle) 8.5px, transparent 9px), radial-gradient(circle 3px at right 12px top 24px, transparent 0.5px, var(--kek-why-line) 1px, var(--kek-why-line) 2.5px, transparent 3px), radial-gradient(circle 6px at right 12px top 24px, var(--kek-why-circle) 5.5px, transparent 6px), radial-gradient(circle 60px at right -20px bottom 10px, transparent 45.5px, var(--kek-why-circle) 46px, var(--kek-why-circle) 59.5px, transparent 60px); } } .kek-why-band .kek-section-heading .kek-section-heading__lead { color: #26313a; } /* --------------------------------------------------------------------------- * Ad-hoc H.5 (owner 2026-10-17): the same circles band round a TEXT section - * Page 6's «Υπηρεσίες Διά Βίου Μάθησης» and its «Εκδήλωση Ενδιαφέροντος» * button are one Group `kek-section-band kek-why-band kek-why-band--text`. * The text runs the full container width, so the homepage sets above would sit * under it; this modifier replaces them with circles ONLY in the free space * (#26313a on #3F81A5 is 3.09:1): the band's top padding (64px, 40px phone), * the bottom zone beside the button (44px gap + button + 64px padding, the * button is centred and 266px wide), and from 1440px the side margins outside * the 1180px container. Three classes: outweighs the two-class sets above. * The inner content-form-split loses its own white, its padding and Kadence's * group margin, so the band carries the spacing. * ------------------------------------------------------------------------- */ .single-content .kek-why-band--text > .kek-content-form-split { margin-block: 0; padding-block: 0; background: transparent; } .single-content .kek-why-band--text > .wp-block-buttons { margin-top: 44px; margin-bottom: 0; } @media (min-width: 721px) { .kek-section-band.kek-why-band.kek-why-band--text { background-image: radial-gradient(circle 26px at left 40px top 30px, transparent 21.5px, var(--kek-why-line) 22px, var(--kek-why-line) 25.5px, transparent 26px), radial-gradient(circle 22px at left 40px top 30px, var(--kek-why-circle) 21.5px, transparent 22px), radial-gradient(circle 14px at right 120px top 30px, var(--kek-why-circle) 13.5px, transparent 14px), radial-gradient(circle 7px at right 92px top 44px, transparent 4.5px, var(--kek-why-line) 5px, var(--kek-why-line) 6.5px, transparent 7px), radial-gradient(circle 14px at right 92px top 44px, var(--kek-why-circle) 13.5px, transparent 14px), radial-gradient(circle 32px at left 170px bottom 110px, transparent 27.5px, var(--kek-why-line) 28px, var(--kek-why-line) 31.5px, transparent 32px), radial-gradient(circle 28px at left 170px bottom 110px, var(--kek-why-circle) 27.5px, transparent 28px), radial-gradient(circle 70px at left 60px bottom 70px, var(--kek-why-circle) 69.5px, transparent 70px), radial-gradient(circle 75px at right 40px bottom 75px, transparent 56.5px, var(--kek-why-circle) 57px, var(--kek-why-circle) 74.5px, transparent 75px); } } @media (min-width: 1440px) { .kek-section-band.kek-why-band.kek-why-band--text { background-image: radial-gradient(circle 26px at left 40px top 30px, transparent 21.5px, var(--kek-why-line) 22px, var(--kek-why-line) 25.5px, transparent 26px), radial-gradient(circle 22px at left 40px top 30px, var(--kek-why-circle) 21.5px, transparent 22px), radial-gradient(circle 50px at left 50px top 170px, var(--kek-why-circle) 49.5px, transparent 50px), radial-gradient(circle 90px at left -40px top 420px, var(--kek-why-circle) 89.5px, transparent 90px), radial-gradient(circle 14px at right 120px top 30px, var(--kek-why-circle) 13.5px, transparent 14px), radial-gradient(circle 7px at right 92px top 44px, transparent 4.5px, var(--kek-why-line) 5px, var(--kek-why-line) 6.5px, transparent 7px), radial-gradient(circle 14px at right 92px top 44px, var(--kek-why-circle) 13.5px, transparent 14px), radial-gradient(circle 110px at right -40px top 300px, transparent 85.5px, var(--kek-why-circle) 86px, var(--kek-why-circle) 109.5px, transparent 110px), radial-gradient(circle 32px at left 290px bottom 110px, transparent 27.5px, var(--kek-why-line) 28px, var(--kek-why-line) 31.5px, transparent 32px), radial-gradient(circle 28px at left 290px bottom 110px, var(--kek-why-circle) 27.5px, transparent 28px), radial-gradient(circle 70px at left 180px bottom 70px, var(--kek-why-circle) 69.5px, transparent 70px), radial-gradient(circle 75px at right 200px bottom 75px, transparent 56.5px, var(--kek-why-circle) 57px, var(--kek-why-circle) 74.5px, transparent 75px); } } @media (max-width: 720px) { .kek-section-band.kek-why-band.kek-why-band--text { background-image: radial-gradient(circle 12px at left 20px top 20px, var(--kek-why-circle) 11.5px, transparent 12px), radial-gradient(circle 9px at right 30px top 20px, var(--kek-why-circle) 8.5px, transparent 9px), radial-gradient(circle 3px at right 12px top 24px, transparent 0.5px, var(--kek-why-line) 1px, var(--kek-why-line) 2.5px, transparent 3px), radial-gradient(circle 6px at right 12px top 24px, var(--kek-why-circle) 5.5px, transparent 6px), radial-gradient(circle 40px at left -12px bottom 30px, var(--kek-why-circle) 39.5px, transparent 40px), radial-gradient(circle 46px at right -16px bottom 50px, transparent 33.5px, var(--kek-why-circle) 34px, var(--kek-why-circle) 45.5px, transparent 46px); } } /* --------------------------------------------------------------------------- * WP-074 (Stage 48, owner 2026-10-16): the red button `kek-button--red` is ONE * colour: since ad-hoc H.3 (2026-10-17 evening) the theme's own KEK Red #D81E00 * (owner: *"i want the classic red on the theme"*; white text 5.12:1). Before that: * #9A584C (Stage 48), then the theme's dark green #5F7F43 (Stage 48 rework). The * class keeps its name: it is saved in Page content. Background, the 2px ring on the * `.wp-block-button` wrapper (PLAN §8 inv. 13: restated, never deleted, or every * button shrinks 4px) and hover/focus all use it, so hover changes nothing but * the cursor. The rules are in the minified block at the top of this file * (`.kek-button--red`, `.wp-block-button.kek-button--red>.wp-block-button__link`); * this is the one value to change next time. Everywhere the class is used. * Because the colour no longer changes on focus, keyboard focus gets its own * visible outline (accessibility floor, not a design change): white, drawn inside * the wrapper's pill around the link, 5.12:1 on #D81E00. * ------------------------------------------------------------------------- */ :root { --kek-button-red: var(--wp--preset--color--kek-red); } .kek-button--red:focus-visible, .wp-block-button.kek-button--red > .wp-block-button__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* --------------------------------------------------------------------------- * WP-075 (Stage 49, owner 2026-10-16, option 2): the chat button (AI Engine) * lined up with the accessibility button (OneTap) - same 15px right edge on * every screen, and never on top of it. Child-theme CSS only; no plugin file or * setting changed. Leans on both plugins' internals (WARNINGS row 7): * - OneTap draws its button 15px from the edges (its settings), TOP right from * 992px up and BOTTOM right below 992px, 52px wide, 48px at <= 768px, 44px at * <= 576px (its front-end CSS and class-accessibility-onetap-public.php). * - AI Engine fixes the whole chat box (`.mwai-window`, button + window) 30px * from the corner; at <= 760px it fixes the button itself 20px from the * corner with !important at five classes - hence the doubled classes below. * Above OneTap the chat button sits 12px clear: bottom = 15 + OneTap + 12. * ------------------------------------------------------------------------- */ body .mwai-chat.mwai-window.mwai-bottom-right { right: 15px; bottom: 15px; } @media (max-width: 991.98px) { body .mwai-chat.mwai-window.mwai-bottom-right { bottom: 79px; /* 15 + 52 + 12 */ } } @media (max-width: 768px) { body .mwai-chat.mwai-window.mwai-bottom-right { bottom: 75px; /* 15 + 48 + 12 */ } } @media (max-width: 760px) { body .mwai-chat.mwai-window.mwai-window.mwai-bottom-right.mwai-bottom-right .mwai-trigger { right: 15px !important; bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important; } } @media (max-width: 576px) { body .mwai-chat.mwai-window.mwai-window.mwai-bottom-right.mwai-bottom-right .mwai-trigger { bottom: calc(71px + env(safe-area-inset-bottom, 0px)) !important; /* 15 + 44 + 12 */ } } /* --------------------------------------------------------------------------- * Ad-hoc H.2 (owner 2026-10-17): on the homepage the «Σεμινάρια» heading, both * rows of programme cards and the contact button below them are ONE group * (`.kek-seminar-group`, a Group block on Page 509) on one grey (KEK Surface) * background, close together: the two card rows are the cards' own 24px gap * apart (were 92px, half white, half grey) and the button keeps its 44px. The * group carries the section's 72px (phone 52px) top and bottom; the carousels * inside drop their own vertical padding and alternating background * (blocks/programme-carousel/style.css), and keep their side padding. * `.single-content` raises the weight to 0-3-0: the carousel's own rules are * 0-2-0, and so is Kadence's `.single-content .wp-block-buttons` margin, which * loads after this file (WARNINGS row 8). Any page can use the class. * ------------------------------------------------------------------------- */ .single-content .kek-seminar-group.kek-seminar-group { padding-block: 72px; background: var(--wp--preset--color--kek-surface); } .single-content .kek-seminar-group > .wp-block-kek10-programme-carousel { margin-block: 0; padding-block: 0; background: transparent; } .single-content .kek-seminar-group > .wp-block-kek10-programme-carousel + .wp-block-kek10-programme-carousel { margin-top: 24px; } .single-content .kek-seminar-group > .wp-block-buttons { margin-bottom: 0; } @media (max-width: 720px) { .single-content .kek-seminar-group.kek-seminar-group { padding-block: 52px; } } /* Ad-hoc W.3 (owner, 2026-11-01): the desktop header is 80% of the screen, never narrower than the site (1290px) and never wider than 1600px, so the logo (200px, theme mod) + 9 Greek menu items + e-Class stay on one row. Below 1800px the menu items use Kadence's default spacing (1.2em) instead of the saved 2.06em; text size unchanged. Under 1280px two rows are accepted. WARNINGS #11. */ @media (min-width:1025px){#main-header .site-main-header-wrap .site-header-row-container-inner>.site-container{max-width:clamp(1290px,80vw,1600px)}} /* Stage 68.2: .6em (8.74px) → .385em (5.6px) to make room for the language globe after e-Class (mockup C, owner 2026-11-04). */ @media (min-width:1025px) and (max-width:1799px){#main-header .main-navigation .primary-menu-container>ul>li.menu-item>a{padding-left:.385em;padding-right:.385em}} /* Stage 59.3 (S59-F3): «Με μια ματιά» (kek10/programme-facts) «Χρώμα» option — the card's top line from the component colour pattern (theme.json settings.custom, Stage 58). Last in the file so it wins over the section-variant rules above. */ .kek-programme-detail__summary.kek-programme-facts--accent-dark-blue{border-top-color:var(--wp--custom--component-color-pattern--dark-blue)} .kek-programme-detail__summary.kek-programme-facts--accent-blue{border-top-color:var(--wp--custom--component-color-pattern--blue)} .kek-programme-detail__summary.kek-programme-facts--accent-red{border-top-color:var(--wp--custom--component-color-pattern--red)} .kek-programme-detail__summary.kek-programme-facts--accent-green{border-top-color:var(--wp--custom--component-color-pattern--green)} /* Stage 61.3 (S61-F2): the light hero's eyebrow at the dark hero's size. The dark hero gets 1.12rem (17.92 px, every width) from `.kek-hero-subpage--programme p`; the light hero kept the base .78rem (12.48 px). Owner: keep the bigger one. */ .kek-hero-subpage .kek-section-heading__eyebrow{font-size:1.12rem} /* Stage 62 (WP-056, S62-F1–F3): ONE set of menu variables for the desktop header and Kadence's mobile drawer. Change a value here and both follow. The dropdown / sub-menu line colour is per menu item: put a class in the item's «CSS Classes» field (Appearance → Menus, Screen Options → CSS Classes): kek-line-dark-blue, kek-line-blue, kek-line-red, kek-line-green, kek-line-soft-blue (the default). The two ID rules near the top (691 Σεμινάρια, 8234 Voucher) set the same variable for today's Greek items. */ #masthead .header-navigation,#mobile-drawer{ --kek-menu-bg:var(--wp--preset--color--kek-white); --kek-menu-text:var(--wp--preset--color--kek-ink); --kek-menu-hover:var(--wp--preset--color--kek-blue); --kek-menu-sep:var(--wp--preset--color--kek-line); --kek-menu-line:var(--wp--preset--color--kek-blue-soft); } #masthead .header-navigation li.kek-line-dark-blue,#mobile-drawer li.kek-line-dark-blue{--kek-menu-line:var(--wp--custom--component-color-pattern--dark-blue)} #masthead .header-navigation li.kek-line-blue,#mobile-drawer li.kek-line-blue{--kek-menu-line:var(--wp--custom--component-color-pattern--blue)} #masthead .header-navigation li.kek-line-red,#mobile-drawer li.kek-line-red{--kek-menu-line:var(--wp--custom--component-color-pattern--red)} #masthead .header-navigation li.kek-line-green,#mobile-drawer li.kek-line-green{--kek-menu-line:var(--wp--custom--component-color-pattern--green)} #masthead .header-navigation li.kek-line-soft-blue,#mobile-drawer li.kek-line-soft-blue{--kek-menu-line:var(--wp--preset--color--kek-blue-soft)} /* Mobile drawer: white panel, Ink text, the desktop menu's font size/weight, hover/current kek-blue, theme-line separators, and the open sub-menu carries the item's line on top — the same line as the desktop dropdown. */ #mobile-drawer .drawer-inner{background:var(--kek-menu-bg);color:var(--kek-menu-text)} #mobile-drawer .drawer-header .drawer-toggle,#mobile-drawer .menu-toggle-close{color:var(--kek-menu-text)} #mobile-drawer .mobile-navigation ul li>a,#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap>a{color:var(--kek-menu-text);font-size:.91rem;font-weight:700} #mobile-drawer .mobile-navigation ul li>a,#mobile-drawer .mobile-navigation ul li.menu-item-has-children>.drawer-nav-drop-wrap{border-bottom-color:var(--kek-menu-sep)} #mobile-drawer .mobile-navigation ul li.menu-item-has-children>.drawer-nav-drop-wrap>a{border-bottom:0} #mobile-drawer .mobile-navigation .drawer-nav-drop-wrap .drawer-sub-toggle{color:var(--kek-menu-text);border-left-color:var(--kek-menu-sep)} #mobile-drawer .mobile-navigation ul li>a:hover,#mobile-drawer .mobile-navigation ul li>a:focus,#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap>a:hover,#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap>a:focus,#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap .drawer-sub-toggle:hover,#mobile-drawer .mobile-navigation ul li.current-menu-item>a,#mobile-drawer .mobile-navigation ul li.current-menu-item>.drawer-nav-drop-wrap>a,#mobile-drawer .mobile-navigation ul li.current-menu-ancestor>.drawer-nav-drop-wrap>a{color:var(--kek-menu-hover)} #mobile-drawer .mobile-navigation ul ul.sub-menu{border-top:3px solid var(--kek-menu-line)} /* Stage 60.1 (F1, owner 2026-11-01): red buttons in the OneTap accessibility tool's contrast modes. OneTap recolours text but not our red fill: light mode gave #27272D on red 3.28 : 1, dark mode #F7C79B on red 2.93 : 1. Light: a white fill with an outline in the text colour (a see-through button failed on dark bands, 2.61 : 1 on kek-bg-banner). Dark: the darker theme red, peach 4.79 : 1. Normal view unchanged. */ body.onetap-light-contrast .kek-button--red, body.onetap-light-contrast .wp-block-button.kek-button--red>.wp-block-button__link{background:#fff!important;border:2px solid currentColor!important} body.onetap-dark-contrast .kek-button--red, body.onetap-dark-contrast .wp-block-button.kek-button--red>.wp-block-button__link{background-color:var(--wp--preset--color--kek-red-dark)!important;border-color:var(--wp--preset--color--kek-red-dark)!important} /* Stage 60.3 (F3, owner 2026-11-01): voucher-post headings re-levelled so none skips a level (H1 → H3 became H1 → H2, …). A re-levelled heading carries kek-look-h and keeps its old look. Values copied from Kadence's Customizer typography (h3 24px / h4 22px / h5 20px, 700, line-height 1.5, palette3/4) — see WARNINGS #15. */ :is(h1,h2,h3,h4,h5,h6).kek-look-h3{font-weight:700;font-size:24px;line-height:1.5;color:var(--global-palette3)} :is(h1,h2,h3,h4,h5,h6).kek-look-h4{font-weight:700;font-size:22px;line-height:1.5;color:var(--global-palette4)} :is(h1,h2,h3,h4,h5,h6).kek-look-h5{font-weight:700;font-size:20px;line-height:1.5;color:var(--global-palette4)} /* Stage 68.2 (WP-085, mockup C, owner 2026-11-04): language switcher — globe button after e-Class (desktop + sticky) and beside ☰ (phone); the list «Ελληνικά · English · Italiano» opens under it. inc/language-switcher.php, WARNINGS row. */ [data-section=kadence_customizer_header_button],[data-section=kadence_customizer_mobile_trigger]{display:flex;align-items:center} .kek-lang{position:relative;font:600 14px/1 Manrope,sans-serif} .kek-lang--desktop{margin-left:8px} .kek-lang--mobile{margin-right:4px} .kek-lang__toggle{display:flex;align-items:center;justify-content:center;width:35px;height:35px;padding:0;border:1.5px solid var(--wp--preset--color--kek-blue);border-radius:999px;background:#fff;color:var(--wp--preset--color--kek-blue);cursor:pointer;box-shadow:none} .kek-lang--mobile .kek-lang__toggle{border-color:transparent;width:40px;height:40px} .kek-lang__toggle:hover,.kek-lang__toggle:focus,.kek-lang__toggle[aria-expanded=true]{background:#EEF2F7;color:var(--wp--preset--color--kek-blue)} .kek-lang__toggle:focus-visible{outline:2px solid var(--wp--preset--color--kek-blue);outline-offset:2px} .kek-lang__toggle svg{width:18px;height:18px} .kek-lang--mobile .kek-lang__toggle svg{width:22px;height:22px} .kek-lang__list{position:absolute;right:0;top:44px;margin:0;padding:6px;list-style:none;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(20,30,50,.18);min-width:180px;z-index:1000} .kek-lang__list[hidden]{display:none} .kek-lang__list li{margin:0;padding:0} .kek-lang__list a{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:8px;color:#2D3748;white-space:nowrap;text-decoration:none} .kek-lang__list a:hover,.kek-lang__list a:focus{background:#F4F6F9;color:var(--wp--preset--color--kek-blue)} .kek-lang__list a[aria-current]{background:#EEF2F7;color:var(--wp--preset--color--kek-blue);font-weight:800} .kek-lang__code{color:#718096;font-weight:600}