/* ============================================================ kiwi-global.css — Kiwi Alarms shared styles Nav, footer, fonts, resets, animations, shared components ============================================================ */ /* Google Fonts loaded in each page */ :root { --cream: #f7f3ee; --cream2: #efe9e0; --white: #fdfcfa; --ink: #1c1917; --ink2: #3d3733; --muted: #7a706a; --green: #1c7c4a; --green-lt: #e8f5ee; --green-md: #c5e8d4; --green-dk: #14603a; --amber: #d97706; --border: #e2dbd3; --shadow: 0 2px 12px rgba(28,25,23,0.07); --shadow-lg: 0 8px 40px rgba(28,25,23,0.10); --radius: 14px; --radius-sm: 8px; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background: var(--cream); color: var(--ink); font-family: 'Lora', Georgia, serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ── NAV ── */ nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 2.5rem; height:68px; background:rgba(247,243,238,0.95); backdrop-filter:blur(18px); border-bottom:1px solid var(--border); } .nav-logo { text-decoration:none; display:flex; align-items:center; flex-shrink:0; } .nav-links { display:flex; gap:0; list-style:none; align-items:center; } .nav-links a { font-family:'DM Mono',monospace; font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:.4rem .8rem; border-radius:6px; transition:color .2s, background .2s; white-space:nowrap; } .nav-links a:hover { color:var(--ink); background:var(--cream2); } .nav-links a.active { color:var(--green); background:var(--green-lt); } .nav-right { display:flex; align-items:center; gap:1rem; flex-shrink:0; } .nav-phone { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:.88rem; color:var(--ink); text-decoration:none; transition:color .2s; white-space:nowrap; } .nav-phone:hover { color:var(--green); } .nav-cta { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:.82rem; color:#fff; background:var(--green); padding:.52rem 1.2rem; border-radius:100px; text-decoration:none; transition:background .2s, transform .15s; box-shadow:0 1px 3px rgba(28,124,74,.25); white-space:nowrap; } .nav-cta:hover { background:var(--green-dk); transform:translateY(-1px); } /* Hamburger */ .nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; cursor:pointer; background:none; border:1px solid var(--border); border-radius:6px; padding:6px; } .nav-hamburger span { display:block; height:2px; background:var(--ink); border-radius:2px; transition:all .25s ease; } .nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity:0; } .nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .nav-drawer { display:none; position:fixed; top:68px; left:0; right:0; z-index:99; background:var(--white); border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg); padding:1rem 1.5rem 1.5rem; flex-direction:column; gap:.25rem; } .nav-drawer.open { display:flex; } .nav-drawer a { font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:.85rem 1rem; border-radius:8px; transition:background .2s, color .2s; border-bottom:1px solid var(--border); } .nav-drawer a:last-child { border-bottom:none; } .nav-drawer a:hover { background:var(--cream); color:var(--ink); } .nav-drawer a.active { color:var(--green); background:var(--green-lt); } .nav-drawer-cta { margin-top:.5rem; font-family:'Bricolage Grotesque',sans-serif !important; font-weight:600 !important; font-size:.9rem !important; color:#fff !important; background:var(--green) !important; text-align:center; border-radius:100px !important; border:none !important; padding:1rem !important; } .nav-drawer-cta:hover { background:var(--green-dk) !important; } /* ── SHARED BUTTONS ── */ .btn-primary { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:.95rem; color:#fff; background:var(--green); padding:.85rem 2rem; border-radius:100px; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; transition:background .2s, transform .15s, box-shadow .2s; box-shadow:0 2px 8px rgba(28,124,74,.3); } .btn-primary:hover { background:var(--green-dk); transform:translateY(-2px); box-shadow:0 6px 20px rgba(28,124,74,.3); } .btn-ghost { font-family:'Bricolage Grotesque',sans-serif; font-weight:500; font-size:.95rem; color:var(--ink2); background:transparent; padding:.85rem 1.8rem; border-radius:100px; text-decoration:none; border:1.5px solid var(--border); transition:border-color .2s, color .2s, background .2s; } .btn-ghost:hover { border-color:var(--ink2); background:var(--cream2); } .btn-white { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.95rem; color:var(--green); background:#fff; padding:.9rem 2rem; border-radius:100px; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 4px 20px rgba(0,0,0,.15); transition:transform .15s, box-shadow .2s; } .btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.2); } .btn-outline-white { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:.95rem; color:#fff; background:transparent; padding:.9rem 2rem; border-radius:100px; text-decoration:none; border:2px solid rgba(255,255,255,.4); transition:border-color .2s, background .2s; } .btn-outline-white:hover { border-color:#fff; background:rgba(255,255,255,.1); } /* ── SHARED TYPOGRAPHY ── */ .section-eyebrow { display:inline-block; font-family:'DM Mono',monospace; font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-bottom:1rem; } h2 { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(1.9rem,3.8vw,3rem); letter-spacing:-.03em; line-height:1.1; color:var(--ink); margin-bottom:1.2rem; } h2 em { font-style:normal; color:var(--green); } .section-lead { font-size:1.08rem; color:var(--muted); line-height:1.72; max-width:560px; } .section-lead strong { color:var(--ink2); font-weight:500; } /* ── BREADCRUMB ── */ .breadcrumb { padding:5.5rem 2.5rem 0; max-width:1200px; margin:0 auto; } .breadcrumb-list { display:flex; align-items:center; gap:.5rem; list-style:none; flex-wrap:wrap; } .breadcrumb-list li { font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .breadcrumb-list a { color:var(--green); text-decoration:none; transition:opacity .2s; } .breadcrumb-list a:hover { opacity:.75; } .breadcrumb-sep { color:var(--border); } /* ── TRUST STRIP ── */ .trust-strip { background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1.2rem 0; overflow:hidden; } .trust-inner { display:flex; gap:4rem; animation:ticker 28s linear infinite; white-space:nowrap; width:max-content; } .trust-item { display:inline-flex; align-items:center; gap:.7rem; font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .trust-dot { width:4px; height:4px; background:var(--green); border-radius:50%; flex-shrink:0; } /* ── SECTION PADDING ── */ .faq-section { padding:6rem 2.5rem; background:var(--cream); } .faq-inner { max-width:780px; margin:0 auto; } .faq-list { margin-top:2rem; } /* ── FAQ ── */ details.faq-item { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:.4rem; overflow:hidden; transition:box-shadow .2s; } details.faq-item[open] { box-shadow:var(--shadow); border-color:var(--green-md); } summary.faq-q { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.4rem; cursor:pointer; list-style:none; gap:2rem; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:.9rem; color:var(--ink); transition:color .2s; } summary.faq-q::-webkit-details-marker { display:none; } summary.faq-q:hover { color:var(--green); } .faq-toggle { width:24px; height:24px; background:var(--cream); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.8rem; color:var(--muted); transition:transform .3s, background .2s, color .2s; } details[open] .faq-toggle { transform:rotate(45deg); background:var(--green); color:#fff; border-color:var(--green); } .faq-a { padding:0 1.4rem 1rem; font-size:.95rem; color:var(--muted); line-height:1.65; } .faq-a strong { color:var(--ink2); font-weight:500; } .faq-a a { color:var(--green); font-weight:500; } /* ── FOOTER ── */ footer { background:var(--ink); color:var(--cream); padding:5rem 2.5rem 2.5rem; } .footer-inner { max-width:1200px; margin:0 auto; } .footer-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:4rem; margin-bottom:4rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); } .footer-logo { margin-bottom:1rem; } .footer-tagline { font-size:.97rem; color:rgba(255,255,255,.5); line-height:1.65; max-width:270px; margin-bottom:1.5rem; } address.footer-nap { font-style:normal; } .footer-nap-phone { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.6rem; letter-spacing:-.02em; color:var(--green); text-decoration:none; display:block; transition:opacity .2s; } .footer-nap-phone:hover { opacity:.75; } .footer-nap-locality { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-top:.4rem; line-height:1.8; } .footer-area-text { font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:.08em; color:rgba(255,255,255,.18); text-transform:uppercase; line-height:1.9; margin-top:1rem; } .footer-col-title { font-family:'DM Mono',monospace; font-size:.63rem; letter-spacing:.15em; text-transform:uppercase; color:var(--green); margin-bottom:1.3rem; } .footer-links { list-style:none; display:flex; flex-direction:column; gap:.75rem; } .footer-links a { color:rgba(255,255,255,.5); text-decoration:none; font-size:.92rem; transition:color .2s; } .footer-links a:hover { color:#fff; } .footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } .footer-copy { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.22); } .footer-badge { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(28,124,74,.6); border:1px solid rgba(28,124,74,.25); border-radius:100px; padding:.4rem 1rem; } /* ── ANIMATIONS ── */ @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } @keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} } .reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; } .reveal.visible { opacity:1; transform:translateY(0); } .reveal-delay-1 { transition-delay:.1s; } .reveal-delay-2 { transition-delay:.2s; } .reveal-delay-3 { transition-delay:.3s; } .reveal-delay-4 { transition-delay:.4s; } /* ── MOBILE GLOBAL ── */ @media(max-width:960px) { nav { padding:0 1.2rem; } .nav-links, .nav-phone, .nav-cta { display:none; } .nav-hamburger { display:flex; } footer { padding-left:1.2rem; padding-right:1.2rem; } .footer-top { grid-template-columns:1fr; gap:3rem; } .breadcrumb { padding-left:1.2rem; padding-right:1.2rem; } }