/* ArzTeq -- design tokens pulled from the brand mark blue #0084FF and slate #394D5F sampled directly from the logo artwork; bg #1F2427 is the logo's own background panel. */ :root { --ink: #14171a; --panel: #1f2427; --panel-raised: #262c30; --blue: #0084ff; --blue-deep: #0a5fb3; --slate: #394d5f; --slate-line: #33404b; --paper: #f3f5f6; --mute: #9bA8b3; --slant: 18deg; --edge: polygon(0 0, 100% 0, 100% calc(100% - 2.4vw), 0 100%); --edge-rev: polygon(0 2.4vw, 100% 0, 100% 100%, 0 100%); --maxw: 72rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--ink); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ink); color: var(--paper); font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: "Space Grotesk", "Manrope", sans-serif; font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--blue); color: #041322; padding: 0.75rem 1.25rem; z-index: 100; font-weight: 600; } .skip-link:focus { left: 1rem; top: 1rem; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } /* Reveal-on-scroll: gated behind html.js (set by an inline script in ) so content stays fully visible if JavaScript never runs, and behind prefers-reduced-motion so it never hides content from anyone who opted out. */ @media (prefers-reduced-motion: no-preference) { html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } } /* ---------- header ---------- */ .site-header { position: relative; z-index: 50; border-bottom: 1px solid var(--slate-line); background: var(--ink); } .site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; flex-wrap: wrap; padding-top: 0.75rem; padding-bottom: 0.75rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; } .brand__mark { transition: transform 0.2s ease; } .brand:hover .brand__mark, .brand:focus-visible .brand__mark { transform: rotate(-6deg) scale(1.08); } @media (prefers-reduced-motion: reduce) { .brand__mark { transition: none; } } .brand__word { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; cursor: pointer; } .nav-toggle__bar { display: block; width: 100%; height: 2px; background: var(--paper); transition: transform 0.2s ease, opacity 0.15s ease; } .nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav { display: flex; gap: 2rem; } .site-nav a { font-weight: 500; color: var(--mute); padding: 0.3rem 0.1rem; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--paper); border-bottom-color: var(--blue); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.6rem; font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; clip-path: polygon(0.7rem 0, 100% 0, calc(100% - 0.7rem) 100%, 0 100%); } .btn--primary { background: var(--blue); color: #051422; transition: background 0.15s ease; } .btn--primary:hover { background: #2b9bff; } .btn--ghost { border-color: var(--slate-line); color: var(--paper); transition: border-color 0.15s ease, background 0.15s ease; } .btn--ghost:hover { border-color: var(--blue); background: var(--panel); } .btn--dark { background: var(--ink); color: var(--paper); transition: background 0.15s ease; } .btn--dark:hover { background: #05263f; } /* ---------- hero ---------- */ .hero { overflow: hidden; padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(3rem, 7vw, 6rem); } .hero__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); } .hero__copy h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); max-width: 15ch; } .hero__sub { margin-top: 1.5rem; max-width: 42ch; color: var(--mute); font-size: 1.08rem; } .hero__actions { margin-top: 2.25rem; display: flex; gap: 1rem; flex-wrap: wrap; } .hero__art { position: relative; height: clamp(220px, 30vw, 380px); } .shard { position: absolute; clip-path: polygon(32% 0, 100% 0, 68% 100%, 0 100%); opacity: var(--shard-opacity, 1); } @media (prefers-reduced-motion: no-preference) { .shard { opacity: 0; transform: translateY(14px); animation: shard-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) var(--in-delay, 0s) forwards, shard-float var(--float-dur, 7s) ease-in-out var(--float-delay, 0.7s) infinite alternate; } .shard--1 { --in-delay: 0.02s; --float-delay: 0.7s; --float-dur: 6.5s; } .shard--2 { --in-delay: 0.09s; --float-delay: 0.9s; --float-dur: 7.8s; } .shard--3 { --in-delay: 0.16s; --float-delay: 0.6s; --float-dur: 7.1s; } .shard--4 { --in-delay: 0.23s; --float-delay: 1.05s; --float-dur: 8.4s; } .shard--5 { --in-delay: 0.30s; --float-delay: 0.8s; --float-dur: 6.9s; } .shard--6 { --in-delay: 0.37s; --float-delay: 1.2s; --float-dur: 7.6s; } } @keyframes shard-in { to { opacity: var(--shard-opacity, 1); transform: translateY(0); } } @keyframes shard-float { 0%, 100% { translate: 0 0; } 50% { translate: var(--fx, 0px) var(--fy, -10px); } } .shard--1 { width: 34%; height: 46%; left: 6%; top: 4%; background: var(--blue); --fx: 3px; --fy: -9px; } .shard--2 { width: 22%; height: 30%; left: 40%; top: 0%; background: var(--slate); --fx: -5px; --fy: 7px; } .shard--3 { width: 26%; height: 58%; left: 58%; top: 12%; background: var(--blue); --shard-opacity: 0.85; --fx: 4px; --fy: -8px; } .shard--4 { width: 18%; height: 24%; left: 4%; top: 58%; background: var(--slate); --fx: -4px; --fy: -8px; } .shard--5 { width: 30%; height: 34%; left: 30%; top: 56%; background: var(--panel-raised); --fx: 5px; --fy: 8px; } .shard--6 { width: 16%; height: 20%; left: 82%; top: 66%; background: var(--blue); --shard-opacity: 0.6; --fx: -3px; --fy: 9px; } /* ---------- services ---------- */ .services { padding: clamp(3rem, 6vw, 5.5rem) 0; } .services h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 2.5rem; } .service-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.75rem; align-items: start; padding: 2rem 0; position: relative; } .service-row + .service-row { border-top: 1px solid var(--slate-line); } .service-row::before { content: ""; position: absolute; left: 0; top: -1px; width: 3.5rem; height: 3px; background: transparent; } .service-row:not(:first-child)::before { background: var(--blue); transform: skewX(calc(-1 * var(--slant))); transform-origin: left top; } @media (prefers-reduced-motion: no-preference) { html.js .service-row:not(:first-child)::before { width: 0; transition: width 0.5s ease 0.2s; } html.js .service-row.is-visible:not(:first-child)::before { width: 3.5rem; } } .service-icon { width: 2.75rem; height: 2.75rem; color: var(--blue); flex-shrink: 0; } .service-row__text h3 { font-size: 1.3rem; margin-bottom: 0.6rem; } .service-row__text p { max-width: 62ch; color: var(--mute); } .services__more { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--slate-line); color: var(--mute); max-width: 62ch; } .services__more a { color: var(--paper); border-bottom: 1px solid var(--blue); } .services__more a:hover { color: var(--blue); } /* ---------- about ---------- */ .about { background: var(--panel); padding: clamp(3.5rem, 7vw, 6rem) 0; } .about__col { max-width: 46rem; } .about__lead { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; letter-spacing: -0.01em; } .about__body { margin-top: 1.5rem; color: var(--mute); font-size: 1.05rem; max-width: 62ch; } /* ---------- faq ---------- */ .faq { padding: clamp(3rem, 6vw, 5rem) 0; } .faq h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 1.5rem; } .faq-item { padding: 1.4rem 0; border-top: 1px solid var(--slate-line); } .faq-item summary { cursor: pointer; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; flex-shrink: 0; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); transition: transform 0.15s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { margin-top: 1rem; color: var(--mute); max-width: 62ch; } /* ---------- contact ---------- */ .contact { background: var(--blue); color: #051422; clip-path: var(--edge-rev); padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(4.5rem, 8vw, 7rem); margin-top: -2.4vw; } .contact__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .contact h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); max-width: 14ch; } .contact__action { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .contact__email { font-weight: 600; border-bottom: 1px solid rgba(5, 20, 34, 0.4); } /* ---------- footer ---------- */ .site-footer { padding: 2.25rem 0 2.75rem; } .site-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .brand--footer .brand__word { font-size: 1rem; color: var(--mute); } .site-footer__meta { color: var(--mute); font-size: 0.9rem; } .site-footer__meta a { color: var(--mute); border-bottom: 1px solid var(--slate-line); } .site-footer__meta a:hover { color: var(--paper); border-color: var(--blue); } /* ---------- responsive ---------- */ @media (max-width: 760px) { .hero__row { grid-template-columns: 1fr; } .hero__art { order: -1; height: 200px; } .service-row { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1.1rem; } .contact__row { flex-direction: column; align-items: flex-start; } .nav-toggle { display: flex; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--ink); border-bottom: 1px solid var(--slate-line); padding: 0 1.5rem; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, visibility 0s linear 0.3s; } .site-nav.is-open { max-height: 18rem; opacity: 1; visibility: visible; padding: 0.5rem 1.5rem 1.25rem; transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, visibility 0s linear 0s; } .site-nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--slate-line); } .site-nav a:last-child { border-bottom: none; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .site-nav { transition: none; } .site-nav.is-open { transition: none; } }