/* ========================================================================== CicirlCredit — PUBLIC SITE design system (v2 — premium pass) ========================================================================== Revised after direct visual reference from the person (two premium fintech templates: bold layered hero cards, confident scale, a high-contrast dark band, real trust signals). Their brief pins the direction down explicitly, so it wins over any of my own earlier restraint — see frontend-design skill's own guidance on that. Still built from the real subject (a member-owned SACCO/cooperative), not a copy of the references: the floating hero card is a real ledger snapshot of THIS organization's own numbers, not a fake debit-card mockup with invented digits; the "trust strip" is honest value badges, not fabricated partner/press logos we have no relationship with; the 3-step dark band is this cooperative's actual join→save→borrow path, not a generic app-onboarding illustration. Brand color is still fully driven by CSS custom properties (--brand / --brand-2), injected per-organization by the layout — the values below are only the fallback for an org that hasn't set colors. Shifted bolder/more saturated than v1 to read as premium rather than muted, per direct feedback. ========================================================================== */ :root { --pub-paper: #F7F8F3; --pub-card: #FFFFFF; --pub-ink: #0E1B14; --pub-ink-soft: #4B5A50; --pub-ink-faint: #8B978C; --pub-line: #E3E7DC; /* Brand — overridden per-organization via inline custom properties on (see public layout); these are only the fallback. Bolder than v1: a rich cooperative emerald + a vivid lime accent, matching the premium-fintech energy from the reference images while staying in the "growth/harvest" color family already established for this product, not an arbitrary neon swapped in for shock value. */ --brand: #0E7A4C; --brand-2: #B7F23D; --brand-ink: #063D2C; /* The dark band — used for exactly one section (the "3 steps" CTA block), not the whole page. Deep forest-black, not pure black. */ --pub-dark: #0A1D13; --pub-dark-soft: #16352380; --pub-dark-card: rgba(255,255,255,.07); --pub-dark-line: rgba(255,255,255,.12); --pub-stamp: #A63B2E; --pub-radius-sm: 10px; --pub-radius-md: 16px; --pub-radius-lg: 28px; --pub-radius-pill: 999px; /* Color-tinted shadows (brand-tinted, not flat neutral gray) — a deliberate premium-fintech technique, used throughout instead of v1's plain neutral shadow. */ --pub-shadow-card: 0 1px 2px rgba(14,27,20,.04), 0 12px 28px -6px rgba(14,27,20,.08); --pub-shadow-lift: 0 20px 44px -10px color-mix(in srgb, var(--brand) 28%, transparent); --pub-shadow-dark: 0 24px 60px -12px rgba(0,0,0,.45); --pub-container: 1200px; } /* ---------------------------------------------------------------------- */ /* RESET / BASE — Jost is this platform's default typeface (already used admin-side); the public site now matches rather than running its own separate display face. IBM Plex Mono stays as the one deliberate exception, reserved for ledger/rate figures only. */ /* ---------------------------------------------------------------------- */ .pub * , .pub *::before, .pub *::after { box-sizing: border-box; } .pub { font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--pub-ink); background: var(--pub-paper); -webkit-font-smoothing: antialiased; } .pub h1, .pub h2, .pub h3, .pub h4 { font-family: 'Jost', -apple-system, sans-serif; font-weight: 700; line-height: 1.06; letter-spacing: -0.01em; margin: 0; color: var(--pub-ink); } .pub p { margin: 0; } .pub a { color: inherit; text-decoration: none; } .pub img { max-width: 100%; display: block; } .pub .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } .pub .serif-quote { font-family: 'Fraunces', Georgia, serif; } .pub a:focus-visible, .pub button:focus-visible, .pub input:focus-visible, .pub textarea:focus-visible, .pub select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .pub * { animation: none !important; transition: none !important; } } /* ---------------------------------------------------------------------- */ /* LAYOUT */ /* ---------------------------------------------------------------------- */ .pub-container { max-width: var(--pub-container); margin: 0 auto; padding: 0 24px; } .pub-section { padding: 100px 0; } .pub-section--tight { padding: 64px 0; } @media (max-width: 768px) { .pub-section { padding: 64px 0; } .pub-section--tight { padding: 48px 0; } .pub-container { padding: 0 18px; } } .pub-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; } .pub-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--brand); } .pub-eyebrow--on-dark { color: color-mix(in srgb, var(--brand-2) 90%, white); } .pub-eyebrow--on-dark::before { background: var(--brand-2); } .pub-h1 { font-size: clamp(2.6rem, 5vw, 4.1rem); } .pub-h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); } .pub-h3 { font-size: 1.3rem; } .pub-lede { font-size: 1.2rem; color: var(--pub-ink-soft); line-height: 1.6; max-width: 620px; } .pub-body { font-size: 1rem; color: var(--pub-ink-soft); line-height: 1.7; } /* ---------------------------------------------------------------------- */ /* TOPBAR — contact info/address/social. Deliberately NOT sticky and NOT JS-animated — it's plain content at the very top of the page, so it scrolls out of view naturally as soon as you scroll past its own height, and scrolls back into view naturally when you scroll back up to the top. Only .pub-header (below) is sticky. An earlier version tried to animate the topbar's height to zero on scroll while it lived inside a `position: sticky` wrapper — that shrinks the document's height right at the top of the page, which on some browsers (Chrome's default scroll anchoring in particular) makes the browser silently adjust scrollY to compensate, which re-fires the scroll handler, which could flip the topbar's state back — a visible flicker loop. Letting the topbar be ordinary non-sticky content sidesteps that whole class of bug: nothing animates the document's height, so there's nothing for scroll anchoring to react to. */ /* ---------------------------------------------------------------------- */ .pub-topbar { background: var(--pub-dark); color: rgba(255,255,255,.82); } .pub-topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 44px; font-size: .8rem; } .pub-topbar__info { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .pub-topbar__info a, .pub-topbar__info span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.82); } .pub-topbar__info a:hover { color: var(--brand-2); } .pub-topbar__info i { color: var(--brand-2); font-size: .85rem; } .pub-topbar__social { display: flex; align-items: center; gap: 14px; } .pub-topbar__social a { color: rgba(255,255,255,.7); font-size: .92rem; } .pub-topbar__social a:hover { color: var(--brand-2); } @media (max-width: 760px) { .pub-topbar__info span:not(:first-child) { display: none; } } /* ---------------------------------------------------------------------- */ /* HEADER / NAV — animated underline (grows from center on hover, snaps full-width and brand-colored when active) plus a soft pill highlight behind the link on hover for a more tactile, premium feel. */ /* ---------------------------------------------------------------------- */ .pub-header { position: sticky; top: 0; z-index: 40; background: rgba(247,248,243,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pub-line); transition: box-shadow .25s ease; } .pub-header.is-scrolled { box-shadow: 0 8px 24px -8px rgba(14,27,20,.10); } .pub-header__row { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; } .pub-brand { display: flex; align-items: center; gap: 10px; font-family: 'Jost', sans-serif; font-weight: 700; font-size: 1.2rem; } .pub-brand img { height: 34px; width: auto; border-radius: 4px; } .pub-brand__mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--brand-2))); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Jost', sans-serif; font-weight: 700; font-size: 1rem; } .pub-nav { display: flex; align-items: center; gap: 6px; } .pub-nav a { font-size: .95rem; font-weight: 500; color: var(--pub-ink-soft); position: relative; padding: 9px 16px; border-radius: var(--pub-radius-pill); transition: color .2s ease, background-color .2s ease; } .pub-nav a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px; background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .28s cubic-bezier(.4,0,.2,1); } .pub-nav a:hover { color: var(--pub-ink); background: color-mix(in srgb, var(--brand) 6%, transparent); } .pub-nav a:hover::after { transform: scaleX(1); } .pub-nav a.is-active { color: var(--pub-ink); font-weight: 600; } .pub-nav a.is-active::after { transform: scaleX(1); background: linear-gradient(90deg, var(--brand), var(--brand-2)); } /* Nav dropdown ("Products": Loans/Savings/Shares/Calculator) — pure CSS hover/focus-within, no JS needed, which also makes it keyboard- accessible for free (tabbing into the toggle or any menu link keeps it open via :focus-within). Collapses to a plain static sublist on mobile, where the whole nav is already a vertical flyout — a hover menu makes no sense there. */ .pub-nav-dropdown { position: relative; } .pub-nav-dropdown__toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 9px 16px; border-radius: var(--pub-radius-pill); transition: color .2s ease, background-color .2s ease; } .pub-nav-dropdown__toggle.is-active { color: var(--pub-ink); font-weight: 600; } .pub-nav-dropdown:hover .pub-nav-dropdown__toggle, .pub-nav-dropdown:focus-within .pub-nav-dropdown__toggle { color: var(--pub-ink); background: color-mix(in srgb, var(--brand) 6%, transparent); } .pub-nav-dropdown:hover .pub-nav-dropdown__toggle i, .pub-nav-dropdown:focus-within .pub-nav-dropdown__toggle i { transform: rotate(180deg); } .pub-nav-dropdown__menu { position: absolute; top: 100%; left: 0; background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--pub-radius-md); box-shadow: var(--pub-shadow-card); padding: 8px; min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s; } [dir="rtl"] .pub-nav-dropdown__menu { left: auto; right: 0; } .pub-nav-dropdown:hover .pub-nav-dropdown__menu, .pub-nav-dropdown:focus-within .pub-nav-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .pub-nav-dropdown__menu a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; font-size: .9rem; font-weight: 500; color: var(--pub-ink-soft); } .pub-nav-dropdown__menu a::after { content: none; } .pub-nav-dropdown__menu a:hover { background: var(--pub-paper); color: var(--pub-ink); } .pub-nav-dropdown__menu a i { color: var(--brand); font-size: .95rem; width: 16px; } @media (max-width: 900px) { .pub-nav-dropdown__toggle { width: 100%; justify-content: space-between; } .pub-nav-dropdown__menu { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; border: none; padding: 0 0 0 14px; margin-top: 2px; display: none; } .pub-nav-dropdown.is-open .pub-nav-dropdown__menu { display: block; } .pub-nav-dropdown.is-open .pub-nav-dropdown__toggle i { transform: rotate(180deg); } } .pub-header__actions { display: flex; align-items: center; gap: 12px; } .pub-nav-toggle { display: none; background: none; border: none; padding: 6px; color: var(--pub-ink); } @media (max-width: 900px) { .pub-nav { display: none; } .pub-nav-toggle { display: inline-flex; } .pub-nav.is-open { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: absolute; top: 80px; left: 0; right: 0; background: var(--pub-paper); border-bottom: 1px solid var(--pub-line); padding: 16px 24px 24px; } .pub-nav.is-open a { width: 100%; } } .pub-lang { position: relative; } .pub-lang__toggle { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--pub-line); border-radius: var(--pub-radius-pill); padding: 8px 15px; font-size: .82rem; font-weight: 600; color: var(--pub-ink-soft); cursor: pointer; font-family: 'Jost', sans-serif; } .pub-lang__toggle:hover { border-color: var(--brand); color: var(--pub-ink); } .pub-lang__menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--pub-radius-md); box-shadow: var(--pub-shadow-card); min-width: 180px; padding: 6px; z-index: 50; } [dir="rtl"] .pub-lang__menu { right: auto; left: 0; } .pub-lang__item { width: 100%; text-align: left; background: none; border: none; padding: 9px 12px; border-radius: 9px; font-size: .9rem; color: var(--pub-ink-soft); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: 'Jost', sans-serif; } [dir="rtl"] .pub-lang__item { text-align: right; } .pub-lang__item:hover { background: var(--pub-paper); color: var(--pub-ink); } .pub-lang__item.is-active { color: var(--brand-ink); font-weight: 600; } /* ---------------------------------------------------------------------- */ /* BUTTONS — bigger, pill-shaped, brand-tinted glow on hover */ /* ---------------------------------------------------------------------- */ .pub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: 'Jost', sans-serif; font-weight: 700; font-size: .97rem; padding: 15px 30px; border-radius: var(--pub-radius-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background-color .18s ease; } .pub-btn--primary { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 65%, var(--brand-2))); color: #fff; } .pub-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--pub-shadow-lift); } .pub-btn--outline { background: transparent; border-color: var(--pub-line); color: var(--pub-ink); } .pub-btn--outline:hover { border-color: var(--brand); color: var(--brand-ink); transform: translateY(-1px); } .pub-btn--on-dark { border-color: var(--pub-dark-line); color: #fff; } .pub-btn--on-dark:hover { border-color: var(--brand-2); color: var(--brand-2); } .pub-btn--sm { padding: 10px 20px; font-size: .85rem; } /* ---------------------------------------------------------------------- */ /* HERO v2 — layered floating cards over an ambient brand-color blob. Signature element: the front card is a real ledger snapshot of this organization's own numbers (not a fabricated card/balance mockup), styled with the same polish as a premium fintech dashboard widget. */ /* ---------------------------------------------------------------------- */ .pub-hero { padding: 76px 0 40px; overflow: hidden; } .pub-hero__grid { display: grid; grid-template-columns: 1fr .95fr; gap: 56px; align-items: center; } @media (max-width: 960px) { .pub-hero__grid { grid-template-columns: 1fr; } } .pub-hero__chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; } .pub-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--pub-radius-pill); padding: 8px 16px; font-size: .82rem; font-weight: 600; color: var(--pub-ink-soft); box-shadow: var(--pub-shadow-card); } .pub-chip i { color: var(--brand); } .pub-hero__visual { position: relative; min-height: 420px; } .pub-blob { position: absolute; inset: -10% -10% -10% 10%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--brand) 32%, transparent), transparent 65%), radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--brand-2) 40%, transparent), transparent 60%); filter: blur(50px); z-index: 0; } .pub-float-card { position: relative; z-index: 2; background: var(--pub-card); border-radius: var(--pub-radius-lg); box-shadow: var(--pub-shadow-lift); border: 1px solid rgba(255,255,255,.6); padding: 30px 32px; max-width: 400px; margin-inline-start: auto; } .pub-float-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .pub-float-card__badge { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand-ink); border-radius: var(--pub-radius-pill); padding: 5px 12px; font-size: .74rem; font-weight: 700; } .pub-float-card__org { font-family: 'Jost', sans-serif; font-weight: 700; font-size: .95rem; } .pub-float-card__label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-ink-faint); display: block; margin-bottom: 6px; } .pub-float-card .pub-ledger-entry { padding: 12px 0; } .pub-float-card .pub-ledger-entry__value { font-size: 1.25rem; } .pub-float-chip { position: absolute; z-index: 3; top: 8%; left: -6%; background: var(--pub-card); border-radius: var(--pub-radius-md); box-shadow: var(--pub-shadow-card); padding: 14px 18px; display: flex; align-items: center; gap: 10px; max-width: 190px; } @media (max-width: 960px) { .pub-float-chip { display: none; } } .pub-float-chip__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-2); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; } .pub-float-chip__label { font-size: .72rem; color: var(--pub-ink-faint); line-height: 1.3; } .pub-float-chip__value { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: .95rem; } .pub-ledger-entry { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--pub-line); } .pub-ledger-entry:last-child { border-bottom: none; } .pub-ledger-entry__label { font-size: .88rem; color: var(--pub-ink-soft); } .pub-ledger-entry__value { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.05rem; color: var(--pub-ink); white-space: nowrap; } .pub-stamp { position: absolute; transform: rotate(-9deg); border: 2.5px solid var(--pub-stamp); color: var(--pub-stamp); border-radius: 10px; padding: 6px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; pointer-events: none; } /* ---------------------------------------------------------------------- */ /* MARQUEE — continuous scrolling strip beneath the hero. Content is real value statements (or, when available, real product names passed from the controller), never fabricated partner logos. Pure CSS loop: the track is duplicated once in markup so the animation can loop seamlessly at -50%; pauses entirely under prefers-reduced-motion rather than just slowing down, per public.css's own reduced-motion rule for the rest of this surface. */ /* ---------------------------------------------------------------------- */ .pub-marquee { border-top: 1px solid var(--pub-line); border-bottom: 1px solid var(--pub-line); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 5%, var(--pub-paper)), color-mix(in srgb, var(--brand-2) 8%, var(--pub-paper))); overflow: hidden; padding: 18px 0; } .pub-marquee__track { display: flex; width: max-content; animation: pub-marquee 32s linear infinite; } @media (prefers-reduced-motion: reduce) { .pub-marquee__track { animation: none; } } .pub-marquee__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; white-space: nowrap; font-size: .92rem; font-weight: 600; color: var(--brand-ink); } .pub-marquee__item i { color: var(--brand-2); font-size: .8rem; } @keyframes pub-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------------------------------------------------------------------- */ /* TRUST BADGES — real value signals, deliberately not fabricated partner/press logos we have no actual relationship with. */ /* ---------------------------------------------------------------------- */ .pub-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .pub-trust-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--pub-radius-pill); background: var(--pub-card); border: 1px solid var(--pub-line); font-size: .88rem; font-weight: 600; color: var(--pub-ink-soft); } .pub-trust-badge i { color: var(--brand); font-size: 1.05rem; } /* ---------------------------------------------------------------------- */ /* STATS BAR (About page) */ /* ---------------------------------------------------------------------- */ .pub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } @media (max-width: 700px) { .pub-stats { grid-template-columns: 1fr; } } .pub-stat { background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--pub-radius-md); padding: 26px 24px; position: relative; overflow: hidden; box-shadow: var(--pub-shadow-card); } .pub-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); } .pub-stat__value { font-family: 'IBM Plex Mono', monospace; font-size: 2.1rem; font-weight: 700; display: block; line-height: 1; background: linear-gradient(135deg, var(--brand-ink), color-mix(in srgb, var(--brand) 70%, var(--brand-2))); -webkit-background-clip: text; background-clip: text; color: transparent; } .pub-stat__label { font-size: .85rem; color: var(--pub-ink-soft); margin-top: 8px; display: block; } /* ---------------------------------------------------------------------- */ /* DECORATIVE SWOOSH — a bold, flowing gradient ribbon (rounded caps/ joins, hand-drawn-style curve), replacing an earlier subtle repeating diagonal-hatch texture after direct visual reference from the person — a genuine flourish sitting behind/beside hero text, not a quiet background wash. The SVG itself lives in public/_partials/swoosh.blade.php (real inline markup, not a CSS trick) — this block is only its positioning, sizing, and the one gentle floating animation. Brand-gradient colors are set directly on the SVG's own elements via CSS custom properties (see that partial's docblock for why an inline SVG can do that when a background-image/mask approach couldn't). */ /* ---------------------------------------------------------------------- */ .pub-swoosh { position: absolute; z-index: 0; pointer-events: none; inset: 0; width: 100%; height: 100%; opacity: .9; animation: pub-swoosh-float 9s ease-in-out infinite; } .pub-swoosh--flip { transform: scaleX(-1); } @keyframes pub-swoosh-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(.5deg); } } .pub-swoosh--flip { animation-name: pub-swoosh-float-flip; } @keyframes pub-swoosh-float-flip { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); } 50% { transform: scaleX(-1) translateY(-8px) rotate(-.5deg); } } @media (prefers-reduced-motion: reduce) { .pub-swoosh, .pub-swoosh--flip { animation: none; } } .pub-section--decorated { position: relative; overflow: hidden; } .pub-section--decorated > .pub-container { position: relative; z-index: 1; } /* ---------------------------------------------------------------------- */ /* PRODUCT CARDS — icon tile + one highlighted/dark variant for rhythm */ /* ---------------------------------------------------------------------- */ .pub-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .pub-grid-3 { grid-template-columns: 1fr; } } .pub-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 760px) { .pub-grid-2 { grid-template-columns: 1fr; } } .pub-product-card { background: linear-gradient(165deg, var(--pub-card), color-mix(in srgb, var(--brand) 3%, var(--pub-card))); border: 1px solid var(--pub-line); border-radius: var(--pub-radius-md); padding: 30px; transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease; box-shadow: var(--pub-shadow-card); } .pub-product-card:hover { transform: translateY(-5px); box-shadow: var(--pub-shadow-lift); } .pub-product-card__icon { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, transparent), color-mix(in srgb, var(--brand-2) 22%, transparent)); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 18px; } .pub-product-card__tab { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--pub-ink-faint); margin-bottom: 8px; display: block; } .pub-product-card h3 { font-size: 1.2rem; margin-bottom: 10px; } .pub-product-card__desc { font-size: .92rem; color: var(--pub-ink-soft); line-height: 1.6; margin-bottom: 18px; min-height: 44px; } /* The one highlighted card per section — visual rhythm, not extra content. */ .pub-product-card--featured { background: linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand-ink) 55%, var(--brand))); color: #fff; border-color: transparent; } .pub-product-card--featured h3, .pub-product-card--featured .pub-ledger-entry__value { color: #fff; } .pub-product-card--featured .pub-product-card__desc, .pub-product-card--featured .pub-ledger-entry__label, .pub-product-card--featured .pub-product-card__tab { color: rgba(255,255,255,.78); } .pub-product-card--featured .pub-product-card__icon { background: rgba(255,255,255,.18); color: #fff; } .pub-product-card--featured .pub-ledger-entry { border-bottom-color: rgba(255,255,255,.18); } /* ---------------------------------------------------------------------- */ /* DARK BAND — "start saving in 3 steps", this section's one high-contrast moment. A real, honest join→save→borrow sequence (numbered markers are justified here — it's an actual ordered process, not decoration). */ /* ---------------------------------------------------------------------- */ .pub-dark-band { background: var(--pub-dark); color: #fff; border-radius: var(--pub-radius-lg); overflow: hidden; position: relative; } .pub-dark-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 55%); pointer-events: none; } .pub-dark-band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; padding: 64px 56px; } @media (max-width: 900px) { .pub-dark-band__grid { grid-template-columns: 1fr; padding: 48px 28px; } } .pub-membership-card { background: var(--pub-dark-card); border: 1px solid var(--pub-dark-line); border-radius: var(--pub-radius-md); padding: 30px; backdrop-filter: blur(6px); } .pub-membership-card__row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; } .pub-membership-card__brand { font-family: 'Jost', sans-serif; font-weight: 700; font-size: 1.05rem; } .pub-membership-card__tag { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; } .pub-membership-card__pattern { font-family: 'IBM Plex Mono', monospace; font-size: 1.15rem; letter-spacing: .28em; color: rgba(255,255,255,.5); margin-bottom: 22px; } .pub-membership-card__foot { display: flex; justify-content: space-between; align-items: flex-end; } .pub-membership-card__name { font-size: .82rem; color: rgba(255,255,255,.85); font-weight: 600; } .pub-membership-card__since { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: rgba(255,255,255,.5); } .pub-step { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--pub-dark-line); } .pub-step:last-child { border-bottom: none; } .pub-step__num { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-2); color: var(--brand-ink); font-family: 'IBM Plex Mono', monospace; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pub-step h3 { color: #fff; font-size: 1.05rem; margin-bottom: 4px; } .pub-step p { color: rgba(255,255,255,.68); font-size: .9rem; line-height: 1.55; } /* ---------------------------------------------------------------------- */ /* TESTIMONIALS */ /* ---------------------------------------------------------------------- */ .pub-testimonial { background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--pub-radius-md); padding: 28px; display: flex; flex-direction: column; gap: 16px; height: 100%; box-shadow: var(--pub-shadow-card); } .pub-testimonial__stars { color: var(--brand-2); filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); font-size: .85rem; letter-spacing: 2px; } .pub-testimonial__quote { font-size: 1rem; color: var(--pub-ink); line-height: 1.6; } .pub-testimonial__person { display: flex; align-items: center; gap: 12px; margin-top: auto; } .pub-testimonial__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; flex-shrink: 0; } .pub-testimonial__name { font-weight: 700; font-size: .88rem; } .pub-testimonial__role { font-size: .78rem; color: var(--pub-ink-faint); } /* ---------------------------------------------------------------------- */ /* STORY — editorial two-column layout (About page) */ /* ---------------------------------------------------------------------- */ .pub-story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; } @media (max-width: 800px) { .pub-story-grid { grid-template-columns: 1fr; gap: 20px; } } .pub-story-grid__mark { font-family: 'Fraunces', serif; font-size: 5rem; line-height: 1; color: color-mix(in srgb, var(--brand) 22%, transparent); margin-bottom: -20px; } /* ---------------------------------------------------------------------- */ /* TEAM */ /* ---------------------------------------------------------------------- */ .pub-team-card { text-align: center; transition: transform .22s cubic-bezier(.2,.8,.3,1); } .pub-team-card:hover { transform: translateY(-5px); } .pub-team-card__photo { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 16px; padding: 4px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .pub-team-card__photo-inner { width: 100%; height: 100%; border-radius: 50%; background: var(--pub-card); display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: 'Jost', sans-serif; font-size: 1.6rem; color: var(--brand-ink); font-weight: 700; } .pub-team-card__photo-inner img { width: 100%; height: 100%; object-fit: cover; } .pub-team-card h3 { font-size: 1.05rem; } .pub-team-card__role { font-size: .82rem; color: var(--brand-ink); font-weight: 600; margin: 4px 0 10px; } .pub-team-card__bio { font-size: .87rem; color: var(--pub-ink-soft); line-height: 1.6; } /* ---------------------------------------------------------------------- */ /* CTA BAND (light — Contact/About closing CTA, distinct from the dark 3-steps band above) */ /* ---------------------------------------------------------------------- */ .pub-cta { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand-ink) 45%, var(--brand))); border-radius: var(--pub-radius-lg); padding: 56px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; color: #fff; } .pub-cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); max-width: 480px; } .pub-cta .pub-btn--primary { background: #fff; color: var(--brand-ink); } .pub-cta .pub-btn--primary:hover { box-shadow: 0 12px 32px rgba(0,0,0,.2); } /* ---------------------------------------------------------------------- */ /* CONTACT FORM */ /* ---------------------------------------------------------------------- */ .pub-contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; } @media (max-width: 860px) { .pub-contact-grid { grid-template-columns: 1fr; } } .pub-field { margin-bottom: 18px; } .pub-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--pub-ink-soft); margin-bottom: 6px; font-family: 'IBM Plex Mono', monospace; letter-spacing: .02em; } .pub-field input, .pub-field textarea { width: 100%; border: 1px solid var(--pub-line); border-radius: var(--pub-radius-sm); padding: 13px 16px; font-family: 'Jost', sans-serif; font-size: .95rem; color: var(--pub-ink); background: var(--pub-card); } .pub-field input:focus, .pub-field textarea:focus { border-color: var(--brand); outline: none; } .pub-field textarea { resize: vertical; min-height: 120px; } .pub-field__error { color: var(--pub-stamp); font-size: .8rem; margin-top: 6px; } .pub-contact-info__item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--pub-line); } .pub-contact-info__item:last-child { border-bottom: none; } .pub-contact-info__icon { width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pub-social { display: flex; gap: 10px; margin-top: 20px; } .pub-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pub-line); display: flex; align-items: center; justify-content: center; color: var(--pub-ink-soft); } .pub-social a:hover { border-color: var(--brand); color: var(--brand-ink); } /* ---------------------------------------------------------------------- */ /* ALERTS */ /* ---------------------------------------------------------------------- */ .pub-alert { border-radius: var(--pub-radius-sm); padding: 14px 18px; font-size: .9rem; margin-bottom: 20px; } .pub-alert--success { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand-ink); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); } .pub-alert--error { background: rgba(166,59,46,.08); color: var(--pub-stamp); border: 1px solid rgba(166,59,46,.25); } /* ---------------------------------------------------------------------- */ /* FOOTER — dark premium background (echoes the mid-page dark band, so the page bookends light→dark→light→dark rather than a random spot of contrast). All footer-scoped overrides below live under .pub-footer so the header's light-background versions of the same classes (.pub-brand, .pub-social) are untouched. */ /* ---------------------------------------------------------------------- */ .pub-footer { background: var(--pub-dark); color: rgba(255,255,255,.72); padding: 64px 0 32px; margin-top: 60px; position: relative; overflow: hidden; } .pub-footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 55%); pointer-events: none; } .pub-footer .pub-container { position: relative; z-index: 1; } .pub-footer .pub-brand { color: #fff; } .pub-footer .pub-body { color: rgba(255,255,255,.65); } .pub-footer__grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr .9fr; gap: 36px; margin-bottom: 40px; } @media (max-width: 900px) { .pub-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 560px) { .pub-footer__grid { grid-template-columns: 1fr; } } .pub-footer h4 { font-family: 'Jost', sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.42); margin-bottom: 14px; font-weight: 700; } .pub-footer__links { display: flex; flex-direction: column; gap: 10px; } .pub-footer__links a { font-size: .9rem; color: rgba(255,255,255,.72); } .pub-footer__links a:hover { color: var(--brand-2); } .pub-footer .pub-social a { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.72); } .pub-footer .pub-social a:hover { border-color: var(--brand-2); color: var(--brand-2); } .pub-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: rgba(255,255,255,.42); } /* ---------------------------------------------------------------------- */ /* MOTION — one orchestrated load moment, nothing looping/ambient */ /* ---------------------------------------------------------------------- */ @keyframes pub-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .pub-animate-in { animation: pub-rise .65s cubic-bezier(.16,.84,.44,1) both; } .pub-animate-in--d1 { animation-delay: .1s; } .pub-animate-in--d2 { animation-delay: .2s; } .pub-animate-in--d3 { animation-delay: .3s; } /* ---------------------------------------------------------------------- */ /* BLOG */ /* ---------------------------------------------------------------------- */ .pub-blog-card { background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--pub-radius-md); overflow: hidden; transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease; box-shadow: var(--pub-shadow-card); display: flex; flex-direction: column; height: 100%; } .pub-blog-card:hover { transform: translateY(-5px); box-shadow: var(--pub-shadow-lift); } .pub-blog-card__thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--brand-2))); position: relative; overflow: hidden; } .pub-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .pub-blog-card__thumb-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 2rem; } .pub-blog-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .pub-blog-card__date { font-family: 'IBM Plex Mono', monospace; font-size: .74rem; color: var(--pub-ink-faint); margin-bottom: 10px; } .pub-blog-card h3 { font-size: 1.08rem; line-height: 1.35; margin-bottom: 10px; } .pub-blog-card__excerpt { font-size: .88rem; color: var(--pub-ink-soft); line-height: 1.6; margin-bottom: 16px; flex: 1; } .pub-blog-card__link { font-size: .85rem; font-weight: 700; color: var(--brand-ink); display: inline-flex; align-items: center; gap: 6px; } .pub-blog-article { max-width: 720px; margin: 0 auto; } .pub-blog-article__thumb { aspect-ratio: 21/9; border-radius: var(--pub-radius-lg); overflow: hidden; margin-bottom: 32px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--brand-2))); display: flex; align-items: center; justify-content: center; position: relative; } .pub-blog-article__thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .pub-blog-article__body { font-size: 1.05rem; line-height: 1.8; color: var(--pub-ink-soft); } .pub-blog-article__body p { margin-bottom: 20px; } /* ---------------------------------------------------------------------- */ /* FAQ ACCORDION */ /* ---------------------------------------------------------------------- */ .pub-faq-item { border: 1px solid var(--pub-line); border-radius: var(--pub-radius-md); margin-bottom: 12px; overflow: hidden; background: var(--pub-card); } .pub-faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: none; text-align: left; cursor: pointer; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 1rem; color: var(--pub-ink); } [dir="rtl"] .pub-faq-item__q { text-align: right; } .pub-faq-item__q i { color: var(--brand); flex-shrink: 0; transition: transform .25s cubic-bezier(.4,0,.2,1); } .pub-faq-item.is-open .pub-faq-item__q i { transform: rotate(180deg); } .pub-faq-item__a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.4,0,.2,1); } .pub-faq-item.is-open .pub-faq-item__a { max-height: 400px; } .pub-faq-item__a-inner { padding: 0 22px 20px; font-size: .92rem; color: var(--pub-ink-soft); line-height: 1.65; } /* ---------------------------------------------------------------------- */ /* PAGINATION — Bootstrap's own .pagination markup (Paginator::useBootstrapFive()), recolored to match this site's brand rather than stock Bootstrap blue. */ /* ---------------------------------------------------------------------- */ .pub .pagination { gap: 4px; } .pub .page-link { border-radius: var(--pub-radius-sm) !important; border-color: var(--pub-line); color: var(--pub-ink-soft); } .pub .page-link:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand-ink); border-color: var(--pub-line); } .pub .page-item.active .page-link { background: var(--brand); border-color: var(--brand); } .pub .page-item.disabled .page-link { color: var(--pub-ink-faint); }