/* CARVILL_V297_MOBILE_MENU_FIX import */ @import url('/assets/css/carvill_mobile_menu_v297.css?v=297'); :root{--blue:#56c6ec;--deep:#0a5f78;--navy:#073b4c;--soft:#eefbff;--green:#1b8c5a;--brown:#594838;--text:#17313a;--muted:#6a7b82;--white:#fff;--shadow:0 18px 45px rgba(3,56,75,.13)}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;overflow-x:hidden}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 5vw;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(0,0,0,.07)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);font-weight:900}.brand img{width:58px;height:58px;object-fit:contain}.brand span{font-size:18px}.topbar nav{display:flex;gap:22px}.topbar nav a{text-decoration:none;color:var(--navy);font-weight:800;font-size:14px}.menuBtn{display:none;border:0;background:var(--deep);color:white;padding:10px 14px;border-radius:12px}.hero{height:calc(100vh - 82px);min-height:620px;position:relative;overflow:hidden;background:var(--navy)}.heroSlide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}.heroSlide.active{opacity:1}.heroSlide img{width:100%;height:100%;object-fit:cover}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,42,55,.78),rgba(4,42,55,.34),rgba(4,42,55,.08)),linear-gradient(0deg,rgba(0,0,0,.45),transparent 45%)}.heroContent{position:absolute;z-index:2;left:5vw;top:50%;transform:translateY(-50%);max-width:760px;color:#fff}.eyebrow{display:inline-flex;gap:8px;padding:10px 15px;border-radius:999px;background:rgba(86,198,236,.18);border:1px solid rgba(255,255,255,.3);font-weight:900;letter-spacing:2px;text-transform:uppercase;font-size:12px}.hero h1{font-size:clamp(42px,7vw,88px);line-height:.94;margin:18px 0 18px;font-weight:950;letter-spacing:-2px}.hero p{font-size:20px;line-height:1.65;max-width:680px}.heroActions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;padding:15px 22px;font-weight:900}.btn.primary{background:var(--blue);color:#003044}.btn.secondary{background:#fff;color:var(--navy)}.section{padding:90px 5vw}.section.soft{background:linear-gradient(180deg,#f5fcff,#fff)}.sectionTitle{max-width:850px;margin:0 auto 42px;text-align:center}.sectionTitle h2{font-size:clamp(30px,4vw,54px);margin:0 0 12px;color:var(--navy);letter-spacing:-1px}.sectionTitle p{font-size:18px;color:var(--muted);line-height:1.7}.grid{display:grid;gap:26px}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.two{grid-template-columns:repeat(2,1fr)}.card{background:#fff;border:1px solid #dff2f8;border-radius:28px;box-shadow:var(--shadow);overflow:hidden}.card img{width:100%;height:245px;object-fit:cover}.card .pad{padding:28px}.card h3{margin:0 0 10px;color:var(--navy);font-size:24px}.card p{line-height:1.7;color:#587078}.feature{padding:30px;border-radius:28px;background:#fff;box-shadow:var(--shadow);border:1px solid #dff2f8}.feature b{display:block;color:var(--deep);font-size:20px;margin-bottom:10px}.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.split img{width:100%;border-radius:32px;box-shadow:var(--shadow);object-fit:cover;max-height:560px}.split h2{font-size:clamp(32px,4vw,56px);line-height:1.05;color:var(--navy);margin:0 0 18px}.split p,.pageHero p{font-size:18px;color:#546f78;line-height:1.8}.pageHero{padding:90px 5vw 65px;background:linear-gradient(135deg,#eafaff,#fff);text-align:center}.pageHero h1{font-size:clamp(38px,6vw,72px);color:var(--navy);margin:0 0 15px}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.gallery img{width:100%;height:230px;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}.contactBox{max-width:900px;margin:auto;background:#fff;border-radius:32px;padding:40px;box-shadow:var(--shadow);border:1px solid #dff2f8}.footer{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;padding:55px 5vw;background:#062f3d;color:#fff}.footer img{width:84px;background:white;border-radius:18px;padding:5px}.footer p{font-weight:800;margin:10px 0}.footer small{color:#bdefff}.adminWrap{max-width:1160px;margin:30px auto;padding:0 18px}.adminNav{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.adminNav a{background:#eafaff;color:#06384b;text-decoration:none;padding:10px 14px;border-radius:12px;font-weight:800}.formBox{background:white;border:1px solid #dceef5;border-radius:22px;padding:22px;box-shadow:var(--shadow);margin-bottom:22px}.formBox input,.formBox textarea,.formBox select{width:100%;padding:13px;border:1px solid #cfe6ef;border-radius:12px;margin:7px 0 14px}.formBox textarea{min-height:110px}.adminTable{width:100%;border-collapse:collapse;background:white}.adminTable th,.adminTable td{padding:12px;border-bottom:1px solid #e8f4f7;text-align:left}.thumb{width:90px;height:58px;object-fit:cover;border-radius:8px}@media(max-width:900px){.brand span{font-size:14px}.menuBtn{display:block}.topbar nav{display:none;position:absolute;left:0;right:0;top:82px;background:white;padding:20px;flex-direction:column}.navOpen .topbar nav{display:flex}.hero{height:760px;min-height:760px}.heroContent{left:20px;right:20px}.hero p{font-size:17px}.grid.three,.grid.two,.split,.footer{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}.section{padding:64px 20px}.card img{height:220px}}@media(max-width:520px){.brand img{width:48px;height:48px}.hero{height:720px;min-height:720px}.hero h1{font-size:42px}.gallery{grid-template-columns:1fr}.heroActions{flex-direction:column}.btn{width:100%}.pageHero{padding:70px 20px 50px}} .grid.four{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.grid.four{grid-template-columns:1fr 1fr}} @media(max-width:520px){.grid.four{grid-template-columns:1fr}} /* V5 HERO SIZE PATCH: 30% taller than V3, full-width hero image fit, no crop */ .hero{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; height:calc((100vh - 82px) * .65) !important; min-height:403px !important; max-height:598px !important; background:linear-gradient(135deg,#eafaff,#ffffff) !important; overflow:hidden !important; } .heroSlide{ width:100% !important; height:100% !important; } .heroSlide img{ display:block !important; width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; background:linear-gradient(135deg,#eafaff,#ffffff) !important; } .hero:after{ background:linear-gradient(90deg,rgba(4,42,55,.72),rgba(4,42,55,.26),rgba(255,255,255,.08)) !important; } .heroContent{ max-width:720px !important; } .hero h1{ font-size:clamp(32px,5vw,64px) !important; line-height:1 !important; margin:14px 0 12px !important; } .hero p{ font-size:clamp(15px,1.55vw,19px) !important; line-height:1.5 !important; max-width:650px !important; } .heroActions{ margin-top:20px !important; } @media(max-width:900px){ .hero{ height:494px !important; min-height:494px !important; max-height:494px !important; } .heroContent{left:20px !important;right:20px !important;} .hero h1{font-size:38px !important;} .hero p{font-size:15px !important;line-height:1.45 !important;} .eyebrow{font-size:10px !important;padding:8px 12px !important;} } @media(max-width:520px){ .hero{ height:455px !important; min-height:455px !important; max-height:455px !important; } .hero h1{font-size:32px !important;letter-spacing:-1px !important;} .hero p{font-size:14px !important;} .heroActions{display:none !important;} } /* V4 ADMIN IMAGE CATEGORY PATCH */ .adminNotice{padding:14px 16px;border-radius:16px;font-weight:800;margin:16px 0}.adminNotice.success{background:#eafaff;color:#06445b;border:1px solid #bfefff}.adminNotice.error{background:#fff2f2;color:#8d1d1d;border:1px solid #ffd0d0}.adminHelp{color:#607982;line-height:1.6;margin-top:-4px}.adminCategoryGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 22px}.adminCategoryCard{display:block;text-decoration:none;background:linear-gradient(135deg,#eafaff,#fff);border:1px solid #cfeef7;border-radius:18px;padding:16px;box-shadow:0 10px 28px rgba(3,56,75,.08);color:#073b4c}.adminCategoryCard b{display:block;font-size:15px;margin-bottom:6px}.adminCategoryCard span{font-size:13px;color:#5f7a84;font-weight:800}.adminFormGrid{display:grid;grid-template-columns:1fr 160px 1fr 1fr;gap:14px}.imageCategorySection{background:#fff;border:1px solid #dceef5;border-radius:24px;padding:20px;box-shadow:var(--shadow);margin:22px 0;scroll-margin-top:100px}.imageCategoryHeader{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid #e8f4f7;padding-bottom:14px;margin-bottom:18px}.imageCategoryHeader h2{margin:0;color:#073b4c;font-size:25px}.imageCategoryHeader p{margin:6px 0 0;color:#637b84;line-height:1.55}.imageCategoryHeader span{background:#eafaff;color:#06445b;border:1px solid #bfefff;border-radius:999px;padding:9px 12px;font-weight:900;white-space:nowrap}.emptyCategory{background:#f8fdff;border:1px dashed #bfe7f2;border-radius:18px;padding:22px;color:#6b8088;font-weight:800;text-align:center}.imageManagerGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.imageManagerCard{border:1px solid #e0f0f5;border-radius:20px;overflow:hidden;background:#fbfeff}.imagePreviewBox{position:relative;background:linear-gradient(135deg,#eafaff,#fff);height:190px;display:flex;align-items:center;justify-content:center}.imagePreviewBox img{width:100%;height:100%;object-fit:contain;padding:8px}.imagePreviewBox em{position:absolute;left:10px;top:10px;background:rgba(6,47,61,.88);color:#fff;border-radius:999px;padding:6px 9px;font-size:11px;font-style:normal;font-weight:900}.imageCardFields{padding:14px}.imageCardFields label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#49646d;font-weight:900}.imageCardFields input,.imageCardFields textarea,.imageCardFields select{width:100%;padding:10px;border:1px solid #cfe6ef;border-radius:11px;margin:5px 0 10px;background:white}.imageCardFields textarea{min-height:74px}.imageCardFields small{display:block;color:#6f858d;word-break:break-all;background:#f2fbfe;border-radius:10px;padding:8px;margin-top:8px}.imageMiniGrid{display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:end}.checkLine{display:flex!important;align-items:center;gap:8px;background:#eafaff;border:1px solid #cfeef7;border-radius:12px;padding:10px!important;margin-bottom:10px!important}.checkLine input{width:auto!important;margin:0!important}.stickySaveBar{position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid #dceef5;border-radius:20px;padding:14px;margin:24px 0;box-shadow:0 -10px 30px rgba(3,56,75,.08);display:flex;justify-content:flex-end} @media(max-width:1050px){.adminCategoryGrid{grid-template-columns:repeat(2,1fr)}.adminFormGrid{grid-template-columns:1fr 1fr}.imageManagerGrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.adminCategoryGrid,.adminFormGrid,.imageManagerGrid{grid-template-columns:1fr}.imageCategoryHeader{display:block}.imageCategoryHeader span{display:inline-block;margin-top:12px}.imagePreviewBox{height:170px}.stickySaveBar .btn{width:100%}} /* V8 ADMIN DARK THEME + COMPACT IMAGE MANAGER PATCH */ html:has(.adminWrap), body:has(.adminWrap){ background:#080d13 !important; color:#dbeafe !important; } .adminWrap{ max-width:1280px !important; margin:24px auto !important; color:#dbeafe !important; } .adminWrap h1, .adminWrap h2, .adminWrap h3, .adminWrap label{ color:#f8fafc !important; } .adminWrap p, .adminWrap small, .adminHelp{ color:#94a3b8 !important; } .adminNav{ background:#0f172a !important; border:1px solid #1e293b !important; border-radius:18px !important; padding:10px !important; box-shadow:0 18px 40px rgba(0,0,0,.30) !important; } .adminNav a{ background:#111827 !important; color:#e0f2fe !important; border:1px solid #263449 !important; } .adminNav a:hover, .adminCategoryCard:hover{ border-color:#56c6ec !important; transform:translateY(-1px); } .formBox, .imageCategorySection, .contactBox, .adminTable, .feature{ background:#0f172a !important; border-color:#1e293b !important; box-shadow:0 20px 50px rgba(0,0,0,.32) !important; color:#dbeafe !important; } .formBox input, .formBox textarea, .formBox select, .adminWrap input, .adminWrap textarea, .adminWrap select, .imageCardFields input, .imageCardFields textarea, .imageCardFields select{ background:#111827 !important; border-color:#334155 !important; color:#f8fafc !important; outline:none !important; } .formBox input:focus, .formBox textarea:focus, .formBox select:focus, .adminWrap input:focus, .adminWrap textarea:focus, .adminWrap select:focus{ border-color:#56c6ec !important; box-shadow:0 0 0 3px rgba(86,198,236,.16) !important; } .adminWrap input::placeholder, .adminWrap textarea::placeholder{color:#64748b !important;} .adminTable th{ background:#111827 !important; color:#e0f2fe !important; } .adminTable td, .adminTable th{ border-bottom-color:#1e293b !important; color:#dbeafe !important; } .adminNotice.success{ background:#062c3c !important; color:#a5f3fc !important; border-color:#155e75 !important; } .adminNotice.error{ background:#3b1114 !important; color:#fecaca !important; border-color:#7f1d1d !important; } .adminCategoryGrid{ grid-template-columns:repeat(4,1fr) !important; } .adminCategoryCard{ background:#0f172a !important; border:1px solid #1e293b !important; box-shadow:0 14px 34px rgba(0,0,0,.25) !important; color:#f8fafc !important; padding:13px 14px !important; transition:.18s ease !important; } .adminCategoryCard b{color:#f8fafc !important;font-size:14px !important;} .adminCategoryCard span{color:#7dd3fc !important;font-size:12px !important;} .adminUploadBox{padding:18px !important;} .adminFormGrid{ grid-template-columns:1fr 120px 1fr 1fr !important; gap:12px !important; } .imageCategorySection{ padding:16px !important; border-radius:18px !important; margin:18px 0 !important; } .imageCategoryHeader{ border-bottom-color:#1e293b !important; padding-bottom:10px !important; margin-bottom:14px !important; } .imageCategoryHeader h2{ font-size:20px !important; color:#f8fafc !important; } .imageCategoryHeader p{ color:#94a3b8 !important; font-size:13px !important; } .imageCategoryHeader span{ background:#082f49 !important; color:#bae6fd !important; border-color:#075985 !important; padding:7px 10px !important; font-size:12px !important; } .emptyCategory{ background:#111827 !important; border-color:#334155 !important; color:#94a3b8 !important; } .imageManagerGrid{ grid-template-columns:repeat(4,1fr) !important; gap:12px !important; } .imageManagerCard{ background:#111827 !important; border-color:#263449 !important; border-radius:16px !important; overflow:hidden !important; } .imagePreviewBox{ height:105px !important; background:#020617 !important; border-bottom:1px solid #263449 !important; } .imagePreviewBox img{ width:100% !important; height:100% !important; object-fit:contain !important; padding:5px !important; } .imagePreviewBox em{ left:7px !important; top:7px !important; background:rgba(2,6,23,.82) !important; border:1px solid #334155 !important; color:#dbeafe !important; padding:4px 7px !important; font-size:10px !important; } .imageCardFields{ padding:10px !important; } .imageCardFields label{ color:#a5b4fc !important; font-size:10px !important; } .imageCardFields input, .imageCardFields textarea, .imageCardFields select{ padding:8px !important; border-radius:9px !important; margin:4px 0 8px !important; font-size:13px !important; } .imageCardFields textarea{ min-height:52px !important; height:52px !important; } .imageCardFields small{ background:#020617 !important; color:#94a3b8 !important; border:1px solid #1e293b !important; padding:6px !important; font-size:11px !important; } .imageMiniGrid{ grid-template-columns:1fr 82px !important; gap:8px !important; } .checkLine{ background:#0f172a !important; border-color:#334155 !important; color:#e0f2fe !important; padding:8px !important; font-size:12px !important; } .stickySaveBar{ background:rgba(15,23,42,.92) !important; border-color:#263449 !important; box-shadow:0 -14px 34px rgba(0,0,0,.35) !important; } .adminWrap .btn.primary{ background:#56c6ec !important; color:#002b3b !important; } .adminWrap .btn.secondary{ background:#111827 !important; color:#e0f2fe !important; border:1px solid #334155 !important; } .adminWrap a{color:#7dd3fc;} .thumb{ width:70px !important; height:46px !important; object-fit:contain !important; background:#020617 !important; border:1px solid #263449 !important; } @media(max-width:1100px){ .adminCategoryGrid{grid-template-columns:repeat(2,1fr) !important;} .imageManagerGrid{grid-template-columns:repeat(3,1fr) !important;} .adminFormGrid{grid-template-columns:1fr 1fr !important;} } @media(max-width:760px){ .adminWrap{margin:14px auto !important;padding:0 12px !important;} .adminCategoryGrid, .adminFormGrid{grid-template-columns:1fr !important;} .imageManagerGrid{grid-template-columns:repeat(2,1fr) !important;} .imagePreviewBox{height:95px !important;} } @media(max-width:520px){ .imageManagerGrid{grid-template-columns:1fr !important;} .imagePreviewBox{height:130px !important;} } /* V9 PREMIUM HOMEPAGE + HERO VIDEO SUPPORT */ :root{--aqua:#31c3ea;--ocean:#056984;--ink:#072f3d;--leaf:#2a9d67;--cream:#f7fcff} .hero.heroFull{ height:calc(100vh - 82px) !important; min-height:720px !important; max-height:none !important; width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; background:#062f3d !important; overflow:hidden !important; } .heroFull .heroSlide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease, transform 7s ease;transform:scale(1.02)} .heroFull .heroSlide.active{opacity:1;transform:scale(1)} .heroMedia,.heroFull .heroSlide img,.heroFull .heroSlide video{ width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; object-position:center center !important; background:#062f3d !important; } .heroFull:before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 72% 32%,rgba(49,195,234,.22),transparent 34%),linear-gradient(90deg,rgba(3,35,48,.88) 0%,rgba(3,35,48,.62) 38%,rgba(3,35,48,.20) 72%,rgba(3,35,48,.10) 100%)} .heroFull:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:135px;z-index:1;background:linear-gradient(180deg,transparent,#fff 88%) !important} .heroFull .heroContent{z-index:2;max-width:850px !important;left:6vw !important} .heroFull .eyebrow{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.36);box-shadow:0 12px 30px rgba(0,0,0,.16)} .heroFull h1{font-size:clamp(48px,7.7vw,104px) !important;line-height:.9 !important;letter-spacing:-3px !important;text-shadow:0 15px 45px rgba(0,0,0,.34)} .heroFull p{font-size:clamp(18px,1.6vw,24px) !important;max-width:760px !important;line-height:1.65 !important;color:#e8fbff;text-shadow:0 8px 22px rgba(0,0,0,.4)} .heroFull .btn.primary{background:linear-gradient(135deg,#38d7ff,#14a9cf);color:#002f40;box-shadow:0 18px 34px rgba(49,195,234,.25)} .heroFull .btn.secondary{background:rgba(255,255,255,.94);color:#06384b} .categoryBand{position:relative;z-index:3;margin:-72px auto 0;width:min(1180px,90vw);display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .categoryTile{min-height:220px;padding:30px;border-radius:30px;text-decoration:none;color:white;box-shadow:0 24px 60px rgba(2,45,62,.18);overflow:hidden;position:relative;background:linear-gradient(135deg,#0b6f8e,#25bfe8)} .categoryTile:nth-child(2){background:linear-gradient(135deg,#1d8c5f,#62c78f)} .categoryTile:nth-child(3){background:linear-gradient(135deg,#06465e,#0a91b4)} .categoryTile:after{content:"";position:absolute;right:-55px;bottom:-55px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.18)} .categoryTile span{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.18);font-weight:950;margin-bottom:22px} .categoryTile h2{margin:0 0 10px;font-size:24px;line-height:1.08}.categoryTile p{margin:0;color:rgba(255,255,255,.88);line-height:1.65} .sectionKicker{display:inline-flex;margin-bottom:13px;color:var(--ocean);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:2.3px}.leftTitle{text-align:left;margin:0}.introShowcase{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;padding-top:110px}.imageMosaic{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:240px 240px;gap:18px}.imageMosaic img{width:100%;height:100%;object-fit:cover;border-radius:32px;box-shadow:0 18px 45px rgba(3,56,75,.13)}.imageMosaic img:first-child{grid-row:span 2}.softBlue{background:linear-gradient(180deg,#eefbff,#fff)}.productRibbon{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.productFeatureCard{background:#fff;border:1px solid #d9f2f8;border-radius:30px;overflow:hidden;box-shadow:0 18px 45px rgba(3,56,75,.13);transition:transform .25s ease,box-shadow .25s ease}.productFeatureCard:hover{transform:translateY(-5px);box-shadow:0 28px 70px rgba(3,56,75,.19)}.productFeatureCard img{width:100%;height:230px;object-fit:cover}.productFeatureCard div{padding:24px}.productFeatureCard small{display:inline-block;margin-bottom:10px;color:var(--ocean);font-weight:950;text-transform:uppercase;letter-spacing:1.3px;font-size:11px}.productFeatureCard h3{margin:0 0 8px;color:var(--ink);font-size:22px}.productFeatureCard p{margin:0;color:#5b747d;line-height:1.65}.centerAction{text-align:center;margin-top:36px}.traceabilitySection{background:linear-gradient(180deg,#fff,#f8fdff)}.premiumSplit{gap:60px}.qualityGrid{display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0}.qualityGrid div{padding:18px 20px;border-left:5px solid var(--aqua);background:#f2fbff;border-radius:18px}.qualityGrid b{display:block;color:var(--ink);margin-bottom:6px}.qualityGrid span{color:#57717a;line-height:1.55}.roundedMedia{border-radius:38px;overflow:hidden;box-shadow:0 30px 80px rgba(2,45,62,.20);min-height:560px}.roundedMedia img,.roundedMedia video{width:100%;height:100%;min-height:560px;object-fit:cover;display:block}.ctaBanner{margin:20px 5vw 80px;padding:55px;border-radius:38px;background:linear-gradient(135deg,#07445a,#0aaed6);color:white;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:0 28px 80px rgba(3,56,75,.22)}.ctaBanner h2{font-size:clamp(30px,4vw,58px);line-height:1;margin:0 0 12px}.ctaBanner p{margin:0;line-height:1.7;color:#ddf8ff;max-width:760px}.ctaBanner .sectionKicker{color:#baf3ff}.ctaBanner .btn.secondary{background:white;color:#06465e;white-space:nowrap} /* Compact dark media manager refinements */ .adminWrap h1{color:#eefbff}.compactCats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.mediaManagerGrid{grid-template-columns:repeat(auto-fill,minmax(265px,1fr)) !important;gap:14px !important}.mediaManagerCard{border-radius:18px !important}.compactPreview{height:118px !important;background:#081923 !important}.compactPreview img,.compactPreview video{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}.compactPreview em{font-size:10px;padding:4px 8px}.imageCardFields{padding:12px !important}.imageCardFields label{font-size:11px}.imageCardFields input,.imageCardFields textarea,.imageCardFields select{padding:9px !important;font-size:12px !important;margin:5px 0 8px !important}.imageCardFields textarea{min-height:52px !important}.imageCardFields small{font-size:10px;word-break:break-all;color:#8fb2bf}.adminHelp b{color:#bdf4ff} @media(max-width:1050px){.productRibbon{grid-template-columns:repeat(2,1fr)}.introShowcase,.premiumSplit{grid-template-columns:1fr}.categoryBand{grid-template-columns:1fr}.imageMosaic{grid-template-rows:220px 220px}.hero.heroFull{min-height:700px !important}.heroFull .heroContent{left:24px !important;right:24px !important}.heroFull h1{font-size:clamp(42px,10vw,74px) !important}} @media(max-width:620px){.hero.heroFull{height:720px !important;min-height:720px !important}.categoryBand{margin:-45px auto 0}.categoryTile{min-height:auto}.productRibbon{grid-template-columns:1fr}.imageMosaic{grid-template-columns:1fr;grid-template-rows:220px 220px 220px}.imageMosaic img:first-child{grid-row:auto}.ctaBanner{padding:32px 24px;flex-direction:column;align-items:flex-start}.roundedMedia,.roundedMedia img,.roundedMedia video{min-height:360px}.heroFull h1{letter-spacing:-1px !important}.heroFull p{font-size:16px !important}.heroActions{flex-direction:column}.heroActions .btn{width:100%}} /* V10 PROFESSIONAL LIGHT BACKGROUND + CLEAN PREMIUM HOMEPAGE */ body:not(:has(.adminWrap)){ background: radial-gradient(circle at 10% 5%, rgba(49,195,234,.13), transparent 28%), radial-gradient(circle at 90% 20%, rgba(42,157,103,.10), transparent 24%), linear-gradient(180deg,#f2f9fc 0%,#eef7fa 42%,#f8fbfa 100%) !important; color:#16333d !important; } body:not(:has(.adminWrap)) .topbar{ background:rgba(246,252,255,.92) !important; border-bottom:1px solid rgba(5,105,132,.10) !important; box-shadow:0 10px 34px rgba(4,54,70,.08) !important; } body:not(:has(.adminWrap)) .brand img{ background:rgba(255,255,255,.78); border-radius:18px; padding:4px; box-shadow:0 8px 18px rgba(4,54,70,.08); } body:not(:has(.adminWrap)) .brand span{color:#06384b !important;letter-spacing:-.2px} body:not(:has(.adminWrap)) .topbar nav a{color:#0a3c4d !important;opacity:.88} body:not(:has(.adminWrap)) .topbar nav a:hover{color:#0288ae !important} .carvillHeroPro.heroFull{ height:calc(100vh - 82px) !important; min-height:760px !important; width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; background:#dff3f7 !important; } .carvillHeroPro .heroMedia, .carvillHeroPro .heroSlide img, .carvillHeroPro .heroSlide video{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; } .carvillHeroPro:before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg,rgba(7,47,61,.80) 0%,rgba(7,47,61,.55) 34%,rgba(7,47,61,.20) 64%,rgba(7,47,61,.08) 100%), linear-gradient(0deg,rgba(3,38,50,.32),transparent 45%) !important; } .carvillHeroPro:after{ content:""; position:absolute; left:0;right:0;bottom:-1px; height:150px; z-index:1; background:linear-gradient(180deg,transparent,#f2f9fc 84%) !important; } .heroGlassPanel{ position:absolute; z-index:2; left:6vw; top:50%; transform:translateY(-50%); max-width:780px; color:#fff; padding:34px 36px 38px; border-radius:34px; background:linear-gradient(135deg,rgba(4,55,73,.58),rgba(4,55,73,.25)); border:1px solid rgba(255,255,255,.22); box-shadow:0 30px 90px rgba(2,38,52,.28); backdrop-filter:blur(8px); } .heroGlassPanel .eyebrow{ background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.28) !important; color:#e9fbff; } .heroGlassPanel h1{ font-size:clamp(46px,7vw,96px) !important; line-height:.92 !important; margin:18px 0 18px !important; letter-spacing:-3px !important; color:#fff !important; text-shadow:0 14px 40px rgba(0,0,0,.25); } .heroGlassPanel p{ font-size:clamp(17px,1.55vw,22px) !important; line-height:1.65 !important; color:#e9fbff !important; max-width:700px !important; } .heroGlassPanel .btn.primary, body:not(:has(.adminWrap)) .btn.primary{ background:linear-gradient(135deg,#30c8ec,#0e9fc5) !important; color:#002f40 !important; box-shadow:0 15px 32px rgba(14,159,197,.22) !important; } .heroGlassPanel .btn.secondary, body:not(:has(.adminWrap)) .btn.secondary{ background:rgba(255,255,255,.94) !important; color:#073b4c !important; box-shadow:0 12px 25px rgba(5,55,70,.10) !important; } .proHighlights{ position:relative; z-index:4; width:min(1180px,90vw); margin:-78px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .highlightCard{ background:rgba(255,255,255,.88); border:1px solid rgba(5,105,132,.12); border-radius:30px; padding:28px; box-shadow:0 22px 55px rgba(4,64,82,.12); backdrop-filter:blur(12px); } .highlightCard strong{ display:inline-flex; width:42px;height:42px; align-items:center;justify-content:center; border-radius:50%; background:#e3f7fb; color:#05708d; margin-bottom:18px; } .highlightCard h2{font-size:22px;line-height:1.14;margin:0 0 10px;color:#08384a} .highlightCard p{margin:0;color:#5d737b;line-height:1.65} .proIntroSection{ display:grid; grid-template-columns:.92fr 1.08fr; gap:72px; align-items:center; padding-top:115px !important; } .proIntroCopy{ background:rgba(255,255,255,.62); border:1px solid rgba(5,105,132,.10); border-radius:34px; padding:38px; box-shadow:0 20px 60px rgba(4,64,82,.08); } .proIntroCopy h2, .processHeader h2, .sectionTitle h2{ color:#073b4c !important; letter-spacing:-1.4px; } .proIntroCopy h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02;margin:0 0 18px} .proIntroCopy p{font-size:18px;line-height:1.85;color:#526e77;margin-bottom:24px} .proChecklist{display:grid;gap:10px;margin:22px 0 28px} .proChecklist span{ position:relative; padding:13px 16px 13px 44px; background:#eef9fc; border:1px solid rgba(5,105,132,.12); border-radius:16px; color:#18424e; font-weight:800; } .proChecklist span:before{content:"✓";position:absolute;left:16px;color:#148bb0;font-weight:950} .textLink{color:#05708d;text-decoration:none;font-weight:950} .proPhotoStack{position:relative;min-height:560px} .proPhotoStack .mainPhoto{width:82%;height:560px;object-fit:cover;border-radius:38px;box-shadow:0 30px 80px rgba(4,64,82,.18)} .proPhotoStack .smallPhoto{position:absolute;width:260px;height:180px;object-fit:cover;border-radius:28px;border:8px solid #f2f9fc;box-shadow:0 22px 55px rgba(4,64,82,.18)} .proPhotoStack .smallPhoto.top{right:0;top:48px} .proPhotoStack .smallPhoto.bottom{right:8%;bottom:20px} .productProSection{ background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(226,245,249,.68)) !important; border-top:1px solid rgba(5,105,132,.08); border-bottom:1px solid rgba(5,105,132,.08); } .productProGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .productProCard{ background:#fff; border:1px solid rgba(5,105,132,.12); border-radius:30px; overflow:hidden; box-shadow:0 18px 48px rgba(4,64,82,.10); transition:transform .2s ease, box-shadow .2s ease; } .productProCard:hover{transform:translateY(-5px);box-shadow:0 28px 70px rgba(4,64,82,.16)} .productImageWrap{height:230px;background:#eaf7fa;overflow:hidden} .productImageWrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} .productProCard:hover .productImageWrap img{transform:scale(1.04)} .productContentWrap{padding:24px} .productContentWrap small{display:inline-flex;padding:7px 10px;border-radius:999px;background:#e8f8fb;color:#056984;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:950;margin-bottom:12px} .productContentWrap h3{font-size:22px;margin:0 0 9px;color:#073b4c} .productContentWrap p{margin:0;color:#64777e;line-height:1.65} .processSection{padding-top:95px !important} .processHeader{max-width:880px;margin:0 auto 38px;text-align:center} .processHeader h2{font-size:clamp(34px,4.8vw,64px);line-height:1;margin:0 0 14px} .processHeader p{font-size:18px;color:#5d737b;line-height:1.75} .processGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .processGrid div{background:rgba(255,255,255,.76);border:1px solid rgba(5,105,132,.12);border-radius:26px;padding:26px;box-shadow:0 18px 42px rgba(4,64,82,.08)} .processGrid b{display:block;color:#06384b;font-size:21px;margin-bottom:10px} .processGrid span{color:#61777f;line-height:1.65} .proCta{ background:linear-gradient(135deg,#073b4c,#087a99 54%,#18b2d7) !important; box-shadow:0 30px 80px rgba(4,64,82,.20) !important; } body:not(:has(.adminWrap)) .footer{ background:#062f3d !important; border-top:1px solid rgba(255,255,255,.08); } @media(max-width:1100px){ .proHighlights,.productProGrid,.processGrid{grid-template-columns:repeat(2,1fr)} .proIntroSection{grid-template-columns:1fr;gap:42px} .proPhotoStack .mainPhoto{width:100%} .proPhotoStack .smallPhoto.top{right:22px}.proPhotoStack .smallPhoto.bottom{right:44px} } @media(max-width:760px){ .carvillHeroPro.heroFull{height:720px !important;min-height:720px !important} .heroGlassPanel{left:18px;right:18px;max-width:none;padding:26px 22px;border-radius:26px} .heroGlassPanel h1{letter-spacing:-1.5px !important;font-size:clamp(38px,12vw,56px) !important} .heroGlassPanel p{font-size:15px !important} .proHighlights,.productProGrid,.processGrid{grid-template-columns:1fr} .proHighlights{margin-top:-46px} .proIntroCopy{padding:26px;border-radius:26px} .proPhotoStack{min-height:auto;display:grid;gap:14px} .proPhotoStack .mainPhoto,.proPhotoStack .smallPhoto{position:static;width:100%;height:260px;border:0;border-radius:24px} .section{padding:70px 5vw !important} } /* ========================================================= V12 HERO ORIGINAL MEDIA FIX - Removes the white/blue hero filter overlays - Shows full original image/video without cropping - Keeps hero full browser width and large size ========================================================= */ .hero.heroFull, .carvillHeroPro.heroFull{ height:calc(100vh - 82px) !important; min-height:760px !important; width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; background:#0b3443 !important; overflow:hidden !important; } .heroFull .heroSlide, .carvillHeroPro .heroSlide{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; opacity:0; transition:opacity .8s ease !important; transform:none !important; background:#0b3443 !important; } .heroFull .heroSlide.active, .carvillHeroPro .heroSlide.active{ opacity:1 !important; transform:none !important; } .heroMedia, .heroFull .heroSlide img, .heroFull .heroSlide video, .carvillHeroPro .heroMedia, .carvillHeroPro .heroSlide img, .carvillHeroPro .heroSlide video{ width:100% !important; height:100% !important; display:block !important; object-fit:contain !important; object-position:center center !important; background:#0b3443 !important; filter:none !important; } .heroFull:before, .heroFull:after, .carvillHeroPro:before, .carvillHeroPro:after{ display:none !important; content:none !important; background:none !important; } .heroGlassPanel{ background:linear-gradient(135deg,rgba(4,45,58,.72),rgba(4,45,58,.44)) !important; border:1px solid rgba(255,255,255,.20) !important; box-shadow:0 24px 70px rgba(2,32,42,.30) !important; backdrop-filter:blur(6px) !important; } @media(max-width:900px){ .hero.heroFull, .carvillHeroPro.heroFull{ height:720px !important; min-height:720px !important; } } @media(max-width:520px){ .hero.heroFull, .carvillHeroPro.heroFull{ height:680px !important; min-height:680px !important; } .heroGlassPanel{ top:auto !important; bottom:28px !important; transform:none !important; } } /* ========================================================= V13 FULL-WIDTH HERO MEDIA PATCH - INFINITY STYLE - Forces hero to fill the entire browser width - Media fills the hero area edge-to-edge like infinityresortsbataan.com - Removes empty side gaps caused by contain - Keeps clean original media with no white/blue filter ========================================================= */ body{ overflow-x:hidden !important; } .hero, .hero.heroFull, .carvillHeroPro, .carvillHeroPro.heroFull{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; height:calc(100vh - 82px) !important; min-height:760px !important; max-height:none !important; padding:0 !important; border-radius:0 !important; overflow:hidden !important; background:#0b3443 !important; } .heroSlide, .heroFull .heroSlide, .carvillHeroPro .heroSlide, .carvillHeroPro.heroFull .heroSlide{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; overflow:hidden !important; background:#0b3443 !important; } .heroMedia, .heroSlide img, .heroSlide video, .heroFull .heroSlide img, .heroFull .heroSlide video, .carvillHeroPro .heroMedia, .carvillHeroPro .heroSlide img, .carvillHeroPro .heroSlide video{ display:block !important; width:100vw !important; max-width:none !important; height:100% !important; min-height:100% !important; object-fit:cover !important; object-position:center center !important; padding:0 !important; margin:0 !important; background:#0b3443 !important; filter:none !important; transform:none !important; } .hero:before, .hero:after, .heroFull:before, .heroFull:after, .carvillHeroPro:before, .carvillHeroPro:after{ display:none !important; content:none !important; background:none !important; } .heroGlassPanel, .heroContent{ z-index:5 !important; } @media(max-width:900px){ .hero, .hero.heroFull, .carvillHeroPro, .carvillHeroPro.heroFull{ height:720px !important; min-height:720px !important; } } @media(max-width:520px){ .hero, .hero.heroFull, .carvillHeroPro, .carvillHeroPro.heroFull{ height:680px !important; min-height:680px !important; } } /* V14 ADMIN CONTROL PATCH: delete buttons + stronger checkbox behavior UI */ .btn.danger{background:#dc2626;color:#fff;border:0;cursor:pointer;box-shadow:0 10px 28px rgba(220,38,38,.25)} .btn.danger:hover{filter:brightness(1.05)} .smallDanger{padding:10px 14px;font-size:12px;border-radius:999px;white-space:nowrap} .adminNotice.success{background:#052e1a!important;border:1px solid #14532d!important;color:#bbf7d0!important;padding:14px 16px;border-radius:14px} .adminNotice.error{background:#3b0a0a!important;border:1px solid #7f1d1d!important;color:#fecaca!important;padding:14px 16px;border-radius:14px} .checkLine{display:flex!important;align-items:center;gap:8px;margin:9px 0 12px!important;color:inherit;font-weight:800} .checkLine input[type="checkbox"]{width:auto!important;margin:0!important;accent-color:#38bdf8;transform:scale(1.1)} .deleteZone{margin-top:14px;padding-top:12px;border-top:1px solid rgba(148,163,184,.24);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .contentAdminHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px} .productAdminTable .thumb{width:120px;height:78px;object-fit:cover;border-radius:12px;background:#0f172a} .productAdminTable td{vertical-align:top;min-width:160px} .productAdminTable textarea{min-height:150px} .adminFormGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px} .adminFormGrid label{margin-top:0} .imagePreviewBox.compactPreview img,.imagePreviewBox.compactPreview video{max-height:95px!important;height:95px!important;width:100%;object-fit:cover;border-radius:14px;background:#0b1220} .mediaManagerGrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:16px!important} .mediaManagerCard{padding:14px!important;border-radius:18px!important} .contentEditBox textarea{min-height:150px} @media(max-width:900px){.adminFormGrid{grid-template-columns:1fr}.adminTable,.adminTable tbody,.adminTable tr,.adminTable td,.adminTable th{display:block;width:100%}.adminTable tr{margin-bottom:18px;border:1px solid rgba(148,163,184,.2);border-radius:16px;padding:10px}.adminTable th{display:none}.contentAdminHeader{align-items:flex-start;flex-direction:column}.smallDanger{width:auto}.productAdminTable .thumb{width:100%;height:140px}} /* V15 PRODUCT ADMIN SAVE + CLICKABLE BUTTON FIX */ button, .btn, .adminNav a, a.btn, input[type=submit], input[type=button], input[type=file], .checkLine, .checkLine input[type=checkbox], .adminTable button, .formBox button, .deleteBtn, .smallDanger { cursor: pointer !important; } .adminWrap button.btn, .adminWrap .btn, .adminWrap input[type=submit] { border: 0; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } .adminWrap button.btn:hover, .adminWrap .btn:hover, .adminWrap input[type=submit]:hover, .adminNav a:hover { transform: translateY(-1px); filter: brightness(1.08); } .adminWrap button.btn:active, .adminWrap .btn:active, .adminWrap input[type=submit]:active { transform: translateY(0); } .productAdminTable input, .productAdminTable textarea { min-width: 180px; } .productAdminTable textarea { min-height: 95px; } /* ========================================================= V20 FRONT-END VISUAL UPGRADE - More premium visitor-facing design - Softer background, better typography, attractive cards - Admin dark theme remains untouched ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap'); body:not(:has(.adminWrap)){ font-family:'Manrope', Arial, Helvetica, sans-serif !important; background: radial-gradient(circle at 8% 8%, rgba(82,197,235,.18), transparent 28%), radial-gradient(circle at 92% 14%, rgba(34,160,101,.13), transparent 26%), radial-gradient(circle at 50% 92%, rgba(255,255,255,.86), transparent 34%), linear-gradient(180deg,#edf8fb 0%,#f6fbfc 38%,#eef8f6 100%) !important; color:#153746 !important; letter-spacing:-.01em; } body:not(:has(.adminWrap))::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.34; background-image: linear-gradient(rgba(5,105,132,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(5,105,132,.05) 1px, transparent 1px); background-size:46px 46px; mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.12)); } body:not(:has(.adminWrap)) .topbar{ background:rgba(248,253,255,.82) !important; border-bottom:1px solid rgba(12,104,130,.14) !important; box-shadow:0 16px 45px rgba(3,54,70,.10) !important; } body:not(:has(.adminWrap)) .brand span{ font-weight:900 !important; letter-spacing:-.5px !important; color:#07384a !important; } body:not(:has(.adminWrap)) .topbar nav a{ position:relative; padding:9px 0; font-size:13px !important; text-transform:uppercase; letter-spacing:.08em; } body:not(:has(.adminWrap)) .topbar nav a::after{ content:""; position:absolute; left:0;right:0;bottom:2px; height:2px; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#13a8cf,#2aa66a); transition:transform .22s ease; } body:not(:has(.adminWrap)) .topbar nav a:hover::after{transform:scaleX(1)} body:not(:has(.adminWrap)) .heroGlassPanel, body:not(:has(.adminWrap)) .heroContent{ border-radius:34px !important; background:linear-gradient(135deg,rgba(4,44,58,.78),rgba(4,44,58,.48)) !important; border:1px solid rgba(255,255,255,.24) !important; box-shadow:0 34px 90px rgba(0,28,38,.36) !important; } body:not(:has(.adminWrap)) .heroGlassPanel h1, body:not(:has(.adminWrap)) .heroContent h1{ font-family:'Playfair Display', Georgia, serif !important; font-weight:800 !important; letter-spacing:-2.4px !important; text-wrap:balance; } body:not(:has(.adminWrap)) .heroGlassPanel p, body:not(:has(.adminWrap)) .heroContent p{ font-weight:500 !important; } body:not(:has(.adminWrap)) .eyebrow, body:not(:has(.adminWrap)) .sectionKicker{ font-family:'Manrope', Arial, sans-serif !important; font-weight:900 !important; letter-spacing:.18em !important; } body:not(:has(.adminWrap)) .section, body:not(:has(.adminWrap)) .pageHero{ position:relative; } body:not(:has(.adminWrap)) .sectionTitle{ margin-bottom:52px !important; } body:not(:has(.adminWrap)) .sectionTitle h2, body:not(:has(.adminWrap)) .processHeader h2, body:not(:has(.adminWrap)) .proIntroCopy h2, body:not(:has(.adminWrap)) .split h2, body:not(:has(.adminWrap)) .pageHero h1{ font-family:'Playfair Display', Georgia, serif !important; font-weight:800 !important; color:#06384b !important; letter-spacing:-1.7px !important; text-wrap:balance; } body:not(:has(.adminWrap)) .sectionTitle p, body:not(:has(.adminWrap)) .processHeader p, body:not(:has(.adminWrap)) .proIntroCopy p, body:not(:has(.adminWrap)) .split p, body:not(:has(.adminWrap)) .pageHero p{ color:#526f7a !important; font-size:18px !important; line-height:1.85 !important; } body:not(:has(.adminWrap)) .sectionTitle::after, body:not(:has(.adminWrap)) .processHeader::after{ content:""; display:block; width:96px; height:4px; margin:22px auto 0; border-radius:999px; background:linear-gradient(90deg,#11abd2,#4abd83,#11abd2); box-shadow:0 10px 24px rgba(17,171,210,.22); } body:not(:has(.adminWrap)) .leftTitle::after{margin-left:0;margin-right:0} body:not(:has(.adminWrap)) .card, body:not(:has(.adminWrap)) .feature, body:not(:has(.adminWrap)) .highlightCard, body:not(:has(.adminWrap)) .productProCard, body:not(:has(.adminWrap)) .productFeatureCard, body:not(:has(.adminWrap)) .processGrid div, body:not(:has(.adminWrap)) .contactBox, body:not(:has(.adminWrap)) .proIntroCopy{ background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,253,255,.82)) !important; border:1px solid rgba(7,105,132,.14) !important; box-shadow:0 22px 58px rgba(4,64,82,.10) !important; } body:not(:has(.adminWrap)) .card, body:not(:has(.adminWrap)) .feature, body:not(:has(.adminWrap)) .highlightCard, body:not(:has(.adminWrap)) .productProCard, body:not(:has(.adminWrap)) .productFeatureCard, body:not(:has(.adminWrap)) .processGrid div{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } body:not(:has(.adminWrap)) .card:hover, body:not(:has(.adminWrap)) .feature:hover, body:not(:has(.adminWrap)) .highlightCard:hover, body:not(:has(.adminWrap)) .productProCard:hover, body:not(:has(.adminWrap)) .productFeatureCard:hover, body:not(:has(.adminWrap)) .processGrid div:hover{ transform:translateY(-7px); border-color:rgba(17,171,210,.30) !important; box-shadow:0 32px 82px rgba(4,64,82,.16) !important; } body:not(:has(.adminWrap)) .card h3, body:not(:has(.adminWrap)) .productContentWrap h3, body:not(:has(.adminWrap)) .productFeatureCard h3, body:not(:has(.adminWrap)) .highlightCard h2, body:not(:has(.adminWrap)) .processGrid b, body:not(:has(.adminWrap)) .feature b{ font-family:'Playfair Display', Georgia, serif !important; font-weight:800 !important; color:#06384b !important; letter-spacing:-.4px !important; } body:not(:has(.adminWrap)) .card p, body:not(:has(.adminWrap)) .productContentWrap p, body:not(:has(.adminWrap)) .productFeatureCard p, body:not(:has(.adminWrap)) .highlightCard p, body:not(:has(.adminWrap)) .processGrid span, body:not(:has(.adminWrap)) .feature p{ color:#58737d !important; line-height:1.78 !important; } body:not(:has(.adminWrap)) .productImageWrap, body:not(:has(.adminWrap)) .card img{ background:#dff3f7 !important; } body:not(:has(.adminWrap)) .productContentWrap small, body:not(:has(.adminWrap)) .productFeatureCard small{ background:linear-gradient(135deg,#e2f9ff,#eaf9ef) !important; color:#05708d !important; border:1px solid rgba(5,105,132,.12); } body:not(:has(.adminWrap)) .btn{ cursor:pointer !important; letter-spacing:.02em; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease !important; } body:not(:has(.adminWrap)) .btn:hover{ transform:translateY(-2px); filter:brightness(1.04); } body:not(:has(.adminWrap)) .btn.primary{ background:linear-gradient(135deg,#16c5ee,#0696bb) !important; color:#002c3b !important; box-shadow:0 18px 36px rgba(6,150,187,.25) !important; } body:not(:has(.adminWrap)) .btn.secondary{ background:rgba(255,255,255,.96) !important; color:#06384b !important; border:1px solid rgba(7,105,132,.14) !important; box-shadow:0 15px 30px rgba(4,64,82,.10) !important; } body:not(:has(.adminWrap)) .proHighlights, body:not(:has(.adminWrap)) .categoryBand{ filter:drop-shadow(0 22px 44px rgba(3,54,70,.10)); } body:not(:has(.adminWrap)) .highlightCard strong, body:not(:has(.adminWrap)) .categoryTile span{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), 0 12px 28px rgba(4,64,82,.10); } body:not(:has(.adminWrap)) .proPhotoStack .mainPhoto, body:not(:has(.adminWrap)) .proPhotoStack .smallPhoto, body:not(:has(.adminWrap)) .roundedMedia, body:not(:has(.adminWrap)) .split img, body:not(:has(.adminWrap)) .gallery img{ box-shadow:0 28px 70px rgba(4,64,82,.16) !important; border:1px solid rgba(255,255,255,.75); } body:not(:has(.adminWrap)) .gallery img{ transition:transform .22s ease, box-shadow .22s ease; } body:not(:has(.adminWrap)) .gallery img:hover{ transform:scale(1.025); box-shadow:0 34px 80px rgba(4,64,82,.20) !important; } body:not(:has(.adminWrap)) .proCta, body:not(:has(.adminWrap)) .ctaBanner{ border:1px solid rgba(255,255,255,.22) !important; background: radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 26%), linear-gradient(135deg,#053344,#087d99 54%,#18badc) !important; } body:not(:has(.adminWrap)) .footer{ background: radial-gradient(circle at 15% 20%,rgba(23,188,221,.14),transparent 25%), linear-gradient(135deg,#052d3b,#041d27) !important; } @media(max-width:760px){ body:not(:has(.adminWrap)) .heroGlassPanel, body:not(:has(.adminWrap)) .heroContent{ border-radius:26px !important; } body:not(:has(.adminWrap)) .sectionTitle h2, body:not(:has(.adminWrap)) .processHeader h2, body:not(:has(.adminWrap)) .proIntroCopy h2{ letter-spacing:-.8px !important; } body:not(:has(.adminWrap)) .sectionTitle p, body:not(:has(.adminWrap)) .processHeader p, body:not(:has(.adminWrap)) .proIntroCopy p, body:not(:has(.adminWrap)) .split p, body:not(:has(.adminWrap)) .pageHero p{ font-size:16px !important; } } /* ========================================================= V21 VIBRANT MODERN VISITOR DESIGN PATCH - More energetic farm + aquaculture + food processing feel - Brighter accents, modern typography, richer cards - Keeps admin dark theme untouched ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Fraunces:wght@700;800;900&display=swap'); :root{ --cv-ocean:#007fa8; --cv-aqua:#18c9f4; --cv-leaf:#22b573; --cv-lime:#a6d94a; --cv-sun:#f8b63f; --cv-ink:#073342; --cv-soft:#ecfbff; --cv-card:#ffffff; --cv-shadow:0 28px 75px rgba(0,92,122,.16); } body:not(:has(.adminWrap)){ font-family:'Outfit','Manrope',Arial,sans-serif !important; background: radial-gradient(circle at 5% 8%, rgba(24,201,244,.28), transparent 27%), radial-gradient(circle at 94% 7%, rgba(34,181,115,.24), transparent 25%), radial-gradient(circle at 72% 82%, rgba(248,182,63,.13), transparent 30%), linear-gradient(135deg,#e7fbff 0%,#f7fff3 44%,#effbff 100%) !important; color:#123946 !important; } body:not(:has(.adminWrap))::before{ opacity:.20 !important; background-image: linear-gradient(135deg, rgba(0,127,168,.10) 0 1px, transparent 1px), radial-gradient(circle, rgba(34,181,115,.13) 1px, transparent 1.5px) !important; background-size:34px 34px, 22px 22px !important; } body:not(:has(.adminWrap)) .topbar{ background:rgba(255,255,255,.76) !important; border-bottom:1px solid rgba(0,127,168,.18) !important; box-shadow:0 18px 50px rgba(0,92,122,.13) !important; } body:not(:has(.adminWrap)) .brand span{ font-family:'Outfit',Arial,sans-serif !important; font-weight:900 !important; color:#063346 !important; } body:not(:has(.adminWrap)) .topbar nav a{ color:#064357 !important; font-weight:900 !important; } body:not(:has(.adminWrap)) .topbar nav a::after{ height:3px !important; border-radius:999px !important; background:linear-gradient(90deg,var(--cv-aqua),var(--cv-leaf),var(--cv-sun)) !important; } body:not(:has(.adminWrap)) .heroGlassPanel, body:not(:has(.adminWrap)) .heroContent{ background: linear-gradient(135deg,rgba(2,55,75,.84),rgba(0,127,168,.45)) !important; border:1px solid rgba(255,255,255,.32) !important; box-shadow:0 38px 110px rgba(0,44,62,.42) !important; backdrop-filter:blur(12px) saturate(1.25) !important; } body:not(:has(.adminWrap)) .heroGlassPanel h1, body:not(:has(.adminWrap)) .heroContent h1, body:not(:has(.adminWrap)) .sectionTitle h2, body:not(:has(.adminWrap)) .processHeader h2, body:not(:has(.adminWrap)) .proIntroCopy h2, body:not(:has(.adminWrap)) .split h2, body:not(:has(.adminWrap)) .pageHero h1{ font-family:'Fraunces','Playfair Display',Georgia,serif !important; font-weight:900 !important; } body:not(:has(.adminWrap)) .heroGlassPanel h1, body:not(:has(.adminWrap)) .heroContent h1{ color:#fff !important; text-shadow:0 18px 48px rgba(0,0,0,.42) !important; } body:not(:has(.adminWrap)) .eyebrow, body:not(:has(.adminWrap)) .sectionKicker{ background:linear-gradient(90deg,rgba(24,201,244,.20),rgba(34,181,115,.20)) !important; border:1px solid rgba(255,255,255,.34) !important; color:#eaffff !important; border-radius:999px !important; } body:not(:has(.adminWrap)) .sectionKicker{ color:var(--cv-ocean) !important; background:linear-gradient(90deg,rgba(24,201,244,.16),rgba(34,181,115,.13)) !important; padding:8px 13px !important; border-color:rgba(0,127,168,.13) !important; } body:not(:has(.adminWrap)) .btn{ border-radius:18px !important; padding:16px 24px !important; font-weight:950 !important; text-transform:uppercase; letter-spacing:.06em; } body:not(:has(.adminWrap)) .btn.primary{ background:linear-gradient(135deg,#25d7ff 0%,#15b4d8 45%,#22b573 100%) !important; color:#002b36 !important; box-shadow:0 20px 45px rgba(21,180,216,.33) !important; } body:not(:has(.adminWrap)) .btn.secondary{ background:rgba(255,255,255,.94) !important; color:#064357 !important; box-shadow:0 18px 40px rgba(0,92,122,.16) !important; } body:not(:has(.adminWrap)) .btn:hover{ transform:translateY(-4px) scale(1.015) !important; } body:not(:has(.adminWrap)) .proHighlights, body:not(:has(.adminWrap)) .categoryBand{ gap:24px !important; } body:not(:has(.adminWrap)) .highlightCard, body:not(:has(.adminWrap)) .categoryTile{ border-radius:34px !important; box-shadow:var(--cv-shadow) !important; } body:not(:has(.adminWrap)) .highlightCard{ position:relative; overflow:hidden; background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(232,251,255,.88)) !important; } body:not(:has(.adminWrap)) .highlightCard::before, body:not(:has(.adminWrap)) .card::before, body:not(:has(.adminWrap)) .productProCard::before, body:not(:has(.adminWrap)) .processGrid div::before{ content:""; position:absolute; left:0;right:0;top:0; height:6px; background:linear-gradient(90deg,var(--cv-aqua),var(--cv-leaf),var(--cv-sun)); } body:not(:has(.adminWrap)) .highlightCard strong{ width:52px !important; height:52px !important; background:linear-gradient(135deg,var(--cv-aqua),var(--cv-leaf)) !important; color:white !important; font-size:20px !important; } body:not(:has(.adminWrap)) .card, body:not(:has(.adminWrap)) .feature, body:not(:has(.adminWrap)) .productProCard, body:not(:has(.adminWrap)) .productFeatureCard, body:not(:has(.adminWrap)) .processGrid div, body:not(:has(.adminWrap)) .contactBox, body:not(:has(.adminWrap)) .proIntroCopy{ position:relative; overflow:hidden; border-radius:34px !important; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(238,252,255,.92)) !important; border:1px solid rgba(0,127,168,.17) !important; box-shadow:var(--cv-shadow) !important; } body:not(:has(.adminWrap)) .card:hover, body:not(:has(.adminWrap)) .feature:hover, body:not(:has(.adminWrap)) .highlightCard:hover, body:not(:has(.adminWrap)) .productProCard:hover, body:not(:has(.adminWrap)) .productFeatureCard:hover, body:not(:has(.adminWrap)) .processGrid div:hover{ transform:translateY(-10px) !important; box-shadow:0 36px 95px rgba(0,92,122,.23) !important; } body:not(:has(.adminWrap)) .card h3, body:not(:has(.adminWrap)) .productContentWrap h3, body:not(:has(.adminWrap)) .productFeatureCard h3, body:not(:has(.adminWrap)) .highlightCard h2, body:not(:has(.adminWrap)) .processGrid b, body:not(:has(.adminWrap)) .feature b{ font-family:'Fraunces','Playfair Display',Georgia,serif !important; font-weight:900 !important; color:#05364a !important; } body:not(:has(.adminWrap)) .sectionTitle h2, body:not(:has(.adminWrap)) .processHeader h2, body:not(:has(.adminWrap)) .proIntroCopy h2, body:not(:has(.adminWrap)) .split h2, body:not(:has(.adminWrap)) .pageHero h1{ background:linear-gradient(90deg,#05364a 0%,#0087ad 55%,#1ea766 100%); -webkit-background-clip:text; background-clip:text; color:transparent !important; } body:not(:has(.adminWrap)) .sectionTitle::after, body:not(:has(.adminWrap)) .processHeader::after{ width:140px !important; height:6px !important; background:linear-gradient(90deg,var(--cv-aqua),var(--cv-leaf),var(--cv-sun)) !important; } body:not(:has(.adminWrap)) .productImageWrap, body:not(:has(.adminWrap)) .card img{ position:relative; height:260px !important; } body:not(:has(.adminWrap)) .productImageWrap img, body:not(:has(.adminWrap)) .card img, body:not(:has(.adminWrap)) .gallery img{ filter:saturate(1.12) contrast(1.04) !important; } body:not(:has(.adminWrap)) .productContentWrap small, body:not(:has(.adminWrap)) .productFeatureCard small{ background:linear-gradient(135deg,#dbfbff,#e9ffe0) !important; color:#006f93 !important; border:1px solid rgba(0,127,168,.16) !important; font-weight:950 !important; } body:not(:has(.adminWrap)) .proIntroCopy{ padding:44px !important; } body:not(:has(.adminWrap)) .proChecklist span{ background:linear-gradient(90deg,#e3fbff,#f0ffe9) !important; border-color:rgba(0,127,168,.14) !important; box-shadow:0 12px 30px rgba(0,92,122,.07) !important; } body:not(:has(.adminWrap)) .proChecklist span::before{ color:#13a96d !important; } body:not(:has(.adminWrap)) .proPhotoStack .mainPhoto, body:not(:has(.adminWrap)) .proPhotoStack .smallPhoto, body:not(:has(.adminWrap)) .roundedMedia, body:not(:has(.adminWrap)) .split img, body:not(:has(.adminWrap)) .gallery img{ border-radius:34px !important; border:6px solid rgba(255,255,255,.78) !important; box-shadow:0 32px 88px rgba(0,92,122,.20) !important; } body:not(:has(.adminWrap)) .processGrid{ gap:24px !important; } body:not(:has(.adminWrap)) .processGrid div{ padding:34px !important; } body:not(:has(.adminWrap)) .processGrid b{ font-size:25px !important; } body:not(:has(.adminWrap)) .processGrid span, body:not(:has(.adminWrap)) .card p, body:not(:has(.adminWrap)) .productContentWrap p, body:not(:has(.adminWrap)) .highlightCard p, body:not(:has(.adminWrap)) .feature p{ color:#4f6f79 !important; font-size:16.5px !important; } body:not(:has(.adminWrap)) .productProSection, body:not(:has(.adminWrap)) .softBlue, body:not(:has(.adminWrap)) .section.soft{ background: radial-gradient(circle at 10% 20%,rgba(24,201,244,.16),transparent 28%), radial-gradient(circle at 88% 70%,rgba(34,181,115,.14),transparent 26%), linear-gradient(180deg,rgba(255,255,255,.72),rgba(229,250,255,.78)) !important; } body:not(:has(.adminWrap)) .pageHero{ background: radial-gradient(circle at 15% 20%,rgba(24,201,244,.20),transparent 30%), linear-gradient(135deg,#e5fbff,#f7fff0) !important; } body:not(:has(.adminWrap)) .proCta, body:not(:has(.adminWrap)) .ctaBanner{ background: radial-gradient(circle at 88% 18%,rgba(255,255,255,.24),transparent 28%), linear-gradient(135deg,#05364a 0%,#0087ad 50%,#22b573 100%) !important; border-radius:42px !important; box-shadow:0 36px 100px rgba(0,92,122,.28) !important; } body:not(:has(.adminWrap)) .footer{ background: radial-gradient(circle at 10% 10%,rgba(24,201,244,.20),transparent 28%), radial-gradient(circle at 90% 30%,rgba(34,181,115,.18),transparent 28%), linear-gradient(135deg,#032637,#061924) !important; } @media(max-width:760px){ body:not(:has(.adminWrap)) .btn{ border-radius:16px !important; padding:15px 18px !important; } body:not(:has(.adminWrap)) .proIntroCopy{ padding:30px !important; } body:not(:has(.adminWrap)) .productImageWrap, body:not(:has(.adminWrap)) .card img{ height:235px !important; } } /* ========================================================= V22 PROFESSIONAL OCEAN + FARM PALETTE PATCH - Keeps the modern effects from V21 - Removes rainbow/multi-color styling - Uses a premium Carvill palette: deep navy, ocean blue, clean aqua, farm green, and small warm-gold accents only - Admin dark theme remains untouched ========================================================= */ :root{ --cv-ocean:#0b7fa3; --cv-aqua:#35c5e8; --cv-leaf:#2e8f63; --cv-lime:#7fb96d; --cv-sun:#d8a642; --cv-ink:#073342; --cv-soft:#eef9fc; --cv-card:#ffffff; --cv-shadow:0 28px 75px rgba(4,64,82,.15); } body:not(:has(.adminWrap)){ background: radial-gradient(circle at 8% 8%, rgba(53,197,232,.18), transparent 26%), radial-gradient(circle at 92% 12%, rgba(46,143,99,.12), transparent 25%), linear-gradient(180deg,#edf8fb 0%,#f6fbfc 48%,#eef7f2 100%) !important; color:#123946 !important; } body:not(:has(.adminWrap))::before{ opacity:.12 !important; background-image: linear-gradient(rgba(7,51,66,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(7,51,66,.05) 1px, transparent 1px) !important; background-size:48px 48px !important; } body:not(:has(.adminWrap)) .topbar nav a::after{ background:linear-gradient(90deg,#0b7fa3,#35c5e8) !important; } body:not(:has(.adminWrap)) .heroGlassPanel, body:not(:has(.adminWrap)) .heroContent{ background:linear-gradient(135deg,rgba(4,43,58,.86),rgba(7,78,99,.55)) !important; border:1px solid rgba(255,255,255,.26) !important; box-shadow:0 38px 110px rgba(0,42,58,.40) !important; } body:not(:has(.adminWrap)) .eyebrow{ background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.34) !important; color:#eaffff !important; } body:not(:has(.adminWrap)) .sectionKicker{ background:rgba(53,197,232,.12) !important; border:1px solid rgba(11,127,163,.13) !important; color:#0b6f8e !important; } body:not(:has(.adminWrap)) .btn.primary{ background:linear-gradient(135deg,#35c5e8 0%,#0b7fa3 100%) !important; color:#002b36 !important; box-shadow:0 20px 45px rgba(11,127,163,.28) !important; } body:not(:has(.adminWrap)) .btn.secondary{ background:rgba(255,255,255,.94) !important; color:#06384b !important; border:1px solid rgba(11,127,163,.14) !important; } body:not(:has(.adminWrap)) .sectionTitle h2, body:not(:has(.adminWrap)) .processHeader h2, body:not(:has(.adminWrap)) .proIntroCopy h2, body:not(:has(.adminWrap)) .split h2, body:not(:has(.adminWrap)) .pageHero h1{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:#073342 !important; } body:not(:has(.adminWrap)) .sectionTitle::after, body:not(:has(.adminWrap)) .processHeader::after{ width:118px !important; height:5px !important; background:linear-gradient(90deg,#0b7fa3,#35c5e8) !important; box-shadow:0 10px 24px rgba(11,127,163,.18) !important; } body:not(:has(.adminWrap)) .highlightCard::before, body:not(:has(.adminWrap)) .card::before, body:not(:has(.adminWrap)) .productProCard::before, body:not(:has(.adminWrap)) .processGrid div::before{ background:linear-gradient(90deg,#0b7fa3,#35c5e8) !important; height:5px !important; } body:not(:has(.adminWrap)) .highlightCard strong{ background:linear-gradient(135deg,#0b7fa3,#35c5e8) !important; color:#fff !important; } body:not(:has(.adminWrap)) .card, body:not(:has(.adminWrap)) .feature, body:not(:has(.adminWrap)) .highlightCard, body:not(:has(.adminWrap)) .productProCard, body:not(:has(.adminWrap)) .productFeatureCard, body:not(:has(.adminWrap)) .processGrid div, body:not(:has(.adminWrap)) .contactBox, body:not(:has(.adminWrap)) .proIntroCopy{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,251,253,.94)) !important; border:1px solid rgba(11,127,163,.14) !important; box-shadow:0 24px 70px rgba(4,64,82,.13) !important; } body:not(:has(.adminWrap)) .card:hover, body:not(:has(.adminWrap)) .feature:hover, body:not(:has(.adminWrap)) .highlightCard:hover, body:not(:has(.adminWrap)) .productProCard:hover, body:not(:has(.adminWrap)) .productFeatureCard:hover, body:not(:has(.adminWrap)) .processGrid div:hover{ border-color:rgba(11,127,163,.28) !important; box-shadow:0 34px 90px rgba(4,64,82,.19) !important; } body:not(:has(.adminWrap)) .productContentWrap small, body:not(:has(.adminWrap)) .productFeatureCard small{ background:#e8f8fb !important; color:#0b6f8e !important; border:1px solid rgba(11,127,163,.15) !important; } body:not(:has(.adminWrap)) .proChecklist span{ background:#eef9fc !important; border-color:rgba(11,127,163,.13) !important; } body:not(:has(.adminWrap)) .proChecklist span::before{ color:#2e8f63 !important; } body:not(:has(.adminWrap)) .categoryTile{ background:linear-gradient(135deg,#073342,#0b7fa3) !important; } body:not(:has(.adminWrap)) .categoryTile:nth-child(2){ background:linear-gradient(135deg,#0a4e63,#2e8f63) !important; } body:not(:has(.adminWrap)) .categoryTile:nth-child(3){ background:linear-gradient(135deg,#062d3a,#0b7fa3) !important; } body:not(:has(.adminWrap)) .productProSection, body:not(:has(.adminWrap)) .softBlue, body:not(:has(.adminWrap)) .section.soft{ background: radial-gradient(circle at 12% 16%,rgba(53,197,232,.12),transparent 28%), radial-gradient(circle at 88% 74%,rgba(46,143,99,.09),transparent 26%), linear-gradient(180deg,rgba(255,255,255,.72),rgba(232,248,252,.76)) !important; } body:not(:has(.adminWrap)) .pageHero{ background: radial-gradient(circle at 18% 18%,rgba(53,197,232,.14),transparent 30%), linear-gradient(135deg,#e8f8fb,#f7fbf8) !important; } body:not(:has(.adminWrap)) .proCta, body:not(:has(.adminWrap)) .ctaBanner{ background: radial-gradient(circle at 88% 18%,rgba(255,255,255,.18),transparent 28%), linear-gradient(135deg,#073342 0%,#0b7fa3 72%,#35c5e8 100%) !important; border-radius:40px !important; box-shadow:0 34px 95px rgba(4,64,82,.25) !important; } body:not(:has(.adminWrap)) .footer{ background: radial-gradient(circle at 12% 12%,rgba(53,197,232,.14),transparent 28%), linear-gradient(135deg,#032637,#061924) !important; } /* Small natural accent only: gold used subtly, not multi-color */ body:not(:has(.adminWrap)) .textLink, body:not(:has(.adminWrap)) .processGrid b::after{ color:#0b7fa3 !important; } body:not(:has(.adminWrap)) .card h3, body:not(:has(.adminWrap)) .productContentWrap h3, body:not(:has(.adminWrap)) .productFeatureCard h3, body:not(:has(.adminWrap)) .highlightCard h2, body:not(:has(.adminWrap)) .processGrid b, body:not(:has(.adminWrap)) .feature b{ color:#073342 !important; } body:not(:has(.adminWrap)) .productImageWrap img, body:not(:has(.adminWrap)) .card img, body:not(:has(.adminWrap)) .gallery img{ filter:saturate(1.04) contrast(1.03) !important; } /* ========================================================= V23 BIG VISITOR BUTTONS PATCH Bigger Products / Integrated Operation style action buttons Keeps admin buttons normal size. ========================================================= */ body:not(:has(.adminWrap)) .heroActions .btn, body:not(:has(.adminWrap)) .centerAction .btn, body:not(:has(.adminWrap)) .ctaBanner .btn, body:not(:has(.adminWrap)) a.btn[href*="products"], body:not(:has(.adminWrap)) a.btn[href*="operation"], body:not(:has(.adminWrap)) a.btn[href*="integrated"], body:not(:has(.adminWrap)) a.btn[href*="#products"], body:not(:has(.adminWrap)) a.btn[href*="#integrated"]{ min-height: 76px !important; padding: 24px 48px !important; font-size: 20px !important; line-height: 1.15 !important; border-radius: 999px !important; letter-spacing: .25px !important; box-shadow: 0 22px 48px rgba(2, 67, 91, .24) !important; transform: translateZ(0); } body:not(:has(.adminWrap)) .heroActions .btn:hover, body:not(:has(.adminWrap)) .centerAction .btn:hover, body:not(:has(.adminWrap)) .ctaBanner .btn:hover, body:not(:has(.adminWrap)) a.btn[href*="products"]:hover, body:not(:has(.adminWrap)) a.btn[href*="operation"]:hover, body:not(:has(.adminWrap)) a.btn[href*="integrated"]:hover, body:not(:has(.adminWrap)) a.btn[href*="#products"]:hover, body:not(:has(.adminWrap)) a.btn[href*="#integrated"]:hover{ transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 30px 65px rgba(2, 67, 91, .30) !important; } body:not(:has(.adminWrap)) .heroActions{ gap: 22px !important; margin-top: 38px !important; } body:not(:has(.adminWrap)) .centerAction{ margin-top: 48px !important; } /* Safety: admin buttons remain compact */ .adminWrap .btn, .adminWrap button.btn, .adminWrap input[type="submit"], .adminWrap button{ min-height: unset !important; padding: 10px 14px !important; font-size: 14px !important; box-shadow: none; } @media(max-width: 640px){ body:not(:has(.adminWrap)) .heroActions .btn, body:not(:has(.adminWrap)) .centerAction .btn, body:not(:has(.adminWrap)) .ctaBanner .btn, body:not(:has(.adminWrap)) a.btn[href*="products"], body:not(:has(.adminWrap)) a.btn[href*="operation"], body:not(:has(.adminWrap)) a.btn[href*="integrated"]{ width: 100% !important; min-height: 68px !important; padding: 20px 28px !important; font-size: 18px !important; } } /* ========================================================= V24 BIG PRODUCTS / INTEGRATED OPERATION LABELS PATCH User requested Products + Integrated Operation labels/buttons 200% larger. This targets the visible section pill labels, not admin controls. ========================================================= */ body:not(.admin-page) .productProSection .sectionKicker, body:not(.admin-page) .processSection .processHeader .sectionKicker, .productProSection .sectionKicker, .processSection .processHeader .sectionKicker{ font-size: 24px !important; line-height: 1.2 !important; padding: 18px 34px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 64px !important; letter-spacing: 2px !important; background: linear-gradient(135deg, rgba(8,127,163,.12), rgba(24,151,102,.10)) !important; border: 2px solid rgba(8,127,163,.22) !important; box-shadow: 0 18px 40px rgba(4,64,82,.14) !important; color: #073342 !important; margin-bottom: 24px !important; } /* Also enlarge the actual View All Products button more aggressively. */ .productProSection .centerAction .btn, .productProSection .centerAction a.btn, .processSection + .ctaBanner .btn, .heroActions .btn[href*="products"], a.btn[href="products.php"], a.btn[href*="products.php"]{ min-height: 92px !important; padding: 30px 66px !important; font-size: 26px !important; font-weight: 950 !important; border-radius: 999px !important; letter-spacing: .4px !important; } .productProSection .centerAction .btn:hover, .productProSection .centerAction a.btn:hover, a.btn[href="products.php"]:hover, a.btn[href*="products.php"]:hover{ transform: translateY(-5px) scale(1.04) !important; } @media(max-width: 640px){ .productProSection .sectionKicker, .processSection .processHeader .sectionKicker{ font-size: 20px !important; min-height: 58px !important; padding: 16px 24px !important; width: auto !important; max-width: 100% !important; text-align: center !important; } .productProSection .centerAction .btn, .productProSection .centerAction a.btn, a.btn[href="products.php"], a.btn[href*="products.php"]{ width: 100% !important; min-height: 82px !important; padding: 24px 28px !important; font-size: 22px !important; } } /* ========================================================= V25 - Business & Product Inquiries title white text ========================================================= */ body:not(:has(.adminWrap)) .contactBox h1, body:not(:has(.adminWrap)) .contactBox h2, body:not(:has(.adminWrap)) .contactBox h3, body:not(:has(.adminWrap)) .contactBox .sectionTitle h2, body:not(:has(.adminWrap)) .contactBox .contactTitle { color:#ffffff !important; text-shadow:0 2px 14px rgba(0,0,0,.35) !important; } /* ========================================================= V26 - Force Business & Product Inquiries heading bright white Stronger selector, no :has() dependency ========================================================= */ .contactBox h1, .contactBox h2, .contactBox h3, .contactBox .sectionTitle, .contactBox .sectionTitle h1, .contactBox .sectionTitle h2, .contactBox .sectionTitle h3, .contactBox .contactTitle, .contactBox [class*="title"], .contactBox [class*="Title"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 3px 18px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.95) !important; } /* Keep the paragraph/details readable on dark or image backgrounds too. */ .contactBox p, .contactBox .sectionTitle p, .contactBox label, .contactBox small { color: rgba(255,255,255,.94) !important; -webkit-text-fill-color: rgba(255,255,255,.94) !important; text-shadow: 0 2px 10px rgba(0,0,0,.55) !important; } /* Add a darker glass layer behind the inquiry box so white text stays readable. */ .contactBox { background: linear-gradient(135deg, rgba(5,48,67,.92), rgba(7,95,120,.88)) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 26px 70px rgba(2,35,50,.28) !important; } /* ========================================================= V27 - Force bottom Business & Product Inquiries text/button bright white This targets the bottom inquiry/contact card aggressively while keeping form input text readable. ========================================================= */ body .contactBox, body section .contactBox { background: linear-gradient(135deg, rgba(3,35,52,.98), rgba(6,91,118,.96)) !important; border: 1px solid rgba(255,255,255,.26) !important; box-shadow: 0 32px 85px rgba(2,24,36,.42) !important; } /* Make every visible label/title/pill/link inside the inquiry box white. */ body .contactBox :not(input):not(textarea):not(select):not(option), body .contactBox .eyebrow, body .contactBox .sectionKicker, body .contactBox .pill, body .contactBox .tag, body .contactBox .badge, body .contactBox h1, body .contactBox h2, body .contactBox h3, body .contactBox h4, body .contactBox p, body .contactBox label, body .contactBox a, body .contactBox span, body .contactBox small, body .contactBox strong, body .contactBox b { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 3px 16px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.95) !important; } /* Force buttons in this section to have real bright white text. */ body .contactBox .btn, body .contactBox a.btn, body .contactBox button, body .contactBox input[type="submit"], body .contactBox input[type="button"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: linear-gradient(135deg, #057aa0, #04394f) !important; border: 1px solid rgba(255,255,255,.38) !important; text-shadow: 0 3px 14px rgba(0,0,0,.95) !important; box-shadow: 0 16px 34px rgba(0,0,0,.28) !important; } body .contactBox .btn *, body .contactBox a.btn *, body .contactBox button * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Keep form fields readable if this section contains inputs. */ body .contactBox input:not([type="submit"]):not([type="button"]), body .contactBox textarea, body .contactBox select, body .contactBox option { color: #07384c !important; -webkit-text-fill-color: #07384c !important; background: #ffffff !important; text-shadow: none !important; border: 1px solid rgba(255,255,255,.45) !important; } body .contactBox input::placeholder, body .contactBox textarea::placeholder { color: rgba(7,56,76,.55) !important; -webkit-text-fill-color: rgba(7,56,76,.55) !important; text-shadow: none !important; } /* ========================================================= V28 - REAL FIX: Business & Product Inquiries is inside .ctaBanner.proCta, not .contactBox. Force the bottom inquiry label/button text to bright white. ========================================================= */ body:not(.admin-page) .ctaBanner.proCta, body:not(.admin-page) section.ctaBanner.proCta, .ctaBanner.proCta{ background: linear-gradient(135deg, #063246 0%, #064a63 48%, #087b96 100%) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: 0 30px 85px rgba(3,35,50,.38) !important; } body:not(.admin-page) .ctaBanner.proCta .sectionKicker, body:not(.admin-page) section.ctaBanner.proCta .sectionKicker, .ctaBanner.proCta .sectionKicker, section.proCta .sectionKicker{ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: rgba(0,0,0,.24) !important; border: 1px solid rgba(255,255,255,.34) !important; border-radius: 999px !important; padding: 12px 20px !important; font-size: 18px !important; line-height: 1.15 !important; letter-spacing: 1.5px !important; text-shadow: 0 2px 12px rgba(0,0,0,.95) !important; box-shadow: 0 10px 28px rgba(0,0,0,.22) !important; } body:not(.admin-page) .ctaBanner.proCta h1, body:not(.admin-page) .ctaBanner.proCta h2, body:not(.admin-page) .ctaBanner.proCta h3, body:not(.admin-page) .ctaBanner.proCta p, .ctaBanner.proCta h1, .ctaBanner.proCta h2, .ctaBanner.proCta h3, .ctaBanner.proCta p{ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,.72) !important; } body:not(.admin-page) .ctaBanner.proCta .btn, body:not(.admin-page) .ctaBanner.proCta a.btn, .ctaBanner.proCta .btn, .ctaBanner.proCta a.btn{ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: linear-gradient(135deg, #0b6b84, #062f43) !important; border: 2px solid rgba(255,255,255,.48) !important; text-shadow: 0 2px 10px rgba(0,0,0,.95) !important; box-shadow: 0 18px 40px rgba(0,0,0,.32) !important; } body:not(.admin-page) .ctaBanner.proCta .btn:hover, body:not(.admin-page) .ctaBanner.proCta a.btn:hover, .ctaBanner.proCta .btn:hover, .ctaBanner.proCta a.btn:hover{ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(-2px) !important; } @media(max-width: 760px){ .ctaBanner.proCta .sectionKicker, section.proCta .sectionKicker{ font-size: 15px !important; padding: 10px 15px !important; letter-spacing: 1px !important; } } /* ========================================================= CARVILL V29 - Stylish Professional Typography Upgrade Purpose: make website descriptions look more premium and readable without changing admin layout/theme. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap'); :root{ --cv-font-body: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cv-font-heading: "Playfair Display", Georgia, "Times New Roman", serif; --cv-font-ui: "Inter", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cv-text-deep: #0b2738; --cv-text-soft: #335466; --cv-accent-blue: #0478a8; --cv-accent-green: #197a55; } body:not(.admin-body), body:not(.admin-body) p, body:not(.admin-body) li, body:not(.admin-body) .section-text, body:not(.admin-body) .lead, body:not(.admin-body) .description, body:not(.admin-body) .card p, body:not(.admin-body) .product-card p, body:not(.admin-body) .feature-card p, body:not(.admin-body) .operation-card p, body:not(.admin-body) .content-card p, body:not(.admin-body) .about-card p, body:not(.admin-body) .prose, body:not(.admin-body) .text-muted{ font-family: var(--cv-font-body) !important; color: var(--cv-text-soft); font-size: clamp(1rem, 0.55vw + 0.88rem, 1.18rem); line-height: 1.88; letter-spacing: .005em; font-weight: 500; } body:not(.admin-body) h1, body:not(.admin-body) h2, body:not(.admin-body) .section-title, body:not(.admin-body) .hero-title, body:not(.admin-body) .page-title, body:not(.admin-body) .display-title{ font-family: var(--cv-font-heading) !important; color: var(--cv-text-deep); letter-spacing: -0.035em; line-height: 1.05; font-weight: 800; text-wrap: balance; } body:not(.admin-body) h3, body:not(.admin-body) h4, body:not(.admin-body) .card-title, body:not(.admin-body) .product-card h3, body:not(.admin-body) .feature-card h3, body:not(.admin-body) .operation-card h3, body:not(.admin-body) .content-card h3, body:not(.admin-body) .product-name{ font-family: var(--cv-font-ui) !important; color: #102f42; letter-spacing: -0.018em; line-height: 1.18; font-weight: 850; } body:not(.admin-body) .section-title, body:not(.admin-body) .page-title{ font-size: clamp(2.15rem, 3.8vw, 4.7rem); margin-bottom: .75rem; } body:not(.admin-body) .section-subtitle, body:not(.admin-body) .eyebrow, body:not(.admin-body) .kicker, body:not(.admin-body) .pill-label, body:not(.admin-body) .section-badge, body:not(.admin-body) .badge, body:not(.admin-body) .category, body:not(.admin-body) .product-category{ font-family: var(--cv-font-ui) !important; font-weight: 900; letter-spacing: .115em; text-transform: uppercase; } body:not(.admin-body) .section-subtitle, body:not(.admin-body) .intro-text, body:not(.admin-body) .hero-lead, body:not(.admin-body) .page-lead{ font-family: var(--cv-font-body) !important; color: #21465a; font-size: clamp(1.08rem, .85vw + .88rem, 1.45rem); line-height: 1.78; font-weight: 600; letter-spacing: -.005em; max-width: 980px; } body:not(.admin-body) .hero-content p, body:not(.admin-body) .hero-description, body:not(.admin-body) .hero-subtitle{ font-family: var(--cv-font-body) !important; font-size: clamp(1.06rem, .95vw + .82rem, 1.55rem); line-height: 1.65; font-weight: 650; letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(0,0,0,.28); } body:not(.admin-body) .product-card p, body:not(.admin-body) .operation-card p, body:not(.admin-body) .feature-card p, body:not(.admin-body) .content-card p{ font-size: clamp(1rem, .45vw + .9rem, 1.12rem); line-height: 1.82; color: #385f70; } body:not(.admin-body) .product-card, body:not(.admin-body) .operation-card, body:not(.admin-body) .feature-card, body:not(.admin-body) .content-card{ position: relative; } body:not(.admin-body) .product-card h3::after, body:not(.admin-body) .operation-card h3::after, body:not(.admin-body) .feature-card h3::after, body:not(.admin-body) .content-card h3::after{ content:""; display:block; width: 52px; height: 3px; margin-top: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--cv-accent-blue), var(--cv-accent-green)); opacity: .9; } body:not(.admin-body) .btn, body:not(.admin-body) button, body:not(.admin-body) .button, body:not(.admin-body) .cta-btn, body:not(.admin-body) a[class*="btn"]{ font-family: var(--cv-font-ui) !important; font-weight: 900; letter-spacing: .035em; } /* Improve long paragraph blocks so they feel editorial, not plain. */ body:not(.admin-body) .section-content, body:not(.admin-body) .about-content, body:not(.admin-body) .operation-content, body:not(.admin-body) .product-content{ font-family: var(--cv-font-body) !important; } body:not(.admin-body) .section-content p:first-of-type, body:not(.admin-body) .about-content p:first-of-type, body:not(.admin-body) .operation-content p:first-of-type, body:not(.admin-body) .product-content p:first-of-type{ font-weight: 650; color: #1f4d61; } /* Keep form/admin utility text from becoming oversized. */ body:not(.admin-body) input, body:not(.admin-body) textarea, body:not(.admin-body) select, body:not(.admin-body) label{ font-family: var(--cv-font-ui) !important; } /* Mobile readability */ @media (max-width: 768px){ body:not(.admin-body) p, body:not(.admin-body) li, body:not(.admin-body) .card p, body:not(.admin-body) .product-card p, body:not(.admin-body) .feature-card p, body:not(.admin-body) .operation-card p{ font-size: 1rem; line-height: 1.72; } body:not(.admin-body) .section-title, body:not(.admin-body) .page-title{ font-size: clamp(2rem, 10vw, 3.1rem); } } /* ========================================================= CARVILL V30 - Hero Highlight Cards Layer Fix Fixes the 3 cards below the hero so they appear cleanly above the hero/media area and are not darkened by the hero image/video. ========================================================= */ body:not(:has(.adminWrap)) .proHighlights, body:not(.admin-page) .proHighlights{ position: relative !important; z-index: 30 !important; width: min(1220px, 92vw) !important; margin: -118px auto 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; isolation: isolate !important; filter: none !important; } body:not(:has(.adminWrap)) .proHighlights::before, body:not(.admin-page) .proHighlights::before{ content:""; position:absolute; left:-22px; right:-22px; top:-22px; bottom:-22px; z-index:-1; border-radius: 40px; background: linear-gradient(180deg, rgba(244,251,253,.98), rgba(237,248,251,.96)); box-shadow: 0 28px 80px rgba(3, 42, 58, .16); border: 1px solid rgba(255,255,255,.85); } body:not(:has(.adminWrap)) .highlightCard, body:not(.admin-page) .highlightCard{ position: relative !important; overflow: hidden !important; background: #ffffff !important; background-image: linear-gradient(180deg, #ffffff 0%, #f7fcfd 100%) !important; border: 1px solid rgba(8, 91, 120, .16) !important; border-radius: 28px !important; padding: 34px 32px !important; min-height: 230px !important; box-shadow: 0 22px 55px rgba(3, 52, 70, .14) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #0b3344 !important; } body:not(:has(.adminWrap)) .highlightCard::before, body:not(.admin-page) .highlightCard::before{ content:""; position:absolute; left:0; right:0; top:0; height:7px; background: linear-gradient(90deg, #0b7fa3, #35c5e8) !important; } body:not(:has(.adminWrap)) .highlightCard::after, body:not(.admin-page) .highlightCard::after{ content:""; position:absolute; right:-46px; bottom:-46px; width:150px; height:150px; border-radius:50%; background: rgba(53, 197, 232, .10); pointer-events:none; } body:not(:has(.adminWrap)) .highlightCard strong, body:not(.admin-page) .highlightCard strong{ position: relative !important; z-index: 2 !important; display: inline-flex !important; width: 56px !important; height: 56px !important; align-items: center !important; justify-content: center !important; border-radius: 18px !important; background: linear-gradient(135deg, #073342, #0b7fa3) !important; color: #ffffff !important; font-size: 20px !important; font-weight: 950 !important; margin: 0 0 22px !important; box-shadow: 0 14px 30px rgba(4, 64, 82, .20) !important; } body:not(:has(.adminWrap)) .highlightCard h2, body:not(.admin-page) .highlightCard h2{ position: relative !important; z-index: 2 !important; margin: 0 0 12px !important; color: #073342 !important; -webkit-text-fill-color: #073342 !important; font-size: clamp(24px, 1.35vw, 31px) !important; line-height: 1.12 !important; font-family: var(--cv-font-ui, 'Inter', Arial, sans-serif) !important; font-weight: 950 !important; letter-spacing: -.025em !important; } body:not(:has(.adminWrap)) .highlightCard p, body:not(.admin-page) .highlightCard p{ position: relative !important; z-index: 2 !important; margin: 0 !important; color: #365f6d !important; -webkit-text-fill-color: #365f6d !important; font-size: 17px !important; line-height: 1.75 !important; font-weight: 600 !important; text-shadow: none !important; } body:not(:has(.adminWrap)) .highlightCard:hover, body:not(.admin-page) .highlightCard:hover{ transform: translateY(-8px) !important; box-shadow: 0 32px 76px rgba(3, 52, 70, .20) !important; border-color: rgba(11, 127, 163, .30) !important; } /* Make sure hero does not visually cover the cards. */ body:not(:has(.adminWrap)) .hero, body:not(:has(.adminWrap)) .hero.heroFull, body:not(:has(.adminWrap)) .carvillHeroPro, body:not(:has(.adminWrap)) .carvillHeroPro.heroFull{ z-index: 1 !important; } /* Add a soft page transition below the floating cards. */ body:not(:has(.adminWrap)) .proIntroSection{ padding-top: 130px !important; } @media(max-width: 1050px){ body:not(:has(.adminWrap)) .proHighlights, body:not(.admin-page) .proHighlights{ grid-template-columns: 1fr !important; margin-top: -72px !important; width: min(760px, 90vw) !important; } body:not(:has(.adminWrap)) .proHighlights::before, body:not(.admin-page) .proHighlights::before{ left:-14px; right:-14px; top:-14px; bottom:-14px; border-radius: 32px; } body:not(:has(.adminWrap)) .highlightCard, body:not(.admin-page) .highlightCard{ min-height: auto !important; } } @media(max-width: 640px){ body:not(:has(.adminWrap)) .proHighlights, body:not(.admin-page) .proHighlights{ margin-top: -42px !important; gap: 16px !important; } body:not(:has(.adminWrap)) .highlightCard, body:not(.admin-page) .highlightCard{ padding: 28px 24px !important; border-radius: 24px !important; } body:not(:has(.adminWrap)) .highlightCard strong, body:not(.admin-page) .highlightCard strong{ width: 50px !important; height: 50px !important; border-radius: 16px !important; } body:not(:has(.adminWrap)) .highlightCard h2, body:not(.admin-page) .highlightCard h2{ font-size: 23px !important; } body:not(:has(.adminWrap)) .highlightCard p, body:not(.admin-page) .highlightCard p{ font-size: 16px !important; } body:not(:has(.adminWrap)) .proIntroSection{ padding-top: 90px !important; } } /* ========================================================= CARVILL V31 - Clean Hero Cards Patch - Removes the big secondary frame behind the 3 cards - Moves cards slightly lower below the hero - Hides 01 / 02 / 03 number badges ========================================================= */ body:not(:has(.adminWrap)) .proHighlights, body:not(.admin-page) .proHighlights{ margin: -54px auto 0 !important; width: min(1180px, 91vw) !important; gap: 22px !important; z-index: 30 !important; isolation: auto !important; } body:not(:has(.adminWrap)) .proHighlights::before, body:not(.admin-page) .proHighlights::before{ display: none !important; content: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } body:not(:has(.adminWrap)) .highlightCard, body:not(.admin-page) .highlightCard{ padding: 30px 30px 32px !important; min-height: 190px !important; border-radius: 28px !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,252,254,.94)) !important; border: 1px solid rgba(8,91,120,.16) !important; box-shadow: 0 20px 46px rgba(3,52,70,.13) !important; } body:not(:has(.adminWrap)) .highlightCard strong, body:not(.admin-page) .highlightCard strong{ display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } body:not(:has(.adminWrap)) .highlightCard h2, body:not(.admin-page) .highlightCard h2{ margin-top: 0 !important; margin-bottom: 12px !important; } body:not(:has(.adminWrap)) .proIntroSection{ padding-top: 90px !important; } @media(max-width:1050px){ body:not(:has(.adminWrap)) .proHighlights, body:not(.admin-page) .proHighlights{ margin-top: -28px !important; width: min(760px, 91vw) !important; } body:not(:has(.adminWrap)) .proHighlights::before, body:not(.admin-page) .proHighlights::before{ display:none !important; content:none !important; } } @media(max-width:640px){ body:not(:has(.adminWrap)) .proHighlights, body:not(.admin-page) .proHighlights{ margin-top: 18px !important; } body:not(:has(.adminWrap)) .highlightCard, body:not(.admin-page) .highlightCard{ padding: 26px 22px !important; min-height: auto !important; } body:not(:has(.adminWrap)) .proIntroSection{ padding-top: 62px !important; } } /* ========================================================= V36 - TRUE CENTER ALIGN FEATURED PRODUCTS Fixes homepage product cards looking like a missing item when only 1, 2, or 3 products are visible. Targets the actual homepage class: .productProGrid ========================================================= */ body:not(:has(.adminWrap)) .productProSection .productProGrid, body:not(:has(.adminWrap)) .productProGrid{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 330px)) !important; justify-content: center !important; justify-items: stretch !important; align-items: stretch !important; gap: 30px !important; width: min(100%, 1420px) !important; max-width: 1420px !important; margin-left: auto !important; margin-right: auto !important; } body:not(:has(.adminWrap)) .productProSection .productProCard, body:not(:has(.adminWrap)) .productProGrid .productProCard{ width: 100% !important; max-width: 330px !important; margin-left: auto !important; margin-right: auto !important; } /* If only a few products are selected, keep the section visually balanced */ body:not(:has(.adminWrap)) .productProSection .sectionTitle{ margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Keep image height consistent so cards line up cleanly */ body:not(:has(.adminWrap)) .productProSection .productImageWrap{ height: 230px !important; } /* Tablet */ @media(max-width: 900px){ body:not(:has(.adminWrap)) .productProSection .productProGrid, body:not(:has(.adminWrap)) .productProGrid{ grid-template-columns: repeat(auto-fit, minmax(270px, 330px)) !important; gap: 24px !important; width: 100% !important; } } /* Mobile */ @media(max-width: 640px){ body:not(:has(.adminWrap)) .productProSection .productProGrid, body:not(:has(.adminWrap)) .productProGrid{ grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; padding-left: 0 !important; padding-right: 0 !important; } body:not(:has(.adminWrap)) .productProSection .productProCard, body:not(:has(.adminWrap)) .productProGrid .productProCard{ max-width: 100% !important; } } /* ========================================================= V37 - Hero 2 Box / Our Vision Media Slider Allows admin-uploaded media in category: hero2 ========================================================= */ .proIntroSection{ align-items:stretch !important; } .proIntroSection .proIntroCopy{ min-height:100%; } .hero2Box{ position:relative; min-height:520px; height:100%; border-radius:32px; overflow:hidden; background:linear-gradient(135deg, #eaf8ff, #f4fff8); box-shadow:0 24px 60px rgba(4, 55, 75, .18); border:1px solid rgba(16, 132, 174, .16); isolation:isolate; } .hero2MediaSlider{ position:absolute; inset:0; width:100%; height:100%; } .hero2Slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease, transform 5.5s ease; transform:scale(1.015); z-index:1; } .hero2Slide.active{ opacity:1; transform:scale(1); z-index:2; } .hero2Media, .hero2Slide img, .hero2Slide video{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; } .hero2Slide video{ background:#061f2e; } .proPhotoStack .smallPhoto, .proPhotoStack .smallPhoto.top, .proPhotoStack .smallPhoto.bottom{ display:none !important; } @media(max-width:900px){ .hero2Box{min-height:420px;height:420px;} } @media(max-width:520px){ .hero2Box{min-height:340px;height:340px;border-radius:24px;} } /* ========================================================= V38 - Smooth Fade Transition for Hero + Hero 2 Slider ========================================================= */ body:not(:has(.adminWrap)) .heroSlide, body:not(:has(.adminWrap)) .heroFull .heroSlide, body:not(:has(.adminWrap)) .carvillHeroPro .heroSlide, body:not(:has(.adminWrap)) .hero2Slide{ opacity:0 !important; visibility:hidden; transform:none !important; transition: opacity 1.65s cubic-bezier(.22,.61,.36,1), visibility 0s linear 1.65s !important; will-change:opacity; z-index:1 !important; } body:not(:has(.adminWrap)) .heroSlide.active, body:not(:has(.adminWrap)) .heroFull .heroSlide.active, body:not(:has(.adminWrap)) .carvillHeroPro .heroSlide.active, body:not(:has(.adminWrap)) .hero2Slide.active{ opacity:1 !important; visibility:visible; transition: opacity 1.65s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s !important; z-index:3 !important; } body:not(:has(.adminWrap)) .heroMediaSlider, body:not(:has(.adminWrap)) .hero2MediaSlider{ background:#062f3d; } body:not(:has(.adminWrap)) .heroSlide img, body:not(:has(.adminWrap)) .heroSlide video, body:not(:has(.adminWrap)) .hero2Slide img, body:not(:has(.adminWrap)) .hero2Slide video{ backface-visibility:hidden; -webkit-backface-visibility:hidden; } /* ========================================================= V57 - Operation Cards Live Background Image Fix Shows admin-uploaded Operation Cards media behind each card. Category: operation_cards / Operation Cards / Integrated Operation ========================================================= */ body:not(.admin-body) .operationCardsGrid{ align-items:stretch !important; } body:not(.admin-body) .operationCardsGrid .operationCard, body:not(.admin-body) .processGrid.operationCardsGrid .operationCard{ position:relative !important; overflow:hidden !important; min-height:280px !important; border-radius:30px !important; padding:0 !important; isolation:isolate !important; background: radial-gradient(circle at top left, rgba(23,162,184,.18), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.92), rgba(229,247,255,.82)) !important; border:1px solid rgba(17,121,164,.18) !important; box-shadow:0 22px 55px rgba(6,55,84,.14) !important; } body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage::before, body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; display:block !important; background-image:var(--operation-bg) !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; opacity:.38 !important; transform:scale(1.04) !important; filter:saturate(1.08) contrast(1.03) !important; } body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage::after, body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; display:block !important; background: linear-gradient(145deg, rgba(5,34,53,.66), rgba(5,82,105,.42) 46%, rgba(255,255,255,.18)) !important; } body:not(.admin-body) .operationCardsGrid .operationCardContent, body:not(.admin-body) .processGrid.operationCardsGrid .operationCardContent{ position:relative !important; z-index:2 !important; min-height:280px !important; padding:30px !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; } body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage b, body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage b{ color:#ffffff !important; text-shadow:0 2px 12px rgba(0,0,0,.38) !important; } body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage span, body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage span{ color:rgba(255,255,255,.92) !important; text-shadow:0 2px 10px rgba(0,0,0,.36) !important; } @media(max-width:900px){ body:not(.admin-body) .operationCardsGrid .operationCard, body:not(.admin-body) .operationCardsGrid .operationCardContent{ min-height:240px !important; } } /* ========================================================= V59 - Operation Cards Clear Background Image Fix Fixes operation-card images that looked blurred/faded too much. Keeps text readable without washing out the uploaded image. ========================================================= */ body:not(.admin-body) .processGrid.operationCardsGrid .operationCard, body:not(.admin-body) .operationCardsGrid .operationCard{ position:relative !important; overflow:hidden !important; border-radius:30px !important; padding:0 !important; isolation:isolate !important; min-height:310px !important; background:#eef9fb !important; border:1px solid rgba(9,93,123,.18) !important; box-shadow:0 24px 70px rgba(4,64,82,.16) !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage::before, body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; display:block !important; background-image:var(--operation-bg) !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; opacity:.92 !important; transform:none !important; filter:none !important; -webkit-filter:none !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage::after, body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; display:block !important; background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.10) 42%, rgba(0,30,45,.58) 100%), linear-gradient(90deg, rgba(0,38,55,.42) 0%, rgba(0,38,55,.15) 48%, rgba(0,38,55,.06) 100%) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCardContent, body:not(.admin-body) .operationCardsGrid .operationCardContent{ position:relative !important; z-index:2 !important; min-height:310px !important; padding:30px !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; background:transparent !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCardContent::before, body:not(.admin-body) .operationCardsGrid .operationCardContent::before{ content:"" !important; position:absolute !important; left:18px !important; right:18px !important; bottom:18px !important; height:52% !important; z-index:-1 !important; border-radius:24px !important; background:linear-gradient(180deg, rgba(4,38,55,.18), rgba(4,38,55,.70)) !important; box-shadow:0 18px 45px rgba(0,0,0,.20) !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage b, body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage b{ color:#ffffff !important; text-shadow:0 3px 14px rgba(0,0,0,.58) !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage span, body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage span{ color:rgba(255,255,255,.96) !important; text-shadow:0 2px 12px rgba(0,0,0,.62) !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCard:not(.hasOperationImage)::before, body:not(.admin-body) .operationCardsGrid .operationCard:not(.hasOperationImage)::before{ display:none !important; } @media(max-width:900px){ body:not(.admin-body) .processGrid.operationCardsGrid .operationCard, body:not(.admin-body) .operationCardsGrid .operationCard, body:not(.admin-body) .processGrid.operationCardsGrid .operationCardContent, body:not(.admin-body) .operationCardsGrid .operationCardContent{ min-height:260px !important; } } /* ========================================================= V61 - Operation Cards Fixed Size Real Media Patch Keeps original operation card box size even when images/videos are uploaded. Media is absolute inside the card, so it cannot stretch the card. Also removes old background/blur/shadow rules that messed up other cards. ========================================================= */ body:not(.admin-body) .processGrid.operationCardsGrid, body:not(.admin-body) .operationCardsGrid{ display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:18px !important; align-items:stretch !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCard, body:not(.admin-body) .operationCardsGrid .operationCard{ position:relative !important; overflow:hidden !important; border-radius:26px !important; padding:26px !important; min-height:0 !important; height:auto !important; isolation:isolate !important; background:rgba(255,255,255,.78) !important; border:1px solid rgba(5,105,132,.12) !important; box-shadow:0 18px 42px rgba(4,64,82,.08) !important; display:flex !important; flex-direction:column !important; justify-content:flex-start !important; } /* Kill old pseudo-image systems completely */ body:not(.admin-body) .processGrid.operationCardsGrid .operationCard::before, body:not(.admin-body) .operationCardsGrid .operationCard::before, body:not(.admin-body) .processGrid.operationCardsGrid .operationCard::after, body:not(.admin-body) .operationCardsGrid .operationCard::after{ content:none !important; display:none !important; background:none !important; filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; } body:not(.admin-body) .operationCardMedia{ position:absolute !important; inset:0 !important; z-index:0 !important; overflow:hidden !important; border-radius:inherit !important; pointer-events:none !important; } body:not(.admin-body) .operationCardMedia img, body:not(.admin-body) .operationCardMedia video, body:not(.admin-body) .operationCardImg{ width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; object-position:center center !important; filter:none !important; -webkit-filter:none !important; transform:none !important; opacity:1 !important; } body:not(.admin-body) .operationCardShade{ position:absolute !important; inset:0 !important; z-index:1 !important; display:none !important; pointer-events:none !important; border-radius:inherit !important; background:linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.16) 42%, rgba(0,35,54,.66) 100%) !important; } body:not(.admin-body) .operationCard.hasOperationImage .operationCardShade{ display:block !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCardContent, body:not(.admin-body) .operationCardsGrid .operationCardContent{ position:relative !important; z-index:2 !important; min-height:0 !important; height:auto !important; padding:0 !important; background:transparent !important; display:block !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCardContent::before, body:not(.admin-body) .operationCardsGrid .operationCardContent::before{ content:none !important; display:none !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCard b, body:not(.admin-body) .operationCardsGrid .operationCard b{ display:block !important; color:#06384b !important; font-size:21px !important; line-height:1.18 !important; margin:0 0 10px !important; text-shadow:none !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCard span, body:not(.admin-body) .operationCardsGrid .operationCard span{ color:#61777f !important; line-height:1.65 !important; text-shadow:none !important; } body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage b, body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage b, body:not(.admin-body) .processGrid.operationCardsGrid .operationCard.hasOperationImage span, body:not(.admin-body) .operationCardsGrid .operationCard.hasOperationImage span{ color:#ffffff !important; text-shadow:0 2px 12px rgba(0,0,0,.58) !important; } @media(max-width:1100px){ body:not(.admin-body) .processGrid.operationCardsGrid, body:not(.admin-body) .operationCardsGrid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } } @media(max-width:680px){ body:not(.admin-body) .processGrid.operationCardsGrid, body:not(.admin-body) .operationCardsGrid{ grid-template-columns:1fr !important; } } /* ========================================================= V62 - Individual Operation Card Media Categories Each Integrated Operation card uses one fixed media slot. This keeps card size consistent and prevents category/sort confusion. ========================================================= */ body:not(.admin-body) .processGrid.operationCardsGrid .operationCard, body:not(.admin-body) .operationCardsGrid .operationCard{ min-height:260px !important; max-height:360px !important; } body:not(.admin-body) .operationCardMedia, body:not(.admin-body) .operationCardMedia img, body:not(.admin-body) .operationCardMedia video, body:not(.admin-body) .operationCardImg{ max-height:none !important; } body:not(.admin-body) .operationCard.hasOperationImage .operationCardShade{ background:linear-gradient(180deg, rgba(0,30,45,.18) 0%, rgba(0,42,60,.36) 45%, rgba(0,27,42,.78) 100%) !important; } body:not(.admin-body) .operationCard.hasOperationImage .operationCardContent{ margin-top:auto !important; } /* ========================================================= CARVILL V64 - RESTORE PREMIUM SUBPAGE INTRO PILLS Applies to: Our Farm Story, Agriculture at Carvill, Aquaculture Development, Food Processing with Local Roots, Our Products, and other subpage intro headings. ========================================================= */ body:not(.admin-body) .pageHero, body:not(.admin-body) .subpageHero, body:not(.admin-body) .page-intro, body:not(.admin-body) .subpage-intro, body:not(.admin-body) .sectionIntro.subpageIntro, body:not(.admin-body) .section-intro.subpage-intro, body:not(.admin-body) .productsIntro, body:not(.admin-body) .productIntro, body:not(.admin-body) .pageHeader, body:not(.admin-body) .page-header { position: relative; text-align: center !important; max-width: 1120px; margin: 42px auto 34px !important; padding: 34px 26px 30px !important; border-radius: 34px; background: radial-gradient(circle at top left, rgba(20, 184, 166, .18), transparent 34%), radial-gradient(circle at bottom right, rgba(37, 99, 235, .16), transparent 38%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(229, 246, 255, .78)); border: 1px solid rgba(53, 126, 167, .22); box-shadow: 0 22px 60px rgba(15, 48, 76, .12); overflow: hidden; } body:not(.admin-body) .pageHero::before, body:not(.admin-body) .subpageHero::before, body:not(.admin-body) .page-intro::before, body:not(.admin-body) .subpage-intro::before, body:not(.admin-body) .sectionIntro.subpageIntro::before, body:not(.admin-body) .section-intro.subpage-intro::before, body:not(.admin-body) .productsIntro::before, body:not(.admin-body) .productIntro::before, body:not(.admin-body) .pageHeader::before, body:not(.admin-body) .page-header::before { content: ""; position: absolute; inset: 12px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .68); pointer-events: none; } body:not(.admin-body) .pageHero h1, body:not(.admin-body) .subpageHero h1, body:not(.admin-body) .page-intro h1, body:not(.admin-body) .subpage-intro h1, body:not(.admin-body) .sectionIntro.subpageIntro h1, body:not(.admin-body) .section-intro.subpage-intro h1, body:not(.admin-body) .productsIntro h1, body:not(.admin-body) .productIntro h1, body:not(.admin-body) .pageHeader h1, body:not(.admin-body) .page-header h1, body:not(.admin-body) .pageHero h2, body:not(.admin-body) .subpageHero h2, body:not(.admin-body) .page-intro h2, body:not(.admin-body) .subpage-intro h2, body:not(.admin-body) .sectionIntro.subpageIntro h2, body:not(.admin-body) .section-intro.subpage-intro h2, body:not(.admin-body) .productsIntro h2, body:not(.admin-body) .productIntro h2, body:not(.admin-body) .pageHeader h2, body:not(.admin-body) .page-header h2 { display: inline-flex !important; align-items: center; justify-content: center; gap: 12px; width: auto !important; max-width: 100%; margin: 0 auto 18px !important; padding: 14px 30px 16px !important; border-radius: 999px; background: linear-gradient(135deg, #06345f, #0b74b7 48%, #0f9f90); color: #ffffff !important; font-family: "Poppins", "Montserrat", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(2.1rem, 4.2vw, 4.25rem) !important; line-height: 1.04 !important; font-weight: 900 !important; letter-spacing: -0.055em !important; text-shadow: 0 3px 16px rgba(0, 29, 54, .32); box-shadow: 0 18px 42px rgba(5, 69, 116, .24), inset 0 1px 0 rgba(255,255,255,.34); position: relative; z-index: 1; } body:not(.admin-body) .pageHero h1::before, body:not(.admin-body) .subpageHero h1::before, body:not(.admin-body) .page-intro h1::before, body:not(.admin-body) .subpage-intro h1::before, body:not(.admin-body) .sectionIntro.subpageIntro h1::before, body:not(.admin-body) .section-intro.subpage-intro h1::before, body:not(.admin-body) .productsIntro h1::before, body:not(.admin-body) .productIntro h1::before, body:not(.admin-body) .pageHeader h1::before, body:not(.admin-body) .page-header h1::before, body:not(.admin-body) .pageHero h2::before, body:not(.admin-body) .subpageHero h2::before, body:not(.admin-body) .page-intro h2::before, body:not(.admin-body) .subpage-intro h2::before, body:not(.admin-body) .sectionIntro.subpageIntro h2::before, body:not(.admin-body) .section-intro.subpage-intro h2::before, body:not(.admin-body) .productsIntro h2::before, body:not(.admin-body) .productIntro h2::before, body:not(.admin-body) .pageHeader h2::before, body:not(.admin-body) .page-header h2::before { content: ""; width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: #9ef6de; box-shadow: 0 0 0 6px rgba(158, 246, 222, .18), 0 0 22px rgba(158, 246, 222, .75); } body:not(.admin-body) .pageHero .eyebrow, body:not(.admin-body) .subpageHero .eyebrow, body:not(.admin-body) .page-intro .eyebrow, body:not(.admin-body) .subpage-intro .eyebrow, body:not(.admin-body) .sectionIntro.subpageIntro .eyebrow, body:not(.admin-body) .section-intro.subpage-intro .eyebrow, body:not(.admin-body) .productsIntro .eyebrow, body:not(.admin-body) .productIntro .eyebrow, body:not(.admin-body) .pageHeader .eyebrow, body:not(.admin-body) .page-header .eyebrow, body:not(.admin-body) .sectionKicker, body:not(.admin-body) .section-kicker, body:not(.admin-body) .pillLabel, body:not(.admin-body) .pill-label { display: inline-flex !important; align-items: center; justify-content: center; margin: 0 auto 16px !important; padding: 9px 18px !important; border-radius: 999px; color: #075985 !important; background: rgba(255,255,255,.88) !important; border: 1px solid rgba(14, 165, 233, .22) !important; box-shadow: 0 10px 26px rgba(14, 116, 144, .12) !important; font-family: "Inter", system-ui, sans-serif !important; font-size: .78rem !important; font-weight: 900 !important; letter-spacing: .14em !important; text-transform: uppercase !important; } body:not(.admin-body) .pageHero p, body:not(.admin-body) .subpageHero p, body:not(.admin-body) .page-intro p, body:not(.admin-body) .subpage-intro p, body:not(.admin-body) .sectionIntro.subpageIntro p, body:not(.admin-body) .section-intro.subpage-intro p, body:not(.admin-body) .productsIntro p, body:not(.admin-body) .productIntro p, body:not(.admin-body) .pageHeader p, body:not(.admin-body) .page-header p { max-width: 920px !important; margin: 0 auto 12px !important; color: #24445c !important; font-family: "Inter", "Poppins", system-ui, sans-serif !important; font-size: clamp(1.05rem, 1.65vw, 1.32rem) !important; line-height: 1.82 !important; font-weight: 500 !important; letter-spacing: -.012em !important; position: relative; z-index: 1; } body:not(.admin-body) .pageHero p:first-of-type, body:not(.admin-body) .subpageHero p:first-of-type, body:not(.admin-body) .page-intro p:first-of-type, body:not(.admin-body) .subpage-intro p:first-of-type, body:not(.admin-body) .sectionIntro.subpageIntro p:first-of-type, body:not(.admin-body) .section-intro.subpage-intro p:first-of-type, body:not(.admin-body) .productsIntro p:first-of-type, body:not(.admin-body) .productIntro p:first-of-type, body:not(.admin-body) .pageHeader p:first-of-type, body:not(.admin-body) .page-header p:first-of-type { color: #0b5f89 !important; font-weight: 800 !important; font-size: clamp(1.12rem, 1.9vw, 1.52rem) !important; line-height: 1.55 !important; } body:not(.admin-body) .pageHero p:first-of-type::after, body:not(.admin-body) .subpageHero p:first-of-type::after, body:not(.admin-body) .page-intro p:first-of-type::after, body:not(.admin-body) .subpage-intro p:first-of-type::after, body:not(.admin-body) .sectionIntro.subpageIntro p:first-of-type::after, body:not(.admin-body) .section-intro.subpage-intro p:first-of-type::after, body:not(.admin-body) .productsIntro p:first-of-type::after, body:not(.admin-body) .productIntro p:first-of-type::after, body:not(.admin-body) .pageHeader p:first-of-type::after, body:not(.admin-body) .page-header p:first-of-type::after { content: ""; display: block; width: 92px; height: 4px; margin: 18px auto 2px; border-radius: 999px; background: linear-gradient(90deg, #0ea5e9, #14b8a6, #70c05c); box-shadow: 0 10px 24px rgba(20, 184, 166, .22); } body:not(.admin-body) .pageHero .lead, body:not(.admin-body) .subpageHero .lead, body:not(.admin-body) .page-intro .lead, body:not(.admin-body) .subpage-intro .lead, body:not(.admin-body) .sectionIntro.subpageIntro .lead, body:not(.admin-body) .section-intro.subpage-intro .lead, body:not(.admin-body) .productsIntro .lead, body:not(.admin-body) .productIntro .lead, body:not(.admin-body) .pageHeader .lead, body:not(.admin-body) .page-header .lead { color: #0b5f89 !important; font-weight: 800 !important; } @media (max-width: 768px) { body:not(.admin-body) .pageHero, body:not(.admin-body) .subpageHero, body:not(.admin-body) .page-intro, body:not(.admin-body) .subpage-intro, body:not(.admin-body) .sectionIntro.subpageIntro, body:not(.admin-body) .section-intro.subpage-intro, body:not(.admin-body) .productsIntro, body:not(.admin-body) .productIntro, body:not(.admin-body) .pageHeader, body:not(.admin-body) .page-header { margin: 28px 14px 26px !important; padding: 26px 16px 24px !important; border-radius: 26px; } body:not(.admin-body) .pageHero h1, body:not(.admin-body) .subpageHero h1, body:not(.admin-body) .page-intro h1, body:not(.admin-body) .subpage-intro h1, body:not(.admin-body) .sectionIntro.subpageIntro h1, body:not(.admin-body) .section-intro.subpage-intro h1, body:not(.admin-body) .productsIntro h1, body:not(.admin-body) .productIntro h1, body:not(.admin-body) .pageHeader h1, body:not(.admin-body) .page-header h1, body:not(.admin-body) .pageHero h2, body:not(.admin-body) .subpageHero h2, body:not(.admin-body) .page-intro h2, body:not(.admin-body) .subpage-intro h2, body:not(.admin-body) .sectionIntro.subpageIntro h2, body:not(.admin-body) .section-intro.subpage-intro h2, body:not(.admin-body) .productsIntro h2, body:not(.admin-body) .productIntro h2, body:not(.admin-body) .pageHeader h2, body:not(.admin-body) .page-header h2 { padding: 12px 20px 13px !important; border-radius: 24px; letter-spacing: -.04em !important; } body:not(.admin-body) .pageHero p, body:not(.admin-body) .subpageHero p, body:not(.admin-body) .page-intro p, body:not(.admin-body) .subpage-intro p, body:not(.admin-body) .sectionIntro.subpageIntro p, body:not(.admin-body) .section-intro.subpage-intro p, body:not(.admin-body) .productsIntro p, body:not(.admin-body) .productIntro p, body:not(.admin-body) .pageHeader p, body:not(.admin-body) .page-header p { line-height: 1.68 !important; } } /* End Carvill V64 */ /* === CARVILL V65 RESTORE PREMIUM SUBPAGE INTRO PILLS START === */ /* Restore the premium centered subpage intro design exactly for public pages only */ body:not(.admin-body) .pageIntro, body:not(.admin-body) .subpageIntro, body:not(.admin-body) .subpage-intro, body:not(.admin-body) .page-intro, body:not(.admin-body) .introBlock, body:not(.admin-body) .sectionIntro, body:not(.admin-body) .pageHeader, body:not(.admin-body) .page-header { text-align: center !important; max-width: 1180px !important; margin: 34px auto 38px !important; padding: 34px 22px 28px !important; position: relative !important; } body:not(.admin-body) .pageIntro::before, body:not(.admin-body) .subpageIntro::before, body:not(.admin-body) .subpage-intro::before, body:not(.admin-body) .page-intro::before, body:not(.admin-body) .introBlock::before, body:not(.admin-body) .sectionIntro::before, body:not(.admin-body) .pageHeader::before, body:not(.admin-body) .page-header::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 34px !important; background: radial-gradient(circle at top left, rgba(35, 170, 210, .18), transparent 38%), linear-gradient(135deg, rgba(255,255,255,.90), rgba(227,247,255,.72)) !important; border: 1px solid rgba(20, 145, 185, .16) !important; box-shadow: 0 22px 70px rgba(11, 54, 82, .10) !important; z-index: -1 !important; } /* Title pill restored: centered, premium, not generic */ body:not(.admin-body) .pageIntro h1, body:not(.admin-body) .subpageIntro h1, body:not(.admin-body) .subpage-intro h1, body:not(.admin-body) .page-intro h1, body:not(.admin-body) .introBlock h1, body:not(.admin-body) .sectionIntro h1, body:not(.admin-body) .pageHeader h1, body:not(.admin-body) .page-header h1, body:not(.admin-body) main > section:first-of-type h1, body:not(.admin-body) main .container:first-child h1 { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 auto 18px !important; padding: 16px 34px !important; border-radius: 999px !important; color: #ffffff !important; font-family: "Poppins", "Segoe UI", Arial, sans-serif !important; font-size: clamp(2.05rem, 3.2vw, 3.55rem) !important; line-height: 1.05 !important; font-weight: 900 !important; letter-spacing: -0.045em !important; text-align: center !important; background: linear-gradient(135deg, #063855 0%, #0877a6 48%, #0aa4b8 100%) !important; box-shadow: 0 18px 36px rgba(6, 56, 85, .24), inset 0 1px 0 rgba(255,255,255,.30) !important; border: 1px solid rgba(255,255,255,.38) !important; text-shadow: 0 2px 8px rgba(0,0,0,.22) !important; } /* Small premium accent above the title */ body:not(.admin-body) .pageIntro h1::before, body:not(.admin-body) .subpageIntro h1::before, body:not(.admin-body) .subpage-intro h1::before, body:not(.admin-body) .page-intro h1::before, body:not(.admin-body) .introBlock h1::before, body:not(.admin-body) .sectionIntro h1::before, body:not(.admin-body) .pageHeader h1::before, body:not(.admin-body) .page-header h1::before, body:not(.admin-body) main > section:first-of-type h1::before, body:not(.admin-body) main .container:first-child h1::before { content: "" !important; width: 13px !important; height: 13px !important; margin-right: 13px !important; border-radius: 50% !important; background: #b8f7ff !important; box-shadow: 0 0 0 6px rgba(184,247,255,.18) !important; flex: 0 0 auto !important; } /* Subtitle/description below the title: richer, readable, professional */ body:not(.admin-body) .pageIntro h1 + p, body:not(.admin-body) .subpageIntro h1 + p, body:not(.admin-body) .subpage-intro h1 + p, body:not(.admin-body) .page-intro h1 + p, body:not(.admin-body) .introBlock h1 + p, body:not(.admin-body) .sectionIntro h1 + p, body:not(.admin-body) .pageHeader h1 + p, body:not(.admin-body) .page-header h1 + p, body:not(.admin-body) main > section:first-of-type h1 + p, body:not(.admin-body) main .container:first-child h1 + p { display: block !important; max-width: 900px !important; margin: 0 auto 14px !important; color: #0d4962 !important; font-family: "Inter", "Segoe UI", Arial, sans-serif !important; font-size: clamp(1.08rem, 1.35vw, 1.34rem) !important; line-height: 1.72 !important; font-weight: 700 !important; letter-spacing: -0.012em !important; text-align: center !important; } body:not(.admin-body) .pageIntro p, body:not(.admin-body) .subpageIntro p, body:not(.admin-body) .subpage-intro p, body:not(.admin-body) .page-intro p, body:not(.admin-body) .introBlock p, body:not(.admin-body) .sectionIntro p, body:not(.admin-body) .pageHeader p, body:not(.admin-body) .page-header p, body:not(.admin-body) main > section:first-of-type p, body:not(.admin-body) main .container:first-child p { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; color: #355d6a !important; font-family: "Inter", "Segoe UI", Arial, sans-serif !important; font-size: clamp(1rem, 1.12vw, 1.13rem) !important; line-height: 1.82 !important; font-weight: 500 !important; text-align: center !important; } /* Divider line under intro text */ body:not(.admin-body) .pageIntro::after, body:not(.admin-body) .subpageIntro::after, body:not(.admin-body) .subpage-intro::after, body:not(.admin-body) .page-intro::after, body:not(.admin-body) .introBlock::after, body:not(.admin-body) .sectionIntro::after, body:not(.admin-body) .pageHeader::after, body:not(.admin-body) .page-header::after { content: "" !important; display: block !important; width: 120px !important; height: 5px !important; margin: 22px auto 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, #1aa8c7, #75c95b, #e2b84b) !important; box-shadow: 0 8px 18px rgba(26,168,199,.20) !important; } @media (max-width: 768px) { body:not(.admin-body) .pageIntro, body:not(.admin-body) .subpageIntro, body:not(.admin-body) .subpage-intro, body:not(.admin-body) .page-intro, body:not(.admin-body) .introBlock, body:not(.admin-body) .sectionIntro, body:not(.admin-body) .pageHeader, body:not(.admin-body) .page-header { margin: 22px 12px 28px !important; padding: 26px 14px 24px !important; border-radius: 26px !important; } body:not(.admin-body) .pageIntro h1, body:not(.admin-body) .subpageIntro h1, body:not(.admin-body) .subpage-intro h1, body:not(.admin-body) .page-intro h1, body:not(.admin-body) .introBlock h1, body:not(.admin-body) .sectionIntro h1, body:not(.admin-body) .pageHeader h1, body:not(.admin-body) .page-header h1, body:not(.admin-body) main > section:first-of-type h1, body:not(.admin-body) main .container:first-child h1 { padding: 14px 22px !important; font-size: clamp(1.72rem, 7vw, 2.35rem) !important; border-radius: 28px !important; } } /* === CARVILL V65 RESTORE PREMIUM SUBPAGE INTRO PILLS END === */ /* === CARVILL V66 SUBPAGE TITLE COLOR PATCH START === */ /* Cleaner subpage title/pill colors: readable, professional, not plain white */ body:not(.admin-body) .subpage-intro, body:not(.admin-body) .page-intro, body:not(.admin-body) .subpageIntro, body:not(.admin-body) .introBlock, body:not(.admin-body) .pageHeaderBlock { text-align: center; } body:not(.admin-body) .subpage-intro h1, body:not(.admin-body) .page-intro h1, body:not(.admin-body) .subpageIntro h1, body:not(.admin-body) .introBlock h1, body:not(.admin-body) .pageHeaderBlock h1, body:not(.admin-body) .page-title-pill, body:not(.admin-body) .subpage-title-pill, body:not(.admin-body) .intro-title-pill, body:not(.admin-body) .premium-title-pill, body:not(.admin-body) .subpagePillTitle, body:not(.admin-body) .pillTitle, body:not(.admin-body) .heroPill, body:not(.admin-body) .sectionPill, body:not(.admin-body) .section-label, body:not(.admin-body) .sectionLabel { color: #07324a !important; background: linear-gradient(135deg, rgba(232, 250, 255, 0.98), rgba(198, 237, 247, 0.96)) !important; border: 1px solid rgba(0, 132, 170, 0.28) !important; box-shadow: 0 16px 38px rgba(6, 58, 85, 0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important; text-shadow: none !important; } body:not(.admin-body) .subpage-intro h1 strong, body:not(.admin-body) .page-intro h1 strong, body:not(.admin-body) .subpageIntro h1 strong, body:not(.admin-body) .introBlock h1 strong, body:not(.admin-body) .pageHeaderBlock h1 strong, body:not(.admin-body) .page-title-pill strong, body:not(.admin-body) .subpage-title-pill strong, body:not(.admin-body) .intro-title-pill strong, body:not(.admin-body) .premium-title-pill strong, body:not(.admin-body) .subpagePillTitle strong, body:not(.admin-body) .pillTitle strong { color: #062d43 !important; } body:not(.admin-body) .subpage-intro .subtitle, body:not(.admin-body) .page-intro .subtitle, body:not(.admin-body) .subpageIntro .subtitle, body:not(.admin-body) .introBlock .subtitle, body:not(.admin-body) .pageHeaderBlock .subtitle, body:not(.admin-body) .subpage-intro p, body:not(.admin-body) .page-intro p, body:not(.admin-body) .subpageIntro p, body:not(.admin-body) .introBlock p, body:not(.admin-body) .pageHeaderBlock p { color: #255466 !important; text-shadow: none !important; } /* When the page title is inside a dark/blue banner, keep it readable with a warm light badge */ body:not(.admin-body) .subpage-hero h1, body:not(.admin-body) .page-hero h1, body:not(.admin-body) .innerHero h1, body:not(.admin-body) .miniHero h1 { color: #f8fbff !important; text-shadow: 0 3px 18px rgba(0,0,0,0.35) !important; } /* Small accent text inside title pills */ body:not(.admin-body) .subpage-intro h1::after, body:not(.admin-body) .page-intro h1::after, body:not(.admin-body) .subpageIntro h1::after, body:not(.admin-body) .introBlock h1::after, body:not(.admin-body) .pageHeaderBlock h1::after { background: linear-gradient(90deg, #0b8fb0, #48a96a) !important; } /* === CARVILL V66 SUBPAGE TITLE COLOR PATCH END === */ /* === CARVILL V67 FORCE SUBPAGE TITLE DARK COLOR START === */ /* Force the restored subpage title pills to use a readable dark ocean/teal color instead of white. */ body:not(.admin-body) .pageIntro h1, body:not(.admin-body) .subpageIntro h1, body:not(.admin-body) .subpage-intro h1, body:not(.admin-body) .page-intro h1, body:not(.admin-body) .introBlock h1, body:not(.admin-body) .sectionIntro h1, body:not(.admin-body) .pageHeader h1, body:not(.admin-body) .page-header h1, body:not(.admin-body) .pageHeaderBlock h1, body:not(.admin-body) main > section:first-of-type h1, body:not(.admin-body) main .container:first-child h1, body:not(.admin-body) .page-title-pill, body:not(.admin-body) .subpage-title-pill, body:not(.admin-body) .intro-title-pill, body:not(.admin-body) .premium-title-pill, body:not(.admin-body) .subpagePillTitle, body:not(.admin-body) .pillTitle { color: #07324a !important; background: linear-gradient(135deg, #f7fdff 0%, #dff6fb 48%, #c7ecf3 100%) !important; border: 1px solid rgba(8, 124, 157, .32) !important; box-shadow: 0 18px 38px rgba(7, 50, 74, .16), inset 0 1px 0 rgba(255,255,255,.95) !important; text-shadow: none !important; } body:not(.admin-body) .pageIntro h1 *, body:not(.admin-body) .subpageIntro h1 *, body:not(.admin-body) .subpage-intro h1 *, body:not(.admin-body) .page-intro h1 *, body:not(.admin-body) .introBlock h1 *, body:not(.admin-body) .sectionIntro h1 *, body:not(.admin-body) .pageHeader h1 *, body:not(.admin-body) .page-header h1 *, body:not(.admin-body) .pageHeaderBlock h1 *, body:not(.admin-body) main > section:first-of-type h1 *, body:not(.admin-body) main .container:first-child h1 *, body:not(.admin-body) .page-title-pill *, body:not(.admin-body) .subpage-title-pill *, body:not(.admin-body) .intro-title-pill *, body:not(.admin-body) .premium-title-pill *, body:not(.admin-body) .subpagePillTitle *, body:not(.admin-body) .pillTitle * { color: #07324a !important; text-shadow: none !important; } body:not(.admin-body) .pageIntro h1::before, body:not(.admin-body) .subpageIntro h1::before, body:not(.admin-body) .subpage-intro h1::before, body:not(.admin-body) .page-intro h1::before, body:not(.admin-body) .introBlock h1::before, body:not(.admin-body) .sectionIntro h1::before, body:not(.admin-body) .pageHeader h1::before, body:not(.admin-body) .page-header h1::before, body:not(.admin-body) .pageHeaderBlock h1::before, body:not(.admin-body) main > section:first-of-type h1::before, body:not(.admin-body) main .container:first-child h1::before { background: #0b8fb0 !important; box-shadow: 0 0 0 6px rgba(11,143,176,.16) !important; } body:not(.admin-body) .pageIntro h1 + p, body:not(.admin-body) .subpageIntro h1 + p, body:not(.admin-body) .subpage-intro h1 + p, body:not(.admin-body) .page-intro h1 + p, body:not(.admin-body) .introBlock h1 + p, body:not(.admin-body) .sectionIntro h1 + p, body:not(.admin-body) .pageHeader h1 + p, body:not(.admin-body) .page-header h1 + p, body:not(.admin-body) .pageHeaderBlock h1 + p, body:not(.admin-body) main > section:first-of-type h1 + p, body:not(.admin-body) main .container:first-child h1 + p { color: #0b4962 !important; text-shadow: none !important; } body:not(.admin-body) .pageIntro p, body:not(.admin-body) .subpageIntro p, body:not(.admin-body) .subpage-intro p, body:not(.admin-body) .page-intro p, body:not(.admin-body) .introBlock p, body:not(.admin-body) .sectionIntro p, body:not(.admin-body) .pageHeader p, body:not(.admin-body) .page-header p, body:not(.admin-body) .pageHeaderBlock p, body:not(.admin-body) main > section:first-of-type p, body:not(.admin-body) main .container:first-child p { color: #315c68 !important; text-shadow: none !important; } /* === CARVILL V67 FORCE SUBPAGE TITLE DARK COLOR END === */ /* CARVILL V68 FORCE SUBPAGE TITLE DARK COLOR */ body:not(.admin-body) .subpageIntro h1, body:not(.admin-body) .subpage-intro h1, body:not(.admin-body) .pageIntro h1, body:not(.admin-body) .page-intro h1, body:not(.admin-body) .premiumSubpageIntro h1, body:not(.admin-body) .introCard h1, body:not(.admin-body) .intro-card h1, body:not(.admin-body) .pageTitle, body:not(.admin-body) .page-title, body:not(.admin-body) .subpageTitle, body:not(.admin-body) .subpage-title, body:not(.admin-body) .subpage-title-pill, body:not(.admin-body) .intro-pill, body:not(.admin-body) .page-pill, body:not(.admin-body) .premium-pill, body:not(.admin-body) .section-pill, body:not(.admin-body) .sectionPill, body:not(.admin-body) .eyebrow, body:not(.admin-body) .section-eyebrow, body:not(.admin-body) .productIntro h1, body:not(.admin-body) .farmIntro h1, body:not(.admin-body) .aquacultureIntro h1, body:not(.admin-body) .processingIntro h1, body:not(.admin-body) .aboutIntro h1, body:not(.admin-body) .contactIntro h1, body:not(.admin-body) .carvill-title-dark-fix { color: #063b55 !important; -webkit-text-fill-color: #063b55 !important; text-shadow: none !important; } body:not(.admin-body) .subpageIntro h1, body:not(.admin-body) .subpage-intro h1, body:not(.admin-body) .pageIntro h1, body:not(.admin-body) .page-intro h1, body:not(.admin-body) .premiumSubpageIntro h1, body:not(.admin-body) .introCard h1, body:not(.admin-body) .intro-card h1, body:not(.admin-body) .carvill-title-dark-fix { background: linear-gradient(135deg, rgba(231, 249, 255, 0.98), rgba(199, 238, 249, 0.98)) !important; border: 1px solid rgba(16, 118, 156, 0.22) !important; box-shadow: 0 14px 35px rgba(5, 64, 92, 0.14) !important; } /* === CARVILL V70 CLEAN OPERATION CARDS START === */ /* Integrated Operation cards: one clean background, no double box, no cropped text */ .operationGrid, .operation-grid, .integratedOperationGrid, .integrated-operation-grid, .opsGrid, .ops-grid { align-items: stretch !important; } .operationCard, .operation-card, .integratedCard, .integrated-card, .opCard, .op-card, .opsCard, .ops-card, .homeOperationCard, .home-operation-card, .integratedOperationCard, .integrated-operation-card { position: relative !important; isolation: isolate !important; height: auto !important; min-height: 315px !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; padding: 34px 30px 36px !important; border-radius: 26px !important; border: 1px solid rgba(89, 209, 235, 0.45) !important; background: linear-gradient(135deg, #086a96 0%, #0ba0bf 48%, #80dff0 100%) !important; box-shadow: 0 20px 40px rgba(0, 87, 128, 0.18) !important; color: #ffffff !important; } /* remove old image layers, blur layers, and double glass panel layers */ .operationCard::before, .operationCard::after, .operation-card::before, .operation-card::after, .integratedCard::before, .integratedCard::after, .integrated-card::before, .integrated-card::after, .opCard::before, .opCard::after, .op-card::before, .op-card::after, .opsCard::before, .opsCard::after, .ops-card::before, .ops-card::after, .homeOperationCard::before, .homeOperationCard::after, .home-operation-card::before, .home-operation-card::after, .integratedOperationCard::before, .integratedOperationCard::after, .integrated-operation-card::before, .integrated-operation-card::after { content: none !important; display: none !important; background: none !important; filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } /* if the card has an inner frame/panel, make it invisible so only one card box remains */ .operationCard .operationInner, .operationCard .cardInner, .operationCard .glassPanel, .operationCard .innerPanel, .operation-card .operationInner, .operation-card .cardInner, .operation-card .glassPanel, .operation-card .innerPanel, .integratedCard .operationInner, .integratedCard .cardInner, .integratedCard .glassPanel, .integratedCard .innerPanel, .integrated-card .operationInner, .integrated-card .cardInner, .integrated-card .glassPanel, .integrated-card .innerPanel, .opCard .operationInner, .opCard .cardInner, .opCard .glassPanel, .opCard .innerPanel, .op-card .operationInner, .op-card .cardInner, .op-card .glassPanel, .op-card .innerPanel { background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; overflow: visible !important; } .operationCard img, .operationCard video, .operation-card img, .operation-card video, .integratedCard img, .integratedCard video, .integrated-card img, .integrated-card video, .opCard img, .opCard video, .op-card img, .op-card video { display: none !important; } .operationCard h3, .operation-card h3, .integratedCard h3, .integrated-card h3, .opCard h3, .op-card h3, .opsCard h3, .ops-card h3, .homeOperationCard h3, .home-operation-card h3, .integratedOperationCard h3, .integrated-operation-card h3 { position: relative !important; z-index: 3 !important; color: #ffffff !important; font-size: clamp(1.45rem, 1.8vw, 2rem) !important; line-height: 1.15 !important; margin: 0 0 16px !important; padding: 0 !important; text-shadow: 0 3px 14px rgba(0, 42, 67, 0.35) !important; overflow: visible !important; white-space: normal !important; } .operationCard p, .operation-card p, .integratedCard p, .integrated-card p, .opCard p, .op-card p, .opsCard p, .ops-card p, .homeOperationCard p, .home-operation-card p, .integratedOperationCard p, .integrated-operation-card p { position: relative !important; z-index: 3 !important; color: rgba(255, 255, 255, 0.96) !important; font-size: 0.98rem !important; line-height: 1.75 !important; margin: 0 !important; padding: 0 !important; max-height: none !important; height: auto !important; overflow: visible !important; text-shadow: 0 2px 10px rgba(0, 44, 70, 0.28) !important; } @media (max-width: 900px) { .operationCard, .operation-card, .integratedCard, .integrated-card, .opCard, .op-card, .opsCard, .ops-card, .homeOperationCard, .home-operation-card, .integratedOperationCard, .integrated-operation-card { min-height: 0 !important; padding: 28px 24px 30px !important; } } /* === CARVILL V70 CLEAN OPERATION CARDS END === */ /* V71 - Restore original clean Integrated Operation cards: one box only, no inner overlay, no image layers */ body:not(.admin-body) .operationCardsCleanV71{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:18px !important;align-items:stretch !important;} body:not(.admin-body) .operationCardsCleanV71 .operationCardClean{position:relative !important;display:block !important;height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important;padding:30px 28px !important;border-radius:28px !important;border:1px solid rgba(130,220,240,.45) !important;background:linear-gradient(135deg,#075f88 0%,#109ec1 52%,#c9f6ff 150%) !important;box-shadow:0 20px 46px rgba(4,72,96,.18) !important;color:#fff !important;isolation:auto !important;transform:none !important;filter:none !important;} body:not(.admin-body) .operationCardsCleanV71 .operationCardClean:nth-child(2){background:linear-gradient(135deg,#06647d 0%,#11abc2 52%,#d8fff5 150%) !important;} body:not(.admin-body) .operationCardsCleanV71 .operationCardClean:nth-child(3){background:linear-gradient(135deg,#064d83 0%,#168fc7 52%,#daf8ff 150%) !important;} body:not(.admin-body) .operationCardsCleanV71 .operationCardClean:nth-child(4){background:linear-gradient(135deg,#07577e 0%,#10a4ca 52%,#effdff 150%) !important;} body:not(.admin-body) .operationCardsCleanV71 .operationCardClean::before,body:not(.admin-body) .operationCardsCleanV71 .operationCardClean::after,body:not(.admin-body) .operationCardsCleanV71 .operationCardContent,body:not(.admin-body) .operationCardsCleanV71 .operationCardMedia,body:not(.admin-body) .operationCardsCleanV71 .operationCardShade{content:none !important;display:none !important;background:none !important;box-shadow:none !important;filter:none !important;} body:not(.admin-body) .operationCardsCleanV71 .operationCardClean b{display:block !important;position:relative !important;z-index:1 !important;margin:0 0 12px !important;padding:0 !important;color:#ffffff !important;font-size:23px !important;line-height:1.16 !important;font-weight:800 !important;letter-spacing:-.02em !important;text-shadow:0 2px 10px rgba(0,42,64,.18) !important;} body:not(.admin-body) .operationCardsCleanV71 .operationCardClean span{display:block !important;position:relative !important;z-index:1 !important;color:rgba(255,255,255,.96) !important;font-size:15.5px !important;line-height:1.65 !important;font-weight:500 !important;text-shadow:0 1px 8px rgba(0,42,64,.12) !important;} @media(max-width:1100px){body:not(.admin-body) .operationCardsCleanV71{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}} @media(max-width:680px){body:not(.admin-body) .operationCardsCleanV71{grid-template-columns:1fr !important;}body:not(.admin-body) .operationCardsCleanV71 .operationCardClean{padding:26px 24px !important;}} /* ========================================================= V79 - Center About Story section + remove Company Story label ========================================================= */ /* Center the About page story/card content */ body.about-page .companyStory, body.about-page .company-story, body.about-page .aboutStory, body.about-page .about-story, body.about-page .storyBlock, body.about-page .story-block, body.about-page .aboutCompanyStory, .about-company-story, .about-story-section, .company-story-section { max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Center common inner boxes/cards used by the About story */ body.about-page .companyStory *, body.about-page .company-story *, body.about-page .aboutStory *, body.about-page .about-story *, body.about-page .storyBlock *, body.about-page .story-block *, body.about-page .aboutCompanyStory *, .about-company-story *, .about-story-section *, .company-story-section * { text-align: center !important; } /* Keep long paragraphs readable while centered */ body.about-page .companyStory p, body.about-page .company-story p, body.about-page .aboutStory p, body.about-page .about-story p, body.about-page .storyBlock p, body.about-page .story-block p, body.about-page .aboutCompanyStory p, .about-company-story p, .about-story-section p, .company-story-section p { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; line-height: 1.85 !important; font-size: clamp(1rem, 1.4vw, 1.14rem) !important; } /* Hide/remove the Company Story pill/label/button only */ body.about-page .companyStoryLabel, body.about-page .company-story-label, body.about-page .sectionLabel, body.about-page .section-label, body.about-page .eyebrow, body.about-page .pillLabel, body.about-page .pill-label, body.about-page .tagPill, body.about-page .tag-pill, .about-company-story .companyStoryLabel, .about-company-story .company-story-label, .about-company-story .sectionLabel, .about-company-story .section-label, .about-company-story .eyebrow, .about-company-story .pillLabel, .about-company-story .pill-label, .about-company-story .tagPill, .about-company-story .tag-pill, .company-story-section .companyStoryLabel, .company-story-section .company-story-label, .company-story-section .sectionLabel, .company-story-section .section-label, .company-story-section .eyebrow, .company-story-section .pillLabel, .company-story-section .pill-label, .company-story-section .tagPill, .company-story-section .tag-pill { display: none !important; } /* Fallback: if the label is a first small pill/span inside the story section */ body.about-page .company-story-section > span:first-child, body.about-page .about-company-story > span:first-child, body.about-page .companyStory > span:first-child, body.about-page .company-story > span:first-child, body.about-page .aboutStory > span:first-child, body.about-page .about-story > span:first-child { display: none !important; } /* Make the remaining "A Farm Built with Purpose" heading look clean and centered */ body.about-page .companyStory h2, body.about-page .company-story h2, body.about-page .aboutStory h2, body.about-page .about-story h2, body.about-page .storyBlock h2, body.about-page .story-block h2, body.about-page .aboutCompanyStory h2, .about-company-story h2, .about-story-section h2, .company-story-section h2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; color: #073c56 !important; font-weight: 900 !important; letter-spacing: -0.035em !important; line-height: 1.08 !important; } /* ========================================================= V83 - Contact Send an Inquiry Professional Design ========================================================= */ .contactV81Info{ position: relative !important; overflow: hidden !important; border-radius: 34px !important; padding: clamp(30px, 4vw, 50px) !important; background: radial-gradient(circle at 15% 0%, rgba(111, 220, 237, .30), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.98), rgba(229,248,252,.96)) !important; border: 1px solid rgba(27, 151, 188, .24) !important; box-shadow: 0 28px 80px rgba(4, 58, 82, .14), inset 0 1px 0 rgba(255,255,255,.95) !important; } .contactV81Info:before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(9, 92, 130, .10), transparent 42%), radial-gradient(circle at 100% 100%, rgba(126, 203, 116, .16), transparent 36%) !important; } .contactV81Info > *{ position: relative !important; z-index: 2 !important; } .contactV81Info h2{ display: inline-flex !important; align-items: center !important; gap: 12px !important; margin: 0 0 26px !important; color: #052f47 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(2.05rem, 3.4vw, 3.55rem) !important; line-height: 1.02 !important; letter-spacing: -0.055em !important; font-weight: 900 !important; } .contactV81Info h2:before{ content: "" !important; width: 14px !important; height: 48px !important; border-radius: 99px !important; background: linear-gradient(180deg, #12a9c8, #8fd36f) !important; box-shadow: 0 12px 28px rgba(18, 169, 200, .24) !important; flex: 0 0 auto !important; } .contactV81Info .line{ position: relative !important; margin: 14px 0 !important; padding: 16px 18px 16px 22px !important; border-radius: 20px !important; background: rgba(255,255,255,.68) !important; border: 1px solid rgba(18, 128, 165, .15) !important; box-shadow: 0 10px 26px rgba(6, 61, 86, .07) !important; color: #16394a !important; font-size: clamp(1rem, 1.45vw, 1.12rem) !important; line-height: 1.55 !important; font-weight: 600 !important; } .contactV81Info .line strong{ display: block !important; margin-bottom: 4px !important; color: #052f47 !important; font-size: .82rem !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .13em !important; font-weight: 950 !important; } .contactV81Actions{ margin-top: 28px !important; gap: 14px !important; } .contactV81Btn{ min-height: 54px !important; padding: 15px 24px !important; border-radius: 999px !important; font-size: .98rem !important; letter-spacing: .015em !important; text-transform: uppercase !important; font-weight: 950 !important; color: #ffffff !important; background: linear-gradient(135deg, #054b70, #16a9ca) !important; border: 1px solid rgba(255,255,255,.36) !important; box-shadow: 0 16px 34px rgba(7, 98, 137, .26), inset 0 1px 0 rgba(255,255,255,.28) !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; } .contactV81Btn:hover{ transform: translateY(-2px) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(7, 98, 137, .32), inset 0 1px 0 rgba(255,255,255,.32) !important; } .contactV81Btn.secondary{ color: #05334a !important; background: linear-gradient(135deg, #ffffff, #ddf8fe) !important; border: 1px solid rgba(18, 137, 176, .22) !important; box-shadow: 0 14px 30px rgba(7, 98, 137, .14) !important; } @media(max-width: 760px){ .contactV81Info{ padding: 28px 20px !important; border-radius: 26px !important; } .contactV81Info h2{ font-size: 2rem !important; } .contactV81Info .line{ padding: 14px 15px !important; } .contactV81Btn{ width: 100% !important; } } /* ========================================================= V86 - Home Hero Location Text White Target text: "Sta. Cruz, Zambales • Farm & Food Processing" ========================================================= */ .homeHero .hero-kicker, .homeHero .heroKicker, .hero .hero-kicker, .hero .heroKicker, .hero-content .hero-kicker, .heroContent .heroKicker, .hero-content .eyebrow, .heroContent .eyebrow, .hero .eyebrow, .hero-meta, .heroMeta, .hero-location, .heroLocation, .home-hero .eyebrow, .home-hero .hero-kicker, .home-hero .hero-location { color: #ffffff !important; text-shadow: 0 3px 14px rgba(0,0,0,.55) !important; } /* extra force for spans/small text inside hero label */ .homeHero .hero-kicker *, .homeHero .heroKicker *, .hero .hero-kicker *, .hero .heroKicker *, .hero-content .hero-kicker *, .heroContent .heroKicker *, .hero-content .eyebrow *, .heroContent .eyebrow *, .hero .eyebrow *, .hero-meta *, .heroMeta *, .hero-location *, .heroLocation *, .home-hero .eyebrow *, .home-hero .hero-kicker *, .home-hero .hero-location * { color: #ffffff !important; text-shadow: 0 3px 14px rgba(0,0,0,.55) !important; } /* V87 Force exact home hero location text white */ .homeHeroLocationWhite, .homeHeroLocationWhite *, span.homeHeroLocationWhite{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow:0 3px 14px rgba(0,0,0,.65) !important; } /* ========================================================= V92 - FINAL Subpage Hero Cut Bottom Gap Tightens the hero height and removes the empty pale strip under the image. ========================================================= */ :root{ --carvill-subhero-height: 430px; } /* Main subpage hero wrapper */ .carvill-page-hero, .carvillPageHero, .subpageHero, .subpage-hero, .pageHero, .page-hero, .subHero, .sub-hero, .page-image-hero, .subpage-image-hero, .carvillSubHero, .carvill-sub-hero { position: relative !important; height: var(--carvill-subhero-height) !important; min-height: var(--carvill-subhero-height) !important; max-height: var(--carvill-subhero-height) !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; background: #d9f7fb !important; } /* Common containers inside the hero must not add bottom space */ .carvill-page-hero > *, .carvillPageHero > *, .subpageHero > *, .subpage-hero > *, .pageHero > *, .page-hero > *, .subHero > *, .sub-hero > *, .page-image-hero > *, .subpage-image-hero > *, .carvillSubHero > *, .carvill-sub-hero > * { max-height: var(--carvill-subhero-height) !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Media wrappers fill the whole hero */ .carvill-page-hero .heroMedia, .carvill-page-hero .hero-media, .carvill-page-hero .subpageHeroMedia, .carvill-page-hero .subpage-hero-media, .carvill-page-hero .pageHeroMedia, .carvill-page-hero .page-hero-media, .carvillPageHero .heroMedia, .carvillPageHero .hero-media, .carvillPageHero .subpageHeroMedia, .carvillPageHero .subpage-hero-media, .carvillPageHero .pageHeroMedia, .carvillPageHero .page-hero-media, .subpageHero .heroMedia, .subpageHero .hero-media, .subpageHero .subpageHeroMedia, .subpageHero .subpage-hero-media, .subpage-hero .heroMedia, .subpage-hero .hero-media, .subpage-hero .subpageHeroMedia, .subpage-hero .subpage-hero-media, .page-image-hero .heroMedia, .page-image-hero .hero-media, .subpage-image-hero .heroMedia, .subpage-image-hero .hero-media { position: absolute !important; inset: 0 !important; width: 100% !important; height: var(--carvill-subhero-height) !important; min-height: var(--carvill-subhero-height) !important; max-height: var(--carvill-subhero-height) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; } /* Image/video must cover the tightened frame */ .carvill-page-hero img, .carvillPageHero img, .subpageHero img, .subpage-hero img, .pageHero img, .page-hero img, .subHero img, .sub-hero img, .page-image-hero img, .subpage-image-hero img, .carvillSubHero img, .carvill-sub-hero img, .carvill-page-hero video, .carvillPageHero video, .subpageHero video, .subpage-hero video, .pageHero video, .page-hero video, .subHero video, .sub-hero video, .page-image-hero video, .subpage-image-hero video, .carvillSubHero video, .carvill-sub-hero video { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: var(--carvill-subhero-height) !important; min-height: var(--carvill-subhero-height) !important; max-height: var(--carvill-subhero-height) !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; } /* Text overlay only, it must not increase hero height */ .carvill-page-hero .heroText, .carvill-page-hero .hero-text, .carvill-page-hero .subpageHeroText, .carvill-page-hero .subpage-hero-text, .carvill-page-hero .pageHeroText, .carvill-page-hero .page-hero-text, .carvillPageHero .heroText, .carvillPageHero .hero-text, .subpageHero .heroText, .subpageHero .hero-text, .subpage-hero .heroText, .subpage-hero .hero-text, .page-image-hero .heroText, .page-image-hero .hero-text, .subpage-image-hero .heroText, .subpage-image-hero .hero-text { position: relative !important; z-index: 5 !important; height: var(--carvill-subhero-height) !important; min-height: 0 !important; max-height: var(--carvill-subhero-height) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Left fade only. No bottom block. */ .carvill-page-hero:before, .carvillPageHero:before, .subpageHero:before, .subpage-hero:before, .pageHero:before, .page-hero:before, .subHero:before, .sub-hero:before, .page-image-hero:before, .subpage-image-hero:before, .carvillSubHero:before, .carvill-sub-hero:before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(214,247,252,.98) 0%, rgba(214,247,252,.88) 24%, rgba(214,247,252,.58) 42%, rgba(214,247,252,.16) 58%, rgba(214,247,252,0) 74%) !important; } .carvill-page-hero:after, .carvillPageHero:after, .subpageHero:after, .subpage-hero:after, .pageHero:after, .page-hero:after, .subHero:after, .sub-hero:after, .page-image-hero:after, .subpage-image-hero:after, .carvillSubHero:after, .carvill-sub-hero:after { display: none !important; content: none !important; } /* Remove top margin from next section so no pale band remains */ .carvill-page-hero + *, .carvillPageHero + *, .subpageHero + *, .subpage-hero + *, .pageHero + *, .page-hero + *, .subHero + *, .sub-hero + *, .page-image-hero + *, .subpage-image-hero + * { margin-top: 0 !important; } @media(max-width: 760px){ :root{ --carvill-subhero-height: 470px; } } /* CARVILL_V152_FOOTER_FORCE_WHITE - footer readability fix for pages with body background images */ html body footer, html body .footer, html body .site-footer, html body .main-footer, html body #footer, html body .carvill-footer { color: #ffffff !important; } html body footer *, html body .footer *, html body .site-footer *, html body .main-footer *, html body #footer *, html body .carvill-footer * { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; } html body footer a, html body .footer a, html body .site-footer a, html body .main-footer a, html body #footer a, html body .carvill-footer a { color: #ffffff !important; opacity: 1 !important; text-decoration-color: rgba(255,255,255,.65) !important; } html body footer p, html body footer span, html body footer li, html body footer div, html body footer h1, html body footer h2, html body footer h3, html body footer h4, html body footer h5, html body footer h6, html body .footer p, html body .footer span, html body .footer li, html body .footer div, html body .footer h1, html body .footer h2, html body .footer h3, html body .footer h4, html body .footer h5, html body .footer h6, html body .site-footer p, html body .site-footer span, html body .site-footer li, html body .site-footer div, html body .site-footer h1, html body .site-footer h2, html body .site-footer h3, html body .site-footer h4, html body .site-footer h5, html body .site-footer h6 { color: #ffffff !important; opacity: 1 !important; } html body footer .contact, html body footer .contact *, html body footer [class*="contact"], html body footer [class*="contact"] *, html body .footer .contact, html body .footer .contact *, html body .footer [class*="contact"], html body .footer [class*="contact"] *, html body .site-footer .contact, html body .site-footer .contact *, html body .site-footer [class*="contact"], html body .site-footer [class*="contact"] * { color: #ffffff !important; opacity: 1 !important; } /* === Carvill V155 Footer Alignment + Sitemap Layout Fix === */ .site-footer, .carvill-footer, footer { color: #fff !important; } .site-footer *, .carvill-footer *, footer * { color: #fff !important; } .site-footer a, .carvill-footer a, footer a { color: #fff !important; text-decoration: none !important; } .site-footer a:hover, .carvill-footer a:hover, footer a:hover { text-decoration: underline !important; } /* Align brand, main links, business links, and contact from the same top line. */ .site-footer .footer-inner, .site-footer .footer-grid, .site-footer .footer-content, .carvill-footer .footer-inner, .carvill-footer .footer-grid, .carvill-footer .footer-content, footer .footer-inner, footer .footer-grid, footer .footer-content { display: grid !important; grid-template-columns: minmax(280px, 1.35fr) minmax(150px, .75fr) minmax(190px, .9fr) minmax(260px, 1.1fr) !important; column-gap: 46px !important; row-gap: 24px !important; align-items: start !important; } /* Prevent sitemap blocks from being pushed down by old CSS. */ .site-footer .footer-brand, .site-footer .footer-links, .site-footer .footer-sitemap, .site-footer .footer-nav, .site-footer .footer-main-pages, .site-footer .footer-business, .site-footer .footer-contact, .carvill-footer .footer-brand, .carvill-footer .footer-links, .carvill-footer .footer-sitemap, .carvill-footer .footer-nav, .carvill-footer .footer-main-pages, .carvill-footer .footer-business, .carvill-footer .footer-contact, footer .footer-brand, footer .footer-links, footer .footer-sitemap, footer .footer-nav, footer .footer-main-pages, footer .footer-business, footer .footer-contact { margin-top: 0 !important; padding-top: 0 !important; align-self: start !important; } .site-footer h3, .site-footer h4, .carvill-footer h3, .carvill-footer h4, footer h3, footer h4 { margin-top: 0 !important; margin-bottom: 14px !important; font-weight: 800 !important; color: #fff !important; } .site-footer ul, .carvill-footer ul, footer ul { margin: 0 !important; padding-left: 0 !important; list-style: none !important; } .site-footer li, .carvill-footer li, footer li { margin: 0 0 10px 0 !important; line-height: 1.35 !important; } /* Remove any extra spacer/empty rows accidentally created before footer links. */ .site-footer .footer-spacer, .carvill-footer .footer-spacer, footer .footer-spacer { display: none !important; } @media (max-width: 980px) { .site-footer .footer-inner, .site-footer .footer-grid, .site-footer .footer-content, .carvill-footer .footer-inner, .carvill-footer .footer-grid, .carvill-footer .footer-content, footer .footer-inner, footer .footer-grid, footer .footer-content { grid-template-columns: 1fr 1fr !important; gap: 28px !important; } } @media (max-width: 640px) { .site-footer .footer-inner, .site-footer .footer-grid, .site-footer .footer-content, .carvill-footer .footer-inner, .carvill-footer .footer-grid, .carvill-footer .footer-content, footer .footer-inner, footer .footer-grid, footer .footer-content { grid-template-columns: 1fr !important; gap: 22px !important; } } /* === End Carvill V155 Footer Alignment + Sitemap Layout Fix === */ /* === CARVILL V178 SAFE SUBPAGE BG OFF + HERO FIT START === CSS-only patch. No PHP/header edits. Forces subpage body background off and makes subpage hero images fit without crop. */ /* Force subpage body background OFF. Uses :has() so homepage is not affected; only pages with subpage/page hero/gallery sections. */ body:has(.pageHero), body:has(.subpage-hero), body:has(.carvill-subpage-hero), body:has(.hero-subpage), body:has(.inner-hero), body:has(.visual-gallery), body:has(.media-gallery), body:has(.gallery-section){ background-image: none !important; background: #f6fbf7 !important; background-attachment: scroll !important; } /* Kill body pseudo background overlays only on subpages */ body:has(.pageHero)::before, body:has(.pageHero)::after, body:has(.subpage-hero)::before, body:has(.subpage-hero)::after, body:has(.carvill-subpage-hero)::before, body:has(.carvill-subpage-hero)::after, body:has(.visual-gallery)::before, body:has(.visual-gallery)::after, body:has(.media-gallery)::before, body:has(.media-gallery)::after, body:has(.gallery-section)::before, body:has(.gallery-section)::after{ background-image: none !important; } /* Processing-style perfect hero image fit for ALL subpage hero variants */ .pageHero, .subpage-hero, .carvill-subpage-hero, .hero-subpage, .inner-hero, section[class*="hero"]{ background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; overflow: hidden !important; } /* If hero uses inline background-image, do not crop */ .pageHero[style*="background"], .subpage-hero[style*="background"], .carvill-subpage-hero[style*="background"], .hero-subpage[style*="background"], .inner-hero[style*="background"], section[class*="hero"][style*="background"]{ background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; } /* If hero uses an actual img/video, show full image */ .pageHero img, .subpage-hero img, .carvill-subpage-hero img, .hero-subpage img, .inner-hero img, section[class*="hero"] img{ object-fit: contain !important; object-position: center center !important; } .pageHero video, .subpage-hero video, .carvill-subpage-hero video, .hero-subpage video, .inner-hero video, section[class*="hero"] video{ object-fit: contain !important; object-position: center center !important; } /* Soft fade after hero similar to processing.php */ .pageHero, .subpage-hero, .carvill-subpage-hero, .hero-subpage, .inner-hero{ position: relative !important; } .pageHero::after, .subpage-hero::after, .carvill-subpage-hero::after, .hero-subpage::after, .inner-hero::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 135px; pointer-events: none; z-index: 1; background: linear-gradient( to bottom, rgba(4, 34, 42, 0.00) 0%, rgba(246, 251, 247, 0.55) 60%, rgba(246, 251, 247, 1.00) 100% ) !important; } /* Keep real content above the hero fade */ .pageHero > *, .subpage-hero > *, .carvill-subpage-hero > *, .hero-subpage > *, .inner-hero > *{ position: relative; z-index: 2; } /* Keep galleries, cards, footer normal and above overlays */ .visual-gallery, .media-gallery, .gallery-section, .section, .footer, footer{ position: relative; z-index: 2; } @media(max-width:900px){ .pageHero, .subpage-hero, .carvill-subpage-hero, .hero-subpage, .inner-hero, section[class*="hero"]{ background-size: contain !important; background-position: center center !important; } } /* === CARVILL V178 SAFE SUBPAGE BG OFF + HERO FIT END === */ /* === CARVILL V194 MOBILE TIGHT LAYOUT START === */ @media(max-width:900px){ /* Compact header */ .topbar, .site-header, .main-header, header{ min-height:64px !important; padding:8px 14px !important; gap:10px !important; align-items:center !important; } .brand, .navbar-brand, .logo{ gap:8px !important; min-height:0 !important; align-items:center !important; flex:1 1 auto !important; min-width:0 !important; } /* Make logo fit tighter on mobile */ .brand img, .navbar-brand img, .logo img, header img[src*="logo"]{ width:auto !important; max-width:230px !important; height:58px !important; max-height:58px !important; object-fit:contain !important; object-position:left center !important; margin:0 !important; padding:0 !important; } /* Hide old brand text on mobile to prevent cramped header */ .brand span, .brand-text, .site-title, .logo-text, .brand-name, .site-name, header .navbar-brand span, .topbar .brand span{ display:none !important; visibility:hidden !important; width:0 !important; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; } .menuBtn, button.menuBtn, .mobile-menu-toggle, .nav-toggle, .hamburger, header button, .topbar button{ flex:0 0 auto !important; padding:11px 18px !important; min-width:86px !important; min-height:48px !important; border-radius:18px !important; font-size:20px !important; line-height:1 !important; font-weight:900 !important; margin-left:auto !important; } /* Mobile hero tighter and cleaner */ .subpageImageHeroV72, .subpageHeroFullCoverV77{ height:520px !important; min-height:520px !important; max-height:520px !important; margin-bottom:0 !important; overflow:hidden !important; } .subpageImageHeroInnerV72, .subpageImageHeroMediaV72, .subpageImageHeroCopyV72{ height:520px !important; min-height:520px !important; max-height:520px !important; } .subpageImageHeroMediaV72 img, .subpageImageHeroMediaV72 video, .subpageImageHeroPhotoV72{ height:520px !important; min-height:520px !important; max-height:520px !important; object-fit:cover !important; object-position:center center !important; } /* Reduce large empty copy spacing */ .subpageImageHeroCopyV72, .subpageHeroCopyV77, .pageHero, .heroContent{ padding-left:20px !important; padding-right:20px !important; } .subpageImageHeroCopyV72{ justify-content:flex-start !important; padding-top:58px !important; text-align:center !important; } /* Tighter pill */ .subpageImageHeroCopyV72 .eyebrow, .subpageImageHeroCopyV72 [class*="eyebrow"], .subpageImageHeroCopyV72 [class*="kicker"], .subpageImageHeroCopyV72 [class*="pill"], .pageHero .eyebrow, .pageHero [class*="pill"]{ font-size:10px !important; letter-spacing:2px !important; padding:9px 14px !important; margin-bottom:18px !important; border-radius:14px !important; } /* Tighter heading and paragraph */ .subpageImageHeroCopyV72 h1, .subpageHeroCopyV77 h1, .pageHero h1, section[class*="hero"] h1{ font-size:clamp(34px, 8.6vw, 46px) !important; line-height:1.04 !important; letter-spacing:-1.4px !important; margin:0 0 18px !important; max-width:94vw !important; } .subpageImageHeroCopyV72 p, .subpageHeroCopyV77 p, .pageHero p, section[class*="hero"] p{ font-size:clamp(16px, 4.2vw, 20px) !important; line-height:1.55 !important; max-width:94vw !important; margin:0 auto !important; } /* Keep hero fade but reduce extra vertical push */ .subpageImageHeroV72::after, .subpageHeroFullCoverV77::after{ bottom:-58px !important; height:76px !important; } /* Bring gallery section closer */ .visual-gallery, .media-gallery, .gallery-section, .subpageGallery, .subpage-gallery, .mediaGallery{ margin-top:0 !important; padding-top:34px !important; } .subpageImageHeroV72 + section, .subpageHeroFullCoverV77 + section{ margin-top:0 !important; padding-top:34px !important; } /* Gallery title tighter */ .visual-gallery h1, .visual-gallery h2, .media-gallery h1, .media-gallery h2, .gallery-section h1, .gallery-section h2, .subpageGallery h1, .subpageGallery h2, .subpage-gallery h1, .subpage-gallery h2{ font-size:clamp(30px, 8vw, 42px) !important; line-height:1.08 !important; margin-top:10px !important; margin-bottom:12px !important; } .visual-gallery [class*="pill"], .media-gallery [class*="pill"], .gallery-section [class*="pill"], .subpageGallery [class*="pill"], .subpage-gallery [class*="pill"]{ margin-top:0 !important; } } @media(max-width:520px){ .topbar, .site-header, .main-header, header{ min-height:60px !important; padding:7px 12px !important; } .brand img, .navbar-brand img, .logo img, header img[src*="logo"]{ max-width:218px !important; height:54px !important; max-height:54px !important; } .menuBtn, button.menuBtn, .mobile-menu-toggle, .nav-toggle, .hamburger, header button, .topbar button{ min-width:82px !important; min-height:46px !important; padding:10px 15px !important; font-size:19px !important; border-radius:17px !important; } .subpageImageHeroV72, .subpageHeroFullCoverV77, .subpageImageHeroInnerV72, .subpageImageHeroMediaV72, .subpageImageHeroCopyV72, .subpageImageHeroMediaV72 img, .subpageImageHeroMediaV72 video, .subpageImageHeroPhotoV72{ height:500px !important; min-height:500px !important; max-height:500px !important; } .subpageImageHeroCopyV72{ padding-top:46px !important; } .subpageImageHeroCopyV72 h1, .subpageHeroCopyV77 h1, .pageHero h1, section[class*="hero"] h1{ font-size:clamp(31px, 8.4vw, 40px) !important; margin-bottom:16px !important; } .subpageImageHeroCopyV72 p, .subpageHeroCopyV77 p, .pageHero p, section[class*="hero"] p{ font-size:16px !important; line-height:1.5 !important; } } /* === CARVILL V194 MOBILE TIGHT LAYOUT END === */ /* === CARVILL V197 MOBILE HERO PHOTO CLEAR VIEW START === */ @media(max-width:900px){ /* Remove heavy blue/cyan overlay on mobile hero only */ .subpageImageHeroV72::before, .subpageHeroFullCoverV77::before, .pageHero::before, .carvill-subpage-hero::before, section[class*="hero"]::before{ background:rgba(238,252,255,.12) !important; background-image:none !important; opacity:1 !important; } /* Remove blue gradient panels/overlays inside hero copy area */ .subpageImageHeroCopyV72, .subpageHeroCopyV77, .pageHero .heroContent, .pageHero [class*="copy"], section[class*="hero"] [class*="copy"]{ background:transparent !important; background-image:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* Make photo clearer while keeping text readable */ .subpageImageHeroMediaV72, .subpageImageHeroMediaV72::before, .subpageImageHeroMediaV72::after, .subpageHeroFullCoverV77::before, .subpageHeroFullCoverV77::after{ background-image:none !important; } .subpageImageHeroMediaV72 img, .subpageImageHeroMediaV72 video, .subpageImageHeroPhotoV72{ filter:none !important; opacity:1 !important; } /* Very light text protection only, no big blue block */ .subpageImageHeroCopyV72 h1, .subpageHeroCopyV77 h1, .pageHero h1, section[class*="hero"] h1{ text-shadow:0 2px 14px rgba(255,255,255,.68), 0 1px 2px rgba(255,255,255,.42) !important; } .subpageImageHeroCopyV72 p, .subpageHeroCopyV77 p, .pageHero p, section[class*="hero"] p{ text-shadow:0 2px 12px rgba(255,255,255,.72), 0 1px 2px rgba(255,255,255,.50) !important; } /* Keep the small category pill readable */ .subpageImageHeroCopyV72 .eyebrow, .subpageImageHeroCopyV72 [class*="eyebrow"], .subpageImageHeroCopyV72 [class*="kicker"], .subpageImageHeroCopyV72 [class*="pill"], .pageHero .eyebrow, .pageHero [class*="pill"]{ background:rgba(255,255,255,.86) !important; backdrop-filter:blur(4px) !important; -webkit-backdrop-filter:blur(4px) !important; } /* Keep only the bottom fade to blend into gallery/content */ .subpageImageHeroV72::after, .subpageHeroFullCoverV77::after{ background:linear-gradient(180deg, rgba(238,252,255,0) 0%, rgba(238,252,255,.36) 55%, rgba(238,252,255,.88) 100%) !important; } } @media(max-width:520px){ .subpageImageHeroV72::before, .subpageHeroFullCoverV77::before, .pageHero::before, .carvill-subpage-hero::before, section[class*="hero"]::before{ background:rgba(238,252,255,.08) !important; } } /* === CARVILL V197 MOBILE HERO PHOTO CLEAR VIEW END === */ /* CARVILL V248 FOOTER BACKGROUND GALLERY RESTORE START */ /* Footer readable, no raw CSS text */ footer, .site-footer, .footer, .main-footer, .carvill-footer{ position:relative !important; z-index:20 !important; background:#073b46 !important; color:#ffffff !important; overflow:hidden !important; clear:both !important; } footer *, .site-footer *, .footer *, .main-footer *, .carvill-footer *{ color:#ffffff !important; } footer a, .site-footer a, .footer a, .main-footer a, .carvill-footer a{ color:#ffffff !important; opacity:.94 !important; text-decoration:none !important; } footer a:hover, .site-footer a:hover, .footer a:hover, .main-footer a:hover, .carvill-footer a:hover{ opacity:1 !important; text-decoration:underline !important; } footer img, .site-footer img, .footer img, .main-footer img, .carvill-footer img{ opacity:1 !important; } /* Subpage body backgrounds restored safely */ body.carvill-about-page, body.about-page, body.page-about{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/about_bg.png') !important; background-size:cover !important; background-position:center top !important; background-attachment:fixed !important; } body.carvill-farm-page, body.farm-page, body.page-farm{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/farm_bg.png') !important; background-size:cover !important; background-position:center top !important; background-attachment:fixed !important; } body.carvill-aquaculture-page, body.aquaculture-page, body.page-aquaculture{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/aquaculture_bg.png') !important; background-size:cover !important; background-position:center top !important; background-attachment:fixed !important; } body.carvill-processing-page, body.processing-page, body.page-processing{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/process_bg.png') !important; background-size:cover !important; background-position:center top !important; background-attachment:fixed !important; } body.carvill-products-page, body.products-page, body.page-products{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/products_bg.png') !important; background-size:cover !important; background-position:center top !important; background-attachment:fixed !important; } body.carvill-contact-page, body.contact-page, body.page-contact{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/contact_bg.png') !important; background-size:cover !important; background-position:center top !important; background-attachment:fixed !important; } /* If body classes are missing, use URL-specific class added by V248 JS */ body[data-carvill-page="about"]{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/about_bg.png') !important; } body[data-carvill-page="farm"]{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/farm_bg.png') !important; } body[data-carvill-page="aquaculture"]{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/aquaculture_bg.png') !important; } body[data-carvill-page="processing"]{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/process_bg.png') !important; } body[data-carvill-page="products"]{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/products_bg.png') !important; } body[data-carvill-page="contact"]{ background-image:linear-gradient(rgba(236,252,255,.84),rgba(236,252,255,.84)),url('../images/contact_bg.png') !important; } body[data-carvill-page]{ background-size:cover !important; background-position:center top !important; background-attachment:fixed !important; } /* Gallery restored: desktop wide 3 columns */ body:not(.products-page) .gallery-section, body:not(.products-page) .media-section, body:not(.products-page) .visual-gallery, body:not(.products-page) .subpageGallery, body:not(.products-page) .subpage-gallery, body:not(.products-page) .mediaGallery, body:not(.products-page) .media-gallery{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; overflow:hidden !important; } body:not(.products-page) .gallery-section > .container, body:not(.products-page) .media-section > .container, body:not(.products-page) .visual-gallery > .container, body:not(.products-page) .subpageGallery > .container, body:not(.products-page) .subpage-gallery > .container, body:not(.products-page) .mediaGallery > .container, body:not(.products-page) .media-gallery > .container, body:not(.products-page) .gallery-section .container, body:not(.products-page) .media-section .container, body:not(.products-page) .visual-gallery .container, body:not(.products-page) .subpageGallery .container, body:not(.products-page) .subpage-gallery .container, body:not(.products-page) .mediaGallery .container, body:not(.products-page) .media-gallery .container{ width:100% !important; max-width:1500px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } @media(min-width:1025px){ body:not(.products-page) .gallery-section, body:not(.products-page) .media-section, body:not(.products-page) .visual-gallery, body:not(.products-page) .subpageGallery, body:not(.products-page) .subpage-gallery, body:not(.products-page) .mediaGallery, body:not(.products-page) .media-gallery{ padding:42px 32px 74px !important; } body:not(.products-page) .gallery-section .grid, body:not(.products-page) .media-section .grid, body:not(.products-page) .visual-gallery .grid, body:not(.products-page) .subpageGallery .grid, body:not(.products-page) .subpage-gallery .grid, body:not(.products-page) .mediaGallery .grid, body:not(.products-page) .media-gallery .grid, body:not(.products-page) .gallery-section [class*="grid"], body:not(.products-page) .media-section [class*="grid"], body:not(.products-page) .visual-gallery [class*="grid"], body:not(.products-page) .subpageGallery [class*="grid"], body:not(.products-page) .subpage-gallery [class*="grid"], body:not(.products-page) .mediaGallery [class*="grid"], body:not(.products-page) .media-gallery [class*="grid"]{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:26px !important; width:100% !important; max-width:1500px !important; margin:0 auto !important; padding:0 !important; box-sizing:border-box !important; } } @media(min-width:768px) and (max-width:1024px){ body:not(.products-page) .gallery-section .grid, body:not(.products-page) .media-section .grid, body:not(.products-page) .visual-gallery .grid, body:not(.products-page) .subpageGallery .grid, body:not(.products-page) .subpage-gallery .grid, body:not(.products-page) .mediaGallery .grid, body:not(.products-page) .media-gallery .grid, body:not(.products-page) .gallery-section [class*="grid"], body:not(.products-page) .media-section [class*="grid"], body:not(.products-page) .visual-gallery [class*="grid"], body:not(.products-page) .subpageGallery [class*="grid"], body:not(.products-page) .subpage-gallery [class*="grid"], body:not(.products-page) .mediaGallery [class*="grid"], body:not(.products-page) .media-gallery [class*="grid"]{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px !important; width:100% !important; max-width:1060px !important; margin:0 auto !important; } } @media(max-width:767px){ body[data-carvill-page]{ background-attachment:scroll !important; } body:not(.products-page) .gallery-section, body:not(.products-page) .media-section, body:not(.products-page) .visual-gallery, body:not(.products-page) .subpageGallery, body:not(.products-page) .subpage-gallery, body:not(.products-page) .mediaGallery, body:not(.products-page) .media-gallery{ padding:28px 14px 42px !important; } body:not(.products-page) .gallery-section .grid, body:not(.products-page) .media-section .grid, body:not(.products-page) .visual-gallery .grid, body:not(.products-page) .subpageGallery .grid, body:not(.products-page) .subpage-gallery .grid, body:not(.products-page) .mediaGallery .grid, body:not(.products-page) .media-gallery .grid, body:not(.products-page) .gallery-section [class*="grid"], body:not(.products-page) .media-section [class*="grid"], body:not(.products-page) .visual-gallery [class*="grid"], body:not(.products-page) .subpageGallery [class*="grid"], body:not(.products-page) .subpage-gallery [class*="grid"], body:not(.products-page) .mediaGallery [class*="grid"], body:not(.products-page) .media-gallery [class*="grid"]{ display:grid !important; grid-template-columns:1fr !important; gap:18px !important; width:100% !important; max-width:100% !important; margin:0 auto !important; padding:0 !important; } } /* Gallery cards and images */ body:not(.products-page) .gallery-section .card, body:not(.products-page) .media-section .card, body:not(.products-page) .visual-gallery .card, body:not(.products-page) .subpageGallery .card, body:not(.products-page) .subpage-gallery .card, body:not(.products-page) .mediaGallery .card, body:not(.products-page) .media-gallery .card, body:not(.products-page) .gallery-section article, body:not(.products-page) .media-section article, body:not(.products-page) .visual-gallery article, body:not(.products-page) .subpageGallery article, body:not(.products-page) .subpage-gallery article, body:not(.products-page) .mediaGallery article, body:not(.products-page) .media-gallery article, body:not(.products-page) .gallery-section figure, body:not(.products-page) .media-section figure, body:not(.products-page) .visual-gallery figure, body:not(.products-page) .subpageGallery figure, body:not(.products-page) .subpage-gallery figure, body:not(.products-page) .mediaGallery figure, body:not(.products-page) .media-gallery figure{ width:100% !important; max-width:100% !important; background:#ffffff !important; border-radius:22px !important; overflow:hidden !important; box-sizing:border-box !important; } body:not(.products-page) .gallery-section img, body:not(.products-page) .media-section img, body:not(.products-page) .visual-gallery img, body:not(.products-page) .subpageGallery img, body:not(.products-page) .subpage-gallery img, body:not(.products-page) .mediaGallery img, body:not(.products-page) .media-gallery img, body:not(.products-page) .gallery-section video, body:not(.products-page) .media-section video, body:not(.products-page) .visual-gallery video, body:not(.products-page) .subpageGallery video, body:not(.products-page) .subpage-gallery video, body:not(.products-page) .mediaGallery video, body:not(.products-page) .media-gallery video{ width:100% !important; max-width:100% !important; object-fit:cover !important; object-position:center center !important; display:block !important; } @media(min-width:768px){ body:not(.products-page) .gallery-section img, body:not(.products-page) .media-section img, body:not(.products-page) .visual-gallery img, body:not(.products-page) .subpageGallery img, body:not(.products-page) .subpage-gallery img, body:not(.products-page) .mediaGallery img, body:not(.products-page) .media-gallery img, body:not(.products-page) .gallery-section video, body:not(.products-page) .media-section video, body:not(.products-page) .visual-gallery video, body:not(.products-page) .subpageGallery video, body:not(.products-page) .subpage-gallery video, body:not(.products-page) .mediaGallery video, body:not(.products-page) .media-gallery video{ height:285px !important; } } @media(max-width:767px){ body:not(.products-page) .gallery-section img, body:not(.products-page) .media-section img, body:not(.products-page) .visual-gallery img, body:not(.products-page) .subpageGallery img, body:not(.products-page) .subpage-gallery img, body:not(.products-page) .mediaGallery img, body:not(.products-page) .media-gallery img, body:not(.products-page) .gallery-section video, body:not(.products-page) .media-section video, body:not(.products-page) .visual-gallery video, body:not(.products-page) .subpageGallery video, body:not(.products-page) .subpage-gallery video, body:not(.products-page) .mediaGallery video, body:not(.products-page) .media-gallery video{ height:230px !important; } } /* CARVILL V248 FOOTER BACKGROUND GALLERY RESTORE END */ /* CARVILL V253 MOBILE SUBPAGE GALLERY FINAL NO BLINK START */ /* Final mobile subpage gallery rule. Mobile only. Stops first-paint 3 thin column blink by forcing 1 column from CSS load. Products page excluded. */ @media screen and (max-width: 767px){ html body:not(.products-page) .gallery-section, html body:not(.products-page) .media-section, html body:not(.products-page) .visual-gallery, html body:not(.products-page) .subpageGallery, html body:not(.products-page) .subpage-gallery, html body:not(.products-page) .mediaGallery, html body:not(.products-page) .media-gallery, html body:not(.products-page) section[class*="gallery" i], html body:not(.products-page) section[class*="Gallery"], html body:not(.products-page) div[class*="gallery" i], html body:not(.products-page) div[class*="Gallery"]{ width:100% !important; max-width:100% !important; min-width:0 !important; margin-left:0 !important; margin-right:0 !important; padding-left:14px !important; padding-right:14px !important; box-sizing:border-box !important; overflow:hidden !important; } html body:not(.products-page) .gallery-section > *, html body:not(.products-page) .media-section > *, html body:not(.products-page) .visual-gallery > *, html body:not(.products-page) .subpageGallery > *, html body:not(.products-page) .subpage-gallery > *, html body:not(.products-page) .mediaGallery > *, html body:not(.products-page) .media-gallery > *{ max-width:100% !important; box-sizing:border-box !important; } html body:not(.products-page) .gallery-section .container, html body:not(.products-page) .media-section .container, html body:not(.products-page) .visual-gallery .container, html body:not(.products-page) .subpageGallery .container, html body:not(.products-page) .subpage-gallery .container, html body:not(.products-page) .mediaGallery .container, html body:not(.products-page) .media-gallery .container, html body:not(.products-page) .gallery-section .wrap, html body:not(.products-page) .media-section .wrap, html body:not(.products-page) .visual-gallery .wrap, html body:not(.products-page) .subpageGallery .wrap, html body:not(.products-page) .subpage-gallery .wrap, html body:not(.products-page) .mediaGallery .wrap, html body:not(.products-page) .media-gallery .wrap{ width:100% !important; max-width:100% !important; min-width:0 !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } html body:not(.products-page) .gallery-section .grid, html body:not(.products-page) .media-section .grid, html body:not(.products-page) .visual-gallery .grid, html body:not(.products-page) .subpageGallery .grid, html body:not(.products-page) .subpage-gallery .grid, html body:not(.products-page) .mediaGallery .grid, html body:not(.products-page) .media-gallery .grid, html body:not(.products-page) .gallery-section [class*="grid" i], html body:not(.products-page) .media-section [class*="grid" i], html body:not(.products-page) .visual-gallery [class*="grid" i], html body:not(.products-page) .subpageGallery [class*="grid" i], html body:not(.products-page) .subpage-gallery [class*="grid" i], html body:not(.products-page) .mediaGallery [class*="grid" i], html body:not(.products-page) .media-gallery [class*="grid" i], html body:not(.products-page) [class*="gallery" i] [class*="grid" i], html body:not(.products-page) [class*="Gallery"] [class*="grid" i]{ display:grid !important; grid-template-columns:minmax(0, 1fr) !important; grid-auto-columns:auto !important; grid-auto-flow:row !important; gap:18px !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 auto !important; padding:0 !important; box-sizing:border-box !important; justify-items:stretch !important; align-items:stretch !important; } html body:not(.products-page) .gallery-section .row, html body:not(.products-page) .media-section .row, html body:not(.products-page) .visual-gallery .row, html body:not(.products-page) .subpageGallery .row, html body:not(.products-page) .subpage-gallery .row, html body:not(.products-page) .mediaGallery .row, html body:not(.products-page) .media-gallery .row, html body:not(.products-page) .gallery-section [class*="row" i], html body:not(.products-page) .media-section [class*="row" i], html body:not(.products-page) .visual-gallery [class*="row" i], html body:not(.products-page) .subpageGallery [class*="row" i], html body:not(.products-page) .subpage-gallery [class*="row" i], html body:not(.products-page) .mediaGallery [class*="row" i], html body:not(.products-page) .media-gallery [class*="row" i]{ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:18px !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 auto !important; padding:0 !important; box-sizing:border-box !important; } html body:not(.products-page) .gallery-section .card, html body:not(.products-page) .media-section .card, html body:not(.products-page) .visual-gallery .card, html body:not(.products-page) .subpageGallery .card, html body:not(.products-page) .subpage-gallery .card, html body:not(.products-page) .mediaGallery .card, html body:not(.products-page) .media-gallery .card, html body:not(.products-page) .gallery-section .gallery-card, html body:not(.products-page) .media-section .media-card, html body:not(.products-page) .visual-gallery .gallery-card, html body:not(.products-page) .subpageGallery .gallery-card, html body:not(.products-page) .subpage-gallery .gallery-card, html body:not(.products-page) .mediaGallery .media-card, html body:not(.products-page) .media-gallery .media-card, html body:not(.products-page) .gallery-section .gallery-item, html body:not(.products-page) .media-section .media-item, html body:not(.products-page) .visual-gallery .gallery-item, html body:not(.products-page) .subpageGallery .gallery-item, html body:not(.products-page) .subpage-gallery .gallery-item, html body:not(.products-page) .mediaGallery .media-item, html body:not(.products-page) .media-gallery .media-item, html body:not(.products-page) .gallery-section article, html body:not(.products-page) .media-section article, html body:not(.products-page) .visual-gallery article, html body:not(.products-page) .subpageGallery article, html body:not(.products-page) .subpage-gallery article, html body:not(.products-page) .mediaGallery article, html body:not(.products-page) .media-gallery article, html body:not(.products-page) .gallery-section figure, html body:not(.products-page) .media-section figure, html body:not(.products-page) .visual-gallery figure, html body:not(.products-page) .subpageGallery figure, html body:not(.products-page) .subpage-gallery figure, html body:not(.products-page) .mediaGallery figure, html body:not(.products-page) .media-gallery figure{ width:100% !important; max-width:100% !important; min-width:0 !important; flex:0 0 auto !important; margin:0 auto !important; padding:0 !important; display:flex !important; flex-direction:column !important; border-radius:20px !important; overflow:hidden !important; box-sizing:border-box !important; transform:none !important; } html body:not(.products-page) .gallery-section img, html body:not(.products-page) .media-section img, html body:not(.products-page) .visual-gallery img, html body:not(.products-page) .subpageGallery img, html body:not(.products-page) .subpage-gallery img, html body:not(.products-page) .mediaGallery img, html body:not(.products-page) .media-gallery img, html body:not(.products-page) .gallery-section video, html body:not(.products-page) .media-section video, html body:not(.products-page) .visual-gallery video, html body:not(.products-page) .subpageGallery video, html body:not(.products-page) .subpage-gallery video, html body:not(.products-page) .mediaGallery video, html body:not(.products-page) .media-gallery video{ width:100% !important; max-width:100% !important; min-width:0 !important; height:230px !important; min-height:230px !important; max-height:230px !important; object-fit:cover !important; object-position:center center !important; display:block !important; margin:0 !important; padding:0 !important; border-radius:0 !important; box-sizing:border-box !important; } } /* CARVILL V253 MOBILE SUBPAGE GALLERY FINAL NO BLINK END */ /* CARVILL V262 CLEAN REAL MOBILE BURGER FIX START */ /* Final clean rule for the real .menuBtn + .topbar nav system. Mobile nav opens as a fixed white card above hero/content. Also locks subpage gallery to 1 column on mobile from first CSS load. */ /* Desktop remains normal */ @media(min-width:901px){ .topbar nav{ display:flex; } } @media(max-width:900px){ html, body{ overflow-x:hidden !important; } .topbar{ position:sticky !important; top:0 !important; z-index:2147483000 !important; overflow:visible !important; isolation:isolate !important; } .menuBtn, button.menuBtn{ display:block !important; position:relative !important; z-index:2147483002 !important; pointer-events:auto !important; cursor:pointer !important; touch-action:manipulation !important; } /* Closed mobile nav */ .topbar nav{ display:none !important; } /* Open mobile nav: fixed above every hero/background */ body.navOpen .topbar nav, html.navOpen .topbar nav, .navOpen .topbar nav{ display:flex !important; position:fixed !important; top:74px !important; left:12px !important; right:12px !important; width:auto !important; max-width:none !important; max-height:calc(100vh - 92px) !important; overflow:auto !important; z-index:2147483647 !important; flex-direction:column !important; gap:8px !important; padding:14px !important; margin:0 !important; background:#ffffff !important; border:2px solid rgba(7,59,70,.14) !important; border-radius:18px !important; box-shadow:0 24px 70px rgba(0,30,42,.34) !important; opacity:1 !important; visibility:visible !important; transform:none !important; pointer-events:auto !important; } body.navOpen .topbar nav a, html.navOpen .topbar nav a, .navOpen .topbar nav a{ display:block !important; width:100% !important; padding:13px 14px !important; margin:0 !important; border-radius:12px !important; background:#eefdff !important; border:1px solid rgba(7,59,70,.10) !important; color:#073b46 !important; text-decoration:none !important; font-weight:900 !important; letter-spacing:.04em !important; text-align:left !important; box-sizing:border-box !important; position:relative !important; z-index:2147483647 !important; pointer-events:auto !important; } body.navOpen .topbar nav a:hover, body.navOpen .topbar nav a:active{ background:#d9f8ff !important; } /* Ensure hero/background layers cannot cover the opened nav */ body.navOpen .hero, body.navOpen .pageHero, body.navOpen .subpageImageHeroV72, body.navOpen .subpageHeroFullCoverV77, body.navOpen .subpage-hero, body.navOpen section[class*="hero"], body.navOpen #aboutBgV138, body.navOpen #farmBgV138, body.navOpen #aquacultureBgV138, body.navOpen #processingBgV138, body.navOpen #productsBgV138, body.navOpen #contactBgV138{ z-index:1 !important; pointer-events:none !important; } } /* Mobile subpage gallery no-blink: one card per row immediately */ @media(max-width:767px){ body:not(.products-page) .visual-gallery, body:not(.products-page) .media-gallery, body:not(.products-page) .gallery-section, body:not(.products-page) .subpageGallery, body:not(.products-page) .subpage-gallery, body:not(.products-page) .mediaGallery, body:not(.products-page) .media-gallery{ width:100% !important; max-width:100% !important; min-width:0 !important; padding-left:14px !important; padding-right:14px !important; box-sizing:border-box !important; overflow:hidden !important; } body:not(.products-page) .visual-gallery .grid, body:not(.products-page) .media-gallery .grid, body:not(.products-page) .gallery-section .grid, body:not(.products-page) .subpageGallery .grid, body:not(.products-page) .subpage-gallery .grid, body:not(.products-page) .mediaGallery .grid, body:not(.products-page) .media-gallery .grid, body:not(.products-page) .visual-gallery [class*="grid"], body:not(.products-page) .media-gallery [class*="grid"], body:not(.products-page) .gallery-section [class*="grid"], body:not(.products-page) .subpageGallery [class*="grid"], body:not(.products-page) .subpage-gallery [class*="grid"], body:not(.products-page) .mediaGallery [class*="grid"], body:not(.products-page) .media-gallery [class*="grid"]{ display:grid !important; grid-template-columns:1fr !important; grid-auto-flow:row !important; gap:18px !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 auto !important; padding:0 !important; box-sizing:border-box !important; } body:not(.products-page) .visual-gallery .card, body:not(.products-page) .media-gallery .card, body:not(.products-page) .gallery-section .card, body:not(.products-page) .subpageGallery .card, body:not(.products-page) .subpage-gallery .card, body:not(.products-page) .mediaGallery .card, body:not(.products-page) .media-gallery .card, body:not(.products-page) .visual-gallery article, body:not(.products-page) .media-gallery article, body:not(.products-page) .gallery-section article, body:not(.products-page) .subpageGallery article, body:not(.products-page) .subpage-gallery article, body:not(.products-page) .mediaGallery article, body:not(.products-page) .media-gallery article, body:not(.products-page) .visual-gallery figure, body:not(.products-page) .media-gallery figure, body:not(.products-page) .gallery-section figure, body:not(.products-page) .subpageGallery figure, body:not(.products-page) .subpage-gallery figure, body:not(.products-page) .mediaGallery figure, body:not(.products-page) .media-gallery figure{ width:100% !important; max-width:100% !important; min-width:0 !important; flex:0 0 auto !important; margin:0 auto !important; box-sizing:border-box !important; } body:not(.products-page) .visual-gallery img, body:not(.products-page) .media-gallery img, body:not(.products-page) .gallery-section img, body:not(.products-page) .subpageGallery img, body:not(.products-page) .subpage-gallery img, body:not(.products-page) .mediaGallery img, body:not(.products-page) .media-gallery img, body:not(.products-page) .visual-gallery video, body:not(.products-page) .media-gallery video, body:not(.products-page) .gallery-section video, body:not(.products-page) .subpageGallery video, body:not(.products-page) .subpage-gallery video, body:not(.products-page) .mediaGallery video, body:not(.products-page) .media-gallery video{ width:100% !important; max-width:100% !important; min-width:0 !important; height:230px !important; min-height:230px !important; max-height:230px !important; object-fit:cover !important; object-position:center center !important; display:block !important; } } /* CARVILL V262 CLEAN REAL MOBILE BURGER FIX END */ /* CARVILL V270 CLEAN REAL HEADER MOBILE MENU START */ @media(max-width:900px){ .menuBtn, button.menuBtn{ display:block !important; position:relative !important; z-index:2147483002 !important; pointer-events:auto !important; cursor:pointer !important; } .topbar{ overflow:visible !important; z-index:2147483000 !important; } .topbar nav{ display:none !important; } body.navOpen .topbar nav, html.navOpen .topbar nav, .navOpen .topbar nav{ display:flex !important; position:fixed !important; top:74px !important; left:12px !important; right:12px !important; z-index:2147483647 !important; flex-direction:column !important; gap:8px !important; padding:14px !important; margin:0 !important; width:auto !important; max-height:calc(100vh - 92px) !important; overflow:auto !important; background:#fff !important; border:2px solid rgba(7,59,70,.14) !important; border-radius:18px !important; box-shadow:0 24px 70px rgba(0,30,42,.34) !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } body.navOpen .topbar nav a, html.navOpen .topbar nav a, .navOpen .topbar nav a{ display:block !important; width:100% !important; padding:13px 14px !important; border-radius:12px !important; background:#eefdff !important; border:1px solid rgba(7,59,70,.10) !important; color:#073b46 !important; text-decoration:none !important; font-weight:900 !important; text-align:left !important; } } @media(min-width:901px){ .topbar nav{ display:flex !important; } } #carvillMobileMenuOverlayV195, #carvillMobileMenuBackdropV195, #carvillBgMobileMenuV196, #carvillBgMobileBackdropV196, #carvillMobileMenuV221, #carvillMobileBackdropV221{ display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; max-height:0 !important; overflow:hidden !important; pointer-events:none !important; } /* CARVILL V270 CLEAN REAL HEADER MOBILE MENU END */ /* Carvill V285 hero mobile/tablet fix */ @import url('carvill_hero_responsive_v285.css?v=285'); /* Carvill V286 tablet hero card shrink */ /* CARVILL_V306_SUBPAGE_GALLERY_TABLET_3_COLUMNS_START */ /* V306: Tablet/iPad only subpage gallery alignment. Scope: About, Farm, Aquaculture, Processing shared gallery from includes/subpage_media_gallery.php. Products page is intentionally excluded. */ @media (min-width: 700px) and (max-width: 1180px) and (pointer: coarse), (min-width: 700px) and (max-width: 1180px) and (hover: none), (min-width: 768px) and (max-width: 1180px) { body:not(.products-page) .v51SubpageGallery .v51ProductLikeGrid, body:not(.products-page) .subpageMediaSection .subpageProductLikeGrid, body:not(.products-page) .subpageMediaSection .productPageGrid, body:not(.products-page) .grid.three.productPageGrid.subpageProductLikeGrid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(10px, 1.6vw, 18px) !important; width: min(1180px, calc(100vw - clamp(28px, 5vw, 64px))) !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; align-items: stretch !important; } body:not(.products-page) .v51SubpageGallery .v51MediaCard, body:not(.products-page) .subpageMediaSection .subpageProductLikeCard, body:not(.products-page) .subpageMediaSection .product-card-clickable { width: 100% !important; min-width: 0 !important; max-width: none !important; border-radius: clamp(16px, 2vw, 24px) !important; overflow: hidden !important; } body:not(.products-page) .v51SubpageGallery .v51MediaBox, body:not(.products-page) .subpageMediaSection .subpageProductLikeMedia { aspect-ratio: 1 / 1 !important; width: 100% !important; height: auto !important; min-height: 0 !important; } body:not(.products-page) .v51SubpageGallery .v51MediaText, body:not(.products-page) .subpageMediaSection .subpageProductLikePad, body:not(.products-page) .subpageMediaSection .pad { padding: clamp(12px, 1.7vw, 18px) !important; } body:not(.products-page) .v51SubpageGallery .v51MediaText h3, body:not(.products-page) .subpageMediaSection .subpageProductLikePad h3 { font-size: clamp(15px, 1.9vw, 21px) !important; line-height: 1.15 !important; margin-bottom: 8px !important; overflow-wrap: anywhere !important; } body:not(.products-page) .v51SubpageGallery .v51MediaText p, body:not(.products-page) .subpageMediaSection .subpageProductLikePad p { font-size: clamp(12px, 1.45vw, 15px) !important; line-height: 1.45 !important; overflow-wrap: anywhere !important; } } /* Keep true phones/mobile unchanged/readable. */ @media (max-width: 699px) { body:not(.products-page) .v51SubpageGallery .v51ProductLikeGrid, body:not(.products-page) .subpageMediaSection .subpageProductLikeGrid, body:not(.products-page) .subpageMediaSection .productPageGrid, body:not(.products-page) .grid.three.productPageGrid.subpageProductLikeGrid { grid-template-columns: 1fr !important; } } /* CARVILL_V306_SUBPAGE_GALLERY_TABLET_3_COLUMNS_END */ /* CARVILL_V308_PRODUCTS_TABLET_GRID_SAFETY_START */ /* V308 products grid safety check: Product page uses .grid.three.productPageGrid, not the V51 subpage helper. This keeps products 3 per row on tablet/iPad and scales them with minmax(0,1fr). */ @media (min-width:701px) and (max-width:1366px){ body .section > .grid.three.productPageGrid:not(.v51ProductLikeGrid):not(.subpageProductLikeGrid){ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:clamp(10px,1.6vw,24px)!important; width:min(1180px,calc(100vw - clamp(24px,4vw,58px)))!important; max-width:1180px!important; margin-left:auto!important; margin-right:auto!important; } body .section > .grid.three.productPageGrid:not(.v51ProductLikeGrid):not(.subpageProductLikeGrid) > .card{ width:100%!important; max-width:none!important; min-width:0!important; } body .section > .grid.three.productPageGrid:not(.v51ProductLikeGrid):not(.subpageProductLikeGrid) > .card img{ width:100%!important; height:clamp(150px,20vw,230px)!important; object-fit:cover!important; } } @media (max-width:700px){ body .section > .grid.three.productPageGrid:not(.v51ProductLikeGrid):not(.subpageProductLikeGrid){ grid-template-columns:1fr!important; width:min(430px,calc(100vw - 28px))!important; margin-left:auto!important; margin-right:auto!important; } } /* CARVILL_V308_PRODUCTS_TABLET_GRID_SAFETY_END */ /* CARVILL_V309_SUBPAGE_GALLERY_CENTER_ALIGN_GLOBAL_START */ /* V309 global safety net: center subpage galleries after tablet 3-column fix. */ body:not(.products-page) .v51SubpageGallery, body:not(.products-page) .subpageMediaSection.v51SubpageGallery, body:not(.products-page) .subpageMediaSection.productLikeSubpageSection{ width:100%!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; padding-left:clamp(16px,5vw,64px)!important; padding-right:clamp(16px,5vw,64px)!important; overflow:hidden!important; box-sizing:border-box!important; } body:not(.products-page) .v51SubpageGallery *, body:not(.products-page) .subpageMediaSection.v51SubpageGallery *{ box-sizing:border-box!important; } body:not(.products-page) .v51SubpageGallery .v51ProductLikeGrid, body:not(.products-page) .v51SubpageGallery .subpageProductLikeGrid.grid.three, body:not(.products-page) .v51SubpageGallery .grid.three.subpageProductLikeGrid{ width:100%!important; max-width:1180px!important; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; position:relative!important; left:auto!important; right:auto!important; transform:none!important; } @media (min-width:701px) and (max-width:1366px){ body:not(.products-page) .v51SubpageGallery, body:not(.products-page) .subpageMediaSection.v51SubpageGallery, body:not(.products-page) .subpageMediaSection.productLikeSubpageSection{ padding-left:clamp(14px,3.6vw,46px)!important; padding-right:clamp(14px,3.6vw,46px)!important; } body:not(.products-page) .v51SubpageGallery .v51ProductLikeGrid, body:not(.products-page) .v51SubpageGallery .subpageProductLikeGrid.grid.three, body:not(.products-page) .v51SubpageGallery .grid.three.subpageProductLikeGrid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:clamp(10px,1.45vw,18px)!important; width:100%!important; max-width:1120px!important; margin-left:auto!important; margin-right:auto!important; } } @media (max-width:700px){ body:not(.products-page) .v51SubpageGallery, body:not(.products-page) .subpageMediaSection.v51SubpageGallery, body:not(.products-page) .subpageMediaSection.productLikeSubpageSection{ padding-left:14px!important; padding-right:14px!important; } } /* CARVILL_V309_SUBPAGE_GALLERY_CENTER_ALIGN_GLOBAL_END */