/* ============================================================================ HASTHIMUNI SOLUTIONS — "Daylight Engineering" One shared stylesheet for every page. CONTENTS 01. Tokens 02. Reset & base 03. Typography 04. Layout utilities 05. Buttons & chips 06. Media frames & placeholders 07. Motion (reveals, curtain, reduced-motion) 08. Header / navigation 09. Hero & page headers 10. Stat band 11. Services 12. How solar works 13. Steps (01 / 02 / 03) 14. System cards & editorial system sections 15. Net metering 16. Components strip 17. Installs gallery 18. Mission / trust 19. FAQ 20. Contact 21. CTA band 22. Footer 23. Floating WhatsApp button 24. Responsive ========================================================================== */ /* 01. TOKENS ============================================================== */ :root{ /* Palette */ --paper: #FBF8F3; --paper-deep: #F2ECE1; --ink: #1A1D1B; --ink-soft: #55605A; --slate: #1E2A32; --solar: #E8A317; --solar-deep: #C97E12; --leaf: #2F7A4D; --wa: #1DA851; /* WhatsApp green, deepened — action buttons only */ --wa-deep: #16803E; /* WhatsApp green, hover */ --sand: #DAC9A6; --line: rgba(26,29,27,.14); --line-light: rgba(251,248,243,.16); /* Type */ --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Rhythm */ --section: clamp(72px, 10vw, 140px); --gutter: clamp(20px, 5vw, 48px); --maxw: 1240px; --nav-h: 76px; /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); /* Nav colour, flipped by JS on scroll */ --nav-fg: var(--paper); } /* 02. RESET & BASE ======================================================== */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; /* `clip` rather than `hidden`: `hidden` would force overflow-y to `auto`, turning into a scroll container and breaking position:sticky. */ overflow-x:clip; } img,svg{ max-width:100%; display:block; } a{ color:inherit; } button{ font:inherit; color:inherit; } /* Visible keyboard focus everywhere */ :focus-visible{ outline:2px solid var(--solar); outline-offset:3px; } .on-dark :focus-visible, .band--slate :focus-visible{ outline-color:var(--solar); } /* Skip link */ .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--paper); padding:12px 20px; font-weight:600; } .skip:focus{ left:12px; top:12px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* 03. TYPOGRAPHY ========================================================== */ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-.02em; line-height:1.08; } .h-hero{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.75rem, 7vw, 5.5rem); line-height:1.02; letter-spacing:-.035em; margin:0; } .h1{ font-size:clamp(2.1rem, 5vw, 3.5rem); letter-spacing:-.03em; line-height:1.05; } .h2{ font-size:clamp(1.85rem, 4vw, 2.9rem); letter-spacing:-.025em; line-height:1.08; } .h3{ font-size:clamp(1.2rem, 2.2vw, 1.55rem); letter-spacing:-.015em; line-height:1.25; } .h4{ font-size:1.05rem; letter-spacing:-.005em; } p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; } .lead{ font-size:clamp(1.05rem, 1.6vw, 1.24rem); line-height:1.62; color:var(--ink-soft); } .on-dark .lead{ color:rgba(251,248,243,.74); } .muted{ color:var(--ink-soft); } .on-dark .muted{ color:rgba(251,248,243,.66); } /* Small-caps eyebrow label */ .eyebrow{ display:block; font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--solar-deep); margin:0 0 18px; } .eyebrow--leaf{ color:var(--leaf); } .on-dark .eyebrow{ color:var(--solar); } .accent{ color:var(--solar); } .accent-leaf{ color:var(--leaf); } /* Reading column */ .measure{ max-width:62ch; } /* 04. LAYOUT UTILITIES ==================================================== */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .wrap--narrow{ max-width:880px; } .section{ padding-block:var(--section); } .section--tight{ padding-block:calc(var(--section) * .62); } .band--paper{ background:var(--paper); } .band--deep { background:var(--paper-deep); } .band--slate{ background:var(--slate); color:var(--paper); } /* Anything inside a dark band */ .on-dark{ color:var(--paper); } .rule{ height:1px; background:var(--line); border:0; margin:0; } .on-dark .rule{ background:var(--line-light); } /* Section header block */ .sechead{ max-width:64ch; margin-bottom:clamp(40px, 5vw, 68px); } .sechead--wide{ max-width:none; } .sechead p{ margin-top:20px; } /* Two-column editorial split */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px, 6vw, 88px); align-items:center; } .split--flip > *:first-child{ order:2; } .split--text-narrow .split__text{ max-width:52ch; } /* Generic responsive grids */ .grid{ display:grid; gap:clamp(20px, 2.6vw, 34px); } .grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); } .grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); } .stack-sm > * + *{ margin-top:12px; } .stack > * + *{ margin-top:22px; } .stack-lg > * + *{ margin-top:38px; } .btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; } /* 05. BUTTONS & CHIPS ===================================================== */ .btn{ --btn-bg:var(--solar); --btn-fg:var(--ink); --btn-bd:var(--solar); display:inline-flex; align-items:center; gap:10px; padding:15px 26px; background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd); border-radius:4px; font-family:var(--font-body); font-size:.94rem; font-weight:600; letter-spacing:.01em; text-decoration:none; cursor:pointer; transition:background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); } .btn:hover{ --btn-bg:var(--solar-deep); --btn-bd:var(--solar-deep); color:var(--paper); } /* Any solid button that opens WhatsApp turns WhatsApp green. Matching on the href means this covers the buttons generated from data.js (including catalogue-item links) without anyone having to add a class. Ghost variants are excluded so secondary buttons stay secondary. Ink text rather than white: the same treatment as the amber button, and it clears contrast requirements comfortably where white would not. */ .btn[href*="wa.me"]:not(.btn--ghost):not(.btn--ghost-light){ --btn-bg:var(--wa); --btn-bd:var(--wa); --btn-fg:var(--ink); } .btn[href*="wa.me"]:not(.btn--ghost):not(.btn--ghost-light):hover{ --btn-bg:var(--wa-deep); --btn-bd:var(--wa-deep); color:var(--paper); /* the deeper hover green is too dark for ink text */ } /* Ghost on light backgrounds */ .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--ink); } .btn--ghost:hover{ --btn-bg:var(--ink); --btn-bd:var(--ink); color:var(--paper); } /* Ghost on dark backgrounds */ .btn--ghost-light{ --btn-bg:transparent; --btn-fg:var(--paper); --btn-bd:rgba(251,248,243,.45); } .btn--ghost-light:hover{ --btn-bg:var(--paper); --btn-bd:var(--paper); color:var(--ink); } .btn--sm{ padding:11px 18px; font-size:.86rem; } .btn--block{ width:100%; justify-content:center; } .btn svg{ flex:none; } /* Text link with underline slide */ .tlink{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.94rem; text-decoration:none; color:var(--ink); padding-bottom:3px; border-bottom:1px solid var(--line); transition:border-color .22s var(--ease), color .22s var(--ease), gap .22s var(--ease); } .tlink:hover{ border-color:var(--solar); color:var(--solar-deep); gap:14px; } .on-dark .tlink{ color:var(--paper); border-color:var(--line-light); } .on-dark .tlink:hover{ color:var(--solar); border-color:var(--solar); } /* Spec chips */ .chips{ display:flex; flex-wrap:wrap; gap:8px; } .chip{ display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:3px; background:var(--paper); font-family:var(--font-display); font-size:.78rem; font-weight:500; letter-spacing:.02em; color:var(--ink); white-space:nowrap; } .chip--solar{ border-color:var(--solar); color:var(--solar-deep); } .chip--leaf { border-color:var(--leaf); color:var(--leaf); } .on-dark .chip{ background:transparent; border-color:var(--line-light); color:var(--paper); } /* Credential badges */ .badges{ display:flex; flex-wrap:wrap; gap:10px 26px; } .badge{ display:inline-flex; align-items:center; gap:10px; font-size:.84rem; font-weight:500; letter-spacing:.01em; color:var(--ink-soft); } .badge::before{ content:''; width:7px; height:7px; background:var(--solar); flex:none; } .on-dark .badge{ color:rgba(251,248,243,.78); } /* 06. MEDIA FRAMES & PLACEHOLDERS ========================================= */ .frame{ position:relative; overflow:hidden; background:var(--slate); border-radius:2px; } .frame--square{ aspect-ratio:1/1; } .frame--wide { aspect-ratio:16/10; } .frame--tall { aspect-ratio:4/5; } .frame--hero { aspect-ratio:4/5; } .frame__img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } /* Broken / not-yet-uploaded photo: JS hides the img, placeholder shows through */ .frame__img.is-missing{ display:none; } /* Flat duotone placeholder — hard-stop stripes, never a gradient blend */ .ph{ position:absolute; inset:0; display:grid; place-items:center; padding:18px; text-align:center; background-color:var(--slate); background-image:repeating-linear-gradient( 135deg, rgba(218,201,166,.09) 0 14px, rgba(218,201,166,0) 14px 28px); } .ph--sand { background-color:var(--sand); } .ph--sand.ph, .ph--sand{ background-image:repeating-linear-gradient(135deg, rgba(30,42,50,.10) 0 14px, rgba(30,42,50,0) 14px 28px); } .ph--solar{ background-color:var(--solar-deep); } .ph--solar{ background-image:repeating-linear-gradient(135deg, rgba(26,29,27,.12) 0 14px, rgba(26,29,27,0) 14px 28px); } .ph__label{ font-family:var(--font-body); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,248,243,.62); } .ph--sand .ph__label{ color:rgba(26,29,27,.55); } .ph--solar .ph__label{ color:rgba(26,29,27,.62); } /* Image bleeding past the container edge */ .bleed-right{ margin-right:calc(var(--gutter) * -1); } /* 07. MOTION ============================================================== */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d, 0ms); } .reveal.is-in{ opacity:1; transform:none; } /* Engineered "curtain" wipe for images */ .curtain{ clip-path:inset(0 100% 0 0); transition:clip-path .85s var(--ease); transition-delay:var(--d, 0ms); } .curtain.is-in{ clip-path:inset(0 0 0 0); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{ opacity:1; transform:none; } .curtain{ clip-path:none; } } /* 08. HEADER / NAVIGATION ================================================= */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); display:flex; align-items:center; color:var(--nav-fg); background:transparent; border-bottom:1px solid transparent; transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .nav.is-solid{ background:var(--paper); border-bottom-color:var(--line); --nav-fg:var(--ink); } .nav__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; } /* Logo */ .logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--nav-fg); } /* The brand mark is a near-black PNG on a transparent background, so it reads correctly on paper but would vanish on the dark hero. While the nav is transparent over the hero we invert it to near-white; once the nav turns solid the mark returns to its true colour. */ .logo__mark{ width:30px; height:30px; flex:none; object-fit:contain; transition:filter .3s var(--ease); } .nav .logo__mark{ filter:invert(1); } .nav.is-solid .logo__mark{ filter:none; } .navmenu .logo__mark{ filter:invert(1); } .logo__text{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:-.015em; line-height:1; } .logo__text span{ display:block; font-family:var(--font-body); font-size:.58rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; opacity:.62; margin-top:4px; } /* Desktop links */ .nav__links{ display:flex; align-items:center; gap:clamp(18px, 2.4vw, 34px); list-style:none; margin:0; padding:0; } .nav__links a{ text-decoration:none; font-size:.92rem; font-weight:500; letter-spacing:.005em; padding:6px 0; border-bottom:1px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease); } .nav__links a:hover{ border-bottom-color:currentColor; } .nav__links a[aria-current="page"]{ border-bottom-color:var(--solar); color:var(--solar); } .nav.is-solid .nav__links a[aria-current="page"]{ color:var(--solar-deep); border-bottom-color:var(--solar-deep); } .nav__right{ display:flex; align-items:center; gap:16px; } .nav .btn{ padding:11px 19px; font-size:.87rem; } /* Hamburger */ .burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer; color:var(--nav-fg); } .burger span{ position:relative; display:block; width:22px; height:1.5px; background:currentColor; transition:background-color .2s var(--ease); } .burger span::before, .burger span::after{ content:''; position:absolute; left:0; width:22px; height:1.5px; background:currentColor; transition:transform .3s var(--ease); } .burger span::before{ top:-7px; } .burger span::after { top:7px; } .burger[aria-expanded="true"] span{ background:transparent; } .burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span::after { transform:translateY(-7px) rotate(-45deg); } /* Full-screen mobile menu */ .navmenu{ position:fixed; inset:0; z-index:99; background:var(--slate); color:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:var(--nav-h) var(--gutter) 40px; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s; } .navmenu.is-open{ opacity:1; visibility:visible; transform:none; } .navmenu ul{ list-style:none; margin:0 0 38px; padding:0; } .navmenu li + li{ margin-top:6px; } .navmenu a{ display:block; font-family:var(--font-display); font-size:clamp(2rem, 9vw, 3rem); font-weight:600; letter-spacing:-.03em; text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line-light); } .navmenu a[aria-current="page"]{ color:var(--solar); } body.menu-open{ overflow:hidden; } /* 09. HERO & PAGE HEADERS ================================================= */ .hero{ position:relative; background:var(--slate); color:var(--paper); padding-top:calc(var(--nav-h) + clamp(56px, 8vw, 104px)); padding-bottom:clamp(64px, 8vw, 112px); overflow:hidden; } .hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px, 5vw, 72px); align-items:center; } .hero__kicker{ display:inline-flex; align-items:center; gap:12px; font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--solar); margin-bottom:26px; } .hero__kicker::before{ content:''; width:34px; height:1px; background:var(--solar); } .hero p.lead{ margin-top:26px; max-width:54ch; } .hero .btn-row{ margin-top:38px; } .hero__badges{ margin-top:44px; padding-top:26px; border-top:1px solid var(--line-light); } /* Compact dark header for inner pages */ .pagehead{ background:var(--slate); color:var(--paper); padding-top:calc(var(--nav-h) + clamp(48px, 6vw, 82px)); padding-bottom:clamp(48px, 6vw, 82px); } .pagehead p.lead{ margin-top:22px; max-width:58ch; } /* 10. STAT BAND =========================================================== */ .statband{ background:var(--slate); color:var(--paper); padding-block:clamp(48px, 6vw, 78px); border-top:1px solid var(--line-light); } .stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(24px, 3vw, 44px); } .stat__num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem, 4.4vw, 3.6rem); line-height:1; letter-spacing:-.04em; color:var(--solar); display:block; } .stat__label{ display:block; margin-top:14px; font-size:.86rem; line-height:1.45; color:rgba(251,248,243,.72); } .stat--text .stat__num{ font-size:clamp(1.3rem, 2vw, 1.7rem); letter-spacing:-.02em; } /* 11. SERVICES ============================================================ */ .service{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px, 3vw, 44px); padding-block:clamp(30px, 3.4vw, 46px); border-top:1px solid var(--line); align-items:start; } .service:last-child{ border-bottom:1px solid var(--line); } .service__idx{ font-family:var(--font-display); font-weight:500; font-size:.82rem; letter-spacing:.1em; color:var(--solar-deep); padding-top:9px; min-width:34px; } .service__body{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(14px, 3vw, 48px); align-items:baseline; } .service__body p{ color:var(--ink-soft); } /* 12. HOW SOLAR WORKS ===================================================== */ .flow{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(14px, 1.6vw, 22px); counter-reset:flow; } .flow__item{ position:relative; padding:26px 20px 28px; background:var(--paper); border:1px solid var(--line); border-radius:3px; } .flow__item::after{ content:''; position:absolute; top:50%; right:calc(clamp(14px, 1.6vw, 22px) * -1); width:clamp(14px, 1.6vw, 22px); height:1px; background:var(--sand); } .flow__item:last-child::after{ display:none; } .flow__icon{ width:32px; height:32px; color:var(--solar-deep); margin-bottom:18px; } .flow__step{ font-family:var(--font-display); font-size:.74rem; font-weight:500; letter-spacing:.14em; color:var(--solar-deep); display:block; margin-bottom:8px; } .flow__item h3{ font-size:1rem; margin-bottom:8px; } .flow__item p{ font-size:.88rem; line-height:1.55; color:var(--ink-soft); margin:0; } /* 13. STEPS (01 / 02 / 03) ================================================ */ .steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(28px, 4vw, 60px); } .step{ position:relative; padding-top:clamp(48px, 5vw, 70px); } .step__n{ position:absolute; top:0; left:-6px; font-family:var(--font-display); font-weight:700; font-size:clamp(4.5rem, 8vw, 7rem); line-height:.8; letter-spacing:-.05em; color:var(--sand); z-index:0; pointer-events:none; } .step__body{ position:relative; z-index:1; } .step h3{ margin-bottom:12px; } .step p{ color:var(--ink-soft); margin:0; } /* 14. SYSTEM CARDS & EDITORIAL SYSTEM SECTIONS ============================ */ .card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:3px; overflow:hidden; transition:border-color .3s var(--ease); } .card:hover{ border-color:var(--ink); } .card:hover .frame__img{ transform:scale(1.04); } .card__body{ padding:clamp(22px, 2.4vw, 30px); display:flex; flex-direction:column; gap:16px; flex:1; } .card__body h3{ margin:0; } .card__meta{ display:flex; align-items:baseline; gap:10px; padding-top:16px; border-top:1px solid var(--line); margin-top:auto; } .card__gen{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; color:var(--ink); line-height:1; } .card__genunit{ font-size:.8rem; color:var(--ink-soft); } .card p{ color:var(--ink-soft); font-size:.94rem; margin:0; } .card .btn{ margin-top:4px; } /* Full editorial section per system (products page) */ .system{ padding-block:clamp(54px, 7vw, 96px); border-top:1px solid var(--line); } .system:first-of-type{ border-top:0; padding-top:0; } .system__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px, 5vw, 78px); align-items:start; } .system--flip .system__media{ order:2; } .system__media{ position:sticky; top:calc(var(--nav-h) + 28px); } .system h2{ margin-bottom:16px; } .system__tagline{ font-size:1.08rem; color:var(--ink-soft); margin-bottom:26px; } /* Spec table */ .spectable{ width:100%; border-collapse:collapse; margin-block:30px; } .spectable th, .spectable td{ text-align:left; padding:13px 0; border-bottom:1px solid var(--line); vertical-align:top; } .spectable th{ font-family:var(--font-body); font-weight:500; font-size:.86rem; letter-spacing:.02em; color:var(--ink-soft); width:42%; padding-right:16px; } .spectable td{ font-family:var(--font-display); font-weight:500; font-size:.96rem; color:var(--ink); } /* Included list */ .ticklist{ list-style:none; margin:0; padding:0; } .ticklist li{ position:relative; padding-left:28px; margin-bottom:11px; font-size:.95rem; line-height:1.55; color:var(--ink-soft); } .ticklist li::before{ content:''; position:absolute; left:0; top:.62em; width:11px; height:1px; background:var(--solar); } .ticklist--leaf li::before{ background:var(--leaf); } .subhead{ font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin:34px 0 16px; } /* 15. NET METERING ======================================================== */ .scheme{ padding:clamp(26px, 2.8vw, 36px); background:var(--paper); border:1px solid var(--line); border-top:2px solid var(--leaf); border-radius:3px; display:flex; flex-direction:column; gap:14px; } .scheme h3{ margin:0; } .scheme p{ margin:0; font-size:.94rem; color:var(--ink-soft); } .scheme__tag{ font-family:var(--font-display); font-size:.74rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--leaf); } /* 16. COMPONENTS STRIP ==================================================== */ .components{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; } .component{ background:var(--paper); padding:clamp(20px, 2.2vw, 28px); } .component__label{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; } .component__value{ font-family:var(--font-display); font-size:1rem; font-weight:500; letter-spacing:-.01em; line-height:1.35; } .component__note{ display:block; font-family:var(--font-body); font-size:.82rem; color:var(--ink-soft); margin-top:6px; } /* 17. INSTALLS GALLERY ==================================================== */ .installs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px, 1.6vw, 22px); } .install{ position:relative; overflow:hidden; border-radius:2px; } .install .frame{ border-radius:2px; } .install__scrim{ position:absolute; inset:0; z-index:2; background:var(--slate); opacity:0; transition:opacity .4s var(--ease); pointer-events:none; } .install:hover .install__scrim{ opacity:.55; } .install:hover .frame__img{ transform:scale(1.05); } .install__meta{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:18px 20px; color:var(--paper); display:flex; flex-direction:column; gap:4px; pointer-events:none; } .install__meta::before{ content:''; position:absolute; inset:auto 0 0 0; height:120%; background:linear-gradient(to top, rgba(30,42,50,.86), rgba(30,42,50,0)); z-index:-1; } .install__line{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:-.01em; } .install__dot{ width:3px; height:3px; background:var(--solar); flex:none; } .install__size{ color:var(--solar); } .install__caption{ font-size:.82rem; color:rgba(251,248,243,.82); opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease); } .install:hover .install__caption{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .install__caption{ opacity:1; transform:none; } } /* 18. MISSION / TRUST ===================================================== */ .pullquote{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem, 2.6vw, 2.05rem); line-height:1.32; letter-spacing:-.022em; margin:0; color:var(--ink); } .pullquote--dark{ color:var(--paper); } .trustlist{ list-style:none; margin:0; padding:0; } .trustlist li{ padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; font-size:.96rem; } .trustlist li:first-child{ border-top:1px solid var(--line); } .trustlist strong{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; } .trustlist svg{ width:18px; height:18px; color:var(--solar-deep); margin-top:4px; flex:none; } .on-dark .trustlist li{ border-color:var(--line-light); } .on-dark .trustlist svg{ color:var(--solar); } /* 19. FAQ ================================================================= */ .faq{ border-top:1px solid var(--line); } .faq__item{ border-bottom:1px solid var(--line); } .faq__q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:26px 0; background:none; border:0; text-align:left; cursor:pointer; font-family:var(--font-display); font-weight:500; font-size:clamp(1.02rem, 1.7vw, 1.2rem); letter-spacing:-.015em; line-height:1.35; color:var(--ink); transition:color .2s var(--ease); } .faq__q:hover{ color:var(--solar-deep); } .faq__icon{ position:relative; flex:none; width:18px; height:18px; margin-top:4px; } .faq__icon::before, .faq__icon::after{ content:''; position:absolute; left:50%; top:50%; background:var(--solar-deep); transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .3s var(--ease); } .faq__icon::before{ width:16px; height:1.5px; } .faq__icon::after { width:1.5px; height:16px; } .faq__q[aria-expanded="true"] .faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; } .faq__a{ overflow:hidden; height:0; transition:height .38s var(--ease); } .faq__a > div{ padding:0 0 28px; max-width:68ch; color:var(--ink-soft); } /* 20. CONTACT ============================================================= */ .contactcard{ padding:clamp(26px, 3vw, 38px); border:1px solid var(--line); border-radius:3px; background:var(--paper); display:flex; flex-direction:column; gap:14px; height:100%; } .contactcard__label{ font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); } .contactcard__value{ font-family:var(--font-display); font-size:clamp(1.05rem, 1.8vw, 1.3rem); font-weight:600; letter-spacing:-.02em; line-height:1.3; text-decoration:none; color:var(--ink); word-break:break-word; } a.contactcard__value:hover{ color:var(--solar-deep); } .contactcard .btn{ margin-top:auto; } .mapholder{ aspect-ratio:16/9; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--paper-deep); } .mapholder iframe{ width:100%; height:100%; border:0; display:block; } /* 21. CTA BAND ============================================================ */ .ctaband{ background:var(--slate); color:var(--paper); padding-block:clamp(64px, 8vw, 110px); } .ctaband .h2{ max-width:20ch; } .ctaband__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px, 5vw, 70px); align-items:end; } /* 22. FOOTER ============================================================== */ .footer{ background:var(--paper-deep); border-top:1px solid var(--line); padding-top:clamp(56px, 6vw, 84px); padding-bottom:34px; } .footer__grid{ display:grid; grid-template-columns:1.4fr .8fr 1.3fr; gap:clamp(32px, 5vw, 64px); padding-bottom:clamp(40px, 5vw, 60px); } .footer__brand .logo{ color:var(--ink); margin-bottom:20px; } .footer__tag{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:-.02em; margin-bottom:16px; } .footer h4{ font-family:var(--font-body); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 18px; } .footer ul{ list-style:none; margin:0; padding:0; } .footer li{ margin-bottom:11px; } .footer a{ text-decoration:none; font-size:.94rem; color:var(--ink-soft); border-bottom:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); } .footer a:hover{ color:var(--ink); border-bottom-color:var(--solar); } /* Buttons in the footer are buttons, not footer links — the generic rules above would otherwise repaint their text and add an underline on hover. */ .footer a.btn{ color:var(--btn-fg); border-bottom-color:var(--btn-bd); } .footer a.btn:hover{ border-bottom-color:var(--btn-bd); } .footer address{ font-style:normal; font-size:.94rem; color:var(--ink-soft); line-height:1.6; } .socials{ display:flex; gap:12px; margin-top:22px; } .socials a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:3px; color:var(--ink-soft); transition:color .2s var(--ease), border-color .2s var(--ease); } .socials a:hover{ color:var(--solar-deep); border-color:var(--solar); } .socials svg{ width:17px; height:17px; } .footer__bottom{ border-top:1px solid var(--line); padding-top:26px; display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--ink-soft); } /* 23. FLOATING WHATSAPP BUTTON ============================================ */ .fab{ position:fixed; right:clamp(16px, 3vw, 28px); bottom:clamp(16px, 3vw, 28px); z-index:95; width:58px; height:58px; display:grid; place-items:center; background:var(--wa); color:#fff; border-radius:50%; text-decoration:none; transition:background-color .25s var(--ease), transform .25s var(--ease); } .fab:hover{ background:var(--wa-deep); transform:scale(1.06); } .fab svg{ width:30px; height:30px; } .fab::after{ content:''; position:absolute; inset:0; border-radius:50%; border:1px solid var(--wa); animation:fabpulse 2.6s var(--ease) infinite; pointer-events:none; } @keyframes fabpulse{ 0% { transform:scale(1); opacity:.75; } 70% { transform:scale(1.55); opacity:0; } 100% { transform:scale(1.55); opacity:0; } } @media (prefers-reduced-motion: reduce){ .fab::after{ animation:none; opacity:0; } .fab:hover{ transform:none; } } /* 24. RESPONSIVE ========================================================== */ @media (max-width: 1080px){ .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:34px 28px; } .flow{ grid-template-columns:repeat(3, minmax(0,1fr)); } .flow__item::after{ display:none; } .components{ grid-template-columns:repeat(2, minmax(0,1fr)); } .footer__grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 900px){ :root{ --nav-h:64px; } .nav__links, .nav__right .btn{ display:none; } .burger{ display:inline-flex; } .hero__grid{ grid-template-columns:1fr; } .hero__media{ display:none; } .split, .system__grid, .ctaband__grid, .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; } .split--flip > *:first-child{ order:0; } .system--flip .system__media{ order:0; } .system__media{ position:static; } .steps{ grid-template-columns:1fr; gap:34px; } .installs{ grid-template-columns:repeat(2, minmax(0,1fr)); } .service__body{ grid-template-columns:1fr; gap:10px; } .bleed-right{ margin-right:0; } } @media (max-width: 620px){ body{ font-size:16px; } .flow{ grid-template-columns:1fr 1fr; } .components{ grid-template-columns:1fr; } .footer__grid{ grid-template-columns:1fr; } .btn{ width:100%; justify-content:center; } .btn-row{ gap:12px; } /* Undo the full-width rule above for buttons that must stay inline. Do NOT add .fab here — it is not a .btn, so it never goes full-width, and width:auto would collapse the circle to the width of its icon. */ .nav .btn, .btn--sm, .footer .btn{ width:auto; } } @media (max-width: 400px){ .flow{ grid-template-columns:1fr; } .installs{ grid-template-columns:1fr; } .stats{ grid-template-columns:1fr; } }