/* =================================================================== MisterECuts — design system Exclusive barber lounge. Playfair Display over Inter on a WARM charcoal (#1C1815, brown-based) with cream type and real brass. Why warm dark and not white: the brass only works here. On white the brightest usable gold measured 2.95:1 and looked bronze; on this ground #C9A227 measures 7.29:1 and reads as actual gold. Warm dark is also a different experience to the cold #0A0A0B we tried first - that one was genuinely harsh; this is leather and low light. Backups: site.css.white-backup (white/black/gold) and site.css.dark-backup (the original cold-black version). ANIMATION SAFETY RULE (read before editing the reveal section): Every "hidden" state is scoped under .js-reveal, a class JavaScript puts on itself. No JS -> no .js-reveal -> nothing is hidden. The shown state uses .is-in and MUST outrank the hidden state. All hide selectors here are attribute-only ([data-reveal] etc.) so their specificity stays flat and predictable — do not introduce type selectors or deep descendant chains into that list. =================================================================== */ :root{ --ink:#1C1815; /* warm charcoal - brown-based, not the cold #0A0A0B */ --navy:#1C1815; /* legacy alias */ --navy-2:#241F1B; --on-dark:#F0EAE0; --muted-dark:#A2968A; --ink-2:#241F1B; --ink-3:#2C2620; --ivory:#F0EAE0; /* warm cream, not stark white */ --muted:#A2968A; --gold:#C9A227; /* real brass - 7.29:1 here. Impossible on white. */ --gold-lit:#E0BE4E; --line:rgba(240,234,224,.15); --line-2:rgba(240,234,224,.07); --ease:cubic-bezier(.22,.7,.28,1); --wrap:1240px; --radius:2px; } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--ink)} body{ margin:0;background:var(--ink);color:var(--ivory); font:400 17px/1.72 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} ::selection{background:var(--gold);color:var(--ink)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px} .wrap-tight{max-width:900px;margin:0 auto;padding:0 32px} /* ---- type ------------------------------------------------------- */ h1,h2,h3,.display{ font-family:'Playfair Display','Iowan Old Style',Georgia,serif; font-weight:700;letter-spacing:-.01em;line-height:1.08;margin:0; } h1{font-size:clamp(46px,7vw,104px)} h2{font-size:clamp(34px,4.6vw,64px)} h3{font-size:clamp(21px,2vw,27px)} em{font-style:italic;color:var(--gold)} /* These set font-family and font-size but no weight, so without this they inherit body's 400 — which is how the price list ended up thin while the headings looked fine. Any new display element must state its weight too. */ .brand-name,.svc-name,.svc-price,.vip-price,.rating-num,.stat-fig, .quote,.rev blockquote,summary,.marquee-item,.quote-mark{font-weight:600} /* dark sections need their own muted tone */ .reviews .sec-head p,.band .lede{color:var(--muted-dark)} .reviews .eyebrow,.band .num{color:var(--gold)} .rev cite{color:var(--muted-dark)} .eyebrow{ font:600 11px/1 'Inter',sans-serif;letter-spacing:.3em;text-transform:uppercase; color:var(--gold);margin:0 0 26px;display:flex;align-items:center;gap:16px; } .eyebrow::after{content:'';flex:1;height:1px;background:var(--line);max-width:120px} .eyebrow-plain{display:inline-block} .eyebrow-plain::after{display:none} .lede{font-size:20px;color:var(--muted);max-width:52ch} .body-lg{font-size:18px} p{margin:0 0 20px} p:last-child{margin-bottom:0} .num{ font:600 11px/1 'Inter',sans-serif;letter-spacing:.28em;color:var(--gold); display:block;margin-bottom:18px; } /* placeholder marker — unconfirmed facts */ .ph{border-bottom:1px dashed var(--gold);padding-bottom:1px;color:inherit} /* ---- buttons ---------------------------------------------------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px; font:600 12px/1 'Inter',sans-serif;letter-spacing:.18em;text-transform:uppercase; padding:19px 34px;border:1px solid var(--gold);color:var(--gold); text-decoration:none;cursor:pointer;background:none;white-space:nowrap; overflow:hidden;transition:color .5s var(--ease),border-color .5s var(--ease); } .btn::before{ content:'';position:absolute;inset:0;background:var(--gold); transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1; } .btn:hover{color:var(--ink)} .btn:hover::before{transform:scaleY(1);transform-origin:top} .btn-solid{background:var(--gold);color:var(--ink);border-color:var(--gold)} .btn-solid::before{background:var(--ivory)} .btn-solid:hover{color:var(--ink);border-color:var(--ivory)} .btn-ghost{border-color:var(--line);color:var(--ivory)} .btn-ghost::before{background:var(--ivory)} .btn-ghost:hover{color:var(--ink);border-color:var(--ivory)} /* ---- scroll progress hairline ----------------------------------- */ .progress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:200; background:linear-gradient(90deg,var(--gold),var(--gold-lit)); } /* ---- draft bar -------------------------------------------------- */ .draft{ background:var(--ink-3);color:var(--muted);text-align:center; font:400 12px/1.5 'Inter',sans-serif;letter-spacing:.04em;padding:11px 24px; border-bottom:1px solid var(--line-2); } /* --gold-lit (darker) not --gold here: the draft bar sits on --ink-3, where plain --gold measured 4.24:1 against a 4.5 requirement at this size. */ .draft b{color:var(--gold-lit);letter-spacing:.24em;text-transform:uppercase;font-weight:500;font-size:10.5px} .draft span{border-bottom:1px dashed var(--gold)} /* ---- nav -------------------------------------------------------- */ .nav{ position:sticky;top:0;z-index:100; background:rgba(28,24,21,.80);backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid transparent; transition:border-color .5s var(--ease),background .5s var(--ease); } .nav.is-stuck{border-bottom-color:var(--line);background:rgba(28,24,21,.94)} /* Nav is sized around the logo, not the other way round — the mark is the brand element here and the wordmark beside it is support. */ .nav-in{display:flex;align-items:center;gap:40px;height:106px;transition:height .5s var(--ease)} .nav.is-stuck .nav-in{height:84px} .brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto} /* The logo is a full-colour illustrated badge, roughly square. It carries its own wordmark, but at nav size that text is unreadable — so the mark does recognition and the text beside it does legibility. Both earn their place. ~27% of its opaque pixels are near-black; it still reads on #FFFFFF because the chrome outline carries the silhouette. Checked on the real background, not assumed — do not "fix" it onto a light plate without looking first. */ .logo-mark{ height:74px;width:auto;flex:none;display:block; transition:height .5s var(--ease); } .nav.is-stuck .logo-mark{height:58px} footer .logo-mark{height:150px} .brand-name{ font-family:'Playfair Display',Georgia,serif;font-size:20px;letter-spacing:.02em;line-height:1; } .brand-sub{ display:block;font:500 8.5px/1 'Inter',sans-serif;letter-spacing:.34em; text-transform:uppercase;color:var(--muted);margin-top:6px; } .nav-links{display:flex;gap:34px;list-style:none;margin:0;padding:0} .nav-links a{ position:relative;text-decoration:none; font:600 11.5px/1 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);padding:6px 0;transition:color .4s var(--ease); } .nav-links a::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold); transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease); } .nav-links a:hover{color:var(--ivory)} .nav-links a:hover::after{transform:scaleX(1);transform-origin:left} .nav-links a.is-active{color:var(--ivory)} .nav-links a.is-active::after{transform:scaleX(1)} .nav .btn{padding:14px 22px} .nav-toggle{ display:none;background:none;border:1px solid var(--line);color:var(--ivory); padding:11px 15px;font:500 11px 'Inter',sans-serif;letter-spacing:.18em; text-transform:uppercase;cursor:pointer; } /* ---- sections --------------------------------------------------- */ section{padding:132px 0;position:relative} .sec-head{max-width:720px;margin-bottom:70px} .sec-head .lede{margin-top:26px} .rule{height:1px;background:var(--line);transform-origin:left} /* ---- hero ------------------------------------------------------- */ .hero{padding:110px 0 0;position:relative} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center} .hero h1{margin-bottom:34px} .hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:42px} .hero-fig{position:relative;aspect-ratio:4/4.7} .hero-fig img{width:100%;height:100%;object-fit:cover} .hero-frame{position:absolute;inset:-14px;border:1px solid var(--line);pointer-events:none;z-index:3} /* ---- rating cluster --------------------------------------------- */ .rating{display:flex;align-items:baseline;gap:16px;margin-top:40px;padding-top:30px;border-top:1px solid var(--line)} .rating-num{font-family:'Playfair Display',Georgia,serif;font-size:44px;line-height:1;color:var(--gold)} .rating-meta{font:400 14px/1.5 'Inter',sans-serif;color:var(--muted)} .rating-meta b{display:block;color:var(--ivory);font-weight:500;letter-spacing:.02em} .stars{color:var(--gold);letter-spacing:.18em;font-size:15px;line-height:1.4} /* ---- stat row --------------------------------------------------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat{padding:44px 34px;border-right:1px solid var(--line)} .stat:last-child{border-right:0} .stat-fig{font-family:'Playfair Display',Georgia,serif;font-size:clamp(34px,3.6vw,50px);line-height:1;color:var(--gold);margin-bottom:14px} .stat-lbl{font:600 10.5px/1.5 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)} /* ---- marquee ---------------------------------------------------- */ .marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0} .marquee-track{display:flex;width:max-content;animation:marq 42s linear infinite} .marquee-item{ font-family:'Playfair Display',Georgia,serif;font-size:clamp(22px,2.4vw,32px); color:var(--muted);white-space:nowrap;display:flex;align-items:center; } .marquee-item::after{content:'✦';color:var(--gold);font-size:.5em;margin:0 42px} @keyframes marq{to{transform:translateX(-50%)}} .marquee:hover .marquee-track{animation-play-state:paused} /* ---- service list ----------------------------------------------- */ .svc-list{border-top:1px solid var(--line)} /* Each row is a direct link to that service's own GoHighLevel calendar, so the customer picks the service in OUR design and only the date/time step is GHL. This replaced an embedded service-menu widget whose second step measured 1.06:1 and 1.36:1 contrast and could not be reliably themed from outside. */ .svc{ display:grid;grid-template-columns:auto 1fr auto auto;gap:32px;align-items:baseline; padding:34px 0;border-bottom:1px solid var(--line); text-decoration:none;color:inherit; transition:padding-left .55s var(--ease); } .svc-book{ font:600 11px/1 'Inter',sans-serif;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);border:1px solid var(--gold);padding:12px 20px;white-space:nowrap; transition:background .4s var(--ease),color .4s var(--ease); } .svc:hover .svc-book{background:var(--gold);color:var(--ink)} .svc:hover{padding-left:14px} .svc-idx{font:500 11px/1 'Inter',sans-serif;letter-spacing:.2em;color:var(--gold);padding-top:8px} .svc-name{font-family:'Playfair Display',Georgia,serif;font-size:clamp(23px,2.2vw,30px);line-height:1.1;transition:color .4s var(--ease)} .svc:hover .svc-name{color:var(--gold)} .svc-desc{color:var(--muted);font-size:15.5px;margin:12px 0 0;max-width:56ch} .svc-price{font-family:'Playfair Display',Georgia,serif;font-size:clamp(23px,2.2vw,30px);color:var(--gold);white-space:nowrap} /* ---- VIP feature ------------------------------------------------ */ .vip{ position:relative;border:1px solid var(--gold);padding:64px;margin-bottom:60px; display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center; background:linear-gradient(160deg,rgba(138,106,40,.07),transparent 62%); } .vip-name{font-family:'Playfair Display',Georgia,serif;font-size:clamp(30px,3.4vw,44px);line-height:1.06;margin:0 0 20px} .vip-desc{color:var(--muted);max-width:52ch;margin:0} .vip-meta{text-align:right} .vip-price{font-family:'Playfair Display',Georgia,serif;font-size:28px;color:var(--gold);margin-bottom:24px;white-space:nowrap} /* ---- cards / principles ----------------------------------------- */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)} .card{background:var(--ink);padding:52px 42px;transition:background .55s var(--ease)} .card:hover{background:var(--ink-2)} .card h3{margin:22px 0 16px} .card p{color:var(--muted);font-size:15.5px;margin:0} /* ---- figures / gallery ------------------------------------------ */ .curtain{position:relative;overflow:hidden} .curtain::after{ content:'';position:absolute;inset:0;background:var(--gold);z-index:2; transform:scaleX(0);transform-origin:right; } .fig{margin:0;position:relative} .fig img{width:100%;height:100%;object-fit:cover} .fig-cap{margin:18px 0 0;font-size:14px;color:var(--muted);letter-spacing:.02em} .ba{display:grid;grid-template-columns:1fr 1fr;gap:2px} .ba-item{margin:0;position:relative;aspect-ratio:3/4} .ba-item img{width:100%;height:100%;object-fit:cover} .ba-tag{ position:absolute;left:0;top:0;z-index:3; font:500 10px/1 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase; background:var(--ink);color:var(--muted);padding:11px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); } .ba-tag-after{background:var(--gold);color:var(--ink);border-color:var(--gold)} .gal-2{display:grid;grid-template-columns:1fr 1fr;gap:2px} .gal-2 .fig{aspect-ratio:3/4} /* ---- quote ------------------------------------------------------ */ .quote{ font-family:'Playfair Display',Georgia,serif;font-size:clamp(26px,3.2vw,44px); line-height:1.25;margin:0;max-width:20ch; } .quote-wrap{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:start} .quote-mark{font-family:'Playfair Display',Georgia,serif;font-size:110px;line-height:.7;color:var(--gold)} .quote cite{ display:block;margin-top:30px;font:500 11px/1 'Inter',sans-serif; letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-style:normal; } /* ---- reviews ---------------------------------------------------- */ .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)} .rev{background:var(--ink);padding:46px 38px;display:flex;flex-direction:column} .rev blockquote{margin:20px 0 auto;font-family:'Playfair Display',Georgia,serif;font-size:20px;line-height:1.4} .rev cite{display:block;margin-top:32px;font:500 10.5px/1.6 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-style:normal} /* ---- detail rows (contact / hours) ------------------------------ */ .rows{border-top:1px solid var(--line)} .row{display:grid;grid-template-columns:210px 1fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--line)} .row dt{font:500 10.5px/1.8 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)} .row dd{margin:0;font-size:17px} .row dd a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .4s var(--ease)} .row dd a:hover{border-color:var(--gold)} .row-hi dd{color:var(--gold)} /* ---- faq -------------------------------------------------------- */ .faq{border-top:1px solid var(--line)} details{border-bottom:1px solid var(--line)} summary{ cursor:pointer;list-style:none;padding:32px 60px 32px 0;position:relative; font-family:'Playfair Display',Georgia,serif;font-size:clamp(19px,1.8vw,24px); transition:color .4s var(--ease); } summary:hover{color:var(--gold)} summary::-webkit-details-marker{display:none} summary::after{ content:'';position:absolute;right:6px;top:50%;width:14px;height:1px;background:var(--gold); } summary::before{ content:'';position:absolute;right:12px;top:50%;width:1px;height:14px;margin-top:-7px; background:var(--gold);transition:transform .4s var(--ease); } details[open] summary::before{transform:scaleY(0)} details p{margin:0 0 32px;color:var(--muted);max-width:68ch} /* ---- GHL embed --------------------------------------------------- */ /* The widget is cross-origin, so its interior cannot be themed from here. Rather than fight that, it sits on a deliberate ivory plate — it reads as an intentional panel instead of a stray white rectangle on a black page. */ /* The widget renders light and cannot be themed from here (cross-origin). So instead of a stray white slab, it gets a deliberate mount: a gold hairline, dark matting and a label — it reads as a menu card set into the page. This is framing, not theming. Real theming happens in GHL: Calendars -> the service group -> appearance / primary colour. */ .embed{ background:var(--ink-2); border:1px solid var(--gold); padding:14px; position:relative; } .embed::before{ content:'Book · Mister E Cuts'; display:block; font:500 10.5px/1 'Inter',sans-serif;letter-spacing:.26em;text-transform:uppercase; color:var(--gold);padding:8px 4px 16px; } .embed-note{ margin:16px 0 0;font-size:13.5px;color:var(--muted);letter-spacing:.02em; } .embed iframe{ display:block;width:100%;border:0; /* overflow:auto, NOT hidden. When form_embed.js runs it sets an exact height and no scrollbar ever appears. When it does NOT run, this is what keeps the time slots and the booking form reachable instead of clipped. Measured: the script sets overflow:auto inline itself, so this only differs on the failure path — which is precisely the path that cost 178 pages their booking form. */ overflow:auto; /* Safety floor — see the comment beside the iframe in services.html. form_embed.js sets an exact height once it loads; this only matters when it does not. Do not remove it to tidy up whitespace. */ min-height:760px; } @media (max-width:640px){ .embed iframe{min-height:900px} } /* ---- photo request slot ----------------------------------------- */ .slot{ border:1px dashed var(--gold);padding:52px 32px;text-align:center;color:var(--gold); font:400 14.5px/1.7 'Inter',sans-serif;background:rgba(138,106,40,.05); } /* ---- CTA band --------------------------------------------------- */ .band{background:var(--ink-2);color:var(--ivory); text-align:center;padding:150px 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:radial-gradient(ellipse at 50% 0%,rgba(138,106,40,.10),transparent 62%); } .band h2{margin-bottom:26px} .band .lede{margin:0 auto 44px} /* ---- footer ----------------------------------------------------- */ footer{border-top:1px solid var(--line);padding:96px 0 44px;color:var(--muted);font-size:15px} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:72px} footer h4{font:500 10.5px/1 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 24px} footer ul{list-style:none;margin:0;padding:0} footer li{margin-bottom:13px} footer a{text-decoration:none;transition:color .4s var(--ease)} footer a:hover{color:var(--ivory)} .foot-base{ border-top:1px solid var(--line);padding-top:32px; display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; font-size:12px;letter-spacing:.06em; } /* =================================================================== REVEALS — see the safety note at the top of this file. Hide selectors are attribute-only, so specificity stays flat: hide .js-reveal [data-x] = (0,2,0) show .js-reveal [data-x].is-in = (0,3,0) <- always wins =================================================================== */ .js-reveal [data-reveal]{opacity:0;transform:translateY(30px)} .js-reveal [data-reveal].is-in{ opacity:1;transform:none; transition:opacity 1s var(--ease),transform 1s var(--ease); } /* line-masked headings — the signature move. Each line is authored as text so no fragile JS splitting. */ .js-reveal [data-mask] .ln{display:block;overflow:hidden} .js-reveal [data-mask] .ln > span{display:block;transform:translateY(110%)} .js-reveal [data-mask].is-in .ln > span{ transform:none;transition:transform 1.15s var(--ease); } .js-reveal [data-mask].is-in .ln:nth-child(2) > span{transition-delay:.09s} .js-reveal [data-mask].is-in .ln:nth-child(3) > span{transition-delay:.18s} .js-reveal [data-mask].is-in .ln:nth-child(4) > span{transition-delay:.27s} /* gold curtain wipes off the image */ .js-reveal [data-curtain]::after{transform:scaleX(1)} .js-reveal [data-curtain].is-in::after{ transform:scaleX(0);transition:transform 1.15s var(--ease); } .js-reveal [data-curtain] img{transform:scale(1.14)} .js-reveal [data-curtain].is-in img{transform:scale(1);transition:transform 1.9s var(--ease)} /* hairline rules draw in */ .js-reveal [data-draw]{transform:scaleX(0)} .js-reveal [data-draw].is-in{transform:scaleX(1);transition:transform 1.2s var(--ease)} /* parallax layers are driven by JS transform; nothing to hide */ [data-parallax]{will-change:transform} @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} html{scroll-behavior:auto} } /* ---- responsive -------------------------------------------------- */ @media (max-width:1040px){ .nav-links{display:none} .nav-toggle{display:block} .nav-in{gap:18px} .hero-grid{grid-template-columns:1fr;gap:52px} .hero{padding-top:64px} .hero-fig{aspect-ratio:4/3.6;max-height:520px} .stats{grid-template-columns:1fr 1fr} .stat:nth-child(2){border-right:0} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)} .grid-3,.rev-grid{grid-template-columns:1fr} .vip{grid-template-columns:1fr;gap:34px;padding:44px 34px} .vip-meta{text-align:left} .quote-wrap{grid-template-columns:1fr;gap:18px} .quote{max-width:none} section{padding:92px 0} .foot-grid{grid-template-columns:1fr 1fr;gap:40px} } @media (max-width:640px){ body{font-size:16px} .wrap,.wrap-tight{padding:0 20px} .nav .btn{padding:12px 15px;font-size:10.5px;letter-spacing:.14em} .nav-in{height:74px;gap:10px} .brand-sub{display:none} .brand{gap:9px} .logo-mark,.nav.is-stuck .logo-mark{height:40px} footer .logo-mark{height:74px} .brand-name{font-size:17px} .stats{grid-template-columns:1fr} .stat{border-right:0;border-bottom:1px solid var(--line)} .svc{grid-template-columns:auto 1fr;gap:18px} .svc-price{grid-column:2;margin-top:10px} .ba,.gal-2{grid-template-columns:1fr} .row{grid-template-columns:1fr;gap:8px} .foot-grid{grid-template-columns:1fr;gap:36px} .hero-cta .btn{width:100%} section{padding:76px 0} .vip{padding:34px 24px} .card{padding:40px 28px} }