/* Dos Bros — brand surface. Vanilla CSS + custom-property tokens. Fight-poster palette: bright paper, ink, hot red + electric yellow. Light/dark via data-theme on (house pattern, same as wattson / tilloconsulting) with prefers-color-scheme as the default. */ /* ---------- tokens ---------- */ :root { --paper: #fdfaf2; --paper-2: #f6efdd; --paper-3: #ffffff; --ink: #17161c; --ink-2: #454250; --ink-3: #7b7684; --accent: #f5382a; --accent-2: #ffc21f; --accent-ink: #fffdf7; --line: #e3dac6; --display: "Anton", "Arial Narrow", Impact, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --text-face: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --max: 68rem; --text: 44rem; --ease: cubic-bezier(.22,.61,.36,1); } /* dark tokens, applied either by explicit toggle or by system pref */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #16151d; --paper-2: #1f1e29; --paper-3: #12111a; --ink: #f8f4ea; --ink-2: #ccc7bd; --ink-3: #918c9c; --accent: #ff5544; --accent-2: #ffcc3d; --accent-ink: #16151d; --line: #322f3f; } } :root[data-theme="dark"] { --paper: #16151d; --paper-2: #1f1e29; --paper-3: #12111a; --ink: #f8f4ea; --ink-2: #ccc7bd; --ink-3: #918c9c; --accent: #ff5544; --accent-2: #ffcc3d; --accent-ink: #16151d; --line: #322f3f; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--text-face); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; } .narrow { max-width: var(--text); } /* ---------- header ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; padding-bottom: .9rem; } .wordmark { font-family: var(--display); font-size: 1.5rem; letter-spacing: .04em; color: var(--ink); text-decoration: none; line-height: 1; } .wordmark span { color: var(--accent); } header.site nav { display: flex; gap: 1.5rem; align-items: center; } header.site nav a { color: var(--ink-2); text-decoration: none; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; } header.site nav a:hover { color: var(--accent); } /* ---------- pill ---------- */ .pill { display: inline-flex; align-items: center; gap: .5rem; background: var(--accent); color: var(--accent-ink); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; padding: .38rem .8rem; } .pill.quiet { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 2.4s var(--ease) infinite; } @keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .25 } } @media (prefers-reduced-motion: reduce) { .pill .dot { animation: none } } /* ---------- hero ---------- */ .hero { position: relative; min-height: min(88vh, 46rem); display: flex; align-items: flex-end; overflow: hidden; } .hero-media { position: absolute; inset: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-media::after { content: ""; position: absolute; inset: 0; /* Vertical pass protects the type; horizontal pass keeps the right side — where the two figures stand — light enough to actually read. */ background: linear-gradient(100deg, rgba(20,19,15,.86) 0%, rgba(20,19,15,.66) 42%, rgba(20,19,15,.22) 72%, rgba(20,19,15,.34) 100%), linear-gradient(180deg, rgba(20,19,15,.34) 0%, rgba(20,19,15,.28) 40%, rgba(20,19,15,.72) 100%); } .hero .wrap { position: relative; z-index: 2; padding-top: 5rem; padding-bottom: 3.5rem; width: 100%; } .hero h1 { font-family: var(--display); font-size: clamp(2.7rem, 8.2vw, 6.8rem); line-height: .88; letter-spacing: -.005em; margin: 1.25rem 0 1.5rem; color: #f2efe6; text-wrap: balance; } .hero h1 em { font-style: normal; color: var(--accent); } .hero .lede { max-width: 40rem; color: #ded8c9; font-size: 1.02rem; margin: 0 0 2rem; } .hero .lede strong { color: #fff; font-weight: 500; } .hero-credit { position: absolute; right: 1.5rem; bottom: 1.1rem; z-index: 2; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,239,230,.5); } /* ---------- buttons ---------- */ .cta-row { display: flex; gap: .8rem; flex-wrap: wrap; } .btn { display: inline-block; padding: .95rem 1.6rem; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; border: 1px solid var(--accent); transition: transform .18s var(--ease), filter .18s var(--ease); } .btn:hover { filter: brightness(1.08); transform: translateY(-2px); } .btn.ghost { background: transparent; color: #f2efe6; border-color: rgba(242,239,230,.4); } .btn.ghost:hover { border-color: #f2efe6; } .btn.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ---------- stat strip ---------- */ .stats { border-bottom: 1px solid var(--line); background: var(--paper-2); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .stat { padding: 2rem 1.5rem; border-right: 1px solid var(--line); } .stat:last-child { border-right: none; } .stat .n { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--accent); display: block; } .stat:nth-child(2) .n { color: var(--accent-2); } .stat .k { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: .6rem; display: block; } /* ---------- sections ---------- */ section { padding: 5rem 0; } .eyebrow { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; } h2.big { font-family: var(--display); font-size: clamp(2rem, 6vw, 3.6rem); line-height: .95; margin: 0 0 1.75rem; text-wrap: balance; } .prose p { margin: 0 0 1.15rem; color: var(--ink-2); } .prose p.first { font-size: 1.15rem; color: var(--ink); } .prose strong { color: var(--ink); font-weight: 500; } .aside { border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1.25rem; color: var(--ink-3); font-size: .95rem; margin: 2rem 0 0; } /* ---------- counter ---------- */ .counter-block { border: 1px solid var(--line); background: var(--paper-2); padding: 2.5rem 1.5rem; text-align: center; } .counter { font-family: var(--display); font-size: clamp(3.5rem, 13vw, 7rem); line-height: 1; } .counter .n { color: var(--accent); } .counter .goal { color: var(--ink-3); } .counter-note { color: var(--ink-3); margin: 1rem auto 0; max-width: 30rem; font-size: .92rem; } .counter-note strong { color: var(--ink); } /* ---------- weight classes ---------- */ .class-grid { display: grid; gap: 1px; background: var(--line); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); border: 1px solid var(--line); } .class-card { background: var(--paper); padding: 1.75rem 1.5rem; } .class-card .idx { font-family: var(--display); font-size: 2.6rem; color: var(--accent-2); line-height: 1; } .class-card h3 { font-family: var(--display); font-size: 1.6rem; margin: .5rem 0 .1rem; letter-spacing: .01em; } .class-card .vram { color: var(--accent); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .9rem; } .class-card p { margin: 0; font-size: .88rem; color: var(--ink-3); line-height: 1.6; } /* ---------- frame grid ---------- */ .frames { display: grid; gap: 2px; grid-template-columns: repeat(3, 1fr); background: var(--line); border: 1px solid var(--line); } @media (max-width: 52rem) { .frames { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 30rem) { .frames { grid-template-columns: 1fr; } } .frames img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; filter: grayscale(.15); transition: filter .3s var(--ease), transform .5s var(--ease); } .frames a { overflow: hidden; display: block; } .frames a:hover img { filter: none; transform: scale(1.04); } /* ---------- form ---------- */ .form-shell { border: 1px solid var(--line); background: var(--paper-2); padding: 2rem 1.5rem; } #signup-form { display: grid; gap: 1.1rem; margin-top: 1.5rem; } .row-2 { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; } @media (max-width: 34rem) { .row-2 { grid-template-columns: 1fr; } } #signup-form label { display: flex; flex-direction: column; gap: .45rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } #signup-form input[type=text], #signup-form input[type=email], #signup-form select { background: var(--paper); border: 1px solid var(--line); color: var(--ink); padding: .8rem .85rem; font: inherit; font-size: .95rem; text-transform: none; letter-spacing: 0; width: 100%; } #signup-form input:focus-visible, #signup-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } #signup-form .opt { color: var(--ink-3); opacity: .7; } #signup-form label.check { flex-direction: row; align-items: center; gap: .6rem; text-transform: none; letter-spacing: 0; font-size: .85rem; } #signup-form label.check input { accent-color: var(--accent); width: 1rem; height: 1rem; } #signup-form button { background: var(--accent); color: var(--accent-ink); border: none; padding: 1rem 1.2rem; font: inherit; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: filter .18s var(--ease); } #signup-form button:hover:not(:disabled) { filter: brightness(1.08); } #signup-form button:disabled { opacity: .45; cursor: default; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } #form-msg { font-size: .9rem; margin: 0; min-height: 1.3em; } #form-msg.ok { color: var(--accent); } #form-msg.err { color: #b3261e; } /* ---------- roster ---------- */ .roster-list { list-style: none; padding: 0; margin: 1.5rem 0 1rem; } .roster-list li { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; } .roster-list .handle { font-weight: 700; } .roster-list .tag { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: .12rem .5rem; } .roster-list .concept { color: var(--ink-3); font-size: .86rem; } .empty { color: var(--ink-3); border: 1px dashed var(--line); padding: 2rem; text-align: center; } /* ---------- footer ---------- */ footer.site { border-top: 1px solid var(--line); background: var(--paper-2); padding: 3rem 0; font-size: .85rem; color: var(--ink-3); } footer.site strong { color: var(--ink); } footer.site p { margin: .4rem 0; } /* ---------- shared ---------- */ .muted { color: var(--ink-3); font-size: .9rem; } .small { font-size: .78rem; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- reveal ---------- */ .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } } /* ---------- rendered markdown (rules) ---------- */ .rules-body { max-width: var(--text); } .rules-body h1 { font-family: var(--display); font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: .95; margin: 0 0 1.5rem; } .rules-body h2 { font-family: var(--display); font-size: 1.7rem; margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); letter-spacing: .01em; } .rules-body h3 { font-size: 1rem; margin: 2rem 0 .6rem; letter-spacing: .02em; } .rules-body p, .rules-body li { color: var(--ink-2); } .rules-body ul, .rules-body ol { padding-left: 1.25rem; } .rules-body li { margin: .4rem 0; } .rules-body strong { color: var(--ink); font-weight: 700; } .rules-body blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: var(--paper-2); color: var(--ink-3); font-size: .92rem; } .rules-body blockquote p { margin: .4rem 0; } .rules-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .86rem; display: block; overflow-x: auto; } .rules-body th, .rules-body td { border: 1px solid var(--line); padding: .6rem .7rem; text-align: left; } .rules-body th { background: var(--paper-2); color: var(--accent); text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; } .rules-body hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; } .rules-body code { background: var(--paper-2); border: 1px solid var(--line); padding: .1rem .35rem; font-size: .88em; } /* ---------- faq ---------- */ .faq { border-top: 1px solid var(--line); margin-top: 1.5rem; } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; position: relative; font-weight: 700; font-size: .95rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 1.5rem; color: var(--accent); line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq summary:hover { color: var(--accent); } .faq details p { margin: 0 0 1.25rem; color: var(--ink-2); font-size: .92rem; max-width: 40rem; } /* ---------- hero identity line ---------- */ .hero .ident { margin: 1.4rem 0 0; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(242,239,230,.72); } .hero h1 { margin-top: .6rem; } /* ---------- theme toggle (house pattern) ---------- */ .theme-toggle { background: transparent; border: 1px solid var(--line); color: var(--ink-2); width: 2.1rem; height: 2.1rem; display: inline-grid; place-items: center; cursor: pointer; font-size: .95rem; line-height: 1; padding: 0; transition: border-color .18s var(--ease), color .18s var(--ease); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-icon { display: none; } :root[data-theme="dark"] .theme-icon.sun { display: block; } :root[data-theme="light"] .theme-icon.moon { display: block; } :root:not([data-theme]) .theme-icon.moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-icon.moon { display: none; } :root:not([data-theme]) .theme-icon.sun { display: block; } } /* ---------- footer links ---------- */ .footer-links { margin-top: 1.25rem !important; } .footer-links a { color: var(--ink-3); text-decoration: none; } .footer-links a:hover { color: var(--accent); } #signup-form textarea, #contact-form textarea { background: var(--paper); border: 1px solid var(--line); color: var(--ink); padding: .8rem .85rem; font: inherit; font-size: .95rem; width: 100%; text-transform: none; letter-spacing: 0; resize: vertical; } #contact-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } #contact-form { display: grid; gap: 1.1rem; } #contact-form label { display: flex; flex-direction: column; gap: .45rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } #contact-form input[type=text], #contact-form input[type=email] { background: var(--paper); border: 1px solid var(--line); color: var(--ink); padding: .8rem .85rem; font: inherit; font-size: .95rem; width: 100%; text-transform: none; letter-spacing: 0; } #contact-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } #contact-form .opt { color: var(--ink-3); opacity: .7; } #contact-form button { background: var(--accent); color: var(--accent-ink); border: none; padding: 1rem 1.2rem; font: inherit; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } #contact-form button:disabled { opacity: .45; cursor: default; } /* Labels flow as blocks so an inline hint ("optional") sits on the caption line instead of becoming its own flex row. */ #signup-form label:not(.check), #contact-form label { display: block; } #signup-form label:not(.check) > input, #signup-form label:not(.check) > select, #contact-form label > input, #contact-form label > textarea { display: block; margin-top: .45rem; } #signup-form .opt, #contact-form .opt { margin-left: .4rem; } /* ---------- fuller nav ---------- */ header.site nav { gap: 1.15rem; } .nav-cta { background: var(--accent); color: var(--accent-ink) !important; padding: .5rem .9rem; font-weight: 700; } .nav-cta:hover { filter: brightness(1.08); } @media (max-width: 62rem) { .nav-wide { display: none; } } @media (max-width: 30rem) { header.site nav { gap: .8rem; } header.site nav a { font-size: .7rem; } } /* Three stats, so let the runtime one set a little smaller than the money. */ .stat-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .stat .n { font-size: clamp(2.1rem, 4.4vw, 3.1rem); } /* ---------- typography: mono is for labels, not paragraphs ---------- */ .eyebrow, .pill, .btn, .nav-cta, header.site nav a, .stat .k, .class-card .vram, .roster-list .tag, .hero .ident, .footer-links, #signup-form label, #contact-form label, .theme-toggle, .hero-credit { font-family: var(--mono); } .prose p, .class-card p, .counter-note, .muted, footer.site p, .faq summary, .faq details p, .rules-body p, .rules-body li, .rules-body td { font-family: var(--text-face); } .prose p { font-size: 1.02rem; line-height: 1.72; } .prose p.first { font-size: 1.22rem; line-height: 1.6; } /* ---------- cards, properly ---------- */ .class-grid { gap: 1.25rem; background: none; border: none; grid-template-columns: repeat(3, 1fr); } .class-grid.four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 66rem) { .class-grid, .class-grid.four { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 40rem) { .class-grid, .class-grid.four { grid-template-columns: 1fr; } } .class-card { position: relative; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; padding: 2rem 1.6rem 1.75rem; display: flex; flex-direction: column; transition: transform .25s var(--ease), border-color .25s var(--ease); } .class-card:hover { transform: translateY(-3px); border-color: var(--accent); } /* ghosted index numeral, editorial style */ .class-card .idx { position: absolute; top: .5rem; right: .9rem; font-family: var(--display); font-size: 4.6rem; line-height: .8; color: var(--ink); opacity: .07; pointer-events: none; user-select: none; } :root[data-theme="dark"] .class-card .idx { opacity: .1; } .class-card h3 { font-family: var(--display); font-size: 1.45rem; line-height: 1.05; margin: 0 0 .55rem; letter-spacing: .005em; text-wrap: balance; max-width: 11ch; } .class-card .vram { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem; font-weight: 500; } .class-card .vram::before { content: ""; display: block; width: 1.6rem; height: 2px; background: var(--accent); margin-bottom: .8rem; } .class-card p:not(.vram) { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-2); } /* ---------- mobile ---------- */ @media (max-width: 48rem) { body { font-size: 16px; } .wrap { padding: 0 1.15rem; } section { padding: 3.25rem 0; } .hero { min-height: auto; padding-bottom: .5rem; } .hero .wrap { padding-top: 3.5rem; padding-bottom: 2.5rem; } .hero h1 { font-size: clamp(2.3rem, 11.5vw, 3.4rem); line-height: .95; } .hero .ident { font-size: .62rem; letter-spacing: .14em; } .hero .lede { font-size: .95rem; } .cta-row { gap: .6rem; } .btn { padding: .85rem 1.1rem; font-size: .74rem; letter-spacing: .1em; flex: 1 1 auto; text-align: center; } h2.big { font-size: clamp(1.75rem, 8.5vw, 2.6rem); } .stat { padding: 1.4rem 1.15rem; border-right: none; border-bottom: 1px solid var(--line); } .stat:last-child { border-bottom: none; } .stat-grid { grid-template-columns: 1fr; } .counter-block { padding: 1.75rem 1.15rem; } .class-card { padding: 1.6rem 1.25rem 1.4rem; } .class-card .idx { font-size: 3.6rem; } .class-card h3 { max-width: none; } .frames { grid-template-columns: 1fr; } .rules-body table { font-size: .78rem; } .rules-body h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); } .rules-body h2 { font-size: 1.35rem; } footer.site { padding: 2.25rem 0; } } @media (max-width: 30rem) { .hero h1 { font-size: 2.15rem; } .wordmark { font-size: 1.25rem; } .prose p.first { font-size: 1.05rem; } } /* Long URLs and workflow filenames shouldn't blow out the layout on a phone. */ .rules-body, .prose { overflow-wrap: anywhere; } img { max-width: 100%; height: auto; }