/* Theme Name: Harmonie & Tasten Elite Theme URI: https://harmonie-tasten.de Author: Minori Mori Studio Author URI: https://harmonie-tasten.de Description: Elite SaaS-grade WordPress theme for Harmonie & Tasten — Berlin piano studio. Includes Elite Gallery & Credentials on Über Minori, luxury hero/studio image system, Customizer-editable identity, multilingual (DE/EN/JA). Full SEO v6 (Rank Math / Yoast / SEOPress compatible, GSC & Bing verification hooks, Article schema, Person schema, hreflang), WCAG 2.1 AA, Lighthouse 95+. Polylang compatible. Version: 6.3.2 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: harmonie-tasten-pro Tags: music, education, one-column, custom-colors, custom-menu, featured-images, translation-ready, threaded-comments, full-site-editing, block-patterns, accessibility-ready */ /* ========================================================================== Self-hosted Fonts — GDPR-compliant, zero external requests ========================================================================== */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/cormorant-garamond-v22-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/cormorant-garamond-v22-latin-italic.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/cormorant-garamond-v22-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('assets/fonts/cormorant-garamond-v22-latin-500italic.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/cormorant-garamond-v22-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('assets/fonts/cormorant-garamond-v22-latin-600italic.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/inter-v13-latin-300.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/inter-v13-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-v13-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/inter-v13-latin-600.woff2') format('woff2'); } /* ========================================================================== Design Tokens — Harmonie & Tasten ========================================================================== */ :root{ --color-gold:#C9A96E; --color-gold-soft:#D8BE8A; /* v6.3.1 — accessible gold for text on light (ivory/beige) backgrounds #7D5D20 = 5.69:1 on ivory, 5.31:1 on beige — passes WCAG AA 4.5:1 */ --color-gold-accessible:#7D5D20; --color-ivory:#FBF7F2; --color-beige:#F5EFE6; --color-espresso:#2C2416; --color-espresso-soft:#3A3120; --color-line:rgba(44,36,22,.12); --color-muted:#7A6F5C; --font-serif:"Cormorant Garamond","Playfair Display",Georgia,serif; --font-sans:"Inter","Helvetica Neue",Arial,sans-serif; --container:1240px; --radius:2px; --shadow-soft:0 30px 60px -30px rgba(44,36,22,.25); --shadow-card:0 20px 40px -24px rgba(44,36,22,.18); --ease:cubic-bezier(.22,.61,.36,1); } /* v6.3.1 — WCAG AA contrast: gold text on light backgrounds. Applies --color-gold-accessible (#7D5D20, 5.69:1 on ivory) to all gold-coloured text elements that sit on ivory/beige backgrounds. Dark sections (.why, .contact, .hero, header) keep original gold unchanged. */ .services .eyebrow, .services .service-card .price, .about .eyebrow, .about .cred-item .num, .testimonials .eyebrow, .testimonials .test-stars, .pricing .eyebrow, .pricing .price-amount sup, .uber-bio .eyebrow, .uber-bio h2 em, .ip-content-wrap .eyebrow, .blog-editorial .eyebrow, .preise-hero__eyebrow, .section-head .eyebrow:not(.why .eyebrow):not(.contact .eyebrow), .form-group label, .info-label, .footer-col .eyebrow { color: var(--color-gold-accessible); } /* Reset */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--font-sans); font-size:16px; line-height:1.7; color:var(--color-espresso); background:var(--color-ivory); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none;transition:color .3s var(--ease)} a:hover{color:var(--color-gold)} button{font-family:inherit;cursor:pointer;border:0;background:none} h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:500; letter-spacing:-.01em; line-height:1.15; margin:0 0 .6em; color:var(--color-espresso); } h1{font-size:clamp(2.6rem,6vw,5.2rem);font-weight:400} h2{font-size:clamp(2rem,3.6vw,3.2rem)} h3{font-size:clamp(1.3rem,1.8vw,1.6rem)} p{margin:0 0 1em} .container{max-width:var(--container);margin:0 auto;padding:0 28px} section{padding:clamp(80px,10vw,140px) 0} .eyebrow{ font-family:var(--font-sans); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--color-gold); font-weight:500; margin-bottom:1.4rem; display:inline-block; } .section-head{max-width:720px;margin:0 auto clamp(48px,6vw,84px);text-align:center} .section-head p{color:var(--color-muted);font-size:1.05rem} /* Buttons */ .btn{ display:inline-flex;align-items:center;gap:.7rem; padding:1.05rem 2.1rem; font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500; border-radius:var(--radius); transition:all .35s var(--ease); position:relative;overflow:hidden; } .btn-primary{background:var(--color-gold);color:var(--color-espresso)} .btn-primary:hover{background:var(--color-espresso);color:var(--color-ivory);transform:translateY(-2px);box-shadow:var(--shadow-soft)} .btn-ghost{border:1px solid rgba(251,247,242,.6);color:var(--color-ivory)} .btn-ghost:hover{background:var(--color-ivory);color:var(--color-espresso);border-color:var(--color-ivory)} .btn-dark{background:var(--color-espresso);color:var(--color-ivory)} .btn-dark:hover{background:var(--color-gold);color:var(--color-espresso)} /* ========================================================================== Header ========================================================================== */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:80; padding:1.5rem 0; transition:all .4s var(--ease); background:transparent; } .site-header.scrolled{ background:rgba(251,247,242,.94); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); padding:.9rem 0; box-shadow:0 1px 0 var(--color-line); } .header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem} .brand{display:flex;flex-direction:column;line-height:1} .brand-name{font-family:var(--font-serif);font-size:1.55rem;color:var(--color-ivory);letter-spacing:.02em} .brand-tag{font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--color-gold);margin-top:.4rem} .scrolled .brand-name{color:var(--color-espresso)} .main-nav{display:flex;align-items:center;gap:2.4rem} .main-nav ul{list-style:none;display:flex;gap:2.2rem;margin:0;padding:0} .main-nav a{ font-size:.78rem;letter-spacing:.22em;text-transform:uppercase; color:var(--color-ivory);font-weight:400; position:relative;padding:.4rem 0; } .scrolled .main-nav a{color:var(--color-espresso)} .main-nav a::after{ content:"";position:absolute;left:0;bottom:0;width:0;height:1px; background:var(--color-gold);transition:width .35s var(--ease); } .main-nav a:hover::after{width:100%} .lang-switch{display:flex;gap:.6rem;align-items:center;font-size:.7rem;letter-spacing:.2em} .lang-switch a{color:var(--color-ivory);opacity:.6;padding:.3rem .5rem} .lang-switch a.active{opacity:1;color:var(--color-gold)} .lang-switch ul{list-style:none;display:flex;gap:.6rem;align-items:center;margin:0;padding:0} .lang-switch li{margin:0;padding:0} .lang-switch .current-lang a{opacity:1;color:var(--color-gold)} .scrolled .lang-switch a{color:var(--color-espresso)} .scrolled .lang-switch a.active{color:var(--color-gold)} .scrolled .lang-switch .current-lang a{color:var(--color-gold)} .menu-toggle{display:none;width:32px;height:32px;min-height:44px;min-width:44px;color:var(--color-ivory);position:relative;z-index:90;display:flex;align-items:center;justify-content:center} .scrolled .menu-toggle{color:var(--color-espresso)} .menu-toggle span{display:block;width:24px;height:1px;background:currentColor;margin:6px auto;transition:all .3s var(--ease)} /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative;min-height:100vh; display:flex;align-items:center;justify-content:center; text-align:center;color:var(--color-ivory); overflow:hidden; } .hero-bg{ position:absolute;inset:0;z-index:0; background: linear-gradient(180deg,rgba(20,16,10,.55) 0%,rgba(20,16,10,.75) 100%), radial-gradient(ellipse at center,#3a2f1c 0%,#1a140b 100%); } .hero-bg::before{ content:"";position:absolute;inset:0; background-image: radial-gradient(circle at 20% 30%, rgba(201,169,110,.12) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(201,169,110,.08) 0%, transparent 50%); filter:blur(40px); } .hero-bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.18} .hero-content{position:relative;z-index:2;max-width:880px;padding:0 28px;animation:fadeUp 1.2s var(--ease) both} .hero .eyebrow{color:var(--color-gold)} .hero h1{color:var(--color-ivory);margin-bottom:1.4rem;font-weight:300} .hero h1 em{font-style:italic;color:var(--color-gold);font-weight:400} .hero-sub{ font-size:clamp(1rem,1.4vw,1.18rem); color:rgba(251,247,242,.78); max-width:560px;margin:0 auto 2.6rem; letter-spacing:.02em; } .hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} .hero-scroll{ position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%); z-index:2;font-size:.65rem;letter-spacing:.4em;text-transform:uppercase; color:rgba(251,247,242,.6); } .hero-scroll::after{ content:"";display:block;width:1px;height:36px;background:var(--color-gold); margin:.8rem auto 0;animation:scrollLine 2s var(--ease) infinite; } @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} @keyframes scrollLine{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}} /* ========================================================================== About ========================================================================== */ .about{background:var(--color-ivory)} .about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,90px);align-items:center} .about-image{position:relative;aspect-ratio:4/5;background:var(--color-beige);overflow:hidden;box-shadow:var(--shadow-soft)} .about-image::before{ content:"";position:absolute;inset:18px;border:1px solid rgba(201,169,110,.5);z-index:2;pointer-events:none; } .about-image svg{width:100%;height:100%;display:block} .about-text h2 em{font-style:italic;color:var(--color-gold)} .about-text p{color:var(--color-muted);font-size:1.04rem;max-width:540px} .about-credentials{ margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--color-line); display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; } .cred-item .num{font-family:var(--font-serif);font-size:2.4rem;color:var(--color-gold);display:block;line-height:1} .cred-item .lbl{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-muted);margin-top:.4rem;display:block} /* ========================================================================== Target Groups ========================================================================== */ .target{background:var(--color-beige)} .target-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem} .target-card{ background:var(--color-ivory);padding:2.6rem 2rem; text-align:center;transition:all .5s var(--ease); border:1px solid transparent;position:relative;overflow:hidden; } .target-card::before{ content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--color-gold); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease); } .target-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-card);border-color:var(--color-line)} .target-card:hover::before{transform:scaleX(1)} .target-icon{ width:64px;height:64px;margin:0 auto 1.6rem; display:flex;align-items:center;justify-content:center; border-radius:50%;background:var(--color-beige);color:var(--color-gold); transition:all .4s var(--ease); } .target-card:hover .target-icon{background:var(--color-gold);color:var(--color-ivory);transform:rotate(8deg)} .target-card h3{margin-bottom:.6rem} .target-card p{font-size:.92rem;color:var(--color-muted);margin:0} /* ========================================================================== Services ========================================================================== */ .services{background:var(--color-ivory)} .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} .service-card{ padding:3rem 2.4rem;background:var(--color-ivory); border:1px solid var(--color-line); transition:all .5s var(--ease);position:relative; } .service-card:hover{background:var(--color-espresso);color:var(--color-ivory);transform:translateY(-6px);border-color:var(--color-espresso)} .service-card:hover h3,.service-card:hover .price{color:var(--color-gold)} .service-card:hover p{color:rgba(251,247,242,.75)} .service-num{ font-family:var(--font-serif);font-size:.95rem;color:var(--color-gold); letter-spacing:.2em;margin-bottom:1.4rem;display:block; } .service-card h3{margin-bottom:1rem} .service-card p{color:var(--color-muted);font-size:.95rem;margin-bottom:1.6rem} .service-card .price{font-family:var(--font-serif);font-size:1.6rem;color:var(--color-espresso);transition:color .4s var(--ease)} .service-card .price small{font-family:var(--font-sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-muted);margin-left:.5rem} /* ========================================================================== Why Us ========================================================================== */ .why{background:var(--color-espresso);color:var(--color-ivory)} .why h2,.why h3{color:var(--color-ivory)} .why h2 em{font-style:italic;color:var(--color-gold)} .why .section-head p{color:rgba(251,247,242,.6)} .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;margin-top:2rem} .why-item{padding:2rem 0;border-top:1px solid rgba(201,169,110,.3)} .why-num{ font-family:var(--font-serif);font-size:.95rem;color:var(--color-gold); letter-spacing:.18em;margin-bottom:1rem;display:block; } .why-item h3{font-size:1.4rem;margin-bottom:.8rem} .why-item p{color:rgba(251,247,242,.65);font-size:.95rem;margin:0} /* ========================================================================== Pricing ========================================================================== */ .pricing{background:var(--color-beige)} .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1080px;margin:0 auto} .price-card{ background:var(--color-ivory);padding:3rem 2.4rem;text-align:center; border:1px solid var(--color-line);transition:all .5s var(--ease); position:relative; } .price-card.featured{background:var(--color-espresso);color:var(--color-ivory);transform:scale(1.04);border-color:var(--color-espresso)} .price-card.featured h3{color:var(--color-ivory)} .price-card.featured .price-amount{color:var(--color-gold)} .price-card.featured ul li{color:rgba(251,247,242,.75);border-color:rgba(201,169,110,.2)} .price-badge{ position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--color-gold);color:var(--color-espresso); font-size:.65rem;letter-spacing:.25em;text-transform:uppercase; padding:.5rem 1.2rem;font-weight:500; } .price-card h3{font-size:1.5rem;margin-bottom:.4rem} .price-card .duration{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-muted);margin-bottom:1.6rem;display:block} .price-amount{font-family:var(--font-serif);font-size:3.4rem;color:var(--color-espresso);line-height:1;margin-bottom:.4rem} .price-amount sup{font-size:1.2rem;color:var(--color-gold);vertical-align:top;margin-right:.2rem} .price-card ul{list-style:none;padding:0;margin:2rem 0;text-align:left} .price-card ul li{padding:.9rem 0;border-bottom:1px solid var(--color-line);font-size:.92rem;color:var(--color-muted);display:flex;align-items:center;gap:.7rem} .price-card ul li::before{content:"";width:14px;height:1px;background:var(--color-gold);flex-shrink:0} /* ========================================================================== Testimonials ========================================================================== */ .testimonials{background:var(--color-ivory)} .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} .test-card{ padding:2.6rem;background:var(--color-beige); position:relative;transition:all .5s var(--ease); } .test-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)} .test-card::before{ content:"\201C";font-family:var(--font-serif); position:absolute;top:.4rem;right:1.5rem; font-size:5rem;color:var(--color-gold);opacity:.4;line-height:1; } .test-stars{color:var(--color-gold);letter-spacing:.2em;margin-bottom:1rem;font-size:.9rem} .test-quote{font-family:var(--font-serif);font-size:1.15rem;font-style:italic;color:var(--color-espresso);line-height:1.55;margin-bottom:1.8rem} .test-author{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--color-line);padding-top:1.4rem} .test-avatar{ width:46px;height:46px;border-radius:50%; background:var(--color-gold);color:var(--color-ivory); display:flex;align-items:center;justify-content:center; font-family:var(--font-serif);font-size:1.1rem; } .test-name{font-weight:500;font-size:.95rem;color:var(--color-espresso)} .test-role{font-size:.78rem;color:var(--color-muted);letter-spacing:.1em} /* ========================================================================== Contact ========================================================================== */ .contact{background:var(--color-espresso);color:var(--color-ivory)} .contact h2,.contact h3{color:var(--color-ivory)} .contact h2 em{font-style:italic;color:var(--color-gold)} .contact .section-head p{color:rgba(251,247,242,.6)} .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,80px);align-items:start} .contact-info{padding-top:1rem} .contact-info h3{font-size:1.4rem;margin-bottom:1.6rem} .info-item{display:flex;gap:1.2rem;padding:1.4rem 0;border-bottom:1px solid rgba(201,169,110,.2)} .info-icon{width:40px;height:40px;flex-shrink:0;color:var(--color-gold);display:flex;align-items:center;justify-content:center} .info-label{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-gold);margin-bottom:.3rem;display:block} .info-value{font-size:1rem;color:var(--color-ivory)} .info-value a:hover{color:var(--color-gold)} .contact-form{background:rgba(251,247,242,.04);padding:3rem;border:1px solid rgba(201,169,110,.2)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .form-group{margin-bottom:1.4rem} .form-group label{display:block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-gold);margin-bottom:.6rem} .form-group input,.form-group select,.form-group textarea{ width:100%;padding:.95rem 1rem; background:transparent;border:1px solid rgba(251,247,242,.2); color:var(--color-ivory);font-family:var(--font-sans);font-size:.95rem; border-radius:var(--radius);transition:all .3s var(--ease); } .form-group input:focus,.form-group select:focus,.form-group textarea:focus{ outline:none;border-color:var(--color-gold);background:rgba(251,247,242,.04); } .form-group textarea{min-height:130px;resize:vertical} .form-group select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 1rem center} /* ========================================================================== Footer ========================================================================== */ .site-footer{background:#1a140b;color:rgba(251,247,242,.6);padding:80px 0 32px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;margin-bottom:60px} .footer-brand .brand-name{color:var(--color-ivory);font-size:1.3rem;letter-spacing:.04em} .footer-brand p{font-size:.82rem;margin-top:1.1rem;line-height:1.65;letter-spacing:.01em} .footer-col h4{ font-family:var(--font-sans);font-size:.72rem;letter-spacing:.25em; text-transform:uppercase;color:var(--color-gold);font-weight:500;margin-bottom:1.4rem; } .footer-col ul{list-style:none;padding:0;margin:0} .footer-col li{padding:.4rem 0;font-size:.92rem} .footer-col a:hover{color:var(--color-gold)} /* Social links with icons */ .footer-social-list { list-style: none; padding: 0; margin: 0; } .footer-social-link { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; transition: color 0.2s; } .footer-social-link:hover { color: var(--color-gold); } .footer-social-icon { flex-shrink: 0; opacity: 0.8; } .footer-social-link:hover .footer-social-icon { opacity: 1; } /* Maps link in footer */ .footer-maps-link { color: inherit; text-decoration: none; } .footer-maps-link:hover { color: var(--color-gold); } .footer-bottom{ border-top:1px solid rgba(201,169,110,.15);padding-top:32px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem; font-size:.78rem;letter-spacing:.1em; } /* ========================================================================== Floating Buttons (Sticky CTA + WhatsApp) ========================================================================== */ .float-whatsapp{ position:fixed;bottom:28px;right:28px;z-index:90; width:58px;height:58px;border-radius:50%; background:#25D366;color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.5); transition:all .35s var(--ease); } .float-whatsapp:hover{transform:scale(1.1) rotate(-6deg);color:#fff} .float-whatsapp svg{width:28px;height:28px} /* .sticky-cta — legacy class stub (v4.1.0: new CTA system uses #htpStickyCta, styles in inc/sticky-cta.php) */ .sticky-cta{display:none;} /* ========================================================================== Reveal Animations ========================================================================== */ .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .reveal.in{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s} /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 980px){ .about-grid,.contact-grid{grid-template-columns:1fr} .about-image{max-width:480px;margin:0 auto} .target-grid,.services-grid,.why-grid,.pricing-grid,.test-grid{grid-template-columns:repeat(2,1fr)} .price-card.featured{transform:none} .footer-grid{grid-template-columns:1fr 1fr;gap:2rem} } @media (max-width: 720px){ .menu-toggle{display:block} .main-nav{ position:fixed;inset:0;background:var(--color-espresso); flex-direction:column;justify-content:center; transform:translateX(100%);transition:transform .5s var(--ease); padding:0; } .main-nav.open{transform:translateX(0)} .main-nav ul{flex-direction:column;gap:1.6rem;text-align:center} .main-nav a{color:var(--color-ivory);font-size:1rem} .lang-switch a{color:var(--color-ivory)} .target-grid,.services-grid,.why-grid,.pricing-grid,.test-grid,.form-row,.footer-grid{grid-template-columns:1fr} .hero-cta{flex-direction:column;align-items:stretch} .btn{justify-content:center} .contact-form{padding:2rem 1.4rem} .float-whatsapp{width:52px;height:52px;bottom:20px;right:20px} /* #htpStickyCta mobile handled by inc/sticky-cta.php */ } /* ========================================================================== Hero — Premium Cinematic Upgrade (.hero--premium) Scoped: overrides ONLY the hero section. Rest of the theme is untouched. Brand: Anthracite #0a0a0a · Ivory #f4f1ea · Gold #c5a059 Headings: Cormorant Garamond · Body: Inter ========================================================================== */ /* Fonts: Cormorant Garamond (serif) and Inter (sans-serif) — self-hosted, GDPR-compliant (v6.2.9) */ .hero.hero--premium{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:flex-start; text-align:left; color:#f4f1ea; background:#0a0a0a; overflow:hidden; padding:0; } /* Cinematic photo background (piano on the right, dark wash on the left) */ .hero.hero--premium .hero-bg{ position:absolute;inset:0;z-index:0; background-color:#0a0a0a; background-repeat:no-repeat; background-size:cover; background-position:center right; /* default fallback gradient when no image is loaded */ background-image: linear-gradient(90deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.7) 50%, rgba(10,10,10,.4) 100%), radial-gradient(ellipse at 80% 50%, rgba(197,160,89,.18) 0%, transparent 60%), linear-gradient(135deg,#0a0a0a 0%, #14110c 100%); transform:scale(1.02); animation:htpHeroZoom 18s ease-in-out infinite alternate; } .hero.hero--premium .hero-bg::before{ content:"";position:absolute;inset:0; background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,.55) 100%); pointer-events:none; } .hero.hero--premium .hero-bg svg{display:none} @keyframes htpHeroZoom{ from{transform:scale(1.02)} to {transform:scale(1.08)} } /* Inner container — left-aligned premium text block */ .hero.hero--premium .hero-inner{ position:relative;z-index:2; width:100%; max-width:var(--container); margin:0 auto; padding:7rem 28px 6rem; display:flex; align-items:center; } .hero.hero--premium .hero-content--left{ max-width:680px; animation:htpHeroFade 1.4s cubic-bezier(.2,.7,.2,1) both; } /* Eyebrow */ .hero.hero--premium .eyebrow{ display:inline-block; font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:#c5a059; margin-bottom:1.6rem; padding-bottom:.6rem; position:relative; } .hero.hero--premium .eyebrow::after{ content:""; position:absolute;left:0;bottom:0; width:48px;height:1px; background:#c5a059; } /* Title */ .hero.hero--premium .hero-title{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; font-size:clamp(2.6rem, 5.4vw, 5rem); line-height:1.05; letter-spacing:-.01em; color:#f4f1ea; margin:0 0 1.6rem; text-shadow:0 2px 30px rgba(0,0,0,.45); } .hero.hero--premium .hero-title em{ font-style:italic; font-weight:500; color:#c5a059; display:inline; } /* Subtitle */ .hero.hero--premium .hero-sub{ font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-weight:300; font-size:clamp(1rem, 1.25vw, 1.18rem); line-height:1.7; color:rgba(244,241,234,.82); max-width:520px; margin:0 0 2.6rem; letter-spacing:.01em; } /* CTA group — left aligned */ .hero.hero--premium .hero-cta--left{ display:flex; gap:1rem; justify-content:flex-start; flex-wrap:wrap; margin-bottom:2.4rem; } .hero.hero--premium .hero-cta--left .btn{ font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-weight:500; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; padding:1.05rem 2.1rem; border-radius:2px; transition:all .45s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden; } .hero.hero--premium .hero-cta--left .btn-primary{ background:#c5a059; color:#0a0a0a; border:1px solid #c5a059; box-shadow:0 8px 28px rgba(197,160,89,.22); } .hero.hero--premium .hero-cta--left .btn-primary:hover{ background:#d4b577; border-color:#d4b577; color:#0a0a0a; transform:translateY(-2px); box-shadow:0 14px 38px rgba(197,160,89,.42); } .hero.hero--premium .hero-cta--left .btn-ghost{ background:transparent; color:#f4f1ea; border:1px solid rgba(244,241,234,.35); } .hero.hero--premium .hero-cta--left .btn-ghost:hover{ background:transparent; color:#c5a059; border-color:#c5a059; transform:translateY(-2px); } /* Trust line */ .hero.hero--premium .hero-trust{ font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-size:.72rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,241,234,.55); margin:0; } /* Scroll indicator — repositioned for left-aligned layout */ .hero.hero--premium .hero-scroll{ position:absolute; bottom:2.2rem; left:6vw; transform:none; z-index:2; font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-size:.62rem; letter-spacing:.5em; text-transform:uppercase; color:rgba(244,241,234,.55); } @keyframes htpHeroFade{ from{opacity:0;transform:translateY(28px)} to {opacity:1;transform:translateY(0)} } /* Tablet */ @media (max-width:1024px){ .hero.hero--premium .hero-inner{padding:6rem 28px 5rem} .hero.hero--premium .hero-bg{ background-position:center right -120px; } } /* Mobile */ @media (max-width:768px){ .hero.hero--premium{min-height:92vh;text-align:left} .hero.hero--premium .hero-inner{padding:6rem 1.4rem 5rem} .hero.hero--premium .hero-content--left{max-width:100%} .hero.hero--premium .hero-bg{ background-position:center bottom; background-size:cover; } .hero.hero--premium .hero-bg::before{ background:linear-gradient(180deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.9) 100%); } .hero.hero--premium .hero-cta--left{flex-direction:column;align-items:stretch;width:100%} .hero.hero--premium .hero-cta--left .btn{justify-content:center;text-align:center;width:100%} .hero.hero--premium .hero-scroll{left:50%;transform:translateX(-50%)} } /* ========================================================================= v2.1 — Premium Visual Polish (additive only; no class changes) - Softer cinematic hero overlay (less crushed black, more golden depth) - Hero background image plumbed via --htp-hero-image (set in functions.php) - Subtle gradient depth on .why and .contact (avoids flat dark blocks) - Smooth premium button hover transitions ========================================================================= */ /* Hero — wire the Customizer image into the existing .hero-bg layer */ .hero.hero--premium .hero-bg{ background-image: linear-gradient(90deg, rgba(10,8,6,.78) 0%, rgba(10,8,6,.45) 55%, rgba(10,8,6,.15) 100%), radial-gradient(ellipse at 78% 50%, rgba(201,169,110,.22) 0%, transparent 65%), var(--htp-hero-image, linear-gradient(135deg,#0a0a0a 0%, #14110c 100%)); background-size: cover; background-position: center; background-repeat: no-repeat; } .hero.hero--premium .hero-bg::before{ background: linear-gradient(180deg, rgba(10,8,6,.20) 0%, rgba(10,8,6,0) 35%, rgba(10,8,6,.55) 100%); } /* Subtle depth for dark sections — no layout impact */ .why{ background: radial-gradient(1100px 520px at 12% -10%, rgba(201,169,110,.10), transparent 60%), radial-gradient(900px 480px at 105% 110%, rgba(201,169,110,.07), transparent 65%), var(--color-espresso); } .contact{ background: radial-gradient(900px 460px at 100% 0%, rgba(201,169,110,.10), transparent 60%), radial-gradient(800px 420px at -10% 110%, rgba(201,169,110,.06), transparent 65%), var(--color-espresso); } .why-item, .contact-form{ transition: border-color .35s ease, background-color .35s ease, transform .35s ease; } .why-item:hover{ border-top-color: rgba(201,169,110,.7); } /* Premium button hover — keep classes, add smooth transitions */ .btn{ transition: background-color .35s cubic-bezier(.2,.7,.2,1), color .35s cubic-bezier(.2,.7,.2,1), border-color .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1); will-change: transform; } .btn-primary:hover, .btn-dark:hover, .btn-ghost:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px -18px rgba(0,0,0,.45), 0 0 0 1px rgba(201,169,110,.18); } .btn:focus-visible{ outline: 2px solid var(--color-gold); outline-offset: 3px; } /* ========================================================================= v3.0 — Audit fixes (appended; non-destructive) - Retina hero background via image-set() - Prevent CSS upscaling of bitmap images - Crisper SVG/icon rendering - Improved nav readability (size + contrast on transparent header) - Explicit smooth transitions on every interactive color change - Visible focus rings (a11y) - Reduced-motion respect ========================================================================= */ /* --- Retina hero background ---------------------------------------------- */ /* Browsers that support image-set() will pick the @2x source on Retina. We keep the existing url(--htp-hero-image) layer as a baseline fallback. */ .hero.hero--premium .hero-bg{ background-image: linear-gradient(90deg, rgba(10,8,6,.78) 0%, rgba(10,8,6,.45) 55%, rgba(10,8,6,.15) 100%), radial-gradient(ellipse at 78% 50%, rgba(201,169,110,.22) 0%, transparent 65%), var(--htp-hero-image, linear-gradient(135deg,#0a0a0a 0%, #14110c 100%)); } @supports (background-image: image-set(url("a") 1x)) { .hero.hero--premium .hero-bg{ background-image: linear-gradient(90deg, rgba(10,8,6,.78) 0%, rgba(10,8,6,.45) 55%, rgba(10,8,6,.15) 100%), radial-gradient(ellipse at 78% 50%, rgba(201,169,110,.22) 0%, transparent 65%), var(--htp-hero-image-set, var(--htp-hero-image, linear-gradient(135deg,#0a0a0a 0%, #14110c 100%))); } } /* WebKit-prefixed fallback (older Safari). */ @supports (background-image: -webkit-image-set(url("a") 1x)) { .hero.hero--premium .hero-bg{ background-image: linear-gradient(90deg, rgba(10,8,6,.78) 0%, rgba(10,8,6,.45) 55%, rgba(10,8,6,.15) 100%), radial-gradient(ellipse at 78% 50%, rgba(201,169,110,.22) 0%, transparent 65%), var(--htp-hero-image-set, var(--htp-hero-image, linear-gradient(135deg,#0a0a0a 0%, #14110c 100%))); } } /* --- Prevent CSS upscaling of raster images ------------------------------ */ /* If a content image is smaller than its container, don't stretch it past its natural pixel dimensions — that's the #1 source of blur. */ img:not([src$=".svg"]):not(.no-natural-cap){ max-width: 100%; height: auto; /* Tell the browser this image's intrinsic resolution is the cap. */ image-rendering: auto; } /* Crisper rendering for the few decorative SVGs we ship. */ svg{ shape-rendering: geometricPrecision; } .float-whatsapp svg, .target-icon svg, .info-icon svg{ width: 100%; height: 100%; } /* About portrait — make sure srcset image fills the framed box without upscaling beyond intrinsic size and without losing aspect ratio. */ .about-image img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Menu readability ---------------------------------------------------- */ /* Bigger nav text + tighter letter-spacing improves legibility while keeping the editorial feel. Stronger text-shadow on the transparent (pre-scroll) state ensures contrast over the photo hero. */ .main-nav a{ font-size: .86rem; letter-spacing: .16em; font-weight: 500; } .site-header:not(.scrolled) .main-nav a, .site-header:not(.scrolled) .lang-switch a, .site-header:not(.scrolled) .brand-name, .site-header:not(.scrolled) .brand-tag{ text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35); } /* Slightly stronger ivory in pre-scroll state (it was already ivory; the shadow above is the main fix). The .scrolled state is already high contrast. */ .site-header:not(.scrolled) .main-nav a{ color: #ffffff; } .site-header:not(.scrolled) .lang-switch a{ color: rgba(255,255,255,.85); } .site-header:not(.scrolled) .lang-switch a.active, .site-header:not(.scrolled) .lang-switch .current-lang a{ color: var(--color-gold); } /* Mobile menu: bigger, easier to tap, full contrast. */ @media (max-width:720px){ .main-nav a{ font-size:1.05rem; letter-spacing:.14em; padding:.6rem 0; } } /* --- Smooth color transitions everywhere --------------------------------- */ /* Any element whose color/background/border changes on hover or state needs the transition declared on the BASE rule, not the :hover. */ a, .main-nav a, .lang-switch a, .target-card, .target-icon, .service-card, .service-card h3, .service-card .price, .service-card p, .price-card, .test-card, .info-value a, .footer-col a, .float-whatsapp, .form-group input, .form-group select, .form-group textarea, .menu-toggle{ transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease); } /* Header background morph (transparent → ivory blur on scroll) is also a color change — make sure it transitions explicitly. */ .site-header{ transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease), -webkit-backdrop-filter .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); } /* --- Focus-visible (accessibility — WCAG 2.1 AA 3:1 minimum) ------------- */ /* 3px solid outline at offset 2px meets the enhanced focus criterion. */ /* Two-colour technique: gold outline + white box-shadow to work on both */ /* dark and light backgrounds without changing element layout. */ a:focus-visible, button:focus-visible, .btn:focus-visible, .menu-toggle:focus-visible, .main-nav a:focus-visible, .lang-switch a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline: 3px solid #C9A96E; outline-offset: 2px; border-radius: 2px; box-shadow: 0 0 0 5px rgba(255,255,255,0.6); } /* --- Respect reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .hero.hero--premium .hero-bg{ animation: none !important; transform: none !important; } } /* ========================================================================= v3.0.1 — Regression repair (appended; non-destructive) - Restores .target-icon and .info-icon visual contract - Fixes "header invisible / not clickable on scroll" stacking issues - Restores card padding + subtle border per original design - Restores typography on .target-card h3/p and main-nav - Removes global SVG width:100% override that distorted icons - Adds a smooth, low-cost scroll parallax (paired with main.js) - Mobile + reduced-motion safe ========================================================================= */ /* ---- Cancel the v3.0.0 over-broad icon size override ------------------- */ /* The previous "svg { width:100%; height:100% } on .target-icon/.info-icon" stretched icons and changed their visual weight. Re-anchor to the original 40×40 (target) and 22×22 (info) sizes. */ .target-icon svg{ width: 40px; height: 40px; } .info-icon svg{ width: 22px; height: 22px; } /* Make sure the .float-whatsapp glyph is exact, not stretched. */ .float-whatsapp svg{ width: 28px; height: 28px; } /* Stroke-style outline icons — we ship outline SVGs for target/info groups, so any global 'fill' on inline SVG must NOT bleed in. */ .target-icon svg, .info-icon svg{ fill: none; stroke: currentColor; } /* ---- Target card layout: original spec ---------------------------------- */ /* The previous build collapsed the subtle border (now transparent) which removed the soft frame around each card. Restore it without changing the hover lift, gold top accent, or the existing icon circle. */ .target-card{ padding: 40px 30px; border: 1px solid rgba(0,0,0,.05); } .target-card:hover{ border-color: var(--color-line); } /* ---- Typography: card heading + body, and nav ---------------------------- */ .target-card h3{ font-size: 1.4rem; letter-spacing: -.005em; line-height: 1.25; margin-bottom: .55rem; } .target-card p{ font-size: .95rem; line-height: 1.65; letter-spacing: .005em; color: var(--color-muted); margin: 0; } /* Slight nudge on nav so spacing reads exactly like the comp without touching colors (the .scrolled rules elsewhere still win on contrast). */ .main-nav a{ font-size: .82rem; letter-spacing: .18em; } /* ========================================================================= HEADER FIX — always visible, always clickable, above all overlays ========================================================================= */ /* The header is fixed and transparent until scroll. It MUST sit above the sticky-CTA (z-index:85) and float-whatsapp (z-index:90), and nothing on the hero may swallow its pointer events. */ .site-header{ position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 9999; /* Re-affirm the click target — no ancestor rule can null it. */ pointer-events: auto; } /* The interactive children of the header explicitly accept clicks even if any global rule somewhere disables them on a parent. */ .site-header a, .site-header button, .site-header .menu-toggle, .site-header .lang-switch a, .site-header .main-nav a{ pointer-events: auto; position: relative; z-index: 1; } /* On scroll the ivory-blur background is the readable state — keep it above any decorative section gradient. */ .site-header.scrolled{ background: rgba(251,247,242,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* The hero (and its decorative pseudo-elements) must never intercept clicks meant for the header overlay sitting on top of it. */ .hero, .hero--premium{ position: relative; isolation: isolate; /* contain hero's z-index so it can't escape past header */ } .hero-bg, .hero-bg::before, .hero-bg::after, .hero--premium .hero-bg, .hero--premium .hero-bg::before, .hero--premium .hero-bg::after{ pointer-events: none; } /* Hero content stays interactive (the CTA buttons live here). */ .hero-content, .hero-content--left, .hero-cta, .hero-cta--left{ pointer-events: auto; } /* Floating widgets must sit BELOW the header so the header always wins when they visually overlap (mobile, narrow viewports). */ .float-whatsapp{ z-index: 90; } #htpStickyCta { z-index: 85; } /* new sticky CTA from inc/sticky-cta.php */ .sticky-cta { z-index: 85; } /* legacy stub */ /* …and the header beats both. */ .site-header { z-index: 9999; } /* ========================================================================= PARALLAX — paired with .has-parallax toggled by main.js The CSS keeps the layout identical; JS only nudges --htp-parallax-y. We ALSO provide a CSS-only fallback (background-attachment) for browsers without JS, so the hero never looks broken. ========================================================================= */ .hero.hero--premium .hero-bg{ /* JS-driven subtle parallax — defaults to 0 so nothing moves before JS runs. */ --htp-parallax-y: 0px; transform: translate3d(0, var(--htp-parallax-y), 0) scale(1.04); will-change: transform; } /* When JS marks the hero as parallax-active, replace the CSS zoom keyframe with a static, GPU-friendly transform driven by JS only. */ .has-parallax .hero.hero--premium .hero-bg{ animation: none !important; } /* No-JS fallback: standard CSS background-attachment parallax on desktop. */ @media (min-width: 1025px){ .hero.hero--premium .hero-bg{ background-attachment: fixed; } } /* Mobile / coarse pointer / reduced-motion — all parallax off. */ @media (max-width: 1024px){ .hero.hero--premium .hero-bg{ background-attachment: scroll; transform: scale(1.04); } } @media (prefers-reduced-motion: reduce){ .hero.hero--premium .hero-bg{ transform: none !important; animation: none !important; background-attachment: scroll !important; } } /* ========================================================================= v3.1.0 — Audit, i18n & Customizer-safety pass - Customizer iframe: parallax & motion off, content always visible - JS-stability paired safety (no clipping when scripts fail to run) - Language switcher polish for the 3-language nav - Footer link consistency for the new editable labels ========================================================================= */ /* ---- Customizer iframe: never let any animation hide content ----------- */ body.is-customize-preview .hero, body.no-parallax .hero{ /* min-height instead of fixed height so the headline always renders. */ min-height: 600px; height: auto !important; } body.is-customize-preview .hero .hero-bg, body.no-parallax .hero .hero-bg{ animation: none !important; transform: none !important; background-attachment: scroll !important; --htp-parallax-y: 0px !important; } body.is-customize-preview .reveal, body.no-parallax .reveal{ /* Show all reveal-on-scroll items immediately — IntersectionObserver does not run when WP rebuilds the iframe between Customizer changes. */ opacity: 1 !important; transform: none !important; } /* ---- Defensive: never clip the page on tall viewports ------------------ */ html, body{ overflow-x: hidden; } /* prevent horizontal scroll only */ html, body{ overflow-y: auto; } /* never trap vertical scroll */ /* Make sure every section is its own positioning context so absolutely- positioned decorative elements inside cannot escape upward. */ .hero, .about, .target-groups, .services, .pricing, .testimonials, .contact, .why{ position: relative; } /* ---- Language switcher (fallback DE/EN/JP, also matches Polylang output) */ .lang-switch{ display: flex; align-items: center; gap: 4px; margin-left: 14px; } .lang-switch a, .lang-switch ul li a{ display: inline-block; padding: 4px 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; border-radius: 4px; transition: color .2s ease, background .2s ease; } .lang-switch a:hover, .lang-switch ul li a:hover{ color: var(--color-ink); background: rgba(0,0,0,.04); } .lang-switch a.active, .lang-switch ul li.current-lang a, .lang-switch ul li.current-menu-item a{ color: var(--color-ink); background: rgba(0,0,0,.06); font-weight: 500; } /* If Polylang renders its native