/* ================= Loader (consistent, no flash) ================= */ .cvLoader{ position: fixed; inset: 0; display: grid; place-items: center; background: #0a0a0a; z-index: 99999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility .6s ease; } /* Visible while preloading (also reinforced inline in ) */ html.cv-preload .cvLoader{ opacity: 1; visibility: visible; pointer-events: all; } /* Hide once loaded */ .cvLoader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; } /* CodexVita Minimal premium theme (mobile-first) */ /* ====== RESET ====== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0a0a0a;color:rgba(255,255,255,.92);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit} button{color:inherit} /* ====== THEME ====== */ html.cv-preload #cvLoader{opacity:1 !important;visibility:visible !important;pointer-events:all !important;} :root{ --bg:#0a0a0a; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.08); --stroke:rgba(255,255,255,.12); --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.72); --muted2:rgba(255,255,255,.56); --accent:#c9a24d; --accent2:#e0c27a; --shadow:0 10px 30px rgba(0,0,0,.35); --r:18px; --max:1100px; } /* Per-page accents (subtle so pages don't feel identical) */ body[data-page="home"]{ --accent:#c9a24d; } body[data-page="about"]{ --accent:#7dd3fc; } /* soft cyan */ body[data-page="services"]{ --accent:#a78bfa; } /* violet */ body[data-page="faq"]{ --accent:#34d399; } /* green */ body[data-page="contact"]{ --accent:#f472b6; } /* pink */ .container{width:min(var(--max),calc(100% - 32px));margin:0 auto} @media (min-width:720px){ .container{width:min(var(--max),calc(100% - 48px));} } .bgGlow{ position:fixed;inset:-20%; background: radial-gradient(40% 30% at 12% 15%, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 60%), radial-gradient(34% 26% at 82% 20%, rgba(255,255,255,.10) 0%, transparent 65%), radial-gradient(38% 30% at 55% 85%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%); filter:blur(10px); pointer-events:none; z-index:-2; } .noise{ position:fixed;inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); mix-blend-mode:overlay;opacity:.35;pointer-events:none;z-index:-1; } /* ====== TYPO ====== */ h1,h2,h3{margin:0} h1{font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.7px} h2{font-size:clamp(22px,3.2vw,30px);letter-spacing:-.25px} p{margin:0;color:var(--muted);line-height:1.65} .small{font-size:13px;color:var(--muted2)} .linkInline{ color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .linkInline:hover{ color: var(--accent2); } /* ====== UI ====== */ .pill{ display:inline-flex;gap:10px;align-items:center; padding:8px 12px;border:1px solid var(--stroke); background:rgba(0,0,0,.35);border-radius:999px;color:var(--muted); } .dot{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%, transparent)} .kbd{ font-size:12px;color:var(--muted2); border:1px solid var(--stroke);padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.25); } .hr{height:1px;background:rgba(255,255,255,.08);margin:14px 0} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:12px 16px;border-radius:14px; border:1px solid var(--stroke);background:rgba(255,255,255,.06); color:var(--text);cursor:pointer;user-select:none; transition:transform .15s ease, background .15s ease, border-color .15s ease; } .btn .btnIcon{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;flex:0 0 auto} .actionBtn{border-color:var(--stroke);background:rgba(255,255,255,.06)} .btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 40%, transparent);background:rgba(255,255,255,.085)} .btn.primary{ border-color:color-mix(in srgb,var(--accent) 60%, transparent); background:radial-gradient(120% 120% at 10% 10%, color-mix(in srgb,var(--accent) 35%, transparent), rgba(255,255,255,.04)); } .btn.ghost{background:transparent} @media (max-width:420px){ .btn{width:100%} } /* ====== HEADER / NAV ====== */ .header{ position:sticky;top:0;z-index:1000; backdrop-filter:blur(14px); background:linear-gradient(to bottom, rgba(10,10,10,.78), rgba(10,10,10,.30)); border-bottom:1px solid rgba(255,255,255,.06); } .headerInner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px} .brand{display:flex;align-items:center;gap:4px;min-width:210px} .logoMark{ position: relative; width:70px;height:70px;border-radius:0; background: transparent url("../img/TransparentOnlyLogo.png") center/contain no-repeat; border:none; box-shadow: none; flex:0 0 70px; } .logoMark::after{ content:"";position:absolute;inset:0;border-radius:0; border:none;transform:none; } .brandText strong{display:block;letter-spacing:.2px;font-size:18px;line-height:1.2} .brandText span{display:block;color:var(--muted2);font-size:11px;line-height:1.2;margin-top:2px} .nav{display:flex;align-items:center;gap:8px} .navItem{ position:relative;padding:10px 12px;border-radius:12px; color:var(--muted);border:1px solid transparent; transition:background .15s ease,border-color .15s ease,color .15s ease; cursor:pointer;user-select:none; } .navItem:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 28%, transparent);background:rgba(255,255,255,.05)} /* Make button behave like link (fix white button background) */ .navBtn{background:transparent;border:0} /* Right tools */ .rightTools{display:flex;align-items:center;gap:10px} .langToggleSingle{ border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:var(--text); padding:8px 10px; border-radius:12px; font-weight:700; font-size:12px; letter-spacing:.6px; min-width:44px; display:inline-flex;align-items:center;justify-content:center; cursor:pointer;user-select:none; transition:transform .15s ease, background .15s ease, border-color .15s ease; } .langToggleSingle:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 28%, transparent); background:rgba(255,255,255,.08); } .langToggle{ display:flex;align-items:center;gap:6px; border:1px solid var(--stroke);background:rgba(255,255,255,.05); border-radius:14px;padding:6px; } .langToggle button{ border:0;background:transparent;color:var(--muted); padding:8px 10px;border-radius:10px;cursor:pointer; transition:background .15s ease,color .15s ease; font-weight:700;font-size:13px; } .langToggle button.active{ background:color-mix(in srgb,var(--accent) 22%, transparent); color:var(--text); border:1px solid color-mix(in srgb,var(--accent) 40%, transparent); } .burger{display:none} .burger .bar{width:22px;height:2px;background:rgba(255,255,255,.85);border-radius:99px} /* Mega menu */ .megaWrap{position:relative} .mega{ position:absolute;left:0;top:calc(100% + 12px); width:min(980px,calc(100vw - 20px)); padding:16px;border-radius:18px; background:rgba(20,20,20,.88); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.10); box-shadow:var(--shadow); /* Smooth open/close */ opacity:0; visibility:hidden; pointer-events:none; transform: translateY(-8px) scale(.98); transform-origin:top left; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .megaOpen .mega{ opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1); } .megaGrid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px} .megaCard{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);border-radius:16px;padding:14px} .megaCard h4{margin:0 0 10px 0;color:var(--text);font-size:14px;letter-spacing:.2px} .megaList{display:flex;flex-direction:column;gap:8px} .megaLink{ display:flex;align-items:center;justify-content:space-between; padding:10px 12px;border-radius:12px;border:1px solid transparent; color:var(--muted);background:rgba(0,0,0,.25); transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease; } .megaLink:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:color-mix(in srgb,var(--accent) 28%, transparent);transform:translateY(-1px)} .megaAside{ border-radius:16px;padding:16px;border:1px solid color-mix(in srgb,var(--accent) 28%, transparent); background:radial-gradient(120% 120% at 15% 10%, color-mix(in srgb,var(--accent) 22%, transparent), rgba(255,255,255,.04)); } .megaAside p{margin:10px 0 0;color:var(--muted);line-height:1.5;font-size:13px} .megaActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} /* Mobile nav */ .mobilePanel[hidden]{display:none!important} .mobilePanel{display:none;border-top:1px solid rgba(255,255,255,.07);padding:12px 0 16px} .mobilePanel .stack{display:flex;flex-direction:column;gap:8px} .mobilePanel .navItem{width:100%;display:flex;justify-content:space-between} .mobilePanel .sub{ margin-left:8px;padding-left:10px;border-left:1px dashed rgba(255,255,255,.14); display:none;flex-direction:column;gap:8px; } .mobilePanel .open + .sub{display:flex} .mobilePanel .sub a{ padding:10px 12px;border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--muted); } .mobilePanel .sub a:hover{border-color:color-mix(in srgb,var(--accent) 28%, transparent);color:var(--text)} @media (max-width:920px){ .nav{display:none} .burger{display:inline-flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);cursor:pointer} .mobilePanel{display:block} .brand{min-width:unset} } /* ====== PAGE LAYOUT ====== */ main{padding:44px 0 18px} section{padding:20px 0} .sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px} .sectionHead p{max-width:64ch;font-size:13.5px} .grid2{display:grid;grid-template-columns:1fr;gap:14px} .grid3{display:grid;grid-template-columns:1fr;gap:14px} @media (min-width:920px){ .grid2{grid-template-columns:1.2fr .8fr} .grid3{grid-template-columns:repeat(3,1fr)} } .card{ border-radius:var(--r);border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); padding:16px;box-shadow:0 10px 24px rgba(0,0,0,.18); } .card p{font-size:13.5px} .card h3{font-size:15px;margin:0 0 8px 0} /* ====== HERO ====== */ .heroGrid{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch} .heroCard{ border-radius:calc(var(--r) + 6px); border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow:var(--shadow);overflow:hidden;position:relative; } .heroCard::before{ content:"";position:absolute;inset:-2px; background:radial-gradient(60% 60% at 15% 15%, color-mix(in srgb,var(--accent) 18%, transparent), transparent 60%), radial-gradient(40% 40% at 80% 25%, rgba(255,255,255,.10), transparent 60%); pointer-events:none; } .heroMain{padding:22px;position:relative} .lead{margin-top:10px;font-size:15.5px;max-width:64ch} .heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} .heroMeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;color:var(--muted2);font-size:13px} .heroMeta .pill{padding:8px 10px} /* Side panel (varies by page) */ .sidePanel{padding:18px;display:flex;flex-direction:column;gap:12px;position:relative} .sidePanel .titleRow{display:flex;align-items:center;justify-content:space-between;gap:10px} .sidePanel h3{font-size:16px;letter-spacing:-.15px} .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:13.5px;line-height:1.5} .list li{display:flex;gap:10px;align-items:flex-start} .list li::before{content:"";color:color-mix(in srgb,var(--accent) 95%, transparent);font-weight:900;line-height:1;margin-top:2px} @media (min-width:920px){ .heroGrid{grid-template-columns:1.2fr .8fr} } /* ====== FORMS ====== */ .field{display:flex;flex-direction:column;gap:6px} .field label{font-size:13px;color:var(--muted2)} .field input,.field textarea{ background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); border-radius:14px; color:var(--text); padding:12px 12px; outline:none; } .field textarea{min-height:120px;resize:vertical} .field input:focus,.field textarea:focus{border-color:color-mix(in srgb,var(--accent) 45%, transparent)} .formGrid{display:grid;grid-template-columns:1fr;gap:12px} @media (min-width:720px){ .formGrid{grid-template-columns:1fr 1fr} } /* ====== FOOTER ====== */ footer{padding:26px 0 34px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted2);font-size:13px} .footerInner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .footerLinks{display:flex;gap:10px;flex-wrap:wrap} .footerLinks a{padding:8px 10px;border-radius:12px;border:1px solid transparent} .footerLinks a:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)} .social{display:flex;gap:10px} .social a{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);transition:transform .15s ease,border-color .15s ease,background .15s ease} .social a:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 28%, transparent);background:rgba(255,255,255,.06)} .social svg{width:18px;height:18px;fill:none;stroke:rgba(255,255,255,.88);stroke-width:2} /* ====== REVEAL ====== */ .reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease} .reveal.show{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .btn{transition:none} } /* Accessibility */ .srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .navItem .navIcon{width:16px;height:16px;stroke:rgba(255,255,255,.75);stroke-width:2;fill:none;margin-right:8px;vertical-align:-3px} .navItem:hover .navIcon{stroke:rgba(255,255,255,.92)} /* ================== LOADER ================== */ .cvLoader.show{ opacity: 1; visibility: visible; pointer-events: all; } .cvLoader.hide{ opacity: 0; visibility: hidden; pointer-events: none; } .cvLoaderInner{ display:flex; flex-direction:column; align-items:center; gap: 18px; } .cvLoaderLogo{ width: min(520px, 80vw); max-width: 520px; height: auto; animation: cvPulse 1.6s ease-in-out infinite; filter: drop-shadow(0 0 70px rgba(201,162,77,.45)); } .cvLoaderHint{ color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: .25px; } /* Pulse animation */ @keyframes cvPulse{ 0% { transform: scale(1); opacity:.9; } 50% { transform: scale(1.06); opacity:1; } 100% { transform: scale(1); opacity:.9; } } /* Accessibility */ @media (prefers-reduced-motion: reduce){ .cvLoaderLogo{ animation: none; } }