/* ========================================================================= Arvind Polymers — design system Dark canvas is the primary brand surface; a light theme ships alongside it ([data-theme="light"] on , toggled in the header, stored locally). Principles 1. One type family across the whole hierarchy (Inter 500 / 600 / 700). Hierarchy comes from size, weight and a deliberate line-height contrast: tight on display (1.17 to 1.21), relaxed on body (1.50 to 1.71). 2. No monospace anywhere on the marketing surface. 3. Elevation is surface lift (canvas to surface-1 to surface-2) plus 1px translucent hairlines. No drop shadows on dark. 4. CTAs use 8px corners, never pills, so the system reads engineered. 5. Each product family owns an accent colour used for its pill, its card ground and its CTA. Accents are identity, not decoration. Contents 1 Tokens 2 Reset 3 Type 4 Layout 5 Buttons 6 Header/nav 7 Hero 8 Cards 9 Bento 10 Process 11 Metrics 12 Tables 13 Forms 14 Catalogue 15 Footer/floats 16 Utilities 17 Motion 18 Print ========================================================================= */ /* ---------- 1. Tokens (Light theme default) ---------- */ :root, [data-theme="light"] { color-scheme: light; /* Surfaces */ --canvas: #ffffff; --surface-1: #f4f6f8; --surface-2: #eaedf1; --surface-3: #dfe3e9; --plate: #f2f4f7; --hairline: rgba(16, 19, 24, 0.14); --hairline-soft: rgba(16, 19, 24, 0.08); --hairline-strong: rgba(16, 19, 24, 0.3); /* Ink */ --ink: #0e1116; --ink-muted: #4a515b; --ink-subtle: #5d646e; --inverse-canvas: #0e1116; --inverse-ink: #ffffff; /* Links & semantics */ --link: #1250d1; --link-hover: #0b3ba3; --success: #0f7a4f; --success-bg: rgba(15, 122, 79, 0.1); --danger: #b3261e; --danger-bg: rgba(179, 38, 30, 0.09); /* Product family identity */ --fam-industrial: #3a55c4; --fam-blister: #0b7c8c; --fam-clamshell: #0a7a5a; --fam-esd: #6741d9; --fam-medical: #c32b45; --fam-food: #4a7c0e; --fam-component: #8a6100; /* Ink to place on a family ground */ --on-industrial: #ffffff; --on-blister: #ffffff; --on-clamshell: #ffffff; --on-esd: #ffffff; --on-medical: #ffffff; --on-food: #ffffff; --on-component: #ffffff; /* Type */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --t-display-xl: clamp(2.35rem, 1.15rem + 4.4vw, 5rem); --t-display-lg: clamp(1.95rem, 1.25rem + 2.7vw, 3.5rem); --t-display-md: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem); --t-headline: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); --t-card-title: clamp(1.2rem, 1.1rem + 0.35vw, 1.375rem); --t-subhead: 1.25rem; --t-body-lg: 1.125rem; --t-body: 1rem; --t-body-sm: 0.875rem; --t-caption: 0.8125rem; --t-button: 0.875rem; --t-eyebrow: 0.75rem; /* Space: 8px base */ --sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px; --section: clamp(56px, 7vw, 96px); /* Shape */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-xxl: 24px; --r-pill: 9999px; --container: 1280px; --container-narrow: 800px; --gutter: clamp(20px, 4vw, 48px); --header-h: 64px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Dark theme */ [data-theme="dark"] { color-scheme: dark; --canvas: #000000; --surface-1: #17181c; --surface-2: #202127; --surface-3: #2a2c32; --plate: #141519; --hairline: rgba(178, 182, 189, 0.14); --hairline-soft: rgba(178, 182, 189, 0.08); --hairline-strong: rgba(178, 182, 189, 0.28); --ink: #ffffff; --ink-muted: #b2b6bd; --ink-subtle: #878d97; --inverse-canvas: #ffffff; --inverse-ink: #0a0b0d; --link: #7fa8ff; --link-hover: #a6c4ff; --success: #3ec98a; --success-bg: rgba(62, 201, 138, 0.12); --danger: #ff7a85; --danger-bg: rgba(255, 122, 133, 0.12); --fam-industrial: #4a67e0; --fam-blister: #22b8cf; --fam-clamshell: #20c997; --fam-esd: #7d52e8; --fam-medical: #ff6b81; --fam-food: #94d82d; --fam-component: #fcc419; --on-industrial: #ffffff; --on-blister: #05242a; --on-clamshell: #04251c; --on-esd: #ffffff; --on-medical: #2b0710; --on-food: #15230a; --on-component: #241c00; } /* Blocks that stay dark in both themes carry their own token set. Everything else follows the active theme, so the light theme is genuinely light. */ .on-dark, .cta-band { --canvas: #000000; --surface-1: #17181c; --surface-2: #202127; --surface-3: #2a2c32; --hairline: rgba(178, 182, 189, 0.14); --hairline-soft: rgba(178, 182, 189, 0.08); --hairline-strong: rgba(178, 182, 189, 0.28); --ink: #ffffff; --ink-muted: #b2b6bd; --ink-subtle: #878d97; --inverse-canvas: #ffffff; --inverse-ink: #0a0b0d; --link: #7fa8ff; --link-hover: #a6c4ff; color: var(--ink-muted); } /* Family identity scopes */ [data-fam="industrial"] { --fam: var(--fam-industrial); --on-fam: var(--on-industrial); } [data-fam="blister"] { --fam: var(--fam-blister); --on-fam: var(--on-blister); } [data-fam="clamshell"] { --fam: var(--fam-clamshell); --on-fam: var(--on-clamshell); } [data-fam="esd"] { --fam: var(--fam-esd); --on-fam: var(--on-esd); } [data-fam="medical"] { --fam: var(--fam-medical); --on-fam: var(--on-medical); } [data-fam="food"] { --fam: var(--fam-food); --on-fam: var(--on-food); } [data-fam="component"] { --fam: var(--fam-component); --on-fam: var(--on-component); } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); background: var(--canvas); } body { margin: 0; background: var(--canvas); color: var(--ink-muted); font-family: var(--font); font-size: var(--t-body); font-weight: 500; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, video { display: block; max-width: 100%; } img { height: auto; } svg { display: inline-block; vertical-align: middle; max-width: 100%; } svg:not([width]):not([height]):not(.brand__logo-svg) { width: 24px; height: 24px; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0; } hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-xl) 0; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.19; } ::selection { background: var(--ink); color: var(--canvas); } :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--r-xs); } .skip-link { position: absolute; left: 50%; top: -80px; transform: translateX(-50%); z-index: 300; background: var(--inverse-canvas); color: var(--inverse-ink); padding: 10px 18px; border-radius: 0 0 var(--r-md) var(--r-md); font-size: var(--t-button); font-weight: 600; transition: top 0.18s var(--ease); } .skip-link:focus { top: 0; color: var(--inverse-ink); } /* ---------- 3. Type ---------- */ h1, .h1 { font-size: var(--t-display-lg); line-height: 1.18; letter-spacing: -0.028em; } h2, .h2 { font-size: var(--t-display-md); line-height: 1.19; letter-spacing: -0.025em; } h3, .h3 { font-size: var(--t-headline); line-height: 1.21; letter-spacing: -0.02em; font-weight: 600; } h4, .h4 { font-size: var(--t-card-title); line-height: 1.18; letter-spacing: -0.014em; font-weight: 600; } h5, .h5 { font-size: var(--t-subhead); line-height: 1.35; letter-spacing: -0.008em; font-weight: 600; } .eyebrow { display: block; font-size: var(--t-eyebrow); font-weight: 600; line-height: 1.23; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-subtle); margin: 0 0 var(--sp-md); } .eyebrow--fam { color: var(--fam, var(--ink-subtle)); } .lead { font-size: var(--t-body-lg); line-height: 1.69; color: var(--ink-muted); max-width: 66ch; } .subhead { font-size: var(--t-subhead); line-height: 1.35; color: var(--ink); font-weight: 600; } .small { font-size: var(--t-body-sm); line-height: 1.71; } .tiny { font-size: var(--t-caption); line-height: 1.38; letter-spacing: 0.2px; } .muted { color: var(--ink-muted); } .strong { color: var(--ink); font-weight: 600; } .section-head { max-width: 68ch; margin-bottom: var(--sp-xxl); } .section-head--center { margin-inline: auto; text-align: center; } .section-head p { margin-top: var(--sp-md); } .section-head--center .lead { margin-inline: auto; } .prose { color: var(--ink-muted); } .prose > * + * { margin-top: 1.15em; } .prose h2 { font-size: var(--t-headline); margin-top: 2em; } .prose h3 { font-size: var(--t-card-title); margin-top: 1.6em; } .prose ul, .prose ol { padding-left: 1.25em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: 0.45em; } .prose a { text-decoration: underline; text-underline-offset: 3px; } .prose blockquote { margin: 1.75em 0; padding: var(--sp-lg); background: var(--surface-1); border: 1px solid var(--hairline); border-left: 2px solid var(--hairline-strong); border-radius: var(--r-lg); color: var(--ink); font-size: var(--t-subhead); line-height: 1.5; } .prose blockquote footer { margin-top: 0.6em; font-size: var(--t-body-sm); color: var(--ink-subtle); } .prose img { border-radius: var(--r-lg); } .ticks { list-style: none; display: grid; gap: var(--sp-sm); } .ticks li { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-sm); align-items: start; font-size: var(--t-body-sm); line-height: 1.71; } .ticks li::before { content: ""; width: 16px; height: 16px; margin-top: 0.42em; border-radius: var(--r-xs); background-color: var(--surface-2); border: 1px solid var(--hairline); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b6bd' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 11px; background-position: center; background-repeat: no-repeat; } [data-theme="light"] .ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a515b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } [data-theme="light"] .on-dark .ticks li::before, [data-theme="light"] .section--dark .ticks li::before, [data-theme="light"] .cta-band .ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b6bd' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } /* ---------- 4. Layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section); background: var(--canvas); position: relative; } .section--tight { padding-block: clamp(32px, 4vw, 56px); } .section--muted { background: var(--surface-1); } .section--line { border-top: 1px solid var(--hairline); } .section--dark { background: var(--canvas); } [data-theme="light"] .section--dark { background: var(--surface-1); } [data-theme="light"] .section--dark .metric { background: var(--surface-1); } [data-theme="light"] .section--dark .table-wrap, [data-theme="light"] .section--dark .card { background: var(--canvas); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ink); } .grid { display: grid; gap: var(--sp-lg); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 292px), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); } .split { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.15fr 0.85fr; } .split--wide-right { grid-template-columns: 0.85fr 1.15fr; } .split--sidebar { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } } .split__media img { border-radius: var(--r-xl); width: 100%; border: 1px solid var(--hairline); } .stack > * + * { margin-top: var(--sp-md); } .stack-lg > * + * { margin-top: var(--sp-lg); } .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; } /* ---------- 5. Buttons ---------- */ .btn { --btn-bg: var(--surface-2); --btn-fg: var(--ink); --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs); padding: 11px 18px; min-height: 42px; border: 1px solid var(--btn-bd); border-radius: var(--r-md); background: var(--btn-bg); color: var(--btn-fg); font-size: var(--t-button); font-weight: 600; line-height: 1.29; cursor: pointer; text-align: center; white-space: nowrap; text-decoration: none; transition: background-color 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease), opacity 0.16s var(--ease); } .btn:hover { color: var(--btn-fg); background: var(--surface-3); } .btn svg { width: 16px; height: 16px; flex: none; } .btn--accent, .btn--light, .btn--dark { --btn-bg: var(--inverse-canvas); --btn-fg: var(--inverse-ink); } .btn--accent:hover, .btn--light:hover, .btn--dark:hover { background: var(--inverse-canvas); color: var(--inverse-ink); opacity: 0.86; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--hairline-strong); } .btn--ghost:hover { background: var(--surface-2); color: var(--ink); } .btn--fam { --btn-bg: var(--fam); --btn-fg: var(--on-fam); } .btn--fam:hover { background: var(--fam); color: var(--on-fam); opacity: 0.9; } .btn--sm { padding: 9px 14px; min-height: 40px; font-size: var(--t-caption); } .btn--lg { padding: 14px 22px; min-height: 48px; font-size: var(--t-body); } .btn--block { width: 100%; } .btn[disabled] { opacity: 0.5; pointer-events: none; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-body-sm); font-weight: 600; color: var(--ink); } .link-arrow::after { content: "→"; transition: transform 0.16s var(--ease); } .link-arrow:hover { color: var(--ink); } .link-arrow:hover::after { transform: translateX(3px); } /* ---------- 6. Header / nav ---------- */ .topbar { background: var(--canvas); border-bottom: 1px solid var(--hairline); font-size: var(--t-caption); } @media (max-width: 1079px) { .topbar { display: none !important; } } .topbar__inner { display: flex; flex-wrap: wrap; gap: 4px var(--sp-lg); align-items: center; justify-content: space-between; min-height: 36px; padding-block: 6px; color: var(--ink-muted); } .topbar a { color: var(--ink-muted); } .topbar a:hover { color: var(--ink); } .topbar__list { display: flex; flex-wrap: wrap; gap: 4px var(--sp-lg); list-style: none; align-items: center; } .topbar__list li { display: inline-flex; align-items: center; gap: 6px; } .topbar svg { width: 14px; height: 14px; opacity: 0.7; } .site-header { position: sticky; top: 0; z-index: 100; background: var(--canvas); border-bottom: 1px solid var(--hairline); } .site-header__inner { display: flex; align-items: center; gap: var(--sp-md); min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink); text-decoration: none; transition: opacity 0.2s var(--ease); } .brand:hover { opacity: 0.92; color: var(--ink); } .brand__logo-svg { height: 44px; width: auto; max-width: 210px; display: block; } @media (max-width: 768px) { .brand__logo-svg { height: 38px; max-width: 180px; } } @media (max-width: 480px) { .brand__logo-svg { height: 34px; max-width: 155px; } } .footer__brand-wrap { margin-bottom: var(--sp-md); } .footer__brand .brand__logo-svg { height: 48px; width: auto; max-width: 230px; } [data-theme="light"] .brand__logo-svg .ap-screw-lines { stroke: #ffffff; } [data-theme="dark"] .brand__logo-svg .ap-screw-lines { stroke: var(--canvas, #000000); } .brand__text { display: none; } @media (min-width: 460px) { .brand__text { display: block; line-height: 1.15; } } .brand__name { display: block; font-size: var(--t-body-sm); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .brand__tag { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-subtle); } .nav { display: none; } .nav__list { display: flex; align-items: center; gap: 2px; list-style: none; } .nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--r-md); font-size: var(--t-body-sm); font-weight: 600; color: var(--ink-muted); white-space: nowrap; } .nav__link:hover { background: var(--surface-2); color: var(--ink); } .nav__link[aria-current="page"] { color: var(--ink); background: var(--surface-1); } .nav__item { position: relative; } .nav__caret { width: 13px; height: 13px; opacity: 0.7; transition: transform 0.16s var(--ease); } .nav__item--has-menu:hover .nav__caret, .nav__item--has-menu.is-open .nav__caret { transform: rotate(180deg); } .nav__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; padding: var(--sp-xs); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); list-style: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s; } .nav__item--has-menu:hover .nav__menu, .nav__item--has-menu:focus-within .nav__menu, .nav__item--has-menu.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; } .nav__menu a { display: block; padding: 10px 12px; border-radius: var(--r-md); color: var(--ink); font-size: var(--t-body-sm); font-weight: 600; } .nav__menu a:hover { background: var(--surface-2); color: var(--ink); } .nav__menu span { display: block; font-weight: 500; font-size: var(--t-caption); color: var(--ink-subtle); margin-top: 2px; } .header__cta { display: none; gap: var(--sp-xs); align-items: center; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink-muted); cursor: pointer; flex: none; } .theme-toggle:hover { background: var(--surface-2); color: var(--ink); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle__moon { display: none; } [data-theme="light"] .theme-toggle__moon { display: block; } [data-theme="light"] .theme-toggle__sun { display: none; } .theme-toggle--desktop { display: inline-flex; } .theme-toggle--mobile { display: inline-flex; } .nav-toggle { display: inline-flex; align-items: center; gap: var(--sp-xs); padding: 8px 12px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md); color: var(--ink); font-size: var(--t-caption); font-weight: 600; cursor: pointer; } .nav-toggle svg { width: 18px; height: 18px; } @media (min-width: 1080px) { .nav { display: block; } .header__cta { display: inline-flex; } .nav-toggle { display: none; } .theme-toggle--mobile { display: none !important; } } @media (max-width: 1079px) { .theme-toggle--desktop { display: none !important; } } .drawer { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr; background: var(--canvas); transform: translateX(100%); transition: transform 0.26s var(--ease); overflow-y: auto; visibility: hidden; } .drawer.is-open { transform: none; visibility: visible; } .drawer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-md) var(--gutter); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; background: var(--canvas); } .drawer__close { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 8px 12px; color: var(--ink); font-size: var(--t-caption); font-weight: 600; cursor: pointer; } .drawer__close svg { width: 18px; height: 18px; } .drawer__body { padding: var(--sp-lg) var(--gutter) var(--sp-xxl); } .drawer__list { list-style: none; display: grid; } .drawer__list > li > a, .drawer__group > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xs); padding: 14px 2px; font-size: var(--t-subhead); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--hairline); cursor: pointer; } .drawer__group > summary { list-style: none; } .drawer__group > summary::-webkit-details-marker { display: none; } .drawer__list > li > a svg, .drawer__group > summary svg { width: 16px; height: 16px; flex: none; color: var(--ink-subtle); transition: transform 0.16s var(--ease); } .drawer__group[open] > summary svg { transform: rotate(180deg); } .drawer__sub { list-style: none; padding: 6px 0 12px 2px; display: grid; } .drawer__sub a { display: block; padding: 10px 8px; color: var(--ink-muted); font-size: var(--t-body-sm); font-weight: 500; border-radius: var(--r-md); } .drawer__sub a:hover { background: var(--surface-1); color: var(--ink); } .drawer__actions { display: grid; gap: var(--sp-sm); margin-top: var(--sp-lg); } body.no-scroll { overflow: hidden; } /* ---------- 7. Hero ---------- */ .hero { position: relative; background: var(--canvas); border-bottom: 1px solid var(--hairline); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 75% 15%, rgba(229, 37, 42, 0.10), transparent 65%), radial-gradient(ellipse 60% 55% at 20% 0%, rgba(74, 103, 224, 0.14), transparent 70%), radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 32px 32px; -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 30%, black 40%, transparent 95%); mask-image: radial-gradient(ellipse 90% 85% at 50% 30%, black 40%, transparent 95%); pointer-events: none; z-index: 0; } [data-theme="light"] .hero::before { background: radial-gradient(ellipse 60% 50% at 80% 15%, rgba(229, 37, 42, 0.05), transparent 65%), radial-gradient(ellipse 65% 55% at 15% 5%, rgba(74, 103, 224, 0.07), transparent 70%), radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 32px 32px; } .hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(24px, 4vw, 40px); padding-block: clamp(56px, 8vw, 104px); } .hero__copy { min-width: 0; max-width: 62rem; } .hero__copy h1 { max-width: 20ch; } .hero h1 { font-size: var(--t-display-xl); line-height: 1.17; letter-spacing: -0.032em; color: var(--ink); } .hero h1 em { font-style: normal; color: var(--ink-subtle); } .hero__lead { margin-top: var(--sp-lg); font-size: var(--t-body-lg); line-height: 1.69; color: var(--ink-muted); max-width: 56ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-xl); } .hero__proof { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-lg); margin-top: var(--sp-xl); padding-top: var(--sp-xl); border-top: 1px solid var(--hairline); } .hero__stat-num { display: block; font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; color: var(--ink); white-space: nowrap; } .hero__stat-num b { color: #E5252A; font-weight: 700; font-size: 0.85em; margin-left: 2px; } .hero__stat-label { display: block; margin-top: 8px; font-size: var(--t-caption); font-weight: 500; color: var(--ink-muted); line-height: 1.35; } .hero__badge { display: inline-flex; align-items: center; gap: var(--sp-xs); padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--hairline); font-size: var(--t-caption); font-weight: 500; color: var(--ink-muted); margin-bottom: var(--sp-md); } .hero__badge b { color: var(--ink); font-weight: 600; } /* Marquee / infinite-scroll ticker */ .marquee { overflow: hidden; padding: var(--sp-md) 0; border-top: 1px solid var(--hairline); background: var(--canvas); display: flex; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee--light { background: var(--surface-1); } .marquee__track { display: flex; gap: var(--sp-xl); flex-shrink: 0; padding-right: var(--sp-xl); animation: marquee-scroll 32s linear infinite; will-change: transform; } .marquee__item { flex: none; font-size: var(--t-body-sm); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-subtle); white-space: nowrap; } .marquee__item::after { content: "\00b7"; margin-left: var(--sp-xl); color: var(--hairline-strong); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* Breadcrumbs */ .crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; font-size: var(--t-caption); color: var(--ink-subtle); } .crumbs li { display: flex; align-items: center; } .crumbs li + li::before { content: "/"; margin: 0 var(--sp-xs); color: var(--ink-subtle); opacity: 0.5; } .crumbs a { color: var(--link); text-decoration: none; font-weight: 500; } .crumbs a:hover { text-decoration: underline; } .crumbs [aria-current="page"] { color: var(--ink-muted); font-weight: 600; } /* Page hero (interior pages) */ .page-hero { padding-block: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 40px); background: var(--canvas); border-bottom: 1px solid var(--hairline); } .page-hero h1 { font-size: var(--t-display-md); letter-spacing: -0.028em; line-height: 1.2; color: var(--ink); margin-top: var(--sp-sm); } .page-hero p { color: var(--ink-muted); font-size: var(--t-body); line-height: 1.6; max-width: 62ch; margin-top: var(--sp-sm); } .page-hero__grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-lg); margin-top: var(--sp-xs); } .page-hero__aside { margin-left: auto; flex: none; } .plant-band { background: var(--canvas); border-bottom: 1px solid var(--hairline); padding-bottom: var(--sp-xl); } .plant-band .container { position: relative; } .plant-band img { width: 100%; max-width: 1140px; aspect-ratio: 21 / 9; max-height: 480px; object-fit: cover; object-position: center 52%; margin-inline: auto; border-radius: var(--r-xl); border: 1px solid var(--hairline-strong); box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.45); } @media (max-width: 768px) { .plant-band img { aspect-ratio: 16 / 10; max-height: 320px; } } .plant-band figcaption { max-width: 1140px; margin: var(--sp-sm) auto 0; font-size: var(--t-caption); color: var(--ink-subtle); display: flex; align-items: center; gap: 8px; } .feature-row { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } .feature-row + .feature-row { margin-top: clamp(40px, 6vw, 80px); } @media (min-width: 900px) { .feature-row { grid-template-columns: 0.95fr 1.05fr; } .feature-row--flip .feature-row__media { order: 2; } } .feature-row__media { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--hairline-strong); background: var(--surface-1); box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.35); } .feature-row__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; transition: transform 0.4s var(--ease); display: block; } .feature-row:hover .feature-row__media img { transform: scale(1.03); } .cat-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); height: 100%; color: var(--ink-muted); transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); } .cat-card:hover { background: var(--surface-2); border-color: var(--hairline-strong); color: var(--ink-muted); transform: translateY(-2px); } .cat-card__img { aspect-ratio: 16 / 11; background: var(--plate); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cat-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform 0.35s var(--ease); } .cat-card:hover .cat-card__img img { transform: scale(1.05); } .cat-card__body { padding: var(--sp-lg); display: grid; gap: var(--sp-xs); flex: 1; align-content: start; } .cat-card__body h3 { font-size: var(--t-card-title); color: var(--ink); } .cat-card__body p { font-size: var(--t-body-sm); line-height: 1.71; } .cat-card__meta { margin-top: auto; padding-top: var(--sp-sm); font-size: var(--t-caption); color: var(--ink-subtle); } .steps { display: grid; gap: var(--sp-lg); counter-reset: step; } @media (min-width: 760px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1060px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } .steps--5 { grid-template-columns: repeat(5, 1fr); } } .step { counter-increment: step; padding-top: var(--sp-xl); position: relative; } .step::before { content: "0" counter(step); position: absolute; top: 0; left: 0; font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.6px; color: var(--ink-subtle); } .step h3 { font-size: var(--t-card-title); color: var(--ink); margin-bottom: 6px; } .step p { font-size: var(--t-body-sm); line-height: 1.71; color: var(--ink-muted); } .timeline { list-style: none; display: grid; } .timeline li { position: relative; padding: 0 0 var(--sp-lg) var(--sp-lg); border-left: 1px solid var(--hairline); } .timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-subtle); } .timeline b { display: block; color: var(--ink); font-size: var(--t-card-title); font-weight: 600; letter-spacing: -0.014em; } .timeline span { display: block; margin-top: 4px; font-size: var(--t-body-sm); line-height: 1.71; color: var(--ink-muted); } .quote-card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-lg); height: 100%; display: grid; gap: var(--sp-sm); align-content: start; } .quote-card p { color: var(--ink-muted); font-size: var(--t-body-sm); line-height: 1.71; } .quote-card footer { font-size: var(--t-caption); color: var(--ink-subtle); } .quote-card footer b { display: block; color: var(--ink); font-size: var(--t-body-sm); } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink-muted); font-size: var(--t-caption); font-weight: 600; white-space: nowrap; } .chip--accent, .chip--navy { color: var(--ink); } .chip--outline { background: transparent; } .accordion { display: grid; gap: var(--sp-sm); } .acc { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; } .acc[open] { background: var(--surface-2); } .acc > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); cursor: pointer; font-size: var(--t-body); font-weight: 600; color: var(--ink); list-style: none; } .acc > summary::-webkit-details-marker { display: none; } .acc > summary::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; opacity: 0.5; clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%); } .acc[open] > summary::after { clip-path: polygon(0 46%, 100% 46%, 100% 54%, 0 54%); } .acc__body { padding: 0 var(--sp-lg) var(--sp-lg); font-size: var(--t-body-sm); line-height: 1.71; color: var(--ink-muted); } .acc__body > * + * { margin-top: var(--sp-sm); } .cta-band { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-xxl); padding: clamp(24px, 4vw, 48px); } .cta-band h2 { color: var(--ink); } .cta-band p { color: var(--ink-muted); } .cta-band__grid { display: grid; gap: var(--sp-lg); align-items: center; } @media (min-width: 900px) { .cta-band__grid { grid-template-columns: 1.35fr 0.65fr; } } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); } @media (min-width: 900px) { .cta-band__actions { justify-content: flex-end; } } .note { background: var(--surface-1); border: 1px solid var(--hairline); border-left: 2px solid var(--hairline-strong); border-radius: var(--r-md); padding: var(--sp-md) var(--sp-lg); font-size: var(--t-body-sm); line-height: 1.71; color: var(--ink-muted); } .note--accent { border-left-color: var(--fam, var(--ink-subtle)); } .sidebar-card { position: static; } @media (min-width: 960px) { .sidebar-card { position: sticky; top: calc(var(--header-h) + 24px); } } /* ---------- 8. Cards ---------- */ .card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-lg); color: var(--ink-muted); text-decoration: none; } .card h3, .card h4 { color: var(--ink); font-size: var(--t-card-title); margin-top: var(--sp-sm); } .card p { font-size: var(--t-body-sm); line-height: 1.71; margin-top: var(--sp-xs); } .card--hover { transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); } .card--hover:hover { background: var(--surface-2); border-color: var(--hairline-strong); transform: translateY(-2px); } .card__link { display: block; } /* Icon badges — contained 40 × 40 circles with small 20px icons */ .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); color: var(--link); flex-shrink: 0; } .icon-badge svg { width: 22px; height: 22px; } .icon-badge--accent { background: rgba(127, 168, 255, 0.12); color: var(--link); } [data-theme="light"] .icon-badge { background: rgba(74, 103, 224, 0.08); color: var(--fam-industrial); } [data-theme="light"] .icon-badge--accent { background: rgba(74, 103, 224, 0.10); color: var(--fam-industrial); } /* Tick lists (feature lists with checkmarks) */ .ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-sm); } .ticks li { display: flex; gap: var(--sp-sm); font-size: var(--t-body-sm); line-height: 1.71; color: var(--ink-muted); } .ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; background: var(--success); border-radius: 50%; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); -webkit-mask-size: 12px; mask-size: 12px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Section headings */ .section-head { max-width: 52rem; margin-bottom: clamp(24px, 4vw, 48px); } .section-head .eyebrow { margin-bottom: var(--sp-sm); } .section-head .lead { margin-top: var(--sp-sm); } /* ---------- 9. Bento (product families showcase) ---------- */ .bento { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; } @media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(240px, auto); } .bento__cell--big { grid-column: span 2; grid-row: span 2; } .bento__cell--wide { grid-column: span 2; } } .bento__cell { position: relative; display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: var(--sp-lg); overflow: hidden; color: var(--ink); text-decoration: none; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease; box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.18); } .bento__cell:hover { transform: translateY(-4px); border-color: var(--hairline-strong); background: var(--surface-2); box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.35); color: var(--ink); } /* Subtle ambient corner glow corresponding to family accent */ .bento__glow { position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--fam, rgba(74, 103, 224, 0.3)), transparent 70%); opacity: 0.22; filter: blur(20px); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; } .bento__cell:hover .bento__glow { opacity: 0.45; transform: scale(1.2); } .bento__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); margin-bottom: var(--sp-sm); z-index: 1; } .bento__num { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.04em; color: var(--fam, var(--link)); text-transform: uppercase; } .bento__count { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink-muted); } .bento__body { display: flex; flex-direction: column; gap: 4px; z-index: 1; } .bento__cell h3 { font-size: var(--t-card-title); color: var(--ink); line-height: 1.25; letter-spacing: -0.015em; } .bento__cell--big h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -0.025em; } .bento__desc { font-size: var(--t-body-sm); color: var(--ink-muted); line-height: 1.6; max-width: 44ch; margin-top: 4px; } .bento__body .link-arrow { margin-top: 6px; font-size: var(--t-caption); font-weight: 600; color: var(--link); } .bento__media { position: relative; margin-top: var(--sp-md); aspect-ratio: 16 / 10; width: 100%; border-radius: var(--r-lg); background: var(--plate); border: 1px solid var(--hairline); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 12px; } .bento__cell--big .bento__media { aspect-ratio: 16 / 11; margin-top: auto; padding: 16px; } .bento__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.20)); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .bento__cell:hover .bento__media img { transform: scale(1.05); } /* ---------- 10. Process rail ---------- */ .proc__grid { display: grid; gap: clamp(24px, 4vw, 56px); } .proc__aside { position: relative; } @media (min-width: 960px) { .proc__grid { grid-template-columns: 0.82fr 1.18fr; align-items: start; } .proc__aside { position: sticky; top: calc(var(--header-h) + 32px); } } @media (max-width: 959px) { .proc__aside { position: relative !important; top: auto !important; } } .proc__meter { margin-top: var(--sp-lg); height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; } .proc__meter i { display: block; height: 100%; width: var(--p, 0%); background: var(--ink); transition: width 0.35s var(--ease); } .proc__list { list-style: none; counter-reset: proc; display: grid; } .proc__item { counter-increment: proc; display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-md); padding: var(--sp-lg) 0; border-top: 1px solid var(--hairline); opacity: 0.5; transition: opacity 0.35s var(--ease); } @media (max-width: 959px) { .proc__item { opacity: 1 !important; padding: var(--sp-md) 0; } } .proc__item:last-child { border-bottom: 1px solid var(--hairline); } .proc__item.is-active { opacity: 1; } .proc__item::before { content: "0" counter(proc); font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.6px; color: var(--ink-subtle); padding-top: 4px; } .proc__item h3 { font-size: var(--t-card-title); color: var(--ink); } .proc__item p { margin-top: 6px; font-size: var(--t-body-sm); line-height: 1.71; color: var(--ink-muted); } /* ---------- 11. Metrics ---------- */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; } .metric { background: var(--canvas); padding: var(--sp-xl) var(--sp-lg); } .section--muted .metric { background: var(--surface-1); } .metric b { display: block; font-size: var(--t-display-md); font-weight: 700; line-height: 1.19; letter-spacing: -0.03em; color: var(--ink); } .metric span { display: block; margin-top: var(--sp-xs); font-size: var(--t-caption); color: var(--ink-subtle); } .metric i { display: none; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--sp-lg); } .kpi b { display: block; font-size: var(--t-display-md); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1.19; } .kpi span { display: block; margin-top: 6px; font-size: var(--t-caption); color: var(--ink-subtle); } /* ---------- 12. Tables ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface-1); -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: var(--t-body-sm); min-width: 560px; color: var(--ink-muted); } table.data caption { caption-side: bottom; padding: var(--sp-sm) var(--sp-lg); color: var(--ink-subtle); font-size: var(--t-caption); text-align: left; border-top: 1px solid var(--hairline-soft); } table.data th, table.data td { padding: 12px var(--sp-lg); text-align: left; vertical-align: top; } table.data thead th { background: var(--surface-2); color: var(--ink); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--hairline); } table.data tbody tr + tr { border-top: 1px solid var(--hairline-soft); } table.data tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; } table.data tbody tr:hover { background: var(--surface-2); } .spec-list { list-style: none; border-top: 1px solid var(--hairline); } .spec-list li { display: grid; grid-template-columns: 85px 1fr; gap: var(--sp-xs) var(--sp-sm); padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); font-size: var(--t-body-sm); min-width: 0; } .spec-list b { color: var(--ink-subtle); font-weight: 500; } .spec-list span { color: var(--ink); font-weight: 600; min-width: 0; word-break: break-word; overflow-wrap: anywhere; } /* Editorial / Article cards (16:9 aspect ratio) */ .article-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; height: 100%; color: var(--ink-muted); text-decoration: none; transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); } .article-card:hover { background: var(--surface-2); border-color: var(--hairline-strong); transform: translateY(-2px); } .article-card__img { aspect-ratio: 16 / 9; width: 100%; background: var(--surface-2); position: relative; overflow: hidden; display: block; } .article-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s var(--ease); } .article-card:hover .article-card__img img { transform: scale(1.05); } .article-card__body { padding: var(--sp-lg); display: flex; flex-direction: column; flex: 1; gap: var(--sp-xs); } .article-card__body h3 { font-size: var(--t-card-title); color: var(--ink); margin-top: var(--sp-xs); } .article-card__body p { font-size: var(--t-body-sm); line-height: 1.68; } .article-card__meta { margin-top: auto; font-size: var(--t-caption); color: var(--ink-subtle); } .article-hero-media { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--hairline); background: var(--surface-1); margin-bottom: var(--sp-md); } .article-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- 13. Forms ---------- */ .form-grid { display: grid; gap: var(--sp-md); } @media (min-width: 700px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid--3 { grid-template-columns: repeat(3, 1fr); } .span-2 { grid-column: span 2; } } .field { display: grid; gap: 6px; } .field > label { font-size: var(--t-body-sm); font-weight: 600; color: var(--ink); } .field .hint, .hint { font-size: var(--t-caption); color: var(--ink-subtle); } .req { color: var(--danger); } .input, .select, .textarea { width: 100%; padding: 11px 14px; min-height: 44px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface-1); color: var(--ink); font-size: var(--t-body); transition: border-color 0.14s var(--ease), background-color 0.14s var(--ease); } .textarea { min-height: 128px; resize: vertical; line-height: 1.6; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878d97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; } .input::placeholder, .textarea::placeholder { color: var(--ink-subtle); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--link); background: var(--surface-2); } .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); } .field__error { font-size: var(--t-caption); color: var(--danger); font-weight: 600; } .check-row { display: flex; flex-wrap: wrap; gap: var(--sp-xs); } .check { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); font-size: var(--t-body-sm); font-weight: 600; color: var(--ink-muted); background: var(--surface-1); cursor: pointer; } .check:has(input:checked) { border-color: var(--ink); color: var(--ink); background: var(--surface-2); } .filedrop { display: block; position: relative; border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); background: var(--surface-1); padding: var(--sp-lg); text-align: center; cursor: pointer; transition: border-color 0.14s var(--ease), background-color 0.14s var(--ease); } .filedrop:hover, .filedrop.is-hover { border-color: var(--ink); background: var(--surface-2); } .filedrop input { position: absolute; width: 1px; height: 1px; opacity: 0; } .filedrop > svg { width: 22px; height: 22px; margin: 0 auto var(--sp-xs); color: var(--ink-muted); } .filedrop b { display: block; color: var(--ink); font-size: var(--t-body-sm); } .filedrop > span { display: block; font-size: var(--t-caption); color: var(--ink-subtle); } .filedrop__names { margin-top: var(--sp-xs); font-size: var(--t-caption); color: var(--ink); word-break: break-all; } .form-status { display: none; border-radius: var(--r-md); padding: 12px var(--sp-md); font-size: var(--t-body-sm); font-weight: 600; } .form-status.is-shown { display: block; } .form-status--ok { background: var(--success-bg); color: var(--success); border: 1px solid var(--hairline); } .form-status--err { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--hairline); } fieldset { border: 0; padding: 0; margin: 0; } legend { font-size: var(--t-card-title); font-weight: 600; color: var(--ink); padding: 0; margin-bottom: var(--sp-md); letter-spacing: -0.014em; } /* ---------- 14. Catalogue (Modern compact filter bar) ---------- */ .filters { position: sticky; top: var(--header-h); z-index: 20; background: color-mix(in srgb, var(--canvas) 92%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--hairline); padding: 10px 0; transition: box-shadow 0.2s ease; } .filters__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; } .filter-search { position: relative; flex: 1 1 260px; min-width: 180px; } .filter-search input { width: 100%; padding: 8px 14px 8px 36px; min-height: 38px; font-size: var(--t-body-sm); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-pill); color: var(--ink); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .filter-search input:focus { border-color: var(--link); box-shadow: 0 0 0 3px rgba(18, 80, 209, 0.15); outline: none; } .filter-search svg, .filter-search .filter-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-subtle); pointer-events: none; } .filter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 1 auto; } .filter-select { position: relative; display: inline-flex; align-items: center; } .filter-select select { appearance: none; -webkit-appearance: none; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 8px 34px 8px 14px; min-height: 38px; font-size: var(--t-caption); font-weight: 600; color: var(--ink); cursor: pointer; outline: none; transition: all 0.18s var(--ease); } .filter-select select:hover { background: var(--surface-2); border-color: var(--hairline-strong); } .filter-select select:focus { border-color: var(--link); box-shadow: 0 0 0 3px rgba(18, 80, 209, 0.15); } .filter-select .select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; color: var(--ink-subtle); } .filters__meta { display: inline-flex; align-items: center; gap: 8px; } .filters__count { font-size: var(--t-caption); color: var(--ink-muted); font-weight: 500; white-space: nowrap; } .filters__count strong { color: var(--ink); font-weight: 700; } .filter-reset-btn { display: inline-flex; align-items: center; padding: 6px 12px; min-height: 34px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink-muted); font-size: var(--t-caption); font-weight: 600; cursor: pointer; transition: all 0.18s var(--ease); } .filter-reset-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--hairline-strong); } @media (max-width: 640px) { .filters__bar { display: flex; flex-direction: column; gap: 8px; } .filter-search { width: 100%; flex: 1 1 100%; } .filter-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; } .filter-select { position: relative; display: block; width: 100%; } .filter-select select { width: 100%; padding: 7px 26px 7px 10px; font-size: 0.75rem; min-height: 36px; } .filter-select .select-caret { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 12px !important; height: 12px !important; max-width: 12px !important; max-height: 12px !important; pointer-events: none; } .filters__count { display: none; } .filter-reset-btn { min-height: 36px; padding: 6px 10px; font-size: 0.75rem; } } .prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 252px), 1fr)); gap: var(--sp-md); } @media (max-width: 560px) { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .prod__body { padding: 10px; } .prod__body h3 { font-size: 0.875rem; } .prod__body p { font-size: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .btn-add { padding: 6px 8px; min-height: 32px; font-size: 0.75rem; } .btn-add .btn-add__label { font-size: 0.72rem; } } @media (max-width: 380px) { .prod-grid { grid-template-columns: 1fr; } } .prod { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); } .prod:hover { background: var(--surface-2); border-color: var(--hairline-strong); transform: translateY(-2px); } .prod.is-hidden { display: none; } .prod__media { position: relative; aspect-ratio: 4 / 3; background: var(--plate); overflow: hidden; display: flex; align-items: center; justify-content: center; } .prod__media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform 0.3s var(--ease); } .prod:hover .prod__media img { transform: scale(1.05); } .prod__zoom { position: absolute; right: var(--sp-xs); top: var(--sp-xs); width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink); cursor: pointer; opacity: 0; transition: opacity 0.14s var(--ease); } .prod:hover .prod__zoom, .prod__zoom:focus-visible { opacity: 1; } .prod__zoom svg { width: 16px; height: 16px; } .prod__tag { position: absolute; left: var(--sp-xs); bottom: var(--sp-xs); padding: 3px 8px; border-radius: var(--r-pill); background: var(--fam, var(--surface-3)); color: var(--on-fam, var(--ink)); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.4px; } .prod__body { padding: var(--sp-md); display: grid; gap: 6px; flex: 1; align-content: start; } .prod__body h3 { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.012em; color: var(--ink); } .prod__body h3 a { color: inherit; } .prod__body p { font-size: var(--t-caption); line-height: 1.5; color: var(--ink-muted); } .prod__meta { display: flex; flex-wrap: wrap; gap: 4px; } .prod__foot { margin-top: auto; padding-top: var(--sp-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xs); } .prod__foot .link-arrow { font-size: var(--t-caption); } .btn-add { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--t-caption); font-weight: 600; color: var(--ink-muted); cursor: pointer; } .btn-add svg { width: 13px; height: 13px; } .btn-add:hover { color: var(--ink); border-color: var(--hairline-strong); } .btn-add.is-added { background: var(--success-bg); color: var(--success); } .empty-state { display: none; text-align: center; padding: clamp(32px, 6vw, 64px) var(--sp-lg); border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); background: var(--surface-1); } .empty-state.is-shown { display: block; } .tray { position: fixed; right: var(--gutter); bottom: var(--sp-lg); z-index: 90; display: none; align-items: center; gap: var(--sp-sm); padding: 10px 12px 10px var(--sp-md); background: var(--inverse-canvas); color: var(--inverse-ink); border-radius: var(--r-lg); border: 1px solid var(--hairline); font-size: var(--t-body-sm); } .tray.is-shown { display: flex; } .tray b { font-weight: 600; } .tray__count { background: var(--inverse-ink); color: var(--inverse-canvas); border-radius: var(--r-pill); padding: 1px 8px; font-size: var(--t-caption); font-weight: 700; } .tray .btn--accent { --btn-bg: var(--inverse-ink); --btn-fg: var(--inverse-canvas); } .tray__clear { background: none; border: 0; color: var(--inverse-ink); opacity: 0.65; cursor: pointer; font-size: var(--t-caption); text-decoration: underline; } .tray__clear:hover { opacity: 1; } @media (max-width: 700px) { .tray { bottom: 72px; left: var(--gutter); right: var(--gutter); justify-content: space-between; } } .lightbox { position: fixed; inset: 0; z-index: 250; display: none; place-items: center; padding: clamp(16px, 4vw, 48px); background: rgba(0, 0, 0, 0.9); } .lightbox.is-open { display: grid; } .lightbox img { max-width: min(96vw, 1000px); max-height: 84vh; width: auto; border-radius: var(--r-lg); background: #fff; } .lightbox figcaption { color: #b2b6bd; text-align: center; margin-top: var(--sp-sm); font-size: var(--t-body-sm); } .lightbox__close { position: absolute; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid rgba(178, 182, 189, 0.3); background: #17181c; color: #fff; cursor: pointer; display: grid; place-items: center; } .lightbox__close svg { width: 20px; height: 20px; } /* ---------- 15. Footer & floats ---------- */ .site-footer { background: var(--canvas); border-top: 1px solid var(--hairline); padding-top: clamp(48px, 6vw, 72px); font-size: var(--t-body-sm); } .site-footer h4 { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: var(--sp-md); } .site-footer a { color: var(--ink-muted); } .site-footer a:hover { color: var(--ink); } .footer__grid { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 1fr; } @media (min-width: 700px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } } .footer__brand { font-size: var(--t-card-title); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } .footer__list { list-style: none; display: grid; gap: 10px; font-size: var(--t-caption); } .footer__contact { display: grid; gap: var(--sp-sm); font-size: var(--t-caption); } .footer__contact div { display: grid; grid-template-columns: 18px 1fr; gap: 8px; } .footer__contact svg { width: 15px; height: 15px; margin-top: 2px; color: var(--ink-subtle); } .social { display: flex; gap: var(--sp-xs); margin-top: var(--sp-md); } .social a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: var(--r-md); color: var(--ink-muted); background: var(--surface-1); } .social a:hover { background: var(--surface-2); color: var(--ink); } .social svg { width: 16px; height: 16px; } .footer__bottom { margin-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--hairline); padding-block: var(--sp-lg); display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-lg); align-items: center; justify-content: space-between; font-size: var(--t-caption); color: var(--ink-subtle); } .footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-md); } .mobile-bar { position: fixed; inset: auto 0 0 0; z-index: 95; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--canvas); border-top: 1px solid var(--hairline); padding-bottom: env(safe-area-inset-bottom); } .mobile-bar a { display: grid; place-items: center; gap: 2px; padding: 10px 6px; font-size: 0.6875rem; font-weight: 600; color: var(--ink-muted); } .mobile-bar a + a { border-left: 1px solid var(--hairline); } .mobile-bar svg { width: 18px; height: 18px; } .mobile-bar a.is-primary { color: var(--ink); } @media (min-width: 701px) { .mobile-bar { display: none; } } @media (max-width: 700px) { body { padding-bottom: 60px; } } .wa-float { position: fixed; left: var(--gutter); bottom: var(--sp-lg); z-index: 88; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--hairline); color: var(--ink); display: grid; place-items: center; } .wa-float:hover { background: var(--surface-2); color: var(--ink); } .wa-float svg { width: 22px; height: 22px; } @media (max-width: 700px) { .wa-float { display: none; } } .to-top { position: fixed; right: var(--gutter); bottom: calc(var(--sp-lg) + 56px); z-index: 86; width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink); display: grid; place-items: center; opacity: 0; visibility: hidden; cursor: pointer; transition: opacity 0.18s var(--ease), visibility 0.18s; } .to-top.is-shown { opacity: 1; visibility: visible; } .to-top svg { width: 18px; height: 18px; } @media (max-width: 700px) { .to-top { display: none; } } .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--ink); z-index: 150; pointer-events: none; } /* ---------- 16. Utilities ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .center { text-align: center; } .nowrap { white-space: nowrap; } .full { width: 100%; } .mt-2 { margin-top: var(--sp-xs); } .mt-3 { margin-top: var(--sp-md); } .mt-4 { margin-top: var(--sp-lg); } .mt-5 { margin-top: var(--sp-xl); } .mt-6 { margin-top: var(--sp-xxl); } .mb-3 { margin-bottom: var(--sp-md); } .mb-4 { margin-bottom: var(--sp-lg); } .mb-5 { margin-bottom: var(--sp-xl); } .mt-0 { margin-top: 0 !important; } .rounded { border-radius: var(--r-md); } .rounded-lg { border-radius: var(--r-lg); } .shadow { box-shadow: none; } .cover { width: 100%; height: 100%; object-fit: cover; } .divider { height: 1px; background: var(--hairline); border: 0; } .logo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; } .logo-strip div { background: var(--surface-1); padding: var(--sp-md); display: grid; place-items: center; text-align: center; font-size: var(--t-caption); font-weight: 600; color: var(--ink-subtle); } .map-frame { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1); } .map-frame iframe { width: 100%; height: clamp(260px, 40vw, 420px); border: 0; display: block; } /* ---------- 17. Motion ---------- */ [data-reveal] { opacity: 0; transform: translateY(18px); will-change: opacity, transform; transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal="right"] { transform: translateX(20px); } [data-reveal="right"].is-in { transform: none; } [data-reveal="clip"] { transform: none; } [data-reveal][data-delay="1"] { transition-delay: 0.05s; } [data-reveal][data-delay="2"] { transition-delay: 0.10s; } [data-reveal][data-delay="3"] { transition-delay: 0.15s; } [data-reveal][data-delay="4"] { transition-delay: 0.20s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1; transform: none; } .marquee__track { animation: none; } } /* Retired decorations from the previous iteration, neutralised so any left-over markup cannot reintroduce gradients, grain or tick marks. */ .hero__bg, .hero__blueprint, .hero__glow, .hero__stat, .trustbar { display: none !important; } .duo::after, .duo::before, .glowable::before, .ticked::before, .ticked::after { content: none !important; display: none !important; } .duo img { filter: none !important; } /* ---------- 18. Print ---------- */ @media print { :root { --canvas: #fff; --ink: #000; --ink-muted: #222; --ink-subtle: #444; --surface-1: #fff; --surface-2: #fff; --hairline: #ccc; } .site-header, .topbar, .mobile-bar, .wa-float, .to-top, .tray, .filters, .social, .scroll-progress { display: none !important; } body { background: #fff; color: #000; } .section { padding-block: 16px; } .card, .prod, .table-wrap { border: 1px solid #ccc; break-inside: avoid; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; } }