/* ============================================================ BRANDBAKER — Growth Marketing one-screen site Forest base (../assets) · mouse-reactive fog · mockup-tuned type ============================================================ */ /* fonts loaded via in (preconnect + display=swap) for performance */ :root{ --white:#ffffff; --forest-deep:#1b231c; --line: rgba(255,255,255,.60); --line-soft: rgba(255,255,255,.20); --glass: rgba(20,26,20,.30); --glass-strong: rgba(17,23,17,.48); --pad-x: clamp(36px, 7vw, 130px); --stack-w: clamp(600px, 52vw, 780px); --reviews-w: min(92vw, 1500px); --fog-shift-x:0px; --fog-shift-y:0px; --ease: cubic-bezier(.16,.84,.34,1); } *{ box-sizing:border-box; margin:0; padding:0; } html,body{ height:auto; min-height:100%; } body{ font-family:'Inter',system-ui,sans-serif; background:#0c0f0c; color:#fff; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* robust flow layout: content stacks & scrolls; bg layers stay fixed. On tall viewports the hero grows to fill, so it still reads as one screen. */ .page{ position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; } /* ---------- LAYER 1: forest (website background, static) ---------- */ .bg-forest{ position:fixed; inset:0; background:#1b231c url('../assets/forest.webp?v=3') center/cover no-repeat; filter:saturate(1.1) brightness(1.0) contrast(1.13); z-index:0; } /* ---------- LAYER 2: fog (only this moves, opposite to the mouse) ---------- */ .fog{ position:fixed; z-index:1; inset:-16%; background:url('../assets/fog.webp') center/cover no-repeat; pointer-events:none; will-change:transform; opacity:0; } .fog-a{ background-size:130% auto; background-position:center 80%; transform: translate3d(var(--fog-shift-x), var(--fog-shift-y), 0); animation: fogIn 2.4s var(--ease) .4s forwards, driftA 50s ease-in-out infinite; opacity:.37; } .fog-b{ background-size:172% auto; background-position:32% 90%; transform: translate3d(calc(var(--fog-shift-x) * 2), calc(var(--fog-shift-y) * 1.8), 0); animation: fogIn 2.8s var(--ease) .6s forwards, driftB 72s ease-in-out infinite; opacity:.26; filter:blur(1px); mix-blend-mode:screen; } @keyframes fogIn{ from{opacity:0} } @keyframes driftA{ 0%,100%{background-position:center 80%} 50%{background-position:57% 76%} } @keyframes driftB{ 0%,100%{background-position:32% 90%} 50%{background-position:66% 85%} } /* legibility tint — light */ .tint{ position:fixed; inset:0; z-index:2; pointer-events:none; background: linear-gradient(112deg, rgba(8,11,8,.36) 0%, rgba(8,11,8,.05) 30%, rgba(8,11,8,0) 52%), linear-gradient(0deg, rgba(8,11,8,.42) 0%, rgba(8,11,8,0) 26%), linear-gradient(180deg, rgba(8,11,8,.18) 0%, rgba(8,11,8,0) 14%); } /* ---------- hero ---------- */ .hero{ position:relative; z-index:15; flex:1 0 auto; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(24px,3vh,40px) var(--pad-x) clamp(22px,3vh,38px); } .toprow{ align-self:stretch; width:100%; display:flex; justify-content:space-between; align-items:center; } .brand{ display:inline-flex; align-items:center; text-decoration:none; opacity:0; transform:translateY(-12px); animation: fadeDown .9s var(--ease) .7s forwards; } .brand img{ height:clamp(26px,2.6vw,42px); width:auto; display:block; filter:drop-shadow(0 2px 16px rgba(0,0,0,.5)); } .cta{ font:600 clamp(10px,.72vw,12px)/1 'Inter'; letter-spacing:.01em; color:#fff; text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:clamp(8px,1.1vh,12px) clamp(14px,1.3vw,22px); background:rgba(255,255,255,.05); backdrop-filter:blur(3px); transition:background .4s var(--ease), border-color .4s var(--ease); white-space:nowrap; opacity:0; transform:translateY(-12px); animation: fadeDown .9s var(--ease) .8s forwards; } .cta:hover{ background:rgba(255,255,255,.16); border-color:#fff; } /* headline (sized to mockup ≈ 4vw) + fine rule = headline width */ .headline-wrap{ align-self:flex-start; margin-top:clamp(16px,2.6vh,36px); } .line-mask{ overflow:hidden; display:inline-block; vertical-align:top; padding:.04em 0; } .headline{ font-weight:800; font-size:60px; line-height:1; letter-spacing:-.004em; text-transform:uppercase; white-space:nowrap; text-shadow:0 6px 40px rgba(0,0,0,.42); } .headline .word{ display:inline-block; transform:translateY(116%); animation: rise 1.05s var(--ease) forwards; } @keyframes rise{ to{ transform:translateY(0); } } .head-rule{ height:1px; width:100%; background:rgba(255,255,255,.55); margin-top:clamp(16px,2.4vh,30px); transform-origin:left; transform:scaleX(0); animation: ruleIn 1s var(--ease) 1.05s forwards; } @keyframes ruleIn{ to{ transform:scaleX(1); } } .subline{ align-self:flex-start; margin-top:clamp(14px,2vh,24px); margin-left:clamp(30px,3.6vw,72px); max-width:46ch; font-weight:400; font-size:clamp(13px,1.02vw,17px); line-height:1.55; letter-spacing:.012em; color:rgba(255,255,255,.86); text-shadow:0 2px 18px rgba(0,0,0,.45); text-wrap:balance; opacity:0; transform:translateY(18px); animation: fadeUp 1s var(--ease) .95s forwards; } /* ---------- centered stack: refs + tabs + tab-panel ---------- */ .stack{ align-self:center; width:var(--stack-w); display:flex; flex-direction:column; margin-top:clamp(14px,2.2vh,28px); position:relative; } /* founder photo — sits behind the tabs + panel, anchored to the right */ .founder{ position:absolute; z-index:-1; pointer-events:none; user-select:none; -webkit-user-drag:none; right:clamp(-260px,-14.5vw,-110px); bottom:clamp(64px,8vh,128px); height:clamp(278px,40vh,410px); width:auto; filter:drop-shadow(0 16px 44px rgba(0,0,0,.5)); -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%); mask-image:linear-gradient(to bottom, #000 80%, transparent 100%); } /* references marquee — same width as services, fades on BOTH edges, infinite. subtle dark band so the WHITE logos stay visible over bright fog. */ .refs{ align-self:flex-start; width:var(--stack-w); margin-top:clamp(14px,2.2vh,24px); overflow:hidden; position:relative; height:clamp(46px,5.4vh,56px); -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); opacity:0; animation: fadeUp 1s var(--ease) 1.2s forwards; } .refs-track{ display:flex; align-items:center; gap:clamp(20px,2.2vw,38px); width:max-content; height:100%; padding:0 clamp(16px,2vw,28px); animation: marquee 42s linear infinite; } /* logos run continuously — no hover pause */ @keyframes marquee{ to{ transform:translateX(-50%); } } .ref{ font-weight:600; font-size:clamp(13px,1.05vw,18px); letter-spacing:.01em; color:rgba(255,255,255,.46); white-space:nowrap; user-select:none; transition:color .35s var(--ease); } .ref:hover{ color:rgba(255,255,255,.92); } .ref.italic{ font-style:italic; } .ref.light{ font-weight:300; } .ref.wide{ letter-spacing:.18em; font-weight:500; } .ref-logo{ height:clamp(18px,2.2vh,25px); width:auto; opacity:1; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(0,0,0,.45)); transition:opacity .35s var(--ease); user-select:none; -webkit-user-drag:none; } .ref-logo:hover{ opacity:1; } .ref-logo.ref-dim{ opacity:.6; } /* ---------- services as a TAB MENU ---------- */ .tabs{ display:flex; width:100%; gap:clamp(8px,.7vw,12px); margin-top:0; } .services-label{ width:100%; text-align:center; font-weight:500; font-size:clamp(9px,.68vw,11px); letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.52); margin-bottom:clamp(12px,1.7vh,18px); opacity:0; animation: fadeUp .8s var(--ease) 1.1s forwards; } .tab{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:clamp(9px,1.25vh,14px); background:none; border:none; padding:0; cursor:pointer; user-select:none; opacity:0; transform:translateY(16px); animation: fadeUp .8s var(--ease) forwards; } .tab-logo{ height:clamp(26px,3.3vh,37px); display:flex; align-items:center; justify-content:center; pointer-events:none; } .tab-logo img{ height:100%; width:auto; max-width:100%; object-fit:contain; display:block; } .tab-logo svg{ height:100%; width:auto; } .tab-box{ width:100%; display:flex; align-items:center; justify-content:center; padding:clamp(7px,.95vh,11px) clamp(8px,1vw,14px); border:1px solid var(--line-soft); border-radius:10px; background:rgba(255,255,255,.05); backdrop-filter:blur(5px); font:500 clamp(12.5px,.98vw,16px)/1 'Inter'; color:rgba(255,255,255,.80); white-space:nowrap; pointer-events:none; transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .tab:hover .tab-box{ color:#fff; border-color:var(--line); } .tab.active .tab-box{ background:rgba(255,255,255,.18); border-color:#fff; color:#fff; font-weight:600; } .tab-panel{ width:min(calc(var(--stack-w) * 1.2), 94vw); align-self:center; margin-top:clamp(26px,3.8vh,48px); background:var(--glass-strong); backdrop-filter:blur(16px) saturate(1.08); border:1px solid var(--line); border-radius:14px; padding:clamp(15px,1.9vh,22px) clamp(20px,1.9vw,32px); min-height:clamp(70px,8vh,98px); display:flex; flex-direction:column; justify-content:center; gap:clamp(10px,1.3vh,15px); box-shadow:0 24px 56px rgba(0,0,0,.28); opacity:0; transform:translateY(16px); animation: fadeUp .9s var(--ease) 1.45s forwards; } .panel-cta{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font:600 clamp(9px,.66vw,10.5px)/1 'Inter'; color:#fff; text-decoration:none; border:1px solid var(--line); border-radius:9px; padding:clamp(7px,.9vh,10px) clamp(11px,1vw,16px); background:rgba(255,255,255,.07); transition:background .35s var(--ease), border-color .35s var(--ease); } .panel-cta:hover{ background:rgba(255,255,255,.18); border-color:#fff; } .panel-cta svg{ width:11px; height:11px; } .tab-panel-inner{ transition:opacity .3s var(--ease); } .tab-panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:clamp(8px,1.2vh,14px); } .tab-panel-title{ font-weight:700; font-size:clamp(11px,.8vw,15px); letter-spacing:-.01em; } .tab-panel-price{ font-weight:700; font-size:clamp(10px,.74vw,13px); white-space:nowrap; } .tab-panel-price span{ font-weight:400; color:rgba(255,255,255,.62); font-size:.8em; } .tab-panel-desc{ font-weight:400; font-size:clamp(9.5px,.7vw,11.5px); line-height:1.5; color:rgba(255,255,255,.84); text-wrap:pretty; } /* ---------- reviews: 75% width, centered, comfortable cards ---------- */ .reviews{ --rev-gap:clamp(12px,1.1vw,20px); align-self:center; width:var(--reviews-w); margin-top:clamp(30px,4.6vh,60px); position:relative; display:flex; align-items:stretch; gap:clamp(10px,1vw,18px); opacity:0; animation: fadeUp 1s var(--ease) 1.6s forwards; } .rev-viewport{ overflow:hidden; flex:1 1 auto; } .rev-track{ display:flex; gap:var(--rev-gap); align-items:stretch; transition:transform .6s var(--ease); will-change:transform; } .review{ flex:0 0 auto; width:calc((100% - 2 * var(--rev-gap)) / 3); background:var(--glass); backdrop-filter:blur(12px) saturate(1.05); border:1px solid var(--line-soft); border-radius:12px; padding:clamp(14px,1.6vh,18px) clamp(15px,1.1vw,19px); display:flex; flex-direction:column; } .review-text{ font-weight:400; font-size:clamp(10px,.66vw,12px); line-height:1.5; color:rgba(255,255,255,.88); text-wrap:pretty; flex:1; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; } .review-foot{ display:flex; align-items:center; gap:10px; margin-top:clamp(10px,1.2vh,14px); } .review-av{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--line-soft); background:rgba(255,255,255,.08); user-select:none; -webkit-user-drag:none; } .review-meta{ line-height:1.32; } .review-name{ font-weight:700; font-size:clamp(11px,.78vw,13px); } .review-firm{ font-weight:400; font-size:clamp(9.5px,.66vw,11.5px); color:rgba(255,255,255,.58); } .rev-arrow{ flex:0 0 auto; align-self:center; width:clamp(32px,2.3vw,38px); height:clamp(32px,2.3vw,38px); display:flex; align-items:center; justify-content:center; border:1px solid var(--line-soft); border-radius:50%; background:rgba(255,255,255,.05); color:#fff; cursor:pointer; transition:background .3s var(--ease), border-color .3s var(--ease); } .rev-arrow:hover{ background:rgba(255,255,255,.16); border-color:#fff; } .rev-arrow svg{ width:40%; height:40%; } /* ---------- certification badges (in flow, centered) ---------- */ .badges{ position:static; align-self:center; transform:none; margin:clamp(40px,5.5vh,80px) auto clamp(14px,1.8vh,24px); z-index:18; width:min(76vw, 760px); } .badges img{ width:100%; height:auto; display:block; filter:drop-shadow(0 10px 26px rgba(0,0,0,.40)); opacity:0; transform:translateY(16px); animation: fadeUp 1.1s var(--ease) 1.8s forwards; } /* ---------- footer ---------- */ .footer{ position:relative; width:100%; padding:0 var(--pad-x) clamp(18px,2.6vh,30px); display:flex; justify-content:space-between; align-items:center; z-index:18; opacity:0; animation: fadeUp 1s var(--ease) 1.7s forwards; } .legal{ display:flex; gap:clamp(13px,1.3vw,24px); } .legal a{ font-weight:400; font-size:clamp(10px,.74vw,12px); letter-spacing:.04em; color:#fff; text-decoration:none; transition:color .3s var(--ease); } .legal a:hover{ color:#fff; } .contact a{ font-weight:400; font-size:clamp(10px,.74vw,12px); letter-spacing:.04em; color:#fff; text-decoration:none; transition:color .3s var(--ease); } .contact a:hover{ color:#fff; } @keyframes fadeUp{ to{ opacity:1; transform:translateY(0);} } @keyframes fadeDown{ to{ opacity:1; transform:translateY(0);} } /* ---------- page transition overlay (single cover, slides away; CSS-driven load reveal) ---------- */ #transition{ position:fixed; inset:0; z-index:200; pointer-events:none; background:var(--forest-deep); display:flex; align-items:center; justify-content:center; transform:translateY(-100%); } #transition.intro{ animation: pageReveal 1.15s cubic-bezier(.76,0,.24,1); } @keyframes pageReveal{ 0%{transform:translateY(0)} 100%{transform:translateY(-100%)} } #transition.cover{ transform:translateY(0); transition:transform .7s cubic-bezier(.76,0,.24,1); pointer-events:auto; } #transition.reveal{ transform:translateY(-100%); transition:transform .7s cubic-bezier(.76,0,.24,1); } .trans-logo{ height:clamp(36px,4.4vh,56px); width:auto; opacity:.96; animation: transLogoFade 1.15s ease; } @keyframes transLogoFade{ 0%,48%{opacity:.96} 100%{opacity:0} } /* legal modal */ .legal-modal{ position:fixed; inset:0; z-index:150; background:rgba(10,13,10,.78); backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; } .legal-modal.open{ opacity:1; visibility:visible; } .legal-card{ position:relative; width:min(680px,84vw); max-height:78vh; overflow:auto; background:rgba(20,26,20,.6); border:1px solid var(--line-soft); border-radius:12px; padding:clamp(30px,4vw,52px); transform:translateY(24px); transition:transform .55s var(--ease); } .legal-modal.open .legal-card{ transform:translateY(0); } .legal-card h2{ font-size:clamp(24px,2.4vw,38px); font-weight:800; letter-spacing:-.02em; margin-bottom:.6em; } .legal-card h4{ font-size:16px; font-weight:700; letter-spacing:-.01em; margin:1.5em 0 .5em; color:#fff; } .legal-card h4:first-of-type{ margin-top:.3em; } .legal-card p{ font-size:14px; line-height:1.65; color:rgba(255,255,255,.78); margin-bottom:.85em; text-wrap:pretty; } .legal-card ul{ margin:.2em 0 1em 1.15em; padding:0; } .legal-card li{ font-size:14px; line-height:1.55; color:rgba(255,255,255,.74); margin-bottom:.35em; } .legal-card strong{ color:rgba(255,255,255,.95); font-weight:600; } .legal-card a{ color:#fff; text-decoration:underline; text-underline-offset:2px; word-break:break-word; } .legal-card .close{ position:absolute; top:clamp(16px,2.4vw,28px); right:clamp(16px,2.4vw,28px); width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.05); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; transition:background .3s var(--ease); } .legal-card .close:hover{ background:rgba(255,255,255,.15); } /* reduced motion + print safety */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; animation-delay:0s !important; } .headline .word{ transform:none; } .brand{ transform:none; } .head-rule{ transform:scaleX(1); } .cta,.subline,.refs,.tab,.tab-panel,.reviews,.footer,.badges img{ opacity:1 !important; transform:none !important; } .badges{ transform:translateX(-50%) !important; } #transition.intro{ animation:none !important; } .fog-a{ opacity:.46; } .fog-b{ opacity:.32; } } @media (max-height:780px){ :root{ --pad-x: clamp(26px,5vw,86px); } .subline{ max-width:40ch; } .badges{ width:min(64vw,560px); } } @media (max-width:1000px){ :root{ --stack-w: clamp(540px, 86vw, 740px); --reviews-w: 92vw; } } /* ---------- tablet & mobile: refine the flow defaults ---------- */ @media (max-width:1024px){ :root{ --stack-w:min(700px,92vw); --reviews-w:100vw; } .hero{ padding:clamp(22px,4.5vw,44px) clamp(22px,5vw,52px) clamp(30px,6vw,52px); } .stack{ width:100%; max-width:700px; margin-left:auto; margin-right:auto; } .refs{ width:100%; max-width:700px; align-self:center; } .ref-logo{ height:clamp(16px,2vh,23px); } /* reviews: same width as the tab-panel content, arrows centered BELOW (like mobile) */ .reviews{ width:min(calc(var(--stack-w) * 1.2), 94vw); align-self:center; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px; } .rev-viewport{ order:0; flex:0 0 100%; width:100%; } .rev-prev{ order:1; } .rev-next{ order:2; } .rev-arrow{ width:44px; height:44px; } .review{ width:calc((100% - var(--rev-gap)) / 2); } .badges{ width:min(88vw,640px); margin:clamp(34px,7vw,56px) auto clamp(18px,4vw,28px); } .footer{ flex-direction:column-reverse; gap:14px; text-align:center; padding:0 0 clamp(28px,6vw,44px); } .legal{ justify-content:center; flex-wrap:wrap; } /* founder photo: on tablet, face sits high — between headline and sub-headline — and a bit further right */ .founder{ display:block; height:clamp(240px,32vh,320px); right:clamp(-72px,-5vw,-30px); top:clamp(-252px,-27vh,-180px); bottom:auto; } } /* ---------- phone ---------- */ @media (max-width:640px){ :root{ --stack-w:100%; } /* headline wraps and scales down (overrides inline 50px) */ .headline{ white-space:normal; line-height:1.04; } .headline .word{ font-size:clamp(30px,9.4vw,46px) !important; } .head-rule{ width:min(220px,62vw) !important; margin-top:20px !important; } /* subline: kill the 800px inline width, drop the indent */ .subline{ width:auto !important; max-width:100% !important; margin:18px 0 0 0 !important; font-size:clamp(14px,3.9vw,17px) !important; line-height:1.45 !important; } /* brand smaller, comfortable CTA tap target */ .brand img{ width:clamp(82px,26vw,106px) !important; margin-left:0 !important; } .cta{ font-size:11px; padding:0 16px; border-radius:11px; min-height:44px; display:inline-flex; align-items:center; } .stack{ max-width:100%; } .refs{ max-width:100%; height:46px; } /* services tabs become a 2×2 grid */ .tabs{ flex-wrap:wrap; gap:10px; } .tab{ flex:1 1 calc(50% - 5px); } .tab-box{ padding:11px 10px; border-radius:11px; background:rgba(17,23,17,.5); } .tab-logo{ height:26px; } .tab-panel{ width:100%; } .tab-panel-title{ font-size:14px; } .tab-panel-price{ font-size:12px; } .tab-panel-desc{ font-size:13px; line-height:1.5; } .panel-cta{ font-size:12px; padding:11px 16px; border-radius:10px; } .panel-cta svg{ width:13px; height:13px; } /* reviews: same width as services content, arrows BELOW centered, one card per page */ .reviews{ width:100%; max-width:100%; align-self:stretch; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px; } .rev-viewport{ order:0; flex:0 0 100%; width:100%; } .rev-prev{ order:1; } .rev-next{ order:2; } .rev-arrow{ width:44px; height:44px; } .review{ width:100%; padding:16px 17px; } .review-text{ font-size:12.5px; -webkit-line-clamp:7; } /* trust logos fully opaque on mobile */ .ref-logo{ opacity:1; } /* headline: stack Growth / Marketing tightly (no big gap) */ .headline{ line-height:1; } .headline .line-mask{ display:block; padding:0; line-height:0; } .headline .word{ display:block; line-height:.94; } .review-name{ font-size:13.5px; } .review-firm{ font-size:11.5px; } /* footer: bigger tap targets */ .footer{ gap:16px; } .legal{ gap:18px; } .legal a, .contact a{ font-size:13px; letter-spacing:.05em; padding:4px 2px; } /* founder photo: hidden on phones (too dominant on small screens) */ .founder{ display:none !important; } } /* landscape phones / very short screens: keep flow comfortable */ @media (max-width:1024px) and (max-height:560px){ .hero{ min-height:auto; } } /* ============================================================ PRINT / PDF safety — force all entrance-animated content visible (CSS animations don't run in print, so opacity:0 would hide them) ============================================================ */ @media print{ .brand,.cta,.subline,.refs,.head-rule,.services-label, .tab,.tab-panel,.reviews,.footer,.badges img{ opacity:1 !important; transform:none !important; animation:none !important; } .headline .word{ transform:none !important; animation:none !important; } .head-rule{ transform:scaleX(1) !important; } #transition{ display:none !important; } .fog-a{ opacity:.4 !important; } .fog-b{ opacity:.28 !important; } }