/* ============================================================ KCAPHIOLOGIE — Additional CSS (WP.com Business / Thriving Artist) Source: H:\ollama_bots\klew_theme_prototype.html Strategy: namespaced port. Live theme keeps control of header, typography defaults, and block layout. Sections that should adopt the prototype look are wrapped in a Custom HTML block with class .kcaph (or one of the .kcaph-* component classes). Nothing here targets bare ,

, etc. — safe to paste. ============================================================ / :root{ --kcaph-black:#0a0a0b; --kcaph-ink:#141416; --kcaph-gold1:#bf953f; --kcaph-gold2:#d4af37; --kcaph-gold3:#fcf6ba; --kcaph-plat:#e5e4e2; --kcaph-crystal:#cfe3e8; --kcaph-muted:#8a8a8f; --kcaph-gold-grad:linear-gradient(135deg,#bf953f 0%,#fcf6ba 45%,#d4af37 70%,#aa771c 100%); } / Page-level skin (opt-in via or a wrapping div.kcaph) / .kcaph{ background:var(--kcaph-black); color:#ece9e4; overflow-x:hidden; } .kcaph ::selection{ background:var(--kcaph-gold2); color:#000; } / ----- KCAPH ⊕ OLOGIE lockup (for Custom HTML site title block) ----- / .kcaph-lockup{display:inline-flex;align-items:center;gap:2px} .kcaph-lockup span{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.1em;font-size:19px;background:var(--kcaph-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .kcaph-lockup img{height:30px;margin:0 1px;filter:drop-shadow(0 0 8px rgba(212,175,55,.35))} / ----- Hero ----- / .kcaph-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;padding:0 6vw;overflow:hidden} .kcaph-hero .hero-bg{position:absolute;inset:-8%;background:url("/wp-content/uploads/2026/06/kcaph-bckgrd-4_Print.jpg") center/cover;opacity:.22;filter:saturate(1.3) brightness(.8);z-index:0;will-change:transform} .kcaph-hero .hero-fade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 0%,rgba(10,10,11,.65) 70%,var(--kcaph-black) 100%);z-index:1} .kcaph-hero .hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center} .kcaph-hero .emblem{width:clamp(170px,25vw,290px);margin-bottom:22px;filter:drop-shadow(0 0 46px rgba(212,175,55,.42));animation:kcaph-float 7s ease-in-out infinite} .kcaph-hero .kicker{font-family:'Inter',sans-serif;letter-spacing:.5em;text-transform:uppercase;font-size:11px;color:var(--kcaph-crystal);margin:18px 0 14px;opacity:.85} .kcaph-hero h1{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(40px,9vw,118px);line-height:.95;letter-spacing:.06em;background:var(--kcaph-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .kcaph-hero .tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(17px,2.4vw,27px);color:var(--kcaph-plat);margin-top:20px;font-weight:400;max-width:680px} .kcaph-hero .sig{margin-top:26px;font-family:'Cinzel',serif;letter-spacing:.4em;font-size:12px;color:var(--kcaph-gold2)} @keyframes kcaph-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(2deg)}} / hero entrance stagger / .kcaph .up{opacity:0;transform:translateY(26px);animation:kcaph-rise .9s cubic-bezier(.2,.7,.2,1) forwards} .kcaph .up.d1{animation-delay:.15s} .kcaph .up.d2{animation-delay:.3s} .kcaph .up.d3{animation-delay:.45s} .kcaph .up.d4{animation-delay:.6s} .kcaph .up.d5{animation-delay:.75s} @keyframes kcaph-rise{to{opacity:1;transform:none}} .kcaph-hero .scrolldot{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:1px;height:54px;background:linear-gradient(var(--kcaph-gold2),transparent);opacity:.6;z-index:2;animation:kcaph-drip 2.2s ease-in-out infinite} @keyframes kcaph-drip{0%,100%{opacity:.2;height:34px}50%{opacity:.7;height:60px}} / ----- Marquee ----- / .kcaph-marquee{border-top:1px solid rgba(212,175,55,.18);border-bottom:1px solid rgba(212,175,55,.18);padding:16px 0;overflow:hidden;white-space:nowrap;background:rgba(20,20,22,.4)} .kcaph-marquee>div{display:inline-block;animation:kcaph-scrollx 28s linear infinite;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--kcaph-gold2)} .kcaph-marquee span{padding:0 30px;opacity:.85} .kcaph-marquee span::after{content:"✦";margin-left:60px;color:var(--kcaph-gold1);font-style:normal} @keyframes kcaph-scrollx{to{transform:translateX(-50%)}} / ----- Section heading rail ----- / .kcaph .sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:40px} .kcaph .sec-head h2{font-family:'Cinzel',serif;font-weight:500;font-size:clamp(22px,4vw,38px);letter-spacing:.06em;color:var(--kcaph-plat)} .kcaph .sec-head .line{flex:1;height:1px;background:linear-gradient(90deg,rgba(212,175,55,.5),transparent);transform-origin:left;transform:scaleX(0);transition:transform 1.1s ease} .kcaph .sec-head.in .line{transform:scaleX(1)} .kcaph .sec-head .num{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--kcaph-gold2);font-size:22px} / ----- Featured (image + copy split) ----- / .kcaph-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .kcaph-feature .imgwrap{overflow:hidden;border:1px solid rgba(212,175,55,.25);position:relative} .kcaph-feature img{width:100%;display:block;filter:grayscale(.2) contrast(1.05);transition:transform 1.2s ease,filter 1.2s} .kcaph-feature .imgwrap:hover img{transform:scale(1.05);filter:none} .kcaph-feature h3{font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--kcaph-gold2);margin-bottom:14px;font-weight:500} .kcaph-feature p{color:var(--kcaph-muted);max-width:420px} @media(max-width:760px){.kcaph-feature{grid-template-columns:1fr}} / ----- Gold button ----- / .kcaph .btn,.kcaph-btn{display:inline-block;margin-top:24px;padding:13px 34px;border:1px solid var(--kcaph-gold1);color:var(--kcaph-gold2);text-decoration:none;letter-spacing:.22em;text-transform:uppercase;font-size:12px;transition:.4s;background-size:200% 100%} .kcaph .btn:hover,.kcaph-btn:hover{background:var(--kcaph-gold-grad);color:#000;border-color:transparent;box-shadow:0 8px 30px rgba(212,175,55,.25)} / ----- Card grid (Portraits / Paintings / Concept / Digital) ----- / .kcaph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px} .kcaph-card{position:relative;overflow:hidden;aspect-ratio:3/4;border:1px solid rgba(229,228,226,.08)} .kcaph-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.82);transition:transform 1s ease,filter 1s} .kcaph-card .cap{position:absolute;inset:auto 0 0 0;padding:18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.88));transform:translateY(12px);opacity:0;transition:.5s} .kcaph-card .cap b{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--kcaph-plat);font-weight:500;display:block} .kcaph-card .cap span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--kcaph-gold2)} .kcaph-card:hover img{transform:scale(1.07);filter:none} .kcaph-card:hover .cap{transform:none;opacity:1} / ----- Scroll-in reveal (driven by inline IntersectionObserver snippet) ----- / .kcaph .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease} .kcaph .reveal.in{opacity:1;transform:none} / ----- About (artist statement layout) ----- / .kcaph-about{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:center} .kcaph-about .pic{position:relative;border:1px solid rgba(212,175,55,.25);overflow:hidden} .kcaph-about .pic img{width:100%;display:block;filter:grayscale(.3) contrast(1.05)} .kcaph-about h3{font-family:'Cormorant Garamond',serif;font-size:38px;color:var(--kcaph-gold2);margin-bottom:16px;font-weight:500} .kcaph-about p{color:#bdb9b2;margin-bottom:16px;max-width:560px} .kcaph-about .meta{margin-top:22px;display:flex;gap:34px;flex-wrap:wrap} .kcaph-about .meta div{border-left:1px solid rgba(212,175,55,.4);padding-left:14px} .kcaph-about .meta b{font-family:'Cinzel',serif;color:var(--kcaph-plat);font-size:13px;letter-spacing:.1em;display:block} .kcaph-about .meta span{font-size:12px;color:var(--kcaph-muted)} @media(max-width:760px){.kcaph-about{grid-template-columns:1fr}} / ----- Shop & Collab tile grid ----- / .kcaph-shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} .kcaph-shopcard{border:1px solid rgba(212,175,55,.18);padding:34px 26px;text-align:center;transition:.4s;background:linear-gradient(180deg,rgba(20,20,22,.5),transparent)} .kcaph-shopcard:hover{border-color:rgba(212,175,55,.55);transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.5)} .kcaph-shopcard .ic{font-size:30px;margin-bottom:14px} .kcaph-shopcard h4{font-family:'Cinzel',serif;color:var(--kcaph-gold2);letter-spacing:.12em;font-size:15px;margin-bottom:8px} .kcaph-shopcard p{color:var(--kcaph-muted);font-size:13px;margin-bottom:16px} .kcaph-shopcard .tag2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--kcaph-crystal)} / ----- Contact section / form polish ----- / .kcaph-contact{text-align:center;padding:15vh 6vw;position:relative;overflow:hidden} .kcaph-contact .watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:480px;max-width:80%;opacity:.07;animation:kcaph-spin 60s linear infinite} @keyframes kcaph-spin{to{transform:translate(-50%,-50%) rotate(360deg)}} .kcaph-contact h2{position:relative;font-family:'Cinzel',serif;font-size:clamp(28px,5vw,56px);background:var(--kcaph-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:18px} .kcaph-contact p{position:relative;color:var(--kcaph-muted);margin-bottom:30px} / Forminator / Jetpack form override inside .kcaph wrapper / .kcaph form input[type="text"], .kcaph form input[type="email"], .kcaph form textarea{ width:100%;background:rgba(20,20,22,.6);border:1px solid rgba(212,175,55,.25);color:#ece9e4; padding:14px 16px;font-family:'Inter',sans-serif;font-size:14px;border-radius:3px; } .kcaph form input:focus,.kcaph form textarea:focus{outline:none;border-color:var(--kcaph-gold2);box-shadow:0 0 0 2px rgba(212,175,55,.15)} / ----- DELIBERATELY NOT PORTED ----- * loading veil (#veil) — theme handles its own load transition; can re-add as Custom HTML block if Kimon wants it * global nav fixed-positioning — Thriving Artist's header keeps its own behavior; we restyle via Global Styles, not by overriding nav * `* { box-sizing: border-box; margin:0; padding:0 }` — would trample theme defaults * body{...} — replaced by Global Styles palette + font assignments in Site Editor ----------------------------------- / / ---- Homepage: hide wp-block-post-title (theme renders page name above content) ---- / body.page-id-2592 .wp-block-post-title { display: none !important; } / ---- Footer: override Thriving Artist orange (#ff6800) to black/gold ---- / footer.wp-block-template-part .has-foreground-background-color { background-color: var(--kcaph-black) !important; } footer.wp-block-template-part { background-color: var(--kcaph-black) !important; border-top: 1px solid rgba(212,175,55,.15) !important; } footer.wp-block-template-part p, footer.wp-block-template-part a, footer.wp-block-template-part .wp-block-paragraph { color: var(--kcaph-muted) !important; } footer.wp-block-template-part .wp-social-link { background-color: rgba(212,175,55,.12) !important; } footer.wp-block-template-part .wp-social-link svg, footer.wp-block-template-part .wp-social-link a { fill: var(--kcaph-gold2) !important; color: var(--kcaph-gold2) !important; } footer.wp-block-template-part .wp-social-link:hover { background-color: var(--kcaph-gold2) !important; } footer.wp-block-template-part .wp-social-link:hover svg { fill: var(--kcaph-black) !important; color: var(--kcaph-black) !important; } / ---- Nav: hide dropdown chevrons (no sub-menus configured) ---- / .wp-block-navigation-item .wp-block-navigation__submenu-icon { display: none !important; } / ---- Global Styles palette: brand palette overrides for theme color slots ---- Thriving Artist body rule: color: var(--wp--preset--color--luminous-vivid-amber) Overriding these CSS vars makes gallery/archive/blog pages inherit the brand look. / :root { --wp--preset--color--luminous-vivid-amber: #d4af37; / amber #fcb900 → brand gold / --wp--preset--color--foreground: #d4af37; / orange #ff6800 → brand gold / --wp--preset--color--background: #0a0a0b; / pure black → kcaph-black / --wp--preset--color--tertiary: #e5e4e2; / dark gray #292929 → platinum / } / ---- Mobile / touch: card captions always visible on touch devices ---- / @media (hover: none) { .kcaph-card .cap { transform: none !important; opacity: 1 !important; } .kcaph-card img { filter: grayscale(.05) brightness(.80) !important; } .kcaph-feature .imgwrap:hover img { transform: none !important; filter: grayscale(.2) contrast(1.05) !important; } } / ---- Effigy landing page (2627): full-bleed + title hide ---- / body.page-id-2627 .wp-block-post-title { display: none !important; } body.page-id-2627 main, body.page-id-2627 .entry-content, body.page-id-2627 .wp-block-post-content { max-width: none !important; padding: 0 !important; margin: 0 !important; } / Effigy page: escape Gutenberg .is-layout-constrained 620px child cap */ body.page-id-2627 .is-layout-constrained > .kcaph, body.page-id-2627 .wp-block-post-content > .kcaph { max-width: none !important; width: 100vw !important; position: relative !important; left: 50% !important; margin-left: -50vw !important; }