/* ========================================================================== * Sano landing page — design tokens + custom classes (Bootstrap 5 utilities * cover everything else). Loaded after Bootstrap so :root variables override. * ========================================================================== */ :root { --sano-bg: #fdfcf7; --sano-fg: #0f172a; --sano-card: #ffffff; --sano-muted: #f1f3f7; --sano-border: #e5e7eb; --sano-primary: #dc2626; --sano-secondary: #0b1220; --sano-accent: #f59e0b; --sano-success: #16a34a; --sano-gradient-hero: linear-gradient(135deg, #0b1220 0%, #1e2a44 60%, #2a3a5f 100%); --sano-shadow-card: 0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --sano-shadow-elevated: 0 12px 30px rgba(15, 23, 42, .12); } /* All public pages inherit the cream background + sans-serif typography via the .sano-public class on . Operator pages (admin) keep their own chrome through base_admin.html.twig. */ .sano-public { background: var(--sano-bg); color: var(--sano-fg); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .sano-public h1, .sano-public h2, .sano-public h3, .sano-public h4, .sano-public h5, .sano-public h6 { font-family: inherit; } .sano-public main { min-height: calc(100vh - 220px); } /* User avatar in navbar */ .sano-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sano-secondary); color: #fff; font-size: .78rem; font-weight: 600; } /* Filter bar on /offers */ .sano-filter-bar { border-bottom: 1px solid var(--sano-border); } .sano-filter-bar .form-control, .sano-filter-bar .form-select, .sano-filter-bar .input-group-text { border-color: var(--sano-border); } /* Auth card (login, register, forgot, reset) */ .sano-auth-shell { min-height: calc(100vh - 220px); display: flex; align-items: center; padding: 3rem 0; } .sano-auth-card { background: #fff; border-radius: 1rem; box-shadow: var(--sano-shadow-card); padding: 2rem; } @media (min-width: 768px) { .sano-auth-card { padding: 2.5rem 2.75rem; } } .sano-auth-card .form-control { border-radius: .75rem; } .sano-auth-card .btn-danger { background: var(--sano-primary); border-color: var(--sano-primary); } .sano-auth-card .btn-danger:hover, .sano-auth-card .btn-danger:focus { background: #b91c1c; border-color: #b91c1c; } /* Sticky translucent navbar */ .sano-nav { background: rgba(253, 252, 247, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--sano-border); } .sano-nav .sano-logo-tile { width: 32px; height: 32px; background: var(--sano-gradient-hero); color: #fff; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .sano-nav .sano-eyebrow { color: rgba(15, 23, 42, .55); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1; margin-top: 2px; } .sano-nav { --bs-navbar-color: var(--sano-fg); --bs-navbar-hover-color: var(--sano-primary); --bs-navbar-active-color: var(--sano-primary); --bs-nav-link-color: var(--sano-fg); --bs-nav-link-hover-color: var(--sano-primary); } .sano-nav .nav-link { color: var(--sano-fg); font-weight: 500; } .sano-nav .nav-link:hover, .sano-nav .nav-link:focus { color: var(--sano-primary); } .sano-nav .btn-danger { background: var(--sano-primary); border-color: var(--sano-primary); } .sano-nav .btn-danger:hover, .sano-nav .btn-danger:focus { background: #b91c1c; border-color: #b91c1c; } /* Hero */ .sano-hero { background: var(--sano-gradient-hero); color: #fff; min-height: 520px; } .sano-hero .badge-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; } .sano-hero .badge-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sano-primary); box-shadow: 0 0 0 4px rgba(220, 38, 38, .25); } .sano-hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; } .sano-hero .lead { opacity: .85; } .sano-hero .btn-danger { background: var(--sano-primary); border-color: var(--sano-primary); } .sano-hero .btn-danger:hover, .sano-hero .btn-danger:focus { background: #b91c1c; border-color: #b91c1c; } /* Stat strip in hero */ .sano-stat-strip { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1rem; } .sano-stat-strip > [class*="col-"] + [class*="col-"] { border-left: 1px solid rgba(255, 255, 255, .1); } @media (max-width: 767.98px) { .sano-stat-strip > [class*="col-"] + [class*="col-"] { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); } } .sano-stat-strip .stat-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .65); } .sano-stat-strip .stat-value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; } /* Section: live campaigns */ .sano-section-grid { background: #f5f6f8; } /* Segmented sort pills */ .sano-sort-pills { background: #ffffff; border-radius: 999px; padding: .25rem; box-shadow: var(--sano-shadow-card); display: inline-flex; gap: .15rem; } .sano-sort-pills .nav-link { color: rgba(15, 23, 42, .65); border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; font-weight: 500; } .sano-sort-pills .nav-link.active { background: #ffffff; color: var(--sano-fg); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); } /* Campaign card */ .sano-campaign-card { background: var(--sano-card); box-shadow: var(--sano-shadow-card); transition: transform .3s ease, box-shadow .3s ease; } .sano-campaign-card:hover { transform: translateY(-4px); box-shadow: var(--sano-shadow-elevated); } .sano-campaign-card .card-body { display: flex; flex-direction: column; } .sano-campaign-card .campaign-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f1f3f7; } .sano-campaign-card .campaign-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Status pill: top-left small chip; sport pill: top-right small chip. Both are absolutely positioned children of .campaign-cover so their size is determined by their content, not by the cover's dimensions. */ .sano-campaign-card .pill-status, .sano-campaign-card .pill-sport { position: absolute; top: .75rem; font-size: .72rem; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .3rem; background: #ffffff; line-height: 1; white-space: nowrap; z-index: 2; } .sano-campaign-card .pill-status { left: .75rem; } .sano-campaign-card .pill-sport { right: .75rem; } .sano-campaign-card .pill-status.bg-success-subtle { background: #dcfce7 !important; } .sano-campaign-card .pill-status.bg-danger-subtle { background: #fee2e2 !important; } .sano-campaign-card .pill-status.bg-secondary-subtle { background: #e2e8f0 !important; } .sano-campaign-card .campaign-tagline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; text-overflow: ellipsis; line-height: 1.5em; height: calc(1.5em * 4); min-height: calc(1.5em * 4); max-height: calc(1.5em * 4); } .sano-campaign-card .progress-bar.sano-bar-funded { background: var(--sano-success); } .sano-campaign-card .btn-sponsor { margin-top: auto; background: var(--sano-secondary); border-color: var(--sano-secondary); color: #fff; } .sano-campaign-card .btn-sponsor:hover, .sano-campaign-card .btn-sponsor:focus { background: #050a14; border-color: #050a14; color: #fff; } /* How it works */ .sano-step-number { font-size: 4rem; line-height: 1; color: rgba(220, 38, 38, .18); font-weight: 800; } /* For-clubs dark panel */ .sano-clubs-panel { background: var(--sano-secondary); color: #fff; } .sano-clubs-panel .stat-tile { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: .75rem; } .sano-clubs-panel .eyebrow { color: var(--sano-accent); font-size: .72rem; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; } .sano-clubs-panel .btn-danger { background: var(--sano-primary); border-color: var(--sano-primary); } /* Empty state */ .sano-empty-state { border: 2px dashed var(--sano-border); background: #ffffff; } /* Section eyebrows in light sections */ .sano-eyebrow-primary { color: var(--sano-primary); font-size: .72rem; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }