/* ========================= THEME TOKENS - Switch via: - Themes: dark-tech (default), light-clean, beige-minimal ========================= */ /* Default (fallback) */ :root{ --bg: #020617; --panel: rgba(255,255,255,0.05); --panel-2: rgba(255,255,255,0.08); --text: #e5e7eb; --muted: #9ca3af; --line: #1f2933; --accent: #22c55e; --accent-2: #06b6d4; --shadow: 0 12px 36px rgba(0,0,0,.5); --radius: 16px; --max: 1120px; --pad: 20px; } /* Theme: Dark Tech */ html[data-theme="dark-tech"]{ --bg: #020617; --panel: rgba(255,255,255,0.05); --panel-2: rgba(255,255,255,0.08); --text: #e5e7eb; --muted: #9ca3af; --line: #1f2933; --accent: #22c55e; --accent-2: #06b6d4; --shadow: 0 12px 36px rgba(0,0,0,.5); } /* Theme: Light Clean */ html[data-theme="light-clean"]{ --bg: #f8fafc; --panel: #ffffff; --panel-2: #f1f5f9; --text: #0f172a; --muted: #475569; --line: #e2e8f0; --accent: #2563eb; --accent-2: #38bdf8; --shadow: 0 12px 32px rgba(15,23,42,.08); } /* Theme: Beige Minimal */ html[data-theme="beige-minimal"]{ --bg: #faf7f2; --panel: #ffffff; --panel-2: #f5efe6; --text: #2b2b2b; --muted: #6b6b6b; --line: #e7dfd5; --accent: #c08457; --accent-2: #84a98c; --shadow: 0 10px 28px rgba(0,0,0,.08); --radius: 18px; } /* ========================= Base / Reset (mobile-first) ========================= */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; background: var(--bg); color: var(--text); line-height: 1.6; text-rendering: optimizeLegibility; } img{ max-width:100%; height:auto; display:block; } a{ color: inherit; text-decoration: none; } p{ margin: 0 0 14px; } h1,h2,h3{ line-height:1.2; margin:0 0 10px; letter-spacing:-0.02em; } ul{ margin:0; padding-left: 18px; } strong{ color: color-mix(in srgb, var(--text) 96%, transparent); } .container{ width: min(var(--max), 100% - (var(--pad) * 2)); margin-inline: auto; } .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:-999px; top:8px; background:#fff; color:#000; padding:10px 12px; border-radius: 10px; z-index: 9999; } .skip-link:focus{ left: 10px; } /* ========================= Header / Nav ========================= */ .site-header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); border-bottom: 1px solid transparent; } .site-header.is-elevated{ background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom-color: var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 14px; } .brand{ display:flex; align-items:center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; } .brand-logo{ height: 28px; width: auto; display:block; } .brand-mark{ width: 12px; height: 12px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, var(--accent), color-mix(in srgb, var(--accent) 10%, transparent)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); } .brand-text{ opacity: 0.96; } .accent{ color: var(--accent); } .brand-highlight{ display: inline-block; padding: 0 6px; border-radius: 10px; font-weight: 800; letter-spacing: -0.01em; color: color-mix(in srgb, var(--text) 96%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent) ); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 10px 22px color-mix(in srgb, var(--accent) 18%, transparent); } html[data-theme="light-clean"] .brand-logo, html[data-theme="beige-minimal"] .brand-logo{ filter: brightness(0); } .header-actions{ display:flex; align-items:center; gap: 10px; } /* Theme switch */ .theme-switch{ display:flex; gap: 6px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 80%, transparent); } .theme-btn{ border: 1px solid transparent; background: transparent; color: color-mix(in srgb, var(--text) 86%, transparent); padding: 8px 10px; border-radius: 12px; cursor:pointer; font-weight: 650; font-size: 0.92rem; transition: transform .12s ease, background .2s ease, border-color .2s ease; } .theme-btn:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--panel-2) 80%, transparent); } .theme-btn[aria-pressed="true"]{ border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent) ); color: color-mix(in srgb, var(--text) 96%, transparent); } .nav{ display:flex; align-items:center; gap: 10px; } .nav-toggle{ background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px; color: var(--text); display:inline-flex; align-items:center; justify-content:center; } .burger{ width: 18px; height: 12px; position: relative; display:block; } .burger::before, .burger::after, .burger span{ content:""; position:absolute; left:0; right:0; height:2px; background: color-mix(in srgb, var(--text) 85%, transparent); border-radius: 2px; } .burger::before{ top:0; } .burger::after{ bottom:0; } .burger span{ top:50%; transform: translateY(-50%); } .nav-menu{ position: fixed; inset: 64px 16px auto 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display:none; flex-direction: column; gap: 10px; box-shadow: var(--shadow); } .nav-menu a{ padding: 10px 10px; border-radius: 12px; color: color-mix(in srgb, var(--text) 88%, transparent); } .nav-menu a:hover{ background: color-mix(in srgb, var(--panel-2) 80%, transparent); } .nav-menu.open{ display:flex; } @media (min-width: 860px){ .nav-toggle{ display:none; } .nav-menu{ position: static; inset: auto; background: transparent; border: none; padding: 0; display:flex !important; flex-direction: row; align-items:center; gap: 6px; box-shadow:none; } .nav-menu a{ padding: 10px 12px; } } /* ========================= Buttons ========================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent) ); color: color-mix(in srgb, var(--text) 94%, transparent); font-weight: 650; box-shadow: 0 10px 30px color-mix(in srgb, #000 25%, transparent); transition: transform .12s ease, filter .12s ease, background .2s ease; will-change: transform; } .btn:hover{ transform: translateY(-1px); filter: brightness(1.03); } .btn:active{ transform: translateY(0px); } .btn-ghost{ background: color-mix(in srgb, var(--panel) 70%, transparent); border-color: var(--line); box-shadow:none; } .btn-ghost:hover{ background: color-mix(in srgb, var(--panel-2) 80%, transparent); } .btn-sm{ padding: 10px 12px; border-radius: 12px; font-size: 0.95rem; } /* ========================= Sections / Layout ========================= */ .section{ padding: 56px 0; } .section-head{ max-width: 820px; margin-bottom: 12px; } .section-head h2{ font-size: 1.55rem; } .section-head p{ color: var(--muted); } .grid-2, .grid-3{ display:grid; gap: 14px; } .grid-2{ grid-template-columns: 1fr; } .grid-3{ grid-template-columns: 1fr; } @media (min-width: 860px){ .section{ padding: 76px 0; } .grid-2{ grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-3{ grid-template-columns: repeat(3, 1fr); gap: 16px; } .section-head h2{ font-size: 2rem; } } .card{ background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent) inset; transition: transform .15s ease, background .2s ease, border-color .2s ease; } .intro-card{ border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--accent) 10%, transparent) ); padding: 14px; } .intro-card p{ max-width: none; margin-bottom: 10px; } .intro-card p:last-of-type{ margin-bottom: 8px; } .intro-card ul{ margin-top: 4px; color: color-mix(in srgb, var(--text) 92%, transparent); } .card:hover{ transform: translateY(-2px); background: var(--panel-2); border-color: color-mix(in srgb, var(--accent) 25%, transparent); } .muted{ color: var(--muted); } /* ========================= Hero ========================= */ .hero{ position: relative; padding: 86px 0 44px; overflow:hidden; } .hero-inner{ display:grid; gap: 18px; } .hero-title{ font-size: 2.1rem; } .hero-sub{ color: var(--muted); font-size: 1.05rem; max-width: 58ch; } .hero-cta{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 10px; } .hero-pills{ list-style:none; display:flex; flex-wrap:wrap; gap: 8px; padding:0; margin: 14px 0 0; } .hero-pills li{ padding: 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent); color: color-mix(in srgb, var(--text) 84%, transparent); font-size: 0.95rem; } .hero-card{ background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .score{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } .score-item{ border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 14px; padding: 10px; background: color-mix(in srgb, #000 10%, transparent); } html[data-theme="light-clean"] .score-item, html[data-theme="beige-minimal"] .score-item{ background: color-mix(in srgb, #000 3%, transparent); } .score-num{ display:block; font-size: 1.1rem; font-weight: 800; color: color-mix(in srgb, var(--text) 95%, transparent); } .score-label{ display:block; font-size: 0.88rem; color: var(--muted); margin-top: 2px; } .mini-title{ font-weight: 750; margin-bottom: 6px; } .mini-desc{ color: var(--muted); } @media (min-width: 860px){ .hero{ padding: 110px 0 60px; } .hero-inner{ grid-template-columns: 1.2fr 0.8fr; align-items: start; } .hero-title{ font-size: 3rem; } } /* Hero background: grid + glow + noise (nhẹ) */ .hero-bg{ position:absolute; inset: 0; pointer-events:none; z-index: -1; } .hero-bg .grid{ position:absolute; inset:-40px; background: linear-gradient(to right, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px); background-size: 44px 44px; transform: perspective(800px) rotateX(60deg); transform-origin: top; opacity: 0.22; mask-image: radial-gradient(circle at 50% 20%, #000 35%, transparent 70%); } .hero-bg .glow{ position:absolute; inset:-30%; background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 40%), radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 45%), radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%); filter: blur(18px); animation: drift 10s ease-in-out infinite alternate; opacity: 0.9; } .hero-bg .noise{ position:absolute; inset:0; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); background-size: 160px 160px; } @keyframes drift{ from{ transform: translate3d(0,0,0) scale(1); } to{ transform: translate3d(20px,-10px,0) scale(1.02); } } /* ========================= Note / Badges ========================= */ .note{ margin-top: 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: color-mix(in srgb, var(--text) 88%, transparent); } .badge{ display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent); font-size: 0.9rem; color: color-mix(in srgb, var(--text) 86%, transparent); } .badge-soft{ border-color: color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } /* Client strip */ .client-strip{ margin-top: 14px; display:flex; align-items:center; gap: 10px; flex-wrap: wrap; } .client-pill{ display:inline-flex; align-items:center; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent); color: color-mix(in srgb, var(--text) 88%, transparent); transition: transform .12s ease, background .2s ease, border-color .2s ease; } .client-pill:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--panel-2) 80%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); } /* ========================= Services / Case ========================= */ .service .icon{ width: 44px; height: 44px; display:inline-flex; align-items:center; justify-content:center; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, #000 14%, transparent); margin-bottom: 10px; font-size: 1.15rem; } html[data-theme="light-clean"] .service .icon, html[data-theme="beige-minimal"] .service .icon{ background: color-mix(in srgb, #000 4%, transparent); } .checks{ margin: 10px 0 0; padding-left: 18px; color: color-mix(in srgb, var(--text) 84%, transparent); } .checks li{ margin: 6px 0; } .case-top{ display:flex; gap: 8px; flex-wrap:wrap; margin-bottom: 10px; } .case-actions{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 12px; } /* Mockup images (lightweight) */ .mockup{ display:block; border-radius: 14px; overflow:hidden; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 80%, transparent); margin: 10px 0 12px; } .mockup img{ width: 100%; height: auto; } /* ========================= Steps ========================= */ .steps{ list-style:none; padding:0; margin: 10px 0 0; display:grid; gap: 12px; } .step{ display:grid; grid-template-columns: 42px 1fr; gap: 12px; align-items:start; padding: 14px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent); } .step-num{ width: 42px; height: 42px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-weight: 800; color: rgba(0,0,0,0.9); background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 70%, transparent)); } .step-body p{ color: var(--muted); } /* ========================= CTA section ========================= */ .cta-inner{ display:grid; gap: 14px; padding: 18px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2) 6%, transparent) ); } .cta-actions{ display:flex; gap: 10px; flex-wrap: wrap; } @media (min-width: 860px){ .cta-inner{ grid-template-columns: 1.2fr 0.8fr; align-items:center; padding: 22px; } .cta-actions{ justify-content: flex-end; } } /* ========================= FAQ ========================= */ .faq{ display:grid; gap: 10px; } .faq-item{ border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent); padding: 12px 14px; } .faq-item summary{ cursor:pointer; font-weight: 700; list-style:none; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item p{ color: var(--muted); margin-top: 10px; } /* ========================= Footer ========================= */ .site-footer{ border-top: 1px solid var(--line); padding: 22px 0; color: color-mix(in srgb, var(--text) 78%, transparent); } .footer-inner{ display:flex; gap: 12px; flex-direction: column; align-items:flex-start; justify-content:space-between; } .footer-links{ display:flex; gap: 12px; flex-wrap: wrap; } .footer-links a{ color: color-mix(in srgb, var(--text) 82%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); } .footer-links a:hover{ border-bottom-color: color-mix(in srgb, var(--accent) 65%, transparent); } @media (min-width: 860px){ .footer-inner{ flex-direction: row; align-items:center; } } /* ========================= Reveal on scroll ========================= */ .reveal{ opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--d, 0s); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal{ transition:none; opacity:1; transform:none; } .hero-bg .glow{ animation:none; } } /* ========================= Modal ========================= */ .modal{ position: fixed; inset: 0; display:none; z-index: 100; } .modal[aria-hidden="false"]{ display:block; } .modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); } .modal-dialog{ position: relative; width: min(560px, calc(100% - 32px)); margin: 14vh auto 0; background: color-mix(in srgb, var(--bg) 96%, transparent); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); } .modal-close{ position:absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent); color: color-mix(in srgb, var(--text) 90%, transparent); font-size: 20px; cursor:pointer; } .modal-actions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; } /* Contact inline (CTA) */ .contact-inline{ margin-top: 12px; font-size: 0.95rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .contact-inline a{ color: var(--accent); font-weight: 500; border-bottom: 1px dashed transparent; } .contact-inline a:hover{ border-bottom-color: var(--accent); }