/* ==========================================================================
Flurto — base.css
Reset, document defaults, typography, layout primitives, buttons, badges,
a11y helpers. Every value comes from tokens.css.
========================================================================== */
/* --------------------------------------------------------------------------
1. RESET
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-block-start: calc(var(--navbar-h) + var(--space-6));
-moz-tab-size: 4;
tab-size: 4;
}
body {
min-block-size: 100vh;
background-color: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-normal);
text-align: start;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis-weight: none;
/* Contain the decorative blobs that bleed past the viewport edge.
`hidden` here would make a scroll container, and every
`position: sticky` descendant — the navbar, the meetups filter bar, both
browser columns — would silently stop sticking, because they would be
resolving against a scrollport that never scrolls. `clip` does the same
visual job WITHOUT creating one. The `hidden` line stays first as the
fallback for browsers without `clip`. */
overflow-x: hidden;
overflow-x: clip;
}
/* The navbar is `position: sticky`, but its mount point wraps it in a div that
is exactly its own height — a sticky box can only travel inside its
containing block, so it had none and scrolled away like static content.
`display: contents` removes the wrapper's box, making .page-shell the
containing block and giving the navbar the whole page to stick over. */
#app-header {
display: contents;
}
img,
svg,
video,
canvas,
picture {
display: block;
max-inline-size: 100%;
block-size: auto;
}
svg {
fill: currentColor;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
}
ul,
ol {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
table {
border-collapse: collapse;
inline-size: 100%;
}
hr {
block-size: 1px;
border: 0;
background: var(--grad-rule);
margin-block: var(--space-8);
}
::selection {
background: var(--color-coral-300);
color: var(--color-ink-strong);
}
/* --------------------------------------------------------------------------
2. FONT FAMILY SWITCH (fonts arrive via Google Fonts in the HTML)
-------------------------------------------------------------------------- */
html[lang="fa"],
html[dir="rtl"],
[dir="rtl"],
:lang(fa) {
--font-body: var(--font-arabic);
/* One family site-wide: Shabnam. Weight carries the hierarchy. */
--font-display: var(--font-display-fa);
}
/* Persian copy sits a touch lower and needs a slightly looser leading. */
html[lang="fa"] body,
html[dir="rtl"] body {
line-height: var(--leading-relaxed);
font-synthesis-weight: none; /* real Shabnam weights only — never synthesise */
}
/* --------------------------------------------------------------------------
3. TYPOGRAPHY
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--color-ink);
font-weight: var(--weight-extra);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }
h6 { font-size: var(--text-base); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }
/* Persian display type reads better slightly less tight */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3 {
letter-spacing: var(--tracking-normal);
line-height: 1.35;
}
p {
text-wrap: pretty;
}
strong, b { font-weight: var(--weight-bold); }
em, i { font-style: italic; }
small { font-size: var(--text-sm); }
code, kbd, samp, pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.92em;
}
/* --------------------------------------------------------------------------
4. LAYOUT PRIMITIVES
-------------------------------------------------------------------------- */
.container {
inline-size: 100%;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.section {
position: relative;
padding-block: var(--space-section);
}
.section--alt {
background-color: var(--color-bg-alt);
}
.section__head {
max-inline-size: 44rem;
margin-inline: auto;
margin-block-end: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
text-align: center;
}
.section__title {
font-size: var(--text-3xl);
font-weight: var(--weight-extra);
color: var(--color-ink);
}
.section__subtitle {
margin-block-start: var(--space-4);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--color-ink-muted);
max-inline-size: var(--measure-short);
margin-inline: auto;
}
/* Grids — collapse 4→2→1, 3→1, 2→1 */
.grid {
display: grid;
gap: var(--gap-grid);
grid-template-columns: 1fr;
align-items: stretch;
}
@media (min-width: 760px) {
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 620px) {
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* --------------------------------------------------------------------------
5. BUTTONS
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding-block: 0.78rem;
padding-inline: 1.5rem;
border: 2px solid transparent;
border-radius: var(--radius-pill);
background-color: transparent;
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-bold);
line-height: 1.15;
letter-spacing: var(--tracking-snug);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: var(--transition-color), var(--transition-lift);
}
.btn:hover {
transform: translateY(var(--lift-sm));
}
.btn:active {
transform: translateY(0);
}
/* Primary — brand coral with deep plum ink (4.8:1, WCAG AA at any size) */
.btn--primary {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-ink);
box-shadow: var(--shadow-coral);
}
.btn--primary:hover {
background-color: var(--color-primary-hover);
border-color: var(--color-primary-hover);
box-shadow: var(--shadow-coral-strong);
}
/* Ghost — outlined, sits on cream or white */
.btn--ghost {
background-color: transparent;
border-color: var(--color-border-strong);
color: var(--color-ink);
}
.btn--ghost:hover {
background-color: var(--color-surface);
border-color: var(--color-plum);
box-shadow: var(--shadow-md);
}
/* Light — white pill for dark/coral backgrounds (5.2:1) */
.btn--light {
background-color: var(--color-white);
border-color: var(--color-white);
color: var(--color-primary-deep);
box-shadow: var(--shadow-md);
}
.btn--light:hover {
background-color: var(--color-cream);
border-color: var(--color-cream);
box-shadow: var(--shadow-lg);
}
.btn--lg {
padding-block: 1rem;
padding-inline: 2.1rem;
font-size: var(--text-md);
}
.btn[disabled],
.btn[aria-disabled="true"] {
opacity: 0.55;
pointer-events: none;
}
/* --------------------------------------------------------------------------
6. BADGE
-------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding-block: 0.4rem;
padding-inline: 0.9rem;
border-radius: var(--radius-pill);
background-color: var(--color-coral-tint);
color: var(--color-primary-deep);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-snug);
line-height: 1.2;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
7. ACCESSIBILITY
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-start: var(--space-3);
z-index: var(--z-skip);
padding-block: 0.7rem;
padding-inline: 1.2rem;
border-radius: var(--radius-pill);
background-color: var(--color-plum);
color: var(--color-cream);
font-weight: var(--weight-bold);
font-size: var(--text-sm);
box-shadow: var(--shadow-lg);
transform: translateY(-160%);
transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
}
/* Visible, consistent focus ring everywhere */
:focus-visible {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
border-radius: var(--radius-xs);
}
/* Never leave a mouse click ringed, but never remove keyboard focus either */
:focus:not(:focus-visible) {
outline: none;
}
/* Screen-reader-only utility */
.visually-hidden,
.sr-only {
position: absolute !important;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
[hidden] {
display: none !important;
}
/* --------------------------------------------------------------------------
8. REDUCED MOTION
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.btn:hover,
.card:hover,
.feature-card:hover,
.event-card:hover,
.post-card:hover,
.value-card:hover,
.pillar:hover,
.testimonial:hover {
transform: none !important;
}
}
/* --------------------------------------------------------------------------
9. FORCED COLORS / HIGH CONTRAST
-------------------------------------------------------------------------- */
@media (forced-colors: active) {
.btn,
.badge,
.card,
.feature-card,
.event-card,
.post-card {
border: 1px solid CanvasText;
}
:focus-visible {
outline: 3px solid Highlight;
}
}
/* --------------------------------------------------------------------------
SERVER-RENDERED FALLBACK
-------------------------------------------------------------------------- */
/* serve.py writes plain semantic HTML into so crawlers and no-JS
readers get the real content. With JS it would flash unstyled for the
moment before the app mounts over it — every filter click, now that
filters navigate — so hide it as soon as we know JS is running.
`no-hydrate` is set by the shell's watchdog when the app never arrived. */
html.js .prerender,
html.js .prerender-facets {
display: none;
}
html.no-hydrate .prerender,
html.no-hydrate .prerender-facets {
display: block;
}