/* ============================================================================ sigma2sigma.com — σ2Σ Literature styles.css — The shared look for every page. ============================================================================ Extracted faithfully from the original index.php so the homepage, the author pages, and the reading view all share one source of truth. Two layers live here: 1. THE CORE — theme tokens, accents, masthead, wordmark, swell, works, footer. Identical to the homepage. Do not drift these. 2. AUTHORING — additions for register / login / dashboard / writing / revisions. Built in the same language as the core. Fonts are linked in each page's (Fraunces + Newsreader) so the CSS stays portable. The no-flash theme/accent script also stays inline in each because it must run before first paint. ============================================================================ */ /* ============================================================================ 1. THE CORE (matches index.php exactly) ============================================================================ */ /* ---- Theme tokens ------------------------------------------------ */ [data-theme="moonlight"]{ --bg:#16151c; --surface:#1e1d26; --text:#e9e5dd; --read:#c9c4bb; --muted:#908b85; --faint:#6e6a64; --border:#2b2933; } [data-theme="sunshine"]{ --bg:#f7f5ef; --surface:#ffffff; --text:#232228; --read:#4a4742; --muted:#6f6a63; --faint:#8c877f; --border:#e7e2d8; } /* ---- Accents (the six the author chooses / the reader can change) -- */ [data-accent="amber"]{ --accent:#d4a017; } [data-accent="ember"]{ --accent:#c45c3a; } [data-accent="sage"] { --accent:#7c9e87; } [data-accent="tide"] { --accent:#4a8fa8; } [data-accent="dusk"] { --accent:#6b4f7a; } [data-accent="ink"] { --accent:#1a1a2e; } /* deep ink on paper */ [data-theme="moonlight"][data-accent="ink"]{ --accent:#9aa0cf; } /* ink-wash on dark */ /* ---- Reset / base ----------------------------------------------- */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--text); font-family:'Newsreader', Georgia, 'Times New Roman', serif; font-optical-sizing:auto; font-weight:400; line-height:1.65; transition:background-color .4s ease, color .4s ease; } ::selection{ background:var(--accent); color:var(--bg); } .shell{ max-width:720px; margin:0 auto; padding:0 24px 96px; } /* ---- Top bar: palette + theme toggle ---------------------------- */ .topbar{ max-width:720px; margin:0 auto; padding:18px 24px 0; display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap; } .palette{ display:flex; gap:9px; align-items:center; } .swatch{ width:17px; height:17px; padding:0; border-radius:50%; border:1px solid var(--border); cursor:pointer; background:var(--sw); transition:transform .15s ease; } .swatch:hover{ transform:scale(1.18); } .swatch.is-active{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--text); } .sw-amber{ --sw:#d4a017; } .sw-ember{ --sw:#c45c3a; } .sw-sage{ --sw:#7c9e87; } .sw-tide{ --sw:#4a8fa8; } .sw-dusk{ --sw:#6b4f7a; } .sw-ink{ --sw:#1a1a2e; } .toggle{ border:1px solid var(--border); background:var(--surface); color:var(--muted); width:34px; height:34px; border-radius:50%; font-size:16px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .2s ease, border-color .2s ease; } .toggle:hover{ color:var(--accent); border-color:var(--accent); } /* ---- Masthead --------------------------------------------------- */ .masthead{ text-align:center; padding:54px 0 0; } .wordmark{ font-family:'Fraunces', Georgia, serif; font-weight:500; line-height:1; font-size:clamp(2.7rem, 9vw, 4.3rem); letter-spacing:.01em; display:inline-block; } .wordmark .lo{ font-size:.60em; color:var(--faint); } /* the smallest idea */ .wordmark .mid{ font-size:.78em; color:var(--muted); margin:0 .02em; } /* the hinge */ .wordmark .hi{ /* the sum of all things */ font-size:1.26em; font-weight:600; color:var(--accent); display:inline-block; transition:color .3s ease; } .lockup{ margin-top:14px; font-family:'Fraunces', Georgia, serif; font-size:.86rem; font-weight:500; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); padding-left:.42em; /* optical balance for tracking */ } .tagline{ margin:16px auto 0; max-width:30ch; font-style:italic; font-size:1.04rem; color:var(--muted); } /* ---- Signature: the swelling rule ------------------------------- */ .swell{ display:block; width:100%; height:12px; margin:30px 0 0; } .swell polygon{ fill:var(--accent); transition:fill .3s ease; } /* ---- Works ------------------------------------------------------ */ .works{ list-style:none; margin:46px 0 0; padding:0; } .work{ padding:28px 0; border-top:1px solid var(--border); } .work:first-child{ border-top:none; padding-top:8px; } .work-title{ font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.55rem; line-height:1.2; margin:0; color:var(--text); } .work-desc{ margin:.5em 0 0; color:var(--read); font-size:1.06rem; } .work-slug{ display:inline-block; margin-top:.7em; font-size:.82rem; letter-spacing:.04em; color:var(--faint); font-feature-settings:"tnum"; } /* ---- Empty state ------------------------------------------------ */ .empty{ margin:64px 0 0; text-align:center; } .empty p{ margin:0; font-size:1.18rem; color:var(--text); } .empty .empty-sub{ margin-top:.5em; font-style:italic; color:var(--muted); font-size:1.02rem; } /* ---- Footer ----------------------------------------------------- */ .foot{ max-width:720px; margin:80px auto 0; padding:22px 24px 0; border-top:1px solid var(--border); text-align:center; color:var(--faint); font-size:.82rem; letter-spacing:.04em; } .foot .s{ color:var(--faint); } .foot .e{ color:var(--accent); transition:color .3s ease; } /* ---- Focus / motion --------------------------------------------- */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; } @media (prefers-reduced-motion: no-preference){ .swell{ transform-origin:left center; animation:swellIn .9s cubic-bezier(.2,.7,.2,1) both; } .wordmark .hi{ animation:sigmaSettle .7s cubic-bezier(.2,.7,.2,1) .12s both; } } @keyframes swellIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } @keyframes sigmaSettle{ from{ opacity:0; transform:translateY(.06em) scale(.86); } to{ opacity:1; transform:none; } } /* ---- Small screens ---------------------------------------------- */ @media (max-width:520px){ .masthead{ padding-top:40px; } .lockup{ letter-spacing:.34em; padding-left:.34em; } .work-title{ font-size:1.4rem; } } /* ============================================================================ 2. AUTHORING (new — register / login / dashboard / writing / revisions) Built in the same visual language as the core above. ============================================================================ */ /* ---- Compact masthead for interior/author pages ----------------- */ /* A quieter version of the homepage masthead so author pages feel part of the same place without shouting the full wordmark every time. */ .mini-mast{ text-align:center; padding:40px 0 0; } .mini-mast .wordmark{ font-size:clamp(2rem, 7vw, 2.8rem); } .mini-mast .lockup{ font-size:.72rem; margin-top:10px; } /* A simple link version of the wordmark for headers (back to home). */ .brand-link{ text-decoration:none; display:inline-block; } .brand-link:hover .hi{ filter:brightness(1.12); } /* ---- Page heading (interior pages) ------------------------------ */ .page-head{ text-align:center; margin:34px 0 6px; } .page-title{ font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.9rem; line-height:1.15; margin:0; color:var(--text); } .page-sub{ margin:.6em auto 0; max-width:46ch; font-style:italic; color:var(--muted); font-size:1.02rem; } /* ---- Cards / panels --------------------------------------------- */ .panel{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:30px 28px; margin:30px auto 0; } .panel-narrow{ max-width:440px; } /* ---- Forms ------------------------------------------------------ */ .field{ margin:0 0 20px; } .field:last-child{ margin-bottom:0; } .label{ display:block; margin:0 0 7px; font-family:'Fraunces', Georgia, serif; font-size:.82rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .input, .textarea, .select{ width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:12px 14px; font-family:'Newsreader', Georgia, serif; font-size:1.05rem; line-height:1.5; transition:border-color .2s ease, box-shadow .2s ease; } .input:focus, .textarea:focus, .select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .textarea{ resize:vertical; min-height:160px; } .hint{ margin:7px 0 0; font-size:.86rem; color:var(--faint); font-style:italic; } /* ---- Buttons ---------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:'Fraunces', Georgia, serif; font-size:.96rem; font-weight:500; letter-spacing:.02em; padding:12px 22px; border-radius:7px; border:1px solid var(--accent); background:var(--accent); color:var(--bg); cursor:pointer; text-decoration:none; transition:filter .2s ease, transform .12s ease; } .btn:hover{ filter:brightness(1.08); } .btn:active{ transform:translateY(1px); } .btn-block{ width:100%; } .btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); } .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); filter:none; } .btn-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:26px; } /* ---- Inline links ----------------------------------------------- */ .link{ color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease; } .link:hover{ border-bottom-color:var(--accent); } .link-muted{ color:var(--muted); } .link-muted:hover{ color:var(--accent); } /* ---- Messages (errors / notices) -------------------------------- */ .notice{ border-radius:8px; padding:14px 16px; margin:0 0 22px; font-size:.98rem; border:1px solid var(--border); background:var(--bg); } .notice-error{ border-color:#c45c3a; color:var(--text); background:color-mix(in srgb, #c45c3a 12%, var(--bg)); } .notice-ok{ border-color:#7c9e87; color:var(--text); background:color-mix(in srgb, #7c9e87 14%, var(--bg)); } /* ---- Centered single-form pages (register / login) -------------- */ .center-wrap{ min-height:100%; padding-bottom:60px; } .alt-line{ text-align:center; margin:22px 0 0; color:var(--muted); font-size:.96rem; } /* ---- Accent chooser (author mood picker) ------------------------ */ /* Larger, labelled version of the palette for the writing screen, where choosing the colour is a deliberate authorial act, not a quiet toggle. */ .accent-choose{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; } .accent-choice{ display:inline-flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; } .accent-dot{ width:26px; height:26px; border-radius:50%; border:1px solid var(--border); background:var(--sw); transition:transform .15s ease; } .accent-choice:hover .accent-dot{ transform:scale(1.12); } .accent-choice input{ position:absolute; opacity:0; pointer-events:none; } .accent-choice input:checked + .accent-dot{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--text); } .accent-name{ font-size:.76rem; color:var(--muted); letter-spacing:.03em; } /* ---- Dashboard work list ---------------------------------------- */ .dash-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; } .work-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:22px 0; border-top:1px solid var(--border); } .work-row:first-child{ border-top:none; } .work-row .meta{ min-width:0; } .work-row .work-title{ font-size:1.35rem; } .work-row .work-status{ font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); white-space:nowrap; } /* status dots for the table of contents (● / ○) */ .dot{ display:inline-block; width:.62em; height:.62em; border-radius:50%; margin-right:.5em; vertical-align:baseline; } .dot-live{ background:var(--accent); } .dot-progress{ background:var(--accent); opacity:.55; } .dot-soon{ background:transparent; border:1px solid var(--faint); } /* ---- Writing screen --------------------------------------------- */ .write-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:760px; margin:24px auto 0; padding:0 24px; } .write-context{ font-size:.9rem; color:var(--muted); } .write-context strong{ color:var(--text); font-weight:500; } .compose{ max-width:760px; margin:0 auto; padding:0 24px 96px; } .compose .textarea{ min-height:48vh; font-size:1.12rem; line-height:1.75; padding:20px 22px; } /* A calmer, distraction-light writing surface option. */ .compose-quiet .textarea{ background:var(--surface); border-color:var(--surface); } .compose-quiet .textarea:focus{ border-color:var(--accent); } /* ---- Entry list within a chapter -------------------------------- */ .entry-list{ list-style:none; margin:30px 0 0; padding:0; max-width:760px; margin-left:auto; margin-right:auto; } .entry-item{ padding:20px 0; border-top:1px solid var(--border); } .entry-item:first-child{ border-top:none; } .entry-meta{ display:flex; gap:14px; align-items:baseline; font-size:.82rem; color:var(--faint); margin-bottom:.4em; } .entry-snippet{ color:var(--read); font-size:1.04rem; } /* ---- Revision compare (two versions side by side) --------------- */ .compare-grid{ display:grid; gap:22px; margin:28px auto 0; max-width:980px; padding:0 24px; grid-template-columns:1fr 1fr; } @media (max-width:760px){ .compare-grid{ grid-template-columns:1fr; } } .compare-col{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:22px 22px; } .compare-col h3{ font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.05rem; margin:0 0 .4em; color:var(--text); } .compare-col .ver-when{ font-size:.8rem; color:var(--faint); margin:0 0 1em; } .compare-body{ color:var(--read); font-size:1.04rem; line-height:1.7; white-space:pre-wrap; } /* ---- Reading view ----------------------------------------------- */ .read-shell{ max-width:680px; margin:0 auto; padding:0 24px 120px; } .chapter{ margin:64px 0 0; } .chapter:first-of-type{ margin-top:40px; } .chapter-title{ font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.7rem; line-height:1.2; margin:0 0 .2em; color:var(--text); } .chapter-desc{ color:var(--muted); font-style:italic; margin:0 0 1.4em; } .chapter-body{ color:var(--read); font-size:1.12rem; line-height:1.8; } .chapter-body p{ margin:0 0 1.2em; } /* Coming-soon chapter: title + description only, set quietly apart. */ .chapter-soon .chapter-title{ color:var(--muted); } .soon-tag{ display:inline-block; margin-top:.4em; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); } /* Table of contents on a work's page. */ .toc{ list-style:none; margin:40px 0 0; padding:0; } .toc-item{ padding:16px 0; border-top:1px solid var(--border); } .toc-item:first-child{ border-top:none; } .toc-link{ text-decoration:none; color:var(--text); } .toc-link:hover .toc-name{ color:var(--accent); } .toc-name{ font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.2rem; transition:color .2s ease; } .toc-desc{ color:var(--muted); font-size:1rem; margin-top:.25em; }