/* ============================================================ Direction A — homepage / marketing section design. Classes here are attached to core blocks inside /patterns/*.php. ============================================================ */ :root{ --k-plum:#70215c; --k-plum-deep:#4a1338; --k-plum-700:#5a1a4a; --k-gold:#f3c41a; --k-gold-deep:#d8aa00; --k-ink:#1E262A; --k-body:#5b5560; --k-muted:#8a8593; --k-line:#ececf0; --k-bg:#fff; --k-bg-soft:#faf7fb; --k-bg-soft2:#f5eef4; --k-radius:16px; --k-shadow:0 1px 2px rgba(30,38,42,.04),0 12px 32px -12px rgba(112,33,92,.16); --k-shadow-sm:0 1px 2px rgba(30,38,42,.05),0 6px 16px -8px rgba(112,33,92,.12); --k-maxw:1160px; } /* ---------- Header: keep logo + nav on one row (fix mid-width wrap) ---------- */ .saaslauncher-header > .wp-block-group{ flex-wrap:nowrap !important; align-items:center !important; gap:24px; } /* let the nav cluster take the space it needs, logo stays compact */ .saaslauncher-header > .wp-block-group > .wp-block-group:first-child{ flex:0 0 auto !important; } .saaslauncher-header > .wp-block-group > .wp-block-group:last-child{ flex:1 1 auto !important; justify-content:flex-end !important; } .saaslauncher-header .wp-block-image{ margin:0 !important; } /* Pill buttons in header + footer (override inline/blockstyle radii) */ .saaslauncher-header .wp-block-button__link, .saaslauncher-header .wp-element-button, .saaslauncher-footer .wp-block-button__link, .saaslauncher-footer .wp-element-button{ border-radius:999px !important; white-space:nowrap; width:auto !important; padding-left:1.3rem !important; padding-right:1.3rem !important; } .saaslauncher-footer .wp-block-buttons{ flex-wrap:nowrap !important; } .saaslauncher-footer .wp-block-button{ width:auto !important; } /* ---------- Footer: brand + CTA band, trust row, polished columns ---------- */ .kelma-foot-cta{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:36px; margin:0 0 30px !important; border-bottom:1px solid rgba(255,255,255,.12); } .kelma-foot-cta .kfc-eyebrow{ margin:0 0 8px; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--k-gold) !important; } .kelma-foot-cta .kfc-title{ margin:0; font-family:'Funnel Display','Cairo',sans-serif; font-size:clamp(1.5rem,3vw,2rem); line-height:1.2; color:#fff !important; } .kelma-foot-cta .kfc-sub{ margin:.7rem 0 0; max-width:46ch; color:rgba(255,255,255,.78) !important; font-size:.98rem; line-height:1.6; } .kelma-foot-cta .kfc-actions{ display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; } .kelma-foot-cta .kfc-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.5rem; border-radius:999px; font-weight:700; font-size:.95rem; text-decoration:none !important; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap; } .kelma-foot-cta .kfc-btn-gold{ background:var(--k-gold); color:var(--k-ink) !important; box-shadow:0 8px 22px rgba(243,196,26,.28); } .kelma-foot-cta .kfc-btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(243,196,26,.4); } .kelma-foot-cta .kfc-btn-ghost{ background:rgba(255,255,255,.08); color:#fff !important; border:1px solid rgba(255,255,255,.28); } .kelma-foot-cta .kfc-btn-ghost:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); } .kelma-foot-trust{ display:flex; flex-wrap:wrap; gap:12px 28px; margin:0 0 46px !important; padding:0; border:0; } .kelma-foot-trust span{ display:inline-flex; align-items:center; gap:7px; font-size:.9rem; color:rgba(255,255,255,.72); } .kelma-foot-trust span::before{ content:"✓"; color:var(--k-gold); font-weight:800; } .kelma-foot-trust b{ color:#fff; font-weight:700; } /* Column headings + links */ .saaslauncher-footer h3{ font-size:.82rem !important; font-weight:700 !important; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55) !important; margin-bottom:.2rem; } .saaslauncher-footer-list a{ transition:color .15s ease, padding-inline-start .15s ease; } .saaslauncher-footer-list a:hover{ color:var(--k-gold) !important; } /* Social icons → subtle rounded tiles */ .saaslauncher-footer .wp-block-social-link{ background:rgba(255,255,255,.08) !important; border-radius:10px !important; transition:background .15s ease, transform .15s ease; } .saaslauncher-footer .wp-block-social-link:hover{ background:rgba(255,255,255,.2) !important; transform:translateY(-2px); } [dir="rtl"] .kelma-foot-cta{ text-align:right; } @media(max-width:720px){ .kelma-foot-cta{ flex-direction:column; align-items:flex-start; } } /* ---------- Nav dropdown (submenu) — Direction A card ---------- */ .saaslauncher-header .wp-block-navigation__submenu-container{ grid-template-columns:1fr !important; min-width:250px; padding:10px !important; gap:2px !important; margin-top:16px !important; background:rgba(255,255,255,.98) !important; border:1px solid var(--k-line) !important; border-radius:16px !important; box-shadow:0 14px 44px -14px rgba(112,33,92,.30), 0 2px 8px rgba(30,38,42,.06) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); overflow:visible; animation:kelmaDrop .2s cubic-bezier(.2,.7,.3,1) both; } @keyframes kelmaDrop{ from{ opacity:0; transform:translateY(-8px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } } /* invisible bridge so the cursor can cross the gap without the menu closing */ .saaslauncher-header .wp-block-navigation__submenu-container::before{ content:""; position:absolute; top:-18px; left:0; right:0; height:18px; } /* pointer arrow */ .saaslauncher-header .wp-block-navigation__submenu-container::after{ content:""; position:absolute; top:-7px; left:26px; width:13px; height:13px; background:rgba(255,255,255,.98); border-left:1px solid var(--k-line); border-top:1px solid var(--k-line); transform:rotate(45deg); border-top-left-radius:4px; } [dir="rtl"] .saaslauncher-header .wp-block-navigation__submenu-container::after{ left:auto; right:26px; } .saaslauncher-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .saaslauncher-header .wp-block-navigation__submenu-container a{ border-bottom:0 !important; padding:10px 13px !important; border-radius:10px; font-size:.92rem; font-weight:500; color:var(--k-ink) !important; transition:background .15s ease,color .15s ease,padding-left .15s ease; } .saaslauncher-header .wp-block-navigation__submenu-container li:hover > a, .saaslauncher-header .wp-block-navigation__submenu-container a:hover{ background:var(--k-bg-soft) !important; color:var(--k-plum) !important; padding-left:17px !important; } [dir="rtl"] .saaslauncher-header .wp-block-navigation__submenu-container li:hover > a, [dir="rtl"] .saaslauncher-header .wp-block-navigation__submenu-container a:hover{ padding-left:13px !important; padding-right:17px !important; } /* no underline-animation bar inside dropdowns */ .saaslauncher-header .wp-block-navigation__submenu-container a::after{ content:none !important; } .saaslauncher-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container{ top:100%; } /* ---------- Buttons (Direction A pills) ---------- */ /* Consistent pill rounding across ALL buttons/CTAs (overrides stray inline radii). */ .wp-block-button__link, .wp-element-button, a.wp-block-button__link{ border-radius:999px !important; } .kelma-btn .wp-block-button__link, a.kelma-btn{ border-radius:999px !important; padding:.85rem 1.4rem; font-weight:600; font-size:.97rem; line-height:1; transition:all .2s ease; border:1px solid transparent; display:inline-flex; align-items:center; gap:.5rem; } .kelma-btn-gold .wp-block-button__link{ background:var(--k-gold) !important; color:#2a2208 !important; box-shadow:0 8px 20px -8px rgba(243,196,26,.7); } .kelma-btn-gold .wp-block-button__link:hover{ background:var(--k-gold-deep) !important; transform:translateY(-1px); } .kelma-btn-primary .wp-block-button__link{ background:var(--k-plum) !important; color:#fff !important; box-shadow:0 8px 20px -8px rgba(112,33,92,.6); } .kelma-btn-primary .wp-block-button__link:hover{ background:var(--k-plum-700) !important; transform:translateY(-1px); } .kelma-btn-ghost .wp-block-button__link{ background:transparent !important; color:var(--k-ink) !important; border-color:var(--k-line) !important; } .kelma-btn-ghost .wp-block-button__link:hover{ color:var(--k-plum) !important; border-color:var(--k-plum) !important; } .kelma-btn-light .wp-block-button__link{ background:rgba(255,255,255,.12) !important; color:#fff !important; border-color:rgba(255,255,255,.25) !important; } .kelma-btn-light .wp-block-button__link:hover{ background:rgba(255,255,255,.22) !important; } /* ---------- Section scaffolding ---------- */ .kelma-section{ padding:96px 0; } .kelma-eyebrow{ font-family:Inter,sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:600; color:var(--k-plum); } .kelma-sec-head{ max-width:640px; margin:0 auto 56px; text-align:center; } .kelma-grad{ background:linear-gradient(92deg,var(--k-plum),#a23a86); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Homepage: let the transparent header sit OVER the hero (no reserved white strip). Header is 75px and has no background until scroll adds .kelma-header-shadow. */ body.home main{ margin-top:-75px; } body.home .kelma-hero{ padding-top:118px !important; } /* ---------- Hero ---------- */ .kelma-hero{ position:relative; overflow:hidden; background:radial-gradient(900px 520px at 82% -8%, #fbf2f8 0%, rgba(251,242,248,0) 60%), radial-gradient(700px 480px at 8% 110%, #faf7fb 0%, rgba(250,247,251,0) 55%), #fff; } .kelma-badge{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--k-line); border-radius:999px; padding:.4rem .85rem; font-size:.85rem; font-weight:500; color:var(--k-body); box-shadow:var(--k-shadow-sm); } .kelma-badge .k-dot{ width:7px; height:7px; border-radius:50%; background:var(--k-gold); display:inline-block; } .kelma-lede{ font-size:1.16rem; color:var(--k-body); max-width:34ch; } .kelma-hero-note{ font-size:.88rem; color:var(--k-muted); } .kelma-hero-note b{ color:var(--k-ink); } /* hero visual + speedcard */ .kelma-hero-visual{ position:relative; } .kelma-speedcard{ background:#fff; border:1px solid var(--k-line); border-radius:22px; box-shadow:var(--k-shadow); padding:26px; } .kelma-sc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .kelma-sc-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#e7e1e6; margin-right:6px; } .kelma-sc-pill{ background:#e6f6ee; color:#1c7d52; font-size:.78rem; font-weight:600; padding:.25rem .7rem; border-radius:999px; } .kelma-gauge .k-num{ font-family:'Funnel Display',sans-serif; font-weight:800; font-size:3.4rem; color:var(--k-plum); line-height:1; } .kelma-gauge .k-unit{ font-weight:700; font-size:1.1rem; color:var(--k-plum); } .kelma-gauge-label{ color:var(--k-muted); font-size:.85rem; margin-top:.2rem; } .kelma-bars{ display:flex; align-items:flex-end; gap:8px; height:84px; margin-top:18px; } .kelma-bars span{ flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#f0d9e8,#e9c4dd); } .kelma-bars span.hi{ background:linear-gradient(180deg,var(--k-plum),#9a3a80); } .kelma-bars span.gold{ background:linear-gradient(180deg,var(--k-gold),var(--k-gold-deep)); } .kelma-float-chip{ position:absolute; background:#fff; border:1px solid var(--k-line); border-radius:14px; padding:.6rem .85rem; box-shadow:var(--k-shadow); display:flex; align-items:center; gap:.5rem; font-size:.84rem; font-weight:600; color:var(--k-ink); z-index:3; } .kelma-float-chip .k-ic{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; font-size:.9rem; } .kelma-fc-1{ top:-22px; left:-26px; } .kelma-fc-1 .k-ic{ background:var(--k-plum); } .kelma-fc-2{ bottom:-20px; right:-22px; } .kelma-fc-2 .k-ic{ background:var(--k-gold); color:#2a2208; } /* ---------- Ripple motif (must sit BEHIND content) ---------- */ .kelma-hero, .kelma-cta-band{ isolation:isolate; } .kelma-ripple{ position:absolute; pointer-events:none; z-index:0; } .kelma-ripple circle{ fill:none; stroke:#e7cadd; stroke-width:1.2; } /* lift the real content above the ripples */ .kelma-hero > .wp-block-columns{ position:relative; z-index:1; } .kelma-cta-band > :where(.wp-block-heading, .wp-block-paragraph, .wp-block-buttons){ position:relative; z-index:1; } /* ---------- Horizontal gutters (fixes content touching screen edges on mobile) ---------- Selectors are doubled (.wp-block-group.kelma-*) so they out-specify WordPress's `.has-global-padding{ padding-left:var(--wp--style--root--padding-left) }` rule, whose root-padding var is undefined (theme.json styles.spacing is empty) and would otherwise zero our gutters. Inline padding on individual sections (archive/cta) still wins. */ .wp-block-group.kelma-hero, .wp-block-group.kelma-section, .wp-block-group.kelma-stats, .wp-block-group.kelma-logos, .wp-block-group.kelma-cta-band{ padding-inline:clamp(20px, 5vw, 28px); } /* ---------- SEO landing hero (two-column + mockup) ---------- */ .kelma-hero.kelma-seo{ background:radial-gradient(820px 480px at 86% -8%, #f6e3ef 0%, rgba(246,227,239,0) 60%), radial-gradient(640px 440px at 4% 112%, #f7eef5 0%, rgba(247,238,245,0) 55%), #fff; } .kelma-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; position:relative; z-index:1; } .kelma-hero-grid .kelma-lede{ max-width:46ch; } .kelma-sc-foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--k-line); font-size:.82rem; color:var(--k-muted); } @media (max-width:920px){ .kelma-hero-grid{ grid-template-columns:1fr; gap:34px; } .kelma-hero.kelma-seo .kelma-hero-visual{ max-width:440px; } } /* ---------- Stat strip ---------- */ .kelma-stats{ border-top:1px solid var(--k-line); background:#fff; } .kelma-stat .k-v{ font-family:'Funnel Display',sans-serif; font-weight:800; font-size:2rem; color:var(--k-ink); } .kelma-stat .k-v em{ color:var(--k-plum); font-style:normal; } .kelma-stat .k-k{ color:var(--k-muted); font-size:.9rem; margin-top:.15rem; } /* ---------- Logo strip ---------- */ .kelma-logos{ background:var(--k-bg-soft); border-top:1px solid var(--k-line); border-bottom:1px solid var(--k-line); } .kelma-logos .k-lbl{ font-size:.82rem; font-weight:600; color:var(--k-muted); letter-spacing:.04em; text-transform:uppercase; } .kelma-stack{ display:flex; align-items:center; justify-content:center; gap:38px; flex-wrap:wrap; } .kelma-stack .k-ic{ display:inline-flex; align-items:center; } .kelma-stack .k-ic img{ height:26px; width:auto; display:block; filter:grayscale(1); opacity:.5; transition:filter .2s ease, opacity .2s ease, transform .2s ease; } .kelma-stack .k-ic:hover img{ filter:none; opacity:1; transform:translateY(-2px); } /* ---------- Feature cards (elevated) ---------- */ .kelma-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .kelma-card{ position:relative; background:#fff; border:1px solid var(--k-line); border-radius:18px; padding:32px 30px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; overflow:hidden; } .kelma-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--k-plum),#a23a86); opacity:0; transition:opacity .22s ease; } .kelma-card:hover{ transform:translateY(-4px); box-shadow:0 1px 2px rgba(30,38,42,.04),0 22px 48px -20px rgba(112,33,92,.28); border-color:#ecd9e6; } .kelma-card:hover::before{ opacity:1; } .kelma-card .k-ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:20px; font-size:1.4rem; background:linear-gradient(135deg,#fbeef6,#f4e0ee); color:var(--k-plum); box-shadow:inset 0 0 0 1px rgba(112,33,92,.06); transition:transform .22s ease; } .kelma-card:hover .k-ic{ transform:scale(1.06) rotate(-3deg); } .kelma-card.gold .k-ic{ background:linear-gradient(135deg,#fef6d6,#fcebac); color:#9a7a00; box-shadow:inset 0 0 0 1px rgba(216,170,0,.12); } .kelma-card.gold::before{ background:linear-gradient(90deg,var(--k-gold),var(--k-gold-deep)); } .kelma-card h3{ font-size:1.12rem; margin:0 0 .5rem; } .kelma-card p{ color:var(--k-body); line-height:1.65; margin:0; font-size:.96rem; } /* ---------- Section rhythm + variety ---------- */ .kelma-section + .kelma-section{ padding-top:0; } .kelma-section.kelma-tint{ background:var(--k-bg-soft); border-block:1px solid var(--k-line); } .kelma-section.kelma-tint2{ background:linear-gradient(180deg,#fff, var(--k-bg-soft2)); } .kelma-sec-head{ max-width:660px; } .kelma-sec-head h2{ margin:.4rem 0 0; } /* soft decorative ring behind section heads */ .kelma-section.kelma-deco{ position:relative; overflow:hidden; } .kelma-section.kelma-deco::after{ content:""; position:absolute; top:-180px; right:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle at center, rgba(112,33,92,.05), rgba(112,33,92,0) 70%); pointer-events:none; } /* ---------- Spotlight (alternating image/text) ---------- */ .kelma-spotlight{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; max-width:1160px; margin:0 auto; } .kelma-spotlight.rev .kelma-spot-media{ order:2; } .kelma-spot-media{ border-radius:20px; overflow:hidden; border:1px solid var(--k-line); box-shadow:var(--k-shadow); background:var(--k-bg-soft); aspect-ratio:4/3; } .kelma-spot-media img{ width:100%; height:100%; object-fit:cover; display:block; } .kelma-spot-body .k-list{ list-style:none; padding:0; margin:1.2rem 0 0; display:flex; flex-direction:column; gap:.7rem; } .kelma-spot-body .k-list li{ padding-left:1.8rem; position:relative; color:var(--k-body); } .kelma-spot-body .k-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:#1c7d52; font-weight:800; } [dir="rtl"] .kelma-spot-body .k-list li{ padding-left:0; padding-right:1.8rem; } [dir="rtl"] .kelma-spot-body .k-list li::before{ left:auto; right:0; } @media (max-width:920px){ .kelma-spotlight{ grid-template-columns:1fr; gap:28px; } .kelma-spotlight.rev .kelma-spot-media{ order:0; } } /* ---------- Reusable browser/site mockup ---------- */ .kelma-browser{ background:#fff; border:1px solid var(--k-line); border-radius:16px; box-shadow:var(--k-shadow); overflow:hidden; } .kelma-browser .bw-bar{ display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--k-line); background:var(--k-bg-soft); } .kelma-browser .bw-dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; } .kelma-browser .bw-dot.r{ background:#ff5f57 } .kelma-browser .bw-dot.y{ background:#febc2e } .kelma-browser .bw-dot.g{ background:#28c840 } .kelma-browser .bw-url{ flex:1; background:#fff; border:1px solid var(--k-line); border-radius:999px; padding:6px 14px; font-size:.78rem; color:var(--k-muted); margin-inline-start:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kelma-browser .bw-body{ padding:22px; } .kelma-browser .bw-badge{ display:inline-flex; align-items:center; gap:8px; background:#e6f6ee; color:#1c7d52; font-weight:700; border-radius:999px; padding:.4rem .9rem; font-size:.84rem; } .kelma-browser .bw-hero{ height:104px; border-radius:12px; background:linear-gradient(135deg,#fbeef6,#f3dcec); margin-top:16px; position:relative; overflow:hidden; } .kelma-browser .bw-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(140px 90px at 80% -10%, rgba(243,196,26,.35), transparent 70%); } .kelma-browser .bw-line{ height:11px; border-radius:6px; background:var(--k-bg-soft2); margin-top:13px; } .kelma-browser .bw-line.w1{ width:92% } .kelma-browser .bw-line.w2{ width:68% } .kelma-browser .bw-line.w3{ width:80% } .kelma-browser .bw-row{ display:flex; gap:12px; margin-top:16px; } .kelma-browser .bw-tile{ flex:1; height:58px; border-radius:10px; background:var(--k-bg-soft); border:1px solid var(--k-line); } .kelma-browser .bw-tile.p{ background:linear-gradient(135deg,#fbeef6,#f4e0ee) } /* ---------- Dashboard mockup (Kelma Panel) ---------- */ .kelma-dash{ background:#fff; border:1px solid var(--k-line); border-radius:16px; box-shadow:var(--k-shadow); overflow:hidden; display:grid; grid-template-columns:60px 1fr; } .kelma-dash .kd-side{ background:linear-gradient(180deg,#70215c,#4a1338); padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:14px; } .kelma-dash .kd-ic{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.16); } .kelma-dash .kd-ic.on{ background:var(--k-gold); } .kelma-dash .kd-main{ padding:18px; } .kelma-dash .kd-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; } .kelma-dash .kd-pill{ height:14px; width:120px; border-radius:7px; background:var(--k-bg-soft2); } .kelma-dash .kd-btn{ height:28px; width:90px; border-radius:999px; background:var(--k-plum); } .kelma-dash .kd-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .kelma-dash .kd-card{ border:1px solid var(--k-line); border-radius:12px; padding:14px; background:var(--k-bg-soft); } .kelma-dash .kd-card .kd-num{ font-family:'Funnel Display',sans-serif; font-weight:800; color:var(--k-plum); font-size:1.4rem; line-height:1; } .kelma-dash .kd-card .kd-lbl{ height:8px; width:72%; border-radius:4px; background:#e7dfe9; margin-top:9px; } .kelma-dash .kd-rows{ margin-top:16px; display:flex; flex-direction:column; gap:10px; } .kelma-dash .kd-row{ height:12px; border-radius:6px; background:var(--k-bg-soft2); } .kelma-dash .kd-row.w1{ width:92% } .kelma-dash .kd-row.w2{ width:74% } @media (max-width:920px){ .kelma-dash{ grid-template-columns:50px 1fr; } } /* ---------- WAF / security mockup ---------- */ .kelma-waf{ background:#fff; border:1px solid var(--k-line); border-radius:16px; box-shadow:var(--k-shadow); overflow:hidden; } .kelma-waf .wf-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--k-line); background:var(--k-bg-soft); font-weight:700; color:var(--k-ink); font-size:.9rem; } .kelma-waf .wf-head .wf-shield{ color:var(--k-plum); } .kelma-waf .wf-body{ padding:16px 18px; display:flex; flex-direction:column; gap:11px; } .kelma-waf .wf-row{ display:flex; align-items:center; gap:12px; } .kelma-waf .wf-tag{ font-size:.68rem; font-weight:800; border-radius:6px; padding:3px 8px; flex:0 0 auto; letter-spacing:.03em; } .kelma-waf .wf-tag.block{ background:#fde8e8; color:#c0392b; } .kelma-waf .wf-tag.pass{ background:#e6f6ee; color:#1c7d52; } .kelma-waf .wf-line{ height:9px; border-radius:5px; background:var(--k-bg-soft2); flex:1; } /* ---------- Uptime mockup ---------- */ .kelma-uptime{ background:#fff; border:1px solid var(--k-line); border-radius:16px; box-shadow:var(--k-shadow); padding:26px; } .kelma-uptime .up-num{ font-family:'Funnel Display',sans-serif; font-weight:800; color:var(--k-plum); font-size:2.7rem; line-height:1; } .kelma-uptime .up-lbl{ color:var(--k-muted); font-size:.85rem; margin-top:5px; } .kelma-uptime .up-bars{ display:flex; gap:4px; margin-top:20px; height:64px; align-items:flex-end; } .kelma-uptime .up-bars span{ flex:1; background:#28c840; border-radius:3px 3px 0 0; height:100%; opacity:.85; } .kelma-uptime .up-bars span.dip{ background:#febc2e; height:68%; } /* ---------- Migration mockup ---------- */ .kelma-migrate{ background:#fff; border:1px solid var(--k-line); border-radius:16px; box-shadow:var(--k-shadow); padding:34px 26px; display:flex; align-items:center; justify-content:center; gap:18px; } .kelma-migrate .mg-box{ width:118px; height:118px; border-radius:16px; border:1px solid var(--k-line); background:var(--k-bg-soft); display:grid; place-items:center; font-size:2rem; color:var(--k-muted); position:relative; } .kelma-migrate .mg-box.k{ background:linear-gradient(135deg,#70215c,#4a1338); color:#fff; border-color:transparent; } .kelma-migrate .mg-box .mg-ck{ position:absolute; bottom:-8px; right:-8px; width:26px; height:26px; border-radius:50%; background:#28c840; color:#fff; display:grid; place-items:center; font-size:.85rem; } .kelma-migrate .mg-arrow{ font-size:1.7rem; color:var(--k-plum); } [dir="rtl"] .kelma-migrate .mg-arrow{ transform:scaleX(-1); } /* ---------- Testimonials ---------- */ .kelma-tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .kelma-quote{ background:#fff; border:1px solid var(--k-line); border-radius:var(--k-radius); padding:28px; } .kelma-quote .k-stars{ color:var(--k-gold); letter-spacing:2px; } .kelma-who{ display:flex; align-items:center; gap:.7rem; margin-top:1.2rem; } .kelma-who .k-av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:.9rem; background:linear-gradient(135deg,var(--k-plum),#a23a86); } .kelma-who .k-verified{ font-size:.82rem; font-weight:600; color:#1c7d52; } /* ---------- CTA band ---------- */ .kelma-cta-band{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--k-plum-deep),var(--k-plum)); color:#fff; } .kelma-cta-band :is(h1,h2,h3){ color:#fff; } /* ============================================================ Landing-page CONTENT polish — global styling for the blocks the 310 SEO/marketing pages are built from (Cozy accordions, icon cards, tables). Improves every page at once without touching content. ============================================================ */ /* Cozy accordions → Direction A cards */ .cozy-accordion-wrapper{ display:flex; flex-direction:column; gap:14px; } .cozy-block-accordion-item{ border:1px solid #e7dfe9 !important; border-radius:14px !important; padding:0 !important; background:#fff !important; overflow:hidden; box-shadow:0 1px 2px rgba(30,38,42,.04); transition:box-shadow .2s ease, border-color .2s ease; } .cozy-block-accordion-item:hover{ box-shadow:var(--k-shadow-sm); border-color:#dcc6d6 !important; } .cozy-block-accordion-item > header, .cozy-block-accordion-item .cozy-accordion-wrapper{ padding:0 !important; margin:0 !important; } .cozy-accordion-title{ padding:16px 22px !important; margin:0 !important; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; } /* the heading inside the accordion title was inheriting full theme h-styles */ .cozy-accordion-title :is(h2,h3,h4,h5,h6), .cozy-accordion-title :is(h2,h3,h4,h5,h6) strong{ margin:0 !important; padding:0 !important; font-family:'Funnel Display','Cairo',sans-serif !important; font-size:1.02rem !important; line-height:1.45 !important; font-weight:600 !important; color:var(--k-ink) !important; letter-spacing:0 !important; } .cozy-accordion-content{ padding:0 24px 22px !important; color:var(--k-body) !important; line-height:1.75; } .cozy-block-accordion .accordion-icon-wrapper{ color:var(--k-plum) !important; flex:0 0 auto; } .cozy-block-accordion-item .cozy-accordion-title:hover{ color:var(--k-plum) !important; } /* Static FAQ item (Q+A always shown) — used by SEO landing + core pages. Standalone class so the theme's cozy-accordion padding:0 reset never strips it. */ .kelma-faq-item{ border:1px solid var(--k-line); border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(30,38,42,.04); overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease; } .kelma-faq-item:hover{ border-color:#dcc6d6; } .kelma-faq-item.open{ box-shadow:var(--k-shadow-sm); } .kelma-faq-item h3{ margin:0; padding:16px 22px; font-size:1.04rem; font-weight:600; color:var(--k-ink); line-height:1.45; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:14px; } .kelma-faq-item h3::after{ content:"+"; flex:0 0 auto; color:var(--k-plum); font-size:1.45rem; font-weight:400; line-height:1; } .kelma-faq-item.open h3::after{ content:"\2212"; } .kelma-faq-item p{ margin:0; padding:0 22px; max-height:0; overflow:hidden; color:var(--k-body); line-height:1.7; transition:max-height .28s ease, padding .26s ease; } .kelma-faq-item.open p{ max-height:600px; padding:0 22px 18px; } [dir="rtl"] .kelma-faq-item h3{ text-align:right; } /* Search form → Direction A pill */ .wp-block-search__inside-wrapper{ border:1px solid var(--k-line) !important; border-radius:999px !important; overflow:hidden; padding:5px 6px 5px 20px !important; background:#fff; box-shadow:var(--k-shadow-sm); align-items:center; } .wp-block-search__input{ border:0 !important; background:transparent !important; box-shadow:none !important; font-size:.98rem; } .wp-block-search__button{ border:0 !important; border-radius:999px !important; background:var(--k-plum) !important; color:#fff !important; padding:.6rem 1.2rem !important; font-weight:600; transition:background .2s ease; } .wp-block-search__button:hover{ background:var(--k-plum-700) !important; } [dir="rtl"] .wp-block-search__inside-wrapper{ padding:5px 20px 5px 6px !important; } /* Post / article list cards (query loop) → elevated */ .wp-block-post-template li.wp-block-post, .wp-block-query .wp-block-post{ border-radius:18px; transition:transform .22s ease, box-shadow .22s ease; } .wp-block-post-template li.wp-block-post:hover{ transform:translateY(-3px); } .wp-block-post-template .wp-block-post-featured-image img{ border-radius:14px; } /* Generic content cards (boxshadow groups + Cozy icon-picker tiles) */ .cozy-block-icon-picker svg, .cozy-block-icon-picker img{ } .is-style-saaslauncher-boxshadow, .is-style-saaslauncher-boxshadow-medium{ border-radius:16px !important; } /* Tables (data-centre / comparison tables on landing pages) */ .entry-content table, .wp-block-table table{ border-collapse:separate; border-spacing:0; border:1px solid var(--k-line); border-radius:12px; overflow:hidden; width:100%; } .wp-block-table th{ background:var(--k-bg-soft); color:var(--k-ink); font-weight:700; } .wp-block-table :is(th,td){ padding:12px 14px; border-bottom:1px solid var(--k-line); } /* ---------- Responsive ---------- */ @media (max-width:920px){ .kelma-feat-grid,.kelma-tgrid{ grid-template-columns:1fr 1fr; } .kelma-stats-grid{ grid-template-columns:1fr 1fr !important; } .kelma-section{ padding:64px 0; } } @media (max-width:600px){ .kelma-feat-grid,.kelma-tgrid{ grid-template-columns:1fr; } .kelma-stats-grid{ grid-template-columns:1fr !important; text-align:center; } .kelma-float-chip{ display:none; } } /* ============================================================ Creative mockup library v2 — varied, topic-specific visuals. All pure CSS/HTML, brand palette, drop into .kelma-spot-media or any section. Each is self-contained. ============================================================ */ .kelma-mock{ background:#fff; border:1px solid var(--k-line); border-radius:18px; box-shadow:var(--k-shadow); padding:20px; } .kelma-mock .mk-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; font-weight:700; color:var(--k-ink); font-size:.92rem; } .kelma-mock .mk-live{ display:inline-flex; align-items:center; gap:6px; color:#1c7d52; font-size:.78rem; font-weight:700; } .kelma-mock .mk-live::before{ content:""; width:8px; height:8px; border-radius:50%; background:#28c840; box-shadow:0 0 0 0 rgba(40,200,64,.5); animation:kelmaPulse 1.8s infinite; } @keyframes kelmaPulse{ 0%{box-shadow:0 0 0 0 rgba(40,200,64,.45)} 70%{box-shadow:0 0 0 7px rgba(40,200,64,0)} 100%{box-shadow:0 0 0 0 rgba(40,200,64,0)} } /* 1. Cache hit path — Edge→Redis→OPcache→MySQL */ .kelma-cachestack .cs-layer{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:12px; margin-top:9px; border:1px solid var(--k-line); background:var(--k-bg-soft); color:var(--k-muted); font-size:.86rem; } .kelma-cachestack .cs-layer.on{ border-color:#caa6c2; background:linear-gradient(135deg,#fbeef6,#fff); color:var(--k-ink); font-weight:600; } .kelma-cachestack .cs-layer .cs-ms{ font-variant-numeric:tabular-nums; font-weight:700; } .kelma-cachestack .cs-layer.on .cs-ms{ color:var(--k-plum); } .kelma-cachestack .cs-hit{ background:#e6f6ee; color:#1c7d52; font-weight:800; font-size:.72rem; border-radius:999px; padding:.12rem .5rem; } /* 2. Staging → Production */ .kelma-staging{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; } .kelma-staging .st-env{ border:1px solid var(--k-line); border-radius:14px; padding:12px; background:var(--k-bg-soft); } .kelma-staging .st-env.live{ border-color:#caa6c2; background:linear-gradient(135deg,#fbeef6,#fff); } .kelma-staging .st-tag{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--k-muted); } .kelma-staging .st-env.live .st-tag{ color:var(--k-plum); } .kelma-staging .st-screen{ height:54px; border-radius:8px; margin-top:8px; background:linear-gradient(135deg,#efe6ee,#f7eef5); position:relative; overflow:hidden; } .kelma-staging .st-env.live .st-screen{ background:linear-gradient(135deg,#f3dcec,#fbeef6); } .kelma-staging .st-screen::after{ content:""; position:absolute; left:10px; right:30%; top:12px; height:7px; border-radius:4px; background:rgba(112,33,92,.18); box-shadow:0 14px 0 rgba(112,33,92,.12); } .kelma-staging .st-push{ font-size:.74rem; font-weight:800; color:#fff; background:var(--k-plum); border-radius:999px; padding:.45rem .7rem; white-space:nowrap; box-shadow:var(--k-shadow-sm); } /* 3. Support chat */ .kelma-chat .ch-av{ width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#70215c,#a23b86); display:inline-block; } .kelma-chat .ch-msg{ max-width:82%; padding:10px 14px; border-radius:14px; margin-top:10px; font-size:.86rem; line-height:1.5; } .kelma-chat .ch-msg.in{ background:var(--k-bg-soft); color:var(--k-ink); border-bottom-left-radius:4px; } .kelma-chat .ch-msg.out{ background:linear-gradient(135deg,#70215c,#4a1338); color:#fff; margin-inline-start:auto; border-bottom-right-radius:4px; } .kelma-chat .ch-typing{ display:inline-flex; gap:4px; } .kelma-chat .ch-typing span{ width:7px; height:7px; border-radius:50%; background:#c9b9c5; animation:kelmaType 1.2s infinite; } .kelma-chat .ch-typing span:nth-child(2){ animation-delay:.2s } .kelma-chat .ch-typing span:nth-child(3){ animation-delay:.4s } @keyframes kelmaType{ 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-4px);opacity:1} } /* 4. WooCommerce orders */ .kelma-store .so-row{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--k-line); font-size:.86rem; } .kelma-store .so-row .so-id{ color:var(--k-muted); font-variant-numeric:tabular-nums; } .kelma-store .so-row .so-amt{ font-weight:800; color:var(--k-ink); font-variant-numeric:tabular-nums; } .kelma-store .so-row .so-ok{ font-size:.72rem; font-weight:800; color:#1c7d52; background:#e6f6ee; border-radius:999px; padding:.1rem .5rem; } .kelma-store .so-foot{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--k-line); display:flex; justify-content:space-between; align-items:center; font-size:.9rem; color:var(--k-muted); } .kelma-store .so-foot b{ color:var(--k-plum); font-size:1.2rem; } /* 5. Backup timeline */ .kelma-backup .bk-track{ display:flex; align-items:center; gap:0; margin:18px 0 12px; } .kelma-backup .bk-dot{ flex:1; height:3px; background:var(--k-line); position:relative; } .kelma-backup .bk-dot::after{ content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:11px; height:11px; border-radius:50%; background:#caa6c2; border:2px solid #fff; box-shadow:0 0 0 1px var(--k-line); } .kelma-backup .bk-dot.now::after{ background:var(--k-gold); width:15px; height:15px; right:-7px; box-shadow:0 0 0 4px rgba(243,196,26,.25); } .kelma-backup .bk-restore{ font-size:.74rem; font-weight:800; color:var(--k-plum); border:1px solid #e3cfdd; border-radius:999px; padding:.25rem .7rem; } .kelma-backup .bk-foot{ color:var(--k-muted); font-size:.84rem; } /* 6. Resource gauges */ .kelma-scale{ display:grid; gap:16px; } .kelma-scale .sc-g .sc-top{ display:flex; justify-content:space-between; font-size:.84rem; color:var(--k-ink); font-weight:600; margin-bottom:6px; } .kelma-scale .sc-bar{ height:9px; border-radius:6px; background:var(--k-bg-soft2); overflow:hidden; } .kelma-scale .sc-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#70215c,#f3c41a); width:var(--v,50%); } /* 7. Edge network globe — dotted world-map sphere + pulsing edge nodes */ .kelma-globe{ position:relative; aspect-ratio:1/.86; background:radial-gradient(120% 110% at 50% 120%, #fbeef6, #fff); border-radius:18px; border:1px solid var(--k-line); overflow:hidden; box-shadow:var(--k-shadow); } .kelma-globe::before{ content:""; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 38% 32%, #7d2768, #70215c 52%, #501641 100%); box-shadow:0 18px 44px -10px rgba(112,33,92,.5), inset -8px -10px 26px rgba(0,0,0,.22), inset 7px 9px 22px rgba(255,255,255,.12); z-index:1; } .kelma-globe::after{ content:""; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:80%; aspect-ratio:1; border-radius:50%; z-index:2; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20120%27%3E%3Cg%20fill%3D%27white%27%20fill-opacity%3D%270.55%27%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2716.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2716.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2716.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2716.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2716.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2716.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2735.4%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2739.6%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2743.8%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2748.0%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2752.2%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27127.8%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2720.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2731.2%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2735.4%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2739.6%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2743.8%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2748.0%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2752.2%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27127.8%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2724.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2727.0%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2731.2%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2735.4%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2739.6%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2743.8%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2748.0%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2752.2%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27127.8%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27178.2%27%20cy%3D%2729.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2727.0%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2731.2%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2735.4%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2739.6%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2743.8%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2748.0%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2752.2%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27127.8%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27178.2%27%20cy%3D%2733.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2727.0%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2731.2%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2735.4%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2739.6%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2743.8%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2748.0%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2752.2%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27127.8%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27178.2%27%20cy%3D%2737.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2727.0%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2731.2%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2735.4%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2739.6%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2743.8%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2748.0%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2752.2%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27127.8%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27178.2%27%20cy%3D%2741.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2731.2%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2735.4%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2739.6%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2743.8%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2748.0%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2752.2%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27127.8%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2745.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2739.6%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2743.8%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2748.0%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2752.2%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27127.8%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2750.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27127.8%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27136.2%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2754.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27140.4%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27144.6%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27148.8%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27153.0%27%20cy%3D%2758.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2762.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2773.2%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2766.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2773.2%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2771.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2773.2%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2775.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2773.2%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2777.4%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2794.2%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27123.6%27%20cy%3D%2779.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2773.2%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2777.4%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27119.4%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2783.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2773.2%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2777.4%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2798.4%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27102.6%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27115.2%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27178.2%27%20cy%3D%2787.8%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2756.4%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2773.2%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27106.8%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27111.0%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27178.2%27%20cy%3D%2792.0%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2773.2%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27157.2%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27161.4%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27174.0%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27178.2%27%20cy%3D%2796.2%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2760.6%27%20cy%3D%27100.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2764.8%27%20cy%3D%27100.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2769.0%27%20cy%3D%27100.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27165.6%27%20cy%3D%27100.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27169.8%27%20cy%3D%27100.4%27%20r%3D%271.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/92% no-repeat; } .kelma-globe .gl-ring{ display:none; } .kelma-globe .gl-pin{ position:absolute; width:11px; height:11px; border-radius:50%; background:var(--k-gold); border:2px solid #fff; box-shadow:0 0 0 0 rgba(243,196,26,.6),0 2px 7px rgba(0,0,0,.25); animation:kelmaPulse 2.2s infinite; z-index:3; } .kelma-globe .gl-pin.g{ background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7),0 2px 7px rgba(0,0,0,.25); } .kelma-globe .gl-label{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:4; font-size:.82rem; font-weight:700; color:var(--k-plum); background:#fff; border:1px solid var(--k-line); border-radius:999px; padding:.3rem .8rem; box-shadow:var(--k-shadow-sm); white-space:nowrap; } /* Full-width CTA buttons in CTA bands + hero on request */ .kelma-cta-band .wp-block-buttons{ width:100%; max-width:440px; margin-inline:auto; } .kelma-cta-band .wp-block-buttons .wp-block-button{ width:100%; } .kelma-cta-band .wp-block-buttons .wp-block-button__link{ display:block; width:100%; text-align:center; } /* ============================================================ Creative mockup library v3 — extends to 20+ distinct visuals. ============================================================ */ /* 8. SSL certificate */ .kelma-ssl{ text-align:center; } .kelma-ssl .ssl-lock{ width:56px;height:56px;border-radius:50%;margin:4px auto 12px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(135deg,#e6f6ee,#d6f0e2);color:#1c7d52; } .kelma-ssl .ssl-dom{ font-weight:800;color:var(--k-ink); } .kelma-ssl .ssl-meta{ color:var(--k-muted);font-size:.84rem;margin-top:4px; } .kelma-ssl .ssl-badge{ margin-top:12px;display:inline-flex;gap:6px;align-items:center;background:#e6f6ee;color:#1c7d52;font-weight:700;font-size:.8rem;border-radius:999px;padding:.3rem .8rem; } /* 9. Analytics line chart */ .kelma-analytics .an-top{ display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px; } .kelma-analytics .an-num{ font-size:1.7rem;font-weight:800;color:var(--k-ink);line-height:1; } .kelma-analytics .an-up{ color:#1c7d52;font-weight:700;font-size:.84rem; } .kelma-analytics svg{ width:100%;height:88px;display:block; } .kelma-analytics .an-area{ fill:url(#kelmaAnGrad); } .kelma-analytics .an-line{ fill:none;stroke:var(--k-plum);stroke-width:2.5;stroke-linecap:round; } /* 10. DNS records */ .kelma-dns .dn-row{ display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--k-line);font-size:.84rem; } .kelma-dns .dn-row:first-of-type{ border-top:0; } .kelma-dns .dn-type{ font-weight:800;color:var(--k-plum);font-size:.72rem;background:#fbeef6;border-radius:6px;padding:.15rem 0;text-align:center; } .kelma-dns .dn-val{ color:var(--k-body);font-family:ui-monospace,monospace;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .kelma-dns .dn-ok{ color:#1c7d52;font-weight:700; } /* 11. Transactional inbox */ .kelma-inbox .in-row{ display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--k-line); } .kelma-inbox .in-row:first-of-type{ border-top:0; } .kelma-inbox .in-ic{ width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#fbeef6;flex:0 0 auto; } .kelma-inbox .in-sub{ font-weight:600;color:var(--k-ink);font-size:.86rem; } .kelma-inbox .in-time{ margin-inline-start:auto;color:var(--k-muted);font-size:.76rem; } /* 12. Deploy pipeline */ .kelma-deploy .dp-step{ display:flex;align-items:center;gap:12px;padding:9px 0; } .kelma-deploy .dp-ck{ width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:.8rem;color:#fff;background:#1c7d52; } .kelma-deploy .dp-step.run .dp-ck{ background:var(--k-gold);color:#4a1338; } .kelma-deploy .dp-step.wait .dp-ck{ background:var(--k-bg-soft2);color:var(--k-muted); } .kelma-deploy .dp-lbl{ font-size:.88rem;color:var(--k-ink);font-weight:600; } .kelma-deploy .dp-step.wait .dp-lbl{ color:var(--k-muted);font-weight:500; } /* 13. Score ring (Lighthouse-style, generic) */ .kelma-score{ display:grid;place-items:center;gap:10px; } .kelma-score .sr-ring{ width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--k-gold) calc(var(--p,99)*1%), var(--k-bg-soft2) 0); } .kelma-score .sr-in{ width:100px;height:100px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:2rem;font-weight:800;color:var(--k-plum); } .kelma-score .sr-lbl{ color:var(--k-muted);font-size:.86rem;font-weight:600; } /* 14. Uptime monitor list */ .kelma-monitor .mo-row{ display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--k-line);font-size:.85rem; } .kelma-monitor .mo-row:first-of-type{ border-top:0; } .kelma-monitor .mo-dot{ width:9px;height:9px;border-radius:50%;background:#28c840;flex:0 0 auto; } .kelma-monitor .mo-name{ color:var(--k-ink);font-weight:600; } .kelma-monitor .mo-ms{ margin-inline-start:auto;color:var(--k-muted);font-variant-numeric:tabular-nums; } .kelma-monitor .mo-up{ color:#1c7d52;font-weight:700; } /* 15. Image optimization before/after */ .kelma-imgopt .io-bar{ margin-top:12px; } .kelma-imgopt .io-lbl{ display:flex;justify-content:space-between;font-size:.82rem;color:var(--k-body);margin-bottom:5px; } .kelma-imgopt .io-track{ height:14px;border-radius:7px;background:var(--k-bg-soft2);overflow:hidden; } .kelma-imgopt .io-fill{ height:100%;border-radius:7px; } .kelma-imgopt .io-fill.before{ width:100%;background:#e3cfdd; } .kelma-imgopt .io-fill.after{ width:14%;background:linear-gradient(90deg,#70215c,#f3c41a); } .kelma-imgopt .io-save{ margin-top:12px;text-align:center;font-weight:700;color:#1c7d52;font-size:.86rem; } /* 16. Updates queue */ .kelma-updates .up-row{ display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--k-line);font-size:.85rem; } .kelma-updates .up-row:first-of-type{ border-top:0; } .kelma-updates .up-ic{ width:28px;height:28px;border-radius:7px;background:#fbeef6;display:grid;place-items:center;flex:0 0 auto; } .kelma-updates .up-name{ color:var(--k-ink);font-weight:600; } .kelma-updates .up-auto{ margin-inline-start:auto;font-size:.72rem;font-weight:800;color:#1c7d52;background:#e6f6ee;border-radius:999px;padding:.12rem .5rem; } /* 17. Usage meters */ .kelma-usage{ display:grid;gap:14px; } .kelma-usage .us-row .us-top{ display:flex;justify-content:space-between;font-size:.84rem;color:var(--k-ink);font-weight:600;margin-bottom:6px; } .kelma-usage .us-track{ height:9px;border-radius:6px;background:var(--k-bg-soft2);overflow:hidden; } .kelma-usage .us-fill{ height:100%;border-radius:6px;background:linear-gradient(90deg,#70215c,#a23b86);width:var(--v,50%); } /* shared: tidy mock head live colour already defined; ensure mocks fit media col */ .kelma-spot-media .kelma-mock,.kelma-hero-visual .kelma-mock{ aspect-ratio:auto; } /* ============================================================ Native pricing table (replaces Stripe embed) — both languages ============================================================ */ .kelma-ptoggle-wrap{ display:flex; justify-content:center; margin:6px 0 30px; } .kelma-ptoggle{ display:inline-flex; background:var(--k-bg-soft); border:1px solid var(--k-line); border-radius:999px; padding:5px; gap:4px; } .kelma-ptoggle button{ appearance:none; border:0; background:transparent; color:var(--k-ink); font:inherit; font-weight:600; font-size:.95rem; padding:.5rem 1.4rem; border-radius:999px; cursor:pointer; transition:all .2s ease; } .kelma-ptoggle button.active{ background:var(--k-plum); color:#fff; } .kelma-ptoggle .pt-save{ font-size:.72rem; font-weight:800; color:#1c7d52; margin-inline-start:.4rem; } .kelma-ptoggle button.active .pt-save{ color:#d6f0e2; } .kelma-ptable{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1080px; margin:0 auto; align-items:stretch; } .kelma-ptable[hidden]{ display:none; } .kelma-ptier{ background:#fff; border:1px solid var(--k-line); border-radius:18px; padding:30px 26px; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(30,38,42,.04); } .kelma-ptier.pop{ border:1.5px solid var(--k-gold); box-shadow:var(--k-shadow); position:relative; } .kelma-ptier .pt-pop{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--k-gold); color:#4a1338; font-weight:800; font-size:.72rem; border-radius:999px; padding:.25rem .85rem; white-space:nowrap; } .kelma-ptier h3{ margin:0; font-size:1.25rem; color:var(--k-ink); } .kelma-ptier .pt-desc{ color:var(--k-muted); font-size:.86rem; margin:.35rem 0 1.1rem; min-height:2.4em; } .kelma-ptier .pt-price{ font-size:2.3rem; font-weight:800; color:var(--k-plum); line-height:1; } .kelma-ptier .pt-price small{ font-size:.9rem; font-weight:600; color:var(--k-muted); } .kelma-ptier .pt-bill{ color:var(--k-muted); font-size:.8rem; margin-top:5px; min-height:1.1em; } .kelma-ptier ul{ list-style:none; padding:0; margin:1.3rem 0; display:flex; flex-direction:column; gap:.62rem; flex:1; } .kelma-ptier li{ padding-left:1.6rem; position:relative; color:var(--k-body); font-size:.9rem; line-height:1.5; } .kelma-ptier li::before{ content:"✓"; position:absolute; left:0; top:0; color:#1c7d52; font-weight:800; } [dir="rtl"] .kelma-ptier li{ padding-left:0; padding-right:1.6rem; } [dir="rtl"] .kelma-ptier li::before{ left:auto; right:0; } .kelma-ptier .pt-btn{ display:block; text-align:center; text-decoration:none; font-weight:700; border-radius:999px; padding:.75rem 1rem; transition:transform .15s ease; } .kelma-ptier .pt-btn:hover{ transform:translateY(-1px); } .kelma-ptier .pt-btn.gold{ background:var(--k-gold); color:#4a1338; } .kelma-ptier .pt-btn.ghost{ border:1.5px solid #e3cfdd; color:var(--k-plum); } @media(max-width:860px){ .kelma-ptable{ grid-template-columns:1fr; max-width:420px; } } /* ---------- Legal / documentation prose (page-doc template) ---------- */ .kelma-doc-head{ background:radial-gradient(120% 130% at 50% -30%, #fbeef6, #fff); border-bottom:1px solid var(--k-line); } .kelma-doc-head h1{ font-size:clamp(1.9rem,4vw,2.6rem); margin:.3rem 0 0; } .kelma-doc-sub{ margin:.7rem auto 0; max-width:52ch; color:var(--k-muted); font-size:1.02rem; line-height:1.6; } /* Search no-results state */ .kelma-noresults{ text-align:center; } .kelma-noresults .kelma-nr-emoji{ font-size:2.6rem; margin:0 0 .2rem; } .kelma-noresults h2{ margin:.2rem 0 .6rem; color:var(--k-ink); } .kelma-noresults p{ color:var(--k-body); } /* Plum-fill button (used in no-results, content CTAs) */ .kelma-btn-plum .wp-block-button__link{ background:var(--k-plum) !important; color:#fff !important; box-shadow:0 8px 20px -8px rgba(112,33,92,.6); } .kelma-btn-plum .wp-block-button__link:hover{ background:var(--k-plum-700,#5a1a4a) !important; transform:translateY(-1px); } /* Single-post featured image — tidy hero banner, balanced with the text column */ .kelma-feat-wrap{ max-width:840px !important; margin-inline:auto !important; } .kelma-feat-wrap .wp-block-post-featured-image{ margin:0; max-width:840px; margin-inline:auto; } .kelma-feat-wrap img{ width:100%; height:clamp(200px,26vw,320px) !important; object-fit:cover; border-radius:16px; box-shadow:var(--k-shadow-sm); } /* Inline CTA boxes embedded in blog posts (legacy saaslauncher style) — clean card */ body.single .wp-block-post-content .is-style-saaslauncher-boxshadow-hover{ border:1px solid var(--k-line) !important; border-radius:18px !important; background:linear-gradient(135deg,#fbeef6,#fff) !important; box-shadow:var(--k-shadow-sm) !important; margin:2.4em auto !important; padding:30px 32px !important; max-width:760px !important; } body.single .wp-block-post-content .is-style-saaslauncher-boxshadow-hover .wp-block-columns{ padding:0 !important; gap:20px; align-items:center; } body.single .wp-block-post-content .is-style-saaslauncher-boxshadow-hover :is(h2,h3,h4){ margin-top:0 !important; } body.single .wp-block-post-content .is-style-saaslauncher-boxshadow-hover .wp-block-button__link{ border-radius:999px !important; white-space:nowrap; } .kelma-doc{ font-size:1.02rem; line-height:1.8; color:var(--k-body); } .kelma-doc > *{ margin-top:0; margin-bottom:1.1rem; } .kelma-doc :is(h2,h3,h4){ color:var(--k-ink); line-height:1.35; margin-top:2em; margin-bottom:.6em; font-family:'Funnel Display','Cairo',sans-serif; } .kelma-doc h2{ font-size:1.5rem; } .kelma-doc h3{ font-size:1.22rem; } .kelma-doc h4{ font-size:1.05rem; } .kelma-doc a{ color:var(--k-plum); text-decoration:underline; text-underline-offset:2px; } .kelma-doc ul,.kelma-doc ol{ padding-inline-start:1.4rem; } .kelma-doc li{ margin:.45rem 0; } .kelma-doc strong{ color:var(--k-ink); } .kelma-doc hr{ border:0; border-top:1px solid var(--k-line); margin:2.2rem 0; } .kelma-doc table{ width:100%; border-collapse:collapse; font-size:.95rem; } .kelma-doc :is(th,td){ border:1px solid var(--k-line); padding:.6rem .8rem; text-align:start; } /* Edge locations panel (replaces the globe) — cities + live latency */ .kelma-edge .eg-row{ display:grid; grid-template-columns:84px 1fr auto; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--k-line); font-size:.88rem; } .kelma-edge .eg-row:first-of-type{ border-top:0; } .kelma-edge .eg-city{ color:var(--k-ink); font-weight:600; white-space:nowrap; } .kelma-edge .eg-track{ height:7px; border-radius:5px; background:var(--k-bg-soft2); overflow:hidden; } .kelma-edge .eg-track i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#70215c,#f3c41a); width:var(--w,30%); } .kelma-edge .eg-ms{ color:var(--k-plum); font-weight:700; font-variant-numeric:tabular-nums; } .kelma-edge .eg-foot{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--k-line); color:var(--k-muted); font-size:.82rem; text-align:center; } /* Alexandria map mockup (Our story) */ .kelma-map .mp-frame{ position:relative; height:300px; border-radius:14px; overflow:hidden; border:1px solid var(--k-line); background:#f5efe6; } .kelma-map .mp-frame svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } .kelma-map .mp-pin{ position:absolute; left:49%; top:58%; width:20px; height:20px; transform:translate(-50%,-100%); z-index:3; } .kelma-map .mp-pin .pin-dot{ position:absolute; inset:0; border-radius:50% 50% 50% 0; background:var(--k-plum); transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 5px 12px rgba(112,33,92,.5); } .kelma-map .mp-pin .pin-dot::after{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; background:var(--k-gold); transform:translate(-50%,-50%) rotate(45deg); } .kelma-map .mp-pin .pin-pulse{ position:absolute; left:50%; top:50%; width:20px; height:20px; border-radius:50%; transform:translate(-50%,-50%); background:rgba(112,33,92,.28); animation:kelmaPulse 1.9s infinite; } .kelma-map .mp-tag{ position:absolute; left:49%; top:58%; transform:translate(-50%,10px); z-index:3; background:#fff; border:1px solid var(--k-line); border-radius:999px; padding:4px 11px; font-size:.74rem; font-weight:700; color:var(--k-ink); white-space:nowrap; box-shadow:var(--k-shadow-sm); } .kelma-map .mp-tag b{ color:var(--k-plum); } .kelma-map .mp-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; font-size:.82rem; color:var(--k-muted); } .kelma-map .mp-foot .mp-hq{ display:inline-flex; align-items:center; gap:6px; color:var(--k-ink); font-weight:700; } .kelma-map .mp-foot .mp-hq::before{ content:""; width:8px; height:8px; border-radius:50%; background:#28c840; box-shadow:0 0 0 3px rgba(40,200,64,.18); } /* Form card (schedule-a-demo) */ .kelma-formcard{ background:#fff; border:1px solid var(--k-line); border-radius:20px; box-shadow:var(--k-shadow); padding:30px 30px 24px !important; } .kelma-formcard h3{ margin:0 0 .4rem; font-size:1.2rem; } .kelma-formcard .wpforms-container{ margin:0 !important; } .kelma-formcard .wpforms-submit{ border-radius:999px !important; background:var(--k-plum) !important; color:#fff !important; font-weight:700 !important; padding:.8rem 1.6rem !important; } /* ---------- Article / doc card grids (Resources, blog query loops) ---------- */ .kelma-postgrid .wp-block-post-template{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; padding:0; margin:1.4rem 0 0; } .kelma-postgrid .wp-block-post-template li{ margin:0; } .kelma-postcard{ background:#fff; border:1px solid var(--k-line); border-radius:18px; overflow:hidden; box-shadow:0 1px 2px rgba(30,38,42,.04); transition:transform .2s ease, box-shadow .2s ease; height:100%; } .kelma-postcard:hover{ transform:translateY(-3px); box-shadow:var(--k-shadow); } .kelma-postcard .wp-block-post-featured-image{ margin:0; } .kelma-postcard .wp-block-post-featured-image img{ width:100%; height:184px; object-fit:cover; display:block; } .kelma-postcard :is(.wp-block-post-terms,.wp-block-post-title,.wp-block-post-date){ padding-inline:20px; } .kelma-postcard .wp-block-post-terms{ padding-top:16px; } .kelma-postcard .wp-block-post-terms a{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--k-plum); background:#fbeef6; border-radius:999px; padding:.2rem .6rem; text-decoration:none; } .kelma-postcard .wp-block-post-title{ margin:12px 0 0; font-size:1.06rem; line-height:1.42; font-family:'Funnel Display','Cairo',sans-serif; } .kelma-postcard .wp-block-post-title a{ color:var(--k-ink); text-decoration:none; } .kelma-postcard .wp-block-post-title a:hover{ color:var(--k-plum); } .kelma-postcard .wp-block-post-date{ margin:8px 0 0; padding-bottom:20px; color:var(--k-muted); font-size:.82rem; } /* text-only doc cards (knowledge base) */ .kelma-docgrid .wp-block-post-template{ grid-template-columns:repeat(3,1fr); } .kelma-doccard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--k-line); border-radius:16px; box-shadow:0 1px 2px rgba(30,38,42,.04); padding:24px 22px 22px; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; height:100%; } .kelma-doccard:hover{ transform:translateY(-3px); box-shadow:var(--k-shadow); border-color:#dcc6d6; } .kelma-doccard::before{ content:"📄"; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#fbeef6,#f3dcec); font-size:1.2rem; margin-bottom:16px; flex:0 0 auto; } .kelma-doccard .wp-block-post-terms{ margin:0; } /* show ONLY the first category tag, as a clean pill (posts are in several categories) */ .kelma-doccard .wp-block-post-terms > :nth-child(n+2){ display:none !important; } .kelma-doccard .wp-block-post-terms a{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--k-plum); background:#fbeef6; border-radius:999px; padding:.22rem .6rem; text-decoration:none; } .kelma-doccard .wp-block-post-title{ margin:.7rem 0 0; font-size:1.08rem; line-height:1.4; font-family:'Funnel Display','Cairo',sans-serif; } .kelma-doccard .wp-block-post-title a{ color:var(--k-ink); text-decoration:none; } .kelma-doccard .wp-block-post-title a:hover{ color:var(--k-plum); } .kelma-doccard .wp-block-post-excerpt{ margin:.55rem 0 0; color:var(--k-body); font-size:.9rem; line-height:1.6; } .kelma-doccard .wp-block-post-excerpt p{ margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .kelma-doccard .wp-block-post-excerpt__more-link{ color:var(--k-plum); font-weight:700; text-decoration:none; display:inline-block; margin-top:auto; padding-top:.9rem; } .kelma-doccard .wp-block-post-excerpt__more-link:hover{ text-decoration:underline; } .kelma-viewall{ text-align:center; margin-top:26px; } .kelma-viewall a{ color:var(--k-plum); font-weight:700; text-decoration:none; border:1.5px solid #e3cfdd; border-radius:999px; padding:.55rem 1.3rem; display:inline-block; } .kelma-viewall a:hover{ background:#fbeef6; } @media(max-width:900px){ .kelma-postgrid .wp-block-post-template,.kelma-docgrid .wp-block-post-template{ grid-template-columns:1fr 1fr !important; } } @media(max-width:600px){ .kelma-postgrid .wp-block-post-template,.kelma-docgrid .wp-block-post-template{ grid-template-columns:1fr !important; } } /* Archive cards (category/tag/blog archives) — even heights, graceful no-image */ .kelma-archcard{ display:flex; flex-direction:column; } .kelma-archcard .wp-block-post-date{ margin-top:auto; } .kelma-archcard .wp-block-post-terms > :nth-child(n+2){ display:none !important; } .kelma-archcard .wp-block-post-terms a{ background:#fbeef6; border-radius:999px; padding:.22rem .6rem; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--k-plum); text-decoration:none; } .kelma-archcard:not(:has(img)) .wp-block-post-terms{ padding-top:22px; } /* Show only the FIRST category tag on every article card (posts are multi-category) */ .kelma-postcard .wp-block-post-terms > :nth-child(n+2), .kelma-doccard .wp-block-post-terms > :nth-child(n+2), .kelma-archcard .wp-block-post-terms > :nth-child(n+2){ display:none !important; } .kelma-postcard .wp-block-post-terms{ display:flex; flex-wrap:wrap; } /* Query pagination — clean numbered switcher */ .wp-block-query-pagination{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; } .wp-block-query-pagination .page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next{ display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 12px; margin:0 !important; border:1px solid var(--k-line); border-radius:11px; color:var(--k-ink) !important; font-weight:700; font-size:.92rem; text-decoration:none !important; transition:all .15s ease; background:#fff; } .wp-block-query-pagination .page-numbers:hover, .wp-block-query-pagination-previous:hover, .wp-block-query-pagination-next:hover{ border-color:var(--k-plum); color:var(--k-plum) !important; } .wp-block-query-pagination .page-numbers.current{ background:var(--k-plum); color:#fff !important; border-color:var(--k-plum); } .wp-block-query-pagination .page-numbers.dots{ border:0; min-width:auto; background:transparent; } /* ===== Archive card + pagination — robust overrides (left-aligned, single tag, padding) ===== */ .kelma-archcard{ display:flex !important; flex-direction:column; text-align:left !important; padding:22px !important; } [dir="rtl"] .kelma-archcard{ text-align:right !important; } .kelma-archcard > *{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; max-width:none !important; text-align:inherit !important; } .kelma-archcard .wp-block-post-featured-image{ margin:-22px -22px 16px !important; } .kelma-archcard .wp-block-post-featured-image img{ width:100%; height:170px; object-fit:cover; display:block; border-radius:0 !important; } .kelma-archcard .wp-block-post-terms{ margin:0 !important; padding:0 !important; } .kelma-archcard .wp-block-post-terms > :nth-child(n+2){ display:none !important; } .kelma-archcard .wp-block-post-terms a{ display:inline-block; background:#fbeef6; border-radius:999px; padding:.24rem .65rem; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--k-plum); text-decoration:none; } .kelma-archcard .wp-block-post-title{ margin:.7rem 0 0 !important; } .kelma-archcard .wp-block-post-date{ margin:.55rem 0 0 !important; padding-bottom:0 !important; color:var(--k-muted); font-size:.82rem; } .wp-block-query-pagination{ display:flex !important; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; } .wp-block-query-pagination-numbers{ display:inline-flex; gap:8px; align-items:center; } .wp-block-query-pagination .page-numbers{ display:inline-grid !important; place-items:center; min-width:40px; height:40px; padding:0 14px; border:1px solid var(--k-line); border-radius:11px; color:var(--k-ink) !important; font-weight:700; font-size:.9rem; text-decoration:none !important; background:#fff; transition:all .15s ease; } .wp-block-query-pagination .page-numbers.current{ background:var(--k-plum) !important; color:#fff !important; border-color:var(--k-plum) !important; } .wp-block-query-pagination .page-numbers.dots{ border:0; background:transparent; min-width:auto; } .wp-block-query-pagination .page-numbers:hover{ border-color:var(--k-plum); color:var(--k-plum) !important; background:#fff; } .wp-block-query-pagination .page-numbers.current:hover{ color:#fff !important; background:var(--k-plum-700,#5a1a4b) !important; border-color:var(--k-plum) !important; } /* ===== Unified article card (.kelma-artcard) — blog, KB, archives all consistent ===== */ .kelma-artcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--k-line); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(30,38,42,.04); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; height:100%; text-align:left; } [dir="rtl"] .kelma-artcard{ text-align:right; } .kelma-artcard:hover{ transform:translateY(-3px); box-shadow:var(--k-shadow); border-color:#dcc6d6; } .kelma-artcard .wp-block-post-featured-image{ margin:0 !important; } .kelma-artcard .wp-block-post-featured-image img{ width:100%; height:184px; object-fit:cover; display:block; border-radius:0 !important; } .kelma-artcard > :not(.wp-block-post-featured-image){ padding-inline:22px !important; margin-left:0 !important; margin-right:0 !important; max-width:none !important; } .kelma-artcard > .wp-block-post-terms:first-child{ padding-top:24px; } .kelma-artcard .wp-block-post-featured-image + .wp-block-post-terms{ padding-top:18px; } .kelma-artcard .wp-block-post-terms{ margin:0 !important; } .kelma-artcard .wp-block-post-terms > :nth-child(n+2){ display:none !important; } .kelma-artcard .wp-block-post-terms a{ display:inline-block; background:#fbeef6; border-radius:999px; padding:.24rem .65rem; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--k-plum); text-decoration:none; } .kelma-artcard .wp-block-post-title{ margin:.7rem 0 0 !important; font-size:1.08rem; line-height:1.4; font-family:'Funnel Display','Cairo',sans-serif; } .kelma-artcard .wp-block-post-title a{ color:var(--k-ink); text-decoration:none; } .kelma-artcard .wp-block-post-title a:hover{ color:var(--k-plum); } .kelma-artcard .wp-block-post-excerpt{ margin:.55rem 0 0 !important; color:var(--k-body); font-size:.9rem; line-height:1.6; } .kelma-artcard .wp-block-post-excerpt p{ margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .kelma-artcard .wp-block-post-excerpt__more-link{ color:var(--k-plum); font-weight:700; text-decoration:none; margin-top:.85rem; display:inline-block; } .kelma-artcard .wp-block-post-excerpt__more-link:hover{ text-decoration:underline; } .kelma-artcard > :last-child{ padding-bottom:24px !important; } /* ===================== Single blog post ===================== */ /* Article body — readable column, slightly smaller body text */ body.single .wp-block-post-content{ max-width:760px; margin-inline:auto; font-size:16px; line-height:1.78; color:var(--k-body); } body.single .wp-block-post-content > *{ margin-top:0; margin-bottom:1.15em; } body.single .wp-block-post-content :is(h2,h3,h4){ color:var(--k-ink); font-family:'Funnel Display','Cairo',sans-serif; line-height:1.3; margin-top:1.9em; margin-bottom:.5em; } body.single .wp-block-post-content h2{ font-size:1.55rem; } body.single .wp-block-post-content h3{ font-size:1.24rem; } body.single .wp-block-post-content h4{ font-size:1.06rem; } body.single .wp-block-post-content :is(ul,ol){ padding-inline-start:1.4rem; } body.single .wp-block-post-content li{ margin:.4rem 0; } body.single .wp-block-post-content a:not(.wp-block-button__link){ color:var(--k-plum); text-underline-offset:2px; } body.single .wp-block-post-content .wp-block-button__link{ color:#fff !important; text-decoration:none !important; } body.single .wp-block-post-content .wp-block-button.is-style-outline .wp-block-button__link, body.single .wp-block-post-content .kelma-btn-gold .wp-block-button__link{ color:var(--k-ink) !important; } body.single .wp-block-post-content img,body.single .wp-block-post-content figure img{ border-radius:12px; } body.single .wp-block-post-content blockquote{ border-inline-start:3px solid var(--k-plum); padding:.2rem 0 .2rem 1.2rem; margin:1.6em 0; color:var(--k-ink); font-style:italic; } body.single .wp-block-post-content :is(code,kbd){ background:var(--k-bg-soft); border:1px solid var(--k-line); border-radius:6px; padding:.1rem .4rem; font-size:.92em; } body.single .wp-block-post-content pre{ background:var(--k-bg-soft); border:1px solid var(--k-line); border-radius:12px; padding:16px 18px; overflow:auto; font-size:.9rem; } body.single .wp-block-post-content pre code{ background:none; border:0; padding:0; } body.single .wp-block-post-content hr{ border:0; border-top:1px solid var(--k-line); margin:2.2em 0; } body.single .wp-block-post-content table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.94em; } body.single .wp-block-post-content :is(th,td){ border:1px solid var(--k-line); padding:.6rem .8rem; text-align:start; vertical-align:top; } body.single .wp-block-post-content th{ background:var(--k-bg-soft); color:var(--k-ink); font-weight:700; } /* ---- Knowledge-base content components (used inside KB articles) ---- */ .kb-callout{ display:block; position:relative; padding:15px 18px 15px 50px; border-radius:13px; margin:1.6em 0; font-size:.95em; line-height:1.7; border:1px solid var(--k-line); background:var(--k-bg-soft); color:var(--k-body); } .kb-callout::before{ position:absolute; left:16px; top:14px; font-size:1.15rem; line-height:1; content:"💡"; } .kb-callout strong{ color:var(--k-ink); } .kb-callout.note{ background:#fbeef6; border-color:#e9c8e0; } .kb-callout.note::before{ content:"📌"; } .kb-callout.tip{ background:#f0fbf5; border-color:#bce6cf; } .kb-callout.tip::before{ content:"💡"; } .kb-callout.warn{ background:#fff8ec; border-color:#f3dca0; } .kb-callout.warn::before{ content:"⚠️"; } [dir="rtl"] .kb-callout{ padding:15px 50px 15px 18px; } [dir="rtl"] .kb-callout::before{ left:auto; right:16px; } .kb-next{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:1.8em 0 .4em; } .kb-next a{ display:block; padding:15px 17px; border:1px solid var(--k-line); border-radius:13px; text-decoration:none !important; background:#fff; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .kb-next a:hover{ border-color:var(--k-plum); box-shadow:var(--k-shadow-sm); transform:translateY(-2px); } .kb-next a b{ display:block; color:var(--k-ink) !important; font-family:'Funnel Display','Cairo',sans-serif; font-size:1rem; margin-bottom:3px; } .kb-next a span{ display:block; color:var(--k-muted); font-size:.86rem; line-height:1.5; } @media(max-width:600px){ .kb-next{ grid-template-columns:1fr; } } /* ============================================================ KB "screenshot" / UI illustrations — branded Kelma Panel mockups embedded in articles (pure CSS/HTML, no images). Use .kb-shot. ============================================================ */ .kb-shot{ margin:1.9em 0; border:1px solid var(--k-line); border-radius:14px; overflow:hidden; box-shadow:var(--k-shadow); background:#fff; font-size:13px; line-height:1.45; } .kb-shot *{ box-sizing:border-box; } .kb-shot .kbs-bar{ display:flex; align-items:center; gap:9px; padding:9px 13px; background:linear-gradient(180deg,#fbf8fb,#f4eef4); border-bottom:1px solid var(--k-line); } .kb-shot .kbs-dots{ display:flex; gap:6px; } .kb-shot .kbs-dots i{ width:11px; height:11px; border-radius:50%; background:#dcd2db; display:block; } .kb-shot .kbs-url{ flex:1; background:#fff; border:1px solid var(--k-line); border-radius:7px; padding:4px 11px; color:var(--k-muted); font-size:12px; font-family:ui-monospace,Menlo,monospace; } .kb-shot .kbs-body{ display:flex; align-items:stretch; } .kb-shot .kbs-side{ width:166px; flex-shrink:0; background:linear-gradient(160deg,#70215c,#561746); color:#fff; padding:14px 10px; } .kb-shot .kbs-side .kbs-logo{ font-family:'Funnel Display',sans-serif; font-weight:800; font-size:15px; padding:2px 8px 12px; opacity:.95; } .kb-shot .kbs-side .kbs-nav{ display:flex; flex-direction:column; gap:1px; } .kb-shot .kbs-side .kbs-nav span{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; color:rgba(255,255,255,.72); font-size:12.5px; } .kb-shot .kbs-side .kbs-nav span.on{ background:rgba(255,255,255,.14); color:#fff; font-weight:600; } .kb-shot .kbs-main{ flex:1; padding:18px 20px; background:#fff; min-width:0; } .kb-shot .kbs-h{ font-family:'Funnel Display','Cairo',sans-serif; font-weight:700; color:var(--k-ink); font-size:16px; margin:0 0 3px; } .kb-shot .kbs-sub{ color:var(--k-muted); font-size:12.5px; margin:0 0 14px; } .kb-shot .kbs-card{ border:1px solid var(--k-line); border-radius:11px; padding:13px 15px; margin:10px 0; background:#fff; } .kb-shot .kbs-card.tint{ background:var(--k-bg-soft); } .kb-shot .kbs-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--k-muted); margin-bottom:4px; } .kb-shot .kbs-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--k-line); } .kb-shot .kbs-row:first-child{ border-top:0; } .kb-shot .kbs-row .nm{ font-weight:600; color:var(--k-ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kb-shot .kbs-row .vl{ color:var(--k-body); font-family:ui-monospace,Menlo,monospace; font-size:12px; } .kb-shot .kbs-row .mut{ color:var(--k-muted); } .kb-shot .kbs-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:8px; font-weight:700; font-size:12px; border:1px solid var(--k-line); background:#fff; color:var(--k-ink); white-space:nowrap; } .kb-shot .kbs-btn.plum{ background:var(--k-plum); color:#fff; border-color:var(--k-plum); } .kb-shot .kbs-btn.gold{ background:var(--k-gold); color:#2a2208; border-color:var(--k-gold); } .kb-shot .kbs-btn.sm{ padding:4px 10px; font-size:11px; } .kb-shot .kbs-field{ margin:9px 0; } .kb-shot .kbs-field label{ display:block; font-size:11.5px; font-weight:600; color:var(--k-body); margin-bottom:4px; } .kb-shot .kbs-input{ border:1px solid var(--k-line); border-radius:8px; padding:8px 11px; color:var(--k-ink); background:#fff; font-size:12.5px; display:flex; align-items:center; justify-content:space-between; gap:8px; } .kb-shot .kbs-input .ph{ color:var(--k-muted); } .kb-shot .kbs-input .mono{ font-family:ui-monospace,Menlo,monospace; } .kb-shot .kbs-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; } .kb-shot .kbs-toggle{ display:inline-flex; align-items:center; gap:8px; } .kb-shot .kbs-sw{ width:34px; height:19px; border-radius:99px; background:#d8cfd6; position:relative; flex-shrink:0; } .kb-shot .kbs-sw::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:.2s; } .kb-shot .kbs-sw.on{ background:#1c7d52; } .kb-shot .kbs-sw.on::after{ left:17px; } .kb-shot .kbs-pill{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; } .kb-shot .kbs-pill.green{ background:#e8f7ef; color:#1c7d52; } .kb-shot .kbs-pill.green::before{ content:"●"; font-size:8px; } .kb-shot .kbs-pill.amber{ background:#fef6e7; color:#a96a00; } .kb-shot .kbs-pill.plum{ background:#fbeef6; color:var(--k-plum); } .kb-shot .kbs-tag{ display:inline-block; padding:2px 8px; border-radius:6px; background:var(--k-bg-soft); border:1px solid var(--k-line); font-size:11px; color:var(--k-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .kb-shot .kbs-cap{ padding:8px 14px; background:var(--k-bg-soft); border-top:1px solid var(--k-line); color:var(--k-muted); font-size:12px; text-align:center; } .kb-shot .kbs-term{ background:#1e1726; color:#e9e2ee; border-radius:10px; padding:13px 15px; font-family:ui-monospace,Menlo,monospace; font-size:12px; line-height:1.7; } .kb-shot .kbs-term .pr{ color:#c79bd6; } .kb-shot .kbs-term .ok{ color:#5fce95; } .kb-shot .kbs-term .cm{ color:#8a7e93; } .kb-shot .kbs-bars{ display:flex; align-items:flex-end; gap:5px; height:46px; margin-top:6px; } .kb-shot .kbs-bars i{ flex:1; background:linear-gradient(180deg,#caa6c2,#70215c); border-radius:3px 3px 0 0; display:block; } .kb-shot .kbs-pill.red{ background:#fdecec; color:#b42318; } .kb-shot .kbs-pill.red::before{ content:"●"; font-size:8px; } .kb-shot .kbs-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; } .kb-shot .kbs-tabs{ display:inline-flex; gap:2px; padding:3px; border-radius:9px; background:var(--k-bg-soft); border:1px solid var(--k-line); margin-bottom:12px; } .kb-shot .kbs-tabs span{ padding:5px 13px; border-radius:7px; font-size:12px; font-weight:700; color:var(--k-muted); } .kb-shot .kbs-tabs span.on{ background:#fff; color:var(--k-plum); box-shadow:var(--k-shadow-sm); } .kb-shot .kbs-meter{ flex:1; height:7px; border-radius:99px; background:var(--k-bg-soft); overflow:hidden; min-width:40px; } .kb-shot .kbs-meter i{ display:block; height:100%; background:linear-gradient(90deg,#caa6c2,#70215c); border-radius:99px; } [dir="rtl"] .kb-shot{ direction:rtl; } [dir="rtl"] .kb-shot .kbs-url{ direction:ltr; text-align:right; } [dir="rtl"] .kb-shot .kbs-meter i{ background:linear-gradient(270deg,#caa6c2,#70215c); } [dir="rtl"] .kb-shot .kbs-sw::after{ left:auto; right:2px; } [dir="rtl"] .kb-shot .kbs-sw.on::after{ right:17px; left:auto; } @media(max-width:600px){ .kb-shot .kbs-side{ display:none; } .kb-shot{ font-size:12px; } .kb-shot .kbs-grid2,.kb-shot .kbs-grid3{ grid-template-columns:1fr; } } /* ---- KB article reading experience: TOC, breadcrumb, meta, prose polish ---- */ body.single .kb-breadcrumb{ max-width:760px; margin:0 auto 1.2em; font-size:.82rem; color:var(--k-muted); } body.single .kb-breadcrumb a{ color:var(--k-muted); text-decoration:none; } body.single .kb-breadcrumb a:hover{ color:var(--k-plum); } body.single .kb-breadcrumb .sep{ margin:0 .4rem; opacity:.5; } body.single .kb-meta{ max-width:760px; margin:0 auto 1.6em; display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.83rem; color:var(--k-muted); border-bottom:1px solid var(--k-line); padding-bottom:1.1em; } body.single .kb-meta b{ color:var(--k-ink); } body.single .kb-toc{ max-width:760px; margin:0 auto 1.8em; border:1px solid var(--k-line); border-radius:14px; background:var(--k-bg-soft); padding:16px 20px; } body.single .kb-toc .kb-toc-h{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--k-muted); margin:0 0 9px; } body.single .kb-toc ol{ margin:0; padding-inline-start:1.1rem; columns:2; column-gap:28px; } body.single .kb-toc li{ margin:.28rem 0; break-inside:avoid; } body.single .kb-toc a{ color:var(--k-plum); text-decoration:none; font-size:.92rem; } body.single .kb-toc a:hover{ text-decoration:underline; } body.single .wp-block-post-content h2{ scroll-margin-top:90px; } @media(max-width:600px){ body.single .kb-toc ol{ columns:1; } } /* Author card */ .kelma-authorbox{ max-width:760px; margin-inline:auto !important; border:1px solid var(--k-line) !important; border-width:1px !important; border-color:var(--k-line) !important; border-radius:18px !important; background:#fff !important; box-shadow:var(--k-shadow-sm); padding:26px 28px !important; } .kelma-authorbox .ab-body{ gap:6px; } .kelma-authorbox .ab-meta{ align-items:baseline; } .kelma-authorbox .wp-block-columns{ background:transparent !important; align-items:center; } .kelma-authorbox .wp-block-avatar img{ border-radius:50% !important; width:54px !important; height:54px !important; } .kelma-authorbox .wp-block-post-author-name,.kelma-authorbox .wp-block-post-author-name a{ font-weight:800 !important; color:var(--k-ink) !important; font-size:1.02rem !important; } .kelma-authorbox .wp-block-post-date{ color:var(--k-muted) !important; font-size:.82rem !important; } .kelma-authorbox .wp-block-post-author-biography{ color:var(--k-body) !important; font-size:.92rem !important; line-height:1.65; } /* Recommended reading (related posts) */ .kelma-related{ border-top:1px solid var(--k-line); background:var(--k-bg-soft); margin-top:8px; } .kelma-related-inner{ max-width:1160px; margin-inline:auto; padding:56px 24px 60px; } .kelma-related-title{ font-family:'Funnel Display','Cairo',sans-serif; font-size:1.5rem; color:var(--k-ink); margin:0 0 28px; text-align:center; } .kelma-related .wp-block-post-template{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0; padding:0; list-style:none; } @media(max-width:900px){ .kelma-related .wp-block-post-template{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .kelma-related .wp-block-post-template{ grid-template-columns:1fr; } } /* Comments */ main .wp-block-comments{ max-width:760px; margin-inline:auto; } main .wp-block-comments-title{ font-size:1.5rem; margin-bottom:1.2rem; } main .wp-block-comment-template{ list-style:none; padding:0; margin:0; } main .wp-block-comment-template > li > .wp-block-columns{ background:#fff !important; border:1px solid var(--k-line) !important; border-radius:14px !important; box-shadow:0 1px 2px rgba(30,38,42,.04); } main .wp-block-comment-author-name,main .wp-block-comment-author-name a{ font-weight:700; color:var(--k-ink); } main .wp-block-comment-date a{ color:var(--k-muted); text-decoration:none; font-size:.82rem; } main .wp-block-comment-content{ color:var(--k-body); line-height:1.7; } main .wp-block-comment-reply-link a{ color:var(--k-plum); font-weight:600; } /* Comment form */ main .wp-block-post-comments-form .comment-reply-title{ font-size:1.4rem; } main .comment-form input[type=text],main .comment-form input[type=email],main .comment-form input[type=url],main .comment-form textarea{ width:100%; border:1px solid var(--k-line) !important; border-radius:11px !important; padding:.75rem .95rem !important; background:#fff; font-family:inherit; font-size:.95rem; transition:border-color .15s ease; } main .comment-form :is(input,textarea):focus{ outline:none; border-color:var(--k-plum) !important; } main .comment-form .form-submit input[type=submit],main .wp-block-post-comments-form .submit{ border-radius:999px !important; background:var(--k-plum) !important; color:#fff !important; font-weight:700 !important; padding:.75rem 1.7rem !important; border:0 !important; cursor:pointer; transition:background .15s ease; } main .comment-form .form-submit input[type=submit]:hover{ background:var(--k-plum-700) !important; } /* Pagination next/prev — compact arrow-only pills, identical size to the number pills. The verbose "Next Page"/"Previous Page" label is collapsed (font-size:0, still in DOM for screen readers) and only the arrow is shown, so prev/next match the 40px squares. */ .wp-block-query-pagination .wp-block-query-pagination-previous, .wp-block-query-pagination .wp-block-query-pagination-next{ display:inline-flex !important; flex-direction:row !important; align-items:center; justify-content:center; gap:0 !important; white-space:nowrap !important; width:auto !important; min-width:40px !important; height:40px; padding:0 13px !important; border:1px solid var(--k-line); border-radius:11px; background:#fff; color:var(--k-ink) !important; font-weight:700; text-decoration:none !important; font-size:0 !important; transition:all .15s ease; } .wp-block-query-pagination .wp-block-query-pagination-previous:hover, .wp-block-query-pagination .wp-block-query-pagination-next:hover{ border-color:var(--k-plum); color:var(--k-plum) !important; } .wp-block-query-pagination .wp-block-query-pagination-previous-arrow, .wp-block-query-pagination .wp-block-query-pagination-next-arrow{ font-size:1.15rem !important; } .wp-block-query-pagination-previous-arrow,.wp-block-query-pagination-next-arrow{ margin:0 !important; font-style:normal; line-height:1; font-size:1.15rem !important; } /* ===== Author card — richer, less washed ===== */ .kelma-authorbox{ background:linear-gradient(135deg,#fbeef6,#ffffff 60%) !important; border:1px solid #e7cfe0 !important; border-color:#e7cfe0 !important; border-width:1px !important; border-radius:18px !important; box-shadow:0 10px 30px -14px rgba(112,33,92,.22) !important; padding:10px !important; } .kelma-authorbox .wp-block-column{ background:transparent !important; } .kelma-authorbox .wp-block-avatar img{ border-radius:50% !important; width:58px !important; height:58px !important; box-shadow:0 2px 8px rgba(112,33,92,.2); } .kelma-authorbox .wp-block-post-author-name,.kelma-authorbox .wp-block-post-author-name a{ font-weight:800 !important; color:var(--k-plum) !important; font-size:1.05rem !important; } .kelma-authorbox p{ color:var(--k-muted) !important; } .kelma-authorbox .wp-block-post-date,.kelma-authorbox .wp-block-post-date a{ color:var(--k-ink) !important; font-weight:600; font-size:.84rem !important; } .kelma-authorbox .wp-block-post-author-biography{ color:var(--k-ink) !important; font-size:.94rem !important; line-height:1.7; } /* ===== Comments — clean card + form ===== */ main .wp-block-comments{ margin-top:48px; padding-top:40px; border-top:1px solid var(--k-line); } main .wp-block-comment-template > li > .wp-block-columns{ background:#fff !important; border:1px solid var(--k-line) !important; border-radius:14px !important; box-shadow:0 1px 2px rgba(30,38,42,.04); padding:6px !important; margin:0 0 16px !important; } main .wp-block-post-comments-form{ background:#fff; border:1px solid var(--k-line); border-radius:18px; padding:30px; box-shadow:var(--k-shadow-sm); margin-top:28px; } main .wp-block-post-comments-form .comment-reply-title,main .comment-reply-title{ font-size:1.4rem; font-family:'Funnel Display','Cairo',sans-serif; color:var(--k-ink); margin:0 0 .4rem; } main .comment-form .comment-notes{ color:var(--k-muted); font-size:.86rem; margin-bottom:1.2rem; } main .comment-form label{ font-weight:600; color:var(--k-ink); font-size:.86rem; display:block; margin-bottom:.35rem; } main .comment-form-comment,main .comment-form-author,main .comment-form-email,main .comment-form-url{ margin-bottom:1.1rem; } main .comment-form-cookies-consent{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--k-body); margin-bottom:1.1rem; } main .comment-form-cookies-consent label{ margin:0; font-weight:400; } /* Author card layout (flex: avatar + details) */ .kelma-authorbox{ display:flex !important; flex-direction:row; gap:18px; align-items:flex-start; } .kelma-authorbox > .wp-block-avatar{ flex:0 0 auto; margin:0 !important; } .kelma-authorbox .ab-body{ flex:1 1 auto; min-width:0; } .kelma-authorbox .ab-meta{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .kelma-authorbox .ab-meta > *{ margin:0 !important; } .kelma-authorbox .ab-meta .wp-block-post-date,.kelma-authorbox .ab-meta .wp-block-post-date a{ color:var(--k-muted) !important; font-weight:500 !important; } /* Comment item layout */ .kelma-comment{ display:flex !important; gap:14px; align-items:flex-start; } .kelma-comment > .wp-block-avatar{ flex:0 0 auto; margin:0 !important; } .kelma-comment .cm-meta{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:5px; } .kelma-comment .cm-meta > *{ margin:0 !important; } .kelma-comment .wp-block-comment-author-name,.kelma-comment .wp-block-comment-author-name a{ font-weight:700; color:var(--k-ink); } .kelma-comment .wp-block-comment-date a{ color:var(--k-muted); font-size:.82rem; text-decoration:none; } /* Single-post category tag → brand pill */ main .wp-block-post-terms a{ background:#fbeef6 !important; color:var(--k-plum) !important; border-radius:999px !important; padding:.28rem .8rem !important; font-weight:800 !important; font-size:.7rem !important; text-decoration:none !important; } main .wp-block-post-terms .wp-block-post-terms__separator{ display:none !important; } /* ===== Owner refinements: author card + blog font sizes ===== */ /* author card: solid white (no gradient), neutral dark name */ .kelma-authorbox{ background:#fff !important; border:1px solid var(--k-line) !important; border-color:var(--k-line) !important; box-shadow:0 1px 2px rgba(30,38,42,.05),0 10px 26px -18px rgba(112,33,92,.18) !important; } .kelma-authorbox .wp-block-post-author-name,.kelma-authorbox .wp-block-post-author-name a{ color:var(--k-ink) !important; } /* blog single: smaller title + body */ h1.wp-block-post-title{ font-size:clamp(1.7rem,2.6vw,2.25rem) !important; line-height:1.22 !important; } body.single .wp-block-post-content{ font-size:15px !important; line-height:1.8 !important; } body.single .wp-block-post-content h2{ font-size:1.45rem !important; } body.single .wp-block-post-content h3{ font-size:1.18rem !important; }