/* ========================================================================== Alarm.now redesign — PDFBEAR-style structure, Alarm.now colours. Brand accent stays #007bff (existing scheme). New components are prefixed `an-` so they never collide with the legacy inline CSS in base.html. ========================================================================== */ :root{ --an-brand:#007bff; /* existing primary link/accent */ --an-brand-dark:#0056b3; /* existing hover */ --an-brand-wash:#eaf2ff; /* light blue surface (same hue) */ --an-ink:#2b2f36; --an-muted:#6c757d; --an-line:#e6eaf0; --an-surface:#ffffff; --an-surface-alt:#f7f9fc; --an-radius:8px; --an-maxw:1100px; /* matches body{max-width:1100px} so header/footer align with content */ } /* Offset the fixed header (overrides legacy `body{padding:0 !important}`). */ body{ padding-top:72px !important; background:var(--an-surface); color:var(--an-ink); } /* Prevent the full-bleed footer's 100vw from creating a tiny horizontal scrollbar. Must be on , NOT (body is the 1100px column the footer bleeds out of). */ html{ overflow-x:hidden; } .an-container{ max-width:var(--an-maxw); margin:0 auto; padding:0 18px; width:100%; } *:focus-visible{ outline:3px solid var(--an-brand); outline-offset:2px; } /* ---------- Header ---------------------------------------------------- */ .an-header{ position:fixed; top:0; left:0; width:100%; height:72px; z-index:3050; background:#fff; border-bottom:3px solid var(--an-brand); box-shadow:0 2px 6px rgba(0,0,0,.06); display:flex; align-items:center; } .an-nav{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:1rem; position:relative; } .an-logo{ display:flex; align-items:center; flex:0 0 auto; } .an-logo img{ height:42px; width:auto; display:block; } .an-main{ position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:1.4rem; } .an-main a, .an-toolsbtn{ color:#333; font-weight:500; text-decoration:none; white-space:nowrap; background:none; border:0; cursor:pointer; font-size:1rem; display:inline-flex; align-items:center; gap:.4rem; } .an-main a:hover, .an-toolsbtn:hover{ color:var(--an-brand); } .an-toolsbtn .fa-chevron-down{ font-size:.78em; transition:transform .25s ease; } .an-toolsbtn[aria-expanded="true"]{ color:var(--an-brand); } .an-toolsbtn[aria-expanded="true"] .fa-chevron-down{ transform:rotate(180deg); } .an-actions{ display:flex; align-items:center; gap:1rem; flex:0 0 auto; } .an-actions .an-login{ color:#333; font-weight:600; text-decoration:none; } .an-actions .an-login:hover{ color:var(--an-brand); } .an-cta{ background:var(--an-brand); color:#fff !important; padding:.5rem 1.15rem; border-radius:6px; font-weight:600; text-decoration:none; transition:background .2s ease; display:inline-flex; align-items:center; gap:.45rem; } .an-cta:hover{ background:var(--an-brand-dark); color:#fff; } .an-burger{ display:none; background:none; border:0; color:#333; font-size:1.2rem; cursor:pointer; align-items:center; gap:.4rem; padding:8px; } /* ---------- Mega-menu panel ------------------------------------------- */ .an-mega{ position:fixed; top:72px; left:0; width:100%; bottom:0; overflow-y:auto; background:#fff; border-top:1px solid var(--an-line); box-shadow:0 8px 16px rgba(0,0,0,.06); z-index:3040; padding:1.75rem 0; } .an-mega-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem 1.75rem; } @media(min-width:992px){ .an-mega-grid{ grid-template-columns:repeat(5,1fr); } } .an-col-title{ font-weight:700; color:#333; margin:0 0 .75rem; display:flex; align-items:center; gap:.5rem; font-size:.95rem; } .an-col-title i{ color:var(--an-brand); } .an-cards{ display:flex; flex-direction:column; gap:.25rem; } .an-card{ display:flex; align-items:center; gap:.7rem; padding:.5rem .6rem; border-radius:var(--an-radius); color:#333; text-decoration:none; font-weight:400; } .an-card:hover{ background:var(--an-brand-wash); color:var(--an-brand-dark); } .an-card .an-ic{ color:var(--an-brand); width:22px; text-align:center; font-size:1.05rem; flex:0 0 auto; } .an-card .an-card-name{ font-size:.92rem; line-height:1.15; } .an-mega-foot{ text-align:center; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--an-line); } .an-mega-foot a{ color:var(--an-muted); text-decoration:none; font-size:.9rem; } .an-mega-foot a:hover{ color:var(--an-brand); } /* ---------- Mobile menu ----------------------------------------------- */ .an-mobile{ position:fixed; top:72px; left:0; width:100%; bottom:0; overflow-y:auto; background:#fff; z-index:3040; padding:1rem 0; } .an-mobile .an-card{ font-size:1rem; } .an-mobile .an-col-title{ margin-top:.5rem; } .an-mobile-search{ padding:0 18px 1rem; } .an-mobile-search .input-group .btn{ background:var(--an-brand); border-color:var(--an-brand); color:#fff; } @media(max-width:991.98px){ body{ padding-top:60px !important; } .an-header{ height:60px; } .an-mega,.an-mobile{ top:60px; } .an-main,.an-actions{ display:none !important; } .an-burger{ display:inline-flex; margin-left:auto; } .an-mega-grid{ grid-template-columns:1fr; } .an-logo img{ height:34px; } } /* ---------- Footer (3 tiers) ------------------------------------------ */ /* Full-bleed grey background (edge to edge), but the inner .container keeps the content in the same centered 1100px column as the rest of the site. */ .an-footer{ max-width:none !important; box-sizing:border-box; text-align:left; width:100vw; margin:2.5rem calc(50% - 50vw) 0; background:var(--an-surface-alt); border-top:1px solid var(--an-line); padding:2.25rem 0 1.25rem; font-size:.95rem; } .an-footer h2,.an-footer .an-foot-h{ font-size:1rem; } .an-foot-catalog{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.5rem; } @media(min-width:768px){ .an-foot-catalog{ grid-template-columns:repeat(5,1fr); } } .an-foot-cols{ display:flex; flex-wrap:wrap; gap:1.5rem 1rem; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--an-line); } .an-foot-col{ flex:1 1 150px; min-width:140px; } .an-foot-col .an-foot-h{ font-weight:700; color:#333; margin:0 0 .6rem; } .an-foot-col ul{ list-style:none; padding:0; margin:0; } .an-foot-col li{ margin-bottom:.35rem; } .an-foot-col a{ color:var(--an-muted); text-decoration:none; } .an-foot-col a:hover{ color:var(--an-brand); text-decoration:underline; } .an-foot-brand{ flex:1 1 200px; min-width:180px; } .an-foot-brand img{ height:38px; width:auto; } .an-foot-brand p{ color:var(--an-muted); margin:.5rem 0 0; font-size:.88rem; } .an-foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--an-line); color:var(--an-muted); font-size:.88rem; } .an-foot-bottom .an-clock{ font-weight:700; color:var(--an-brand); } .an-foot-legal{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; } .an-foot-legal a{ color:var(--an-muted); text-decoration:none; } .an-foot-legal a:hover{ color:var(--an-brand); text-decoration:underline; } /* ---------- Home hero / SEO sections ---------------------------------- */ .an-hero{ text-align:center; padding:1.5rem 0 .5rem; } .an-hero h1{ font-size:2.1rem; font-weight:800; margin:0 0 .5rem; letter-spacing:-.01em; } .an-hero p.an-sub{ color:var(--an-muted); font-size:1.05rem; max-width:680px; margin:0 auto; } .an-trust{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px; padding:0; margin:16px 0 0; } .an-trust li{ display:inline-flex; align-items:center; gap:7px; color:#374151; background:#fff; border:1px solid var(--an-line); border-radius:999px; padding:6px 14px; font-weight:600; font-size:.9rem; } .an-trust li i{ color:var(--an-brand); font-size:.9em; } @media(max-width:575.98px){ .an-hero h1{ font-size:1.6rem; } .an-trust{ display:grid; grid-template-columns:1fr 1fr; } } .an-section{ margin:2.5rem 0; } .an-section > h2{ font-size:1.5rem; font-weight:700; margin:0 0 1rem; text-align:center; } .an-feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } @media(min-width:768px){ .an-feature-grid{ grid-template-columns:repeat(4,1fr); } } .an-feature{ display:block; border:1px solid var(--an-line); border-radius:var(--an-radius); padding:1.1rem; text-decoration:none; color:var(--an-ink); background:#fff; transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease; } .an-feature:hover{ border-color:var(--an-brand); transform:translateY(-2px); } .an-feature .an-fic{ width:46px; height:46px; border-radius:50%; background:var(--an-brand-wash); color:var(--an-brand); display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:.6rem; } .an-feature h3{ font-size:1.02rem; font-weight:700; margin:0 0 .25rem; } .an-feature p{ font-size:.88rem; color:var(--an-muted); margin:0; } .an-steps{ display:grid; grid-template-columns:1fr; gap:1rem; } @media(min-width:768px){ .an-steps{ grid-template-columns:repeat(3,1fr); } } .an-step{ background:var(--an-surface-alt); border:1px solid var(--an-line); border-radius:var(--an-radius); padding:1.25rem; text-align:center; } .an-step .an-step-n{ width:38px; height:38px; border-radius:50%; background:var(--an-brand); color:#fff; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-bottom:.6rem; } .an-step h3{ font-size:1.05rem; margin:0 0 .35rem; } .an-step p{ color:var(--an-muted); font-size:.9rem; margin:0; } .an-faq{ max-width:820px; margin:0 auto; } .an-faq details{ border:1px solid var(--an-line); border-radius:var(--an-radius); padding:.85rem 1rem; margin-bottom:.6rem; background:#fff; } .an-faq summary{ font-weight:600; cursor:pointer; list-style:none; } .an-faq summary::-webkit-details-marker{ display:none; } .an-faq summary::after{ content:"\002B"; float:right; color:var(--an-brand); font-weight:700; } .an-faq details[open] summary::after{ content:"\2212"; } .an-faq p{ margin:.6rem 0 0; color:var(--an-muted); } /* ========================================================================== Alarm interface polish (homepage hero + Create New Alarm panel). Loaded after main.html's inline