/* =================================================================== CREAPAL PRO THEME - Industrial premium look (Matte Black + Metal + Brass accent) - CSS-only (does not change configurator logic) Revert: replace this file with custom-creapal.backup.css =================================================================== */ :root{ /* Brand */ --cp-black: #111111; --cp-graphite: #1a1a1a; --cp-ink: #0d0d0d; /* Matte black used across UI (requested) */ --cp-matte: #0d0f12; --cp-silver: #BFC3C7; /* "suruburi" */ --cp-silver-2: #E6E8EB; --cp-brass: #C9A227; /* accent discret */ --cp-bg: #F6F7F8; --cp-card: #FFFFFF; --cp-text: #111111; --cp-muted: #5D6167; --cp-radius-lg: 22px; --cp-radius-md: 16px; --cp-pill: 999px; --cp-shadow: 0 14px 34px rgba(0,0,0,0.10); --cp-shadow-hover: 0 18px 44px rgba(0,0,0,0.14); /* Map existing variables used by the page / JS */ --primary-color: var(--cp-black); --primary-button-text-color: #ffffff; --primary-button-hover-bg-color: #000000; /* NOTE: JS uses accent2-color for progress + checked highlights */ --accent2-color: var(--cp-brass); --accent3-color: var(--cp-silver); --dark-text-color: var(--cp-text); --gray-text-color: var(--cp-muted); --light-background-color: var(--cp-bg); --medium-background-color: #F0F1F3; --light-border-color: rgba(17,17,17,0.12); --button-rounded-radius: 14px; /* Fonts (set in via Google Fonts) */ --font-family-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-family-heading: "Space Grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* ------------------------------------------------------------------- Matte Black Utilities (kills gradients reliably) Use these instead of Tailwind arbitrary bg/to classes that may be missing from the embedded Tailwind build. ------------------------------------------------------------------- */ .creapal-pro .cp-matte{ background-color: var(--cp-matte) !important; background-image: none !important; color: #fff; } .creapal-pro .cp-matte::before, .creapal-pro .cp-matte::after{ background-image: none !important; } .creapal-pro .cp-matte-border{ border: 1px solid rgba(255,255,255,0.12) !important; } .creapal-pro .cp-matte-soft{ background-color: rgba(13,15,18,0.92) !important; background-image: none !important; color:#fff; } .creapal-pro{ font-family: var(--font-family-body); color: var(--cp-text); background: radial-gradient(1200px 600px at 20% 0%, rgba(201,162,39,0.10), transparent 55%), linear-gradient(180deg, #ffffff 0%, var(--cp-bg) 100%); } .creapal-pro h1, .creapal-pro h2, .creapal-pro h3{ font-family: var(--font-family-heading); letter-spacing: -0.6px; } .creapal-pro p{ line-height: 1.65; } /* Make layout feel "designed": consistent content width */ .creapal-pro .container{ max-width: 1240px !important; } /* ------------------------------------------------------------------- Header ------------------------------------------------------------------- */ #global-header{ background: rgba(10, 13, 18, 0.94) !important; border-bottom: 1px solid rgba(255,255,255,0.07); box-shadow: 0 2px 20px rgba(0,0,0,0.28) !important; backdrop-filter: blur(18px); } #global-header nav a{ border-radius: 10px; padding: 9px 13px; font-weight: 600; letter-spacing: 0.15px; color: rgba(255,255,255,0.82) !important; transition: background-color .15s ease, color .15s ease, transform .15s ease; } #global-header nav a:hover{ background: rgba(255,255,255,0.08); color: #fff !important; opacity: 1 !important; } #global-header a[href*="cere-oferta"]{ border-radius: 999px !important; background: #C9A227 !important; color: #0d0f12 !important; padding: 7px 16px !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; height: 34px !important; display: inline-flex !important; align-items: center !important; border: none !important; box-shadow: 0 4px 14px rgba(201,162,39,0.35) !important; flex-shrink: 0 !important; } #global-header a[href*="cere-oferta"]:hover, #global-header a[href*="formular"]:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(201,162,39,0.45) !important; background: #d9b030 !important; } /* Buton "Cere Oferta" cu href formular (configurator) */ #global-header a[href*="formular"]{ border-radius: 999px !important; background: #C9A227 !important; color: #0d0f12 !important; padding: 7px 16px !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; height: 34px !important; display: inline-flex !important; align-items: center !important; border: none !important; box-shadow: 0 4px 14px rgba(201,162,39,0.35) !important; flex-shrink: 0 !important; } /* Buton WhatsApp în header */ .cp-nav-cta--whatsapp{ display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #25D366 !important; color: #fff !important; padding: 8px 14px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; border: none !important; transition: background .15s, box-shadow .15s !important; } .cp-nav-cta--whatsapp:hover{ background: #1ebe5a !important; opacity: 1 !important; } /* Buton Sună în header */ .cp-nav-cta--call{ display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(255,255,255,0.10) !important; color: #fff !important; padding: 8px 14px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; border: 1px solid rgba(255,255,255,0.18) !important; transition: background .15s !important; } .cp-nav-cta--call:hover{ background: rgba(255,255,255,0.18) !important; opacity: 1 !important; } /* Brand lockup (icon + text) */ .brand-icon{ height: 72px; width: 240px; display:block; object-fit: contain; mix-blend-mode: lighten; } .brand img{ height: auto; } .brand-name{ font-weight: 900; font-size: 36px; line-height: 1; color: #ffffff; } .brand-dot{ color: #C9A227; align-self: flex-end; margin-bottom: 4px; } @media (max-width: 640px){ .brand-icon{ height: 40px; } .brand-name{ font-size: 26px; } } /* ------------------------------------------------------------------- Hero (completely different from original) ------------------------------------------------------------------- */ .creapal-hero{ background: radial-gradient(1200px 600px at 20% 0%, rgba(201,162,39,0.24), transparent 60%), radial-gradient(900px 500px at 90% 15%, rgba(191,195,199,0.14), transparent 55%), linear-gradient(135deg, #0d0d0d 0%, #151515 55%, #101010 100%) !important; color: #fff; position: relative; overflow: hidden; } .creapal-hero::before{ content:""; position:absolute; inset:-2px; background: linear-gradient(transparent 0, transparent 18px, rgba(255,255,255,0.04) 19px), linear-gradient(90deg, transparent 0, transparent 18px, rgba(255,255,255,0.04) 19px); background-size: 19px 19px; opacity: .25; pointer-events:none; } .creapal-hero .container{ position: relative; z-index: 1; } .creapal-hero-grid{ display:grid; grid-template-columns: 1fr 1.4fr; gap: 36px; align-items: center; margin-bottom: 28px; } @media (max-width: 1024px){ .creapal-hero-grid{ grid-template-columns: 1fr; } } .creapal-kicker{ display:inline-flex; gap:10px; align-items:center; padding: 10px 14px; border-radius: var(--cp-pill); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); font-weight: 700; letter-spacing: .25px; margin-bottom: 14px; } .creapal-hero-title{ font-size: clamp(34px, 4vw, 54px); line-height: 1.05; margin: 0 0 10px 0; } .creapal-hero-title span{ color: var(--cp-brass); } .creapal-hero-subtitle{ color: rgba(255,255,255,0.80); font-size: 18px; max-width: 52ch; margin-bottom: 18px; } .creapal-hero-points{ display:flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 20px; } .creapal-point{ display:flex; gap:10px; align-items:center; color: rgba(255,255,255,0.86); font-weight: 600; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); } .creapal-point i{ color: var(--cp-silver); } .creapal-hero-actions{ display:flex; gap: 12px; flex-wrap: wrap; } .creapal-btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 16px; border-radius: var(--cp-pill); font-weight: 800; letter-spacing: .15px; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease; text-decoration:none; } .creapal-btn-primary{ background: var(--cp-brass); color: #0b0b0b; box-shadow: 0 14px 30px rgba(201,162,39,0.22); } .creapal-btn-primary:hover{ transform: translateY(-1px); opacity: .95; } .creapal-btn-ghost{ background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; } .creapal-btn-ghost:hover{ transform: translateY(-1px); opacity: .95; } .creapal-hero-media img{ width: 100%; border-radius: 24px; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 22px 60px rgba(0,0,0,0.45); transform: rotate(0.6deg); } /* ------------------------------------------------------------------- Progress steps (segmented, no "original" line feel) ------------------------------------------------------------------- */ .creapal-progress .absolute.top-6.left-0.right-0.h-1{ display:none !important; } #progress-bar{ display:none !important; } .creapal-progress > .flex{ background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 14px 16px; gap: 10px !important; } .creapal-progress [id^="step-indicator-"]{ width: 44px !important; height: 44px !important; border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: none !important; } .creapal-progress #step-indicator-1{ background: rgba(201,162,39,0.95) !important; color: #0b0b0b !important; border-color: rgba(201,162,39,0.55) !important; } .creapal-progress .text-\[var\(--primary-color\)\]{ color: rgba(255,255,255,0.85) !important; } .creapal-progress .text-\[var\(--gray-text-color\)\]{ color: rgba(255,255,255,0.70) !important; } /* ------------------------------------------------------------------- Step sections (headers as "cards" with accent bar) ------------------------------------------------------------------- */ #step-1-section, #step-2-section, #step-3-section{ background: transparent !important; } #step-1-section .max-w-6xl, #step-2-section .max-w-6xl, #step-3-section .max-w-6xl{ padding: 0; } #step-1-section .flex.items-center.gap-4.mb-8, #step-2-section .flex.items-center.gap-4.mb-8, #step-3-section .flex.items-center.gap-4.mb-8{ background: var(--cp-card); border: 1px solid rgba(0,0,0,0.08); border-left: 6px solid var(--cp-brass); border-radius: 18px; padding: 18px 18px; } #step-1-section h2, #step-2-section h2, #step-3-section h2{ font-weight: 900 !important; } #step-1-section p, #step-2-section p, #step-3-section p{ color: var(--cp-muted) !important; } /* ------------------------------------------------------------------- Structure cards (two columns, premium feel, strong differentiation) ------------------------------------------------------------------- */ #structure-grid{ gap: 32px !important; } /* base card */ #structure-grid label > div{ border-radius: var(--cp-radius-lg) !important; box-shadow: var(--cp-shadow) !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important; } #structure-grid label:hover > div{ transform: translateY(-3px); box-shadow: var(--cp-shadow-hover) !important; } /* Checked state: brass outline */ #structure-grid input[type="radio"][name="structure"]:checked + div{ outline: 3px solid var(--cp-brass); outline-offset: 2px; } /* Standard card: deep graphite, not blue */ #structure-grid input[value="standard"] + div{ background: linear-gradient(135deg, #111111 0%, #1d1d1d 60%, #151515 100%) !important; border-color: rgba(255,255,255,0.10) !important; } /* Premium card: clean white with brass micro accents */ #structure-grid input[value="premium"] + div{ background: #ffffff !important; border-color: rgba(0,0,0,0.10) !important; } /* Badge */ #structure-grid .absolute.-top-3{ background: rgba(201,162,39,0.95) !important; color: #0b0b0b !important; border: 1px solid rgba(201,162,39,0.55) !important; letter-spacing: .5px; } /* Price styling */ #structure-grid .text-3xl.font-bold{ font-size: 42px !important; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; } /* Icons in lists = silver screws */ #structure-grid i.fa-check, #structure-grid i.fa-ruler-combined, #structure-grid i.fa-vector-square{ color: var(--cp-silver) !important; } /* Premium: keep text readable */ #structure-grid input[value="premium"] + div .text-\[var\(--primary-color\)\]{ color: var(--cp-black) !important; } #structure-grid input[value="premium"] + div .text-\[var\(--gray-text-color\)\]{ color: var(--cp-muted) !important; } /* ------------------------------------------------------------------- Step 2 option cards (re-skin) ------------------------------------------------------------------- */ #step-2-section .grid > div.bg-white{ border-radius: 18px !important; border: 1px solid rgba(0,0,0,0.10) !important; box-shadow: 0 10px 26px rgba(0,0,0,0.06); } #step-2-section .grid > div.bg-white:hover{ box-shadow: 0 16px 36px rgba(0,0,0,0.10); transform: translateY(-2px); transition: transform .15s ease, box-shadow .15s ease; } #step-2-section .text-\[var\(--accent2-color\)\]{ color: var(--cp-brass) !important; } /* Inputs accent */ input[type="checkbox"], input[type="radio"]{ accent-color: var(--cp-brass); } /* ------------------------------------------------------------------- Footer / misc ------------------------------------------------------------------- */ a:hover{ opacity: .95; } /* CREAPAL Info Box (reinventat) */ .creapal-info{ border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; background: #fff; padding: 18px 18px 16px; } .creapal-info__head{ display:flex; gap:12px; align-items:flex-start; } .creapal-info__icon{ width: 38px; height: 38px; border-radius: 999px; display:flex; align-items:center; justify-content:center; background: #111; color: #fff; flex: 0 0 auto; } .creapal-info__title{ font-weight: 900; font-size: 18px; color: var(--dark-text-color); } .creapal-info__subtitle{ margin-top: 2px; color: var(--gray-text-color); } .creapal-info__grid{ display:grid; gap:12px; margin-top: 14px; grid-template-columns: 1fr; } @media (min-width: 900px){ .creapal-info__grid{ grid-template-columns: repeat(3, 1fr); } } .creapal-chip{ border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 12px 12px; background: linear-gradient(180deg, #ffffff, #f7f7f7); } .creapal-chip strong{ display:block; font-weight: 800; color: var(--dark-text-color); } .creapal-chip span{ display:block; margin-top: 3px; color: var(--gray-text-color); font-size: 14px; } .creapal-info__cta{ margin-top: 12px; color: var(--gray-text-color); } .creapal-info__cta a{ color: #111; font-weight: 700; text-decoration: underline; }.cp-note__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .cp-note__titles{ display: flex; flex-direction: column; } .cp-note__title{ font-weight: 900; font-size: 18px; letter-spacing: -0.02em; line-height: 1.1; } .cp-note__sub{ font-size: 13px; color: rgba(13, 15, 18, 0.72); margin-top: 2px; } /* Footer hover classes (replace inline onmouseover/onmouseout) */ .footer-anpc-link{color:rgba(255,255,255,0.45);transition:color .2s} .footer-anpc-link:hover{color:#fff} .footer-legal-link{font-size:12px;color:rgba(255,255,255,0.35);text-decoration:none;transition:color .2s} .footer-legal-link:hover{color:rgba(255,255,255,0.7)} .footer-social-icon{transition:opacity .2s} .footer-social-icon:hover{opacity:.8} .footer-info-link{transition:background .2s} .footer-info-link:hover{background:#e8edf2!important} .footer-underline-link{transition:text-decoration .2s} .footer-underline-link:hover{text-decoration:underline} /* Skip to content (accessibility) */ .skip-to-content{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:#C9A227;color:#0d0f12;padding:8px 20px;border-radius:0 0 8px 8px;font-weight:700;font-size:14px;z-index:10000;transition:top .2s} .skip-to-content:focus{top:0} /* ------------------------------------------------------------------- Contact page components (layout similar to reference) ------------------------------------------------------------------- */ .creapal-pro .cp-contact-hero{ background: radial-gradient(900px 540px at 15% 10%, rgba(201,162,39,0.22), transparent 60%), radial-gradient(760px 520px at 85% 15%, rgba(191,195,199,0.14), transparent 58%), linear-gradient(135deg, #0d0f12 0%, #15171b 55%, #0d0f12 100%); position: relative; overflow: hidden; } .creapal-pro .cp-contact-hero::after{ content:""; position:absolute; width: 520px; height: 520px; border-radius: 999px; background: rgba(255,255,255,0.05); right: -180px; top: -180px; } .creapal-pro .cp-contact-card{ background: #fff; border-radius: var(--cp-radius-lg); border: 1px solid rgba(0,0,0,0.08); box-shadow: var(--cp-shadow); padding: 26px 24px; text-align: center; } .creapal-pro .cp-contact-card h3{ font-weight: 900; font-size: 22px; margin: 8px 0 4px; } .creapal-pro .cp-contact-sub{ color: var(--cp-muted); margin: 0 0 12px; } .creapal-pro .cp-contact-strong{ font-weight: 800; color: var(--cp-black); } .creapal-pro .cp-contact-icon{ width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(201,162,39,0.16); border: 1px solid rgba(201,162,39,0.22); color: var(--cp-black); margin: 0 auto 6px; font-size: 18px; } .creapal-pro .cp-contact-link{ display:block; font-weight: 800; color: var(--cp-black); margin-top: 6px; } .creapal-pro .cp-contact-link:hover{ text-decoration: underline; } .creapal-pro .cp-input{ width: 100%; padding: 14px 16px; border: 2px solid var(--light-border-color); border-radius: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; background: #fff; } .creapal-pro .cp-input:focus{ border-color: var(--accent2-color); box-shadow: 0 0 0 4px rgba(201,162,39,0.12); } .creapal-pro .cp-info-card{ border-radius: 28px; background: linear-gradient(135deg, #0d0f12 0%, #13161b 100%); color: #fff; padding: 26px; box-shadow: var(--cp-shadow); } .creapal-pro .cp-info-title{ font-weight: 900; font-size: 22px; display:flex; align-items:center; gap: 10px; margin: 0 0 16px; } .creapal-pro .cp-info-item{ display:flex; gap: 14px; align-items:flex-start; padding: 14px 14px; border-radius: 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); margin-top: 12px; } .creapal-pro .cp-info-badge{ width: 40px; height: 40px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(201,162,39,0.18); border: 1px solid rgba(201,162,39,0.20); color: #fff; flex: 0 0 auto; } .creapal-pro .cp-info-item-title{ font-weight: 900; } .creapal-pro .cp-info-item-sub{ color: rgba(255,255,255,0.78); margin-top: 2px; line-height: 1.4; } .creapal-pro .cp-social{ width: 44px; height: 44px; border-radius: 14px; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); } .creapal-pro .cp-social:hover{ transform: translateY(-1px); transition: transform .12s ease; } .creapal-pro .cp-map-wrap{ border-radius: 24px; overflow:hidden; border: 1px solid rgba(0,0,0,0.10); box-shadow: var(--cp-shadow); background: #fff; } .creapal-pro .cp-map-wrap iframe{ width: 100%; height: 320px; border: 0; display:block; } .creapal-pro .cp-toast{ position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display:flex; align-items:center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: rgba(13,15,18,0.92); color:#fff; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 44px rgba(0,0,0,0.28); z-index: 9999; }