/* gohu.css — the Gohu family design standard. Docs: https://colors.gohu.ca Tokens are prefixed --g-, components .g-. The theme follows the system. Put data-theme="light" or data-theme="dark" on (or on any element) to pin one. */ /* --------------------------------------------------------------- Fonts --------------------------------------------------------------- */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------- Tokens --------------------------------------------------------------- */ :root { /* Brand. The same in every theme. */ --g-navy: #131a33; /* the mark's tile */ --g-indigo: #4353ff; /* the mark's dot, app-icon glyphs */ --g-indigo-deep: #2b37cc; /* shaded faces in app icons */ --g-indigo-light: #7c88ff; /* lit faces in app icons */ /* Signals. The same in every theme. */ --g-yes: #27ae60; --g-no: #e74c3c; /* Type */ --g-font-sans: "Space Grotesk", system-ui, sans-serif; --g-font-mono: "JetBrains Mono", ui-monospace, monospace; --g-fs-xs: 0.75rem; /* 12 — footers, helper text */ --g-fs-sm: 0.875rem; /* 14 — body copy, pills, labels */ --g-fs-base: 1rem; /* 16 — buttons, inputs */ --g-fs-lg: 1.125rem; /* 18 — card titles */ --g-fs-xl: 1.25rem; /* 20 */ --g-fs-2xl: 1.5rem; /* 24 — page titles */ --g-fs-3xl: 1.875rem; /* 30 */ --g-fs-4xl: 2.25rem; /* 36 — display */ /* Shape */ --g-radius-sm: 8px; /* buttons, inputs, Yes/No */ --g-radius-md: 12px; --g-radius-lg: 16px; /* cards, disclosures, tiles */ --g-radius-pill: 9999px; /* Space: a 4px grid */ --g-space-1: 0.25rem; --g-space-2: 0.5rem; --g-space-3: 0.75rem; --g-space-4: 1rem; --g-space-5: 1.25rem; --g-space-6: 1.5rem; --g-space-8: 2rem; --g-space-10: 2.5rem; --g-space-16: 4rem; /* Layout */ --g-content: 48rem; /* 768 — app pages */ --g-narrow: 24rem; /* 384 — sign in, single forms */ --g-gutter: 1rem; --g-header-h: 4rem; /* Motion */ --g-ease: ease; --g-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --g-dur-fast: 140ms; --g-dur: 220ms; } /* Interface colors, light */ :root, [data-theme="light"] { color-scheme: light; --g-bg: #ffffff; --g-bg-elev: #f6f7f9; --g-bg-card: #ffffff; --g-border: #e5e7eb; --g-text: #0e1116; --g-text-muted: #6b7280; --g-accent: #1652f0; --g-on-accent: #ffffff; /* Yes/No at full strength fail contrast as text on white; these pass AA. */ --g-yes-text: #1d7f46; --g-no-text: #c0392b; --g-logo-filter: none; --g-mark-ring: none; } /* Interface colors, dark */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --g-bg: #0b0d10; --g-bg-elev: #15181d; --g-bg-card: #15181d; --g-border: #25282d; --g-text: #f3f4f6; --g-text-muted: #9aa0a6; --g-accent: #3b6fff; --g-on-accent: #ffffff; --g-yes-text: var(--g-yes); --g-no-text: var(--g-no); --g-logo-filter: invert(1) hue-rotate(180deg); --g-mark-ring: 0 0 0 1px rgba(255, 255, 255, 0.16); } } [data-theme="dark"] { color-scheme: dark; --g-bg: #0b0d10; --g-bg-elev: #15181d; --g-bg-card: #15181d; --g-border: #25282d; --g-text: #f3f4f6; --g-text-muted: #9aa0a6; --g-accent: #3b6fff; --g-on-accent: #ffffff; --g-yes-text: var(--g-yes); --g-no-text: var(--g-no); --g-logo-filter: invert(1) hue-rotate(180deg); --g-mark-ring: 0 0 0 1px rgba(255, 255, 255, 0.16); } /* Derived colors. Declared wherever a theme is, so they follow it. */ :root, [data-theme] { --g-track: color-mix(in srgb, var(--g-text) 15%, var(--g-bg)); --g-accent-tint: color-mix(in srgb, var(--g-accent) 15%, transparent); --g-yes-tint: color-mix(in srgb, var(--g-yes) 10%, transparent); --g-no-tint: color-mix(in srgb, var(--g-no) 10%, transparent); --g-shadow-hover: 0 4px 18px color-mix(in srgb, var(--g-accent) 9%, transparent); } /* --------------------------------------------------------------- Base. Zero specificity, so app styles win without a fight. --------------------------------------------------------------- */ *, ::before, ::after { box-sizing: border-box; } :where(body) { margin: 0; background: var(--g-bg); color: var(--g-text); font-family: var(--g-font-sans); font-size: var(--g-fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(a) { color: var(--g-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } :where(a:hover) { text-decoration-thickness: 2px; } :where(:focus-visible) { outline: 2px solid var(--g-accent); outline-offset: 2px; } :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--g-accent); } ::selection { background: var(--g-accent-tint); } /* --------------------------------------------------------------- Layout --------------------------------------------------------------- */ .g-container { max-width: var(--g-content); margin-inline: auto; padding-inline: var(--g-gutter); } .g-narrow { max-width: var(--g-narrow); margin-inline: auto; } .g-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--g-border); background: color-mix(in srgb, var(--g-bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .g-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-4); max-width: var(--g-content); height: var(--g-header-h); margin-inline: auto; padding-inline: var(--g-gutter); } .g-footer { padding: var(--g-space-10) var(--g-gutter); color: var(--g-text-muted); font-size: var(--g-fs-xs); line-height: 1rem; text-align: center; } /* A line of fine print, joined by middle dots. */ .g-meta > * + *::before { content: "·"; display: inline-block; /* keeps the dot out of a link's underline */ margin-inline: 0.375em; color: var(--g-text-muted); } /* --------------------------------------------------------------- Type --------------------------------------------------------------- */ .g-display, .g-title, .g-heading { margin: 0; } .g-display { font-size: var(--g-fs-4xl); line-height: 2.5rem; font-weight: 600; letter-spacing: -0.025em; } .g-title { font-size: var(--g-fs-2xl); line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; } .g-heading { font-size: var(--g-fs-lg); line-height: 1.375; font-weight: 600; } .g-body { font-size: var(--g-fs-sm); line-height: 1.25rem; } .g-prose { font-size: var(--g-fs-sm); line-height: 1.625; } .g-caption { font-size: var(--g-fs-xs); line-height: 1rem; } .g-muted { color: var(--g-text-muted); } /* The word Gohu, where an app introduces it. */ .g-text-accent { color: var(--g-accent); font-weight: 500; } .g-num { font-family: var(--g-font-mono); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- Surfaces --------------------------------------------------------------- */ .g-surface { background: var(--g-bg-card); border: 1px solid var(--g-border); } .g-surface-elev { background: var(--g-bg-elev); border: 1px solid var(--g-border); } .g-card { position: relative; display: flex; flex-direction: column; padding: var(--g-space-5); background: var(--g-bg-card); border: 1px solid var(--g-border); border-radius: var(--g-radius-lg); color: inherit; } a.g-card, .g-card--link { text-decoration: none; transition: border-color var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease); } a.g-card:hover, .g-card--link:hover { border-color: var(--g-accent); box-shadow: var(--g-shadow-hover); } .g-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g-space-4); } .g-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-4); margin-top: var(--g-space-4); padding-top: var(--g-space-3); border-top: 1px solid var(--g-border); color: var(--g-text-muted); font-size: var(--g-fs-sm); line-height: 1.25rem; } /* The placeholder that makes a new thing. */ .g-create { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--g-space-2); min-height: 12rem; padding: var(--g-space-5); background: transparent; border: 2px dashed var(--g-border); border-radius: var(--g-radius-lg); color: var(--g-text-muted); font: 600 var(--g-fs-base) / 1.5rem var(--g-font-sans); text-decoration: none; cursor: pointer; transition: border-color var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease); } .g-create:hover { border-color: var(--g-accent); color: var(--g-accent); } .g-create svg { width: 2rem; height: 2rem; } /* An app icon on a white plate. White in both themes, so navy glyphs stay visible. */ .g-tile { display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; background: #ffffff; border: 1px solid var(--g-border); border-radius: var(--g-radius-lg); overflow: hidden; } .g-tile > img, .g-tile > svg { display: block; } /* --------------------------------------------------------------- Buttons --------------------------------------------------------------- */ .g-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-5); background: var(--g-bg-card); border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); color: var(--g-text); font: 500 var(--g-fs-base) / 1.5rem var(--g-font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color var(--g-dur-fast) var(--g-ease), background-color var(--g-dur-fast) var(--g-ease), filter var(--g-dur-fast) var(--g-ease); } .g-btn:hover { border-color: var(--g-accent); } .g-btn--primary { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-on-accent); font-weight: 600; } .g-btn--primary:hover { filter: brightness(1.08); } .g-btn--navy { background: var(--g-navy); border-color: var(--g-navy); color: #ffffff; font-weight: 600; } .g-btn--navy:hover { background: var(--g-indigo-deep); border-color: var(--g-indigo-deep); } .g-btn--sm { gap: var(--g-space-2); padding: 0.375rem var(--g-space-4); font-size: var(--g-fs-sm); line-height: 1.25rem; } .g-btn--pill { border-radius: var(--g-radius-pill); } .g-btn--block { display: flex; width: 100%; } .g-btn:disabled, .g-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: none; } /* Yes / No */ .g-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-space-2); } .g-card > .g-choices { margin-top: var(--g-space-5); } .g-choice { display: flex; align-items: center; justify-content: center; padding: var(--g-space-2) var(--g-space-4); border: 0; border-radius: var(--g-radius-sm); font: 600 var(--g-fs-base) / 1.5rem var(--g-font-sans); text-decoration: none; cursor: pointer; transition: background-color var(--g-dur-fast) var(--g-ease); } .g-choice--yes { background: var(--g-yes-tint); color: var(--g-yes-text); } .g-choice--yes:hover { background: color-mix(in srgb, var(--g-yes) 20%, transparent); } .g-choice--no { background: var(--g-no-tint); color: var(--g-no-text); } .g-choice--no:hover { background: color-mix(in srgb, var(--g-no) 20%, transparent); } /* Filter pills. Mark the current one with aria-current or aria-pressed="true". */ .g-pills { display: flex; gap: var(--g-space-1); overflow-x: auto; scrollbar-width: none; } .g-pills::-webkit-scrollbar { display: none; } .g-pill { display: inline-flex; align-items: center; flex: none; padding: 0.375rem var(--g-space-3); background: var(--g-bg-card); border: 1px solid var(--g-border); border-radius: var(--g-radius-pill); color: var(--g-text-muted); font: 400 var(--g-fs-sm) / 1.25rem var(--g-font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--g-dur-fast) var(--g-ease), background-color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease); } .g-pill:hover { color: var(--g-text); } .g-pill[aria-current]:not([aria-current="false"]), .g-pill[aria-pressed="true"] { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-on-accent); } /* --------------------------------------------------------------- Disclosure --------------------------------------------------------------- */ .g-disclosure { padding: var(--g-space-5); background: var(--g-bg-card); border: 1px solid var(--g-border); border-radius: var(--g-radius-lg); } .g-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-4); list-style: none; font-size: var(--g-fs-sm); font-weight: 500; line-height: 1.25rem; cursor: pointer; } .g-disclosure > summary::-webkit-details-marker { display: none; } .g-disclosure > summary::after { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--g-dur) var(--g-ease); } .g-disclosure[open] > summary::after { transform: rotate(180deg); } .g-disclosure__body { margin-top: var(--g-space-4); color: var(--g-text-muted); font-size: var(--g-fs-sm); line-height: 1.625; } .g-disclosure__body > * { margin: 0; } .g-disclosure__body > * + * { margin-top: var(--g-space-3); } .g-disclosure__body strong { color: var(--g-text); font-weight: 500; } /* --------------------------------------------------------------- Chance gauge