/* ============================================================ KAPSHARE × PIXY — unifying design system One stylesheet, three "approaches" driven by [data-approach] on , plus accent / shapes / type-scale overrides. Type: Anton (display) + Outfit (text) — Pixy's pairing. ============================================================ */ /* ---------- THEME TOKENS ---------- */ :root { --t-scale: 1; --maxw: 1320px; --gut: clamp(20px, 5vw, 80px); --ease: cubic-bezier(0, 0, 0.3642, 1); --tsm: .25s var(--ease); --tmd: .45s var(--ease); --radius: 18px; --radius-lg: 28px; --font-display: "Anton"; --grad: linear-gradient(105deg, var(--accent) 0%, var(--accent-2) 100%); } /* APPROACH 1 — STYLISH STUDIO (dark, on-brand — matches kapshare.com) */ :root, html[data-approach="stylish"] { --bg:#0C0C0E; --surface:#161618; --card:#161618; --fg:#F1F3F6; --muted:#99a1ac; --faint:#555c67; --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.22); --accent:#1976D2; --accent-2:#00BCD4; --on-accent:#fff; --band:#06070A; --band-fg:#F1F3F6; --band-line:rgba(255,255,255,.12); --shape-blend:normal; } /* APPROACH 2 — FRIENDLY (light, playful, dual accent) */ html[data-approach="friendly"] { --bg:#ECECEA; --surface:#ffffff; --card:#ffffff; --fg:#2b2c2f; --muted:#76777a; --faint:#b7b7b4; --line:rgba(0,0,0,.10); --line-strong:rgba(0,0,0,.18); --accent:#FEAF62; --accent-2:#37CC8D; --on-accent:#23231f; --band:#353639; --band-fg:#ECECEA; --band-line:rgba(255,255,255,.16); --shape-blend:normal; } /* APPROACH 3 — EDITORIAL (mono, restrained, big type) */ html[data-approach="editorial"] { --bg:#F3F1EB; --surface:#FBFAF6; --card:#FBFAF6; --fg:#16150F; --muted:#6d6b61; --faint:#b3b0a4; --line:rgba(0,0,0,.13); --line-strong:rgba(0,0,0,.30); --accent:#16150F; --accent-2:#16150F; --on-accent:#F3F1EB; --band:#16150F; --band-fg:#F3F1EB; --band-line:rgba(255,255,255,.14); --shape-blend:luminosity; } /* APPROACH 4 — AGENIO (lime on near-black, grotesk, // labels, grid texture) */ html[data-approach="agenio"] { --bg:#0C0C0E; --surface:#161618; --card:#161618; --fg:#F2F3EC; --muted:#9a9d90; --faint:#565a4c; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20); --accent:#C6F24E; --accent-2:#9EDB2E; --on-accent:#0B0C0A; --band:#060704; --band-fg:#F2F3EC; --band-line:rgba(255,255,255,.12); --shape-blend:luminosity; --font-display:"Sunsive"; } html[data-approach="agenio"] body{ font-family:"Space Grotesk", sans-serif; } /* Agenio motifs */ html[data-approach="agenio"] body{ background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px); background-size:34px 34px; } html[data-approach="agenio"] .display, html[data-approach="agenio"] .proc-body h3, html[data-approach="agenio"] .svc-card h3, html[data-approach="agenio"] .prod-body h3, html[data-approach="agenio"] .statement h2, html[data-approach="agenio"] .news h2, html[data-approach="agenio"] .cbs h4, html[data-approach="agenio"] .contact-side .mini h5, html[data-approach="agenio"] .tech-track span{ text-transform:none; letter-spacing:-.02em; line-height:1.02; font-weight:700; } html[data-approach="agenio"] .hero h1{ font-size:calc(clamp(2.3rem,6.6vw,6.2rem)*var(--t-scale)); line-height:1.0; } html[data-approach="agenio"] .hero h1 .line{ white-space:normal; } html[data-approach="agenio"] .tag-pre::before, html[data-approach="agenio"] .hero .eyebrow::before{ content:"//"; width:auto; height:auto; background:none; color:var(--accent); font-family:var(--font-display); font-weight:700; letter-spacing:0; } html[data-approach="agenio"] .eyebrow{ letter-spacing:.12em; color:var(--accent); } html[data-approach="agenio"] .svc-card, html[data-approach="agenio"] .prod-card, html[data-approach="agenio"] .member{ border-radius:24px; } html[data-approach="agenio"] .shape img{ filter:grayscale(1) brightness(1.15); opacity:.45; } html[data-accent="kapshare"]{ --accent:#1976D2; --accent-2:#00BCD4; --on-accent:#fff; } html[data-accent="lime"]{ --accent:#98FF03; --accent-2:#74E000; --on-accent:#0B0B0B; } html[data-accent="terracotta"]{ --accent:#CD512F; --accent-2:#E07A4A; --on-accent:#fff; } html[data-accent="orangegreen"]{ --accent:#FEAF62; --accent-2:#37CC8D; --on-accent:#23231f; } html[data-accent="violet"]{ --accent:#7C5CFF; --accent-2:#27C2A8; --on-accent:#fff; } /* ---------- RESET ---------- */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--fg); font-family:"Outfit", sans-serif; font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .5s var(--ease); } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:var(--accent); color:var(--on-accent); } /* ---------- TYPE ---------- */ .display{ font-family:var(--font-display), sans-serif; font-weight:400; text-transform:uppercase; line-height:.92; letter-spacing:-.005em; } .eyebrow{ font-family:"Outfit", sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.28em; font-size:12px; color:var(--muted); } .accent{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .accent2{ color:var(--accent-2); } /* ---------- LAYOUT ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); } section{ position:relative; } .sec-pad{ padding-block:clamp(72px,11vw,160px); } .band{ background:var(--band); color:var(--band-fg); } .band .eyebrow,.band .muted{ color:rgba(255,255,255,.55); } .band .display{ color:var(--band-fg); } /* ---------- BUTTONS (Pixy pill) ---------- */ .btn{ display:inline-flex; align-items:center; gap:12px; padding:16px 30px; border-radius:60px; font-weight:600; font-size:16px; line-height:1; border:1.5px solid transparent; transition:transform var(--tsm), background var(--tsm), border-color var(--tsm); white-space:nowrap; } .btn .ar{ transition:transform var(--tsm); } .btn:hover .ar{ transform:translateX(4px); } .btn-solid{ background:var(--grad); color:var(--on-accent); } .btn-solid:hover{ transform:translateY(-3px); } .btn-ghost{ background:transparent; color:var(--fg); border-color:var(--line-strong); } .btn-ghost:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); } .band .btn-ghost{ color:var(--band-fg); border-color:var(--band-line); } .band .btn-ghost:hover{ background:var(--band-fg); color:var(--band); } /* ---------- TOP NAV ---------- */ .topbar{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:18px var(--gut); transition:background var(--tmd), backdrop-filter var(--tmd), border-color var(--tmd); border-bottom:1px solid transparent; } .topbar.scrolled{ background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .logo{ display:flex; align-items:center; gap:11px; font-weight:700; font-size:21px; letter-spacing:-.01em; } .logo-img{ height:30px; width:auto; display:block; } .footer .logo-img{ height:28px; } .logo .mark{ width:30px; height:30px; border-radius:8px; border:2px solid var(--accent); position:relative; flex:none; } .logo .mark::after{ content:""; position:absolute; inset:5px; background:var(--accent); border-radius:3px; clip-path:polygon(0 0,100% 0,100% 100%); } .nav-links{ display:flex; align-items:center; gap:34px; } .nav-links a{ font-weight:500; font-size:15px; position:relative; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent); transition:width var(--tsm); } .nav-links a:hover::after{ width:100%; } .nav-cta{ display:flex; align-items:center; gap:14px; } .menu-toggle{ display:none; } @media(max-width:860px){ .nav-links{ display:none; } } /* ---------- HERO ---------- */ .hero{ min-height:100svh; display:flex; align-items:center; padding-top:120px; padding-bottom:60px; overflow:hidden; } .hero-inner{ position:relative; z-index:3; width:100%; } .hero h1{ font-size:calc(clamp(2.4rem, 8.2vw, 8.6rem) * var(--t-scale)); } .hero h1 .line{ display:block; white-space:nowrap; } @media(max-width:560px){ .hero h1 .line{ white-space:normal; } } .hero-sub{ max-width:540px; margin-top:34px; font-size:clamp(17px,1.5vw,21px); color:var(--muted); } .hero-actions{ display:flex; align-items:center; gap:18px; margin-top:40px; flex-wrap:wrap; } .hero .eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:26px; } .hero .eyebrow::before{ content:""; width:34px; height:2px; background:var(--accent); } /* friendly hero gets a tinted block behind headline top */ html[data-approach="friendly"] .hero::before{ content:""; position:absolute; top:0; left:0; right:55%; height:42%; background:var(--accent); opacity:.9; z-index:0; } /* decorative shapes */ .shape{ position:absolute; z-index:1; pointer-events:none; filter:drop-shadow(0 30px 60px rgba(0,0,0,.18)); mix-blend-mode:var(--shape-blend); transition:opacity .5s var(--ease); } .shape img{ width:100%; } .shape-a{ width:clamp(120px,15vw,230px); top:6%; left:-4%; transform:rotate(-12deg); } .shape-b{ width:clamp(160px,22vw,330px); bottom:-8%; right:-5%; } .shape-c{ width:clamp(90px,10vw,150px); top:9%; right:5%; } html[data-shapes="off"] .shape{ opacity:0 !important; } html[data-shapes="mono"] .shape img{ filter:grayscale(1) contrast(.95) brightness(1.05); } html[data-approach="editorial"] .shape img{ filter:grayscale(1) contrast(1.02); } /* scroll badge */ .scroll-badge{ position:absolute; right:var(--gut); bottom:42px; z-index:4; width:104px; height:104px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:var(--on-accent); } .scroll-badge .ring text{ font-family:"Outfit"; font-size:8.5px; font-weight:700; letter-spacing:.18em; fill:var(--on-accent); text-transform:uppercase; } .scroll-badge .ring{ position:absolute; inset:0; animation:spin 14s linear infinite; } .scroll-badge .dot{ font-size:22px; } @keyframes spin{ to{ transform:rotate(360deg); } } @media(max-width:700px){ .scroll-badge{ display:none; } } /* ---------- MARQUEE (Agenio two-row, dotted arrows) ---------- */ .marquee{ overflow:hidden; border-block:1px dashed var(--line-strong); background:var(--surface); } .marquee-row{ overflow:hidden; padding-block:clamp(12px,1.8vw,24px); } .marquee-row + .marquee-row{ border-top:1px dashed var(--line-strong); } .marquee-track{ display:flex; align-items:center; width:max-content; animation:marq 32s linear infinite; } .marquee-row.rev .marquee-track{ animation-name:marqRev; } .marquee:hover .marquee-track{ animation-play-state:paused; } .marquee .w{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(38px,6.4vw,104px); line-height:.92; letter-spacing:-.02em; color:var(--fg); padding-inline:clamp(14px,2.2vw,38px); display:inline-flex; align-items:center; white-space:nowrap; } .marquee-arr{ flex:none; width:clamp(24px,2.6vw,44px); height:clamp(18px,2vw,32px); background:var(--accent); margin-inline:clamp(8px,1.2vw,20px); } .marquee-arr.r{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Ccircle cx='4' cy='3' r='2.4'/%3E%3Ccircle cx='4' cy='11' r='2.4'/%3E%3Ccircle cx='4' cy='19' r='2.4'/%3E%3Ccircle cx='13' cy='7' r='2.4'/%3E%3Ccircle cx='13' cy='15' r='2.4'/%3E%3Ccircle cx='22' cy='11' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Ccircle cx='4' cy='3' r='2.4'/%3E%3Ccircle cx='4' cy='11' r='2.4'/%3E%3Ccircle cx='4' cy='19' r='2.4'/%3E%3Ccircle cx='13' cy='7' r='2.4'/%3E%3Ccircle cx='13' cy='15' r='2.4'/%3E%3Ccircle cx='22' cy='11' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat; } .marquee-arr.l{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Ccircle cx='26' cy='3' r='2.4'/%3E%3Ccircle cx='26' cy='11' r='2.4'/%3E%3Ccircle cx='26' cy='19' r='2.4'/%3E%3Ccircle cx='17' cy='7' r='2.4'/%3E%3Ccircle cx='17' cy='15' r='2.4'/%3E%3Ccircle cx='8' cy='11' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Ccircle cx='26' cy='3' r='2.4'/%3E%3Ccircle cx='26' cy='11' r='2.4'/%3E%3Ccircle cx='26' cy='19' r='2.4'/%3E%3Ccircle cx='17' cy='7' r='2.4'/%3E%3Ccircle cx='17' cy='15' r='2.4'/%3E%3Ccircle cx='8' cy='11' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat; } @keyframes marq{ to{ transform:translateX(-50%); } } @keyframes marqRev{ from{ transform:translateX(-50%); } to{ transform:none; } } /* ---------- SECTION HEADERS ---------- */ .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,80px); } .sec-head h2{ font-size:calc(clamp(2.4rem,6vw,5.2rem)*var(--t-scale)); max-width:14ch; } .sec-head .lead{ max-width:420px; color:var(--muted); font-size:18px; } .tag-pre{ display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; } .tag-pre::before{ content:""; width:30px; height:2px; background:var(--accent); } /* ---------- PROCESS ---------- */ .proc-row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,6vw,90px); padding-block:clamp(38px,5vw,64px); border-top:1px solid var(--line); align-items:start; } .proc-row:last-child{ border-bottom:1px solid var(--line); } .proc-num{ font-family:var(--font-display); font-size:clamp(56px,9vw,130px); line-height:1; margin-top:-0.08em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .proc-num small{ display:block; font-family:"Outfit"; font-size:13px; letter-spacing:.25em; color:var(--muted); -webkit-text-fill-color:var(--muted); text-transform:uppercase; margin-top:14px; } .proc-body h3{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(26px,3.4vw,48px); line-height:1; margin-bottom:18px; max-width:18ch; } .proc-body p{ color:var(--muted); max-width:60ch; font-size:18px; } .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; } .chip{ font-size:13px; font-weight:600; padding:9px 16px; border:1px solid var(--line-strong); border-radius:40px; color:var(--fg); } .band .chip{ border-color:var(--band-line); color:var(--band-fg); } @media(max-width:680px){ .proc-row{ grid-template-columns:1fr; gap:12px; } } /* ---------- STATEMENT BAND ---------- */ .statement{ text-align:left; } .statement h2{ font-family:var(--font-display); text-transform:uppercase; font-size:calc(clamp(2.4rem,7vw,6rem)*var(--t-scale)); line-height:.95; max-width:18ch; } .statement p{ max-width:46ch; margin-top:28px; font-size:clamp(18px,1.7vw,22px); color:rgba(255,255,255,.6); } /* ---------- SERVICES ---------- */ .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media(max-width:900px){ .grid-3{ grid-template-columns:1fr; } } .svc-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:38px 34px 30px; display:flex; flex-direction:column; min-height:340px; transition:transform var(--tmd), border-color var(--tmd), background var(--tmd); } .svc-card:hover{ transform:translateY(-6px); border-color:var(--accent); } .svc-num{ font-family:var(--font-display); font-size:30px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .svc-card h3{ font-family:var(--font-display); text-transform:uppercase; font-size:26px; line-height:1.02; margin:18px 0 14px; } .svc-card p{ color:var(--muted); font-size:16px; flex:1; } .svc-link{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-weight:600; color:var(--accent); } .svc-link .ar{ transition:transform var(--tsm); } .svc-card:hover .svc-link .ar{ transform:translateX(5px); } /* ---------- CBS MINI TRIO ---------- */ .cbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:24px; } .cbs > div{ padding:34px; border-right:1px solid var(--line); } .cbs > div:last-child{ border-right:none; } .cbs h4{ font-family:var(--font-display); text-transform:uppercase; font-size:22px; color:var(--accent); margin-bottom:8px; } .cbs p{ color:var(--muted); font-size:15px; } @media(max-width:760px){ .cbs{ grid-template-columns:1fr; } .cbs>div{ border-right:none; border-bottom:1px solid var(--line); } } /* ---------- PRODUCTS ---------- */ .prod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media(max-width:860px){ .prod-grid{ grid-template-columns:1fr; } } .prod-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--tmd), border-color var(--tmd); } .prod-card:hover{ transform:translateY(-6px); border-color:var(--accent); } .prod-shot{ aspect-ratio:16/9; position:relative; background: repeating-linear-gradient(135deg, color-mix(in srgb,var(--fg) 6%,transparent) 0 12px, transparent 12px 24px), var(--surface); border-bottom:1px solid var(--line); display:grid; place-items:center; } .prod-shot .ph{ font-family:"Outfit"; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); } .prod-body{ padding:34px; } .prod-body h3{ font-family:var(--font-display); text-transform:uppercase; font-size:34px; margin-bottom:14px; } .prod-body p{ color:var(--muted); font-size:16px; } .prod-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; flex-wrap:wrap; } /* ---------- TEAM (Option A — overlay reveal, blue) ---------- */ .team{ --tm-blue:#1976D2; --tm-blue-2:#00BCD4; } .team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media(max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .team-grid{ grid-template-columns:1fr; } } .member{ position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--card); cursor:default; } .member .m-photo{ position:absolute; inset:0; z-index:0; } .member .m-photo image-slot{ display:block; width:100%; height:100%; } .member .m-photo image-slot::part(ring){ display:none; } .member .m-photo image-slot::part(frame){ border-radius:0; background:var(--surface); } .member .m-photo image-slot img, .member .m-photo image-slot::part(img){ transition:transform .7s cubic-bezier(.16,1,.3,1); } .member:hover .m-photo{ transform:none; } .member .m-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(7,9,13,.96) 6%, rgba(7,9,13,.55) 34%, rgba(7,9,13,0) 62%); transition:background .5s; } .member:hover .m-scrim{ background:linear-gradient(to top, rgba(7,9,13,.97) 12%, rgba(7,9,13,.6) 46%, rgba(7,9,13,.08) 78%); } .member .m-info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; } .member .m-info::before{ content:""; display:block; width:28px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--tm-blue),var(--tm-blue-2)); margin-bottom:12px; transform:scaleX(.4); transform-origin:left; transition:transform .5s cubic-bezier(.16,1,.3,1); } .member:hover .m-info::before{ transform:scaleX(1); } .member h4{ font-size:19px; font-weight:700; color:#fff; letter-spacing:-.01em; } .member .role{ color:var(--tm-blue-2); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-top:4px; } .member .m-bio{ color:rgba(255,255,255,.82); font-size:13.5px; line-height:1.48; margin-top:0; max-height:0; opacity:0; overflow:hidden; transition:max-height .55s cubic-bezier(.16,1,.3,1), opacity .4s, margin-top .4s; } .member:hover .m-bio{ max-height:140px; opacity:1; margin-top:11px; } .m-li{ position:absolute; top:12px; right:12px; z-index:3; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgba(10,14,20,.5); color:#fff; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16); opacity:0; transform:translateY(-6px); transition:opacity .4s, transform .4s, background .25s, color .25s; } .member:hover .m-li{ opacity:1; transform:none; } .m-li:hover{ background:linear-gradient(135deg,var(--tm-blue),var(--tm-blue-2)); color:#fff; border-color:transparent; } .m-li svg{ width:18px; height:18px; fill:currentColor; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ---------- LOGO MARQUEE (partner/tech wall) ---------- */ .logos{ border-block:1px solid var(--line); overflow:hidden; } .logos-track{ display:flex; width:max-content; animation:marq 40s linear infinite; } .logos:hover .logos-track{ animation-play-state:paused; } .logo-cell{ display:flex; align-items:center; justify-content:center; gap:14px; padding:30px clamp(34px,5vw,70px); border-right:1px solid var(--line); color:var(--muted); transition:color var(--tmd); white-space:nowrap; } .logo-cell:hover{ color:var(--accent); } .logo-cell svg{ width:30px; height:30px; flex:none; } .logo-cell .nm{ font-weight:700; font-size:clamp(18px,1.8vw,25px); letter-spacing:-.02em; } .logo-cell img{ height:46px; width:auto; max-width:220px; object-fit:contain; opacity:.62; transition:opacity var(--tmd); } .logo-cell img.lg-pbjax{ height:74px; } .logo-cell img.lg-ujamaa{ height:82px; } .logos:hover .logo-cell:hover img, .logo-cell:hover img{ opacity:1; } /* ---------- CONTACT ---------- */ .contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; } @media(max-width:880px){ .contact-grid{ grid-template-columns:1fr; } } .form{ display:flex; flex-direction:column; gap:18px; } .opt-row{ display:flex; gap:12px; flex-wrap:wrap; } .opt{ flex:1; min-width:200px; border:1.5px solid var(--line-strong); border-radius:14px; padding:16px 18px; font-size:15px; color:var(--muted); display:flex; gap:12px; align-items:center; transition:border-color var(--tsm), color var(--tsm), background var(--tsm); } .opt input{ accent-color:var(--accent); width:18px; height:18px; } .opt.active,.opt:hover{ border-color:var(--accent); color:var(--fg); } .field label{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); display:block; margin-bottom:8px; } .field input,.field textarea{ width:100%; background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:15px 18px; font-family:inherit; font-size:16px; color:var(--fg); transition:border-color var(--tsm); } .field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); } .field textarea{ min-height:120px; resize:vertical; } .contact-side .mini{ border-top:1px solid var(--line); padding-block:22px; } .contact-side .mini h5{ font-family:var(--font-display); text-transform:uppercase; font-size:20px; margin-bottom:6px; } .contact-side .mini p{ color:var(--muted); font-size:15px; } .form-success{ display:none; padding:18px 20px; border-radius:14px; background:var(--accent); color:var(--on-accent); font-weight:600; } .form-success.show{ display:block; } /* ---------- NEWSLETTER ---------- */ .news{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .news h2{ font-family:var(--font-display); text-transform:uppercase; font-size:calc(clamp(2.2rem,5vw,4.4rem)*var(--t-scale)); } .news-form{ display:flex; gap:12px; flex-wrap:wrap; } .news-form input{ background:transparent; border:1.5px solid var(--band-line); border-radius:60px; padding:16px 24px; color:var(--band-fg); font-family:inherit; font-size:16px; min-width:260px; } .news-form input::placeholder{ color:rgba(255,255,255,.45); } /* ---------- FOOTER ---------- */ .footer{ background:var(--band); color:var(--band-fg); padding-block:clamp(60px,8vw,110px) 40px; } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; } @media(max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } } @media(max-width:520px){ .footer-top{ grid-template-columns:1fr; } } .footer .blurb{ color:rgba(255,255,255,.55); max-width:34ch; margin-top:18px; font-size:15px; } .footer h6{ font-size:13px; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.45); margin-bottom:18px; } .footer ul{ list-style:none; display:flex; flex-direction:column; gap:11px; } .footer ul a{ color:rgba(255,255,255,.8); font-size:15px; transition:color var(--tsm); } .footer ul a:hover{ color:var(--accent); } .footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(40px,6vw,80px); padding-top:28px; border-top:1px solid var(--band-line); color:rgba(255,255,255,.5); font-size:14px; } .footer-bottom .links{ display:flex; gap:24px; } /* ---------- SCROLL PROGRESS ---------- */ .progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:70; transition:width .1s linear; } /* ---------- REVEAL ANIM ---------- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } @media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } .marquee-track,.tech-track,.logos-track,.scroll-badge .ring{ animation:none; } } .muted{ color:var(--muted); }