/* ========================================================================== Memberius — Unified theme -------------------------------------------------------------------------- Spojeno iz: landing-editorial.css + tenant-editorial.css + korisnici.css + memberius_blue_theme.css (admin scope kroz body.memberius-app-body). Pretpostavlja design-tokens.css ucitan PRIJE. ========================================================================== */ /* === landing-editorial.css === */ /* ────────────────────────────────────────────────────────────── landing-editorial.css — Memberius landing page (v4) Locked direction: Plava + Pristojno + Studio + Editorial Calm Self-contained (no Bootstrap dependency). Tokens + components. ────────────────────────────────────────────────────────────── */ /* ======================================================== 1 · TOKENS — Plava paleta (Light, default) ======================================================== */ :root { /* Ink — aliased to shared brand tokens */ --ink-900: var(--brand-ink-900); --ink-700: var(--brand-ink-700); --ink-500: var(--brand-ink-500); --ink-300: var(--brand-ink-300); --ink-200: var(--brand-ink-200); --ink-100: var(--brand-ink-100); /* Surfaces */ --paper: var(--brand-paper); --paper-2: var(--brand-sub); --card: var(--brand-paper); /* Primary */ --primary-900: var(--brand-primary-900); --primary-700: var(--brand-primary-700); --primary-600: var(--brand-primary-600); --primary-500: var(--brand-primary-500); --primary-400: var(--brand-primary-400); --primary-200: var(--brand-primary-200); --primary-100: var(--brand-primary-100); --primary-50: var(--brand-primary-50); /* Secondary */ --secondary-700: var(--brand-secondary-700); --secondary-500: var(--brand-secondary-500); --secondary-200: var(--brand-secondary-200); --secondary-100: var(--brand-secondary-100); /* Status (foreground + tint pair) */ --success-500: var(--brand-success); --success-100: var(--brand-success-bg); --warn-500: var(--brand-warn); --warn-100: var(--brand-warn-bg); --danger-500: var(--brand-danger); --danger-100: var(--brand-danger-bg); --info-500: var(--brand-info); --info-100: var(--brand-info-bg); /* Radius — landing scale mapira na brand scale (xs→sm, sm→md, md→lg, lg→xl, xl→2xl) */ --radius-xs: var(--brand-radius-sm); --radius-sm: var(--brand-radius-md); --radius-md: var(--brand-radius-lg); --radius-lg: var(--brand-radius-xl); --radius-xl: var(--brand-radius-2xl); --radius-pill: var(--brand-radius-pill); /* Shadow */ --shadow-sm: var(--brand-shadow-sm); --shadow-md: var(--brand-shadow-md); --shadow-lg: var(--brand-shadow-lg); --shadow-card: var(--brand-shadow-card); /* Typography */ --font-display: var(--brand-font-display); --font-body: var(--brand-font-body); --font-mono: var(--brand-font-mono); /* Landing-only layout spacing (not shared) */ --memberius-section-pad: 128px; --memberius-section-tight-pad: 88px; } /* ======================================================== 2 · DARK MODE TOKENS — toggled via [data-theme="dark"] on ======================================================== */ html[data-theme="dark"] { --paper: #0A0F26; --paper-2: #131938; --card: #1A2148; --ink-900: #F0F2FA; --ink-700: #C4C8DC; --ink-500: #898FAF; --ink-300: #5B6082; --ink-200: #3A4070; --ink-100: #232858; --primary-500: #5D77D4; --primary-700: #3D52A0; --primary-400: #7B91E0; --primary-200: #2E3F7D; --primary-100: #232858; --primary-50: #1A2148; --secondary-500: #8FA6F0; --secondary-200: #4866C6; --secondary-100: #232858; --success-100: #103a2a; --success-500: #4cc88a; --warn-100: #3a2c0e; --warn-500: #d49a3a; --danger-100: #3d1428; --danger-500: #e84a72; --info-100: #1c2658; --info-500: #6a85e8; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6); --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.7); --shadow-card: 0 0 0 .5px rgba(255,255,255,.04), 0 8px 20px -10px rgba(0,0,0,.5); } /* Smooth theme transition */ html, body, .memberius-section, .memberius-card, .memberius-feature-card, .memberius-btn, .memberius-screenshot-frame, .memberius-faq, .memberius-icon-card, .memberius-header, .memberius-step, .memberius-quote, .memberius-price-card, .memberius-footer { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ======================================================== 3 · BASELINE ======================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink-900); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } .memberius-page { background: var(--paper); color: var(--ink-900); min-height: 100vh; isolation: isolate; } .memberius-container { max-width: 1216px; margin: 0 auto; padding: 0 32px; } .memberius-narrow-container{ max-width: 880px; margin: 0 auto; padding: 0 32px; } /* ======================================================== 4 · TYPOGRAPHY UTILITIES ======================================================== */ .memberius-text-display { font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -0.025em; margin: 0; } .memberius-text-h1 { font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1.05; letter-spacing: -0.020em; margin: 0; } .memberius-text-h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -0.020em; margin: 0; } .memberius-text-h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.010em; margin: 0; } .memberius-text-body { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ink-700); } .memberius-text-small { font-family: var(--font-body); font-size: 13px; color: var(--ink-500); } .memberius-text-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; } .memberius-text-mono-num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .memberius-text-eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-500); font-weight: 500; } /* ======================================================== 5 · BRAND MARK ======================================================== */ .memberius-mark { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--ink-900); } .memberius-mark-dot { display: inline-block; width: 7px; height: 7px; background: var(--primary-500); border-radius: 50%; transform: translateY(-3px); margin: 0 1px; } /* ======================================================== 6 · BUTTONS -------------------------------------------------------- Moved to memberius-buttons.css (unified across admin + landing). .ic helper kept for icon sizing inside button content. ======================================================== */ .memberius-btn-icon { width: 16px; height: 16px; flex-shrink: 0; } /* ======================================================== 7 · HEADER / NAV ======================================================== */ .memberius-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: .5px solid var(--ink-200); } .memberius-header-inner { display: flex; align-items: center; gap: 28px; max-width: 1280px; margin: 0 auto; padding: 14px 32px; min-height: 72px; } .memberius-brand { display: inline-flex; align-items: center; text-decoration: none; max-width: 320px; } .memberius-brand img { height: 32px; width: auto; display: block; } html[data-theme="dark"] .memberius-brand img { filter: brightness(0) invert(1); } .memberius-brand-text { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .memberius-footer-logo { height: 36px; width: auto; display: block; margin-bottom: 16px; } html[data-theme="dark"] .memberius-footer-logo { filter: brightness(0) invert(1); } .memberius-header-nav { display: flex; gap: 2px; flex: 1; } .memberius-header-nav a { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink-700); padding: 8px 14px; border-radius: var(--radius-sm); text-decoration: none; transition: color .12s, background .12s; } .memberius-header-nav a:hover { color: var(--primary-500); background: var(--ink-100); } .memberius-header-nav a.active { color: var(--ink-900); } .memberius-header-actions { display: flex; align-items: center; gap: 8px; } /* .memberius-theme-toggle moved to memberius-buttons.css */ /* Hamburger */ .memberius-nav-toggle { display: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--ink-200); background: transparent; color: var(--ink-700); cursor: pointer; align-items: center; justify-content: center; } .memberius-nav-toggle svg { width: 18px; height: 18px; } /* Mobile drawer — overlays Bootstrap .offcanvas + .offcanvas-end */ .memberius-drawer { width: min(360px, 90vw); background: var(--paper); border-left: .5px solid var(--ink-200); box-shadow: -16px 0 48px -16px rgba(15,21,53,.18); transition: transform .24s ease; padding: 24px; } .memberius-drawer-close { align-self: flex-end; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--ink-200); background: transparent; color: var(--ink-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .memberius-drawer nav { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; } .memberius-drawer nav a { font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--ink-900); padding: 12px 14px; border-radius: var(--radius-md); border-bottom: .5px solid var(--ink-100); } .memberius-drawer nav a:hover { background: var(--paper-2); } .memberius-drawer-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } /* ======================================================== 8 · SECTION CONTAINER ======================================================== */ .memberius-section { padding: var(--memberius-section-pad) 0; position: relative; } .memberius-section-tight { padding: var(--memberius-section-tight-pad) 0; position: relative; } .memberius-section::before, .memberius-section-tight::before, .memberius-cta-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(80%, 1200px); height: 1px; background: linear-gradient(to right, transparent 10%, var(--ink-200) 35%, var(--ink-200) 65%, transparent 90%); } .memberius-section-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-500); font-weight: 500; margin: 0 0 18px; } .memberius-section-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--primary-500); } .memberius-section-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 14px; text-wrap: balance; } .memberius-section-lead { font-size: 17px; line-height: 1.55; color: var(--ink-500); max-width: 620px; margin: 0; text-wrap: pretty; } /* ======================================================== 9 · HERO — Editorial Calm ======================================================== */ .memberius-hero { min-height: 75vh; padding: 64px 32px; text-align: center; position: relative; overflow: hidden; background: var(--primary-100); display: flex; flex-direction: column; align-items: center; justify-content: center; } .memberius-hero::after { content: ""; position: absolute; pointer-events: none; left: 50%; top: 50%; width: min(720px, 70vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: url("/images/logo_sq.png") no-repeat center / contain; opacity: .12; z-index: 0; } html[data-theme="dark"] .memberius-hero::after { opacity: .14; filter: brightness(1.4); } .memberius-hero > * { position: relative; z-index: 1; } .memberius-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-500); padding: 6px 14px; border: .5px solid var(--ink-200); border-radius: 999px; background: color-mix(in oklab, var(--paper) 50%, var(--card)); } .memberius-hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-500); animation: memberius-pulse 2.4s ease-in-out infinite; } @keyframes memberius-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } } .memberius-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink-900); margin: 28px auto 24px; max-width: 1080px; text-wrap: balance; } .memberius-hero-title-accent { color: var(--primary-500); font-style: italic; font-weight: 500; } .memberius-hero-lead { font-size: 19px; line-height: 1.55; color: var(--ink-500); max-width: 620px; margin: 0 auto 36px; text-wrap: pretty; } /* .memberius-hero-actions replaced by Bootstrap utility (d-flex gap-3 justify-content-center flex-wrap) */ .memberius-hero-trust { display: flex; gap: 32px; justify-content: center; margin-top: 56px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.1em; } .memberius-hero-trust span { display: inline-flex; align-items: center; gap: 8px; } .memberius-hero-trust svg { width: 14px; height: 14px; color: var(--primary-500); flex-shrink: 0; } /* ======================================================== 10 · LOGO STRIP ======================================================== */ .memberius-logos-wrap { background: var(--paper-2); border-top: .5px solid var(--ink-200); border-bottom: .5px solid var(--ink-200); padding: 48px 0; overflow: hidden; } .memberius-logos-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--ink-700); text-align: center; margin: 0 0 32px; } .memberius-logos-marquee { --memberius-logo-item-step: 304px; --memberius-logo-cycle: calc(var(--memberius-logo-item-step) * 6); position: relative; width: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); } .memberius-logos-track { display: flex; width: max-content; animation: memberius-logos-scroll 40s linear infinite; } .memberius-logos-marquee:hover .memberius-logos-track { animation-play-state: paused; } .memberius-logo-item { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 0 0 auto; width: 280px; margin-right: 24px; opacity: .85; transition: opacity .15s ease; } .memberius-logo-item:hover { opacity: 1; } .memberius-logo-circle { width: 120px; height: 120px; border-radius: 999px; background: var(--paper); border: .5px solid var(--ink-200); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 40px; color: var(--ink-500); letter-spacing: -0.01em; flex-shrink: 0; } .memberius-logo-name { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--ink-700); white-space: nowrap; text-align: center; } @keyframes memberius-logos-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--memberius-logo-cycle))); } } @media (prefers-reduced-motion: reduce) { .memberius-logos-track { animation: none; } } /* ======================================================== 11 · STEPS — Pogledajte kako radi ======================================================== */ /* .memberius-steps grid replaced by Bootstrap .row .row-cols-md-3 .g-0; .memberius-step kept for cell styling */ .memberius-section .memberius-container > .row.memberius-steps-row { margin-top: 40px; border-top: .5px solid var(--ink-200); } .memberius-step { padding: 36px 28px; border-right: .5px solid var(--ink-200); border-bottom: .5px solid var(--ink-200); position: relative; } .memberius-step:nth-child(3n) { border-right: 0; } .memberius-step-num { font-family: var(--font-mono); font-size: 11px; color: var(--primary-500); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .memberius-step-num::before { content: ""; width: 16px; height: 1px; background: var(--primary-500); } .memberius-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink-900); margin: 14px 0 10px; } .memberius-step p { font-size: 15px; line-height: 1.55; color: var(--ink-500); margin: 0; } /* ======================================================== 12 · FEATURES GRID ======================================================== */ .memberius-feature-card { position: relative; padding: 0; display: flex; flex-direction: column; gap: 12px; background: none; border: 0; box-shadow: none; } /* Full-width horizontal divider — fades at left and right, except last row */ .memberius-feature-card:not(:nth-last-child(-n+3))::before { content: ''; position: absolute; left: 0; bottom: -28px; width: 100%; height: 1px; background: linear-gradient(to right, transparent 10%, var(--ink-200) 35%, var(--ink-200) 65%, transparent 90%); } .memberius-feature-card-icon { width: 52px; height: 52px; border-radius: 10px; background: var(--primary-100); display: inline-flex; align-items: center; justify-content: center; color: var(--primary-500); transition: background .15s, color .15s; } .memberius-feature-card:hover .icon-box { background: var(--primary-500); color: white; } .memberius-feature-card-icon i { font-size: 22px; line-height: 1; } .memberius-feature-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); margin: 8px 0 4px; } .memberius-feature-card p { font-size: 14px; line-height: 1.55; color: var(--ink-500); margin: 0; } /* ======================================================== 13 · SCREENSHOT GALLERY ======================================================== */ .memberius-gallery-header { text-align: center; margin-bottom: 32px; } .memberius-gallery-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 999px; margin: 24px auto 0; border: .5px solid var(--ink-200); } .memberius-gallery-tab { padding: 9px 20px; border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-500); cursor: pointer; border: none; background: transparent; transition: all .15s; } .memberius-gallery-tab.active { background: var(--ink-900); color: var(--paper); } .memberius-gallery-tab:hover:not(.active) { color: var(--ink-900); } .memberius-screenshot-frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--ink-200); background: var(--card); box-shadow: 0 24px 60px -16px rgba(15,21,53,.18); max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 10; display: flex; flex-direction: column; } html[data-theme="dark"] .memberius-screenshot-frame { box-shadow: 0 24px 60px -16px rgba(0,0,0,.4); } .memberius-screenshot-titlebar { height: 38px; background: var(--paper-2); border-bottom: .5px solid var(--ink-200); display: flex; align-items: center; gap: 6px; padding: 0 14px; flex-shrink: 0; } .memberius-screenshot-titlebar-dot { width: 10px; height: 10px; border-radius: 50%; } .memberius-screenshot-titlebar-dot.is-red { background: #ef6e63; } .memberius-screenshot-titlebar-dot.is-yellow { background: #f4be4f; } .memberius-screenshot-titlebar-dot.is-green { background: #61c454; } .memberius-screenshot-titlebar-url { margin: 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); background: var(--paper); padding: 4px 16px; border-radius: 4px; border: .5px solid var(--ink-100); } .memberius-screenshot-body { flex: 1; position: relative; background: var(--paper); overflow: hidden; } .memberius-shot-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; padding: 40px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .memberius-shot-panel.active { opacity: 1; pointer-events: auto; } .memberius-shot-panel-placeholder { width: 100%; max-width: 760px; min-height: 280px; border: .5px dashed var(--ink-200); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); letter-spacing: 0.12em; text-transform: uppercase; background: var(--paper-2); } .memberius-shot-panel-caption { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--ink-700); text-align: center; max-width: 640px; } /* ======================================================== 14 · CLUB TYPES ======================================================== */ .memberius-icon-card { position: relative; padding: 0; display: flex; align-items: flex-start; gap: 16px; cursor: default; background: none; border: 0; box-shadow: none; } /* Full-width horizontal divider — fades at left and right, except last row */ .memberius-icon-card:not(:nth-last-child(-n+3))::before { content: ''; position: absolute; left: 0; bottom: -28px; width: 100%; height: 1px; background: linear-gradient(to right, transparent 10%, var(--ink-200) 35%, var(--ink-200) 65%, transparent 90%); } .memberius-icon-card-icon { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--primary-500); } .memberius-icon-card-icon i { font-size: 24px; line-height: 1; } .memberius-icon-card-meta { display: flex; flex-direction: column; gap: 6px; } .memberius-icon-card-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink-900); letter-spacing: -0.01em; margin: 0; } .memberius-icon-card-example { font-family: var(--font-body); font-size: 13px; color: var(--ink-500); line-height: 1.5; margin: 0; } /* ======================================================== 15 · STATS STRIP ======================================================== */ /* .memberius-stats grid removed — Blade is commented out; .memberius-stat kept as cell style */ .memberius-stat { padding: 56px 24px; border-right: .5px solid var(--ink-200); text-align: left; } .memberius-stat:last-child { border-right: 0; } .memberius-stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; color: var(--primary-500); font-feature-settings: "tnum" 1; } .memberius-stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 12px; } /* ======================================================== 16 · TESTIMONIALS / RECENZIJE ======================================================== */ /* .memberius-quotes grid removed — Blade is commented out; .memberius-quote kept as cell style */ .memberius-quote { padding: 32px; border: .5px solid var(--ink-200); border-radius: 14px; background: var(--card); display: flex; flex-direction: column; gap: 20px; } .memberius-quote::before { content: "\201E"; font-family: var(--font-display); font-weight: 600; font-size: 60px; line-height: .6; color: var(--primary-500); margin-bottom: -10px; } .memberius-quote q { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink-700); flex: 1; quotes: none; } .memberius-quote q::before, .memberius-quote q::after { content: ""; } .memberius-quote-author { display: flex; align-items: center; gap: 12px; margin-top: auto; } .memberius-quote-author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-200); color: var(--primary-700); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; flex-shrink: 0; } .memberius-quote-author-meta { display: flex; flex-direction: column; gap: 2px; } .memberius-quote-author-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink-900); } .memberius-quote-author-org { font-size: 12px; color: var(--ink-500); font-family: var(--font-mono); letter-spacing: 0.04em; } /* ======================================================== 17 · PRICING ======================================================== */ /* .memberius-pricing replaced by Bootstrap .row .row-cols-md-3 + .memberius-pricing (spacing) */ .memberius-pricing { margin-top: 40px; --bs-gutter-x: 20px; --bs-gutter-y: 20px; align-items: stretch; } .memberius-price-card { background: var(--card); border: 1px solid var(--ink-200); border-radius: 16px; padding: 40px 32px; display: flex; flex-direction: column; gap: 20px; position: relative; } .memberius-price-card.featured { border: 1px solid var(--primary-500); background: color-mix(in oklab, var(--primary-500) 3%, var(--card)); box-shadow: 0 12px 32px -16px rgba(61,82,160,.32); } .memberius-price-card-tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-500); display: inline-flex; align-items: center; gap: 8px; } .memberius-price-card.featured .tag { color: var(--primary-500); } .memberius-price-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; color: var(--ink-900); margin: 0; } .memberius-price-card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .memberius-price-card-amount { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.025em; color: var(--primary-500); } .memberius-price-card-amount.small { font-size: 36px; } .memberius-price-card-unit { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; } .memberius-price-card-desc { font-size: 14px; line-height: 1.55; color: var(--ink-500); margin: 0; } .memberius-price-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .memberius-price-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-700); } .memberius-price-card li i { color: var(--primary-500); font-size: 14px; margin-top: 3px; flex-shrink: 0; } .memberius-price-card-cta { margin-top: auto; padding-top: 8px; } .memberius-price-card-cta .memberius-btn { width: 100%; justify-content: center; } /* .memberius-pricing-cta replaced by Bootstrap utility (d-flex justify-content-center mt-5) */ /* ======================================================== 18 · FAQ ======================================================== */ .memberius-faq-list { margin-top: 40px; /*border-top: .5px solid var(--ink-200);*/ /* Override Bootstrap accordion variables for memberius look */ --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; --bs-accordion-border-radius: 0; --bs-accordion-btn-bg: transparent; --bs-accordion-btn-color: var(--ink-900); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--ink-900); /*--bs-accordion-active-color: var(--primary-500);*/ --bs-accordion-btn-focus-box-shadow: none; } .memberius-faq { border: none !important; border-bottom: .5px solid var(--ink-200) !important; border-radius: 0 !important; } .memberius-faq .accordion-header { margin: 0; } .memberius-faq .accordion-button { padding: 24px 0; gap: 32px; align-items: flex-start; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; box-shadow: none; } .memberius-faq .accordion-button::after { content: "+"; font-family: var(--font-mono); font-size: 22px; font-weight: 400; color: var(--ink-500); background-image: none; width: auto; height: auto; transform: none; transition: transform .2s, color .2s; line-height: 1; flex-shrink: 0; } .memberius-faq .accordion-button:not(.collapsed)::after { content: "−"; color: var(--primary-500); transform: none; } .memberius-faq .accordion-body { padding: 0 0 24px; } .memberius-faq-answer { font-size: 15px; line-height: 1.6; color: var(--ink-500); max-width: 720px; } /* ======================================================== 19 · CTA BLOCK ======================================================== */ .memberius-cta-section { text-align: center; padding: 128px 32px; background: var(--primary-100); border-bottom: .5px solid var(--ink-200); position: relative; } .memberius-cta-section-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-500); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; } .memberius-cta-section-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--primary-500); } .memberius-cta-section h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink-900); margin: 0 auto 16px; max-width: 720px; text-wrap: balance; } .memberius-cta-section p { font-size: 17px; line-height: 1.55; color: var(--ink-500); max-width: 540px; margin: 0 auto 32px; } /* .memberius-cta-section-actions replaced by Bootstrap utility (d-flex gap-3 justify-content-center flex-wrap) */ /* ======================================================== 20 · FOOTER ======================================================== */ .memberius-footer { border-top: .5px solid var(--ink-200); background: var(--paper-2); padding: 80px 32px 32px; } .memberius-footer-inner { max-width: 1216px; margin: 0 auto; } .memberius-footer-brand { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--ink-900); margin-bottom: 12px; } .memberius-footer-brand .memberius-mark { margin-bottom: 14px; } .memberius-footer-brand p { font-size: 14px; line-height: 1.55; color: var(--ink-500); max-width: 280px; margin: 0; } .memberius-footer-col h4 { font-family: var(--font-display); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-900); margin: 0 0 14px; } .memberius-footer-col p { font-size: 14px; line-height: 1.55; color: var(--ink-500); max-width: 320px; margin: 0; } .memberius-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .memberius-footer-col a { font-size: 14px; color: var(--ink-500); display: inline-flex; align-items: center; gap: 8px; transition: color .12s; } .memberius-footer-col a:hover { color: var(--ink-900); } .memberius-footer-col a i { color: var(--primary-500); width: 14px; text-align: center; } .memberius-footer-static { font-size: 14px; color: var(--ink-500); display: inline-flex; align-items: center; gap: 8px; } .memberius-footer-static i { color: var(--primary-500); width: 14px; text-align: center; } .memberius-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; gap: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.04em; flex-wrap: wrap; } .memberius-footer-bottom a { color: var(--ink-500); } .memberius-footer-bottom a:hover { color: var(--ink-900); } .memberius-footer-bottom-meta { display: inline-flex; gap: 18px; flex-wrap: wrap; } /* ======================================================== 21 · RESPONSIVE ======================================================== */ @media (max-width: 1024px) { :root { --memberius-section-pad: 96px; --memberius-section-tight-pad: 64px; } } @media (max-width: 900px) { :root { --memberius-section-pad: 72px; --memberius-section-tight-pad: 48px; } .memberius-header-nav { display: none; } .memberius-nav-toggle { display: inline-flex; } .memberius-header-actions { margin-left: auto; } .memberius-hero { padding: 80px 24px 64px; } .memberius-hero-trust { gap: 16px; } .memberius-step, .memberius-feature-card { border-right: 0; } .memberius-stat:nth-child(2n) { border-right: 0; } .memberius-stat:nth-child(-n+2) { border-bottom: .5px solid var(--ink-200); } .memberius-icon-card { border-right: 0; } .memberius-footer-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .memberius-container, .memberius-narrow-container { padding: 0 20px; } .memberius-header-inner { padding: 12px 20px; } .memberius-hero h1 { font-size: clamp(36px, 9vw, 56px); } .memberius-section-title { font-size: clamp(26px, 7vw, 34px); } .memberius-stat { border-right: 0; border-bottom: .5px solid var(--ink-200); padding: 36px 20px; } .memberius-stat:last-child { border-bottom: 0; } } /* ======================================================== 22 · UTILITY ======================================================== */ .memberius-hr { border: 0; height: .5px; background: var(--ink-200); margin: 0; } .memberius-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; } /* ======================================================== 23 · LEGAL PAGES (Uvjeti, Privatnost, GDPR, Kolačići) ======================================================== */ .memberius-document { padding: 72px 32px 96px; background: var(--paper); } .memberius-narrow-container { max-width: 820px; margin: 0 auto; } .memberius-document-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-500); transition: color .12s; } .memberius-document-back:hover { color: var(--primary-500); } .memberius-document-back i { font-size: 11px; } .memberius-document-draft { display: flex; align-items: flex-start; gap: 10px; margin: 28px 0 0; padding: 14px 18px; border-radius: var(--radius-md); background: var(--warn-100); border: .5px solid var(--warn-500); color: var(--warn-500); font-size: 13px; line-height: 1.5; } .memberius-document-draft i { margin-top: 2px; flex-shrink: 0; } .memberius-document-header { margin-top: 40px; padding-bottom: 28px; border-bottom: .5px solid var(--ink-200); } .memberius-document-header h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink-900); margin: 0; } .memberius-document-meta { margin: 12px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; } .memberius-document-lead { margin: 28px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-700); } .memberius-toc { margin: 36px 0; padding: 24px 28px; background: var(--paper-2); border: .5px solid var(--ink-200); border-radius: var(--radius-md); } .memberius-toc-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-500); font-weight: 500; margin: 0 0 14px; } .memberius-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; } .memberius-toc a { font-size: 14px; color: var(--ink-700); transition: color .12s; } .memberius-toc a:hover { color: var(--primary-500); } .memberius-document-section { margin-top: 44px; scroll-margin-top: 90px; } .memberius-document-section h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-900); margin: 0 0 14px; } .memberius-document-section p { font-size: 15px; line-height: 1.7; color: var(--ink-700); margin: 0 0 14px; } .memberius-document-section ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 9px; } .memberius-document-section li { font-size: 15px; line-height: 1.65; color: var(--ink-700); } .memberius-document-section a { color: var(--primary-500); text-decoration: underline; text-underline-offset: 2px; } .memberius-document-section a:hover { color: var(--primary-600); } .memberius-document-section code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: var(--ink-100); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--ink-900); } .memberius-document-related { margin-top: 56px; padding-top: 28px; border-top: .5px solid var(--ink-200); } .memberius-document-related h2 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-500); font-weight: 500; margin: 0 0 14px; } .memberius-document-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; } .memberius-document-related a { font-size: 14px; color: var(--primary-500); display: inline-flex; align-items: center; gap: 6px; transition: color .12s; } .memberius-document-related a:hover { color: var(--primary-600); } .memberius-document-wip { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 52vh; justify-content: center; gap: 8px; } .memberius-document-wip-icon { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-100); color: var(--primary-500); font-size: 28px; margin-bottom: 16px; } .memberius-document-wip h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink-900); margin: 0; } .memberius-document-wip p { font-size: 16px; line-height: 1.6; color: var(--ink-500); max-width: 420px; margin: 8px 0 24px; } @media (max-width: 640px) { .memberius-document { padding: 48px 20px 64px; } .memberius-toc { padding: 18px 20px; } } /* ======================================================== 22 · LANDING CONTACT FORM (CTA section) Uses admin form includes (memberius-input, .row/.col-md-6, btn-memberius-primary). Only adds container alignment + alert styling on top. ======================================================== */ .memberius-cta-section .memberius-inquiry-form { max-width: 720px; margin: 12px auto 0; text-align: left; } .memberius-cta-section .memberius-inquiry-submit { display: flex; justify-content: center; margin-top: 16px; } .memberius-inquiry-form .memberius-input::placeholder { color: #838AAE; opacity: 1; } .memberius-cta-section .alert { max-width: 720px; margin: 0 auto 24px; text-align: left; } /* ======================================================== 23 · AUTH PAGES — login, choose-mode, password reset, verify Shell + form card kompozicija. Koristi se i van auth konteksta: svaka full-screen centrirana kartica s formom. ======================================================== */ .memberius-shell { /* Fills the viewport below the sticky header (header is in flow, ~72px tall). Card is exact-centered both axes; no page scroll when form fits. */ min-height: calc(100dvh - 72px); width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 20px; background: var(--paper); } .memberius-form-card { width: 100%; max-width: 440px; background: var(--card); color: var(--ink-900); border: .5px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 36px; } /* Wider variant for multi-field forms (e.g. member signup) */ .memberius-form-card-wide { max-width: 720px; } .memberius-form-card-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 28px; } .memberius-form-card-header.is-row { flex-direction: row; text-align: left; gap: 16px; align-items: center; } .memberius-form-card-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--primary-100); color: var(--primary-700); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .memberius-form-card-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--ink-900); margin: 0; } .memberius-form-card-subtitle { font-size: 14px; line-height: 1.5; color: var(--ink-500); margin: 2px 0 0; } .memberius-form-card-intro { font-size: 14px; line-height: 1.6; color: var(--ink-700); margin: 0 0 20px; } .memberius-form-card-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 24px; font-size: 13px; } .memberius-form-card-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .memberius-form-card-footer { margin-top: 24px; padding-top: 18px; border-top: .5px solid var(--ink-200); text-align: center; font-size: 13px; color: var(--ink-500); } .memberius-form-card .memberius-input-container { margin-bottom: 18px; } .memberius-form-card .form-check { display: inline-flex; align-items: center; gap: 6px; padding: 0; } .memberius-form-card .form-check-input { margin: 0; } .memberius-form-card .form-check-label { font-family: var(--font-body); font-size: 13px; color: var(--ink-700); cursor: pointer; } .memberius-password-wrapper { position: relative; } .memberius-password-wrapper .memberius-input { padding-right: 36px; } .memberius-password-toggle { position: absolute; top: 50%; right: 0; transform: translateY(-60%); background: transparent; border: 0; padding: 6px 8px; color: var(--ink-500); cursor: pointer; border-radius: var(--radius-sm); transition: color .12s, background .12s; } .memberius-password-toggle:hover, .memberius-password-toggle:focus-visible { color: var(--ink-900); background: var(--ink-100); outline: none; } .memberius-text-link { color: var(--primary-500); text-decoration: none; transition: color .12s; } .memberius-text-link:hover { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; } /* Dark mode: input/label overrides for landing/auth context. memberius-input default colors use --m-* (admin tokens) which don't have dark overrides; remap to landing tokens here. */ html[data-theme="dark"] .memberius-input { color: var(--ink-900); border-bottom-color: var(--ink-200); } html[data-theme="dark"] .memberius-input::placeholder { color: var(--ink-300); } html[data-theme="dark"] .memberius-label { color: var(--ink-500); } html[data-theme="dark"] .invalid-feedback { color: var(--danger-500); } @media (max-width: 520px) { .memberius-shell { padding: 20px 16px; } .memberius-form-card { padding: 28px 24px 24px; } } /* === tenant-editorial.css === */ /* ────────────────────────────────────────────────────────────── tenant-editorial.css — Tenant public page additions on top of landing-editorial.css (same Plava paleta + Editorial Calm tokens). Only tenant-specific pieces live here: group cards with schedules, notification cards, brand text, footer columns, flash alerts. ────────────────────────────────────────────────────────────── */ /* Scroll offset so anchors land below the sticky header */ .memberius-page section[id] { scroll-margin-top: 80px; } /* .memberius-brand* defined in landing-editorial.css (shared) */ /* ────────────────────────────────────────────────────────────── ABOUT ────────────────────────────────────────────────────────────── */ .memberius-about-body { margin-top: 24px; font-size: 16px; line-height: 1.7; color: var(--ink-700); text-wrap: pretty; } /* ────────────────────────────────────────────────────────────── GROUPS ────────────────────────────────────────────────────────────── */ .memberius-group-card { background: var(--card); border: .5px solid var(--ink-200); border-radius: var(--radius-lg); padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 14px; height: 100%; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .memberius-group-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--ink-300); } .memberius-group-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .memberius-group-card-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink-900); margin: 0; line-height: 1.3; /* Reserve 2 lines so card heads stay aligned across a row even when one name wraps. */ min-height: 2.6em; } .memberius-group-card-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; } .memberius-tag { display: inline-flex; align-items: center; padding: 4px 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-pill); background: var(--ink-100); color: var(--ink-700); white-space: nowrap; } .memberius-tag-primary { background: var(--primary-100); color: var(--primary-600); } html[data-theme="dark"] .memberius-tag-primary { /* primary-100 is dark in dark mode; primary-600 stays too dark to read. */ color: var(--primary-400); } .memberius-group-card-desc { font-size: 14px; line-height: 1.55; color: var(--ink-500); margin: 0; } .memberius-schedule-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; border-top: .5px solid var(--ink-200); padding-top: 14px; } .memberius-schedule-row { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--ink-700); align-items: center; } .memberius-schedule-day { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-500); min-width: 96px; } .memberius-schedule-time, .memberius-schedule-location { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); } .memberius-schedule-time i, .memberius-schedule-location i { font-size: 11px; color: var(--ink-300); } .memberius-group-card-leaders { display: inline-flex; align-items: center; gap: 8px; border-top: .5px solid var(--ink-200); padding-top: 12px; font-size: 13px; color: var(--ink-700); margin-top: auto; } .memberius-group-card-leaders i { color: var(--primary-500); font-size: 12px; } .memberius-leader-type { color: var(--ink-500); } /* ────────────────────────────────────────────────────────────── NOTIFICATIONS ────────────────────────────────────────────────────────────── */ .memberius-notification-list { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; } .memberius-notification-card { display: flex; gap: 16px; padding: 20px; background: var(--card); border: .5px solid var(--ink-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; } .memberius-notification-card:hover { border-color: var(--ink-300); box-shadow: var(--shadow-md); } .memberius-notification-card-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-100); color: var(--primary-500); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .memberius-notification-card-icon i { font-size: 16px; } .memberius-notification-card-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .memberius-notification-card-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--ink-900); margin: 0; line-height: 1.3; } .memberius-notification-card-text { font-size: 14px; line-height: 1.55; color: var(--ink-500); margin: 0; } .memberius-notification-card-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; } .memberius-notification-card-meta i { color: var(--ink-300); } .memberius-view-all-link { margin-top: 24px; display: flex; justify-content: center; } /* .memberius-footer* defined in landing-editorial.css (shared); grid uses auto-fit so 3/4 cols both work */ /* .memberius-alert* defined in memberius-alerts.css (shared) */ /* ────────────────────────────────────────────────────────────── RESPONSIVE ────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .memberius-footer { padding: 48px 24px 24px; } .memberius-schedule-day { min-width: 80px; } } @media (max-width: 600px) { .memberius-group-card { padding: 18px; } .memberius-notification-card { padding: 16px; gap: 12px; } .memberius-notification-card-icon { width: 36px; height: 36px; } } /* === korisnici.css === */ /* ────────────────────────────────────────────────────────────── korisnici.css — public directory (/korisnici) Reuses tokens, buttons, fonts, header from landing-editorial.css. This file only adds page-specific layout for the directory. Prefix: .k-* ────────────────────────────────────────────────────────────── */ /* ======================================================== 1 · SHARED UTILITIES ======================================================== */ .memberius-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-500); font-weight: 500; margin: 0 0 18px; } .memberius-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--primary-500); } .memberius-eyebrow-accent { color: var(--primary-500); } .memberius-eyebrow-accent::before { background: var(--primary-500); } .memberius-eyebrow-on-dark { color: rgba(255, 255, 255, .82); } .memberius-eyebrow-on-dark::before { background: rgba(255, 255, 255, .6); } .memberius-page-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink-900); margin: 0 0 16px; text-wrap: balance; } .memberius-page-title-on-dark { color: white; } .memberius-lead { font-size: 18px; line-height: 1.55; color: var(--ink-500); max-width: 640px; margin: 0; text-wrap: pretty; } /* ======================================================== 2 · BREADCRUMB ======================================================== */ .memberius-breadcrumb { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-500); margin-bottom: 28px; } .memberius-breadcrumb a { color: var(--ink-500); transition: color .12s; } .memberius-breadcrumb a:hover { color: var(--primary-500); } .memberius-breadcrumb-sep { color: var(--ink-300); } .memberius-breadcrumb-current { color: var(--ink-900); } .memberius-breadcrumb-on-dark { color: rgba(255, 255, 255, .72); } .memberius-breadcrumb-on-dark a { color: rgba(255, 255, 255, .72); } .memberius-breadcrumb-on-dark a:hover { color: white; } .memberius-breadcrumb-on-dark .memberius-breadcrumb-sep { color: rgba(255, 255, 255, .4); } .memberius-breadcrumb-on-dark .memberius-breadcrumb-current { color: white; } /* ======================================================== 3 · INFO BAR (stats + search, below hero on index) ======================================================== */ .memberius-info-bar { padding: 64px 0 24px; text-align: center; border-bottom: .5px solid var(--ink-200); } .memberius-counter-strip { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; } .memberius-counter { display: flex; flex-direction: column; align-items: center; gap: 6px; } .memberius-counter-num { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--ink-900); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .memberius-counter-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-500); } .memberius-search-pill { display: flex; align-items: center; gap: 12px; max-width: 540px; margin: 40px auto 0; padding: 14px 18px; background: var(--paper); border: .5px solid var(--ink-200); border-radius: var(--radius-pill); box-shadow: 0 8px 32px -16px rgba(15, 21, 53, .14); color: var(--ink-500); cursor: default; } .memberius-search-pill svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-500); } .memberius-search-pill-placeholder { flex: 1; text-align: left; font-size: 15px; color: var(--ink-500); } .memberius-search-pill-soon { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--primary-100); color: var(--primary-700); flex-shrink: 0; } /* ======================================================== 4 · CATEGORY CARD ======================================================== */ .memberius-category-card { display: flex; flex-direction: column; border: .5px solid var(--ink-200); border-radius: 18px; overflow: hidden; background: var(--card); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .memberius-category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-500); } .memberius-category-card-visual { height: 180px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .memberius-category-card-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 22% 28%, rgba(255, 255, 255, .18) 0%, transparent 42%), radial-gradient(circle at 78% 76%, rgba(255, 255, 255, .12) 0%, transparent 38%); pointer-events: none; } .memberius-category-card-icon { position: relative; font-size: 72px; color: white; line-height: 1; opacity: .92; } .memberius-category-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; } .memberius-category-card-meta { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-500); } .memberius-category-card-meta-sep { margin: 0 6px; color: var(--ink-300); } .memberius-category-card-name { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--ink-900); margin: 0; } .memberius-category-card-subcats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .memberius-subcat-pill { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: -0.005em; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--paper-2); border: .5px solid var(--ink-200); color: var(--ink-700); } .memberius-subcat-pill-more { background: transparent; color: var(--primary-500); border-color: color-mix(in oklab, var(--primary-500) 30%, transparent); } /* .memberius-cat-cta defined in memberius-buttons.css */ .memberius-category-card:hover .memberius-cat-cta svg { transform: translateX(4px); } /* ======================================================== 5 · FEATURED TENANTS ======================================================== */ .memberius-featured-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; border: .5px solid var(--ink-200); border-radius: 14px; background: var(--card); text-decoration: none; color: inherit; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; } .memberius-featured-card:hover { border-color: var(--primary-500); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .memberius-featured-card-disabled { cursor: default; opacity: .7; } .memberius-featured-card-disabled:hover { border-color: var(--ink-200); transform: none; box-shadow: none; } .memberius-featured-card-avatar { width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); color: white; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; } .memberius-featured-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .memberius-featured-card-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-900); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .memberius-featured-card-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-500); } .memberius-featured-card-chevron { width: 16px; height: 16px; color: var(--ink-300); transition: color .12s ease, transform .12s ease; } .memberius-featured-card:hover .memberius-featured-card-chevron { color: var(--primary-500); transform: translateX(2px); } /* ======================================================== 6 · CATEGORY HERO (gradient) ======================================================== */ .memberius-category-hero { position: relative; padding: 56px 0 72px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); color: white; overflow: hidden; } .memberius-category-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .14) 0%, transparent 38%), radial-gradient(circle at 84% 78%, rgba(255, 255, 255, .10) 0%, transparent 40%); pointer-events: none; } .memberius-category-hero > .memberius-container { position: relative; z-index: 1; } .memberius-category-hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; } .memberius-category-hero-title { display: inline-flex; align-items: center; gap: 18px; margin: 0; max-width: none; flex-wrap: wrap; } .memberius-category-hero-icon { font-size: 0.72em; color: rgba(255, 255, 255, .92); line-height: 1; flex-shrink: 0; } .memberius-category-hero-stats { display: flex; gap: 56px; flex-wrap: wrap; margin-top: 12px; } .memberius-category-hero-stats .memberius-counter-num { color: white; font-size: 36px; } .memberius-category-hero-stats .memberius-counter-label { color: rgba(255, 255, 255, .78); } /* ======================================================== 7 · SUB-GRID (category page) ======================================================== */ .memberius-subcats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; } .memberius-subcats-head .memberius-section-title { margin: 0; } .memberius-subcats-head .memberius-search-pill-compact { margin: 0; max-width: 360px; flex: 0 0 auto; } .memberius-subcategory-card { display: flex; flex-direction: column; padding: 24px; border: .5px solid var(--ink-200); border-radius: 16px; background: var(--card); text-decoration: none; color: inherit; height: 100%; transition: transform .15s ease, border-color .12s ease, box-shadow .12s ease; } .memberius-subcategory-card:hover { transform: translateY(-2px); border-color: var(--primary-500); box-shadow: var(--shadow-sm); } .memberius-subcategory-card:hover .memberius-subcategory-card-more { color: var(--primary-700); } .memberius-subcategory-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: .5px solid var(--ink-200); } .memberius-subcategory-card-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; color: var(--ink-900); margin: 0; } .memberius-subcategory-card-count { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary-700); background: var(--primary-100); padding: 4px 10px; border-radius: var(--radius-pill); } .memberius-subcategory-card-preview { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .memberius-subcategory-card-preview li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-700); } .memberius-subcategory-card-preview-avatar { width: 28px; height: 28px; border-radius: 8px; background: var(--paper-2); border: .5px solid var(--ink-200); font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink-700); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .memberius-subcategory-card-preview-name { color: var(--ink-700); } .memberius-subcategory-card-more { margin-top: auto; padding-top: 16px; border-top: .5px solid var(--ink-200); font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--primary-500); text-decoration: none; transition: color .12s ease; } .memberius-subcategory-card-more:hover { color: var(--primary-700); } /* ======================================================== 8 · SUBCATEGORY TOOLBAR (back link + filters) ======================================================== */ .memberius-subcategory-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .memberius-subcategory-toolbar-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .memberius-subcategory-toolbar-top .memberius-back { flex: 0 0 auto; } .memberius-subcategory-toolbar-top .memberius-search-pill-compact { flex: 1 1 240px; max-width: none; } /* .memberius-back defined in memberius-buttons.css */ /* ======================================================== 9 · FILTERS (search + chips) ======================================================== */ /* .memberius-filters replaced by Bootstrap utility (d-flex flex-column gap-3 mt-4) */ .memberius-search-pill-compact { max-width: 420px; margin: 0; padding: 10px 14px; box-shadow: none; } .memberius-search-pill-compact svg { width: 16px; height: 16px; } .memberius-search-pill-compact .memberius-search-pill-placeholder { font-size: 14px; } /* .memberius-chip-group replaced by Bootstrap utility (d-flex flex-wrap gap-2) */ /* .memberius-chip* defined in memberius-buttons.css */ /* ======================================================== 10 · TENANT CARD (subcategory page) ======================================================== */ .memberius-tenant-card { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 18px; padding: 20px; border: .5px solid var(--ink-200); border-radius: 16px; background: var(--card); text-decoration: none; color: inherit; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; } .memberius-tenant-card:hover { border-color: var(--primary-500); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .memberius-tenant-card-disabled { cursor: default; opacity: .7; } .memberius-tenant-card-disabled:hover { border-color: var(--ink-200); transform: none; box-shadow: none; } .memberius-tenant-card-avatar { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); color: white; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; } .memberius-tenant-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .memberius-tenant-card-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink-900); letter-spacing: -0.015em; margin: 0; } .memberius-tenant-card-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-500); } /* .memberius-tenant-cta defined in memberius-buttons.css */ .memberius-tenant-card:hover .memberius-tenant-cta { background: color-mix(in oklab, var(--primary-500) 10%, transparent); border-color: var(--primary-500); } /* ======================================================== 11 · CTA ======================================================== */ .memberius-cta-block { padding: 80px 0 96px; } .memberius-cta-block-inner { position: relative; display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: 32px; padding: 40px; border-radius: 22px; background: var(--paper-2); border: .5px solid var(--ink-200); overflow: hidden; } .memberius-cta-block-inner::before { content: ""; position: absolute; top: -120px; right: -120px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, var(--primary-500) 0%, transparent 70%); opacity: .16; pointer-events: none; } .memberius-cta-block-content { position: relative; z-index: 1; } .memberius-cta-block-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary-500); font-weight: 500; margin: 0 0 14px; } .memberius-cta-block-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 12px; text-wrap: balance; } .memberius-cta-block-lead { font-size: 16px; line-height: 1.55; color: var(--ink-500); max-width: 540px; margin: 0; text-wrap: pretty; } .memberius-cta-block-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; justify-self: end; } /* ======================================================== 12 · EMPTY STATE ======================================================== */ .memberius-empty-state { margin-top: 36px; padding: 56px 24px; border: 1px dashed var(--ink-200); border-radius: 16px; text-align: center; font-size: 15px; color: var(--ink-500); } /* ======================================================== 13 · DARK MODE adjustments ======================================================== */ html[data-theme="dark"] .memberius-category-card-visual, html[data-theme="dark"] .memberius-featured-card-avatar, html[data-theme="dark"] .memberius-tenant-card-avatar, html[data-theme="dark"] .memberius-category-hero { background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-900) 100%); } html[data-theme="dark"] .memberius-category-card, html[data-theme="dark"] .memberius-featured-card, html[data-theme="dark"] .memberius-subcategory-card, html[data-theme="dark"] .memberius-tenant-card { background: var(--card); } html[data-theme="dark"] .memberius-subcategory-card-preview-avatar { background: var(--paper-2); } html[data-theme="dark"] .memberius-cta-block-inner { background: var(--paper-2); } html[data-theme="dark"] .memberius-search-pill { background: var(--card); } /* Dark mode overrides za .memberius-back i .memberius-chip su u memberius-buttons.css */ /* ======================================================== 14 · RESPONSIVE ======================================================== */ @media (max-width: 1024px) { .memberius-cta-block-inner { grid-template-columns: 1fr; } .memberius-cta-block-actions { justify-self: start; } } @media (max-width: 720px) { .memberius-info-bar { padding: 48px 0 16px; } .memberius-counter-strip { gap: 32px; } .memberius-subcats-head .memberius-search-pill-compact { max-width: 100%; } .memberius-category-hero-title { gap: 14px; } .memberius-subcategory-toolbar-top { flex-direction: column; align-items: stretch; } .memberius-cta-block { padding: 56px 0 64px; } .memberius-cta-block-inner { padding: 28px; } } /* === memberius_blue_theme.css (admin scope) === */ /* ========================================================================== Memberius — Blue Editorial Theme (memberius_blue_theme.css) -------------------------------------------------------------------------- Drop-in zamjena za app_sport_v2.css. Bez promjene HTML-a / klasa. Inspirirano "Plavi · Editorial · Studio" handoffom (memberius-plavi- editorial.css), ali primijenjeno na postojeće Memberius / Bootstrap selektore. Sidebar i topbar ostaju tamni (varijanta A). Editorial detalji preneseni: - Pill primary CTA - Mono uppercase "eyebrow" labels - Tabularne brojke (badges, brojevi, datumi) - Indigo glow ring na fokusu i aktivnom stanju - Suptilne hairline granice umjesto chrome-a - Bricolage Grotesque (display) + Geist (body) + Geist Mono (labels/numbers) ========================================================================== */ /* -------------------------------------------------------------------------- 1. CSS VARIABLES — tokens aliased to shared design-tokens.css -------------------------------------------------------------------------- */ :root { /* === Brand colors === */ --m-primary-50: var(--brand-primary-50); --m-primary-100: var(--brand-primary-100); --m-primary-300: var(--brand-primary-300); --m-primary-500: var(--brand-primary-500); --m-primary-700: var(--brand-primary-700); --m-primary-900: var(--brand-primary-900); --m-secondary-50: var(--brand-secondary-50); --m-secondary-300: var(--brand-secondary-300); --m-secondary-500: var(--brand-secondary-500); --m-secondary-700: var(--brand-secondary-700); /* Ink */ --m-ink-900: var(--brand-ink-900); --m-ink-800: var(--brand-ink-800); --m-ink-700: var(--brand-ink-700); --m-ink-500: var(--brand-ink-500); --m-ink-300: var(--brand-ink-300); --m-ink-200: var(--brand-ink-200); --m-ink-100: var(--brand-ink-100); --m-ink-50: var(--brand-ink-50); /* Surface */ --m-paper: var(--brand-paper); --m-sub: var(--brand-sub); --m-tint: var(--brand-tint); /* Status */ --m-success: var(--brand-success); --m-success-bg: var(--brand-success-bg); --m-warn: var(--brand-warn); --m-warn-bg: var(--brand-warn-bg); --m-danger: var(--brand-danger); --m-danger-bg: var(--brand-danger-bg); --m-info: var(--brand-info); --m-info-bg: var(--brand-info-bg); /* Radii */ --m-radius-sm: var(--brand-radius-sm); --m-radius-md: var(--brand-radius-md); --m-radius-lg: var(--brand-radius-lg); --m-radius-xl: var(--brand-radius-xl); --m-radius-2xl: var(--brand-radius-2xl); --m-radius-pill: var(--brand-radius-pill); /* Shadows */ --m-shadow-sm: var(--brand-shadow-sm); --m-shadow-md: var(--brand-shadow-md); --m-shadow-lg: var(--brand-shadow-lg); --m-shadow-card: var(--brand-shadow-card); --m-shadow-ring: var(--brand-shadow-ring); /* Tipografija */ --m-font-display: var(--brand-font-display); --m-font-body: var(--brand-font-body); --m-font-mono: var(--brand-font-mono); /* === No-prefix aliases — required by shared memberius-buttons.css i memberius-alerts.css. Zrcalo onoga što landing-editorial.css već definira, da bi gumbi / alerti izgledali identično u admin / member-portal / super-admin kao i u landingu. === */ --ink-900: var(--brand-ink-900); --ink-800: var(--brand-ink-800); --ink-700: var(--brand-ink-700); --ink-500: var(--brand-ink-500); --ink-300: var(--brand-ink-300); --ink-200: var(--brand-ink-200); --ink-100: var(--brand-ink-100); --ink-50: var(--brand-ink-50); --paper: var(--brand-paper); --paper-2: var(--brand-sub); --card: var(--brand-paper); --primary-900: var(--brand-primary-900); --primary-700: var(--brand-primary-700); --primary-600: var(--brand-primary-600); --primary-500: var(--brand-primary-500); --primary-400: var(--brand-primary-400); --primary-300: var(--brand-primary-300); --primary-200: var(--brand-primary-200); --primary-100: var(--brand-primary-100); --primary-50: var(--brand-primary-50); --secondary-700: var(--brand-secondary-700); --secondary-500: var(--brand-secondary-500); --secondary-300: var(--brand-secondary-300); --secondary-200: var(--brand-secondary-200); --secondary-100: var(--brand-secondary-100); --secondary-50: var(--brand-secondary-50); --success-500: var(--brand-success); --success-100: var(--brand-success-bg); --warn-500: var(--brand-warn); --warn-100: var(--brand-warn-bg); --danger-500: var(--brand-danger); --danger-100: var(--brand-danger-bg); --info-500: var(--brand-info); --info-100: var(--brand-info-bg); --radius-xs: var(--brand-radius-sm); --radius-sm: var(--brand-radius-md); --radius-md: var(--brand-radius-lg); --radius-lg: var(--brand-radius-xl); --radius-xl: var(--brand-radius-2xl); --radius-pill: var(--brand-radius-pill); --shadow-sm: var(--brand-shadow-sm); --shadow-md: var(--brand-shadow-md); --shadow-lg: var(--brand-shadow-lg); --shadow-card: var(--brand-shadow-card); --font-display: var(--brand-font-display); --font-body: var(--brand-font-body); --font-mono: var(--brand-font-mono); /* === Back-compat mapping na postojeće --memberius-* varijable === */ --memberius-primary-color: var(--m-primary-500); --memberius-secondary-color: var(--m-secondary-500); --memberius-inverse-color: var(--m-ink-800); --memberius-inverse-light-color: var(--m-ink-700); --memberius-light-color: var(--m-ink-100); --memberius-muted-color: var(--m-ink-500); --memberius-tint-color: var(--m-tint); --memberius-background-color: var(--m-sub); --memberius-box-color: var(--m-paper); --memberius-btn-primary-border-color: var(--m-primary-500); --memberius-btn-primary-text-color: #ffffff; --memberius-border-radius: var(--m-radius-md); /* Sidebar / Topbar (taman — varijanta A) */ --memberius-sidebar-bg: #1A2236; --memberius-sidebar-width: 250px; --memberius-sidebar-hover: #243154; --memberius-sidebar-active-border: var(--m-secondary-500); --memberius-sidebar-text: #C7CCE3; --memberius-sidebar-text-hover: #FFFFFF; --memberius-sidebar-dropdown-bg: #141B2D; --memberius-topbar-bg: #1E2742; --memberius-topbar-height: 56px; --memberius-topbar-text: #DFE2EE; /* Accenti (kompatibilnost — "teal" zadržan jer ga koristi stari CSS) */ --memberius-accent-teal: var(--m-secondary-500); --memberius-accent-amber: var(--m-warn); --memberius-accent-red: var(--m-danger); --memberius-accent-blue: var(--m-info); --memberius-content-border-accent: var(--m-secondary-500); --memberius-table-header-bg: transparent; --memberius-table-hover-bg: rgba(61, 82, 160, 0.05); --memberius-table-stripe-bg: rgba(61, 82, 160, 0.025); } /* -------------------------------------------------------------------------- 2. BASE / BODY / TYPOGRAPHY -------------------------------------------------------------------------- */ body.memberius-app-body { min-height: 100vh; background-color: var(--m-sub); color: var(--m-ink-900); font-family: var(--m-font-body); font-weight: 400; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.memberius-app-body h1, body.memberius-app-body h2, body.memberius-app-body h3, body.memberius-app-body h4, body.memberius-app-body h5, body.memberius-app-body h6, body.memberius-app-body .h1, body.memberius-app-body .h2, body.memberius-app-body .h3, body.memberius-app-body .h4, body.memberius-app-body .h5, body.memberius-app-body .h6 { font-family: var(--m-font-display); font-weight: 600; color: var(--m-ink-900); letter-spacing: -0.01em; } body.memberius-app-body h1, body.memberius-app-body .h1 { font-size: 1.75rem; } body.memberius-app-body h2, body.memberius-app-body .h2 { font-size: 1.45rem; } body.memberius-app-body h3, body.memberius-app-body .h3 { font-size: 1.2rem; } body.memberius-app-body h4, body.memberius-app-body .h4 { font-size: 1.05rem; } body.memberius-app-body h5, body.memberius-app-body .h5 { font-size: 0.95rem; font-weight: 600; } body.memberius-app-body h6, body.memberius-app-body .h6 { font-size: 0.85rem; font-weight: 600; } body.memberius-app-body a { color: var(--m-primary-700); text-decoration: none; transition: color 0.15s ease; } body.memberius-app-body a:hover { color: var(--m-primary-900); } /* Admin layout — restore .memberius-btn text colors per variant. body.memberius-app-body a above has specificity (0,0,1,2) which beats the (0,0,1,0) variant rules in memberius-buttons.css and bleeds --m-primary-700 into button text. Re-declare each variant's color at (0,0,2,2) here to win the cascade. Colors match memberius-buttons.css. */ body.memberius-app-body a.memberius-btn-primary, body.memberius-app-body a.memberius-btn-primary:hover, body.memberius-app-body a.memberius-btn-secondary, body.memberius-app-body a.memberius-btn-secondary:hover, body.memberius-app-body a.memberius-btn-danger, body.memberius-app-body a.memberius-btn-danger:hover, body.memberius-app-body a.memberius-btn-success, body.memberius-app-body a.memberius-btn-success:hover, body.memberius-app-body a.memberius-btn-info, body.memberius-app-body a.memberius-btn-info:hover { color: #FFFFFF; } body.memberius-app-body a.memberius-btn-tertiary, body.memberius-app-body a.memberius-btn-tertiary:hover { color: var(--ink-900); } body.memberius-app-body a.memberius-btn-ghost { color: var(--ink-700); } body.memberius-app-body a.memberius-btn-ghost:hover { color: var(--ink-900); } body.memberius-app-body a.memberius-btn-inverse, body.memberius-app-body a.memberius-btn-inverse:hover { color: var(--primary-700); } /* Topbar profile link — wins over a.memberius-btn-ghost above at same specificity by appearing later in the cascade. Also neutralizes btn-ghost hover bg. */ body.memberius-app-body a.memberius-topbar-profile-link { color: var(--memberius-topbar-text); background: transparent; } body.memberius-app-body a.memberius-topbar-profile-link:hover { color: #ffffff; background: transparent; } body.memberius-app-body code, body.memberius-app-body kbd, body.memberius-app-body samp, body.memberius-app-body pre { font-family: var(--m-font-mono); } body.memberius-app-body ::selection { background: var(--m-primary-100); color: var(--m-ink-900); } /* Tabularne brojke svuda gdje ima brojeva po default-u */ .table-memberius td, .badge, .pagination, .col-date, time, .text-memberius { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 3. TOPBAR -------------------------------------------------------------------------- */ .memberius-topbar { display: flex !important; position: fixed; top: 0; left: 0; right: 0; height: var(--memberius-topbar-height); z-index: 1070; align-items: center; justify-content: space-between; padding: 0 22px; background-color: var(--memberius-topbar-bg); color: var(--memberius-topbar-text); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 4px 12px rgba(15, 21, 53, 0.18); } .memberius-topbar-brand { display: flex; align-items: center; gap: 10px; } .memberius-topbar-brand a { color: #ffffff; display: flex; align-items: center; gap: 10px; text-decoration: none; } .memberius-topbar-logo { height: 28px; width: auto; margin-right: 6px; } .memberius-topbar-app-name { font-family: var(--m-font-display); font-size: 1.05rem; font-weight: 600; color: #ffffff; letter-spacing: -0.005em; } .memberius-topbar-shield { font-size: 1.1rem; color: var(--m-secondary-500); margin-right: 8px; } .memberius-topbar-actions { display: flex; align-items: center; gap: 18px; } .memberius-topbar-profile-link { color: var(--memberius-topbar-text); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: color 0.15s ease; } .memberius-topbar-profile-link:hover { color: #ffffff; } .memberius-topbar-logout { background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: var(--memberius-topbar-text); padding: 5px 14px; border-radius: var(--m-radius-pill); font-family: var(--m-font-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: all 0.15s ease; } .memberius-topbar-logout:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.45); color: #ffffff; } /* Super-admin topbar */ .memberius-topbar-super { background-color: #0E1428; border-bottom: 1px solid rgba(112, 145, 230, 0.5); } /* Member topbar */ .memberius-topbar-member { background-color: var(--memberius-topbar-bg); } /* Mobile hamburger */ .memberius-topbar-toggle { background: transparent; border: none; color: inherit; font-size: 1.15rem; padding: 4px 10px; margin-right: 10px; cursor: pointer; border-radius: var(--m-radius-sm); transition: background-color 0.15s ease; } .memberius-topbar-toggle:hover { background-color: rgba(255, 255, 255, 0.06); } /* -------------------------------------------------------------------------- 4. SIDEBAR — taman, Editorial accenti -------------------------------------------------------------------------- */ @media (min-width: 1200px) { .memberius-nav { position: fixed !important; top: var(--memberius-topbar-height); left: 0; bottom: 0; width: var(--memberius-sidebar-width) !important; overflow-y: auto; overflow-x: hidden; z-index: 1050; background-color: var(--memberius-sidebar-bg) !important; color: var(--memberius-sidebar-text); border-right: 1px solid rgba(255, 255, 255, 0.04) !important; display: flex !important; flex-direction: column; padding: 10px 0; } } @media (max-width: 1199.98px) { .memberius-nav { width: 280px; background-color: var(--memberius-sidebar-bg) !important; color: var(--memberius-sidebar-text); border-right: 1px solid rgba(255, 255, 255, 0.04) !important; } } /* Hairline scrollbar */ .memberius-nav::-webkit-scrollbar { width: 4px; } .memberius-nav::-webkit-scrollbar-track { background: transparent; } .memberius-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; } .memberius-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* Offcanvas header (mobile) */ .memberius-nav .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 16px 20px; } .memberius-nav .offcanvas-header a, .memberius-nav .offcanvas-header .h5, .memberius-nav .offcanvas-header h5 { color: #ffffff; font-family: var(--m-font-display); font-weight: 600; } .memberius-nav .offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Sidebar nav items */ .memberius-nav .nav-item { width: 100%; } .memberius-nav .nav-link { padding: 10px 20px 10px 17px; color: var(--memberius-sidebar-text); font-size: 0.875rem; font-weight: 500; border-left: 3px solid transparent; transition: all 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 10px; } .memberius-nav .nav-link i { width: 18px; text-align: center; font-size: 0.85rem; opacity: 0.62; transition: opacity 0.15s ease, color 0.15s ease; } .memberius-nav .nav-link:hover { background-color: var(--memberius-sidebar-hover); color: var(--memberius-sidebar-text-hover); border-left-color: rgba(112, 145, 230, 0.45); } .memberius-nav .nav-link:hover i { opacity: 1; } .memberius-nav .nav-link.active { background-color: var(--memberius-sidebar-hover); color: #ffffff; border-left-color: var(--memberius-sidebar-active-border); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(112, 145, 230, 0.12); } .memberius-nav .nav-link.active i { opacity: 1; color: var(--m-secondary-500); } /* Inline (static) dropdown unutar sidebara */ .memberius-nav .dropdown-menu { position: static !important; transform: none !important; inset: auto !important; border: none; border-radius: 0; box-shadow: none; background: var(--memberius-sidebar-dropdown-bg); padding: 4px 0; margin: 0; min-width: auto; width: 100%; } .memberius-nav .dropdown-menu .dropdown-item { padding: 8px 20px 8px 48px; color: #DFE2EE; font-size: 0.83rem; font-weight: 400; border-radius: 0; transition: all 0.15s ease; } .memberius-nav .dropdown-menu .dropdown-item:hover, .memberius-nav .dropdown-menu .dropdown-item:focus { background-color: var(--memberius-sidebar-hover); color: #ffffff; } .memberius-nav .dropdown-menu .dropdown-item:active, .memberius-nav .dropdown-menu .dropdown-item.active { background-color: rgba(112, 145, 230, 0.16); color: var(--m-secondary-500); } /* Caret */ .memberius-nav .dropdown-toggle::after { border-top-color: var(--memberius-sidebar-text); margin-left: auto; float: right; margin-top: 8px; transition: transform 0.2s ease; opacity: 0.5; } .memberius-nav .nav-item.show .dropdown-toggle::after { transform: rotate(180deg); opacity: 1; } /* Sidebar footer / profile */ .memberius-nav .memberius-nav-profile { border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--memberius-sidebar-text); padding: 14px 16px; } .memberius-nav .memberius-nav-profile .btn-outline-primary { border-color: rgba(112, 145, 230, 0.6); color: var(--m-secondary-500); border-radius: var(--m-radius-pill); font-weight: 600; } .memberius-nav .memberius-nav-profile .btn-outline-primary:hover { background-color: var(--m-secondary-500); color: #ffffff; } .memberius-nav .memberius-nav-profile .btn-outline-secondary { border-color: rgba(199, 204, 227, 0.4); color: var(--memberius-sidebar-text); border-radius: var(--m-radius-pill); } .memberius-nav .memberius-nav-profile .btn-outline-secondary:hover { background-color: var(--memberius-sidebar-hover); color: #ffffff; } .memberius-nav .memberius-nav-profile .btn-outline-danger { border-color: rgba(184, 37, 74, 0.7); color: #E27693; border-radius: var(--m-radius-pill); } .memberius-nav .memberius-nav-profile .btn-outline-danger:hover { background-color: var(--m-danger); color: #ffffff; border-color: var(--m-danger); } .memberius-nav .memberius-nav-profile form { margin: 0; } .memberius-nav .memberius-nav-logout { background: transparent; border: none; border-left: 3px solid transparent; width: 100%; text-align: left; cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 500; line-height: 1.2; color: var(--memberius-sidebar-text); padding: 8px 20px 8px 17px; display: flex; align-items: center; } .memberius-nav .memberius-nav-logout i { width: 18px; text-align: center; font-size: 0.85rem; opacity: 0.62; transition: opacity 0.15s ease, color 0.15s ease; } .memberius-nav .memberius-nav-logout:hover, .memberius-nav .memberius-nav-logout:focus { background-color: var(--memberius-sidebar-hover); color: var(--memberius-sidebar-text-hover); border-left-color: rgba(112, 145, 230, 0.45); outline: none; } .memberius-nav .memberius-nav-logout:hover i, .memberius-nav .memberius-nav-logout:focus i { opacity: 1; } /* -------------------------------------------------------------------------- 5. CONTENT WRAPPER -------------------------------------------------------------------------- */ .memberius-app-wrapper { margin-top: var(--memberius-topbar-height); padding: 0; min-height: calc(100vh - var(--memberius-topbar-height)); } @media (min-width: 1200px) { .memberius-app-wrapper { margin-left: var(--memberius-sidebar-width); } } .memberius-content { width: 100%; padding: 18px; } .memberius-content-header { padding-bottom: 14px; margin: 6px 12px 14px; border-bottom: 1px solid var(--m-ink-100); } .memberius-content-title { font-family: var(--m-font-display); font-size: 1.5rem; font-weight: 600; color: var(--m-ink-900); letter-spacing: -0.015em; } .memberius-content-box { background-color: var(--memberius-box-color); padding: 18px 20px; border-radius: var(--m-radius-md); box-shadow: var(--m-shadow-card); margin: 12px; border: 1px solid var(--m-ink-100); border-left: 2px solid var(--m-secondary-500); } .memberius-content-box-title { background-color: transparent; box-shadow: none; border-radius: 0; border: none; border-left: none; margin: 0 12px; padding: 0; } .memberius-content-box-text { word-break: break-word; -webkit-box-orient: vertical; overflow: hidden; } .memberius-content-box-title + .memberius-content-box { margin-top: 4px; } /* -------------------------------------------------------------------------- 6. WELCOME SCREEN -------------------------------------------------------------------------- */ .memberius-welcome-screen { height: 100vh; display: flex; justify-content: center; align-items: center; } /* -------------------------------------------------------------------------- 7. TABLES -------------------------------------------------------------------------- */ .table-memberius { border-collapse: separate; border-spacing: 0; -webkit-overflow-scrolling: touch; width: 100%; } .table-memberius tr th, .table-memberius tr td { background-color: transparent; vertical-align: middle; } .table-memberius tr th { font-family: var(--m-font-mono); font-weight: 500; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--m-ink-500); background-color: transparent; border-bottom: 1px solid var(--m-ink-200); padding: 12px; } .table-memberius tbody tr td { padding: 12px; border-bottom: 1px solid var(--m-ink-100); color: var(--m-ink-800); font-size: 0.92rem; } .table-memberius tbody tr:last-child td { border-bottom: none; } .table-memberius tbody tr td:hover { cursor: pointer; } .table-memberius tbody tr:hover td { background-color: var(--memberius-table-hover-bg); } /* Bootstrap table polish (rijetka korištena .table bez .table-memberius) */ .table:not(.table-memberius) > :not(caption) > * > * { background-color: transparent; } .table:not(.table-memberius) > thead th { font-family: var(--m-font-mono); font-weight: 500; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--m-ink-500); border-bottom: 1px solid var(--m-ink-200); } /* Column widths */ table tr th.col-title, table tr td.col-title { width: 30%; } table tr th.col-icon, table tr td.col-icon { width: 30px; } table tr th.col-icon-lg, table tr td.col-icon-lg { width: 48px; } table tr th.col-icons-2, table tr td.col-icons-2 { width: 80px; } table tr th.col-xs, table tr td.col-xs { width: 15px; } table tr th.col-date, table tr td.col-date { width: 150px; } .table-dropdown { background: none; border: none; text-decoration: none; color: inherit; padding: 4px 8px; border-radius: var(--m-radius-sm); transition: background-color 0.15s ease, color 0.15s ease; } .table-dropdown:hover { background-color: var(--m-ink-50); color: var(--m-primary-500); } /* -------------------------------------------------------------------------- 8. FORMS -------------------------------------------------------------------------- Form definicije (memberius-input, memberius-label, .form-control, .form-check-input, Tom-Select, invalid feedback) preseljene u public/css/memberius-forms.css — Universal Form API, theme-aware (light default + dark override preko html[data-theme="dark"]). -------------------------------------------------------------------------- */ /* Animated focus underline (legacy .input-container pattern) */ .input-container { position: relative; display: flex; align-items: center; flex-wrap: nowrap; } .input-container .focus-input { display: block; position: absolute; bottom: 0; left: 0; margin-left: 15px; height: 2px; width: 0; background-color: var(--m-secondary-500); transition: all 0.3s ease-in-out; border-radius: 1px; } .g-0 .input-container .focus-input { margin-left: 0; } .input-container .memberius-input:focus + .focus-input, .input-container .memberius-input-select.dropdown-active + .focus-input { width: 98%; } /* Radio container (inverse pill) */ .memberius-radio-container-inverse { background-color: var(--m-primary-500); color: #ffffff; padding: 4px 12px; border-radius: var(--m-radius-pill); display: inline-flex; align-items: center; } .memberius-radio-container-inverse label { margin-bottom: 0; } /* Input addons */ .memberius-addon-before { padding: 0 8px 6px 0; color: var(--m-ink-500); font-family: var(--m-font-mono); font-size: 0.85rem; } .memberius-addon-after { padding: 0 0 6px 8px; color: var(--m-ink-500); font-family: var(--m-font-mono); font-size: 0.85rem; } /* Toggle radio buttons */ .toggle-radio-button { display: flex; align-items: center; border: 1px solid var(--m-ink-200); border-radius: var(--m-radius-pill); background-color: var(--m-paper); transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; margin: 0 10px 8px 0; padding: 0 10px; } .toggle-radio-button .memberius-input-radio { padding: 0.55rem 1rem; } .toggle-radio-button label { margin-bottom: 0; cursor: pointer; padding: 0.55rem 1rem; font-weight: 500; font-size: 0.88rem; } .toggle-radio-button:hover { border-color: var(--m-primary-300); background-color: var(--m-primary-50); } .toggle-radio-button.active { background-color: var(--m-primary-500); color: #ffffff; border-color: var(--m-primary-500); box-shadow: var(--m-shadow-ring); } /* -------------------------------------------------------------------------- 10. BUTTONS -------------------------------------------------------------------------- Moved to memberius-buttons.css (unified across admin + landing). Legacy .btn-memberius-* and Bootstrap .btn-* overrides removed. See public/css/memberius-buttons.css for full button API. -------------------------------------------------------------------------- */ /* Bootstrap close button — kept for native modal close compatibility */ .btn-close-memberius-sm { background-size: 10px; } /* -------------------------------------------------------------------------- 11. BADGES — mono uppercase pill -------------------------------------------------------------------------- */ .badge { font-family: var(--m-font-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--m-radius-pill); border: 1px solid transparent; } .badge.bg-primary, .badge.bg-memberius-primary { background-color: var(--m-primary-500) !important; color: #ffffff; } .badge.bg-secondary { background-color: var(--m-ink-100) !important; color: var(--m-ink-700); border-color: var(--m-ink-200); } .badge.bg-success { background-color: var(--m-success-bg) !important; color: var(--m-success); border-color: rgba(30, 158, 106, 0.25); } .badge.bg-danger { background-color: var(--m-danger-bg) !important; color: var(--m-danger); border-color: rgba(184, 37, 74, 0.25); } .badge.bg-warning { background-color: var(--m-warn-bg) !important; color: var(--m-warn); border-color: rgba(176, 122, 24, 0.25); } .badge.bg-info { background-color: var(--m-info-bg) !important; color: var(--m-info); border-color: rgba(72, 102, 198, 0.25); } .badge.bg-light { background-color: var(--m-ink-50) !important; color: var(--m-ink-700); } .badge.bg-dark { background-color: var(--m-ink-800) !important; color: #ffffff; } /* -------------------------------------------------------------------------- 12. ALERTS — moved to memberius-alerts.css (shared across all layouts) -------------------------------------------------------------------------- */ /* Impersonation banner (pun-width, bez radius) */ .memberius-app-wrapper > .alert-warning, .memberius-member-wrapper > .alert-warning { background-color: var(--m-warn-bg); border: none; border-left: 4px solid var(--m-warn); color: #6E4C0F; font-weight: 600; border-radius: 0; margin: 0; box-shadow: none; } .memberius-app-wrapper > .alert-warning .btn, .memberius-member-wrapper > .alert-warning .btn { font-weight: 700; } /* -------------------------------------------------------------------------- 13. MODALS -------------------------------------------------------------------------- */ .modal-content { border: 1px solid var(--m-ink-100); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow-lg); background-color: var(--m-paper); } .modal-header { border-bottom: 1px solid var(--m-ink-100); padding: 16px 22px; } .modal-title { font-family: var(--m-font-display); font-weight: 600; font-size: 1.1rem; color: var(--m-ink-900); letter-spacing: -0.005em; } .modal-body { padding: 18px 22px; color: var(--m-ink-800); } .modal-footer { border-top: 1px solid var(--m-ink-100); padding: 14px 22px; gap: 8px; } .modal-footer > * { margin: 0; } .modal-backdrop.show { opacity: 0.55; background-color: var(--m-ink-900); } .memberius-renewal-reject-modal { margin-top: 20rem; } /* -------------------------------------------------------------------------- 14. DROPDOWNS (Bootstrap) -------------------------------------------------------------------------- */ .dropdown-menu { border: 1px solid var(--m-ink-100); border-radius: var(--m-radius-md); box-shadow: var(--m-shadow-md); padding: 6px; background-color: var(--m-paper); font-family: var(--m-font-body); font-size: 0.9rem; margin-top: 4px; } .dropdown-item { border-radius: var(--m-radius-sm); padding: 8px 12px; color: var(--m-ink-800); transition: background-color 0.12s ease, color 0.12s ease; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--m-primary-50); color: var(--m-primary-700); } .dropdown-item.active, .dropdown-item:active { background-color: var(--m-primary-500); color: #ffffff; } .dropdown-item.disabled, .dropdown-item:disabled { color: var(--m-ink-300); background-color: transparent; } .dropdown-divider { border-top: 1px solid var(--m-ink-100); margin: 6px 0; } .dropdown-header { font-family: var(--m-font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--m-ink-500); padding: 8px 12px 4px; } /* -------------------------------------------------------------------------- 15. PAGINATION -------------------------------------------------------------------------- */ .pagination { margin-bottom: 0; gap: 2px; } .page-link { border: none; background-color: transparent; color: var(--m-ink-700); padding: 6px 11px; border-radius: var(--m-radius-pill); font-family: var(--m-font-mono); font-size: 0.82rem; font-weight: 500; transition: all 0.15s ease; min-width: 32px; text-align: center; } .page-link:hover { background-color: var(--m-primary-50); color: var(--m-primary-700); } .page-link:focus, .page-link:focus-visible { box-shadow: var(--m-shadow-ring); outline: 0; background-color: var(--m-primary-50); } .active > .page-link, .page-link.active { font-weight: 700; background-color: var(--m-primary-500); color: #ffffff; } .disabled > .page-link { background-color: transparent; color: var(--m-ink-300); pointer-events: none; } /* -------------------------------------------------------------------------- 16. BREADCRUMBS -------------------------------------------------------------------------- */ .breadcrumb { font-family: var(--m-font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--m-ink-500); padding: 0; margin-bottom: 12px; background: transparent; } .breadcrumb-item a { color: var(--m-ink-500); text-decoration: none; } .breadcrumb-item a:hover { color: var(--m-primary-500); } .breadcrumb-item.active { color: var(--m-ink-900); font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { color: var(--m-ink-300); content: "/"; padding: 0 8px; } /* -------------------------------------------------------------------------- 17. NAV / TABS (Bootstrap) + Memberius tabs -------------------------------------------------------------------------- */ .nav-tabs { border-bottom: 1px solid var(--m-ink-200); } .nav-tabs .nav-link { font-family: var(--m-font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--m-ink-500); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 16px; margin-bottom: -1px; transition: color 0.15s ease, border-color 0.15s ease; } .nav-tabs .nav-link:hover { color: var(--m-primary-700); border-bottom-color: var(--m-primary-300); background-color: transparent; } .nav-tabs .nav-link.active { color: var(--m-ink-900); background-color: transparent; border-color: transparent; border-bottom-color: var(--m-primary-500); font-weight: 600; } .nav-pills .nav-link { font-family: var(--m-font-body); font-size: 0.9rem; color: var(--m-ink-700); border-radius: var(--m-radius-md); padding: 8px 14px; } .nav-pills .nav-link:hover { background-color: var(--m-primary-50); color: var(--m-primary-700); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--m-primary-500); color: #ffffff; } /* Memberius inline tabs */ .memberius-tabs { margin: 0 0 12px 0; } .memberius-tab { border-bottom: 1px solid var(--m-ink-200); transition: all 0.15s ease; } .memberius-tab a { color: var(--m-ink-700); text-decoration: none; width: 100%; display: block; padding-bottom: 8px; font-family: var(--m-font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; transition: color 0.15s ease; } .memberius-tab:hover { border-bottom: 2px solid var(--m-primary-300); } .memberius-tab:hover a { color: var(--m-primary-700); } .memberius-tab.active { border-bottom: 2px solid var(--m-primary-500); } .memberius-tab.active a { color: var(--m-ink-900); font-weight: 700; } /* -------------------------------------------------------------------------- 18. STATUS TABS (#tabs / #indicator) -------------------------------------------------------------------------- */ #tabs { width: 100%; display: flex; background: var(--m-ink-50); position: relative; overflow: hidden; border-bottom: 3px solid var(--m-primary-500); border-radius: var(--m-radius-md) var(--m-radius-md) 0 0; } .tab-link { position: relative; z-index: 1; } .tab-link.active { color: #ffffff !important; } #indicator { position: absolute; height: 100%; width: 33.3%; background: var(--m-primary-500); transition: left 380ms ease; bottom: 0; left: 0; z-index: 0; } .tab { overflow: hidden; background-color: inherit; border-radius: var(--m-radius-md) var(--m-radius-md) 0 0; display: inline-block; } .tab button { background-color: inherit; float: left; border: none; border-right: 1px solid var(--m-ink-200); outline: none; cursor: pointer; padding: 14px 18px; transition: 0.2s; font-family: var(--m-font-display); font-size: 0.95rem; font-weight: 600; color: var(--m-ink-700); border-radius: 0; } .tab button:last-child { border-right: none; } /* -------------------------------------------------------------------------- 19. TAB CONTENT BOXES (wizard koraci) -------------------------------------------------------------------------- */ .memberius-tab-box-container-title { margin: 0 12px; } .memberius-tab-box { margin: 5px 12px; } .memberius-tab-box-title { width: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px 0; font-family: var(--m-font-mono); font-weight: 600; color: var(--m-primary-500); } .memberius-tab-box-show .memberius-tab-box-title { padding: 0; align-items: center; } .memberius-tab-box-show.disabled .memberius-tab-box-title { background-color: var(--m-ink-100); color: var(--m-ink-500); } .memberius-tab-box-show.disabled { opacity: 0.5; } .memberius-tab-box-body { border-left: 3px solid var(--m-primary-500); padding-left: 14px; } /* -------------------------------------------------------------------------- 20. STEPS NAVIGATION -------------------------------------------------------------------------- */ .memberius-steps-navigation .memberius-steps-navigation-step { font-family: var(--m-font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--m-ink-500); } .memberius-steps-navigation .memberius-steps-navigation-step.active { font-weight: 700; color: var(--m-primary-700); } /* -------------------------------------------------------------------------- 21. COUNTER / LIST -------------------------------------------------------------------------- */ .memberius-list-counter-container { order: 1; } .memberius-pagination-container { order: 2; } .memberius-list-counter { font-family: var(--m-font-mono); font-weight: 600; font-size: 0.85rem; color: var(--m-ink-700); } .memberius-list-counter span { font-weight: 400; font-style: italic; color: var(--m-ink-500); opacity: 1; } .memberius-on-hover:hover { background-color: var(--m-ink-50); } .memberius-list .memberius-list-item { padding: 10px 8px; border-radius: var(--m-radius-sm); } .memberius-list .memberius-list-item:nth-child(2n) { background-color: var(--memberius-table-stripe-bg); } /* -------------------------------------------------------------------------- 22. SETTINGS CARDS -------------------------------------------------------------------------- */ .memberius-settings-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--m-paper); border: 1px solid var(--m-ink-100); border-radius: var(--m-radius-lg); padding: 1.75rem 1.5rem; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; height: 100%; box-shadow: var(--m-shadow-sm); } .memberius-settings-card:hover { transform: translateY(-3px); box-shadow: var(--m-shadow-md); border-color: var(--m-primary-300); color: inherit; text-decoration: none; } .memberius-settings-card-icon { width: 56px; height: 56px; border-radius: var(--m-radius-lg); background: var(--m-primary-50); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.4rem; color: var(--m-primary-500); transition: background-color 0.2s ease, color 0.2s ease; } .memberius-settings-card:hover .memberius-settings-card-icon { background-color: var(--m-primary-500); color: #ffffff; } .memberius-settings-card h5 { font-family: var(--m-font-display); font-weight: 600; font-size: 0.98rem; margin-bottom: 0; color: var(--m-ink-900); } /* -------------------------------------------------------------------------- 23. NOTE MEMBER (floating note) -------------------------------------------------------------------------- */ .memberius-member-note { position: absolute; top: 40px; right: 30px; width: 250px; background-color: var(--m-paper); border: 1px solid var(--m-ink-100); border-radius: var(--m-radius-md); padding: 10px 12px; z-index: 9; box-shadow: var(--m-shadow-md); border-left: 3px solid var(--m-secondary-500); font-size: 0.88rem; color: var(--m-ink-800); } /* -------------------------------------------------------------------------- 24. CARDS (Bootstrap default) -------------------------------------------------------------------------- */ .card { /*border: 1px solid var(--m-ink-100);*/ /*border-radius: var(--m-radius-md);*/ /*box-shadow: var(--m-shadow-sm);*/ /*background-color: var(--m-paper);*/ } .card-header { background-color: transparent; border-bottom: 1px solid var(--m-ink-100); padding: 14px 18px; font-family: var(--m-font-display); font-weight: 600; color: var(--m-ink-900); } .card-footer { background-color: transparent; border-top: 1px solid var(--m-ink-100); padding: 12px 18px; } .card-title { font-family: var(--m-font-display); font-weight: 600; color: var(--m-ink-900); } .card-subtitle { font-family: var(--m-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--m-ink-500); } /* -------------------------------------------------------------------------- 25. LIST GROUP -------------------------------------------------------------------------- */ .list-group { border-radius: var(--m-radius-md); overflow: hidden; } .list-group-item { border-color: var(--m-ink-100); padding: 12px 16px; color: var(--m-ink-800); } .list-group-item.active { background-color: var(--m-primary-500); border-color: var(--m-primary-500); color: #ffffff; } /* -------------------------------------------------------------------------- 26. PROGRESS -------------------------------------------------------------------------- */ .progress { background-color: var(--m-ink-100); border-radius: var(--m-radius-pill); height: 8px; overflow: hidden; } .progress-bar { background-color: var(--m-primary-500); border-radius: var(--m-radius-pill); } /* -------------------------------------------------------------------------- 27. ACCORDION -------------------------------------------------------------------------- */ body.memberius-app-body .accordion-item { border: 1px solid var(--m-ink-100); /*border-radius: var(--m-radius-md) !important;*/ margin-bottom: 8px; overflow: hidden; } body.memberius-app-body .accordion-button { font-family: var(--m-font-body); font-weight: 500; color: var(--m-ink-800); background-color: var(--m-paper); padding: 14px 18px; } body.memberius-app-body .accordion-button:not(.collapsed) { /*background-color: var(--m-primary-50);*/ /*color: var(--m-primary-700);*/ box-shadow: none; } /*body.memberius-app-body .accordion-button:focus {*/ /* box-shadow: var(--m-shadow-ring);*/ /* border-color: var(--m-secondary-500);*/ /*}*/ body.memberius-app-body .accordion-body { background-color: var(--m-paper); padding: 14px 18px; color: var(--m-ink-800); } /* -------------------------------------------------------------------------- 28. UTILITY KLASE — text / border / background -------------------------------------------------------------------------- */ .text-color-memberius { color: var(--m-primary-500); } .text-memberius { color: var(--m-primary-500); font-weight: 700; } .text-memberius-muted { color: var(--m-ink-500); } .border-bottom-memberius { border-bottom: 2px solid var(--m-primary-500); } .border-memberius { --bs-border-opacity: 1; border-color: var(--m-primary-500) !important; } .bg-memberius-primary { background-color: var(--m-primary-500); } .x-small { font-size: 0.75em; } .memberius-logo-small { width: 10%; height: auto; margin-left: 0; } .bg { background-color: var(--m-paper); } .memberius-vertical-text { writing-mode: sideways-lr; } .memberius-vertical-tab { border-top-left-radius: var(--m-radius-md); border-bottom-left-radius: var(--m-radius-md); } /* Bootstrap text-* color overrides aligned to ink scale */ .text-muted { color: var(--m-ink-500) !important; } .text-dark { color: var(--m-ink-900) !important; } /* -------------------------------------------------------------------------- 29. MEMBER PORTAL — sidebar + wrapper -------------------------------------------------------------------------- */ .memberius-member-sidebar { width: 15%; z-index: 1050; /* Clears the fixed topbar (replaces the old header/logo spacer block) */ padding-top: var(--memberius-topbar-height); transform: translateX(0); transition: transform 0.25s ease-in-out; box-shadow: 2px 0 12px rgba(15, 21, 53, 0.12); background-color: var(--memberius-sidebar-bg) !important; color: var(--memberius-sidebar-text); border-right: 1px solid rgba(255, 255, 255, 0.04) !important; } .memberius-member-sidebar .nav-link { color: var(--memberius-sidebar-text); font-weight: 500; border-left: 3px solid transparent; border-radius: 0 !important; padding: 10px 18px 10px 15px; font-size: 0.9rem; transition: all 0.15s ease; } .memberius-member-sidebar .nav-link:hover { background-color: var(--memberius-sidebar-hover); color: var(--memberius-sidebar-text-hover); border-left-color: rgba(112, 145, 230, 0.45); } .memberius-member-sidebar .nav-link.active { background-color: var(--memberius-sidebar-hover) !important; color: #ffffff !important; border-left-color: var(--memberius-sidebar-active-border); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(112, 145, 230, 0.12); } .memberius-member-sidebar .nav-link.text-dark { color: var(--memberius-sidebar-text) !important; } .memberius-member-sidebar .nav-link.text-dark:hover { color: var(--memberius-sidebar-text-hover) !important; } .memberius-member-sidebar .border-bottom { border-color: rgba(255, 255, 255, 0.08) !important; } .memberius-member-sidebar .border-bottom a { color: #ffffff !important; font-family: var(--m-font-display); font-weight: 600; } .memberius-member-sidebar .border-top { border-color: rgba(255, 255, 255, 0.08) !important; } .memberius-member-sidebar .mt-auto { color: var(--memberius-sidebar-text); padding: 12px 14px; } .memberius-member-sidebar .mt-auto .fw-semibold { color: #ffffff; font-family: var(--m-font-body); } .memberius-member-sidebar .mt-auto .text-muted { color: rgba(199, 204, 227, 0.7) !important; font-family: var(--m-font-mono); font-size: 0.72rem; } .memberius-member-sidebar .mt-auto .btn-outline-info, .memberius-member-sidebar .mt-auto .btn-outline-success { border-color: rgba(112, 145, 230, 0.6); color: var(--m-secondary-500); border-radius: var(--m-radius-pill); } .memberius-member-sidebar .mt-auto .btn-outline-info:hover, .memberius-member-sidebar .mt-auto .btn-outline-success:hover { background-color: var(--m-secondary-500); color: #ffffff; border-color: var(--m-secondary-500); } .memberius-member-sidebar .mt-auto .btn-outline-danger { border-color: rgba(184, 37, 74, 0.7); color: #E27693; border-radius: var(--m-radius-pill); } .memberius-member-sidebar .mt-auto .btn-outline-danger:hover { background-color: var(--m-danger); color: #ffffff; border-color: var(--m-danger); } @media (max-width: 1200px) { .memberius-member-sidebar { width: 50%; transform: translateX(-100%); } .memberius-sidebar-open .memberius-member-sidebar { transform: translateX(0); } } .memberius-member-sidebar-overlay { position: fixed; inset: 0; background: rgba(15, 21, 53, 0.55); backdrop-filter: blur(2px); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity 0.25s ease-in-out; } .memberius-sidebar-open .memberius-member-sidebar-overlay { opacity: 1; pointer-events: auto; } .memberius-member-sidebar-close { /* In normal flow above the nav links (sidebar is a flex column), right-aligned */ align-self: flex-end; color: var(--memberius-sidebar-text) !important; } .memberius-member-sidebar-close:hover { color: #ffffff !important; } @media (min-width: 1201px) { /* Specificity 0,2,0 to beat .memberius-btn (display: inline-flex) loaded after this file */ .memberius-member-sidebar .memberius-member-sidebar-close { display: none; } } .memberius-member-sidebar-toggle { position: fixed; top: 1%; left: 1%; z-index: 11; color: var(--m-ink-800) !important; } @media (min-width: 1201px) { .memberius-member-sidebar-toggle { display: none; } } .memberius-sidebar-open .memberius-member-sidebar-toggle { display: none; } .memberius-member-wrapper { padding-top: var(--memberius-topbar-height); margin-left: 15%; width: calc(100% - 15%); } .memberius-member-content-title { margin-left: 0%; font-family: var(--m-font-display); font-weight: 600; color: var(--m-ink-900); } @media (max-width: 1201px) { .memberius-member-wrapper { margin-left: 0; width: 100%; } .memberius-member-content-title { margin-left: 5%; } } /* -------------------------------------------------------------------------- 30. PRINT (payment slip i sl.) -------------------------------------------------------------------------- */ @media print { body { background: #ffffff; color: #000000; } .memberius-topbar, .memberius-nav, .memberius-member-sidebar, .memberius-member-sidebar-overlay, .memberius-member-sidebar-toggle, .memberius-app-wrapper > .alert-warning, .alert { display: none !important; } .memberius-app-wrapper, .memberius-member-wrapper { margin: 0 !important; width: 100% !important; padding: 0 !important; } } .memberius-bank-import-manual-select { min-width: 220px; } /* -------------------------------------------------------------------------- 31. INLINE "IZRADI NOVO" MODAL CREATE LINKS -------------------------------------------------------------------------- */ .memberius-create-with-modal-link { font-size: 0.85rem; color: var(--memberius-primary-color); text-decoration: none; white-space: nowrap; flex-shrink: 0; margin-left: 0.5rem; } .memberius-create-with-modal-link:hover { color: var(--memberius-primary-color); text-decoration: underline; } .memberius-modal-create .modal-body .memberius-modal-error { margin-bottom: 1rem; } /* Group schedule rows — paired with .table-responsive wrapper in schedule-location-section.blade.php. Keeps day/start/end/X in one horizontal row on mobile; parent scrolls horizontally when narrower. */ .memberius-schedule-container { min-width: 600px; }