/* ===================================================================== Foro.Today — Design tokens + base styles Light/Dark via [data-theme] on ===================================================================== */ :root { /* Light theme */ --bg: #FBF8F1; --surface: #FFFFFF; --surface-2: #F4EFE0; --ink: #0E1014; --ink-strong: #000000; --ink-muted: #5A5A55; --brand: #2C5DDB; --brand-ink: #FFFFFF; --accent: #C8553D; --success: #3F8F5E; --warning: #C68A2A; --border: #E8E2D3; --focus: #2C5DDB; --shadow-sm: 0 1px 2px rgb(0 0 0 / .06); --shadow-md: 0 8px 24px -8px rgb(14 16 20 / .12); --shadow-lg: 0 24px 60px -24px rgb(14 16 20 / .18); --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* Spacing scale (rem) */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; /* Containers */ --c-content: 72rem; --c-wide: 80rem; --c-narrow: 40rem; /* Type */ --f-display: "Fraunces", ui-serif, Georgia, serif; --f-body: "Inter", ui-sans-serif, system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --ease: cubic-bezier(.2,.7,.2,1); --dur: 200ms; } :root[data-theme="dark"] { --bg: #0E1014; --surface: #171A21; --surface-2: #1F232C; --ink: #F2EFE7; --ink-strong: #FFFFFF; --ink-muted: #A6A39B; --brand: #7DA3FF; --brand-ink: #0E1014; --accent: #E07A65; --success: #7BC79A; --warning: #E6B056; --border: #262A33; --focus: #7DA3FF; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* ===================================================================== Elementor Globals -> Foro design tokens Lets widgets that reference Global Colors auto-swap on data-theme=dark ===================================================================== */ :root { /* System colors */ --e-global-color-primary: var(--brand); --e-global-color-secondary: var(--accent); --e-global-color-text: var(--ink); --e-global-color-accent: var(--success); /* Custom colors */ --e-global-color-foro_bg: var(--bg); --e-global-color-foro_surface: var(--surface); --e-global-color-foro_surface_2: var(--surface-2); --e-global-color-foro_ink_strong: var(--ink-strong); --e-global-color-foro_ink_muted: var(--ink-muted); --e-global-color-foro_brand_ink: var(--brand-ink); --e-global-color-foro_warning: var(--warning); --e-global-color-foro_border: var(--border); } /* Elementor renders typography globals via classes too - we keep its font-family but make sure h1-h6 still inherit our display/body families when no Global is assigned. */ .elementor-widget-heading h1.elementor-heading-title, .elementor-widget-heading h2.elementor-heading-title, .elementor-widget-heading h3.elementor-heading-title { font-family: var(--f-display); } .elementor-widget-heading h4.elementor-heading-title, .elementor-widget-heading h5.elementor-heading-title, .elementor-widget-heading h6.elementor-heading-title { font-family: var(--f-body); } /* Hello Elementor wrapper integration Until Elementor Theme Builder header/footer templates exist, Hello renders its default chrome. Force its bg/text to follow our design tokens so dark mode is readable. */ .site-header, .site-footer { background: var(--surface); color: var(--ink); border-color: var(--border); } .site-header a, .site-footer a { color: var(--ink); } .site-header a:hover, .site-footer a:hover { color: var(--brand); } .site-header .site-title, .site-header .site-description, .site-footer .copyright { color: var(--ink); } .site-header { border-bottom: 1px solid var(--border); } .site-footer { border-top: 1px solid var(--border); } .site-content { background: var(--bg); color: var(--ink); min-height: 60vh; } .page-content { max-width: none; margin: 0; padding: 0; color: var(--ink); } .entry-title { color: var(--ink-strong); } body { background: var(--bg) !important; color: var(--ink); } /* Theme transitions — gentle */ html { transition: background-color var(--dur) var(--ease); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--bg); font-feature-settings: "ss01", "cv11"; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } button { font-family: inherit; } /* Headings */ h1, h2, h3 { font-family: var(--f-display); color: var(--ink-strong); margin: 0; font-weight: 600; } h1 { font-weight: 900; font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; } h2 { font-size: clamp(1.875rem, 2.5vw + 1rem, 3rem); line-height: 1.1; letter-spacing: -0.015em; } h3 { font-size: clamp(1.25rem, 1.2vw + 1rem, 1.875rem); line-height: 1.2; letter-spacing: -0.01em; } h4 { font-family: var(--f-body); font-weight: 700; font-size: 1.25rem; line-height: 1.3; margin: 0; color: var(--ink-strong); } p { margin: 0; } /* Utility */ .container { width: 100%; max-width: var(--c-content); margin: 0 auto; padding: 0 1.5rem; } .container-wide { max-width: var(--c-wide); } .container-narrow { max-width: var(--c-narrow); } .hairline { border: 0; border-top: 1px solid var(--border); margin: 0; } .muted { color: var(--ink-muted); } .mono { font-family: var(--f-mono); } .tabular { font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--f-body); text-transform: uppercase; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--ink-muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 40px; padding: 0 1.25rem; border-radius: var(--r-pill); border: 1px solid transparent; font-family: var(--f-body); font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; text-decoration: none !important; } .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .btn-lg { height: 48px; padding: 0 1.5rem; font-size: 1rem; } .btn-primary { background: var(--brand); color: var(--brand-ink); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); } .btn-ghost:hover { background: var(--surface); border-color: var(--ink-muted); } .btn-accent { background: var(--accent); color: white; } .btn-link { background: transparent; color: var(--brand); padding: 0; height: auto; } /* Inputs */ .input { display: block; width: 100%; height: 48px; padding: 0 1rem; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: var(--r-sm); font-family: var(--f-body); font-size: 1rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); } .input::placeholder { color: var(--ink-muted); } .label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--ink); margin-bottom: 0.375rem; } /* Pills / chips */ .pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; line-height: 1; letter-spacing: 0.01em; } .pill-outline { border: 1px solid var(--accent); color: var(--accent); background: transparent; } .pill-brand { background: color-mix(in oklab, var(--brand) 12%, transparent); color: var(--brand); } .pill-accent { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); } .pill-success { background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); } .pill-warning { background: color-mix(in oklab, var(--warning) 14%, transparent); color: var(--warning); } .pill-muted { background: var(--surface-2); color: var(--ink-muted); } .pill-solid-brand { background: var(--brand); color: var(--brand-ink); } .pill-solid-accent { background: var(--accent); color: white; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .card-hover { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card-hover:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-md); } /* Focus */ *:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; } /* Placeholder image style */ .ph { position: relative; background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ink) 4%, transparent) 0 8px, transparent 8px 16px), var(--surface-2); color: var(--ink-muted); font-family: var(--f-mono); font-size: 0.75rem; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: var(--r-md); overflow: hidden; } /* Avatar */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: white; font-family: var(--f-display); font-weight: 600; flex-shrink: 0; line-height: 1; } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Logo */ .logo { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-display); font-weight: 900; color: var(--ink-strong); text-decoration: none; } .logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ink-strong); color: var(--bg); font-family: var(--f-display); font-weight: 900; font-size: 18px; letter-spacing: -0.04em; line-height: 1; } .logo-mark::after { content: "."; color: var(--accent); margin-left: 1px; } .logo-word { font-size: 1.125rem; letter-spacing: -0.025em; line-height: 1; } .logo-word span { color: var(--ink-muted); font-weight: 400; } /* Decorative big F */ .big-f { font-family: var(--f-display); font-weight: 900; line-height: 0.8; color: var(--brand); opacity: 0.06; user-select: none; pointer-events: none; } /* Scrollbar gentle */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); } /* Table base */ table.ft { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } table.ft th { text-align: left; font-weight: 600; padding: 0.875rem 1rem; color: var(--ink-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); } table.ft td { padding: 1rem; border-bottom: 1px solid var(--border); } table.ft tr:last-child td { border-bottom: 0; } /* Headers nav underline */ .nav-link { position: relative; color: var(--ink); font-weight: 500; font-size: 0.9375rem; padding: 0.5rem 0; cursor: pointer; transition: color var(--dur) var(--ease); background: none; border: 0; font-family: inherit; } .nav-link:hover { color: var(--ink-strong); } .nav-link.active { color: var(--ink-strong); } .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--brand); border-radius: 2px; } /* Sections / bands */ .band { padding: 5rem 0; } .band-sm { padding: 3rem 0; } .band-surface-2 { background: var(--surface-2); } /* Tag dot */ .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; flex-shrink: 0; } /* Body / app wrapper transitions when route changes */ @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .route-fade { animation: fade-in 240ms var(--ease); } /* Mobile drawer */ .drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 80; } /* Hide on small */ @media (max-width: 900px) { .hide-mobile { display: none !important; } } @media (min-width: 901px) { .show-mobile { display: none !important; } } /* ===================================================================== Foro.Today header ===================================================================== */ .ft-header { position: sticky; top: 0; z-index: 60; background: color-mix(in oklab, var(--surface) 84%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border); transition: all var(--dur) var(--ease); } .ft-header__inner { width: 100%; max-width: var(--c-wide); margin: 0 auto; padding: 0 1.5rem; height: 80px; display: flex; align-items: center; gap: 1.5rem; } .ft-header.is-scrolled .ft-header__inner { height: 64px; } .ft-header__right { margin-left: auto; display: flex; align-items: center; gap: .5rem; } .ft-header__tools-desktop { display: flex; align-items: center; gap: .5rem; } .ft-themetoggle { color: var(--ink-strong) !important; border-color: var(--border) !important; background: var(--surface) !important; width: 36px !important; height: 36px !important; flex-shrink: 0; } .ft-themetoggle svg { display: inline-block !important; width: 18px !important; height: 18px !important; min-width: 18px; stroke: currentColor; flex-shrink: 0; } .ft-iconbtn svg { width: 16px; height: 16px; min-width: 16px; flex-shrink: 0; } .ft-nav__list { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .ft-nav__item { display: inline-flex; } .ft-iconbtn { width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; text-decoration: none !important; } .ft-iconbtn:hover { border-color: var(--ink-muted); } .ft-iconbtn--accent { color: var(--accent); border-color: var(--accent); } .ft-themetoggle .ft-icon-moon { display: none !important; } .ft-themetoggle .ft-icon-sun { display: inline-block !important; } :root[data-theme="dark"] .ft-themetoggle .ft-icon-sun { display: none !important; } :root[data-theme="dark"] .ft-themetoggle .ft-icon-moon { display: inline-block !important; } .ft-cart__badge { position: absolute; top: -4px; right: -4px; background: var(--accent); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--surface); } /* Switches (lang/currency text dropdowns) */ .ft-switch { position: relative; } .ft-switch__btn { height: 36px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font-family: var(--f-body); font-size: .8125rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .375rem; } .ft-switch__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 120px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: .25rem; z-index: 50; display: flex; flex-direction: column; gap: 2px; } .ft-switch__menu button { text-align: left; padding: .5rem .625rem; border: 0; background: transparent; color: var(--ink); font-family: var(--f-body); font-size: .875rem; cursor: pointer; border-radius: 6px; font-weight: 500; } .ft-switch__menu button:hover { background: var(--surface-2); } /* WooCommerce currency switcher (CURCY) - inherit dropdown styles */ .ft-currency .woocs_flag_view_item, .ft-currency .woocs_switcher { font-family: var(--f-body); font-size: .8125rem; color: var(--ink); } /* Account dropdown */ .ft-account { position: relative; } .ft-account__btn { background: transparent; border: 0; padding: 0; cursor: pointer; display: inline-flex; } .ft-avatar { border-radius: 999px; } .ft-account__menu { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: .5rem; z-index: 50; display: flex; flex-direction: column; gap: 2px; } .ft-account__menu a, .ft-account__logout { display: block; padding: .5rem .625rem; color: var(--ink); font-family: var(--f-body); font-size: .875rem; font-weight: 500; border-radius: 6px; text-decoration: none !important; } .ft-account__menu a:hover { background: var(--surface-2); } .ft-account__header { display: flex; gap: .625rem; align-items: center; padding: .5rem .625rem; border-bottom: 1px solid var(--border); margin-bottom: .25rem; } .ft-account__name { font-weight: 600; font-size: .875rem; color: var(--ink-strong); } .ft-account__tier { font-size: .75rem; } .ft-account__divider { border-top: 1px solid var(--border); margin-top: .25rem; padding-top: .25rem; } .ft-account__logout { color: var(--accent); } /* Mobile drawer */ .ft-drawer { position: fixed; inset: 0; z-index: 90; } .ft-drawer__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .4); } .ft-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; max-width: 90vw; background: var(--surface); border-left: 1px solid var(--border); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .ft-drawer__top { display: flex; justify-content: space-between; align-items: center; } .ft-drawer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; } .ft-drawer__nav li { display: block; } .ft-drawer__nav a { display: block; padding: .875rem .5rem; color: var(--ink); font-weight: 600; font-size: 1rem; border-radius: 6px; text-decoration: none !important; } .ft-drawer__nav .current-menu-item a { color: var(--brand); } .ft-drawer__bottom { margin-top: auto; } /* ===================================================================== Foro.Today footer ===================================================================== */ .ft-footer { background: var(--surface-2); border-top: 1px solid var(--border); padding: 4rem 0 2rem; color: var(--ink); } .ft-footer__grid { width: 100%; max-width: var(--c-wide); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; } @media (max-width: 900px) { .ft-footer__grid { grid-template-columns: 1fr; gap: 1.5rem; } } .ft-footer__col h6.eyebrow { margin: 0 0 .75rem; color: var(--ink-strong); } .ft-footer__mission { margin: .75rem 0 1rem; max-width: 28ch; font-size: .9375rem; } .ft-footer__social { display: flex; gap: .5rem; } .ft-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; } .ft-footer__list a { color: var(--ink); font-size: .9375rem; text-decoration: none !important; } .ft-footer__list a:hover { color: var(--brand); } .ft-footer__bottom { width: 100%; max-width: var(--c-wide); margin: 2rem auto 0; padding: 1.25rem 1.5rem 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } /* ===================================================================== Home ===================================================================== */ .ft-hero { padding: 4rem 0 5rem; position: relative; overflow: hidden; } .ft-hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center; } @media (max-width: 900px) { .ft-hero__grid { grid-template-columns: 1fr; gap: 3rem; } } .ft-hero__copy { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; } .ft-hero__lede { font-size: 1.125rem; max-width: 38ch; } .ft-hero__ctas { display: flex; gap: .75rem; flex-wrap: wrap; } .ft-hero__trust { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .5rem; } .ft-trust-item { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 500; color: var(--accent); } .ft-hero__visual { position: relative; isolation: isolate; min-height: 360px; } .ft-hero__visual .big-f { position: absolute; right: -2rem; top: -3rem; font-size: clamp(280px, 36vw, 480px); z-index: -1; color: var(--brand); } .ft-membercard { padding: 1.25rem; border-radius: var(--r-lg); box-shadow: var(--shadow-md); transform: rotate(-1.5deg); max-width: 380px; margin-left: auto; } .ft-membercard__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .875rem; } .ft-membercard__who { min-width: 0; flex: 1; } .ft-membercard__name { font-weight: 700; color: var(--ink-strong); font-size: .9375rem; line-height: 1.2; } .ft-membercard__role { font-size: .8125rem; } .ft-membercard__eyebrow { font-size: .6875rem; margin-bottom: .5rem; } .ft-membercard__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .ft-membercard__list li { font-size: .875rem; display: flex; gap: .5rem; line-height: 1.4; } .ft-membercard__list .dot { margin-top: 7px; } .ft-membercard__meta { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: var(--ink-muted); } .ft-floatcard { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; padding: .625rem .875rem; border-radius: var(--r-pill); box-shadow: var(--shadow-md); background: var(--surface); position: absolute; z-index: 1; } .ft-floatcard--bl { left: -1rem; bottom: -1rem; } .ft-floatcard--tr { right: -.5rem; top: 30%; transform: rotate(3deg); font-size: .75rem; padding: .5rem .75rem; } /* Manifesto */ .ft-manifesto { text-align: left; } .ft-manifesto .container-narrow { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; } .ft-manifesto h2 { font-style: italic; } .ft-manifesto p { font-size: 1.125rem; line-height: 1.6; max-width: 36ch; } /* Stats */ .ft-stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } @media (max-width: 900px) { .ft-stats__grid { grid-template-columns: repeat(2, 1fr); } } .ft-stat { text-align: center; padding: 1rem .5rem; } .ft-stat__num { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 3vw + 1rem, 3rem); color: var(--ink-strong); line-height: 1; margin-bottom: .375rem; } .ft-stat__label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; } /* Pillars */ .ft-pillars__head { display: flex; flex-direction: column; gap: .5rem; max-width: 36ch; margin-bottom: 2rem; } .ft-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 900px) { .ft-pillars__grid { grid-template-columns: 1fr; } } .ft-pillar { padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; } .ft-pillar__icon { width: 44px; height: 44px; border-radius: var(--r-md); background: color-mix(in oklab, var(--brand) 12%, transparent); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; } .ft-pillar__title { font-size: 1.25rem; } .ft-pillar__desc { font-size: .9375rem; } /* Featured products */ .ft-featured__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .ft-featured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 900px) { .ft-featured__grid { grid-template-columns: 1fr; } } .ft-prodcard { display: flex; flex-direction: column; overflow: hidden; text-decoration: none !important; color: inherit; } .ft-prodcard__media { aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; } .ft-prodcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); } .ft-prodcard:hover .ft-prodcard__media img { transform: scale(1.03); } .ft-prodcard__body { padding: 1rem 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .375rem; } .ft-prodcard__title { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--ink-strong); margin: 0; } .ft-prodcard__price { color: var(--brand); font-weight: 700; } .ft-prodcard__price del { color: var(--ink-muted); margin-right: .375rem; } .ft-prodcard__price ins { background: none; color: var(--accent); text-decoration: none; } /* Telegram CTA */ .ft-tgcta { background: var(--accent); color: var(--brand-ink); text-align: center; } .ft-tgcta h2 { color: #fff; } .ft-tgcta p { color: rgba(255,255,255,.86); margin: .75rem 0 1.5rem; } .ft-tgcta .btn { background: var(--surface); color: var(--ink-strong); } /* Login band */ .ft-loginband { padding: 4rem 0; } .ft-loginband .container-narrow { display: flex; flex-direction: column; gap: 1rem; } .ft-login { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .ft-login__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; } .ft-login__remember { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: var(--ink); } /* ===================================================================== Auth pages ===================================================================== */ .ft-auth { padding: 4rem 1.5rem; display: flex; justify-content: center; } .ft-authcard { width: 100%; max-width: 420px; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; box-shadow: var(--shadow-md); } .ft-authcard__logo { align-self: flex-start; } .ft-form { display: flex; flex-direction: column; gap: 1rem; } .ft-checkbox { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; } .ft-authcard__footer { display: flex; gap: .5rem; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .875rem; } .ft-authcard__micro { font-size: .75rem; text-align: center; margin: 0; } /* ===================================================================== Account dashboard ===================================================================== */ .ft-account-dash { padding: 3rem 0; max-width: var(--c-wide); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } .ft-dash-hello { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .ft-dash-hello__avatar { border-radius: 999px; } .ft-dash-hello__copy { flex: 1; } .ft-dash-hello h1 { font-size: 1.875rem; margin: 0; } .ft-dash-hello .pill { margin-top: .25rem; } .ft-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; } @media (max-width: 900px) { .ft-dash-kpis { grid-template-columns: repeat(2, 1fr); } } .ft-kpi { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; } .ft-kpi__num { font-family: var(--f-display); font-weight: 900; font-size: 1.875rem; line-height: 1; color: var(--ink-strong); } .ft-dash-grid { display: grid; grid-template-columns: 9fr 3fr; gap: 1.5rem; } @media (max-width: 1024px) { .ft-dash-grid { grid-template-columns: 1fr; } } .ft-dash-main { padding: 1.5rem; } .ft-dash-aside { display: flex; flex-direction: column; gap: 1rem; } .ft-dash-aside__quick, .ft-dash-aside__help { padding: 1.25rem; } .ft-dash-aside__quick ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; font-size: .9375rem; } .ft-dash-aside__quick a { color: var(--ink); } .ft-dash-aside__logout { color: var(--accent) !important; } .ft-dash-aside__help .btn { margin-top: .5rem; width: 100%; } /* ===================================================================== Help / docs ===================================================================== */ .ft-help-hero { padding: 4rem 0 2rem; text-align: left; } .ft-help-hero .container-narrow { display: flex; flex-direction: column; gap: 1rem; } .ft-help-search { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .25rem .25rem .25rem 1rem; color: var(--ink-muted); } .ft-help-search .input { border: 0; height: 48px; background: transparent; padding-left: .5rem; } .ft-help-search .input:focus { box-shadow: none; } .ft-help-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 900px) { .ft-help-cats__grid { grid-template-columns: 1fr; } } .ft-help-cat { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; } .ft-help-cat__list { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; } .ft-help-popular__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; } @media (max-width: 768px) { .ft-help-popular__list { grid-template-columns: 1fr; } } .ft-help-popular__list a { color: var(--ink); padding: .75rem 0; border-bottom: 1px solid var(--border); display: block; } .ft-help-contact__card { padding: 2rem; text-align: center; display: flex; flex-direction: column; gap: 1rem; align-items: center; } /* ===================================================================== Archivo (forum listing) ===================================================================== */ .ft-archivo { padding: 3rem 0; } .ft-archivo__head { margin-bottom: 2rem; display: flex; flex-direction: column; gap: .25rem; } .ft-archivo__gate { padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; border-color: var(--accent); } .ft-archivo__gate-ctas { display: flex; gap: .5rem; } .ft-archivo__list { display: flex; flex-direction: column; gap: .75rem; } .ft-thread { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .375rem; } .ft-thread__row1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .ft-thread__title { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; color: var(--ink-strong); text-decoration: none !important; } .ft-thread__tags { display: flex; gap: .25rem; } .ft-thread__row2 { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; } .ft-thread__avatar { border-radius: 999px; } .ft-archivo__pager { margin-top: 2rem; display: flex; justify-content: center; gap: .25rem; } .ft-archivo__pager .page-numbers { padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; } .ft-archivo__pager .page-numbers.current { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } /* ===================================================================== WooCommerce overrides ===================================================================== */ .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .price { color: var(--ink); } .woocommerce ul.products li.product .price { color: var(--brand); font-weight: 700; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--f-display); font-weight: 600; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--brand); color: var(--brand-ink); border-radius: var(--r-pill); padding: .625rem 1.25rem; font-family: var(--f-body); font-weight: 600; } .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--brand); color: var(--brand-ink); } .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error { background: var(--surface); border-left: 3px solid var(--brand); color: var(--ink); } .woocommerce-notices-wrapper .woocommerce-message { border-left-color: var(--success); } .woocommerce-notices-wrapper .woocommerce-error { border-left-color: var(--accent); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-page form .form-row input.input-text { background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-radius: var(--r-sm); padding: .625rem .875rem; } .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; } .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--border); } .woocommerce-MyAccount-navigation ul li a { display: block; padding: .75rem .25rem; color: var(--ink); font-weight: 500; } .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { color: var(--brand); } /* WC product single */ .product .summary { background: var(--surface); padding: 1rem; border-radius: var(--r-md); border: 1px solid var(--border); } .product .summary .price { color: var(--brand); font-weight: 700; } .product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--border); } .product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; padding: .5rem 1rem !important; border-radius: 0 !important; } .product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--brand) !important; color: var(--brand); } .product .related ul.products { gap: 1rem; } /* ===================================================================== BuddyPress overrides ===================================================================== */ #buddypress .activity-list li, #buddypress .members li, #buddypress .groups li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; margin-bottom: .75rem; } #buddypress .item-list-tabs ul { display: flex; gap: .25rem; list-style: none; padding: 0; border-bottom: 1px solid var(--border); } #buddypress .item-list-tabs ul li a { padding: .5rem 1rem; color: var(--ink); border-radius: var(--r-sm) var(--r-sm) 0 0; } #buddypress .item-list-tabs ul li.selected a, #buddypress .item-list-tabs ul li.current a { background: var(--surface); color: var(--brand); border-bottom: 2px solid var(--brand); } #buddypress .button, #buddypress button, #buddypress input[type="submit"], #buddypress a.button { background: var(--brand); color: var(--brand-ink); border: 0; padding: .5rem 1rem; border-radius: var(--r-pill); } #buddypress .activity-content .activity-header { color: var(--ink-muted); font-size: .875rem; } /* ===================================================================== BetterDocs overrides ===================================================================== */ .betterdocs-single-content, .betterdocs-categories-list-wrap, .betterdocs-archive-content { font-family: var(--f-body); color: var(--ink); } .betterdocs-single-content h1, .betterdocs-single-content h2, .betterdocs-single-content h3 { font-family: var(--f-display); color: var(--ink-strong); } .betterdocs-single-content pre, .betterdocs-single-content code { font-family: var(--f-mono); background: var(--surface-2); border-radius: var(--r-sm); padding: .125rem .375rem; } .betterdocs-single-content pre { padding: 1rem; overflow-x: auto; } .betterdocs-categories-list-wrap .docs-cat-list-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.25rem; } .betterdocs-categories-list-wrap .docs-cat-list-item .docs-cat-list-title a { color: var(--ink-strong); font-family: var(--f-display); } /* ===================================================================== Support Genix overrides ===================================================================== */ .sg-ticket-form, .sg-ticket-list { font-family: var(--f-body); } .sg-ticket-form .form-control { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink); } .sg-ticket-form .btn-primary, .sg-ticket-list .btn-primary { background: var(--brand); border-color: var(--brand); border-radius: var(--r-pill); } .sg-ticket-list table { border-collapse: collapse; } .sg-ticket-list table th, .sg-ticket-list table td { border-bottom: 1px solid var(--border); padding: .75rem .5rem; }