/* 365 Industrial Solutions — City Pages (v2) Lighter text + softer background scrim for photo heroes */ /* ---------- Theme ---------- */ :root{ --brand:#0a3b5c; --brand-2:#0e6ba8; --text:#102027; --text-on-hero:#f9fcff; /* slightly brighter text */ /* Cards / Glass */ --card: rgba(255,255,255,.90); --glass: rgba(12,24,32,.24); /* lighter glass panel */ --shadow: 0 10px 25px rgba(0,0,0,.18); /* Softer hero scrim */ --scrim-rgb: 8,30,44; --scrim-1:.65; /* top */ --scrim-2:.30; /* mid */ --scrim-3:.72; /* bottom */ /* Layout */ --container-w: 1200px; } /* ---------- Base / Reset ---------- */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif; color:var(--text); line-height:1.6; background:#0b1a24; overflow-x:hidden; } /* ---------- Full-page background (softer overlay + lighter vignette) ---------- Per page set: :root { --hero-image: url('images/-background.jpg'); } */ body::before{ content:""; position:fixed; inset:0; background-image: linear-gradient( to bottom, rgba(var(--scrim-rgb), var(--scrim-1)) 0%, rgba(var(--scrim-rgb), var(--scrim-2)) 40%, rgba(var(--scrim-rgb), var(--scrim-3)) 100% ), radial-gradient(80rem 40rem at 50% 45%, rgba(0,0,0,.30), rgba(0,0,0,.55)), var(--hero-image, radial-gradient(circle at 30% 30%, #1a3242, #0b1a24)); background-size:cover,cover,cover; background-position:center,center,center; background-attachment:fixed,fixed,fixed; background-repeat:no-repeat; background-blend-mode:normal,multiply,normal; filter:saturate(1.03); z-index:-1; } /* If a specific photo needs more contrast, add class="contrast-hard" to */ .contrast-hard{ --scrim-1:.85; --scrim-2:.52; --scrim-3:.92; } /* ---------- Layout ---------- */ .container{ width:min(var(--container-w),92vw); margin-inline:auto; padding-inline: clamp(.75rem,1.5vw,1rem); } /* ---------- Header (slightly lighter) ---------- */ .site-header{ position:sticky; top:0; z-index:10; background: rgba(10,20,30,.32); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.16); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; } .brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:#eef7ff; } .brand img{ height:44px; width:auto; display:block; } .brand .name{ font-weight:800; letter-spacing:.4px; } nav ul{ list-style:none; display:flex; gap:1.1rem; padding:0; margin:0; } nav a{ color:#eef7ff; text-decoration:none; font-weight:600; } nav a:hover{ text-decoration:underline; } /* ---------- Hero ---------- */ .hero{ min-height:72vh; display:grid; place-items:center; text-align:center; color:var(--text-on-hero); padding: clamp(2rem,6vw,4rem) 0; } .hero .title{ font-size: clamp(2rem,4.8vw,3.6rem); line-height:1.08; margin:0 0 .75rem 0; /* lighter shadows for a cleaner look */ text-shadow: 0 3px 14px rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.22); } .hero .subtitle{ opacity:.98; font-size: clamp(1rem,2.1vw,1.25rem); text-shadow: 0 2px 10px rgba(0,0,0,.30); } /* Optional glass panel for long hero copy */ .hero-panel{ display:inline-block; max-width:900px; margin-inline:auto; padding: clamp(1rem,3vw,1.6rem) clamp(1rem,3vw,2rem); border-radius:18px; background: var(--glass); backdrop-filter: blur(8px); box-shadow: 0 10px 24px rgba(0,0,0,.20); } .badge{ display:inline-block; margin-bottom:.6rem; padding:.4rem .7rem; border-radius:999px; background: rgba(255,255,255,.12); color:#eef7ff; font-weight:700; font-size:.85rem; border:1px solid rgba(255,255,255,.20); } /* ---------- Buttons ---------- */ .cta{ display:inline-block; margin-top:1.1rem; padding:.9rem 1.15rem; border-radius:12px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); color:#fff; text-decoration:none; font-weight:800; box-shadow: var(--shadow); } .cta:hover{ filter:brightness(1.05); } /* ---------- Sections / Cards / Grid ---------- */ .section{ margin: clamp(1.1rem,3.2vw,2rem) 0; } .card{ background: var(--card); padding: clamp(1rem,2.3vw,1.5rem); border-radius:18px; box-shadow: var(--shadow); backdrop-filter: blur(2px); } h1,h2,h3{ color:var(--brand); margin:0 0 .4rem 0; } .list{ margin:.5rem 0 0 0; padding-left:1rem; } .list li{ margin:.25rem 0; } .grid{ display:grid; gap: clamp(1rem,3vw,1.5rem); grid-template-columns: repeat(12,1fr); } .col-4{ grid-column: span 4; } .col-6{ grid-column: span 6; } .col-8{ grid-column: span 8; } .col-12{ grid-column: 1 / -1; } /* ---------- Footer ---------- */ .site-footer{ color:#e7f5ff; text-align:center; padding:2rem 0 3rem 0; } /* ---------- Responsive ---------- */ @media (max-width:900px){ .grid{ grid-template-columns:1fr; } .col-4,.col-6,.col-8,.col-12{ grid-column: 1 / -1; } } /* ---------- Reduced Motion ---------- */ @media (prefers-reduced-motion: reduce){ body::before{ background-attachment: scroll,scroll,scroll; } .site-header{ backdrop-filter:none; } } /* ---- Lighter, less-blue text overrides ---- */ /* Neutral heading color instead of brand blue */ :root{ --heading: #1f2b34; /* dark slate for headings on light cards */ --link: #0e6ba8; /* keep brand for links if you want */ --link-hover: #084d7b; } /* Use neutral heading color globally (cards/sections) */ h1, h2, h3{ color: var(--heading); } /* Keep hero text bright + neutral */ .hero .title, .hero .subtitle{ color: #ffffff; /* pure white over photo */ } /* If any headings appear inside the hero, force them white too */ .hero h1, .hero h2, .hero h3{ color: #ffffff; } /* Body text stays neutral (not blue) */ body{ color: #122029; /* slightly lighter than before */ } /* Links: tone down saturation a bit (optional) */ a{ color: var(--link); } a:hover{ color: var(--link-hover); } /* If you want headings even lighter (near-black), uncomment: :root{ --heading: #0f1720; } */ /* Large hero logo under the main title */ .hero-logo{ display:block; margin: .5rem auto .4rem auto; width: clamp(200px, 28vw, 300px); height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); } /* Optional: add class="frame" to for a white pill behind the logo on busy photos */ .hero-logo.frame{ background: rgba(255,255,255,.92); border-radius: 14px; padding: .5rem .9rem; box-shadow: 0 8px 22px rgba(0,0,0,.22); }