/* ============================== Global theme & reset ============================== */ :root{ --bg:#0b0c0f; --panel:#111318; --line:#1f2433; --muted:#8d97ad; --text:#f2f4fa; --brand:#7a78ff; --accent:#ff49c6; --ok:#18c08f; --err:#ef5757; --radius:16px; --shadow:0 10px 28px rgba(0,0,0,.28); --header-h:56px; --footer-h:0px; --inputs:#0f1217; --drawer: #090909; --hero: #161616; } @media (prefers-color-scheme: light){ :root{ --bg:#f6f8fb; --panel:#ffffff; --line:#e8eef5; --muted:#667085; --text:#0f172a; --shadow:0 10px 22px rgba(0,0,0,.08); --inputs:#ffffff; --drawer: #ffffff; --hero: #ffffff; } } *{ box-sizing:border-box; } html,body{ height:100%; } html.noscroll, html.noscroll body { overflow:hidden; } body{ margin:0; background:var(--bg); color:var(--text); font:15px/1.45 "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* --- Mobile centering + safe-area + no horizontal jiggle --- */ html, body { height: 100%; } body { overflow-x: hidden; } /* Use on any page that needs a perfectly centered card/column */ .center-page{ /* 100svh = stable viewport height on iOS; falls back to dvh if supported */ min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; /* symmetric padding with safe-area awareness (kills “askew” look) */ padding: max(16px, env(safe-area-inset-top)) max(16px, calc(16px + env(safe-area-inset-right))) max(16px, env(safe-area-inset-bottom)) max(16px, calc(16px + env(safe-area-inset-left))); } .centered-shell{ width: min(560px, 92vw); margin-inline: auto; /* true center, even with fractional px */ transform: translateZ(0); /* avoids subpixel blur/rounding on iOS */ } /* App shell (optional helper) */ .app{ display:grid; grid-template-rows: var(--header-h) 1fr var(--footer-h); height:100dvh; width:100%; } /* ============================== Header + Drawer ============================== */ .hdr{ display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:none; background:none; height:var(--header-h); } .burger{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:none; background:none; color:var(--text); cursor:pointer; } .burger svg{ width:18px; height:18px; opacity:.85; } .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:700; letter-spacing:.2px; } /* LOGO — default (dark) */ .drawer-logo, .menu-logo,.fullpage-logo{ background-image: url('https://max.applescoop.org/image/logo-white.webp'); background-size: contain; background-repeat: no-repeat; } .drawer-logo{ width:150px; height:50px; } .menu-logo{ width:50px; height:27px; } /* LOGO — auto light mode override */ @media (prefers-color-scheme: light){ .drawer-logo, .menu-logo,.fullpage-logo{ background-image: url('https://max.applescoop.org/image/logo-black.webp'); } } /* Optional manual overrides (use either class on ) */ html.theme-light .drawer-logo, html.theme-light .menu-logo{ background-image: url('https://max.applescoop.org/image/logo-black.webp'); } html.theme-dark .drawer-logo, html.theme-dark .menu-logo{ background-image: url('https://max.applescoop.org/image/logo-white.webp'); } /* End LOGO block */ .hdr-spacer{ flex:1; } .me{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:30vw; } .drawer{ position:fixed; inset:0 40% 0 0; max-width:340px; width:86vw; transform:translateX(-102%); transition:transform .28s ease; z-index:1000; background:var(--drawer); border-right:none; box-shadow:var(--shadow);outline:none; } .drawer.open{ transform:none; } .drawer-head{ display: flex; align-items: center; justify-content: space-between; padding: 30px 22px; border-bottom: none; padding-bottom: 15px; } .xbtn{ background:none; border:0; color:var(--text); font-size:22px; cursor:pointer; opacity:.85; } .nav{ padding:10px 10px 16px; display:grid; gap:8px; } .nav a{ display:flex; align-items:center; gap:10px; padding: 3px 12px; border-radius:10px; text-decoration:none; color:inherit; border:none; background:none;font-size: 19px;outline:none; } .nav a:hover{ border-color:color-mix(in oklab, var(--brand) 40%, var(--line)); } .nav small{ display: block; padding: 14px; padding-top: 0; opacity: 0.6; line-height: 14px; font-size: 11.5px;} /* ============================== Layout helpers ============================== */ .container { width:min(1100px, 92vw); margin-inline:auto; } .stack { display:grid; gap:12px; } .row { display:flex; gap:10px; align-items:center; } .row > * { flex:1; } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } } .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); } /* ============================== Buttons / Pills ============================== */ .button, .pill, button, [type="button"], [type="submit"]{ height:42px; border-radius:12px; border:1px solid var(--line); background:#141821; color:var(--text); padding:0 14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-decoration:none; font-family:"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; } .button.primary{ background: linear-gradient(140deg, #7bd5ff 0%, #7a78ff 14%, #b07bff 28%, #e36df5 42%, #ff6c9b 56%, #ff9350 72%, #ffd66b 88%, #ffe9a3 100%); color: #121212 !important; text-shadow: 0 2px 10px rgba(225, 225, 225, 0.5); border: none; font-weight: 600; cursor: pointer; max-width: 500px; margin: 0; font-size: 17px; } .button[disabled]{ opacity:.6; cursor:not-allowed; } .pill{ padding:8px 12px; height:auto; border-radius:999px; background:var(--panel); } /* ============================== Forms ============================== */ input, select, textarea{ width:100%; border-radius:12px; border:1px solid var(--line); background: var(--inputs); color:var(--text); padding:12px 12px 12px 14px; outline:none; font:15px/1.4 "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; } textarea{ resize:vertical; min-height:56px; } label{ font-size:13px; color:var(--muted); display:block; margin-bottom:6px; } /* iOS input zoom prevention */ @media (max-width:900px){ input, select, textarea { font-size:16px; } } /* Status text */ .status{ min-height:20px; text-align:center; color:var(--muted); font-size:14px; } .status.err{ color:var(--err) } .status.ok{ color:var(--ok) } /* ============================== Utilities ============================== */ .center { display:grid; place-items:center; } .hidden { display:none !important; } .muted { color:var(--muted) !important; } .text-center { text-align:center !important; } .maxw-800 { max-width:800px; } .rounded { border-radius:var(--radius); } .border { border:1px solid var(--line); } .shadow { box-shadow:var(--shadow); } .visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; border:0; padding:0; margin:-1px; } /* ============================== Footer placeholder (optional) ============================== */ .footer{ border-top:1px solid var(--line); height:var(--footer-h); } /* Links */ a{ color:inherit; } a:hover{ opacity:.92; } /* ============================== Menu tip card ============================== */ /* --- Tip card (inline for now) --- */ .drawer .nav .tip-card{ position: relative; margin: 14px 12px 18px; padding: 14px 14px 14px 46px; border-radius: 14px; /* Gradient hairline border using dual backgrounds */ background: linear-gradient(140deg, #7bd5ff 0%, #7a78ff 14%, #b07bff 28%, #e36df5 42%, #ff6c9b 56%, #ff9350 72%, #ffd66b 88%, #ffe9a3 100%); border: 1px solid transparent; color: inherit; box-shadow: 0 10px 28px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.02); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; } /* subtle corner glow */ .drawer .nav .tip-card::after{ content:""; position: absolute; inset: -40% -40% auto auto; width: 160px; height:160px; border-radius: 50%; background: radial-gradient(120px 120px at 70% 30%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; } /* light mode tweak (optional, safe if you have scheme switching) */ @media (prefers-color-scheme: light){ .drawer .nav .tip-card{ background: linear-gradient(140deg, #7bd5ff 0%, #7a78ff 14%, #b07bff 28%, #e36df5 42%, #ff6c9b 56%, #ff9350 72%, #ffd66b 88%, #ffe9a3 100%); } } /* Tip icon on the left */ .drawer .nav .tip-card .tip-ico{ position:absolute; left:12px; top:50%; transform: translateY(-50%); font-size: 22px; line-height:1; opacity: .9; } .drawer .nav .tip-card p{ margin:0; font-size: 13.5px; line-height: 1.45; } .drawer .nav .tip-card strong{ font-weight: 700; } .drawer .nav .tip-card code{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); } @media (prefers-color-scheme: light){ .drawer .nav .tip-card code{ background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); } } /* Gentle pulse on hover/focus for delight (respects reduced motion) */ @media (prefers-reduced-motion: no-preference){ .drawer .nav .tip-card{ transition: box-shadow .35s ease, transform .35s ease; } .drawer .nav .tip-card:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.03); } }