/* ============================================================ WeMedia — Strategic Growth Agency Palette: client-supplied light teal system · Primary teal #5D918F (hover #4F7F7D) · Dark teal headings #3F6669 · Page #F8F9F7 · Sections #FFFFFF / #EEF5F4 · Footer #234548 · Primary button yellow #F2D34F · Secondary button teal Signature: one governing slant — the monogram's stroke angle — cuts every seam, mask, and hover on the site. ============================================================ */ :root { /* palette */ --teal: #5d918f; --teal-hover: #4f7f7d; --teal-deep: #3f6669; --page: #f8f9f7; --white: #ffffff; --alt: #eef5f4; --footer: #234548; --head: #2e3f42; --text: #667a7d; --muted: #8d9b9d; --yellow: #f2d34f; --yellow-hover: #e8c12a; --card-border: #e5eceb; --card-shadow: rgba(0, 0, 0, 0.08); --input-border: #d6e2e0; --success: #49b37a; --error: #e85d5d; /* derived lines/tints */ --teal-line: rgba(93, 145, 143, 0.32); --teal-soft: rgba(93, 145, 143, 0.12); --grid-light: rgba(93, 145, 143, 0.09); --white-line: rgba(255, 255, 255, 0.2); --slant: -14deg; --unslant: 14deg; --display: 'Syncopate', sans-serif; --body: 'Plus Jakarta Sans', sans-serif; --mono: 'IBM Plex Mono', monospace; --gutter: clamp(1.25rem, 5vw, 6rem); --ease: cubic-bezier(0.65, 0.05, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } /* Lenis drives the scroll — native CSS smoothing would fight it */ html.lenis-active, html.lenis { scroll-behavior: auto; } /* Anchor targets land clear of the sticky nav */ [id] { scroll-margin-top: 5.5rem; } /* Menu open = page frozen; the overlay owns the screen. The lock lives on only — overflow:hidden on would turn body into a scroll container and break the sticky navbar (it snaps back to the document top, vanishing when the page is scrolled). */ html.menu-lock { overflow: hidden; } body { background: var(--page); color: var(--text); font-family: var(--body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } /* Film grain over everything (decorative, click-through) */ body::after { content: ""; position: fixed; inset: -12%; z-index: 95; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml;utf8,"); animation: grain 1.1s steps(4) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.6%, 1.1%); } 50% { transform: translate(1.2%, -1.4%); } 75% { transform: translate(-0.8%, -0.9%); } } /* Touch devices: keep the texture, skip the per-frame work */ @media (pointer: coarse) { body::after { animation: none; } } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } em { font-style: normal; } input, textarea, button { font: inherit; color: inherit; } .mono { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } ::selection { background: var(--teal); color: var(--white); } /* Slanted tick — the monogram stroke, miniature */ .tick { display: inline-block; width: 0.5em; height: 0.9em; background: var(--teal); transform: skewX(var(--slant)); margin: 0 0.9em; vertical-align: -0.12em; flex-shrink: 0; } /* Split-character spans (JS-generated) */ .ch { display: inline-block; } /* ============ Page transition wipe ============ */ /* A slanted teal panel with a yellow trailing edge sweeps the viewport between pages. Covers on load (under .js), then reveals left-to-right. */ .page-wipe { position: fixed; top: -10%; bottom: -10%; left: -18%; right: -18%; z-index: 200; background: var(--teal); transform: translateX(-130%) skewX(var(--slant)); pointer-events: none; will-change: transform; } .js .page-wipe { transform: translateX(0) skewX(var(--slant)); } .page-wipe::after { content: ""; position: absolute; top: 0; bottom: 0; right: -16px; width: 16px; background: var(--yellow); } /* ============ Custom cursor ============ */ .cursor { display: none; position: fixed; top: -11px; left: -11px; width: 22px; height: 22px; border: 1.5px solid var(--teal); transform: skewX(var(--slant)); pointer-events: none; z-index: 300; opacity: 0; transition: opacity 0.3s, scale 0.35s var(--ease), background-color 0.3s; } .cursor.is-visible { opacity: 1; } .cursor.is-on { scale: 2.1; background: var(--teal-soft); } .cursor.is-down { scale: 0.8; } @media (pointer: fine) { .cursor { display: block; } } /* ============ Scroll progress rail ============ */ .rail { position: fixed; top: 0; left: 0; bottom: 0; width: 3px; z-index: 80; pointer-events: none; } .rail-fill { display: block; width: 100%; height: 100%; background: var(--teal); transform: scaleY(0); transform-origin: top; } /* ============ Announcement ticker ============ */ .announce { background: var(--footer); padding: 0.55rem 0; position: relative; z-index: 60; overflow: hidden; } .announce-track { display: flex; width: max-content; will-change: transform; } .announce-run { display: flex; align-items: center; flex-shrink: 0; } .announce-run span { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); white-space: nowrap; padding: 0 0.4rem; } .announce-run .tick { width: 0.4em; height: 0.75em; background: var(--yellow); } /* Without motion the ticker becomes a centered, wrapping line */ .no-js .announce-track { width: 100%; justify-content: center; } .no-js .announce-run { flex-wrap: wrap; justify-content: center; row-gap: 0.3rem; } .no-js .announce-run span { white-space: normal; text-align: center; } /* ============ Navigation ============ */ #nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding: 1rem var(--gutter); transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); border-bottom: 1px solid transparent; } #nav.scrolled { background: rgba(248, 249, 247, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--card-border); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05); } /* Cheaper compositing for touch devices */ @media (pointer: coarse) { #nav.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(248, 249, 247, 0.97); } } .nav-logo { margin-right: auto; } .nav-logo img { width: clamp(88px, 9vw, 118px); height: auto; transition: opacity 0.3s; } .nav-logo:hover img { opacity: 0.75; } .nav-links { display: flex; gap: clamp(1.2rem, 2.5vw, 2.2rem); } .nav-links a { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); padding: 0.4rem 0; position: relative; transition: color 0.3s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--teal); transform: scaleX(0) skewX(var(--slant)); transform-origin: right; transition: transform 0.35s var(--ease); } .nav-links a:hover { color: var(--head); } .nav-links a:hover::after { transform: scaleX(1) skewX(var(--slant)); transform-origin: left; } .nav-links a[aria-current="page"] { color: var(--head); } .nav-links a[aria-current="page"]::after { transform: scaleX(1) skewX(var(--slant)); } /* ============ Buttons — parallelogram cut ============ */ .btn { position: relative; display: inline-block; overflow: hidden; transform: skewX(var(--slant)); padding: 0.9rem 1.9rem; /* the skew throws corners ~0.35rem past the layout box — keep them on screen */ margin-inline: 0.35rem; font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.3s var(--ease), color 0.3s var(--ease); border: none; white-space: nowrap; will-change: transform; cursor: pointer; } .btn > span { display: inline-block; transform: skewX(var(--unslant)); } /* Sheen sweep on hover */ .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: rgba(255, 255, 255, 0.35); transform: translateX(-160%); transition: transform 0.55s var(--ease); pointer-events: none; } .btn:hover::after { transform: translateX(400%); } /* Primary — yellow */ .btn-solid { background: var(--yellow); color: var(--head); } .btn-solid:hover { background: var(--yellow-hover); } /* Secondary — teal */ .btn-ghost { background: var(--teal); color: var(--white); } .btn-ghost:hover { background: var(--teal-hover); } .btn-nav { background: var(--teal); color: var(--white); padding: 0.65rem 1.4rem; } .btn-nav:hover { background: var(--teal-hover); } /* ============ Mobile menu ============ */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; align-items: center; gap: 0.7rem; padding: 0.5rem 0; } .menu-toggle-text { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--head); } .menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 5px; } .menu-toggle-bars i { display: block; width: 26px; height: 2px; background: var(--teal); transform: skewX(var(--slant)); transition: transform 0.35s var(--ease), background 0.35s var(--ease); } body.menu-open .menu-toggle-bars i:first-child { transform: skewX(var(--slant)) translateY(3.5px); } body.menu-open .menu-toggle-bars i:last-child { transform: skewX(var(--slant)) translateY(-3.5px); } body.menu-open .menu-toggle-bars i { background: var(--white); } /* Overlay in the brand theme: teal field, white monogram */ .menu-overlay { position: fixed; inset: 0; z-index: 40; background: var(--teal); background-image: linear-gradient(rgba(35, 69, 72, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(35, 69, 72, 0.08) 1px, transparent 1px); background-size: 56px 56px; display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path 0.55s var(--ease); visibility: hidden; overflow: hidden; touch-action: none; overscroll-behavior: contain; } .menu-overlay::before { content: ""; position: absolute; right: -12%; bottom: -6%; width: 78%; height: 46%; background: url("assets/logo.png") no-repeat right bottom / contain; filter: brightness(0) invert(1); opacity: 0.16; pointer-events: none; } body.menu-open .menu-overlay { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible; } .menu-overlay nav { display: flex; flex-direction: column; gap: 0.4rem; position: relative; } .menu-overlay nav a { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 7vw, 2.6rem); text-transform: uppercase; color: var(--white); padding: 0.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: color 0.3s, padding-left 0.3s var(--ease), opacity 0.5s var(--ease), transform 0.5s var(--ease); opacity: 0; transform: translateY(18px); } /* Links cascade in once the wipe lands */ body.menu-open .menu-overlay nav a { opacity: 1; transform: none; } body.menu-open .menu-overlay nav a:nth-child(1) { transition-delay: 0.18s; } body.menu-open .menu-overlay nav a:nth-child(2) { transition-delay: 0.24s; } body.menu-open .menu-overlay nav a:nth-child(3) { transition-delay: 0.3s; } body.menu-open .menu-overlay nav a:nth-child(4) { transition-delay: 0.36s; } body.menu-open .menu-overlay nav a { transition-property: color, padding-left, opacity, transform; } .menu-overlay nav a:hover, .menu-overlay nav a[aria-current="page"] { color: var(--footer); } .menu-overlay nav a:hover { padding-left: 0.6rem; } .menu-overlay-mail { margin-top: 2.5rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.15em; color: var(--white); opacity: 0.9; position: relative; overflow-wrap: anywhere; } .no-js .menu-overlay nav a { opacity: 1; transform: none; } /* ============ Masked reveals ============ */ /* Padding + negative margin gives glyph edges, outline strokes and the skewed rise room to breathe — nothing gets shaved off. */ .mask { display: block; overflow: hidden; padding: 0.12em 0.2em 0.18em; margin: -0.12em -0.2em -0.08em; } .mask .word { display: inline-block; } .reveal-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; } .reveal-line > span { display: block; } /* ============ Hero (home) ============ */ .hero { position: relative; min-height: calc(100vh - 8rem); min-height: calc(100svh - 8rem); display: flex; align-items: center; padding: clamp(4rem, 9vh, 7rem) var(--gutter) clamp(9rem, 16vh, 12rem); background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px); background-size: 56px 56px; overflow: hidden; } .hero-ghost { position: absolute; right: -8vw; top: 50%; width: clamp(340px, 58vw, 980px); transform: translateY(-50%); opacity: 0.1; pointer-events: none; will-change: transform; } .hero-coords { position: absolute; right: calc(var(--gutter) * 0.45); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; color: var(--teal); font-size: 0.6rem; letter-spacing: 0.3em; opacity: 0.85; } .hero-content { position: relative; max-width: 62rem; min-width: 0; } .hero-eyebrow { color: var(--teal); margin-bottom: 2rem; } .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 8.6vw, 7.6rem); line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--head); } .hero h1 em { color: var(--teal); } .word-outline { color: transparent; -webkit-text-stroke: 1.5px var(--teal); } @supports not (-webkit-text-stroke: 1px black) { .word-outline { color: var(--teal); } } .hero-sub { max-width: 34rem; margin-top: 2.4rem; font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--text); } /* Plain rise/fade — no overflow mask, so skewed button corners stay whole */ .hero-ctas { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 1.1rem; } /* Scroll cue — a working button: click it and the page glides down */ .hero-scroll { position: absolute; left: var(--gutter); bottom: clamp(4.5rem, 9vh, 6.5rem); display: flex; align-items: center; gap: 1rem; background: none; border: none; padding: 0; cursor: pointer; color: var(--teal); } .hero-scroll-box { display: grid; place-items: center; width: 2.5rem; height: 3.4rem; border: 1px solid var(--teal); transform: skewX(var(--slant)); overflow: hidden; transition: background 0.3s var(--ease); } .hero-scroll-unskew { display: grid; place-items: center; transform: skewX(var(--unslant)); animation: scroll-drop 1.8s var(--ease) infinite; } /* Downward chevron drawn with borders */ .hero-scroll-arrow { display: block; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } @keyframes scroll-drop { 0% { transform: skewX(var(--unslant)) translateY(-2.1rem); } 55% { transform: skewX(var(--unslant)) translateY(0); } 100% { transform: skewX(var(--unslant)) translateY(2.1rem); } } .hero-scroll-label { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; transition: color 0.3s; } .hero-scroll:hover .hero-scroll-box { background: var(--teal); } .hero-scroll:hover .hero-scroll-box .hero-scroll-arrow { color: var(--white); } .hero-scroll:hover .hero-scroll-label { color: var(--head); } /* ============ Page hero (inner pages) ============ */ .page-hero { position: relative; padding: clamp(4.5rem, 10vh, 8rem) var(--gutter) clamp(4rem, 9vh, 7rem); background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px); background-size: 56px 56px; overflow: hidden; } .page-hero-eyebrow { color: var(--teal); margin-bottom: 1.6rem; } .page-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 9.5vw, 6.8rem); line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--head); } .page-hero h1 em { color: var(--teal); } .page-hero-intro { max-width: 36rem; margin-top: 2rem; font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--text); } /* ============ Marquee seam ============ */ .seam { position: relative; z-index: 5; width: 106vw; margin-left: -3vw; background: var(--teal); transform: rotate(-1.5deg); margin-top: clamp(-3.2rem, -4vw, -2.2rem); margin-bottom: clamp(-3.2rem, -4vw, -2.2rem); overflow: hidden; border-top: 1px solid rgba(35, 69, 72, 0.25); border-bottom: 1px solid rgba(35, 69, 72, 0.25); } .seam-track { display: flex; width: max-content; will-change: transform; } .seam-run { display: flex; align-items: center; padding: 1.05rem 0; flex-shrink: 0; } .seam-run span { font-family: var(--display); font-weight: 700; font-size: clamp(0.85rem, 1.7vw, 1.25rem); text-transform: uppercase; color: var(--white); padding: 0 2.2rem; white-space: nowrap; } .seam-run i { display: block; width: 0.55rem; height: 1.1rem; background: rgba(255, 255, 255, 0.9); transform: skewX(var(--slant)); flex-shrink: 0; } /* ============ Sections — shared ============ */ section { padding: clamp(5.5rem, 12vw, 9.5rem) var(--gutter); } .light { background: var(--white); color: var(--text); } /* Alternate sections */ .expertise, #method, .connect { background: var(--alt); } .dark { background: var(--footer); color: rgba(255, 255, 255, 0.85); background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 56px 56px; } .sec-head { position: relative; display: flex; align-items: baseline; gap: 1.6rem; margin-bottom: clamp(3rem, 6vw, 5rem); padding-bottom: 1.3rem; } .sec-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--card-border); transform-origin: left; } .dark .sec-rule { background: var(--white-line); } .sec-index { color: var(--teal); position: relative; padding-left: 1.3rem; } .dark .sec-index { color: var(--yellow); } .sec-index::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.5rem; height: 1em; transform: translateY(-52%) skewX(var(--slant)); background: currentColor; } .sec-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 2.6vw, 1.9rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--teal-deep); } .dark .sec-title { color: var(--white); } .sec-link { margin-left: auto; font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); white-space: nowrap; transition: color 0.3s; } .sec-link:hover { color: var(--head); } .dark .sec-link { color: rgba(255, 255, 255, 0.75); } .dark .sec-link:hover { color: var(--white); } /* ============ Why we exist ============ */ .why { position: relative; } /* The slant axis, drawn through the cascade on scroll */ .why-axis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .why-axis line { stroke: var(--teal); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; } .no-js .why-axis line { stroke-dashoffset: 0; } .props { position: relative; display: flex; flex-direction: column; gap: clamp(2.2rem, 5vw, 3.6rem); } .prop { position: relative; max-width: 46rem; padding-left: 2.4rem; } /* The diagonal cascade — each statement steps along the slant axis */ .prop:nth-child(2) { margin-left: clamp(0rem, 12vw, 11rem); } .prop:nth-child(3) { margin-left: clamp(0rem, 24vw, 22rem); } .prop-tick { position: absolute; left: 0; top: 0.45em; width: 0.7rem; height: 1.5rem; background: var(--teal); transform: skewX(var(--slant)); transform-origin: top; } .prop p { font-weight: 300; font-size: clamp(1.35rem, 3.3vw, 2.4rem); line-height: 1.28; letter-spacing: -0.015em; color: var(--head); } /* ============ Service index (home) ============ */ .svc-list { border-bottom: 1px solid var(--card-border); } .svc { border-top: 1px solid var(--card-border); } .svc a { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 3rem; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.3rem, 2.6vw, 1.9rem) 0.5rem; overflow: hidden; } /* Hover shear — the dark teal panel slides in on the slant */ .svc a::before { content: ""; position: absolute; inset: 0 -6%; background: var(--footer); transform: skewX(var(--slant)) scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease); } .svc a:hover::before, .svc a:focus-visible::before { transform: skewX(var(--slant)) scaleX(1); } .svc a > * { position: relative; transition: color 0.35s var(--ease), transform 0.35s var(--ease); } .svc-num { color: var(--teal); } .svc-name { font-family: var(--display); font-weight: 700; font-size: clamp(0.95rem, 2.3vw, 1.55rem); text-transform: uppercase; color: var(--head); } .svc-arrow { font-size: 1.3rem; color: var(--teal); justify-self: end; } .svc a:hover .svc-name, .svc a:focus-visible .svc-name { color: var(--white); } .svc a:hover .svc-num, .svc a:focus-visible .svc-num { color: var(--yellow); } .svc a:hover .svc-arrow, .svc a:focus-visible .svc-arrow { color: var(--yellow); transform: translate(0.3rem, -0.3rem); } /* ============ Service details (services page) ============ */ .details { border-bottom: 1px solid var(--card-border); } .detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(2.4rem, 5vw, 3.6rem) 0; border-top: 1px solid var(--card-border); } .detail-head { display: flex; align-items: baseline; gap: 1.2rem; } .detail-num { color: var(--teal); position: relative; padding-left: 1.2rem; } .detail-num::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.45rem; height: 0.95em; transform: translateY(-52%) skewX(var(--slant)); background: var(--teal); } .detail h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.7rem); text-transform: uppercase; color: var(--teal-deep); } .detail-body p { font-weight: 300; font-size: 1rem; color: var(--text); max-width: 40rem; } .chips { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; } .chips li { transform: skewX(var(--slant)); background: var(--white); border: 1px solid var(--input-border); padding: 0.45rem 1rem; margin-inline: 0.2rem; font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); } .chips li > span { display: inline-block; transform: skewX(var(--unslant)); } /* ============ Approach / pillars ============ */ .manifesto { max-width: 52rem; margin-bottom: clamp(3.5rem, 7vw, 6rem); } .manifesto p { font-weight: 300; font-size: clamp(1.45rem, 3.4vw, 2.5rem); line-height: 1.32; letter-spacing: -0.015em; color: var(--white); } /* Underline draws in when the quote enters the viewport */ .manifesto em { color: var(--yellow); background: linear-gradient(var(--yellow), var(--yellow)) left bottom / 0% 1px no-repeat; padding-bottom: 3px; transition: background-size 0.9s var(--ease); } .manifesto.lit em { background-size: 100% 1px; } .manifesto.lit em:last-of-type { transition-delay: 0.35s; } .no-js .manifesto em { background-size: 100% 1px; } .manifesto footer { margin-top: 1.8rem; color: rgba(255, 255, 255, 0.7); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; font-family: var(--mono); } .manifesto-cta { margin-top: 2.4rem; } /* Pillars — white cards per the palette spec */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .pillar { background: var(--white); border: 1px solid var(--card-border); box-shadow: 0 8px 24px var(--card-shadow); padding: clamp(1.6rem, 3vw, 2.4rem); position: relative; transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .pillar:hover { border-color: var(--teal); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12); } .pillar-num { position: absolute; top: clamp(1.6rem, 3vw, 2.4rem); right: clamp(1.6rem, 3vw, 2.4rem); color: var(--teal); opacity: 0.7; font-size: 0.62rem; } .pillar-tick { display: block; width: 0.7rem; height: 1.4rem; background: var(--teal); transform: skewX(var(--slant)); margin-bottom: 1.4rem; transition: transform 0.35s var(--ease); } .pillar:hover .pillar-tick { transform: skewX(var(--slant)) translateY(-0.2rem); } .pillar h3 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.7rem; color: var(--head); } .pillar p { font-weight: 300; font-size: 0.9rem; color: var(--text); } /* ============ Method steps (about page) — cards ============ */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .step { position: relative; background: var(--white); border: 1px solid var(--card-border); box-shadow: 0 8px 24px var(--card-shadow); padding: 1.8rem 1.6rem 1.6rem; transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .step:hover { border-color: var(--teal); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12); } .step::before { content: ""; position: absolute; top: 0; left: 1.6rem; width: 2.2rem; height: 3px; background: var(--yellow); transform: skewX(var(--slant)); } .step-num { color: var(--teal); font-size: 0.62rem; display: block; margin-bottom: 0.8rem; } .step h3 { font-family: var(--display); font-weight: 700; font-size: clamp(0.9rem, 1.6vw, 1.1rem); text-transform: uppercase; margin-bottom: 0.7rem; color: var(--teal-deep); } .step p { font-weight: 300; font-size: 0.9rem; color: var(--text); } /* ============ CTA band ============ */ .cta-band { position: relative; background: var(--footer); color: var(--white); background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 56px 56px; border-top: 1px solid var(--white-line); padding: clamp(5rem, 9vw, 7.5rem) var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; } /* Slanted yellow mark opens the band — the slash motif, not a wedge gap */ .cta-band::before { content: ""; width: 4.5rem; height: 4px; background: var(--yellow); transform: skewX(var(--slant)); } .cta-band h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 4.6vw, 3.2rem); line-height: 1.15; text-transform: uppercase; max-width: 20ch; color: var(--white); } .cta-band h2 em { color: var(--yellow); } .cta-band .connect-offer { margin-top: -0.4rem; color: var(--yellow); } .cta-band .connect-offer .tick { background: var(--yellow); } /* ============ Connect (contact page) ============ */ .connect { position: relative; background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px); background-size: 56px 56px; overflow: hidden; } .connect-ghost { position: absolute; right: -6vw; bottom: -4vw; width: clamp(280px, 46vw, 760px); opacity: 0.08; pointer-events: none; will-change: transform; } .connect > *:not(.connect-ghost) { position: relative; } .connect-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .connect-mail { display: inline-block; font-weight: 300; font-size: clamp(1.05rem, 2.6vw, 1.6rem); letter-spacing: -0.01em; color: var(--head); position: relative; margin-bottom: 2rem; word-break: break-all; } .connect-mail::after { content: ""; position: absolute; left: 0; bottom: -0.25em; width: 100%; height: 1px; background: var(--teal); transform: skewX(var(--slant)) scaleX(0.35); transform-origin: left; transition: transform 0.4s var(--ease); } .connect-mail:hover::after { transform: skewX(var(--slant)) scaleX(1); } .connect-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; } .connect-offer { color: var(--teal); font-family: var(--mono); font-weight: 500; text-transform: uppercase; font-size: 0.64rem; letter-spacing: 0.22em; } .connect-offer .tick { margin-left: 0; } .connect-socials { display: flex; flex-direction: column; } .connect-socials a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0.2rem; border-top: 1px solid var(--input-border); color: var(--text); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; transition: color 0.3s, padding-left 0.3s var(--ease); } .connect-socials li:last-child a { border-bottom: 1px solid var(--input-border); } .connect-socials a span { color: var(--teal); transition: transform 0.3s var(--ease); } .connect-socials a:hover { color: var(--head); padding-left: 0.7rem; } .connect-socials a:hover span { transform: translate(0.25rem, -0.25rem); } .connect-loc { margin-top: 2.2rem; color: var(--teal); font-size: 0.6rem; letter-spacing: 0.28em; opacity: 0.9; } /* ============ Contact form — white card ============ */ .form { display: flex; flex-direction: column; gap: 1.8rem; max-width: 34rem; background: var(--white); border: 1px solid var(--card-border); box-shadow: 0 8px 24px var(--card-shadow); padding: clamp(1.6rem, 4vw, 2.6rem); } .field { display: flex; flex-direction: column; gap: 0.5rem; } .field label { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal); } .field input, .field textarea { background: var(--white); border: 1px solid var(--input-border); padding: 0.65rem 0.8rem; font-weight: 300; font-size: 1rem; color: var(--head); border-radius: 0; transition: border-color 0.3s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); } .field textarea { resize: vertical; min-height: 7.5rem; } .form .btn { align-self: flex-start; margin-top: 0.4rem; } .form-note { font-size: 0.8rem; font-weight: 300; color: var(--muted); transition: color 0.3s; } .form-note.ok { color: var(--success); } /* ============ Footer ============ */ .footer { position: relative; overflow: hidden; background: var(--footer); color: rgba(255, 255, 255, 0.8); padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) 2rem; } /* Ghost monogram watermark */ .footer::before { content: ""; position: absolute; right: -6%; bottom: -12%; width: 46%; height: 70%; background: url("assets/logo.png") no-repeat right bottom / contain; filter: brightness(0) invert(1); opacity: 0.05; pointer-events: none; } .footer-top, .footer-bottom { position: relative; } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 3.5rem; } .footer-brand img { width: 110px; filter: brightness(0) invert(1); opacity: 0.95; margin-bottom: 1.2rem; } .footer-brand p { font-weight: 300; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); } .footer-nav { display: flex; gap: 2rem; flex-wrap: wrap; } .footer-nav a { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); transition: color 0.3s; } .footer-nav a:hover, .footer-nav a[aria-current="page"] { color: var(--yellow); } .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--white-line); padding-top: 1.4rem; color: rgba(255, 255, 255, 0.5); font-size: 0.6rem; letter-spacing: 0.2em; } /* ============ Reveal states (JS adds motion) ============ */ .js .reveal { opacity: 0; transform: translateY(2.2rem); } .js .reveal-line > span { transform: translateY(130%); } .js .mask .word { transform: translateY(130%) skewY(4deg); } /* ============ Responsive ============ */ @media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .connect-grid { grid-template-columns: 1fr; } .detail { grid-template-columns: 1fr; gap: 1.2rem; } } @media (max-width: 720px) { .nav-links, .btn-nav { display: none; } .menu-toggle { display: inline-flex; } .pillars { grid-template-columns: 1fr; } .prop:nth-child(2), .prop:nth-child(3) { margin-left: 0; } .why-axis { display: none; } .hero-coords { display: none; } .hero-ghost { right: -30vw; opacity: 0.07; } .hero { min-height: calc(100vh - 10rem); min-height: calc(100svh - 10rem); } .footer-top { flex-direction: column; } .rail { width: 2px; } .sec-head { flex-wrap: wrap; row-gap: 0.6rem; } .sec-link { margin-left: 0; flex-basis: 100%; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } } @media (max-width: 400px) { .btn { padding: 0.8rem 1.2rem; font-size: 0.6rem; letter-spacing: 0.14em; } .announce-run span { font-size: 0.56rem; letter-spacing: 0.2em; } .svc a { grid-template-columns: 2.2rem minmax(0, 1fr) 2rem; } .svc-name { font-size: 0.82rem; } .detail-head { flex-wrap: wrap; gap: 0.8rem; } } /* Ultra-narrow screens: long button labels wrap instead of overflowing */ @media (max-width: 320px) { .btn { white-space: normal; text-align: center; line-height: 1.7; } } /* Short viewports: keep the hero compact so nothing collides */ @media (max-height: 760px) { .hero { min-height: 0; } .hero-eyebrow { margin-bottom: 1.2rem; } .hero-sub { margin-top: 1.6rem; } .hero-ctas { margin-top: 2rem; } } /* 404 page */ .notfound { min-height: calc(100vh - 14rem); min-height: calc(100svh - 14rem); display: flex; flex-direction: column; justify-content: center; } .notfound .hero-ctas { margin-top: 2.4rem; } /* ============ Reduced motion ============ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body::after { animation: none; } .rail { display: none; } .cursor { display: none; } .page-wipe { display: none; } .announce-track { width: 100%; justify-content: center; } .announce-run { flex-wrap: wrap; justify-content: center; row-gap: 0.3rem; } .announce-run span { white-space: normal; text-align: center; } .why-axis line { stroke-dashoffset: 0; } .manifesto em { background-size: 100% 1px; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .js .reveal, .js .reveal-line > span, .js .mask .word { opacity: 1; transform: none; } }