:root{ /* ====================================================== COLORS ====================================================== */ --cc-primary:#22d3ee; --cc-primary-light:#38dfff; --cc-primary-dark:#1498cc; --cc-bg:#05080d; --cc-surface:#091018; --cc-surface-light:#111827; --cc-border:#1e293b; --cc-text:#ffffff; --cc-text-muted:#94a3b8; --cc-success:#10b981; --cc-warning:#f59e0b; --cc-danger:#ef4444; /* ====================================================== TYPOGRAPHY ====================================================== */ --cc-font:"Inter",sans-serif; --cc-text-xs:.75rem; --cc-text-sm:.875rem; --cc-text-md:1rem; --cc-text-lg:1.125rem; --cc-text-xl:1.5rem; --cc-text-2xl:2rem; --cc-text-3xl:2.5rem; /* ====================================================== SPACING ====================================================== */ --cc-space-1:4px; --cc-space-2:8px; --cc-space-3:12px; --cc-space-4:16px; --cc-space-5:20px; --cc-space-6:24px; --cc-space-8:32px; --cc-space-10:40px; /* ====================================================== BORDERS ====================================================== */ --cc-radius-sm:8px; --cc-radius-md:12px; --cc-radius-lg:16px; --cc-radius-xl:20px; /* ====================================================== SHADOWS ====================================================== */ --cc-shadow: 0 20px 60px rgba(0,0,0,.45); --cc-glow: 0 0 25px rgba(34,211,238,.18); /* ====================================================== TRANSITIONS ====================================================== */ --cc-transition:.22s ease;}html{ font-family:var(--cc-font); color:var(--cc-text);}body{ font-family:var(--cc-font); font-size:16px; line-height:1.6;}h1{ font-size:var(--cc-text-3xl); font-weight:800; line-height:1.1;}h2{ font-size:var(--cc-text-2xl); font-weight:700;}h3{ font-size:var(--cc-text-xl); font-weight:700;}h4{ font-size:var(--cc-text-lg); font-weight:700;}p{ color:var(--cc-text-muted);}strong{ color:var(--cc-text);}small{ font-size:.85rem;}*{ margin:0; padding:0; box-sizing:border-box;}body{ background:var(--cc-bg); color:var(--cc-text);}.container{ width:min(1280px,95%); margin:auto;}.grid{ display:grid; gap:24px;}.flex{ display:flex;}.flex-center{ display:flex; justify-content:center; align-items:center;}.hidden{ display:none;}button,.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 24px; border:none; border-radius:14px; cursor:pointer; font-weight:700; transition:var(--cc-transition);}.btn-primary{ background: linear-gradient( 135deg, var(--cc-primary), var(--cc-primary-dark) ); color:white; box-shadow:var(--cc-glow);}.btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 10px 30px rgba(34,211,238,.25);}.btn-secondary{ background:#111827; color:white; border:1px solid var(--cc-border);}input,textarea,select{ width:100%; background:#101827; color:white; border:1px solid var(--cc-border); border-radius:14px; padding:16px; transition:var(--cc-transition);}input::placeholder,textarea::placeholder{ color:#64748b;}input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--cc-primary); box-shadow: 0 0 0 4px rgba(34,211,238,.12);}label{ display:block; margin-bottom:8px; font-weight:600;}.card{ background:rgba(11,17,24,.72); backdrop-filter:blur(20px); border-radius:20px; border:1px solid rgba(34,211,238,.15); box-shadow:var(--cc-shadow); padding:32px;}.card-header{ margin-bottom:24px;}.card-title{ font-size:1.5rem; font-weight:700;}.card-body{ color:var(--cc-text-muted);}.fade-up{ animation:fadeUp .45s ease;}.fade{ animation:fade .3s ease;}@keyframes fade{ from{ opacity:0; } to{ opacity:1; }}@keyframes fadeUp{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:translateY(0); }}.hover-lift{ transition:var(--cc-transition);}.hover-lift:hover{ transform:translateY(-2px);}/* ========================================================== CENCRAFT WORDPRESS ========================================================== *//* ========================================================== SITE ========================================================== */html{ scroll-behavior:smooth;}body{ background:var(--cc-bg); color:var(--cc-text); font-family:var(--cc-font); font-size:16px; line-height:1.6;}/* ========================================================== LINKS ========================================================== */a{ color:var(--cc-primary); text-decoration:none; transition:var(--cc-transition);}a:hover{ color:var(--cc-primary-light);}/* ========================================================== HEADER ========================================================== */.site-header{ background:rgba(5,8,13,.85); backdrop-filter:blur(18px); border-bottom:1px solid rgba(34,211,238,.12); position:sticky; top:0; z-index:1000;}/* ========================================================== NAVIGATION ========================================================== */.main-navigation ul{ display:flex; align-items:center; gap:24px; list-style:none;}.main-navigation a{ color:var(--cc-text); font-weight:600;}.main-navigation a:hover{ color:var(--cc-primary);}/* ========================================================== HERO ========================================================== */.hero{ padding:120px 0; background: linear-gradient( rgba(5,8,13,.75), rgba(5,8,13,.85) ), url("https://css.cencraft.net/images/hero-bg.webp"); background-size:cover; background-position:center;}.hero h1{ margin-bottom:20px;}.hero p{ max-width:650px; font-size:1.2rem;}/* ========================================================== SECTIONS ========================================================== */section{ padding:80px 0;}/* ========================================================== CARDS ========================================================== */.wp-card{ background:rgba(11,17,24,.72); backdrop-filter:blur(20px); border:1px solid rgba(34,211,238,.12); border-radius:20px; padding:32px; box-shadow:var(--cc-shadow);}/* ========================================================== BUTTONS ========================================================== */.wp-block-button__link,.button,input[type=submit],button{ background: linear-gradient( 135deg, var(--cc-primary), var(--cc-primary-dark) ); color:#fff; border:none; border-radius:14px; padding:16px 28px; font-weight:700; transition:var(--cc-transition); box-shadow:var(--cc-glow);}.wp-block-button__link:hover,.button:hover,input[type=submit]:hover,button:hover{ transform:translateY(-2px);}/* ========================================================== FORMS ========================================================== */input,textarea,select{ background:#101827; color:#fff; border:1px solid var(--cc-border); border-radius:14px; padding:16px;}input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--cc-primary); box-shadow: 0 0 0 4px rgba(34,211,238,.12);}/* ========================================================== TABLES ========================================================== */table{ width:100%; border-collapse:collapse;}th{ background:#111827; color:#fff; text-align:left;}th,td{ padding:16px; border-bottom:1px solid var(--cc-border);}/* ========================================================== SIDEBAR ========================================================== */.widget{ background:rgba(11,17,24,.72); border-radius:20px; padding:28px; margin-bottom:28px; border:1px solid rgba(34,211,238,.10);}/* ========================================================== FOOTER ========================================================== */.site-footer{ background:#05080d; border-top:1px solid rgba(34,211,238,.10); padding:60px 0;}.site-footer p,.site-footer a{ color:var(--cc-text-muted);}.site-footer a:hover{ color:var(--cc-primary);}/* ========================================================== IMAGES ========================================================== */img{ max-width:100%; height:auto;}/* ========================================================== SELECTION ========================================================== */::selection{ background:var(--cc-primary); color:#fff;}/* ========================================================== SCROLLBAR ========================================================== */::-webkit-scrollbar{ width:10px;}::-webkit-scrollbar-track{ background:#091018;}::-webkit-scrollbar-thumb{ background:var(--cc-primary-dark); border-radius:999px;}::-webkit-scrollbar-thumb:hover{ background:var(--cc-primary);}