/* ============================================================ Sydekyck โ€” Marketing Site Shared tokens, type, nav, footer, buttons, utilities. ============================================================ */ /* ---- Brand tokens ---- */ :root { --se-blue-50: #EAF8FA; --se-blue-100: #CDEEF2; --se-blue-200: #A5E1E8; --se-blue-300: #7BD2DC; --se-blue-400: #4FC3D1; --se-blue-500: #2FB0BF; --se-blue-600: #1F8E9C; --se-blue-700: #176C77; --se-blue-800: #114E56; --se-blue-900: #0B343A; --se-coral: #F4A02B; --se-coral-soft:#FBE6C5; --se-coral-700:#8B5510; --se-marigold: #F5B945; --se-marigold-soft:#FBEACB; --se-sage: #6FB58A; --se-sage-soft: #DAEDDF; --se-plum: #8E6BB0; --se-plum-soft: #E6DCEF; --se-ink-900: #0F1A22; --se-ink-800: #1B2731; --se-ink-700: #2E3A45; --se-ink-600: #485663; --se-ink-500: #6B7884; --se-ink-400: #95A2AE; --se-ink-300: #C2CCD4; --se-ink-200: #E2E7EC; --se-ink-100: #F0F3F5; --se-ink-50: #F7F9FA; --se-paper: #FBFAF6; --se-cream: #F4EFE2; /* Surface tokens โ€” switched in dark mode */ --bg-base: #FBFAF6; --bg-surface: #FFFFFF; --bg-elev: #FBFAF6; --bg-deep: #0F1A22; --text-pri: #0F1A22; --text-sec: #485663; --text-mut: #6B7884; --border: #E2E7EC; --border-soft:#F0F3F5; --primary: #4FC3D1; --primary-on: #03323A; --link: #176C77; --halo: rgba(79,195,209,0.16); --nav-bg: rgba(251, 250, 246, 0.85); --se-success: #2BAE6A; --se-warning: #E89B1F; --se-danger: #E55353; --font-display: "Outfit", system-ui, sans-serif; --font-sub: "DM Sans", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif; --font-mono: "Fira Code", ui-monospace, monospace; --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px; --shadow-1: 0 1px 2px rgba(15,26,34,.06), 0 1px 1px rgba(15,26,34,.04); --shadow-2: 0 4px 14px rgba(15,26,34,.07), 0 2px 4px rgba(15,26,34,.04); --shadow-3: 0 18px 40px -12px rgba(15,26,34,.18), 0 6px 12px rgba(15,26,34,.06); } /* Dark mode โ€” applied via data-theme="dark" on */ html[data-theme="dark"] { --bg-base: #0B1218; --bg-surface: #141B22; --bg-elev: #1B232C; --bg-deep: #06090D; --text-pri: #E4EAF0; --text-sec: #A9B7C6; --text-mut: #6B7884; --border: #243140; --border-soft:#19222B; --primary: #7BD2DC; --primary-on: #03323A; --link: #7BD2DC; --halo: rgba(123,210,220,0.16); --nav-bg: rgba(11, 18, 24, 0.78); --se-paper: #0B1218; --se-ink-50: #141B22; --se-ink-100: #19222B; --se-ink-200: #243140; --se-ink-300: #33455A; --se-ink-400: #5B6E83; --se-ink-500: #8395A8; --se-ink-600: #A9B7C6; --se-ink-700: #C8D2DC; --se-ink-800: #E4EAF0; --se-ink-900: #F2F5F8; --se-coral-soft: #3A2E14; --se-marigold-soft: #3A2E14; --se-sage-soft: #1E2F25; --se-plum-soft: #2A2235; --se-blue-50: #0F2A30; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 18px rgba(0,0,0,.45); --shadow-3: 0 24px 60px -16px rgba(0,0,0,.75), 0 8px 16px rgba(0,0,0,.4); color-scheme: dark; } /* ---- Reset / base ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--se-paper); color: var(--se-ink-800); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--se-blue-700); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--se-blue-600); } button { font-family: inherit; } /* ---- Type ---- */ h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; color: var(--se-ink-900); font-weight: 600; margin: 0 0 16px; line-height: 1.05; } h1 { font-size: clamp(40px, 6vw, 72px); } h2 { font-size: clamp(30px, 4.2vw, 48px); } h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; line-height: 1.15; } h4 { font-size: 20px; letter-spacing: -0.015em; line-height: 1.25; } p { margin: 0 0 16px; max-width: 64ch; } .lede { font-size: 19px; line-height: 1.55; color: var(--se-ink-600); max-width: 56ch; } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--se-coral); font-weight: 600; margin: 0 0 12px; display: inline-block; } .eyebrow.coral { color: var(--se-coral); } .eyebrow.ink { color: var(--se-ink-500); } .mono { font-family: var(--font-mono); } /* ---- Layout ---- */ .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 32px; } section { padding: 96px 0; } .muted { color: var(--se-ink-500); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--r); border: 1.5px solid transparent; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; cursor: pointer; transition: all .15s ease; text-decoration: none; line-height: 1; } .btn-primary { background: var(--se-blue-400); color: #03323A; border-color: var(--se-blue-400); } .btn-primary:hover { background: var(--se-blue-500); border-color: var(--se-blue-500); color: #03323A; transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn-ink { background: var(--se-ink-900); color: white; border-color: var(--se-ink-900); } .btn-ink:hover { background: var(--se-ink-800); color: white; transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn-ghost { background: transparent; color: var(--se-ink-800); border-color: var(--se-ink-200); } .btn-ghost:hover { background: var(--se-ink-100); color: var(--se-ink-900); border-color: var(--se-ink-300); } .btn-lg { padding: 16px 28px; font-size: 16px; } /* ---- Top nav ---- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg, rgba(251, 250, 246, 0.85)); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 16px 32px; gap: 32px; } .nav-brand { display: flex; align-items: center; gap: 4px; color: var(--se-ink-900); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.03em; } .nav-brand img { width: 30px; height: 30px; } .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-links a { padding: 8px 14px; border-radius: 8px; color: var(--se-ink-700); font-weight: 500; font-size: 14.5px; } .nav-links a:hover { background: var(--se-ink-100); color: var(--se-ink-900); } .nav-links a.active { color: var(--se-blue-700); } .nav-cta { display: flex; align-items: center; gap: 10px; } .nav-mobile-toggle { display: none; background: transparent; border: 0; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--se-ink-800); cursor: pointer; } @media (max-width: 860px) { .nav-links, .nav-cta .btn:not(.btn-primary) { display: none; } .nav-mobile-toggle { display: inline-flex; } .nav-mobile-toggle svg { width: 22px; height: 22px; } .nav-inner.is-open { flex-wrap: wrap; } .nav-inner.is-open .nav-links { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding-top: 12px; border-top: 1px solid var(--se-ink-200); } .nav-inner.is-open .nav-links a { padding: 12px 8px; } } /* ---- Footer ---- */ .footer { background: var(--bg-deep); color: rgba(255,255,255,0.7); padding: 80px 0 40px; font-size: 14px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; } .footer-brand h4 { color: white; display: flex; align-items: center; gap: 6px; font-size: 28px; margin-bottom: 12px; } .footer-brand h4 img { width: 32px; height: 32px; filter: brightness(0) invert(1); } .footer-brand p { color: rgba(255,255,255,0.65); max-width: 36ch; } .footer-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 14px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 8px; } .footer-col a { color: rgba(255,255,255,0.75); font-size: 14px; } .footer-col a:hover { color: white; } .footer-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); } .footer-socials { display: flex; gap: 10px; } .footer-socials a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); text-decoration: none; } .footer-socials a:hover { background: var(--se-blue-400); color: #03323A; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } } /* ---- Generic cards ---- */ .card { background: var(--bg-surface); border: 1px solid var(--se-ink-200); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-1); } .card-hover { transition: transform .2s ease, box-shadow .2s ease; } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); } /* ---- Badges ---- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; background: var(--se-blue-50); color: var(--se-blue-700); letter-spacing: -0.005em; } .badge-coral { background: var(--se-coral-soft); color: var(--se-coral-700); } .badge-sage { background: var(--se-sage-soft); color: #2E6B4A; } .badge-marigold { background: var(--se-marigold-soft); color: #8E6713; } .badge-plum { background: var(--se-plum-soft); color: #5E3F7C; } /* ---- Page hero shared base ---- */ .page-hero { padding: 80px 0 60px; text-align: left; background: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(79,195,209,0.10), transparent 60%), var(--se-paper); border-bottom: 1px solid var(--se-ink-100); } .page-hero .eyebrow { color: var(--se-coral); } /* ---- Forms ---- */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--se-ink-800); } .field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--se-ink-200); border-radius: var(--r); background: var(--bg-surface); color: var(--se-ink-900); font-family: var(--font-body); font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--se-blue-400); box-shadow: 0 0 0 4px rgba(79,195,209,0.16); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } } /* ---- Layout variant switcher (used on the three home variants) ---- */ .vswitch { position: fixed; top: 14px; right: 14px; z-index: 100; display: inline-flex; align-items: center; padding: 4px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .vswitch .lbl { padding: 0 10px 0 12px; color: var(--text-mut); } .vswitch a { padding: 6px 12px; border-radius: 999px; color: var(--text-sec); text-decoration: none; font-weight: 600; } .vswitch a:hover { color: var(--text-pri); } .vswitch a.is-active { background: var(--primary); color: var(--primary-on); } .vswitch .theme-toggle-btn { margin-left: 6px; border: 0; background: transparent; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-sec); font-size: 14px; } .vswitch .theme-toggle-btn:hover { background: var(--bg-elev); color: var(--text-pri); } @media (max-width: 820px) { .vswitch { display: none; } } /* ---- Hero scene ยท A4 bird-flight + G1 origami fragments ---- */ .hero-scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .hero-scene svg { width: 100%; height: 100%; display: block; } .hero-scene .geo-fragments { opacity: 0.40; } .hero-scene .flight-trail { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; opacity: 0.32; } .hero-scene .flight-bird { width: 60px; height: 60px; } html[data-theme="light"] .hero-scene .geo-fragments { opacity: 0.55; } /* ---- Lifestyle hero (used on contact) ---- */ .lifestyle-hero { position: relative; overflow: hidden; } .lifestyle-hero .ls-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 0; } .lifestyle-hero .ls-photo image-slot { width: 100%; height: 100%; display: block; } .lifestyle-hero .ls-gradient { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to right, var(--bg-base) 0%, var(--bg-base) 38%, rgba(11,18,24,0.7) 60%, rgba(11,18,24,0.0) 100% ); } html[data-theme="light"] .lifestyle-hero .ls-gradient { background: linear-gradient( to right, var(--bg-base) 0%, var(--bg-base) 38%, rgba(251,250,246,0.85) 60%, rgba(251,250,246,0.0) 100% ); } .lifestyle-hero .wrap { position: relative; z-index: 2; } @media (max-width: 860px) { .lifestyle-hero .ls-photo { width: 100%; opacity: 0.35; } .lifestyle-hero .ls-gradient { background: linear-gradient(to bottom, var(--bg-base) 30%, rgba(11,18,24,0.85) 100%); } } /* Position context for hero scenes */ .hero, .hero-b, .hero-c, .page-hero { position: relative; } .hero > .wrap, .hero-b > .wrap, .hero-c > .wrap, .hero-c > .wrap-narrow, .page-hero > .wrap, .lifestyle-hero > .wrap { position: relative; z-index: 2; } /* Solo theme toggle (pages without layout variants) */ .vswitch.theme-only { padding: 4px; }