/* The site. Same palette as the editor, because they are one product and a customer moves between them in one breath. Two themes. The dark one is the app's, and it is what most people who work on comics at midnight want; the light one exists because a system set to light and a page that ignores it is a page that shouts. Nothing here picks for you: `:root` carries the dark values, `prefers-color-scheme: light` swaps them, and `data-theme` on beats both when somebody has pressed the control in the header. That ordering is the whole trick - the media query is the default, the attribute is the decision. */ :root{ --bg:#0b0d12; --bg2:#0f131a; --panel:#141922; --panel2:#1a2029; --line:#263040; --line2:#33405a; --ink:#e9edf4; --dim:#94a1b5; --mut:#6d7a8d; --accent:#ffc400; --accent2:#ff9d00; --link:#ffc400; --on-accent:#20180a; --bad:#ff8b8b; --good:#7fd08f; --shadow:0 18px 46px #0009; --shadow2:0 6px 18px #0006; --glow:#ffc4001f; } @media (prefers-color-scheme: light){ :root{ --bg:#f4f6fa; --bg2:#eceff5; --panel:#ffffff; --panel2:#f1f4f9; --line:#dde3ec; --line2:#c3ccdb; --ink:#151a22; --dim:#5c6779; --mut:#7b8698; --accent:#ffb300; --accent2:#ff8f00; --link:#9a6400; --on-accent:#241a04; --bad:#c22f2f; --good:#1f7a44; --shadow:0 18px 46px #0f172a1f; --shadow2:0 6px 18px #0f172a14; --glow:#ffb3002e; } } html[data-theme="dark"]{ --bg:#0b0d12; --bg2:#0f131a; --panel:#141922; --panel2:#1a2029; --line:#263040; --line2:#33405a; --ink:#e9edf4; --dim:#94a1b5; --mut:#6d7a8d; --accent:#ffc400; --accent2:#ff9d00; --link:#ffc400; --on-accent:#20180a; --bad:#ff8b8b; --good:#7fd08f; --shadow:0 18px 46px #0009; --shadow2:0 6px 18px #0006; --glow:#ffc4001f; } html[data-theme="light"]{ --bg:#f4f6fa; --bg2:#eceff5; --panel:#ffffff; --panel2:#f1f4f9; --line:#dde3ec; --line2:#c3ccdb; --ink:#151a22; --dim:#5c6779; --mut:#7b8698; --accent:#ffb300; --accent2:#ff8f00; --link:#9a6400; --on-accent:#241a04; --bad:#c22f2f; --good:#1f7a44; --shadow:0 18px 46px #0f172a1f; --shadow2:0 6px 18px #0f172a14; --glow:#ffb3002e; } @font-face{font-family:AntonLocal;src:url(assets/anton.ttf) format("truetype"); font-display:swap} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink); font:15px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased} /* No underlines anywhere. A link earns its difference from the colour and from moving when you point at it, not from a line through the descenders. */ a{color:var(--link);text-decoration:none} a:hover{color:var(--accent2);text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{ outline:2px solid var(--accent);outline-offset:2px} /* ------------------------------------------------------------------ header */ header{display:flex;align-items:center;gap:14px;padding:12px 22px; border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30; background:var(--bg);backdrop-filter:saturate(1.4) blur(8px)} .brand{display:flex;align-items:flex-end;gap:9px;color:inherit} .brand:hover{color:inherit} .brand .mk{display:block} .brand .wm{display:flex;align-items:flex-end;gap:0} .brand b,.brand i{font-size:23px;line-height:.82;font-weight:400} .brand b{color:var(--ink)} .brand i{color:var(--accent);font-style:normal} header nav{margin-left:auto;display:flex;align-items:center;gap:8px; font-size:14px} /* Every one of these is a button, including the ones that are links. lee: *"make teh button on the second last screenshot buttons"* - three words in a row, all the same colour, reading as one sentence you could not press. */ .navb{font:inherit;font-size:14px;font-weight:600;color:var(--ink); background:var(--panel2);border:1px solid transparent;border-radius:999px; padding:7px 14px;cursor:pointer;display:inline-flex;align-items:center; gap:7px;line-height:1;white-space:nowrap; transition:border-color .16s,background .16s,color .16s,transform .16s} .navb:hover{border-color:transparent;background:var(--line);color:var(--ink); transform:translateY(-1px)} /* Filled, not outlined. Accent TEXT on the page background disappears in the light theme (amber on white); accent BACKGROUND under --on-accent text reads in both. lee: *"chan[g]e the outilen on buttones ... use ful background color"*. */ .navb.on{background:var(--accent);border-color:var(--accent); color:var(--on-accent)} .navb.on:hover{background:var(--accent);border-color:var(--accent); color:var(--on-accent);filter:brightness(1.06)} .navb.cta{background:linear-gradient(160deg,var(--accent),var(--accent2)); color:var(--on-accent);border-color:transparent} .navb.cta:hover{color:var(--on-accent);filter:brightness(1.06)} .navb.icon{padding:7px;width:34px;height:34px;justify-content:center} .navb svg{display:block} /* ------------------------------------------------------------------- type */ main{max-width:1040px;margin:0 auto;padding:34px 22px 90px} h1,h2,h3,.brand b,.brand i,.price,.big{font-family:AntonLocal,Impact, "Arial Narrow Bold",sans-serif;font-weight:400;letter-spacing:.01em} h1{font-size:38px;margin:0 0 8px;line-height:1.06} h2{font-size:22px;margin:0 0 10px} h3{font-size:17px;margin:0 0 6px} .lede{color:var(--dim);margin:0 0 26px;max-width:64ch;font-size:16px} .dim{color:var(--dim)} .mut{color:var(--mut)} .eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);font-weight:700;margin:0 0 8px} /* ---------------------------------------------------------------- sections Each one is its own surface with its own edge, because an endless column of text is one thing to read and six panels are six. lee: *"make each section fell like their own thing so it dont feel like an endless page of text"*. */ .sect{background:var(--panel);border:1px solid var(--line);border-radius:20px; padding:26px 24px;margin:0 0 22px;position:relative;overflow:hidden} .sect::before{content:"";position:absolute;inset:0 0 auto 0;height:2px; background:linear-gradient(90deg,var(--accent),transparent 62%);opacity:.75} .sect.plain::before{display:none} .sect > :last-child{margin-bottom:0} /* Revealed as you reach it. Off by default so a page with no JavaScript is a page you can read; `html.js` is set by the first line of script that runs. */ .reveal{opacity:1} .js .reveal{opacity:0;transform:translateY(20px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .js .reveal{opacity:1;transform:none;transition:none} *{animation-duration:.001ms !important;transition-duration:.001ms !important} } /* --------------------------------------------------------------- surfaces */ /* `hidden` means hidden, whatever else a rule says. The attribute's own display:none is the browser's weakest rule, and every class here that sets `display` beat it - .forapp, .forapp-row - so the sign-in page offered "Use this account" to somebody who was signed out, and said "You are signed in" before anybody was. lee: *"that sjoud ony be an option while im accly signed in teh ine websiet because hwo does it knwo which account to sign in to"*. */ [hidden]{display:none !important} .card{background:var(--panel);border:1px solid var(--line);border-radius:16px; padding:20px;transition:border-color .16s,transform .16s,box-shadow .16s} .sect .card{background:var(--panel2)} .lift:hover{transform:translateY(-3px);border-color:var(--line2); box-shadow:var(--shadow2)} .grid{display:grid;gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} /* Four packs want to be four columns where there is room. Left to auto-fit they land three and one, and a lone card under a row of three reads as an afterthought rather than the biggest one. */ @media(min-width:900px){#packs{grid-template-columns:repeat(4,1fr)}} .grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} /* ---------------------------------------------------------------- buttons */ /* No outline on a button: the fill says it is one. lee: *"remove this faint outline on these on te button s on teh website"*. The border stays in the box model, transparent, so nothing moves when a page gives one a colour. */ button,.btn{font:inherit;font-weight:650;color:var(--ink); background:var(--panel2);border:1px solid transparent;border-radius:11px; padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center; justify-content:center;gap:9px;text-align:center; transition:border-color .16s,background .16s,transform .16s,box-shadow .16s} button:hover,.btn:hover{background:var(--line);color:var(--ink); transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)} button:active,.btn:active{transform:scale(.96)} button:disabled{opacity:.5;cursor:default;transform:none} .pri{background:linear-gradient(160deg,var(--accent),var(--accent2)); color:var(--on-accent);border-color:transparent;font-weight:750} .pri:hover{color:var(--on-accent);filter:brightness(1.06); box-shadow:0 8px 22px var(--glow)} .wide{width:100%;margin-top:8px} .gbtn svg{width:18px;height:18px;flex:none} /* ----------------------------------------------------------------- inputs */ label{display:block;font-size:11.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--dim);margin:14px 0 6px;font-weight:600} input,select{width:100%;font:inherit;color:var(--ink);background:var(--panel2); border:1px solid var(--line);border-radius:11px;padding:11px 13px; transition:border-color .16s,box-shadow .16s} input:focus,select:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px var(--glow)} input[type=range]{padding:0;background:transparent;border:0;accent-color:var(--accent)} .hint{font-size:12.5px;color:var(--dim);margin:6px 0 0;min-height:1.2em} .hint.bad{color:var(--bad)} .hint.good{color:var(--good)} .pw{position:relative} .pw input{padding-right:76px} .pw .peek{position:absolute;right:6px;top:6px;padding:6px 10px;font-size:12px; border-radius:8px;background:transparent;border-color:transparent; color:var(--dim);font-weight:600} .pw .peek:hover{background:var(--panel);border-color:var(--line);transform:none} /* ------------------------------------------------------------------ coins */ .coin{width:1em;height:1em;vertical-align:-.14em} .big{font-size:52px;font-weight:800;line-height:1; font-variant-numeric:tabular-nums} /* Packs. The third is raised, because a price list with nothing chosen makes the reader do the choosing from scratch. */ .tier{position:relative;display:flex;flex-direction:column} .tier.pick{border-color:#ffc40066;box-shadow:0 0 0 1px var(--glow), var(--shadow2)} .tag{position:absolute;top:-11px;left:20px; background:linear-gradient(160deg,var(--accent),var(--accent2)); color:var(--on-accent);font-size:10.5px;font-weight:800;letter-spacing:.07em; padding:3px 10px;border-radius:999px;text-transform:uppercase} .tier h3{margin:2px 0 2px;font-size:17px} .price{font-size:34px;font-weight:800;margin:10px 0 0} /* Tax is INSIDE the price, so this says "tax in" and not "plus tax". A person who reads $4.99 and is charged $5.99 has been surprised by their own money, and nobody reads a footnote before they read a price. */ .plustax{font-size:13px;font-weight:600;color:var(--dim);margin-left:7px; letter-spacing:.02em} .price small{font-size:14px;font-weight:500;color:var(--dim)} .tier .give{margin:10px 0 2px;font-size:15px} .tier .blurb{color:var(--dim);font-size:13.5px;flex:1;margin:8px 0 16px} /* --------------------------------------------------------------- the sums The calculator. Not a decoration: it reads the same figures the app charges with, so a person can find out what a chapter costs before they spend anything, which is the question the table underneath only half answers. */ .calc{display:grid;gap:18px;grid-template-columns:1.05fr .95fr;align-items:start} @media (max-width:760px){.calc{grid-template-columns:1fr}} .calc .out{background:var(--panel);border:1px solid var(--line); border-radius:16px;padding:20px;text-align:center} .sect .calc .out{background:var(--bg2)} .calc .sum{font-family:AntonLocal,Impact,sans-serif;font-size:56px;line-height:1; font-variant-numeric:tabular-nums;margin:6px 0 2px; transition:color .2s} .calc .per{color:var(--dim);font-size:13.5px;margin:0} .slider{display:flex;align-items:center;gap:12px} .slider input{flex:1} .slider b{min-width:3.4em;text-align:right;font-variant-numeric:tabular-nums; font-size:15px} .chips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 0} .chip{font-size:12.5px;font-weight:600;color:var(--dim);background:var(--panel2); border:1px solid var(--line);border-radius:999px;padding:5px 11px; cursor:pointer;transition:all .16s} .sect .chip{background:var(--bg2)} .chip:hover{border-color:var(--line2);color:var(--ink)} .chip.on{border-color:var(--accent);color:var(--accent);background:var(--glow)} /* ------------------------------------------------------------------- misc */ .row{display:flex;align-items:center;gap:12px} .row+.row{margin-top:10px} .spread{justify-content:space-between;flex-wrap:wrap} table{width:100%;border-collapse:collapse;font-size:14px} td,th{text-align:left;padding:10px 6px;border-bottom:1px solid var(--line)} tr:last-child td{border-bottom:0} th{color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase} td.n{text-align:right;font-variant-numeric:tabular-nums} /* Money in is green, money out is red. Both are stated: a bare number in a ledger is a number you have to work out the sign of. */ td.plus{color:var(--good);font-weight:650} td.minus{color:var(--bad);font-weight:650} .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:-90px; background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:12px 18px;box-shadow:var(--shadow);transition:bottom .24s;z-index:60; max-width:min(92vw,420px)} .toast.on{bottom:24px} .toast.bad{border-color:var(--bad);color:var(--bad)} .tabs{display:flex;gap:6px;margin-bottom:18px;background:var(--panel2); border:1px solid var(--line);border-radius:13px;padding:4px} .sect .tabs{background:var(--bg2)} .tabs button{flex:1;border-color:transparent;background:transparent; border-radius:10px;padding:9px 8px;font-size:14px;white-space:nowrap} .tabs button:hover{background:var(--panel);transform:none} .tabs button.on{background:var(--panel);border-color:var(--line); color:var(--accent)} .narrow{max-width:440px;margin:0 auto} .sep{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:12.5px; margin:20px 0} .sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)} .foot{margin-top:28px;color:var(--dim);font-size:13px;text-align:center} /* The strip the sign-in page shows when the MangaTCT app opened it. */ .forapp{margin-bottom:14px;padding:14px 18px;font-size:13.5px;line-height:1.5; border-color:var(--accent);display:flex;flex-direction:column;gap:4px} .forapp b{color:var(--accent)} .forapp-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .forapp-row button{font-size:13px;padding:8px 14px} .forapp.done{padding:26px 22px;font-size:15px} .forapp.done h2{margin:0 0 6px;color:var(--accent)} /* Deleting an account (account.html): fenced off, and red. */ .delzone{border:1px solid var(--bad);border-radius:16px;padding:20px 22px} .delzone h2{margin-top:0} .delbtn{border-color:var(--bad);color:var(--bad)} .delbtn:hover{background:var(--bad);color:#fff} /* ------------------------------------------------------------------ modal The username popup. A dialog and not a page, because it happens once, at the moment the account is made, and a redirect there and back would lose whatever the person was in the middle of buying. */ .veil{position:fixed;inset:0;background:#05070bcc;backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;padding:20px;z-index:50; opacity:0;pointer-events:none;transition:opacity .2s} .veil.on{opacity:1;pointer-events:auto} .modal{background:var(--panel);border:1px solid var(--line);border-radius:20px; padding:26px;width:min(440px,100%);box-shadow:var(--shadow); transform:translateY(14px) scale(.98);transition:transform .24s} .veil.on .modal{transform:none} .modal h2{margin-top:0} /* ------------------------------------------------------------------ small The header is the thing that breaks first: five pills and a brand do not fit across a phone, and the one that fell off the end was the theme control. It wraps onto a second row instead. */ @media (max-width:640px){ header{flex-wrap:wrap;gap:10px;padding:10px 14px} header nav{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;gap:6px} .navb{padding:6px 11px;font-size:13px} main{padding:24px 16px 72px} h1{font-size:30px} .sect{padding:20px 16px;border-radius:16px} .big{font-size:42px} .calc .sum{font-size:46px} }