Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/crutchcorn/causeeffect. JSX for Effect, with generator types preserved. causeeffect.website
Something went wrong. Try again.
2.6 kB · 163 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164:root { font-family: system-ui, sans-serif; color: #193326; background: #f7f6f0; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;}
* { box-sizing: border-box;}body { margin: 0;}button { font: inherit;}.app { width: min(900px, 100%); margin: 0 auto; padding: 80px 32px 40px;}.eyebrow { margin: 0 0 14px; color: #66776b; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;}h1,h2,.count { font-family: system-ui, sans-serif;}h1 { margin: 0; max-width: 700px; font-size: clamp(32px, 6vw, 52px); font-weight: 600; line-height: 1.12; letter-spacing: -0.045em;}.intro { max-width: 650px; margin: 20px 0 40px; color: #66776b; font-size: 17px; line-height: 1.7;}.counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}.counter { background: #fff; padding: 28px; border: 1px solid #e0e6da; border-radius: 18px; box-shadow: 0 4px 18px #19332605;}.counter .eyebrow { margin-bottom: 8px; font-size: 10px;}h2 { margin: 0; font-size: 22px; font-weight: 500;}.count { margin: 32px 0; font-size: 78px; font-weight: 500; line-height: 1; letter-spacing: -0.06em;}.controls { display: flex; gap: 10px;}button { cursor: pointer; min-height: 44px; border: 1px solid #d9e1d7; border-radius: 9px; background: #f7f9f4; color: #193326; padding: 10px 18px; font-weight: 600; transition: background 120ms, border-color 120ms;}button:hover { background: #e5efdf; border-color: #a6bea0;}button:focus-visible { outline: 3px solid #769a6b; outline-offset: 3px;}.controls button { flex: 1;}.controls button:not(.reset) { font-size: 22px;}.controls .reset { color: #66776b; font-size: 14px;}.summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0;}.total { margin: 0; color: #66776b;}.total strong { color: #193326; font-size: 24px; font-weight: 600; padding-left: 12px;}.summary button { background: #193326; border-color: #193326; color: #fff; font-size: 13px;}.summary button:hover { background: #315340;}.note { margin-top: 16px; border-top: 1px solid #e0e6da; padding-top: 24px; color: #78867c; font-size: 12px; line-height: 1.9;}@media (max-width: 560px) { .app { padding: 40px 20px; } .counters { grid-template-columns: 1fr; } .counter { padding: 24px; } .summary { align-items: flex-start; flex-direction: column; }}