/* Theme Name: KEH-TECH Template: twentytwentyfive Description: Child theme for the KEH-TECH community site. Glossy blue gradient design. Version: 1.0.1 Text Domain: keh-tech */ :root { color-scheme: light; /* Fixed brand colors: used on the dark bands (header, hero, footer), same in both modes. */ --keh-midnight: #061229; --keh-bright: #2B8CFF; --keh-sky: #38C6F4; /* White text must reach 4.5:1 anywhere on these gradients, so they stop at royal blue. */ --keh-brand: linear-gradient(135deg, #061229 0%, #0A1F44 30%, #0B4FB3 72%, #1565D8 100%); --keh-gloss: linear-gradient(180deg, #1E6BDB 0%, #1459C4 52%, #0A47A3 100%); --keh-radius: 16px; /* Scheme-aware tokens. Light values here; dark values are added below with light-dark(). */ --keh-navy: #0A1F44; --keh-deep: #0B4FB3; --keh-royal: #1565D8; --keh-slate: #51607A; --keh-ice: #EAF3FF; --keh-mist: #F5F9FF; --keh-text: #0B1B33; --keh-surface: #FFFFFF; --keh-surface-2: #F3F8FF; --keh-border: rgba(21,101,216,.16); --keh-field-border: #6A7B9C; --keh-focus: #0B4FB3; --keh-ok-bg: #EAF8F0; --keh-ok-border: #9AD3B2; --keh-ok-text: #14532D; --keh-err-bg: #FFF1F1; --keh-err-border: #F0B4B4; --keh-err-text: #8E1B1B; --keh-err-strong: #B71C1C; --keh-warn-bg: #FFF9E8; --keh-warn-border: #F2D28B; --keh-warn-accent: #B47F00; --keh-card-shadow: 0 1px 2px rgba(10,31,68,.06), 0 12px 32px -12px rgba(11,79,179,.28); --keh-lift-shadow: 0 2px 4px rgba(10,31,68,.08), 0 24px 48px -16px rgba(11,79,179,.42); } /* ---------- Dark mode ---------- Follows the visitor's system setting by default. The header toggle sets data-theme="light" or "dark" on to override it. light-dark() picks the value that matches the active color-scheme, so every rule below is written once. */ @supports (color: light-dark(#000, #fff)) { html:root { color-scheme: light dark; --keh-navy: light-dark(#0A1F44, #F2F7FF); --keh-deep: light-dark(#0B4FB3, #9CCBFF); --keh-royal: light-dark(#1565D8, #7DB8FF); --keh-slate: light-dark(#51607A, #A9B7D0); --keh-ice: light-dark(#EAF3FF, #14284A); --keh-mist: light-dark(#F5F9FF, #0B1730); --keh-text: light-dark(#0B1B33, #E6EEFB); --keh-surface: light-dark(#FFFFFF, #0E1A30); --keh-surface-2: light-dark(#F3F8FF, #11213D); --keh-border: light-dark(rgba(21,101,216,.16), rgba(125,184,255,.22)); --keh-field-border: light-dark(#6A7B9C, #7F93B8); --keh-focus: light-dark(#0B4FB3, #9CCBFF); --keh-ok-bg: light-dark(#EAF8F0, #0F2A1E); --keh-ok-border: light-dark(#9AD3B2, #2E7D57); --keh-ok-text: light-dark(#14532D, #B6F0CF); --keh-err-bg: light-dark(#FFF1F1, #33161A); --keh-err-border: light-dark(#F0B4B4, #A8444C); --keh-err-text: light-dark(#8E1B1B, #FFC9CC); --keh-err-strong: light-dark(#B71C1C, #FF9EA3); --keh-warn-bg: light-dark(#FFF9E8, #2E2610); --keh-warn-border: light-dark(#F2D28B, #8A6D1F); --keh-warn-accent: light-dark(#B47F00, #F2C14E); --keh-card-shadow: 0 1px 2px light-dark(rgba(10,31,68,.06), rgba(0,0,0,.4)), 0 12px 32px -12px light-dark(rgba(11,79,179,.28), rgba(0,0,0,.7)); --keh-lift-shadow: 0 2px 4px light-dark(rgba(10,31,68,.08), rgba(0,0,0,.45)), 0 24px 48px -16px light-dark(rgba(11,79,179,.42), rgba(0,0,0,.8)); /* The palette from theme.json, so blocks and editor-picked colors follow along. */ --wp--preset--color--base: light-dark(#FFFFFF, #0E1A30); --wp--preset--color--contrast: light-dark(#0B1B33, #E6EEFB); --wp--preset--color--accent-2: light-dark(#EAF3FF, #14284A); --wp--preset--color--accent-3: light-dark(#1565D8, #7DB8FF); --wp--preset--color--accent-4: light-dark(#51607A, #A9B7D0); --wp--preset--color--accent-5: light-dark(#F5F9FF, #081225); --wp--preset--color--deep-blue: light-dark(#0B4FB3, #A9D2FF); } html:root[data-theme="light"] { color-scheme: light; } html:root[data-theme="dark"] { color-scheme: dark; } /* Headings use the navy preset as text. Keep the preset itself navy (it is also a background). */ h1, h2, h3, h4, h5, h6, .wp-block-post-title a { color: var(--keh-navy); } } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wp-site-blocks { padding-top: 0 !important; } .wp-site-blocks > * { margin-block-start: 0; } /* ---------- Header: deep glossy bar ---------- */ .keh-header { padding: 0.95rem clamp(1rem, 4vw, 2.5rem); background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 48%, rgba(255,255,255,0) 52%), linear-gradient(100deg, #061229 0%, #0A1F44 38%, #0B4FB3 100%); border-bottom: 1px solid rgba(56,198,244,.35); box-shadow: 0 10px 30px -14px rgba(6,18,41,.7); } /* The header sits inside a template-part wrapper that is only as tall as the header itself, so "sticky" on .keh-header alone has nothing to stick within. The wrapper is what has to stick. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; } @media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } } @media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } } html { scroll-padding-top: 6.5rem; } /* in-page links (tables of contents) land below the fixed header */ /* Slogan: tucked under the wordmark, beside the lower part of the logo tile. */ .keh-header .keh-logo-link { position: relative; text-decoration: none; padding-bottom: 5px; } /* Slogan: an SVG that shares the logo's coordinate system, so its text is stretched (by letter spacing) to exactly the width of the KEH-TECH wordmark and scales with the logo at every size. */ .keh-slogan { position: absolute; left: 0; top: 37px; width: 197px; height: auto; overflow: visible; filter: drop-shadow(0 1px 2px rgba(6,18,41,.6)); } .keh-slogan text { fill: #9BE2FF; font-family: inherit; } @media (max-width: 480px) { .keh-slogan { width: 140px; top: 26px; } } .keh-header .wp-block-site-title a, .keh-footer .wp-block-site-title a { color: #fff; text-decoration: none; } .keh-header .wp-block-navigation { color: rgba(255,255,255,.88); font-weight: 600; font-size: .97rem; } .keh-header .wp-block-navigation a { color: inherit; text-decoration: none; padding: .35rem 0; position: relative; } .keh-header .wp-block-navigation .wp-block-navigation-item__content::after, .keh-header .wp-block-navigation .wp-block-loginout a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #38C6F4, #fff); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .keh-header .wp-block-navigation a:hover { color: #fff; } .keh-header .wp-block-navigation a:hover::after { transform: scaleX(1); } .keh-header .wp-block-navigation .keh-login-button a { padding: .5rem 1.15rem; border-radius: 999px; color: #0A1F44; background: linear-gradient(180deg, #fff 0%, #DDEBFF 100%); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -6px rgba(56,198,244,.8); } .keh-header .wp-block-navigation .keh-login-button a::after { display: none; } .keh-header .wp-block-navigation .keh-login-button a:hover { color: #0B4FB3; } .keh-header .wp-block-navigation__responsive-container-open, .keh-header .wp-block-navigation__responsive-container-close { color: #fff; } /* Phone menu (the overlay behind the hamburger): navy panel, white links, in both colour schemes. The block's own "base" text colour flips to dark in dark mode and vanished against the navy. */ .keh-header .wp-block-navigation__responsive-container.is-menu-open { background: linear-gradient(180deg, #0A1F44, #061229) !important; color: #fff !important; padding: 1.4rem 1.5rem; } .keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3rem; align-items: flex-start; } .keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: .4rem; } .keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; } .keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label, .keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-loginout a { color: #fff !important; font-size: 1.25rem; font-weight: 700; display: block; width: 100%; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.14); } .keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; } .keh-header .wp-block-navigation__responsive-container.is-menu-open .keh-login-button { width: 100%; margin-top: 1rem; } .keh-header .wp-block-navigation__responsive-container.is-menu-open .keh-login-button a { display: inline-block; width: auto; border-bottom: 0; color: #0A1F44 !important; font-size: 1.05rem; padding: .6rem 1.3rem; } .keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-loginout:not(.keh-login-button) a { border-bottom: 0; } /* Logo */ .keh-logo-link { display: inline-flex; align-items: center; line-height: 0; transition: transform .2s ease, filter .2s ease; filter: drop-shadow(0 6px 14px rgba(43,140,255,.45)); } .keh-logo-link:hover { transform: translateY(-1px); filter: drop-shadow(0 8px 18px rgba(56,198,244,.7)); } .keh-logo-link img { display: block; height: auto; max-width: 100%; } @media (max-width: 480px) { .keh-header .keh-logo-link img { width: 140px; } } /* ---------- Hero: layered shiny gradient ---------- */ .keh-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(4.5rem, 10vw, 8rem) clamp(1rem, 4vw, 2.5rem) clamp(7rem, 12vw, 10rem); color: #fff; background: radial-gradient(40% 55% at 96% 0%, rgba(56,198,244,.3) 0%, rgba(56,198,244,0) 60%), radial-gradient(40% 55% at 4% 100%, rgba(43,140,255,.3) 0%, rgba(43,140,255,0) 60%), var(--keh-brand); } /* glass sheen arc across the top */ .keh-hero::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: -62%; height: 110%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 60%, rgba(255,255,255,0) 100%); } /* fine grid + moving light streak */ .keh-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 49%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 51%, transparent 60%) 0 0 / 250% 100% no-repeat, linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 44px 100%; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 60%, transparent 100%); animation: keh-sweep 9s ease-in-out infinite; } @keyframes keh-sweep { 0%, 18% { background-position: 130% 0, 0 0, 0 0; } 60%, 100% { background-position: -60% 0, 0 0, 0 0; } } .keh-eyebrow { display: inline-block; margin: 0 auto 1.4rem; padding: .4rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #DDF3FF; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); backdrop-filter: blur(6px); } .keh-hero > .keh-eyebrow { display: table; } .keh-hero-title { margin: 0 auto 1.2rem; max-width: 16ch; font-size: clamp(2.5rem, 6.2vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; color: #fff; background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 45%, #BFE3FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 18px rgba(6,18,41,.35)); } .keh-hero-lede { margin: 0 auto 2.2rem; max-width: 46rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255,255,255,.9); } /* ---------- Buttons: glossy pills ---------- */ .wp-element-button, .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(6,18,41,.18), 0 10px 22px -10px rgba(21,101,216,.9); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; text-decoration: none; } .wp-element-button::before, .wp-block-button__link::before { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; top: 3%; height: 46%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); } .wp-element-button::after, .wp-block-button__link::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg); transition: left .6s ease; } .wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); filter: saturate(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(6,18,41,.18), 0 16px 30px -12px rgba(21,101,216,1); } .wp-element-button:hover::after, .wp-block-button__link:hover::after { left: 120%; } .keh-btn-light .wp-block-button__link { background: linear-gradient(180deg, #FFFFFF 0%, #D6E8FF 100%) !important; color: #0A1F44 !important; box-shadow: inset 0 1px 0 #fff, 0 14px 30px -12px rgba(6,18,41,.75); } .keh-btn-ghost .wp-block-button__link { background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.55) !important; backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } /* ---------- Feature cards (overlap the hero) ---------- */ .keh-features { padding: 0 clamp(1rem, 4vw, 2.5rem); margin-top: clamp(-5.5rem, -7vw, -4rem) !important; position: relative; z-index: 2; } .keh-card { position: relative; padding: 2rem 1.8rem; border-radius: var(--keh-radius); background: linear-gradient(180deg, var(--keh-surface) 0%, var(--keh-surface-2) 100%); border: 1px solid var(--keh-border); box-shadow: var(--keh-card-shadow); transition: transform .22s ease, box-shadow .22s ease; overflow: hidden; } .keh-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #0B4FB3, #2B8CFF, #38C6F4); } .keh-card:hover { transform: translateY(-6px); box-shadow: var(--keh-lift-shadow); } .keh-card h3 { margin: 1.1rem 0 .5rem; font-size: 1.3rem; } .keh-card p { margin: 0; color: var(--keh-slate); font-size: 1rem; } .keh-card-link { margin-top: 1.1rem !important; font-weight: 700; } .keh-card-link a { text-decoration: none; } .keh-card-link a::after { content: " \2192"; transition: margin .2s ease; } .keh-card-link a:hover::after { margin-left: .3rem; } /* Glossy icon tiles, drawn in CSS */ .keh-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; position: relative; background: linear-gradient(145deg, #5FB4FF 0%, #1565D8 55%, #0B4FB3 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -8px 12px rgba(6,18,41,.28), 0 12px 22px -10px rgba(21,101,216,.95); } .keh-icon::before { content: ""; position: absolute; inset: 3px 3px 50% 3px; border-radius: 12px 12px 50% 50%; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.03)); } .keh-icon::after { content: ""; position: relative; width: 26px; height: 26px; background: #fff; filter: drop-shadow(0 1px 1px rgba(6,18,41,.35)); } .keh-icon-kb::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v17H6.5a1 1 0 0 0 0 2H20v1.5H6.5A2.5 2.5 0 0 1 4 20V4.5zM8 6v2h8V6H8zm0 4v2h6v-2H8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v17H6.5a1 1 0 0 0 0 2H20v1.5H6.5A2.5 2.5 0 0 1 4 20V4.5zM8 6v2h8V6H8zm0 4v2h6v-2H8z'/%3E%3C/svg%3E") center/contain no-repeat; } .keh-icon-forum::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h13a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9l-4 3.5V15H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm17 5h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1v2.5L16.5 19H10v-2h8a2 2 0 0 0 2-2V9z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h13a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9l-4 3.5V15H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm17 5h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1v2.5L16.5 19H10v-2h8a2 2 0 0 0 2-2V9z'/%3E%3C/svg%3E") center/contain no-repeat; } .keh-icon-news::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h15v14a1 1 0 0 0 2 0V8h1.5v10a3 3 0 0 1-3 3H5a2 2 0 0 1-2-2V4zm3 3v4h5V7H6zm7 0v1.5h3V7h-3zm0 3v1.5h3V10h-3zm-7 3.5V15h10v-1.5H6zm0 3V18h10v-1.5H6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h15v14a1 1 0 0 0 2 0V8h1.5v10a3 3 0 0 1-3 3H5a2 2 0 0 1-2-2V4zm3 3v4h5V7H6zm7 0v1.5h3V7h-3zm0 3v1.5h3V10h-3zm-7 3.5V15h10v-1.5H6zm0 3V18h10v-1.5H6z'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- Latest news ---------- */ .keh-latest { padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem); } .keh-section-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 2.4rem; } .keh-section-title::after { content: ""; display: block; width: 72px; height: 4px; margin: .9rem auto 0; border-radius: 4px; background: linear-gradient(90deg, #0B4FB3, #38C6F4); } .keh-post-card { height: 100%; } .keh-post-card .wp-block-post-title { margin: .4rem 0 .6rem; font-size: 1.25rem; } .keh-post-card .wp-block-post-title a { text-decoration: none; } .keh-post-date { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--keh-royal); } .keh-post-card .wp-block-post-excerpt__more-link { font-weight: 700; text-decoration: none; } .keh-empty { padding: 2.2rem; border-radius: var(--keh-radius); color: var(--keh-slate); background: linear-gradient(180deg, var(--keh-surface), var(--keh-surface-2)); border: 1px dashed var(--keh-field-border); } /* ---------- Call to action band ---------- */ .keh-cta { padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(3.5rem, 7vw, 6rem); } .keh-cta-inner { position: relative; overflow: hidden; isolation: isolate; gap: 1.5rem; padding: clamp(2rem, 4vw, 3.2rem); border-radius: 24px; color: #fff; background: radial-gradient(45% 90% at 100% 0%, rgba(56,198,244,.35), rgba(56,198,244,0) 60%), linear-gradient(120deg, #061229 0%, #0A1F44 40%, #0B4FB3 100%); box-shadow: 0 30px 60px -28px rgba(11,79,179,.85), inset 0 1px 0 rgba(255,255,255,.25); } .keh-cta-inner::before { content: ""; position: absolute; z-index: -1; left: -5%; right: -5%; top: -75%; height: 120%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); } .keh-cta-title { color: #fff !important; margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); } .keh-cta-inner p { margin: 0; color: rgba(255,255,255,.88); } /* ---------- Footer ---------- */ .keh-footer { margin-top: 0 !important; padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem) 1.6rem; color: rgba(255,255,255,.78); background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 22%), linear-gradient(160deg, #061229 0%, #0A1F44 55%, #0B3A86 100%); border-top: 1px solid rgba(56,198,244,.35); } .keh-footer-blurb { max-width: 30rem; margin-top: 1rem; } .keh-footer-heading { color: #fff !important; font-size: .82rem !important; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; } .keh-footer-links { list-style: none; padding: 0; margin: 0; } .keh-footer-links li { margin: .45rem 0; } .keh-footer a { color: rgba(255,255,255,.82); text-decoration: none; } .keh-footer a:hover { color: #38C6F4; } .keh-footer-base { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .88rem; } .keh-footer-base p { margin: 0; } /* ---------- Inner pages: glossy title band ---------- */ .keh-page-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: clamp(2.8rem, 6vw, 4.6rem) clamp(1rem, 4vw, 2.5rem); background: radial-gradient(35% 90% at 98% 0%, rgba(56,198,244,.3) 0%, rgba(56,198,244,0) 60%), var(--keh-brand); } .keh-page-hero::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: -120%; height: 170%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 70%, rgba(255,255,255,0) 100%); } .keh-page-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 44px 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); } .keh-page-title, .keh-page-title a { margin: 0; color: #fff !important; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; text-decoration: none; filter: drop-shadow(0 4px 14px rgba(6,18,41,.35)); } /* Title band: the title, kicker and date share the left edge and width of the text column below them (like it.fdu.edu), instead of spanning the full 1240px layout. Each page type sets its column width and the card padding that its text sits behind. The doc hero keeps its own two-column layout. */ body { --keh-hero-w: var(--wp--style--global--wide-size, 1240px); --keh-hero-pad: 0px; } /* Plain pages, the leaderboard and news posts: the text column is the 760px content size, centred behind the card's padding. */ body.page:not(.wpforo), body.single-post, body.error404 { --keh-hero-pad: clamp(1.5rem, 4vw, 3rem); --keh-hero-w: calc(var(--wp--style--global--content-size, 760px) + 2 * var(--keh-hero-pad)); } /* Knowledge Base hub: the category cards sit in the 760px column, so the title, lede and search box do too. */ body.post-type-archive-docs { --keh-hero-w: var(--wp--style--global--content-size, 760px); } /* Forum: the wpForo card is the full wide width with its own padding. */ body.wpforo { --keh-hero-pad: clamp(1rem, 2.5vw, 2rem); } .keh-page-hero:not(.keh-doc-hero) > .keh-page-title, .keh-page-hero:not(.keh-doc-hero) > .keh-page-kicker, .keh-page-hero:not(.keh-doc-hero) > .keh-page-meta, .keh-page-hero:not(.keh-doc-hero) > .keh-page-lede { max-width: var(--keh-hero-w) !important; margin-inline: auto; padding-inline: var(--keh-hero-pad); box-sizing: border-box; text-align: left; } .keh-page-lede { margin: .8rem auto 0; max-width: 40rem; color: rgba(255,255,255,.9); font-size: 1.1rem; } .keh-page-kicker, .keh-page-kicker a { margin: 0 0 .7rem; color: #CFEFFF !important; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; } .keh-page-meta { margin: .9rem 0 0; color: rgba(255,255,255,.8); font-size: .92rem; } .keh-page-body { padding: clamp(2.2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem); } .keh-article { padding: clamp(1.5rem, 4vw, 3rem); border-radius: 20px; background: var(--keh-surface); border: 1px solid var(--keh-border); box-shadow: var(--keh-card-shadow); max-width: 860px !important; } .keh-comments { margin-top: 2.5rem; } .keh-hero-search { margin-top: 1.4rem; } .keh-hero-search .wp-block-search__inside-wrapper { border-radius: 999px; overflow: hidden; border: 0; padding: 5px; background: rgba(255,255,255,.96); box-shadow: 0 18px 40px -18px rgba(6,18,41,.8); } .keh-hero-search input { color: #0A1F44; border: 0 !important; box-shadow: none !important; background: transparent; padding-left: 1.2rem; } .wp-block-query-pagination { margin-top: 2.5rem; font-weight: 700; } /* Knowledge base hero and grid */ .keh-kb-hero { text-align: left; padding-bottom: clamp(3.2rem, 7vw, 5.4rem); } .keh-kb-hero > .keh-page-title, .keh-kb-hero > .keh-page-lede { text-align: left !important; } .keh-kb-hero .keh-page-lede { margin-inline: auto; } .keh-kb-hero [class*="betterdocs-searchbox"], .keh-kb-hero .betterdocs-search-form-wrapper, .keh-kb-hero .betterdocs-searchbox-wrapper { background: transparent !important; margin: 1.6rem auto 0 !important; padding: 0 !important; max-width: var(--keh-hero-w); } .keh-kb-hero .betterdocs-live-search { background: transparent !important; padding: 0 !important; } .keh-kb-hero .betterdocs-searchform, .keh-kb-hero .betterdocs-search-layout-1, .keh-kb-hero form { border-radius: 999px !important; border: 0 !important; background: rgba(255,255,255,.97) !important; box-shadow: inset 0 1px 0 #fff, 0 22px 44px -18px rgba(6,18,41,.85) !important; } .keh-kb-hero .betterdocs-search-heading, .keh-kb-hero .betterdocs-search-heading * { color: #fff !important; } .keh-kb-body .betterdocs-single-category-wrapper .betterdocs-single-category-inner { border-radius: var(--keh-radius) !important; overflow: hidden; border: 1px solid var(--keh-border) !important; box-shadow: var(--keh-card-shadow) !important; transition: transform .22s ease, box-shadow .22s ease; } .keh-kb-body .betterdocs-single-category-wrapper .betterdocs-single-category-inner:hover { transform: translateY(-5px); box-shadow: var(--keh-lift-shadow) !important; } .keh-kb-body .betterdocs-category-title, .keh-kb-body .betterdocs-category-title a { color: var(--keh-navy) !important; font-weight: 700; } .keh-kb-body .betterdocs-category-header .betterdocs-category-header-inner { border-color: #2B8CFF !important; } .keh-kb-body .betterdocs-category-items-counts { background: var(--keh-gloss) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); } .keh-kb-body a.betterdocs-category-link-btn { color: var(--keh-royal) !important; font-weight: 700; } /* Forms */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select { border-radius: 10px; border: 1px solid var(--keh-field-border); transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus, select:focus { border-color: var(--keh-focus); } /* ---------- wpForo: bring the forum into the palette ---------- */ body.wpforo .keh-page-body > .wp-block-post-content, body.wpforo .keh-page-body .wp-block-post-content > * { max-width: var(--wp--style--global--wide-size) !important; } #wpforo-wrap { font-family: inherit !important; font-size: 15px !important; padding: clamp(1rem, 2.5vw, 2rem) !important; border-radius: 20px; background: var(--keh-surface); color: var(--keh-text); border: 1px solid var(--keh-border); box-shadow: var(--keh-card-shadow); } #wpforo-wrap #wpforo-menu { border-radius: 14px !important; overflow: hidden; border: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 50%, rgba(255,255,255,0) 52%), linear-gradient(100deg, #061229 0%, #0A1F44 40%, #0B4FB3 100%) !important; box-shadow: 0 14px 28px -16px rgba(6,18,41,.8) !important; } #wpforo-wrap #wpforo-menu ul.wpf-menu > li > a { color: rgba(255,255,255,.86) !important; font-weight: 600; background: transparent !important; } #wpforo-wrap #wpforo-menu ul.wpf-menu > li > a:hover { color: #fff !important; } #wpforo-wrap #wpforo-menu ul.wpf-menu > li.wpforo-active > a, #wpforo-wrap #wpforo-menu ul.wpf-menu > li.current-menu-item > a { color: #0A1F44 !important; background: linear-gradient(180deg, #fff, #D6E8FF) !important; border-radius: 10px; box-shadow: inset 0 1px 0 #fff; } #wpforo-wrap #wpforo-menu ul.wpf-menu > li.wpforo-active, #wpforo-wrap #wpforo-menu ul.wpf-menu > li.current-menu-item { background: transparent !important; padding: 6px; } /* Forum bar on phones: wpForo turns the tabs into a dropdown; give it the bar's navy so the white links stay readable in light mode too. */ @media (max-width: 620px) { #wpforo-wrap #wpforo-menu ul.wpf-menu { background: linear-gradient(180deg, #0A1F44, #061229) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px !important; box-shadow: 0 18px 36px -14px rgba(6,18,41,.9) !important; padding: .4rem !important; } #wpforo-wrap #wpforo-menu ul.wpf-menu > li { border: 0 !important; } #wpforo-wrap #wpforo-menu ul.wpf-menu > li > a { color: #fff !important; padding: .8rem 1rem !important; font-size: 1rem; } #wpforo-wrap #wpforo-menu ul.wpf-menu > li.wpforo-active > a, #wpforo-wrap #wpforo-menu ul.wpf-menu > li.current-menu-item > a { color: #0A1F44 !important; } } #wpforo-wrap #wpforo-menu i, #wpforo-wrap #wpforo-menu .wpf-res-menu, #wpforo-wrap #wpforo-menu .wpf-search i, #wpforo-wrap #wpforo-menu .wpf-bar-right i, #wpforo-wrap #wpforo-menu .wpf-bar-right svg { color: #fff !important; fill: #fff !important; } #wpforo-wrap .wpforo-cat-panel, #wpforo-wrap .wpf-head-bar { border-radius: 12px 12px 0 0; background: linear-gradient(180deg, var(--keh-surface-2), var(--keh-ice)) !important; border-bottom: 2px solid #2B8CFF !important; } #wpforo-wrap .wpforo-cat-panel, #wpforo-wrap .wpforo-cat-panel * { color: var(--keh-navy); } #wpforo-wrap input[type="submit"], #wpforo-wrap input[type="button"], #wpforo-wrap button[type="submit"], #wpforo-wrap .wpf-button, #wpforo-wrap .add_wpftopic { background: var(--keh-gloss) !important; border: 0 !important; border-radius: 999px !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px -10px rgba(21,101,216,.9) !important; } #wpforo-wrap .add_wpftopic *, #wpforo-wrap .wpf-button * { color: #fff !important; } #wpforo-wrap a { color: var(--keh-royal); } #wpforo-wrap .wpf-forum-info, #wpforo-wrap #wpforo-stat-body, #wpforo-wrap .wpforo-stat-body { border-radius: 14px; background: linear-gradient(180deg, var(--keh-surface-2), var(--keh-ice)) !important; } #wpforo-wrap #wpforo-poweredby, #wpforo-wrap #wpforo-poweredby a { color: var(--keh-slate) !important; } @media (max-width: 781px) { .keh-features { margin-top: -3.5rem !important; } .keh-cta-inner { text-align: left; } } /* Plain pages (About, Contact, legal): readable card on the mist background */ body.page:not(.wpforo) .keh-page-body > .wp-block-post-content { max-width: 820px; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 20px; background: var(--keh-surface); border: 1px solid var(--keh-border); box-shadow: var(--keh-card-shadow); } body.page:not(.wpforo) .keh-page-body .wp-block-post-content > :first-child { margin-top: 0; } body.page:not(.wpforo) .keh-page-body .wp-block-post-content h2 { margin-top: 2.2rem; font-size: 1.45rem; color: var(--keh-navy); } body.page:not(.wpforo) .keh-page-body .wp-block-post-content h3 { margin-top: 1.5rem; font-size: 1.1rem; color: var(--keh-deep); } body.page:not(.wpforo) .keh-page-body .wp-block-post-content li { margin-bottom: .5rem; } .keh-legal-note { color: var(--keh-deep); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Contact form */ .keh-form { margin: 1.8rem 0; } .keh-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1.2rem; } .keh-field { margin: 0 0 1.15rem; } .keh-field label { display: block; margin-bottom: .35rem; font-weight: 700; font-size: .92rem; color: var(--keh-navy); } .keh-field input, .keh-field select, .keh-field textarea { width: 100%; box-sizing: border-box; padding: .75rem .9rem; font: inherit; color: var(--keh-text); background: var(--keh-mist); border: 1px solid var(--keh-field-border); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .keh-field textarea { resize: vertical; min-height: 9rem; } .keh-field input:focus, .keh-field select:focus, .keh-field textarea:focus { background: var(--keh-surface); border-color: var(--keh-focus); } .keh-field [aria-invalid="true"] { border-color: var(--keh-err-strong); background: var(--keh-err-bg); } .keh-field-error { margin: .35rem 0 0; color: var(--keh-err-strong); font-size: .88rem; font-weight: 600; } .keh-field-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .keh-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin: 1.4rem 0 0; } .keh-form-actions button { border: 0; cursor: pointer; font: inherit; font-weight: 700; } .keh-form-hint { color: var(--keh-slate); font-size: .88rem; } .keh-form-notice { margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid; } .keh-form-notice--ok { background: var(--keh-ok-bg); border-color: var(--keh-ok-border); color: var(--keh-ok-text); } .keh-form-notice--error { background: var(--keh-err-bg); border-color: var(--keh-err-border); color: var(--keh-err-text); } /* Article callouts, code and tables */ .keh-callout { padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid var(--keh-border); border-left: 5px solid var(--keh-bright); background: var(--keh-ice); } /* Call-to-action highlight: the brand blue, for invitations rather than warnings. */ .keh-callout-cta { padding: 1.3rem 1.5rem; border: 0; border-radius: var(--keh-radius); color: #fff !important; font-size: 1.05rem; line-height: 1.6; background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%), linear-gradient(120deg, #0A1F44 0%, #0B4FB3 48%, #1E6BDB 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 36px -18px rgba(11,79,179,.8); } /* The knowledge base rule that puts article text on the site text colour is two classes deep and !important, so the white text has to be stated at least as specifically or it turns dark on blue. */ .keh-callout-cta, .keh-callout-cta strong, .keh-callout-cta em, .single-docs .betterdocs-content .keh-callout-cta, .single-docs .betterdocs-content .keh-callout-cta :where(strong, em, span) { color: #fff !important; } .keh-callout-cta a, .single-docs .betterdocs-content .keh-callout-cta a { color: #BFE9FF !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .keh-callout-cta a:hover, .single-docs .betterdocs-content .keh-callout-cta a:hover { color: #fff !important; } .single-docs .betterdocs-content .keh-callout-alert, .single-docs .betterdocs-content .keh-callout-alert strong { color: var(--keh-err-text, #8E1B1B) !important; } .keh-callout-alert { border-color: var(--keh-err-border, #F0B4B4); border-left-color: var(--keh-err-strong, #B71C1C); background: var(--keh-err-bg, #FFF1F1); color: var(--keh-err-text, #8E1B1B) !important; font-size: 1.1rem !important; line-height: 1.5; } .keh-callout-alert strong { color: inherit; font-weight: 800; } .keh-callout-warn { border-color: var(--keh-warn-border); border-left-color: var(--keh-warn-accent); background: var(--keh-warn-bg); } .wp-block-code, .wp-block-post-content pre { padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid #12306A; background: var(--keh-midnight); color: #DCEBFF; font-size: .88rem; line-height: 1.6; overflow-x: auto; white-space: pre; } .wp-block-code code, .wp-block-post-content pre code { background: none; color: inherit; padding: 0; } :not(pre) > code { padding: .1em .4em; border-radius: 6px; background: var(--keh-ice); color: var(--keh-navy); font-size: .9em; } .wp-block-table td code { white-space: nowrap; } .wp-block-table table, .wp-block-post-content table { border-collapse: collapse; width: 100%; font-size: .93rem; } .wp-block-table th, .wp-block-post-content table th { background: var(--keh-ice); color: var(--keh-navy); text-align: left; } .wp-block-table th, .wp-block-table td, .wp-block-post-content table th, .wp-block-post-content table td { padding: .65rem .8rem; border: 1px solid var(--keh-border); vertical-align: top; } /* ---------- Accessibility (WCAG 2.1 AA) ---------- */ html { scroll-padding-top: 6rem; } /* anchors and focused items are not hidden under the sticky header */ /* Visible keyboard focus everywhere (2.4.7). Two-tone ring on the dark bands so it shows on any part of a gradient. */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible { outline: 3px solid var(--keh-focus); outline-offset: 2px; border-radius: 4px; } :where(.keh-header, .keh-hero, .keh-page-hero, .keh-cta-inner, .keh-footer, #wpforo-menu) :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--keh-midnight); } .skip-link.screen-reader-text:focus { z-index: 100000; padding: .9rem 1.4rem; border-radius: 0 0 12px 0; font-weight: 700; color: #fff; background: var(--keh-midnight); outline: 3px solid #fff; outline-offset: -5px; } /* Links inside running text are underlined, not identified by color alone (1.4.1). */ .wp-block-post-content :where(p, li, td, dd) a, .comment-content a, #wpforo-wrap .wpforo-post-content a { text-decoration: underline; text-underline-offset: .15em; } .wp-block-post-content :where(p, li, td, dd) a:hover { text-decoration-thickness: 2px; } /* Reflow (1.4.10): nothing makes the page itself scroll sideways at 320px / 400% zoom. */ .keh-table-scroll, .wp-block-table { max-width: 100%; overflow-x: auto; } #wpforo-wrap .wpf-footer-buttons, #wpforo-wrap .wpforo-stat-head, #wpforo-wrap .wpf-stat-bar { flex-wrap: wrap; max-width: 100%; } :not(pre) > code { overflow-wrap: anywhere; } #wpforo-wrap .wpf-post-stat, #wpforo-wrap .wpf-post-head-bottom, #wpforo-wrap .wpf-topic-stat-boxes, #wpforo-wrap [class*="wpf-post-stat-box"] { flex-wrap: wrap; } #wpforo-wrap .wpforo-topic-head-wrap, #wpforo-wrap .wpf-head-bar { flex-wrap: wrap; max-width: 100%; } @media (max-width: 480px) { #wpforo-wrap .wpf-footer-buttons { float: none !important; display: flex; gap: .4rem .9rem; } .single-docs .betterdocs-toc { max-width: 100%; box-sizing: border-box; right: auto !important; } .keh-form .g-recaptcha, .keh-form [class*="recaptcha"] { transform: scale(.88); transform-origin: left top; } } /* Scrollable code and tables can take keyboard focus (2.1.1); theme.js adds the tabindex. */ pre[tabindex]:focus-visible, .wp-block-table[tabindex]:focus-visible { outline-offset: 3px; } /* Forum: text colors the plugin ships below 4.5:1 */ #wpforo-wrap a[style*="FF3333" i] { color: var(--keh-err-strong) !important; } #wpforo-wrap #wpforo-stat-body a, #wpforo-wrap .wpforo-stat-body a { color: var(--keh-royal) !important; } #wpforo-wrap .wpf-topic-id, #wpforo-wrap .wpf-action { color: var(--keh-slate) !important; } #wpforo-wrap select { color: var(--keh-text) !important; background-color: var(--keh-surface) !important; border: 1px solid var(--keh-field-border) !important; } /* Knowledge base articles: BetterDocs hard-codes greys and white panels. Put them on the site tokens so they pass contrast and follow dark mode. */ .single-docs .betterdocs-content, .single-docs .betterdocs-content :where(p, li, strong, em, td, th, dd, dt, blockquote), .single-docs .betterdocs-article-reactions-subheading, .single-docs .betterdocs-social-share-title-tag, .single-docs .reading-time, .single-docs .update-date, .single-docs .betterdocs-breadcrumb :where(a, span, li) { color: var(--keh-text) !important; } .single-docs .betterdocs-content a, .single-docs .betterdocs-tags a, .single-docs .docs-navigation a, .single-docs .betterdocs-toc a { color: var(--keh-royal) !important; } .single-docs .betterdocs-sidebar-content, .single-docs .betterdocs-single-category-inner, .single-docs .betterdocs-toc, .single-docs .betterdocs-article-reactions-box, .keh-kb-body .betterdocs-single-category-inner { background: var(--keh-surface) !important; color: var(--keh-text) !important; border-color: var(--keh-border) !important; } .betterdocs-single-category-inner .betterdocs-category-title, .betterdocs-single-category-inner .betterdocs-category-title :where(a, span), .single-docs .betterdocs-toc :where(.toc-title, h2, h3, h4, p) { color: var(--keh-navy) !important; } .betterdocs-single-category-inner :where(li, li a, li span, .betterdocs-articles-list a) { color: var(--keh-text) !important; } .betterdocs-single-category-inner svg:not([class*="counts"]) { fill: currentColor; color: var(--keh-slate); } .single-docs .reading-time, .single-docs [class*="betterdocs-reading-time"] > * { background: var(--keh-ice) !important; border-color: var(--keh-border) !important; } .single-docs [class*="betterdocs-reading-time"] p { color: var(--keh-text) !important; background: var(--keh-ice) !important; } .single-docs [class*="betterdocs-reading-time"] p svg { fill: currentColor; } .single-docs .betterdocs-breadcrumb-list { background: var(--keh-ice) !important; } .betterdocs-category-items-counts, .betterdocs-category-items-counts span { color: #fff !important; background: var(--keh-gloss) !important; } .keh-kb-hero input, .keh-kb-hero input::placeholder { color: #33415C !important; } /* Dark mode toggle */ .keh-header-tools { display: flex; align-items: center; gap: 1.1rem; } .keh-theme-toggle { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer; border-radius: 999px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.55); transition: background .18s ease, transform .18s ease; } .keh-theme-toggle:hover { background: rgba(255,255,255,.22); } .keh-theme-toggle svg { width: 22px; height: 22px; fill: currentColor; } .keh-theme-toggle .keh-icon-sun, .keh-theme-toggle[aria-pressed="true"] .keh-icon-moon { display: none; } .keh-theme-toggle[aria-pressed="true"] .keh-icon-sun { display: block; } html:not(.js) .keh-theme-toggle { display: none; } /* Respect "reduce motion" (2.3.3 / 2.2.2): no sweeps, lifts or smooth scrolling. */ /* Dark mode gaps found in review (2026-09-17) */ /* wpForo's layout CSS paints the sign-in box #eee; its color file (and so ours) never sees it. */ html #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-table, html #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-table .wpfw-1 .wpf-field:nth-child(even) { background-color: var(--keh-surface-2, #EEEEEE); } html #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-table { border: 1px solid var(--keh-border, transparent); border-radius: 14px; } html #wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field label, html #wpforo #wpforo-wrap .wpforo-login-wrap .wpf-extra-field-end { color: var(--keh-text, inherit); } html #wpforo #wpforo-wrap .wpforo-login-wrap a { color: var(--keh-royal); } html #wpforo #wpforo-wrap .wpforo-404-wrap input[type="text"], html #wpforo #wpforo-wrap .wpforo-404-content input[type="text"] { border: 1px solid var(--keh-field-border, #6A7B9C); background: var(--keh-surface, #fff); color: var(--keh-text, inherit); } /* BetterDocs' category icon is a dark SVG loaded as an image, so it cannot take a text color. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .betterdocs-category-icon-img { filter: invert(1) brightness(1.7); } } html[data-theme="dark"] .betterdocs-category-icon-img { filter: invert(1) brightness(1.7); } /* 404 page */ .keh-404 .wp-block-search__input { background: var(--keh-surface, #fff); color: var(--keh-text, inherit); border: 1px solid var(--keh-field-border, #6A7B9C); border-radius: 999px; padding-left: 1.1rem; } .keh-404 .wp-block-search__input::placeholder { color: var(--keh-slate); opacity: 1; } /* wpForo highlights the focused sign-in field pale yellow, which turns olive on dark. */ html #wpforo #wpforo-wrap .wpforo-login-wrap input:focus, html #wpforo #wpforo-wrap .wpforo-register-wrap input:focus { background-color: var(--keh-surface, #fff) !important; color: var(--keh-text, inherit); } .keh-404 { text-align: center; } .keh-404-code { margin: 0; font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: var(--keh-gloss); -webkit-background-clip: text; background-clip: text; color: transparent; } .keh-404-prompt { display: inline-block; margin: 1.2rem auto 0; padding: .7rem 1.1rem; border-radius: 12px; background: var(--keh-midnight); color: #DCEBFF; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; text-align: left; } .keh-404-prompt b { color: #38C6F4; font-weight: 700; } .keh-404 .wp-block-search { max-width: 560px; margin: 1.8rem auto 0; } .keh-404 .wp-block-buttons { justify-content: center; margin-top: 1.6rem; } /* Knowledge base article: contents list in its own left column (it never covers the text); on narrow screens the columns stack, which puts the contents list at the top. */ .keh-doc-hero .keh-page-title { margin-top: .6rem; font-size: clamp(1.9rem, 4vw, 3rem); } .keh-doc-hero .betterdocs-breadcrumb, .keh-doc-hero .betterdocs-breadcrumb * { background: transparent !important; color: #CFEFFF !important; font-size: .82rem; font-weight: 600; } .keh-doc-hero .betterdocs-breadcrumb svg { fill: #CFEFFF !important; } .keh-doc-hero .betterdocs-breadcrumb a:hover { color: #fff !important; text-decoration: underline; } .keh-doc-hero .reading-time { display: inline-flex; margin: 0; padding: .3rem .8rem; border-radius: 999px; background: rgba(255,255,255,.14) !important; color: #fff !important; font-size: .82rem; } .keh-doc-hero .reading-time * { color: inherit !important; fill: currentColor !important; } .keh-doc-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .keh-doc-layout > * { margin-block-start: 0 !important; } .keh-doc-aside { position: sticky; top: calc(5.3rem + var(--keh-doc-search-h) + .6rem); max-height: calc(100vh - 5.3rem - var(--keh-doc-search-h) - 2rem); overflow-y: auto; } .admin-bar .keh-doc-aside { top: calc(5.3rem + 32px + var(--keh-doc-search-h) + .6rem); } /* KB ID pill in the title band */ .keh-doc-meta { gap: .6rem !important; align-items: center; margin-top: 1rem; } .keh-doc-meta > *, .keh-doc-meta p { margin: 0 !important; line-height: 1.4; } .keh-doc-meta p { display: flex; align-items: center; } /* no text baseline for the KB ID pill to sit on */ /* both pills sit on the same line: the read-time and KB ID wrappers carry no margins of their own */ .keh-kb-id { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: .8rem; line-height: 1.4; white-space: nowrap; } .keh-kb-id-label { font-weight: 800; letter-spacing: .1em; font-size: .68rem; text-transform: uppercase; color: #CFEFFF; } .keh-kb-id-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .04em; } /* Search bar: one compact row across both columns, pinned under the site header for the whole article. Its height is fixed so the contents list can pin exactly beneath it (Karl, 2026-09-17: the old one was too tall and covered the contents list). "margin: 0 auto" keeps it centred with the columns on wide screens. */ :root { --keh-doc-search-h: 3.9rem; } .keh-doc-search { position: sticky; top: 5.3rem; z-index: 40; box-sizing: border-box; height: var(--keh-doc-search-h); margin: 0 auto 1.2rem !important; padding: .45rem 0; background: var(--keh-mist); } .admin-bar .keh-doc-search { top: calc(5.3rem + 32px); } .keh-doc-search .keh-doc-search { position: static; height: auto; margin: 0 !important; padding: 0; background: transparent; } @media (max-width: 900px) { .keh-doc-search { top: 4.2rem; } .admin-bar .keh-doc-search { top: calc(4.2rem + 46px); } } @media (max-width: 600px) { .admin-bar .keh-doc-search { top: 4.2rem; } } .keh-doc-search [class*="betterdocs-searchbox"], .keh-doc-search .betterdocs-search-form-wrapper, .keh-doc-search .betterdocs-searchbox-wrapper, .keh-doc-search .betterdocs-live-search { background: transparent !important; margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100%; } .keh-doc-search .betterdocs-searchform, .keh-doc-search .betterdocs-search-layout-1, .keh-doc-search form { padding: 4px 12px !important; border-radius: 999px !important; border: 1px solid var(--keh-border) !important; background: var(--keh-surface) !important; box-shadow: 0 12px 28px -14px rgba(6,18,41,.55) !important; } .keh-doc-search .betterdocs-searchform-input-wrap { min-height: 0; } .keh-doc-search .betterdocs-search-heading { display: none !important; } .keh-doc-search input.betterdocs-search-field { padding: .5rem .9rem !important; font-size: 1rem !important; line-height: 1.4 !important; min-height: 0; } .keh-doc-search input, .keh-doc-search input::placeholder { color: var(--keh-text) !important; } .keh-doc-search input::placeholder { color: var(--keh-slate) !important; opacity: 1; } .keh-doc-aside .betterdocs-toc { margin: 0 !important; padding: 1.2rem 1.3rem !important; border-radius: var(--keh-radius); background: var(--keh-surface, #fff) !important; border: 1px solid var(--keh-border, rgba(21,101,216,.16)); box-shadow: var(--keh-card-shadow); } .keh-doc-aside .betterdocs-toc .toc-title, .keh-doc-aside .betterdocs-toc .betterdocs-toc-title { margin: 0 0 .7rem; font-size: .78rem !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--keh-deep) !important; } .keh-doc-aside .betterdocs-toc ul { margin: 0; padding-left: 0; list-style: none; } .keh-doc-aside .betterdocs-toc ul ul { padding-left: .9rem; border-left: 2px solid var(--keh-border, rgba(21,101,216,.16)); margin: .2rem 0 .4rem; } .keh-doc-aside .betterdocs-toc li { margin: 0; } .keh-doc-aside .betterdocs-toc ul li a::before { content: none !important; display: none !important; } /* headings like "Step 1" carry their own numbers */ .keh-doc-aside .betterdocs-toc a { display: block; padding: .28rem 0; font-size: .9rem; line-height: 1.35; color: var(--keh-text, #0B1B33) !important; text-decoration: none; } .keh-doc-aside .betterdocs-toc a:hover, .keh-doc-aside .betterdocs-toc a.active { color: var(--keh-royal) !important; } .keh-doc-article { max-width: none !important; min-width: 0; } /* KB article summary box ([keh_kb_summary]): Problem, Category, Platforms affected, ... */ .keh-kb-summary { margin: 0 0 2rem; padding: .4rem 1.3rem; border-radius: 14px; border: 1px solid var(--keh-border); border-left: 5px solid var(--keh-bright); background: var(--keh-surface-2); } .keh-kb-summary dl { margin: 0; } .keh-kb-summary-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .3rem 1rem; padding: .6rem 0; border-top: 1px solid var(--keh-border); } .keh-kb-summary-row:first-child { border-top: 0; } .keh-kb-summary dt { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--keh-deep); line-height: 1.7; } .keh-kb-summary dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--keh-text); } .keh-kb-summary dd a { font-weight: 700; color: var(--keh-royal); } .keh-kb-summary-row:first-child dd { font-weight: 600; } @media (max-width: 600px) { .keh-kb-summary-row { grid-template-columns: minmax(0, 1fr); gap: .1rem; } } .keh-doc-article .update-date { margin-top: 2rem; color: var(--keh-slate); font-size: .88rem; } @media (max-width: 900px) { .keh-doc-layout { grid-template-columns: minmax(0, 1fr); } .keh-doc-aside { position: static; max-height: none; } } /* Leaderboard */ .keh-leaderboards { max-width: none !important; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin: 1.6rem 0 2rem; } .keh-leaderboard { padding: 1.3rem 1.4rem; } .keh-leaderboard h2 { margin: 0 0 .25rem !important; font-size: 1.15rem !important; } .keh-leaderboard-note { margin: 0 0 .9rem; color: var(--keh-slate); font-size: .84rem; line-height: 1.45; } .keh-leaderboard-empty { margin: 0; color: var(--keh-slate); font-size: .92rem; } .keh-leaderboard-locked { margin: .2rem 0 0; color: var(--keh-slate); font-size: .92rem; line-height: 1.5; } .keh-leaderboard-locked a { font-weight: 700; color: var(--keh-royal); } .keh-lock { margin-right: .25rem; } .keh-leaderboard-list { list-style: none; margin: 0; padding: 0; } .keh-leaderboard-list li { display: flex; align-items: center; gap: .7rem; margin: 0 !important; padding: .5rem 0; border-top: 1px solid var(--keh-border, rgba(21,101,216,.16)); font-size: .95rem; } .keh-leaderboard-list a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--keh-navy); text-decoration: none; } .keh-leaderboard-list a:hover { color: var(--keh-royal); text-decoration: underline; } .keh-rank { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 800; background: var(--keh-ice); color: var(--keh-navy); } .keh-rank-gold .keh-rank { background: linear-gradient(180deg, #FFE48A, #E0A100); color: #3A2A00; } .keh-rank-silver .keh-rank { background: linear-gradient(180deg, #F1F4F8, #AEB8C6); color: #1E2A3A; } .keh-rank-bronze .keh-rank { background: linear-gradient(180deg, #F0C29A, #B9722D); color: #2E1803; } .keh-score { flex: none; font-weight: 800; color: var(--keh-deep); } .keh-score small { font-weight: 600; color: var(--keh-slate); } body.page:not(.wpforo) .keh-page-body > .wp-block-post-content:has(.keh-leaderboards) { max-width: 1000px; } /* Privacy opt-outs on the forum Account page and the WordPress profile page */ .keh-privacy { margin: 0 0 1.2rem; padding: .9rem 1.1rem 1rem; border: 1px solid var(--keh-border); border-radius: 10px; text-align: left; } .keh-privacy legend { padding: 0 .4rem; font-weight: 800; font-size: .95rem; } .keh-privacy-option { display: flex; gap: .55rem; align-items: flex-start; margin: .35rem 0; font-size: .92rem; font-weight: 500; line-height: 1.4; cursor: pointer; } .keh-privacy-option input { margin-top: .2rem; } .keh-privacy-note { margin: .6rem 0 0; font-size: .82rem; color: var(--keh-slate); } .keh-privacy-saved { margin: 0 0 .5rem; font-weight: 700; color: var(--keh-ok-text); } .keh-privacy-form { margin: 1.4rem 0 0; } .keh-privacy-form .wpf-button { margin-top: .2rem; } /* TL;DR, the fix-only version of an article */ .keh-tldr-link { white-space: nowrap; } .keh-tldr-hint { color: var(--keh-slate); font-size: .85rem; } .keh-tldr { margin: 0; } .keh-tldr-lede { margin: 0 0 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--keh-border); color: var(--keh-slate); font-size: .95rem; } .keh-tldr-steps { margin: 0 0 1.4rem; padding-left: 1.4rem; } .keh-tldr-steps > li { margin-bottom: .9rem; padding-left: .3rem; font-size: 1.02rem; line-height: 1.6; } .keh-tldr-steps > li::marker { font-weight: 800; color: var(--keh-royal); } .keh-tldr-list { margin: 0 0 1.4rem; padding-left: 1.3rem; } .keh-tldr-list > li { margin-bottom: .5rem; } .keh-tldr .wp-block-code { margin: .6rem 0 1.2rem; } .keh-tldr-back { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--keh-border); font-weight: 700; } .keh-tldr-empty { color: var(--keh-slate); } /* "Was this helpful?" (BetterDocs reactions) */ .keh-doc-article .betterdocs-reactions, .keh-doc-article [class*="betterdocs-reaction"] { margin-top: 2.2rem !important; } .keh-doc-article .betterdocs-reactions { padding: 1.1rem 1.3rem; border-radius: 14px; background: var(--keh-surface-2); border: 1px solid var(--keh-border); } .keh-doc-article .betterdocs-reactions * { color: var(--keh-text); } .keh-doc-article .betterdocs-reactions a, .keh-doc-article .betterdocs-reactions button { color: var(--keh-royal); } /* Related articles and the "still stuck?" box */ .keh-kb-related { margin: 2.5rem 0 0; padding: 1.2rem 1.4rem; border-radius: 14px; background: var(--keh-surface-2); border: 1px solid var(--keh-border); } .keh-kb-related h2 { margin: 0 0 .8rem !important; font-size: 1.05rem !important; } .keh-kb-related ul { margin: 0; padding: 0; list-style: none; } .keh-kb-related li { margin: 0; padding: .6rem 0; border-top: 1px solid var(--keh-border); } .keh-kb-related li:first-child { border-top: 0; } .keh-kb-related a { font-weight: 700; } .keh-kb-related-problem { display: block; margin-top: .15rem; color: var(--keh-slate); font-size: .88rem; line-height: 1.45; } .keh-kb-ask { margin-top: 1.6rem; } /* Copy button on code blocks */ .keh-copy-wrap { position: relative; } .keh-copy { position: absolute; top: .55rem; right: .55rem; z-index: 2; padding: .3rem .7rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.12); color: #DCEBFF; font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; } .keh-copy-wrap:hover .keh-copy, .keh-copy:focus-visible { opacity: 1; } .keh-copy:hover { background: rgba(255,255,255,.22); color: #fff; } .keh-copy[data-copied="1"] { opacity: 1; background: var(--keh-ok-border, #9AD3B2); color: #0B1B33; border-color: transparent; } @media (hover: none) { .keh-copy { opacity: 1; } } /* Reading progress, under the sticky KB search bar */ .keh-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 90; background: linear-gradient(90deg, #38C6F4, #1565D8); transition: width .1s linear; } /* Rank ladder ([keh_ranks]) */ .keh-ranks { list-style: none; margin: 1rem 0 2rem !important; padding: 0 !important; counter-reset: keh-rank; } .keh-rank-row { display: flex; align-items: center; gap: .9rem; margin: 0 !important; padding: .7rem .2rem; border-top: 1px solid var(--keh-border); counter-increment: keh-rank; } .keh-rank-row:last-child { border-bottom: 1px solid var(--keh-border); } .keh-rank-badge { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; color: #fff; background: var(--keh-rank-color, var(--keh-royal)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); } .keh-rank-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .keh-rank-title { font-weight: 800; color: var(--keh-navy); } .keh-rank-title::before { content: counter(keh-rank) ". "; color: var(--keh-slate); font-weight: 600; } .keh-rank-tagline { font-size: .88rem; line-height: 1.4; color: var(--keh-slate); } .keh-rank-points { flex: none; font-weight: 800; font-size: .9rem; color: var(--keh-deep); white-space: nowrap; } .keh-rank-row:last-child .keh-rank-title { color: light-dark(#8A5A00, #FFD166); } @media (max-width: 480px) { .keh-rank-tagline { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .keh-card:hover, .wp-element-button:hover, .wp-block-button__link:hover, .keh-logo-link:hover { transform: none; } } /* Windows High Contrast / forced colors: keep controls and focus visible. */ @media (forced-colors: active) { .keh-theme-toggle, .wp-element-button, .wp-block-button__link, .keh-card { border: 1px solid ButtonText; } .keh-hero-title { -webkit-text-fill-color: currentColor; background: none; } .keh-icon::after { background: ButtonText; } }