/* Theme Name: Astra Child Template: astra Version: 2.0.0 */ /* ------------------------------------------------- Tokens ------------------------------------------------- */ :root{ /* Typography */ --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Khanya core */ --kh-black: #0B0B0D; --kh-white: #F7F7F5; --kh-red: #ff0000; --kh-green: #007A3D; --kh-gold: #FCD116; --kh-gold-deep: #8F6A00; --kh-charcoal: #1A1A1E; --kh-grey: #B7B7B7; /* Semantic helpers (Khanya color concept) */ --cta: var(--kh-red); --activism: var(--kh-green); --thread: var(--kh-gold); --thread-soft: rgba(252, 209, 22, 0.55); --border-strong: rgba(11, 11, 13, 0.26); /* Nova brand helpers */ --nova-accent: #00E5FF; /* matches Nova light concept */ --nova-accent-text: #03707C; --nova-accent-hover: #33EAFF; --nova-accent-active: #00CEE6; /* Layout */ --kh-page-max: 1220px; --kh-gutter: clamp(18px, 4vw, 72px); --kh-radius: 999px; --kh-radius-lg: 22px; --kh-border: rgba(11, 11, 13, 0.18); /* Default theme = Khanya (light surface) */ --bg: #F7F7F5; --surface-1: #FFFFFF; --surface-2: #EEF0F7; --border: var(--kh-border); --text: #0B0B0D; --text-muted: rgba(11, 11, 13, 0.72); --text-faint: rgba(11, 11, 13, 0.55); --accent-ui: var(--kh-red); --accent-ui-hover: #ff3333; --accent-ui-active: #d10a0a; --accent-text: var(--kh-red); --accent-text-hover: #d10a0a; --focus-ring: rgba(252, 209, 22, 0.75); /* Status */ --success-solid: #22C55E; --warning-solid: #F59E0B; --error-solid: #F43F5E; --info-solid: #3B82F6; } /* Nova light theme concept (exact variables you provided) */ :root[data-theme="light"]{ /* Neutrals */ --bg: #F7F8FC; --surface-1: #FFFFFF; --surface-2: #EEF0F7; --border: #D8DCEB; /* Text */ --text: #0B0D17; --text-muted: #4B5368; --text-faint: #66708A; /* Brand / Interaction */ --accent-ui: #00E5FF; --accent-ui-hover: #33EAFF; --accent-ui-active: #00CEE6; --accent-text: #03707C; --accent-text-hover: #024C55; --secondary: #7C3AED; /* Focus */ --focus-ring: rgba(0, 229, 255, 0.35); /* Status (Light) */ --success-solid: #22C55E; --success-text: #15803D; --success-bg: #F0FDF4; --warning-solid: #F59E0B; --warning-text: #B45309; --warning-bg: #FFFBEB; --error-solid: #F43F5E; --error-text: #BE123C; --error-bg: #FFF1F2; --info-solid: #3B82F6; --info-text: #1D4ED8; --info-bg: #EFF6FF; } /* ------------------------------------------------- Base ------------------------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; } body{ font-family: var(--font-mono); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } img{ max-width: 100%; height: auto; } a{ color: inherit; text-decoration: none; } a:hover{ text-decoration: none; } :focus-visible{ outline: 3px solid var(--focus-ring); outline-offset: 3px; } /* Ensure WordPress block buttons never get underlines */ .wp-block-button__link, .wp-element-button{ text-decoration: none !important; } /* ------------------------------------------------- Theme switching helpers (class can be on or ) ------------------------------------------------- */ .kh-theme-nova .kh-logo-link--khanya, .kh-theme-nova .kh-nav--khanya{ display: none !important; } .kh-theme-khanya .kh-logo-link--nova, .kh-theme-khanya .kh-nav--nova{ display: none !important; } /* ------------------------------------------------- Header ------------------------------------------------- */ .kh-header{ width: 100%; background: transparent; padding: 22px 0 14px; border-bottom: 1px solid var(--border); position: relative; z-index: 1000; /* keep nav clickable above any overlapping content */ } .kh-header-inner{ width: 100%; max-width: var(--kh-page-max); margin: 0 auto; padding: 0 var(--kh-gutter); display: flex; flex-direction: column; align-items: center; gap: 14px; } .kh-brand{ width: 100%; display: flex; justify-content: center; } .kh-logo-link{ display: block; } .kh-logo{ /* Base logo sizing: responsive but never absurdly large */ width: 100%; max-width: 560px; margin: 0 auto; } .kh-logo--khanya{ max-width: 280px; /* smaller Khanya mark (was too big) */ } .kh-logo--nova{ max-width: 560px; } .kh-logo img{ display: block; width: 100%; height: auto; } /* Inline SVG inserted by JS */ .kh-logo svg{ display: block; width: 100%; height: auto; overflow: visible; /* lets drips / distortions extend */ } /* Navigation */ .kh-nav{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px; font-size: 20px; line-height: 1.1; letter-spacing: 0.02em; } .kh-nav a{ color: var(--text); padding: 6px 2px; border-bottom: 0 !important; text-decoration: none !important; } .kh-nav a.kh-active{ color: var(--accent-ui); font-weight: 600; } .kh-nav a:hover{ color: var(--accent-ui); } /* Khanya: News uses activism green */ .kh-theme-khanya .kh-nav a[href*="news"]:hover, .kh-theme-khanya .kh-nav a[href*="news"].kh-active{ color: var(--kh-green) !important; } /* Slightly tighter on small screens */ @media (max-width: 520px){ .kh-nav{ gap: 18px; font-size: 18px; } .kh-header{ padding-top: 18px; } .kh-logo--khanya{ max-width: 240px; } .kh-logo--nova{ max-width: 440px; } } /* ------------------------------------------------- Content gutters (fix "too close to left edge") ------------------------------------------------- */ .kh-site-content{ padding: 0 var(--kh-gutter); } .kh-site-content > .site-main, .kh-site-content > main, .kh-site-content .kh-page-inner{ max-width: var(--kh-page-max); margin: 0 auto; } /* In case some templates render directly into .entry-content */ .entry-content{ max-width: var(--kh-page-max); margin: 0 auto; } /* ------------------------------------------------- Typography ------------------------------------------------- */ h1, h2, h3, h4, h5, h6{ font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; } .kh-theme-khanya h1, .kh-theme-khanya .entry-title{ color: var(--kh-red) !important; } .kh-theme-nova h1, .kh-theme-nova h2, .kh-theme-nova h3, .kh-theme-nova .entry-title, .kh-theme-nova .wp-block-heading{ color: var(--accent-text) !important; } /* Paragraphs */ p{ line-height: 1.55; color: var(--text); } /* Links in content */ .kh-theme-nova .entry-content a{ color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .kh-theme-nova .entry-content a:hover{ color: var(--accent-text-hover); } .kh-theme-khanya .entry-content a:not(.kh-btn):not(.wp-block-button__link):not(.wp-element-button){ color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(252, 209, 22, 0); transition: border-color .2s ease, transform .2s ease, opacity .2s ease, color .2s ease; } .kh-theme-khanya .entry-content a:not(.kh-btn):not(.wp-block-button__link):not(.wp-element-button):hover{ border-bottom-color: rgba(252, 209, 22, 0.95); color: var(--text); } /* ------------------------------------------------- Home hero (Khanya) ------------------------------------------------- */ .kh-hero{ padding: clamp(26px, 5vw, 54px) 0 24px; } .kh-hero-title{ max-width: 26ch; margin: 0; font-size: clamp(34px, 5.2vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; color: var(--kh-red); } .kh-theme-nova .kh-hero-title{ color: var(--accent-text); } .kh-hero-actions{ margin-top: clamp(18px, 3.2vw, 28px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; } .kh-hero-btns{ display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } /* Split hero row: Marketplace | ESC thumb | Urgent/Buy/Nova */ .kh-hero-actions--split{ flex-wrap: nowrap; align-items: center; } .kh-hero-left, .kh-hero-center, .kh-hero-right{ display: flex; align-items: center; } .kh-hero-right{ gap: 18px; flex-wrap: wrap; justify-content: flex-end; } .kh-hero-center{ justify-content: center; min-width: 140px; } @media (max-width: 760px){ .kh-hero-actions--split{ flex-wrap: wrap; justify-content: center; } .kh-hero-center{ width: 100%; order: 3; margin-top: 18px; } .kh-hero-right{ justify-content: center; } } /* Slightly larger buttons in hero rows */ .kh-hero .kh-btn, .kh-hero .wp-block-button__link, .kh-hero .wp-element-button{ padding: 16px 22px; font-size: 20px; } @media (max-width: 760px){ .kh-hero-actions{ flex-direction: column; align-items: center; } } /* ------------------------------------------------- Buttons (fix distortion + ensure consistent look) ------------------------------------------------- */ .kh-btn, .wp-block-button__link, .wp-element-button, a.button, .ast-button, button, input[type="button"], input[type="submit"]{ font-family: var(--font-mono) !important; } .kh-btn, .wp-block-button__link, .wp-element-button, a.button, .ast-button{ display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border-radius: var(--kh-radius) !important; border: 2px solid var(--text) !important; background: transparent; color: var(--text) !important; line-height: 1 !important; white-space: nowrap; text-decoration: none !important; cursor: pointer; transform: translateZ(0); } .kh-btn:hover, .wp-block-button__link:hover, .wp-element-button:hover, a.button:hover, .ast-button:hover{ border-color: var(--accent-ui) !important; color: var(--accent-ui) !important; } /* Khanya: gold thread hover for outline buttons (except filled variants) */ .kh-theme-khanya .kh-btn:hover:not(.kh-btn--urgent):not(.kh-btn--nova), .kh-theme-khanya .wp-block-button__link:hover:not(.kh-btn--urgent):not(.kh-btn--nova), .kh-theme-khanya .wp-element-button:hover:not(.kh-btn--urgent):not(.kh-btn--nova), .kh-theme-khanya a.button:hover, .kh-theme-khanya .ast-button:hover{ border-color: var(--thread-soft) !important; color: var(--text) !important; } /* Nova: buttons are filled accent by default */ .kh-theme-nova .wp-block-button__link, .kh-theme-nova .wp-element-button, .kh-theme-nova .kh-btn{ background: var(--accent-ui) !important; border-color: var(--accent-ui) !important; color: var(--text) !important; } .kh-theme-nova .wp-block-button__link:hover, .kh-theme-nova .wp-element-button:hover, .kh-theme-nova .kh-btn:hover{ background: var(--accent-ui-hover) !important; border-color: var(--accent-ui-hover) !important; color: var(--text) !important; } /* Specific hero button variants (set by hero-buttons.js) */ .kh-btn--urgent, .wp-block-button__link.kh-btn--urgent{ background: var(--kh-red) !important; border-color: var(--kh-red) !important; color: var(--kh-white) !important; border-radius: var(--kh-radius) !important; } .kh-btn--urgent:hover{ filter: brightness(1.1); color: var(--kh-white) !important; } .kh-btn--nova, .wp-block-button__link.kh-btn--nova{ /* Nova button should always match the Nova logo color (cyan), even on Khanya pages */ background: var(--nova-accent) !important; border-color: var(--nova-accent) !important; color: var(--kh-black) !important; border-radius: var(--kh-radius) !important; } .kh-btn--nova:hover{ background: var(--nova-accent-hover) !important; border-color: var(--nova-accent-hover) !important; color: var(--kh-black) !important; } /* Gutenberg sometimes styles a wrapper block (Group/Column) as the "button". hero-buttons.js adds .kh-btn-shell so we can force pills instead of squares. */ .kh-btn-shell{ border-radius: var(--kh-radius) !important; overflow: hidden !important; } .kh-btn-shell.kh-btn--urgent{ background: var(--kh-red) !important; border: 2px solid var(--kh-red) !important; color: var(--kh-white) !important; } .kh-btn-shell.kh-btn--nova{ background: var(--nova-accent) !important; border: 2px solid var(--nova-accent) !important; color: var(--kh-black) !important; } .kh-btn-shell.kh-btn--urgent a, .kh-btn-shell.kh-btn--urgent .kh-btn{ color: var(--kh-white) !important; } .kh-btn-shell.kh-btn--nova a, .kh-btn-shell.kh-btn--nova .kh-btn{ color: var(--kh-black) !important; } /* Backwards compatible button class aliases */ .kh-btn-urgent{ background: var(--kh-red) !important; border-color: var(--kh-red) !important; color: var(--kh-white) !important; } .kh-btn-nova{ background: var(--nova-accent) !important; border-color: var(--nova-accent) !important; color: var(--kh-black) !important; } /* ------------------------------------------------- ESC thumbnails ------------------------------------------------- */ #escGallery{ display: none !important; } /* Default slot: inline (hero center). */ .kh-esc-thumb-slot{ width: 140px; display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0; padding: 0; opacity: 0; max-height: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, max-height .18s ease; } /* Fallback: if the slot is mounted *below* the hero buttons, make it full-width. */ .kh-esc-thumb-slot--below{ width: 100%; flex-basis: 100%; order: 999; align-items: center; } .kh-esc-thumb-slot.is-visible{ margin-top: 0; opacity: 1; max-height: 160px; transform: translateY(0); pointer-events: auto; } /* Between Marketplace and Urgent: 200px lower than the button baseline */ .kh-esc-thumb-slot--between.is-visible{ transform: translateY(200px); } .kh-esc-thumb-slot--below.is-visible{ margin-top: 20px; } .kh-esc-thumb-slot img{ width: auto; height: auto; max-height: 82px; max-width: 140px; object-fit: contain; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* ------------------------------------------------- Urgent stage (bigger and readable) ------------------------------------------------- */ .kh-urgent-stage{ width: 100%; height: min(72vh, 880px); min-height: 520px; border: 2px solid var(--border); border-radius: var(--kh-radius-lg); overflow: hidden; background: var(--surface-1); } .kh-urgent-canvas{ width: 100%; height: 100%; display: block; } /* ------------------------------------------------- About bubbles ------------------------------------------------- */ .about-animation-area, .kh-about-animation, #about-animation, [data-about-animation], .cv-animation-area, #cv-animation, [data-cv-animation], .punkt-animation-area, #punkt-animation, [data-punkt-animation]{ position: relative; width: 100%; min-height: 340px; border-radius: var(--kh-radius-lg); overflow: hidden; background: transparent; } .about-bubble{ position: absolute; border-radius: 999px !important; /* never squares */ -webkit-clip-path: circle(49% at 50% 50%); clip-path: circle(49% at 50% 50%); background: var(--accent-ui); opacity: 0.20; transform: translate(-50%, -50%); will-change: transform, opacity; } /* Safety net: if an old script still inserts square elements (punkte/dots), force them to circles */ .about-animation-area .punkt, .about-animation-area .punkte, .about-animation-area .dot, .about-animation-area .bubble, .about-animation-area .shape, .kh-about-animation .punkt, .kh-about-animation .punkte, .kh-about-animation .dot, .kh-about-animation .bubble, .kh-about-animation .shape, #about-animation .punkt, #about-animation .punkte, #about-animation .dot, #about-animation .bubble, #about-animation .shape, [data-about-animation] .punkt, [data-about-animation] .punkte, [data-about-animation] .dot, [data-about-animation] .bubble, [data-about-animation] .shape, .cv-animation-area .punkt, .cv-animation-area .punkte, .cv-animation-area .dot, .cv-animation-area .bubble, .cv-animation-area .shape, #cv-animation .punkt, #cv-animation .punkte, #cv-animation .dot, #cv-animation .bubble, #cv-animation .shape, [data-cv-animation] .punkt, [data-cv-animation] .punkte, [data-cv-animation] .dot, [data-cv-animation] .bubble, [data-cv-animation] .shape, .punkt-animation-area .punkt, .punkt-animation-area .punkte, .punkt-animation-area .dot, .punkt-animation-area .bubble, .punkt-animation-area .shape, #punkt-animation .punkt, #punkt-animation .punkte, #punkt-animation .dot, #punkt-animation .bubble, #punkt-animation .shape, [data-punkt-animation] .punkt, [data-punkt-animation] .punkte, [data-punkt-animation] .dot, [data-punkt-animation] .bubble, [data-punkt-animation] .shape{ border-radius: 999px !important; -webkit-clip-path: circle(49% at 50% 50%); clip-path: circle(49% at 50% 50%); } .custom-centered-text{ position: relative; z-index: 2; font-size: clamp(18px, 2.2vw, 32px); line-height: 1.25; text-align: center; color: var(--text); padding: 22px; } /* ------------------------------------------------- Fixes (Nova block colors + Urgent full-bleed + hidden SVG holder) ------------------------------------------------- */ /* Some blocks carry explicit color classes (WP core + Astra global). In Nova scope we force headings back to Nova tokens. */ .kh-theme-nova .entry-content .has-vivid-red-color, .kh-theme-nova .entry-content .has-ast-global-color-0, .kh-theme-nova .entry-content .has-ast-global-color-1{ color: var(--accent-text) !important; } .kh-theme-nova .entry-content .has-vivid-red-background-color, .kh-theme-nova .entry-content .has-ast-global-color-0-background-color, .kh-theme-nova .entry-content .has-ast-global-color-1-background-color{ background-color: var(--accent-ui) !important; } /* Hidden SVG holder for urgent animation (must be in DOM for getBBox). */ .kh-urgent-svg-source{ position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } /* Urgent: full-bleed stage (no container radius/background). */ html{ height: 100%; } /* Urgent: full-screen canvas, but header/navigation stay visible */ body.kh-page-urgent{ height: 100%; overflow: hidden; background: #fff; } /* Keep header above the canvas */ body.kh-page-urgent .kh-header, body.kh-page-urgent header#masthead, body.kh-page-urgent .site-header, body.kh-page-urgent .ast-primary-header-bar, body.kh-page-urgent .ast-mobile-header-wrap{ position: relative; z-index: 20; } /* Avoid footer jumping into view (canvas is fixed) */ body.kh-page-urgent .ast-footer-wrap, body.kh-page-urgent footer{ display: none !important; } /* Make sure no white site containers cover the fixed canvas */ body.kh-page-urgent .site, body.kh-page-urgent #page, body.kh-page-urgent .kh-site-content, body.kh-page-urgent #content, body.kh-page-urgent main, body.kh-page-urgent .site-main{ background: transparent !important; } /* Full-bleed stage behind the header */ body.kh-page-urgent .kh-urgent-stage{ position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; z-index: 0; } body.kh-page-urgent .kh-urgent-canvas{ width: 100%; height: 100%; display: block; } .kh-theme-nova{ --bg:#F7F8FC; --text:#0B0D17; --muted:#4B5368; --line:rgba(11,13,23,.12); --accent:#00E5FF; } .kh-theme-nova{ background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; } .kh-theme-nova .nova-page{ max-width:1100px; margin:0 auto; padding:120px 24px; } .kh-theme-nova .nova-kicker{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.6; } .kh-theme-nova .nova-h1{ font-size:clamp(48px,6vw,90px); line-height:1.05; letter-spacing:-.02em; margin:24px 0; } .kh-theme-nova .nova-subline{ font-size:18px; opacity:.7; margin-bottom:40px; } .kh-theme-nova .nova-h2{ font-size:28px; margin:120px 0 24px; } .kh-theme-nova .nova-module-title{ font-size:22px; margin:60px 0 12px; } .kh-theme-nova .nova-module-text{ max-width:60ch; opacity:.75; padding-bottom:32px; border-bottom:1px solid var(--line); } .kh-theme-nova .nova-work-link{ display:block; font-size:20px; margin:18px 0; text-decoration:none; color:var(--text); } .kh-theme-nova .nova-work-link:hover{ color:#03707C; } .kh-theme-nova .nova-btn-primary .wp-block-button__link{ background:var(--accent); border-radius:999px; padding:14px 28px; font-weight:600; } .kh-theme-nova .nova-btn-secondary .wp-block-button__link{ background:transparent; border:1px solid var(--line); border-radius:999px; padding:14px 28px; } .kh-theme-nova .nova-accordion{ border-bottom:1px solid var(--line); padding:18px 0; } .kh-theme-nova .nova-accordion summary{ cursor:pointer; font-weight:600; } .kh-theme-nova .nova-accordion div{ margin-top:12px; opacity:.75; } .kh-theme-nova{ --bg:#F7F8FC; --text:#0B0D17; --muted:#4B5368; --line:rgba(11,13,23,.08); --accent:#03707C; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; } .kh-theme-nova .nova-page{ max-width:980px; margin:0 auto; padding:140px 28px; } .kh-theme-nova .nova-kicker{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:32px; } .kh-theme-nova .nova-hero-title{ font-size:clamp(52px,7vw,96px); line-height:1.05; margin-bottom:28px; } .kh-theme-nova .nova-hero-sub{ font-size:20px; color:var(--muted); margin-bottom:48px; } .kh-theme-nova .nova-section-title{ font-size:28px; margin:120px 0 40px; } .kh-theme-nova .nova-module{ padding:40px 0; border-bottom:1px solid var(--line); line-height:1.7; } .kh-theme-nova .nova-project{ margin:60px 0; line-height:1.6; } .kh-theme-nova .nova-link-primary, .kh-theme-nova .nova-link-subtle{ text-decoration:none; font-weight:600; color:var(--accent); display:inline-block; margin-top:18px; } .kh-theme-nova .nova-link-primary:hover, .kh-theme-nova .nova-link-subtle:hover{ opacity:.7; }