/* Theme Name: Kadence Ewa Narewska Theme URI: https://ewanarewska.pl Description: Child theme Kadence dla strony Ewa Narewska — indywidualne odczyty. Author: Ewa Narewska Template: kadence Version: 1.0.0 Text Domain: kadence-child-ewa */ /* * Header: a landing page, not a shop front. Nav now carries only "Indywidualny odczyt" * (see the "Główne menu" WP menu assigned to primary/mobile — WooCommerce cart/account/shop * pages still exist and work, just aren't linked from here). This section is purely visual: * warm cream background instead of stock-white, shorter, quieter typography. */ /* Kadence regenerates an inline #masthead background rule from Customizer settings (kadence-global-inline-css) that's enqueued after this stylesheet — same ID specificity, so on a tie the later one (Kadence's) wins by source order. !important is the only reliable way to override a same-specificity, dynamically-injected rule whose position in this child theme doesn't control. */ #masthead { background-color: #F6F0E6 !important; border-bottom: 1px solid rgba(194, 154, 88, 0.35); } .site-header-upper-wrap, .site-mobile-header-wrap .site-main-header-wrap { background-color: transparent; } .site-main-header-inner-wrap { min-height: 64px; } .site-title { font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: 0.02em; color: #2B211C; } #site-navigation a { font-family: "Manrope", sans-serif; font-size: 0.95rem; letter-spacing: 0.02em; color: #2B211C; } /* The mobile drawer panel itself is dark (Kadence's own drawer styling), unlike the cream desktop header — the mobile nav link needs the light side of the palette, not the dark text color used against the header's cream background. */ #mobile-site-navigation a { font-family: "Manrope", sans-serif; font-size: 1.05rem; letter-spacing: 0.02em; color: #F1E4D1; } #site-navigation a:hover, #mobile-site-navigation a:hover { color: #96733F; } .ewa-photo-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ewa-form-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr; grid-template-areas: "intro" "form" "image"; gap: 2rem; } .ewa-form-grid__intro { grid-area: intro; } .ewa-form-grid__form { grid-area: form; } .ewa-form-grid__image { grid-area: image; aspect-ratio: 4 / 5; } @media (min-width: 768px) { .ewa-form-grid > .wp-block-group__inner-container { grid-template-columns: 55fr 45fr; grid-template-areas: "intro image" "form form"; align-items: center; column-gap: 3rem; } } /* ===== Ciepły nocny rytuał — redesign ===== */ /* subtle grain on every dark section, kept behind content */ .ewa-dark { position: relative; isolation: isolate; } .ewa-dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-repeat: repeat; background-size: 160px 160px; background-image: url("data:image/svg+xml;utf8,"); } .ewa-dark > * { position: relative; z-index: 1; } /* Hero — subtle warm-to-dark gradient */ .ewa-hero-section { background-image: linear-gradient(120deg, #1B1512 0%, #1B1512 45%, #241b16 100%); } /* Photo frames — thin gold edge + soft base-shadow to unify with palette */ .ewa-photo-frame { position: relative; display: block !important; } .ewa-photo-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(27, 21, 18, 0) 55%, rgba(27, 21, 18, 0.24) 100%); } .ewa-photo-frame--gold { box-shadow: 0 0 0 1px rgba(194, 154, 88, 0.5); } /* Step cards — "Jak to działa", translucent over dark green */ .ewa-step-card { background: rgba(241, 228, 209, 0.07); border: 1px solid rgba(194, 154, 88, 0.25); } /* Variant cards */ .ewa-tarot-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .ewa-tarot-card--accent { box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.6); } /* "Co otrzymujesz" — thin line icons instead of bullets */ .ewa-icon-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 0.9rem; } .ewa-icon-list li { position: relative; padding-left: 2.2rem; } .ewa-icon-list li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 1.3rem; height: 1.3rem; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.9; } .ewa-icon-list li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C29A58' stroke-width='1.4'%3E%3Crect x='3' y='6' width='18' height='12' rx='1'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); } .ewa-icon-list li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C29A58' stroke-width='1.4'%3E%3Cpath d='M4 20l1-4.5L15.5 5 19 8.5 8.5 19z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); } .ewa-icon-list li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C29A58' stroke-width='1.4'%3E%3Cpath d='M4 5h7v15H4z'/%3E%3Cpath d='M13 5h7v15h-7z'/%3E%3C/svg%3E"); } .ewa-icon-list li:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C29A58' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4l2.5 2.5'/%3E%3C/svg%3E"); } /* FAQ — thin gold separators instead of default border */ .ewa-faq .wp-block-details { border: none; border-top: 1px solid rgba(194, 154, 88, 0.35); padding: 1.1rem 0; margin: 0; } .ewa-faq .wp-block-details:last-of-type { border-bottom: 1px solid rgba(194, 154, 88, 0.35); } .ewa-faq summary { cursor: pointer; font-weight: 600; color: #2B211C; } /* Thin gold ornament under a heading */ .ewa-heading-ornament { position: relative; padding-bottom: 1.3rem; } .ewa-heading-ornament::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: #C29A58; } /* Final CTA — soft gold glow */ .ewa-cta-glow::after { content: ""; position: absolute; top: -35%; left: 50%; transform: translateX(-50%); width: 70%; height: 85%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(194, 154, 88, 0.22), transparent 70%); } /* Buttons — subtle, elegant hover */ .wp-block-button__link { transition: filter 0.2s ease, transform 0.2s ease; } .wp-block-button__link:hover, .wp-block-button__link:focus { filter: brightness(1.1); transform: translateY(-1px); } /* * Kadence's generic page-hero title band (used on Checkout/Cart/Product/My account — any * page without a custom hero block) has a dark background set globally, but its title text * still inherits the normal (dark) body heading color — nearly invisible. The homepage's own * custom hero (.ewa-hero-section) already sets its own text color explicitly and is * unaffected; this fixes every other page that relies on the generic hero. */ .entry-hero-container-inner .entry-title, .entry-hero-container-inner .page-title { color: #FAF3E6; } /* Checkout — readable, on-brand error messages (WC Blocks default red is fine on contrast, just bring the weight/spacing in line with the rest of the form). */ .wc-block-components-validation-error, .wc-block-components-validation-error p { color: #8a2c1d; font-family: "Manrope", sans-serif; font-size: 0.9rem; } /* Checkout inputs — visible gold focus ring instead of the browser default blue outline. */ .wc-block-checkout input:focus, .wc-block-checkout select:focus, .wc-block-checkout textarea:focus, .wc-block-components-checkout-step__container input:focus { outline: 2px solid #C29A58; outline-offset: 1px; } /* * WooCommerce's own variation-form chrome (description, price, "Wyczyść" reset link, stock * text) inside the landing page's dark form section — same dark-on-dark problem as the WCPA * fields below, but this text comes straight from WooCommerce core templates, not the addon * plugin, so it isn't covered by the CSS custom properties used further down. Scoped to * .ewa-form-grid__form only — the standalone product page (light background) is untouched. */ .ewa-form-grid__form .woocommerce-variation-description, .ewa-form-grid__form .woocommerce-variation-description p, .ewa-form-grid__form .single_variation, .ewa-form-grid__form .single_variation p, .ewa-form-grid__form .stock, .ewa-form-grid__form p { color: #CDBDA8; } .ewa-form-grid__form .woocommerce-variation-price, .ewa-form-grid__form .woocommerce-variation-price .woocommerce-Price-amount, .ewa-form-grid__form .woocommerce-Price-amount { color: #C29A58; font-weight: 600; } .ewa-form-grid__form .reset_variations, .ewa-form-grid__form a:not(.wp-block-button__link) { color: #C29A58; } .ewa-form-grid__form .reset_variations:hover, .ewa-form-grid__form a:not(.wp-block-button__link):hover { color: #E0B876; } .ewa-form-grid__form .woocommerce-error, .ewa-form-grid__form .woocommerce-message, .ewa-form-grid__form .woocommerce-info { color: #F1E4D1; background: rgba(194, 154, 88, 0.12); border-color: #C29A58; } /* Own elements from earlier passes that turned out to have the same dark-on-dark bug. */ .ewa-form-grid__form .ewa-form-note, .ewa-form-grid__form .ewa-variant-warning { color: #CDBDA8; } .ewa-form-grid__form .ewa-selected-variant { color: #F1E4D1; } /* * Product Addons (WCPA) form on the landing page's dark "opowiedz mi o swojej sytuacji" * section. The plugin themes itself entirely through CSS custom properties (see * :root in style_1.css) with defaults meant for a light background — labels, help text, * radio/checkbox labels all render dark-on-dark here. Overriding the same variables, * scoped to this section only, is the plugin's own supported theming mechanism — no * plugin files touched, and the standalone product-page instance (light background) * keeps its normal defaults since it sits outside .ewa-form-grid. */ .ewa-form-grid .wcpa_wrap { --wcpaLabelColor: #F1E4D1; --wcpaLabelWeight: 600; --wcpaDescColor: #CDBDA8; --wcpaCheckLabelColor: #F1E4D1; --wcpaInputBgColor: #FFFCF7; --wcpaInputColor: #2B211C; --wcpaBorderColor: #A88F73; --wcpaBorderColorFocus: #C29A58; --wcpaCheckBorderColor: #C29A58; --wcpaCheckBgColor: #C29A58; --wcpaCheckTickColor: #1B1512; --wcpaRadioBorderColor: #CDBDA8; --wcpaRadioBgColor: #C29A58; } .ewa-form-grid .wcpa_wrap input::placeholder, .ewa-form-grid .wcpa_wrap textarea::placeholder { color: #8A7860; opacity: 1; } /* The single confirmation checkbox (not a checkbox-GROUP) uses its own wrapper (.wcpa_checkbox) rather than .wcpa_group_field, so --wcpaCheckLabelColor above never reaches its label — it was inheriting the plugin's dark default with nothing overriding it, rendering fully invisible on the dark section. */ .ewa-form-grid .wcpa_wrap .wcpa_checkbox label { color: #F1E4D1; } /* The confirmation checkbox's required asterisk lands after the entire (long) label sentence, reading as a stray mark far from anything — the field is validated as required regardless, so just drop the visible mark here rather than reflow the text. */ .ewa-form-grid .wcpa_checkbox .wcpa_required_ast { display: none; } /* The variation select ("Wariant odczytu") is WooCommerce's own markup, not WCPA's — same dark-on-dark label problem, styled separately. */ .ewa-form-grid__form .variations label { color: #F1E4D1; font-weight: 600; } .ewa-form-grid__form .variations select { background-color: #FFFCF7; color: #2B211C; border: 1px solid #A88F73; } .ewa-form-grid__form .variations select:focus { border-color: #C29A58; outline: 2px solid #C29A58; outline-offset: 1px; } /* * Character counters under the textarea fields (situation / question). * Deliberately understated — small, muted beige by default — so it doesn't visually compete * with the field itself; only shifts to gold near/at the limit. */ .ewa-form-grid .ewa-char-counter { font-size: 0.8rem; color: #CDBDA8; text-align: right; margin-top: 0.3rem; } .ewa-form-grid .ewa-char-counter.is-near-limit, .ewa-form-grid .ewa-char-counter.is-over-limit { color: #C29A58; font-weight: 600; } .ewa-form-grid .ewa-over-limit-warning { color: #F1E4D1; background: rgba(194, 154, 88, 0.15); border: 1px solid #C29A58; border-radius: 4px; padding: 0.6rem 0.8rem; font-size: 0.85rem; margin-top: 0.4rem; } /* Mobile — keep it light on decoration, dark sections clearly separated */ @media (max-width: 599px) { .ewa-dark::before { opacity: 0.035; } .ewa-tarot-card--accent { box-shadow: none; } }