/* Pro-Activ Computer Solutions — dark theme, matches pro-activsolutions.com.au group site */ /* Fonts are loaded via in (see generate.py) for faster rendering */ :root{ /* backgrounds */ --blue-darker:#0f1011; /* deepest bg (topbar / footer) */ --bg:#141517; /* page background */ --bg-soft:#1b1d20; /* card / alt-section background */ --bg-soft2:#202226; /* hover / raised surface */ --border:#2b2e33; /* text */ --ink:#e7e9eb; /* primary light text */ --ink-light:#9aa0a6; /* muted secondary text */ --white:#ffffff; /* brand accent (Pro-Activ Computer Solutions = green division colour) */ --green:#6fcf3c; --green-dark:#57a92c; --green-soft:rgba(111,207,60,.14); /* legacy alias so existing "blue" references read as the accent/heading colour */ --blue:#6fcf3c; --blue-dark:#ffffff; --radius:14px; --shadow:0 4px 22px rgba(0,0,0,.35); --shadow-lg:0 14px 40px rgba(0,0,0,.5); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); line-height:1.65; background:var(--bg); } a{color:var(--green);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;display:block} .container{max-width:1180px;margin:0 auto;padding:0 24px} h1,h2,h3,h4{font-family:"Poppins","Inter",sans-serif;color:var(--white);line-height:1.25;margin:0 0 .5em;font-weight:700} h1{font-size:2.3rem;font-weight:800} h2{font-size:1.6rem} h3{font-size:1.15rem} p{margin:0 0 1em} ul{margin:0 0 1em;padding-left:1.2em} .accent{color:var(--green)} .eyebrow{color:var(--green);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin-bottom:.6em;display:block} /* Skip link */ .skip-link{position:absolute;left:-999px;top:auto;background:var(--green);color:#0f1011;padding:10px 16px;z-index:200;font-weight:700} .skip-link:focus{left:10px;top:10px} /* Top bar */ .topbar{background:var(--blue-darker);color:var(--ink-light);font-size:.82rem;border-bottom:1px solid var(--border)} .topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px} .topbar a{color:var(--ink-light)} .topbar a:hover{color:var(--green)} .topbar .topbar-links a{margin-left:16px} /* Header / nav */ header.site-header{position:sticky;top:0;background:rgba(20,21,23,.92);backdrop-filter:blur(8px);z-index:100;border-bottom:1px solid var(--border)} .nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px} .logo{display:flex;align-items:center;gap:12px;line-height:1.1} .logo-img{height:58px;width:auto;display:block} .logo-icon{width:38px;height:38px;border-radius:10px;background:var(--green-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0} .logo-icon svg{width:22px;height:22px;stroke:var(--green)} .logo .logo-main{font-family:"Poppins",sans-serif;font-size:1.15rem;font-weight:800;color:var(--white);letter-spacing:.01em;display:block} .logo .logo-main span{color:var(--green);font-weight:700} .logo .logo-sub{font-size:.62rem;color:var(--ink-light);letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:2px} nav.main-nav ul{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0} nav.main-nav>ul>li{position:relative} nav.main-nav a{display:block;padding:10px 12px;color:var(--ink-light);font-weight:600;font-size:.88rem;border-radius:6px} nav.main-nav>ul>li>a:hover,nav.main-nav a.active{color:var(--white);background:var(--bg-soft);text-decoration:none} nav.main-nav .dropdown ul{display:none;position:absolute;top:100%;left:0;background:var(--bg-soft2);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:var(--radius);padding:6px;min-width:210px;flex-direction:column} nav.main-nav .dropdown:hover ul,nav.main-nav .dropdown:focus-within ul{display:flex} nav.main-nav .dropdown ul li a{white-space:nowrap;color:var(--ink-light)} nav.main-nav .dropdown ul li a:hover{color:var(--white)} .nav-cta{background:var(--green);color:#0f1011 !important;padding:10px 20px !important;border-radius:30px;font-weight:700} .nav-cta:hover{background:var(--green-dark);text-decoration:none !important} .nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--white);cursor:pointer} /* Hero */ .hero{background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(111,207,60,.16), transparent 60%), var(--bg); color:var(--ink);padding:76px 0 64px;border-bottom:1px solid var(--border)} .hero .container{display:flex;align-items:center;gap:48px;flex-wrap:wrap} .hero-text{flex:1 1 440px} .hero h1{color:var(--white);font-size:2.75rem;margin-bottom:.4em;letter-spacing:-.01em} .hero p.lead{font-size:1.12rem;color:var(--ink-light);max-width:560px} .hero-actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap} .btn{display:inline-block;padding:13px 28px;border-radius:30px;font-weight:700;border:2px solid transparent;cursor:pointer;font-size:.95rem;font-family:"Inter",sans-serif} .btn-primary{background:var(--green);color:#0f1011} .btn-primary:hover{background:var(--green-dark);text-decoration:none} .btn-outline{background:transparent;color:var(--white);border-color:var(--border)} .btn-outline:hover{background:var(--bg-soft);text-decoration:none;border-color:var(--green)} .hero-badges{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-light)} .hero-badges span{display:flex;align-items:center;gap:8px} .hero-badges .icon{width:26px;height:26px;background:var(--green-soft);border-radius:7px} .hero-badges svg{width:14px;height:14px;stroke:var(--green)} .hero-panel{flex:1 1 340px;background:var(--bg-soft);border:1px solid var(--border);border-top:3px solid var(--green);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)} .hero-panel h3{color:var(--white)} /* Page header (inner pages) */ .page-header{background: radial-gradient(ellipse 700px 400px at 90% -20%, rgba(111,207,60,.14), transparent 60%), var(--blue-darker); color:var(--ink);padding:46px 0;border-bottom:1px solid var(--border)} .page-header h1{color:var(--white);margin-bottom:.25em;font-size:2rem} .page-header .lead{color:var(--ink-light) !important} .breadcrumbs{font-size:.82rem;color:var(--ink-light)} .breadcrumbs a{color:var(--ink-light)} .breadcrumbs a:hover{color:var(--green)} /* Sections */ section{padding:60px 0} .section-alt{background:var(--blue-darker);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .section-head{max-width:700px;margin:0 auto 40px;text-align:center} .section-head p{color:var(--ink-light)} /* Service cards grid */ .grid{display:grid;gap:22px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} @media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}} .card{background:var(--bg-soft);border:1px solid var(--border);border-top:3px solid var(--green);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease, background .15s ease} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);background:var(--bg-soft2)} .card .icon{width:50px;height:50px;border-radius:12px;background:var(--green-soft);display:flex;align-items:center;justify-content:center;color:var(--green);margin-bottom:16px} .card .icon svg{width:24px;height:24px;stroke:var(--green)} .card h3{margin-bottom:.4em;color:var(--white)} .card p{color:var(--ink-light);font-size:.94rem} .card .more{font-weight:700;font-size:.86rem;color:var(--green)} /* Two column layout with booking form sidebar */ .layout{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start} @media(max-width:900px){.layout{grid-template-columns:1fr}} .content h2{margin-top:1.2em;color:var(--white)} .content h2:first-child{margin-top:0} .content p{color:var(--ink-light)} .content strong{color:var(--ink)} .check-list{list-style:none;padding:0;margin:0 0 1.4em} .check-list li{position:relative;padding-left:30px;margin-bottom:10px;color:var(--ink-light)} .check-list li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:var(--green-soft);border:1px solid var(--green)} .check-list li::after{content:"";position:absolute;left:5px;top:.55em;width:6px;height:9px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg)} .callout-banner{background:var(--bg-soft);border:1px dashed var(--border);border-left:3px solid var(--green);border-radius:var(--radius);padding:22px;margin:1.6em 0;color:var(--ink-light)} .callout-banner strong{color:var(--white)} .guarantee{background:var(--green-soft);border:1px solid var(--green);color:var(--green);border-radius:var(--radius);padding:18px 22px;font-weight:700;margin:1.4em 0} /* Plan table */ .plan-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin:1.6em 0;background:var(--bg-soft)} .plan-card .plan-head{background:var(--green);color:#0f1011;padding:14px 20px;font-weight:800;letter-spacing:.03em;display:flex;justify-content:space-between;align-items:center;font-family:"Poppins",sans-serif} .plan-card .plan-head .badge{background:#0f1011;color:var(--green);font-size:.72rem;padding:4px 10px;border-radius:20px} .plan-card .plan-body{padding:22px 24px} .plan-group h4{color:var(--green);text-transform:uppercase;font-size:.76rem;letter-spacing:.06em;margin:1.1em 0 .5em} .plan-group h4:first-child{margin-top:0} .plan-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.92rem;border-bottom:1px solid var(--border);color:var(--ink-light)} .plan-row:last-child{border-bottom:none} .plan-row .tick{color:var(--green);font-weight:800} /* Booking form */ .booking-form{background:var(--bg-soft);border:1px solid var(--border);border-top:3px solid var(--green);border-radius:var(--radius);padding:26px;position:sticky;top:96px} .booking-form h3{margin-bottom:.2em;color:var(--white)} .booking-form .sub{color:var(--ink-light);font-size:.85rem;margin-bottom:1.2em} .field{margin-bottom:14px} .field label{display:block;font-weight:600;font-size:.82rem;margin-bottom:6px;color:var(--ink-light)} .field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:.9rem;background:var(--bg);color:var(--ink)} .field input::placeholder,.field textarea::placeholder{color:#5c6167} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green)} .field textarea{resize:vertical;min-height:90px} .field-row{display:flex;gap:10px} .field-row .field{flex:1} .submit-btn{width:100%;background:var(--green);color:#0f1011;border:none;padding:14px;border-radius:30px;font-weight:800;font-size:.95rem;cursor:pointer;font-family:"Inter",sans-serif} .submit-btn:hover{background:var(--green-dark)} .form-note{font-size:.76rem;color:var(--ink-light);margin-top:10px} /* Service area callout */ .areas-callout{border:1px solid var(--border);border-left:3px solid var(--green);background:var(--bg-soft);border-radius:var(--radius);padding:20px 24px;display:flex;align-items:center;gap:18px;margin:1.6em 0} .areas-callout .badge-circle{background:var(--green-soft);border:1px solid var(--green);color:var(--green);border-radius:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .areas-callout .badge-circle svg{width:22px;height:22px;stroke:var(--green)} .areas-callout strong{color:var(--white);text-transform:uppercase;font-size:.85rem;letter-spacing:.03em;display:block;margin-bottom:3px} /* Area chips */ .area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:700px){.area-grid{grid-template-columns:1fr}} .area-chip{background:var(--bg-soft);border:1px solid var(--border);border-top:3px solid var(--green);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)} .area-chip h3{margin-bottom:.3em;font-size:1.02rem;color:var(--white)} .area-chip p{margin:0;font-size:.87rem;color:var(--ink-light)} /* Stats strip */ .stats{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;background:var(--blue-darker);color:var(--white);padding:38px 0;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .stats .stat b{font-family:"Poppins",sans-serif;font-size:2.1rem;display:block;color:var(--green)} .stats .stat span{font-size:.83rem;color:var(--ink-light)} /* Testimonial / trust */ .trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:34px;color:var(--ink-light);font-weight:700;font-size:.9rem} /* Pill badge */ .pill{display:inline-block;background:var(--bg-soft2);border:1px solid var(--border);color:var(--ink-light);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:14px} /* Portfolio */ .portfolio-thumb{background:var(--bg-soft2);border:1px dashed var(--border);border-radius:10px;height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin-bottom:16px} .portfolio-thumb .icon{margin-bottom:0} .portfolio-card .pill{margin-bottom:10px} .browser-frame{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px} .browser-frame-bar{background:var(--bg-soft2);display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border)} .browser-frame-bar span{width:8px;height:8px;border-radius:50%;background:var(--border)} .browser-frame-url{background:var(--bg);border:1px solid var(--border);border-radius:20px;font-size:.68rem;color:var(--ink-light);padding:3px 12px;margin-left:8px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .browser-frame-body{height:120px;background:#0f1011;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-top:3px solid var(--mock-accent,var(--green))} .browser-frame-body .mock-title{font-family:"Poppins",sans-serif;font-weight:800;font-size:1.1rem;color:#fff;letter-spacing:.02em} .browser-frame-body .mock-sub{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mock-accent,var(--green))} /* CTA band */ .cta-band{background:linear-gradient(120deg,#152614,#0f1011 70%);border-top:1px solid var(--border);color:var(--white);text-align:center;padding:56px 0} .cta-band h2{color:var(--white)} .cta-band p{color:var(--ink-light)} .cta-band .btn-primary{box-shadow:0 8px 26px rgba(111,207,60,.25)} /* Footer */ footer.site-footer{background:var(--blue-darker);color:var(--ink-light);padding:54px 0 22px;font-size:.9rem} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:30px;margin-bottom:36px} @media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr}} footer h4{color:var(--white);font-size:.9rem;margin-bottom:16px;font-family:"Poppins",sans-serif;letter-spacing:.02em} footer ul{list-style:none;padding:0;margin:0} footer li{margin-bottom:9px} footer a{color:var(--ink-light)} footer a:hover{color:var(--green)} .parent-brand{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:26px;border-top:1px solid var(--border);color:var(--ink-light);font-size:.85rem} .parent-brand a{color:var(--ink);font-weight:600} .parent-brand a:hover{color:var(--green)} .parent-brand-mark{height:28px;width:auto;display:block;flex-shrink:0} .ack-block{text-align:center;padding:26px 0;color:var(--ink-light);font-size:.85rem} .group-note{text-align:center;padding-bottom:22px;color:var(--ink-light);font-size:.82rem} .group-note p{max-width:640px;margin:0 auto} .group-note a{color:var(--ink);font-weight:600} .group-note a:hover{color:var(--green)} /* 404 page */ .error-page{text-align:center;padding:80px 24px;max-width:560px;margin:0 auto} .error-code{display:block;font-family:"Poppins",sans-serif;font-weight:800;font-size:5rem;color:var(--green);line-height:1;margin-bottom:.2em} .error-page h1{margin-bottom:.4em} .error-page p{color:var(--ink-light)} .ack-block .flag{display:inline-block;width:34px;height:22px;border-radius:3px;background:linear-gradient(to bottom, #000 0 50%, #e4002b 50% 100%);position:relative;margin-bottom:14px} .ack-block .flag::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;background:#ffcd00;border-radius:50%;transform:translate(-50%,-50%)} .ack-block p{max-width:640px;margin:0 auto} .footer-bottom{border-top:1px solid var(--border);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;color:#6b7076} address{font-style:normal} /* Placeholder tag */ .ph{background:#3a2f00;color:#e8c34a;padding:0 5px;border-radius:3px;border:1px solid #5c4b00} /* Map embed */ .map-embed{border:1px solid var(--border);border-top:3px solid var(--green);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin:1.2em 0} .map-embed iframe{display:block} /* Mobile nav */ @media(max-width:900px){ .nav-toggle{display:block} nav.main-nav{position:absolute;top:100%;left:0;right:0;background:var(--bg-soft2);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);flex-direction:column;display:none;padding:10px} nav.main-nav.open{display:block} nav.main-nav ul{flex-direction:column;align-items:stretch} nav.main-nav .dropdown ul{position:static;box-shadow:none;display:none;padding-left:14px;border:none;background:transparent} nav.main-nav .dropdown.open ul{display:flex} }