/* ============================================================ WordPress integration overrides Bridges WP-generated markup (footer menus, block content) to the Cielo design system in styles.css. Loaded after styles.css. The header/mobile navs are rendered as flat elements by Cielo_Anchor_Walker, so they need no bridging here. ============================================================ */ /* --- Footer menus rendered via wp_nav_menu (ul>li>a) --- */ .footer-col ul { list-style: none; margin: 0; padding: 0; } /* --- Custom logo image sits where the "cielo" wordmark would --- */ .brand-logo img { display: block; height: 26px; width: auto; } /* --- Block editor content width (align-wide / align-full) --- */ .site-content { width: 100%; } .site-content > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; } .site-content > .alignwide { margin-left: auto; margin-right: auto; max-width: 1200px; } .site-content > *:not(.alignfull):not(.alignwide) { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .site-content > *:not(.alignfull):not(.alignwide) { padding-left: 32px; padding-right: 32px; } } /* --- Admin bar offset so the fixed banner + navbar clear it --- Banner sits just below the admin bar; the navbar sits below the banner (banner height = 40px). When scrolled the banner hides, so the navbar moves up to just below the admin bar. */ .admin-bar .promo-banner { top: 32px; } .admin-bar .nav-desktop { top: 72px; } /* 32 admin + 40 banner */ .admin-bar .nav-desktop.scrolled { top: 32px; } /* banner hidden */ .admin-bar .nav-mobile { top: 72px; } /* 32 admin + 40 banner */ .admin-bar .nav-mobile.scrolled { top: 40px; } /* 32 admin + 8 */ @media screen and (max-width: 782px) { .admin-bar .promo-banner { top: 46px; } .admin-bar .nav-desktop { top: 86px; } /* 46 admin + 40 banner */ .admin-bar .nav-desktop.scrolled { top: 46px; } .admin-bar .nav-mobile { top: 86px; } /* 46 admin + 40 banner */ .admin-bar .nav-mobile.scrolled { top: 54px; } /* 46 admin + 8 */ } /* --- Content spacing: clear the fixed banner + navbar on normal pages --- */ .site-content { padding-top: 112px; padding-bottom: 80px; min-height: 60vh; } /* Full-width / hero-led pages opt out so the first block can sit under the glass navbar */ .site-content--flush { padding-top: 0; padding-bottom: 0; min-height: 0; } .site-content--flush > *:not(.alignfull):not(.alignwide) { max-width: none; padding-left: 0; padding-right: 0; } /* ============================================================ CIELO — TEMPLATE BRIDGING Everything below maps WordPress- and WooCommerce-generated markup onto the design tokens already defined in styles.css. Nothing here changes styles.css itself, so that file can still be re-exported from the static build without losing any of this. Tokens in use: navy #335572 · sky #67a2d7 · soft #F7F8F9 card radius 24px · control radius 999px hairline rgba(51,85,114,0.10) · body copy rgba(51,85,114,0.8) ============================================================ */ /* ------------------------------------------------------------ 1. Shared controls ------------------------------------------------------------ */ /* styles.css's .btn-ghost is white-on-dark (about hero, CTA bands). Light sections need a navy-on-white twin; the static pages faked this with inline styles on every instance. */ .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 28px; border-radius: 999px; border: 1.5px solid rgba(51,85,114,0.2); background: transparent; color: #335572; font-size: 15px; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .btn-outline:hover { border-color: #335572; background: rgba(51,85,114,0.04); } /* Visible keyboard focus everywhere — the design system never defined one. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #67a2d7; outline-offset: 2px; border-radius: 4px; } /* ------------------------------------------------------------ 2. Blog — listing, pagination, article body ------------------------------------------------------------ */ /* WordPress wraps featured images in directly; the static markup used a bare SVG glyph. Centre either one. */ .blog-card .cover img { width: 100%; height: 100%; object-fit: cover; } .blog-empty { padding: 64px 0 80px; text-align: center; } .blog-empty p { font-size: 15px; color: rgba(51,85,114,0.8); margin-bottom: 24px; } /* the_posts_pagination() output */ .blog-page .pagination, .blog-page .navigation.pagination { margin-top: 56px; } .blog-page .pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .blog-page .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(51,85,114,0.12); font-size: 14px; color: rgba(51,85,114,0.8); transition: border-color 0.15s, background 0.15s, color 0.15s; } .blog-page .pagination .page-numbers:hover { border-color: #335572; color: #335572; } .blog-page .pagination .page-numbers.current { background: #335572; border-color: #335572; color: #fff; } .blog-page .pagination .page-numbers.dots { border-color: transparent; } /* Article body. styles.css styles .article-wrap and the hero image but stops short of the prose itself, so long-form posts had no typography at all. */ .article-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .article-content { font-size: 16px; line-height: 1.8; color: rgba(51,85,114,0.8); } .article-content > * + * { margin-top: 20px; } .article-content h2 { font-size: 22px; font-weight: 400; color: #335572; letter-spacing: -0.02em; line-height: 1.3; margin-top: 44px; margin-bottom: -4px; } .article-content h3 { font-size: 18px; font-weight: 400; color: #335572; line-height: 1.35; margin-top: 32px; margin-bottom: -6px; } .article-content a { color: #67a2d7; text-decoration: underline; transition: color 0.15s; } .article-content a:hover { color: #335572; } .article-content strong { font-weight: 500; color: #335572; } .article-content ul, .article-content ol { padding-left: 22px; } .article-content li + li { margin-top: 8px; } .article-content li::marker { color: rgba(51,85,114,0.35); } .article-content img, .article-content iframe, .article-content video { max-width: 100%; height: auto; border-radius: 20px; display: block; } .article-content figure { margin: 32px 0; } .article-content figcaption { font-size: 13px; color: rgba(51,85,114,0.55); margin-top: 10px; } .article-content blockquote { margin: 32px 0; padding: 4px 0 4px 22px; border-left: 2px solid #67a2d7; font-size: 17px; line-height: 1.7; color: #335572; } .article-content blockquote p + p { margin-top: 12px; } .article-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: rgba(51,85,114,0.06); border-radius: 6px; padding: 2px 6px; color: #335572; } .article-content pre { background: var(--bg-soft); border: 1px solid rgba(51,85,114,0.08); border-radius: 16px; padding: 20px 22px; overflow-x: auto; } .article-content pre code { background: none; padding: 0; } .article-content hr { border: 0; border-top: 1px solid rgba(51,85,114,0.10); margin: 44px 0; } .article-content table { width: 100%; border-collapse: collapse; font-size: 15px; } .article-content th, .article-content td { padding: 12px 0; border-bottom: 1px solid rgba(51,85,114,0.08); text-align: left; } .article-content th { color: #335572; font-weight: 400; } .article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; } .article-tags .chip { text-decoration: none; } .article-back { margin-top: 48px; } .article-pagelinks { margin-top: 32px; font-size: 14px; color: rgba(51,85,114,0.8); } /* ------------------------------------------------------------ 3. Shop grid ------------------------------------------------------------ */ .product-card.is-out-of-stock .img-inner { opacity: 0.55; } .product-card.is-out-of-stock .select { color: rgba(51,85,114,0.45); } /* Woo prints its own price markup inside .price */ .product-card .price del { opacity: 0.5; margin-right: 6px; } .product-card .price ins { text-decoration: none; } .product-card .price .woocommerce-Price-amount { color: inherit; } /* The AJAX grid swap sets aria-busy while the request is in flight. */ #shopGrid[aria-busy="true"] { opacity: 0.45; transition: opacity 0.15s; pointer-events: none; } /* ------------------------------------------------------------ 4. WooCommerce notices ------------------------------------------------------------ */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { list-style: none; margin: 0 0 24px; padding: 14px 20px; border-radius: 16px; font-size: 14px; line-height: 1.6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .woocommerce-message { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.20); color: #16a34a; } .woocommerce-info { background: rgba(103,162,215,0.08); border: 1px solid rgba(103,162,215,0.18); color: #335572; } .woocommerce-error { background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.15); color: #b91c1c; } .woocommerce-error li { list-style: none; } .woocommerce-error li + li { margin-top: 6px; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: inherit; text-decoration: underline; } /* Woo puts a "View cart" / "Continue shopping" button inside the notice. */ .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { order: 2; margin-left: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: inherit; font-size: 13px; font-family: inherit; text-decoration: none; cursor: pointer; transition: opacity 0.15s; } .woocommerce-message .button:hover, .woocommerce-info .button:hover, .woocommerce-error .button:hover { opacity: 0.7; } /* ------------------------------------------------------------ 5. WooCommerce form fields Maps Woo's .form-row / .input-text markup onto the .field tokens. ------------------------------------------------------------ */ .woocommerce form .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 0; } .woocommerce form .form-row label, .woocommerce-form-row label { font-size: 14px; font-weight: 400; color: rgba(51,85,114,0.8); } .woocommerce form .form-row label .required, .woocommerce form .form-row label abbr.required { color: #67a2d7; text-decoration: none; border: 0; } .woocommerce form .form-row .optional { color: rgba(51,85,114,0.45); } .woocommerce form .form-row .woocommerce-input-wrapper { width: 100%; display: block; } .woocommerce form .input-text, .woocommerce form input[type="text"], .woocommerce form input[type="email"], .woocommerce form input[type="tel"], .woocommerce form input[type="password"], .woocommerce form input[type="number"], .woocommerce form input[type="search"], .woocommerce form select, .woocommerce-page form .input-text, .woocommerce-page form select { height: 44px; padding: 0 16px; border-radius: 999px; width: 100%; min-width: 0; border: 1.5px solid rgba(51,85,114,0.15); background: #fafafa; font-size: 14px; font-weight: 400; color: #335572; font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none; } .woocommerce form textarea, .woocommerce-page form textarea { min-height: 110px; padding: 12px 16px; border-radius: 18px; width: 100%; border: 1.5px solid rgba(51,85,114,0.15); background: #fafafa; font-size: 14px; color: #335572; font-family: inherit; resize: vertical; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .woocommerce form .input-text:focus, .woocommerce form select:focus, .woocommerce form textarea:focus, .woocommerce-page form .input-text:focus, .woocommerce-page form textarea:focus { border-color: #67a2d7; box-shadow: 0 0 0 3px rgba(103,162,215,0.12); } .woocommerce form .input-text::placeholder, .woocommerce form textarea::placeholder { color: rgba(51,85,114,0.40); } /* Native */ .cart-item .qty .quantity { display: flex; align-items: center; } .cart-item .qty input.qty { width: 62px; height: 38px; padding: 0 8px; text-align: center; border-radius: 999px; border: 1.5px solid rgba(51,85,114,0.20); background: #fff; color: #335572; font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s; } .cart-item .qty input.qty:focus { border-color: #67a2d7; } .cart-item .product-remove { flex-shrink: 0; margin-left: 8px; display: flex; } .cart-item .product-remove a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; color: rgba(51,85,114,0.30); transition: color 0.15s, background 0.15s; } .cart-item .product-remove a:hover { color: #335572; background: rgba(51,85,114,0.06); } .cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(51,85,114,0.10); } .cart-coupon { display: flex; gap: 8px; flex: 1; min-width: 240px; } .cart-coupon .input-text { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(51,85,114,0.15); background: #fafafa; color: #335572; font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s; } .cart-coupon .input-text:focus { border-color: #67a2d7; } .cart-actions .btn-outline { height: 44px; padding: 0 22px; font-size: 14px; } .cart-actions button[name="update_cart"]:disabled { opacity: 0.45; cursor: not-allowed; } /* Totals card */ .cart-summary .cielo-totals { width: 100%; border-collapse: collapse; } .cart-summary .cielo-totals th, .cart-summary .cielo-totals td { padding: 7px 0; font-size: 14px; font-weight: 400; color: rgba(51,85,114,0.8); text-align: left; vertical-align: top; } .cart-summary .cielo-totals td { text-align: right; } .cart-summary .cielo-totals .cart-discount td { color: #67a2d7; } .cart-summary .cielo-totals .order-total th, .cart-summary .cielo-totals .order-total td { border-top: 1px solid rgba(51,85,114,0.10); padding-top: 16px; margin-top: 16px; color: #335572; font-size: 16px; } .cart-summary .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; } .cart-summary .woocommerce-shipping-methods label { font-size: 14px; color: rgba(51,85,114,0.8); cursor: pointer; } .cart-summary .shipping-calculator-button { color: #67a2d7; text-decoration: underline; font-size: 13px; } .cart-summary .shipping-calculator-form { margin-top: 12px; text-align: left; } .cart-summary .wc-proceed-to-checkout { margin-top: 24px; } /* cielo_checkout_button_class() adds .cart-checkout, which styles.css already defines as the navy pill; it just needs the arrow puck and centring. */ .cart-summary .cart-checkout { justify-content: center; padding: 0 20px; text-decoration: none; } .cart-collaterals { min-width: 0; } .cart-collaterals .cross-sells { margin-top: 40px; } /* ------------------------------------------------------------ 8. My Account Not part of the static build; kept consistent so the checkout login / order history links don't drop out of the design. ------------------------------------------------------------ */ .cielo-wc-page .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: block; } .cielo-wc-page .woocommerce-MyAccount-navigation li { border-bottom: 1px solid rgba(51,85,114,0.08); position: relative; margin: 0; } .cielo-wc-page .woocommerce-MyAccount-navigation a { display: block; width: 100%; height: auto; padding: 14px 4px; border: 0; border-radius: 0; background: none; font-size: 15px; color: rgba(51,85,114,0.75); transition: color 0.15s; } .cielo-wc-page .woocommerce-MyAccount-navigation a:hover { border: 0; background: none; color: #335572; } .cielo-wc-page .woocommerce-MyAccount-navigation .is-active a { background: none; color: #335572; font-weight: 500; } .cielo-wc-page .woocommerce-MyAccount-navigation .is-active::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 2px; background: #335572; border-radius: 2px; } .cielo-wc-page .woocommerce-MyAccount-content { font-size: 15px; color: rgba(51,85,114,0.8); line-height: 1.7; } /* Account / order tables */ .cielo-wc-page .woocommerce-orders-table, .cielo-wc-page .shop_table:not(.cielo-totals):not(.woocommerce-checkout-review-order-table) { width: 100%; border-collapse: collapse; font-size: 14px; } .cielo-wc-page .shop_table th, .cielo-wc-page .shop_table td { padding: 14px 0; border-bottom: 1px solid rgba(51,85,114,0.08); text-align: left; font-weight: 400; color: rgba(51,85,114,0.8); } .cielo-wc-page .shop_table th { color: #335572; } /* Generic Woo buttons inside account pages */ .cielo-wc-page .woocommerce-button, .cielo-wc-page .woocommerce-Button, .cielo-wc-page form .button:not(.btn-outline):not(.btn-submit):not(.cart-checkout) { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 24px; border-radius: 999px; background: #335572; border: none; color: #fff; font-size: 14px; font-family: inherit; cursor: pointer; text-decoration: none; transition: opacity 0.15s; } .cielo-wc-page .woocommerce-button:hover, .cielo-wc-page form .button:not(.btn-outline):not(.btn-submit):not(.cart-checkout):hover { opacity: 0.88; } /* ------------------------------------------------------------ 9. Reduced motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .product-card .img-inner img, .blog-card .cover img { transition: none; } .product-card:hover .img-inner img, .blog-card:hover .cover img { transform: none; } } /* ------------------------------------------------------------ 10. Parity fix page-templates/template-home-demo.php renders .hero-navspace, but the rule for it exists only in the static build's styles.css — it was dropped when the stylesheet was ported into the theme, so the hero lost its nav spacer. Restored here rather than in styles.css, so that file stays a clean re-export of the static design system. ------------------------------------------------------------ */ .hero-navspace { height: 72px; flex-shrink: 0; position: relative; z-index: 1; } /* ============================================================ Single product page (woocommerce/content-single-product.php) Extends the .pd-* design system from styles.css with the bits the live WooCommerce template needs: real gallery images, a quantity stepper, disabled/out-of-stock states and a long description block. ============================================================ */ .cielo-single { display: block; } .cielo-single-product { display: block; } /* Gallery: real images inside the placeholder frames */ .pd-main-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pd-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #335572; font-size: 32px; font-weight: 500; letter-spacing: -0.02em; } .pd-thumb { padding: 0; overflow: hidden; font-family: inherit; } .pd-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* Notices (add-to-cart confirmations / errors) */ .pd-notices:empty { display: none; } .pd-notices .woocommerce-message, .pd-notices .woocommerce-error, .pd-notices .woocommerce-info { list-style: none; margin: 0 0 4px; padding: 12px 16px; border-radius: 12px; font-size: 14px; border: 1px solid rgba(51,85,114,0.12); background: rgba(103,162,215,0.08); color: #335572; } .pd-notices .woocommerce-error { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.2); color: #b91c1c; } .pd-notices .button { display: none; } /* Attribute label above each chip group */ .pd-attr-label { font-size: 13px; color: rgba(51,85,114,0.6); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .pd-attr + .pd-attr { margin-top: 4px; } /* Out-of-stock indicator */ .pd-stock--out { color: rgba(51,85,114,0.55); } .pd-stock--out::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(51,85,114,0.3); display: inline-block; } /* Sale price rendered inside .pd-price */ .pd-price del { color: rgba(51,85,114,0.45); font-size: 0.72em; margin-right: 8px; } .pd-price ins { text-decoration: none; } .pd-price .from, .pd-price .woocommerce-Price-amount { color: inherit; } /* Add-to-cart row: quantity stepper + button */ .pd-addrow { display: flex; align-items: stretch; gap: 12px; } .pd-qty { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; border: 1.5px solid rgba(51,85,114,0.15); border-radius: 999px; padding: 0 4px; height: 52px; } .pd-qty-btn { width: 36px; height: 100%; border: none; background: none; cursor: pointer; color: #335572; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 999px; transition: background 0.15s; } .pd-qty-btn:hover { background: rgba(51,85,114,0.06); } .pd-qty-input { width: 34px; text-align: center; border: none; outline: none; background: none; font-family: inherit; font-size: 15px; color: #335572; -moz-appearance: textfield; } .pd-add { flex: 1; } .pd-add:disabled { opacity: 0.45; cursor: not-allowed; } .pd-add:disabled:hover { opacity: 0.45; } /* Long description */ .pd-longdesc { max-width: var(--max); margin-inline: auto; padding: 8px 20px 24px; } @media (min-width: 768px) { .pd-longdesc { padding: 8px 32px 32px; } } .pd-longdesc h2 { font-size: 20px; font-weight: 400; color: #335572; letter-spacing: -0.02em; margin-bottom: 12px; } .pd-longdesc-body { font-size: 15px; line-height: 1.75; color: rgba(51,85,114,0.85); max-width: 68ch; } .pd-longdesc-body p { margin: 0 0 14px; } .pd-longdesc-body a { color: #67a2d7; text-decoration: underline; } .pd-longdesc-body ul, .pd-longdesc-body ol { margin: 0 0 14px; padding-left: 20px; } .pd-longdesc-body li { margin-bottom: 6px; } /* ============================================================ Cart drawer — free-shipping progress bar (functions.php: cielo_mini_cart_free_shipping_bar) ============================================================ */ .cd-ship-progress { padding: 14px 24px 12px; border-bottom: 1px solid rgba(51,85,114,0.08); background: rgba(103,162,215,0.05); } .cd-ship-progress .cd-ship-msg { font-size: 13px; color: rgba(51,85,114,0.85); text-align: center; margin-bottom: 8px; } .cd-ship-progress .cd-ship-msg .woocommerce-Price-amount { color: #335572; font-weight: 500; } .cd-ship-track { height: 6px; border-radius: 999px; background: rgba(51,85,114,0.10); overflow: hidden; } .cd-ship-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#67A2D7,#335572); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); } .cd-ship-progress.is-free { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.18); } .cd-ship-progress.is-free .cd-ship-msg { color: #16a34a; font-weight: 500; } .cd-ship-progress.is-free .cd-ship-fill { background: #22c55e; } /* ============================================================ Single product — WooCommerce native add-to-cart form Styled directly (no JS dependency) so the product page works and looks right even if js/single-product.js doesn't run. The chips are progressive enhancement layered over the native