/*! * AI Executive Kft — Signal Gold look. * Tokens ported 1:1 from the redesign-kft-v3 reference stylesheet. * Both token sets ship (light + dark); the site runs light until the * theme switcher UI lands. Dark activates by setting * data-theme="dark" on the element — nothing sets it yet. */ /* ============================================================ FONTS — Space Grotesk variable (latin + latin-ext for Hungarian) ============================================================ */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url("../fonts/space-grotesk/space-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url("../fonts/space-grotesk/space-grotesk-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ TOKENS — light set (default) and dark set (shipped, inactive) ============================================================ */ :root, [data-theme="light"] { --aiexec-bg: #edf1f4; --aiexec-surface: #f8fbfc; --aiexec-surface-2: #e2e9ee; --aiexec-surface-3: #d4dde4; --aiexec-ink: #12171d; --aiexec-muted: #606c78; --aiexec-faint: #8d99a4; --aiexec-line: #ccd6dd; --aiexec-primary: #7c5a06; --aiexec-primary-soft: rgba(124, 90, 6, .06); --aiexec-gold: #B8860B; --aiexec-gold-strong: #946b08; --aiexec-gold-soft: rgba(184, 134, 11, .12); --aiexec-dark: #0f1419; --aiexec-dark-2: #141b22; --aiexec-dark-3: #1b242d; --aiexec-dark-text: #eef3f6; --aiexec-header-bg: rgba(237, 241, 244, .78); --aiexec-card-bg: rgba(248, 251, 252, .86); --aiexec-shadow-sm: 0 1px 2px rgba(8, 17, 26, .05); --aiexec-shadow-md: 0 18px 50px rgba(8, 17, 26, .08); --aiexec-shadow-lg: 0 30px 100px rgba(8, 17, 26, .12); --aiexec-quote-grad: linear-gradient(180deg, var(--aiexec-dark) 0%, var(--aiexec-dark-2) 100%); } [data-theme="dark"] { --aiexec-bg: #0f1419; --aiexec-surface: #141b22; --aiexec-surface-2: #1b242d; --aiexec-surface-3: #24303b; --aiexec-ink: #e8eef2; --aiexec-muted: #a6b1bb; --aiexec-faint: #7d8892; --aiexec-line: #2a3640; --aiexec-primary: #a8821f; --aiexec-primary-soft: rgba(168, 130, 31, .10); --aiexec-gold: #d2a33a; --aiexec-gold-strong: #f0ca75; --aiexec-gold-soft: rgba(210, 163, 58, .16); --aiexec-dark: #0b1015; --aiexec-dark-2: #10161c; --aiexec-dark-3: #162028; --aiexec-dark-text: #eef3f6; --aiexec-header-bg: rgba(15, 20, 25, .82); --aiexec-card-bg: rgba(20, 27, 34, .9); --aiexec-shadow-sm: 0 1px 2px rgba(0, 0, 0, .2); --aiexec-shadow-md: 0 18px 50px rgba(0, 0, 0, .28); --aiexec-shadow-lg: 0 30px 100px rgba(0, 0, 0, .36); --aiexec-quote-grad: linear-gradient(180deg, #121920 0%, #0e1419 100%); } /* When dark mode is active, remap the WP preset custom properties so every block styled through theme.json follows. Inactive until data-theme="dark" is set on . */ [data-theme="dark"] body { --wp--preset--color--base: #0f1419; --wp--preset--color--contrast: #e8eef2; --wp--preset--color--deep-ink: #0b1015; --wp--preset--color--accent: #d2a33a; --wp--preset--color--meta: #a6b1bb; --wp--preset--color--surface-1: #141b22; --wp--preset--color--surface-2: #1b242d; --wp--preset--color--surface-3: #24303b; --wp--preset--color--line: #2a3640; --wp--preset--color--gold-strong: #f0ca75; --wp--preset--color--primary: #a8821f; background: var(--aiexec-bg); color: var(--aiexec-ink); } :root { --aiexec-radius-sm: .45rem; --aiexec-radius-md: .8rem; --aiexec-radius-lg: 1.1rem; --aiexec-radius-xl: 1.6rem; --aiexec-radius-full: 9999px; --aiexec-content: 1220px; --aiexec-transition: 180ms cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ BASE ============================================================ */ body { background: linear-gradient(180deg, color-mix(in srgb, var(--aiexec-bg) 90%, white 10%) 0%, var(--aiexec-bg) 44%, color-mix(in srgb, var(--aiexec-bg) 94%, black 6%) 100%); transition: background var(--aiexec-transition), color var(--aiexec-transition); } .aiexec-inline-link, .entry-content a:not(.wp-block-button__link):not(.wp-element-button) { color: var(--aiexec-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--aiexec-gold) 50%, transparent); text-underline-offset: .18em; transition: color var(--aiexec-transition), text-decoration-color var(--aiexec-transition); } .aiexec-inline-link:hover, .entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover { color: var(--aiexec-gold-strong); text-decoration-color: var(--aiexec-gold-strong); } /* Eyebrow label */ .kft-eyebrow, .is-style-text-mono.kft-eyebrow { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); letter-spacing: .18em; text-transform: uppercase; color: var(--aiexec-muted); font-weight: 400; } /* ============================================================ HEADER — sticky masthead with blur ============================================================ */ header.site-header { position: sticky; top: 0; z-index: 90; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: var(--aiexec-header-bg); border-bottom: 1px solid color-mix(in srgb, var(--aiexec-ink) 8%, transparent); transition: background var(--aiexec-transition), border-color var(--aiexec-transition); } /* While the mobile overlay menu is open, the header must not carry a backdrop-filter: a filtered ancestor becomes the containing block for position:fixed, which clips the overlay to the header box. */ header.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--aiexec-surface); } .site-brand { gap: 12px; flex-shrink: 0; } .site-brand .wp-block-site-logo img { width: 44px; height: 44px; object-fit: contain; } .site-brand .wp-block-site-title { margin: 0; line-height: 1; white-space: nowrap; } .site-brand .wp-block-site-title a { text-decoration: none; transition: color var(--aiexec-transition); } .site-brand .wp-block-site-title a:hover { color: var(--aiexec-gold-strong); } .site-nav .wp-block-navigation-item__content { color: var(--aiexec-muted); transition: color var(--aiexec-transition); text-decoration: none; padding-top: 6px; padding-bottom: 6px; white-space: nowrap; } /* Keep the desktop nav on one row; below the breakpoint the navigation block switches to its overlay menu anyway. */ .site-nav .wp-block-navigation__container { flex-wrap: nowrap; } .site-nav__cta .wp-block-button__link { white-space: nowrap; } .site-nav .wp-block-navigation-item__content:hover, .site-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content { color: var(--aiexec-ink); } .site-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content { font-weight: 600; } /* EN link — plain link to duoclarity.com, visually a quiet pill */ .site-nav__lang a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: .35rem .9rem; border-radius: var(--aiexec-radius-full); border: 1px solid color-mix(in srgb, var(--aiexec-ink) 10%, transparent); background: color-mix(in srgb, var(--aiexec-surface) 76%, transparent); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .06em; color: var(--aiexec-muted); text-decoration: none !important; transition: color var(--aiexec-transition), border-color var(--aiexec-transition); } .site-nav__lang a:hover { color: var(--aiexec-ink); border-color: color-mix(in srgb, var(--aiexec-gold) 50%, transparent); } /* Theme toggle — round button, sun/moon icon injected by JS. Hidden until JS runs (useless without it). */ .theme-toggle { display: none; width: 40px; height: 40px; border-radius: 999px; background: color-mix(in srgb, var(--aiexec-surface) 76%, transparent); border: 1px solid color-mix(in srgb, var(--aiexec-ink) 10%, transparent); place-items: center; color: var(--aiexec-ink); cursor: pointer; padding: 0; transition: border-color var(--aiexec-transition), background var(--aiexec-transition); } html.js .theme-toggle { display: grid; } .theme-toggle:hover { border-color: color-mix(in srgb, var(--aiexec-gold) 50%, transparent); } .theme-toggle svg { display: block; } /* ---- Mobile nav: hamburger + overlay, reference nav-toggle styling ---- */ /* Open (hamburger) and close buttons as round gold-soft buttons. Appearance only: display and positioning stay WP's, so the hamburger hides on desktop and the overlay geometry keeps the close clear. */ .site-nav .wp-block-navigation__responsive-container-open, .site-nav .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; border-radius: 999px; background: var(--aiexec-gold-soft); border: 1px solid color-mix(in srgb, var(--aiexec-gold) 40%, transparent); align-items: center; justify-content: center; color: var(--aiexec-ink); padding: 0; transition: border-color var(--aiexec-transition), background var(--aiexec-transition); } .site-nav .wp-block-navigation__responsive-container-open:hover, .site-nav .wp-block-navigation__responsive-container-close:hover { border-color: var(--aiexec-gold); background: color-mix(in srgb, var(--aiexec-gold) 18%, var(--aiexec-surface)); } /* Three-line hamburger icon (WP's default SVG has two lines). Drawn with a middle bar plus box-shadow bars above and below. */ .site-nav .wp-block-navigation__responsive-container-open svg { display: none; } .site-nav .wp-block-navigation__responsive-container-open::before { content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } /* Center the X inside the close circle (the button is not flex by default) */ .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex; } .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { display: block; } /* Overlay panel */ .site-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--aiexec-surface); } .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch; width: 100%; gap: 4px; } .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; } .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 14px 16px; border-radius: var(--aiexec-radius-md); font-size: var(--wp--preset--font-size--large); font-weight: 600; color: var(--aiexec-ink); border-bottom: 1px solid var(--aiexec-line); border-radius: 0; } .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content { border-bottom: none; } .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .site-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content { background: var(--aiexec-gold-soft); color: var(--aiexec-ink); } /* ============================================================ BUTTONS ============================================================ */ .wp-block-button__link, .wp-element-button { border-radius: var(--aiexec-radius-full); min-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; transition: background-color var(--aiexec-transition), color var(--aiexec-transition), border-color var(--aiexec-transition), transform var(--aiexec-transition); } .wp-block-button:not(.is-style-gold):not(.is-style-secondary) .wp-block-button__link:hover { transform: translateY(-1px); } /* Gold CTA */ .wp-block-button.is-style-gold .wp-block-button__link { background: var(--aiexec-gold); color: #1a1208; } .wp-block-button.is-style-gold .wp-block-button__link:hover { background: var(--aiexec-gold-strong); color: #ffffff; transform: translateY(-1px); } /* Secondary */ .wp-block-button.is-style-secondary .wp-block-button__link { background: color-mix(in srgb, var(--aiexec-surface) 76%, transparent); color: var(--aiexec-ink); border: 1px solid color-mix(in srgb, var(--aiexec-ink) 12%, transparent); } .wp-block-button.is-style-secondary .wp-block-button__link:hover { border-color: color-mix(in srgb, var(--aiexec-gold) 50%, transparent); } /* Secondary on a dark band */ .is-style-dark-band .wp-block-button.is-style-secondary .wp-block-button__link { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: var(--aiexec-dark-text); } /* ============================================================ HERO ============================================================ */ .kft-hero { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(3rem, 6vw, 5rem); } .kft-hero__tag { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; } .kft-hero__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--aiexec-gold); } .kft-hero h1 { font-weight: 700; line-height: .96; letter-spacing: -.045em; max-width: 20ch; } .kft-hero h1 em { font-style: normal; color: var(--aiexec-gold-strong); } .kft-hero__sub { margin-top: 1.5rem; font-size: var(--wp--preset--font-size--large); color: var(--aiexec-muted); line-height: 1.5; max-width: 56ch; } .kft-hero__sub strong { color: var(--aiexec-ink); font-weight: 600; } .kft-hero__actions { margin-top: 2.5rem; gap: 1.5rem; } .kft-hero__note { font-size: var(--wp--preset--font-size--x-small); color: var(--aiexec-faint); font-weight: 600; letter-spacing: .02em; max-width: 36ch; line-height: 1.5; margin: 0; } .kft-hero__note strong { color: var(--aiexec-gold-strong); font-weight: 700; } /* ============================================================ SECTIONS ============================================================ */ .kft-section { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); } .kft-section-head { margin-bottom: 2.5rem; } .kft-section-head h2 { line-height: .98; letter-spacing: -.045em; } .kft-section-head p { color: var(--aiexec-muted); max-width: 58ch; } /* ============================================================ CARDS ============================================================ */ .is-style-card { border: 1px solid color-mix(in srgb, var(--aiexec-ink) 8%, transparent) !important; border-radius: var(--aiexec-radius-xl); background: var(--aiexec-card-bg); box-shadow: var(--aiexec-shadow-sm); transition: background var(--aiexec-transition), border-color var(--aiexec-transition), transform var(--aiexec-transition); } .is-style-card.kft-card-hover:hover { transform: translateY(-2px); } /* Top gold gradient edge for case/insight-type cards */ .kft-card-edge { position: relative; overflow: hidden; } .kft-card-edge::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--aiexec-gold), transparent 85%); } /* Short gold line accent. The !important margins defeat the constrained layout's auto-centering. */ .wp-block-separator.is-style-gold-line { border: 0; width: 68px; max-width: 68px; height: 2px; background: var(--aiexec-gold); border-radius: 999px; opacity: 1; margin-left: 0 !important; margin-right: auto !important; margin-bottom: 1rem; } /* Tag pill */ .kft-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: var(--aiexec-radius-full); background: var(--aiexec-gold-soft); color: var(--aiexec-gold-strong); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; width: fit-content; } /* Metric box (aside stack next to offers) */ .kft-metric-box { padding: 1.25rem; border-radius: var(--aiexec-radius-lg); background: linear-gradient(180deg, var(--aiexec-surface-2), color-mix(in srgb, var(--aiexec-surface) 70%, var(--aiexec-surface-2) 30%)); border: 1px solid color-mix(in srgb, var(--aiexec-ink) 6%, transparent); } .kft-metric-box strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--aiexec-ink); margin-bottom: .5rem; } /* Service row (compact offer list) */ .kft-service-row { padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--aiexec-line); } .kft-service-row:last-child { border-bottom: none; } .kft-service-row h3 { margin-bottom: .2rem; } .kft-service-row p { color: var(--aiexec-muted); } /* ============================================================ DARK BAND ============================================================ */ .is-style-dark-band { background: var(--aiexec-quote-grad) !important; color: var(--aiexec-dark-text); } .is-style-dark-band h1, .is-style-dark-band h2, .is-style-dark-band h3 { color: var(--aiexec-dark-text); } .is-style-dark-band p { color: rgba(238, 243, 246, .76); } .is-style-dark-band .kft-eyebrow { color: rgba(238, 243, 246, .76); } /* Brand-line callout inside or outside dark bands */ .kft-brand-line { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.4rem, 0.95rem + 1.6vw, 2.2rem); line-height: 1.18; letter-spacing: -.025em; border-left: 3px solid var(--aiexec-gold); padding: .75rem 1.5rem; max-width: 34ch; color: var(--aiexec-ink); } .kft-brand-line em { font-style: normal; color: var(--aiexec-gold-strong); } .is-style-dark-band .kft-brand-line { color: var(--aiexec-dark-text); border-left-color: var(--aiexec-gold-strong); } /* Operator-proof strip */ .kft-operator-proof { padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid var(--aiexec-line); border-bottom: 1px solid var(--aiexec-line); } .kft-operator-proof p { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); line-height: 1.35; letter-spacing: -.015em; max-width: 80ch; color: var(--aiexec-ink); } /* Method grid (4 steps) */ .kft-method-grid { border-top: 2px solid var(--aiexec-ink); margin-top: 1rem; gap: 0; } .kft-method-step { padding: 1.5rem 1.25rem 0 0; border-right: 1px solid var(--aiexec-line); } .kft-method-step:last-child { border-right: none; padding-right: 0; } .kft-method-n { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .1em; color: var(--aiexec-gold-strong); margin-bottom: 1rem; } .kft-method-step h3 { margin-bottom: .75rem; } .kft-method-step p { color: var(--aiexec-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.55; } /* ============================================================ FORMS — intake and registration surfaces ============================================================ */ .kft-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .kft-form textarea, .kft-form select { width: 100%; padding: .85rem 1rem; border-radius: var(--aiexec-radius-md); border: 1px solid var(--aiexec-line); background: var(--aiexec-surface); color: var(--aiexec-ink); font: inherit; transition: border-color var(--aiexec-transition); } .kft-form input:focus, .kft-form textarea:focus, .kft-form select:focus { outline: none; border-color: var(--aiexec-gold); box-shadow: 0 0 0 3px var(--aiexec-gold-soft); } .kft-form label { font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: .1em; color: var(--aiexec-muted); font-weight: 600; } /* ============================================================ FOOTER ============================================================ */ footer.site-footer { padding-top: 2.5rem; padding-bottom: 2.5rem; border-top: 1px solid color-mix(in srgb, var(--aiexec-ink) 8%, transparent); } .site-footer h4 { font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: .12em; color: var(--aiexec-muted); margin-bottom: .75rem; font-weight: 600; font-family: var(--wp--preset--font-family--body); } .site-footer .kft-footer-links a { font-size: var(--wp--preset--font-size--small); color: var(--aiexec-ink); text-decoration: none; transition: color var(--aiexec-transition); } .site-footer .kft-footer-links a:hover { color: var(--aiexec-gold-strong); } .site-footer .kft-footer-links ul { margin: 0; padding: 0; list-style: none; } .site-footer .kft-footer-links .wp-block-navigation-item__content { padding: 0; } .kft-footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--aiexec-line); font-size: var(--wp--preset--font-size--small); color: var(--aiexec-muted); } .kft-footer-bottom p { margin: 0; color: var(--aiexec-muted); } /* ============================================================ EDITORIAL — single article and blog archive ============================================================ */ .kft-single__hero { position: relative; overflow: hidden; background: radial-gradient(circle at 88% 12%, var(--aiexec-gold-soft), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--aiexec-surface) 78%, transparent), transparent); border-bottom: 1px solid var(--aiexec-line); } .kft-single__hero::after { content: ""; position: absolute; right: clamp(1.5rem, 6vw, 7rem); bottom: -5.5rem; width: clamp(9rem, 18vw, 15rem); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--aiexec-gold) 26%, transparent); border-radius: 50%; pointer-events: none; } .kft-single__hero-inner { position: relative; z-index: 1; } .kft-single__meta, .kft-blog-card__meta { gap: .65rem 1rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--aiexec-muted); } .kft-single__meta a, .kft-blog-card__meta a { color: var(--aiexec-gold-strong); text-decoration: none; } .kft-single__meta a:hover, .kft-blog-card__meta a:hover { text-decoration: underline; text-underline-offset: .18em; } .kft-single__meta .wp-block-post-date::before, .kft-blog-card__meta .wp-block-post-date::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 1rem; vertical-align: middle; border-radius: 50%; background: var(--aiexec-gold); } .kft-single__title { max-width: 18ch; margin-top: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: clamp(1.8rem, 4vw, 3rem); font-size: clamp(2.75rem, 6.4vw, 6.25rem); line-height: .95; letter-spacing: -.055em; text-wrap: balance; } .kft-single__content { font-size: clamp(1.05rem, .98rem + .25vw, 1.2rem); line-height: 1.75; } .kft-single__content > :first-child { margin-top: 0; } .kft-single__content > p:first-child { font-size: clamp(1.25rem, 1.08rem + .55vw, 1.55rem); line-height: 1.58; letter-spacing: -.015em; color: var(--aiexec-ink); } .kft-single__content h2 { position: relative; margin-top: clamp(3.5rem, 8vw, 6rem); margin-bottom: 1.4rem; padding-top: 1.25rem; font-size: clamp(2rem, 1.45rem + 2vw, 3.25rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; } .kft-single__content h2::before { content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 2px; border-radius: 99px; background: var(--aiexec-gold); } .kft-single__content h3 { margin-top: 2.75rem; margin-bottom: 1rem; font-size: clamp(1.35rem, 1.18rem + .65vw, 1.75rem); } .kft-single__content p, .kft-single__content ul, .kft-single__content ol { color: color-mix(in srgb, var(--aiexec-ink) 88%, var(--aiexec-muted)); } .kft-single__content li + li { margin-top: .65rem; } .kft-single__content blockquote { margin: clamp(2.5rem, 6vw, 4rem) 0; padding: .5rem 0 .5rem clamp(1.25rem, 3vw, 2rem); border-left: 3px solid var(--aiexec-gold); font-size: clamp(1.25rem, 1.05rem + .75vw, 1.7rem); line-height: 1.45; letter-spacing: -.02em; } .kft-single__content code { padding: .12em .35em; border: 1px solid var(--aiexec-line); border-radius: var(--aiexec-radius-sm); background: var(--aiexec-surface-2); font-family: var(--wp--preset--font-family--mono); font-size: .9em; } .kft-single__nav { align-items: stretch; gap: 1rem; margin-top: clamp(4rem, 8vw, 6rem); padding-top: 2rem; border-top: 1px solid var(--aiexec-line); } .kft-single__nav .wp-block-post-navigation-link { max-width: 46%; } .kft-single__nav a { display: block; color: var(--aiexec-ink); font-weight: 650; line-height: 1.35; text-decoration-color: color-mix(in srgb, var(--aiexec-gold) 45%, transparent); text-underline-offset: .2em; } .kft-single__nav .post-navigation-link__label { display: block; margin-bottom: .45rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--aiexec-muted); } .kft-blog-index__head { margin-bottom: clamp(3rem, 7vw, 5.5rem); } .kft-blog-index__head h1 { max-width: 12ch; margin-top: .65rem; margin-bottom: 1.75rem; } .kft-blog-index__query { max-width: var(--aiexec-content); } .kft-blog-list { margin: 0; padding: 0; } .kft-blog-card { position: relative; display: grid; grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); padding: clamp(2rem, 5vw, 3.75rem) 0; border-top: 1px solid var(--aiexec-line); } .kft-blog-card:last-child { border-bottom: 1px solid var(--aiexec-line); } .kft-blog-card::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--aiexec-gold); transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1); } .kft-blog-card:hover::before { width: 100%; } .kft-blog-card__meta { align-content: flex-start; align-items: flex-start; flex-direction: column; } .kft-blog-card__meta .wp-block-post-date::before { display: none; } .kft-blog-card__body { width: 100%; } .kft-blog-card__body .wp-block-post-title { margin: 0; font-size: clamp(1.85rem, 1.35rem + 1.65vw, 3.1rem); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; } .kft-blog-card__body .wp-block-post-title a { color: var(--aiexec-ink); text-decoration: none; } .kft-blog-card__body .wp-block-post-title a:hover { color: var(--aiexec-gold-strong); } .kft-blog-card__body .wp-block-post-excerpt { max-width: 66ch; margin-top: 1.25rem; color: var(--aiexec-muted); } .kft-blog-card__body .wp-block-post-excerpt__more-link { display: inline-flex; align-items: center; margin-top: 1rem; color: var(--aiexec-ink); font-size: var(--wp--preset--font-size--small); font-weight: 700; text-decoration-color: var(--aiexec-gold); text-underline-offset: .24em; } .kft-blog-card__body .wp-block-post-excerpt__more-link::after { content: "\2192"; margin-left: .5rem; color: var(--aiexec-gold-strong); } .kft-blog-pagination { margin-top: 2.5rem; padding-top: 1.5rem; } .kft-blog-pagination a { color: var(--aiexec-ink); font-weight: 650; } /* ============================================================ REVEAL — progressive enhancement, JS adds the classes ============================================================ */ .js-reveal .kft-reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s cubic-bezier(0.16, 1, 0.3, 1), transform .75s cubic-bezier(0.16, 1, 0.3, 1); } .js-reveal .kft-reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ RESPONSIVE ============================================================ */ /* Guard against any stray horizontal overflow */ body { overflow-x: clip; } @media (max-width: 1024px) { .kft-method-grid { border-top: none; } .kft-method-step { border-right: none; border-top: 1px solid var(--aiexec-line); padding: 1.25rem 0 0; } /* Header: let the masthead row and the nav cluster wrap instead of overflowing. Below 600px the navigation block switches to its overlay (hamburger) menu on top of this. */ header.site-header > .wp-block-group { flex-wrap: wrap !important; row-gap: 10px; } .site-nav { flex-wrap: wrap !important; justify-content: flex-end; row-gap: 10px; } .site-nav .wp-block-navigation__container { flex-wrap: wrap; } .site-nav__cta .wp-block-button__link { min-height: 40px; padding-top: 0.6rem; padding-bottom: 0.6rem; } } @media (max-width: 700px) { .kft-single__hero::after { right: -3rem; opacity: .7; } .kft-single__title { font-size: clamp(2.55rem, 12vw, 4.2rem); } .kft-single__meta .wp-block-post-date::before { margin-right: .65rem; } .kft-single__nav { flex-direction: column; } .kft-single__nav .wp-block-post-navigation-link { max-width: 100%; } .kft-single__nav .wp-block-post-navigation-link:last-child { text-align: left; } .kft-blog-card { grid-template-columns: 1fr; gap: 1.25rem; } .kft-blog-card__meta { flex-direction: row; } .kft-blog-card__meta .wp-block-post-date::before { display: inline-block; margin-right: .65rem; } .kft-blog-pagination { gap: 1rem; } } @media (prefers-reduced-motion: reduce) { .js-reveal .kft-reveal, .js-reveal .kft-reveal.is-visible { opacity: 1; transform: none; transition: none; } }