/* ========================================================================== CĂRȚI CU SENS — STOREFRONT STYLESHEET ========================================================================== Theme: Hello Elementor Child Builder: Elementor Pro Commerce: WooCommerce DESIGN PRINCIPLES ----------------- - Calm, timeless editorial appearance - Faith expressed through content - Generous whitespace - Strong typography and readable text - Restrained use of gold - Book covers remain the visual focus RESPONSIVE STRATEGY ------------------- - Flexible base layouts - Width and orientation used together where necessary - Short landscape viewports handled separately - No device-specific styling - Elementor handles general layout - CSS handles orientation-specific exceptions ========================================================================== */ /* ========================================================================== 01. DESIGN TOKENS ========================================================================== */ body.ccs-storefront { --ccs-primary: #244A3C; --ccs-background: #FAF7F0; --ccs-gold: #B69A61; --ccs-sage: #DCE6DA; --ccs-cream: #F1E9DB; --ccs-text: #303630; --ccs-white: #FFFFFF; } /* ========================================================================== 02. BASE STYLES ========================================================================== */ body.ccs-storefront { background-color: var(--ccs-background); color: var(--ccs-text); } /* ========================================================================== 03. HERO SECTION ========================================================================== */ /* -------------------------------------------------------------------------- HERO DIVIDER -------------------------------------------------------------------------- */ .ccs-hero-divider { width: 240px !important; max-width: 100%; margin: 12px 0 18px; } .ccs-hero-divider .elementor-divider { padding: 0 !important; } .ccs-hero-divider .elementor-divider-separator { display: block !important; width: 100% !important; height: 2px; border: none !important; background: linear-gradient( 90deg, transparent 0%, #B69A61 35%, #B69A61 65%, transparent 100% ); filter: drop-shadow( 0 0 8px rgba(250, 247, 240, 0.9) ); } /* -------------------------------------------------------------------------- HERO TEXT — IVORY HAZE -------------------------------------------------------------------------- */ .ccs-hero-text { background: transparent !important; } .ccs-hero-text .elementor-heading-title, .ccs-hero-text .elementor-widget-text-editor p { text-shadow: 0 0 4px rgba(250, 247, 240, 0.75), 0 0 9px rgba(250, 247, 240, 0.55), 0 0 16px rgba(250, 247, 240, 0.35), 0 0 26px rgba(250, 247, 240, 0.15); } .ccs-hero-text .elementor-heading-title { color: var(--ccs-primary, #244A3C); } .ccs-hero-text .elementor-widget-text-editor p { color: var(--ccs-text, #303630); } /* ========================================================================== CĂRȚI CU SENS — RESPONSIVE TEXT READABILITY ========================================================================== */ @media screen and (max-width: 1024px) { .ccs-readable-text { background: rgba(250, 247, 240, 0.78); border-radius: 12px; padding: 20px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } } /* ========================================================================== CĂRȚI CU SENS — RESPONSIVE TEXT READABILITY ========================================================================== */ @media screen and (max-width: 1024px) { .ccs-readable-text, .ccs-readable-text h1, .ccs-readable-text h2, .ccs-readable-text h3, .ccs-readable-text p { text-shadow: 0 0 2px #FAF7F0, 0 0 5px #FAF7F0, 0 0 9px rgba(250, 247, 240, 0.95) !important; } } /* ========================================================================== 04. FOREST CLOSING SECTION ========================================================================== */ /* -------------------------------------------------------------------------- VERSE TEXT — CHARCOAL HALO -------------------------------------------------------------------------- */ body.page-id-7327 .ccs-verse-text, body.page-id-7327 .ccs-verse-text .elementor-heading-title, body.page-id-7327 .ccs-verse-text p { text-shadow: 0 0 4px rgba(15, 20, 18, 1), 0 0 9px rgba(15, 20, 18, 0.95), 0 0 18px rgba(15, 20, 18, 0.85), 0 0 30px rgba(15, 20, 18, 0.65), 0 0 45px rgba(15, 20, 18, 0.40) !important; } /* ========================================================================== 05. RESPONSIVE LAYOUT RULES ========================================================================== These rules use viewport dimensions, not device detection. Reference test viewports: Tablet portrait: 686 × 977 Tablet landscape: 1097 × 566 Phone portrait: 360 × 643 Phone landscape: 699 × 274 Elementor's own responsive settings remain width-based. ========================================================================== */ /* -------------------------------------------------------------------------- 05.1 — WIDE LAYOUT -------------------------------------------------------------------------- */ @media (min-width: 1200px) { /* Wide-screen overrides go here */ } /* -------------------------------------------------------------------------- 05.2 — MEDIUM LAYOUT -------------------------------------------------------------------------- */ @media (min-width: 600px) and (max-width: 1199px) and (min-height: 501px) { /* Medium-width overrides go here */ } /* -------------------------------------------------------------------------- 05.3 — NARROW PORTRAIT -------------------------------------------------------------------------- */ @media (max-width: 599px) and (orientation: portrait) { /* Section headings */ body.page-id-7327 .ccs-mobile-heading .elementor-heading-title { font-size: 24px !important; line-height: 1.25; } /* Paragraph text */ body.page-id-7327 .ccs-mobile-text p { font-size: 14px !important; line-height: 1.6; } } /* -------------------------------------------------------------------------- 05.4 — SHORT LANDSCAPE -------------------------------------------------------------------------- */ @media (max-height: 500px) and (orientation: landscape) { /* Short landscape overrides go here */ } /* ========================================================================== 07. CART & CHECKOUT ========================================================================== Reserved for dedicated Cărți cu sens WooCommerce pages. Planned classes: .ccs-cart-layout .ccs-checkout-layout ========================================================================== */ /* Main book title inside the description */ .ccs-book-content h2:first-of-type { color: #B69A61 !important; } /* Remaining section headings */ .ccs-book-content h2:not(:first-of-type), .ccs-book-content h3, .ccs-book-content h4, .ccs-book-content h5, .ccs-book-content h6 { color: #244A3C !important; } /* ========================================================== CĂRȚI CU SENS — FOOTER Landing page, cart, checkout and book products ========================================================== */ /* Footer background */ body:is(.page-id-7327, .page-id-7670, .page-id-7679) .elementor-location-footer .elementor-element-271b106 { background: #C4D2C1 !important; background-image: none !important; } /* Footer text */ body:is(.page-id-7327, .page-id-7670, .page-id-7679) .elementor-location-footer { color: #244A3C !important; } body:is(.page-id-7327, .page-id-7670, .page-id-7679) .elementor-location-footer :is(p, span, a) { color: #244A3C !important; } /* Footer links hover */ body:is(.page-id-7327, .page-id-7670, .page-id-7679) .elementor-location-footer a:hover { color: #B69A61 !important; } /* Navigation underline */ body:is(.page-id-7327, .page-id-7670, .page-id-7679) .elementor-location-footer .elementor-item::after { background-color: #B69A61 !important; } /* ========================================================================== LORE'S BOOKS — FOOTER TYPOGRAPHY ========================================================================== */ body.single-product.ccs-storefront .lores-books-footer .elementor-widget-text-editor p, body.single-product.ccs-storefront .lores-books-footer .elementor-widget-text-editor a, .lores-books-footer .elementor-widget-text-editor p, .lores-books-footer .elementor-widget-text-editor a { color: #F1E9DB !important; } /* ========================================================== CCS — SINGLE BOOK PRODUCT ========================================================== */ /* Remove Bytaria background */ body.single-product:has(.ccs-single-book).has-bytaria-bg::before { background-image: none !important; background-color: #FAF7F0 !important; } /* Footer background */ body.single-product:has(.ccs-single-book) .elementor-location-footer .elementor-element-271b106 { background: #C4D2C1 !important; background-image: none !important; } /* Footer text and links */ body.single-product:has(.ccs-single-book) .elementor-location-footer, body.single-product:has(.ccs-single-book) .elementor-location-footer :is(p, span, a) { color: #244A3C !important; } /* Hover */ body.single-product:has(.ccs-single-book) .elementor-location-footer a:hover { color: #B69A61 !important; } /* Underline */ body.single-product:has(.ccs-single-book) .elementor-location-footer .elementor-item::after { background-color: #B69A61 !important; } /* CCS — Product quantity field */ body.single-product.product_cat-carti-in-magazin .woocommerce div.product form.cart .quantity input.qty { width: 65px !important; min-width: 65px !important; box-sizing: border-box; } /* ========================================================== LORE'S BOOKS — ADD TO CART SUCCESS NOTICE ========================================================== */ /* Notice background */ body.single-product:has(.product_cat-carti-in-magazin) .woocommerce-message { background: #FAF7F0 !important; color: #244A3C !important; border: 1px solid rgba(182,154,97,.45) !important; border-radius: 10px !important; box-shadow: none !important; } /* Continue shopping + View cart */ body.single-product:has(.product_cat-carti-in-magazin) .woocommerce-message a.button, body.single-product:has(.product_cat-carti-in-magazin) .woocommerce-message a.button.wc-forward { background: #B69A61 !important; border: 1px solid #B69A61 !important; color: #244A3C !important; border-radius: 6px !important; font-weight: 600 !important; text-transform: none !important; box-shadow: none !important; } /* Hover */ body.single-product:has(.product_cat-carti-in-magazin) .woocommerce-message a.button:hover, body.single-product:has(.product_cat-carti-in-magazin) .woocommerce-message a.button.wc-forward:hover { background: #244A3C !important; border-color: #244A3C !important; color: #FAF7F0 !important; }