:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
:where(a) { color: inherit; text-decoration: none; }
:where(button, input, textarea) { font-family: inherit; font-size: inherit; color: inherit; }
:where(input[type="checkbox"]) { width: auto; height: auto; }
#form-template { --c-brand: #00AFF0; --c-dark: #000064; --c-blue: #005AFF; --c-submit: #FFD200; --c-error: #FF5A6E; --radius-sm: 7px; --c-text: color-mix(in srgb, #000 86%, var(--c-dark)); --c-muted: color-mix(in srgb, #000 44%, var(--c-dark)); --c-input-bg: color-mix(in srgb, #fff 96%, var(--c-dark)); --c-border: color-mix(in srgb, #000 14%, transparent); --c-surface: color-mix(in srgb, #000 6%, transparent); --c-surface-hover: color-mix(in srgb, #000 12%, transparent); --c-dropdown-bg: color-mix(in srgb, #fff 98%, var(--c-dark)); font-family: 'Inter', 'Noto Sans TC', sans-serif; font-size: 16px; line-height: 1.6; .social-list { display: flex; gap: 8px; flex-shrink: 0; } .social-item { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: filter .15s; &:hover { filter: brightness(.85); } } .social-item:nth-child(1) { background-color: #06C755; } .social-item:nth-child(2) { background-color: #555; } .social-item:nth-child(3) { background-color: #1877F2; } .social-link { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 18px; color: #fff; } } #contact { padding: 64px 20px 72px; max-width: 1200px; margin: 0 auto; color: var(--c-text); } .form-title { font-size: 28px; font-weight: 700; font-family: 'Noto Sans TC', sans-serif; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 3px solid var(--c-brand); display: inline-block; line-height: 1.3; } #info { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; } .info-desc { font-size: 16px; line-height: 1.8; color: var(--c-muted); max-width: 600px; } .hotline-link { color: var(--c-brand); font-weight: 700; } #contactInput { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-bottom: 24px; align-items: start; } .field-wrap { position: relative; & .field-label { position: absolute; top: 29px; left: 14px; transform: translateY(-50%); font-size: 14px; color: var(--c-muted); pointer-events: none; user-select: none; transition: top .18s ease, font-size .18s ease, color .18s ease, transform .18s ease; line-height: 1; z-index: 1; white-space: nowrap; } & :where(input, textarea) { width: 100%; background-color: var(--c-input-bg); border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text); outline: none; transition: border-color .15s, background-color .15s; font-size: 16px; &::placeholder { color: transparent; } &:focus { border-color: var(--c-brand); } &:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--c-input-bg) inset; -webkit-text-fill-color: var(--c-text); } } & .field-input { height: 58px; padding: 22px 14px 8px; } & .field-textarea { min-height: 120px; padding: 26px 14px 32px; resize: vertical; line-height: 1.6; } &.is-error { & .field-label { color: var(--c-error); } & :where(input, textarea) { border-color: var(--c-error); } } } .field-wrap:has(.field-input:focus) .field-label, .field-wrap:has(.field-input:not(:placeholder-shown)) .field-label, .field-wrap:has(.field-textarea:focus) .field-label, .field-wrap:has(.field-textarea:not(:placeholder-shown)) .field-label { top: 10px; transform: none; font-size: 14px; color: var(--c-brand); font-weight: 400; } .field-wrap.is-error:has(.field-input:focus) .field-label, .field-wrap.is-error:has(.field-input:not(:placeholder-shown)) .field-label, .field-wrap.is-error:has(.field-textarea:focus) .field-label, .field-wrap.is-error:has(.field-textarea:not(:placeholder-shown)) .field-label { color: var(--c-error); } .field-wrap:has(.field-textarea) .field-label { top: 22px; transform: none; } .full-width { grid-column: 1 / -1; } .char-count { position: absolute; bottom: 10px; right: 12px; font-size: 14px; color: var(--c-muted); pointer-events: none; } .dropdown-wrap { position: relative; } .dropdown-list { position: absolute; top: 61px; left: 0; right: 0; max-height: 180px; overflow-y: auto; background-color: var(--c-dropdown-bg); border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); z-index: 100; display: none; scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; &.is-open { display: block; } } .dropdown-item { padding: 10px 14px; font-size: 16px; cursor: pointer; color: var(--c-text); transition: background-color .1s; &:hover { background-color: var(--c-surface-hover); } &.is-hidden { display: none; } } .dropdown-match { color: var(--c-brand); font-weight: 700; } .dropdown-hint { position: sticky; bottom: 0; padding: 8px 14px; font-size: 14px; color: var(--c-muted); border-top: 1px solid var(--c-border); background-color: var(--c-dropdown-bg); } .phone-cell { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; } .country-wrap { width: 140px; flex-shrink: 0; position: relative; & .field-input { cursor: pointer; padding-right: 28px; caret-color: transparent; } &::after { content: ''; position: absolute; right: 11px; top: 29px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 5px 4px 0 4px; border-color: var(--c-muted) transparent transparent transparent; pointer-events: none; z-index: 2; } } .tel-wrap { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 120px; } .phone-tip { width: 100%; font-size: 14px; color: var(--c-muted); margin-top: -4px; padding-left: 2px; } #form-other { margin-bottom: 32px; } .other-title { font-size: 22px; font-weight: 700; color: var(--c-muted); margin-bottom: 16px; letter-spacing: .01em; } #form-other.is-error .other-title { color: var(--c-error); } .other-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; } .check-label { display: flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; line-height: 1.4; color: var(--c-text); user-select: none; & :where(input[type="checkbox"]) { display: none; } } .check-box { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--c-border); border-radius: 4px; transition: background-color .15s, border-color .15s; position: relative; } .check-label:has(input:checked) .check-box { background-color: var(--c-submit); border-color: var(--c-submit); &::after { content: ''; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px; border: 2px solid var(--c-dark); border-top: none; border-left: none; transform: rotate(45deg); } } .check-label:hover .check-box { border-color: var(--c-brand); } .form-divider { border: none; border-top: 1px solid var(--c-border); margin: 8px 0 28px; } .form-footer { display: flex; flex-direction: column; align-items: center; gap: 20px; } .agree-label { font-size: 16px; color: var(--c-muted); } .privacy-link { color: var(--c-brand); text-decoration: underline; text-underline-offset: 2px; } .captcha-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; } .captcha-row { display: flex; align-items: center; gap: 10px; } .captcha-img { width: 110px; height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--c-border); } .captcha-refresh { background: none; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 18px; color: var(--c-muted); cursor: pointer; transition: background-color .15s; &:hover { background-color: var(--c-surface-hover); } } .captcha-boxes { display: flex; gap: .5rem; } .captcha-box { width: 40px; height: 46px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background-color: var(--c-input-bg); color: var(--c-text); font-size: 18px; font-weight: 700; text-align: center; padding: 0; outline: none; transition: border-color .15s; &:focus { border-color: var(--c-brand); } &.is-error { border-color: var(--c-error); } } #submit { display: block; width: 200px; height: 50px; background-color: var(--c-submit); color: var(--c-dark); font-size: 18px; font-weight: 700; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color .15s, transform .1s; letter-spacing: .12em; font-family: 'Noto Sans TC', sans-serif; &:hover { background-color: color-mix(in srgb, var(--c-submit) 80%, #000); } &:active { transform: scale(.98); } &:disabled { opacity: .5; cursor: not-allowed; transform: none; } } #loading { display: none; position: fixed; inset: 0; background-color: color-mix(in srgb, #000 72%, transparent); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; gap: 20px; color: color-mix(in srgb, #fff 80%, transparent); &.is-active { display: flex; } } .loading-msg { font-size: 16px; } .spinner { width: 44px; height: 44px; border: 4px solid color-mix(in srgb, #fff 28%, transparent); border-top-color: var(--c-brand); border-radius: 50%; animation: spin .75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 768px) { #contact { padding: 48px 16px 56px; } .form-title { font-size: 22px; } #contactInput { grid-template-columns: 1fr; & .full-width { grid-column: 1; } } .phone-cell { flex-direction: column; } .country-wrap { width: 100%; } .tel-wrap { width: 100%; } .other-grid { grid-template-columns: 1fr 1fr; } #submit { width: 100%; } } @media (max-width: 380px) { .other-grid { grid-template-columns: 1fr; } } @media (prefers-color-scheme: dark) { #form-template { --c-text: color-mix(in srgb, #fff 92%, var(--c-dark)); --c-muted: color-mix(in srgb, #fff 78%, var(--c-dark)); --c-input-bg: color-mix(in srgb, #fff 24%, #000); --c-border: color-mix(in srgb, #fff 24%, transparent); --c-surface: color-mix(in srgb, #fff 10%, transparent); --c-surface-hover: color-mix(in srgb, #fff 20%, transparent); --c-dropdown-bg: color-mix(in srgb, #fff 18%, #000); background-color: #444; } }