/* VAMX unified site — shared styles for marketing pages. One palette for the whole site: brand blue (same primary as the SaaS workbench, style/theme.css) on navy. */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; } img, svg, video, canvas { max-width: 100%; } [hidden] { display: none !important; } :root{ /* neutrals */ --paper:#F4F6FA; --surface:#FFFFFF; --surface-2:#EDF1F7; --line:#D9E0EB; --line-soft:#E7ECF3; --ink:#0F1B33; --muted:#56637A; --faint:#8592A8; /* brand */ --brand:#1248B5; --brand-ink:#0D3A94; --brand-wash:#EAF0FB; --brand-soft:#BFD0F0; /* navy panels (hero, bands, footer) */ --panel:#0B1630; --panel-2:#12203F; --panel-line:#24365C; --panel-ink:#EEF2FA; --panel-muted:#9DAECB; --brand-dark:#7FA8FF; --brand-dark-wash:rgba(127,168,255,.14); --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace; --fs-hero:clamp(2.05rem,1.2rem + 3.4vw,3.5rem); --fs-h2:clamp(1.45rem,1.1rem + 1.35vw,2.1rem); --fs-h3:1.08rem; --fs-body:1rem; --fs-small:.9375rem; --fs-micro:.78rem; --gutter:clamp(16px,4.5vw,48px); --r:6px; } /* per-locale system font stacks (pages set ) */ :root:lang(en),:root:lang(vi){ --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;} :root:lang(ja){ --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP","Segoe UI",sans-serif;} :root:lang(ko){ --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Segoe UI",sans-serif;} :lang(ko) body{word-break:keep-all;overflow-wrap:anywhere;} :lang(en) body,:lang(vi) body{line-height:1.65;} body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:var(--fs-body); line-height:1.75; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:700;text-wrap:balance;letter-spacing:.01em;} p{margin:0;} a{color:inherit;} ul,ol{margin:0;padding:0;} ::selection{background:var(--brand-soft);} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--brand);outline-offset:3px;} .shell{padding-inline:var(--gutter);} .inner{max-width:1180px;margin:0 auto;} .mono{font-family:var(--mono);} .link{color:var(--brand);} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font:inherit;font-size:var(--fs-small);font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap; padding:12px 20px;border-radius:var(--r);border:1px solid transparent;cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease;} .btn-sm{padding:8px 14px;font-size:.875rem;} .btn-primary{background:var(--brand);color:#fff;} .btn-primary:hover{background:var(--brand-ink);} .btn-line{background:var(--surface);border-color:var(--line);color:var(--ink);} .btn-line:hover{border-color:var(--brand);color:var(--brand);} .btn-dark-line{border-color:var(--panel-line);color:var(--panel-ink);background:transparent;} .btn-dark-line:hover{border-color:var(--brand-dark);color:#fff;} .arrow::after{content:"→";font-weight:400;} /* ---------- header ---------- */ .site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96); border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(8px);} .head-row{display:flex;align-items:center;gap:20px;min-height:64px;} .site-head .inner{max-width:1360px;} /* wider than content so longer nav labels (e.g. Vietnamese) still fit on one row */ .brand{display:flex;align-items:center;flex-shrink:0;} .brand img{height:30px;width:auto;display:block;} .menu{display:flex;align-items:center;gap:4px;flex:1;min-width:0;} .menu > a{font-size:.9375rem;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:var(--r);white-space:nowrap;} .menu > a:hover{color:var(--ink);background:var(--surface-2);} .menu > a.active{color:var(--brand);font-weight:600;} .menu-tail{display:flex;align-items:center;gap:10px;margin-inline-start:auto;} .burger{display:none;margin-inline-start:auto;background:none;border:1px solid var(--line);border-radius:var(--r); width:42px;height:38px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;} .burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px;} .lang{position:relative;} .lang summary{list-style:none;cursor:pointer;font-size:.875rem;color:var(--muted); padding:7px 26px 7px 10px;border:1px solid var(--line);border-radius:var(--r);position:relative;white-space:nowrap;} .lang summary::-webkit-details-marker{display:none;} .lang summary::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;margin-top:-5px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);} .lang ul{list-style:none;position:absolute;right:0;top:calc(100% + 6px);min-width:150px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);padding:6px;box-shadow:0 10px 30px rgba(15,27,51,.12);z-index:5;} .lang li a{display:block;padding:7px 10px;border-radius:4px;text-decoration:none;font-size:.9rem;} .lang li a:hover{background:var(--surface-2);} .lang li a[aria-current]{color:var(--brand);font-weight:600;} /* Collapsed header. site.js adds .collapsed whenever the nav does not fit on one row (label length differs per language); the media query only covers first paint before .measured. */ @media (max-width:1140px){ .site-head:not(.measured) .burger{display:flex;} .site-head:not(.measured) .menu{display:none;} } .site-head.collapsed .burger{display:flex;} .site-head.collapsed .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface); border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0; padding:8px var(--gutter) 18px;box-shadow:0 16px 30px rgba(15,27,51,.08);} .site-head.collapsed.open .menu{display:flex;} .site-head.collapsed .menu > a{padding:12px 4px;border-bottom:1px solid var(--line-soft);border-radius:0;} .site-head.collapsed .menu-tail{margin:14px 0 0;flex-wrap:wrap;} .site-head.collapsed .lang ul{left:0;right:auto;} /* ---------- labels shared by light and dark sections ---------- */ .eyebrow,.sec-label{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--brand);} .sec-label{margin-bottom:12px;} .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;padding:3px 9px;border-radius:3px;white-space:nowrap;align-self:start; background:var(--brand-wash);color:var(--brand);} /* ---------- hero (navy): SaaS entry + 3-step workspace demo ---------- */ .hero{background:var(--panel);color:var(--panel-ink);} .hero .inner{padding-block:clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4.5vw,64px);align-items:center;} .hero-copy{display:flex;flex-direction:column;gap:20px;} .hero .eyebrow{color:var(--brand-dark);} .hero h1{font-size:clamp(2rem,1.1rem + 2.6vw,3.1rem);font-weight:800;line-height:1.2;letter-spacing:.01em;} :lang(en) .hero h1,:lang(vi) .hero h1{font-size:clamp(1.9rem,1rem + 1.9vw,2.6rem);letter-spacing:0;} .hero h1 em{font-style:normal;color:var(--brand-dark);} .hero .sub{color:var(--panel-muted);font-size:clamp(1rem,.95rem + .3vw,1.1rem);max-width:38em;} .cta-row{display:flex;gap:12px;flex-wrap:wrap;} .btn-lg{padding:14px 26px;font-size:1rem;} .quick{list-style:none;display:flex;flex-direction:column;gap:12px;} .quick li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;} .quick .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.8rem; color:var(--brand-dark);border:1px solid var(--panel-line);background:var(--brand-dark-wash);} .quick .qt{display:flex;flex-direction:column;line-height:1.5;padding-top:2px;} .quick b{color:var(--panel-ink);font-weight:600;} .quick .qt > span{color:var(--panel-muted);font-size:.9rem;} .hero-note{font-size:.88rem;color:var(--panel-muted);} .hero-note a{color:var(--brand-dark);} @media (max-width:900px){ .hero .inner{grid-template-columns:1fr;} } /* workspace demo window (light UI on the navy hero) */ .app{background:var(--surface);color:var(--ink);border-radius:12px;overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06);} .app-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.8rem;} .app-bar .dots{display:flex;gap:6px;} .app-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line);} .app-title{font-weight:600;} .app-quota{margin-inline-start:auto;color:var(--muted);font-family:var(--mono);font-size:.72rem;white-space:nowrap;} .stage{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line-soft);transition:opacity .4s ease;} .stage:last-child{border-bottom:none;} .app.playing .stage:not(.on):not(.done){opacity:.4;} .stage .sn{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.75rem; background:var(--surface-2);color:var(--muted);transition:background-color .3s ease,color .3s ease;} .stage.on .sn{background:var(--brand);color:#fff;} .stage.done .sn{background:var(--brand-wash);color:var(--brand);} .stage-body{display:flex;flex-direction:column;gap:8px;min-width:0;} .stage-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9rem;} .stage-head .st{font-family:var(--mono);font-size:.72rem;color:var(--muted);white-space:nowrap;} .stage-head .done-t{display:none;} .stage.on .st,.stage.done .st{color:var(--brand);} .stage.done .doing-t{display:none;} .stage.done .done-t{display:inline;} .tabs,.chips,.exports{display:flex;gap:6px;flex-wrap:wrap;} .tabs span{font-size:.75rem;padding:3px 10px;border-radius:20px;background:var(--surface-2);color:var(--muted);} .tabs span.on{background:var(--brand-wash);color:var(--brand);font-weight:600;} .chips span{font-size:.72rem;padding:2px 8px;border-radius:3px;background:var(--brand-wash);color:var(--brand);} .exports span{font-family:var(--mono);font-size:.7rem;padding:3px 8px;border:1px solid var(--line);border-radius:4px;} .file{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);} .file .ftype{font-family:var(--mono);font-size:.68rem;font-weight:600;color:#fff;background:var(--brand);border-radius:4px;padding:3px 6px;} .file .fmeta{display:flex;flex-direction:column;line-height:1.4;min-width:0;} .file .fmeta b{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .file .fmeta span{font-size:.72rem;color:var(--muted);} .meter{height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden;} .meter i{display:block;height:100%;width:var(--p,100%);background:var(--brand);} .app canvas{display:block;width:100%;height:56px;--wave-bg:var(--surface);--wave-off:var(--line);--wave-on:var(--brand);} .transcript{display:flex;flex-direction:column;gap:6px;} .tline{font-size:.84rem;line-height:1.55;display:grid;grid-template-columns:auto 1fr;gap:10px;} .tline .who{font-family:var(--mono);font-size:.7rem;color:var(--brand);padding-top:2px;white-space:nowrap;} .summary-line{padding:8px 10px;border-radius:4px;background:var(--brand-wash);font-size:.8rem;color:var(--muted);} .summary-line b{color:var(--brand-ink);font-weight:600;} .facts{background:var(--panel-2);border-top:1px solid var(--panel-line);color:var(--panel-muted);} .facts .inner{display:flex;flex-wrap:wrap;gap:8px 32px;padding-block:14px;font-size:.86rem;} .facts b{color:var(--panel-ink);font-weight:600;margin-inline-end:4px;} /* ---------- page hero (light, sub pages) ---------- */ .phero{background:var(--surface);border-bottom:1px solid var(--line);} .phero .inner{padding-block:clamp(44px,6vw,80px);display:flex;flex-direction:column;gap:18px;} .phero h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);font-weight:800;max-width:22em;} .phero h1 em{font-style:normal;color:var(--brand);} .phero .sub{color:var(--muted);max-width:44em;font-size:1.05rem;} .phero .sub a{color:var(--brand);} /* ---------- sections ---------- */ section{padding-block:clamp(52px,7vw,92px);} section.tight-top{padding-top:0;} section.alt{background:var(--surface);border-block:1px solid var(--line);} h2{font-size:var(--fs-h2);font-weight:800;max-width:24em;} .sec-intro{max-width:46em;color:var(--muted);margin-top:14px;} .stack{display:flex;flex-direction:column;gap:clamp(26px,4vw,42px);} .sec-head-row{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;} .grid{display:grid;gap:18px;} .g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));} .g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));} .g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px; display:flex;flex-direction:column;gap:10px;transition:border-color .15s ease;} .card:hover{border-color:var(--brand-soft);} .card .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--faint);} .card h3{font-size:var(--fs-h3);} .card p{font-size:var(--fs-small);color:var(--muted);} .card .ico{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:var(--brand-wash);color:var(--brand);} .card .ico svg{width:22px;height:22px;} .card .more{margin-top:auto;padding-top:6px;font-size:.9rem;font-weight:600;color:var(--brand);text-decoration:none;} .card .more:hover{text-decoration:underline;} .ticks{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small);} .ticks li{position:relative;padding-inline-start:22px;} .ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:6px; border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg);} /* two business lines */ .lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:18px;} .line-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;} .line-card header{padding:26px 26px 18px;border-top:4px solid var(--brand);display:flex;flex-direction:column;gap:8px;} .line-card header .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--brand);} .line-card header h3{font-size:1.4rem;font-weight:800;} .line-card header p{color:var(--muted);font-size:var(--fs-small);} .line-card .body{padding:0 26px 26px;display:flex;flex-direction:column;gap:18px;flex:1;} .line-card .links{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;} /* steps */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:24px;} .step{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--brand);} .step .k{font-family:var(--mono);font-size:var(--fs-micro);color:var(--brand);letter-spacing:.1em;} .step h3{font-size:var(--fs-h3);} .step p{font-size:var(--fs-small);color:var(--muted);} /* process (ODM) */ .process{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;counter-reset:p;} .process li{background:var(--surface);padding:22px 20px;display:flex;flex-direction:column;gap:6px;counter-increment:p;} .process li::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);font-size:var(--fs-micro);color:var(--brand);letter-spacing:.1em;} .process h3{font-size:1rem;} .process p{font-size:.9rem;color:var(--muted);} /* navy band */ .band{background:var(--panel);color:var(--panel-ink);} .band .sec-label{color:var(--brand-dark);} .band .sec-intro{color:var(--panel-muted);} .band .tag{background:var(--brand-dark-wash);color:var(--brand-dark);} .layers{display:flex;flex-direction:column;gap:1px;background:var(--panel-line);border:1px solid var(--panel-line);border-radius:var(--r);overflow:hidden;} .layer{background:var(--panel-2);padding:20px 24px;display:grid;grid-template-columns:minmax(170px,1fr) 2.2fr auto;gap:10px 24px;align-items:start;} .layer h3{font-size:var(--fs-h3);} .layer h3 small{display:block;font-weight:400;font-size:.8rem;color:var(--panel-muted);margin-top:2px;} .layer .what{font-size:.9rem;color:var(--panel-muted);line-height:1.8;} @media (max-width:720px){ .layer{grid-template-columns:1fr;} } /* spec sheet */ .specsheet{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);overflow:hidden;} .specsheet header{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;} .specsheet header h3{font-size:1.3rem;} .specsheet header .note{font-size:var(--fs-micro);color:var(--muted);font-family:var(--mono);} .specrows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));} .specrow{padding:15px 24px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px;} .specrow .k{font-size:var(--fs-micro);color:var(--faint);letter-spacing:.06em;} .specrow .v{font-size:var(--fs-small);font-weight:600;} /* numbered requirement list */ .reqs{display:flex;flex-direction:column;} .req{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-small);} .req:first-child{padding-top:0;} .req .n{font-family:var(--mono);font-size:var(--fs-micro);color:var(--brand);padding-top:3px;} .req .t{font-weight:600;display:block;} .req .d{display:block;color:var(--muted);font-size:.9rem;} .feature-panel{background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:var(--r); padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;} .feature-panel p{color:var(--muted);font-size:var(--fs-small);margin-top:12px;} .feature-panel p a{color:var(--brand);} @media (max-width:820px){ .feature-panel{grid-template-columns:1fr !important;} } /* platform logos (link import) */ .platforms{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);} .platforms img{width:28px;height:28px;border-radius:6px;} /* pricing */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;align-items:stretch;} .plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;gap:14px;position:relative;} .plan.featured{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);} .plan.featured .badge{position:absolute;top:-11px;left:22px;background:var(--brand);color:#fff;font-size:.75rem;font-weight:600;padding:2px 10px;border-radius:20px;} .plan .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;color:var(--faint);} .plan h3{font-size:1.2rem;} .plan .tagline{font-size:.9rem;color:var(--muted);margin-top:-8px;} .plan .amt{font-size:2.2rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;} .plan .amt small{font-size:.9rem;font-weight:500;color:var(--muted);} .plan .amt .cur{font-size:1.2rem;vertical-align:.5em;margin-inline-end:2px;} .plan .foot{margin-top:auto;padding-top:6px;} .plan .foot .btn{width:100%;} .note-line{font-size:.85rem;color:var(--muted);} /* code */ .dev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:start;} @media (max-width:860px){ .dev{grid-template-columns:1fr;} } .devlist{display:flex;flex-direction:column;gap:16px;} .devitem{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--line);} .devitem h3{font-size:var(--fs-h3);} .devitem p{font-size:var(--fs-small);color:var(--muted);} .code{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);overflow:hidden;direction:ltr;} .code .bar{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--panel-line); font-family:var(--mono);font-size:var(--fs-micro);color:var(--panel-muted);} .code pre{margin:0;padding:18px 16px;overflow-x:auto;font-family:var(--mono);font-size:.8rem;line-height:1.85;color:var(--panel-ink);} .code .c{color:#6F82A8;} .code .s{color:#B8CCF2;} .code .kw{color:var(--brand-dark);} .code .fn{color:#FFFFFF;font-weight:500;} /* FAQ */ .faq-group{display:flex;flex-direction:column;gap:14px;} .faq-group + .faq-group{margin-top:clamp(30px,4vw,48px);} .faq-group > h3{font-size:1.15rem;display:flex;align-items:center;gap:10px;} .faq-group > p{color:var(--muted);} .faq-group > p a{color:var(--brand);} .qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);} .qa[open]{border-color:var(--brand-soft);} .qa summary{list-style:none;cursor:pointer;padding:16px 48px 16px 20px;font-weight:600;position:relative;} .qa summary::-webkit-details-marker{display:none;} .qa summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.3rem;font-weight:400;color:var(--brand);} .qa[open] summary::after{content:"−";} .qa .a{padding:0 20px 18px;color:var(--muted);font-size:var(--fs-small);display:flex;flex-direction:column;gap:8px;} .qa .a a{color:var(--brand);} /* forms */ .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;} .form .full{grid-column:1 / -1;} @media (max-width:640px){ .form{grid-template-columns:1fr;} } .field{display:flex;flex-direction:column;gap:6px;} .field label{font-size:.88rem;font-weight:600;} .field label .req-mark{color:var(--brand);margin-inline-start:2px;} .field input,.field select,.field textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface); border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;width:100%;} .field textarea{min-height:120px;resize:vertical;} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-wash);} .form-note{font-size:.85rem;color:var(--muted);} .form-msg{font-size:.9rem;color:var(--brand-ink);background:var(--brand-wash);border-radius:var(--r);padding:10px 14px;} /* download tiles */ .dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px;} .dl-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-decoration:none;} a.dl-tile:hover{border-color:var(--brand);} .dl-tile .os{display:flex;align-items:center;gap:12px;font-size:1.1rem;font-weight:700;} .dl-tile .os img{width:36px;height:36px;object-fit:contain;} .dl-tile .ver{font-size:.85rem;color:var(--muted);} .dl-tile .qr{width:128px;height:128px;border:1px solid var(--line);border-radius:4px;} /* hardware illustrations (images/hw/*.svg) */ .products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;} .product{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column; transition:border-color .15s ease,box-shadow .2s ease;} .product:hover{border-color:var(--brand-soft);box-shadow:0 14px 34px rgba(15,27,51,.08);} .product-visual,.component-visual{background:radial-gradient(120% 90% at 50% 30%,#FFFFFF 0%,var(--surface-2) 75%); aspect-ratio:4 / 3;display:grid;place-items:center;padding:10px;perspective:900px;} .product-visual{border-bottom:1px solid var(--line-soft);} .product-visual img,.component-visual img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease;} .product:hover .product-visual img{transform:translateY(-4px) scale(1.02);} .product-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1;} .product-body .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--brand);} .product-body h3{font-size:1.1rem;} .product-body p{font-size:var(--fs-small);color:var(--muted);} .spec-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px;} .spec-chips li{font-size:.75rem;padding:2px 8px;border-radius:3px;background:var(--brand-wash);color:var(--brand);} .explode{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;} @media (max-width:860px){ .explode{grid-template-columns:1fr;} } .explode-visual{background:radial-gradient(90% 70% at 50% 40%,var(--panel-2) 0%,var(--panel) 80%);border-radius:10px; padding:clamp(16px,3vw,32px);perspective:1000px;} .explode-visual img{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;transition:transform .35s ease;} .legend{list-style:none;counter-reset:part;display:flex;flex-direction:column;} .legend li{counter-increment:part;display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft);} .legend li::before{content:counter(part);width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:var(--brand);color:#fff;font-family:var(--mono);font-size:.8rem;font-weight:600;} .legend b{display:block;font-weight:600;} .legend span{display:block;color:var(--muted);font-size:.9rem;} .components{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;} .component{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;} .component-visual{border-bottom:1px solid var(--line-soft);} .component:hover .component-visual img{transform:translateY(-3px) scale(1.03);} .component-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;} .component-body h3{font-size:1rem;} .component-body p{font-size:.88rem;color:var(--muted);} .hw-feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;align-items:stretch;} @media (max-width:860px){ .hw-feature{grid-template-columns:1fr;} } .hw-feature .product-visual{border:1px solid var(--line);border-radius:var(--r);aspect-ratio:auto;min-height:240px;} /* news list & article (server-rendered Thymeleaf templates blog.html / detail.html) */ .news-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,48px);align-items:start;} @media (max-width:900px){ .news-layout{grid-template-columns:1fr;} } .news-list{display:flex;flex-direction:column;gap:14px;} .news-item{display:flex;gap:18px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:20px 22px;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease;} .news-item:hover{border-color:var(--brand-soft);box-shadow:0 6px 20px rgba(15,27,51,.06);} .news-item .thumb{width:132px;aspect-ratio:4 / 3;flex-shrink:0;border-radius:4px;object-fit:cover;background:var(--surface-2);} .news-item .body{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1;} .news-item .meta{font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint);letter-spacing:.04em;} .news-item h2{font-size:1.12rem;font-weight:700;line-height:1.45;max-width:none;} .news-item:hover h2{color:var(--brand);} .news-item .desc{font-size:var(--fs-small);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .news-item .more{font-size:.88rem;font-weight:600;color:var(--brand);} @media (max-width:560px){ .news-item{flex-direction:column;} .news-item .thumb{width:100%;} } .pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:22px;} .pager .prev{grid-column:1;justify-self:start;} .pager .pos{grid-column:2;font-family:var(--mono);font-size:.85rem;color:var(--muted);} .pager .next{grid-column:3;justify-self:end;} .empty-state{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:40px 24px; display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted);text-align:center;} .news-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px;} @media (max-width:900px){ .news-aside{position:static;} } .aside-cta{background:var(--panel);color:var(--panel-ink);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:12px;} .aside-cta .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--brand-dark);} .aside-cta h3{font-size:1.15rem;} .aside-cta p{font-size:.9rem;color:var(--panel-muted);} .aside-cta .btn{width:100%;} .aside-links{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px;font-size:.92rem;} .aside-links .h{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;color:var(--faint);margin-bottom:4px;} .aside-links a{color:var(--ink);text-decoration:none;} .aside-links a:hover{color:var(--brand);} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);min-width:0;} .crumbs a{color:var(--muted);text-decoration:none;} .crumbs a:hover{color:var(--brand);} .crumbs [aria-current]{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(28em,100%);} .article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,4vw,44px);min-width:0;} .article-head{display:flex;flex-direction:column;gap:12px;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line-soft);} .article-head h1{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);font-weight:800;} .article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.85rem;color:var(--muted);} .article-body{font-size:1.02rem;line-height:1.9;color:var(--ink);overflow-wrap:anywhere;} .article-body > * + *{margin-top:1em;} .article-body h2,.article-body h3,.article-body h4{margin-top:1.6em;font-size:1.3rem;max-width:none;} .article-body img{height:auto;border-radius:6px;} .article-body a{color:var(--brand);} .article-body ul,.article-body ol{padding-inline-start:1.4em;} .article-body table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%;} .article-body td,.article-body th{border:1px solid var(--line);padding:6px 10px;} .article-foot{margin-top:32px;padding-top:22px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;} /* CTA band */ .cta-band{background:var(--panel);color:var(--panel-ink);border-radius:10px;padding:clamp(28px,5vw,52px); display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px;} .cta-band .side{display:flex;flex-direction:column;gap:12px;align-items:flex-start;} .cta-band .side + .side{border-inline-start:1px solid var(--panel-line);padding-inline-start:24px;} @media (max-width:820px){ .cta-band .side + .side{border-inline-start:none;padding-inline-start:0;border-top:1px solid var(--panel-line);padding-top:24px;} } .cta-band h3{font-size:1.35rem;} .cta-band p{color:var(--panel-muted);font-size:var(--fs-small);} .cta-band .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--brand-dark);} /* footer */ .site-foot{background:var(--panel);color:var(--panel-muted);} .site-foot .inner{padding-block:48px 28px;display:flex;flex-direction:column;gap:32px;} .foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px;} @media (max-width:900px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .foot-brand{grid-column:1 / -1;} } .foot-brand{display:flex;flex-direction:column;gap:10px;font-size:var(--fs-small);} .wordmark{font-size:1.4rem;font-weight:900;letter-spacing:.06em;color:var(--panel-ink);} .foot-mail{color:var(--panel-ink);text-decoration:none;font-family:var(--mono);font-size:.9rem;} .foot-col{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small);} .foot-col .h{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--panel-ink);margin-bottom:4px;font-family:var(--mono);} .foot-col a,.foot-bottom a{color:var(--panel-muted);text-decoration:none;} .foot-col a:hover,.foot-bottom a:hover,.foot-mail:hover{color:var(--brand-dark);} .foot-bottom{border-top:1px solid var(--panel-line);padding-top:20px;font-size:.82rem; display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;} @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} html{scroll-behavior:auto;} }