/* ============================================ Linemoni — Corporate Design System ============================================ */ :root { /* Brand */ --navy-950: #061629; --navy-900: #0E2A4A; /* primary */ --navy-800: #163558; --navy-700: #1E4674; --navy-600: #2A5A8F; --accent: #2563EB; /* sparing use */ --accent-soft: #DBEAFE; /* Neutrals */ --ink: #0B1828; --body: #2C3A4B; --muted: #5A6878; --muted-2: #8B95A1; --hairline: #E4E8EE; --hairline-2: #EEF1F5; /* Surfaces */ --canvas: #FFFFFF; --soft: #F6F8FB; --soft-2: #EDF1F6; --strong: #0E2A4A; /* Semantic */ --success: #16A34A; --warning: #D97706; --error: #DC2626; /* Radius */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; /* Type */ --ff-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif; --ff-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Layout */ --container: 1240px; --section: 112px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(11, 24, 40, 0.04); --shadow-md: 0 8px 24px rgba(11, 24, 40, 0.06); --shadow-lg: 0 20px 48px rgba(11, 24, 40, 0.10); /* Motion — spring-like ease-out settle; fast press, slower release */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-press: 80ms; --dur-fast: 200ms; --dur-base: 350ms; } html { scroll-behavior: smooth; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--ff-sans); color: var(--body); background: var(--canvas); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } p { margin: 0; } /* ============================================ i18n — show/hide based on ============================================ */ html[lang="ko"] [data-lang="en"] { display: none !important; } html[lang="en"] [data-lang="ko"] { display: none !important; } /* ============================================ Container & Section ============================================ */ .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; } .section { padding: var(--section) 0; } .section--sm { padding: 72px 0; } .section--lg { padding: 144px 0; } .section--soft { background: var(--soft); } .section--strong { background: var(--navy-900); color: #DDE6F1; } .section--strong h1, .section--strong h2, .section--strong h3 { color: #fff; } /* ============================================ Header / Nav ============================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); /* Scroll edge effect: no divider at rest — a soft edge fades in only once content actually slides underneath (site.js toggles .is-scrolled) */ border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .site-header.is-scrolled { border-bottom-color: rgba(228, 232, 238, 0.7); box-shadow: 0 1px 12px rgba(11, 24, 40, 0.05); } .nav { max-width: var(--container); margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); font-size: 18px; } .brand__logo { width: 32px; height: 32px; object-fit: contain; display: block; } .brand__chip { width: 34px; height: 34px; display: grid; place-items: center; background: #fff; border-radius: var(--r-sm); } .brand__chip img { width: 24px; height: 24px; object-fit: contain; display: block; } .nav__menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav__menu a { display: inline-block; padding: 8px 14px; font-size: 14.5px; font-weight: 500; color: var(--body); border-radius: var(--r-sm); transition: color .15s, background .15s, transform var(--dur-base) var(--ease-out); } .nav__menu a:active { transform: scale(0.96); transition-duration: .15s, .15s, var(--dur-press); } .nav__menu a:hover { color: var(--ink); background: var(--soft); } .nav__menu a.is-active { color: var(--navy-900); background: var(--soft-2); } .nav__right { display: flex; align-items: center; gap: 12px; } .lang-toggle { display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; padding: 3px; background: var(--canvas); font-size: 12px; font-weight: 600; } .lang-toggle button { border: 0; background: transparent; padding: 5px 11px; border-radius: 999px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; transition: background .15s, color .15s, transform var(--dur-base) var(--ease-out); } .lang-toggle button:active { transform: scale(0.94); transition-duration: .15s, .15s, var(--dur-press); } .lang-toggle button.is-active { background: var(--navy-900); color: #fff; } /* ============================================ Buttons ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; height: 46px; border-radius: var(--r-md); font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; border: 1px solid transparent; white-space: nowrap; /* Release settles slowly (spring-like); press below overrides to be instant */ transition: background .15s, color .15s, border-color .15s, transform var(--dur-base) var(--ease-out); } /* Feedback on pointer-down, not on release — instant press, eased return */ .btn:active { transform: scale(0.97); transition-duration: .15s, .15s, .15s, var(--dur-press); } .btn--primary { background: var(--navy-900); color: #fff; border-color: var(--navy-900); } .btn--primary:hover { background: var(--navy-800); border-color: var(--navy-800); } .btn--secondary { background: var(--canvas); color: var(--ink); border-color: var(--hairline); } .btn--secondary:hover { background: var(--soft); border-color: #C8D2DE; } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--soft); } .btn--sm { height: 38px; padding: 8px 16px; font-size: 13.5px; } .btn--lg { height: 54px; padding: 14px 28px; font-size: 15.5px; } .btn .arrow { transition: transform var(--dur-fast) var(--ease-out); } .btn:hover .arrow { transform: translateX(3px); } /* ============================================ Type utilities ============================================ */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-700); } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--navy-700); } .eyebrow--light { color: #93B0D4; } .eyebrow--light::before { background: #93B0D4; } .display-xl { font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); } .display-lg { font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); } .display-md { font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); } .title-lg { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); } .title-md { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .lead { font-size: 18px; line-height: 1.65; color: var(--body); } .body { font-size: 15.5px; line-height: 1.65; color: var(--body); } .small { font-size: 13.5px; color: var(--muted); } .caption { font-size: 12.5px; color: var(--muted-2); letter-spacing: 0.02em; } /* ============================================ Hero (home) ============================================ */ .hero { padding: 96px 0 120px; border-bottom: 1px solid var(--hairline); background: radial-gradient(800px 400px at 85% 0%, rgba(37,99,235,0.06), transparent 60%), linear-gradient(180deg, #FBFCFE 0%, #FFFFFF 100%); } .hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; } .hero__title { margin-top: 20px; } .hero__sub { margin-top: 24px; font-size: 19px; line-height: 1.65; color: var(--body); max-width: 540px; } .hero__actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; } .hero__meta { margin-top: 56px; display: flex; gap: 40px; padding-top: 28px; border-top: 1px solid var(--hairline); flex-wrap: wrap; } .hero__meta-item .num { font-size: 28px; font-weight: 800; color: var(--navy-900); letter-spacing: -0.02em; } .hero__meta-item .lbl { font-size: 13px; color: var(--muted); margin-top: 4px; } /* Hero visual — abstract industrial monitoring panel */ .hero__visual { position: relative; aspect-ratio: 5 / 4; background: linear-gradient(160deg, #102D52 0%, #0A1E38 100%); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .hero__visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; mask-image: radial-gradient(ellipse at 70% 50%, black 30%, transparent 80%); } /* ============================================ Mock dashboard panels (industrial monitoring) ============================================ */ .mock-dash { position: absolute; inset: 28px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; color: #CFE0F5; font-size: 11px; font-family: var(--ff-mono); } .mock-dash__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); } .mock-dash__title { font-weight: 700; color: #fff; font-size: 13px; letter-spacing: 0.04em; } .mock-dash__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); margin-right: 8px; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); } 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.0); } } .mock-dash__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mock-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px; } .mock-card .k { font-size: 10px; color: #8FA6C4; letter-spacing: 0.08em; text-transform: uppercase; } .mock-card .v { font-size: 22px; color: #fff; font-weight: 700; margin-top: 6px; letter-spacing: -0.01em; } .mock-card .d { font-size: 11px; color: #4ADE80; margin-top: 4px; } .mock-card .d--warn { color: #FBBF24; } .mock-bars { display: flex; align-items: end; gap: 5px; height: 36px; margin-top: 10px; } .mock-bars span { flex: 1; background: #2A5A8F; border-radius: 2px; } .mock-dash__foot { display: flex; gap: 8px; font-size: 10px; color: #8FA6C4; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); } .mock-dash__foot span { padding: 3px 8px; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; } /* ============================================ Trusted-by strip ============================================ */ .trust { padding: 56px 0; border-bottom: 1px solid var(--hairline); background: var(--canvas); } .trust__label { text-align: center; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 28px; } .trust__logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: center; } .trust__logo { height: 56px; border: 1px solid var(--hairline); border-radius: var(--r-md); display: grid; place-items: center; font-weight: 700; color: var(--muted); letter-spacing: -0.01em; background: var(--canvas); font-size: 14px; text-align: center; padding: 0 16px; } .trust__logo img { max-height: 32px; max-width: 100%; width: auto; height: auto; } /* ============================================ Section header ============================================ */ .sec-head { margin-bottom: 56px; } .sec-head__row { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .sec-head h2 { margin-top: 14px; max-width: 720px; } .sec-head p { margin-top: 16px; max-width: 640px; } /* ============================================ Product cards — 3 variants (tweakable) ============================================ */ .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Variant A — Standard: hero visual + title + body */ .pcard-a { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .pcard-a:hover { border-color: #C8D2DE; transform: translateY(-2px); box-shadow: var(--shadow-md); } .pcard-a__vis { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #102D52 0%, #1E4674 100%); position: relative; overflow: hidden; } .pcard-a__vis::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 24px 24px; } .pcard-a__vis-icon { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.95); } .pcard-a__body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; } .pcard-a__tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--navy-700); text-transform: uppercase; margin-bottom: 12px; } .pcard-a__title { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; } .pcard-a__desc { margin-top: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.6; flex: 1; } .pcard-a__link { margin-top: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--navy-900); } .pcard-a__link:hover { color: var(--accent); } .pcard-a__link .arrow { transition: transform var(--dur-fast) var(--ease-out); } .pcard-a:hover .arrow { transform: translateX(3px); } /* Variant B — Editorial: large number, no image, feature list */ .pcard-b { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 36px 32px 32px; display: flex; flex-direction: column; position: relative; transition: border-color .15s, transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .pcard-b:hover { border-color: var(--navy-900); transform: translateY(-2px); box-shadow: var(--shadow-md); } .pcard-b__num { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--muted-2); letter-spacing: 0.1em; margin-bottom: 24px; } .pcard-b__title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); } .pcard-b__desc { margin-top: 14px; font-size: 14.5px; color: var(--muted); line-height: 1.65; } .pcard-b__features { margin: 22px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--hairline-2); display: flex; flex-direction: column; gap: 10px; flex: 1; } .pcard-b__features li { font-size: 13.5px; color: var(--body); display: flex; align-items: center; gap: 10px; } .pcard-b__features li::before { content: ""; width: 5px; height: 5px; background: var(--navy-700); border-radius: 50%; flex-shrink: 0; } .pcard-b__link { margin-top: 24px; font-size: 13.5px; font-weight: 600; color: var(--navy-900); display: inline-flex; align-items: center; gap: 6px; } .pcard-b__link .arrow { transition: transform var(--dur-fast) var(--ease-out); } .pcard-b:hover .arrow { transform: translateX(3px); } /* Variant C — Split: dark surface, label-led */ .pcard-c { background: var(--navy-900); color: #DDE6F1; border-radius: var(--r-xl); padding: 32px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .pcard-c::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 100% 0%, rgba(37,99,235,0.18), transparent 60%); pointer-events: none; } .pcard-c:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .pcard-c__chip { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #93B0D4; padding: 5px 10px; border: 1px solid rgba(147,176,212,0.3); border-radius: 999px; margin-bottom: 28px; position: relative; } .pcard-c__title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: #fff; position: relative; } .pcard-c__desc { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: #B8C7DA; position: relative; } .pcard-c__stats { margin-top: 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); position: relative; } .pcard-c__stat .v { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; } .pcard-c__stat .l { font-size: 11.5px; color: #8FA6C4; letter-spacing: 0.04em; margin-top: 4px; } .pcard-c__link { margin-top: 26px; font-size: 13.5px; font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 6px; position: relative; } .pcard-c__link .arrow { transition: transform var(--dur-fast) var(--ease-out); } .pcard-c:hover .arrow { transform: translateX(3px); } /* ============================================ Feature row (about, product-detail) ============================================ */ .feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .feature { padding: 8px 0; } .feature__num { font-family: var(--ff-mono); font-size: 12px; font-weight: 600; color: var(--navy-700); letter-spacing: 0.08em; } .feature__title { font-size: 19px; font-weight: 700; color: var(--ink); margin-top: 16px; letter-spacing: -0.015em; } .feature__desc { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-top: 10px; } /* ============================================ Stats strip ============================================ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--canvas); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .stats__item { padding: 40px 24px; border-right: 1px solid var(--hairline); } .stats__item:last-child { border-right: 0; } .stats__v { font-size: 36px; font-weight: 800; color: var(--navy-900); letter-spacing: -0.025em; line-height: 1; } .stats__l { font-size: 13px; color: var(--muted); margin-top: 10px; letter-spacing: 0.02em; } /* ============================================ CTA band ============================================ */ .cta-band { background: var(--navy-900); color: #fff; border-radius: var(--r-xl); padding: 64px 56px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 100% 100%, rgba(37,99,235,0.22), transparent 60%); pointer-events: none; } .cta-band h2 { color: #fff; position: relative; } .cta-band p { color: #B8C7DA; margin-top: 16px; font-size: 16.5px; max-width: 480px; position: relative; } .cta-band__actions { display: flex; gap: 12px; justify-content: flex-end; position: relative; } .cta-band .btn--primary { background: #fff; color: var(--navy-900); border-color: #fff; } .cta-band .btn--primary:hover { background: #E6EDF6; border-color: #E6EDF6; } .cta-band .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.25); } .cta-band .btn--secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); } /* ============================================ Footer ============================================ */ .site-footer { background: #0A1E38; color: #B8C7DA; padding: 80px 0 32px; font-size: 14px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; } .footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; } .footer__about { color: #93B0D4; font-size: 13.5px; line-height: 1.65; max-width: 320px; } .footer__col h4 { color: #fff; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; } .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer__col a { color: #B8C7DA; font-size: 14px; } .footer__col a:hover { color: #fff; } .footer__col li.muted { color: #6F87A6; font-size: 13.5px; } .footer__bottom { padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer__copy { color: #6F87A6; font-size: 13px; } .footer__legal { display: flex; gap: 24px; } .footer__legal a { color: #93B0D4; font-size: 13px; } /* ============================================ Page banner (sub-pages) ============================================ */ .page-banner { background: linear-gradient(180deg, #FBFCFE 0%, var(--canvas) 100%); padding: 80px 0 64px; border-bottom: 1px solid var(--hairline); } .page-banner__crumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 20px; } .page-banner__crumb a:hover { color: var(--ink); } .page-banner__crumb .sep { color: var(--muted-2); } .page-banner h1 { font-size: clamp(36px, 4.2vw, 52px); font-weight: 800; letter-spacing: -0.03em; } .page-banner__sub { margin-top: 18px; font-size: 17px; color: var(--body); max-width: 640px; line-height: 1.65; } /* ============================================ About — values, timeline ============================================ */ .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .value { padding: 40px 32px 44px; border-right: 1px solid var(--hairline); } .value:last-child { border-right: 0; } .value__num { font-family: var(--ff-mono); font-size: 12px; color: var(--navy-700); letter-spacing: 0.08em; font-weight: 600; } .value__title { font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 16px; letter-spacing: -0.015em; } .value__desc { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-top: 12px; } .timeline { border-left: 1px solid var(--hairline); padding-left: 0; list-style: none; margin: 0; } .timeline li { padding: 0 0 36px 32px; position: relative; } .timeline li::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; background: var(--navy-900); border-radius: 50%; } .timeline__year { font-size: 13.5px; font-weight: 700; color: var(--navy-900); letter-spacing: 0.02em; } .timeline__event { font-size: 15.5px; color: var(--body); margin-top: 6px; } .about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; } .about-grid__media { aspect-ratio: 4 / 5; background: linear-gradient(160deg, #102D52 0%, #0A1E38 100%); border-radius: var(--r-xl); overflow: hidden; position: relative; } .about-grid__media::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse at 40% 50%, black 30%, transparent 80%); } .about-grid__caption { position: absolute; left: 28px; bottom: 28px; right: 28px; color: #B8C7DA; font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.04em; } /* ============================================ Clients page ============================================ */ .client-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--canvas); } .client-cell { aspect-ratio: 16 / 9; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); display: grid; place-items: center; padding: 24px; text-align: center; position: relative; background: var(--canvas); } .client-cell:nth-child(4n) { border-right: 0; } .client-cell__name { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .client-cell__cat { font-size: 11.5px; color: var(--muted); margin-top: 4px; letter-spacing: 0.04em; } .client-cell__logo { height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .client-cell__logo img { max-height: 34px; max-width: 170px; width: auto; height: auto; } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .case { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 28px; background: var(--canvas); transition: border-color .15s, transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .case:hover { border-color: #C8D2DE; transform: translateY(-2px); box-shadow: var(--shadow-md); } .case__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; } .case__logo { max-height: 22px; max-width: 130px; width: auto; height: auto; flex-shrink: 0; } .case__industry { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--navy-700); text-transform: uppercase; } .case__name { font-size: 19px; font-weight: 700; color: var(--ink); margin-top: 14px; letter-spacing: -0.015em; } .case__summary { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-top: 12px; } .case__meta { display: flex; gap: 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline-2); } .case__meta-item .v { font-size: 17px; font-weight: 700; color: var(--navy-900); letter-spacing: -0.015em; } .case__meta-item .l { font-size: 11.5px; color: var(--muted); margin-top: 3px; } /* ============================================ Product detail ============================================ */ .pd-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; } .pd-hero__visual { aspect-ratio: 5 / 4; background: linear-gradient(160deg, #102D52 0%, #0A1E38 100%); border-radius: var(--r-xl); overflow: hidden; position: relative; box-shadow: var(--shadow-lg); } .pd-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--hairline); } .pd-spec__row { display: grid; grid-template-columns: 200px 1fr; padding: 20px 0; border-bottom: 1px solid var(--hairline); gap: 24px; } .pd-spec__k { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; padding-top: 2px; } .pd-spec__v { font-size: 15.5px; color: var(--ink); } .pd-screens { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .pd-screen { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #15355A 0%, #0A1E38 100%); border-radius: var(--r-lg); position: relative; overflow: hidden; border: 1px solid #1A3A5C; } /* ============================================ Contact form ============================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } .contact-info ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 22px; } .contact-info li { padding-bottom: 22px; border-bottom: 1px solid var(--hairline-2); } .contact-info li:last-child { border-bottom: 0; } .contact-info .k { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .contact-info .v { font-size: 16px; color: var(--ink); margin-top: 8px; font-weight: 600; } .form { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 40px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-row--full { grid-template-columns: 1fr; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; } .field label .req { color: var(--error); margin-left: 2px; } .field input, .field select, .field textarea { height: 46px; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 0 14px; font-family: inherit; font-size: 14.5px; color: var(--ink); background: var(--canvas); transition: border-color .15s, box-shadow .15s; } .field textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 140px; line-height: 1.55; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-900); box-shadow: 0 0 0 3px rgba(14,42,74,0.08); } .field .help { font-size: 12px; color: var(--muted-2); } .form__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--body); margin: 8px 0 24px; } .form__consent input { margin-top: 3px; } .form__consent a { color: var(--navy-900); text-decoration: underline; } .form__actions { display: flex; gap: 12px; align-items: center; } .form__note { font-size: 12.5px; color: var(--muted); } /* ============================================ Tweaks (products page only) ============================================ */ .tweaks { background: var(--soft); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 20px 0; } .tweaks__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .tweaks__label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; } .tweaks__variants { display: inline-flex; border: 1px solid var(--hairline); background: var(--canvas); border-radius: var(--r-md); padding: 3px; } .tweaks__variants button { border: 0; background: transparent; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 5px; letter-spacing: -0.005em; } .tweaks__variants button.is-active { background: var(--navy-900); color: #fff; } /* ============================================ Character mascot ============================================ */ .about-photo { display: block; width: 100%; height: auto; margin-top: 40px; border-radius: var(--r-lg); border: 1px solid var(--hairline); } .contact-photo { display: block; width: 100%; height: auto; margin-top: 36px; border-radius: var(--r-md); border: 1px solid var(--hairline); } /* ============================================ Responsive ============================================ */ @media (max-width: 1024px) { :root { --section: 80px; } .hero__grid { grid-template-columns: 1fr; gap: 40px; } .pd-hero { grid-template-columns: 1fr; gap: 40px; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .products-grid { grid-template-columns: repeat(2, 1fr); } .feature-row { grid-template-columns: 1fr; gap: 20px; } .case-grid { grid-template-columns: 1fr 1fr; } .value-grid { grid-template-columns: 1fr; } .value { border-right: 0; border-bottom: 1px solid var(--hairline); } .value:last-child { border-bottom: 0; } .stats { grid-template-columns: repeat(2, 1fr); } .stats__item:nth-child(2) { border-right: 0; } .stats__item:nth-child(1), .stats__item:nth-child(2) { border-bottom: 1px solid var(--hairline); } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .client-grid { grid-template-columns: 1fr 1fr; } .client-cell:nth-child(4n) { border-right: 1px solid var(--hairline); } .client-cell:nth-child(2n) { border-right: 0; } .cta-band { grid-template-columns: 1fr; padding: 48px 32px; } .cta-band__actions { justify-content: flex-start; } } @media (max-width: 720px) { :root { --section: 64px; } .container { padding: 0 20px; } .nav { padding: 0 20px; gap: 16px; height: 64px; } .nav__menu { display: none; } .products-grid { grid-template-columns: 1fr; } .case-grid { grid-template-columns: 1fr; } .client-grid { grid-template-columns: 1fr 1fr; } .trust__logos { grid-template-columns: repeat(2, 1fr); } .trust__logo:last-child { grid-column: 1 / -1; } .form { padding: 24px; } .form-row { grid-template-columns: 1fr; } .pd-spec { grid-template-columns: 1fr; } .pd-screens { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .stats__item { border-right: 0 !important; border-bottom: 1px solid var(--hairline); } } /* ============================================ Form validation states (jQuery unobtrusive) ============================================ */ .help--error, .field-validation-error { color: #C0392B; font-size: 13px; margin-top: 6px; display: block; } .field-validation-valid { display: none; } .input-validation-error { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important; } .form__errors { margin-bottom: 20px; } .form__errors ul { margin: 0; padding-left: 18px; color: #C0392B; font-size: 13.5px; } .form__errors:empty { display: none; } .validation-summary-valid { display: none; } /* ============================================ Mobile navigation ============================================ */ .nav__burger { display: none; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; border-radius: var(--r-sm); flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .nav__burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out); } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); } .mobile-menu { display: none; padding: 8px 20px 20px; border-top: 1px solid var(--hairline-2); background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .mobile-menu__list { list-style: none; margin: 0 0 12px; padding: 0; } .mobile-menu__list a { display: block; padding: 13px 12px; font-size: 16px; font-weight: 600; color: var(--ink); border-radius: var(--r-md); } .mobile-menu__list a:active { background: var(--soft); } .mobile-menu__list a.is-active { color: var(--navy-900); background: var(--soft-2); } .mobile-menu__cta { width: 100%; } @media (max-width: 720px) { .nav__burger { display: flex; } .nav__right .btn { display: none; } /* CTA moves into the panel */ .mobile-menu:not([hidden]) { display: block; animation: menu-in var(--dur-fast) var(--ease-out); transform-origin: top; /* emerges from the header it belongs to */ } } @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mobile-menu:not([hidden]) { animation: none; } .nav__burger span { transition: none; } } @media (prefers-reduced-transparency: reduce) { .mobile-menu { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ============================================ Product detail — feature cards ============================================ */ .pd-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .pd-feature { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 32px; } @media (max-width: 720px) { .pd-features { grid-template-columns: 1fr; } } /* ============================================ Rollout process ============================================ */ .process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; } .process__step { position: relative; padding-top: 24px; border-top: 1px solid var(--hairline); } .process__step::before { content: ""; position: absolute; top: -4.5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--navy-900); } .process__num { font-family: var(--ff-mono); font-size: 12px; font-weight: 600; color: var(--navy-700); letter-spacing: 0.08em; } .process__title { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 12px; letter-spacing: -0.01em; } .process__desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-top: 8px; } @media (max-width: 1024px) { .process { grid-template-columns: 1fr; gap: 0; } .process__step { border-top: 0; border-left: 1px solid var(--hairline); padding: 0 0 32px 24px; } .process__step:last-child { padding-bottom: 0; } .process__step::before { top: 4px; left: -4.5px; } } /* ============================================ FAQ (native
accordion) ============================================ */ .faq details { border-bottom: 1px solid var(--hairline); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 16.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--navy-700); } .faq__chevron { flex-shrink: 0; color: var(--muted-2); font-size: 14px; transition: transform var(--dur-fast) var(--ease-out); } .faq details[open] .faq__chevron { transform: rotate(180deg); } .faq details > p { padding: 0 4px 22px; max-width: 700px; } /* ============================================ Testimonials ============================================ */ .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .quote { margin: 0; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 32px 28px 28px; display: flex; flex-direction: column; } .quote::before { content: "\201C"; font-size: 44px; line-height: 1; font-weight: 800; color: var(--navy-600); margin-bottom: 12px; } .quote__text { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--body); flex: 1; } .quote__person { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hairline-2); display: flex; flex-direction: column; gap: 2px; } .quote__name { font-size: 13.5px; font-weight: 700; color: var(--ink); } .quote__org { font-size: 12.5px; color: var(--muted); } @media (max-width: 1024px) { .quote-grid { grid-template-columns: 1fr; } } /* ============================================ Privacy policy ============================================ */ .privacy-item { padding: 28px 0; border-bottom: 1px solid var(--hairline-2); } .privacy-item h2 { margin-bottom: 12px; } /* ============================================ Focus ring (keyboard only) ============================================ */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } .btn:focus-visible { outline-offset: 3px; border-radius: var(--r-md); } /* ============================================ Scroll reveal — classes are added by site.js only, so content stays fully visible without JS. Compositor-only props (opacity/transform). ============================================ */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal.is-revealed { opacity: 1; transform: none; will-change: auto; } /* ============================================ Accessibility — reduced motion / transparency / contrast ============================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mock-dash__dot { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } .btn, .btn:active, .nav__menu a, .nav__menu a:active, .lang-toggle button, .lang-toggle button:active, .pcard-a, .pcard-a:hover, .pcard-b, .pcard-b:hover, .pcard-c, .pcard-c:hover, .case, .case:hover, .btn .arrow, .pcard-a__link .arrow, .pcard-b__link .arrow, .pcard-c__link .arrow { transform: none; transition-property: background, color, border-color, box-shadow, opacity; } } @media (prefers-reduced-transparency: reduce) { .site-header { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { .site-header { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--ink); } .btn--secondary { border-color: var(--ink); } .field input, .field select, .field textarea { border-color: var(--ink); } }