/* wordsearchtwist site — shared styles */ :root{ --bg:#FAFAF8; --panel:#FFFFFF; --line:#E4E2DB; --ink:#181A17; --muted:#6B6F67; --accent:#0F8F5F; --accent-light:#E4F5EC; --tape:#F4C93B; --error:#B3261E; --error-bg:#FBEAEA; } /* Dark mode: system-preference default (unless overridden below), plus an explicit override once the user picks a side via the nav toggle (see theme.js and the inline script in base.html's that applies this attribute before first paint, to avoid a flash of the wrong theme). */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#15170F; --panel:#1D2017; --line:#33362B; --ink:#F4F3EE; --muted:#9CA192; --accent:#2ECC8F; --accent-light:#153224; --tape:#F4C93B; --error:#FF8A80; --error-bg:#3A1B1B; } } :root[data-theme="dark"]{ --bg:#15170F; --panel:#1D2017; --line:#33362B; --ink:#F4F3EE; --muted:#9CA192; --accent:#2ECC8F; --accent-light:#153224; --tape:#F4C93B; --error:#FF8A80; --error-bg:#3A1B1B; } *{box-sizing:border-box;} body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .15s ease,color .15s ease;} h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;font-weight:600;} a{color:inherit;} .wrap{max-width:1080px;margin:0 auto;padding:0 28px;} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;} /* nav (base.html) */ nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:10px;padding:22px 0;border-bottom:1px solid var(--line);} .brand{font-family:'Space Grotesk';font-weight:700;font-size:16px;letter-spacing:-0.01em;} .brand .dot{color:var(--accent);} .navlinks{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;} .navlinks a{padding:8px 4px;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;} .navlinks a.active{color:var(--ink);border-color:var(--accent);font-weight:500;} .theme-toggle{background:none;border:none;margin-left:4px;padding:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);border-radius:6px;cursor:pointer;} .theme-toggle:hover{color:var(--ink);} .theme-toggle .icon-moon{display:none;} :root[data-theme="dark"] .theme-toggle .icon-sun{display:none;} :root[data-theme="dark"] .theme-toggle .icon-moon{display:block;} /* hero / wordmark (index.html) */ header.hero{padding:70px 0 20px;text-align:center;} .hero-img{max-width:100%;width:auto;height:auto;margin:0 auto 34px;display:block;} .kicker{font-size:13px;color:var(--accent);font-weight:500;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:28px;} .wordmark{position:relative;height:150px;max-width:640px;margin:0 auto 30px;} .wordmark span{position:absolute;top:50%;left:50%;font-family:'Space Grotesk';font-weight:700;background:var(--tape);color:var(--ink);padding:10px 0;box-shadow:0 3px 0 rgba(0,0,0,0.08);white-space:nowrap;} .wm-top{font-size:40px;letter-spacing:0.02em;padding-left:22px!important;padding-right:22px!important;transform:translate(-50%,-50%) rotate(-2.5deg);} .wm-bottom{font-size:40px;letter-spacing:0.02em;padding-left:22px!important;padding-right:22px!important;transform:translate(-38%,10%) rotate(3deg);top:78%!important;} .sub{font-size:18px;color:var(--muted);max-width:480px;margin:0 auto 34px;line-height:1.6;} .herobtns{display:flex;gap:12px;align-items:center;justify-content:center;padding-bottom:60px;} .btn-primary{background:var(--accent);color:#fff;padding:13px 24px;border-radius:8px;font-weight:600;text-decoration:none;font-size:15px;} .btn-secondary{color:var(--ink);padding:13px 6px;text-decoration:none;font-size:15px;font-weight:500;border-bottom:1px solid var(--line);} /* intro + photo */ section.intro{padding:60px 0;border-top:1px solid var(--line);} .intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .intro h2{font-size:28px;margin-bottom:18px;line-height:1.25;} .intro p{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 14px;} .photo{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;} .photo img{width:100%;height:100%;object-fit:contain;} /* the five mechanics (index.html + play.html reference) */ section.mechanics{padding:20px 0;} .mechrow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:44px 0;border-top:1px solid var(--line);} .mechrow:nth-child(even) .mechtext{order:2;} .mechtext h3{font-size:20px;margin-bottom:10px;} .mechtext p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;} .mechimg{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;} .mechimg img{width:100%;height:100%;object-fit:cover;} /* books */ section.books{padding:60px 0 80px;border-top:1px solid var(--line);text-align:center;} .books h2{font-size:32px;margin-bottom:12px;} .books p.lede{color:var(--muted);font-size:15px;margin:0 auto 36px;max-width:560px;line-height:1.6;} .bookgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left;} .bookcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);text-decoration:none;color:var(--ink);display:block;transition:transform .15s ease, box-shadow .15s ease;} .bookcard:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(24,26,23,0.08);} .cover{position:relative;aspect-ratio:3/4;background:var(--panel);} .cover img{width:100%;height:100%;object-fit:cover;display:block;} .cover .tag{position:absolute;top:12px;left:12px;background:var(--tape);color:var(--ink);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;} .bookmeta{padding:14px 16px;} .bookmeta b{display:block;font-family:'Space Grotesk';font-size:14px;margin-bottom:2px;} .bookmeta span{font-size:13px;color:var(--muted);} /* play page */ section.howto{padding:50px 0;} .howto h1{font-size:32px;margin-bottom:10px;} .howto .lede{color:var(--muted);font-size:16px;margin:0 0 40px;line-height:1.6;} .quickref{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:50px;} .qcard{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--panel);} .qcard .angle{font-family:'Space Grotesk';font-weight:700;color:var(--accent);font-size:13px;margin-bottom:6px;} .qcard b{display:block;font-size:14px;margin-bottom:6px;} .qcard span{font-size:12px;color:var(--muted);line-height:1.5;} .puzzle-note{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 20px;margin-bottom:24px;} .puzzle-note h3{font-size:14px;font-family:'Space Grotesk';color:var(--accent);margin:0 0 6px;} .puzzle-note p{color:var(--muted);font-size:14px;line-height:1.6;margin:0;} .board{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:28px;} .board h2{font-size:20px;text-align:center;margin-bottom:4px;} .board > p{color:var(--muted);font-size:14px;text-align:center;margin:0 0 20px;} .board .puzzle-grid{width:100%;grid-template-columns:repeat(var(--cols),1fr);} .board .cell{width:auto;height:auto;aspect-ratio:1;font-size:var(--cell-font-size, clamp(14px,3vw,22px));} .board .clear-hint{text-align:center;font-size:13px;color:var(--muted);margin:20px 0 0;} .board h3{text-align:center;font-size:16px;margin:24px 0 12px;} .board #word-list{column-width:15em;column-gap:28px;width:100%;margin:0 auto;text-align:left;} /* how-to-play rules */ .how-to-play { line-height: 1.6; font-size: 15px; color: var(--ink); margin-bottom: 36px; } .how-to-play h3 { font-size: 20px; margin-bottom: 8px; } .how-to-play h4 { font-size: 15px; font-family: 'Space Grotesk', sans-serif; margin: 18px 0 6px; } .how-to-play p { color: var(--muted); margin: 0 0 10px; } .how-to-play strong { color: var(--ink); } .how-to-play .quirk-list { padding-left: 1.25rem; margin: 0 0 14px; color: var(--muted); } .how-to-play .quirk-list li { margin-bottom: 4px; } .how-to-play code { background-color: var(--panel); border: 1px solid var(--line); color: var(--ink); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-weight: 600; font-family: inherit; } .how-to-play .tip { font-size: 13px; color: var(--muted); margin-top: 14px; } /* contact page */ section.contact{padding:50px 0 80px;} .contact h1{font-size:32px;margin-bottom:10px;} .contact .lede{color:var(--muted);font-size:16px;margin:0 0 32px;line-height:1.6;} .contact-form{max-width:520px;display:flex;flex-direction:column;gap:6px;} .contact-form label{font-size:14px;font-weight:500;margin-top:10px;} .contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{ font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink); } .contact-form textarea{min-height:140px;resize:vertical;} .contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;} .contact-form .errorlist{color:var(--error);font-size:13px;margin:4px 0 0;padding:0;list-style:none;} .contact-form button{align-self:flex-start;margin-top:14px;border:none;cursor:pointer;} .hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;} .form-messages{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:8px;} .form-messages li{padding:12px 16px;border-radius:8px;font-size:14px;} .form-messages li.success{background:var(--accent-light);color:var(--accent);} .form-messages li.error{background:var(--error-bg);color:var(--error);} .contact-form button.btn-primary{ align-self:stretch; text-align:center; } /* privacy page */ .privacy-body{max-width:640px;} .privacy-body h3{font-size:18px;margin:32px 0 10px;} .privacy-body h3:first-child{margin-top:0;} .privacy-body p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 4px;} .privacy-body a{color:var(--accent);text-decoration:underline;} .privacy-updated{margin-top:28px;font-size:13px;color:var(--muted);} /* puzzle stats page */ .table-scroll{overflow-x:auto;margin:0 0 40px;} .stats-table{width:100%;border-collapse:collapse;margin:0;} .stats-table th,.stats-table td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);font-size:14px;white-space:nowrap;} .stats-table th{color:var(--muted);font-weight:500;} .bar-chart{display:flex;align-items:flex-end;gap:28px;height:220px;padding:20px 4px 0;border-bottom:1px solid var(--line);overflow-x:auto;} .bar-group{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;height:100%;} .bar-group .bars{display:flex;align-items:flex-end;gap:4px;height:100%;} .bar-group .bar{width:16px;border-radius:3px 3px 0 0;min-height:2px;} .bar-views{background:var(--muted);} .bar-starts{background:var(--tape);} .bar-completes{background:var(--accent);} .bar-group-label{margin-top:8px;font-size:12px;color:var(--muted);text-align:center;max-width:100px;word-break:break-word;} .bar-chart-legend{display:flex;gap:20px;margin:12px 0 40px;font-size:13px;color:var(--muted);} .legend-item{display:flex;align-items:center;gap:6px;} .legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;} /* footer (base.html) */ footer{padding:28px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--line);text-align:center;} /* blog list & detail pages */ section.blog{padding:50px 0 80px;} .blog h1{font-size:32px;margin-bottom:10px;} .blog .lede{color:var(--muted);font-size:16px;margin:0 0 32px;line-height:1.6;} .blog-list{display:flex;flex-direction:column;gap:16px;} .blog-card{display:block;border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--panel);text-decoration:none;color:var(--ink);transition:transform .15s ease, box-shadow .15s ease;} .blog-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(24,26,23,0.08);} .blog-card h2{font-size:19px;margin-bottom:4px;} .blog-card-date{display:block;font-size:13px;color:var(--muted);margin-bottom:8px;} .blog-card p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;} .post-body{max-width:640px;margin-top:24px;font-size:15px;line-height:1.7;color:var(--ink);} .post-body h2,.post-body h3{margin:28px 0 10px;} .post-body p{color:var(--muted);margin:0 0 14px;} .post-body a{color:var(--accent);text-decoration:underline;} /* homepage featured post */ .featured-post{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:var(--panel);margin:0 0 40px;} .featured-post .kicker{margin-bottom:8px;} .featured-post h3{font-size:19px;margin-bottom:6px;} .featured-post p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 10px;} .featured-post a.read-more{color:var(--accent);font-size:14px;font-weight:500;text-decoration:none;} .featured-post a.read-more:hover{text-decoration:underline;} @media (max-width:720px){ .intro .wrap{grid-template-columns:1fr;} .mechrow{grid-template-columns:1fr;} .mechrow:nth-child(even) .mechtext{order:0;} .bookgrid{grid-template-columns:1fr;} .quickref{grid-template-columns:1fr 1fr;} .wordmark{height:190px;} .wm-top,.wm-bottom{font-size:30px;} } @media (max-width:600px){ .navlinks{justify-content:center;gap:4px 10px;} .navlinks a{padding:6px 2px;} } /* Reclaim horizontal space for the puzzle grid on narrow phones -- a 30-column grid needs every pixel it can get once cell size starts mattering for legibility (see .board .cell's --cell-font-size, set in puzzle.js from the cell's own rendered size). */ @media (max-width:480px){ .wrap{padding:0 14px;} .board{padding:16px;} .board .puzzle-grid{gap:1px;} }