/* ============================================================ VANTAGE STUDIO — SITE STYLESHEET vantagestudioco.com · Home / Films / Experience / About / Inquire This file is for the WEBSITE ONLY. The landing page at /film keeps its styles inline on purpose: it must load in one request on cellular, and it must never share a file with the site (if this stylesheet breaks, the ad page must not break with it). If you change a colour here, change it there too — by hand. Tokens are identical to the landing page. Do not drift them. ============================================================ */ :root{ --black:#111111; --offwhite:#F8F6F2; --ivory:#EFE9DF; --gray:#8C8C8C; --gold:#C9A86A; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ background:var(--offwhite); color:var(--black); font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; } img,video{max-width:100%;display:block} /* ---------- shared layout ---------- */ .wrap{max-width:680px;margin:0 auto;padding:0 26px} .wide{max-width:1080px;margin:0 auto;padding:0 26px} section{padding:88px 0} h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.15} h2{font-size:clamp(30px,6vw,46px);letter-spacing:.01em;margin-bottom:26px} h3{font-size:23px;margin-bottom:10px} p{margin-bottom:22px} p:last-child{margin-bottom:0} .eyebrow{ font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);font-weight:500;margin-bottom:20px; } .lede{font-size:19px;line-height:1.8} .rule{width:44px;height:1px;background:var(--gold);margin:34px 0} .center{text-align:center} /* ---------- CTA ---------- */ .cta{ display:inline-block; background:var(--black); color:var(--offwhite); font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; text-decoration:none; padding:19px 40px; border:1px solid var(--black); transition:background .25s,color .25s; } .cta:hover{background:transparent;color:var(--black)} .cta-light{background:var(--offwhite);color:var(--black);border-color:var(--offwhite)} .cta-light:hover{background:transparent;color:var(--offwhite)} .cta-row{margin-top:38px} /* ============================================================ NAVIGATION The landing page has none by design. The site needs one, and it has exactly five items — Aidin's rule is that a sixth item costs you conversions, not adds options. The bar is transparent over a dark hero and solid everywhere else, which is why pages set .nav-over on when their hero is dark. ============================================================ */ .nav{ position:absolute;top:0;left:0;right:0;z-index:40; padding:26px 0; } .nav-inner{ display:flex;align-items:center;justify-content:space-between; max-width:1080px;margin:0 auto;padding:0 26px; } .brand{ font-family:var(--serif);font-size:21px;letter-spacing:.03em; text-decoration:none;color:var(--black);white-space:nowrap; } .brand span{display:block;font-family:var(--sans);font-size:9px; letter-spacing:.3em;text-transform:uppercase;color:var(--gray);margin-top:2px} .nav-links{display:none;gap:34px;align-items:center} .nav-links a{ font-size:11px;letter-spacing:.19em;text-transform:uppercase; text-decoration:none;color:var(--black);opacity:.72; transition:opacity .2s,color .2s; } .nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1;color:var(--gold)} /* dark-hero variant */ .nav-over .brand{color:var(--offwhite)} .nav-over .brand span{color:rgba(248,246,242,.6)} .nav-over .nav-links a{color:var(--offwhite)} /* MOBILE MENU — CSS only, no JavaScript. A hidden checkbox drives the panel. This is deliberate: the site is static and hand-uploaded, and a nav that depends on JS is a nav that breaks silently on a slow connection with the form right below it. */ .nav-toggle{display:none} .nav-burger{ display:block;width:26px;height:16px;position:relative;cursor:pointer; } .nav-burger span{ position:absolute;left:0;right:0;height:1px;background:var(--black); transition:transform .25s,opacity .25s; } .nav-burger span:nth-child(1){top:0} .nav-burger span:nth-child(2){top:50%} .nav-burger span:nth-child(3){bottom:0} .nav-over .nav-burger span{background:var(--offwhite)} .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0} .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .nav-panel{ position:fixed;inset:0;z-index:39; background:var(--black); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px; opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s; } .nav-toggle:checked ~ .nav-panel{opacity:1;visibility:visible} .nav-panel a{ font-family:var(--serif);font-size:31px;color:var(--offwhite); text-decoration:none;padding:12px 0;letter-spacing:.02em; } .nav-panel a:hover{color:var(--gold)} @media(min-width:860px){ .nav-links{display:flex} .nav-burger,.nav-panel{display:none} } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; min-height:88vh; min-height:88svh; display:flex; align-items:flex-end; padding:0 0 68px; overflow:hidden; background:var(--black); } .hero video,.hero .hero-fallback,.hero .hero-img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:0; } .hero-fallback{ background:linear-gradient(150deg,#1a1a1a 0%,#2b2724 55%,#3a332b 100%); } .hero::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(17,17,17,.34) 0%,rgba(17,17,17,.15) 40%,rgba(17,17,17,.82) 100%); } .hero .wide{position:relative;z-index:2;width:100%} .hero h1{ font-size:clamp(40px,9.5vw,78px); color:var(--offwhite); letter-spacing:.005em; margin-bottom:20px; } .hero .sub{ color:var(--ivory); font-size:18px; line-height:1.7; max-width:32ch; margin-bottom:36px; opacity:.94; } /* PAGE HEAD — the shorter hero used on interior pages. Short on purpose: interior pages are read, not sold to, and a full-height hero on every page makes the site feel like five homepages stacked. */ .pagehead{ background:var(--black);color:var(--offwhite); padding:150px 0 78px;position:relative; } .pagehead h1{ font-family:var(--serif);font-weight:300;line-height:1.12; font-size:clamp(36px,7.5vw,60px);margin-bottom:18px; } .pagehead .lede{color:var(--ivory);opacity:.84;max-width:46ch} .pagehead .eyebrow{color:var(--gold)} /* ============================================================ BLOCKS ============================================================ */ .dark{background:var(--black);color:var(--offwhite)} .dark h2,.dark h3{color:var(--offwhite)} .dark .lede,.dark p{color:var(--ivory);opacity:.86} .tint{background:var(--ivory)} /* film player */ .player{ aspect-ratio:16/9;background:#000; border:1px solid rgba(248,246,242,.13); display:flex;align-items:center;justify-content:center; } .player iframe{width:100%;height:100%;border:0} .player .placeholder{ color:var(--gray);font-size:12px;letter-spacing:.18em;text-transform:uppercase; padding:0 26px;text-align:center;line-height:2; } /* pull quote */ .pull{ font-family:var(--serif); font-size:clamp(24px,4.6vw,32px); line-height:1.4;font-style:italic; margin:44px 0;padding-left:26px; border-left:1px solid var(--gold); } /* stacked list — used for deliverables, steps, FAQ */ .stack{margin-top:44px;border-top:1px solid rgba(17,17,17,.11)} .stack > div{padding:26px 0;border-bottom:1px solid rgba(17,17,17,.11)} .stack h3{margin-bottom:6px} .stack p{font-size:16px;color:#3d3a36;margin:0} .dark .stack{border-top-color:rgba(248,246,242,.15)} .dark .stack > div{border-bottom-color:rgba(248,246,242,.15)} .dark .stack p{color:var(--ivory);opacity:.8} /* numbered steps (Experience) */ .step{position:relative;padding-left:56px!important} .step .num{ position:absolute;left:0;top:26px; font-family:var(--serif);font-size:26px;color:var(--gold);line-height:1; } /* two-up image + text */ .split{display:grid;gap:40px;align-items:center} .portrait{ display:block;width:100%;height:auto; aspect-ratio:4/5;object-fit:cover; background:linear-gradient(160deg,#e4ddd2,#cfc4b4); } /* gallery grid */ .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:44px} .grid img{ width:100%;height:100%;aspect-ratio:3/2;object-fit:cover; background:linear-gradient(160deg,#e4ddd2,#cfc4b4); } .grid figure{margin:0} .grid figcaption{ font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--gray);margin-top:9px; } @media(min-width:760px){ .grid{grid-template-columns:repeat(3,1fr);gap:14px} } /* full-bleed atmosphere band */ .band{ display:block;width:100%;height:38vh;min-height:240px;max-height:420px; object-fit:cover;object-position:center 40%;background:#111; } @media (max-width:640px){ .band{height:30vh;min-height:200px} } /* testimonial */ .testimonial{background:var(--ivory);text-align:center} .testimonial blockquote{ font-family:var(--serif); font-size:clamp(23px,4.4vw,31px); line-height:1.5;font-style:italic; max-width:22ch;margin:0 auto 26px; } .testimonial cite{ font-style:normal;font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--gray); } /* closing CTA band */ .closer{background:var(--gold);color:var(--black);text-align:center;padding:78px 0} .closer .eyebrow{color:rgba(17,17,17,.6)} .closer h2{margin-bottom:14px} .closer p{max-width:44ch;margin:0 auto} /* ============================================================ FORMS ============================================================ */ form{margin-top:44px} .field{margin-bottom:26px} label{ display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--ivory);opacity:.72;margin-bottom:9px; } input,textarea,select{ width:100%;background:transparent;border:0; border-bottom:1px solid rgba(248,246,242,.28); color:var(--offwhite); font-family:var(--sans);font-weight:300; font-size:16px; /* 16px min prevents iOS zoom-on-focus */ padding:11px 0;border-radius:0;-webkit-appearance:none; } select{background-image:none} select option{background:var(--black);color:var(--offwhite)} input:focus,textarea:focus,select:focus{outline:0;border-bottom-color:var(--gold)} textarea{resize:vertical;min-height:82px} input::placeholder,textarea::placeholder{color:rgba(248,246,242,.3)} .form-note{font-size:13px;color:var(--gray);margin-top:26px;line-height:1.6} button.cta{cursor:pointer;font-family:var(--sans);width:100%} .field-row{display:grid;gap:0} @media(min-width:640px){ .field-row{grid-template-columns:1fr 1fr;gap:26px} } /* ============================================================ FOOTER Deliberately has NO link to /film. The landing page is ad traffic only — "Zero Competition." If you ever add it here, the ad page starts competing with the site in search and the funnel blurs. ============================================================ */ .foot{background:var(--black);color:var(--ivory);padding:64px 0 44px} .foot a{color:var(--ivory);text-decoration:none;opacity:.72;transition:opacity .2s,color .2s} .foot a:hover{opacity:1;color:var(--gold)} .foot-top{ display:flex;flex-direction:column;gap:34px; padding-bottom:34px;border-bottom:1px solid rgba(248,246,242,.14); } .foot .brand{color:var(--offwhite)} .foot .brand span{color:rgba(248,246,242,.55)} .foot-nav{display:flex;flex-wrap:wrap;gap:14px 28px} .foot-nav a{font-size:11px;letter-spacing:.19em;text-transform:uppercase} .foot-meta{ display:flex;flex-direction:column;gap:10px; padding-top:28px;font-size:12px;color:var(--gray); } .foot-meta a{font-size:12px;color:var(--gray)} @media(min-width:760px){ .foot-top{flex-direction:row;align-items:flex-start;justify-content:space-between} .foot-meta{flex-direction:row;justify-content:space-between;align-items:center} } /* ============================================================ DESKTOP + MOTION ============================================================ */ @media(min-width:760px){ body{font-size:18px} section{padding:118px 0} .hero{align-items:center;padding:0} .hero .sub{font-size:21px;max-width:36ch} .split{grid-template-columns:1fr 1.25fr;gap:56px} .split.reverse{grid-template-columns:1.25fr 1fr} button.cta{width:auto} .pagehead{padding:184px 0 96px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }