Something went wrong. Try again.
Website hub for the atmosphere community, aggregating posts, events, regional, and more forked from atmosphere.community/atmosphere.community
Something went wrong. Try again.
7.8 kB · 332 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333/* ============================================ atmosphere.community — Design System Direction: "Horizon" — warm, breezy, people-forward ============================================ */
/* --- Fonts --- *//* Bitter (display): warm slab serif for headings Source Sans 3 (body): humanist sans for text/UI */
/* --- Color Tokens (OKLCH) --- */:root { /* Brand blues — hue ~250 (sky blue family) */ --blue-900: oklch(25% 0.08 250); --blue-800: oklch(32% 0.09 250); --blue-700: oklch(48% 0.14 250); --blue-600: oklch(56% 0.13 250); --blue-500: oklch(62% 0.11 250); --blue-400: oklch(68% 0.10 250); --blue-300: oklch(75% 0.08 250); --blue-200: oklch(85% 0.05 250); --blue-100: oklch(90% 0.03 250); --blue-50: oklch(95% 0.015 250);
/* Neutrals — tinted toward brand hue 250 */ --neutral-900: oklch(22% 0.01 250); --neutral-800: oklch(30% 0.01 250); --neutral-700: oklch(38% 0.01 250); --neutral-600: oklch(48% 0.008 250); --neutral-500: oklch(58% 0.008 250); --neutral-400: oklch(68% 0.006 250); --neutral-300: oklch(78% 0.005 250); --neutral-200: oklch(88% 0.008 250); --neutral-100: oklch(93% 0.008 250); --neutral-50: oklch(97% 0.005 250);
/* Accent: teal for communities/events */ --teal-600: oklch(55% 0.12 170); --teal-100: oklch(92% 0.03 170);
/* Accent: coral for warm highlights */ --coral-600: oklch(55% 0.14 30); --coral-100: oklch(92% 0.03 30);
/* Semantic */ --color-primary: var(--blue-700); --color-primary-hover: var(--blue-800); --color-text: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-muted: var(--neutral-500); --color-text-on-primary: oklch(98% 0.005 250); --color-surface: oklch(99% 0.004 250); --color-surface-card: oklch(100% 0.002 250); --color-border: var(--neutral-200); --color-link: var(--blue-700); --color-link-hover: var(--blue-800);
/* Location/status badges */ --badge-location-bg: oklch(94% 0.025 145); --badge-location-text: oklch(38% 0.08 145); --badge-online-bg: var(--blue-50); --badge-online-text: var(--blue-700); --badge-tag-bg: var(--blue-50); --badge-tag-text: var(--blue-700);
/* --- Spacing (4pt base) --- */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;
/* --- Typography --- */ --font-display: 'Bitter', Georgia, serif; --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
/* Type scale — ~1.3 ratio (perfect fourth) */ --text-xs: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem); --text-sm: clamp(0.78rem, 0.74rem + 0.2vw, 0.875rem); --text-base: clamp(0.875rem, 0.84rem + 0.2vw, 1rem); --text-lg: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); --text-xl: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
--leading-tight: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.7;
/* --- Layout --- */ --content-width: 960px; --content-narrow: 720px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;}
/* --- Reset & Base --- */*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0;}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth;}
@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; }}
body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh;}
img, svg { display: block; max-width: 100%; height: auto;}
a { color: var(--color-link); text-decoration: none; transition: color 0.15s ease;}a:hover { color: var(--color-link-hover);}a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px;}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); color: var(--neutral-900); text-wrap: balance;}
h1 { font-size: var(--text-2xl); font-weight: 700; }h2 { font-size: var(--text-xl); font-weight: 600; }h3 { font-size: var(--text-lg); font-weight: 600; }h4 { font-size: var(--text-base); font-weight: 600; }
p + p { margin-top: var(--space-base); }
/* --- Utility Classes --- */.container { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--space-lg);}
@media (min-width: 640px) { .container { padding-inline: var(--space-2xl); }}
.container--narrow { max-width: var(--content-narrow);}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
/* --- Card base --- */.card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-base);}
/* The HTML `hidden` attribute should always win over author display rules. */[hidden] { display: none !important;}
/* --- Badge / Pill --- */.badge { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; line-height: 1; white-space: nowrap;}
.badge--tag { background: var(--badge-tag-bg); color: var(--badge-tag-text);}
.badge--location { background: var(--badge-location-bg); color: var(--badge-location-text);}
.badge--online { background: var(--badge-online-bg); color: var(--badge-online-text);}
/* --- Button --- */.btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-base); border: none; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; text-decoration: none;}
.btn--primary { background: var(--color-primary); color: var(--color-text-on-primary);}.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-text-on-primary);}
.btn--ghost { background: transparent; color: var(--color-primary); border: 1px solid var(--color-border);}.btn--ghost:hover { background: var(--blue-50); border-color: var(--blue-200);}
.btn--small { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs);}
/* --- Section spacing --- */.section { padding-block: var(--space-2xl) var(--space-3xl);}
@media (min-width: 640px) { .section { padding-block: var(--space-3xl) var(--space-4xl); }}
.section__header { margin-bottom: var(--space-xl);}
.section__title { font-size: var(--text-xl);}
.section__subtitle { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: var(--space-xs);}
.section__more { font-size: var(--text-sm); font-weight: 500;}
/* --- Grid --- */.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-base);}
/* --- Skip link --- */.skip-link { position: absolute; top: -100%; left: var(--space-base); padding: var(--space-sm) var(--space-base); background: var(--color-primary); color: var(--color-text-on-primary); border-radius: var(--radius-sm); font-weight: 600; z-index: 100;}.skip-link:focus { top: var(--space-sm);}