/* * Company (3.2, docs/design/3.2/css/site.css): a company profile for Thai SMEs. The firm's own facts * (year founded, minimum order, lead time, where it is) carry the page, so the design stays plain: * white paper, one deep teal for actions (customizer primary), a gold mark used with dark text only, * near-black contact band and footer, LINE Seed for Thai and Latin with no negative letter spacing. * Every contrast pair below passes WCAG AA (values beside the tokens). */ :root { --sk-bg: #FFFFFF; --sk-surface: #FFFFFF; --sk-soft: #F2F4F1; /* ink 16.2:1, muted 5.75:1 */ --sk-border: #DDE2DE; --sk-border-strong: #B9C2BC; --sk-ink: #16191F; --sk-text: #2A2F37; --sk-muted: #5A6066; /* on white 6.4:1 */ --sk-dark: #0F1E24; /* white 17:1 */ --sk-dark-surface: #16282F; --sk-dark-border: rgba(255, 255, 255, .16); --sk-dark-ink: #FFFFFF; --sk-dark-text: #C9D3D6; /* on dark 11.4:1 */ --sk-btn: var(--primary, #0E5E6F); /* white 7.4:1 */ --sk-btn-ink: #FFFFFF; --sk-btn-hover: var(--primary-100, #0A4A58); --sk-accent: #E8B931; /* only with --sk-ink text (9.6:1) */ --sk-accent-ink: #16191F; --sk-link: var(--primary, #0E5E6F); --sk-radius-sm: 10px; --sk-radius-card: 16px; --sk-radius-media: 6px; --sk-radius-btn: 999px; --sk-shadow: none; --sk-shadow-hover: 0 10px 28px rgba(15, 30, 36, .08); --sk-font-display: var(--cms-font-heading, 'LINE Seed', Tahoma, sans-serif); --sk-font-body: var(--cms-font-body, 'LINE Seed', Tahoma, sans-serif); --sk-heading-weight: 700; /* LINE Seed has 400 / 700 / 800 */ --sk-tracking: 0; /* never negative for Thai */ --sk-body-size: 17px; --sk-hero-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem); --sk-display-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); --sk-h2-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); --sk-section-y: clamp(64px, 6vw + 32px, 128px); --sk-header-bg: #FFFFFF; --sk-header-border: #DDE2DE; --sk-page-header-bg: #F2F4F1; } /* Thai reads best with room: no tight display tracking, taller lines */ .cms-theme-company { line-height: 1.7; } html .cms-theme-company .sk-h-hero, html .cms-theme-company .sk-h-display { letter-spacing: 0; line-height: 1.2; } html[lang="th"] .cms-theme-company .sk-h-hero, html[lang="th"] .cms-theme-company .sk-h-display { line-height: 1.3; } html .cms-theme-company h1, html .cms-theme-company h2, html .cms-theme-company h3 { letter-spacing: 0; text-wrap: balance; } .cms-theme-company .lead, .cms-theme-company .sk-text-lead { font-size: 1.25rem; line-height: 1.65; } .cms-theme-company :focus-visible { outline: 3px solid var(--primary, #0E5E6F); outline-offset: 3px; } .cms-theme-company .sk-tone-dark :focus-visible { outline-color: var(--sk-accent); } /* Header: white with a hairline, the current page underlined in the brand colour */ .cms-theme-company #header .header-body { backdrop-filter: none; } html .cms-theme-company #header .header-nav-main nav > ul > li > a { font-size: 16px; opacity: 1; } html .cms-theme-company #header .header-nav-main nav > ul > li > a.active { color: var(--primary, #0E5E6F); box-shadow: inset 0 -2px 0 var(--primary, #0E5E6F); } .cms-theme-company .cms-logo-text { letter-spacing: 0; } /* Buttons: tall pills, an arrow that moves on hover */ .cms-theme-company .sk-btn { min-height: 52px; padding: 12px 26px; font-size: 1rem; } .cms-theme-company #header .sk-header-cta { min-height: 44px; padding: 9px 20px; font-size: 15px; } .cms-theme-company .sk-btn-outline { border: 1.5px solid var(--sk-ink); } .cms-theme-company .sk-btn-outline:hover { background: var(--sk-ink); color: #FFFFFF !important; } .cms-theme-company .sk-cband .sk-btn-outline, .cms-theme-company .sk-tone-dark .sk-btn-outline { border-color: var(--sk-dark-ink); color: var(--sk-dark-ink) !important; } .cms-theme-company .sk-cband .sk-btn-outline:hover, .cms-theme-company .sk-tone-dark .sk-btn-outline:hover { background: var(--sk-dark-ink); color: var(--sk-dark) !important; } /* phones: the contact bar at the bottom takes over the header button */ @media (max-width: 575.98px) { .cms-theme-company #header .sk-header-cta { display: none; } } .cms-theme-company .sk-btn-arrow { transition: transform .18s ease; } .cms-theme-company .sk-btn:hover .sk-btn-arrow { transform: translateX(3px); } .cms-theme-company .sk-buttons-note { color: var(--sk-muted); font-size: .9375rem; } /* Badges: the gold stamp */ .cms-theme-company .sk-badge-pill { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-accent-ink); font-weight: 600; } .cms-theme-company .sk-badge-eyebrow { color: var(--sk-muted); letter-spacing: 0; text-transform: none; font-weight: 600; } /* Pictures: real photos of the firm, small radius */ .cms-theme-company .cms-image img { border-radius: var(--sk-radius-media); } /* Cards stay flat */ .cms-theme-company .sk-col-card { box-shadow: none; } .cms-theme-company .sk-col-card:hover { box-shadow: var(--sk-shadow-hover); } /* Key facts band: hairlines between the figures */ .cms-theme-company .sk-facts .sk-stat-value { font-weight: 700; color: var(--sk-ink); } /* Footer: the near-black band continues the contact band */ .cms-theme-company .sk-footer { font-size: .9375rem; } .cms-theme-company .sk-footer-heading { font-family: var(--sk-font-body); font-size: .9375rem; letter-spacing: 0; text-transform: none; } @media (prefers-reduced-motion: reduce) { .cms-theme-company .sk-btn-arrow { transition: none; } } /* 3.2.1: every link and button at least 24 x 24 px (WCAG 2.2 2.5.8), checked at 390 and 1440 px */ .cms-theme-company .sk-footer a, .cms-theme-company #footer a { display: inline-flex; align-items: center; min-height: 28px; } .cms-theme-company .breadcrumb a { display: inline-block; padding-block: 5px; } .cms-theme-company .cms-lang-switch > a, .cms-theme-company [id^="cmsLang"] { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; } .cms-theme-company .sk-product-title a, .cms-theme-company .sk-product-name a { display: inline-block; padding-block: 2px; } .cms-theme-company .sk-product-more { display: inline-flex; align-items: center; min-height: 28px; }