/* ═══════════════════════════════════════════════════════ IuLiaNi IT Solutions — Main Stylesheet Dark / Light mode via [data-theme] attribute on ═══════════════════════════════════════════════════════ */ /* ── DARK MODE (default) ── */ :root,[data-theme="dark"]{ --bg:#050a0f; --surface:#0c1420; --surface2:#111d2b; --accent:#00e5ff; --accent2:#0070f3; --accent3:#7b2fff; --text:#e8f4f8; --muted:#6b8a9e; --border:rgba(0,229,255,.12); --glow:0 0 40px rgba(0,229,255,.15); --card-shadow:0 4px 24px rgba(0,0,0,.4); --nav-bg:rgba(5,10,15,.9); --topbar-bg:rgba(5,10,15,.85); --mode-icon:"☀️"; } /* ── LIGHT MODE ── */ [data-theme="light"]{ --bg:#f0f4f8; --surface:#ffffff; --surface2:#e8eef4; --accent:#0070f3; --accent2:#0050c8; --accent3:#6d28d9; --text:#0a1628; --muted:#5a7189; --border:rgba(0,112,243,.15); --glow:0 0 40px rgba(0,112,243,.12); --card-shadow:0 4px 24px rgba(0,0,0,.08); --nav-bg:rgba(240,244,248,.92); --topbar-bg:rgba(240,244,248,.9); --mode-icon:"🌙"; } /* ── RESET & BASE ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'DM Mono',monospace; background:var(--bg); color:var(--text); overflow-x:hidden; transition:background .35s,color .35s; } a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} ul{list-style:none} /* ── PARTICLE CANVAS ── */ #particle-canvas{ position:fixed;top:0;left:0; width:100%;height:100%; z-index:0;pointer-events:none; opacity:1; transition:opacity .4s; } [data-theme="light"] #particle-canvas{opacity:.4} /* ── LAYOUT WRAP ── */ .iuliani-wrap{position:relative;z-index:1} /* ── TOPBAR ── */ .iuliani-topbar{ background:var(--topbar-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:8px 0; font-size:12px; color:var(--muted); letter-spacing:.05em; transition:background .35s,border-color .35s; } .iuliani-topbar__inner{ max-width:1200px;margin:0 auto;padding:0 32px; display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:8px; } .iuliani-topbar a{color:var(--muted);transition:color .2s} .iuliani-topbar a:hover{color:var(--accent)} .iuliani-topbar .tb-div{margin:0 12px;opacity:.3} .iuliani-topbar__right{display:flex;align-items:center;gap:12px} /* ── LANG SWITCHER ── */ .lang-switcher{display:flex;gap:4px;align-items:center} .lang-btn{ background:none; border:1px solid transparent; color:var(--muted); font-family:'DM Mono',monospace; font-size:11px;letter-spacing:.08em; padding:3px 8px;border-radius:4px; cursor:pointer;transition:all .2s; text-transform:uppercase; } .lang-btn:hover,.lang-btn.active{ color:var(--accent); border-color:rgba(0,229,255,.3); background:rgba(0,229,255,.06); } [data-theme="light"] .lang-btn:hover, [data-theme="light"] .lang-btn.active{ border-color:rgba(0,112,243,.3); background:rgba(0,112,243,.06); } /* ── DARK/LIGHT TOGGLE ── */ .mode-toggle{ background:none; border:1px solid var(--border); border-radius:6px; padding:4px 10px; cursor:pointer; font-size:14px; line-height:1; transition:all .2s; color:var(--text); } .mode-toggle:hover{border-color:var(--accent);background:rgba(0,229,255,.06)} /* ── NAV ── */ .iuliani-nav{ position:sticky;top:0;z-index:100; background:var(--nav-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:0 32px; transition:background .35s,border-color .35s; } .iuliani-nav__inner{ max-width:1200px;margin:0 auto; display:flex;justify-content:space-between;align-items:center; height:64px; } .iuliani-logo{ font-family:'Syne',sans-serif; font-weight:800;font-size:22px; letter-spacing:-.02em; color:var(--text); } .iuliani-logo span{color:var(--accent)} .iuliani-nav__links{display:flex;gap:8px} .iuliani-nav__links a{ color:var(--muted); font-size:12px;letter-spacing:.1em; text-transform:uppercase; padding:8px 14px;border-radius:6px; transition:all .2s; } .iuliani-nav__links a:hover{color:var(--accent);background:rgba(0,229,255,.07)} [data-theme="light"] .iuliani-nav__links a:hover{background:rgba(0,112,243,.07)} .btn-nav{ background:var(--accent)!important; color:#050a0f!important; font-weight:500; padding:8px 20px!important; border-radius:6px!important; } .btn-nav:hover{opacity:.88!important} [data-theme="light"] .btn-nav{color:#fff!important} /* hamburger */ .nav-toggle{ display:none; background:none;border:1px solid var(--border); border-radius:6px;padding:6px 10px; cursor:pointer;color:var(--text);font-size:18px; line-height:1; } /* ── HERO ── */ .iuliani-hero{ min-height:100vh; display:flex;align-items:center;justify-content:center; text-align:center; padding:80px 32px; position:relative; } .iuliani-hero__inner{max-width:800px;margin:0 auto} .hero-badge{ display:inline-block; background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.25); color:var(--accent); font-size:11px;letter-spacing:.15em;text-transform:uppercase; padding:6px 16px;border-radius:100px; margin-bottom:28px; transition:all .35s; } [data-theme="light"] .hero-badge{ background:rgba(0,112,243,.08); border-color:rgba(0,112,243,.25); } .iuliani-hero h1{ font-family:'Syne',sans-serif; font-size:clamp(44px,7vw,88px); font-weight:800;line-height:1; letter-spacing:-.03em;margin-bottom:24px; color:var(--text); } .iuliani-hero h1 .hl{ background:linear-gradient(135deg,var(--accent),var(--accent3)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .iuliani-hero__desc{ max-width:560px;margin:0 auto 40px; color:var(--muted);font-size:15px;line-height:1.7; } .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .btn{ display:inline-block;padding:13px 28px; border-radius:8px; font-family:'DM Mono',monospace; font-size:13px;letter-spacing:.05em; transition:all .25s;cursor:pointer;border:none; } .btn-primary{background:var(--accent);color:#050a0f;font-weight:500} .btn-primary:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,229,255,.3)} [data-theme="light"] .btn-primary{color:#fff} [data-theme="light"] .btn-primary:hover{box-shadow:0 8px 30px rgba(0,112,243,.3)} .btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)} .btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .stat-bar{ display:flex;gap:60px;justify-content:center;flex-wrap:wrap; margin-top:80px;padding-top:40px; border-top:1px solid var(--border); } .stat{text-align:center} .stat__num{ font-family:'Syne',sans-serif; font-size:36px;font-weight:800; color:var(--accent);display:block; } .stat__label{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase} /* ── SECTIONS ── */ .iuliani-section{padding:100px 32px} .container{max-width:1200px;margin:0 auto} .section-label{ font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);margin-bottom:12px;display:block; } .section-title{ font-family:'Syne',sans-serif; font-size:clamp(28px,4vw,48px); font-weight:800;letter-spacing:-.02em; line-height:1.1;margin-bottom:16px; color:var(--text); } .section-sub{color:var(--muted);font-size:15px;line-height:1.7;max-width:560px} /* ── PRODUCTS ── */ .iuliani-products{background:transparent} .features-grid{ display:grid;grid-template-columns:1fr 1fr; gap:16px;margin-top:60px; } .feature-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px;padding:40px; transition:all .3s;position:relative;overflow:hidden; box-shadow:var(--card-shadow); } .feature-card::before{ content:'';position:absolute;top:0;left:0;right:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent3)); transform:scaleX(0);transform-origin:left;transition:transform .4s; } .feature-card:hover::before{transform:scaleX(1)} .feature-card:hover{ background:var(--surface2); border-color:color-mix(in srgb, var(--accent) 35%, transparent); transform:translateY(-3px);box-shadow:var(--glow); } .feature-icon{ width:48px;height:48px;border-radius:12px; background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.2); display:flex;align-items:center;justify-content:center; font-size:22px;margin-bottom:20px; } [data-theme="light"] .feature-icon{ background:rgba(0,112,243,.1); border-color:rgba(0,112,243,.2); } .feature-card h3{ font-family:'Syne',sans-serif; font-size:18px;font-weight:700; margin-bottom:10px;color:var(--text); } .feature-card p{color:var(--muted);font-size:13px;line-height:1.7} .feature-tag{ display:inline-block; background:rgba(123,47,255,.15); border:1px solid rgba(123,47,255,.3); color:#a67fff; font-size:10px;letter-spacing:.1em; padding:3px 10px;border-radius:100px;margin-top:16px; } /* ── SERVICES ── */ .iuliani-services{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); transition:background .35s,border-color .35s; } .services-header{ display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:60px;flex-wrap:wrap;gap:24px; } .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .service-card{ background:var(--bg); border:1px solid var(--border); border-radius:16px;padding:36px; transition:all .3s;box-shadow:var(--card-shadow); } .service-card:hover{ border-color:color-mix(in srgb, var(--accent) 35%, transparent); transform:translateY(-4px);box-shadow:var(--glow); } .service-num{font-size:11px;color:var(--accent);letter-spacing:.15em;font-weight:500;margin-bottom:16px} .service-card h3{ font-family:'Syne',sans-serif; font-size:20px;font-weight:700;margin-bottom:12px;color:var(--text); } .service-card p{color:var(--muted);font-size:13px;line-height:1.7} /* ── CONTACT ── */ .iuliani-contact{background:transparent} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:60px} .contact-info h3{ font-family:'Syne',sans-serif; font-size:28px;font-weight:700;margin-bottom:16px;color:var(--text); } .contact-info>p{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:32px} .contact-detail{ display:flex;align-items:center;gap:14px; padding:16px 0;border-top:1px solid var(--border); font-size:13px;color:var(--muted); } .contact-detail__icon{ width:36px;height:36px;border-radius:8px; background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.15); display:flex;align-items:center;justify-content:center; font-size:16px;flex-shrink:0; } [data-theme="light"] .contact-detail__icon{ background:rgba(0,112,243,.08); border-color:rgba(0,112,243,.15); } .contact-detail a{color:var(--text);transition:color .2s} .contact-detail a:hover{color:var(--accent)} /* ── FORM ── */ .contact-form-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:20px;padding:40px; transition:background .35s,border-color .35s; box-shadow:var(--card-shadow); } .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-group{margin-bottom:18px} .form-group label{ display:block;font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin-bottom:8px; } .form-group input, .form-group textarea, .form-group select{ width:100%;background:var(--bg); border:1px solid var(--border);border-radius:8px; padding:12px 16px;color:var(--text); font-family:'DM Mono',monospace;font-size:13px; outline:none;transition:border-color .2s,background .35s; appearance:none;-webkit-appearance:none; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,229,255,.08); } [data-theme="light"] .form-group input:focus, [data-theme="light"] .form-group textarea:focus, [data-theme="light"] .form-group select:focus{box-shadow:0 0 0 3px rgba(0,112,243,.1)} .form-group textarea{resize:vertical;min-height:110px} /* ── CAPTCHA ── */ .captcha-wrapper{ background:var(--bg);border:1px solid var(--border); border-radius:12px;padding:20px;margin-bottom:20px; transition:background .35s,border-color .35s; } .captcha-header{ font-size:10px;letter-spacing:.15em;text-transform:uppercase; color:var(--muted);margin-bottom:14px; display:flex;justify-content:space-between;align-items:center; } .captcha-refresh{ background:none;border:none;color:var(--accent); cursor:pointer;font-size:18px;padding:0; transition:transform .3s;line-height:1; } .captcha-refresh:hover{transform:rotate(180deg)} #captcha-canvas{ display:block;border-radius:8px; border:1px solid var(--border); width:100%;max-width:280px; cursor:not-allowed;user-select:none; } .captcha-input-row{display:flex;gap:10px;margin-top:12px;align-items:center} .captcha-input-row input{ flex:1;background:var(--surface2); border:1px solid var(--border);border-radius:8px; padding:10px 14px;color:var(--text); font-family:'DM Mono',monospace; font-size:15px;letter-spacing:.3em; text-align:center;outline:none; transition:border-color .2s; text-transform:uppercase; } .captcha-input-row input:focus{border-color:var(--accent)} .captcha-status{font-size:11px;margin-top:8px;min-height:16px;transition:all .2s} .captcha-status.ok{color:#00e676} .captcha-status.err{color:#ff5252} /* ── SUBMIT BTN ── */ .btn-submit{ width:100%;padding:14px; background:linear-gradient(135deg,var(--accent2),var(--accent3)); color:#fff;border:none;border-radius:8px; font-family:'DM Mono',monospace;font-size:13px; letter-spacing:.05em;cursor:pointer; transition:all .25s;font-weight:500; } .btn-submit:hover{opacity:.88;transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,112,243,.4)} .btn-submit:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none} /* ── ALERTS ── */ .form-alert{ padding:12px 16px;border-radius:8px; font-size:13px;margin-bottom:14px;display:none; } .form-alert.err{background:rgba(255,82,82,.1);border:1px solid rgba(255,82,82,.3);color:#ff8a80} .form-alert.ok{background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.3);color:#00e676} .form-success{display:none;text-align:center;padding:40px 0} .form-success .check{font-size:48px;display:block;margin-bottom:16px} .form-success h3{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;margin-bottom:8px;color:var(--text)} .form-success p{color:var(--muted);font-size:14px} /* ── FOOTER ── */ .iuliani-footer{ background:var(--surface); border-top:1px solid var(--border); padding:40px 32px; transition:background .35s,border-color .35s; } .footer-inner{ max-width:1200px;margin:0 auto; display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:24px; } .footer-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--text)} .footer-logo span{color:var(--accent)} .footer-logo small{font-size:13px;color:var(--muted);font-family:'DM Mono',monospace;font-weight:400} .footer-copy{font-size:12px;color:var(--muted)} .footer-links{display:flex;gap:20px} .footer-links a{color:var(--muted);font-size:12px;transition:color .2s} .footer-links a:hover{color:var(--accent)} /* ── WP ADMIN BAR ADJUSTMENT ── */ .admin-bar .iuliani-nav{top:32px} @media screen and (max-width:782px){.admin-bar .iuliani-nav{top:46px}} /* ── ANIMATIONS ── */ @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .hero-badge{animation:fadeUp .7s .1s ease both} .iuliani-hero h1{animation:fadeUp .7s .2s ease both} .iuliani-hero__desc{animation:fadeUp .7s .35s ease both} .hero-cta{animation:fadeUp .7s .5s ease both} .stat-bar{animation:fadeUp .7s .65s ease both} /* ── RESPONSIVE ── */ @media(max-width:900px){ .services-grid{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .features-grid,.services-grid,.contact-grid,.form-row{grid-template-columns:1fr} .iuliani-nav__links{ display:none;flex-direction:column; position:absolute;top:64px;left:0;right:0; background:var(--nav-bg);backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:16px 24px;gap:4px; } .iuliani-nav__links.open{display:flex} .nav-toggle{display:block} .iuliani-nav__inner{flex-wrap:wrap;height:auto;padding:12px 0;position:relative} .services-header{flex-direction:column} .stat-bar{gap:30px} .iuliani-section{padding:70px 20px} .iuliani-nav{padding:0 20px} .iuliani-topbar__inner{flex-direction:column;align-items:flex-start;gap:6px} .iuliani-hero{padding:80px 20px} }