/* ========================================================================== PPDCL Biogas Plant — Gujjar Colony, Lahore Single stylesheet per project tech-stack rules (see CLAUDE.md) ========================================================================== */ /* ---- Design Tokens ---- */ :root { --color-primary: #005C4E; /* teal-green */ --color-primary-dark: #00473c; --color-accent: #2E7D32; /* biogas / nature green */ /* Deep Pakistan-flag green. Replaces the previous navy (#1a3c6e) as the site's dark anchor tone — footer, counter strip, CTA gradients, a11y button. Kept clearly darker and cooler than --color-primary so the green-on-green gradients still read as two distinct tones rather than a flat block. */ --color-forest: #0B3D2E; --color-forest-deep: #072A20; /* darkest step, for gradient depth */ --color-gold: #F5A623; /* accent for badges/highlights */ --color-white: #FFFFFF; /* Pastel-green page canvas — the site reads as a green initiative even in the empty space between bands. Cards, the header and the nav stay --color-white so they still lift off the page. --color-light is the alternating band, one step deeper than the canvas so `.section--light` remains visibly distinct from an unclassed section. */ --color-page: #EDF6EE; --color-light: #DCEDDF; --color-text: #1c2b28; --color-text-muted: #57645f; --color-border: #e1e6e4; --color-placeholder-bg: #fff8ec; --color-placeholder-border: #F5A623; --font-en: 'Inter', Arial, sans-serif; --font-ur: 'Noto Nastaliq Urdu', serif; /* Layout scale. Kept in rem so page geometry scales with the root font-size — the single lever the large-screen breakpoints pull (see "Very Large Screens" at the foot of this file). At the 16px base these resolve to exactly the original 1180px / 78px, so nothing below 1600px viewport width changes. */ --container-width: 73.75rem; /* 1180px @16px */ --radius: 0.625rem; /* 10px @16px */ --shadow: 0 4px 18px rgba(0, 40, 30, 0.08); --shadow-lg: 0 12px 40px rgba(0, 40, 30, 0.16); --header-height: 4.875rem; /* 78px @16px */ } /* ---- Reset & Base ---- */ * { box-sizing: border-box; } /* Root font-size is the scaling lever for the whole site (see "Very Large Screens" at the foot of this file). Deliberately a plain length, never calc(var(...)): when 's own font-size depends on a custom property, Chromium keeps resolving it against the pre-stylesheet 16px default once the accessibility widget sets its multiplier inline, and no amount of forced recalculation clears it. The a11y multiplier is applied in applyFontStep() in js/main.js instead. */ html { scroll-behavior: smooth; font-size: 16px; } body { margin: 0; font-family: var(--font-en); color: var(--color-text); line-height: 1.6; background: var(--color-page); -webkit-font-smoothing: antialiased; } /* Faint fixed Government of Punjab seal watermark, visible through the site's light backgrounds, fading out on colored/dark bands and never behind opaque cards — content and readability are unaffected. */ .page-watermark { position: fixed; inset: 0; background-image: url('../assets/images/govt-seal.png'); background-repeat: no-repeat; background-position: center; background-size: min(80vw, 62.5rem); opacity: 0.05; pointer-events: none; z-index: 0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; margin: 0 0 0.6em; color: var(--color-primary); } h1 { font-size: clamp(2rem, 5vw, 3.1rem); } h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); } h3 { font-size: 1.3rem; } p { margin: 0 0 1em; color: var(--color-text-muted); } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 1.25rem; } .section { padding: 4rem 0; } .section--tight { padding: 2.75rem 0; } /* Kept semi-transparent so the fixed seal watermark still reads through it. */ .section--light { background: rgba(220, 237, 223, 0.94); } .section--forest { background: linear-gradient(120deg, var(--color-forest) 0%, var(--color-primary) 100%); color: var(--color-white); } .section--forest h2 { color: var(--color-white); } /* Trailing flow content carries its own bottom margin, which stacks on top of the section padding and makes otherwise-identical sections look unevenly spaced. Reset it so every `.section` ends on the same 4rem gap. */ .section > .container > p:last-child, .section > .container > ul:last-child, .section > .container > ol:last-child { margin-bottom: 0; } .section-heading { text-align: center; max-width: 45rem; margin: 0 auto 2.5rem; } .section-heading p { margin: 0; } .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.625rem; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; border-radius: 999px; font-weight: 700; font-size: 0.98rem; border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--color-gold); color: #1a1200; } .btn--primary:hover { box-shadow: 0 10px 24px rgba(245, 166, 35, 0.4); } .btn--outline { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.7); } .btn--outline:hover { background: rgba(255,255,255,0.12); } .btn--solid { background: var(--color-primary); color: var(--color-white); } .btn--solid:hover { box-shadow: 0 10px 24px rgba(0, 92, 78, 0.35); } .btn--block { width: 100%; justify-content: center; } /* ---- Placeholder marker (Developer Rule #4) ---- */ .placeholder { display: inline-block; padding: 0.125rem 0.625rem; background: var(--color-placeholder-bg); border: 1px dashed var(--color-placeholder-border); border-radius: 0.375rem; color: #8a6100; font-size: 0.85em; font-style: italic; } /* ========================================================================== Header / Navigation ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 900; background: var(--color-white); box-shadow: 0 2px 10px rgba(0,0,0,0.06); } .header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: var(--header-height); gap: 1.25rem; /* Full-bleed: the brand sits against the page edge, not against the centred content column — the client asked for the logo aligned to the page. The padding scales with the viewport so the lockup keeps a sensible margin on a phone and on a 55" screen alike. */ max-width: 100%; margin-inline: 0; padding: 0 clamp(1rem, 2.5vw, 2.5rem); } .brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .brand-logo { height: 3rem; width: auto; } .main-nav { justify-self: center; } .main-nav ul { display: flex; gap: 0.25rem; align-items: center; } /* .dropdown-toggle is styled identically to a nav link. The Projects menu has no landing page of its own — its three project pages are the only destinations — so its parent is a