/* ============================================================================ Eagles Photography — SHARED ENHANCEMENT LAYER (enhance.css) ---------------------------------------------------------------------------- Styles for the widgets injected by enhance.js into EVERY page: • Floating WhatsApp button • Mobile "Call Now" button • Film Mode (grain) toggle + Daylight (light) toggle • Newsletter signup strip + modal • Cookie-consent banner • Custom gold cursor (desktop, pointer devices only) Add to a page with ONE line in , after styles.css: and ONE line before : All colours reuse the tokens already defined in styles.css :root. ============================================================================ */ /* --------------------------------------------------------------------------- FLOATING ACTION STACK (WhatsApp + Call) — bottom-right, above back-to-top --------------------------------------------------------------------------- */ .fab-stack{ position:fixed; right:24px; bottom:84px; z-index:60; display:flex; flex-direction:column; gap:12px; align-items:flex-end; } .fab{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:0; position:relative; box-shadow:0 10px 26px -8px rgba(0,0,0,.55); transform:translateY(16px) scale(.6); opacity:0; visibility:hidden; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .4s, visibility .4s, box-shadow .3s; } .fab.show{transform:none; opacity:1; visibility:visible} .fab svg{width:28px; height:28px; display:block} .fab.wa{background:#25d366} .fab.wa:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 14px 30px -8px rgba(37,211,102,.6)} .fab.call{background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)); display:none} .fab.call:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 14px 30px -8px rgba(232,181,63,.6)} /* gentle attention pulse ring on WhatsApp */ .fab.wa::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:fabpulse 2.4s ease-out infinite; } @keyframes fabpulse{to{box-shadow:0 0 0 18px rgba(37,211,102,0)}} /* little label that slides out on hover (desktop) */ .fab .fab-tip{ position:absolute; right:64px; top:50%; transform:translateY(-50%) translateX(8px); white-space:nowrap; background:var(--bg-2); color:var(--ink); border:1px solid var(--line); font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; padding:8px 13px; border-radius:6px; opacity:0; pointer-events:none; transition:.3s; } .fab:hover .fab-tip{opacity:1; transform:translateY(-50%)} @media(max-width:760px){ .fab.call{display:grid} /* show Call Now only on phones */ .fab-stack{right:18px; bottom:80px} .fab .fab-tip{display:none} } /* --------------------------------------------------------------------------- UTILITY TOGGLES (Film Mode + Daylight) — small pills, top-right under header --------------------------------------------------------------------------- */ .ut-toggles{ position:fixed; top:84px; right:18px; z-index:48; display:flex; gap:8px; opacity:0; transform:translateY(-8px); transition:opacity .5s ease, transform .5s ease; } .ut-toggles.ready{opacity:1; transform:none} .ut-btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:400; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); background:rgba(12,13,17,.6); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:40px; padding:7px 13px; cursor:pointer; transition:.3s; } .ut-btn:hover{color:var(--ink); border-color:var(--gold)} .ut-btn .dot{width:7px; height:7px; border-radius:50%; background:var(--ink-faint); transition:.3s} .ut-btn.on{color:var(--gold); border-color:var(--gold)} .ut-btn.on .dot{background:var(--gold); box-shadow:0 0 8px var(--gold)} @media(max-width:760px){ .ut-toggles{display:none} } /* keep phone screens clean */ /* Film Mode: turn the existing grain layer up for a tactile, analog look */ body.film-on::after{opacity:.12 !important} /* Daylight (light) mode — conservative v1: re-tones the base backdrop + ink. Page-specific dark panels still read fine; this is a tasteful starting point. */ body.light{ --ink:#1d1b16; --ink-soft:#46433c; --ink-faint:#6f6b61; --bg:#f4f1e9; --bg-2:#ece7da; --bg-3:#e3ddcd; --line:rgba(185,133,31,.34); } body.light::before{ background: radial-gradient(60% 50% at 12% 0%, rgba(232,181,63,.20), transparent 70%), radial-gradient(50% 45% at 92% 8%, rgba(47,111,224,.10), transparent 70%), linear-gradient(180deg, rgba(248,245,238,.86), rgba(244,241,233,.92)), linear-gradient(135deg,#fbf7ee 0%,#efe9db 50%,#ffffff 100%); } body.light header.scrolled{background:rgba(244,241,233,.85); border-bottom-color:var(--line)} /* --------------------------------------------------------------------------- NEWSLETTER — slim strip injected above the footer + a centered modal --------------------------------------------------------------------------- */ .nl-strip{ border-top:1px solid var(--line); border-bottom:1px solid rgba(255,255,255,.05); background:rgba(17,19,25,.45); padding:clamp(34px,5vw,56px) 0; } .nl-inner{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); display:flex; gap:30px; align-items:center; justify-content:space-between; flex-wrap:wrap} .nl-copy h3{font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:6px} .nl-copy p{color:var(--ink-soft); font-size:.95rem; max-width:46ch} .nl-form{display:flex; gap:10px; flex-wrap:wrap; min-width:min(420px,100%)} .nl-form input{ flex:1; min-width:200px; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.18); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:1rem; padding:12px 2px; transition:border-color .3s; } .nl-form input:focus{outline:0; border-color:var(--gold)} .nl-msg{font-size:.78rem; color:var(--gold); margin-top:10px; min-height:1em; width:100%} /* --------------------------------------------------------------------------- COOKIE CONSENT — bottom banner, privacy-first --------------------------------------------------------------------------- */ .cookie{ position:fixed; left:18px; right:18px; bottom:18px; z-index:120; max-width:560px; margin:0 auto; background:rgba(12,13,17,.94); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:12px; padding:20px 22px; box-shadow:0 24px 60px -20px rgba(0,0,0,.7); transform:translateY(140%); transition:transform .55s cubic-bezier(.2,.8,.2,1); } .cookie.show{transform:none} .cookie p{color:var(--ink-soft); font-size:.85rem; line-height:1.6; margin-bottom:14px} .cookie p a{color:var(--gold)} .cookie .row{display:flex; gap:10px; flex-wrap:wrap} .cookie .ck-btn{ font-family:var(--sans); font-weight:500; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:11px 20px; cursor:pointer; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--ink); transition:.3s; } .cookie .ck-btn.accept{background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)); color:#16120a; border-color:transparent} .cookie .ck-btn:hover{transform:translateY(-2px)} /* --------------------------------------------------------------------------- CUSTOM GOLD CURSOR — desktop / fine-pointer only (added by JS) --------------------------------------------------------------------------- */ @media (pointer:fine){ body.cursor-on{cursor:none} body.cursor-on a, body.cursor-on button, body.cursor-on input, body.cursor-on textarea, body.cursor-on select, body.cursor-on .gal{cursor:none} .cursor-dot,.cursor-ring{position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); will-change:transform} .cursor-dot{width:6px; height:6px; background:var(--gold-bright)} .cursor-ring{width:34px; height:34px; border:1px solid var(--gold); transition:width .25s, height .25s, background-color .25s, border-color .25s, opacity .25s} .cursor-ring.hot{width:54px; height:54px; background:rgba(232,181,63,.12); border-color:var(--gold-bright)} } /* Hide all motion-based extras for reduced-motion visitors */ @media(prefers-reduced-motion:reduce){ .fab.wa::after{animation:none} .cursor-dot,.cursor-ring{display:none !important} body.cursor-on{cursor:auto} }