/* ───────────────────────────────────────────────────────────────────────────── SewTrak landing page. Built from design_handoff_sewtrak_landing (Claude Design) — see landing/README.md. Layer 1 below is the Navvi design-token sheet ported VERBATIM from src/_ds/colors_and_type.css, as the handoff requires. Do not hand-edit the values: they are the brand's source of truth and are shared with the app. Its @import was removed — the font link lives in with preconnect, because an @import inside a stylesheet blocks rendering until it resolves. ───────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────── Navvi Corporations — Colors & Type Deep blue + saffron marigold. Industrial, confident, rooted in the textile heartland of Tirupur, Tamil Nadu. ───────────────────────────────────────────────────────────── */ :root { /* ──── Brand Core (sampled from logo) ──── */ --navvi-blue: #34558b; /* Deep cobalt — wordmark, circle */ --navvi-saffron: #ffb139; /* Marigold/saffron — the deer, tagline */ /* ──── Blue Scale ──── */ --blue-50: #f1f4fa; --blue-100: #dce4f1; --blue-200: #b6c5dd; --blue-300: #8aa3c6; --blue-400: #5f7eae; --blue-500: #34558b; /* brand */ --blue-600: #2c4877; --blue-700: #243a61; --blue-800: #1c2d4b; --blue-900: #121e33; --blue-950: #0a121f; /* ──── Saffron Scale ──── */ --saffron-50: #fff8ec; --saffron-100: #ffeccb; --saffron-200: #ffd993; --saffron-300: #ffc55a; --saffron-400: #ffb139; /* brand */ --saffron-500: #f59a1a; --saffron-600: #d57e0e; --saffron-700: #a95f0d; --saffron-800: #7c4510; --saffron-900: #533010; /* ──── Complementary Accents (professional expansion) ──── */ /* Complement of cobalt blue is saffron (already brand). We add a tertiary + split-complements for charts, dataviz, status. */ --teal-500: #2a8a8c; /* Analogous-to-blue; for "systems" / green data */ --teal-100: #d8efef; --terracotta-500: #c95a3c; /* Split-complement; warm earth for alerts / people */ --terracotta-100: #fbe3dc; --plum-500: #6e4a86; /* Tertiary; for secondary data series */ --plum-100: #ece4f3; --forest-500: #2f7a4f; /* Deep green for success / growth */ --forest-100: #e0efe6; --clay-500: #a35a2a; /* Warm brown for fabric / material refs */ --clay-100: #f5e4d3; /* Chart sequence (designed to hold together on light + dark bg) */ --series-1: var(--blue-500); --series-2: var(--saffron-400); --series-3: var(--teal-500); --series-4: var(--terracotta-500); --series-5: var(--plum-500); --series-6: var(--forest-500); /* Neutrals (cool-tinted to harmonize with blue) */ --ink-0: #ffffff; --ink-25: #fbfbfc; /* page background, warm off-white */ --ink-50: #f5f6f8; --ink-100: #ebedf1; --ink-200: #d6dae2; --ink-300: #b2b8c4; --ink-400: #858c9c; --ink-500: #5d6473; --ink-600: #434956; --ink-700: #2e333d; --ink-800: #1c1f26; --ink-900: #0f1115; /* ──── Semantic Colors ──── */ --fg-primary: var(--ink-900); --fg-secondary: var(--ink-600); --fg-tertiary: var(--ink-400); --fg-on-blue: var(--ink-0); --fg-on-saffron: var(--blue-900); --fg-link: var(--blue-500); --fg-link-hover: var(--blue-700); --bg-page: var(--ink-25); --bg-surface: var(--ink-0); --bg-raised: var(--ink-0); --bg-sunken: var(--ink-50); --bg-inverse: var(--blue-700); --bg-accent: var(--saffron-400); --border-subtle: var(--ink-100); --border-default: var(--ink-200); --border-strong: var(--ink-300); --border-focus: var(--blue-500); --status-success: #2f7a4f; --status-success-bg: #e8f5ee; --status-warning: #c87a0a; --status-warning-bg: #fff4e0; --status-error: #b8322a; --status-error-bg: #fdecea; --status-info: var(--blue-500); --status-info-bg: var(--blue-50); /* ──── Type Families ──── */ --font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif; /* condensed, industrial — closest match to wordmark */ --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: 'Noto Serif', 'Source Serif Pro', Georgia, serif; /* for reports, data callouts */ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* ──── Type Scale (Modular 1.25 — Major Third) ──── */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 60px; --text-6xl: 76px; /* ──── Line Heights ──── */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; /* ──── Weights ──── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ──── Letter Spacing ──── */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; /* eyebrow labels, CTA buttons */ /* ──── Spacing (4px base) ──── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ──── Radii ──── */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; --radius-circle: 50%; /* ──── Shadows ──── */ --shadow-xs: 0 1px 2px rgba(18, 30, 51, 0.06); --shadow-sm: 0 1px 3px rgba(18, 30, 51, 0.08), 0 1px 2px rgba(18, 30, 51, 0.04); --shadow-md: 0 4px 8px -2px rgba(18, 30, 51, 0.10), 0 2px 4px -2px rgba(18, 30, 51, 0.06); --shadow-lg: 0 12px 20px -6px rgba(18, 30, 51, 0.14), 0 4px 8px -4px rgba(18, 30, 51, 0.08); --shadow-xl: 0 24px 40px -12px rgba(18, 30, 51, 0.20), 0 8px 16px -8px rgba(18, 30, 51, 0.10); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(18,30,51,0.06); --shadow-focus: 0 0 0 3px rgba(52, 85, 139, 0.25); /* ──── Motion ──── */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* ───────────────────────────────────────────────────────────── Semantic typography — apply to real HTML elements ───────────────────────────────────────────────────────────── */ .navvi-root { font-family: var(--font-body); color: var(--fg-primary); background: var(--bg-page); font-size: var(--text-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .h-hero, h1.hero { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(48px, 7vw, 76px); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--blue-700); text-wrap: balance; } .h1, h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--blue-700); } .h2, h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-3xl); line-height: var(--lh-snug); color: var(--blue-700); } .h3, h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--ink-800); } .h4, h4 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--ink-800); } .eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--saffron-600); } .lead { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--fg-secondary); font-weight: var(--fw-regular); text-wrap: pretty; } p, .body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg-primary); text-wrap: pretty; } .small { font-size: var(--text-sm); color: var(--fg-secondary); } .caption { font-size: var(--text-xs); color: var(--fg-tertiary); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .stat-figure { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--blue-700); font-variant-numeric: tabular-nums; } .tagline { font-family: var(--font-body); font-weight: var(--fw-medium); font-style: italic; color: var(--saffron-500); letter-spacing: var(--tracking-normal); } code, .code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-sunken); border: 1px solid var(--border-subtle); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--blue-800); } a { color: var(--fg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--fg-link-hover); } /* ── Layer 2: the page ───────────────────────────────────────────────────── */ html{scroll-behavior:smooth} body{margin:0} /* ⚠ `clip`, NOT `hidden`, AND THIS IS THE WHOLE NAV BUG. `overflow-x:hidden` forces the browser to compute `overflow-y:auto`, which makes html/body a SCROLL CONTAINER — and `position:sticky` then sticks to that container instead of the viewport. The nav's pill styles applied perfectly to an element that had already scrolled off screen (rect.top measured 0 -> -486 -> -1988). `overflow-x:clip` clips exactly the same way but does NOT create a scroll container, so sticky keeps working. A browser too old for `clip` ignores this line and falls back to `visible`: the page may scroll sideways, but the nav still sticks. That is the better of the two failure modes. */ html,body{overflow-x:clip} a{color:var(--blue-500)} a:hover{color:var(--blue-700)} @keyframes st-fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes st-pulse{0%,100%{opacity:1}50%{opacity:0.35}} @keyframes st-blink{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes st-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes st-sew{0%{stroke-dashoffset:100}70%{stroke-dashoffset:0}100%{stroke-dashoffset:0}} @keyframes st-stitchfade{0%,86%{opacity:1}94%,100%{opacity:0}} @keyframes st-sweep{0%,12%{transform:scaleX(0);transform-origin:left center}42%{transform:scaleX(1);transform-origin:left center}43%{transform-origin:right center}72%,100%{transform:scaleX(0);transform-origin:right center}} @media (prefers-reduced-motion:reduce){[data-threads] path{animation:none !important}} @media (max-width:1020px){[data-herocards]{display:none !important}} [data-typeline]{min-height:1.15em; white-space:nowrap} @media (max-width:1000px){[data-navlinks]{display:none !important}} [data-mainnav]{border:1px solid transparent; border-bottom:1px solid var(--ink-100); transition:width 0.7s var(--ease-out), height 0.7s var(--ease-out), margin 0.7s var(--ease-out), top 0.7s var(--ease-out), border-radius 0.7s var(--ease-out), border-color 0.7s var(--ease-out), background 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out), padding 0.7s var(--ease-out)} [data-mainnav][data-floating="1"]{width:60% !important; min-width:fit-content !important; margin:0 auto !important; top:12px !important; height:56px !important; border-radius:var(--radius-pill) !important; background:rgba(255,255,255,0.85) !important; border:1px solid var(--ink-100) !important; box-shadow:var(--shadow-md) !important; padding:0 28px !important} [data-mainnav][data-floating="1"] [data-navsub]{display:none} [data-navlogo]{transition:font-size 0.7s var(--ease-out)} [data-navlinks] a{transition:font-size 0.7s var(--ease-out)} [data-navcta]{transition:font-size 0.7s var(--ease-out), padding 0.7s var(--ease-out)} [data-mainnav][data-floating="1"] [data-navlogo]{font-size:20px !important} [data-mainnav][data-floating="1"] [data-navlinks] a{font-size:13px !important} [data-mainnav][data-floating="1"] [data-navcta]{font-size:10.5px !important; padding:8px 16px !important} [data-fact]+[data-fact]{border-left:1px solid var(--ink-200);padding-left:24px} @media (max-width:1050px){[data-fact]+[data-fact]{border-left:none;padding-left:0}} /* An image slot fills its container, as the prototype's did. */ .slot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* ── Layer 3: hover states ─────────────────────────────────────────────────── The design carried these as a `style-hover` attribute the prototype runtime applied in JS. As real CSS they also cover :focus-visible, so the page is usable from a keyboard — and they survive if the script never runs. */ [data-hv="hv1"]:hover, [data-hv="hv1"]:focus-visible { background:var(--saffron-500); } [data-hv="hv2"]:hover, [data-hv="hv2"]:focus-visible { background:var(--blue-600); } [data-hv="hv3"]:hover, [data-hv="hv3"]:focus-visible { border-color:var(--blue-300); } [data-hv="hv4"]:hover, [data-hv="hv4"]:focus-visible { color:var(--blue-600); } [data-hv="hv5"]:hover, [data-hv="hv5"]:focus-visible { box-shadow:var(--shadow-md); border-color:var(--blue-300); } [data-hv="hv6"]:hover, [data-hv="hv6"]:focus-visible { background:rgba(255,255,255,0.10); } [data-hv="hv7"]:hover, [data-hv="hv7"]:focus-visible { background:var(--blue-800); } [data-hv="hv8"]:hover, [data-hv="hv8"]:focus-visible { box-shadow:var(--shadow-md); border-top-color:var(--saffron-400); } [data-hv="hv9"]:hover, [data-hv="hv9"]:focus-visible { box-shadow:var(--shadow-md); } [data-hv="hv10"]:hover, [data-hv="hv10"]:focus-visible { border-color:rgba(255,255,255,0.8); } /* Visible focus for keyboard users — the design has no focus treatment. */ a:focus-visible, button:focus-visible { outline:2px solid var(--blue-500); outline-offset:3px; border-radius:var(--radius-sm); } /* Client login — the nav button added at deploy (not in the design handoff). ⚠ Deliberately NOT inside [data-navlinks], so it stays visible on phones when the section links collapse. A client who bookmarked this host for login is most likely on a phone, and hiding their way in would be the worst possible place to save space. */ [data-hv="hv-login"]:hover, [data-hv="hv-login"]:focus-visible { border-color:var(--blue-300); color:var(--blue-700); } [data-mainnav][data-floating="1"] [data-clientlogin] { font-size:10.5px !important; padding:8px 14px !important; } [data-clientlogin] { transition:font-size 0.7s var(--ease-out), padding 0.7s var(--ease-out); } @media (max-width:460px) { /* Shrink, never hide. Verified at 390px: the button stays reachable. */ [data-clientlogin] { font-size:10px !important; padding:8px 12px !important; letter-spacing:0.08em !important; } } /* ── Small phones ──────────────────────────────────────────────────────────── ⚠ MEASURED, NOT GUESSED: at a 390px viewport the nav rendered 404px wide and the whole page scrolled sideways. The nav holds logo + CLIENT LOGIN + BOOK A DEMO, and below ~480px they cannot all keep their desktop padding. Everything tightens; nothing is dropped, because both buttons are conversion paths. */ @media (max-width:480px) { [data-mainnav] { padding:0 14px !important; } [data-mainnav] > div { gap:10px !important; } [data-navcta] { font-size:10px !important; padding:9px 12px !important; letter-spacing:0.06em !important; } [data-navlogo] { font-size:22px !important; } } /* The stitch layer is decorative and fixed; its paths extend past the viewport by design, so it must never contribute to the document's scroll width. */ [data-threads] { overflow:hidden; } /* ── Hero legibility on phones ─────────────────────────────────────────────── ⚠ A DELIBERATE DEVIATION FROM THE HANDOFF, and the only one. The hero's white bleed is a 90deg gradient: opaque on the left where the copy sits, clear on the right where the photo should show. That is right on a wide screen. On a phone the copy spans the FULL width, so it lands on the clear end of the same gradient and the paragraph reads over the factory photo. Below 760px the veil becomes vertical instead — same colour, same intent, turned through 90 degrees. Desktop, which is where the design was reviewed, is untouched. */ @media (max-width:760px) { section#top > div:nth-of-type(2) { background:linear-gradient(180deg, rgba(251,251,252,0.72) 0%, rgba(251,251,252,0.88) 38%, var(--ink-25) 78%) !important; } }