/* Theme Name: CustomFit Theme Theme URI: http://customfit.ro/ Author: Antigravity Author URI: http://customfit.ro/ Description: A modern, glassmorphism-based WooCommerce theme inspired by our admin dashboard. Ready for WordPress 7 and WooCommerce 10.5. Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: customfit Tags: woocommerce, modern, glassmorphism, tailwindcss, dark-mode */ /* ─── Inter ─────────────────────────────────────────────────────────────── * * The old rule pointed at assets/Inter.ttf, which is not a font: it is a * 295 KB saved GitHub HTML page (it starts with ""). Every * visitor downloaded it, the browser threw it away, and Inter had never * actually rendered on the site — every "font-family: 'Inter'" rule was * quietly falling through to system-ui. * * Replaced with the real thing: Inter v20 variable (OFL, self-hosted), split * the way Google splits it so a page only pays for the alphabets it uses. * The latin-ext file is subset down to Latin Extended-A plus the Romanian * comma-below letters (ș ț Ș Ț), which is 15 KB instead of 83 KB. * * Inter-latin.woff2 47 KB a–z A–Z 0–9, punctuation, â î ă-less accents * Inter-latin-ext.woff2 15 KB ă Ă ș Ș ț Ț + the rest of Latin Extended-A * ──────────────────────────── * 62 KB total, against 295 KB of wasted HTML before. * * Not preloaded on purpose: a preload competes with the product photo for * bandwidth, and the LCP photo is the thing worth protecting. The metric- * matched fallback below makes the swap almost invisible anyway. * ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('assets/Inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('assets/Inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-017F, U+0218-021B, U+02BB-02BC, U+2C60-2C7F; } /* Metric-matched stand-in used while Inter is downloading. * * Without this, text is laid out in the system font and then relaid out in * Inter, which moves everything below it — the card rows on the shop archive * are sized by their content, so a few pixels of text height there push the * whole page. The overrides are computed from Inter's own metrics * (upem 2048, ascender 1984, descender -494) against Arial's average width, * so the placeholder occupies virtually the same box as the real font. */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans'); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; } :root { --font-body: 'Inter', 'Inter Fallback', system-ui, sans-serif; } html, body { font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif; } /* * Very basic resets to prevent WordPress/WooCommerce default styles * from destroying our Tailwind layouts before Tailwind kicks in. */ body.woocommerce-page, body.woocommerce { background-color: #020617; /* slate-950 */ color: #f1f5f9; /* slate-100 */ } /* Hide default WooCommerce messages if we style our own, or at least make them dark */ .woocommerce-message, .woocommerce-error, .woocommerce-info { background-color: rgba(30, 41, 59, 0.8) !important; border-top-color: #3b82f6 !important; color: white !important; border-radius: 1rem; padding: 1rem 1.5rem !important; margin-bottom: 2rem !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); } .woocommerce-error { border-top-color: #ef4444 !important; } .woocommerce-info { border-top-color: #10b981 !important; } .woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button { background-color: rgba(255, 255, 255, 0.1) !important; color: white !important; border-radius: 0.5rem !important; padding: 0.5rem 1rem !important; } /* Fix stupid floating issues with default woo */ .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt { background-color: #3b82f6; color: #fff; -webkit-font-smoothing: antialiased; border-radius: 1rem; padding: 1rem 2rem; font-weight: 800; } .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover { background-color: #2563eb; color: #fff; } /* Force smaller single product title and description */ h1.cf-single-product-title { font-size: 1.5rem !important; /* Slightly smaller on mobile */ line-height: 1.2 !important; } div.cf-single-product-description { font-size: 0.9rem !important; line-height: 1.4 !important; } @media (min-width: 768px) { h1.cf-single-product-title { font-size: 1.6rem !important; } div.cf-single-product-description { font-size: 0.9rem !important; } } /* Ascunde destinatia de livrare (ex: "Shipping to Bucuresti") din totalul cosului */ tr.woocommerce-shipping-totals p.woocommerce-shipping-destination { display: none !important; } /* Ascunde header-ul de "Shipping" / "Shipment 1" de e pe stanga in cos */ tr.woocommerce-shipping-totals th { display: none !important; } /* Evidentiere buton X (Stergere produs) din pagina de Cart - Inversat pentru contrast */ .cf-cart-item-remove a, .woocommerce a.remove, .woocommerce-cart table.cart td.product-remove a.remove, .woocommerce table.shop_table a.remove { color: white !important; background: #ef4444 !important; /* Red-500 solid */ font-weight: 900 !important; font-size: 1.4rem !important; line-height: 1 !important; width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; opacity: 0.9 !important; transition: all 0.2s ease-in-out !important; text-decoration: none !important; border: none !important; } .cf-cart-item-remove a:hover, .woocommerce a.remove:hover, .woocommerce-cart table.cart td.product-remove a.remove:hover, .woocommerce table.shop_table a.remove:hover { color: white !important; background: #dc2626 !important; /* Red-600 la hover */ opacity: 1 !important; transform: scale(1.15) !important; } /* ─── EXTRACTED FROM header.php ──────────────────────────── */ /* Custom scrollbar for webkit */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #0f172a; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Glass effect utilities */ .glass { background: var(--cf-surface-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--cf-surface-3); } /* Hide scrollbar for clean UI but allow scroll */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Essential WooCommerce resets to match Tailwind */ .woocommerce form .form-row { padding: 3px; margin: 0 0 6px; } .woocommerce form .form-row [type="email"], .woocommerce form .form-row [type="number"], .woocommerce form .form-row [type="password"], .woocommerce form .form-row [type="search"], .woocommerce form .form-row [type="tel"], .woocommerce form .form-row [type="text"], .woocommerce form .form-row [type="url"], .woocommerce form .form-row select, .woocommerce form .form-row textarea { width: 100%; } /* Add basic image responsiveness for Woo */ .woocommerce img { max-width: 100%; height: auto; display: block; } /* Page transition overlay — covers page on load, fades out when ready */ #cf-page-enter { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.80); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 1; pointer-events: none; transition: opacity 0.45s ease; } #cf-page-enter.cf-fade-out { opacity: 0; } /* Loading spinner keyframe */ @keyframes cf-spin { to { transform: rotate(360deg); } } /* ─── EXTRACTED FROM functions.php — Page Title Hide ─────── */ header.entry-header, .page-header, .entry-header, h1.entry-title, .single-page-header, .page-title, .elementor-page-title, .hfeed .hentry .entry-title { display: none !important; } /* ─── EXTRACTED FROM functions.php — Phone Hint ──────────── */ .cf-phone-hint { font-size: 0.72rem; margin-top: 0.3rem; padding: 0.35rem 0.65rem; border-radius: 6px; display: none; font-weight: 600; letter-spacing: 0.03em; } .cf-phone-hint.warning { background: rgba(239, 68, 68, 0.08); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); display: block; } .cf-phone-hint.info { background: rgba(219, 187, 117, 0.08); color: var(--cf-logo-color, #dbbb75); border: 1px solid rgba(219, 187, 117, 0.25); display: block; } /* ─── EXTRACTED FROM functions.php — Cookie Banner ───────── */ .cky-consent-bar .cky-title, .cky-consent-bar .cky-notice-des, .cky-consent-bar .cky-notice-des p { font-size: 13px !important; line-height: 1.4 !important; } .cky-notice-btn-wrapper { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; flex-direction: row !important; } .cky-btn-customize, [data-cky-tag="detail-button"], .cky-btn-reject, [data-cky-tag="reject-button"] { flex: 1 1 45% !important; padding: 8px 10px !important; font-size: 12px !important; margin: 0 !important; } .cky-btn-accept, [data-cky-tag="accept-button"] { flex: 1 1 100% !important; padding: 12px 16px !important; font-size: 14px !important; margin: 0 !important; } .cky-revisit-bottom-left, .cky-revisit-bottom-right, [data-cky-tag="revisit-consent"], .cky-revisit-hide { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ─── EXTRACTED FROM class-customfit-300-hero-widget.php ──── */ .cf-hw-hero { height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; color: #fff; margin-bottom: 4rem; background-repeat: no-repeat; background-position: center center; background-size: cover; } .cf-hw-hero-overlay { position: absolute; inset: 0; z-index: 0; } .cf-hw-hero-content { position: relative; z-index: 1; max-width: 800px; padding: 0 20px; animation: cfHwFadeIn 1.5s ease; } .cf-hw-title { font-family: var(--font-display, 'Outfit', sans-serif); font-size: 4.5rem; font-weight: 900; margin-bottom: 1rem; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; } .cf-hw-subtitle { font-family: var(--font-body, 'Inter', sans-serif); font-size: 1.25rem; font-weight: 300; margin-bottom: 2.5rem; color: rgba(255, 255, 255, 0.8); } .cf-hw-btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.5rem; background-color: var(--cf-logo-color, #dbbb75); color: #000; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; font-weight: 800; border-radius: 99px; transition: all 0.4s ease; border: 1px solid var(--cf-logo-color, #dbbb75); cursor: pointer; text-decoration: none; font-family: var(--font-body, 'Inter', sans-serif); } .cf-hw-btn:hover { background-color: transparent; color: var(--cf-logo-color, #dbbb75); } @keyframes cfHwFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1024px) { .cf-hw-title { font-size: 3.5rem; } } @media (max-width: 768px) { .cf-hw-title { font-size: 2.8rem; } } /* ─── EXTRACTED FROM class-customfit-301-trust-bar-widget.php ── */ .cf-301-trust-bar { display: flex; justify-content: space-around; padding: 2rem 5%; background-color: var(--cf-surface-1, #1a1a1a); border-top: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08)); border-bottom: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08)); flex-wrap: wrap; gap: 20px; margin-bottom: 6rem; } .cf-301-trust-item { display: flex; align-items: center; gap: 15px; } .cf-301-trust-item svg { width: 32px; height: 32px; fill: none; stroke: var(--cf-logo-color, #dbbb75); stroke-width: 1.5; } .cf-301-trust-text { font-family: var(--font-body, 'Inter', sans-serif); } .cf-301-trust-text h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 2px; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; } .cf-301-trust-text p { font-size: 0.8rem; color: var(--cf-text-muted, #999); margin: 0; } @media (max-width: 768px) { .cf-301-trust-bar { justify-content: flex-start; flex-direction: column; align-items: flex-start; padding: 2rem 10%; } } /* ─── EXTRACTED FROM class-customfit-302-collections-widget.php ── */ .cf-302-collections { padding: 4rem 5%; text-align: center; margin-bottom: 4rem; font-family: var(--font-body, 'Inter', sans-serif); color: #fff; } .cf-302-section-title { font-family: var(--font-display, 'Outfit', sans-serif); font-size: 2.5rem; margin-bottom: 5px; color: #fff; font-weight: 800; letter-spacing: -0.02em; } .cf-302-section-subtitle { font-size: 1rem; color: var(--cf-text-muted, #999); margin-bottom: 50px; font-weight: 400; } .cf-302-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .cf-302-card { position: relative; height: 60vh; min-height: 400px; overflow: hidden; border-radius: var(--border-radius-lg, 1.25rem); border: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08)); text-align: left; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: block; text-decoration: none; } .cf-302-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.2); } .cf-302-image { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); } .cf-302-card:hover .cf-302-image { transform: scale(1.05); } .cf-302-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.2) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; } .cf-302-card-title { color: #fff; font-family: var(--font-display, 'Outfit', sans-serif); font-size: 2.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.5rem 0; line-height: 1.1; } .cf-302-card-subtitle { font-size: 0.8rem; color: var(--cf-logo-color, #dbbb75); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; margin: 0; } @media (max-width: 1024px) { .cf-302-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .cf-302-grid { grid-template-columns: 1fr; } .cf-302-card { height: 400px; } } /* ─── EXTRACTED FROM class-customfit-303-trending-widget.php ── */ .cf-303-trending { padding: 4rem 5%; background-color: var(--cf-surface-1, #1a1a1a); border-top: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08)); font-family: var(--font-body, 'Inter', sans-serif); color: #fff; } .cf-303-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; } .cf-303-title { font-family: var(--font-display, 'Outfit', sans-serif); font-size: 2.5rem; margin-bottom: 0; color: #fff; font-weight: 800; letter-spacing: -0.02em; } .cf-303-view-all { color: var(--cf-text-muted, #999); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--cf-logo-color, #dbbb75); text-decoration: none; padding-bottom: 2px; transition: color 0.3s ease; } .cf-303-view-all:hover { color: #fff; } .cf-303-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .cf-303-card { position: relative; border-radius: var(--border-radius-lg, 1.25rem); overflow: hidden; border: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08)); display: block; text-decoration: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); aspect-ratio: 3/4; background: var(--cf-surface-3, #2a2a2a); } .cf-303-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.15); } .cf-303-card-bg { position: absolute; inset: 0; } .cf-303-card-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .cf-303-card:hover .cf-303-card-bg img { transform: scale(1.06); } .cf-303-card-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; } .cf-303-card-content { position: absolute; inset: 0; padding: 1.5rem; pointer-events: none; } .cf-303-prop-title { position: absolute; top: 1.5rem; left: 1.5rem; font-family: var(--font-display, 'Outfit', sans-serif); font-size: 1.4rem; font-weight: 900; color: white; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.1; max-width: 80%; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); margin: 0; } .cf-303-prop-price { position: absolute; bottom: 1.5rem; right: 1.5rem; font-size: 1.4rem; font-weight: 900; color: var(--cf-logo-color, #dbbb75); display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; } .cf-303-prop-badge-nou { position: absolute; bottom: 1.5rem; left: 1.5rem; background: var(--cf-logo-color, #dbbb75); color: black; padding: 0.35rem 0.75rem; border-radius: 99px; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); pointer-events: auto; } @media (max-width: 1024px) { .cf-303-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .cf-303-grid { grid-template-columns: 1fr; } .cf-303-card { height: 450px; } } /* ─── EXTRACTED FROM class-customfit-304-story-widget.php ─── */ .cf-304-story-section { display: flex; align-items: center; padding: 8rem 5%; gap: 4rem; max-width: 1400px; margin: 0 auto; font-family: var(--font-body, 'Inter', sans-serif); color: #fff; } .cf-304-story-content { flex: 1; } .cf-304-story-title { font-family: var(--font-display, 'Outfit', sans-serif); font-size: 3.5rem; font-weight: 900; margin-bottom: 1.5rem; color: #fff; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; } .cf-304-story-desc { font-size: 1.1rem; color: var(--cf-text-light, rgba(255, 255, 255, 0.6)); margin-bottom: 2rem; font-weight: 300; } .cf-304-btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.5rem; background-color: transparent; color: #fff; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; font-weight: 800; border-radius: 99px; transition: all 0.4s ease; border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; text-decoration: none; } .cf-304-btn-outline:hover { background-color: #fff; color: #000; border-color: #fff; } .cf-304-story-image { flex: 1; border-radius: var(--border-radius-lg, 1.25rem); overflow: hidden; border: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08)); } .cf-304-story-image img { width: 100%; height: auto; transform: scale(1); transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1); } .cf-304-story-image:hover img { transform: scale(1.03); } @media (max-width: 1024px) { .cf-304-story-section { flex-direction: column; } } @media (max-width: 768px) { .cf-304-story-title { font-size: 2.5rem; } .cf-304-story-section { padding: 4rem 5%; } } /* ─── EXTRACTED FROM class-customfit-305-footer-widget.php ── */ .cf-305-footer { position: relative; background: linear-gradient(to bottom, var(--cf-surface-1, #0f0f0f), #000000); color: #fff; padding: 6rem 5% 3rem; border-top: 1px solid var(--cf-border, rgba(255, 255, 255, 0.05)); font-family: var(--font-body, 'Inter', sans-serif); margin-top: auto; overflow: hidden; } /* Subtle glow effect behind the footer */ .cf-305-footer::before { content: ''; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 50vw; height: 100px; background: var(--cf-logo-color, #dbbb75); filter: blur(120px); opacity: 0.15; z-index: 0; pointer-events: none; } .cf-305-footer-grid, .cf-305-bottom { position: relative; z-index: 1; } .cf-305-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin: 0 auto 4rem; max-width: 100%; } /* Brand title with gradient text */ /* h2 since the heading levels were corrected; h3 kept so the rule still applies if an older cached footer markup is served. */ .cf-305-brand h2, .cf-305-brand h3 { font-family: var(--font-display, 'Outfit', sans-serif); font-size: 2.2rem; font-weight: 900; margin-bottom: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.4) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cf-305-brand-desc { color: var(--cf-text-light, rgba(255, 255, 255, 0.5)); font-size: 0.95rem; line-height: 1.6; margin-bottom: 2rem; max-width: 90%; font-weight: 300; } /* Pill-shaped Glass Newsletter Input */ .cf-305-newsletter { display: flex; align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 99px; padding: 0.35rem; transition: all 0.3s ease; backdrop-filter: blur(12px); max-width: 400px; } .cf-305-newsletter:focus-within { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .cf-305-newsletter input { background: transparent; border: none; color: #fff; padding: 0.75rem 1.2rem; flex: 1; outline: none; font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.9rem; width: 100%; } .cf-305-newsletter input::placeholder { color: rgba(255, 255, 255, 0.3); } .cf-305-newsletter button { background: var(--cf-logo-color, #dbbb75); color: #000; border: none; cursor: pointer; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; padding: 0.8rem 1.5rem; border-radius: 99px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .cf-305-newsletter button:hover { transform: scale(1.02); box-shadow: 0 0 15px rgba(219, 187, 117, 0.4); background: #fff; } /* Links Section */ /* h3 since the heading levels were corrected; h4 kept so the rule still applies if an older cached footer markup is served. */ .cf-305-links h3, .cf-305-links h4 { font-family: var(--font-display, 'Outfit', sans-serif); font-size: 1.1rem; font-weight: 800; margin-bottom: 1.5rem; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; } .cf-305-links ul { list-style: none; margin: 0; padding: 0; } .cf-305-links li { margin-bottom: 1rem; } .cf-305-links a { color: var(--cf-text-light, rgba(255, 255, 255, 0.45)); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.95rem; text-decoration: none; display: inline-block; position: relative; } /* Underline animation on hover */ .cf-305-links a::after { content: ''; position: absolute; width: 0; height: 1px; bottom: -2px; left: 0; background-color: #ffffff; transition: width 0.3s ease; } .cf-305-links a:hover { color: #ffffff; transform: translateX(4px); } .cf-305-links a:hover::after { width: 100%; } /* Bottom Bar */ .cf-305-bottom { border-top: 1px solid var(--cf-border, rgba(255, 255, 255, 0.05)); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--cf-text-muted, #777); max-width: 100%; margin: 0 auto; } /* Elegant Social Buttons */ .cf-305-socials { display: flex; gap: 15px; font-size: 1.1rem; } .cf-305-socials a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.02); color: var(--cf-text-muted, #999); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(255, 255, 255, 0.05); } .cf-305-socials a:hover { background: var(--cf-logo-color, #dbbb75); color: #000; border-color: var(--cf-logo-color, #dbbb75); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(219, 187, 117, 0.3); } .cf-305-legal a { margin-left: 20px; color: var(--cf-text-muted, #777); text-decoration: none; transition: color 0.3s ease; } .cf-305-legal a:hover { color: #fff; } /* Responsive Overrides */ @media (max-width: 1024px) { .cf-305-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 768px) { .cf-305-footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; } .cf-305-brand-desc { margin-left: auto; margin-right: auto; } .cf-305-newsletter { margin-left: auto; margin-right: auto; } .cf-305-footer::before { height: 150px; width: 100vw; } .cf-305-bottom { flex-direction: column; gap: 20px; text-align: center; } .cf-305-socials { justify-content: center; } .cf-305-legal a { margin: 0 10px; } } /* ─── EXTRACTED FROM page.php ──────────────────────────────── */ .content-styles { color: var(--cf-text-muted); line-height: 1.8; font-size: 1.125rem; } .content-styles h2 { font-size: 2rem; font-weight: 800; color: white; margin: 2.5rem 0 1.5rem; line-height: 1.2; } .content-styles h3 { font-size: 1.5rem; font-weight: 700; color: white; margin: 2rem 0 1rem; } .content-styles h4 { font-size: 1.25rem; font-weight: 600; color: white; margin: 1.5rem 0 1rem; } .content-styles p { margin-bottom: 1.5rem; } .content-styles ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; } .content-styles ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; } .content-styles li { margin-bottom: 0.5rem; } .content-styles a { color: var(--cf-logo-color); font-weight: 600; text-decoration: none; transition: all 0.2s; border-bottom: 1px solid transparent; } .content-styles a:hover { color: var(--cf-text-muted); border-bottom-color: var(--cf-text-muted); } .content-styles blockquote { border-left: 4px solid var(--cf-btn-bg); padding: 1.5rem; margin: 2rem 0; font-style: italic; color: var(--cf-text-muted); background: var(--cf-surface-1); border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; } .content-styles img { max-width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); margin: 2rem 0; } .content-styles pre { background: var(--cf-surface-3); padding: 1.5rem; border-radius: 1rem; overflow-x: auto; margin: 2rem 0; border: 1px solid var(--cf-surface-2); } .content-styles code { font-family: monospace; background: var(--cf-surface-2); padding: 0.2rem 0.4rem; border-radius: 0.25rem; color: var(--cf-logo-color); } /* ---EXTRACTED FROM woocommerce/cart/cart.php--- */ /* ─── CART PAGE — PREMIUM PRODUCT-CARD STYLE ─────────── */ .cf-cart, .cf-cart * { font-family: 'Inter', 'Outfit', system-ui, sans-serif; box-sizing: border-box; } /* ─── CART ITEMS LIST ─────────────────────────────────── */ .cf-cart-items { display: flex; flex-direction: column; gap: 0; } .cf-cart-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0.75rem; } .cf-cart-item:last-child { border-bottom: none; } .cf-cart-item:hover { background: rgba(255, 255, 255, 0.03); transform: translateX(4px); } /* Thumbnail — proportional, not 1:1 */ .cf-cart-item-thumb { width: 72px; min-height: 90px; border-radius: 0.75rem; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .cf-cart-item-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .cf-cart-item-thumb a { display: block; width: 100%; height: 100%; } /* Product Info */ .cf-cart-item-info { flex: 1; min-width: 0; } .cf-cart-item-name { color: white; font-size: 0.82rem; font-weight: 700; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; letter-spacing: 0.02em; } .cf-cart-item-name:hover { color: var(--cf-logo-color); } .cf-cart-item-meta { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; } .cf-cart-item-meta .cf-badge-mto { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.12rem 0.45rem; border-radius: 9999px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: #34d399; font-size: 0.48rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } /* Quantity */ .cf-cart-item-qty { flex-shrink: 0; } .cf-cart-item-qty .quantity { display: flex; align-items: center; } .cf-cart-item-qty input.qty { width: 2.8rem !important; text-align: center !important; background: rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: white !important; font-size: 0.8rem !important; font-weight: 700 !important; padding: 0.35rem 0.2rem !important; border-radius: 0.5rem !important; outline: none !important; font-family: 'Inter', 'Outfit', system-ui, sans-serif !important; backdrop-filter: blur(4px); } .cf-cart-item-qty input.qty:focus { border-color: var(--cf-logo-color) !important; box-shadow: 0 0 0 2px rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.12) !important; } /* Price */ .cf-cart-item-price { flex-shrink: 0; text-align: right; min-width: 75px; } .cf-cart-item-price .cf-price-value { color: var(--cf-logo-color); font-size: 0.85rem; font-weight: 800; } .cf-cart-item-price .cf-price-regular { display: inline-flex; position: relative; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.35); font-size: 0.85rem; font-weight: 800; text-decoration: none !important; margin-right: 0.15rem; } /* X drawn over regular price — matching single product page */ .cf-cart-item-price .cf-price-regular::before, .cf-cart-item-price .cf-price-regular::after { content: ''; position: absolute; top: 50%; left: -10%; width: 120%; height: 2px; background-color: currentColor; transform-origin: center; opacity: 0.8; border-radius: 2px; } .cf-cart-item-price .cf-price-regular::before { transform: translateY(-50%) rotate(18deg); } .cf-cart-item-price .cf-price-regular::after { transform: translateY(-50%) rotate(-18deg); } .cf-cart-item-price .cf-price-unit { display: block; color: rgba(255, 255, 255, 0.2); font-size: 0.48rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.1rem; } .cf-cart-item-price .cf-price-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; } /* Savings Badge */ .cf-savings-badge { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1rem; border-radius: 0.75rem; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.15); margin-top: 1rem; text-align: center; } .cf-savings-badge .cf-savings-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(16, 185, 129, 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #34d399; } .cf-savings-badge .cf-savings-text { color: rgba(255, 255, 255, 0.6); font-size: 0.65rem; font-weight: 600; } .cf-savings-badge .cf-savings-amount { color: #34d399; font-weight: 900; font-size: 0.85rem; } /* Remove Button */ .cf-cart-item-remove a { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: white; background: #ef4444; /* Solid Red-500 */ border: none; transition: all 0.3s; flex-shrink: 0; } .cf-cart-item-remove a:hover { color: white; background: #dc2626; /* Hover Red-600 */ transform: scale(1.15); } /* ─── ACTIONS ROW ────────────────────────────────────── */ .cf-cart-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .cf-cart-actions-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .cf-cart-coupon { display: flex; gap: 0.4rem; flex: 1; min-width: 0; } .cf-cart-coupon input { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: white !important; font-size: 0.75rem !important; padding: 0.55rem 0.75rem !important; border-radius: 0.6rem !important; outline: none !important; font-family: 'Inter', 'Outfit', system-ui, sans-serif !important; transition: border-color 0.25s !important; backdrop-filter: blur(4px); } .cf-cart-coupon input:focus { border-color: var(--cf-logo-color) !important; } .cf-cart-coupon input::placeholder { color: rgba(255, 255, 255, 0.18) !important; font-size: 0.7rem !important; } .cf-cart-coupon button { flex-shrink: 0; background: rgba(255, 255, 255, 0.04) !important; color: rgba(255, 255, 255, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 0.6rem !important; padding: 0.55rem 0.85rem !important; font-size: 0.6rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; cursor: pointer !important; transition: all 0.2s !important; font-family: 'Inter', 'Outfit', system-ui, sans-serif !important; } .cf-cart-coupon button:hover { background: rgba(255, 255, 255, 0.08) !important; color: white !important; } .cf-cart-update-btn button { background: none !important; color: rgba(255, 255, 255, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 9999px !important; padding: 0.35rem 0.85rem !important; font-size: 0.5rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; cursor: pointer !important; transition: all 0.2s !important; font-family: 'Inter', 'Outfit', system-ui, sans-serif !important; } .cf-cart-update-btn button:hover { color: white !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* ─── CART TOTALS ────────────────────────────────────── */ .cf-cart-totals-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .cf-cart-totals-section .cart_totals { background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; margin-bottom: 0 !important; } .cf-cart-totals-section h2 { display: none !important; } .cf-cart-totals-section .shop_table { background: none !important; border: none !important; border-collapse: collapse !important; } .cf-cart-totals-section .shop_table th { background: none !important; border: none !important; color: rgba(255, 255, 255, 0.35) !important; font-size: 0.65rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; padding: 0.4rem 0 !important; } .cf-cart-totals-section .shop_table td { background: none !important; border: none !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 0.8rem !important; font-weight: 600 !important; padding: 0.4rem 0 !important; text-align: right !important; } .cf-cart-totals-section .shop_table .order-total th { color: white !important; font-size: 0.7rem !important; font-weight: 800 !important; } .cf-cart-totals-section .shop_table .order-total td { color: var(--cf-logo-color) !important; font-size: 1.05rem !important; font-weight: 900 !important; } /* ─── PROCEED TO CHECKOUT BUTTON ─────────────────────── */ .cf-checkout-btn-wrapper { margin-top: 1.25rem; } .cf-checkout-btn-wrapper .wc-proceed-to-checkout { padding: 0; } .cf-checkout-btn-wrapper .checkout-button, .cf-checkout-cta { width: 100% !important; padding: 1rem 2rem !important; border: none !important; border-radius: 0.75rem !important; font-size: 0.85rem !important; font-weight: 800 !important; font-family: 'Inter', 'Outfit', system-ui, sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; background: linear-gradient(135deg, var(--cf-btn-bg), var(--cf-btn-grad)) !important; color: white !important; box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; text-decoration: none !important; position: relative; overflow: hidden; } .cf-checkout-btn-wrapper .checkout-button:hover, .cf-checkout-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.4) !important; filter: brightness(1.1) !important; } .cf-checkout-btn-wrapper .checkout-button::after { content: "→"; font-size: 1.1rem; transition: transform 0.3s; } .cf-checkout-btn-wrapper .checkout-button:hover::after { transform: translateX(4px); } /* ─── CTA SUBLABEL ───────────────────────────────────── */ .cf-cta-sublabel { text-align: center; color: rgba(255, 255, 255, 0.25); font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.65rem; } /* ─── TRUST CARDS GRID ───────────────────────────────── */ .cf-cart-trust-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } @media (max-width: 600px) { .cf-cart-trust-cards { grid-template-columns: 1fr; } } .cf-trust-card { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem 1rem; cursor: default; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s; } .cf-trust-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5); } .cf-trust-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .cf-trust-card-bg img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; filter: grayscale(1); transition: all 0.7s ease-out; } .cf-trust-card:hover .cf-trust-card-bg img { opacity: 0.32; filter: grayscale(0); transform: scale(1.08); } .cf-trust-card-bg .cf-trust-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%); } .cf-trust-card-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .cf-trust-card-label { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; backdrop-filter: blur(8px); } .cf-trust-card-heading { color: white; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .cf-trust-card-desc { color: rgba(255, 255, 255, 0.55); font-size: 0.68rem; font-weight: 400; line-height: 1.5; max-width: 220px; } .cf-trust-stars { display: flex; gap: 0.2rem; } .cf-trust-stars svg { width: 14px; height: 14px; color: #facc15; fill: currentColor; filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.4)); } /* ─── NLP REASSURANCE SECTION ────────────────────────── */ .cf-cart-reassurance { margin-top: 2rem; padding: 1.75rem; border-radius: 1rem; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); text-align: center; } .cf-cart-reassurance-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .cf-cart-reassurance-bg img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.12; filter: grayscale(1); } .cf-cart-reassurance-bg .cf-reassurance-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.8) 100%); } .cf-cart-reassurance-content { position: relative; z-index: 2; } /* ─── HIDE DEFAULT WOO STUFF ─────────────────────────── */ .cf-cart .woocommerce-cart-form>.shop_table { display: none !important; } /* Hide default WooCommerce Proceed to checkout from cart_totals */ .cf-cart-totals-section .wc-proceed-to-checkout { display: none !important; } .cf-cart-totals-section .cart_totals>h2 { display: none !important; } /* Hide cross-sells (handled separately if needed) */ .cf-cart .cross-sells { display: none !important; } /* WooCommerce notice overrides */ .cf-cart .woocommerce-message, .cf-cart .woocommerce-info, .cf-cart .woocommerce-error { font-family: 'Inter', 'Outfit', system-ui, sans-serif !important; font-size: 0.72rem !important; border-radius: 0.6rem !important; color: rgba(255, 255, 255, 0.8) !important; background: rgba(0, 0, 0, 0.3) !important; border-top: 3px solid var(--cf-logo-color) !important; border-left: none !important; margin-bottom: 0.75rem !important; padding: 0.85rem 1.25rem !important; } .cf-cart .woocommerce-message::before, .cf-cart .woocommerce-info::before { color: var(--cf-logo-color) !important; } .cf-cart .woocommerce-message a, .cf-cart .woocommerce-info a { color: var(--cf-logo-color) !important; font-weight: 700 !important; text-decoration: none !important; border-bottom: 1px solid rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.3) !important; transition: all 0.2s !important; } .cf-cart .woocommerce-message a:hover, .cf-cart .woocommerce-info a:hover { border-bottom-color: var(--cf-logo-color) !important; } .cf-cart .woocommerce-error { border-top-color: #f87171 !important; } .cf-cart .woocommerce-error::before { color: #f87171 !important; } /* ─── RESPONSIVE ─────────────────────────────────────── */ @media (max-width: 640px) { .cf-cart-item { display: flex; flex-wrap: nowrap; width: 100%; gap: 0.6rem; padding: 0.85rem 0; } .cf-cart-item-thumb { width: 52px; min-height: 68px; } .cf-cart-item-info { flex: 1; min-width: 0; } .cf-cart-item-qty input.qty { width: 2.2rem !important; font-size: 0.7rem !important; padding: 0.25rem 0.15rem !important; } .cf-cart-item-price { min-width: 55px; } .cf-cart-item-price .cf-price-value { font-size: 0.75rem; } .cf-cart-item-remove a { width: 22px; height: 22px; } /* Smaller coupon on mobile */ .cf-cart-coupon { gap: 0.3rem; } .cf-cart-coupon input { font-size: 0.65rem !important; padding: 0.4rem 0.5rem !important; } .cf-cart-coupon input::placeholder { font-size: 0.6rem !important; } .cf-cart-coupon button { padding: 0.4rem 0.6rem !important; font-size: 0.5rem !important; } .cf-cart-update-btn button { padding: 0.3rem 0.6rem !important; font-size: 0.45rem !important; } .cf-cart-reassurance { padding: 1.25rem 0.75rem; } .cf-cart-trust-cards { grid-template-columns: 1fr; } } /* ─── EMPTY CART ──────────────────────────────────────── */ .cf-cart-empty { text-align: center; padding: 3rem 1.5rem; } .cf-cart-empty-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.06); border: 2px solid rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: var(--cf-logo-color); } .cf-cart-empty-title { color: white; font-size: 1.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; } .cf-cart-empty-subtitle { color: var(--cf-logo-color); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1rem; } .cf-cart-empty-msg { color: rgba(255, 255, 255, 0.45); font-size: 0.78rem; font-weight: 400; max-width: 360px; margin: 0 auto 2rem; line-height: 1.7; } .cf-cart-empty-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 1rem 2rem; border: none; border-radius: 0.75rem; background: linear-gradient(135deg, var(--cf-btn-bg), var(--cf-btn-grad)); color: white; font-size: 0.85rem; font-weight: 800; font-family: 'Inter', 'Outfit', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.15em; text-decoration: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3); } .cf-cart-empty-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.4); filter: brightness(1.1); color: white; } .cf-cart-empty-btn::after { content: "→"; font-size: 1.1rem; transition: transform 0.3s; } .cf-cart-empty-btn:hover::after { transform: translateX(4px); } /* Recommended products in empty cart */ .cf-empty-recs { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .cf-empty-recs-title { color: rgba(255, 255, 255, 0.3); font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1rem; } .cf-empty-recs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } @media (max-width: 600px) { .cf-empty-recs-grid { grid-template-columns: repeat(2, 1fr); } } .cf-empty-rec-item { position: relative; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; display: block; } .cf-empty-rec-item:hover { border-color: rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.2); transform: translateY(-2px); box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.3); } .cf-empty-rec-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; filter: brightness(0.85); transition: all 0.4s; border-radius: 0.75rem; } .cf-empty-rec-item:hover img { filter: brightness(1); transform: scale(1.05); } /* CUSTOM FIT ultra big text background */ .cf-cart-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Inter', 'Outfit', system-ui, sans-serif; font-size: 8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; color: rgba(255, 255, 255, 0.025); pointer-events: none; user-select: none; z-index: 0; } @media (max-width: 600px) { .cf-cart-watermark { font-size: 4rem; } } /* Hide "added to cart" message on the cart page */ .cf-cart .woocommerce-message .added_to_cart, .woocommerce-cart .woocommerce-message:has(.added_to_cart) { display: none !important; } /* ─── FULL-WIDTH NLP CARD ─────────────────────────────── */ .cf-cart-nlp-full { grid-column: 1 / -1; min-height: 180px; } /* ---EXTRACTED FROM woocommerce/checkout/form-checkout.php--- */ /* ─── MULTI-STEP CHECKOUT STYLES ──────────────────────── */ .cf-checkout, .cf-checkout * { font-family: 'Inter', 'Outfit', system-ui, sans-serif; box-sizing: border-box; } /* ─── PRODUCT SUMMARY (compact, below button) ─────────── */ .cf-checkout-summary { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .cf-summary-item { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .cf-summary-item-left { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex: 1; } .cf-summary-item-name { color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-summary-item-name .cf-qty { color: rgba(255, 255, 255, 0.3); font-size: 0.65rem; font-weight: 600; margin-left: 0.2rem; } .cf-badge-mto { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.45rem; border-radius: 9999px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: #34d399; font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; flex-shrink: 0; } .cf-summary-item-price { display: flex; align-items: center; gap: 0.35rem; text-align: right; white-space: nowrap; flex-shrink: 0; } .cf-price-regular { color: rgba(255, 255, 255, 0.25); font-size: 0.62rem; font-weight: 500; text-decoration: line-through; } .cf-price-current { color: rgba(255, 255, 255, 0.5); font-size: 0.7rem; font-weight: 600; } .cf-price-current.cf-on-sale { color: #34d399; } .cf-summary-total { display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: 0.15rem; } .cf-summary-total-label { color: rgba(255, 255, 255, 0.4); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; margin-left: auto; margin-right: 0.5rem; } .cf-summary-total-value { color: var(--cf-logo-color); font-size: 1.05rem; font-weight: 900; } /* ─── STEP HEADER ROW (title left, dots right) ───────── */ .cf-step-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .cf-step-header .cf-step-indicator { margin-bottom: 0; flex-shrink: 0; order: 2; } .cf-step-header .cf-step-title { margin-bottom: 0; text-align: left; order: 1; } @media (max-width: 420px) { .cf-step-header { flex-direction: column; gap: 0.4rem; } .cf-step-header .cf-step-title { text-align: center; order: 1; } .cf-step-header .cf-step-indicator { order: 2; } } /* ─── STEP INDICATOR ─────────────────────────────────── */ .cf-step-indicator { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 0.75rem; } .cf-step-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; cursor: default; } .cf-step-dot.active { background: var(--cf-logo-color); border-color: var(--cf-logo-color); box-shadow: 0 0 12px rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.35); transform: scale(1.15); } .cf-step-dot.completed { background: rgba(16, 185, 129, 0.6); border-color: rgba(16, 185, 129, 0.8); } .cf-step-line { width: 30px; height: 2px; background: rgba(255, 255, 255, 0.08); transition: background 0.4s; } .cf-step-line.completed { background: rgba(16, 185, 129, 0.4); } /* ─── STEP PANELS ────────────────────────────────────── */ .cf-step-panel { display: none; opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.4s ease; } .cf-step-panel.active { display: block; } .cf-step-panel.visible { opacity: 1; transform: translateY(0); } /* ─── STEP TITLE ─────────────────────────────────────── */ .cf-step-title { color: white; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 0.85rem; padding-bottom: 0; border-bottom: none; text-align: center; } .cf-step-title.cf-step-title-large { font-size: 0.95rem; letter-spacing: 0.1em; margin-bottom: 0.25rem; } .cf-step-subtitle { display: block; color: rgba(255, 255, 255, 0.25); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.08em; margin-top: 0.2rem; text-transform: none; } /* ─── LABELS ─────────────────────────────────────────── */ .cf-checkout label { display: block; color: rgba(255, 255, 255, 0.4) !important; font-size: 0.65rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; margin-bottom: 0.4rem !important; } .cf-checkout label .required { color: var(--cf-logo-color) !important; } /* ─── FORM ROWS ──────────────────────────────────────── */ .cf-checkout .form-row { margin-bottom: 0.85rem !important; } .cf-checkout .woocommerce-input-wrapper { display: block; } /* ─── INPUTS ─────────────────────────────────────────── */ .cf-checkout input[type="text"], .cf-checkout input[type="email"], .cf-checkout input[type="tel"], .cf-checkout input[type="password"], .cf-checkout input[type="number"], .cf-checkout select, .cf-checkout textarea { width: 100%; background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: white !important; font-size: 0.95rem !important; padding: 0.85rem 1rem !important; border-radius: 0.75rem !important; transition: border-color 0.25s, box-shadow 0.25s; outline: none !important; font-family: 'Inter', 'Outfit', system-ui, sans-serif !important; backdrop-filter: blur(4px); } .cf-checkout input:focus, .cf-checkout select:focus, .cf-checkout textarea:focus { border-color: var(--cf-logo-color) !important; box-shadow: 0 0 0 3px rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.12) !important; } .cf-checkout input::placeholder, .cf-checkout textarea::placeholder { color: rgba(255, 255, 255, 0.18) !important; font-size: 0.85rem !important; } .cf-checkout textarea { min-height: 100px; resize: vertical; } /* ─── NEXT / ACTION BUTTON ───────────────────────────── */ .cf-step-btn { width: 100%; padding: 1rem 2rem; border: none; border-radius: 0.75rem; font-size: 0.85rem; font-weight: 800; font-family: 'Inter', 'Outfit', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; transition: all 0.3s ease; background: var(--cf-btn-bg, linear-gradient(135deg, #d4a017, #f5c842)); color: var(--cf-btn-text, #000); box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; position: relative; overflow: hidden; } .cf-step-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.4); filter: brightness(1.1); } .cf-step-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; filter: none !important; } .cf-step-btn .cf-btn-arrow { transition: transform 0.3s; font-size: 1.1rem; } .cf-step-btn:hover .cf-btn-arrow { transform: translateX(4px); } /* ─── SKIP LINK ──────────────────────────────────────── */ .cf-step-skip { display: block; text-align: center; color: rgba(255, 255, 255, 0.3); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.75rem; cursor: pointer; transition: color 0.2s; background: none; border: none; font-family: 'Inter', 'Outfit', system-ui, sans-serif; } .cf-step-skip:hover { color: rgba(255, 255, 255, 0.6); } /* ─── VALIDATION ─────────────────────────────────────── */ .cf-checkout .cf-field-error input, .cf-checkout .cf-field-error textarea { border-color: rgba(239, 68, 68, 0.5) !important; animation: cf-shake 0.4s ease; } .cf-field-error-msg { color: rgba(239, 68, 68, 0.8); font-size: 0.65rem; font-weight: 600; margin-top: 0.3rem; letter-spacing: 0.05em; } @keyframes cf-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* ─── SUCCESS STATE ──────────────────────────────────── */ .cf-checkout-success { text-align: center; padding: 2rem 0; } .cf-success-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(16, 185, 129, 0.1); border: 2px solid rgba(16, 185, 129, 0.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: #34d399; } .cf-success-title { color: white; font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; } .cf-success-msg { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; font-weight: 500; max-width: 320px; margin: 0 auto; line-height: 1.6; } /* ─── SPINNER ─────────────────────────────────────────── */ .cf-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(0, 0, 0, 0.15); border-top-color: currentColor; border-radius: 50%; animation: cf-spin 0.6s linear infinite; } @keyframes cf-spin { to { transform: rotate(360deg); } } /* ─── LOADING OVERLAY ────────────────────────────────── */ .cf-loading-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .cf-loading-overlay.active { opacity: 1; pointer-events: auto; } /* ─── SELECT2 ────────────────────────────────────────── */ .select2-container--default .select2-selection--single { background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 0.75rem !important; height: 46px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: white !important; line-height: 44px !important; padding-left: 1rem !important; font-family: 'Inter', 'Outfit', system-ui, sans-serif !important; font-size: 0.95rem !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; } .select2-dropdown { background: var(--cf-surface-1) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 0.6rem !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important; overflow: hidden; } .select2-container--default .select2-results__option { color: rgba(255, 255, 255, 0.7) !important; font-family: 'Inter', system-ui, sans-serif !important; padding: 0.55rem 0.9rem !important; font-size: 0.8rem !important; } .select2-container--default .select2-results__option--highlighted { background: var(--cf-surface-3) !important; color: white !important; } /* ─── NOTICES ────────────────────────────────────────── */ .woocommerce-NoticeGroup, .woocommerce-info, .woocommerce-message, .woocommerce-error { font-family: 'Inter', 'Outfit', system-ui, sans-serif !important; font-size: 0.8rem !important; border-radius: 0.6rem !important; color: rgba(255, 255, 255, 0.7) !important; background: rgba(0, 0, 0, 0.3) !important; border-top-color: var(--cf-logo-color) !important; } /* Hide the default WooCommerce "added to cart" notice on checkout */ .woocommerce-checkout .woocommerce-message { display: none !important; } .woocommerce-info a, .woocommerce-message a { color: var(--cf-logo-color) !important; } /* ─── COMPACT VIEW CART LINK ─────────────────────────── */ .cf-summary-view-cart { display: inline-flex; align-items: center; gap: 0.25rem; color: rgba(255, 255, 255, 0.3); font-size: 0.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: all 0.2s; padding: 0.25rem 0.55rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9999px; white-space: nowrap; } .cf-summary-view-cart:hover { color: var(--cf-logo-color); border-color: rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.3); } .cf-summary-view-cart svg { width: 10px; height: 10px; flex-shrink: 0; } /* ─── TRUST CARDS (Product-Card Style) ─────────────── */ .cf-trust-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } @media (max-width: 540px) { .cf-trust-cards { grid-template-columns: 1fr; } } .cf-trust-card { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem 1rem; cursor: default; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s; } .cf-trust-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5); } .cf-trust-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .cf-trust-card-bg img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.2; filter: grayscale(1); transition: all 0.7s ease-out; } .cf-trust-card:hover .cf-trust-card-bg img { opacity: 0.35; filter: grayscale(0); transform: scale(1.08); } .cf-trust-card-bg .cf-trust-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%); } .cf-trust-card-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .cf-trust-card-label { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; backdrop-filter: blur(8px); } .cf-trust-card-heading { color: white; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .cf-trust-card-desc { color: rgba(255, 255, 255, 0.55); font-size: 0.7rem; font-weight: 400; line-height: 1.5; max-width: 220px; } .cf-trust-stars { display: flex; gap: 0.2rem; } .cf-trust-stars svg { width: 16px; height: 16px; color: #facc15; fill: currentColor; filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.4)); } /* ─── HIDE WOOCOMMERCE DEFAULT STUFF ─────────────────── */ .cf-checkout .woocommerce-billing-fields>h3, .cf-checkout .woocommerce-additional-fields>h3, .cf-checkout .woocommerce-shipping-fields>h3 { display: none !important; } /* ─── COUPON FORM STYLING ────────────────────────────── */ .cf-checkout .checkout_coupon { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .cf-checkout .checkout_coupon .form-row-first input { background: rgba(0, 0, 0, 0.3) !important; } .cf-checkout .checkout_coupon .button { background: var(--cf-surface-3) !important; color: white !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0.6rem !important; padding: 0.7rem 1.2rem !important; font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; cursor: pointer !important; transition: all 0.2s !important; } .cf-checkout .checkout_coupon .button:hover { background: rgba(255, 255, 255, 0.1) !important; } /* ─── HIDE EVERYTHING WE MANAGE OURSELVES ────────────── */ .cf-checkout #order_review_heading { display: none !important; } /* Hide the real checkout review & payment in the DOM (we submit via AJAX instead) */ .cf-checkout #order_review { display: none !important; } /* ─── RESPONSIVE ─────────────────────────────────────── */ @media (max-width: 640px) { .cf-checkout-summary { margin-top: 0.75rem; padding-top: 0.65rem; } .cf-summary-total-value { font-size: 0.95rem; } } /* ─── INFO PANEL (Policy / Made-to-Order notice) ─────── */ .cf-info-panel { text-align: center; padding: 0.5rem 0; } .cf-info-header { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1rem; } .cf-info-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(250, 204, 21, 0.08); border: 2px solid rgba(250, 204, 21, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #facc15; } .cf-info-title { color: white; font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .cf-info-text { color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; line-height: 1.7; max-width: 520px; margin: 0 auto 1.25rem; text-align: left; } .cf-info-text strong { color: rgba(255, 255, 255, 0.7); font-weight: 700; } .cf-info-highlight { display: inline-block; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 0.5rem; padding: 0.6rem 0.9rem; margin: 0.75rem auto; color: rgba(52, 211, 153, 0.9); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; } .cf-info-welcome { color: var(--cf-logo-color); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.75rem; } /* --- Tip Option Selection (checkout step 4) --- */ .cf-tip-option input[type="radio"]:checked+div { background: rgba(250, 204, 21, 0.1) !important; border-color: rgba(250, 204, 21, 0.4) !important; color: #facc15; box-shadow: 0 0 15px rgba(250, 204, 21, 0.15); } .cf-tip-option input[type="radio"]:checked+div #cf_custom_tip_amount { color: #facc15 !important; border-bottom-color: #facc15 !important; } #cf_custom_tip_amount:focus { border-bottom-color: #facc15 !important; } /* Hide arrows for number input */ #cf_custom_tip_amount::-webkit-outer-spin-button, #cf_custom_tip_amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #cf_custom_tip_amount[type=number] { -moz-appearance: textfield; } /* ---EXTRACTED FROM woocommerce/myaccount/my-account.php (Block 1 Nav) --- */ .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .woocommerce-MyAccount-navigation ul li a { display: block; padding: 1rem 1.5rem; color: #94a3b8; font-weight: 700; text-decoration: none; border-radius: 1rem; transition: all 0.2s; border: 1px solid transparent; } .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(59, 130, 246, 0.1); color: #60a5fa; border-color: rgba(59, 130, 246, 0.2); } /* ---EXTRACTED FROM woocommerce/myaccount/my-account.php (Block 2 — Content/Forms) --- */ /* Make the default Woo content fit the theme */ .woocommerce-MyAccount-content.content-styles { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); padding: 2.5rem; border-radius: 1.5rem; shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); color: #cbd5e1; } .content-styles h2 { font-size: 1.5rem; font-weight: 800; color: white; margin-bottom: 1.5rem; margin-top: 1rem; } .content-styles h3 { font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 1rem; margin-top: 2rem; } .content-styles p { margin-bottom: 1.5rem; line-height: 1.7; } .content-styles a:not(.button) { color: #60a5fa; font-weight: 600; text-decoration: none; } .content-styles a:not(.button):hover { color: #93c5fd; text-decoration: underline; } .content-styles mark { background: rgba(59, 130, 246, 0.2); color: #93c5fd; padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-weight: bold; } /* Tables (Orders, Addresses) */ .content-styles table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 1.5rem; background: rgba(0, 0, 0, 0.2); border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); } .content-styles table th { color: #94a3b8; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: left; } .content-styles table td { padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: white; vertical-align: middle; } .content-styles table tr:last-child td { border-bottom: none; } .content-styles .button { background: #3b82f6; color: white; font-weight: 700; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; display: inline-block; transition: background 0.2s; font-size: 0.875rem; } .content-styles .button:hover { background: #2563eb; } /* Forms */ .content-styles label { display: block; color: #94a3b8; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; margin-top: 1rem; } .content-styles input[type="text"], .content-styles input[type="email"], .content-styles input[type="password"], .content-styles input[type="tel"], .content-styles select, .content-styles textarea { width: 100%; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); color: white; font-size: 1rem; padding: 0.75rem 1rem; border-radius: 0.75rem; transition: all 0.2s; margin-bottom: 0.5rem; } .content-styles input:focus, .content-styles select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); } .content-styles button[type="submit"] { background: linear-gradient(to right, #3b82f6, #4f46e5); color: white; font-weight: 800; padding: 1rem 2rem; border-radius: 1rem; border: none; cursor: pointer; transition: transform 0.2s; margin-top: 1.5rem; box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3); } .content-styles button[type="submit"]:hover { transform: translateY(-2px); } /* Addresses grid */ .u-columns { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .u-columns { grid-template-columns: 1fr 1fr; } } .woocommerce-Address { background: rgba(0, 0, 0, 0.2); padding: 1.5rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.05); } .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .woocommerce-Address-title h3 { margin: 0; } .woocommerce-Address address { font-style: normal; line-height: 1.6; color: #cbd5e1; } /* ---EXTRACTED FROM woocommerce/myaccount/form-login.php--- */ /* Shared form styles */ .form-glass-overrides h2 { color: white; font-size: 2rem; font-weight: 800; margin-bottom: 2rem; letter-spacing: -0.05em; text-align: center; } .form-glass-overrides .form-row { margin-bottom: 1.5rem; } .form-glass-overrides label { display: block; color: #94a3b8; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .form-glass-overrides input[type="text"], .form-glass-overrides input[type="email"], .form-glass-overrides input[type="password"] { width: 100%; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); color: white; font-size: 1rem; padding: 1rem; border-radius: 1rem; transition: all 0.2s; } .form-glass-overrides input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); } .form-glass-overrides .button { width: 100%; font-weight: 900; padding: 1rem; border-radius: 1rem; font-size: 1.125rem; transition: all 0.3s; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); border: none; cursor: pointer; } .form-glass-overrides .button:hover { transform: translateY(-2px); } .btn-login { background: linear-gradient(to right, #3b82f6, #4f46e5); color: white; } .btn-register { background: linear-gradient(to right, #10b981, #059669); color: white; } .woocommerce-LostPassword { text-align: center; margin-top: 1.5rem; } .woocommerce-LostPassword a { color: #60a5fa; font-weight: 600; font-size: 0.875rem; transition: color 0.2s; } .woocommerce-LostPassword a:hover { color: #93c5fd; } .woocommerce-form-login__rememberme { display: flex; items: center; gap: 0.5rem; color: #94a3b8; font-size: 0.875rem; font-weight: 500; text-transform: none; margin-bottom: 1.5rem; cursor: pointer; } .woocommerce-form-login__rememberme input { width: auto; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.25rem; } /* ---EXTRACTED FROM woocommerce/single-product.php--- */ .woocommerce-variation-add-to-cart { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; width: 100%; } /* Aggressively remove WooCommerce underline on sales prices */ .price-simplifier ins, .price-simplifier .price-active-sale { text-decoration: none !important; background: none !important; /* Some woo themes add backgrounds to ins */ } /* Custom X drawn over regular price, sized larger than text */ .price-crossed-out { text-decoration: none !important; } .price-crossed-out::before, .price-crossed-out::after { content: ''; position: absolute; top: 50%; left: -15%; width: 130%; height: 3px; background-color: currentColor; transform-origin: center; opacity: 0.9; border-radius: 2px; } .price-crossed-out::before { transform: translateY(-50%) rotate(20deg); } .price-crossed-out::after { transform: translateY(-50%) rotate(-20deg); } .quantity { display: none !important; } /* Psychological Action Button */ button.single_add_to_cart_button { width: 100%; background: linear-gradient(to right, var(--cf-btn-bg), var(--cf-btn-grad)); color: white; font-weight: 900; padding: 1.25rem 2rem; border-radius: 9999px; box-shadow: 0 10px 20px -5px color-mix(in srgb, var(--cf-btn-bg) 40%, transparent); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: none; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center; gap: 0.75rem; } /* Safari-safe floating clone */ button.cf-floating-action-btn { position: fixed !important; bottom: 1.5rem !important; left: 50% !important; transform: translateX(-50%) translateY(0) scale(1) !important; margin: 0 !important; width: 90% !important; max-width: 450px !important; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 10px 20px -5px color-mix(in srgb, var(--cf-btn-bg) 60%, transparent) !important; z-index: 80 !important; opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; transform-origin: center center !important; } button.cf-floating-action-btn.is-active { opacity: 1 !important; pointer-events: auto !important; } button.cf-floating-action-btn.is-hidden-down { transform: translateX(-50%) translateY(150%) scale(1) !important; } button.single_add_to_cart_button::after { content: "→"; font-size: 1.4rem; line-height: 1; transition: transform 0.3s; } button.single_add_to_cart_button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 30px -5px color-mix(in srgb, var(--cf-btn-bg) 50%, transparent); } button.cf-floating-action-btn.is-active:hover, button.cf-floating-action-btn:hover { transform: translateX(-50%) translateY(-3px) scale(1.02) !important; left: 50% !important; } button.single_add_to_cart_button:hover::after { transform: translateX(4px); } .product-add-to-cart-wrapper select { display: none !important; } .product-add-to-cart-wrapper select:focus { outline: none; border-color: var(--cf-btn-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-btn-bg) 20%, transparent); } .variations { width: 100%; margin-bottom: 0.5rem; } .variations td { display: block; width: 100%; text-align: center; } .variations th, .variations td.label, .variations .label { display: none !important; } .woocommerce-product-details__short-description p { margin-bottom: 1rem; } .stock { display: none; } /* Handled custom above */ a.reset_variations { display: none !important; } /* ---EXTRACTED FROM inc/trust-cards.php (frontend display styles)--- */ .cd-builder { background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; padding: 16px; max-width: 900px; } .cd-block-item { background: #fff; border: 1px solid #ccc; border-left: 4px solid #dbbb75; padding: 12px; margin-bottom: 15px; position: relative; border-radius: 3px; cursor: move; } .cd-block-header { font-weight: bold; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cd-block-remove { color: #d63638; cursor: pointer; font-weight: normal; font-size: 12px; } .cd-block-remove:hover { color: #d00; text-decoration: underline; } .cd-textarea { width: 100%; height: 200px; font-family: monospace; font-size: 13px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #fafafa; color: #333; line-height: 1.5; margin-top: 10px; } .cd-input { width: 100%; padding: 6px; font-size: 14px; margin-top: 4px; } .cd-toolbar { display: flex; gap: 10px; align-items: center; background: #fff; padding: 12px; border: 1px solid #ddd; border-top: none; } /* ---EXTRACTED FROM woocommerce/archive-product.php--- */ /* ─── SHOP PAGE — PREMIUM CATEGORY SLIDERS ─────────────── */ .cf-shop { font-family: 'Inter', 'Outfit', system-ui, sans-serif; } /* Hide the default page title */ .cf-shop-header { display: none; } /* ─── CATEGORY ROW ─────────────────────────────────────── */ .cf-cat-row { position: relative; margin-bottom: 3.5rem; } /* The "scroll brake" that used to snap the last category row into view was removed: with full-height photo tiles it yanked the page while scrolling. */ /* Sticky category title above slider */ .cf-cat-title { position: sticky; left: 0; text-align: center; padding: 1rem 1rem 2.5rem; font-size: 3.2rem; line-height: 1.1; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cf-logo-color, #dbbb75); z-index: 2; } @media (max-width: 768px) { .cf-cat-title { font-size: 2.2rem; padding: 0.5rem 1rem 2rem; } } /* Watermark removed from row — now inside label card */ /* ─── SLIDER CONTAINER ─────────────────────────────────── */ .cf-cat-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; padding: 0 1rem 1rem; position: relative; z-index: 1; -webkit-overflow-scrolling: touch; overscroll-behavior-x: none; cursor: grab; } .cf-cat-slider:active { cursor: grabbing; } .cf-cat-slider::-webkit-scrollbar { display: none; } .cf-cat-slider { -ms-overflow-style: none; scrollbar-width: none; } /* ─── CATEGORY LABEL CARD (first card) ─────────────────── */ .cf-cat-label-card { flex-shrink: 0; scroll-snap-align: start; scroll-snap-stop: always; width: 140px; min-height: 75vh; max-height: 76vh; border-radius: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 1.75rem 1rem; background: transparent; border: none; position: relative; overflow: visible; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s; } .cf-cat-label-card.has-baby-tc { width: 56vw; max-width: 280px; padding: 0; overflow: hidden; } .cf-cat-label-card.has-baby-tc .cf-cat-label-watermark { z-index: 5; left: 70px; } .cf-cat-label-card.has-baby-tc .cf-cat-label-card-arrow { position: absolute; bottom: 0.35rem; left: 1rem; z-index: 30; } /* Vertical watermark inside the label card */ .cf-cat-label-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); writing-mode: vertical-rl; text-orientation: upright; font-family: 'Inter', 'Outfit', system-ui, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.1em; word-spacing: -0.4em; white-space: nowrap; color: rgba(255, 255, 255, 0.04); pointer-events: none; user-select: none; z-index: 0; /* Font size will be set inline based on card height */ font-size: 6rem; } @media (max-width: 768px) { .cf-cat-label-card { width: 110px; min-height: 60vh; padding: 1.25rem 0.75rem; } .cf-cat-label-card.has-baby-tc { width: 53vw; padding: 0; } .cf-cat-label-card.has-baby-tc .cf-cat-label-watermark { left: 55px; } .cf-cat-label-watermark { font-size: 4rem; } } .cf-cat-label-card-name { font-size: 1.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: white; line-height: 1.1; margin-bottom: 0.5rem; } @media (max-width: 768px) { .cf-cat-label-card-name { font-size: 1.2rem; } } .cf-cat-label-card-count { font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cf-logo-color); } .cf-cat-label-card-line { width: 30px; height: 2px; border-radius: 2px; background: var(--cf-logo-color); margin-bottom: 0.75rem; opacity: 0.5; } .cf-cat-label-card-arrow { margin-top: auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.4); } .cf-cat-label-card-arrow span { font-size: 1.6rem; animation: cfSlideRightLeft 1.5s ease-in-out infinite; } @keyframes cfSlideRightLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } } /* ─── SWIPE ANIMATION & COUNT ───────────── */ .cf-cat-label-count-stroke { font-family: 'Inter', system-ui, sans-serif; font-size: 5rem; font-weight: 900; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4); margin-bottom: 0.25rem; text-align: left; } .cf-cat-label-count-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.6); text-align: left; } @media (max-width: 768px) { .cf-cat-label-count-stroke { font-size: 3.5rem; } .cf-cat-label-count-label { font-size: 0.6rem; } } .cf-swipe-icon-wrapper { position: absolute; top: 25%; right: -35px; z-index: 10; pointer-events: none; } /* ─── BABY TRUSTCARD (inside category label) ───────────── */ .cf-baby-trust-card { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 1.25rem; overflow: hidden; background: transparent; z-index: 10; } @media (max-width: 768px) { .cf-baby-trust-card { /* Inherits absolute inset 0 */ } } /* ─── PRODUCT CARD ─────────────────────────────────────── */ .cf-shop-card { flex-shrink: 0; scroll-snap-align: center; scroll-snap-stop: always; width: 78vw; max-width: 420px; min-height: 66vh; max-height: 74vh; position: relative; border-radius: 1.25rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); display: block; text-decoration: none; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s; } @media (max-width: 768px) { .cf-shop-card { width: 78vw; max-width: none; min-height: 51vh; max-height: 74vh; } } /* ─── SLIDE NAVIGATION ARROWS ──────────────────────────── */ .cf-slide-nav-arrows { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0; z-index: 50; pointer-events: none; /* Let the card clicks pass through to the link */ } .cf-slide-arrow { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.45); /* Ușor mai ștearsă (45% opacitate) */ transition: all 0.4s ease; pointer-events: auto; /* Re-enable events if needed so they could be clicked, though not strictly required */ padding: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)); /* Umbră un pic mai puternică pt lizibilitate */ } .cf-slide-arrow-left { transform: translateX(-24px); /* Pushes the icon itself left to counter SVG whitespace */ } .cf-slide-arrow-right { transform: translateX(24px); /* Pushes the icon itself right to counter SVG whitespace */ } .cf-slide-arrow svg { width: 72px; /* Mult mai mare pe desktop */ height: 72px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .cf-shop-card:hover .cf-slide-arrow { color: rgba(255, 255, 255, 1); /* Alb curat la hover */ } @media (max-width: 768px) { .cf-slide-arrow { padding: 0; } .cf-slide-arrow-left { transform: translateX(-14px); } .cf-slide-arrow-right { transform: translateX(14px); } .cf-slide-arrow svg { width: 44px; /* Mai mare și pe mobil */ height: 44px; } } .cf-shop-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5); } /* Background image */ .cf-shop-card-bg { position: absolute; inset: 0; background: var(--cf-surface-3); } .cf-shop-card-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .cf-shop-card:hover .cf-shop-card-bg img { transform: scale(1.06); } /* Gradient overlay */ .cf-shop-card-overlay { display: none; } /* ─── PROPOSAL STYLES (Backend Selected) ───────────────── */ /* Price Simplifier for all proposals */ .cf-shop-card ins, .cf-bundle-price-badge ins { text-decoration: none !important; background: none !important; } .cf-shop-card .price-crossed-out, .cf-bundle-price-badge .price-crossed-out { position: relative; display: inline-flex; align-items: center; justify-content: center; opacity: 0.5; font-weight: bold; color: var(--cf-text-muted); text-decoration: none !important; } .cf-shop-card .price-crossed-out::before, .cf-shop-card .price-crossed-out::after, .cf-bundle-price-badge .price-crossed-out::before, .cf-bundle-price-badge .price-crossed-out::after { content: ''; position: absolute; top: 50%; left: -15%; width: 130%; height: 2px; background-color: currentColor; transform-origin: center; opacity: 0.9; border-radius: 2px; } .cf-shop-card .price-crossed-out::before, .cf-bundle-price-badge .price-crossed-out::before { transform: translateY(-50%) rotate(20deg); } .cf-shop-card .price-crossed-out::after, .cf-bundle-price-badge .price-crossed-out::after { transform: translateY(-50%) rotate(-20deg); } /* P1: The Glass Base */ .cf-prop-1 .cf-shop-card-overlay { display: block; position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem 1rem 0.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%); backdrop-filter: blur(4px); display: flex; flex-direction: column; gap: 0.15rem; } .cf-prop-1 .prop-title { text-align: center; font-size: 0.9rem; font-weight: 900; color: white; text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.2; } .cf-prop-1 .prop-price-row { display: flex; justify-content: space-between; align-items: center; width: 100%; } .cf-prop-1 .prop-price { font-size: 1.5rem; font-weight: 900; color: var(--cf-logo-color); letter-spacing: -0.02em; display: flex; gap: 0.5rem; align-items: center; } /* P4: The Magazine Corner */ .cf-prop-4 .cf-shop-card-overlay { display: block; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.1) 100%); pointer-events: none; } .cf-prop-4 .cf-shop-card-content { position: absolute; inset: 0; padding: 1.5rem; pointer-events: none; } .cf-prop-4 .prop-title { position: absolute; top: 1.5rem; left: 0; right: 0; text-align: center; width: 100%; padding: 0 4.5rem; box-sizing: border-box; font-size: 1.6rem; font-weight: 900; color: white; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.1; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); } @media (max-width: 768px) { .cf-prop-4 .prop-title { font-size: 1.25rem; padding: 0 4.5rem; } } .cf-prop-4 .prop-price { position: absolute; bottom: 1.5rem; right: 1.5rem; font-size: 1.6rem; font-weight: 900; color: var(--cf-logo-color); display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; } /* ─── NOU BADGES ────────────────────────────── */ /* NOU Badge Style 1: Neon Glow (Prop 1) */ .cf-prop-1 .prop-badge-nou { background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); } /* NOU Badge Style 2: Solid Accent (Prop 4) */ .cf-prop-4 .prop-badge-nou { position: absolute; bottom: 1.5rem; left: 1.5rem; background: var(--cf-logo-color); color: black; padding: 0.35rem 0.75rem; border-radius: 99px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); } /* ─── SALE LABELS ────────────────────────────── */ /* Sale 1: The Sleek Corner Ribbon (Top Right Diagonal) */ .cf-sale-prop-1 { position: absolute; top: 2rem; right: -2.5rem; background: var(--cf-logo-color); color: black; width: 12rem; padding: 0.4rem 0; text-align: center; transform: rotate(45deg); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 20; } .cf-sale-prop-1 .sale-text { font-size: 0.5rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; } .cf-sale-prop-1 .sale-pct { font-size: 0.9rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1; margin-top: 0.1rem; } /* Sale 4: The Bold Box (Top Right Anchor) */ .cf-sale-prop-4 { position: absolute; top: 0; right: 0; background: #e60000; color: white; padding: 0.85rem 1.1rem; border-bottom-left-radius: 1rem; display: flex; flex-direction: column; align-items: flex-end; box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); z-index: 20; } .cf-sale-prop-4 .sale-text { font-size: 0.45rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .cf-sale-prop-4 .sale-pct { font-size: 1.1rem; font-weight: 900; color: white; line-height: 1; margin-top: 0.1rem; } @media (max-width: 768px) { .cf-sale-prop-4 { padding: 0.65rem 0.8rem; } .cf-sale-prop-4 .sale-pct { font-size: 0.95rem; } } /* ─── NO PRODUCTS ──────────────────────────────────────── */ .cf-shop-empty { text-align: center; padding: 4rem 2rem; color: rgba(255, 255, 255, 0.3); font-size: 0.8rem; font-weight: 600; } /* Trust cards — match product card height */ .cf-shop-trust-card { flex-shrink: 0; scroll-snap-align: center; scroll-snap-stop: always; width: 78vw; max-width: 480px; /* Increased from 420px to give text more breathing room */ min-height: 66vh; max-height: 74vh; position: relative; border-radius: 1.25rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 3rem; /* Increased padding slightly for edges */ text-align: center; background: var(--cf-surface-3); } @media (max-width: 768px) { .cf-shop-trust-card { width: 78vw; max-width: none; min-height: 51vh; max-height: 74vh; padding: 1.5rem 2rem; /* Keep existing padding on mobile */ } } /* Force 100% height and width inside single product sliders to prevent 74vh max-height cap on desktop */ .cf-product-slider .cf-shop-trust-card { height: 100%; max-height: none; width: 100%; max-width: none; } /* ─── DYNAMIC ATTENTION TEXTS ──────────────────────────── */ .cf-attention-banner { width: 100vw; max-width: 100%; margin-left: calc(50% - 50vw); padding: 4rem 2rem; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 250px; position: relative; overflow: hidden; } .cf-attention-text { font-family: 'Inter', system-ui, sans-serif; font-size: 2rem; font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, 0.9); max-width: 900px; opacity: 0; /* Hidden by default until JS observer triggers */ transition: all 1s cubic-bezier(0.25, 1, 0.5, 1); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .cf-attention-text strong { font-weight: 800; color: white; } .cf-attention-text em { font-style: italic; color: var(--cf-logo-color); font-weight: 500; letter-spacing: 0.05em; } .cf-att-highlight { color: var(--cf-logo-color); font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.1em; } .cf-att-badge { display: inline-block; padding: 0.3rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cf-text-muted); margin-top: 1rem; } .cf-att-svg { width: 48px; height: 48px; fill: none; stroke: var(--cf-logo-color); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; margin-bottom: 0.5rem; } @media (max-width: 768px) { .cf-attention-banner { padding: 3rem 1.5rem; min-height: 200px; } .cf-attention-text { font-size: 1.3rem; gap: 1rem; } .cf-att-svg { width: 36px; height: 36px; } .cf-att-badge { font-size: 0.6rem; } } /* Animation Classes added by JS Observer */ .cf-anim-fade-up { opacity: 0; transform: translateY(30px); } .cf-anim-fade-up.is-visible { opacity: 1; transform: translateY(0); } .cf-anim-slide-right { opacity: 0; transform: translateX(-40px); } .cf-anim-slide-right.is-visible { opacity: 1; transform: translateX(0); } .cf-anim-blur { opacity: 0; filter: blur(10px); transform: scale(0.95); } .cf-anim-blur.is-visible { opacity: 1; filter: blur(0); transform: scale(1); } /* ─── CATEGORY DESCRIPTIONS SLIDE ─── */ .cf-category-desc-slide { display: flex; align-items: center; justify-content: center; height: auto; align-self: stretch; /* Match height of adjacent product cards */ background: transparent; border: none; padding: 0 1rem; text-align: center; box-sizing: border-box; } .cf-category-desc-inner { width: 100%; max-width: 380px; color: rgba(255, 255, 255, 0.85); font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem; line-height: 1.4; } .cf-category-desc-inner p { margin-bottom: 0.5rem; } .cf-category-desc-inner .cf-att-svg { width: 32px; height: 32px; fill: none; stroke: var(--cf-logo-color, #dbbb75); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; margin-bottom: 0.75rem !important; } .cf-category-desc-inner .cf-att-highlight { color: var(--cf-logo-color); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } /* ─── SUBCATEGORY QUICK NAV ───────────────────────────── */ .cf-subcat-nav { padding: 1.5rem 1rem 3rem; text-align: center; } .cf-subcat-nav-hint { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.35); margin-bottom: 1.25rem; } .cf-subcat-nav-hint svg { width: 14px; height: 14px; stroke: var(--cf-logo-color, #dbbb75); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: cfBounceDown 1.8s ease-in-out infinite; } @keyframes cfBounceDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .cf-subcat-nav-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.65rem; list-style: none; margin: 0 auto; padding: 0; max-width: 800px; } .cf-subcat-nav-list li {} .cf-subcat-nav-list a { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.65rem 1.5rem; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; transition: all 0.3s ease; font-family: 'Inter', system-ui, sans-serif; animation: cf-soft-pulse 3s infinite; } @keyframes cf-soft-pulse { 0% { box-shadow: 0 0 0 0 rgba(219, 187, 117, 0.15); border-color: rgba(255, 255, 255, 0.12); transform: scale(1); } 50% { box-shadow: 0 0 0 8px rgba(219, 187, 117, 0); border-color: rgba(219, 187, 117, 0.3); transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 rgba(219, 187, 117, 0); border-color: rgba(255, 255, 255, 0.12); transform: scale(1); } } .cf-subcat-nav-list a:hover { border-color: var(--cf-logo-color, #dbbb75); color: var(--cf-logo-color, #dbbb75); background: rgba(219, 187, 117, 0.08); } .cf-subcat-nav-list a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; } @media (max-width: 1024px) { .cf-subcat-nav { padding: 1rem 0.75rem 2rem; } .cf-subcat-nav-list { grid-template-columns: 1fr !important; gap: 1rem; } .cf-subcat-nav-list li { min-width: 100%; } .cf-subcat-nav-list a { font-size: 0.85rem; padding: 0.85rem 1rem; } } /* ─── HIDE WOOCOMMERCE DEFAULT NOTICES ON CUSTOM CHECKOUT ─── */ /* Deoarece folosim un flux custom de checkout cu erori afisate contextual per pas, ascundem complet notificarile default WooCommerce care pot aparea din check-uri AJAX native */ .woocommerce-checkout .woocommerce-NoticeGroup, .woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info { display: none !important; } .cf-sold-out-overlay { background-color: rgba(0, 0, 0, 0.4); } .cf-sold-out-single { background-color: rgba(0, 0, 0, 0.4); text-align: center; border: none; padding: 1.5rem; } /* ─── CATEGORY INTRO CARD STYLING ─── */ .cf-category-intro-card { /* Ensure it picks up theme fonts */ font-family: var(--font-body, 'Inter', system-ui, -apple-system, sans-serif); color: var(--cf-text-color, inherit); } .cf-intro-card-inner { padding: 1rem !important; /* Smaller padding on mobile */ box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow-y: auto; } /* Responsive Typography inside the intro card */ .cf-intro-card-inner h1, .cf-intro-card-inner h2, .cf-intro-card-inner h3, .cf-intro-card-inner h4, .cf-intro-card-inner h5, .cf-intro-card-inner h6 { font-family: var(--font-display, 'Outfit', system-ui, -apple-system, sans-serif); margin-top: 0; margin-bottom: 0.5rem; font-weight: 700; line-height: 1.2; color: inherit; } .cf-intro-card-inner h2 { font-size: 1.15rem; } .cf-intro-card-inner h3 { font-size: 1rem; } .cf-intro-card-inner h4 { font-size: 0.9rem; } .cf-intro-card-inner p { margin-top: 0; margin-bottom: 0.5rem; font-size: 0.8rem; /* Scaled down for mobile */ line-height: 1.4; opacity: 0.9; } .cf-intro-card-inner *:last-child { margin-bottom: 0; } /* Desktop sizing */ @media (min-width: 768px) { .cf-intro-card-inner { padding: 2.5rem !important; } .cf-intro-card-inner h1, .cf-intro-card-inner h2, .cf-intro-card-inner h3, .cf-intro-card-inner h4, .cf-intro-card-inner h5, .cf-intro-card-inner h6 { margin-bottom: 0.75rem; } .cf-intro-card-inner h2 { font-size: 1.75rem; } .cf-intro-card-inner h3 { font-size: 1.4rem; } .cf-intro-card-inner h4 { font-size: 1.15rem; } .cf-intro-card-inner p { font-size: 1rem; margin-bottom: 1rem; line-height: 1.5; } } /* ══════════════════════════════════════════════════════════════════════════ PDP v2 — "EDITORIAL SCROLL" SINGLE PRODUCT PAGE Full-bleed photos stacked vertically + slim floating top bar (the global header, shrunk) + fixed bottom action bar (title | add to cart | price). Everything is scoped to body.single-product so no other page is affected. ══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. GLOBAL HEADER, SHRUNK & FLOATING OVER THE PHOTO ─────────────────── */ body.single-product .cf-site-header { border-bottom: 0 !important; box-shadow: none !important; } /* Never fade in the solid header background — it must stay over the photo */ body.single-product .cf-header-bg { opacity: 0 !important; } /* Soft top scrim so burger / logo / cart stay readable on light photos */ body.single-product .cf-site-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } body.single-product .cf-header-inner { height: 44px; padding-left: 0.85rem; padding-right: 0.85rem; max-width: none; } body.single-product .cf-header-left { gap: 0.6rem; } body.single-product .cf-header-burger { padding: 0.15rem; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7)); } body.single-product .cf-header-burger svg { width: 1.2rem; height: 1.2rem; } body.single-product .cf-header-logo { height: auto; } body.single-product .cf-header-logo a > div { font-size: 0.9rem !important; line-height: 1.15 !important; letter-spacing: 0.14em !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); } body.single-product .cf-header-cart-wrap { margin-left: 0; } body.single-product .cf-header-cart { padding: 0.2rem 0.55rem; font-size: 0.6rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } body.single-product .cf-header-cart svg { width: 0.85rem; height: 0.85rem; } @media (min-width: 768px) { body.single-product .cf-header-inner { height: 52px; padding-left: 1.25rem; padding-right: 1.25rem; } body.single-product .cf-header-burger svg { width: 1.4rem; height: 1.4rem; } body.single-product .cf-header-logo a > div { font-size: 1.05rem !important; } body.single-product .cf-header-cart { padding: 0.25rem 0.7rem; font-size: 0.68rem; } body.single-product .cf-header-cart svg { width: 1rem; height: 1rem; } } /* ─── 2. PAGE SHELL ──────────────────────────────────────────────────────── */ .cf-pdp-main { width: 100%; margin: 0; padding: 0; } /* Room for the fixed action bar so footer / breadcrumbs are never covered. Must track the bar height — the bar grew when the price was allowed to wrap. */ body.single-product { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } @media (min-width: 768px) { body.single-product { padding-bottom: calc(136px + env(safe-area-inset-bottom)); } } /* ─── 3. VERTICAL PHOTO STACK ────────────────────────────────────────────── */ .cf-pdp-gallery { width: 100%; margin: 0 auto; background: var(--cf-body-bg); } @media (min-width: 768px) { .cf-pdp-gallery { max-width: 860px; } } .cf-pdp-shot { position: relative; display: block; margin: 0; padding: 0; overflow: hidden; background: var(--cf-surface-3); } .cf-pdp-shot img { display: block; width: 100%; height: auto; } /* "+" badge that sits between two bundle components */ .cf-pdp-plus { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); width: 64px; height: 64px; border-radius: 9999px; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 2.25rem; font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); z-index: 20; pointer-events: none; } @media (min-width: 768px) { .cf-pdp-plus { width: 84px; height: 84px; font-size: 3rem; } } /* Trust cards rendered as full-width panels inside the vertical stack */ .cf-pdp-trust { position: relative; width: 100%; overflow: hidden; background: var(--cf-surface-3); } .cf-pdp-trust.cf-trustcards-rotator-container { min-height: 78vh; } .cf-pdp-trust .cf-shop-trust-card { width: 100% !important; max-width: none !important; min-height: 78vh; max-height: none; height: 100%; border-radius: 0; border-left: 0; border-right: 0; } /* ─── 4. FIXED ACTION BAR (title | add to cart | price) ──────────────────── */ /* Mirrors the header: no solid panel, just a soft scrim so the bar reads as floating over the photo. Legibility comes from text-shadow, not opacity. */ .cf-pdp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 1.6rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0) 100%); } .cf-pdp-bar-inner { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.7rem; } /* No clamp: a long title is allowed to run onto 3-4 lines and grow the bar, which is why the bar's height is measured at runtime (see single-product.php). */ .cf-pdp-bar-title { min-width: 0; font-size: 1rem; font-weight: 800; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; /* break-word, not anywhere: a word only splits when it cannot fit on a line of its own, so "PANTALONI" drops down whole instead of "PANTALO". */ overflow-wrap: break-word; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.8); } /* The margin nudges the button off dead-centre, towards the price — the price column reads narrow because a discounted price wraps onto two rows. It widens the auto column, so both side columns give up the same sliver. */ .cf-pdp-bar-cta { display: flex; align-items: center; justify-content: center; min-width: 0; margin-left: 0.75rem; margin-right: 0; } /* Only the button stays visible — the variation machinery remains in the DOM */ .cf-pdp-bar-cta .variations, .cf-pdp-bar-cta .woocommerce-variation, .cf-pdp-bar-cta .woocommerce-variation-price, .cf-pdp-bar-cta .woocommerce-variation-availability, .cf-pdp-bar-cta .woocommerce-variation-description, .cf-pdp-bar-cta .stock, .cf-pdp-bar-cta .quantity, .cf-pdp-bar-cta .price { display: none !important; } .cf-pdp-bar-cta form.cart { margin: 0; display: flex; align-items: center; justify-content: center; } .cf-pdp-bar-cta .single_variation_wrap, .cf-pdp-bar-cta .woocommerce-variation-add-to-cart { width: auto; flex-direction: row; gap: 0; margin: 0; } /* !important is required: both the WooCommerce `button.button.alt` rules and the dynamic palette