/* ========================================================================== Tradewind Deep night blue and warm lamp amber; Archivo, set wide for display and normal for reading. Dark cinematic sections (the sculpture, the tour, the yard, the request) alternate with warm paper ones (numbers, products, certificates), so the page reads as a factory at night and the catalogue by day. ========================================================================== */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../fonts/archivo-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; } :root { --ink: #05070c; --ink-2: #0a0e17; --ink-3: #121826; --ink-4: #1b2334; --paper: #f3efe7; --paper-2: #e9e3d7; --paper-3: #ddd5c5; --on-d: #eef1f6; --mute-d: #97a1b3; --line-d: rgba(255, 255, 255, 0.1); --on-l: #0b0f18; --mute-l: #5a6070; --line-l: rgba(11, 15, 24, 0.12); --amber: #ffb04a; --amber-2: #ff7a2f; --amber-3: #ffd79a; --amber-ink: #8a3f00; --glow: 0 0 0 1px rgba(255, 176, 74, 0.5), 0 10px 40px -8px rgba(255, 122, 47, 0.65); --grad: linear-gradient(120deg, var(--amber-3) 0%, var(--amber) 38%, var(--amber-2) 100%); --f: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif; --wide: 118%; --r: 18px; --r-lg: 28px; --ease: cubic-bezier(0.2, 0.7, 0.1, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --gut: clamp(1.1rem, 4vw, 3.5rem); --mast-h: 112px; color-scheme: dark light; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; } body { margin: 0; background: var(--paper); color: var(--on-l); font: 400 1.0625rem/1.65 var(--f); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.05; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } ::selection { background: var(--amber); color: var(--ink); } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; } .defs { position: absolute; width: 0; height: 0; } .screen-reader-text, .hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--amber); color: var(--ink); padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600; } .skip:focus { top: 1rem; } .wrap { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--gut); } .ico { width: 1.1em; height: 1.1em; flex: none; } [data-dark] { background: var(--ink); color: var(--on-d); } /* Type ------------------------------------------------------------------- */ .kicker { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-ink); } [data-dark] .kicker { color: var(--amber); } .kicker::before { content: ""; width: 1.8em; height: 1px; background: currentColor; opacity: 0.7; } .kicker--glow::before { display: none; } .kicker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 176, 74, 0.18), 0 0 14px var(--amber); animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 176, 74, 0), 0 0 18px var(--amber); } } .h2 { font-size: clamp(2.1rem, 4.6vw, 4.4rem); font-stretch: var(--wide); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; } .sec-head { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .sec-head--split { grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .sec-head--split { grid-template-columns: 0.32fr 1fr; align-items: start; } .sec-head--split .kicker { margin-top: 0.9rem; } } .sec-head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; } .sec-head--row > div { display: grid; gap: 1.2rem; max-width: 60rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 600; text-decoration: none; padding-bottom: 0.25em; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 0.5s var(--ease-out); } .link-arrow:hover { background-size: 100% 1px; } .link-arrow .ico { transition: transform 0.4s var(--ease-out); } .link-arrow:hover .ico { transform: translateX(4px); } /* Buttons ---------------------------------------------------------------- */ .btn { --mx: 0px; --my: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3.2rem; padding: 0.85rem 1.6rem; border-radius: 999px; border: 0; font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap; transform: translate3d(var(--mx), var(--my), 0); transition: transform 0.35s var(--ease-out), box-shadow 0.35s, background-color 0.3s, color 0.3s; isolation: isolate; overflow: hidden; } .btn > span, .btn > .ico { position: relative; z-index: 1; } .btn__ico { transition: transform 0.4s var(--ease-out); } .btn:hover .btn__ico { transform: translateX(3px); } .btn--glow { background: var(--grad); color: #1a0d00; box-shadow: var(--glow); } .btn--glow::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, 0.7), transparent 60%); opacity: 0; transition: opacity 0.3s; } .btn--glow::after { content: ""; position: absolute; inset: -40% auto -40% -30%; width: 30%; z-index: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-18deg) translateX(-120%); animation: shine 5.5s 2s var(--ease) infinite; } @keyframes shine { 0%, 70% { transform: skewX(-18deg) translateX(-120%); } 100% { transform: skewX(-18deg) translateX(560%); } } .btn--glow:hover { box-shadow: 0 0 0 1px rgba(255, 200, 120, 0.8), 0 14px 50px -6px rgba(255, 122, 47, 0.85); } .btn--glow:hover::before { opacity: 1; } .btn--glass { color: var(--on-d); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); } .btn--glass:hover { background: rgba(255, 255, 255, 0.12); } .btn--line { background: transparent; box-shadow: inset 0 0 0 1px currentColor; } .btn--line:hover { background: rgba(127, 127, 127, 0.12); } .btn--ink { background: var(--on-l); color: var(--paper); } .btn--block { width: 100%; } /* Liquid glass: blur and saturate what is behind, a bright rim, and a specular highlight that follows the pointer. */ .glass { --gx: 30%; --gy: 0%; position: relative; isolation: isolate; background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.06)); backdrop-filter: blur(22px) saturate(1.6) brightness(1.05); -webkit-backdrop-filter: blur(22px) saturate(1.6) brightness(1.05); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px -30px rgba(0, 0, 0, 0.7); } .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; background: conic-gradient(from 210deg at 50% 50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 25%, rgba(255, 200, 140, 0.4) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.14), transparent 55%); } /* Entrances --------------------------------------------------------------- */ .js [data-rise], .js [data-reveal] { opacity: 0; transform: translate3d(var(--rx, 0px), var(--ry, 2.2rem), 0) rotate(var(--rr, 0deg)); transition: opacity 0.9s var(--ease) var(--rd, 0s), transform 1.1s var(--ease-out) var(--rd, 0s); } .js [data-rise].is-in, .js [data-reveal].is-in { opacity: 1; transform: none; } [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; } [data-split] .w > i { display: inline-block; font-style: inherit; } .js [data-split] .w > i { transform: translate3d(0, 108%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--rd, 0s) + var(--wi) * 0.055s); } .js [data-split].is-in .w > i { transform: none; } .js [data-band] { clip-path: inset(46% 0 46% 0); transition: clip-path 1.4s var(--ease-out) var(--rd, 0s); } .js [data-band].is-in { clip-path: inset(0 0 0 0); } /* Masthead ---------------------------------------------------------------- */ .mast { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--on-l); transition: transform 0.55s var(--ease-out), color 0.4s; } .mast.is-dark { color: var(--on-d); } .mast.is-away { transform: translateY(-100%); } .mast__util { font-size: 0.8rem; overflow: hidden; max-height: 40px; transition: max-height 0.5s var(--ease-out), opacity 0.4s; } .mast.is-scrolled .mast__util { max-height: 0; opacity: 0; } .mast__util-in { display: flex; align-items: center; gap: 1.6rem; height: 38px; border-bottom: 1px solid var(--line-l); opacity: 0.85; } .mast.is-dark .mast__util-in { border-color: var(--line-d); } .mast__util a, .mast__util span { display: inline-flex; align-items: center; gap: 0.45em; text-decoration: none; white-space: nowrap; } .mast__util a:hover { color: var(--amber); } .mast__live { margin-left: auto; } .mast__live i { width: 6px; height: 6px; border-radius: 50%; background: #7a8190; } .mast__live.is-open i { background: #3ddc84; box-shadow: 0 0 10px #3ddc84; } .mast__bar { transition: background-color 0.4s, box-shadow 0.4s, backdrop-filter 0.4s; } .mast.is-scrolled .mast__bar { background: rgba(243, 239, 231, 0.72); box-shadow: 0 1px 0 var(--line-l), 0 20px 50px -30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); } .mast.is-scrolled.is-dark .mast__bar { background: rgba(8, 11, 18, 0.6); box-shadow: 0 1px 0 var(--line-d), 0 20px 50px -30px rgba(0, 0, 0, 0.8); } .mast__in { display: flex; align-items: center; gap: 1.5rem; height: 74px; } .mark { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; } .mark__logo { max-height: 42px; width: auto; } .mark__name { font-weight: 700; font-stretch: 125%; letter-spacing: -0.02em; font-size: 1.28rem; } .mark__glyph { position: relative; width: 30px; height: 30px; display: grid; place-items: center; } .mark__glyph i { position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--grad); } .mark__glyph i:nth-child(1) { top: 6px; right: 6px; } .mark__glyph i:nth-child(2) { top: 13.5px; left: 4px; } .mark__glyph i:nth-child(3) { top: 21px; right: 10px; } .mast__nav { display: flex; align-items: center; gap: 1.8rem; } .mast__menu { display: flex; gap: 1.8rem; list-style: none; } .mast__menu a { position: relative; text-decoration: none; font-weight: 500; font-size: 0.97rem; padding: 0.4rem 0; } .mast__menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--grad); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out); } .mast__menu a:hover::after, .mast__menu .current-menu-item a::after, .mast__menu .current_page_item a::after { transform: scaleX(1); transform-origin: left; } .mast__search { position: relative; display: flex; align-items: center; } .mast__search input { width: 11.5rem; height: 2.5rem; padding: 0 2.4rem 0 1rem; border-radius: 999px; border: 1px solid var(--line-l); background: rgba(255, 255, 255, 0.4); font-size: 0.88rem; transition: width 0.45s var(--ease-out), background 0.3s, border-color 0.3s; } .mast.is-dark .mast__search input { border-color: var(--line-d); background: rgba(255, 255, 255, 0.06); } .mast__search input:focus { width: 15rem; outline: none; border-color: var(--amber); } .mast__search button { position: absolute; right: 0.35rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; background: none; } .mast__basket { position: relative; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-l); text-decoration: none; transition: box-shadow 0.3s, background 0.3s; } .mast.is-dark .mast__basket { box-shadow: inset 0 0 0 1px var(--line-d); } .mast__basket .ico { width: 1.25rem; height: 1.25rem; } .mast__count { position: absolute; top: -3px; right: -3px; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: var(--ink-4); color: #fff; transform: scale(0.8); opacity: 0.6; transition: transform 0.3s var(--ease-out), background 0.3s, opacity 0.3s; } .mast__basket.has-items .mast__count { background: var(--grad); color: #1a0d00; transform: scale(1); opacity: 1; box-shadow: 0 0 14px rgba(255, 150, 60, 0.7); } .mast__basket.is-bump { animation: bump 0.6s var(--ease-out); } @keyframes bump { 30% { transform: scale(1.22); } 60% { transform: scale(0.94); } } .mast__cta { min-height: 2.9rem; padding-inline: 1.3rem; } .mast__toggle { display: none; width: 2.9rem; height: 2.9rem; border: 0; background: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-l); } .mast.is-dark .mast__toggle { box-shadow: inset 0 0 0 1px var(--line-d); } .mast__bars, .mast__bars::before, .mast__bars::after { display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform 0.4s var(--ease-out), opacity 0.3s; } .mast__bars { position: relative; margin: auto; } .mast__bars::before, .mast__bars::after { content: ""; position: absolute; left: 0; } .mast__bars::before { top: -6px; } .mast__bars::after { top: 6px; } .mast.is-open .mast__bars { background: transparent; } .mast.is-open .mast__bars::before { transform: translateY(6px) rotate(45deg); } .mast.is-open .mast__bars::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1180px) { .mast__search, .mast__hours { display: none; } } @media (max-width: 1000px) { .mast__util { display: none; } .mast__toggle { display: grid; } .mast__cta { display: none; } .mast__nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2rem; padding: 6rem var(--gut) 3rem; background: rgba(5, 7, 12, 0.96); color: var(--on-d); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; } .mast.is-open { color: var(--on-d); } .mast.is-open .mast__nav { opacity: 1; visibility: visible; } .mast__menu { flex-direction: column; gap: 0.9rem; } .mast__menu a { font-size: clamp(1.8rem, 7vw, 2.6rem); font-stretch: var(--wide); font-weight: 600; letter-spacing: -0.03em; } .mast__search { display: flex; width: 100%; } .mast__search input, .mast__search input:focus { width: 100%; height: 3rem; border-color: var(--line-d); background: rgba(255, 255, 255, 0.06); } } /* Hero: the light sculpture ------------------------------------------------ */ .hero { position: relative; height: 175vh; background: var(--ink); } .hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .hero__stage { position: absolute; inset: 0; background: radial-gradient(90% 70% at 70% 55%, #121a2b 0%, #070a12 55%, #04050a 100%); } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); } .hero__stage.is-live .hero__canvas { opacity: 1; } .hero__poster { position: absolute; inset: 0; transition: opacity 1.2s var(--ease); } .hero__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #05070c 20%, rgba(5, 7, 12, 0.5) 55%, rgba(5, 7, 12, 0.2)), linear-gradient(0deg, #05070c, transparent 40%); } .hero__poster-img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; opacity: 0.7; } .hero__stage.is-live .hero__poster { opacity: 0; } .hero__grid { position: absolute; left: -20%; right: -20%; bottom: -8%; height: 42%; pointer-events: none; background: linear-gradient(rgba(255, 176, 74, 0.16) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, rgba(255, 176, 74, 0.12) 1px, transparent 1px) 0 0 / 56px 100%; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask: linear-gradient(to top, #000 10%, transparent 85%); mask: linear-gradient(to top, #000 10%, transparent 85%); animation: gridrun 6s linear infinite; opacity: 0.55; } @keyframes gridrun { to { background-position: 0 56px, 0 0; } } .hero__in { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto; align-items: end; gap: 1.5rem 3rem; padding-top: calc(var(--mast-h) + 2rem); padding-bottom: 2.2rem; pointer-events: none; } .hero__in a, .hero__in button { pointer-events: auto; } .hero__copy { grid-column: 1; grid-row: 1; align-self: center; max-width: 47rem; display: grid; gap: 1.6rem; } .hero__title { font-size: clamp(2.8rem, 6.6vw, 7.2rem); font-stretch: 122%; font-weight: 600; line-height: 0.92; letter-spacing: -0.045em; background: linear-gradient(180deg, #fff 30%, #c9cfdb 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; } .hero__title .w > i { background: inherit; -webkit-background-clip: text; background-clip: text; } .hero__title .w:last-child > i { background-image: var(--grad); } .hero__sub { max-width: 34rem; font-size: clamp(1.02rem, 1.2vw, 1.2rem); color: var(--mute-d); line-height: 1.6; } .hero__acts { display: flex; flex-wrap: wrap; gap: 0.9rem; } .now { grid-column: 2; grid-row: 1 / 3; align-self: end; width: min(23rem, 34vw); padding: 1.35rem 1.4rem 1.2rem; display: grid; gap: 0.55rem; color: var(--on-d); pointer-events: auto; margin-bottom: 0.5rem; } .now__k { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-d); } .now__k span:first-child { color: var(--amber); font-weight: 700; } .now__k i { width: 1.4rem; height: 1px; background: currentColor; opacity: 0.6; } .now__name { font-size: 1.35rem; font-weight: 600; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.15; min-height: 1.55em; transition: opacity 0.3s, transform 0.4s var(--ease-out), filter 0.3s; } .now__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.85rem; color: var(--mute-d); min-height: 1.4em; transition: opacity 0.3s; } .now__meta span:empty { display: none; } .now__meta span + span::before { content: "ยท"; margin-right: 0.9rem; opacity: 0.6; } .now.is-swap .now__name { opacity: 0; transform: translateY(8px); filter: blur(4px); } .now.is-swap .now__meta { opacity: 0; } .now__row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.3rem; } .now__link { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; color: var(--amber); text-decoration: none; } .now.is-ship .now__link { visibility: hidden; } .now__ctl { display: inline-flex; gap: 0.4rem; } .now__ctl button { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--on-d); box-shadow: inset 0 0 0 1px var(--line-d); transition: background 0.3s; } .now__ctl button:hover { background: rgba(255, 255, 255, 0.16); } .now__ctl [data-now-pause] i { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .now__ctl [data-now-pause][aria-pressed="true"] i { width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent currentColor; margin-left: 2px; } .now__bar { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; } .now__bar i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; } .hero__proof { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.8rem; list-style: none; padding-top: 1.3rem; border-top: 1px solid var(--line-d); font-size: 0.86rem; color: var(--mute-d); } .hero__proof li { display: inline-flex; align-items: center; gap: 0.45rem; } .hero__proof .ico { color: var(--amber); } .hero__since { margin-left: auto; } .hero__hint { position: absolute; right: var(--gut); top: calc(var(--mast-h) + 1.5rem); display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--mute-d); letter-spacing: 0.06em; opacity: 0; transition: opacity 1s 2.5s; } .is-live ~ .hero__in .hero__hint, .hero__stage.is-live ~ .hero__in .hero__hint { opacity: 0.85; } .hero__hand { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--amber); position: relative; animation: hand 2.6s var(--ease) infinite; } .hero__hand::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--amber); } @keyframes hand { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(8px); } } @media (max-width: 900px) { .hero { height: 150vh; } .hero__in { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto auto; padding-top: 42vh; gap: 1.2rem; } .hero__copy { grid-row: 2; align-self: end; gap: 1.1rem; } .hero__title { font-size: clamp(2.3rem, 10vw, 3.6rem); } .hero__sub { font-size: 0.98rem; } .now { position: absolute; grid-column: auto; grid-row: auto; top: 5.4rem; left: var(--gut); right: var(--gut); width: auto; margin: 0; padding: 0.55rem 0.6rem 0.55rem 1rem; display: flex; align-items: center; gap: 0.8rem; border-radius: 999px; } .now__k, .now__meta, .now__bar, .now__link { display: none; } .now__name { flex: 1; min-width: 0; min-height: 0; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .now__row { margin: 0; } .hero__proof { grid-row: 3; font-size: 0.78rem; gap: 0.4rem 1rem; } .hero__since { margin-left: 0; } .hero__hint { display: none; } .hero__grid { height: 30%; } } /* Ticker ------------------------------------------------------------------ */ .ticker { position: relative; background: var(--ink); padding: 1.3rem 0 1.5rem; overflow: hidden; border-top: 1px solid var(--line-d); } .ticker__row { overflow: hidden; } .ticker__track { display: flex; width: max-content; will-change: transform; } .ticker__set { display: flex; align-items: center; } .ticker__item { font-size: clamp(1.6rem, 3.6vw, 3.2rem); font-stretch: 125%; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; padding: 0 1.4rem; color: var(--on-d); } .ticker__row--b .ticker__item { color: transparent; -webkit-text-stroke: 1px rgba(255, 176, 74, 0.55); font-weight: 700; } .ticker__star { width: 14px; height: 14px; background: var(--grad); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); flex: none; } /* The factory in numbers: bento --------------------------------------------- */ .proof { padding: clamp(5rem, 11vw, 10rem) 0; background: var(--paper); position: relative; } .bento { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(13rem, auto); } .bento__cell { --sx: 50%; --sy: 50%; --tx: 0deg; --ty: 0deg; position: relative; overflow: hidden; margin: 0; border-radius: var(--r-lg); padding: clamp(1.4rem, 2.4vw, 2.2rem); background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 30px 60px -40px rgba(20, 20, 40, 0.35); display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform 0.6s var(--ease-out), box-shadow 0.4s; } .js .bento__cell[data-rise] { transform: translate3d(var(--rx, 0px), var(--ry, 2.2rem), 0); } .js .bento__cell[data-rise].is-in { transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); } .bento__cell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(380px circle at var(--sx) var(--sy), rgba(255, 176, 74, 0.2), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .bento__cell:hover::before { opacity: 1; } .bento__cell--hall { grid-column: span 7; grid-row: span 2; color: #fff; } .bento__cell--out { grid-column: span 5; background: var(--ink-2); color: var(--on-d); } .bento__cell--lines { grid-column: span 5; } .bento__cell--weld { grid-column: span 5; grid-row: span 2; color: #fff; } .bento__cell--people { grid-column: span 4; background: var(--grad); color: #1a0d00; } .bento__cell--years { grid-column: span 3; background: var(--ink-3); color: var(--on-d); } .bento__img { position: absolute; inset: -8% 0; will-change: transform; } .bento__img img { width: 100%; height: 100%; object-fit: cover; } .bento__cell--hall::after, .bento__cell--weld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 7, 12, 0.85), rgba(5, 7, 12, 0.1) 55%); } .bento__over { position: relative; z-index: 1; display: grid; gap: 0.5rem; max-width: 28rem; } .bento__num { display: flex; align-items: baseline; gap: 0.4rem; line-height: 0.9; position: relative; z-index: 1; } .bento__num b { font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 600; font-stretch: 125%; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } .bento__cell--hall .bento__num b { font-size: clamp(3.6rem, 8vw, 7.6rem); } .bento__num small { font-size: 1.1rem; font-weight: 600; opacity: 0.75; } .bento__label { position: relative; z-index: 1; font-size: 0.98rem; line-height: 1.45; opacity: 0.85; max-width: 22rem; } .bento__spark { position: absolute; left: 0; right: 0; top: 1.6rem; width: 100%; height: 45%; overflow: visible; } .bento__spark path { fill: none; stroke: var(--amber); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255, 150, 60, 0.9)); transition: stroke-dashoffset 2.2s var(--ease-out) 0.4s; } .bento__cell.is-in .bento__spark path { stroke-dashoffset: 0; } .bento__bars { position: absolute; top: 1.8rem; left: clamp(1.4rem, 2.4vw, 2.2rem); right: clamp(1.4rem, 2.4vw, 2.2rem); display: flex; gap: 5px; height: 42%; align-items: flex-end; } .bento__bars i { flex: 1; border-radius: 3px; background: linear-gradient(180deg, var(--amber), rgba(255, 176, 74, 0.15)); height: calc(30% + var(--k) * 5%); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease-out) calc(0.3s + var(--k) * 0.06s); } .bento__cell.is-in .bento__bars i { transform: scaleY(1); animation: bars 2.8s calc(var(--k) * -0.23s) var(--ease) infinite alternate; } @keyframes bars { to { filter: brightness(1.35); } } .bento__ring { position: absolute; right: -3rem; top: -3rem; width: 11rem; height: 11rem; border-radius: 50%; border: 1px dashed rgba(255, 176, 74, 0.45); animation: spin 26s linear infinite; } .bento__ring::after { content: ""; position: absolute; top: 50%; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px var(--amber); } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(11rem, auto); } .bento__cell--hall { grid-column: span 2; grid-row: span 1; min-height: 20rem; } .bento__cell--weld { grid-column: span 2; grid-row: span 1; min-height: 16rem; } .bento__cell--out, .bento__cell--lines, .bento__cell--people, .bento__cell--years { grid-column: span 1; } .bento__cell--out, .bento__cell--lines { grid-column: span 2; } } /* Ranges: pinned sideways travel ---------------------------------------------- */ .ranges { position: relative; background: var(--ink); } .ranges__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(18rem, 30vw) 1fr; align-items: center; } .ranges__head { position: relative; z-index: 2; align-self: stretch; padding: calc(var(--mast-h) - 1rem) 2rem 2rem var(--gut); display: grid; gap: 1.4rem; align-content: center; background: var(--ink); box-shadow: 3rem 0 3rem var(--ink); } .ranges__head .h2 { font-size: clamp(2rem, 3.3vw, 3.4rem); } .ranges__lead { color: var(--mute-d); max-width: 22rem; } .ranges__meter { display: block; width: 12rem; height: 2px; background: var(--line-d); border-radius: 2px; overflow: hidden; } .ranges__meter i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; } .ranges__track { display: flex; gap: 1.4rem; padding: var(--mast-h) 12vw 3rem 0; will-change: transform; } .rcard { position: relative; flex: none; width: clamp(19rem, 27vw, 27rem); height: min(68vh, 40rem); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--on-d); background: var(--ink-3); isolation: isolate; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px var(--line-d); } .rcard:nth-child(even) { margin-top: 7vh; } .rcard__img { position: absolute; inset: 0 -15%; will-change: transform; transition: filter 0.6s; } .rcard__img img { width: 100%; height: 100%; object-fit: cover; } .rcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 7, 12, 0.92) 5%, rgba(5, 7, 12, 0) 55%); z-index: 0; } .rcard:hover .rcard__img { filter: saturate(1.2) brightness(1.08); } .rcard__n { position: absolute; top: 1.3rem; left: 1.5rem; z-index: 1; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; color: var(--amber); } .rcard__body { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 1; display: grid; gap: 0.5rem; } .rcard__name { font-size: clamp(1.6rem, 2.3vw, 2.3rem); font-stretch: var(--wide); font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .rcard__meta { font-size: 0.9rem; color: var(--mute-d); } .rcard__go { position: absolute; right: 0; bottom: 0; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); transition: background 0.4s, transform 0.5s var(--ease-out), color 0.4s; } .rcard:hover .rcard__go { background: var(--amber); color: #1a0d00; transform: rotate(-45deg); } .rcard--custom { background: radial-gradient(120% 80% at 20% 0%, rgba(255, 176, 74, 0.35), transparent 60%), var(--ink-3); display: flex; } .rcard--custom::after { display: none; } .rcard--custom .rcard__body { top: auto; } .rcard--custom::before { content: ""; position: absolute; inset: 1.2rem; border-radius: calc(var(--r-lg) - 8px); border: 1px dashed rgba(255, 176, 74, 0.5); } @media (max-width: 860px) { .ranges__pin { position: relative; height: auto; display: block; padding: 5rem 0; } .ranges__head { padding: 0 var(--gut) 2rem; background: none; } .ranges__meter { display: none; } .ranges__track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rcard { width: 78vw; height: 26rem; scroll-snap-align: start; } .rcard:nth-child(even) { margin-top: 0; } } /* Product cards ----------------------------------------------------------------- */ .best { padding: clamp(5rem, 11vw, 9rem) 0; background: var(--paper); } .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.2rem; } .pcard { --tx: 0deg; --ty: 0deg; --gx: 50%; --gy: 0%; position: relative; border-radius: var(--r-lg); background: #fff; overflow: hidden; box-shadow: 0 1px 0 #fff inset, 0 24px 50px -36px rgba(20, 20, 40, 0.45); transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform 0.6s var(--ease-out), box-shadow 0.4s; } .pcard.is-tilt { box-shadow: 0 1px 0 #fff inset, 0 40px 70px -40px rgba(20, 20, 40, 0.6); transition: transform 0.12s linear, box-shadow 0.4s; } .pcard__link { display: grid; text-decoration: none; color: inherit; } .pcard__img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); } .pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .pcard:hover .pcard__img img { transform: scale(1.07); } .pcard__glare { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(500px circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.35), transparent 45%); opacity: 0; transition: opacity 0.4s; mix-blend-mode: soft-light; } .pcard.is-tilt .pcard__glare { opacity: 1; } .pcard__body { display: grid; gap: 0.5rem; padding: 1.2rem 1.3rem 4.4rem; } .pcard__model { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-l); font-weight: 600; } .pcard__title { font-size: 1.2rem; font-weight: 600; font-stretch: 108%; letter-spacing: -0.015em; line-height: 1.2; } .pcard__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.3rem 1.1rem; font-size: 0.86rem; margin-top: 0.35rem; } .pcard__facts span { display: grid; } .pcard__facts small { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-l); } .pcard__add { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.1rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 2.6rem; padding: 0 0.9rem 0 1.1rem; border-radius: 999px; text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-l); transition: background 0.35s, color 0.35s, box-shadow 0.35s; } .pcard__add:hover { background: var(--on-l); color: #fff; } [data-rfq-add] [data-when="in"], [data-rfq-add].is-in [data-when="out"] { display: none; } [data-rfq-add].is-in [data-when="in"] { display: inline; } [data-rfq-add].is-in { background: var(--grad); color: #1a0d00; box-shadow: none; } [data-rfq-add].is-in .btn__ico, [data-rfq-add].is-in .ico { transform: rotate(45deg); } .pcard--lead { grid-column: span 2; grid-row: span 2; display: flex; } .pcard--lead .pcard__link { flex: 1; grid-template-rows: 1fr auto; } .pcard--lead .pcard__img { aspect-ratio: auto; min-height: 22rem; } .pcard--lead .pcard__img img { position: absolute; inset: 0; } .pcard--lead .pcard__title { font-size: 1.7rem; } @media (max-width: 640px) { .pcard--lead { grid-column: auto; grid-row: auto; } } /* The factory tour --------------------------------------------------------------- */ .tour { position: relative; height: 700vh; } .tour__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .tour__reel { position: absolute; inset: 0; } .tour__reel canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .tour__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.1s var(--ease), transform 6s linear; } .tour__img.is-on { opacity: 1; transform: scale(1); } .tour__reel.is-live .tour__img { display: none; } .tour__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 7, 12, 0.92) 0%, rgba(5, 7, 12, 0.7) 38%, rgba(5, 7, 12, 0.05) 70%), linear-gradient(0deg, rgba(5, 7, 12, 0.6), transparent 30%); } .tour__in { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr; padding-top: calc(var(--mast-h) + 1rem); padding-bottom: 3rem; } .tour__head { display: grid; gap: 1rem; max-width: 40rem; } .tour__head .h2 { font-size: clamp(1.9rem, 3.6vw, 3.4rem); } .tour__steps { list-style: none; align-self: center; position: relative; max-width: 34rem; min-height: 16rem; } .tour__step { position: absolute; inset: 0 auto auto 0; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; opacity: 0; transform: translateY(2.5rem); filter: blur(6px); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease-out), filter 0.6s; pointer-events: none; } .tour__step.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; } .tour__step.is-past { transform: translateY(-2.5rem); } .tour__n { font-size: clamp(4rem, 8vw, 7rem); font-weight: 600; font-stretch: 125%; line-height: 0.8; letter-spacing: -0.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .tour__txt { display: grid; gap: 0.8rem; padding-top: 0.5rem; } .tour__name { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-stretch: var(--wide); letter-spacing: -0.025em; } .tour__desc { color: #c3c9d5; font-size: 1.05rem; } .tour__fact { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--amber); font-weight: 600; font-size: 0.92rem; } .tour__rail { position: absolute; right: var(--gut); top: 50%; width: 2px; height: 40vh; transform: translateY(-50%); background: var(--line-d); border-radius: 2px; } .tour__rail i { position: absolute; inset: 0; background: var(--grad); transform: scaleY(0); transform-origin: top; box-shadow: 0 0 12px var(--amber); } .no-js .tour, .tour.is-flat { height: auto; } @media (max-width: 860px) { .tour { height: 560vh; } .tour__shade { background: linear-gradient(0deg, rgba(5, 7, 12, 0.96) 25%, rgba(5, 7, 12, 0.45) 65%, rgba(5, 7, 12, 0.2)); } .tour__steps { align-self: end; min-height: 17rem; } .tour__n { font-size: 3.4rem; } .tour__rail { display: none; } } /* The yard ---------------------------------------------------------------------- */ .yard { position: relative; height: 260vh; background: #04060a; } .yard__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .yard__stage { position: absolute; inset: 0; } .yard__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s; } .yard__stage.is-live canvas { opacity: 1; } .yard__poster { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; transition: opacity 1s; } .yard__stage.is-live .yard__poster { opacity: 0; } .yard__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 15% 20%, rgba(4, 6, 10, 0.85), transparent 70%), linear-gradient(180deg, rgba(4, 6, 10, 0.85), transparent 35%, transparent 65%, rgba(4, 6, 10, 0.85)); } .yard__copy { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); } .yard__in { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: 1fr minmax(18rem, 25rem); align-items: start; gap: 2rem; padding-top: calc(var(--mast-h) + 1rem); pointer-events: none; } .yard__copy { display: grid; gap: 1rem; } .yard__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; } .yard__big { font-size: clamp(4.5rem, 13vw, 12rem); font-weight: 600; font-stretch: 125%; letter-spacing: -0.06em; line-height: 0.85; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(255, 122, 47, 0.35)); } .yard__unit { font-size: clamp(1.4rem, 2.6vw, 2.4rem); font-stretch: var(--wide); letter-spacing: -0.02em; } .yard__lead { max-width: 30rem; color: #c1c7d3; } .markets { list-style: none; padding: 1.4rem 1.5rem; display: grid; gap: 0.95rem; margin-top: 1rem; pointer-events: auto; } .markets__row { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; font-size: 0.92rem; } .markets__val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--amber); } .markets__bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .markets__bar i { display: block; height: 100%; width: calc(var(--share) * 1% * 2.4); max-width: 100%; background: var(--grad); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-out) calc(0.3s + var(--k) * 0.1s); } .markets.is-in .markets__bar i { transform: scaleX(1); } @media (max-width: 860px) { .yard { height: 220vh; } .yard__in { grid-template-columns: 1fr; align-content: space-between; padding-bottom: 2rem; } .markets { padding: 1rem 1.1rem; gap: 0.6rem; } .markets__row { font-size: 0.82rem; } } /* Certificates: foil cards --------------------------------------------------------- */ .certs { padding: clamp(5rem, 11vw, 9rem) 0; background: var(--paper-2); } .holo-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem; perspective: 1200px; } .holo__card { --hx: 50%; --hy: 50%; --ha: 0deg; --tx: 0deg; --ty: 0deg; position: relative; height: 100%; min-height: 21rem; padding: 1.6rem 1.5rem 1.3rem; border-radius: 22px; overflow: hidden; isolation: isolate; background: linear-gradient(155deg, #151b29, #0a0e17 60%); color: var(--on-d); display: flex; flex-direction: column; gap: 0.35rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -35px rgba(0, 0, 0, 0.8); transform: rotateX(var(--tx)) rotateY(var(--ty)); transition: transform 0.7s var(--ease-out); } .holo.is-holo .holo__card { transition: transform 0.1s linear; } .holo__foil { position: absolute; inset: 0; z-index: -1; opacity: 0.35; mix-blend-mode: color-dodge; transition: opacity 0.5s; background: repeating-linear-gradient(calc(var(--ha) + 110deg), rgba(255, 90, 90, 0.5) 0%, rgba(255, 220, 90, 0.5) 6%, rgba(90, 255, 160, 0.5) 12%, rgba(90, 200, 255, 0.5) 18%, rgba(190, 110, 255, 0.5) 24%, rgba(255, 90, 90, 0.5) 30%), radial-gradient(50% 60% at var(--hx) var(--hy), rgba(255, 255, 255, 0.55), transparent 70%); background-size: 220% 220%, 100% 100%; background-position: var(--hx) var(--hy), 0 0; -webkit-mask: radial-gradient(90% 90% at var(--hx) var(--hy), #000 10%, rgba(0, 0, 0, 0.25) 60%); mask: radial-gradient(90% 90% at var(--hx) var(--hy), #000 10%, rgba(0, 0, 0, 0.25) 60%); } .holo.is-holo .holo__foil { opacity: 0.8; } .holo__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px); } .holo__seal { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1.2rem; background: conic-gradient(from var(--ha), #ffd79a, #ff7a2f, #ffd79a, #fff3dc, #ffd79a); color: #3a1c00; box-shadow: 0 0 24px rgba(255, 150, 60, 0.4); } .holo__seal .ico { width: 1.5rem; height: 1.5rem; } .holo__name { font-size: 2rem; font-stretch: 125%; letter-spacing: -0.03em; } .holo__std { color: var(--mute-d); font-size: 0.9rem; min-height: 1.4em; } .holo__facts { display: grid; gap: 0.45rem; margin: 1rem 0 0; font-size: 0.85rem; } .holo__facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.6rem; } .holo__facts dt { color: var(--mute-d); } .holo__facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .holo__foot { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.82rem; border-top: 1px solid var(--line-d); } .holo__state { display: inline-flex; align-items: center; gap: 0.45rem; } .holo__state i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; } .holo.is-expired .holo__state i { background: #ff6b5b; box-shadow: 0 0 10px #ff6b5b; } .holo.is-permanent .holo__state i { background: var(--amber); box-shadow: 0 0 10px var(--amber); } .holo__verify { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--amber); font-weight: 600; text-decoration: none; } /* OEM / ODM process line -------------------------------------------------------- */ .process { padding: clamp(5rem, 11vw, 9rem) 0; background: var(--paper); overflow: hidden; } .process__track { position: relative; } .process__line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 7.5rem; overflow: visible; } .process__base, .process__draw { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; } .process__base { stroke: var(--line-l); stroke-dasharray: 4 6; } .process__draw { stroke: var(--amber-2); stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255, 122, 47, 0.6)); } .process__steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; padding-top: 1rem; } .process__step { display: grid; align-content: start; gap: 0.6rem; padding-top: calc(4.6rem + (var(--k) - 2) * (var(--k) - 2) * -0.3rem); } .process__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--mute-l); margin-bottom: 0.6rem; transition: box-shadow 0.4s, background 0.4s, transform 0.5s var(--ease-out); } .process__step.is-lit .process__dot { background: var(--amber); box-shadow: 0 0 0 6px rgba(255, 176, 74, 0.2), 0 0 20px var(--amber); transform: scale(1.1); } .process__day { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-l); transition: color 0.4s; } .process__step.is-lit .process__day { color: var(--amber-ink); } .process__name { font-size: 1.3rem; font-stretch: 110%; letter-spacing: -0.015em; } .process__desc { color: var(--mute-l); font-size: 0.95rem; } .process__more { margin-top: 3rem; } @media (max-width: 900px) { .process__line { display: none; } .process__steps { grid-template-columns: 1fr; gap: 0; border-left: 2px dashed var(--line-l); margin-left: 8px; } .process__step { padding: 0 0 2rem 1.8rem; position: relative; } .process__dot { position: absolute; left: -10px; top: 0.1rem; } } /* Buyers: stacking cards ----------------------------------------------------------- */ .buyers { padding: clamp(5rem, 11vw, 9rem) 0; background: var(--paper-2); } .buyers__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .buyers__head { position: sticky; top: calc(var(--mast-h) + 1rem); display: grid; gap: 1.2rem; } .buyers__note { color: var(--mute-l); font-size: 0.92rem; } .stack { list-style: none; display: grid; gap: 2rem; } .stack__card { position: sticky; top: calc(var(--mast-h) - 10px + var(--k) * 1.1rem); } .quote { margin: 0; padding: clamp(1.8rem, 3.4vw, 3rem); border-radius: var(--r-lg); background: #fff; min-height: 22rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; transform-origin: 50% 0; box-shadow: 0 1px 0 #fff inset, 0 -20px 50px -30px rgba(20, 20, 40, 0.25), 0 40px 70px -50px rgba(20, 20, 40, 0.5); } .stack__card:nth-child(3n + 2) .quote { background: var(--ink-2); color: var(--on-d); } .stack__card:nth-child(3n + 3) .quote { background: #fbf4e8; } .quote__text { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.38; letter-spacing: -0.012em; font-weight: 450; } .quote__text p + p { margin-top: 0.8em; } .quote__text::before { content: "\201C"; display: block; font-size: 5rem; line-height: 0.5; height: 2.2rem; font-stretch: 125%; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .quote__who { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: center; font-size: 0.9rem; } .quote__mono { grid-row: span 3; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--grad); color: #1a0d00; } .quote__name b { display: block; font-size: 1rem; } .quote__where, .quote__orders { color: var(--mute-l); display: inline-flex; align-items: center; gap: 0.4rem; } .stack__card:nth-child(3n + 2) .quote__where, .stack__card:nth-child(3n + 2) .quote__orders { color: var(--mute-d); } .quote__src { grid-column: 2; font-size: 0.82rem; } .stack__n { position: absolute; top: 1.4rem; right: 1.8rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; opacity: 0.4; } @media (max-width: 860px) { .buyers__in { grid-template-columns: 1fr; } .buyers__head { position: static; } .stack__card { position: relative; top: auto; } .quote { min-height: 0; } } /* Meet ----------------------------------------------------------------------------- */ .meet { padding: clamp(5rem, 11vw, 9rem) 0; background: var(--paper); } .meet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; } .person { --sx: 50%; --sy: 50%; --tx: 0deg; --ty: 0deg; position: relative; display: grid; gap: 0.45rem; align-content: start; padding: 1.6rem; border-radius: var(--r-lg); overflow: hidden; background: #fff; text-decoration: none; box-shadow: 0 24px 50px -40px rgba(20, 20, 40, 0.5); transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform 0.6s var(--ease-out); } .js .person[data-rise] { transform: translate3d(var(--rx, 0px), var(--ry, 2.2rem), 0); } .js .person[data-rise].is-in { transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); } .person::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--sx) var(--sy), rgba(255, 176, 74, 0.22), transparent 60%); opacity: 0; transition: opacity 0.4s; } .person:hover::before { opacity: 1; } .person__mono { width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; background: var(--ink-2); color: var(--amber); margin-bottom: 0.7rem; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(255, 176, 74, 0.5); } .person__mono img { width: 100%; height: 100%; object-fit: cover; } .person__name { font-size: 1.25rem; font-weight: 600; font-stretch: 110%; } .person__role { color: var(--mute-l); font-size: 0.92rem; margin-bottom: 0.4rem; } .person__row { font-size: 0.88rem; display: grid; } .person__row small { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-l); } .person__years { margin-top: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--amber-ink); } .fairs { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 0.32fr) 1fr; gap: 2rem; padding-top: 2.5rem; border-top: 1px solid var(--line-l); } .fairs__title { font-size: 1.5rem; font-stretch: var(--wide); letter-spacing: -0.02em; } .fairs__list { list-style: none; } .fairs__row { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-l); font-size: 0.98rem; transition: padding 0.4s var(--ease-out), background 0.4s; } .fairs__row:hover { padding-left: 0.8rem; background: linear-gradient(90deg, rgba(255, 176, 74, 0.14), transparent); } .fairs__name { font-weight: 600; } .fairs__booth, .fairs__when { color: var(--mute-l); } @media (max-width: 800px) { .fairs { grid-template-columns: 1fr; } .fairs__row { grid-template-columns: 1fr; gap: 0.2rem; } } /* News ------------------------------------------------------------------------------- */ .news { padding: clamp(5rem, 11vw, 9rem) 0; background: var(--paper-2); } .ngrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.4rem; } .entry__link { display: grid; gap: 0.9rem; text-decoration: none; } .entry__img { display: block; aspect-ratio: 1.25; border-radius: var(--r); overflow: hidden; background: var(--paper-3); } .entry--lead .entry__img { aspect-ratio: 1.45; } .entry__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .entry__link:hover .entry__img img { transform: scale(1.06); } .entry__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8rem; color: var(--mute-l); } .entry__cat { color: var(--amber-ink); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .entry__title { font-size: 1.3rem; font-weight: 600; font-stretch: 106%; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease-out); } .entry--lead .entry__title { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-stretch: var(--wide); letter-spacing: -0.03em; } .entry__ex { color: var(--mute-l); } .entry__by { font-size: 0.85rem; color: var(--mute-l); } @media (max-width: 900px) { .ngrid { grid-template-columns: 1fr; } } /* The request for quotation --------------------------------------------------------- */ .rfq { position: relative; padding: clamp(6rem, 12vw, 10rem) 0; overflow: hidden; background: radial-gradient(80% 60% at 80% 20%, #1a1320 0%, var(--ink) 60%); } .rfq__orbs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: orb 18s var(--ease) infinite alternate; } .rfq__orbs i:nth-child(1) { width: 34rem; height: 34rem; right: -8rem; top: -6rem; background: radial-gradient(circle, rgba(255, 122, 47, 0.7), transparent 65%); } .rfq__orbs i:nth-child(2) { width: 26rem; height: 26rem; left: 30%; bottom: -10rem; background: radial-gradient(circle, rgba(255, 176, 74, 0.45), transparent 65%); animation-duration: 22s; } .rfq__orbs i:nth-child(3) { width: 22rem; height: 22rem; left: -6rem; top: 20%; background: radial-gradient(circle, rgba(80, 110, 255, 0.35), transparent 65%); animation-duration: 26s; } @keyframes orb { to { transform: translate3d(4rem, -3rem, 0) scale(1.15); } } .rfq__in { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .rfq__side { display: grid; gap: 1.6rem; position: sticky; top: calc(var(--mast-h) + 1rem); } .rfq__title { font-size: clamp(2.2rem, 4.6vw, 4.4rem); font-stretch: var(--wide); letter-spacing: -0.04em; line-height: 0.98; } .rfq__promise { display: flex; gap: 0.7rem; align-items: flex-start; color: #cfd4de; max-width: 30rem; } .rfq__promise .ico { color: var(--amber); margin-top: 0.25rem; } .rfq__next { list-style: none; display: grid; gap: 0.8rem; color: var(--mute-d); font-size: 0.95rem; max-width: 30rem; } .rfq__next li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem; } .rfq__next b { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 176, 74, 0.5); } .rfq__direct { list-style: none; display: grid; gap: 0.5rem; } .rfq__direct a { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 500; } .rfq__direct a:hover { color: var(--amber); } .rfq__card { padding: clamp(1.5rem, 3vw, 2.6rem); } .rfq__steps { list-style: none; display: flex; gap: 0.5rem; margin-bottom: 1.8rem; } .rfq__steps li { flex: 1; display: flex; align-items: center; gap: 0.55rem; padding-bottom: 0.8rem; font-size: 0.85rem; color: var(--mute-d); border-bottom: 2px solid var(--line-d); transition: color 0.4s, border-color 0.4s; } .rfq__steps span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line-d); transition: background 0.4s, color 0.4s; } .rfq__steps li.is-on { color: var(--on-d); border-color: var(--amber); } .rfq__steps li.is-on span, .rfq__steps li.is-done span { background: var(--grad); color: #1a0d00; box-shadow: none; } .rfq__steps li.is-done { border-color: rgba(255, 176, 74, 0.45); } .rfq__form:not(.is-stepped) .rfq__steps { display: none; } .rfq__form:not(.is-stepped) .rfq__nav button:not([type=submit]) { display: none; } .rfq__pane { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.1rem; } .rfq__form:not(.is-stepped) .rfq__pane + .rfq__pane { margin-top: 2rem; } .rfq__pane.is-on { animation: paneIn 0.6s var(--ease-out); } @keyframes paneIn { from { opacity: 0; transform: translateX(1.5rem); } } .rfq__legend { font-size: 1.25rem; font-weight: 600; font-stretch: 110%; margin-bottom: 0.3rem; padding: 0; } .rfq__items { list-style: none; display: grid; gap: 0.6rem; } .rfq__item, .drawer__item { display: grid; grid-template-columns: 3.4rem 1fr auto auto; align-items: center; gap: 0.9rem; padding: 0.6rem 0.7rem 0.6rem 0.6rem; border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line-d); animation: paneIn 0.5s var(--ease-out); } .rfq__thumb, .drawer__thumb { width: 3.4rem; height: 3.4rem; border-radius: 10px; overflow: hidden; background: var(--ink-4); } .rfq__thumb img, .drawer__thumb img { width: 100%; height: 100%; object-fit: cover; } .rfq__iname, .drawer__name { display: grid; line-height: 1.3; min-width: 0; } .rfq__iname b, .drawer__name b { font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rfq__iname small, .drawer__name small { color: var(--mute-d); font-size: 0.78rem; } .rfq__qty { display: flex; align-items: center; gap: 0.35rem; } .rfq__qty input { width: 6.2rem; height: 2.4rem; padding: 0 0.6rem; border-radius: 10px; border: 1px solid var(--line-d); background: rgba(0, 0, 0, 0.25); text-align: right; font-variant-numeric: tabular-nums; } .rfq__qty small { font-size: 0.75rem; color: var(--mute-d); } .rfq__rm, .drawer__rm { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: var(--mute-d); } .rfq__rm:hover, .drawer__rm:hover { background: rgba(255, 100, 90, 0.15); color: #ff8a7d; } .rfq__noitems { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 14px; border: 1px dashed var(--line-d); color: var(--mute-d); font-size: 0.93rem; } .rfq__noitems .ico { color: var(--amber); width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; } .rfq__noitems a { color: var(--amber); } .rfq__nav { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: 0.6rem; } .rfq__nav .btn--glow { margin-left: auto; } .rfq__form.is-sending [type=submit] { pointer-events: none; opacity: 0.7; } .rfq__errors { padding: 1rem 1.2rem; border-radius: 14px; background: rgba(255, 90, 80, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 110, 100, 0.4); margin-bottom: 1.4rem; font-size: 0.92rem; } .rfq__errors ul { margin: 0.4rem 0 0 1.1rem; } .rfq__done { display: grid; gap: 1rem; justify-items: start; padding: 1rem 0; } .rfq__done h3 { font-size: 2rem; font-stretch: var(--wide); letter-spacing: -0.03em; } .rfq__tick { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #1a0d00; box-shadow: var(--glow); } .rfq__tick .ico { width: 2rem; height: 2rem; } .rfq__ref b { font-size: 1.2rem; letter-spacing: 0.04em; color: var(--amber); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field { display: grid; gap: 0.4rem; font-size: 0.85rem; color: var(--mute-d); } .field input, .field select, .field textarea { width: 100%; min-height: 3.1rem; padding: 0.8rem 1rem; border-radius: 12px; border: 1px solid var(--line-d); background: rgba(0, 0, 0, 0.28); color: var(--on-d); font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute-d) 50%), linear-gradient(135deg, var(--mute-d) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; } .field select option { background: var(--ink-3); } .field textarea { resize: vertical; min-height: 8rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 176, 74, 0.15); background: rgba(0, 0, 0, 0.4); } .field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-color: #ff7b6e; box-shadow: 0 0 0 4px rgba(255, 110, 100, 0.15); } .check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: #c8cdd8; } .check input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--amber); } .check.is-bad { color: #ff9d92; } @media (max-width: 900px) { .rfq__in { grid-template-columns: 1fr; } .rfq__side { position: static; } .field-row { grid-template-columns: 1fr; } .rfq__item, .drawer__item { grid-template-columns: 3rem 1fr auto; } .rfq__item .rfq__qty, .drawer__item .rfq__qty { grid-column: 2; } .rfq__thumb, .drawer__thumb { width: 3rem; height: 3rem; grid-row: span 2; } } /* Drawer, toast, flying dot ------------------------------------------------------ */ .drawer { position: fixed; inset: 0; z-index: 80; } .drawer__scrim { position: absolute; inset: 0; background: rgba(3, 4, 8, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.4s; } .drawer__panel { position: absolute; top: 0.8rem; right: 0.8rem; bottom: 0.8rem; width: min(30rem, calc(100vw - 1.6rem)); display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--r-lg); overflow: hidden; background: rgba(12, 16, 26, 0.88); color: var(--on-d); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 0 0 1px var(--line-d), 0 40px 100px rgba(0, 0, 0, 0.6); transform: translateX(105%); transition: transform 0.55s var(--ease-out); } .drawer.is-open .drawer__scrim { opacity: 1; } .drawer.is-open .drawer__panel { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--line-d); } .drawer__title { font-size: 1.4rem; font-stretch: var(--wide); letter-spacing: -0.02em; } .drawer__x { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); } .drawer__list { list-style: none; overflow: auto; padding: 1rem 1.2rem; display: grid; align-content: start; gap: 0.6rem; } .drawer__empty { padding: 1.5rem; color: var(--mute-d); align-self: start; } .drawer__foot { padding: 1.2rem 1.5rem 1.5rem; border-top: 1px solid var(--line-d); display: grid; gap: 0.9rem; } .drawer__note { font-size: 0.82rem; color: var(--mute-d); } .toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 90; transform: translate(-50%, 150%); padding: 0.85rem 1.3rem; border-radius: 999px; background: rgba(12, 16, 26, 0.9); color: var(--on-d); font-size: 0.9rem; box-shadow: inset 0 0 0 1px rgba(255, 176, 74, 0.4), 0 20px 50px rgba(0, 0, 0, 0.4); visibility: hidden; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform 0.5s var(--ease-out); max-width: calc(100vw - 2rem); text-align: center; } .toast { transform: translate(-50%, calc(100% + 3rem)); transition: transform 0.5s var(--ease-out), visibility 0s 0.5s; } .toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform 0.5s var(--ease-out); } .fly { position: fixed; z-index: 95; width: 18px; height: 18px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 20px 6px rgba(255, 150, 60, 0.7); pointer-events: none; } /* Footer ----------------------------------------------------------------------------- */ .foot { position: relative; overflow: hidden; padding: clamp(5rem, 9vw, 8rem) 0 2rem; } .foot__aurora { position: absolute; inset: -30% -10% auto; height: 80%; background: radial-gradient(40% 50% at 30% 40%, rgba(255, 122, 47, 0.18), transparent 70%), radial-gradient(35% 45% at 75% 30%, rgba(90, 110, 255, 0.14), transparent 70%); filter: blur(30px); animation: orb 20s var(--ease) infinite alternate; pointer-events: none; } .foot__in { position: relative; display: grid; gap: clamp(3rem, 6vw, 5rem); } .foot__cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; } .foot__ask { font-size: clamp(1.8rem, 3.8vw, 3.6rem); font-stretch: var(--wide); font-weight: 600; letter-spacing: -0.035em; line-height: 1; max-width: 48rem; } .foot__go { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; gap: 1rem; padding: 1.3rem 2rem; border-radius: 999px; text-decoration: none; font-size: 1.15rem; font-weight: 600; background: var(--grad); color: #1a0d00; box-shadow: var(--glow); transform: translate3d(var(--mx), var(--my), 0); transition: transform 0.4s var(--ease-out), box-shadow 0.4s; } .foot__go .ico { transition: transform 0.4s var(--ease-out); } .foot__go:hover .ico { transform: translateX(5px); } .foot__cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; padding-top: 3rem; border-top: 1px solid var(--line-d); } .foot__label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); font-weight: 600; margin-bottom: 1rem; } .foot__addr { font-style: normal; color: #c3c9d4; line-height: 1.6; } .foot__contact { display: grid; gap: 0.2rem; margin-top: 1rem; } .foot__contact a, .foot__menu a { text-decoration: none; color: #c3c9d4; transition: color 0.3s; } .foot__contact a:hover, .foot__menu a:hover { color: var(--amber); } .foot__menu { list-style: none; display: grid; gap: 0.45rem; } .foot__terms { display: grid; gap: 0.6rem; margin: 0; font-size: 0.92rem; } .foot__terms dt { color: var(--mute-d); font-size: 0.78rem; } .foot__terms dd { margin: 0; color: #c3c9d4; } .foot__word { --wx: 50%; display: flex; justify-content: space-between; font-size: clamp(3.4rem, 14.6vw, 17rem); font-weight: 700; font-stretch: 125%; letter-spacing: -0.06em; line-height: 0.8; margin: 0 -0.04em; background: radial-gradient(30% 120% at var(--wx) 60%, #fff4de 0%, var(--amber) 25%, rgba(255, 122, 47, 0.45) 45%, rgba(255, 255, 255, 0.07) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; } .foot__word span { display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; } .js .foot__word span { transform: translateY(60%); opacity: 0; transition: transform 1.1s var(--ease-out) calc(var(--i) * 0.05s), opacity 0.8s calc(var(--i) * 0.05s); } .js .foot__word.is-in span { transform: none; opacity: 1; } .foot__small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; font-size: 0.8rem; color: var(--mute-d); padding-top: 1.5rem; border-top: 1px solid var(--line-d); } .foot__small a { color: inherit; } .foot__api { width: 100%; opacity: 0.6; } @media (max-width: 900px) { .foot__cols { grid-template-columns: 1fr 1fr; } .foot__col--wide { grid-column: 1 / -1; } } /* Cursor ring and liquid images ------------------------------------------------------ */ .cursor { position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; transform: translate3d(var(--cx), var(--cy), 0); } .cursor__ring { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 176, 74, 0.85); display: grid; place-items: center; transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), left 0.45s var(--ease-out), top 0.45s var(--ease-out), background 0.4s, opacity 0.3s; mix-blend-mode: normal; } .cursor.is-hidden .cursor__ring { opacity: 0; } .cursor.is-label .cursor__ring { width: 84px; height: 84px; left: -42px; top: -42px; background: var(--grad); box-shadow: 0 10px 30px rgba(255, 122, 47, 0.45); } .cursor__label { font-size: 0.78rem; font-weight: 700; color: #1a0d00; opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.4s var(--ease-out); } .cursor.is-label .cursor__label { opacity: 1; transform: none; } .is-liquid img { filter: url(#liquid); } /* Reduced motion: things arrive by fading only, nothing travels. ------------------------ */ @media (prefers-reduced-motion: reduce) { .js [data-rise], .js [data-reveal] { transform: none !important; transition: opacity 0.6s linear var(--rd, 0s); } .js [data-split] .w > i { transform: none; opacity: 0; transition: opacity 0.6s linear calc(var(--rd, 0s) + var(--wi) * 0.03s); } .js [data-split].is-in .w > i { opacity: 1; } .js [data-band] { clip-path: none; } .hero__grid, .btn--glow::after, .kicker__dot, .bento__ring, .rfq__orbs i, .foot__aurora, .hero__hand { animation: none; } .tour__img { transition: opacity 0.6s linear; transform: none; } .js .foot__word span { transform: none; transition: opacity 0.6s linear; } html { scroll-behavior: auto; } } /* ========================================================================== Inner pages ========================================================================== */ /* Page head: dark, with a slow glow, and an optional photograph band that opens from a slit. */ .phead { position: relative; background: var(--ink); color: var(--on-d); overflow: hidden; padding: calc(var(--mast-h) + clamp(3rem, 8vw, 6.5rem)) 0 clamp(3rem, 7vw, 5.5rem); } .phead__glow { position: absolute; inset: -40% -10% auto 30%; height: 120%; background: radial-gradient(45% 45% at 60% 40%, rgba(255, 122, 47, 0.28), transparent 70%), radial-gradient(30% 35% at 85% 20%, rgba(90, 110, 255, 0.18), transparent 70%); filter: blur(20px); animation: orb 16s var(--ease) infinite alternate; pointer-events: none; } .phead__grid { height: 70%; opacity: 0.35; } .phead::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 176, 74, 0.5), transparent); } .phead__in { position: relative; display: grid; gap: 1.3rem; } .phead__title { font-size: clamp(2.6rem, 7vw, 6.8rem); font-stretch: 122%; font-weight: 600; letter-spacing: -0.045em; line-height: 0.94; max-width: 18ch; text-wrap: balance; } .phead__lead { max-width: 44rem; color: #c3c9d4; font-size: clamp(1.02rem, 1.3vw, 1.22rem); } .phead__band { position: relative; margin: clamp(2.5rem, 6vw, 4.5rem) var(--gut) 0; height: clamp(15rem, 42vw, 34rem); border-radius: var(--r-lg); overflow: hidden; } .phead__band-in { position: absolute; inset: -8% 0; display: block; will-change: transform; } .phead__band-in img { width: 100%; height: 100%; object-fit: cover; } .crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.85rem; color: var(--mute-d); } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--amber); } .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.4rem; } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; text-decoration: none; font-size: 0.92rem; font-weight: 500; background: #fff; box-shadow: inset 0 0 0 1px var(--line-l); transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out); } .chip small { font-size: 0.72rem; font-weight: 700; opacity: 0.55; } .chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--on-l); } .chip.is-on { background: var(--on-l); color: #fff; box-shadow: none; } .empty { color: var(--mute-l); font-size: 1.1rem; padding: 2rem 0; } .catalog { padding-top: clamp(2.5rem, 5vw, 4rem); background: var(--paper); } .pgrid--cat { margin-bottom: clamp(4rem, 8vw, 7rem); } .pcard.is-filtered { display: none; } .custom-band { position: relative; overflow: hidden; padding: clamp(4.5rem, 9vw, 7rem) 0; } .custom-band__glow { position: absolute; inset: -50% 20% auto -10%; height: 150%; background: radial-gradient(40% 40% at 50% 50%, rgba(255, 122, 47, 0.3), transparent 70%); filter: blur(30px); } .custom-band__in { position: relative; display: grid; grid-template-columns: 1.5fr auto; gap: 2rem; align-items: end; } .custom-band__in > div { display: grid; gap: 1.2rem; } .custom-band .h2 { font-size: clamp(1.8rem, 3.6vw, 3.3rem); max-width: 26ch; } .custom-band__acts { display: flex; flex-wrap: wrap; gap: 0.8rem; } @media (max-width: 860px) { .custom-band__in { grid-template-columns: 1fr; } } /* Product ------------------------------------------------------------------------ */ .prod__top { position: relative; overflow: hidden; padding: calc(var(--mast-h) + 2.5rem) 0 clamp(3rem, 6vw, 5rem); } .prod__glow { position: absolute; left: -10%; top: -20%; width: 70%; height: 120%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 150, 60, 0.2), transparent 70%); filter: blur(20px); pointer-events: none; } .prod__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .gallery { position: sticky; top: calc(var(--mast-h) + 1rem); display: grid; gap: 0.8rem; } .gallery__main { position: relative; margin: 0; aspect-ratio: 1.08; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px var(--line-d); } .gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; clip-path: inset(0 0 0 100%); transition: opacity 0.4s, clip-path 0.9s var(--ease-out); } .gallery__img.is-on { opacity: 1; clip-path: inset(0 0 0 0); } .gallery__lens { position: absolute; width: 11rem; height: 11rem; border-radius: 50%; transform: translate(-50%, -50%) scale(0.4); opacity: 0; pointer-events: none; background-repeat: no-repeat; box-shadow: 0 0 0 2px rgba(255, 176, 74, 0.8), 0 20px 50px rgba(0, 0, 0, 0.6); transition: opacity 0.25s, transform 0.35s var(--ease-out); } .gallery__main.is-zoom { cursor: zoom-in; } .gallery__main.is-zoom .gallery__lens { opacity: 1; transform: translate(-50%, -50%) scale(1); } .gallery__thumbs { display: flex; gap: 0.6rem; } .gallery__thumb { width: 5rem; height: 5rem; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--ink-3); opacity: 0.55; box-shadow: inset 0 0 0 1px var(--line-d); transition: opacity 0.3s, box-shadow 0.3s; } .gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery__thumb.is-on, .gallery__thumb:hover { opacity: 1; box-shadow: 0 0 0 2px var(--amber); } .prod__info { display: grid; gap: 1.3rem; align-content: start; } .prod__model { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .prod__model span { padding: 0.35rem 0.75rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-d); } .prod__model .prod__oem { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 176, 74, 0.5); } .prod__title { font-size: clamp(2rem, 4vw, 3.6rem); font-stretch: 118%; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; } .prod__lead { color: #c3c9d4; font-size: 1.08rem; } .prod__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0.4rem 0 0; border-radius: var(--r); overflow: hidden; background: var(--line-d); box-shadow: inset 0 0 0 1px var(--line-d); } .prod__facts div { padding: 1rem 1.1rem; background: var(--ink-2); display: grid; gap: 0.25rem; transition: background 0.3s; } .prod__facts div:hover { background: var(--ink-3); } .prod__facts dt { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-d); } .prod__facts dd { margin: 0; font-size: 1.12rem; font-weight: 600; font-variant-numeric: tabular-nums; } .prod__certs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; } .prod__certs li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: rgba(255, 176, 74, 0.1); color: var(--amber-3); box-shadow: inset 0 0 0 1px rgba(255, 176, 74, 0.3); } .prod__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; } .prod__acts .btn--glow { flex: 1 1 14rem; } .prod__wa { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.92rem; color: #57e39a; text-decoration: none; } .prod__note { font-size: 0.8rem; color: var(--mute-d); } @media (max-width: 960px) { .prod__grid { grid-template-columns: 1fr; } .gallery { position: relative; top: 0; } } .subnav { position: sticky; top: 0; z-index: 40; background: rgba(243, 239, 231, 0.82); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 0 var(--line-l); } .subnav__in { display: flex; align-items: center; gap: 1.6rem; height: 4rem; overflow-x: auto; scrollbar-width: none; } .subnav__in a { position: relative; flex: none; text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--mute-l); transition: color 0.3s; } .subnav__in a.is-on, .subnav__in a:hover { color: var(--on-l); } .subnav__in a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.25rem; height: 2px; background: var(--grad); } .subnav__name { margin-left: auto; flex: none; font-weight: 700; letter-spacing: 0.06em; opacity: 0; transition: opacity 0.3s; } .subnav__in .subnav__add { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border-radius: 999px; font-weight: 600; font-size: 0.88rem; text-decoration: none; background: var(--on-l); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.4s var(--ease-out), background 0.3s; pointer-events: none; } .subnav.is-stuck .subnav__name, .subnav.is-stuck .subnav__add { opacity: 1; transform: none; pointer-events: auto; } .subnav__add [data-when="in"] { display: none; } .subnav__add.is-in [data-when="in"] { display: inline; } .subnav__add.is-in [data-when="out"] { display: none; } .prod__body { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--paper); } .prod__cols { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .prod__main { display: grid; gap: clamp(3rem, 6vw, 5rem); min-width: 0; } .prod__side { position: sticky; top: 5.5rem; } @media (max-width: 1060px) { .prod__cols { grid-template-columns: 1fr; } .prod__side { position: static; } } .block { display: grid; gap: 1.6rem; scroll-margin-top: 6rem; } .block__title { font-size: clamp(1.7rem, 3vw, 2.6rem); font-stretch: var(--wide); letter-spacing: -0.03em; line-height: 1; } .spec { width: 100%; border-collapse: collapse; font-size: 0.98rem; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 24px 50px -40px rgba(20, 20, 40, 0.4); } .spec th, .spec td { padding: 0.95rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line-l); vertical-align: top; } .spec th { width: 36%; font-weight: 500; color: var(--mute-l); } .spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; } .spec tr { transition: background 0.25s; } .spec tr:hover { background: linear-gradient(90deg, rgba(255, 176, 74, 0.12), transparent 70%); } .carton { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; } .carton div { padding: 1.1rem 1.2rem; border-radius: var(--r); background: #fff; display: grid; gap: 0.2rem; } .carton .carton__wide { grid-column: 1 / -1; } .carton dt { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-l); } .carton dd { margin: 0; font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .carton { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .plan { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); background: linear-gradient(160deg, #111827, #070a12); color: var(--on-d); overflow: hidden; border-radius: var(--r-lg); } .plan__stage { position: relative; min-height: 22rem; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 60%, rgba(255, 150, 60, 0.12), transparent 70%); cursor: grab; } .plan__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .plan__stage.is-live .plan__svg { display: none; } .plan__svg { width: 90%; height: auto; } .plan__svg .plan__box { fill: none; stroke: var(--amber); stroke-width: 3; } .plan__svg .plan__ctn { fill: #b98a5a; stroke: #3a2a18; stroke-width: 1; } .plan__ctl { padding: 1.6rem; display: grid; gap: 1.1rem; align-content: start; border-left: 1px solid var(--line-d); } .plan__tabs { display: flex; gap: 0.3rem; padding: 0.3rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); } .plan__tab { flex: 1; height: 2.4rem; border: 0; border-radius: 999px; background: none; font-weight: 600; font-size: 0.9rem; color: var(--mute-d); transition: background 0.3s, color 0.3s; } .plan__tab.is-on { background: var(--grad); color: #1a0d00; } .plan__qty { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.3rem 0.6rem; font-size: 0.8rem; color: var(--mute-d); } .plan__qty span { grid-column: 1 / -1; } .plan__qty input { width: 100%; height: 3rem; padding: 0 1rem; border-radius: 12px; border: 1px solid var(--line-d); background: rgba(0, 0, 0, 0.3); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; } .plan__qty input:focus { outline: none; border-color: var(--amber); } .plan__out { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 0; } .plan__out dt { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-d); } .plan__out dd { margin: 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; } .plan__fill { display: grid; gap: 0.4rem; font-size: 0.85rem; color: var(--amber-3); } .plan__fill i { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .plan__fill b { display: block; height: 100%; background: var(--grad); transform-origin: left; transition: transform 0.6s var(--ease-out); box-shadow: 0 0 12px var(--amber); } .plan__note { font-size: 0.78rem; color: var(--mute-d); } @media (max-width: 860px) { .plan { grid-template-columns: 1fr; } .plan__ctl { border-left: 0; border-top: 1px solid var(--line-d); } .plan__stage { min-height: 16rem; } } .table-wrap { overflow-x: auto; } .load { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .load th, .load td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--line-l); } .load thead th { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-l); font-weight: 600; } .load tbody th { font-weight: 700; } .opts { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.8rem; } .opts li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: var(--r); background: #fff; font-weight: 500; } .opts .ico { color: var(--amber-2); margin-top: 0.2rem; } .terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; } .terms div { padding: 1.3rem; border-radius: var(--r); background: #fff; display: grid; gap: 0.4rem; } .terms dt { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; } .terms dt .ico { color: var(--amber-2); } .terms dd { margin: 0; color: var(--mute-l); font-size: 0.95rem; } @media (max-width: 700px) { .terms { grid-template-columns: 1fr; } } .side-card { padding: 1.6rem; display: grid; gap: 0.9rem; background: linear-gradient(160deg, #141b2a, #070a12); color: var(--on-d); } .side-card__k { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); font-weight: 600; } .side-card__price { font-size: 1.9rem; font-weight: 600; font-stretch: 115%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .side-card__sub { color: var(--mute-d); font-size: 0.9rem; margin-top: -0.5rem; } .side-card__who { display: flex; gap: 0.8rem; align-items: center; text-decoration: none; padding-top: 1rem; border-top: 1px solid var(--line-d); } .side-card__who b { display: block; } .side-card__who small { color: var(--mute-d); font-size: 0.8rem; } .side-card__mono { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--grad); color: #1a0d00; flex: none; } .side-card__reply { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--mute-d); } .more { padding: clamp(4rem, 8vw, 6rem) 0; background: var(--paper-2); } .dock { position: fixed; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; z-index: 45; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.7rem 0.7rem 1.2rem; border-radius: 999px; background: rgba(8, 11, 18, 0.88); color: var(--on-d); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line-d); transform: translateY(150%); transition: transform 0.5s var(--ease-out); } .dock__name { display: grid; line-height: 1.2; } .dock__name small { color: var(--mute-d); } .dock .btn { min-height: 2.8rem; padding: 0.6rem 1.1rem; } @media (max-width: 860px) { .dock { display: flex; } .dock.is-on { transform: none; } } /* Prose ------------------------------------------------------------------------------ */ .prose { max-width: 44rem; font-size: 1.08rem; line-height: 1.75; } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: 1.7rem; font-stretch: 112%; letter-spacing: -0.02em; margin-top: 2em; line-height: 1.15; } .prose h3 { font-size: 1.3rem; margin-top: 1.6em; } .prose a { color: var(--amber-ink); } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li + li { margin-top: 0.4em; } .prose blockquote { margin-left: 0; padding-left: 1.3rem; border-left: 3px solid var(--amber); font-size: 1.2rem; } .prose--lead > p:first-child { font-size: 1.28rem; line-height: 1.6; font-weight: 450; letter-spacing: -0.005em; } .prose--article > p:first-of-type::first-letter { float: left; font-size: 4.6rem; line-height: 0.82; font-weight: 700; font-stretch: 125%; padding: 0.3rem 0.6rem 0 0; color: var(--amber-2); } /* Factory -------------------------------------------------------------------------- */ .story { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--paper); } .story__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line-l); border-radius: var(--r-lg); overflow: hidden; } .stats div { padding: 1.4rem 1.3rem; background: #fff; display: grid; gap: 0.3rem; } .stats dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-l); } .stats dd { margin: 0; font-size: 1rem; color: var(--mute-l); } .stats b { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; font-stretch: 122%; letter-spacing: -0.04em; color: var(--on-l); font-variant-numeric: tabular-nums; } @media (max-width: 860px) { .story__in { grid-template-columns: 1fr; } } .team { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--paper-2); } .reg { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; overflow: hidden; background: radial-gradient(60% 70% at 90% 10%, rgba(255, 122, 47, 0.16), transparent 60%), var(--ink); } .reg__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .reg__in > div { display: grid; gap: 1.2rem; } .reg__lead { color: #c3c9d4; max-width: 30rem; } .reg__list { margin: 0; padding: 0.6rem 1.6rem; } .reg__list div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-d); } .reg__list div:last-child { border-bottom: 0; } .reg__list dt { color: var(--mute-d); font-size: 0.88rem; } .reg__list dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } @media (max-width: 860px) { .reg__in { grid-template-columns: 1fr; } .reg__list div { grid-template-columns: 1fr; gap: 0.2rem; } } /* OEM ------------------------------------------------------------------------------ */ .caps { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--paper); } .caps__in { display: grid; gap: clamp(3rem, 6vw, 5rem); } .caps__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; } .cap { --sx: 50%; --sy: 50%; --tx: 0deg; --ty: 0deg; position: relative; overflow: hidden; padding: 1.8rem; border-radius: var(--r-lg); background: #fff; display: grid; gap: 0.7rem; align-content: start; box-shadow: 0 24px 50px -40px rgba(20, 20, 40, 0.45); transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform 0.6s var(--ease-out); } .js .cap[data-rise] { transform: translate3d(var(--rx, 0px), var(--ry, 2.2rem), 0); } .js .cap[data-rise].is-in { transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); } .cap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--sx) var(--sy), rgba(255, 176, 74, 0.2), transparent 60%); opacity: 0; transition: opacity 0.4s; } .cap:hover::before { opacity: 1; } .cap__ico { width: 3.2rem; height: 3.2rem; border-radius: 16px; display: grid; place-items: center; background: var(--ink-2); color: var(--amber); margin-bottom: 0.6rem; } .cap__ico .ico { width: 1.5rem; height: 1.5rem; } .cap__name { font-size: 1.3rem; font-stretch: 110%; letter-spacing: -0.015em; } .cap__desc { color: var(--mute-l); font-size: 0.97rem; } /* Certificates page ------------------------------------------------------------------- */ .audits { padding: 0 0 clamp(4rem, 8vw, 7rem); background: var(--paper-2); } .audits__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); padding-top: 3rem; border-top: 1px solid var(--line-l); } .audits__in > div { display: grid; gap: 1rem; align-content: start; } .ticks { list-style: none; display: grid; gap: 0.6rem; } .ticks li { display: flex; gap: 0.6rem; align-items: flex-start; } .ticks .ico { color: var(--amber-2); margin-top: 0.3rem; } @media (max-width: 800px) { .audits__in { grid-template-columns: 1fr; } } /* Person ---------------------------------------------------------------------------- */ .who__head { position: relative; overflow: hidden; padding: calc(var(--mast-h) + 3rem) 0 4rem; } .who__in { position: relative; display: grid; gap: 1.2rem; justify-items: start; } .who__mono { width: 6.5rem; height: 6.5rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 2rem; font-weight: 700; background: var(--grad); color: #1a0d00; box-shadow: 0 0 0 6px rgba(255, 176, 74, 0.15), 0 20px 50px rgba(255, 122, 47, 0.35); } .who__mono img { width: 100%; height: 100%; object-fit: cover; } .who__role { color: #c3c9d4; font-size: 1.15rem; } .who__langs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; } .who__langs li { padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.85rem; box-shadow: inset 0 0 0 1px var(--line-d); } .who__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(3rem, 6vw, 5rem); } .who__side { display: grid; gap: 1.5rem; align-content: start; } .who__facts { margin: 0; display: grid; gap: 1.2rem; } .who__facts dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-l); margin-bottom: 0.3rem; } .who__facts dd { margin: 0; } .who__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; } @media (max-width: 860px) { .who__body { grid-template-columns: 1fr; } } /* News lists ---------------------------------------------------------------------------- */ .news--flat { background: var(--paper-2); } .news--flat .block__title { margin-bottom: 2rem; } .news--index { background: var(--paper); padding-top: clamp(2.5rem, 5vw, 4rem); } .ngrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ngrid--index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.4rem; } .ngrid--index .entry--lead { grid-column: 1 / -1; } .ngrid--index .entry--lead .entry__link { grid-template-columns: 1.3fr 1fr; align-items: center; column-gap: 2.5rem; } .ngrid--index .entry--lead .entry__img { grid-row: span 5; } @media (max-width: 900px) { .ngrid--3, .ngrid--index { grid-template-columns: 1fr; } .ngrid--index .entry--lead .entry__link { grid-template-columns: 1fr; } } .nav-links { display: flex; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; } .nav-links .page-numbers { display: grid; place-items: center; min-width: 2.8rem; height: 2.8rem; padding: 0 0.9rem; border-radius: 999px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-l); } .nav-links .current { background: var(--on-l); color: #fff; box-shadow: none; } /* Article ------------------------------------------------------------------------------- */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; } .progress i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px var(--amber); } .article__head { position: relative; overflow: hidden; padding: calc(var(--mast-h) + 3rem) 0 3.5rem; } .article__in { position: relative; display: grid; gap: 1.3rem; max-width: 64rem; } .article__title { font-size: clamp(2.2rem, 5.2vw, 4.8rem); font-stretch: 118%; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; } .article__dek { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: #c3c9d4; max-width: 44rem; } .byline { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; padding-top: 1.3rem; border-top: 1px solid var(--line-d); margin-top: 0.4rem; } .byline__who { display: flex; gap: 0.7rem; align-items: center; text-decoration: none; } .byline__who small, .byline__who em { display: block; font-size: 0.75rem; color: var(--mute-d); font-style: normal; } .byline__who b { display: block; font-size: 0.98rem; } .byline__mono { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--grad); color: #1a0d00; } .byline__dates { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.85rem; color: var(--mute-d); margin-left: auto; } .article__band { position: relative; margin: 0 var(--gut); height: clamp(14rem, 40vw, 32rem); border-radius: var(--r-lg); overflow: hidden; transform: translateY(-2rem); } .article__body { display: grid; gap: 3rem; justify-items: center; padding-bottom: clamp(4rem, 8vw, 6rem); } .article__body > * { width: 100%; max-width: 44rem; } .sources { padding: 1.5rem 1.6rem; border-radius: var(--r); background: #fff; font-size: 0.92rem; } .sources__title { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-l); margin-bottom: 0.8rem; } .sources ol { padding-left: 1.2rem; display: grid; gap: 0.4rem; } .sources a { color: var(--amber-ink); } .edit-note { padding: 1.4rem 1.6rem; border-radius: var(--r); border: 1px dashed var(--paper-3); color: var(--mute-l); font-size: 0.92rem; display: grid; gap: 0.8rem; } /* Page, search, 404 --------------------------------------------------------------------- */ .page-body { padding-block: clamp(3rem, 6vw, 5rem); display: grid; justify-items: center; gap: 2rem; } .page-body > * { width: 100%; max-width: 44rem; } .page-body__date { font-size: 0.85rem; color: var(--mute-l); } .results { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem); background: var(--paper); } .results .block__title { margin: 3rem 0 1.5rem; } .bigsearch { display: flex; gap: 0.6rem; max-width: 40rem; } .bigsearch input { flex: 1; min-width: 0; height: 3.4rem; padding: 0 1.3rem; border-radius: 999px; border: 1px solid var(--line-l); background: #fff; font-size: 1.05rem; } .bigsearch input:focus { outline: none; border-color: var(--amber-2); box-shadow: 0 0 0 4px rgba(255, 176, 74, 0.2); } .bigsearch--dark input { background: rgba(255, 255, 255, 0.06); border-color: var(--line-d); color: var(--on-d); } .hits { list-style: none; display: grid; gap: 0.6rem; } .hit a { display: grid; gap: 0.3rem; padding: 1.2rem 1.4rem; border-radius: var(--r); background: #fff; text-decoration: none; transition: transform 0.4s var(--ease-out), box-shadow 0.4s; } .hit a:hover { transform: translateX(6px); box-shadow: -4px 0 0 var(--amber); } .hit span { color: var(--mute-l); font-size: 0.93rem; } .hero--404 { height: 100vh; height: 100svh; } .hero--404 .hero__in { grid-template-columns: minmax(0, 1fr); } .hero--404 .hero__copy { max-width: 40rem; } .hero--404 .hero__title { font-size: clamp(2.5rem, 5.5vw, 5.4rem); } @media (prefers-reduced-motion: reduce) { .phead__glow { animation: none; } .gallery__img { transition: opacity 0.3s linear; clip-path: none; } } .rfq__done:focus { outline: none; }