/* ========================================================= LEVEL TEN — base system Tokens, layout, typography, shared components. Art-direction overrides live in directions.css and are driven by [data-direction] + [data-mode] on . ========================================================= */ :root { /* --- Brand constants --- */ --orange: #EA5F38; --orange-deep: #D14A22; --green: #3FBF86; /* --- Accent (overridable by Tweaks) --- */ --accent: var(--orange); --accent-press: var(--orange-deep); --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-line: color-mix(in srgb, var(--accent) 26%, transparent); --accent-ink: var(--accent); /* --- Surfaces (light defaults; overridden per direction) --- */ --bg: #FBFBF9; --bg-2: #F4F3EF; --surface: #FFFFFF; --surface-2: #FBFAF7; --ink: #100F12; --ink-2: #2A2A30; --mute: #6A6A72; --mute-2: #9C9CA3; --line: #E6E5DF; --line-2: #EFEEE8; --line-strong: #D6D5CD; --field: #FFFFFF; /* --- Dark feature surfaces (used by all directions for dark blocks) --- */ --night: #0C0C0F; --night-2: #141418; --night-3: #1C1C22; --night-line: rgba(255,255,255,0.09); --night-ink: #F4F3EF; --night-mute: rgba(244,243,239,0.58); /* --- Type --- */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --display: 'Plus Jakarta Sans', -apple-system, sans-serif; --mono: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace; --display-weight: 800; --display-track: -0.035em; --h1-track: -0.04em; --scale: 1; /* multiplied into clamp() maxes */ /* --- Shape --- */ --radius: 14px; --radius-sm: 10px; --radius-lg: 22px; --radius-pill: 999px; --btn-radius: 999px; --hair: 1px; /* --- Rhythm --- */ --maxw: 1240px; --gutter: 28px; --section-y: clamp(64px, 7vw, 116px); --ease: cubic-bezier(.2,.8,.2,1); /* --- Elevation --- */ --shadow-sm: 0 1px 2px rgba(16,15,18,0.04), 0 8px 24px -18px rgba(16,15,18,0.22); --shadow: 0 2px 4px rgba(16,15,18,0.04), 0 30px 70px -38px rgba(16,15,18,0.30); --shadow-lg: 0 40px 90px -44px rgba(16,15,18,0.40); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--bg); color: var(--ink-2); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background .5s var(--ease), color .5s var(--ease); } ::selection { background: var(--accent); color: #fff; } img { max-width: 100%; display: block; } a { color: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; } /* --------------------------------------------------------- Typography --------------------------------------------------------- */ h1, h2, h3, h4, h5 { font-family: var(--display); color: var(--ink); letter-spacing: var(--display-track); margin: 0; font-weight: var(--display-weight); text-wrap: balance; } h1 { font-size: calc(clamp(38px, 5.4vw, 72px) * var(--scale)); line-height: 1.02; letter-spacing: var(--h1-track); } h2 { font-size: calc(clamp(30px, 4vw, 50px) * var(--scale)); line-height: 1.05; } h3 { font-size: calc(20px * var(--scale)); line-height: 1.25; letter-spacing: -0.02em; } h4 { font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; } h5 { font-size: 12px; letter-spacing: 0.02em; color: var(--ink); } p { color: var(--mute); margin: 0; } .accent { color: var(--accent-ink); } .lead { font-size: calc(clamp(16px, 1.35vw, 19px) * var(--scale)); line-height: 1.55; color: var(--mute); } /* Eyebrow / kicker */ .eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 12px; background: var(--accent-soft); border-radius: var(--radius-pill); border: var(--hair) solid var(--accent-line); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .eyebrow.plain { background: transparent; border-color: transparent; color: var(--mute); padding-left: 0; } .eyebrow.plain::before { background: var(--mute-2); } .section-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; border-radius: var(--btn-radius); font-size: 14px; font-weight: 600; font-family: var(--sans); text-decoration: none; border: var(--hair) solid transparent; background: var(--accent); color: #fff; cursor: pointer; letter-spacing: -0.005em; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .btn .arrow { display: inline-block; transition: transform .25s var(--ease); } .btn:hover { transform: translateY(-2px); background: var(--accent-press); box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--accent) 60%, transparent); } .btn:hover .arrow { transform: translate(3px, -3px); } .btn.ink { background: var(--ink); color: var(--bg); } .btn.ink:hover { background: #000; box-shadow: var(--shadow); } .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn.ghost:hover { background: var(--surface); border-color: var(--ink); box-shadow: var(--shadow-sm); transform: translateY(-2px); } /* --------------------------------------------------------- Grain + ambient (toggleable) --------------------------------------------------------- */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } html[data-grain="off"] .grain { display: none; } html[data-mode="dark"] .grain { mix-blend-mode: screen; opacity: 0.05; } /* --------------------------------------------------------- Reveal animations --------------------------------------------------------- */ [data-rise] { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); } [data-rise].in { opacity: 1; transform: none; } [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-stagger].in > * { opacity: 1; transform: none; } [data-stagger].in > *:nth-child(1){transition-delay:.04s} [data-stagger].in > *:nth-child(2){transition-delay:.10s} [data-stagger].in > *:nth-child(3){transition-delay:.16s} [data-stagger].in > *:nth-child(4){transition-delay:.22s} [data-stagger].in > *:nth-child(5){transition-delay:.28s} [data-stagger].in > *:nth-child(6){transition-delay:.34s} [data-stagger].in > *:nth-child(7){transition-delay:.40s} [data-stagger].in > *:nth-child(8){transition-delay:.46s} @media (prefers-reduced-motion: reduce) { [data-rise], [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* --------------------------------------------------------- NAV --------------------------------------------------------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; padding: 18px 0; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: var(--hair) solid transparent; transition: padding .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .site-nav.scrolled { padding: 11px 0; background: color-mix(in srgb, var(--bg) 92%, transparent); border-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; text-transform: lowercase; line-height: 1; } .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links a { text-decoration: none; color: var(--mute); font-size: 14px; font-weight: 500; position: relative; transition: color .2s var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { transform: scaleX(1); } .nav-right { display: flex; align-items: center; gap: 16px; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; font-size: 13px; font-weight: 600; background: var(--ink); color: var(--bg); border-radius: var(--btn-radius); text-decoration: none; transition: background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease); } .nav-cta .arr { color: var(--accent); transition: transform .25s var(--ease); } .nav-cta:hover { background: var(--accent); color: #fff; transform: translateY(-1px); } .nav-cta:hover .arr { color: #fff; transform: translate(2px,-2px); } .burger { display: none; width: 44px; height: 44px; border-radius: var(--btn-radius); border: var(--hair) solid var(--line-strong); background: var(--surface); flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } .burger span { width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); } .burger.open span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); } .burger.open span:nth-child(2){ opacity: 0; } .burger.open span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 70; display: none; flex-direction: column; gap: 4px; padding: 110px 28px 40px; background: color-mix(in srgb, var(--bg) 97%, transparent); backdrop-filter: blur(20px); } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: var(--hair) solid var(--line); } @media (max-width: 920px) { .nav-links { display: none; } .nav-cta.desktop { display: none; } .burger { display: inline-flex; } } /* --------------------------------------------------------- Section scaffold --------------------------------------------------------- */ section.block { padding: var(--section-y) 0; position: relative; } .section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); } .section-head.split { max-width: none; display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: end; } .section-head h2 { margin-top: 4px; } .section-head .lead { margin-top: 18px; } @media (max-width: 860px){ .section-head.split { grid-template-columns: 1fr; gap: 22px; } } .divider { height: var(--hair); background: var(--line); border: 0; margin: 0; } /* --------------------------------------------------------- Floating contact button --------------------------------------------------------- */ .float-chat { position: fixed; bottom: 26px; right: 26px; z-index: 75; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 18px 38px -12px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-sm); transition: transform .25s var(--ease), background .25s var(--ease); } .float-chat svg { width: 25px; height: 25px; } .float-chat:hover { transform: translateY(-3px); background: var(--accent-press); } .float-chat .ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: chatring 3s ease-out infinite; } @keyframes chatring { 0%{opacity:.5; transform:scale(.95)} 100%{opacity:0; transform:scale(1.5)} } @media (prefers-reduced-motion: reduce){ .float-chat .ring { animation: none; } } @media (max-width: 560px){ .float-chat { width: 52px; height: 52px; bottom: 18px; right: 18px; } }