/* ========================================================================== Jagruti Appliances — Site Stylesheet Palette: sampled directly from the brand wordmark artwork. Root brand tokens: Jagruti Blue / Deep Blue / Sky Tint / Ink / Paper — the full blue and ink scales below are generated from those five anchors so every component on the site inherits the same brand colour. ========================================================================== */ /* ========================================================================== Webfont — General Sans (Fontshare / Indian Type Foundry) Self-hosted from assets/fonts/ rather than hotlinked from Fontshare's CDN: no third-party request on page load, no visitor data leaving the site, and no outage in someone else's infrastructure taking our type with it. Paths are relative to THIS file (assets/css/), hence ../fonts/. Only the four weights the stylesheet actually uses are shipped, ~96KB total. `font-display: swap` renders fallback text immediately and swaps General Sans in when it arrives, so copy is never invisible while the font loads. ========================================================================== */ @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; } @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; font-style: normal; } @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; } /* Marcellus (Google Fonts, OFL) — the display serif for hero headlines only. Self-hosted from assets/fonts/ like General Sans, NOT hotlinked from fonts.gstatic.com, so the site keeps owning its own delivery and leaks no visitor data to a third party. One weight ships (400) because that is all Marcellus has — never ask for a bold, or the browser will synthesise a smeared faux-bold. Split latin / latin-ext on the same unicode-range boundaries Google serves, so the 8.9KB ext file is only fetched by pages that actually need those glyphs. */ @font-face { font-family: 'Marcellus'; src: url('../fonts/Marcellus-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Marcellus'; src: url('../fonts/Marcellus-400-latin-ext.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---- Brand anchors (sampled from artwork) ---- */ --brand-primary: #0d8ac4; /* Jagruti Blue — fills the wordmark */ --brand-deep: #096590; /* Deep Blue — hover / pressure states */ --brand-tint: #ebf5fa; /* Sky Tint — washes / backgrounds */ --brand-ink: #172026; /* Ink — body text on light ground */ --brand-paper: #ffffff; /* Paper — the ground the mark ships on */ --brand-canvas: #f2f7f9; /* Canvas — the page ground white cards sit on */ /* ---- Blue scale, generated from the brand anchors ---- */ --blue-900: #053d57; --blue-800: #075174; --blue-700: var(--brand-deep); --blue-600: var(--brand-primary); --blue-500: #13a7ec; --blue-400: #4eb8e9; --blue-300: #86caea; --blue-200: #bce0f0; --blue-100: var(--brand-tint); --blue-50: #e9f2f7; /* alt-section wash — sits a step below the canvas */ /* ---- Ink scale ---- */ --ink-900: var(--brand-ink); --ink-700: #344551; --ink-500: #607685; --ink-300: #a3b0b8; --white: var(--brand-paper); --canvas: var(--brand-canvas); /* WhatsApp's brand green (#25d366) is only 1.98:1 against white — well below AA for a 14px label. These keep its exact hue (142°) and saturation but drop the lightness until the pill passes: 4.88:1 at rest, 6.09:1 on hover. Still unmistakably WhatsApp, now legible. The raw brand value stays available for the icon glyph. */ --whatsapp: #17823f; --whatsapp-dark: #147137; --whatsapp-brand: #25d366; --gold: #d7a53b; --danger: #c0432f; /* ---- Gradients — pick a mood for a richer, less flat surface ---- */ --gradient-primary: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 50%, var(--blue-700) 100%); /* energetic */ --gradient-deep: linear-gradient(160deg, var(--blue-900) 0%, var(--blue-700) 55%, var(--blue-600) 100%); /* premium / dark */ --gradient-sheen: linear-gradient(120deg, var(--blue-700) 0%, var(--blue-500) 55%, var(--blue-300) 100%); /* glossy accent */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 2px 10px rgba(5, 61, 87, 0.08); --shadow-md: 0 10px 30px rgba(5, 61, 87, 0.12); --shadow-lg: 0 20px 50px rgba(5, 61, 87, 0.18); /* Page measurement. The site runs edge-to-edge rather than in a fixed box, so every .container (header included) shares one width and one gutter; reading-width blocks keep their own narrower caps. */ --container: 100%; --gutter: 40px; --header-h: 76px; /* ==== Vertical rhythm ==== The block padding every normal section uses, so the page keeps one spacing language from top to bottom. Fluid, not a fixed 72px: the hero and the pinned sections are sized in viewport units and grow with the window, so a fixed pad fell further behind them the taller the viewport got (72px against the journey section's 81px at 900px tall, 92px at 1024px). The vh term keeps the padded sections breathing at the same rate as the viewport-sized ones. These are the exact values .journey-section already proved in place — promoted to a token rather than reinvented. The floor keeps phones compact; the ceiling stops very tall windows opening a void. */ --section-pad-y: clamp(64px, 9vh, 120px); --section-pad-y-tight: clamp(40px, 5.5vh, 72px); /* ---- Typography ---- Geometric grotesque with a tall x-height and near-circular bowls. General Sans (Fontshare / Indian Type Foundry) is the face, chosen as the closest free stand-in for Aeonik — same geometric-grotesque construction and single-storey `a`, without Aeonik's commercial licence. It is self-hosted from assets/fonts/ (see the @font-face blocks above), NOT hotlinked from Fontshare's CDN, so the site owns its own delivery and leaks no visitor data to a third party. General Sans is the page face again (it briefly was Marcellus). Only the family was reverted: every --fs-*, --lh-*, --ls-* and --fw-* token below was left exactly as tuned during the Marcellus period. The Marcellus @font-face blocks above are now unused and can be removed. */ /* ---- The page face ---- General Sans, site-wide: headings, body, buttons, nav, labels. */ --font-sans: "General Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; /* Kept as its own token so headline-only tuning (the display line-height and tracking below) stays separable from the page face, even though both now resolve to the same family. */ --font-display: "General Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --fw-display: 400; /* The survivor of the General Sans era, for the two places that are drawn ARTWORK rather than text and need a REAL 700 at poster size: .stage-word — the viewport-spanning product name behind the machine on the home page .footer-wordmark span — the JAGRUTI wordmark closing every page At that scale a synthesised bold smears visibly, and the serif's hairline strokes thin out badly. The GeneralSans-*.woff2 files are still shipped for these two, so the cost is one extra font file per page. */ --font-stage: "General Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; /* Tighter than --lh-title: a serif at display size sets closer without the lines colliding, and 76/80 is the ratio the banner was tuned at. */ --lh-display: .95; --ls-display: .005em; /* Heading colour — headings sit a step lighter than body ink, the way the reference greys its headings back from its body colour. */ --heading-color: var(--blue-800); /* ---- The one page ground ---- Every section on every page uses this. Do not introduce a second section background; use borders, cards and shadows for separation. */ --page-bg: var(--brand-canvas); /* ==== Type scale ==== One ramp for the whole site. Every size below is a step on it, and nothing outside this block should invent a size of its own — reach for the nearest step instead. Deliberately `em`, not px-bounded clamp(): the fluid root on `html` below already scales this whole ramp with the viewport, and px bounds here would pin the result and defeat that. The px comment beside each step is its delivered size at the 16px root (1440px viewport), not a fixed value. The ratio is roughly 1.25 (major third) through the body range and opens up above it, so display sizes separate clearly from titles while prose steps stay close enough to feel like one family. */ --fs-caption: .75em; /* 12px — timestamps, form notes, fine print */ --fs-label: .875em; /* 14px — eyebrows, tags, table headers, meta */ --fs-small: 1em; /* 16px — dense UI copy, card descriptions */ --fs-body: 1.13em; /* 18px — running prose: p, li, blockquote */ --fs-lead: 1.25em; /* 20px — intro paragraph under a title */ --fs-h6: 1.2em; /* 19px */ --fs-h5: 1.5em; /* 24px */ --fs-h4: 1.88em; /* 30px */ --fs-h3: 2.19em; /* 35px */ --fs-h2: 2.5em; /* 40px */ --fs-h1: 3em; /* 48px */ --fs-display: 3.75em; /* 60px — hero and page-opening statements */ /* Section-head aliases. Kept as names so a section's three-part head (eyebrow / title / lead) is tuned in one place; they point at the ramp above rather than carrying sizes of their own. */ --fs-eyebrow: var(--fs-label); --fs-title: var(--fs-h2); /* ==== Weight ==== Three weights carry the whole site, and the contrast between them is what builds hierarchy — not size alone: 700 headings and display — the only weight that reads as "bold" 500 labels and UI chrome — eyebrows, tags, buttons, nav, meta 400 prose — every paragraph and list item 600 exists in the loaded set and stays available for the rare label that must out-rank its neighbours, but prefer 500. General Sans ships here at 400/500/600/700 only (see @font-face above). 800 and 900 are NOT loaded — asking for them makes the browser synthesise a smeared fake bold, so 700 is the real ceiling. Anything heavier needs a real font file added first. */ --fw-body: 400; --fw-label: 500; --fw-strong: 600; --fw-title: 700; /* ==== Line height ==== Tight for display (large text needs less leading to look set), open for prose (small text needs more to stay readable). */ --lh-display: 105%; /* Section headings set tight, the way the hero does. 125% was too open to read as a scaled-down hero: the hero sets at .95, so a two-line section heading at 1.25 opened a gap the hero never has and the two stopped looking like the same system. 1.1 is the same "set tight" character at heading sizes — and it is what the bespoke section headings (.why-section 1.08, .services-intro .96) had each already reached for independently, which is the tell that the shared token was wrong rather than that they needed to opt out. --lh-card is the SMALL-heading counterpart: a 20px two-line product name or a 17px FAQ question needs more leading than a 40px banner heading, so card titles keep 1.25 rather than inheriting 1.1. Same family, different optical need. */ --lh-title: 1.1; --lh-card: 1.25; --lh-body: 155%; --lh-tight: 120%; /* ==== Tracking ==== Large type tightens optically; small caps-y labels open up. One tracking value per JOB, so the same kind of text tracks the same everywhere. Before this, uppercase labels doing identical work ran at .05 / .06 / .07 / .08 / .10 / .12 / .16 / .22em depending on which component they sat in; they now all resolve through --ls-label, with --ls-label-loose reserved for the two decorative marquee/watermark treatments where the wide track IS the effect. */ /* --ls-display is the HERO's tracking. The hero sets at -.035em and is the site's visual benchmark, but this token said -.025em — so any display-scale heading that reached for the token landed looser than the thing it was supposed to match. Aligned to the hero. */ --ls-display: -.035em; --ls-title: -.02em; --ls-body: 0; --ls-label: .12em; /* uppercase labels — caps need the space */ --ls-label-tight: .02em; /* the same labels set in natural case */ --ls-label-loose: .22em; /* decorative marquee / watermark only */ --ls-button: .06em; /* ==== Card / UI sub-steps ==== The ramp above covers prose and headings. These three name the sizes the CARD components kept re-inventing: a card title was written as 1.13em here and 1.5em there, a card description as .88 / .8625 / .85 / .8438em, a category tag as .6875 / .7188 / .75em. Each job now has one name, so retuning a card title is one edit rather than nine. */ --fs-card-title: 1.25em; /* 20px — product / blog / need card titles */ --fs-card-desc: .9375em; /* 15px — the copy under a card title */ --fs-tag: .6875em; /* 11px — the uppercase category tag on a card */ /* ==== Stat figures ==== A statistic is not paragraph content: the number has to out-rank its label by size AND weight or the strip reads as a row of sentences. The hero strip previously set its figures at 17px/600 against a 12.5px label — a 4.5px gap that flattened them. Only the label step is named here: the site has exactly one stats block and its figure size is bounded by that five-column layout, so it is set there rather than promised as a global step it would be the sole consumer of. */ --fs-stat-label: .8125em; /* 13px — the caption under a stat figure */ /* ==== Button ==== One label treatment for every CTA on the site; variants differ by colour, border and padding only. */ /* Floored in px so a button label stays legible on a phone. These are `rem`, and the fluid root drops to 14px at narrow widths, which took the 14px label down to 11.4px and the compact one to 10.6px — too small for a control the reader has to tap. The max() holds them at 13/12px while everything else still scales, so mobile buttons adapt by padding and width (below) rather than by shrinking their text. */ --fs-button: max(13px, .875rem); /* 14px desktop, 13px floor */ --fs-button-sm: max(12px, .8125rem); /* 13px desktop, 12px floor */ --fw-button: 500; /* The button's own leading, rather than borrowing --lh-tight: a button label is a single centred line and its leading affects the pill's height, so it should not move when --lh-tight is retuned for labels. */ --lh-button: 1.2; } * { box-sizing: border-box; } html { /* No `scroll-behavior: smooth` here on purpose. Lenis animates the scroll position itself, and the native smooth behaviour fights it: the browser and Lenis both try to own the same easing, which reads as a stutter. Anchor scrolling goes through lenis.scrollTo() in main.js instead. */ /* Fluid root: the whole em-based scale below rides on this one value, so every heading, body size and utility step scales together with the viewport instead of stepping at breakpoints. - The floor and ceiling are in `rem`, not px (0.875rem = 14px and 1.25rem = 20px at a default browser setting). px bounds would pin the result and silently defeat the rem term below, so a reader who raises their browser font size would see no change at all. - The `rem + vw` form (rather than raw `vw`) is deliberate: a pure `vw` root cannot be overridden by the browser's font-size setting, which breaks zoom for anyone who needs larger text. Keeping a rem term preserves that. Tuned so the root is exactly 16px at 1440px, the most common desktop width. The px comments beside every `em` below are the values at a 16px root — the true delivered size scales with this. */ font-size: clamp(0.875rem, 0.685rem + 0.35vw, 1.25rem); } body { margin: 0; font-family: var(--font-sans); font-weight: 400; /* Body stays at the 16px root so every `em` below resolves against 16px rather than compounding. Paragraph copy gets its 18px on `p`/`li`. */ font-size: 1em; line-height: 140%; letter-spacing: 0; color: var(--ink-700); background: var(--page-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 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; } /* ---------- Tag defaults ---------- Heading weight is 700 (Bold) throughout. Body copy stays at 400, so the contrast between the two is what carries the hierarchy. Display sizes tighten optically; body sizing stays at 0 tracking. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; color: var(--heading-color); } h1 { margin: 0 0 1em; font-size: var(--fs-h1); line-height: var(--lh-title); letter-spacing: var(--ls-title); } h2 { margin: 2em 0 .5em; font-size: var(--fs-h2); line-height: var(--lh-title); letter-spacing: var(--ls-title); } h3 { margin: 0 0 .5em; font-size: var(--fs-h3); line-height: var(--lh-title); letter-spacing: var(--ls-title); } h4 { margin: 0 0 .4em; font-size: var(--fs-h4); line-height: var(--lh-card); letter-spacing: -0.01em; } h5 { margin: 0 0 .4em; font-size: var(--fs-h5); line-height: var(--lh-tight); letter-spacing: -0.01em; } h6 { margin: 0 0 .4em; font-size: var(--fs-h6); line-height: var(--lh-tight); letter-spacing: -0.01em; } /* Visually hidden but read by search engines and screen readers - used for section headings that keep the H1-H6 outline unbroken without adding visible text to the design. */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Prose. 400 weight, the open body leading, and the one body size — the contrast against the 700 headings above is what carries the hierarchy, so body copy never needs to reach for a heavier weight to be read. */ p { margin: .5em 0 1em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-700); } li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-700); } blockquote { margin: 0 0 10px; padding: 10px 20px; border-left: 5px solid var(--blue-400); font-size: var(--fs-lead); font-weight: var(--fw-body); line-height: var(--lh-title); color: var(--ink-700); } small { font-size: var(--fs-label); } /* Body prose is 400 and headings are 700. / sits at 700 to carry semantic emphasis inside running prose, and .logo-mark is a wordmark, not text in the scale. The .text-*-medium utilities run at 600 so mid-level labels stay visibly subordinate to the 700 headings. */ strong, b { font-weight: 700; } /* ========================================================================== Semantic type utilities Named for the JOB the text does, not its pixel size — `.lead` stays the lead paragraph after the ramp is retuned, where a `.text-20-regular` would quietly become a lie. Each one is a step on the --fs-* ramp in :root; none invents a size of its own. Colour is inherited so a utility can sit on any ground; add a colour class or a parent colour to steer it. This replaced a 40-class `.text-{px}-{weight}` scale that no page ever referenced — and which had drifted internally (`.text-22-medium` was 24px, `.text-45-regular` 38.4px). If you need a size that is not here, add a step to the ramp rather than a one-off rule. ========================================================================== */ .u-display, .u-title, .u-lead, .u-body, .u-small, .u-label, .u-caption { font-family: var(--font-sans); margin-top: 0; margin-bottom: 0; } /* Display — hero and page-opening statements. Tight leading and negative tracking: at this size the default spacing reads as loose. */ .u-display { font-size: var(--fs-display); font-weight: var(--fw-title); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--heading-color); } /* Title — a section heading outside the h1–h6 flow. */ .u-title { font-size: var(--fs-title); font-weight: var(--fw-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); color: var(--heading-color); } /* Lead — the intro paragraph under a title. One step above body, still 400: it earns emphasis from size, not weight. */ .u-lead { font-size: var(--fs-lead); font-weight: var(--fw-body); line-height: var(--lh-body); color: var(--ink-700); } /* Body — running prose. Matches the p/li defaults, for when the element is not a p (a div, a td) but should read as prose. */ .u-body { font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); color: var(--ink-700); } /* Small — dense UI copy: card descriptions, table cells, helper text. */ .u-small { font-size: var(--fs-small); font-weight: var(--fw-body); line-height: var(--lh-body); color: var(--ink-700); } /* Label — eyebrows, tags, meta, column heads. Uppercase and tracked out; 500 so it reads as chrome, clearly subordinate to a 700 heading. */ .u-label { font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-tight); letter-spacing: var(--ls-label); text-transform: uppercase; } /* Caption — timestamps, form notes, fine print. The floor of the ramp. */ .u-caption { font-size: var(--fs-caption); font-weight: var(--fw-body); line-height: var(--lh-tight); color: var(--ink-500); } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding-block: var(--section-pad-y); background: var(--page-bg); } .section-tight { padding-block: var(--section-pad-y-tight); } /* Kept so the ~41 pages using it still parse, but it no longer alternates — one ground runs the length of every page. Separation comes from cards and rules, not from a second background colour. */ .section-alt { background: var(--page-bg); } .eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: var(--fw-label); /* Was inheriting the 1.55 body leading, which padded the pill unevenly and left the label sitting differently depending on whether its parent was prose or a flex column. A label is one line — set it tight. */ line-height: var(--lh-tight); /* Natural case. The HTML already writes these as "Featured", "Why Jagruti", "Service & Support" — the uppercase transform was what made every section open with a shouted label. With it gone the eyebrow reads as quiet metadata, which is its job. Tracking drops with the case: +.12em is set for CAPS, where the extra space separates letterforms that all share one height. On lowercase it just looks loose, so this uses the smaller label tracking. */ letter-spacing: var(--ls-label-tight); text-transform: none; color: var(--blue-600); background: var(--blue-100); padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 16px; } .section-head { max-width: 700px; margin: 0 auto 44px; text-align: center; } /* h2 inside a section head loses the tag's top margin — the section padding already supplies the space. */ .section-head h2 { margin-top: 0; } /* typography: the section-heading system at the end of this file */ /* The lead under a section title. 400 weight and one step above body — size carries the emphasis, so it never competes with the 700 h2. */ .section-head p { font-size: var(--fs-lead); font-weight: var(--fw-body); line-height: var(--lh-body); } .need-section .section-head p, .ranges-section .section-head p { font-size: var(--fs-small); line-height: var(--lh-body); } /* ---------- Buttons ---------- One geometry for every button on the site, following the reference: a full pill, .88em/1.30em padding, an uppercase label at weight 400, and a background-only hover with no lift. Sizing is in `rem` so a button dropped into a smaller-typed context (a table cell, a card) keeps its size instead of compounding down. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; /* 10px — the reference's dot/label gap */ padding: .875rem 1.3rem; /* .88em / 1.30em */ border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: var(--fw-button); font-size: var(--fs-button); line-height: var(--lh-button); /* Natural case. Every CTA on the site inherits this base, so the site previously shouted GET PRICE / VIEW PRODUCT / EXPLORE PRODUCTS at the reader from every card and band at once. The label now renders in the case the HTML already writes ("Explore Products", "View Product"), so no content had to be rewritten to calm it down. Tracking stays: a small amount still helps a short pill label, and it is what the hero CTA — the reference for this system — carries. */ text-transform: none; letter-spacing: var(--ls-button); border: 1px solid transparent; transition: background .3s ease, color .3s ease, border-color .3s ease; white-space: nowrap; } /* The reference's hover is a background shift only — no transform. */ /* Solid — the reference's filled pill (#636f3d darkening to #404f1d), mapped onto the brand blues. Their rest state is 5.42:1 against white and their hover 8.92:1; blue-700 -> blue-800 gives 6.41:1 -> 8.61:1, the same "already legible, deepens on hover" behaviour. blue-600 was the obvious pick by name, but it is only 3.85:1 with white — below AA for a 14px label — so the pill starts one step darker. */ .btn-primary { background: var(--blue-700); color: var(--white); } .btn-primary:hover { background: var(--blue-800); } /* Translucent — the reference's .btn-new-transparent: a low-opacity wash over whatever sits behind, lifting slightly on hover. The site is overwhelmingly light ground, so the ink version is the DEFAULT and the white/glass version is opted into with .on-dark. A descendant selector was tried first and silently missed buttons that sit outside a .section, leaving white text on a white ground. */ .btn-outline { background: rgba(9,101,144,.06); color: var(--blue-700); border-color: var(--blue-200); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .btn-outline:hover { background: rgba(9,101,144,.10); border-color: var(--blue-300); } /* Opt-in for dark or photographic grounds. */ .btn-outline.on-dark, .hero .btn-outline, .page-hero .btn-outline, .cat-hero .btn-outline, .range-feature .btn-outline, .cta-band .btn-outline { background: rgba(255,255,255,.07); color: var(--white); border-color: rgba(255,255,255,.22); } .btn-outline.on-dark:hover, .hero .btn-outline:hover, .page-hero .btn-outline:hover, .cat-hero .btn-outline:hover, .range-feature .btn-outline:hover, .cta-band .btn-outline:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.34); } /* Solid white — the reference's .btn-new-white, for dark grounds. */ .btn-ghost { background: var(--white); color: var(--blue-700); border-color: transparent; } .btn-ghost:hover { background: rgba(255,255,255,.9); } .btn-whatsapp { background: var(--whatsapp); color: var(--white); } .btn-whatsapp:hover { background: var(--whatsapp-dark); } /* Small variant keeps the pill and the label treatment, just tighter. */ .btn-sm { padding: .625rem 1rem; font-size: var(--fs-button-sm); } .btn-block { width: 100%; } .btn svg { width: 18px; height: 18px; flex: none; } /* ---------- Header ---------- */ @keyframes navSheen { 0% { transform: translateX(-120%) skewX(-12deg); } 100% { transform: translateX(220%) skewX(-12deg); } } @keyframes waPulse { 0%, 100% { box-shadow: 0 8px 20px rgba(37,211,102,.30), 0 0 0 0 rgba(37,211,102,.35); } 50% { box-shadow: 0 8px 20px rgba(37,211,102,.30), 0 0 0 7px rgba(37,211,102,0); } } @keyframes navItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== Header + slide-in menu overlay Pattern taken from farmminerals.com/promo: the bar holds no link list at any breakpoint — only a MENU button, the wordmark and the primary action. Every navlink lives in .menu-side-bar, a full-height panel that slides in from the left over a scrim. Because one component serves every viewport, responsiveness is a matter of the panel's width and type scale only. ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: transparent; border-bottom: 1px solid transparent; height: var(--header-h); transition: height .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } /* Scrolled state: the bar stays transparent — no white strip across the page. It shrinks slightly and drops the wordmark, so what is left reads as two floating controls over the content rather than as a chrome bar. */ .site-header.is-scrolled { height: calc(var(--header-h) - 14px); background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* Once the bar is scrolled it becomes a compact utility strip: the wordmark drops out (the page itself is the context by then) and only the MENU affordance and the WhatsApp action remain. Visibility rather than display keeps the grid's three columns, so menu and action hold their edges. */ .site-header.is-scrolled .logo { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); } .logo { transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), visibility .25s; } /* With no ground behind it the MENU label must carry its own contrast; a soft pill keeps it legible over both light sections and photography. */ .site-header.is-scrolled .menu-btn-wrap { background: rgba(255,255,255,.9); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); border-radius: var(--radius-pill); padding: 8px 14px; box-shadow: 0 4px 16px rgba(5,61,87,.12); color: var(--ink-900); } /* Three columns with equal 1fr outers keep the wordmark optically centered even though the menu button and the action button differ in width. */ .nav-wrap { height: 100%; padding-left: var(--gutter); padding-right: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } /* The bar sits over the page rather than pushing it down, so every page needs its own clearance. Pages that open on the light .hero pull it back up so header and hero read as one surface (as the reference does). */ Which of the three it gets is declared once per page as data-nav on , stamped by assets/js/build-partials.js from the page's opening section: data-nav="flow" default. The page reserves header height, so its content starts below the floating bar. data-nav="over-dark" the page opens on a dark hero that runs up under the bar: no padding, scrim across the header band, white MENU. data-nav="over-light" same tuck-under, but on a light opening section: no padding, no scrim, dark MENU. Anything page-specific (the homepage hero's inner padding, contact's half-width scrim) stays with that page's own block further down. */ body { padding-top: var(--header-h); } body[data-nav="over-dark"], body[data-nav="over-light"] { padding-top: 0; } body[data-nav="over-dark"] main > .hero:first-child { padding-top: var(--header-h); } /* Over a dark hero the MENU affordance inverts to white so it stays legible on the photo. Over a light one it keeps the page's own ink. */ body[data-nav="over-dark"] .site-header:not(.is-scrolled) .menu-btn-wrap { color: #fff; } body[data-nav="over-light"] .site-header:not(.is-scrolled) .menu-btn-wrap { color: var(--ink-900); } /* The logo is never altered to suit the hero: no recolour, no shadow, no ground of its own. It renders as the brand artwork on every page. What changes instead is the photo behind it. The hero sky sits at roughly the logo's own blue (~1.04:1 contrast), so the mark is invisible until the picture behind it is darkened. This scrim is a top-down gradient across the header band only, fading out well before the hero copy: the brand blue then reads against a deeper sky instead of an equally bright one. It hangs off .site-header rather than .hero because the header is fixed and .hero is overflow:hidden, which would clip it. Full-bleed and fading to nothing, it reads as depth in the photograph rather than as a panel behind the logo. */ body[data-nav="over-dark"] .site-header:not(.is-scrolled)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--header-h) + 46px); pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(0,22,36,.86) 0%, rgba(0,22,36,.74) 42%, rgba(0,22,36,.46) 68%, rgba(0,22,36,.16) 88%, transparent 100%); } /* The bar's own controls sit above the scrim. */ .site-header .nav-wrap { position: relative; z-index: 1; } /* ---------- MENU button ---------- Icon + lowercase caps label, exactly the reference's "menu" affordance. The three rules converge and cross-fade into an X while the panel is open, so the same control reads as the close affordance if the panel is dismissed by the scrim. */ .menu-btn-wrap { justify-self: start; align-self: center; display: flex; align-items: center; gap: .38em; line-height: 1; background: none; border: none; padding: 6px 2px; cursor: pointer; color: var(--ink-900); transition: color .2s ease, opacity .2s ease; } .menu-btn-wrap:hover { opacity: .68; } .icon-menu { display: flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; } .icon-menu svg { width: 100%; height: 100%; } .menu-btn-wrap .ml1, .menu-btn-wrap .ml2, .menu-btn-wrap .ml3 { transform-origin: 50% 50%; transition: transform .4s cubic-bezier(.23,1,.32,1), opacity .2s ease; } .menu-btn-wrap[aria-expanded="true"] .ml1 { transform: translateY(5px) rotate(45deg); } .menu-btn-wrap[aria-expanded="true"] .ml2 { opacity: 0; } .menu-btn-wrap[aria-expanded="true"] .ml3 { transform: translateY(-5px) rotate(-45deg); } .menu-text { font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--ls-label); } /* The logo is a two-line block (wordmark + tagline) sitting between two single-line controls. Centering the whole block would push the wordmark above the menu label and the WhatsApp pill, so the tagline is taken out of the flow: the wordmark itself is what gets centered, and the tag hangs under it without shifting the baseline the other two controls share. */ .logo { display: flex; align-items: center; align-self: center; justify-content: center; gap: 10px; flex: none; } .logo > div { position: relative; } /* The real brand logo is a single lockup: the badge already carries both the wordmark and the "Every Home Need..." tagline, so no separate text sits beside it. Height drives the size and width follows the 986x256 aspect, which keeps it from crowding the 76px bar. */ .logo-img { display: block; height: 46px; width: auto; max-width: 100%; transition: transform .25s cubic-bezier(.34,1.56,.64,1); } .logo:hover .logo-img { transform: translateY(-1px) scale(1.03); } .logo-mark { position: relative; overflow: hidden; font-weight: 700; font-size: 1.3125em; /* 21px */ letter-spacing: .02em; color: var(--blue-700); border: 2.5px solid var(--blue-500); border-radius: var(--radius-pill); padding: 5px 16px; line-height: 1; transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), color .25s ease; } .logo-mark::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(-120%) skewX(-12deg); } .logo:hover .logo-mark { transform: translateY(-1px) scale(1.03); border-color: var(--blue-700); box-shadow: 0 6px 18px rgba(13,138,196,.25); } .logo:hover .logo-mark::after { animation: navSheen .9s ease; } .logo-tag { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: block; white-space: nowrap; font-size: 10.5px; font-style: italic; color: var(--ink-500); margin-top: 2px; transition: color .25s ease; } .header-actions { display: flex; align-items: center; align-self: center; justify-content: flex-end; gap: 10px; } .btn-whatsapp { animation: waPulse 2.6s ease-in-out infinite; } .btn-whatsapp:hover { animation-play-state: paused; } /* ---------- Slide-in menu overlay ---------- .menu-side-bar is the full-viewport layer; .menu-side-bg is the scrim that fades in behind it; .menu-side-bar-inner is the coloured panel that slides. Splitting scrim from panel is what lets the two animate on different curves, which is most of why the reference's open feels weighted rather than linear. */ .menu-side-bar { position: fixed; inset: 0; z-index: 900; height: 100vh; height: 100dvh; visibility: hidden; pointer-events: none; /* visibility is what makes the overlay non-interactive at rest, but it is NOT interpolatable: without a delay it flips to hidden on the frame the .open class leaves, blanking the panel, scrim and text while their own transitions are still running — the close was fully animated, just invisible. Holding visibility until the slowest close step has finished (panel: .28s delay + .85s travel = 1.13s) lets the dismissal actually be seen; the open flips it to visible instantly, so only the close waits. */ transition: visibility 0s linear 1.13s; } .menu-side-bar[hidden] { display: none; } .menu-side-bar.open { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; } /* Scrim timing measured off the live reference: it does not fade with the panel — it waits until the panel is nearly home (~660ms) and then fades up over ~450ms. The close plays that same step in reverse. */ .menu-side-bg { position: absolute; inset: 0; z-index: 1; background: rgba(5,61,87,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; /* True reverse of the open. The open is: text in from .66s, scrim up at .66s over .45s, panel travelling 0-.85s. Played backwards the scrim is the LAST thing to go, not the first — it holds while the panel slides out from under it and only then clears. Total close = .28s + .85s = 1.13s, so the scrim starts at .68s and fades over .45s to land with it. */ transition: opacity .45s ease .68s; } .menu-side-bar.open .menu-side-bg { opacity: 1; transition: opacity .45s ease .66s; } .menu-side-bar-inner { position: absolute; top: 0; left: 0; z-index: 2; /* The reference panel is 47em; its five short words need less room than seven longer ones, but 47em on a wide screen reads as half the page, so this sits a step under it and caps in px on very wide monitors. */ width: min(38em, 92vw); max-width: 100vw; /* The panel must never exceed the visible viewport, or its scrolling column measures against a height that is partly under a mobile browser toolbar and the last rows sit below the fold with nothing to scroll them into view. dvh tracks the toolbar; vh is the fallback where it is unsupported. */ height: 100vh; height: 100dvh; max-height: 100dvh; padding: 1.63em 1.88em 1.88em var(--gutter); /* Row, not column: the CLOSE rail and the vertical divider stand beside the link column, exactly as .menu-side-bar-inner does in their CSS (display:flex with the default row direction). */ display: flex; flex-direction: row; align-items: stretch; gap: 1.88em; /* The reference's flat dark ground, translated to the brand gradient. */ background: var(--gradient-deep); color: #fff; overflow: hidden; transform: translateX(-100%); /* Sampled from the live reference: the panel travels its full width in ~850ms on a hard deceleration (outQuart — 36% of the distance covered by 150ms, 89% by 450ms, settling around 850ms). Closing is quicker at ~450ms, so the menu opens with weight and dismisses without ceremony. */ /* Close mirrors the open: same .85s travel, same curve. The .28s delay is the mirror of the open's text-lag. On the open the panel leads and the words follow it in; reversed, the words leave first and the panel follows them out, so it waits out the leading edge of the text stagger before it starts moving. The overlap is identical in both directions — only the order is flipped. */ transition: transform .85s cubic-bezier(.165,.84,.44,1) .28s; } .menu-side-bar.open .menu-side-bar-inner { transform: translateX(0); transition: transform .85s cubic-bezier(.165,.84,.44,1); } /* CLOSE occupies a narrow rail of its own, aligned to the top of the panel, with the link column beginning on the far side of the divider. */ .close-btn-wrap { flex: none; display: flex; align-items: flex-start; justify-content: flex-start; } .menu-side-bar .close-btn { display: flex; align-items: center; gap: .38em; background: none; border: none; padding: 6px 2px; cursor: pointer; color: #fff; transition: opacity .2s ease; } .menu-side-bar .close-btn:hover { opacity: .68; } /* Vertical hairline: their .light-divider is width:1px / height:100% at opacity .1, turning horizontal only on mobile. */ .light-divider { flex: none; width: 1px; height: 100%; background: rgba(255,255,255,.5); opacity: .22; } /* The items column and the utility block push apart to fill the panel, the same distribution the reference uses. */ .menu-items { display: flex; flex-direction: column; justify-content: space-between; gap: 1em; flex: 1 1 auto; min-width: 0; min-height: 0; /* Their 6.88em top inset drops the first link well below the CLOSE row. */ padding-top: 4.5em; } /* With seven top-level rows and a seven-item Products list, an expanded section can exceed any viewport — the reference never faces this with its five short sections. So the row column scrolls on its own while the header and the utility block below stay pinned. */ .menu-items-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; /* The mask's faded tail is painted over the container's own bottom edge, so without a runway the final sub-link of an expanded section can never be scrolled clear of it and reads as unreachable. This padding is that runway; it also keeps the last row off the utility block's hairline. */ padding-bottom: 2.25em; /* Vertical only. Anything wide enough to need sideways travel is a layout bug, not something to scroll to. */ overflow-x: hidden; /* Fades the rows out as they meet the utility block rather than clipping them on a hard edge. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); } /* flex children default to min-height:auto, but these rows must be free to report their expanded height to the scroll container instead of refusing to shrink and pushing the tail of the list outside it. */ .menu-items-wrap > .link-item { flex: none; } .menu-items-wrap::-webkit-scrollbar { width: 4px; } .menu-items-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 4px; } /* ---------- Menu rows ---------- Each row: 36px icon, display-scale title, optional chevron, and an underline that wipes in from the left on hover. */ /* Row geometry, read off the reference's IX2 action lists (a-3 / a-5 in webflow.0b3be3c5.js, "Menu Link Hover Products" / "…About"): .menu-link-heading translateX 0 → 3.25em 800ms outQuart .icon-36 opacity 0 → 1 300ms @200ms delay .link-item_links height 0 → 8-10em 1000ms outQuart @200ms sibling .link-item opacity 1 → .2 500ms @200ms delay The icon sits in the gutter the title vacates as it slides — at rest the row is title-only, which is why the reference's menu reads as bare type. */ .menu-link-heading { position: relative; display: flex; align-items: center; width: 100%; padding: .5em 0 .55em; text-align: left; /* The accordion rows are