/* ============================================================ gilbertmiralo.com — shared site chrome Loaded by all four pages. Everything here is prefixed `gm-` so it can never collide with a page's own class names (both the video and illustrations pages already use `.chip`). ============================================================ */ :root{ /* canonical palette — pages alias their local names to these */ --gm-bg: #08090A; --gm-bg-2: #0D0E12; --gm-panel: #141519; --gm-line: #2A2C31; --gm-tx: #F2F1EC; --gm-tx-2: #A6A6B2; --gm-tx-3: #6A6A78; /* brand orange, sampled from the logo. Deliberately NOT --accent: the video page reassigns --accent per category at runtime. */ --gm-brand: #F7941D; --gm-nav-h: 56px; --gm-fd: 'Space Grotesk', system-ui, sans-serif; --gm-fb: 'Inter', system-ui, sans-serif; --gm-fm: 'JetBrains Mono', ui-monospace, monospace; } /* ── global nav ─────────────────────────────────────────── */ .gm-nav{ position:sticky; top:0; z-index:9000; height:var(--gm-nav-h); background:rgba(8,9,10,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--gm-line); font-family:var(--gm-fb); } .gm-nav-in{ max-width:1200px; height:100%; margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; } .gm-brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--gm-tx); } .gm-brand img{ width:30px; height:30px; object-fit:contain; flex:none; display:block; } .gm-brand-txt{ display:flex; flex-direction:column; line-height:1.15; } .gm-brand-txt b{ font-family:var(--gm-fd); font-weight:700; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; } .gm-brand-txt span{ font-family:var(--gm-fm); font-size:.55rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gm-tx-3); margin-top:2px; } @media (max-width:520px){ .gm-brand-txt span{ display:none; } } .gm-menu{ display:flex; align-items:center; gap:clamp(.6rem,1.7vw,1.5rem); list-style:none; margin:0; padding:0; } .gm-menu a{ display:block; text-decoration:none; font-family:var(--gm-fm); font-size:.65rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gm-tx-3); padding:.35rem 0; border-bottom:1px solid transparent; transition:color .18s, border-color .18s; white-space:nowrap; } .gm-menu a:hover, .gm-menu a:focus-visible{ color:var(--gm-tx); } .gm-menu a[aria-current="page"]{ color:var(--gm-brand); border-bottom-color:var(--gm-brand); } .gm-menu .gm-cta{ color:#140A00; background:var(--gm-brand); padding:.5rem .8rem; border-radius:2px; border-bottom:none; font-weight:700; } .gm-menu .gm-cta:hover{ filter:brightness(1.1); color:#140A00; } .gm-burger{ display:none; cursor:pointer; background:none; border:1px solid var(--gm-line); color:var(--gm-tx); font-family:var(--gm-fm); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:.5rem .7rem; border-radius:2px; } .gm-nav :focus-visible{ outline:2px solid var(--gm-brand); outline-offset:3px; } @media (max-width:900px){ .gm-burger{ display:block; } .gm-nav-in{ position:relative; } .gm-menu{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:.85rem; background:var(--gm-bg-2); border-bottom:1px solid var(--gm-line); padding:1rem clamp(1rem,4vw,2.5rem) 1.3rem; display:none; } .gm-menu.gm-open{ display:flex; } } /* Pages that run as a fixed-height app shell (the video feed) opt in with class `gm-app` on : the nav sits above a viewport-locked layout instead of scrolling with the page. */ .gm-app{ overflow:hidden; } .gm-app .gm-nav{ position:relative; }