/* ============================================================ MUIZO — shared stylesheet for all pages EDITING GUIDE: - Accent color: change --accent below (one line changes whole site) - Fonts: loaded in each page's (Google Fonts) ============================================================ */ :root{ /* ===DESIGN=== managed by the admin.html Design panel — keep this block's format */ --accent:#ff4d00; --bg:#0c0c0e; --hero-bg:#1a1a1c; --hero-text-scale:1.1; --hero-text-width:58%; --hero-video-width:40%; --base-font:17px; --radius:6px; --gap-scale:1; /* ===END DESIGN=== */ --bg-soft:#141416; --ink:#f2f0eb; --ink-dim:#9b9891; --line:rgba(242,240,235,.14); --max:1280px; --pad:clamp(20px,4vw,56px); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-size:var(--base-font); line-height:1.65; -webkit-font-smoothing:antialiased; } ::selection{background:var(--accent);color:#0c0c0e} img,video{display:block;width:100%;height:100%;object-fit:cover} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:"Space Grotesk",sans-serif;font-weight:700;line-height:1.02;letter-spacing:-.02em} /* ---------- NAV ---------- */ nav{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;justify-content:space-between;align-items:center; padding:18px var(--pad); background:transparent; transition:transform .35s ease; } nav .logo{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:18px;letter-spacing:.02em} nav .logo span{color:var(--accent)} nav ul{display:flex;gap:32px;list-style:none;font-size:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;align-items:center} nav ul a{color:var(--ink-dim);transition:color .25s} nav ul a:hover,nav ul a.active{color:var(--ink)} nav ul a.cta{color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:8px 18px;transition:.25s} nav ul a.cta:hover{background:var(--accent);border-color:var(--accent);color:#0c0c0e} @media(max-width:640px){nav ul{gap:18px}nav ul li.hide-mobile{display:none}} /* Mobile: hide the top nav while scrolling down, reveal it on scroll up (main.js toggles .nav-hidden) */ @media(max-width:820px){nav.nav-hidden{transform:translateY(-100%)}} /* Nav label: full text on desktop, short "AI" on phones (Built with AI section) */ .nav-lbl-short{display:none} @media(max-width:640px){.nav-lbl-full{display:none}.nav-lbl-short{display:inline}} /* ---------- CASE STUDY HERO ---------- */ header.case{padding:calc(90px + 8vh) var(--pad) 0;max-width:var(--max);margin:0 auto} .kicker{ display:flex;align-items:center;gap:12px; font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim); margin-bottom:28px; } .kicker::before{content:"";width:36px;height:1px;background:var(--accent)} header.case h1{font-size:clamp(48px,9vw,130px);text-transform:uppercase;letter-spacing:-.03em} .hero-sub{ font-family:"Space Grotesk",sans-serif; font-size:clamp(22px,3.2vw,40px); font-weight:500;line-height:1.15;letter-spacing:-.01em; max-width:20ch;margin:28px 0 0; } .hero-sub em{font-style:normal;color:var(--accent)} .meta{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px;border-top:1px solid var(--line); margin-top:56px;padding-top:24px; } .meta div span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px} .meta div p{font-size:15px;font-weight:500} .meta a{border-bottom:1px solid var(--accent)} .hero-img{max-width:var(--max);margin:56px auto 0;padding:0 var(--pad)} .hero-img .frame{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--bg-soft)} /* ---------- TEXT SECTIONS ---------- */ section{max-width:var(--max);margin:0 auto;padding:clamp(70px,10vw,130px) var(--pad) 0} .split{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:clamp(24px,5vw,80px)} @media(max-width:820px){.split{grid-template-columns:1fr}} .split h2{font-size:clamp(30px,4.2vw,52px);position:sticky;top:100px;align-self:start} /* Mobile: headings must NOT stick (single column => they'd scroll over the body text) */ @media(max-width:820px){.split h2{position:static !important;top:auto}} .split h2 .num{display:block;font-size:13px;letter-spacing:.2em;color:var(--accent);margin-bottom:12px;font-weight:600} .split .body p{color:var(--ink-dim);font-size:clamp(17px,1.5vw,20px);line-height:1.7} .split .body p+p{margin-top:1.3em} .split .body p strong{color:var(--ink);font-weight:600} .split .body ul{list-style:none;margin-top:1.5em} .split .body li{padding:16px 0;border-top:1px solid var(--line);color:var(--ink);font-size:16px;display:flex;gap:14px} .split .body li::before{content:"→";color:var(--accent);flex-shrink:0} /* Label-style lists (e.g. "Reason for existing: ...") — aligned columns */ .split .body ul.deflist li{display:grid;grid-template-columns:18px 170px 1fr;gap:0 14px;align-items:start} .split .body ul.deflist li strong{display:block} @media(max-width:700px){.split .body ul.deflist li{display:flex;flex-wrap:wrap}} .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:2em} .tags span{ font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--line);border-radius:99px;padding:8px 16px;color:var(--ink-dim); } /* ---------- IMAGE / VIDEO GRIDS ---------- .cell.wide = full width 16:9 .cell.half = half width 4:3 .cell.tall = half width 3:4 (portrait) .cell.sq = half width square */ .grid{ max-width:var(--max);margin:0 auto; padding:clamp(70px,9vw,110px) var(--pad) 0; display:grid;grid-template-columns:repeat(2,1fr);gap:calc(clamp(14px,2vw,28px) * var(--gap-scale)); } .grid .cell{overflow:hidden;border-radius:var(--radius);background:var(--bg-soft)} .grid .cell.wide{grid-column:1/-1;aspect-ratio:16/9} .grid .cell.half{aspect-ratio:4/3} .grid .cell.tall{aspect-ratio:3/4} .grid .cell.sq{aspect-ratio:1/1} .grid img,.grid video{transition:transform .8s cubic-bezier(.2,.6,.2,1)} .grid .cell:hover img,.grid .cell:hover video{transform:scale(1.035)} @media(max-width:640px){.grid{grid-template-columns:1fr}.grid .cell{grid-column:1/-1}} .caption{grid-column:1/-1;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)} /* ---------- PULL QUOTE ---------- */ .quote{max-width:var(--max);margin:0 auto;padding:clamp(80px,11vw,140px) var(--pad) 0;text-align:center} .quote p{ font-family:"Space Grotesk",sans-serif; font-size:clamp(28px,4.6vw,58px);font-weight:600;line-height:1.12;letter-spacing:-.02em; max-width:22ch;margin:0 auto; } .quote p em{font-style:normal;color:var(--accent)} /* ---------- MARQUEE ---------- */ .marquee{ margin-top:clamp(90px,12vw,150px); border-top:1px solid var(--line);border-bottom:1px solid var(--line); overflow:hidden;white-space:nowrap;padding:22px 0; } .marquee .track{display:inline-block;animation:scroll 28s linear infinite} .marquee span{ font-family:"Space Grotesk",sans-serif;font-weight:600; font-size:clamp(18px,2.4vw,28px);letter-spacing:.02em; margin-right:56px;color:var(--ink-dim); } .marquee span b{color:var(--accent);font-weight:600} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Tools ticker — sits just below the hero, above the intro (reuses the .marquee look) */ .marquee.tools{margin-top:clamp(20px,5vw,48px)} .marquee.tools .track{animation-duration:55s} /* ---------- CTA / FOOTER ---------- */ .cta-block{max-width:var(--max);margin:0 auto;padding:clamp(90px,12vw,160px) var(--pad)} .cta-block .cta-row{ display:flex;justify-content:space-between;align-items:center; gap:clamp(28px,5vw,70px);flex-wrap:nowrap; } .cta-block .cta-vid{ width:min(480px,40%);aspect-ratio:1/1;flex-shrink:0; background:transparent; } @media(max-width:700px){.cta-block .cta-row{flex-wrap:wrap}} .cta-block .cta-vid video{ width:100%;height:100%;object-fit:cover; mix-blend-mode:lighten; /* blends the video's black background into the page */ } @media(max-width:700px){.cta-block .cta-vid{width:100%}} .cta-block a.big{ font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:clamp(38px,7vw,96px);line-height:1.05;letter-spacing:-.02em; display:block;max-width:14ch; } .cta-block a.big span{ background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat;background-size:0% 3px;background-position:0 96%; transition:background-size .5s ease; } .cta-block a.big:hover span{background-size:100% 3px} .cta-block a.big .arrow{color:var(--accent)} .projnav{ display:flex;justify-content:space-between;gap:20px; border-top:1px solid var(--line); margin-top:clamp(60px,8vw,100px);padding-top:28px; font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim); } .projnav a{transition:color .25s} .projnav a:hover{color:var(--accent)} footer{ border-top:1px solid var(--line); padding:28px var(--pad); display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; font-size:13px;color:var(--ink-dim); } footer a:hover{color:var(--ink)} /* ---------- HOMEPAGE FULL-SCREEN VIDEO HERO (Creative Spark style) ---------- EDIT: the italic accent word uses Instrument Serif — loaded in index.html */ .home-hero{ position:relative;height:100svh;min-height:600px; display:flex;align-items:flex-end;overflow:hidden; background:var(--hero-bg); /* near-black gray backdrop */ } .home-hero video.bg{ position:absolute;right:0;top:0;height:100%;width:var(--hero-video-width); object-fit:contain;object-position:right center; mix-blend-mode:lighten; /* melts the video's black background into the gray */ } @media(max-width:820px){ /* Mobile hero: stack the animation as a full-width band ABOVE the headline */ .home-hero{ height:auto;min-height:auto; flex-direction:column;justify-content:flex-start;align-items:stretch; padding-bottom:clamp(44px,8vh,80px); } .home-hero video.bg{ position:relative;inset:auto; width:80%;height:auto;aspect-ratio:760/778;max-height:58svh; object-fit:contain;opacity:1; margin:clamp(84px,14vh,120px) 0 0 var(--pad); /* nav clearance + LEFT-aligned to headline */ } .home-hero .inner{ padding-top:clamp(22px,4.5vh,38px); padding-bottom:0; } } .home-hero .veil{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(12,12,14,.35) 0%,rgba(12,12,14,.15) 45%,rgba(12,12,14,.82) 100%); } .home-hero .inner{ position:relative;z-index:2;width:100%; max-width:var(--max);margin:0 auto; padding:0 var(--pad) clamp(48px,9vh,100px); } .home-hero h1{ font-size:calc(clamp(32px,4.8vw,88px) * var(--hero-text-scale)); line-height:1.04;letter-spacing:-.025em; max-width:min(24ch,var(--hero-text-width)); text-wrap:balance; color:var(--ink); /* light text on the dark backdrop */ } .home-hero h1 em{ font-family:"Instrument Serif",serif; font-style:italic;font-weight:400; font-size:1.06em;letter-spacing:0; } @media(max-width:820px){ .home-hero h1{max-width:100%;font-size:clamp(32px,8vw,54px)} } .home-hero .btn{margin-top:36px;background:var(--ink);border-color:var(--ink);color:#0c0c0e} .home-hero .btn:hover{background:var(--accent);border-color:var(--accent);color:#0c0c0e} /* ---------- HOMEPAGE ---------- */ header.home{ padding:calc(90px + 10vh) var(--pad) 0; max-width:var(--max);margin:0 auto; } header.home h1{ font-size:clamp(40px,6.6vw,92px); letter-spacing:-.025em;line-height:1.04; max-width:20ch; } header.home h1 em{font-style:italic;color:var(--accent)} .home-intro{ color:var(--ink-dim);font-size:clamp(17px,1.6vw,21px);line-height:1.7; max-width:56ch;margin-top:32px; } .home-actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap} .btn{ font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px; letter-spacing:.04em;text-transform:uppercase; border:1px solid var(--line);border-radius:99px;padding:14px 28px; transition:.25s;display:inline-block; } .btn:hover{border-color:var(--accent);color:var(--accent)} .btn.solid{background:var(--accent);border-color:var(--accent);color:#0c0c0e} .btn.solid:hover{background:var(--ink);border-color:var(--ink)} /* Selected work grid: .card.wide spans both columns */ .work-head{ max-width:var(--max);margin:0 auto; padding:clamp(80px,11vw,140px) var(--pad) 0; display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap; } .work-head h2{font-size:clamp(32px,4.6vw,60px)} .work-head h2 em{font-style:italic;color:var(--accent)} /* Full-width stacked projects (Creative Spark style) — one project per row */ .work-grid{ max-width:var(--max);margin:0 auto; padding:40px var(--pad) 0; display:grid;grid-template-columns:1fr;gap:calc(clamp(56px,8vw,110px) * var(--gap-scale)); } .card{display:block} .card .thumb{overflow:hidden;border-radius:var(--radius);background:var(--bg-soft);aspect-ratio:16/9} .card img,.card video{transition:transform .8s cubic-bezier(.2,.6,.2,1)} .card:hover img,.card:hover video{transform:scale(1.04)} .card .info{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:18px 4px 0} .card .info h3{font-size:clamp(24px,3vw,40px);letter-spacing:-.01em} .card .info p{color:var(--ink-dim);font-size:15px;margin-top:6px;max-width:44ch} .card .tag{ flex-shrink:0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase; border:1px solid var(--line);border-radius:99px;padding:6px 14px;color:var(--ink-dim); transition:.25s;margin-top:4px; } .card:hover .tag{border-color:var(--accent);color:var(--accent)} /* Projects hidden via the editor's Hide button */ .card.hidden-project{display:none} /* Mobile: stack project title above its tag so long titles get full width */ @media(max-width:640px){ .card .info{flex-direction:column;gap:10px} .card .info .tag{margin-top:0;align-self:start} } /* ---------- CONTACT PAGE ---------- */ .contact-wrap{ max-width:var(--max);margin:0 auto; padding:calc(90px + 10vh) var(--pad) 0; display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,6vw,100px); } @media(max-width:820px){.contact-wrap{grid-template-columns:1fr}} .contact-wrap h1{font-size:clamp(48px,8vw,110px);letter-spacing:-.03em} .contact-wrap h1 em{font-style:italic;color:var(--accent)} .contact-info{margin-top:40px} .contact-info p{color:var(--ink-dim);max-width:44ch} .contact-info .email{ display:inline-block;margin-top:24px; font-family:"Space Grotesk",sans-serif;font-weight:600; font-size:clamp(18px,2.4vw,26px);color:var(--ink); border-bottom:2px solid var(--accent); } form label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:26px 0 8px} form input,form textarea{ width:100%;background:transparent;border:none;border-bottom:1px solid var(--line); color:var(--ink);font-family:"Inter",sans-serif;font-size:17px;padding:10px 0; outline:none;transition:border-color .25s;resize:vertical; } form input:focus,form textarea:focus{border-color:var(--accent)} form button{ margin-top:36px;cursor:pointer; font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px; letter-spacing:.04em;text-transform:uppercase; background:var(--accent);color:#0c0c0e;border:none;border-radius:99px;padding:16px 36px; transition:.25s; } form button:hover{background:var(--ink)} form button:disabled{opacity:.6;cursor:default} .form-status{margin-top:20px;font-size:15px;line-height:1.5;min-height:1.2em;color:var(--ink)} /* Contact page bottom-right animation */ .contact-vid{ width:100%;aspect-ratio:1/1; margin:32px 0 0; /* aligned with the form's left edge */ } .contact-vid video{ width:100%;height:100%;object-fit:cover; mix-blend-mode:lighten; /* blends the video's black background into the page */ } /* ---------- REVEAL ANIMATION ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease} .reveal.on{opacity:1;transform:none}