/* ============================================================ sections.css — per-section layout & cinematic visual treatment Order follows the page narrative: hero → work → services → studio → industries → trust → contact → footer ============================================================ */ /* ---- Shared scroll-reveal initial state is set in JS (GSAP), so no-JS / reduced-motion users see fully rendered content. --- */ /* ========================================================= HERO ========================================================= */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 2rem); padding-bottom: var(--sp-8); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__bg-inner { position: absolute; inset: -2%; will-change: transform; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--glow), radial-gradient( 80% 60% at 50% 120%, color-mix(in srgb, var(--bg-elev) 90%, transparent), transparent 70% ); } .hero__inner { position: relative; z-index: 1; display: block; width: 100%; } .hero__content { max-width: 60rem; margin-inline: auto; text-align: center; } .hero__eyebrow { margin-bottom: var(--sp-5); } .hero__title { font-size: var(--fs-display-1); margin-bottom: var(--sp-5); } /* Line-by-line reveal masking */ .hero__title .line { display: block; overflow: hidden; } .hero__title .line__inner { display: block; } .hero__lead { font-size: var(--fs-lead); color: #c6bfb1; max-width: 42ch; margin-inline: auto; margin-bottom: var(--sp-6); } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4); } /* --- Hero entrance: pure CSS, so it plays instantly at first paint with no loader and no flash, and self-completes even if JS or the GSAP CDN fails. Armed by the .anim class the sets pre-paint (only when reduced-motion is not requested). --- */ html.anim .hero__eyebrow, html.anim .hero__lead, html.anim .hero__actions { opacity: 0; animation: hero-rise 0.85s var(--ease-out) forwards; } html.anim .hero__title .line__inner { transform: translateY(115%); animation: hero-line 0.9s var(--ease-out) forwards; } html.anim .hero__eyebrow { animation-delay: 0.05s; } html.anim .hero__title .line:nth-child(1) .line__inner { animation-delay: 0.12s; } html.anim .hero__title .line:nth-child(2) .line__inner { animation-delay: 0.22s; } html.anim .hero__title .line:nth-child(3) .line__inner { animation-delay: 0.32s; } html.anim .hero__lead { animation-delay: 0.42s; } html.anim .hero__actions { animation-delay: 0.52s; } @keyframes hero-rise { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } } @keyframes hero-line { from { transform: translateY(115%); } to { transform: translateY(0); } } /* Safety net: if motion is reduced, never leave hero content hidden. */ @media (prefers-reduced-motion: reduce) { html.anim .hero__eyebrow, html.anim .hero__lead, html.anim .hero__actions, html.anim .hero__title .line__inner { opacity: 1; transform: none; animation: none; } } .hero__scroll { position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--sp-5); z-index: 1; display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); } .hero__scroll i { display: block; width: 1px; height: 2.5rem; background: linear-gradient(var(--text-mute), transparent); animation: scrollpulse 2.4s var(--ease-in-out) infinite; } @keyframes scrollpulse { 0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } } /* --- Hero background visual: a code photo dissolving into the dark --- */ .hero__code { position: absolute; top: 0; bottom: 0; right: 0; width: min(52vw, 44rem); pointer-events: none; /* Fade the whole visual into the black toward the headline (left). */ -webkit-mask-image: linear-gradient( 100deg, transparent 0%, rgba(0, 0, 0, 0.35) 28%, #000 62% ); mask-image: linear-gradient( 100deg, transparent 0%, rgba(0, 0, 0, 0.35) 28%, #000 62% ); } .hero__code-inner { position: absolute; inset: 0; will-change: transform; } /* The code photo — blended into the darkness with `screen` so the black areas of the shot dissolve into the page and only the lit screen glows. Height bleeds past the container so hero parallax never exposes a gap. */ .hero__code-img { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; object-position: 60% center; opacity: 0.8; filter: brightness(0.9) contrast(1.05) saturate(0.95); mix-blend-mode: screen; } /* ========================================================= SELECTED WORK ========================================================= */ .work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 0.5rem + 2vw, 2.25rem); } .project { position: relative; display: flex; flex-direction: column; gap: var(--sp-5); } /* Flagship spans full width with media + copy side by side */ .project--flagship { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem); padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--r-xl); background: color-mix(in srgb, var(--surface) 55%, transparent); } .project__media { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); aspect-ratio: 16 / 9; } .project--flagship .project__media { aspect-ratio: 16 / 9; } .project__cover { position: absolute; inset: 0; transition: transform 0.7s var(--ease-out); will-change: transform; } .project__media:hover .project__cover { transform: scale(1.05); } .project__cover img { width: 100%; height: 100%; object-fit: contain; background: var(--bg); } /* Generated cover composition (used when no real image is provided) */ .cover-canvas { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; background: linear-gradient( 160deg, color-mix(in srgb, var(--proj-accent, var(--accent)) 30%, var(--bg-elev)), var(--bg-elev) 65% ); } .cover-canvas::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.7; mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 75%); } .cover-canvas__silhouette { position: absolute; inset: auto 0 0 0; height: 55%; display: flex; align-items: flex-end; gap: 6px; padding: 0 12%; opacity: 0.55; } .cover-canvas__silhouette i { flex: 1; background: linear-gradient( var(--text-strong), color-mix(in srgb, var(--text-strong) 20%, transparent) ); border-radius: 3px 3px 0 0; opacity: 0.18; } .cover-canvas__silhouette i:nth-child(2) { height: 74%; } .cover-canvas__silhouette i:nth-child(1) { height: 48%; } .cover-canvas__silhouette i:nth-child(3) { height: 92%; } .cover-canvas__silhouette i:nth-child(4) { height: 60%; } .cover-canvas__silhouette i:nth-child(5) { height: 80%; } .cover-canvas__silhouette i:nth-child(6) { height: 40%; } .cover-canvas__label { position: relative; font-family: var(--font-display); font-size: clamp(1.2rem, 0.8rem + 1.5vw, 1.9rem); color: var(--text-strong); letter-spacing: -0.02em; } .cover-canvas__label span { display: block; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; margin-top: 0.35em; } /* Placeholder cover — clearly an available slot, not fake work */ .cover-canvas--empty { background: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--text) 3%, transparent) 0 12px, transparent 12px 24px ), var(--surface); align-items: center; justify-content: center; text-align: center; } .cover-canvas--empty .cover-plus { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: #ffffff; margin-bottom: 0.9rem; } /* Badge on media */ .project__badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 0.9em; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.02em; background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); color: var(--text); } .project__badge i { width: 6px; height: 6px; border-radius: 50%; background: #4ccf8f; box-shadow: 0 0 0 3px color-mix(in srgb, #4ccf8f 25%, transparent); } .project__badge--soon { color: #ffffff; } .project__badge--soon i { background: var(--text-mute); box-shadow: none; } .project__body { display: flex; flex-direction: column; gap: var(--sp-3); } .project__top { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; } .project__index { color: var(--accent-text); } .project__top .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-mute); } .project__name { font-size: var(--fs-h3); } .project--flagship .project__name { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); } .project__desc { color: #ffffff; max-width: 46ch; } .project__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-1); } .project__meta-block span { display: block; font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 0.3em; } .project__meta-block p { font-size: var(--fs-sm); color: var(--text); } .project__link { margin-top: var(--sp-2); } .project__link--muted { color: var(--text-mute); pointer-events: none; } /* ========================================================= SERVICES ========================================================= */ .services__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 0.7rem + 1vw, 1.5rem); } .service { position: relative; grid-column: span 2; display: flex; min-height: clamp(10rem, 8rem + 5vw, 13rem); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); flex-direction: column; align-items: center; justify-content: center; gap: 1.15rem; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 0.45rem; background: color-mix(in srgb, var(--surface) 30%, transparent); text-align: center; transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out); } .service:nth-child(4) { grid-column: 2 / span 2; } .service:nth-child(5) { grid-column: 4 / span 2; } .service:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 48%, var(--border-strong)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .service__icon { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border-radius: 50%; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); transition: transform var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out); } .service__icon svg { width: 1.55rem; height: 1.55rem; } .service:hover .service__icon { transform: scale(1.08); background: color-mix(in srgb, var(--accent) 22%, transparent); } .service__main { display: block; } .service__title { font-family: var(--font-ui); font-size: clamp(1.08rem, 0.95rem + 0.45vw, 1.4rem); font-weight: 650; color: var(--text-strong); letter-spacing: -0.01em; } /* ========================================================= STUDIO / DIFFERENTIATOR (editorial statement) ========================================================= */ .studio { border-top: 1px solid var(--border); } .studio__layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; } .studio__aside { position: sticky; top: calc(var(--nav-h) + 2rem); display: flex; flex-direction: column; gap: var(--sp-4); } .studio__statement { font-size: clamp(1.7rem, 1rem + 3vw, 3.2rem); max-width: 18ch; } .studio__statement .muted-line, .studio__statement .accent-italic { color: var(--text-strong); } .diffs { position: relative; padding-left: var(--sp-6); } .diff { position: relative; padding-block: clamp(1.3rem, 0.8rem + 1.4vw, 2.4rem); border-bottom: 1px solid var(--border); } .diff:last-child { border-bottom: none; } .diff__num { font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 0.3em; } .diff__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-strong); margin-bottom: var(--sp-3); } .diff__desc { font-size: var(--fs-sm); color: #ffffff; max-width: 56ch; } /* Vertical scroll-progress line down the differentiators. The fill scrubs top→bottom with scroll (see initDiffs) and each item's node dot lights up as it becomes the active step. */ .diffs__track { position: absolute; left: 0; top: 0.6em; bottom: 0.6em; width: 1px; background: var(--border); } .diffs__progress { position: absolute; left: 0; top: 0.6em; bottom: 0.6em; width: 1px; transform-origin: top; pointer-events: none; } .diffs__progress i { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; } .diff::before { content: ""; position: absolute; left: calc(-1 * var(--sp-6) - 0.5px); top: calc(0.6em + 0.5rem); width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-strong); transform: translateX(-4px); transition: background-color var(--t-med), border-color var(--t-med); } .diff.is-active::before { background: var(--accent); border-color: var(--accent); } /* ========================================================= INDUSTRIES ========================================================= */ .industries__grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); } .industry { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.8em 1.3em; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text); transition: border-color var(--t-med), color var(--t-med), background-color var(--t-med); } .industry::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.7; } .industry:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--text) 4%, transparent); } .industry--flex { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } /* ========================================================= TRUST (tasteful testimonial placeholder — no fake quotes) ========================================================= */ .trust__panel { border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(2rem, 1rem + 4vw, 4.5rem); background: color-mix(in srgb, var(--surface) 45%, transparent); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; } .trust__quote { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem); line-height: 1.24; color: #ffffff; letter-spacing: -0.01em; } .trust__quote .mark { color: #ffffff; } .trust__slots { display: flex; flex-direction: column; gap: var(--sp-3); } .trust__slot { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-mute); font-size: var(--fs-sm); } .trust__slot i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; color: #ffffff; } /* ========================================================= CONTACT ========================================================= */ .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; } .contact__channels { display: flex; flex-direction: column; gap: var(--sp-4); } .contact__wa { display: flex; align-items: center; gap: var(--sp-5); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--border); border-radius: var(--r-xl); background: color-mix(in srgb, var(--surface) 50%, transparent); transition: border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); } .contact__wa:hover { border-color: var(--border-strong); transform: translateY(-3px); } .contact__wa-icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, #25d366 18%, transparent); color: #25d366; } .contact__wa-icon svg { width: 1.7rem; height: 1.7rem; } .contact__ig-icon { background: color-mix(in srgb, #e1306c 18%, transparent); color: #e1306c; } .contact__wa-text span { display: block; font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 0.3em; } .contact__wa-text b { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); font-weight: 400; color: var(--text-strong); letter-spacing: 0.01em; } .contact__reach { display: flex; flex-direction: column; gap: var(--sp-4); } .contact__reach-item { display: flex; flex-direction: column; gap: 0.25em; padding-block: var(--sp-3); border-bottom: 1px solid var(--border); } .contact__reach-item span { font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); } .contact__reach-item p { color: var(--text); } /* ========================================================= FOOTER ========================================================= */ .footer { border-top: 1px solid var(--border); padding-block: var(--sp-8) var(--sp-6); } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border); } .footer__brand .brand { font-size: 1.35rem; margin-bottom: var(--sp-4); } .footer__tagline { color: #ffffff; max-width: 34ch; } .footer__col h4 { font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-strong); margin-bottom: var(--sp-4); } .footer__nav { display: flex; flex-direction: column; gap: var(--sp-3); } .footer__nav a { color: var(--text-strong); font-size: var(--fs-sm); transition: color var(--t-fast) var(--ease-out); width: fit-content; } .footer__nav a:hover { color: var(--text); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-5); font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--text-mute); letter-spacing: 0.02em; } .footer__bottom a { color: #ffffff; } .footer__bottom a:hover { color: var(--text); } .to-top { display: inline-flex; align-items: center; gap: 0.5em; }