/* ========================================================================== DEIJB Lab — brand layer for Kadence Colours + type extracted from the live site's rendered CSS (2026-07). Set the same palette/fonts in Appearance > Customize as well (see SETUP-GUIDE.md); this file enforces the look and covers the finer details. ========================================================================== */ :root { /* ---- DEIJB Lab brand tokens ---- */ --deijb-plum: #7D266B; /* primary */ --deijb-pink: #DF396F; /* bright accent / hover */ --deijb-purple: #7A027B; --deijb-blue: #1C36AF; /* secondary */ --deijb-blue-bright: #3D5EFF; --deijb-gold: #E09F42; /* highlight */ --deijb-ink: #020202; --deijb-white: #FFFFFF; /* Wire the brand into Kadence's global palette variables so buttons, links and accents adopt DEIJB colours. If you set the palette in the Customizer too, these stay in sync. */ --global-palette1: #7D266B; /* primary -> buttons, primary accents */ --global-palette2: #DF396F; /* secondary -> hover / secondary accents */ --global-palette3: #1C36AF; /* tertiary -> links */ --global-palette4: #020202; /* strong text / headings ink */ } /* ---- Typography ---------------------------------------------------------- */ /* ONE heading face: Hanken Grotesk. Playfair Display is an ACCENT ONLY — italic emphasis words inside a heading, and the footer wordmark. Before v1.6.2 this rule set every heading in Playfair serif while the .dx-* card rules overrode scattered ones back to Hanken, so headings at the same level rendered in two different faces on the same page. That is the "too many fonts" report. */ h1, h2, h3, h4, h5, h6, .entry-title, .site-title, .wp-block-heading, .kadence-title-item .entry-title { font-family: 'Hanken Grotesk', Helvetica, Arial, sans-serif; } body, button, input, select, textarea, .wp-block-button__link { font-family: 'Hanken Grotesk', Helvetica, Arial, sans-serif; } /* Editorial flourish used across the site: italic emphasis in headings. */ h1 em, h2 em, h3 em { font-style: italic; color: var(--deijb-pink); } /* ---- Links --------------------------------------------------------------- */ a { color: var(--deijb-blue); } a:hover, a:focus { color: var(--deijb-plum); } /* ---- Buttons ------------------------------------------------------------- */ .wp-block-button__link, .button, button.button, input[type="submit"], .kb-button { background-color: var(--deijb-plum); border-color: var(--deijb-plum); color: var(--deijb-white); border-radius: 4px; } .wp-block-button__link:hover, .button:hover, button.button:hover, input[type="submit"]:hover, .kb-button:hover { background-color: var(--deijb-pink); border-color: var(--deijb-pink); color: var(--deijb-white); } /* Outline / secondary button variant */ .is-style-outline .wp-block-button__link { background: transparent; color: var(--deijb-plum); border: 2px solid var(--deijb-plum); } .is-style-outline .wp-block-button__link:hover { background: var(--deijb-plum); color: var(--deijb-white); } /* ---- Utility brand backgrounds (handy while rebuilding sections) --------- */ .has-deijb-plum-background-color { background-color: var(--deijb-plum) !important; } .has-deijb-blue-background-color { background-color: var(--deijb-blue) !important; } .has-deijb-gold-background-color { background-color: var(--deijb-gold) !important; } .has-deijb-plum-color { color: var(--deijb-plum) !important; } .has-deijb-blue-color { color: var(--deijb-blue) !important; } /* ========================================================================== Page / block layout helpers (added for the Kadence Blocks page builds). These style plain CORE blocks (cover, columns, heading, image, buttons…) into the DEIJB look, so page content stays fully editable while matching the design spec. Class names are applied via the block "Additional CSS class(es)" field in the editor. ========================================================================== */ /* Full-bleed photo heroes (core/cover): straight-edged, white centred text. */ .deijb-hero .wp-block-cover__inner-container { max-width: 900px; } .deijb-eyebrow { letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; font-weight: 600; color: #fff; opacity: .92; } .deijb-hero-title { color: #fff; font-weight: 800; margin: .25em 0 .35em; } .deijb-hero-title em { color: inherit; } /* hero accent stays white, not pink */ .deijb-hero-sub { color: rgba(255,255,255,.94); font-size: 1.2rem; max-width: 640px; margin-left: auto; margin-right: auto; } /* Section rhythm + soft alternating background. */ .deijb-section { padding: 84px 0; } .deijb-soft { background: #faf6f9; } /* Centred section heads: Playfair display with the pink italic accent word. */ .deijb-display { color: var(--deijb-plum); } .deijb-display em { color: var(--deijb-pink); font-style: italic; } .deijb-sec-head { max-width: 820px; margin-left: auto; margin-right: auto; } /* Design-system lead paragraph: brand-blue + bold. Body copy stays grey. */ .deijb-lead { color: var(--deijb-blue); font-weight: 700; font-size: 1.16rem; } .deijb-muted { color: #6d5f68; } /* Feature = plum icon -> centred title -> centred text. NO boxes. */ /* Universal icon sizing — the inline SVGs carry no width/height, so pin them here (!important beats any stray theme rule and the SVG default size). */ .deijb-ic { text-align: center; line-height: 0; margin-bottom: 14px; color: var(--deijb-plum); } .deijb-ic svg { width: 46px !important; height: 46px !important; display: inline-block; } .deijb-feature h3 { color: var(--deijb-plum); font-weight: 700; margin-bottom: 8px; } .deijb-feature p { color: #6d5f68; } /* Value statements: same icon+text pattern but Playfair display titles. */ .deijb-value h3 { color: var(--deijb-plum); font-weight: 700; } .deijb-value h3 em { color: var(--deijb-pink); font-style: italic; } .deijb-value p { color: #6d5f68; } /* Initiative photo strip: rounded, cropped, no captions. */ .deijb-init-img img { border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } /* Pill buttons — solid plum = white text; white pill = blue text; ghost on photos. !important so these beat Kadence's default (blue) block-button styling. */ .deijb-btn-plum > .wp-block-button__link { background-color: var(--deijb-plum) !important; color: #fff !important; border: 0 !important; border-radius: 100px !important; padding: 14px 32px; } .deijb-btn-plum > .wp-block-button__link:hover { background-color: var(--deijb-pink) !important; color: #fff !important; } .deijb-btn-white > .wp-block-button__link { background-color: #fff !important; color: var(--deijb-blue) !important; border: 0 !important; border-radius: 100px !important; padding: 14px 32px; } .deijb-btn-white > .wp-block-button__link:hover { background-color: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px #fff; } .deijb-btn-ghost > .wp-block-button__link { background-color: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.75) !important; border-radius: 100px !important; padding: 13px 30px; } .deijb-btn-ghost > .wp-block-button__link:hover { background-color: #fff !important; color: var(--deijb-plum) !important; border-color: #fff !important; } /* Newsletter block. */ .deijb-news h2 { font-style: italic; color: var(--deijb-plum); } .deijb-contacts a { color: var(--deijb-ink); font-weight: 600; } .deijb-contacts a:hover { color: var(--deijb-plum); } /* ========================================================================== INNER-PAGE templates (About / Initiatives / Events / Academy / Resources). Photo-banner hero -> content. Same core-blocks + CSS approach as the home page. ========================================================================== */ /* Inner photo-banner hero (core/cover, shorter than the homepage hero). */ .deijb-phero .wp-block-cover__inner-container { max-width: 820px; } .deijb-crumb { letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; color: #fff; opacity: .85; font-weight: 600; } .deijb-ptitle { color: #fff; font-weight: 800; margin: .1em 0 .25em; } .deijb-ptitle em{ color: #ffc9dd; font-style: italic; } .deijb-tagline { color: rgba(255,255,255,.92); font-size: 1.12rem; max-width: 640px; margin-left: auto; margin-right: auto; } /* Prose column: Playfair plum headings, grey body, generous line-height. */ .deijb-prose { max-width: 820px; } .deijb-prose h2 { color: var(--deijb-plum); } .deijb-prose h2 em { color: var(--deijb-plum); font-style: italic; } .deijb-prose h3 { color: var(--deijb-plum); } .deijb-prose p { color: #6d5f68; font-size: 1.05rem; line-height: 1.78; } /* Founder portrait + caption. */ .deijb-portrait img { border-radius: 16px; box-shadow: 0 20px 44px -20px rgba(125,38,107,.55); } .deijb-pname { color: var(--deijb-plum); font-weight: 700; font-size: 1.3rem; } .deijb-prole { color: #6d5f68; font-size: .92rem; } /* Gold-dot report / reference list. */ .deijb-reports { list-style: none; padding-left: 0; } .deijb-reports li { position: relative; padding-left: 24px; margin-bottom: 12px; color: #33272e !important; } .deijb-reports li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--deijb-gold); } /* Logo figure (About · Logo). */ .deijb-logofig img { max-width: 300px; margin-left: auto; margin-right: auto; } .deijb-logofig figcaption { text-align: center; color: #6d5f68; font-size: .9rem; margin-top: 12px; } /* Emphasised closing paragraph (darker + slightly larger than body). */ .deijb-closing { color: #33272e; font-size: 1.15rem; max-width: 860px; margin-left: auto; margin-right: auto; } /* Left-aligned section heading: pink eyebrow -> Playfair plum heading -> grey subhead. */ .deijb-eyebrowp { letter-spacing: .16em; text-transform: uppercase; font-size: .76rem; color: var(--deijb-pink); font-weight: 700; margin-bottom: 2px; } .deijb-hsec { color: var(--deijb-plum); margin: 4px 0 8px; } .deijb-hsub { color: #6d5f68; font-size: 1.08rem; max-width: 760px; } /* Image cards (Initiatives / Campaigns landing): photo -> kicker -> title -> text -> more. NO borders. */ .deijb-icard { text-align: center; } .deijb-icard img { border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .deijb-kicker { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--deijb-pink); font-weight: 700; margin: 14px 0 4px; } .deijb-icard h3 { color: var(--deijb-plum); font-weight: 700; margin: 4px 0 8px; } .deijb-icard p { color: #6d5f68; } .deijb-more { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--deijb-blue); } .deijb-more::after{ content: " \2192"; } .deijb-more:hover { color: var(--deijb-plum); } /* Wide banner image inside content (campaign hero image). */ .deijb-fimg img { border-radius: 16px; width: 100%; object-fit: cover; } /* Video gallery: self-hosted clips + captions, and gradient "coming soon" tiles. */ .deijb-vid video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; display: block; } .deijb-vidcap { text-align: center; font-weight: 700; color: var(--deijb-plum); margin-top: 10px; } .deijb-vidph { aspect-ratio: 16 / 9; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--deijb-plum), var(--deijb-purple) 60%, var(--deijb-pink)); } .deijb-vidph svg { width: 52px; height: 52px; color: #fff; } /* Outline pill buttons (plum + blue) for secondary actions. */ .deijb-btn-oplum > .wp-block-button__link { background: transparent !important; color: var(--deijb-plum) !important; border: 1.5px solid var(--deijb-plum) !important; border-radius: 100px !important; padding: 12px 28px; } .deijb-btn-oplum > .wp-block-button__link:hover { background: var(--deijb-plum) !important; color: #fff !important; } .deijb-btn-oblue > .wp-block-button__link { background: transparent !important; color: var(--deijb-blue) !important; border: 1.5px solid var(--deijb-blue) !important; border-radius: 100px !important; padding: 12px 28px; } .deijb-btn-oblue > .wp-block-button__link:hover { background: var(--deijb-blue) !important; color: #fff !important; } /* Gradient callout box (Academy Impact Challenge). */ .deijb-callout { background: linear-gradient(120deg, var(--deijb-plum), var(--deijb-purple) 58%, var(--deijb-pink)); color: #fff; border-radius: 20px; padding: 52px 44px; } .deijb-callout h2 { color: #fff !important; } .deijb-callout .deijb-eyebrowp { color: #ffd9a8; } .deijb-callout p { color: rgba(255,255,255,.95); font-size: 1.12rem; max-width: 780px; margin-left: auto; margin-right: auto; } /* Vertical timeline (Academy programme weeks). */ .deijb-timeline { border-left: 2px solid #ece3ea; max-width: 820px; margin: 24px auto 0; padding-left: 6px; } .deijb-tstep { position: relative; padding: 0 0 30px 34px; text-align: left; } .deijb-tstep::before { content: ""; position: absolute; left: -8px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--deijb-plum); outline: 3px solid #fff; } .deijb-timeline > .deijb-tstep:nth-child(2)::before { background: var(--deijb-pink); } .deijb-timeline > .deijb-tstep:nth-child(3)::before { background: var(--deijb-blue); } .deijb-timeline > .deijb-tstep:nth-child(4)::before { background: var(--deijb-gold); } .deijb-timeline > .deijb-tstep:nth-child(5)::before { background: var(--deijb-purple); } .deijb-wk { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #6d5f68; font-weight: 700; margin: 0; } .deijb-tstep h3 { color: var(--deijb-plum); margin: 4px 0 6px; font-weight: 700; } .deijb-tstep p { color: #6d5f68; margin: 0; } /* Request-a-resource form. VISUAL ONLY — replace with a Kadence Form / form plugin to actually submit. */ .deijb-rform { max-width: 680px; margin: 28px auto 0; text-align: left; } .deijb-rform label { display: block; font-size: .85rem; font-weight: 700; color: var(--deijb-plum); margin: 0 0 6px; } .deijb-rform input, .deijb-rform select, .deijb-rform textarea { width: 100%; padding: 12px 14px; border: 1px solid #d9cbd4; border-radius: 8px; font-family: inherit; font-size: 1rem; color: var(--deijb-ink); background: #fff; margin-bottom: 16px; } .deijb-rform textarea { min-height: 90px; resize: vertical; } .deijb-rform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .deijb-rform .chk { display: flex; gap: 10px; align-items: flex-start; } .deijb-rform .chk input { width: auto; margin-top: 5px; } .deijb-rform .chk label { font-weight: 400; color: #6d5f68; } .deijb-rform .submit { background: var(--deijb-plum); color: #fff; border: 0; border-radius: 100px; padding: 13px 32px; font-weight: 600; cursor: pointer; } .deijb-rform .submit:hover { background: var(--deijb-pink); } @media (max-width: 700px) { .deijb-rform .row2 { grid-template-columns: 1fr; } } /* ========================================================================== LAYOUT FIXES (2026-07-24, from live review on a 1920px screen). Full-width sections had no max-width/padding, so left-aligned headings and prose ran the entire screen width and CLIPPED at the left edge; and 5-card feature rows left an empty 3rd-column gap. These constrain + centre section content and let feature grids wrap/centre. Applies to every page. ========================================================================== */ .deijb-section { padding-left: 24px; padding-right: 24px; } /* ⚠️ The rule above never actually applies, and cannot be made to without !important. Kadence's content.min.css ships .entry-content .alignfull { padding-left:0; padding-right:0; max-width:100vw } at specificity (0,2,0) against (0,1,0) here — and every .deijb-section is also .alignfull. It went unnoticed because on a desktop the centring below leaves wide auto margins that look like padding; once the viewport is narrower than the max-width those margins collapse to 0 and body text runs flush to both screen edges (reported on Founder, mobile, 2026-07-25). The gutter therefore lives on the inner container, which Kadence's reset does not match, so there is no specificity fight to lose. 1168 = 1120 content + 2x24 padding, which keeps the desktop content width exactly as it was — if you change one of those numbers, change the other. */ .deijb-section > * { max-width: 1168px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .deijb-prose, .deijb-sec-head { max-width: 820px !important; } /* Feature grids wrap + centre, so odd counts (5 cards) don't leave a gap. */ .deijb-feature.wp-block-columns { flex-wrap: wrap; justify-content: center; gap: 34px 4%; } .deijb-feature.wp-block-columns > .wp-block-column { flex: 0 1 300px; max-width: 340px; } .deijb-feature.wp-block-columns > .wp-block-column:empty { display: none; } /* ========================================================================== EDITORIAL REDESIGN (dx-) — migrated from the Customizer's Additional CSS (2026-07). Photo/rotating heroes, editorial reading columns, carousels, video grids, CF7 form styling, card grids, the rotating pillar slider, the site footer, and layout fixes. Uses the --deijb-* tokens above. ========================================================================== */ body,button,input,select,textarea,.entry-content,.wp-block-button__link{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif} .dx-wrap{max-width:720px!important;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px} .dx-crumb{letter-spacing:.2em;text-transform:uppercase;font-size:.76rem;font-weight:600;color:var(--deijb-pink)} .dx-litehero{background:radial-gradient(1100px 380px at 78% -8%,rgba(28,54,175,.10),transparent 60%),radial-gradient(900px 340px at 12% 8%,rgba(224,159,66,.12),transparent 55%),#faf7fb;border-bottom:1px solid #ece4ec;padding:58px 24px 50px!important} .dx-litetitle{font-weight:600!important;color:#2b2430!important;letter-spacing:-.01em} .dx-litetitle em{color:var(--deijb-plum);font-family:'Playfair Display',Palatino,serif;font-style:italic} .dx-logo img{max-width:200px;margin:6px auto 0;filter:drop-shadow(0 16px 30px rgba(125,38,107,.20))} .dx-cap{font-size:.9rem;color:#5d6371} .dx-phero{min-height:52vh!important} /* v1.6.2 — was .80–.82 opaque; the photograph contributed about a fifth of what you saw. Lightened to ~.54–.58, with a bottom-weighted scrim because inner-page hero titles sit low in the frame. */ .dx-phero .wp-block-cover__background{background: linear-gradient(to top,rgba(14,10,34,.46),rgba(14,10,34,.10) 58%,rgba(14,10,34,0)), linear-gradient(158deg,rgba(26,24,74,.56),rgba(58,18,48,.58) 60%,rgba(125,38,107,.54))!important;opacity:1!important} .dx-phero .wp-block-cover__inner-container{max-width:760px;margin-left:auto;margin-right:auto} .dx-phero .dx-crumb{color:#ffc9dd} .dx-ptitle{color:#fff!important;font-weight:600!important;letter-spacing:-.01em;line-height:1.14} .dx-ptitle em{color:#fff;font-family:'Playfair Display',Palatino,serif;font-style:italic} .dx-tag{color:rgba(255,255,255,.92)!important;font-size:1.1rem;max-width:560px;margin-left:auto;margin-right:auto} .dx-article{padding:56px 0 8px} .dx-article p{color:#5d6371;font-size:1.06rem;line-height:1.75} .dx-article p.dx-lead{font-size:1.2rem;line-height:1.68;color:#2b2430} .dx-elh{color:var(--deijb-plum)!important;font-family:'Hanken Grotesk', Helvetica, Arial, sans-serif;font-weight:600} .dx-elh em{font-style:italic;color:var(--deijb-plum)} .dx-el{border-top:1px solid #ece4ec} .dx-el .dx-ic svg{width:44px;height:44px} .dx-el h3{color:#2b2430!important;font-weight:600;font-size:1.12rem} .dx-el p{color:#5d6371} .dx-closing{color:#2b2430;max-width:680px;margin-left:auto;margin-right:auto} .dx-btn-plum>.wp-block-button__link{background:var(--deijb-plum)!important;color:#fff!important;border:0!important;border-radius:100px!important;padding:13px 28px} .dx-btn-plum>.wp-block-button__link:hover{background:var(--deijb-pink)!important} .dx-lead-note{color:#5d6371;margin-bottom:4px} .dx-callout{border-left:3px solid var(--deijb-plum);background:#faf7fb;padding:22px 28px;margin:18px 0} .dx-callout .dx-kicker{color:var(--deijb-pink);letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;font-weight:600} .dx-callout h3{color:var(--deijb-plum)!important;font-family:'Hanken Grotesk', Helvetica, Arial, sans-serif;font-weight:600;font-size:1.5rem;margin:4px 0 8px} .dx-callout p{color:#43414a;margin:0} .dx-weeks{border-left:2px solid #ece4ec;padding-left:26px;margin:12px 0} .dx-weeks>p{position:relative;padding:11px 0;margin:0;color:#5d6371;line-height:1.6} .dx-weeks>p::before{content:'';position:absolute;left:-31px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--deijb-plum);outline:3px solid #fff} .dx-weeks>p strong{color:#2b2430;font-weight:600} .dx-grid2{display:block!important} .dx-grid2 .wp-block-group__inner-container{display:grid!important;grid-template-columns:1fr 1fr;gap:0 44px} .dx-grid2 .wp-block-group__inner-container>p{padding:15px 0;margin:0;border-top:1px solid #ece4ec;color:#5d6371;font-size:1rem;line-height:1.6} .dx-grid2 .wp-block-group__inner-container>p strong{display:block;color:#2b2430;font-weight:600;font-size:1.03rem;margin-bottom:2px} @media(max-width:781px){.dx-grid2 .wp-block-group__inner-container{grid-template-columns:1fr!important}} .dx-fig{margin:26px 0} .dx-fig img{border-radius:14px;width:100%} .dx-figcap{color:#8a8391;font-size:.86rem;text-align:center;margin-top:8px} .dx-linkrow{padding:16px 0;margin:0;border-top:1px solid #ece4ec} .dx-linkrow>a{color:var(--deijb-plum);font-weight:600;text-decoration:none;font-size:1.05rem} .dx-linkrow>a:hover{color:var(--deijb-pink)} .dx-linkrow .d{color:#5d6371;display:block;margin-top:3px} .dx-gallery img{border-radius:10px} .dx-gallery{gap:14px!important} .dx-numlist{margin:20px 0} .dx-num{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--deijb-plum);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.05rem;font-family:'Hanken Grotesk', Helvetica, Arial, sans-serif} .dx-numrow h4{color:var(--deijb-plum);font-weight:600;font-size:1.12rem;margin:0 0 3px} .dx-numrow p{color:#5d6371;margin:0;line-height:1.6} .dx-wide{max-width:1040px!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px;padding-right:24px} .dx-numrow{display:flex;gap:18px;align-items:flex-start;border-top:0!important;padding:11px 0} .dx-numrow:first-child{border-top:0} .dx-obj-ill img{max-width:440px;margin:0 auto} .dx-form label{display:block;font-size:.85rem;font-weight:600;color:var(--deijb-plum);margin:0 0 6px} .dx-form input,.dx-form select,.dx-form textarea{width:100%;padding:12px 14px;border:1px solid #d9cbd4;border-radius:8px;font-family:inherit;font-size:1rem;color:#2b2430;background:#fff;margin-bottom:16px} .dx-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .dx-form .submit{background:var(--deijb-plum);color:#fff;border:0;border-radius:100px;padding:13px 32px;font-weight:600;cursor:pointer} @media(max-width:700px){.dx-form .row2{grid-template-columns:1fr}} /* shared sections (events, resources, home) */ .dx-cta{position:relative;overflow:hidden} .dx-cta::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(125,38,107,.90),rgba(122,2,123,.82) 55%,rgba(223,57,111,.80))} .dx-cta>.wp-block-cover__inner-container{position:relative;z-index:2!important} .dx-cta .dx-cta-h{font-family:'Hanken Grotesk', Helvetica, Arial, sans-serif;font-weight:600;color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.25;letter-spacing:0} .dx-cta .dx-cta-h em{font-style:italic} .dx-cta .wp-block-buttons{margin-top:26px} .dx-cta .dx-b-wht .wp-block-button__link{background:#fff;color:#1C36AF;border-radius:100px;padding:13px 30px;font-weight:600} .dx-cta .dx-b-wht .wp-block-button__link:hover{background:#efeafb} .dx-cta .dx-b-gho .wp-block-button__link{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75);border-radius:100px;padding:13px 30px;font-weight:600} .dx-cta .dx-b-gho .wp-block-button__link:hover{background:rgba(255,255,255,.12)} .dx-contact{max-width:820px;margin:0 auto;padding:44px 24px 64px;display:flex;gap:64px;justify-content:center;flex-wrap:wrap;text-align:center} .dx-contact .lbl{color:#5d6371;font-size:1rem;margin-bottom:8px} .dx-contact a{color:#7D266B;font-weight:700;font-size:1.06rem;text-decoration:none} .dx-contact a:hover{text-decoration:underline} .dx-sub{text-align:center;font-weight:700;color:#2b2430;margin:0 auto 2px;max-width:760px} .dx-cards{max-width:1040px;margin:14px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px} .dx-cards .card{border:1px solid #ece4ec;border-radius:14px;padding:24px 24px 26px;background:#fff;transition:.18s} .dx-cards .card:hover{box-shadow:0 12px 30px rgba(125,38,107,.10);transform:translateY(-2px)} .dx-cards .card h4{font-family:'Hanken Grotesk',sans-serif;font-weight:700;color:#7D266B;font-size:1.08rem;margin:0 0 8px;line-height:1.3} .dx-cards .card p{color:#5d6371;font-size:.97rem;margin:0;line-height:1.6} .dx-featured{max-width:960px;margin:0 auto;display:grid;grid-template-columns:270px 1fr;gap:44px;align-items:center} .dx-featured img{width:100%;border-radius:14px;box-shadow:0 18px 40px rgba(125,38,107,.16);display:block} .dx-featured .kick{font-size:.74rem;letter-spacing:.19em;text-transform:uppercase;color:#DF396F;font-weight:600;margin-bottom:10px} .dx-featured h3{font-family:'Hanken Grotesk', Helvetica, Arial, sans-serif;font-weight:700;color:#7D266B;font-size:1.55rem;margin:0 0 14px;line-height:1.2} .dx-featured p{color:#5d6371;margin:0;line-height:1.7} .dx-featured .more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:#7D266B;color:#fff;font-weight:600;font-size:.95rem;padding:11px 24px;border-radius:100px;text-decoration:none;transition:.15s} .dx-featured .more:hover{background:#DF396F} @media(max-width:720px){.dx-featured{grid-template-columns:1fr;gap:24px;text-align:center}.dx-featured img{max-width:240px;margin:0 auto}.dx-featured .more{margin-left:auto;margin-right:auto}.dx-contact{gap:32px}} /* carousel + videos + pills */ /* Bottom margin added v1.6.6 — the carousel previously had `margin:18px auto 0`, so whatever followed it sat flush against the image edge on every page that uses one (SOLEMN, Soft Launch, Book Launch, Events). */ .dx-carousel{position:relative;max-width:920px;margin:18px auto 40px;overflow:hidden;border-radius:16px;background:#efe7ee;box-shadow:0 16px 40px rgba(125,38,107,.14)} .dx-car-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)} .dx-car-slide{min-width:100%;aspect-ratio:16/10;position:relative} .dx-car-slide img{width:100%;height:100%;object-fit:cover;display:block} .dx-car-prev,.dx-car-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#7D266B;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:.15s;z-index:3;padding:0} /* Kadence's global.min.css carries a bare `button:hover,button:focus,button:active` rule setting `color:var(--global-palette-btn-hover)` — which resolves to #ffffff on this site — plus a pink background and its own shadow. The old hover rule here re-declared only `background`, so the chevron took Kadence's white and disappeared into the white circle; because the rule also matches `:focus`, it stayed blank after the click rather than only during hover. Every interactive state has to restate colour AND background or Kadence's wins. Same trap as the v1.6.6 tab number. Scoped away from .dx-tcar, whose chevrons are drawn from ::before borders and are already protected by their own higher-specificity rules. (v1.6.9) */ .dx-carousel:not(.dx-tcar) .dx-car-prev:hover, .dx-carousel:not(.dx-tcar) .dx-car-next:hover, .dx-carousel:not(.dx-tcar) .dx-car-prev:focus, .dx-carousel:not(.dx-tcar) .dx-car-next:focus, .dx-carousel:not(.dx-tcar) .dx-car-prev:active, .dx-carousel:not(.dx-tcar) .dx-car-next:active{background:#fff;color:#7D266B} .dx-carousel:not(.dx-tcar) .dx-car-prev:focus-visible, .dx-carousel:not(.dx-tcar) .dx-car-next:focus-visible{ outline:2px solid #DF396F;outline-offset:3px} .dx-car-prev{left:14px}.dx-car-next{right:14px} .dx-car-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:3} .dx-car-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:.2s} .dx-car-dots button.on{background:#fff;width:24px;border-radius:5px} .dx-videos{max-width:1000px;margin:18px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:34px 28px} .dx-videos .dx-vid{margin:0} .dx-videos video{width:100%;border-radius:14px;background:#000;box-shadow:0 12px 30px rgba(0,0,0,.14);display:block;aspect-ratio:16/9} .dx-videos .cap{margin-top:12px;text-align:center} .dx-videos .cap b{display:block;color:#7D266B;font-weight:700;font-size:1.06rem} .dx-videos .cap span{color:#5d6371;font-size:.95rem} .dx-pills{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0 6px} .dx-pills a{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;padding:12px 26px;border-radius:100px;text-decoration:none;border:1.5px solid transparent;transition:.15s} .dx-pills a.fill{background:#7D266B;color:#fff} .dx-pills a.fill:hover{background:#DF396F} .dx-pills a.out{background:transparent;color:#7D266B;border-color:#e2b9d8} .dx-pills a.out:hover{background:#faf2f8;border-color:#7D266B} @media(max-width:760px){.dx-videos{grid-template-columns:1fr}} @media(max-width:640px){.dx-car-slide{aspect-ratio:4/3}.dx-car-prev,.dx-car-next{width:36px;height:36px;font-size:1.2rem}} /* resources form extras */ .dx-resform{max-width:640px;margin:0 auto} .dx-resform label.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:#5d6371;font-size:.95rem;margin:2px 0 18px} .dx-resform label.chk input{width:auto;margin:3px 0 0;flex:0 0 auto} .dx-resform .submit{display:block;margin:4px auto 0} /* home */ .dx-pillars{max-width:960px;margin:16px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:22px} .dx-pillars .p{border:1px solid #ece4ec;border-radius:14px;padding:26px 28px;background:#fff;transition:.18s} .dx-pillars .p:hover{box-shadow:0 12px 30px rgba(125,38,107,.10);transform:translateY(-2px)} .dx-pillars .p h3{font-family:'Hanken Grotesk',sans-serif;color:#7D266B;font-weight:700;font-size:1.18rem;margin:0 0 8px;line-height:1.25} .dx-pillars .p p{color:#5d6371;margin:0;line-height:1.6} .dx-subscribe{max-width:640px;margin:0 auto;text-align:center} .dx-subscribe .socials{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:20px} .dx-subscribe .socials a{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;padding:11px 22px;border-radius:100px;text-decoration:none;border:1.5px solid #e2b9d8;color:#7D266B;transition:.15s} .dx-subscribe .socials a.mail{background:#7D266B;color:#fff;border-color:#7D266B} .dx-subscribe .socials a:hover{background:#faf2f8} .dx-subscribe .socials a.mail:hover{background:#DF396F;border-color:#DF396F} @media(max-width:700px){.dx-pillars{grid-template-columns:1fr}} /* Contact Form 7 styling */ .dx-cf7{max-width:640px;margin:0 auto} .dx-cf7 .wpcf7-form p{margin:0 0 15px} .dx-cf7 .wpcf7-form label{display:block;font-size:.85rem;font-weight:600;color:#7D266B;line-height:1.4} .dx-cf7 .wpcf7-form input[type=text],.dx-cf7 .wpcf7-form input[type=email],.dx-cf7 .wpcf7-form input[type=tel],.dx-cf7 .wpcf7-form input[type=number],.dx-cf7 .wpcf7-form select,.dx-cf7 .wpcf7-form textarea{width:100%;padding:12px 14px;border:1px solid #d9cbd4;border-radius:8px;font-family:inherit;font-size:1rem;color:#2b2430;background:#fff;margin-top:6px} .dx-cf7 .wpcf7-form textarea{min-height:96px} .dx-cf7 .wpcf7-form .wpcf7-acceptance label{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:#5d6371;font-size:.95rem;margin-top:6px} .dx-cf7 .wpcf7-form .wpcf7-acceptance input{width:auto;margin-top:3px} .dx-cf7 .wpcf7-form .wpcf7-list-item{margin:0} .dx-cf7 .wpcf7-submit{display:block;background:#7D266B;color:#fff;border:0;border-radius:100px;padding:13px 34px;font-weight:600;font-size:.98rem;cursor:pointer;margin:8px auto 0;transition:.15s} .dx-cf7 .wpcf7-submit:hover{background:#DF396F} .dx-cf7 .wpcf7-spinner{margin:8px auto 0;display:block} .dx-cf7 .wpcf7-response-output{border-radius:8px;margin:16px 0 0!important;font-size:.95rem} /* header (hug content, centered) */ .site-main-header-inner-wrap.site-header-row{min-height:0!important;padding-top:12px!important;padding-bottom:12px!important;align-items:center!important;align-content:center!important} .site-header-row-container-inner,.site-main-header-wrap,.site-header-main-section-left,.site-header-main-section-center,.site-header-main-section-right{min-height:0!important} .site-header .site-header-item{align-self:center} .site-header .brand.has-logo-image{display:flex;align-items:center;gap:12px} .site-header .brand .custom-logo,.site-branding .custom-logo,.site-header-main .custom-logo{max-height:44px!important;width:auto!important;height:auto!important} /* rotating hero (home) */ .dx-hero2-wrap{margin-top:0!important} .dx-hero2{position:relative;overflow:hidden;min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;background:#221f52} .dx-hero2-bg{position:absolute;inset:0;z-index:0} .dx-hero2-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease} .dx-hero2-slide.on{opacity:1} /* v1.6.2 — the wash was .70–.78 opaque, so the event photos behind it were effectively invisible ("the pictures on the top look very dark"). Halved to ~.46–.52 and paired with a centred scrim that darkens ONLY where the headline sits, so the photo reads while white text keeps its contrast. */ .dx-hero2-wash{position:absolute;inset:0;z-index:1;background: radial-gradient(ellipse 78% 62% at 50% 44%,rgba(10,8,30,.42),rgba(10,8,30,0) 72%), linear-gradient(140deg,rgba(26,24,78,.52),rgba(42,28,76,.48) 52%,rgba(84,38,90,.46))} .dx-hero2-inner{position:relative;z-index:2;max-width:1080px;padding:44px 24px 132px} .dx-hero2 .eyebrow{font-size:.84rem;letter-spacing:.3em;text-transform:uppercase;color:#fff;font-weight:600;margin:0 0 20px;opacity:.92} .dx-hero2 h1{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:clamp(2.9rem,7.2vw,5.6rem);line-height:1.02;letter-spacing:-.02em;color:#fff;margin:0} .dx-hero2 h1 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:#fff;font-weight:500} .dx-hero2 .sub{margin:24px auto 0;max-width:640px;font-size:1.16rem;color:rgba(255,255,255,.9);line-height:1.62} .dx-hero2 .btn{display:inline-flex;align-items:center;gap:9px;margin-top:32px;background:transparent;color:#fff;font-weight:600;font-size:.98rem;padding:14px 34px;border-radius:100px;text-decoration:none;border:1.5px solid rgba(255,255,255,.7);transition:.15s} .dx-hero2 .btn:hover{background:rgba(255,255,255,.14);border-color:#fff} .dx-hero2-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:64px;display:block} @media(max-width:600px){.dx-hero2{min-height:76vh}.dx-hero2-inner{padding-bottom:96px}} /* pillar text slider (home) */ .dx-tcar{max-width:880px;margin:8px auto 0;background:transparent;box-shadow:none;border-radius:0;overflow:hidden} /* text carousel controls: minimal thin outline chevrons (was display:none). The buttons already exist in the page markup and are wired to the carousel JS, so this is presentation only. The ‹ › glyphs are suppressed with font-size:0 and the chevron is drawn from two 1.5px borders on ::before — keeps the stroke hairline and identical on both sides, which a font glyph does not. */ .dx-tcar .dx-car-prev,.dx-tcar .dx-car-next{ display:grid;place-items:center;background:none;box-shadow:none;border:0;padding:0; width:34px;height:34px;border-radius:50%;font-size:0;color:transparent; opacity:.5;transition:opacity .18s} .dx-tcar .dx-car-prev::before,.dx-tcar .dx-car-next::before{ content:"";width:10px;height:10px;border:1.5px solid #7D266B;border-left:0;border-bottom:0} .dx-tcar .dx-car-next::before{transform:rotate(45deg);margin-left:-3px} .dx-tcar .dx-car-prev::before{transform:rotate(-135deg);margin-right:-3px} .dx-tcar .dx-car-prev:hover,.dx-tcar .dx-car-next:hover{opacity:1} .dx-tcar .dx-car-prev:focus-visible,.dx-tcar .dx-car-next:focus-visible{opacity:1;outline:2px solid #DF396F;outline-offset:3px} .dx-tcar .dx-car-prev{left:6px}.dx-tcar .dx-car-next{right:6px} /* 56px side padding (was 40px) leaves room for the chevron controls */ .dx-tcar .dx-car-slide{min-width:100%;aspect-ratio:auto;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 56px} .dx-tcar .dx-car-slide h3{font-family:'Hanken Grotesk', Helvetica, Arial, sans-serif;font-weight:600;color:#7D266B;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.18;margin:0 0 14px} .dx-tcar .dx-car-slide p{color:#5d6371;font-size:1.14rem;line-height:1.6;margin:0 auto;max-width:600px} .dx-tcar .dx-car-dots{position:static;margin-top:20px} .dx-tcar .dx-car-dots button{background:#e2cdda} .dx-tcar .dx-car-dots button.on{background:#7D266B} /* phones: pull the chevrons to the edge and tighten padding so the statement keeps its line length. Buttons stay 34px for a usable tap target. */ @media(max-width:600px){ .dx-tcar .dx-car-slide{padding:10px 40px} .dx-tcar .dx-car-prev{left:0} .dx-tcar .dx-car-next{right:0} } /* initiative cards */ .dx-icards{max-width:1080px;margin:16px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px} .dx-icard{border:1px solid #ece4ec;border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:.18s;text-decoration:none} .dx-icard:hover{box-shadow:0 16px 38px rgba(125,38,107,.14);transform:translateY(-3px)} .dx-icard .thumb{aspect-ratio:16/10;overflow:hidden;background:#efe7ee} .dx-icard .thumb img{width:100%;height:100%;object-fit:cover;display:block} .dx-icard .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .dx-icard h4{font-family:'Hanken Grotesk',sans-serif;font-weight:700;color:#7D266B;font-size:1.1rem;margin:0 0 8px;line-height:1.25} .dx-icard p{color:#5d6371;font-size:.97rem;margin:0 0 14px;line-height:1.55;flex:1} .dx-icard .more{color:#DF396F;font-weight:600;font-size:.9rem;letter-spacing:.02em} /* site footer */ .footer-widget-area.widget-area .footer-widget-area-inner{padding:0!important} .dx-footer{color:#cfc6da;padding:8px 24px 4px} .dx-footer-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(230px,1fr) 3.1fr;gap:44px;text-align:left} .dx-footer .flogo{display:flex;align-items:center;gap:12px;margin-bottom:16px} .dx-footer .flogo img{height:46px;width:auto} .dx-footer .flogo b{color:#fff;font-family:'Playfair Display',Georgia,serif;font-size:1.32rem;font-weight:600} .dx-footer-tag{color:#a99bb8;font-size:.95rem;line-height:1.6;max-width:360px;margin:0 0 20px} .dx-footer-social{display:flex;gap:12px} .dx-footer-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff!important;transition:.15s} .dx-footer-social a:hover{background:#DF396F} .dx-footer-social svg{width:19px;height:19px;fill:currentColor} .dx-footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px 22px} .dx-fcol h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;font-weight:700} .dx-fcol a{display:block;color:#b9adc6!important;text-decoration:none;font-size:.96rem;margin-bottom:11px;transition:.12s} .dx-fcol a:hover{color:#fff!important} .site-footer .footer-widget1{background:#241a3f;padding:58px 0 44px} .site-bottom-footer-wrap{background:#1c1436!important} .site-bottom-footer-wrap .site-info,.site-bottom-footer-wrap .site-info *{color:#8f83a1!important} @media(max-width:820px){.dx-footer-inner{grid-template-columns:1fr;gap:34px}.dx-footer-cols{grid-template-columns:1fr 1fr}} @media(max-width:480px){.dx-footer-cols{grid-template-columns:1fr}} /* non-clickable menu parent labels (dropdown still opens) */ /* desktop:
  • */ .dx-nolink > a,.dx-nolink > .menu-link{pointer-events:none!important;cursor:default!important} /* mobile drawer: Kadence nests the anchor one level deeper —
  • +
    so the "> a" rule above cannot match. Never use ".dx-nolink a" here: it would also kill the .sub-menu child links. Never put pointer-events on the wrap itself: it inherits and would disable the chevron, making the submenu unreachable. */ #mobile-drawer .dx-nolink > .drawer-nav-drop-wrap > a{pointer-events:none!important;cursor:default!important} /* make the whole parent row the submenu toggle, so tapping the (now inert) label opens the dropdown instead of doing nothing. These two are load-bearing, not cosmetic — if they lose the cascade the row silently reverts to a dead label, hence !important. */ #mobile-drawer .dx-nolink > .drawer-nav-drop-wrap{position:relative!important} #mobile-drawer .dx-nolink > .drawer-nav-drop-wrap > .drawer-sub-toggle{position:absolute!important;inset:0;width:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:18px} /* ===== mobile drawer (Kadence off-canvas) — brand skin ===== Kadence prints its drawer colours in the #kadence-global-inline-css