/* ═══════════════════════════════════════════════════════════════ LuminaCloud — Shared Hero Banner Styles Include AFTER nav.js in . ═══════════════════════════════════════════════════════════════ */ /* ── Hero container ─────────────────────────────────────────── */ /* margin-bottom = 24px is the canonical hero→first-bubble gap site- wide. Pages that use the .page-hero wrapper pattern (account-detail, files, links, wiki) ALSO set `.page-hero + .page { padding-top: 0 }` so the wrapper doesn't add extra space on top of this. Pages that put the hero inline inside .page (accounts, multicloud, oci, AWS / Azure / GCP hubs, etc.) get the gap from this single rule with no per-page work. */ .hero{ padding:14px 20px; /* Bottom gap = 24px to match the top page padding above the hero, so the hero is visually balanced — same air above and below. */ margin-bottom:24px; position:relative; overflow:hidden; transition:background 3s ease; background:var(--surface); border:var(--bubble-border); border-radius:var(--r); box-shadow:var(--bubble-shadow); } /* ── Web Dev debug overlay (toggle in /web-dev-mode.js) ───────── When body.lc-debug-spacing is on, tint .page-hero pink and the follow-up content .page (or #page) green so both regions are unmistakable. Useful for verifying that hero gap calculations land where you think they do. Gated on the body class so this has zero effect when the toggle is off. */ body.lc-debug-spacing .page-hero{background:rgba(255,0,255,0.30) !important} body.lc-debug-spacing #page, body.lc-debug-spacing .page-hero + .page, body.lc-debug-spacing .page-hero + main.page{background:rgba(0,255,0,0.20) !important} /* ── Animated sky graphic ───────────────────────────────────── */ .hero-sun{ position:absolute; right:-20px;top:-20px; width:140px;height:140px; pointer-events:none; opacity:0.90; z-index:1; } .hero-sun svg{width:100%;height:100%;display:block;overflow:visible} @keyframes sun-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes star-twinkle{0%,100%{opacity:0.35}50%{opacity:1}} @keyframes raindrop-fall{ 0%{transform:translateY(-10px);opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{transform:translateY(22px);opacity:0} } @keyframes snow-drift{ 0%{transform:translate(0,-10px);opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{transform:translate(5px,24px);opacity:0} } @keyframes lightning-flash{ 0%,90%,100%{opacity:0} 91%,94%{opacity:1} 92%{opacity:0.3} } @keyframes cloud-drift{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-3px)} } .hero-sun .rays{transform-box:fill-box;transform-origin:center;animation:sun-spin 60s linear infinite} .hero-sun .star{transform-box:fill-box;transform-origin:center;animation:star-twinkle 3s ease-in-out infinite} .hero-sun .raindrop{animation:raindrop-fall 1.2s linear infinite} .hero-sun .snowflake{animation:snow-drift 3s linear infinite} .hero-sun .lightning{animation:lightning-flash 5s ease-in-out infinite} .hero-sun .cloud{transform-box:fill-box;transform-origin:center;animation:cloud-drift 6s ease-in-out infinite} /* ── Weather label ──────────────────────────────────────────── */ .hero-weather{ font-family:var(--mono); font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; opacity:0; transition:opacity .3s; } .hero-weather.loaded{opacity:1} /* ── Layout row ─────────────────────────────────────────────── */ .hero-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; z-index:2; } .hero-greeting{ display:flex; align-items:center; flex-wrap:wrap; gap:0; font-size:10px; font-family:var(--mono); color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; } .hero-sep{ margin:0 5px; opacity:0.35; font-size:12px; line-height:1; } .hero-title{ font-size:22px; font-weight:700; color:var(--red); letter-spacing:-0.01em; } .hero-sub{ font-family:var(--mono); font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; } /* ── Source + Updated meta, inlined into .hero-greeting ──────── Relocated from
/
by hero.js integrateSourceMeta() so every page has a single top bar. Inherits greeting's mono-uppercase-dim styling; explicit overrides neutralise any carryover from the old .updated { display:block } rule. */ .hero-meta-source, .hero-meta-updated{ display:inline; font-size:10px; font-family:var(--mono); color:inherit; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; } .hero-meta-source a{ color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; transition:opacity .15s; } .hero-meta-source a:hover{opacity:.7} /* neutralise legacy page-level .updated display:block so it flows inline */ .hero-greeting .updated{display:inline;color:inherit;margin:0} .hero-greeting .stale-warning{margin-left:4px} /* ── Hero search bar ────────────────────────────────────────── */ .hero-search{position:relative;z-index:2;margin-top:10px} .hero-search-row{display:flex;align-items:stretch;gap:8px} .hero-search-wrap{position:relative;flex:1;min-width:0} .hero-search-input{ width:100%; height:100%; font-family:var(--display); font-size:15px; padding:10px 18px 10px 44px; border:1px solid rgba(255,255,255,0.18); border-radius:var(--r-sm); background:rgba(255,255,255,0.10); color:#fff; outline:none; transition:border-color .15s, box-shadow .15s, background .15s; } .hero-search-input::placeholder{color:rgba(255,255,255,0.45)} .hero-search-input:focus{ border-color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.15); box-shadow:0 0 0 3px rgba(255,255,255,0.08); } .hero-search-icon{ position:absolute; left:15px;top:50%; transform:translateY(-50%); width:18px;height:18px; color:rgba(255,255,255,0.45); pointer-events:none; } /* ── Hero action buttons (gear, add) ───────────────────────── */ .hero-action{ display:flex; align-items:center; justify-content:center; width:42px; flex-shrink:0; border:1px solid rgba(255,255,255,0.18); border-radius:var(--r-sm); background:transparent; color:rgba(255,255,255,0.55); cursor:pointer; transition:background .15s, border-color .15s, color .15s; text-decoration:none; /* Reset for