/* ============================================================ X9 BUILDERS — Design System Premium architectural editorial. Warm ink + paper, clay accent. Theme + accent + type are driven by data-attributes on so the Tweaks panel can swap directions live. ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Archivo:wght@500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---------- Theme tokens ---------- */ :root { /* type roles — overridden by [data-type] */ --font-display: 'Newsreader', Georgia, serif; --font-sans: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --display-weight: 400; --display-tracking: -0.01em; /* X9 brand colors */ --brand-green: #8dc640; --brand-green-dk: #6fa42c; --brand-navy: #151d48; --accent: var(--brand-green); --accent-soft: color-mix(in oklab, var(--brand-green) 16%, transparent); --accent-text: var(--brand-green); --on-accent: var(--brand-navy); /* text/icon color on green fills */ --radius: 4px; --radius-lg: 8px; --maxw: 1280px; --gutter: clamp(20px, 5vw, 80px); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* DARK (default) — brand navy base */ :root, [data-theme="dark"] { --bg: #0b0f2c; --surface: #111638; --surface-2: #171d43; --surface-3: #1e2552; --text: #e7eaf6; --text-strong: #ffffff; --muted: #99a0c4; --faint: #616891; --line: rgba(231, 234, 246, 0.10); --line-strong: rgba(231, 234, 246, 0.20); --accent-text: #9fd455; --shadow: 0 30px 70px -30px rgba(0,0,0,0.75); } [data-theme="light"] { --bg: #edf0f7; --surface: #f6f8fc; --surface-2: #fbfcfe; --surface-3: #ffffff; --text: #242b4c; --text-strong: var(--brand-navy); --muted: #595f82; --faint: #969cba; --line: rgba(21, 29, 72, 0.12); --line-strong: rgba(21, 29, 72, 0.22); --accent-text: #5f8f23; --shadow: 0 30px 70px -34px rgba(21,29,72,0.22); } /* ---------- Type direction ---------- */ [data-type="editorial"] { --font-display: 'Newsreader', Georgia, serif; --display-weight: 400; --display-tracking: -0.01em; } [data-type="modern"] { --font-display: 'Archivo', system-ui, sans-serif; --display-weight: 800; --display-tracking: -0.03em; } /* ---------- Reset ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ::selection { background: var(--accent); color: var(--brand-navy); } /* ---------- Brand logos (theme-aware) ---------- */ .brand-logo { display: block; height: auto; } .brand-logo--light { display: none; } [data-theme="light"] .brand-logo--dark { display: none; } [data-theme="light"] .brand-logo--light { display: block; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: clamp(70px, 11vh, 150px) 0; position: relative; } .section--tight { padding: clamp(50px, 7vh, 90px) 0; } /* ---------- Type utilities ---------- */ .kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; } .kicker--plain::before { display: none; } .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.02; color: var(--text-strong); text-wrap: balance; } .serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; } [data-type="modern"] .serif-italic { font-style: normal; color: var(--accent-text); } h1.display { font-size: clamp(40px, 6.4vw, 92px); } h2.display { font-size: clamp(32px, 4.6vw, 62px); } h3.display { font-size: clamp(24px, 2.6vw, 36px); } .lead { font-size: clamp(17px, 1.45vw, 21px); color: var(--muted); line-height: 1.6; text-wrap: pretty; } .eyebrow-num { font-family: var(--font-mono); color: var(--faint); font-size: 12px; letter-spacing: 0.1em; } /* ---------- Buttons ---------- */ .btn { --bg-btn: var(--accent); display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: var(--radius); font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.005em; background: var(--bg-btn); color: var(--on-accent); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--accent); } .btn:active { transform: translateY(0); } .btn .arrow { transition: transform .35s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn--ghost { background: transparent; color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--line-strong); } .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); } .btn--light { background: var(--text-strong); color: var(--bg); } .btn--lg { padding: 18px 32px; font-size: 16px; } /* ---------- Image slots ---------- */ image-slot { --is-bg: var(--surface-2); background: repeating-linear-gradient(135deg, transparent 0 14px, var(--line) 14px 15px), var(--surface-2); color: var(--faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--line); overflow: hidden; } /* ---------- Pills / chips ---------- */ .chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 7px 13px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--line); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .4s, transform .4s var(--ease), background .4s; } .card:hover { border-color: var(--line-strong); } hr.rule { border: none; height: 1px; background: var(--line); margin: 0; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Marquee ---------- */ @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Keyframes ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .typing { letter-spacing: 2px; animation: blink 1.2s steps(3) infinite; } @keyframes blink { 0%,100% { opacity: .3; } 50% { opacity: 1; } } /* ---------- Range sliders (pro-forma) ---------- */ .pf-range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: var(--surface-3); outline: none; cursor: pointer; } [data-theme="light"] .pf-range { background: var(--surface-2); } .pf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform .15s; } .pf-range::-webkit-slider-thumb:hover { transform: scale(1.15); } .pf-range::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); cursor: pointer; } select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px !important; } textarea, input, select { outline: none; } input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; } /* ---------- Responsive ---------- */ @media (max-width: 1000px) { .stats-grid { grid-template-columns: repeat(2,1fr) !important; } .why-grid, .why-head, .pf-head, .pf-grid { grid-template-columns: 1fr !important; } .process-detail { grid-template-columns: 1fr !important; } .process-rail { grid-template-columns: repeat(2,1fr) !important; } .proj-grid { grid-template-columns: repeat(2,1fr) !important; } } @media (max-width: 860px) { .nav-links { display: none !important; } .nav-burger { display: block !important; } .hero-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr !important; } .hero-media { max-width: 460px; } .faq-grid > div:first-child { position: static !important; } } @media (max-width: 560px) { .stats-grid, .proj-grid, .process-rail { grid-template-columns: 1fr !important; } .why-head, .pf-head { gap: 18px !important; } h1.display { font-size: 40px; } } /* ---------- Misc ---------- */ .grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }