/* ========================================================= SM Ascending — Site Styles ========================================================= */ :root { --c-blue: #1e2bff; --c-blue-2: #3a5bff; --c-purple: #6e2cf3; --c-purple-2: #9a4dff; --c-ink: #0b0d1a; --c-ink-2: #161a2e; --c-text: #1a1d2e; --c-muted: #5a607a; --c-line: #e6e8f1; --c-bg: #ffffff; --c-bg-alt: #f5f6fc; --c-bg-dark: #0b0d1a; --grad-brand: linear-gradient(135deg, var(--c-blue) 0%, var(--c-purple) 100%); --grad-brand-soft: linear-gradient(135deg, rgba(30, 43, 255, .08), rgba(110, 44, 243, .08)); --shadow-sm: 0 2px 8px rgba(11, 13, 26, .06); --shadow-md: 0 12px 32px rgba(11, 13, 26, .08); --shadow-lg: 0 24px 60px rgba(30, 43, 255, .18); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --font: 'Prompt', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --container: 1180px; --gutter: 24px; } /* Bilingual visibility — toggled via */ html[lang="en"] [data-lang="th"] { display: none !important; } html[lang="th"] [data-lang="en"] { display: none !important; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-blue); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font); color: var(--c-ink); line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.01em; } h1 { font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.6rem); } h2 { font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); } h3 { font-weight: 600; font-size: 1.15rem; } p { margin: 0 0 1em; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-ink); color: #fff; padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ========================================================= Header ========================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s ease, background .25s ease; } .site-header.is-scrolled { border-bottom-color: var(--c-line); background: rgba(255, 255, 255, .94); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .brand { display: inline-flex; align-items: center; } .brand-logo { height: 44px; width: auto; } .primary-nav { display: flex; align-items: center; } .nav-menu { list-style: none; display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; } .nav-menu a { color: var(--c-text); font-weight: 500; font-size: .95rem; position: relative; padding: 6px 0; transition: color .2s ease; } .nav-menu a:hover { color: var(--c-blue); text-decoration: none; } .nav-menu a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--grad-brand); transition: right .25s ease; } .nav-menu a:not(.btn):hover::after { right: 0; } .lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--c-muted); border-left: 1px solid var(--c-line); padding-left: 18px; margin-left: 4px; } .lang-btn { background: transparent; border: 0; padding: 4px 4px; font: inherit; color: var(--c-muted); cursor: pointer; font-weight: 600; letter-spacing: .04em; } .lang-btn:hover { color: var(--c-blue); } html[lang="en"] .lang-btn[data-set-lang="en"], html[lang="th"] .lang-btn[data-set-lang="th"] { color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-purple); text-decoration-thickness: 2px; } .nav-toggle { display: none; background: transparent; border: 0; width: 40px; height: 40px; padding: 8px; cursor: pointer; flex-direction: column; justify-content: space-between; } .nav-toggle span { display: block; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ========================================================= Buttons ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-family: var(--font); font-size: 1rem; font-weight: 600; line-height: 1; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-sm { padding: 10px 18px; font-size: .9rem; } .btn-block { width: 100%; } .btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-md); } .btn-primary:hover { box-shadow: var(--shadow-lg); } .btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); } .btn-ghost:hover { border-color: var(--c-ink); } /* ========================================================= Hero ========================================================= */ .hero { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 130px) 0 clamp(70px, 9vw, 130px); isolation: isolate; } .hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at top right, rgba(110, 44, 243, .12), transparent 60%), radial-gradient(ellipse at bottom left, rgba(30, 43, 255, .12), transparent 55%), linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%); } .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; } .orb-1 { width: 480px; height: 480px; background: radial-gradient(circle, var(--c-blue), transparent 70%); top: -120px; right: -120px; animation: drift1 14s ease-in-out infinite alternate; } .orb-2 { width: 540px; height: 540px; background: radial-gradient(circle, var(--c-purple), transparent 70%); bottom: -180px; left: -160px; animation: drift2 16s ease-in-out infinite alternate; } @keyframes drift1 { to { transform: translate(-30px, 40px) scale(1.05); } } @keyframes drift2 { to { transform: translate(40px, -30px) scale(1.08); } } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(11, 13, 26, .04) 1px, transparent 1px), linear-gradient(to bottom, rgba(11, 13, 26, .04) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); } .hero-inner { max-width: 880px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 18px; } .eyebrow.accent { color: transparent; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; } .eyebrow.accent-on-dark { color: transparent; background: linear-gradient(135deg, #6cb0ff, #c79bff); -webkit-background-clip: text; background-clip: text; } .hero-title { background: linear-gradient(180deg, #0b0d1a 0%, #2a2f55 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 24px; } .hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--c-muted); max-width: 720px; margin-bottom: 36px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; } .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 24px 8px 0; border-top: 1px solid var(--c-line); max-width: 720px; } .hero-stats > div { display: flex; flex-direction: column; gap: 4px; } .hero-stats dt { font-size: .8rem; color: var(--c-muted); letter-spacing: .04em; text-transform: uppercase; margin: 0; font-weight: 500; } .hero-stats dd { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; color: var(--c-ink); letter-spacing: -.02em; } .hero-stats .plus { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: 2px; } /* ========================================================= Sections ========================================================= */ .section { padding: clamp(72px, 9vw, 120px) 0; } .section-alt { background: var(--c-bg-alt); } .section-dark { background: var(--c-ink); color: #d8dbe8; } .section-dark h2 { background: linear-gradient(180deg, #ffffff 0%, #c8ccef 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-dark p { color: #aab0cc; } .section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; } .section-head .lead { font-size: 1.1rem; color: var(--c-muted); margin-bottom: 0; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; } /* ========================================================= Value grid (About) ========================================================= */ .value-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .value-grid li { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 24px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .value-grid li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; } .value-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-brand-soft); color: var(--c-blue); display: grid; place-items: center; margin-bottom: 14px; } .value-icon svg { width: 22px; height: 22px; stroke-linecap: round; stroke-linejoin: round; } .value-grid h3 { margin-bottom: 6px; font-size: 1rem; } .value-grid p { color: var(--c-muted); font-size: .92rem; margin: 0; line-height: 1.55; } /* ========================================================= Vision & Mission ========================================================= */ .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; } .vm-card { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-lg); padding: 36px 32px; transition: background .25s ease, border-color .25s ease, transform .25s ease; } .vm-card:hover { background: rgba(255, 255, 255, .07); border-color: rgba(154, 77, 255, .35); transform: translateY(-3px); } .vm-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, rgba(108, 176, 255, .2), rgba(199, 155, 255, .2)); color: #c79bff; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid rgba(199, 155, 255, .2); } .vm-icon svg { width: 28px; height: 28px; stroke-linecap: round; stroke-linejoin: round; } .vm-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 14px; } .vm-card p { color: #c8ccef; margin: 0; font-size: 1rem; line-height: 1.7; } .mission-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .mission-list li { position: relative; padding-left: 22px; color: #c8ccef; line-height: 1.65; } .mission-list li::before { content: ''; position: absolute; left: 0; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #6cb0ff, #c79bff); } /* ========================================================= Card grid (Services) ========================================================= */ .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin: 0 auto; gap: 24px; } .card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 32px 28px; position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .card:hover::before { transform: scaleX(1); } .card-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--grad-brand); color: #fff; display: grid; place-items: center; margin-bottom: 20px; box-shadow: 0 10px 24px rgba(30, 43, 255, .25); } .card-icon svg { width: 28px; height: 28px; stroke-linecap: round; stroke-linejoin: round; } .card h3 { margin-bottom: 8px; font-size: 1.1rem; } .card p { color: var(--c-muted); margin: 0; font-size: .95rem; line-height: 1.6; } .muted-note { text-align: center; margin-top: 40px; color: var(--c-muted); } .muted-note a { font-weight: 600; } /* ========================================================= Industry grid ========================================================= */ .industry-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .industry-grid li { background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 26px 22px; font-weight: 600; color: var(--c-ink); position: relative; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } .industry-grid li::before { content: ''; position: absolute; left: 22px; top: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); } .industry-grid li { padding-left: 44px; } .industry-grid li:hover { background: #fff; border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ========================================================= Step list (Why us) ========================================================= */ .step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .step-list li { display: flex; gap: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); padding: 22px 24px; border-radius: var(--radius-md); transition: background .25s ease, border-color .25s ease, transform .25s ease; } .step-list li:hover { background: rgba(255, 255, 255, .07); border-color: rgba(154, 77, 255, .35); transform: translateX(4px); } .step-num { font-size: 1.6rem; font-weight: 700; background: linear-gradient(135deg, #6cb0ff, #c79bff); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 48px; letter-spacing: -.02em; } .step-list h3 { color: #fff; font-size: 1.05rem; margin-bottom: 4px; } .step-list p { margin: 0; color: #aab0cc; font-size: .95rem; } /* ========================================================= Contact ========================================================= */ .contact-grid { gap: clamp(32px, 5vw, 64px); } .contact-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .contact-list li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--c-bg-alt); border-radius: var(--radius-sm); border-left: 3px solid var(--c-blue); } .contact-list strong { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); } .email-reveal { display: inline; } .reveal-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--c-blue); cursor: pointer; } .reveal-btn:hover, .reveal-btn:focus-visible { text-decoration: underline; } .email-frag { unicode-bidi: isolate; } .contact-form { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 18px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field label { font-size: .85rem; font-weight: 600; color: var(--c-ink); } .field input, .field textarea { font-family: var(--font); font-size: 1rem; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; color: var(--c-text); transition: border-color .2s ease, box-shadow .2s ease; width: 100%; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 4px rgba(30, 43, 255, .08); } .field textarea { resize: vertical; min-height: 120px; } .field.has-error input, .field.has-error textarea { border-color: #d6243a; box-shadow: 0 0 0 4px rgba(214, 36, 58, .08); } /* Honeypot — hidden from users, visible to bots */ .hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* Cloudflare Turnstile widget mount. Empty until JS renders the widget. */ .turnstile-mount { margin: 4px 0 0; min-height: 0; } .turnstile-mount:empty { display: none; } .turnstile-mount iframe { display: block; } /* Inline status (sending / success / error) */ .form-status { margin: 4px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); font-size: .92rem; line-height: 1.5; border: 1px solid transparent; } .form-status.is-pending { background: var(--c-bg-alt); color: var(--c-muted); border-color: var(--c-line); } .form-status.is-success { background: #e8f7ee; color: #1f7a3a; border-color: #bfe7cd; } .form-status.is-error { background: #fdecee; color: #b1182a; border-color: #f3c1c8; } /* Submit-button loading state */ .btn.is-loading { cursor: progress; opacity: .75; position: relative; pointer-events: none; } .form-note { font-size: .85rem; color: var(--c-muted); margin: 0; } /* ========================================================= Footer ========================================================= */ .site-footer { background: var(--c-ink); color: #aab0cc; padding: 56px 0 36px; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; align-items: start; } .footer-logo { height: 44px; margin-bottom: 16px; background: #fff; padding: 8px 14px; border-radius: 10px; box-sizing: content-box; display: inline-block; } .footer-brand p { margin: 0 0 6px; color: #d8dbe8; font-weight: 500; } .footer-addr { color: #8c93b0 !important; font-size: .9rem; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { color: #d8dbe8; font-size: .95rem; } .footer-links a:hover { color: #fff; } .footer-meta { font-size: .85rem; color: #8c93b0; text-align: right; } .footer-meta p { margin: 0; } /* ========================================================= Reveal animation ========================================================= */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .orb { animation: none; } html { scroll-behavior: auto; } } /* ========================================================= Responsive ========================================================= */ @media (max-width: 960px) { .two-col { grid-template-columns: 1fr; } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vm-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-meta { grid-column: 1 / -1; text-align: left; } } @media (max-width: 720px) { .nav-toggle { display: flex; } .nav-menu { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--c-line); padding: 18px var(--gutter) 28px; gap: 4px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; box-shadow: var(--shadow-md); } .nav-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-menu a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--c-line); } .nav-menu a:not(.btn)::after { display: none; } .nav-cta { padding-top: 10px; } .nav-cta .btn { width: 100%; } .lang-switch { border-left: 0; padding-left: 0; padding-top: 14px; justify-content: center; } .card-grid, .card-grid-2 { grid-template-columns: 1fr; } .industry-grid { grid-template-columns: 1fr; } .value-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .hero-stats { grid-template-columns: 1fr 1fr; } .hero-stats > div:nth-child(3) { grid-column: 1 / -1; } .footer-inner { grid-template-columns: 1fr; } .footer-meta { text-align: left; } } @media (max-width: 480px) { .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { width: 100%; } .contact-form { padding: 22px; } }