/* ========================================================================== ClearSprings — site stylesheet Two palettes share one set of custom properties: blue (default, on :root) and green (applied by adding .green-theme to ). ========================================================================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} :root{ --g1:#1a9ed4;--g2:#1280b0;--g3:#0d6090; --t1:#00c2e0;--t2:#00a8c5; --dark:#0a1f2e;--dgray:#1a3448;--gray:#4a6880;--lgray:#7a9db8; --light:#eaf6fc;--lighter:#f3fbff;--white:#ffffff; --grad:linear-gradient(135deg,var(--g2),var(--t1)); --grad2:linear-gradient(135deg,var(--t1),#0099cc); } html.green-theme{ --g1:#00c897;--g2:#00a878;--g3:#007a58; --t1:#00b8d9;--t2:#0096b7; --dark:#0d2b2b;--dgray:#2a4040;--gray:#5a7070;--lgray:#8aacac; --light:#edfaf6;--lighter:#f5fffe;--white:#ffffff; --grad:linear-gradient(135deg,var(--g2),var(--t1)); --grad2:linear-gradient(135deg,var(--t1),#009966); } html{scroll-behavior:smooth;} body{font-family:'Segoe UI',system-ui,sans-serif;color:var(--dark);background:var(--white);overflow-x:hidden;transition:background .4s;} /* --------------------------------------------------------------- THEME TOGGLE */ .theme-toggle{position:fixed;bottom:28px;right:28px;z-index:2000;display:flex;flex-direction:column;gap:8px;} .theme-btn{width:44px;height:44px;border-radius:50%;border:3px solid #fff;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s;outline:none;} .theme-btn:hover{transform:scale(1.15);box-shadow:0 6px 22px rgba(0,0,0,.3);} .theme-btn.blue-btn{background:linear-gradient(135deg,#1280b0,#00c2e0);} .theme-btn.green-btn{background:linear-gradient(135deg,#00a878,#00b8d9);} .theme-btn.active-theme{box-shadow:0 0 0 3px var(--g1),0 4px 16px rgba(0,0,0,.2);} /* --------------------------------------------------------------------- NAV */ nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:68px;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(0,0,0,.08);transition:all .3s;} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;} .logo-svg{width:42px;height:42px;flex-shrink:0;} .logo-text{font-size:1.15rem;font-weight:900;color:var(--dark);letter-spacing:-.3px;} .logo-text span{color:var(--g1);} .nav-links{display:flex;gap:1.8rem;list-style:none;align-items:center;} .nav-links a{text-decoration:none;color:var(--dgray);font-size:.88rem;font-weight:600;position:relative;padding-bottom:3px;transition:color .2s;cursor:pointer;} .nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--g1);transition:width .3s;} .nav-links a:hover,.nav-links a.active{color:var(--g2);} .nav-links a:hover::after,.nav-links a.active::after{width:100%;} .nav-cta{background:var(--grad)!important;color:#fff!important;padding:9px 22px!important;border-radius:25px!important;font-weight:700!important;box-shadow:0 4px 15px rgba(0,0,0,.18);} .nav-cta::after{display:none!important;} .nav-cta:hover{opacity:.9;transform:translateY(-1px);} .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:5px;background:none;border:none;} .hamburger span{width:24px;height:2px;background:var(--dark);border-radius:2px;transition:all .3s;} .mobile-menu{display:none;position:fixed;top:68px;left:0;right:0;background:#fff;padding:1.5rem 5%;box-shadow:0 10px 30px rgba(0,0,0,.1);z-index:999;flex-direction:column;gap:.8rem;} .mobile-menu.open{display:flex;} .mobile-menu a{text-decoration:none;color:var(--dark);font-weight:600;padding:.6rem 0;border-bottom:1px solid #eee;font-size:.95rem;cursor:pointer;} /* -------------------------------------------------------------------- HERO */ .hero{position:relative;height:100vh;min-height:580px;overflow:hidden;} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;display:flex;align-items:center;} .hero-slide.active{opacity:1;z-index:1;} .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 7s ease;} .hero-slide.active .hero-bg{transform:scale(1);} .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,31,46,.82) 0%,rgba(18,128,176,.38) 100%);} .green-theme .hero-bg::after{background:linear-gradient(135deg,rgba(13,43,43,.82) 0%,rgba(0,168,120,.38) 100%);} .hero-content{position:relative;z-index:2;max-width:700px;padding:0 8%;color:#fff;transform:translateY(35px);opacity:0;transition:all .9s .4s ease;} .hero-slide.active .hero-content{transform:translateY(0);opacity:1;} .hero-tag{display:inline-block;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);padding:5px 18px;border-radius:20px;font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:1.4rem;color:rgba(255,255,255,.9);} .hero-content h1{font-size:clamp(1.9rem,5vw,3.4rem);font-weight:900;line-height:1.12;margin-bottom:1.2rem;} .hero-content h1 em{font-style:normal;color:var(--t1);} .hero-content p{font-size:1.05rem;opacity:.88;line-height:1.75;margin-bottom:2rem;max-width:520px;} .hero-btns{display:flex;gap:1rem;flex-wrap:wrap;} .btn-g{display:inline-block;padding:14px 30px;border-radius:30px;background:var(--grad);color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;transition:all .3s;box-shadow:0 5px 20px rgba(0,0,0,.25);cursor:pointer;border:none;} .btn-g:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.3);color:#fff;} .btn-out{display:inline-block;padding:13px 30px;border-radius:30px;border:2px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;transition:all .3s;cursor:pointer;} .btn-out:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;} .hero-dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px;} .dot{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.35);cursor:pointer;transition:all .35s;border:none;padding:0;} .dot.active{width:28px;background:var(--t1);} .hero-arrows{position:absolute;top:50%;transform:translateY(-50%);width:100%;z-index:3;display:flex;justify-content:space-between;padding:0 18px;} .arrow{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:all .3s;} .arrow:hover{background:var(--g1);border-color:var(--g1);} /* --------------------------------------------------------------- PAGE HERO */ .page-hero{position:relative;height:420px;display:flex;align-items:center;margin-top:68px;overflow:hidden;} .page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;} .page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,31,46,.82),rgba(18,128,176,.4));} .green-theme .page-hero-bg::after{background:linear-gradient(135deg,rgba(13,43,43,.82),rgba(0,168,120,.4));} .page-hero-content{position:relative;z-index:2;padding:0 8%;color:#fff;} .page-hero-content h1{font-size:clamp(1.7rem,4vw,2.9rem);font-weight:900;line-height:1.15;margin-bottom:1rem;} .page-hero-content p{font-size:1rem;opacity:.88;line-height:1.7;max-width:540px;} .breadcrumb{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;font-size:.82rem;opacity:.7;} .breadcrumb a{color:inherit;text-decoration:none;} .breadcrumb span{color:var(--t1);} /* ---------------------------------------------------------------- SECTIONS */ section{padding:85px 5%;} .section-tag{color:var(--g1);font-size:.72rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:.8rem;} .section-title{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;color:var(--dark);margin-bottom:1rem;line-height:1.2;} .section-sub{color:var(--gray);font-size:1rem;line-height:1.75;max-width:560px;} .center{text-align:center;} .center .section-sub{margin:0 auto;} /* ----------------------------------------------------------- SERVICE CARDS */ .services{background:var(--light);} .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem;max-width:1200px;margin:3rem auto 0;} .svc-card{background:#fff;border-radius:20px;padding:2.2rem 1.8rem;box-shadow:0 4px 24px rgba(0,0,0,.06);transition:all .3s;border:1.5px solid transparent;position:relative;overflow:hidden;} .svc-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transition:transform .35s;} .svc-card:hover{transform:translateY(-7px);box-shadow:0 14px 40px rgba(0,0,0,.12);} .svc-card:hover::before{transform:scaleX(1);} .svc-icon{width:54px;height:54px;border-radius:15px;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.4rem;} .svc-card h3{font-size:1.05rem;font-weight:800;margin-bottom:.6rem;color:var(--dark);} .svc-card p{color:var(--gray);font-size:.88rem;line-height:1.72;} .svc-card p+p{margin-top:.6rem;} .svc-card strong{color:var(--dgray);font-weight:700;} /* ------------------------------------------------------------------- STATS */ .stats-bar{background:var(--grad);padding:50px 5%;} .stats-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;max-width:1000px;margin:0 auto;text-align:center;} .stat h3{font-size:2.4rem;font-weight:900;color:#fff;margin-bottom:.3rem;} .stat p{color:rgba(255,255,255,.8);font-size:.88rem;font-weight:600;} /* ------------------------------------------------------------------- QUOTE */ .quote-banner{background:linear-gradient(135deg,var(--dark),var(--dgray));color:#fff;text-align:center;padding:80px 10%;position:relative;overflow:hidden;} .quote-banner::before{content:'"';position:absolute;top:-60px;left:3%;font-size:22rem;opacity:.04;font-family:Georgia,serif;line-height:1;} .quote-banner blockquote{font-size:clamp(1.15rem,3vw,1.8rem);font-weight:700;line-height:1.55;max-width:820px;margin:0 auto;position:relative;z-index:1;} .quote-banner cite{display:block;margin-top:1.5rem;font-size:.85rem;opacity:.6;font-style:normal;letter-spacing:2.5px;text-transform:uppercase;} .qa{color:var(--t1);} /* ------------------------------------------------------------ TESTIMONIALS */ .testi-wrapper{max-width:880px;margin:2.5rem auto 0;} .testi-track{overflow:hidden;border-radius:24px;} .testi-inner{display:flex;transition:transform .65s cubic-bezier(.25,.46,.45,.94);} .testi-slide{min-width:100%;} .testi-card{background:var(--light);border-radius:24px;padding:2.8rem;position:relative;} .testi-card::before{content:'"';font-size:5rem;font-family:Georgia,serif;color:var(--g1);position:absolute;top:.8rem;left:1.8rem;line-height:1;opacity:.25;} .testi-card p{font-size:1rem;line-height:1.82;color:var(--dark);margin-bottom:1.6rem;font-style:italic;} .testi-author{display:flex;align-items:center;gap:1rem;} .author-av{width:46px;height:46px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.05rem;} .author-info h4{font-weight:800;color:var(--dark);} .author-info span{font-size:.82rem;color:var(--lgray);} .stars{color:#f5a623;font-size:.95rem;margin-bottom:.6rem;} .t-dots{display:flex;justify-content:center;gap:8px;margin-top:1.8rem;} .t-dot{width:8px;height:8px;border-radius:4px;background:#ccd8e0;cursor:pointer;transition:all .3s;border:none;padding:0;} .t-dot.active{width:24px;background:var(--g1);} /* ----------------------------------------------------------------- CONTACT */ .contact-wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;} .contact-info p{color:var(--gray);line-height:1.8;margin-bottom:2rem;} .c-items{display:flex;flex-direction:column;gap:.9rem;} .c-item{display:flex;align-items:center;gap:.9rem;font-size:.92rem;} .c-icon{width:38px;height:38px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;flex-shrink:0;} .c-form{background:var(--light);border-radius:24px;padding:2.5rem;box-shadow:0 8px 40px rgba(0,0,0,.08);} .c-form h3{font-size:1.25rem;font-weight:800;margin-bottom:1.5rem;} .inp-g{margin-bottom:1.1rem;} .inp-g label{display:block;font-size:.78rem;font-weight:700;color:var(--gray);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.5px;} .inp-g input,.inp-g textarea,.inp-g select{width:100%;padding:11px 15px;border:1.5px solid #d0dde8;border-radius:12px;font-size:.92rem;color:var(--dark);outline:none;transition:border .2s,box-shadow .2s;font-family:inherit;background:#fff;} .inp-g input:focus,.inp-g textarea:focus,.inp-g select:focus{border-color:var(--g1);box-shadow:0 0 0 3px rgba(26,158,212,.12);} .inp-g textarea{resize:none;height:95px;} .btn-sub{width:100%;padding:14px;border-radius:30px;background:var(--grad);color:#fff;border:none;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s;} .btn-sub:hover{opacity:.9;transform:translateY(-2px);} /* Symfony renders validation errors with the Bootstrap form theme's markup; these rules give that markup the new design's look without Bootstrap. */ .inp-g label.required::after{content:' *';color:var(--g1);} .inp-g .invalid-feedback,.inp-g .form-error-message{display:block;color:#a32020;font-size:.8rem;font-weight:600;margin-top:.35rem;} .inp-g .form-error-icon{display:none;} /* --------------------------------------------------------- CONTENT SPLIT */ .content-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;max-width:1200px;margin:0 auto;} .content-split.rev{direction:rtl;} .content-split.rev>*{direction:ltr;} /* `.top` pins the image alongside a long column of copy instead of centring it against the middle of the text. */ .content-split.top{align-items:start;} .content-split.top .content-img{position:sticky;top:100px;} .content-img{border-radius:24px;overflow:hidden;box-shadow:0 12px 50px rgba(0,0,0,.12);} .content-img img{width:100%;height:380px;object-fit:cover;display:block;} /* `.contain` is for packshots — cropping a product photo to fill the frame cuts the product in half, so letterbox it against a tinted panel instead. */ .content-img.contain{background:var(--lighter);} .content-img.contain img{object-fit:contain;padding:2rem;} .content-text .section-sub{margin-bottom:1.5rem;} .sub-head{color:var(--dark);font-size:1.05rem;font-weight:800;margin:1.8rem 0 .2rem;} .feature-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-top:1.2rem;} .feature-list li{display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:var(--dgray);} .feature-list li::before{content:'✓';width:22px;height:22px;background:var(--light);color:var(--g1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.75rem;flex-shrink:0;} /* Long-form variant: the tick stays with the first line of a multi-line item. */ .feature-list.stacked li{align-items:flex-start;line-height:1.75;} .feature-list.stacked li::before{margin-top:.2rem;} .feature-list strong{color:var(--dark);font-weight:800;} /* Nested detail list inside a ticked item — plain bullets, no second tick. */ .feature-list .sub-items{list-style:disc;padding-left:1.2rem;margin-top:.45rem;} .feature-list .sub-items li{display:list-item;font-size:.88rem;color:var(--gray);margin-bottom:.2rem;} .feature-list .sub-items li::before{content:none;display:none;} .feature-list .sub-items li::marker{color:var(--g1);} /* ------------------------------------------------------------------- PROSE */ .prose{max-width:820px;margin:0 auto;color:var(--gray);font-size:1rem;line-height:1.85;} .prose p{margin-bottom:1.2rem;} .prose p:last-child{margin-bottom:0;} .prose h4{color:var(--dark);font-size:1.05rem;font-weight:800;margin-bottom:.6rem;} .prose strong{color:var(--dgray);font-weight:700;} .prose a{color:var(--g2);font-weight:700;text-decoration:none;} .prose a:hover{text-decoration:underline;} .prose ul,.prose ol{padding-left:1.3rem;margin-bottom:1.2rem;} .prose li{margin-bottom:.7rem;} .prose li::marker{color:var(--g1);font-weight:700;} .note{max-width:820px;margin:2.5rem auto 0;color:var(--gray);font-size:.95rem;line-height:1.8;text-align:center;font-style:italic;} /* --------------------------------------------------------------- PROD GRID */ .prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;max-width:1200px;margin:2.5rem auto 0;} .prod-card{border-radius:20px;overflow:hidden;box-shadow:0 6px 28px rgba(0,0,0,.08);transition:all .3s;} .prod-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(0,0,0,.15);} .prod-img{height:200px;background-size:cover;background-position:center;position:relative;} .prod-img::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,31,46,.7) 0%,transparent 60%);} .green-theme .prod-img::after{background:linear-gradient(0deg,rgba(13,43,43,.7) 0%,transparent 60%);} /* Packshot variant — show the whole product, and drop the darkening overlay that only makes sense over an edge-to-edge photo. */ .prod-img.contain{background-size:contain;background-repeat:no-repeat;background-color:var(--lighter);} .prod-img.contain::after{display:none;} .prod-badge{position:absolute;top:14px;right:14px;background:var(--g1);color:#fff;font-size:.72rem;font-weight:800;padding:4px 12px;border-radius:20px;z-index:1;} .prod-body{background:#fff;padding:1.5rem;} .prod-body h3{font-size:1.05rem;font-weight:800;margin-bottom:.5rem;} .prod-body h3 a{color:inherit;text-decoration:none;} .prod-body h3 a:hover{color:var(--g2);} .prod-body p{color:var(--gray);font-size:.87rem;line-height:1.65;} .prod-body strong{color:var(--dgray);font-weight:800;} .prod-body .btn-g{margin-top:1.1rem;font-size:.82rem;padding:9px 20px;} /* Long-form product entry (a content-split row rather than a card). */ .prod-title{font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:900;color:var(--dark);line-height:1.3;margin-bottom:.8rem;} .prod-title a{color:inherit;text-decoration:none;} .prod-title a:hover{color:var(--g2);} .prod-lead{color:var(--dgray);font-weight:800;font-size:1rem;line-height:1.6;margin-bottom:1rem;} /* ------------------------------------------------------------------ FOOTER */ footer{background:var(--dark);color:rgba(255,255,255,.6);padding:65px 5% 30px;} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;max-width:1200px;margin:0 auto 3rem;} .foot-brand p{font-size:.88rem;line-height:1.8;max-width:270px;margin-top:1rem;} .foot-col h4{color:#fff;font-size:.9rem;font-weight:800;margin-bottom:1.2rem;} .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;} .foot-col ul a{color:rgba(255,255,255,.5);text-decoration:none;font-size:.87rem;transition:color .2s;cursor:pointer;} .foot-col ul a:hover{color:var(--t1);} .foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.5rem;text-align:center;font-size:.82rem;max-width:1200px;margin:0 auto;} .foot-bottom a{color:rgba(255,255,255,.5);text-decoration:none;} .foot-bottom a:hover{color:var(--t1);} /* ------------------------------------------------------------------- FLASH */ .flash-wrap{max-width:1100px;margin:0 auto 1.5rem;display:flex;flex-direction:column;gap:.7rem;} .flash{padding:14px 20px;border-radius:14px;font-size:.9rem;font-weight:600;} .flash-success{background:var(--light);color:var(--g3);border:1.5px solid var(--g1);} .flash-error{background:#fdecec;color:#a32020;border:1.5px solid #e39b9b;} /* -------------------------------------------------------------- RESPONSIVE */ @media(max-width:900px){ .content-split,.contact-wrap{grid-template-columns:1fr;} .content-split.rev{direction:ltr;} .foot-grid{grid-template-columns:1fr 1fr;gap:2rem;} } @media(max-width:768px){ .nav-links{display:none;} .hamburger{display:flex;} section{padding:60px 5%;} .page-hero{height:300px;} .hero-content,.page-hero-content{padding:0 5%;} } @media(max-width:500px){ .foot-grid{grid-template-columns:1fr;} .hero-btns{flex-direction:column;} .theme-toggle{bottom:16px;right:16px;} }