/* * The Card and Simple looks, from the owner-approved prototype docs/design/looks-prototype.html. One DOM, two skins: * picks the skin, .card-only and .simple-only parts show in one look only. * No web fonts from other hosts: /fonts/fonts.css serves them from this app. */ :root { --ground: #efebe3; --surface: #fbfaf7; --surface-2: #f3efe6; --ink: #1f1b15; --muted: #6a6254; --line: #d8d0bf; --accent: #7a5716; --accent-ink: #fffaf0; --bad: #9b2a22; --bad-bg: #fbeceb; --good: #2c6b3e; --focus: #b8913a; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --ground: #13110e; --surface: #1d1a15; --surface-2: #26221b; --ink: #efe8da; --muted: #a79c89; --line: #3a342a; --accent: #e2b866; --accent-ink: #1a1408; --bad: #ff9c90; --bad-bg: #3a1c18; --good: #8fd6a2; --focus: #e2b866; color-scheme: dark; } } * { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.5 "Source Sans 3", system-ui, sans-serif; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- frame of every page ---------- */ /* Full screen (#47): header and footer are bars across the whole width, with their content kept inside 72rem. The stage takes the height left over, so the footer sits at the bottom of short pages. */ .app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .apphead { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .7rem max(16px, (100% - 72rem) / 2); background: var(--surface); border-bottom: 1px solid var(--line); } .brand { font: 700 1.15rem/1 "Cormorant SC", Georgia, serif; letter-spacing: .04em; color: inherit; text-decoration: none; } .look { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: .15rem; background: var(--surface-2); } .look button { border: 0; background: transparent; border-radius: 999px; padding: .25rem .8rem; cursor: pointer; font-size: .88rem; color: var(--muted); } .look button[aria-pressed="true"] { background: var(--ink); color: var(--ground); } html:not(.js) .look { display: none; } .stage { flex: 1; padding: 1.5rem 16px 2rem; } .appfoot { padding: .8rem max(16px, (100% - 72rem) / 2) 1rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); background: var(--surface); } .error, .notice { max-width: 34rem; margin: 0 auto 1rem; border-radius: .5rem; padding: .55rem .8rem; font-size: .92rem; } .error { background: var(--bad-bg); color: var(--bad); border: 1px solid currentColor; } .notice { background: var(--surface); color: var(--ink); border: 1px solid var(--accent); } /* ---------- form parts, both looks ---------- */ .lab { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .2rem; } .field { display: grid; gap: .1rem; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } /* A label that wraps, like "NON-FOIL (300gsm cardstock)", must not push its input below its neighbor's (#77). */ .two > .field { align-content: end; } .inp, select, textarea { width: 100%; border-radius: .35rem; padding: .45rem .55rem; } textarea { font: 500 .8rem/1.45 "JetBrains Mono", ui-monospace, monospace; resize: vertical; min-height: 8.5rem; } input[readonly] { opacity: .75; } .choices { display: flex; flex-wrap: wrap; gap: .35rem; } .choices label { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; cursor: pointer; font-size: .85rem; } .choices input { accent-color: var(--accent); margin: 0; } .status { min-height: 1.3em; margin: 0; font-size: .85rem; } .status.good { color: var(--good); } .status.bad { color: var(--bad); } .help { margin: 0; font-size: .85rem; } .plain { margin: 0; font-size: .92rem; } .num { font-variant-numeric: tabular-nums lining-nums; } .btn { display: inline-block; border: 0; cursor: pointer; padding: .65rem 1rem; border-radius: .35rem; font-weight: 700; text-align: center; text-decoration: none; } .actions { display: flex; flex-wrap: wrap; gap: .5rem; } .links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; } .quote-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 .8rem/1.5 "JetBrains Mono", ui-monospace, monospace; padding: .6rem .7rem; border-radius: .35rem; } altcha-widget { display: block; --altcha-max-width: 100%; --altcha-border-radius: .35rem; } /* ======== CARD LOOK ======== */ [data-look="card"] .simple-only { display: none !important; } .card { display: block; max-width: 34rem; margin: 0 auto; padding: .7rem; border-radius: 1.1rem; background: #0d0c0b; box-shadow: 0 16px 40px #0007; } .frame { border-radius: .6rem; padding: .5rem; display: grid; gap: .45rem; background: linear-gradient(135deg, #ffffff30, #0000 30%, #0000 70%, #00000040), linear-gradient(160deg, #cfae63, #8f6a24 45%, #d9bb74 70%, #7d5b1d); } .bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; padding: .35rem .55rem; border-radius: .6rem / .9rem; background: linear-gradient(#f4ead2, #e2d3ae); color: #1d160b; box-shadow: inset 0 0 0 1px #6d521b, 0 1px 0 #fff6; min-width: 0; } .name { font: 700 1.08rem/1.15 "Cormorant SC", "Cinzel", serif; letter-spacing: .02em; overflow-wrap: anywhere; } .type { font: 600 .9rem/1.15 "Cormorant SC", "Cinzel", serif; overflow-wrap: anywhere; } .gem { min-width: 2.35rem; height: 2.35rem; padding: 0 .35rem; border-radius: 999px; display: grid; place-content: center; font: 800 .8rem/1 "Cinzel", serif; color: #1a1305; background: radial-gradient(circle at 35% 30%, #fff7de, #e3c46e 45%, #9a7322); box-shadow: 0 0 0 1px #5a420f, 0 1px 2px #0008; } .gem.small { min-width: 1.8rem; height: 1.8rem; font-size: .62rem; } .art { position: relative; aspect-ratio: 4 / 2.2; max-width: 100%; border-radius: .2rem; overflow: hidden; box-shadow: inset 0 0 0 1px #3a2a0c, 0 0 0 2px #6d521b; background: radial-gradient(circle at 72% 32%, #ffe7a8 0 3%, #ffcf6a55 6%, #0000 22%), radial-gradient(ellipse at 30% 80%, #2f5f8a 0%, #0000 55%), radial-gradient(ellipse at 80% 90%, #5b2a6e 0%, #0000 50%), linear-gradient(170deg, #1c2d4d, #0f1629 60%, #1a1030); } .art svg { position: absolute; inset: 0; width: 100%; height: 100%; } .art .stats { position: absolute; left: .55rem; right: .55rem; bottom: .45rem; font: 600 .74rem/1.25 "Spectral", serif; color: #f6ecd2; text-shadow: 0 1px 2px #000; } .art.faded { filter: grayscale(1) brightness(.55); } .box { padding: .75rem .7rem .65rem; border-radius: .2rem; color: #21190e; display: grid; gap: .6rem; background: radial-gradient(circle at 20% 0%, #fffaf0, #efe3c6 70%); box-shadow: inset 0 0 0 1px #6d521b; font-family: "Spectral", Georgia, serif; } [data-look="card"] .lab { font: 600 .68rem/1.2 "Spectral", serif; letter-spacing: .08em; text-transform: uppercase; color: #6a5021; } [data-look="card"] .inp, [data-look="card"] select, [data-look="card"] textarea { background: #fffdf7; border: 1px solid #c7b48a; color: #21190e; } [data-look="card"] .choices label { border: 1px solid #c7b48a; background: #fffaf0; color: #3b2d17; } [data-look="card"] .choices input { accent-color: #7a5716; } [data-look="card"] .status, [data-look="card"] .help { color: #5b4a2c; } [data-look="card"] .status.good { color: #2c6b3e; } [data-look="card"] .status.bad { color: #9b2a22; } [data-look="card"] altcha-widget { --altcha-color-base: #fffaf0; --altcha-color-base-content: #3b2d17; --altcha-border-color: #c7b48a; --altcha-color-primary: #7a5716; --altcha-color-primary-content: #fffaf0; --altcha-color-error: #9b2a22; --altcha-color-success: #2c6b3e; --altcha-checkbox-border-color: #c7b48a; color: #3b2d17; } .rule { border: 0; height: 1px; margin: 0; background: linear-gradient(90deg, #0000, #6d521b88, #0000); } .flavor { margin: 0; font-style: italic; font-size: .9rem; color: #4a3a22; } .bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .55rem; } [data-look="card"] .btn { font: 700 .82rem/1.1 "Cinzel", serif; letter-spacing: .08em; color: #f4e6c2; background: linear-gradient(#2d2213, #17110a); box-shadow: inset 0 0 0 1px #b8913a; } [data-look="card"] .btn.ghost { background: #fffaf0; color: #3b2d17; box-shadow: inset 0 0 0 1px #c7b48a; } [data-look="card"] .links a { color: #6a4a10; font-size: .88rem; } [data-look="card"] .box :focus-visible { outline-color: #7a5716; } .pt { padding: .3rem .6rem; border-radius: .35rem; background: linear-gradient(#f4ead2, #dfcfa6); box-shadow: inset 0 0 0 1px #6d521b, 0 1px 3px #0007; font: 800 1rem/1 "Cinzel", serif; color: #1d160b; text-align: center; white-space: nowrap; } .pt small { display: block; font: 600 .5rem/1 "Spectral", serif; letter-spacing: .08em; text-transform: uppercase; margin-top: .18rem; color: #5b4418; } .credit { display: flex; justify-content: space-between; gap: .5rem; padding: 0 .3rem; font: 500 .62rem/1 "Spectral", serif; color: #2b1f0a; letter-spacing: .05em; } [data-look="card"] .quote-text { background: #fffdf7; border: 1px dashed #b39a64; color: #21190e; } /* ---------- Card spread background (#44, #47) ---------- */ /* A dark table in light and dark mode alike, edge to edge. The background sits in its own layer: no pointer events, and contained, so the drifting frames never touch the layout or paint of the form above them. The frames stand in the free space beside the card, three on each side. --g is the width of that space. They size to it and to the screen height, so they never reach the card, and they only show from 64rem wide. */ [data-look="card"] .stage { position: relative; isolation: isolate; overflow: hidden; min-height: 44rem; background: radial-gradient(ellipse at 50% 30%, #3b2a1d, #1c130c); } [data-look="card"] .stage > :not(.bgs) { position: relative; z-index: 1; } .bgs { position: absolute; inset: 0; z-index: 0; pointer-events: none; contain: strict; } .bg-wood { position: absolute; inset: 0; width: 100%; height: 100%; } .bg-defs { position: absolute; width: 0; height: 0; } .sf { --g: calc((100% - 34rem) / 2); --w: min(11rem, var(--g) * .4, 15vh); display: none; position: absolute; width: var(--w); aspect-ratio: 140 / 196; opacity: .5; } .sf svg { display: block; width: 100%; height: 100%; } @media (min-width: 64rem) { .sf { display: block; } } .sf.l1, .sf.r1 { top: 6%; } .sf.l2, .sf.r2 { top: 50%; translate: 0 -50%; } .sf.l3, .sf.r3 { bottom: 6%; } .sf.l1 { left: calc(var(--g) * .55 - var(--w) / 2); rotate: -18deg; } .sf.l2 { left: calc(var(--g) * .35 - var(--w) / 2); rotate: 6deg; } .sf.l3 { left: calc(var(--g) * .6 - var(--w) / 2); rotate: 12deg; } .sf.r1 { right: calc(var(--g) * .5 - var(--w) / 2); rotate: 15deg; } .sf.r2 { right: calc(var(--g) * .35 - var(--w) / 2); rotate: -6deg; } .sf.r3 { right: calc(var(--g) * .6 - var(--w) / 2); rotate: -10deg; } .bgs .drift { animation: spread-drift 14s ease-in-out infinite alternate; will-change: transform; } .bgs .drift.b { animation-duration: 18s; animation-delay: -6s; } @keyframes spread-drift { to { transform: translateY(-10px) rotate(1.5deg); } } @media (prefers-reduced-motion: reduce) { .bgs .drift { animation: none; } } /* ======== SIMPLE LOOK ======== */ [data-look="simple"] .card-only { display: none !important; } [data-look="simple"] .stage { background: var(--ground); } [data-look="simple"] .card, [data-look="simple"] .frame { all: unset; display: block; } [data-look="simple"] .card { max-width: 30rem; margin: 0 auto; } [data-look="simple"] .box { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; color: var(--ink); padding: 1.1rem; box-shadow: none; font-family: "Source Sans 3", system-ui, sans-serif; gap: .85rem; } .intro { max-width: 30rem; margin: 0 auto 1rem; } .intro h1 { margin: 0 0 .25rem; font: 700 1.6rem/1.15 "Cormorant SC", Georgia, serif; letter-spacing: .02em; text-wrap: balance; } .intro p { margin: 0; color: var(--muted); } [data-look="simple"] .lab { color: var(--ink); } [data-look="simple"] .inp, [data-look="simple"] select, [data-look="simple"] textarea { background: var(--surface); border: 1px solid var(--line); color: var(--ink); } [data-look="simple"] .choices label { border: 1px solid var(--line); background: var(--surface-2); } [data-look="simple"] .status, [data-look="simple"] .help { color: var(--muted); } [data-look="simple"] .status.good { color: var(--good); } [data-look="simple"] .status.bad { color: var(--bad); } [data-look="simple"] altcha-widget { --altcha-color-base: var(--surface-2); --altcha-color-base-content: var(--ink); --altcha-border-color: var(--line); --altcha-color-primary: var(--accent); --altcha-color-primary-content: var(--accent-ink); --altcha-color-error: var(--bad); --altcha-color-success: var(--good); --altcha-checkbox-border-color: var(--line); color: var(--ink); } .pricepanel { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .7rem .8rem; background: var(--surface-2); border-radius: .5rem; font-size: .92rem; } .pricepanel .total { grid-column: 1 / -1; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: .35rem; margin-top: .2rem; font-weight: 700; font-size: 1.15rem; } .pricepanel > span:nth-child(even) { text-align: right; } .pricepanel .days { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; } [data-look="simple"] .btn { background: var(--accent); color: var(--accent-ink); } [data-look="simple"] .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } [data-look="simple"] .bottom { grid-template-columns: 1fr; } [data-look="simple"] .links a { color: var(--accent); } [data-look="simple"] .quote-text { background: var(--surface-2); border: 1px solid var(--line); } .bigcode { font: 700 2rem/1 "JetBrains Mono", monospace; letter-spacing: .04em; margin: .1rem 0 .3rem; } /* The label column is capped, so a long label like "NON-FOIL (300gsm cardstock)" wraps before the values do (#77). */ dl.breakdown { display: grid; grid-template-columns: fit-content(40%) 1fr; gap: .25rem 1rem; margin: 0; font-size: .95rem; } dl.breakdown dt { color: var(--muted); } dl.breakdown dd { margin: 0; text-align: right; } @media (max-width: 26rem) { .two { grid-template-columns: 1fr; } }