/* ============================================================================ shell.css — shared site chrome (header + footer) + warm ground. Link on every page: Opt a page's body into the warm surface: The header/footer markup is standardised (see shell.js or the page source), keeping each page's own element ids so its existing auth JS still works. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap'); .shell-warm{ --shell-paper:#F1ECE3; --shell-paper-2:#E9E2D5; --shell-ink:#1B1C26; --shell-ink-soft:#4B4E6D; --shell-muted:#8B8677; --shell-line:#E1D9CA; --shell-acc:#C65170; --shell-acc-deep:#501B29; --shell-card:#FFFFFF; } /* pages that want the flat warm ground (no bg image of their own) */ .shell-warm.shell-ground{background:var(--shell-paper);color:var(--shell-ink)} /* ---------------------------------------------------------------- header --- */ .shell-hdr{ position:sticky;top:0;z-index:200; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:background-color .25s ease, box-shadow .25s ease, border-color .25s ease; } .shell-hdr.is-scrolled{ background:rgba(255,255,255,.97); border-bottom-color:rgba(27,20,10,.07); box-shadow:0 10px 30px -24px rgba(27,20,10,.5); } .shell-hdr-in{ display:flex;align-items:center;justify-content:space-between;gap:14px; max-width:1140px;margin:0 auto;padding:12px 20px; } .shell-hdr-mid{display:flex;align-items:center;min-width:0} /* optional page slot */ .shell-brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0} .shell-logo{height:34px;width:auto;display:block} .shell-nav{display:flex;align-items:center;gap:9px;flex-shrink:0} .shell-community{ display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap; height:38px;box-sizing:border-box;padding:0 14px;border-radius:10px; background:transparent;border:1px solid var(--shell-line,#E1D9CA); font-family:'IBM Plex Mono','Prompt',monospace;font-size:.72rem;color:#4B4E6D; transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s; } .shell-community b{color:#1B1C26;font-weight:600} .shell-community svg{width:15px;height:15px;flex-shrink:0} .shell-community:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(27,20,10,.3)} .shell-login{ display:inline-flex;align-items:center;gap:7px;cursor:pointer;text-decoration:none; height:38px;box-sizing:border-box;padding:0 18px;border-radius:999px; background:transparent;border:1.5px solid #1B1C26;color:#1B1C26; font-family:'Prompt',Inter,sans-serif;font-weight:600;font-size:.86rem; transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s; } .shell-login svg{width:15px;height:15px} .shell-login:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(27,20,10,.3)} .shell-profile{ display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit; height:38px;box-sizing:border-box;padding:0 13px 0 5px;border-radius:10px; background:transparent;border:1px solid var(--shell-line,#E1D9CA); transition:box-shadow .18s; } .shell-profile:hover{box-shadow:0 6px 16px -8px rgba(27,20,10,.3)} .shell-profile-pic{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(27,20,10,.08)} .shell-profile-name{font-family:'Prompt',Inter,sans-serif;font-weight:600;font-size:.82rem;color:#1B1C26;white-space:nowrap} @media (max-width:520px){ .shell-logo{height:30px} .shell-community-txt{display:none} .shell-community{padding:8px} .shell-login{padding:9px 14px} } /* --- site menu (hamburger) — sits after the login/profile pill, links across every property (tools, clubs, home). Pair a .shell-menu-btn with a sibling .shell-menu-panel inside one .shell-menu-wrap. --------------- */ .shell-menu-wrap{position:relative;flex-shrink:0} .shell-menu-btn{ display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;box-sizing:border-box;flex-shrink:0;cursor:pointer;padding:0; background:none;border:none; transition:opacity .18s; } .shell-menu-btn:hover{opacity:.6} .shell-menu-btn svg{width:19px;height:19px;color:#1B1C26;pointer-events:none} .shell-menu-panel{ position:absolute;top:calc(100% + 10px);right:0;min-width:208px;z-index:250; background:#fff;border:1px solid var(--shell-line,#E1D9CA);border-radius:14px; box-shadow:0 20px 44px -20px rgba(27,20,10,.45);padding:7px; opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right; transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; } .shell-menu-panel.is-open{ opacity:1;visibility:visible;transform:translateY(0) scale(1); transition:opacity .16s ease, transform .16s ease; } .shell-menu-panel a{ display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px; text-decoration:none;color:#1B1C26;font-family:'Prompt',Inter,sans-serif;font-size:.87rem;font-weight:500; transition:background-color .15s;white-space:nowrap; } .shell-menu-panel a .shell-menu-ic{width:16px;height:16px;flex-shrink:0;color:#4B4E6D} .shell-menu-panel a .shell-menu-logo{height:20px;width:auto;max-width:140px;object-fit:contain;display:block} .shell-menu-panel a .shell-menu-pill{display:inline-block;margin-left:5px;padding:2px 10px;border-radius:999px;background:linear-gradient(135deg,#9B6DFF,#6D28D9);color:#fff;font-size:.85em} .shell-menu-panel a:hover{background:rgba(27,20,10,.06)} .shell-menu-panel hr{border:0;border-top:1px solid var(--shell-line,#E1D9CA);margin:6px 4px} /* --- drop the standard logo mark into a tool page's existing home/back button, without fighting that button's own circular icon styling --- */ .shell-brandbtn{ width:auto!important;height:auto!important;border-radius:10px!important; background:transparent!important;border:none!important;box-shadow:none!important; padding:2px 0!important;display:flex!important;align-items:center; } .shell-brandbtn img{height:26px;width:auto;display:block} /* --- legacy .topbar bridge: re-skins the tool pages' existing topbar to the shell look without touching their markup/JS. Pair with .shell-warm. ----- */ .shell-warm .topbar{ background:rgba(241,236,227,.72)!important; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:background-color .25s ease, box-shadow .25s ease, border-color .25s ease; } .shell-warm .topbar.is-scrolled{ background:rgba(241,236,227,.92)!important; border-bottom-color:rgba(27,20,10,.07); box-shadow:0 10px 30px -24px rgba(27,20,10,.5); } .shell-warm .topbar-back{ border-color:var(--shell-line,#E1D9CA)!important;background:rgba(255,255,255,.5)!important;color:#4B4E6D!important; } .shell-warm .topbar-back:hover{background:rgba(255,255,255,.8)!important;box-shadow:0 6px 16px -8px rgba(27,20,10,.3)!important} .shell-warm .topbar-login-btn{ background:#1B1C26!important;border:1.5px solid #1B1C26!important;color:#fff!important; border-radius:999px!important;font-family:'Prompt',Inter,sans-serif!important;font-weight:600!important; } .shell-warm .topbar-login-btn:hover{background:#2b2c38!important;color:#fff!important;transform:translateY(-1px)} .shell-warm .topbar-profile, .shell-warm .topbar-stats-btn{ background:rgba(255,255,255,.6)!important;border:1px solid var(--shell-line,#E1D9CA)!important; } .shell-warm .topbar-profile-name{font-family:'Prompt',Inter,sans-serif!important;color:#1B1C26!important} .shell-warm .topbar-progress{background:var(--shell-acc,#C65170)!important} /* the DEK70 / tab pill inside a tool-page topbar */ .shell-warm .start-tab-bar{background:rgba(27,20,10,.05)!important} .shell-warm .start-tab-slider{background:#fff!important;box-shadow:0 2px 8px -2px rgba(27,20,10,.35)!important} /* ---------------------------------------------------------------- footer --- */ .shell-ft{ background:#1E1F2A;color:rgba(255,255,255,.62); padding:56px max(24px,4vw) 40px;text-align:center; font-family:Inter,'Prompt',sans-serif; } .shell-ft-in{max-width:600px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px} .shell-ft-brand{display:inline-flex;background:#fff;padding:9px 14px;border-radius:12px;box-shadow:0 2px 14px rgba(0,0,0,.28)} .shell-ft-brand img{height:42px;width:auto;display:block} .shell-ft-line a{ display:inline-flex;align-items:center;gap:8px;text-decoration:none; color:#fff;background:#06C755;padding:9px 18px;border-radius:999px; font-weight:600;font-size:.85rem; } .shell-ft-line svg{width:16px;height:16px} .shell-ft-social{display:flex;gap:14px} .shell-ft-social a{color:rgba(255,255,255,.55);transition:color .18s} .shell-ft-social a:hover{color:#fff} .shell-ft-social svg{width:20px;height:20px} .shell-ft-legal{font-size:.72rem;line-height:1.7;color:rgba(255,255,255,.5)} .shell-ft-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}