/* ============================================================= PEPTARA LABS MEDIA — Design System Peptara Labs LLC · Creative & Marketing for the Longevity Economy Original design. Dark editorial / premium. ============================================================= */ /* ---------- Fonts ---------- */ /* Fraunces (display serif) + Inter (UI/body) loaded in */ /* ---------- Tokens ---------- */ :root{ --bg: #0A0A0B; --bg-2: #0E0E10; --surface: #141417; --surface-2: #1A1A1E; --surface-3: #212127; --line: rgba(244,241,234,0.10); --line-strong: rgba(244,241,234,0.18); --ivory: #F4F1EA; --ivory-dim: #C9C5BA; --muted: #8B877C; --muted-2: #6A675E; --accent: #C8F24C; /* luminous lime — vitality */ --accent-deep: #A7D42E; --accent-soft: rgba(200,242,76,0.12); --accent-glow: rgba(200,242,76,0.35); --mint: #7CE0B3; --radius: 18px; --radius-lg: 26px; --radius-pill: 999px; --maxw: 1280px; --gutter: clamp(20px, 5vw, 64px); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur: 0.7s; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --shadow-soft: 0 24px 60px -24px rgba(0,0,0,0.7); --shadow-card: 0 30px 80px -40px rgba(0,0,0,0.9); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } /* NOTE: scroll-behavior:smooth is intentionally NOT set — it fights ScrollTrigger pinning. Anchor scrolling is handled in JS via window.scrollTo({behavior:'smooth'}). */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } } body{ margin:0; background:var(--bg); color:var(--ivory); font-family:var(--font-body); font-size:clamp(15px, 1.05vw, 17px); line-height:1.65; font-weight:400; letter-spacing:0.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:var(--accent); color:#0A0A0B; } /* ---------- Layout ---------- */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ position:relative; padding-block:clamp(72px, 11vw, 160px); } .section--tight{ padding-block:clamp(48px, 7vw, 96px); } .grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Typography ---------- */ .display{ font-family:var(--font-display); font-weight:340; font-optical-sizing:auto; line-height:0.98; letter-spacing:-0.02em; margin:0; } h1.display{ font-size:clamp(2.9rem, 8.4vw, 7.2rem); } h2.display{ font-size:clamp(2.2rem, 5.4vw, 4.6rem); } h3.display{ font-size:clamp(1.6rem, 3vw, 2.6rem); } .italic{ font-style:italic; } .accent-text{ color:var(--accent); } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:0.72rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); display:inline-block; } .lead{ font-size:clamp(1.1rem, 1.6vw, 1.35rem); color:var(--ivory-dim); line-height:1.55; max-width:60ch; } .muted{ color:var(--muted); } /* ---------- Buttons ---------- */ .btn{ --pad-y:16px; --pad-x:30px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:var(--pad-y) var(--pad-x); border-radius:var(--radius-pill); font-size:0.86rem; font-weight:600; letter-spacing:0.04em; border:1px solid transparent; overflow:hidden; transition:transform .5s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); will-change:transform; } .btn svg{ width:16px; height:16px; transition:transform .5s var(--ease); } .btn--primary{ background:var(--accent); color:#0A0A0B; } .btn--primary:hover{ background:#d7fa64; } .btn--primary:hover svg{ transform:translate(3px,-3px); } .btn--ghost{ background:transparent; color:var(--ivory); border-color:var(--line-strong); } .btn--ghost:hover{ border-color:var(--accent); color:var(--accent); } .btn--block{ width:100%; } .btn:active{ transform:scale(0.97); } /* ---------- Nav ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px var(--gutter); transition:transform .5s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease); border-bottom:1px solid transparent; } .nav--scrolled{ background:rgba(10,10,11,0.72); backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:var(--line); padding-block:12px; } .nav--hidden{ transform:translateY(-104%); } .brand{ display:flex; align-items:center; gap:12px; z-index:2; } .brand__mark{ width:34px; height:34px; flex:none; } .brand__text{ display:flex; flex-direction:column; line-height:1; } .brand__name{ font-family:var(--font-display); font-size:1.12rem; letter-spacing:-0.01em; font-weight:500; } .brand__sub{ font-size:0.58rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); margin-top:4px; } .nav__links{ display:flex; align-items:center; gap:34px; } .nav__link{ position:relative; font-size:0.86rem; font-weight:500; color:var(--ivory-dim); letter-spacing:0.02em; transition:color .3s var(--ease); } .nav__link::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--accent); transition:width .4s var(--ease); } .nav__link:hover{ color:var(--ivory); } .nav__link:hover::after{ width:100%; } .nav__cta{ margin-left:6px; } .nav__toggle{ display:none; width:44px; height:44px; border:1px solid var(--line-strong); border-radius:12px; background:transparent; position:relative; z-index:2; } .nav__toggle span{ position:absolute; left:11px; right:11px; height:1.5px; background:var(--ivory); transition:transform .4s var(--ease), opacity .3s var(--ease); } .nav__toggle span:nth-child(1){ top:16px; } .nav__toggle span:nth-child(2){ bottom:16px; } body.menu-open .nav__toggle span:nth-child(1){ transform:translateY(5px) rotate(45deg); } body.menu-open .nav__toggle span:nth-child(2){ transform:translateY(-5px) rotate(-45deg); } /* Mobile menu */ .mobile-menu{ position:fixed; inset:0; z-index:90; background:var(--bg-2); display:flex; flex-direction:column; justify-content:center; gap:6px; padding:var(--gutter); clip-path:circle(0% at 100% 0); transition:clip-path .7s var(--ease); pointer-events:none; } body.menu-open .mobile-menu{ clip-path:circle(150% at 100% 0); pointer-events:auto; } .mobile-menu a{ font-family:var(--font-display); font-size:clamp(2rem,9vw,3.4rem); font-weight:340; color:var(--ivory); padding-block:6px; opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s; } body.menu-open .mobile-menu a{ opacity:1; transform:none; } body.menu-open .mobile-menu a:nth-child(1){ transition-delay:.15s; } body.menu-open .mobile-menu a:nth-child(2){ transition-delay:.20s; } body.menu-open .mobile-menu a:nth-child(3){ transition-delay:.25s; } body.menu-open .mobile-menu a:nth-child(4){ transition-delay:.30s; } body.menu-open .mobile-menu a:nth-child(5){ transition-delay:.35s; } body.menu-open .mobile-menu a:nth-child(6){ transition-delay:.40s; } .mobile-menu a:hover{ color:var(--accent); } .mobile-menu__foot{ margin-top:40px; font-size:0.8rem; color:var(--muted); } .mobile-menu__foot a{ font-family:var(--font-body); font-size:0.9rem; color:var(--accent); } /* ---------- Hero ---------- */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:120px; overflow:hidden; } .hero__orbs{ position:absolute; inset:0; z-index:0; pointer-events:none; } .orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:0.5; } .orb--1{ width:52vw; height:52vw; background:radial-gradient(circle, rgba(200,242,76,0.28), transparent 65%); top:-16%; right:-10%; animation:float1 18s var(--ease-in-out) infinite; } .orb--2{ width:40vw; height:40vw; background:radial-gradient(circle, rgba(124,224,179,0.18), transparent 65%); bottom:-18%; left:-8%; animation:float2 22s var(--ease-in-out) infinite; } .orb--3{ width:28vw; height:28vw; background:radial-gradient(circle, rgba(200,242,76,0.14), transparent 60%); top:40%; left:35%; animation:float1 26s var(--ease-in-out) infinite reverse; } @keyframes float1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-4%,6%) scale(1.08); } } @keyframes float2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(5%,-5%) scale(1.12); } } .hero__inner{ position:relative; z-index:2; width:100%; } .hero__badge{ margin-bottom:30px; } .hero h1{ margin-bottom:34px; max-width:16ch; } .hero__word{ display:inline-block; overflow:hidden; vertical-align:top; } .hero__word > span{ display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease); } .hero.is-in .hero__word > span{ transform:translateY(0); } .hero__bottom{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:36px; margin-top:20px; } .hero__cta-row{ display:flex; flex-wrap:wrap; gap:14px; } .hero__note{ max-width:34ch; font-size:0.92rem; color:var(--muted); border-left:1px solid var(--line-strong); padding-left:18px; } .hero__note strong{ color:var(--ivory-dim); font-weight:600; } .scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:0.62rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); } .scroll-cue__line{ width:1px; height:46px; background:linear-gradient(var(--accent), transparent); position:relative; overflow:hidden; } .scroll-cue__line::after{ content:""; position:absolute; top:-50%; left:0; width:1px; height:50%; background:var(--accent); animation:cue 2.2s var(--ease-in-out) infinite; } @keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} } /* ---------- Marquee ---------- */ .marquee{ border-block:1px solid var(--line); padding-block:22px; overflow:hidden; background:var(--bg-2); } .marquee__track{ display:flex; gap:56px; width:max-content; animation:scroll 34s linear infinite; } .marquee:hover .marquee__track{ animation-play-state:paused; } .marquee__item{ display:inline-flex; align-items:center; gap:56px; font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,2.1rem); font-weight:340; color:var(--ivory-dim); white-space:nowrap; } .marquee__item::after{ content:"✦"; color:var(--accent); font-size:0.7em; } @keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } /* ---------- Section header ---------- */ .sec-head{ display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:clamp(44px,6vw,80px); } .sec-head__top{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; } .sec-head h2{ max-width:20ch; } .sec-head p{ max-width:46ch; } .index-tag{ font-family:var(--font-body); font-size:0.72rem; letter-spacing:0.2em; color:var(--muted-2); text-transform:uppercase; } /* ---------- Services ---------- */ .services{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; } .service{ position:relative; background:var(--bg); padding:clamp(28px,3.4vw,48px); min-height:340px; display:flex; flex-direction:column; overflow:hidden; transition:background .5s var(--ease); } .service::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 45%); opacity:0; transition:opacity .5s var(--ease); pointer-events:none; } .service:hover{ background:var(--surface); } .service:hover::before{ opacity:1; } .service__num{ font-family:var(--font-display); font-size:0.95rem; color:var(--accent); margin-bottom:auto; } .service__icon{ width:42px; height:42px; color:var(--accent); margin-bottom:22px; } .service__body{ margin-top:20px; } .service h3{ font-family:var(--font-display); font-size:clamp(1.35rem,2.1vw,1.75rem); font-weight:400; margin:0 0 12px; letter-spacing:-0.01em; } .service p{ color:var(--muted); font-size:0.95rem; margin:0 0 20px; max-width:42ch; } .service__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; } .tag{ font-size:0.72rem; letter-spacing:0.04em; color:var(--ivory-dim); border:1px solid var(--line); border-radius:var(--radius-pill); padding:5px 12px; } /* ---------- Work / capabilities ---------- */ .work-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; } .work-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:360px; border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(24px,3vw,40px); isolation:isolate; transition:transform .6s var(--ease), border-color .5s var(--ease); } .work-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); } .work-card__bg{ position:absolute; inset:0; z-index:-1; opacity:0.9; transition:transform .9s var(--ease); } .work-card:hover .work-card__bg{ transform:scale(1.06); } .work-card__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 20%, rgba(10,10,11,0.55) 60%, rgba(10,10,11,0.92)); } .wc-a{ background:linear-gradient(140deg,#16321f,#0c1a12 70%); } .wc-b{ background:linear-gradient(140deg,#2a2c14,#14150a 70%); } .wc-c{ background:linear-gradient(140deg,#122a2a,#0a1414 70%); } .wc-d{ background:linear-gradient(140deg,#241a2e,#120d18 70%); } .wc-mesh{ background-image:radial-gradient(circle at 20% 20%, rgba(200,242,76,0.22), transparent 40%), radial-gradient(circle at 80% 30%, rgba(124,224,179,0.16), transparent 45%); } .work-card__cat{ position:relative; z-index:1; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .work-card h3{ position:relative; z-index:1; font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,2.4vw,2rem); margin:0 0 10px; } .work-card p{ position:relative; z-index:1; color:var(--ivory-dim); font-size:0.92rem; margin:0; max-width:40ch; } .col-7{ grid-column:span 7; } .col-5{ grid-column:span 5; } .col-6{ grid-column:span 6; } .col-12{ grid-column:span 12; } /* ---------- Process ---------- */ .process{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; } .step{ position:relative; padding-top:34px; border-top:1px solid var(--line); } .step::before{ counter-increment:step; content:"0" counter(step); position:absolute; top:-1px; left:0; padding-top:12px; font-family:var(--font-display); font-size:0.85rem; color:var(--accent); } .step__bar{ position:absolute; top:-1px; left:0; width:0; height:2px; background:var(--accent); transition:width 1s var(--ease); } .step.is-in .step__bar{ width:48px; } .step h3{ font-size:1.15rem; font-weight:600; margin:0 0 10px; letter-spacing:-0.01em; } .step p{ color:var(--muted); font-size:0.9rem; margin:0; } /* ---------- Principles / values band ---------- */ .principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; } .principle{ background:var(--bg); padding:clamp(28px,3vw,44px); } .principle__k{ font-family:var(--font-display); font-size:clamp(2.4rem,4vw,3.4rem); color:var(--ivory); line-height:1; letter-spacing:-0.02em; } .principle__k .accent-text{ color:var(--accent); } .principle p{ color:var(--muted); font-size:0.92rem; margin:16px 0 0; max-width:34ch; } /* ---------- Split / about ---------- */ .split{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px,6vw,90px); align-items:center; } .about-card{ position:relative; border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(160deg,var(--surface),var(--bg) 80%); padding:clamp(30px,3.6vw,50px); overflow:hidden; } .about-card__glow{ position:absolute; width:70%; height:70%; top:-20%; right:-20%; background:radial-gradient(circle,var(--accent-soft),transparent 65%); filter:blur(30px); } .about-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:2px; } .about-list li{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line); } .about-list li:first-child{ border-top:none; } .about-list svg{ width:20px; height:20px; color:var(--accent); flex:none; margin-top:3px; } .about-list strong{ display:block; font-weight:600; margin-bottom:2px; } .about-list span{ color:var(--muted); font-size:0.9rem; } /* ---------- Compliance band ---------- */ .compliance-band{ position:relative; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:linear-gradient(150deg,#101511,#0b0d0a); padding:clamp(34px,4.5vw,64px); overflow:hidden; } .compliance-band::before{ content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,var(--accent),transparent); } .compliance-band__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,4vw,60px); align-items:center; } .badge-shield{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border:1px solid var(--accent); border-radius:var(--radius-pill); color:var(--accent); font-size:0.74rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:22px; } .badge-shield svg{ width:16px; height:16px; } .compliance-points{ list-style:none; margin:0; padding:0; display:grid; gap:16px; } /* NOT display:flex — the
  • mixes bare text with , and flex would turn each run into its own flex item (gaps mid-sentence). Block + absolute icon keeps the sentence as one continuous inline flow. */ .compliance-points li{ display:block; position:relative; padding-left:34px; font-size:0.95rem; line-height:1.6; color:var(--ivory-dim); } .compliance-points li svg{ position:absolute; left:0; top:4px; width:20px; height:20px; color:var(--accent); } .compliance-points li strong{ color:var(--ivory); font-weight:600; } /* ---------- CTA / contact ---------- */ .cta{ position:relative; text-align:center; border-radius:var(--radius-lg); overflow:hidden; padding:clamp(56px,8vw,120px) clamp(24px,5vw,80px); background:linear-gradient(160deg,var(--surface),var(--bg)); border:1px solid var(--line); } .cta__orb{ position:absolute; width:60vw; height:60vw; left:50%; top:20%; transform:translateX(-50%); background:radial-gradient(circle,var(--accent-soft),transparent 60%); filter:blur(60px); pointer-events:none; } .cta__inner{ position:relative; z-index:1; } .cta h2{ margin:0 auto 22px; max-width:18ch; } .cta .lead{ margin:0 auto 38px; } .cta__row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } .cta__mail{ display:inline-block; margin-top:30px; font-family:var(--font-display); font-size:clamp(1.3rem,3vw,2.1rem); color:var(--ivory); border-bottom:1px solid var(--line-strong); padding-bottom:6px; transition:color .3s, border-color .3s; } .cta__mail:hover{ color:var(--accent); border-color:var(--accent); } /* ---------- Footer ---------- */ .footer{ border-top:1px solid var(--line); padding-top:clamp(56px,7vw,90px); padding-bottom:40px; background:var(--bg-2); } .footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line); } .footer__brand .brand__name{ font-size:1.4rem; } .footer__pitch{ color:var(--muted); font-size:0.92rem; margin:20px 0 24px; max-width:34ch; } .footer__col h4{ font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted-2); margin:0 0 20px; font-weight:600; } .footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .footer__col a{ color:var(--ivory-dim); font-size:0.92rem; transition:color .3s; } .footer__col a:hover{ color:var(--accent); } .footer__mail{ color:var(--accent) !important; } .footer__bottom{ display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; padding-top:30px; } .footer__legal{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:0.8rem; color:var(--muted); } .footer__legal a{ color:var(--muted); transition:color .3s; } .footer__legal a:hover{ color:var(--ivory); } .footer__entity{ font-size:0.8rem; color:var(--muted-2); max-width:60ch; line-height:1.6; } .footer__disclaimer{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); font-size:0.76rem; color:var(--muted-2); line-height:1.7; max-width:none; } /* ---------- Reveal ---------- Visible by DEFAULT on purpose. GSAP sets the hidden from-state inline at runtime, so if JS fails, is blocked, or the ticker stalls, the content still renders. Never ship opacity:0 as a CSS default that only JS can undo. */ .reveal{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); } html.no-gsap .reveal{ opacity:0; transform:translateY(28px); } html.no-gsap .reveal.is-in{ opacity:1; transform:none; } .reveal[data-delay="1"]{ transition-delay:.08s; } .reveal[data-delay="2"]{ transition-delay:.16s; } .reveal[data-delay="3"]{ transition-delay:.24s; } .reveal[data-delay="4"]{ transition-delay:.32s; } /* ---------- Cursor ---------- */ .cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; mix-blend-mode:difference; will-change:transform; } .cursor-dot{ width:7px; height:7px; background:var(--accent); transform:translate(-50%,-50%); } .cursor-ring{ width:38px; height:38px; border:1px solid rgba(244,241,234,0.5); transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .cursor-ring.is-hover{ width:60px; height:60px; background:var(--accent-soft); border-color:var(--accent); } @media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } } /* ---------- Preloader ---------- */ .preloader{ position:fixed; inset:0; z-index:9998; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .7s var(--ease), visibility .7s; } .preloader.is-done{ opacity:0; visibility:hidden; } .preloader__logo{ font-family:var(--font-display); font-size:clamp(1.4rem,4vw,2.2rem); letter-spacing:-0.01em; color:var(--ivory); overflow:hidden; } .preloader__logo span{ display:inline-block; opacity:0; transform:translateY(100%); animation:plup .6s var(--ease) forwards; } .preloader__bar{ position:absolute; bottom:0; left:0; height:2px; background:var(--accent); width:0; animation:plbar 1.1s var(--ease) forwards; } @keyframes plup{ to{ opacity:1; transform:none; } } @keyframes plbar{ to{ width:100%; } } /* ---------- Legal / content pages ---------- */ .page-hero{ padding-top:clamp(140px,16vw,220px); padding-bottom:clamp(40px,5vw,70px); border-bottom:1px solid var(--line); position:relative; overflow:hidden; } .page-hero__orb{ position:absolute; width:50vw; height:50vw; top:-20%; right:-10%; background:radial-gradient(circle,var(--accent-soft),transparent 60%); filter:blur(70px); pointer-events:none; } .page-hero h1{ position:relative; max-width:20ch; } .page-hero .lead{ position:relative; margin-top:22px; } .page-meta{ position:relative; margin-top:26px; font-size:0.82rem; color:var(--muted); letter-spacing:0.03em; } .legal{ display:grid; grid-template-columns:260px 1fr; gap:clamp(30px,5vw,70px); align-items:start; } .legal__toc{ position:sticky; top:110px; } .legal__toc h4{ font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted-2); margin:0 0 16px; } .legal__toc ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .legal__toc a{ font-size:0.86rem; color:var(--muted); transition:color .3s; } .legal__toc a:hover,.legal__toc a.active{ color:var(--accent); } .legal__body{ max-width:72ch; } .legal__body h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.1rem); margin:52px 0 16px; letter-spacing:-0.01em; scroll-margin-top:110px; } .legal__body h2:first-child{ margin-top:0; } .legal__body h3{ font-size:1.1rem; font-weight:600; margin:30px 0 10px; } .legal__body p{ color:var(--ivory-dim); margin:0 0 18px; } .legal__body ul,.legal__body ol{ color:var(--ivory-dim); margin:0 0 20px; padding-left:22px; display:grid; gap:10px; } .legal__body li{ padding-left:6px; } .legal__body strong{ color:var(--ivory); } .legal__body a{ color:var(--accent); border-bottom:1px solid transparent; transition:border-color .3s; } .legal__body a:hover{ border-color:var(--accent); } .callout{ border:1px solid var(--line-strong); border-left:2px solid var(--accent); border-radius:var(--radius); background:var(--surface); padding:22px 26px; margin:24px 0; } .callout p{ margin:0; color:var(--ivory-dim); font-size:0.94rem; } .callout strong{ color:var(--accent); } /* ---------- Responsive ---------- */ @media (max-width: 1024px){ .footer__top{ grid-template-columns:1fr 1fr; gap:36px; } .compliance-band__grid{ grid-template-columns:1fr; } .process{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 860px){ .nav__links{ display:none; } .nav__toggle{ display:block; } .services{ grid-template-columns:1fr; } .split{ grid-template-columns:1fr; } .principles{ grid-template-columns:1fr; } .work-grid > *{ grid-column:span 12 !important; } .legal{ grid-template-columns:1fr; } .legal__toc{ position:relative; top:0; } .hero__bottom{ flex-direction:column; align-items:flex-start; } } @media (max-width: 560px){ .process{ grid-template-columns:1fr; } .footer__top{ grid-template-columns:1fr; } .btn{ --pad-x:24px; } } /* ============================================================= V2 — WebGL layers, photoreal imagery, 3D motion ============================================================= */ /* ---------- Scroll progress ---------- */ .scroll-bar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:101; background:transparent; pointer-events:none; } .scroll-bar__fill{ height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--accent),var(--mint)); box-shadow:0 0 14px var(--accent-glow); } /* ---------- Split text ---------- */ [data-split]{ perspective:900px; } [data-split] .w{ display:inline-block; white-space:nowrap; } [data-split] .c{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.08em; margin-bottom:-0.08em; } [data-split] .ci{ display:inline-block; transform-origin:50% 100%; will-change:transform,opacity; } /* ---------- WebGL canvases ---------- */ #gl-hero{ position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; pointer-events:none; } .hero__inner{ z-index:3; } .hero__orbs{ z-index:0; } .no-webgl #gl-hero,.no-webgl #gl-morph{ display:none; } /* ---------- Hero photoreal backdrop ---------- */ .hero__photo{ position:absolute; inset:0; z-index:0; overflow:hidden; } .hero__photo img{ width:100%; height:120%; object-fit:cover; opacity:0.42; filter:saturate(0.85) contrast(1.08); } .hero__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,0.72) 0%, rgba(10,10,11,0.55) 40%, rgba(10,10,11,0.95) 100%), radial-gradient(70% 60% at 50% 40%, transparent, rgba(10,10,11,0.85)); } /* ---------- THE MORPH SECTION ---------- */ .morph{ position:relative; background:var(--bg); } .morph__stage{ position:relative; height:100svh; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; } #gl-morph{ position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; } .morph__glow{ position:absolute; width:70vw; height:70vw; max-width:900px; max-height:900px; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(200,242,76,0.13), transparent 62%); filter:blur(70px); z-index:0; pointer-events:none; } .morph__ui{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; flex-direction:column; height:100%; justify-content:space-between; padding-block:calc(var(--gutter) + 40px) var(--gutter); pointer-events:none; } .morph__head{ max-width:34ch; } .morph__head h2{ margin-top:14px; } .morph__caps{ position:relative; min-height:130px; align-self:flex-end; max-width:38ch; width:100%; text-align:right; } .morph__cap{ position:absolute; right:0; bottom:0; opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .55s var(--ease); } .morph__cap.is-active{ opacity:1; transform:none; } .morph__cap span{ display:block; font-size:0.7rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; } .morph__cap h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,2.8vw,2.3rem); margin:0 0 10px; letter-spacing:-0.01em; } .morph__cap p{ color:var(--muted); font-size:0.92rem; margin:0; } .morph__hint{ position:absolute; left:var(--gutter); bottom:var(--gutter); z-index:3; font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted-2); display:flex; align-items:center; gap:12px; } .morph__hint::before{ content:""; width:40px; height:1px; background:var(--accent); opacity:0.6; } /* ---------- Photoreal media ---------- */ .media{ position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface); } .media img{ width:100%; height:100%; object-fit:cover; display:block; } .media--tall{ aspect-ratio:3/4; } .media--wide{ aspect-ratio:4/3; } .media__veil{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(10,10,11,0.55) 65%,rgba(10,10,11,0.94)); } /* Work cards now carry real photography */ .work-card{ transform-style:preserve-3d; will-change:transform; transition:transform .35s var(--ease), border-color .5s var(--ease); } .work-card__img{ position:absolute; inset:0; z-index:-2; overflow:hidden; } .work-card__img img{ width:100%; height:112%; object-fit:cover; opacity:0.62; filter:saturate(0.9) contrast(1.06); transition:transform 1.1s var(--ease), opacity .6s var(--ease); } .work-card:hover .work-card__img img{ transform:scale(1.07); opacity:0.8; } .work-card__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,0.35) 0%, rgba(10,10,11,0.62) 55%, rgba(10,10,11,0.95) 100%); } .work-card__sheen{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(200,242,76,0.16), transparent 55%); transition:opacity .5s var(--ease); } .work-card:hover .work-card__sheen{ opacity:1; } /* Service cards get depth */ .service{ transform-style:preserve-3d; will-change:transform; } /* ---------- Studio split with photo ---------- */ .studio-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:3/4; } .studio-media img{ width:100%; height:118%; object-fit:cover; opacity:0.85; } .studio-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(200,242,76,0.10), transparent 45%, rgba(10,10,11,0.65)); } .studio-media__tag{ position:absolute; left:22px; bottom:22px; z-index:2; display:flex; align-items:center; gap:10px; font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ivory); } .studio-media__tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); } /* ---------- CTA with photo ---------- */ .cta{ isolation:isolate; } .cta__photo{ position:absolute; inset:0; z-index:-1; overflow:hidden; } .cta__photo img{ width:100%; height:118%; object-fit:cover; opacity:0.30; } .cta__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,0.78), rgba(10,10,11,0.94)); } /* ---------- Texture chip ---------- */ .texture-chip{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:1; } .texture-chip img{ width:100%; height:100%; object-fit:cover; } /* ---------- Nav 3D mark ---------- */ .brand__mark{ filter:drop-shadow(0 4px 12px rgba(200,242,76,0.28)); transition:transform .6s var(--ease); } .brand:hover .brand__mark{ transform:rotateY(22deg) rotateX(-8deg) scale(1.06); } .brand{ perspective:600px; } /* ---------- Preloader upgrade ---------- */ .preloader{ flex-direction:column; gap:22px; } .preloader__mark{ width:64px; height:64px; animation:plspin 2.4s var(--ease-in-out) infinite; } @keyframes plspin{ 0%,100%{ transform:rotateY(0) } 50%{ transform:rotateY(180deg) } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .work-card,.service{ transform:none !important; } #gl-hero,#gl-morph{ opacity:0.5; } .morph__stage{ height:auto; padding-block:80px; } } /* ---------- Responsive ---------- */ @media (max-width: 860px){ .morph__ui{ padding-block:100px 40px; } .morph__caps{ text-align:left; align-self:flex-start; max-width:100%; } .morph__cap{ right:auto; left:0; } .morph__hint{ display:none; } .hero__photo img{ opacity:0.3; } } /* ---------- Hero readability scrim (sits above WebGL, below copy) ---------- */ .hero::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(100deg, rgba(10,10,11,0.94) 0%, rgba(10,10,11,0.80) 26%, rgba(10,10,11,0.34) 52%, rgba(10,10,11,0.05) 74%, transparent 100%), linear-gradient(180deg, rgba(10,10,11,0.55) 0%, transparent 22%, transparent 62%, rgba(10,10,11,0.85) 100%); } @media (max-width: 860px){ .hero::after{ background:linear-gradient(180deg, rgba(10,10,11,0.72) 0%, rgba(10,10,11,0.55) 45%, rgba(10,10,11,0.92) 100%); } } /* keep the headline crisp over the 3D form */ .hero h1{ text-shadow:0 2px 40px rgba(10,10,11,0.75); } /* ---------- Hero layout: copy owns the left, the 3D form owns the right ---------- */ .hero__bottom{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:26px; max-width:56ch; margin-top:34px; } .hero__note{ max-width:46ch; } @media (min-width:1100px){ .hero__bottom{ max-width:48%; } } @media (max-width:860px){ .hero__bottom{ max-width:100%; } } /* ---------- Footer legal address ---------- */ .footer__address{ font-style:normal; font-size:0.86rem; line-height:1.7; color:var(--muted); margin:0 0 22px; } .footer__address strong{ color:var(--ivory-dim); font-weight:600; }