/* ========================================================================== Ouroboros FC, core stylesheet Ink-on-parchment theme. No build step; plain CSS custom properties. -------------------------------------------------------------------------- Sections: 1. Tokens 2. Reset & base 3. Paper surface / texture 4. Typography 5. Layout primitives 6. Navigation 7. Buttons & controls 8. Hero (landing) 9. Feature card strip 10. Section blocks 11. Forums 12. Events / calendar 13. About 14. Modal / drawer 15. Footer 16. Motion & reveal 17. Responsive ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Parchment stack, lightest to most aged */ --paper-100: #faf3e4; --paper-200: #f3e8d2; --paper-300: #ead9bd; --paper-400: #ddc7a5; --paper-500: #cbb188; /* Ink stack */ --ink-900: #14100c; --ink-800: #241c14; --ink-700: #3a2e22; --ink-600: #55442f; --ink-500: #6f5a41; --ink-400: #8d7658; /* Accents */ --seal: #8f3222; /* vermillion chop-seal red */ --seal-bright: #b1402c; --gold: #a67c3d; --gold-soft: #c9a361; --verdigris: #4a6b5d; /* secondary tag colour */ /* Semantic */ --bg: var(--paper-200); --bg-raised: var(--paper-100); --bg-sunken: var(--paper-300); --fg: var(--ink-800); --fg-muted: var(--ink-500); --fg-faint: var(--ink-400); --rule: rgba(36, 28, 20, 0.16); --rule-strong: rgba(36, 28, 20, 0.34); /* Type */ --font-display: "Cinzel", "Trajan Pro", Georgia, serif; --font-body: "EB Garamond", Georgia, "Times New Roman", serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Rhythm */ --gutter: clamp(1.25rem, 4vw, 3.5rem); --measure: 68ch; --shell: 1440px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur: 380ms; --dur-slow: 760ms; /* Elevation. Ink never casts a hard shadow, it soaks */ --lift-1: 0 1px 2px rgba(36, 28, 20, 0.07), 0 4px 14px rgba(36, 28, 20, 0.06); --lift-2: 0 2px 6px rgba(36, 28, 20, 0.10), 0 14px 40px rgba(36, 28, 20, 0.11); --lift-3: 0 6px 18px rgba(36, 28, 20, 0.14), 0 34px 80px rgba(36, 28, 20, 0.18); --nav-h: 78px; } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); } body { min-height: 100svh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); line-height: 1.62; font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } :focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 2px; } ::selection { background: rgba(143, 50, 34, 0.22); color: var(--ink-900); } /* Thin, papery scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--ink-400) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--ink-400); border: 3px solid var(--bg); border-radius: 99px; } /* -------------------------------------------------------------------------- 3. Paper surface / texture The grain is an SVG feTurbulence filter defined once in each page's and referenced here, so there are zero image requests. -------------------------------------------------------------------------- */ .grain { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E"); } /* Soft foxing / age blooms in the page corners */ .foxing { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 44% at 8% 4%, rgba(166, 124, 61, 0.16), transparent 70%), radial-gradient(48% 40% at 96% 12%, rgba(143, 50, 34, 0.08), transparent 68%), radial-gradient(64% 52% at 92% 96%, rgba(166, 124, 61, 0.14), transparent 72%), radial-gradient(50% 40% at 4% 88%, rgba(85, 68, 47, 0.10), transparent 70%); } /* Reusable raised paper card */ .sheet { position: relative; background: var(--bg-raised); border: 1px solid var(--rule); box-shadow: var(--lift-1); } /* Deckled / torn bottom edge for the hero */ .deckle { position: absolute; left: 0; right: 0; height: 22px; pointer-events: none; } /* -------------------------------------------------------------------------- 4. Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.005em; color: var(--ink-900); text-wrap: balance; } h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem); } h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.8rem); } h3 { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); } h4 { font-size: 1.05rem; } p { text-wrap: pretty; } /* Small-caps UI label, the recurring "engraved" motif */ .eyebrow { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--seal); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 2.2em; height: 1px; background: currentColor; opacity: 0.6; } .eyebrow--plain::before { display: none; } .eyebrow--muted { color: var(--fg-faint); } .lede { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); color: var(--ink-600); max-width: 56ch; } .muted { color: var(--fg-muted); } .faint { color: var(--fg-faint); } code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; padding: 0.1em 0.35em; background: var(--paper-300); border: 1px solid var(--rule); color: var(--ink-700); } kbd { font-family: var(--font-ui); font-size: 0.85em; line-height: 1; padding: 0.25em 0.45em; background: var(--paper-100); border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 3px; color: var(--ink-800); } /* Drop-cap for long-form about copy */ .dropcap::first-letter { float: left; font-family: var(--font-display); font-size: 3.6em; line-height: 0.82; padding: 0.08em 0.12em 0 0; color: var(--seal); } /* -------------------------------------------------------------------------- 5. Layout primitives -------------------------------------------------------------------------- */ .shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; } .stack > * + * { margin-top: var(--gap, 1rem); } .section { padding-block: clamp(4rem, 8vw, 8rem); position: relative; } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); } .section-head p { max-width: 46ch; margin-top: 0.6rem; } /* Hairline rule with a centred ornament */ .rule-ornament { display: flex; align-items: center; gap: 1rem; color: var(--rule-strong); } .rule-ornament::before, .rule-ornament::after { content: ""; flex: 1; height: 1px; background: currentColor; } /* -------------------------------------------------------------------------- 6. Navigation -------------------------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 800; height: var(--nav-h); display: flex; align-items: center; transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), height var(--dur) var(--ease-out); } .nav::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--rule); opacity: 0; transition: opacity var(--dur) var(--ease-out); } .nav[data-stuck="true"] { height: 66px; background: rgba(250, 243, 228, 0.86); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 20px rgba(36, 28, 20, 0.07); } .nav[data-stuck="true"]::after { opacity: 1; } .nav__inner { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); } .brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; } .brand__mark { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; transition: transform var(--dur) var(--ease-out); } .brand:hover .brand__mark { transform: scale(1.08); } .brand__word { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-900); } .nav__links { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 2rem); margin-inline: auto; list-style: none; padding: 0; } .nav__link { position: relative; display: block; padding: 0.5rem 0.25rem; font-family: var(--font-ui); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink-600); transition: color var(--dur-fast) var(--ease-out); white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.28rem; height: 1px; background: var(--seal); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .nav__link:hover { color: var(--ink-900); } .nav__link:hover::after { transform: scaleX(1); } .nav__link[aria-current="page"] { color: var(--ink-900); } .nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--gold); } .nav__actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } /* Mobile drawer toggle */ .nav__burger { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--rule-strong); background: transparent; cursor: pointer; position: relative; } .nav__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink-800); transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear; } .nav__burger span:nth-child(1) { top: 15px; } .nav__burger span:nth-child(2) { top: 20px; } .nav__burger span:nth-child(3) { top: 25px; } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .nav__drawer { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 790; background: rgba(250, 243, 228, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-block: 1px solid var(--rule); padding: 1rem var(--gutter) 2rem; display: none; flex-direction: column; gap: 0.25rem; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), visibility var(--dur); } .nav__drawer[data-open="true"] { transform: none; opacity: 1; visibility: visible; } .nav__drawer a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; } /* -------------------------------------------------------------------------- 7. Buttons & controls -------------------------------------------------------------------------- */ .btn { --btn-bg: transparent; --btn-fg: var(--ink-900); --btn-bd: var(--ink-800); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.65em; padding: 0.82em 1.5em; border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); } /* Ink wash sweeps up from the baseline on hover */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-900); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur) var(--ease-out); } .btn:hover::before { transform: scaleY(1); } .btn:hover { color: var(--paper-100); } .btn:active { transform: translateY(1px); } .btn--seal { --btn-bg: var(--seal); --btn-fg: var(--paper-100); --btn-bd: var(--seal); box-shadow: var(--lift-1); } .btn--seal::before { background: var(--ink-900); } .btn--seal:hover { border-color: var(--ink-900); color: var(--paper-100); } .btn--ghost { --btn-bd: var(--rule-strong); --btn-fg: var(--ink-700); } .btn--sm { padding: 0.62em 1.05em; font-size: 0.66rem; } .btn--block { width: 100%; } .btn__icon { width: 1.15em; height: 1.15em; flex-shrink: 0; } /* Text link with underline that draws in */ .link { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ink-800); text-decoration: none; font-family: var(--font-ui); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur) var(--ease-out); padding-bottom: 2px; } .link:hover { background-size: 100% 1px; } .link svg { width: 1em; height: 1em; transition: transform var(--dur) var(--ease-out); } .link:hover svg { transform: translateX(3px); } /* Form fields */ .field { display: block; width: 100%; padding: 0.72em 0.9em; background: var(--paper-100); border: 1px solid var(--rule-strong); color: var(--ink-800); font-family: var(--font-ui); font-size: 0.86rem; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .field::placeholder { color: var(--fg-faint); } .field:focus { outline: none; border-color: var(--seal); box-shadow: 0 0 0 3px rgba(143, 50, 34, 0.12); } /* Pill tag, mirrors a Discord forum tag */ .tag { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.28em 0.7em; border: 1px solid currentColor; border-radius: 99px; font-family: var(--font-ui); font-size: 0.63rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); background: rgba(255, 255, 255, 0.35); white-space: nowrap; } .tag[data-tone="seal"] { color: var(--seal); } .tag[data-tone="gold"] { color: var(--gold); } .tag[data-tone="verdigris"] { color: var(--verdigris); } /* Segmented filter control */ .segment { display: inline-flex; border: 1px solid var(--rule-strong); background: var(--paper-100); overflow: hidden; flex-wrap: wrap; } .segment button { padding: 0.6em 1.1em; border: 0; border-right: 1px solid var(--rule); background: transparent; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .segment button:last-child { border-right: 0; } .segment button:hover { background: var(--paper-300); color: var(--ink-900); } .segment button[aria-pressed="true"] { background: var(--ink-800); color: var(--paper-100); } /* -------------------------------------------------------------------------- 8. Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: clamp(660px, 100svh, 980px); display: grid; grid-template-rows: 1fr auto; padding-top: var(--nav-h); overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 8%, var(--paper-100), transparent 62%), linear-gradient(178deg, var(--paper-200), var(--paper-300) 78%, var(--paper-400)); } /* Faint ruled ledger lines, like a guild register */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: repeating-linear-gradient( to bottom, transparent 0 47px, rgba(36, 28, 20, 0.045) 47px 48px ); mask-image: radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 78%); } .hero__stage { position: relative; z-index: 1; display: grid; place-items: center; width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; grid-template-areas: "stage"; } .hero__stage > * { grid-area: stage; } /* --- Layer 1: the FC name, behind the character --- */ .hero__name { font-family: var(--font-display); font-weight: 900; /* Nine letters, not five, so size it to always clear the shell. ~6.8em of advance width at Cinzel Black, hence the 11.5vw cap. */ font-size: clamp(2.1rem, 11.5vw, 11rem); line-height: 0.82; letter-spacing: 0.01em; text-align: center; color: var(--ink-900); white-space: nowrap; user-select: none; justify-self: center; align-self: center; transform: translateY(-2%); } /* Per-letter entrance; each is wrapped by JS-free markup in the HTML */ .hero__name span { display: inline-block; transform: translateY(0.42em) rotate(2deg); opacity: 0; animation: letter-set 1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 62ms + 180ms); } /* --- Layer 2: the character art --- A full-body figure, so it's sized by height and stands on the strip rather than being cropped or faded out at the waist. The sepia/saturate nudge warms the render toward the parchment palette so it doesn't read as pasted on. */ .hero__figure { position: relative; justify-self: center; align-self: end; height: min(76svh, 680px); width: auto; max-width: 94%; object-fit: contain; object-position: bottom center; opacity: 0; transform: translateY(28px) scale(0.985); animation: figure-in 1.5s var(--ease-out) 420ms forwards; will-change: transform; filter: sepia(0.16) saturate(0.94) contrast(1.02) drop-shadow(0 18px 26px rgba(36, 28, 20, 0.24)); } /* --- Layer 3: outlined copy of the name, in front for depth --- */ .hero__name--front { z-index: 3; color: transparent; -webkit-text-stroke: 1.5px rgba(20, 16, 12, 0.34); pointer-events: none; /* Only the lower band overlaps the figure, so fade the top out */ mask-image: linear-gradient(to bottom, transparent 42%, #000 78%); -webkit-mask-image: linear-gradient(to bottom, transparent 42%, #000 78%); } .hero__name--front span { animation-delay: calc(var(--i) * 62ms + 320ms); } /* --- Flanking labels, as in the reference layout --- */ .hero__flag { position: absolute; z-index: 4; font-family: var(--font-ui); font-size: clamp(0.68rem, 0.5rem + 0.5vw, 0.9rem); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-700); opacity: 0; animation: fade-up 900ms var(--ease-out) 1s forwards; } .hero__flag--left { left: 0; bottom: 26%; } .hero__flag strong { display: block; font-family: var(--font-display); font-size: 1.9em; letter-spacing: 0.06em; color: var(--ink-900); } /* Scroll cue */ /* Lives inside .hero__stage so it anchors above the strip regardless of how tall the strip grows. Sits at the left edge rather than centred, because dead centre puts it on top of the figure, where brown-on-brown vanishes. */ .hero__cue { position: absolute; left: 0; bottom: 0.25rem; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-600); opacity: 0; animation: fade-up 900ms var(--ease-out) 1.5s forwards; } .hero__cue i { width: 1px; height: 44px; background: linear-gradient(var(--ink-400), transparent); animation: cue-drop 2.4s var(--ease-in-out) infinite; } /* -------------------------------------------------------------------------- 9. Feature card strip (the row of panels at the hero's foot) -------------------------------------------------------------------------- */ .strip { position: relative; z-index: 6; width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; margin-bottom: clamp(1.5rem, 3vw, 2.75rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); box-shadow: var(--lift-2); } .strip__card { position: relative; padding: clamp(1.15rem, 2vw, 1.75rem); background: var(--paper-100); text-decoration: none; overflow: hidden; isolation: isolate; transition: color var(--dur) var(--ease-out); opacity: 0; animation: fade-up 800ms var(--ease-out) forwards; animation-delay: calc(1.15s + var(--i) * 110ms); } .strip__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-900); transform: translateY(100%); transition: transform var(--dur) var(--ease-out); } .strip__card:hover::before { transform: none; } .strip__card:hover { color: var(--paper-100); } .strip__card:hover h3, .strip__card:hover p { color: inherit; } .strip__card:hover .strip__index { color: var(--gold-soft); } .strip__card h3 { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.22rem); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.55rem; transition: color var(--dur) var(--ease-out); } .strip__card p { font-size: 0.88rem; line-height: 1.5; color: var(--ink-600); transition: color var(--dur) var(--ease-out); } .strip__index { position: absolute; top: 0.75rem; right: 0.9rem; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--fg-faint); transition: color var(--dur) var(--ease-out); } /* -------------------------------------------------------------------------- 10. Section blocks (landing page) -------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); } .stat { padding: 1.6rem 1.25rem; background: var(--bg); text-align: center; } .stat b { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1; color: var(--ink-900); } .stat span { display: block; margin-top: 0.5rem; font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted); } /* Generic content card grid */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .card { position: relative; padding: clamp(1.4rem, 2.5vw, 2.1rem); background: var(--bg-raised); border: 1px solid var(--rule); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: var(--lift-2); border-color: var(--rule-strong); } .card h3 { margin-bottom: 0.7rem; } .card p { color: var(--ink-600); font-size: 0.95rem; } .card__num { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--paper-400); margin-bottom: 0.9rem; } /* Full-bleed quote / call band */ .band { position: relative; padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--ink-900); color: var(--paper-200); overflow: hidden; } .band::before { content: ""; position: absolute; inset: 0; opacity: 0.06; background-image: repeating-linear-gradient(-45deg, var(--paper-100) 0 1px, transparent 1px 14px); } .band h2 { color: var(--paper-100); } .band p { color: rgba(243, 232, 210, 0.72); } .band .btn { --btn-fg: var(--paper-100); --btn-bd: rgba(243, 232, 210, 0.5); } .band .btn::before { background: var(--paper-100); } .band .btn:hover { color: var(--ink-900); border-color: var(--paper-100); } .band .btn--seal { --btn-bg: var(--seal); --btn-bd: var(--seal); } /* -------------------------------------------------------------------------- 11. Forums Markup mirrors a Discord forum channel: channel list -> threads -> messages. -------------------------------------------------------------------------- */ .page-head { position: relative; padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(2rem, 4vw, 3.5rem); background: radial-gradient(110% 130% at 12% 0%, var(--paper-100), transparent 60%), linear-gradient(var(--paper-200), var(--paper-300)); border-bottom: 1px solid var(--rule); overflow: hidden; } .page-head::after { content: attr(data-ghost); position: absolute; right: -0.06em; bottom: -0.24em; font-family: var(--font-display); font-weight: 900; font-size: clamp(7rem, 20vw, 20rem); line-height: 0.8; color: rgba(36, 28, 20, 0.05); pointer-events: none; user-select: none; white-space: nowrap; /* Fade it out toward the top so it never competes with the lede copy */ mask-image: linear-gradient(to bottom, transparent 8%, #000 62%); -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 62%); } .page-head__inner { position: relative; z-index: 1; } .page-head h1 { margin-block: 0.6rem 0.9rem; } .forum-layout { display: grid; grid-template-columns: minmax(220px, 262px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .channels { position: sticky; top: calc(var(--nav-h) + 1.5rem); border: 1px solid var(--rule); background: var(--bg-raised); } .channels__head { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--rule); font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted); } .channel { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.72rem 1.1rem; border: 0; border-left: 2px solid transparent; background: transparent; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .channel:hover { background: var(--paper-200); } .channel[aria-pressed="true"] { background: var(--paper-300); border-left-color: var(--seal); } .channel__hash { font-family: var(--font-ui); color: var(--fg-faint); font-size: 0.95rem; } .channel__name { font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500; color: var(--ink-700); } .channel__count { margin-left: auto; font-family: var(--font-ui); font-size: 0.66rem; color: var(--fg-faint); } .forum-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .forum-toolbar .field { flex: 1 1 220px; width: auto; } .threads { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .thread { position: relative; display: grid; /* Three explicit rows (title, excerpt, meta) so the avatar and the stats column can span the full height rather than auto-placing below. */ grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 0.35rem 1rem; padding: 1.15rem 1.35rem; background: var(--bg-raised); cursor: pointer; text-align: left; border: 0; border-left: 2px solid transparent; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .thread:hover { background: var(--paper-200); border-left-color: var(--gold); } .thread[data-pinned="true"] { background: linear-gradient(90deg, rgba(166,124,61,0.09), transparent 45%), var(--bg-raised); } .thread__avatar { grid-column: 1; grid-row: 1 / 4; align-self: start; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-300); border: 1px solid var(--rule-strong); font-family: var(--font-display); font-size: 0.95rem; color: var(--ink-600); flex-shrink: 0; } .thread__title { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .thread__pin { color: var(--gold); width: 0.9em; height: 0.9em; } .thread__excerpt { grid-column: 2; font-size: 0.92rem; color: var(--ink-500); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-clamp: 1; overflow: hidden; } .thread__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.85rem; margin-top: 0.5rem; font-family: var(--font-ui); font-size: 0.68rem; color: var(--fg-faint); } .thread__meta b { font-weight: 600; color: var(--ink-600); } .thread__stats { grid-column: 3; grid-row: 1 / 4; align-self: center; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.3rem; font-family: var(--font-ui); font-size: 0.68rem; color: var(--fg-muted); white-space: nowrap; } .thread__stats span { display: inline-flex; align-items: center; gap: 0.35em; } .thread__stats svg { width: 0.95em; height: 0.95em; opacity: 0.7; } /* Single-thread (message list) view */ .thread-view { display: none; } .thread-view[data-open="true"] { display: block; animation: fade-up 500ms var(--ease-out); } .threads[data-hidden="true"], .forum-toolbar[data-hidden="true"] { display: none; } .message { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); } .message:last-child { border-bottom: 0; } .message__avatar { grid-row: span 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-300); border: 1px solid var(--rule-strong); font-family: var(--font-display); color: var(--ink-600); } .message__head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; } .message__author { font-family: var(--font-ui); font-weight: 600; font-size: 0.88rem; color: var(--ink-900); } .message__role { font-family: var(--font-ui); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.15em 0.5em; border: 1px solid currentColor; border-radius: 99px; color: var(--seal); } .message__time { font-family: var(--font-ui); font-size: 0.68rem; color: var(--fg-faint); } .message__body { font-size: 0.98rem; color: var(--ink-700); } .message__body p + p { margin-top: 0.7rem; } .message__reactions { display: flex; gap: 0.4rem; margin-top: 0.7rem; flex-wrap: wrap; } .reaction { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.55em; border: 1px solid var(--rule-strong); border-radius: 99px; background: var(--paper-200); font-family: var(--font-ui); font-size: 0.72rem; color: var(--ink-600); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .reaction:hover { background: var(--paper-300); transform: translateY(-1px); } .composer { margin-top: 1.5rem; padding: 1.25rem; border: 1px dashed var(--rule-strong); background: var(--paper-200); display: flex; flex-direction: column; gap: 0.9rem; } .composer textarea { min-height: 92px; resize: vertical; } .composer__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* Sync-state badge, surfaces bot mirror status */ .sync { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); } .sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--verdigris); box-shadow: 0 0 0 0 rgba(74, 107, 93, 0.5); animation: pulse 2.6s var(--ease-in-out) infinite; } /* -------------------------------------------------------------------------- 12. Events / calendar -------------------------------------------------------------------------- */ .events-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .cal { border: 1px solid var(--rule); background: var(--bg-raised); box-shadow: var(--lift-1); } .cal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); } .cal__title { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem); font-weight: 700; letter-spacing: 0.04em; } .cal__title small { display: block; font-family: var(--font-ui); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-faint); margin-top: 0.25rem; } .cal__nav { display: flex; align-items: center; gap: 0.4rem; } .cal__btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--rule-strong); background: transparent; cursor: pointer; color: var(--ink-700); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .cal__btn:hover { background: var(--ink-800); color: var(--paper-100); } .cal__btn svg { width: 15px; height: 15px; } .cal__dow { display: grid; /* minmax(0,1fr), not 1fr, because event pills are nowrap and would otherwise force their column wider than its share. */ grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); } .cal__dow span { padding: 0.6rem 0.35rem; text-align: center; font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); } .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--rule); } .cal__grid[data-anim="in"] .cal__day { animation: cell-in 420ms var(--ease-out) backwards; } .cal__day { position: relative; min-width: 0; min-height: clamp(78px, 10vw, 116px); padding: 0.45rem 0.5rem 0.5rem; background: var(--bg-raised); border: 0; text-align: left; font: inherit; cursor: default; display: flex; flex-direction: column; gap: 0.3rem; transition: background var(--dur-fast) var(--ease-out); } .cal__day[data-outside="true"] { background: var(--paper-200); } .cal__day[data-outside="true"] .cal__date { color: var(--paper-500); } .cal__day[data-today="true"] { box-shadow: inset 0 0 0 2px var(--gold); } .cal__day:has(.cal__pill):hover { background: var(--paper-200); } .cal__date { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; color: var(--ink-600); } .cal__day[data-today="true"] .cal__date { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--seal); color: var(--paper-100); } .cal__pill { display: block; width: 100%; min-width: 0; max-width: 100%; padding: 0.2rem 0.4rem; border: 0; border-left: 3px solid var(--tone, var(--ink-500)); background: color-mix(in srgb, var(--tone, var(--ink-500)) 12%, transparent); font-family: var(--font-ui); font-size: 0.66rem; line-height: 1.3; text-align: left; color: var(--ink-800); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .cal__pill:hover { background: color-mix(in srgb, var(--tone, var(--ink-500)) 24%, transparent); transform: translateX(2px); } .cal__pill-time { opacity: 0.62; margin-left: 0.4em; } .cal__more { font-family: var(--font-ui); font-size: 0.6rem; color: var(--fg-faint); border: 0; background: none; padding: 0 0.4rem; cursor: pointer; text-align: left; } /* Upcoming list beside the calendar */ .upcoming { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .up-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.9rem; padding: 0.95rem 1.1rem; background: var(--bg-raised); border: 0; border-left: 3px solid var(--tone, var(--ink-500)); text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); } .up-item:hover { background: var(--paper-200); padding-left: 1.35rem; } .up-item__date { grid-row: span 2; display: grid; place-items: center; align-content: center; width: 46px; padding: 0.35rem 0; background: var(--paper-300); border: 1px solid var(--rule); font-family: var(--font-ui); line-height: 1.05; } .up-item__date b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-900); } .up-item__date span { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); } .up-item__title { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; } .up-item__meta { font-family: var(--font-ui); font-size: 0.68rem; color: var(--fg-muted); display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Attendance bar */ .roster-bar { height: 5px; background: var(--paper-300); overflow: hidden; } .roster-bar i { display: block; height: 100%; background: var(--tone, var(--seal)); width: 0; transition: width var(--dur-slow) var(--ease-out); } /* Signup roster avatars */ .roster { display: flex; flex-wrap: wrap; gap: 0.4rem; } .roster__slot { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.3em 0.7em 0.3em 0.35em; border: 1px solid var(--rule-strong); border-radius: 99px; background: var(--paper-200); font-family: var(--font-ui); font-size: 0.74rem; } .roster__slot i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-400); font-family: var(--font-display); font-style: normal; font-size: 0.66rem; color: var(--ink-700); } .roster__slot[data-empty="true"] { border-style: dashed; background: transparent; color: var(--fg-faint); } /* -------------------------------------------------------------------------- 13. About -------------------------------------------------------------------------- */ .timeline { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding-left: 2.25rem; } .timeline::before { content: ""; position: absolute; left: 6px; top: 0.5rem; bottom: 0.5rem; width: 1px; background: linear-gradient(var(--rule-strong), var(--rule), transparent); } .timeline__item { position: relative; } .timeline__item::before { content: ""; position: absolute; left: -2.25rem; top: 0.5rem; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--seal); } .timeline__when { font-family: var(--font-ui); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--seal); } .timeline__item h3 { margin: 0.35rem 0 0.5rem; } .roster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .officer { padding: 1.5rem 1.35rem; background: var(--bg-raised); text-align: center; transition: background var(--dur) var(--ease-out); } .officer:hover { background: var(--paper-200); } .officer__portrait { width: 74px; height: 74px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--paper-300); border: 1px solid var(--rule-strong); font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-600); transition: transform var(--dur) var(--ease-out); } .officer:hover .officer__portrait { transform: scale(1.06) rotate(-3deg); } .officer h4 { font-size: 1.05rem; } .officer__role { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--seal); margin-top: 0.3rem; } .officer p { font-size: 0.86rem; color: var(--ink-500); margin-top: 0.7rem; } .faq { border-top: 1px solid var(--rule); } .faq__item { border-bottom: 1px solid var(--rule); } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); font-weight: 700; color: var(--ink-900); transition: color var(--dur-fast) var(--ease-out); } .faq__q:hover { color: var(--seal); } .faq__q i { position: relative; width: 14px; height: 14px; flex-shrink: 0; } .faq__q i::before, .faq__q i::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur) var(--ease-out); } .faq__q i::before { inset: 6px 0; height: 1.5px; } .faq__q i::after { inset: 0 6px; width: 1.5px; } .faq__q[aria-expanded="true"] i::after { transform: rotate(90deg); } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); } .faq__a > div { overflow: hidden; } .faq__a > div > p { padding-bottom: 1.35rem; color: var(--ink-600); max-width: 62ch; } .faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; } /* -------------------------------------------------------------------------- 14. Modal -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: var(--gutter); visibility: hidden; opacity: 0; transition: opacity var(--dur) var(--ease-out), visibility var(--dur); } .modal[data-open="true"] { visibility: visible; opacity: 1; } .modal__scrim { position: absolute; inset: 0; background: rgba(20, 16, 12, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 0; cursor: pointer; } .modal__panel { position: relative; width: min(100%, 660px); max-height: min(86svh, 900px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper-100); border: 1px solid var(--rule-strong); box-shadow: var(--lift-3); transform: translateY(18px) scale(0.985); transition: transform var(--dur) var(--ease-out); } .modal[data-open="true"] .modal__panel { transform: none; } .modal__close { position: absolute; top: 0.8rem; right: 0.8rem; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--paper-100); cursor: pointer; color: var(--ink-600); z-index: 2; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .modal__close:hover { background: var(--ink-800); color: var(--paper-100); } .modal__banner { padding: 1.6rem 1.75rem 1.3rem; border-bottom: 1px solid var(--rule); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tone, var(--seal)) 10%, transparent) 0 8px, transparent 8px 16px), var(--paper-200); } .modal__body { padding: 1.6rem 1.75rem; display: grid; gap: 1.35rem; } .modal__foot { padding: 1.25rem 1.75rem; border-top: 1px solid var(--rule); background: var(--paper-200); display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .detail-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; } .detail { border-left: 2px solid var(--rule-strong); padding-left: 0.8rem; } .detail dt { font-family: var(--font-ui); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); } .detail dd { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink-900); } /* -------------------------------------------------------------------------- 15. Footer -------------------------------------------------------------------------- */ .footer { padding-block: clamp(3rem, 6vw, 5rem) 2rem; background: var(--paper-300); border-top: 1px solid var(--rule-strong); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); } .footer h5 { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 1rem; } .footer ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; } .footer a { text-decoration: none; font-size: 0.92rem; color: var(--ink-600); transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); } .footer a:hover { color: var(--seal); padding-left: 4px; } .footer__base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.75rem; font-family: var(--font-ui); font-size: 0.7rem; color: var(--fg-faint); } /* -------------------------------------------------------------------------- 16. Motion & reveal -------------------------------------------------------------------------- */ @keyframes letter-set { to { transform: none; opacity: 1; } } @keyframes figure-in { to { opacity: 1; transform: none; } } @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes cell-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes cue-drop { 0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 107, 93, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(74, 107, 93, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 107, 93, 0); } } /* Scroll-triggered reveal, driven by IntersectionObserver in main.js. Scoped to .js, which a one-line inline script in each sets, so with scripting off (or if main.js fails to load) the content is simply visible instead of stuck at opacity 0. */ .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 780ms var(--ease-out), transform 780ms var(--ease-out); transition-delay: var(--delay, 0ms); } .js [data-reveal="in"] { opacity: 1; transform: none; } /* Cross-page fade. .is-leaving is set on just before navigating */ body { animation: page-in 520ms var(--ease-out); } @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } body.is-leaving { opacity: 0; transition: opacity 220ms var(--ease-in-out); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js [data-reveal] { opacity: 1; transform: none; } .hero__name span, .hero__figure, .hero__flag, .hero__cue, .strip__card { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 17. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1040px) { .events-layout { grid-template-columns: minmax(0, 1fr); } .forum-layout { grid-template-columns: minmax(0, 1fr); } .channels { position: static; } } @media (max-width: 860px) { :root { --nav-h: 66px; } .nav__links { display: none; } .nav__burger { display: block; } .nav__drawer { display: flex; } .nav__inner { justify-content: space-between; } .nav__actions { margin-left: auto; } /* "Sign in" also lives in the drawer, so drop it here rather than let the action group overflow the viewport. The brand tightens up for the same reason: mark + wordmark + CTA + burger is a lot for 390px. */ .nav__actions .btn--ghost { display: none; } .nav__inner { gap: 0.75rem; } .brand__mark { width: 28px; height: 28px; } .brand__word { font-size: 0.98rem; letter-spacing: 0.12em; } .hero { min-height: 92svh; padding-bottom: 1.5rem; } /* Extra top padding makes room for the flag, which moves to the top corner because every .hero__stage child shares one grid cell, so left in place it would print straight over the wordmark. */ .hero__stage { padding-block: 4.25rem 0; } .hero__figure { height: min(56svh, 440px); } .hero__flag { top: 0; bottom: auto; } .hero__flag--left { left: 0; } .hero__flag strong { font-size: 1.6em; } .hero__cue { display: none; } .strip { grid-template-columns: minmax(0, 1fr); } .cal__day { min-height: 62px; padding: 0.35rem; } .cal__pill { font-size: 0.56rem; padding: 0.12rem 0.25rem; } .thread { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto; } .thread__avatar { grid-row: 1 / 3; } .thread__stats { grid-column: 2; grid-row: 4; align-self: start; flex-direction: row; align-items: center; justify-content: flex-start; margin-top: 0.35rem; gap: 0.9rem; } .footer__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } } @media (max-width: 560px) { .brand__word { font-size: 0.85rem; letter-spacing: 0.1em; } .nav__actions { gap: 0.4rem; } .nav__actions .btn--seal { padding: 0.62em 0.8em; } .nav__burger { width: 38px; height: 38px; } .nav__burger span { left: 9px; right: 9px; } .nav__burger span:nth-child(1) { top: 13px; } .nav__burger span:nth-child(2) { top: 18px; } .nav__burger span:nth-child(3) { top: 23px; } .cal__dow span { font-size: 0.5rem; letter-spacing: 0.08em; } .cal__pill { display: none; } .cal__day:has(.cal__pill)::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--seal); margin-top: auto; } .modal__body, .modal__banner, .modal__foot { padding-inline: 1.15rem; } } /* Below ~360px the wordmark, CTA and burger can't coexist, so the serpent mark carries the branding on its own. */ @media (max-width: 359px) { .brand__word { display: none; } } @media print { .nav, .grain, .foxing, .hero__cue, .modal { display: none !important; } body { background: #fff; } }