/* OONA family bar — THE menu. One file, loaded by every OONA property. Edit here only. Injected by /fam/fam.js as the first child of . Everything is namespaced under #oona-fam and reset, so host-page styles cannot touch it and it cannot touch them. */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Crimson+Pro:wght@400;500&display=swap'); oona-root{display:block;position:static} #oona-fam,#oona-fam *{all:revert;box-sizing:border-box;margin:0;padding:0} #oona-fam{position:fixed;top:0;left:0;right:0;height:44px;z-index:2147483000; background:#0B0D10;border-bottom:1px solid rgba(255,255,255,.09); font-family:'Cinzel',Georgia,serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A9B1B7; display:flex;align-items:center;gap:0 22px;padding:0 20px;white-space:nowrap} /* Reserve the bar's space and paint its dark strip from the STYLESHEET, so the first paint already looks final; the script then fills in the items with no layout shift. */ html{scroll-padding-top:44px} body{margin-top:44px !important} body::before{content:'';position:fixed;top:0;left:0;right:0;height:44px;background:#0B0D10;border-bottom:1px solid rgba(255,255,255,.09);z-index:2147482999} #oona-fam a{color:#A9B1B7;text-decoration:none;line-height:44px;display:inline-block} #oona-fam a:hover,#oona-fam a.here{color:#feda4a} #oona-fam .brand{font-weight:700;color:#feda4a;letter-spacing:.22em;margin-right:6px} #oona-fam .grp{position:relative;display:inline-block} #oona-fam .grp>button{all:unset;cursor:pointer;color:#A9B1B7;line-height:44px;font:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-block} #oona-fam .grp>button:hover,#oona-fam .grp.open>button,#oona-fam .grp.here>button{color:#feda4a} #oona-fam .grp>button small{font-size:.8em;opacity:.7;margin-left:4px} #oona-fam .pop{display:none;position:absolute;top:42px;padding-top:10px;left:0;min-width:200px;background:#14171c;border:1px solid rgba(255,255,255,.1); border-radius:0 0 10px 10px;padding:8px 6px;box-shadow:0 18px 40px -14px rgba(0,0,0,.85);flex-direction:column;text-align:left} #oona-fam .grp.last .pop{left:auto;right:0} #oona-fam .grp.open .pop{display:flex} #oona-fam .pop::before{content:'';position:absolute;top:-14px;left:-10px;right:-10px;height:14px} /* hover bridge: no dead zone between button and panel */ #oona-fam .pop b{display:block;font-size:.66rem;letter-spacing:.14em;color:#feda4a;padding:6px 12px 8px;font-weight:600} #oona-fam .pop a{display:block;font-family:'Crimson Pro',Georgia,serif;font-size:16px;letter-spacing:0;text-transform:none;line-height:1.3;padding:8px 12px;border-radius:6px;color:#e6e2da} #oona-fam .pop a:hover,#oona-fam .pop a.here{background:rgba(255,255,255,.06);color:#feda4a} #oona-fam .sp{flex:1} #oona-fam .burger{display:none} @media (max-width:820px){ #oona-fam{gap:0 14px;padding:0 14px} #oona-fam .top,#oona-fam .grp{display:none} #oona-fam .burger{all:unset;display:inline-block;cursor:pointer;color:#A9B1B7;font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:44px;margin-left:auto} #oona-fam .burger:hover{color:#feda4a} #oona-fam.open .drawer{display:block} #oona-fam .drawer{display:none;position:absolute;top:44px;left:0;right:0;background:#0B0D10;border-bottom:1px solid rgba(255,255,255,.1);padding:8px 14px 14px; max-height:calc(100vh - 44px);overflow:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)} #oona-fam .drawer a{display:block;line-height:2.4;font-family:'Crimson Pro',Georgia,serif;font-size:17px;letter-spacing:0;text-transform:none;color:#e6e2da} #oona-fam .drawer a.here{color:#feda4a} #oona-fam .drawer b{display:block;font-size:.66rem;letter-spacing:.14em;color:#feda4a;padding:12px 0 2px;font-weight:600} } @media (min-width:821px){#oona-fam .drawer{display:none}} /* page-transition veil: rules live in fam.js (it also runs without this file, data-oona="veil"). */