/* ========================================================================== Web Growth Solutions — styles.css Layout is fully usable without JavaScript. When main.js confirms GSAP is available (and the user allows motion) it adds .anim to , which switches the services and process sections into their pinned-scroll layouts. Everything under `html.anim` only applies in that mode. ========================================================================== */ /* ---------- Fonts (self-hosted, latin subset) ---------- */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/anton-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Variable font: one file covers weights 400-700 */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(fonts/archivo-latin-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --accent: #C8F542; --bg: #0a0a0a; --ink: #f2f2f0; --line: rgba(242, 242, 240, .16); --line-dark: rgba(10, 10, 10, .3); --font-display: 'Anton', Impact, sans-serif; --font-body: 'Archivo', Helvetica, Arial, sans-serif; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #3a3a3a #0a0a0a; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); overflow-x: clip; } body.menu-open { overflow: hidden; } ::selection { background: var(--accent); color: #0a0a0a; } ::placeholder { color: rgba(242, 242, 240, .35); opacity: 1; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } .skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; background: var(--accent); color: #0a0a0a; padding: 10px 16px; font-weight: 700; text-decoration: none; transition: top .2s; } .skip-link:focus { top: 12px; } /* ---------- Shared type ---------- */ .kicker { margin: 0 0 26px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; } .kicker--accent { color: var(--accent); } .kicker--dim { opacity: .6; } .sec-title { margin: 0 0 24px; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(46px, 7vw, 124px); line-height: .95; } .lead { margin: 0; font-size: 19px; line-height: 1.55; max-width: 560px; opacity: .8; } .accent { color: var(--accent); } .btn { display: inline-block; font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: #0a0a0a; background: var(--accent); text-decoration: none; border: 0; padding: 16px 32px; white-space: nowrap; cursor: pointer; transition: opacity .25s; } .btn:hover { opacity: .85; } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 5vw; background: rgba(10, 10, 10, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .brand { font-family: var(--font-display); font-size: 17px; letter-spacing: .08em; color: var(--ink); text-decoration: none; text-transform: uppercase; white-space: nowrap; } .brand sup { font-size: 9px; } .nav-links { display: flex; align-items: center; gap: 32px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; } .nav-links a { color: var(--ink); text-decoration: none; opacity: .75; transition: opacity .2s; } .nav-links a:hover { opacity: 1; } .nav-links .nav-cta { color: #0a0a0a; background: var(--accent); opacity: 1; padding: 11px 20px; font-weight: 700; white-space: nowrap; transition: opacity .25s; } .nav-links .nav-cta:hover { opacity: .85; } /* ---------- Burger button ---------- */ .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 44px; height: 44px; margin: -8px 0; padding: 0; background: none; border: 0; cursor: pointer; } .burger-bar { display: block; width: 26px; height: 2px; background: var(--ink); transition: transform .35s cubic-bezier(.76, 0, .24, 1); } .burger.is-open .burger-bar:first-child { transform: translateY(4.5px) rotate(45deg); } .burger.is-open .burger-bar:last-child { transform: translateY(-4.5px) rotate(-45deg); } /* ---------- Full-screen menu ---------- */ .menu { position: fixed; inset: 0; z-index: 90; height: 100dvh; background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; gap: 5vh; padding: 92px 6vw max(5vh, env(safe-area-inset-bottom)); overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), visibility 0s .6s; } .menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .6s cubic-bezier(.76, 0, .24, 1); } .menu-tag { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transition: opacity .4s; } .menu.is-open .menu-tag { opacity: .55; transition-delay: .35s; } .menu-list { list-style: none; margin: 0; padding: 0; } .menu-item { border-top: 1px solid var(--line); } .menu-item:last-child { border-bottom: 1px solid var(--line); } .menu-link { display: flex; align-items: baseline; gap: 18px; padding: 10px 0 14px; color: var(--ink); text-decoration: none; } .menu-idx { font-size: 12px; font-weight: 600; letter-spacing: .18em; color: var(--accent); } .menu-mask { display: block; overflow: hidden; } .menu-text { display: block; font-family: var(--font-display); font-size: clamp(38px, 10.5vw, 84px); line-height: 1.05; text-transform: uppercase; transform: translateY(110%); transition: transform .55s cubic-bezier(.19, 1, .22, 1), color .2s; } .menu-link:hover .menu-text, .menu-link:active .menu-text { color: var(--accent); } .menu.is-open .menu-text { transform: none; } .menu.is-open .menu-item:nth-child(1) .menu-text { transition-delay: .2s; } .menu.is-open .menu-item:nth-child(2) .menu-text { transition-delay: .26s; } .menu.is-open .menu-item:nth-child(3) .menu-text { transition-delay: .32s; } .menu.is-open .menu-item:nth-child(4) .menu-text { transition-delay: .38s; } .menu-foot { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(16px); transition: opacity .45s, transform .45s; } .menu.is-open .menu-foot { opacity: 1; transform: none; transition-delay: .45s; } .menu-mail { color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; } @media (min-width: 861px) { .menu { display: none; } } @media (max-width: 860px) { .nav-links { display: none; } .burger { display: flex; } } /* ---------- Hero ---------- */ .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 5vw 0; position: relative; } .hero-top { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; padding-bottom: 6vh; } .hero-title { margin: 0 0 4vh; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: .005em; } .hero-title .mask { display: block; overflow: hidden; padding: .04em 0; } .hero-line { display: block; font-size: clamp(88px, 16.5vw, 300px); } .hero-l2 { color: transparent; -webkit-text-stroke: 2px var(--accent); } .hero-row { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-end; padding-bottom: 6vh; } .hero-copy { margin: 0; font-size: 20px; line-height: 1.5; max-width: 480px; opacity: .85; } .hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .hero-cta { font-size: 21px; padding: 18px 38px; } .hero-more { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; font-size: 15px; font-weight: 500; white-space: nowrap; transition: opacity .2s; } .hero-more:hover { opacity: .8; } .bob { display: inline-block; animation: bob 1.6s ease-in-out infinite; } .hero-badges { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; padding: 18px 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; } /* ---------- Marquee ---------- */ .marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; } .marquee-track { display: flex; width: max-content; animation: mq 30s linear infinite; color: var(--accent); } .marquee-text { font-family: var(--font-display); font-size: clamp(40px, 4.6vw, 78px); text-transform: uppercase; padding: 16px 0; white-space: nowrap; } /* ---------- Services intro ---------- */ .intro { padding: 16vh 5vw 8vh; } .intro .sec-title { max-width: 14em; } /* ---------- Services (horizontal scroll / pinned) ---------- */ .svc-sec { position: relative; } .svc-pin { position: relative; padding: 8vh 0; } html.anim .svc-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; padding: 0; } .pin-head { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .55; margin-bottom: 4vh; padding: 0 5vw; } html.anim .pin-head { position: absolute; top: max(4vh, 84px); /* clear the fixed nav bar */ left: 5vw; right: 5vw; margin: 0; padding: 0; z-index: 2; } .pin-head .accent { opacity: 1; } .svc-track { display: flex; align-items: stretch; padding: 0 8vw 0 5vw; overflow-x: auto; } html.anim .svc-track { overflow: visible; will-change: transform; } .svc-card { flex: 0 0 auto; width: min(78vw, 820px); height: 68vh; border-left: 1px solid var(--line); padding: 4vh 3.5vw; display: flex; flex-direction: column; justify-content: space-between; gap: 3vh; } .svc-card:last-child { border-right: 1px solid var(--line); } .svc-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .svc-num { font-family: var(--font-display); font-size: 92px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--accent); } .svc-tag { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; padding-top: 10px; text-align: right; } .svc-tag--accent { color: var(--accent); opacity: 1; padding: 0; text-align: left; } .svc-title { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 5.4vw, 100px); line-height: .95; } .svc-title--sm { font-size: clamp(34px, 4.2vw, 78px); } .svc-title--md { font-size: clamp(38px, 4.6vw, 84px); } .svc-title--xl { font-size: clamp(54px, 7vw, 130px); } .svc-body { margin: 0; border-top: 1px solid var(--line); padding-top: 22px; font-size: 19px; line-height: 1.55; max-width: 520px; opacity: .85; } .svc-cta-row { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; } .svc-cta-row p { margin: 0; font-size: 19px; line-height: 1.55; max-width: 420px; opacity: .85; } .pin-bar { display: none; } html.anim .pin-bar { display: block; position: absolute; bottom: 5vh; left: 5vw; right: 5vw; height: 2px; background: var(--line); } .pin-fill { height: 100%; width: 100%; background: var(--accent); transform-origin: left center; } /* ---------- Results ---------- */ .results { background: var(--ink); color: #0a0a0a; padding: 16vh 5vw 12vh; } .results-lead { margin-bottom: 10vh; opacity: .75; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); } .stat { padding: 34px 24px 34px 0; border-bottom: 1px solid var(--line-dark); } .stat-value { font-family: var(--font-display); font-size: clamp(60px, 6.4vw, 118px); line-height: 1; } .stat-label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .65; margin-top: 12px; } @media (min-width: 1100px) { .stat:nth-child(n+2) { border-left: 1px solid var(--line-dark); padding-left: 28px; } } @media (min-width: 641px) and (max-width: 1099px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(even) { border-left: 1px solid var(--line-dark); padding-left: 28px; } } @media (max-width: 640px) { .stats { grid-template-columns: 1fr; } } .case-rows { margin-top: 10vh; } .case-row { display: grid; grid-template-columns: minmax(150px, 1fr) 1.2fr 1.4fr; gap: 20px; align-items: center; padding: 26px 8px; border-top: 1px solid var(--line-dark); transition: background .3s, color .3s; } .case-row:last-of-type { border-bottom: 1px solid var(--line-dark); } .case-row:hover { background: #0a0a0a; color: var(--accent); } .case-name { font-weight: 600; font-size: 16px; } .case-what { font-size: 16px; opacity: .7; } .case-result { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(20px, 2.2vw, 38px); text-align: right; } .case-note { margin: 18px 8px 0; font-size: 13px; opacity: .6; } /* ---------- Process (pinned steps) ---------- */ .proc-sec { position: relative; } html.anim .proc-sec { height: 340vh; } .proc-pin { position: relative; padding: 12vh 5vw; } html.anim .proc-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 4vw; padding: 0 5vw; } .proc-nums { display: none; } html.anim .proc-nums { display: block; position: relative; height: 60vh; } .proc-num { position: absolute; inset: 0; display: flex; align-items: center; font-family: var(--font-display); font-size: clamp(180px, 26vw, 460px); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--accent); } .proc-steps { display: flex; flex-direction: column; gap: 10vh; } html.anim .proc-steps { display: block; position: relative; height: 60vh; z-index: 1; } .proc-step { display: flex; flex-direction: column; justify-content: center; gap: 22px; } html.anim .proc-step { position: absolute; inset: 0; } .step-tag { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .55; } .proc-step h3 { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(42px, 4.6vw, 86px); line-height: .95; } .proc-step p { margin: 0; font-size: 19px; line-height: 1.55; max-width: 520px; opacity: .85; } @media (max-width: 860px) { html.anim .proc-pin { grid-template-columns: 1fr; } html.anim .proc-nums { position: absolute; inset: 0; height: auto; opacity: .3; pointer-events: none; } html.anim .proc-num { justify-content: center; font-size: clamp(140px, 50vw, 300px); } } /* ---------- Contact ---------- */ .contact { padding: 18vh 5vw 12vh; border-top: 1px solid var(--line); } .contact-title { margin: 0 0 8vh; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .9; font-size: clamp(70px, 12.5vw, 230px); } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8vw; } .contact-info { display: flex; flex-direction: column; gap: 28px; } .contact-mail { color: var(--ink); font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; text-decoration: underline; text-underline-offset: 8px; word-break: break-all; transition: color .2s; } .contact-mail:hover { color: var(--accent); } .contact-info p { margin: 0; font-size: 17px; line-height: 1.6; max-width: 420px; opacity: .75; } .contact-form { display: flex; flex-direction: column; gap: 34px; } .field { background: transparent; border: none; border-bottom: 1px solid rgba(242, 242, 240, .3); border-radius: 0; color: var(--ink); font-size: 18px; font-family: inherit; padding: 14px 0; width: 100%; } .field:focus { outline: none; border-bottom-color: var(--ink); } textarea.field { resize: vertical; } .hp { display: none; } .send-btn { align-self: flex-start; font-size: 20px; padding: 18px 44px; } .send-btn:disabled { cursor: default; } .form-status { margin: -14px 0 0; font-size: 14px; opacity: .8; min-height: 1em; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--line); padding-top: 40px; } .footer-meta { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; padding: 0 5vw 30px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; } .footer-meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } .footer-mark-wrap { overflow: hidden; line-height: .76; } .footer-mark { font-family: var(--font-display); font-size: 33vw; text-align: center; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(242, 242, 240, .5); margin-bottom: -.14em; } /* ---------- Mobile type scale ---------- */ @media (max-width: 640px) { .brand { font-size: 15px; } .hero { padding-top: 100px; } .hero-line { font-size: 17vw; } .hero-copy { font-size: 17px; } .hero-cta { font-size: 18px; padding: 16px 30px; } .sec-title { font-size: clamp(34px, 10.5vw, 46px); } .lead { font-size: 16px; } .marquee-text { font-size: 34px; } .svc-card { width: min(86vw, 820px); padding: 4vh 6vw; } .svc-num { font-size: 64px; } .svc-title { font-size: clamp(30px, 9vw, 44px); } .svc-title--sm { font-size: clamp(24px, 7.5vw, 34px); } .svc-title--md { font-size: clamp(27px, 8vw, 38px); } .svc-title--xl { font-size: clamp(36px, 11vw, 54px); } .svc-body, .svc-cta-row p { font-size: 16px; } .stat-value { font-size: clamp(44px, 13vw, 60px); } .case-row { grid-template-columns: 1fr; gap: 6px; padding: 22px 8px; } .case-result { text-align: left; font-size: clamp(22px, 6.5vw, 28px); } .proc-step h3 { font-size: clamp(30px, 9vw, 42px); } .proc-step p { font-size: 16px; } .contact-title { font-size: clamp(40px, 13vw, 70px); } .contact-grid { gap: 56px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; } .bob { animation: none; } .menu, .menu-text, .menu-tag, .menu-foot, .burger-bar { transition: none; } }