/* ═══════════════════════════════════════════════════════════════════════ CINECRAFT — Cinematic Visual Production Studio style.css 00 Tokens 01 Reset & base 02 Typography primitives 03 Buttons, links, labels, fields 04 Grain, curtain, cursor 05 Navigation 06 Mobile menu 07 Hero 08 Marquee 09 Statement 10 Section heads 11 Works gallery 12 Featured project 13 Services 14 Before / After 15 Process 16 About & stats 17 Pricing 18 Testimonials 19 Final CTA 20 Footer 21 Lightbox 22 Reveal / animation utilities 23 Responsive 24 Reduced motion ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── 00 TOKENS ───────────────────────────────────────────── */ :root{ /* ink family */ --ink: #14110E; --ink-2: #1E1913; --ink-3: #2A231B; --ash: #6C6459; --ash-2: #938A7C; /* paper family */ --paper: #F2EDE4; --paper-2: #E8E1D4; --paper-3: #FBF8F2; /* accent — burnt ember, not coral */ --ember: #B4471F; --ember-lo: #D9762F; --ember-soft: rgba(180,71,31,.12); --teal: #24393B; /* lines */ --line: rgba(20,17,14,.13); --line-soft: rgba(20,17,14,.07); --line-light: rgba(255,255,255,.14); --line-light-soft: rgba(255,255,255,.07); /* type */ --serif: "Bodoni Moda", "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif; --sans: "Jost", "Futura", "Century Gothic", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* motion */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.62, .02, .28, 1); --ease-soft: cubic-bezier(.33, 1, .68, 1); /* layout */ --shell: 1560px; --pad: clamp(1.25rem, 5vw, 5.5rem); --nav-h: 68px; /* depth */ --sh-1: 0 1px 2px rgba(20,17,14,.05), 0 8px 22px -14px rgba(20,17,14,.22); --sh-2: 0 2px 6px rgba(20,17,14,.06), 0 26px 60px -30px rgba(20,17,14,.32); --sh-3: 0 4px 12px rgba(20,17,14,.07), 0 60px 110px -50px rgba(20,17,14,.42); --sh-in: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(20,17,14,.05); } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 28px); } /* The page is fully visible without JavaScript. `js-reveal` is added by the script on in its first statement, which is what arms the hidden starting states below — so a failed script can never strand any copy. */ body{ overflow-x:hidden; } html.js-reveal body:not(.is-ready), body.menu-open, body.no-scroll{ overflow:hidden; } /* ───────────────────────────────────────────── 01 RESET & BASE ───────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family:var(--sans); font-weight:300; font-size:clamp(.95rem, .55vw + .82rem, 1.06rem); line-height:1.72; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; text-rendering:optimizeLegibility; } img,svg,video{ display:block; max-width:100%; } img{ height:auto; } button{ font:inherit; color:inherit; } input{ font:inherit; } ul,ol{ list-style:none; margin:0; padding:0; } figure{ margin:0; } h1,h2,h3,h4,p{ margin:0; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--ember); color:var(--paper-3); } :focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:2px; } .on-dark :focus-visible, .finale :focus-visible, .process :focus-visible, .statement :focus-visible, .feature :focus-visible, .foot :focus-visible{ outline-color:var(--ember-lo); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:fixed; top:10px; left:10px; z-index:3000; transform:translateY(-160%); background:var(--ink); color:var(--paper-3); padding:.7rem 1.1rem; border-radius:99px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; transition:transform .35s var(--ease); } .skip-link:focus{ transform:none; } .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); } /* ───────────────────────────────────────────── 02 TYPOGRAPHY PRIMITIVES ───────────────────────────────────────────── */ .label{ display:flex; align-items:center; gap:.85rem; font-size:.66rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--ash); margin-bottom:clamp(1.1rem, 2vw, 1.9rem); } .label i{ width:clamp(24px,3vw,46px); height:1px; flex:none; background:var(--ember); opacity:.85; } .label--light{ color:rgba(242,237,228,.62); } .sec-head{ margin-bottom:clamp(2.6rem, 5.5vw, 5.5rem); } .sec-head--stack{ max-width:64ch; } .sec-head--split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.5rem, 4vw, 4.5rem); align-items:end; } .sec-head__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.3rem, 5.6vw, 5.1rem); line-height:.94; letter-spacing:-.025em; color:var(--ink); text-wrap:balance; } .sec-head__title em{ font-style:italic; color:var(--ember); } .sec-head__note{ font-size:.95rem; line-height:1.75; color:var(--ash); max-width:44ch; padding-bottom:.4rem; } .sec-head__lede{ font-size:1rem; line-height:1.75; color:var(--ash); max-width:56ch; margin-top:1.4rem; } .on-dark .sec-head__title{ color:var(--paper); } .link-arrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); padding-bottom:.4rem; border-bottom:1px solid var(--line); transition:color .4s var(--ease), border-color .4s var(--ease); } .link-arrow svg{ transition:transform .45s var(--ease); } .link-arrow:hover{ color:var(--ember); border-color:var(--ember); } .link-arrow:hover svg{ transform:translateX(5px); } .on-dark .link-arrow{ color:var(--paper); border-color:var(--line-light); } .on-dark .link-arrow:hover{ color:var(--ember-lo); border-color:var(--ember-lo); } /* ───────────────────────────────────────────── 03 BUTTONS / FIELDS ───────────────────────────────────────────── */ .btn{ --h: 54px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; height:var(--h); padding:0 clamp(1.5rem, 2.4vw, 2.3rem); border:0; border-radius:99px; font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; overflow:hidden; isolation:isolate; transition:color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease), background-color .5s var(--ease); } .btn > span{ position:relative; z-index:2; } .btn > svg{ position:relative; z-index:2; transition:transform .5s var(--ease); } .btn--xs{ --h:42px; padding:0 1.25rem; font-size:.64rem; letter-spacing:.16em; } .btn--full{ width:100%; } /* wipe fill on hover */ .btn::before{ content:""; position:absolute; inset:0; z-index:1; transform:translateY(101%); transition:transform .55s var(--ease); } .btn:hover::before{ transform:translateY(0); } .btn:hover > svg{ transform:translateX(5px); } .btn--solid{ color:var(--paper-3); background:var(--ink); box-shadow:var(--sh-1); } .btn--solid::before{ background:var(--ember); } .btn--solid:hover{ color:#fff; box-shadow:0 14px 34px -14px rgba(180,71,31,.6); } .btn--ghost{ color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1px var(--line); } .btn--ghost::before{ background:var(--ink); } .btn--ghost:hover{ color:var(--paper-3); box-shadow:inset 0 0 0 1px var(--ink); } .btn--line{ color:var(--paper); background:transparent; box-shadow:inset 0 0 0 1px var(--line-light); } .btn--line::before{ background:var(--paper); } .btn--line:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--paper); } .field{ position:relative; } .field input{ width:100%; height:54px; padding:0 1.15rem; color:var(--paper); background:rgba(255,255,255,.07); border:1px solid var(--line-light); border-radius:99px; font-size:.88rem; letter-spacing:.02em; transition:background-color .4s var(--ease), border-color .4s var(--ease); } .field input::placeholder{ color:rgba(242,237,228,.45); } .field input:focus{ outline:none; background:rgba(255,255,255,.12); border-color:rgba(242,237,228,.5); } .field input[aria-invalid="true"]{ border-color:#E0704A; } /* ───────────────────────────────────────────── 04 GRAIN / CURTAIN / CURSOR ───────────────────────────────────────────── */ /* Lightweight SVG turbulence — one small tile, GPU-cheap, opacity ~.05 */ .grain{ position:fixed; inset:-60px; z-index:900; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainShift 5.4s steps(6) infinite; will-change:transform; } @keyframes grainShift{ 0%{ transform:translate3d(0,0,0); } 16%{ transform:translate3d(-14px,7px,0); } 33%{ transform:translate3d(9px,-12px,0); } 50%{ transform:translate3d(-7px,-9px,0); } 66%{ transform:translate3d(12px,10px,0); } 83%{ transform:translate3d(-11px,5px,0); } 100%{ transform:translate3d(0,0,0); } } .curtain{ display:none; position:fixed; inset:0; z-index:2500; place-items:center; background:var(--ink); transition:opacity .7s var(--ease), visibility .7s; } .js-reveal .curtain{ display:grid; } .curtain.is-gone{ opacity:0; visibility:hidden; pointer-events:none; } .curtain[hidden]{ display:none; } .curtain__inner{ display:grid; justify-items:center; gap:1.4rem; } .curtain__word{ font-family:var(--serif); font-size:clamp(1.6rem, 4vw, 2.6rem); letter-spacing:.02em; color:var(--paper); opacity:0; transform:translateY(14px); animation:curtainIn .9s var(--ease) .1s forwards; } .curtain__bar{ display:block; width:clamp(120px, 22vw, 220px); height:1px; background:rgba(242,237,228,.18); overflow:hidden; } .curtain__bar i{ display:block; height:100%; width:0%; background:var(--ember); transition:width .25s linear; } @keyframes curtainIn{ to{ opacity:1; transform:none; } } .cursor{ display:none; } /* ───────────────────────────────────────────── 05 NAVIGATION ───────────────────────────────────────────── */ .nav-wrap{ position:fixed; top:clamp(.85rem, 1.6vw, 1.5rem); left:0; right:0; z-index:1000; padding-inline:clamp(.9rem, 2.2vw, 2rem); pointer-events:none; } .nav{ pointer-events:auto; position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(.75rem, 2vw, 2rem); max-width:var(--shell); margin-inline:auto; min-height:var(--nav-h); padding:.6rem .7rem .6rem 1.35rem; border-radius:99px; color:var(--paper); /* dark glass over the hero */ background:linear-gradient(180deg, rgba(30,25,19,.5), rgba(20,17,14,.62)); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25); box-shadow: 0 20px 46px -22px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.09); transition:transform .85s var(--ease), opacity .7s var(--ease), background-color .55s var(--ease), box-shadow .55s var(--ease), min-height .5s var(--ease), padding .5s var(--ease), color .5s var(--ease); } .js-reveal .nav{ transform:translateY(-26px); opacity:0; } .js-reveal body.is-ready .nav{ transform:none; opacity:1; } /* scrolled state — ivory */ .nav.is-solid{ color:var(--ink); background:linear-gradient(180deg, rgba(251,248,242,.93), rgba(232,225,212,.9)); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); box-shadow: 0 18px 40px -22px rgba(20,17,14,.38), 0 1px 3px rgba(20,17,14,.07), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(20,17,14,.07); min-height:58px; padding:.45rem .6rem .45rem 1.25rem; } .nav.is-hidden{ transform:translateY(-160%); opacity:0; } .nav__brand{ display:flex; align-items:center; gap:.65rem; justify-self:start; } .nav__mark{ display:block; color:currentColor; transition:transform .6s var(--ease); } .nav__brand:hover .nav__mark{ transform:rotate(45deg); } .nav__word{ font-size:1.02rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; } .nav__word em{ font-style:normal; color:var(--ember-lo); transition:color .5s var(--ease); } .nav.is-solid .nav__word em{ color:var(--ember); } .nav__links{ display:flex; align-items:center; justify-content:center; gap:.15rem; } .nav__links a{ position:relative; display:block; padding:.55rem .8rem; border-radius:99px; font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:currentColor; opacity:.72; transition:opacity .35s var(--ease), background-color .35s var(--ease); } .nav__links a::after{ content:""; position:absolute; left:50%; bottom:.3rem; translate:-50% 0; width:0; height:1px; background:var(--ember-lo); transition:width .45s var(--ease); } .nav__links a:hover{ opacity:1; } .nav__links a:hover::after{ width:calc(100% - 1.6rem); } .nav__links a[aria-current="true"]{ opacity:1; } .nav__links a[aria-current="true"]::after{ width:calc(100% - 1.6rem); } .nav.is-solid .nav__links a::after{ background:var(--ember); } .nav__act{ justify-self:end; position:relative; z-index:2; display:flex; align-items:center; gap:.55rem; flex:none; } /* the CTA must never be squeezed or clipped by the bar it lives in */ .nav__act .btn{ white-space:nowrap; flex:none; } .nav.is-solid .nav__act .btn--solid{ background:var(--ink); color:var(--paper-3); } .nav.is-solid .nav__act .btn--solid::before{ background:var(--ember); } .nav.is-solid .nav__act .btn--solid:hover{ color:#fff; } .nav__burger{ display:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; transition:background-color .4s var(--ease); } .nav.is-solid .nav__burger{ background:rgba(20,17,14,.06); box-shadow:inset 0 0 0 1px var(--line); } .nav__burger i{ display:block; width:17px; height:1.4px; border-radius:2px; background:currentColor; transition:transform .45s var(--ease), opacity .3s var(--ease); } .nav__burger.is-on i:nth-child(1){ transform:translateY(3.2px) rotate(45deg); } .nav__burger.is-on i:nth-child(2){ transform:translateY(-3.2px) rotate(-45deg); } /* ───────────────────────────────────────────── 06 MOBILE MENU ───────────────────────────────────────────── */ .menu{ position:fixed; inset:0; z-index:1200; background:var(--ink); color:var(--paper); display:flex; align-items:center; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; } .menu.is-open{ opacity:1; visibility:visible; } .menu[hidden]{ display:none; } .menu__grid{ position:absolute; inset:0; background: radial-gradient(120% 70% at 80% 0%, rgba(217,118,47,.16), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(36,57,59,.5), transparent 62%); opacity:0; transition:opacity .8s var(--ease) .1s; } .menu.is-open .menu__grid{ opacity:1; } .menu__inner{ position:relative; width:100%; padding:calc(var(--nav-h) + 3.4rem) var(--pad) 2.4rem; display:flex; flex-direction:column; gap:2rem; min-height:100%; justify-content:center; } .menu__eyebrow{ font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(242,237,228,.45); margin-bottom:1.4rem; } .menu__list li{ overflow:hidden; } .menu__list a{ display:flex; align-items:baseline; gap:1rem; padding:.42rem 0; font-family:var(--serif); font-size:clamp(2.1rem, 10vw, 3.4rem); line-height:1.1; letter-spacing:-.02em; color:var(--paper); transform:translateY(105%); transition:transform .8s var(--ease), color .35s var(--ease); } .menu.is-open .menu__list a{ transform:none; transition-delay:calc(.12s + var(--i) * .06s); } .menu__list a:hover{ color:var(--ember-lo); } .menu__num{ font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; color:var(--ember-lo); } .menu__foot{ display:grid; gap:1.1rem; padding-top:1.8rem; border-top:1px solid var(--line-light-soft); } /* keeps the primary action one tap away once the bar is covered by the overlay */ .menu__cta{ align-self:flex-start; max-width:100%; --h:52px; padding:0 1.9rem; } .menu__mail{ font-size:1rem; color:var(--paper); border-bottom:1px solid var(--line-light); padding-bottom:.35rem; justify-self:start; } .menu__social{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; } .menu__social a{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,237,228,.6); transition:color .35s var(--ease); } .menu__social a:hover{ color:var(--ember-lo); } /* ───────────────────────────────────────────── 07 HERO ───────────────────────────────────────────── */ .hero{ position:relative; min-height:min(100svh, 980px); display:flex; align-items:flex-end; padding:calc(var(--nav-h) + 8rem) 0 clamp(6.5rem, 11vh, 9rem); overflow:hidden; background:var(--ink); color:var(--paper); isolation:isolate; } .hero__media{ position:absolute; inset:0; z-index:-2; background:var(--ink); } .hero__frame{ position:absolute; inset:0; opacity:0; transition:opacity 2.2s var(--ease-soft); } .hero__frame.is-active{ opacity:1; } .hero__frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.14); filter:saturate(.82) contrast(1.06) brightness(.72); } .hero__frame.is-active img{ animation:kenburns 15s linear forwards; } @keyframes kenburns{ from{ transform:scale(1.14) translate3d(0,0,0); } to { transform:scale(1.0) translate3d(0,-1.4%,0); } } /* Optional reel. Drop an .mp4 in /assets/videos/ and uncomment the