/* 3D Website Builder — base design system. Consumes the brand tokens injected inline in (--c-primary, --c-ink, --radius, --font, …). */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } html.lenis,html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } .lenis.lenis-stopped{ overflow:hidden; } body{ margin:0; background:var(--c-bg); color:var(--c-body); font-family:var(--font); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:2; } .container.narrow{ max-width:820px; } main > section{ padding:clamp(56px,9vh,108px) 0; position:relative; } section.alt{ background:var(--c-alt); } .center{ text-align:center; } .mx-auto{ margin-left:auto; margin-right:auto; } h1,h2,h3,h4{ color:var(--c-ink); line-height:1.08; letter-spacing:-.02em; margin:0 0 .45em; font-weight:800; } h1{ font-size:clamp(34px,5.6vw,62px); } h2{ font-size:clamp(27px,3.8vw,44px); } h3{ font-size:20px; } p{ margin:0 0 1em; } .eyebrow{ text-transform:uppercase; letter-spacing:.22em; font-size:12px; font-weight:800; color:var(--c-primary); margin:0 0 14px; } .eyebrow.center{ text-align:center; } .lead{ font-size:clamp(16px,1.55vw,20px); color:var(--c-body); max-width:58ch; } /* buttons */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:999px; font-weight:800; font-size:15px; cursor:pointer; border:none; white-space:nowrap; transition:transform .15s ease, box-shadow .2s ease; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ color:var(--c-on-primary); background:var(--grad); box-shadow:0 12px 28px color-mix(in srgb,var(--c-primary) 36%, transparent); } .btn-ghost{ color:var(--c-primary); border:1.6px solid var(--c-primary); background:transparent; } .btn-link{ color:var(--c-primary); font-weight:800; } .btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; } .hero-copy.center .btn-row{ justify-content:center; } .badges{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:24px; color:var(--c-muted); font-size:14px; font-weight:600; } .badges .badge{ display:inline-flex; align-items:center; gap:7px; } .badges .badge::before{ content:"✓"; color:var(--c-primary); font-weight:900; } /* nav */ .site-nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--c-bg) 86%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s; } .site-nav.scrolled{ border-color:var(--c-line); box-shadow:0 6px 24px color-mix(in srgb,var(--c-ink) 6%, transparent); } .nav-bar{ display:flex; align-items:center; justify-content:space-between; padding:13px 24px; } .brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:18px; letter-spacing:.03em; color:var(--c-ink); } .brand img{ height:30px; width:auto; } .brand-mark{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; background:var(--grad-135); font-size:17px; } .nav-links{ display:flex; align-items:center; gap:26px; } .nav-links a{ font-weight:600; font-size:15px; color:var(--c-body); } .nav-links a:hover{ color:var(--c-primary); } .nav-links .nav-cta{ font-weight:800; color:var(--c-on-primary); background:var(--c-primary); padding:9px 17px; border-radius:999px; } @media (max-width:840px){ .nav-links a:not(.nav-cta){ display:none; } } /* hero */ .hero{ position:relative; overflow:hidden; } .hero-center{ min-height:clamp(560px,86vh,920px); display:grid; place-items:center; text-align:center; } .hero-center .hero-copy{ padding:14vh 0; } .hero-copy h1{ margin-bottom:.3em; } .hero-copy .lead{ margin-inline:auto; } .hero-bg{ position:absolute; inset:0; z-index:0; } .hero-gradient{ background: radial-gradient(60% 70% at 20% 20%, color-mix(in srgb,var(--c-primary) 26%, transparent), transparent 60%), radial-gradient(60% 70% at 85% 30%, color-mix(in srgb,var(--c-accent) 24%, transparent), transparent 60%), radial-gradient(70% 80% at 60% 100%, color-mix(in srgb,var(--c-secondary) 22%, transparent), transparent 60%), var(--c-bg); background-size:200% 200%; animation:bgshift 18s ease-in-out infinite; } @keyframes bgshift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } } .hero-img{ background-size:cover; background-position:center; } .hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, color-mix(in srgb,#04101f 55%, transparent), color-mix(in srgb,#04101f 30%, transparent)); } .on-dark, .on-dark h1, .on-dark h2, .on-dark h3{ color:#fff; } .on-dark .eyebrow{ color:var(--c-accent); } .on-dark h1{ text-shadow:0 2px 40px rgba(0,0,0,.38); } .on-dark .lead{ color:rgba(255,255,255,.88); text-shadow:0 1px 24px rgba(0,0,0,.3); } .on-dark .badges{ color:rgba(255,255,255,.8); } .on-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); } .hero-split{ padding:7vh 0 8vh; } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; } .hero-media{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; } .hero-media img{ width:100%; height:100%; object-fit:cover; } @media (max-width:840px){ .hero-grid{ grid-template-columns:1fr; } .hero-media{ order:-1; } } /* grids / cards */ .grid{ display:grid; gap:20px; margin-top:36px; } .cols-2{ grid-template-columns:repeat(2,1fr); } .cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } } .card{ background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; } .card .pic{ height:188px; background:linear-gradient(180deg, color-mix(in srgb,var(--c-primary) 5%, var(--c-card)), color-mix(in srgb,var(--c-primary) 11%, var(--c-card))); display:grid; place-items:center; padding:14px; overflow:hidden; } .card .pic img{ width:100%; height:100%; object-fit:contain; } .card .pic.icon{ font-size:50px; } .card-body{ padding:22px; } .card-body .tag{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary); margin-bottom:9px; } .card-body p{ margin:4px 0 0; font-size:14.5px; } /* split */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; } .split.media-left .split-copy{ order:2; } .split-media{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; } .split-media img{ width:100%; height:100%; object-fit:cover; } @media (max-width:840px){ .split{ grid-template-columns:1fr; } } ul.checks{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px; } ul.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--c-ink); font-weight:700; } ul.checks li::before{ content:"✓"; color:#fff; background:var(--c-primary); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:900; flex:none; margin-top:1px; } ul.checks li span{ font-weight:400; color:var(--c-body); } /* gallery */ .gallery{ display:grid; gap:18px; margin-top:36px; } .gallery figure{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); aspect-ratio:4/3; position:relative; } .gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .gallery figure:hover img{ transform:scale(1.05); } .gallery figcaption{ position:absolute; left:0; right:0; bottom:0; padding:10px 14px; color:#fff; font-size:13px; background:linear-gradient(transparent, rgba(0,0,0,.6)); } /* stats */ .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; margin-top:24px; text-align:center; } .stat-num{ font-size:clamp(36px,5vw,58px); font-weight:900; color:var(--c-primary); line-height:1; letter-spacing:-.02em; } .stat-label{ color:var(--c-muted); font-weight:600; margin-top:6px; } /* logos */ .logos{ display:flex; flex-wrap:wrap; gap:22px 40px; align-items:center; justify-content:center; margin-top:22px; } .logo-txt{ font-weight:800; font-size:18px; color:var(--c-muted); letter-spacing:.02em; } .logo-img{ height:30px; width:auto; opacity:.7; filter:grayscale(1); } /* steps */ .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px; margin-top:36px; } .step-n{ font-size:14px; font-weight:900; letter-spacing:.14em; color:var(--c-primary); margin-bottom:8px; } /* testimonials */ .quotes{ display:grid; gap:20px; margin-top:36px; } .quote{ margin:0; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); } .quote blockquote{ margin:0 0 18px; font-size:17px; color:var(--c-ink); line-height:1.55; } .quote figcaption{ display:flex; align-items:center; gap:12px; } .quote figcaption img{ width:42px; height:42px; border-radius:50%; object-fit:cover; } .quote figcaption b{ color:var(--c-ink); display:block; } .quote figcaption small{ color:var(--c-muted); } /* pricing */ .plans{ display:grid; gap:22px; margin-top:38px; align-items:stretch; } .plan{ background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; position:relative; } .plan.featured{ border-color:var(--c-primary); box-shadow:0 24px 50px color-mix(in srgb,var(--c-primary) 22%, transparent); transform:translateY(-6px); } .plan-badge{ position:absolute; top:-12px; left:28px; background:var(--c-primary); color:var(--c-on-primary); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; } .plan .price{ font-size:40px; font-weight:900; color:var(--c-ink); margin:6px 0 16px; letter-spacing:-.02em; } .plan .price span{ font-size:15px; font-weight:600; color:var(--c-muted); } .plan ul{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:11px; flex:1; } .plan ul li{ padding-left:26px; position:relative; font-size:14.5px; } .plan ul li::before{ content:"✓"; position:absolute; left:0; color:var(--c-primary); font-weight:900; } /* faq */ .faq{ margin-top:30px; display:grid; gap:12px; } .faq details{ border:1px solid var(--c-line); border-radius:var(--radius-sm); background:var(--c-card); overflow:hidden; } .faq summary{ cursor:pointer; padding:18px 20px; font-weight:700; color:var(--c-ink); list-style:none; display:flex; justify-content:space-between; align-items:center; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; color:var(--c-primary); font-weight:900; font-size:20px; } .faq details[open] summary::after{ content:"–"; } .faq .faq-a{ padding:0 20px 18px; color:var(--c-body); } /* cta band */ .cta-band.on-grad{ background:var(--grad-135); color:#fff; text-align:center; } .cta-band.on-grad h2{ color:#fff; } .cta-band.on-grad .lead{ color:rgba(255,255,255,.92); } .cta-band.on-grad .btn-primary{ color:var(--c-primary); background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.18); } .cta-band.on-grad .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.6); } .cta-band.on-grad .btn-row{ justify-content:center; } .cta-note{ margin-top:14px; opacity:.85; font-size:14px; } /* contact */ .contact-section .split{ align-items:start; } .contact-info{ display:grid; gap:14px; margin-top:22px; } .contact-item{ display:flex; align-items:center; gap:14px; } .ci-ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb,var(--c-primary) 12%, var(--c-card)); color:var(--c-primary); font-size:18px; flex:none; } .contact-item b{ color:var(--c-ink); display:block; } .contact-item small{ color:var(--c-muted); } .contact-form{ display:grid; gap:12px; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); } .contact-form input,.contact-form textarea{ font:inherit; padding:13px 15px; border:1px solid var(--c-line); border-radius:var(--radius-sm); background:var(--c-bg); color:var(--c-ink); } .contact-form input:focus,.contact-form textarea:focus{ outline:2px solid color-mix(in srgb,var(--c-primary) 50%, transparent); border-color:var(--c-primary); } /* footer */ .site-foot{ border-top:1px solid var(--c-line); padding:56px 0 36px; background:var(--c-alt); } .foot-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:28px; margin-bottom:34px; } .foot-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--c-muted); margin-bottom:12px; } .foot-col a{ display:block; color:var(--c-body); padding:4px 0; font-size:14px; } .foot-col a:hover{ color:var(--c-primary); } .foot-base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--c-muted); font-size:13px; border-top:1px solid var(--c-line); padding-top:20px; } /* motion utilities (initial state is set by JS so no-JS shows content) */ @media (prefers-reduced-motion:reduce){ .hero-gradient{ animation:none; } .gallery img{ transition:none; } *{ scroll-behavior:auto !important; } }