/* ══════════════════════════════════════════════════════════════════════ Cosmic Sphere Maine Coons Tokens mirror design/themes/themes.css. Ground is #0D090D, the measured colour of the logo's own plate, so the artwork has no visible edge. Single-theme dark by necessity: the wordmark is white brush script with no vector source. See docs/logo.md. Theme is switched by data-theme on ; the accent is the only thing that moves. Nothing reflows. ══════════════════════════════════════════════════════════════════════ */ :root { --bg:#0D090D; --surface:#17121A; --raised:#221B26; --divider:#2E2733; --text:#EDE9F0; --muted:#A79FB0; --accent:#5AD2F2; --accent-dim:#2E8FAB; --ok:#7ED3A0; --warn:#E8B75C; --display:"Fraunces","Iowan Old Style",Georgia,serif; --body:"Newsreader","Iowan Old Style",Georgia,serif; --data:"IBM Plex Mono",ui-monospace,Menlo,monospace; --radius:10px; --gutter:clamp(18px, 5vw, 40px); --shell:1120px; } [data-theme="nebula"] { --accent:#5AD2F2; --accent-dim:#2E8FAB; } [data-theme="deep-field"] { --accent:#7BA6F5; --accent-dim:#3F63A8; } [data-theme="ember"] { --accent:#F0A254; --accent-dim:#A8682F; } [data-theme="aurora"] { --accent:#8FDE63; --accent-dim:#549140; } [data-theme="vela"] { --accent:#F075A8; --accent-dim:#A8426B; } *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; /* iOS must not resize text on rotate */ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } body { margin:0; background:var(--bg); color:var(--text); font:400 17px/1.65 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; /* belt and braces; nothing should overflow */ } img{display:block;max-width:100%;height:auto} h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.12; margin:0; text-wrap:balance; font-variation-settings:"SOFT" 20,"WONK" 1; } p{margin:0} a{color:var(--accent);text-underline-offset:3px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} /* One gutter, set once, honouring the notch on a landscape iPhone. */ .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); } .kicker{ font-family:var(--data); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block; } /* ── header ───────────────────────────────────────────────────────────── Stacks to two rows on narrow screens rather than squeezing; the nav row scrolls sideways inside itself if it ever has to, so the page never does. */ .masthead{border-bottom:1px solid var(--divider)} .masthead > .shell{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding-block:14px; } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-height:44px; flex:0 0 auto; } .brand img{width:38px;height:48px;object-fit:contain} .brand b{font-family:var(--display);font-size:18px;font-weight:500;white-space:nowrap} .brand span{color:var(--muted)} .mainnav{ display:flex; gap:4px; margin-inline-start:auto; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; max-width:100%; } .mainnav::-webkit-scrollbar{display:none} .mainnav a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:12px; font-size:15px; color:var(--muted); text-decoration:none; white-space:nowrap; border-radius:var(--radius); } .mainnav a:hover{color:var(--text)} .mainnav a[aria-current="page"]{color:var(--accent)} /* ── buttons ────────────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:var(--radius); font:500 16px/1 var(--body); text-decoration:none; cursor:pointer; border:1px solid var(--accent); background:none; color:var(--accent); transition:background .15s,color .15s; } .btn-fill{background:var(--accent);color:var(--bg);border-color:var(--accent)} .btn-fill:hover{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--text)} .btn:not(.btn-fill):hover{background:var(--surface)} .btn-row{display:flex;flex-wrap:wrap;gap:12px} /* ── sections ───────────────────────────────────────────────────────── */ section{padding-block:clamp(40px,7vw,72px)} section + section{border-top:1px solid var(--divider)} .split{ display:grid; gap:clamp(28px,5vw,52px); align-items:center; grid-template-columns:1fr; } @media (min-width:860px){ .split{grid-template-columns:1.05fr .95fr} .split.reverse > :first-child{order:2} } .hero h1{font-size:clamp(30px,6.4vw,54px);font-variation-settings:"opsz" 100,"SOFT" 30,"WONK" 1} .hero p{color:var(--muted);max-width:44ch;margin-block:18px 26px;font-size:clamp(16px,2.4vw,19px)} .hero img{width:min(100%,400px);margin-inline:auto} .prose{max-width:62ch} .prose h2{font-size:clamp(24px,4.2vw,34px);margin-bottom:14px} .prose p{color:var(--muted);margin-bottom:18px} /* placeholder where a real cat photo will go — never a stand-in animal */ .photo-slot{ aspect-ratio:4/5; border-radius:var(--radius); display:grid; place-items:center; text-align:center; padding:20px; border:1px dashed var(--divider); font-family:var(--data); font-size:13px; color:var(--muted); background:repeating-linear-gradient(135deg,var(--surface) 0 10px,var(--raised) 10px 20px); } .tags{display:flex;flex-wrap:wrap;gap:6px;margin-block:12px} .tag{ font-family:var(--data); font-size:11px; padding:4px 10px; border-radius:4px; border:1px solid var(--accent-dim); color:var(--accent); } .tag.plain{border-color:var(--divider);color:var(--muted)} .callout{ background:var(--surface); border-radius:var(--radius); padding:clamp(22px,4vw,36px); display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; } .callout h2{font-size:clamp(21px,3.4vw,27px);margin-bottom:8px} .callout p{color:var(--muted);max-width:50ch} .sitefoot{border-top:1px solid var(--divider);color:var(--muted);font-size:13px} .sitefoot > .shell{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; padding-block:26px; padding-bottom:max(26px, env(safe-area-inset-bottom)); } .sitefoot a{color:var(--muted)} .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .skip{ position:absolute; left:-9999px; top:8px; z-index:20; background:var(--surface); color:var(--text); padding:12px 18px; border-radius:var(--radius); } .skip:focus{left:12px} /* ── cat grid ───────────────────────────────────────────────────────── */ .catgrid{ display:grid; gap:26px 20px; margin-top:34px; grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr)); } .catcard{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit} .catcard .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .catcard b{font-family:var(--display);font-size:19px;font-weight:500} .catcard small{color:var(--muted);font-size:14px} .catcard:hover b{color:var(--accent)} .note{ background:var(--surface); border-left:2px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; padding:18px 20px; color:var(--muted); font-size:15px; max-width:62ch; } .note b{color:var(--text);font-weight:500} /* ── cards and forms ────────────────────────────────────────────────── */ .card{ background:var(--surface); border-radius:var(--radius); padding:clamp(20px,4vw,28px); display:flex; flex-direction:column; gap:18px; } .field{display:flex;flex-direction:column;gap:7px;margin:0;border:0;padding:0;min-width:0} .field label,.field legend{font-size:15px;color:var(--text);padding:0} .field .opt{color:var(--muted);font-size:13px} .field-row{display:grid;gap:18px;grid-template-columns:1fr} @media (min-width:560px){ .field-row{grid-template-columns:1fr 1fr} } input[type=text],input:not([type]),input[type=email],input[type=tel],textarea{ width:100%; background:var(--raised); color:var(--text); border:1px solid var(--divider); border-radius:var(--radius); padding:13px 14px; /* 16px floor: below this iOS zooms the page when the field is focused */ font:400 16px/1.5 var(--body); } textarea{resize:vertical;min-height:96px} input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent} ::placeholder{color:#6F6878} .choices{display:flex;flex-wrap:wrap;gap:8px 18px} .choices label{ display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:16px; color:var(--muted); cursor:pointer; } .choices input{accent-color:var(--accent);width:19px;height:19px;flex:none} .choices label:has(input:checked){color:var(--text)} .formnote{font-size:13px;color:var(--muted);max-width:40ch;margin:0} .formnote[role=alert]{color:var(--warn)} /* ── admin: question sheet ──────────────────────────────────────────── */ .qa-top{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding-block:26px} .qa-top img{width:64px;flex:none} .qa-top > div{flex:1 1 260px} .qa-top h1{font-size:clamp(22px,4.8vw,30px)} .qa-top p{color:var(--muted);font-size:15px;margin-top:6px;max-width:52ch} .qa-progress{position:sticky;top:0;z-index:5;background:var(--bg); border-block:1px solid var(--divider);padding-block:11px} .qa-progress .shell{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .qa-progress .bar{flex:1 1 140px;height:6px;border-radius:3px;background:var(--raised);overflow:hidden} .qa-progress .bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s} .count,.state{font-family:var(--data);font-size:12px;color:var(--muted);white-space:nowrap} .state.on{color:var(--ok)} .state.err{color:var(--warn)} #qa section{padding-block:26px} #qa section + section{border-top:1px solid var(--divider)} #qa h2{font-size:clamp(19px,3.6vw,24px);margin-top:6px} #qa .lede{color:var(--muted);font-size:15px;margin-top:8px;max-width:60ch} .q{padding:18px 0;border-bottom:1px solid var(--divider)} .q:last-child{border-bottom:0} .q > label{display:block;font-size:17px;margin-bottom:4px;cursor:pointer} .q .why{color:var(--muted);font-size:14px;margin-bottom:10px;max-width:62ch} .q .need{font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase; padding:3px 7px;border-radius:4px;margin-left:8px;white-space:nowrap; border:1px solid var(--accent-dim);color:var(--accent);display:inline-block} .q .need.later{border-color:var(--divider);color:var(--muted)} .saved{display:block;font-family:var(--data);font-size:11px;color:var(--ok); margin-top:6px;min-height:15px;opacity:0;transition:opacity .2s} .saved.show{opacity:1} .msgs{display:flex;flex-direction:column;gap:14px;margin-top:4px} .msg{border-left:2px solid var(--divider);padding:2px 0 2px 14px} .msg .who{font-family:var(--data);font-size:11px;color:var(--muted)} .msg p{margin-top:3px;white-space:pre-wrap;font-size:16px} /* Footer links are standalone controls, so they need a real tap target; Apple's guidance is 44pt minimum. Inline links inside prose are exempt — they are part of a text run and cannot be 44px tall without wrecking the line height. */ .sitefoot a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:2px; } .sitefoot > .shell{padding-block:14px} /* ── admin chrome ───────────────────────────────────────────────────── */ .adminbar{background:var(--raised);border-bottom:1px solid var(--divider); font-size:13px;font-family:var(--data)} .adminbar .shell{display:flex;align-items:center;gap:10px;padding-block:9px;flex-wrap:wrap} .adminbar .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none} .adminbar span:not(.dot){color:var(--muted)} .adminbar .viewsite{margin-left:auto;color:var(--accent);text-decoration:none; min-height:44px;display:inline-flex;align-items:center} .adminnav{border-bottom:1px solid var(--divider)} .adminnav .shell{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} .adminnav .shell::-webkit-scrollbar{display:none} .adminnav a{display:inline-flex;align-items:center;min-height:48px;padding-inline:14px; font-size:15px;color:var(--muted);text-decoration:none;white-space:nowrap; border-bottom:2px solid transparent} .adminnav a:hover{color:var(--text)} .adminnav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)} .tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit; background:var(--surface);border-radius:var(--radius);padding:20px; border:1px solid transparent} .tile:hover{border-color:var(--accent-dim)} .tile b{font-family:var(--display);font-size:21px;font-weight:500} .tile small{color:var(--muted);font-size:14px;line-height:1.5} .themegrid{display:grid;gap:14px;margin-top:28px; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))} .themecard{display:flex;flex-direction:column;gap:7px;text-align:left;cursor:pointer; background:var(--surface);border:1px solid var(--divider); border-radius:var(--radius);padding:16px;color:inherit;font:inherit} .themecard:hover{border-color:var(--accent-dim)} .themecard[aria-pressed="true"]{border-color:var(--accent)} .themecard .sw{width:34px;height:34px;border-radius:8px; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset} .themecard b{font-family:var(--display);font-size:19px;font-weight:500} .themecard small{color:var(--muted);font-size:13px;line-height:1.45} .themecard .cur{font-family:var(--data);font-size:11px;color:var(--accent);margin-top:4px} .themecard[aria-pressed="false"] .cur{color:var(--muted)} .enq{background:var(--surface);border-radius:var(--radius);padding:18px; display:flex;flex-direction:column;gap:11px;margin-bottom:16px} .enq header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:start} .enq header > div{display:flex;flex-direction:column;gap:2px;min-width:0} .enq header b{font-family:var(--display);font-size:19px;font-weight:500} .enq header a{font-size:14px;word-break:break-all} .enq .muted{color:var(--muted);font-size:14px} .enq .meta{font-family:var(--data);font-size:12px;color:var(--muted)} .enq .body{white-space:pre-wrap;font-size:16px} .enq textarea{min-height:66px}