/* ============================================================ RENUMB FLESH — shared site layer (loaded LAST in ) Purpose: make EVERY page behave identically on mobile and load fast. It refines the per-page inline CSS — it never removes any feature. Works with both .nav-links (home) and .nav-center (sub-pages). ============================================================ */ :root{ --rf-line:rgba(200,205,212,0.22); --rf-metal-solid:linear-gradient(90deg,#6d7177,#e8eaed 35%,#ffffff 50%,#e8eaed 65%,#6d7177); } /* ---------- Background: show poster instantly, no play-icon ---------- */ .site-bg{ background:#080808 url("site-bg-poster.jpg") center center / cover no-repeat !important; } .site-bg.poster-only video{ display:none !important; } /* Kill the iOS/Android media "play" overlay everywhere */ video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-play-button, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-overlay-play-button{ display:none !important; -webkit-appearance:none; } /* ---------- Keep everything inside the viewport ---------- */ html,body{ max-width:100%; overflow-x:hidden; } /* ============================================================ MOBILE NAVIGATION — applies to BOTH nav list classes ============================================================ */ @media (max-width:768px){ .nav-hamburger{ display:flex !important; } .nav-links, .nav-center{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(8,8,8,0.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); flex-direction:column; justify-content:center; align-items:center; gap:34px; z-index:101; transform:translateX(100%); transition:transform .35s ease; display:flex !important; margin:0; padding:0; list-style:none; } .nav-links.mobile-open, .nav-center.mobile-open{ transform:translateX(0); } .nav-links a, .nav-center a{ font-size:20px !important; letter-spacing:4px !important; color:var(--white,#eef1f4) !important; } /* hamburger floats above the open overlay */ .nav-hamburger{ z-index:102; position:relative; } } /* ============================================================ RESPONSIVE LAYOUT — covers every page type (spray / dropper / contact / blog previously had none) ============================================================ */ @media (max-width:768px){ nav{ padding:16px 20px !important; } /* home hero */ .hero{ min-height:90vh; } .hero-content{ padding:0 20px !important; max-width:100% !important; } .hero-sub{ max-width:100% !important; letter-spacing:1px !important; } .hero-stats{ display:none !important; } .hero-cta{ flex-wrap:wrap; } /* product / blog / contact hero blocks */ .hero-video{ height:60vh !important; margin-top:70px !important; padding-left:20px !important; padding-right:20px !important; } .hero-blog{ padding-left:20px !important; padding-right:20px !important; } .hero-video .hero-title, .hero-blog .hero-title{ font-size:clamp(38px,12vw,58px) !important; } /* sections + titles */ .section{ padding:64px 20px !important; } .section-title{ margin-bottom:40px !important; word-break:break-word; } /* grids */ .products-grid{ grid-template-columns:1fr !important; } .gallery-grid{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; } .blog-grid{ grid-template-columns:1fr !important; } /* contact: stack form + direct buttons */ .contact-wrap{ grid-template-columns:1fr !important; display:flex !important; flex-direction:column !important; gap:34px !important; } .contact-form, .contact-direct{ width:100% !important; } /* floating product never overflows */ .float-stage img{ width:min(82vw,360px) !important; } /* claims centred */ .claims-wrap{ justify-content:center !important; padding:22px 20px !important; } .claims-rows{ align-items:center !important; text-align:center !important; } .claims-row{ justify-content:center !important; flex-wrap:wrap; gap:10px; } /* footer stacks */ footer{ flex-direction:column !important; gap:22px !important; text-align:center !important; padding:36px 20px !important; } .footer-links{ justify-content:center !important; flex-wrap:wrap; } /* faq sizing */ .faq-q{ font-size:14px !important; } } @media (max-width:430px){ .gallery-grid{ grid-template-columns:1fr !important; } .nav-logo{ font-size:18px !important; letter-spacing:3px !important; } } /* ============================================================ Contact form status message (for the Cloudflare Worker flow) ============================================================ */ .form-status{ margin-top:16px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:1px; line-height:1.6; min-height:18px; } .form-status.ok{ color:#8fe0a8; } .form-status.err{ color:#e08f8f; } .form-status.sending{ color:var(--dim,#9aa0a8); } .hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } .btn-send[disabled]{ opacity:.6; cursor:default; } /* ============================================================ Blog article pages (.article) ============================================================ */ .article{ max-width:760px; margin:0 auto; } .article .kicker{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--amber,#c9ccd1); margin-bottom:18px; } .article h1{ font-family:'Cinzel',serif; font-size:clamp(28px,5vw,50px); font-weight:800; line-height:1.12; letter-spacing:.5px; margin-bottom:16px; color:var(--white,#eef1f4); } .article .meta{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--dim,#9aa0a8); text-transform:uppercase; margin-bottom:34px; } .article .lede{ font-size:18px; font-weight:300; line-height:1.8; color:var(--amber,#c9ccd1); margin-bottom:28px; } .article h2{ font-family:'Cinzel',serif; font-size:clamp(20px,3vw,28px); font-weight:700; letter-spacing:.4px; color:var(--white,#eef1f4); margin:40px 0 16px; padding-bottom:12px; position:relative; } .article h2::after{ content:''; position:absolute; left:0; bottom:0; width:64px; height:2px; background:var(--metal-solid); } .article p{ font-size:16px; font-weight:300; line-height:1.9; color:#c5c9cf; margin-bottom:20px; } .article ul{ margin:0 0 22px 0; padding-left:0; list-style:none; } .article li{ font-size:16px; font-weight:300; line-height:1.8; color:#c5c9cf; padding-left:26px; position:relative; margin-bottom:12px; } .article li::before{ content:'◆'; position:absolute; left:0; top:1px; color:var(--amber,#c9ccd1); font-size:11px; } .article .note{ border:1px solid var(--rf-line); background:rgba(201,204,209,0.05); padding:20px 24px; color:var(--dim,#9aa0a8); font-size:14px; line-height:1.8; margin:28px 0; } .article-cta{ margin-top:46px; padding:30px; border:1px solid var(--rf-line); background:linear-gradient(180deg,rgba(201,204,209,0.07),rgba(201,204,209,0.02)); } .article-cta h3{ font-family:'Cinzel',serif; font-size:20px; letter-spacing:1px; color:var(--white,#eef1f4); margin-bottom:10px; } .article-cta p{ font-size:14px; color:var(--dim,#9aa0a8); margin-bottom:18px; line-height:1.7; } .article-cta a.rf-btn{ font-family:'Cinzel',serif; font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; padding:14px 30px; background:var(--metal-solid); color:#15171a; text-decoration:none; display:inline-block; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); } .article-related{ margin-top:40px; } .article-related a{ color:var(--amber,#c9ccd1); text-decoration:none; border-bottom:1px solid rgba(201,204,209,0.3); } .article-related a:hover{ color:var(--amber-bright,#e8eaed); }