/* ============================================================ enicham — shared base Design tokens mirrored from the enicham appliance (src/index.css). Per-page styles live inline in each page's . ============================================================ */ :root{ --canvas: #08090a; --surface: #111317; --elevated: #181b20; --grey-mid: #2a2e35; --primary: #f2f4f7; --muted: #9aa1ab; --accent: #2dd4bf; /* turquoise — the single accent */ --accent-bright:#5eead4; --accent-deep:#0d9488; --accent-cyan:#22d3ee; --danger: #f87171; --accent-rgb: 45 212 191; --cyan-rgb: 34 211 238; --border-subtle: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.12); --sans: 'Inter', system-ui, -apple-system, sans-serif; --display:'Space Grotesk', 'Inter', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --radius: 14px; --maxw: 1180px; --gutter: clamp(20px, 5vw, 60px); } /* ============================================================ RESET */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--canvas); color:var(--primary); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } svg{ display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:rgb(var(--accent-rgb) / 0.3); color:#fff; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } * { scrollbar-width:thin; scrollbar-color:var(--grey-mid) transparent; } /* skip link — keyboard accessibility */ .skip{ position:absolute; left:-999px; top:0; z-index:200; background:var(--accent); color:var(--canvas); font-family:var(--mono); font-size:0.82rem; font-weight:500; padding:0.7rem 1.1rem; border-radius:0 0 10px 0; } .skip:focus{ left:0; } /* ============================================================ TEXTURE */ .grid-bg{ background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size:46px 46px; } .aura{ background: radial-gradient(60rem 42rem at 72% -8%, rgb(var(--accent-rgb) / 0.12), transparent 60%), radial-gradient(52rem 40rem at -5% 108%, rgb(var(--cyan-rgb) / 0.07), transparent 55%); } @keyframes aura-drift{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(2%,-2%,0) scale(1.07); } 100%{ transform:translate3d(0,0,0) scale(1); } } .aura-drift{ animation:aura-drift 16s ease-in-out infinite; } /* ============================================================ GLOW */ .glow-soft{ box-shadow:0 0 24px -6px rgb(var(--accent-rgb) / 0.45); } .glow-ring{ box-shadow:0 0 0 1px rgb(var(--accent-rgb) / 0.4), 0 0 22px rgb(var(--accent-rgb) / 0.35); } /* ============================================================ TYPE HELPERS */ .eyebrow{ display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--mono); font-size:0.72rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin:0 0 1.2rem; } .eyebrow::before{ content:""; width:22px; height:1px; background:linear-gradient(90deg, var(--accent), transparent); } h1,h2,h3{ font-family:var(--display); color:var(--primary); margin:0; line-height:1.08; letter-spacing:-0.02em; } .accent{ color:var(--accent); } .display-grad{ background:linear-gradient(100deg, var(--accent-bright), var(--accent) 55%, var(--accent-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; } .section-title{ font-size:clamp(1.8rem, 4vw, 2.8rem); font-weight:600; max-width:22ch; } .lead{ color:var(--muted); font-size:clamp(1rem,1.6vw,1.16rem); max-width:62ch; } /* ============================================================ LAYOUT */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } section{ position:relative; } .section-pad{ padding-block:clamp(68px,11vw,128px); } .section-head{ margin-bottom:clamp(2.4rem,5vw,3.6rem); } .hairline{ height:1px; background:var(--border-subtle); border:0; margin:0; } /* ============================================================ NAV */ .nav{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.85rem var(--gutter); border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } .nav.scrolled{ background:rgb(17 19 23 / 0.66); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--border-subtle); } .brand{ display:flex; align-items:center; gap:0.65rem; } .brand-name{ font-family:var(--display); font-weight:600; font-size:1.18rem; letter-spacing:-0.01em; color:var(--primary); } .nav-right{ display:flex; align-items:center; gap:1.7rem; } .nav-links{ display:flex; gap:1.5rem; font-family:var(--mono); font-size:0.8rem; color:var(--muted); } .nav-links a{ position:relative; transition:color .2s ease; } .nav-links a:hover,.nav-links a.is-active{ color:var(--accent); } .nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--accent); transition:width .2s ease; } .nav-links a:hover::after,.nav-links a.is-active::after{ width:100%; } /* ============================================================ BUTTONS */ .btn{ display:inline-flex; align-items:center; gap:0.55rem; font-family:var(--sans); font-size:0.96rem; font-weight:500; padding:0.8rem 1.3rem; border-radius:var(--radius); border:1px solid transparent; background:var(--accent); color:var(--canvas); box-shadow:0 0 0 1px rgb(var(--accent-rgb)/0.25), 0 10px 30px -10px rgb(var(--accent-rgb)/0.5); transition:background .2s ease, box-shadow .2s ease, transform .15s ease; } .btn:hover{ background:var(--accent-bright); box-shadow:0 0 0 1px rgb(var(--accent-rgb)/0.4), 0 14px 38px -10px rgb(var(--accent-rgb)/0.7); transform:translateY(-1px); } .btn svg{ width:17px; height:17px; } .btn-ghost{ display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--sans); font-size:0.96rem; font-weight:500; color:var(--primary); padding:0.8rem 1.1rem; border-radius:var(--radius); border:1px solid var(--border-strong); background:transparent; transition:border-color .2s ease, color .2s ease, gap .2s ease; } .btn-ghost:hover{ border-color:rgb(var(--accent-rgb)/0.5); color:var(--accent); gap:0.75rem; } .btn-ghost svg{ width:16px; height:16px; } /* ============================================================ FOOTER */ .footer-line{ height:1px; background:rgb(var(--accent-rgb)/0.18); border:0; } footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.7rem; } .foot-left{ font-family:var(--mono); font-size:0.78rem; color:var(--muted); letter-spacing:0.03em; } .foot-left a:hover{ color:var(--accent); } /* ============================================================ RESPONSIVE (shared) */ @media (max-width: 620px){ .nav-links{ gap:1.1rem; } } /* ============================================================ REDUCED MOTION (shared) */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .aura-drift{ animation:none !important; } *{ transition-duration:0.01ms !important; } }