/* โ”€โ”€โ”€ Custom Properties โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ :root { --bg: #0f1115; --surface: #181c24; --text: #f5f7fa; --muted: #8a94a6; --orange: #ff7a00; --blue: #2da8ff; --cyan: #00e0ff; --ring: rgba(0,224,255,.3); --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-bounce: cubic-bezier(0.34,1.56,0.64,1); } html.light-theme { --bg: #f3f6fb; --surface: #ffffff; --text: #0f172a; --muted: #475569; --ring: rgba(45,168,255,.3); } /* โ”€โ”€โ”€ Base โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Kanit',sans-serif; margin: 0; overflow-x: hidden; line-height: 1.65; } /* Only the 2 elements that have display:block here AND are used as lang twins need !important */ .hero-line-inner.hidden, .manifesto-inner.hidden { display: none !important; } /* โ”€โ”€โ”€ Skip Link โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--orange); color: #111; padding: .5rem .75rem; border-radius: .5rem; } .skip-link:focus { left: 1rem; top: 1rem; } /* โ”€โ”€โ”€ Scroll Progress โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ #scrollProgress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg,var(--orange),var(--cyan)); z-index: 200; transform-origin: left; pointer-events: none; } /* โ”€โ”€โ”€ Aurora โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .aurora { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; } .aurora-orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: aurora-float 20s ease-in-out infinite; } .aurora-orb-1 { width: 50vw; height: 50vw; background: radial-gradient(circle,rgba(255,122,0,.15) 0%,transparent 70%); top: -15%; left: -8%; animation-delay: 0s; } .aurora-orb-2 { width: 45vw; height: 45vw; background: radial-gradient(circle,rgba(0,224,255,.11) 0%,transparent 70%); bottom: -10%; right: -5%; animation-delay: -7s; } .aurora-orb-3 { width: 35vw; height: 35vw; background: radial-gradient(circle,rgba(45,168,255,.09) 0%,transparent 70%); top: 45%; left: 55%; animation-delay: -14s; } @keyframes aurora-float { 0%,100%{transform:translate(0,0) scale(1);opacity:.55} 33%{transform:translate(-2%,-3%) scale(1.06);opacity:.75} 66%{transform:translate(2%,2%) scale(.96);opacity:.45} } /* โ”€โ”€โ”€ Grid โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .bg-grid { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.027) 1px,transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 85% 85% at 50% 50%,black,transparent); } /* โ”€โ”€โ”€ Glass Card โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .glass-card { background: linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.02)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1); border-radius: 1.25rem; box-shadow: 0 20px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07); } html.light-theme .glass-card { background: rgba(255,255,255,.8); border-color: rgba(15,23,42,.09); box-shadow: 0 14px 32px rgba(2,12,27,.08); } /* โ”€โ”€โ”€ Typography โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .section-kicker { display: inline-flex; font-family: 'JetBrains Mono',monospace; font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; color: var(--orange); opacity: 0; transform: translateY(8px); } .section-title { font-size: clamp(1.8rem,3.5vw,3rem); font-weight: 700; line-height: 1.15; opacity: 0; transform: translateY(20px); } /* โ”€โ”€โ”€ Buttons โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .btn-primary,.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .875rem; padding: .8rem 1.5rem; font-weight: 600; font-size: .9rem; font-family: 'Kanit',sans-serif; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: transform .3s var(--ease-out),box-shadow .3s; } .btn-primary { background: linear-gradient(110deg,var(--orange),#ff9d4c); color: #111; box-shadow: 0 8px 24px rgba(255,122,0,.3); border: none; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,#ff9d4c,var(--cyan)); opacity: 0; transition: opacity .4s; } .btn-primary:hover::before { opacity: 1; } .btn-primary:hover { box-shadow: 0 14px 36px rgba(255,122,0,.45); transform: translateY(-3px); } .btn-primary > span { position: relative; z-index: 1; } .btn-secondary { border: 1px solid rgba(255,255,255,.2); color: var(--text); background: rgba(255,255,255,.04); } .btn-secondary:hover { border-color: var(--cyan); background: rgba(0,224,255,.06); transform: translateY(-3px); } /* โ”€โ”€โ”€ Nav โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .magnetic { will-change: transform; } .nav-link { position: relative; padding-bottom: 2px; transition: color .25s; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); } .nav-link:hover { color: var(--cyan); } .nav-link:hover::after,.nav-link.is-active::after { transform: scaleX(1); } .nav-link.is-active { color: var(--cyan); } /* โ”€โ”€โ”€ Back to Top โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ #backToTop { position: fixed; bottom: 2rem; right: 1.5rem; z-index: 90; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.03)); backdrop-filter: blur(12px); color: var(--text); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: border-color .2s,box-shadow .2s; } #backToTop.is-visible { pointer-events: auto; } #backToTop:hover { border-color: var(--cyan); box-shadow: 0 0 18px rgba(0,224,255,.25); } /* ------------------------------------------------------ 01 HERO ------------------------------------------------------ */ .hero-section { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .hero-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; opacity: 0; } .hero-blob-1 { width: 34rem; height: 34rem; background: radial-gradient(circle,rgba(255,122,0,.22) 0%,transparent 65%); top: -8rem; left: -8rem; filter: blur(50px); } .hero-blob-2 { width: 28rem; height: 28rem; background: radial-gradient(circle,rgba(0,224,255,.18) 0%,transparent 65%); bottom: -5rem; right: -5rem; filter: blur(60px); } .hero-blob-3 { width: 20rem; height: 20rem; background: radial-gradient(circle,rgba(45,168,255,.14) 0%,transparent 65%); top: 40%; left: 50%; filter: blur(40px); } .hero-headline { font-size: clamp(3rem,10.5vw,9.5rem); font-weight: 800; line-height: .92; letter-spacing: -.03em; will-change: transform; } .hero-line { display: block; overflow: hidden; } .hero-line-inner { display: block; transform: translateY(108%); will-change: transform; } .hero-accent { background: linear-gradient(110deg,var(--orange) 0%,var(--cyan) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-glow-line { height: 1px; background: linear-gradient(90deg,transparent,var(--cyan) 40%,transparent); transform: scaleX(0); transform-origin: left; margin-top: 1.5rem; opacity: 0; } .hero-kicker { opacity: 0; transform: translateY(10px); } .hero-sub { opacity: 0; transform: translateY(18px); } .hero-ticker { border-top: 1px solid rgba(255,255,255,.08); padding: .7rem 0; overflow: hidden; margin-top: auto; } .ticker-track { display: inline-flex; gap: 2.5rem; white-space: nowrap; font-family: 'JetBrains Mono',monospace; font-size: .67rem; color: rgba(255,255,255,.38); animation: ticker-scroll 30s linear infinite; will-change: transform; } @keyframes ticker-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} } .hero-ticker:hover .ticker-track { animation-play-state: paused; } /* ------------------------------------------------------ 02 STATS ------------------------------------------------------ */ .stat-item { position: relative; } .stat-number { font-size: clamp(4rem,11vw,8.5rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; opacity: 0; will-change: transform; } .stat-suffix { font-size: .38em; vertical-align: super; line-height: 0; color: var(--orange); } .stat-label { font-family: 'JetBrains Mono',monospace; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; opacity: 0; transform: translateY(6px); } .stat-bar { position: absolute; bottom: 0; left: 0; height: 1px; width: 0; background: linear-gradient(90deg,var(--orange),transparent); } /* ------------------------------------------------------ 03 ABOUT ------------------------------------------------------ */ .about-manifesto { font-size: clamp(2rem,5vw,4.2rem); font-weight: 800; line-height: 1.1; } .manifesto-line { display: block; overflow: hidden; } .manifesto-inner { display: block; transform: translateY(108%); will-change: transform; } .manifesto-highlight { display: inline-block; color: var(--orange); } .pillar-card { opacity: 0; transform: translateY(24px); position: relative; overflow: hidden; transition: box-shadow .35s; } .pillar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--cyan),transparent); transform: scaleX(0); transition: transform .5s var(--ease-out); } .pillar-card:hover::before { transform: scaleX(1); } .pillar-card:hover { box-shadow: 0 24px 48px rgba(0,0,0,.3); } .pillar-icon { font-family: 'JetBrains Mono',monospace; font-size: .67rem; color: var(--orange); margin-bottom: .7rem; } /* ------------------------------------------------------ 04 TIMELINE ------------------------------------------------------ */ .timeline-step { position: relative; opacity: 0; transform: translateY(20px); } .step-number-ghost { font-size: 6rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.05); pointer-events: none; user-select: none; position: absolute; top: -1.5rem; right: -.5rem; } .timeline-connector { height: 1px; background: linear-gradient(90deg,var(--orange),var(--cyan)); transform: scaleX(0); transform-origin: left; } /* ------------------------------------------------------ 05 SERVICES ------------------------------------------------------ */ .service-strip { border-bottom: 1px solid rgba(255,255,255,.07); overflow: hidden; position: relative; cursor: pointer; transform: translateY(16px); opacity: 0; } .service-strip-inner { display: flex; align-items: center; gap: 1rem; padding: 1.35rem 0; } .service-strip-num { font-family: 'JetBrains Mono',monospace; font-size: .65rem; color: var(--muted); width: 2.5rem; flex-shrink: 0; transition: color .3s; } .service-strip-name { font-size: clamp(1.1rem,2.5vw,1.9rem); font-weight: 700; flex: 1; transition: color .35s,transform .4s var(--ease-out); } .service-strip-tag { font-family: 'JetBrains Mono',monospace; font-size: .65rem; color: var(--muted); border: 1px solid rgba(255,255,255,.1); border-radius: 2rem; padding: .25rem .7rem; white-space: nowrap; flex-shrink: 0; transition: border-color .3s,color .3s; } .service-strip-arrow { width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); flex-shrink: 0; transition: transform .4s var(--ease-out),border-color .3s,background .3s; } .service-strip-detail { overflow: hidden; max-height: 0; padding-left: 3.5rem; font-size: .88rem; color: var(--muted); line-height: 1.7; transition: max-height .5s var(--ease-out),padding-bottom .5s; } .service-strip-bg { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,122,0,.05),transparent 60%); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); pointer-events: none; } .service-strip:hover .service-strip-bg,.service-strip.is-active .service-strip-bg { transform: scaleX(1); } .service-strip:hover .service-strip-num,.service-strip.is-active .service-strip-num { color: var(--orange); } .service-strip:hover .service-strip-name,.service-strip.is-active .service-strip-name { color: var(--orange); transform: translateX(6px); } .service-strip:hover .service-strip-tag,.service-strip.is-active .service-strip-tag { border-color: var(--orange); color: var(--orange); } .service-strip:hover .service-strip-arrow,.service-strip.is-active .service-strip-arrow { transform: rotate(45deg); border-color: var(--cyan); background: rgba(0,224,255,.08); } .service-strip.is-active .service-strip-detail { max-height: 6rem; padding-bottom: 1.25rem; } /* ------------------------------------------------------ 06 PORTFOLIO ------------------------------------------------------ */ .portfolio-mosaic { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: .875rem; min-height: 560px; } .portfolio-item-featured { grid-column: 1; grid-row: 1/3; } .portfolio-item { position: relative; border-radius: 1.25rem; overflow: hidden; cursor: pointer; opacity: 0; transform: scale(.97); } .portfolio-color-block { width: 100%; aspect-ratio: 1788 / 902; min-height: 0; display: flex; align-items: flex-end; padding: 1.5rem; position: relative; overflow: hidden; } .portfolio-item-featured .portfolio-color-block { aspect-ratio: auto; min-height: 100%; height: 100%; } .portfolio-color-block-inner { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform .7s var(--ease-out); } .portfolio-mosaic .portfolio-item:not(.portfolio-item-featured) .portfolio-color-block { aspect-ratio: auto; height: 100%; min-height: 100%; } .portfolio-color-block-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); } /* .portfolio-color-block { width: 100%; height: 100%; min-height: 220px; display: flex; align-items: flex-end; padding: 1.5rem; position: relative; overflow: hidden; } .portfolio-item-featured .portfolio-color-block { min-height: 100%; } .portfolio-color-block-inner { position: absolute; inset: 0; transition: transform .7s var(--ease-out); } */ .portfolio-item:hover .portfolio-color-block-inner { transform: scale(1.07); } .portfolio-item:hover .portfolio-color-block-inner, .portfolio-item:hover .portfolio-color-block-media { transform: scale(1.07); } .portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.1) 55%,transparent 100%); z-index: 1; } .portfolio-info { position: relative; z-index: 2; transition: transform .4s var(--ease-out); transform: translateY(10px); } .portfolio-item:hover .portfolio-info { transform: translateY(0); } .portfolio-cat { font-family: 'JetBrains Mono',monospace; font-size: .62rem; color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .3s .05s,transform .3s .05s; } .portfolio-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-top: .25rem; opacity: 0; transform: translateY(10px); transition: opacity .3s .1s,transform .3s .1s; } .portfolio-item:hover .portfolio-cat,.portfolio-item:hover .portfolio-title { opacity: 1; transform: translateY(0); } .portfolio-row-2 { display: grid; grid-template-columns: repeat(3,1fr); gap: .875rem; margin-top: .875rem; } .portfolio-row-2.portfolio-row-2-half { grid-template-columns: repeat(2,1fr); } /* ------------------------------------------------------ 07 PRICING ------------------------------------------------------ */ .pricing-includes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; } .pricing-tag { font-family: 'JetBrains Mono',monospace; font-size: .66rem; border: 1px solid rgba(255,255,255,.13); border-radius: 2rem; padding: .28rem .75rem; color: var(--muted); opacity: 0; transform: scale(.88); transition: border-color .3s,color .3s; cursor: default; } .pricing-tag:hover { border-color: var(--cyan); color: var(--cyan); } .pricing-divider { height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); margin-bottom: 2rem; } .pricing-card { position: relative; overflow: hidden; opacity: 0; transform: translateY(28px); transition: box-shadow .4s; } .pricing-card:hover { box-shadow: 0 32px 64px rgba(0,0,0,.35); } .pricing-glow-wrap { position: absolute; inset: -1px; border-radius: 1.35rem; background: linear-gradient(135deg,var(--cyan),var(--orange)); z-index: -1; opacity: 0; transition: opacity .4s; } .pricing-card:hover .pricing-glow-wrap,.pricing-card.is-featured .pricing-glow-wrap { opacity: 1; } .pricing-card-inner { background: var(--surface); border-radius: 1.25rem; height: 100%; padding: 1.75rem; position: relative; z-index: 0; } html.light-theme .pricing-card-inner { background: #fff; } .pricing-featured-badge { display: inline-flex; font-family: 'JetBrains Mono',monospace; font-size: .62rem; padding: .2rem .6rem; border-radius: 2rem; background: linear-gradient(110deg,var(--orange),var(--cyan)); color: #111; margin-bottom: .75rem; } .pricing-amount { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; opacity: 0; transform: scale(.82); } .pricing-feature-list { list-style: none; padding: 0; margin: 1rem 0 0; } .pricing-feature-list li { font-size: .84rem; color: var(--muted); padding: .32rem 0; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; gap: .5rem; } .pricing-feature-list li::before { content: '○'; color: var(--orange); font-family: 'JetBrains Mono',monospace; font-size: .7rem; flex-shrink: 0; } /* ------------------------------------------------------ 08 BLOG ------------------------------------------------------ */ .blog-featured-title { font-size: clamp(1.35rem,2.6vw,2.2rem); font-weight: 700; line-height: 1.15; opacity: 0; transform: translateX(-20px); } .blog-featured-cat { opacity: 0; transform: translateY(8px); } .blog-secondary-item { opacity: 0; transform: translateX(16px); padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.07); transition: padding-left .3s var(--ease-out); cursor: pointer; } .blog-secondary-item:hover { padding-left: .5rem; } .blog-secondary-item:last-child { border-bottom: none; } .blog-arrow { display: inline-block; transition: transform .3s var(--ease-out),color .3s; } .blog-secondary-item:hover .blog-arrow { transform: translateX(5px); color: var(--cyan); } .blog-divider { width: 1px; align-self: stretch; background: linear-gradient(to bottom,transparent,rgba(255,255,255,.1),transparent); } /* ------------------------------------------------------ 09 FAQ ------------------------------------------------------ */ .faq-terminal { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-radius: 1.25rem; overflow: hidden; } .faq-terminal-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); } .faq-dot { width: .6rem; height: .6rem; border-radius: 50%; } .faq-item { border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; transform: translateY(10px); } .faq-item:last-child { border-bottom: none; } .faq-trigger { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: 1rem 1.25rem; background: none; border: none; color: var(--text); font-family: 'JetBrains Mono',monospace; font-size: .8rem; cursor: pointer; transition: color .25s; } .faq-trigger:hover { color: var(--cyan); } .faq-prompt { color: var(--orange); flex-shrink: 0; } .faq-icon { margin-left: auto; flex-shrink: 0; transition: transform .4s var(--ease-out); } .faq-item.is-open .faq-icon { transform: rotate(180deg); } .faq-content-wrap { overflow: hidden; max-height: 0; } .faq-answer { padding: 0 1.25rem .85rem 3rem; font-size: .875rem; color: var(--muted); line-height: 1.75; } .faq-cursor { display: inline-block; width: .45rem; height: .85em; background: var(--cyan); vertical-align: text-bottom; margin-left: .1rem; animation: blink 1.1s step-end infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } /* ------------------------------------------------------ 10 TESTIMONIALS ------------------------------------------------------ */ .testimonials-stage { position: relative; min-height: 65vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .testimonial-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 3rem 2.5rem; opacity: 0; pointer-events: none; will-change: opacity,transform; } .testimonial-slide.is-active { opacity: 1; pointer-events: auto; } .t-quote-mark { font-size: clamp(8rem,18vw,16rem); font-weight: 800; line-height: .65; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.05); position: absolute; top: 1rem; left: .5rem; user-select: none; pointer-events: none; } .t-text { font-size: clamp(1.1rem,2.5vw,1.85rem); font-weight: 300; line-height: 1.55; max-width: 820px; position: relative; z-index: 1; } .t-author { margin-top: 1.5rem; font-family: 'JetBrains Mono',monospace; font-size: .72rem; color: var(--cyan); letter-spacing: .08em; z-index: 1; } .t-dots { display: flex; gap: .5rem; position: absolute; bottom: 1.5rem; left: 2.5rem; z-index: 2; } .t-dot { height: .35rem; width: .35rem; border-radius: 1rem; background: rgba(255,255,255,.25); cursor: pointer; transition: width .4s var(--ease-out),background .3s; } .t-dot.is-active { width: 1.4rem; background: var(--cyan); } /* ------------------------------------------------------ 11 CONTACT ------------------------------------------------------ */ .contact-prose { font-size: clamp(1.15rem,2.5vw,1.7rem); font-weight: 300; line-height: 2.1; } .ci-wrap { display: inline-block; position: relative; } .ci-input { background: none; border: none; border-bottom: 1.5px solid rgba(255,255,255,.2); color: var(--text); font-family: 'Kanit',sans-serif; font-size: inherit; font-weight: 700; min-width: 120px; padding: 0 .25rem; outline: none; transition: border-color .3s; vertical-align: baseline; } .ci-input:focus { border-color: var(--cyan); } .ci-select { background: var(--surface); border: 1px solid rgba(255,255,255,.15); border-radius: .5rem; color: var(--text); font-family: 'Kanit',sans-serif; font-size: .9em; padding: .2rem .5rem; outline: none; cursor: pointer; transition: border-color .3s; vertical-align: middle; -webkit-appearance: auto; appearance: auto; } .ci-select:focus { border-color: var(--cyan); } .ci-select option { background: var(--surface); color: var(--text); } html.light-theme .ci-select { background: #fff; color: var(--text); } html.light-theme .ci-select option { background: #fff; color: var(--text); } .contact-detail { margin-top: 1.5rem; opacity: 0; transform: translateY(14px); } .form-input { width: 100%; border-radius: .8rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); padding: .85rem 1rem; font-family: 'Kanit',sans-serif; font-size: .9rem; outline: none; transition: border-color .25s,box-shadow .25s; } .form-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,224,255,.1); } html.light-theme .form-input { background: rgba(255,255,255,.7); border-color: rgba(15,23,42,.15); } .btn-submit { display: inline-flex; align-items: center; gap: .6rem; border-radius: 1rem; padding: 1rem 2rem; font-size: 1rem; font-weight: 700; font-family: 'Kanit',sans-serif; background: linear-gradient(110deg,var(--orange),#ff9d4c); color: #111; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(255,122,0,.3); transition: transform .3s var(--ease-out),box-shadow .3s; position: relative; } .btn-submit:hover { transform: scale(1.04); box-shadow: 0 14px 36px rgba(255,122,0,.45); } .text-lg { font-size: clamp(1.15rem,2.5vw,1.2rem); font-weight: 300; line-height: 2.1; } /* ------------------------------------------------------ 12 FOOTER ------------------------------------------------------ */ .footer-display { font-size: clamp(3.5rem,11vw,9rem); font-weight: 800; letter-spacing: -.04em; line-height: .85; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.06); user-select: none; pointer-events: none; } .footer-glow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 55%; height: 200px; background: radial-gradient(ellipse,rgba(255,122,0,.07) 0%,transparent 70%); pointer-events: none; } /* ------------------------------------------------------ RESPONSIVE ------------------------------------------------------ */ @media (max-width: 767px) { .hero-headline { font-size: clamp(2.6rem,13vw,4.5rem); } .portfolio-mosaic { grid-template-columns: 1fr; min-height: auto; } .portfolio-item-featured { grid-row: auto; } .portfolio-item-featured .portfolio-color-block { aspect-ratio: 16 / 9; height: auto; min-height: 0; } .portfolio-row-2, .portfolio-row-2.portfolio-row-2-half, .portfolio-row-2.portfolio-row-2-column { grid-template-columns: 1fr; } .portfolio-color-block { aspect-ratio: 16 / 9; min-height: 0; } .portfolio-mosaic .portfolio-item:not(.portfolio-item-featured) .portfolio-color-block { aspect-ratio: 16 / 9; height: auto; min-height: 0; } .testimonial-slide { padding: 2rem 1.5rem; } .t-quote-mark { font-size: 6rem; } .t-dots { left: 1.5rem; } .section-title { font-size: clamp(1.5rem,8vw,2.2rem); } .blog-divider { display: none; } .blog-featured-title { font-size: clamp(1.2rem,6vw,1.8rem); } } .mobile-link { display: block; padding: .6rem .75rem; font-size: .9rem; font-weight: 500; color: var(--text); border-radius: .5rem; text-decoration: none; transition: color .2s, background .2s; } .mobile-link:hover { color: var(--cyan); background: rgba(0,224,255,.06); }