/* Public site stylesheet — mobile first. The brand color comes from --primary (set on from site settings, together with its hex shades --primary-strong / --primary-soft computed by the server, so browsers without color-mix() still get them). color-mix() is only used inside @supports blocks, over plain fallbacks. Contrast (WCAG AA): text and icons over the brand color use --on-primary (white or dark ink, whichever the server finds readable) and hover to --primary-hover; brand-colored text and the focus ring on light backgrounds use --primary-text (>= 4.5:1), brand-colored control borders --primary-border (>= 3:1), never --primary / --primary-strong directly. Grey text stays >= 4.5:1 on --bg, form field borders >= 3:1. */ :root { --primary: #16a34a; --primary-strong: #12863d; /* = color-mix(in srgb, var(--primary) 82%, #000) for the default color */ --primary-soft: #e3f4e9; /* = color-mix(in srgb, var(--primary) 12%, #fff) for the default color */ --on-primary: #ffffff; /* = primary_contrast_colors() in templating.py for the default color */ --primary-text: #117c38; /* idem */ --primary-border: #16a34a; /* idem */ --primary-hover: #12863d; /* idem */ --header: #0f172a; --header-text: #e2e8f0; --bg: #f1f5f9; --surface: #ffffff; --surface-muted: #f8fafc; --text: #0f172a; --text-muted: #526076; --border: #e2e8f0; --border-input: #7f8ea3; --gold: #f59e0b; --gold-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --warning: #b45309; --warning-soft: #fef3c7; --info: #1d4ed8; --info-soft: #dbeafe; --success: #15803d; --success-soft: #dcfce7; --hot: #c2410c; --radius: 14px; --radius-sm: 8px; --shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 16px rgb(15 23 42 / 0.06); --shadow-lg: 0 10px 40px rgb(15 23 42 / 0.18); --focus: 0 0 0 3px var(--primary); /* decorative halo (focused field, selected package); translucent below */ --focus-ring: 3px solid var(--primary-text); /* white in the dark areas, see :focus-visible */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color-scheme: light; } @supports (color: color-mix(in srgb, red, blue)) { :root { --primary-strong: color-mix(in srgb, var(--primary) 82%, #000); --primary-soft: color-mix(in srgb, var(--primary) 12%, #fff); --focus: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; } img { max-width: 100%; display: block; } a { color: var(--primary-text); } h1, h2, h3, p { margin: 0; } button, input, textarea, select { font: inherit; color: inherit; } /* Keyboard focus: a solid outline ring (component box-shadows cannot hide it, overflow: hidden cannot clip it), in --primary-text: >= 4.5:1 on the light backgrounds whatever the brand color, unlike the translucent --focus halo, which a light brand color makes invisible. */ :focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Dark areas: --primary-text can fall under 3:1 on #0f172a / #1e293b, white stays above 14:1. The skip link shows up over the header. */ .skip-link, .site-header, .hero, .carousel, .site-footer { --focus-ring: 3px solid #fff; } [hidden] { display: none !important; } .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; } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; background: var(--surface); color: var(--text); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .skip-link:focus { top: 12px; } .icon { flex-shrink: 0; vertical-align: middle; } .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; } .container--narrow { max-width: 720px; } /* ------------------------------------------------------------------ header & navigation */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--header); color: var(--header-text); box-shadow: 0 2px 10px rgb(0 0 0 / 0.2); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; } .brand__mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--primary); color: var(--on-primary); } .brand__logo { max-height: 40px; width: auto; } .nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; } .nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: 8px 16px 16px; background: var(--header); border-top: 1px solid rgb(255 255 255 / 0.08); } .site-nav.is-open { display: flex; } .site-nav__link { display: flex; align-items: center; gap: 10px; padding: 12px 8px; color: var(--header-text); text-decoration: none; font-weight: 600; border-radius: var(--radius-sm); } @media (hover: hover) { .site-nav__link:hover { background: rgb(255 255 255 / 0.08); color: #fff; } } @media (min-width: 768px) { .nav-toggle { display: none; } .site-nav { display: flex; position: static; flex-direction: row; gap: 4px; padding: 0; border: 0; } .site-nav__link { padding: 8px 12px; } } .site-main { flex: 1; padding-bottom: 40px; } /* ------------------------------------------------------------------ buttons, badges, chips */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 2px solid transparent; border-radius: 999px; font-weight: 700; text-align: center; /* labels that wrap on narrow phones */ text-decoration: none; cursor: pointer; transition: background-color 0.15s, transform 0.1s, box-shadow 0.15s; } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: 0.65; cursor: not-allowed; } .btn[aria-busy="true"] { opacity: 0.65; cursor: progress; } .btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 14px rgb(15 23 42 / 0.18); } @supports (color: color-mix(in srgb, red, blue)) { .btn--primary { box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent); } } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border); } /* Hover only where a real pointer hovers: on touch screens :hover sticks after a tap. */ @media (hover: hover) { .btn--primary:hover { background: var(--primary-hover); } .btn--ghost:hover { border-color: var(--primary-border); color: var(--primary-text); } } .btn--lg { min-height: 52px; font-size: 1.05rem; } .btn--xl { min-height: 60px; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.03em; } .btn--block { display: flex; width: 100%; } /* Keyboard focus: the outline ring of :focus-visible, restated for the components (never a box-shadow, which the variants' own box-shadows, e.g. .btn--primary, would override). */ .btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .nowrap { white-space: nowrap; } .link-button { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; text-align: left; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; line-height: 1.4; white-space: nowrap; background: var(--surface-muted); color: var(--text-muted); } .badge--success { background: var(--success-soft); color: var(--success); } .badge--hot { background: #ffedd5; color: var(--hot); } .badge--info { background: var(--info-soft); color: var(--info); } .badge--warning { background: var(--warning-soft); color: var(--warning); } .badge--danger { background: var(--danger-soft); color: #b91c1c; /* --danger (#dc2626) is under 4.5:1 on --danger-soft */ } .badge--neutral { background: #e2e8f0; color: #334155; } .badge--outline { background: transparent; border: 1px solid var(--border); } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .chips--scroll { max-height: 320px; overflow-y: auto; } .chip { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-text); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; font-size: 0.95rem; } .chip--gold { background: var(--gold-soft); color: #92400e; } /* ------------------------------------------------------------------ sections & cards */ .section { padding: 32px 0; } .section--muted { background: var(--surface); border-block: 1px solid var(--border); } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .section__title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 1.3rem; letter-spacing: -0.01em; } .section__head .section__title { margin-bottom: 0; } .section__title--spaced { margin-top: 32px; } .section__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; white-space: nowrap; } .page-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -0.02em; } .page-title a { color: inherit; text-decoration: none; } .page-title--compact { font-size: 1.4rem; } .page-intro { margin-bottom: 20px; color: var(--text-muted); } .empty-state { padding: 24px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); text-align: center; } .card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } .campaign-card { overflow: hidden; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s; } @media (hover: hover) { .campaign-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } } /* The whole card is one link; its focus ring is drawn around the card (an outline is neither hidden by the card's box-shadow nor clipped by its overflow: hidden, unlike a ring on the link itself). */ .campaign-card:focus-within { outline: var(--focus-ring); outline-offset: 2px; } .campaign-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .campaign-card__link:focus-visible { outline: none; } .campaign-card__media { position: relative; aspect-ratio: 16 / 10; background: #e2e8f0; } .campaign-card__media img { width: 100%; height: 100%; object-fit: cover; } .campaign-card--closed .campaign-card__media img { filter: grayscale(0.4); } .campaign-card__badge { position: absolute; top: 10px; left: 10px; } .campaign-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; } .campaign-card__title { font-size: 1.1rem; line-height: 1.3; } .campaign-card__subtitle, .campaign-card__meta { color: var(--text-muted); font-size: 0.9rem; } .campaign-card__meta { display: flex; align-items: center; gap: 6px; } .campaign-card__price strong { color: var(--primary-text); font-size: 1.2rem; white-space: nowrap; } .campaign-card__price s { margin-left: 6px; color: var(--text-muted); } .campaign-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--primary-text); font-weight: 700; } .media-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 180px; background: linear-gradient(135deg, #1e293b, var(--primary)); color: rgb(255 255 255 / 0.85); } /* ------------------------------------------------------------------ hero (home) */ .hero { padding: 24px 0 32px; background: linear-gradient(180deg, var(--header) 0%, #1e293b 100%); color: #fff; } .hero--empty { padding: 56px 0; text-align: center; } .hero--empty .hero__subtitle { margin: 8px auto 20px; max-width: 520px; } .hero__grid { display: grid; gap: 20px; } @media (min-width: 860px) { .hero__grid { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 36px; } } .hero__media { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10; box-shadow: var(--shadow-lg); } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__body { display: flex; flex-direction: column; gap: 12px; } .hero__eyebrow { display: flex; gap: 6px; } .hero__title { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; } .hero__title a { color: inherit; text-decoration: none; } .hero__subtitle { color: #cbd5e1; } .hero .progress__label { color: #cbd5e1; } .hero .meta-line { color: #cbd5e1; } .price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .price-line__value { font-size: 1.8rem; color: #4ade80; white-space: nowrap; } .price-line__old { color: #94a3b8; white-space: nowrap; } .meta-line { display: flex; align-items: center; gap: 8px; color: var(--text-muted); } /* ------------------------------------------------------------------ progress & steps */ .progress { display: flex; flex-direction: column; gap: 6px; } .progress__track { height: 14px; overflow: hidden; border-radius: 999px; background: #e2e8f0; } .progress--compact .progress__track { height: 8px; } .progress__bar { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--primary); transition: width 0.6s ease; } @supports (color: color-mix(in srgb, red, blue)) { .progress__bar { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #facc15)); } } .progress__label { color: var(--text-muted); font-size: 0.9rem; } .progress__label strong { color: var(--text); } .hero .progress__label strong { color: #fff; } .steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } .campaign .steps { grid-template-columns: repeat(2, 1fr); } } .steps__item { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .steps__item p { color: var(--text-muted); font-size: 0.9rem; } .steps__number { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; } /* ------------------------------------------------------------------ winners */ .winner-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .winner-list { grid-template-columns: repeat(2, 1fr); } } .winner-card { display: flex; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .winner-card__icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); color: #b45309; } .winner-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .winner-card__name { font-weight: 800; font-size: 1.05rem; } .winner-card__rank { font-weight: 700; } .winner-card__meta { color: var(--text-muted); font-size: 0.85rem; } /* ------------------------------------------------------------------ campaign page */ .campaign { padding: 16px 0 24px; } .carousel { position: relative; overflow: hidden; border-radius: var(--radius); background: #0f172a; box-shadow: var(--shadow); } .carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; aspect-ratio: 16 / 10; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; } .carousel__slide img { width: 100%; height: 100%; object-fit: cover; } .carousel__nav { position: absolute; top: 50%; display: none; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(15 23 42 / 0.55); color: #fff; transform: translateY(-50%); cursor: pointer; } @media (hover: hover) { .carousel__nav { display: grid; } } .carousel__nav--prev { left: 10px; } .carousel__nav--next { right: 10px; } .carousel__dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; } .carousel__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.55); cursor: pointer; transition: width 0.2s; } .carousel__dot[aria-current="true"] { width: 24px; background: #fff; } .campaign__header { margin-top: 18px; } .campaign__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .campaign__title { font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; } .campaign__subtitle { margin-top: 4px; color: var(--text-muted); font-size: 1.05rem; } .price-block { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .price-block__main { font-size: 1.1rem; } .price-block__main strong { color: var(--primary-text); font-size: 1.9rem; letter-spacing: -0.02em; white-space: nowrap; } .price-block__old { display: flex; align-items: center; gap: 6px; color: var(--text-muted); } .campaign .meta-line { margin: 12px 0; } .share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; } .share__label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 600; } .share__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; } .share__btn--whatsapp { color: #15803d; } .share__btn--facebook { color: #1d4ed8; } .share__btn--telegram { color: #0369a1; } .share__btn.is-done { border-color: var(--primary-border); color: var(--primary-text); } .campaign__progress { margin: 8px 0 20px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .buy { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; border: 2px solid var(--primary-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .buy__title { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; } .buy__limits, .buy__hint { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.85rem; } .buy__total { font-size: 1.15rem; text-align: center; } .buy__total strong { color: var(--primary-text); font-size: 1.6rem; white-space: nowrap; } .buy__note { display: block; color: var(--text-muted); font-size: 0.85rem; } .packages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 560px) { .packages { grid-template-columns: repeat(3, 1fr); } } .package { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 8px 12px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); cursor: pointer; transition: border-color 0.15s, background-color 0.15s, transform 0.1s; } @media (hover: hover) { .package:not(:disabled):hover { border-color: var(--primary-border); } } .package:disabled { opacity: 0.45; cursor: not-allowed; } .package--highlight { border-color: var(--gold); background: #fffbeb; } .package[aria-pressed="true"] { border-color: var(--primary-text); /* >= 4.5:1: clearly apart from the gold border of .package--highlight */ background: var(--primary-soft); box-shadow: var(--focus); } .package__label { position: absolute; top: -10px; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: var(--text); /* white is only 2.1:1 on the gold */ font-size: 0.72rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; } .package__qty strong { font-size: 1.4rem; } .package__price { color: var(--primary-text); font-size: 1.1rem; font-weight: 800; white-space: nowrap; } .package__unit, .package__save { color: var(--text-muted); font-size: 0.78rem; } .package__save { color: #166534; /* darker than --success: still >= 4.5:1 on the selected package's --primary-soft */ font-weight: 700; } /* Equal columns sized by the number of shortcuts (.quick-select--N, N = 1–6): up to four fit in one row even at 320px, five or six use two rows of three on phones. No orphan button on its own row. */ .quick-select { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .quick-select--1 { grid-template-columns: minmax(0, 1fr); } .quick-select--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quick-select--3, .quick-select--5, .quick-select--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 560px) { .quick-select--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .quick-select--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .quick-select__btn { min-width: 0; min-height: 48px; padding: 0 2px; border: 2px solid var(--primary-border); border-radius: var(--radius-sm); background: var(--surface); color: var(--primary-text); font-size: 1.05rem; font-weight: 800; white-space: nowrap; cursor: pointer; } @media (hover: hover) { .quick-select__btn:not(:disabled):hover { background: var(--primary); color: var(--on-primary); } } .quick-select__btn:disabled, .qty__btn:disabled { opacity: 0.45; cursor: not-allowed; } .qty { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; } .qty__btn { display: grid; place-items: center; min-height: 52px; border: 0; border-radius: var(--radius-sm); background: var(--header); color: #fff; cursor: pointer; } .qty__input { width: 100%; min-height: 52px; border: 2px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface); font-size: 1.4rem; font-weight: 800; text-align: center; appearance: textfield; } .qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { appearance: none; margin: 0; } /* Same outline ring as .btn: a selected package already shows the --focus halo, so focus must differ. */ .package:focus-visible, .quick-select__btn:focus-visible, .qty__btn:focus-visible, .share__btn:focus-visible, .carousel__nav:focus-visible, .carousel__dot:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* Over the photos: a dark band between the control and its white ring keeps the ring visible on any image. */ .carousel__nav:focus-visible, .carousel__dot:focus-visible { box-shadow: 0 0 0 2px #0f172a; } .campaign__section { margin-top: 28px; } .campaign__section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 1.25rem; } .campaign__section-intro { margin: -4px 0 12px; color: var(--text-muted); } .prose { padding: 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow-wrap: anywhere; } .prose h2 { margin: 18px 0 6px; font-size: 1.1rem; } .prose p + p { margin-top: 10px; } .prize-list, .instant-list, .ranking { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .prize { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .prize__rank { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); color: #92400e; font-weight: 800; } .prize__label { color: var(--text-muted); font-weight: 600; } .prize__title { font-weight: 700; } .prize__description { color: var(--text-muted); font-size: 0.9rem; } .prize__winner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } .instant-list { grid-template-columns: 1fr; } @media (min-width: 560px) { .instant-list { grid-template-columns: repeat(2, 1fr); } } .instant { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 12px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .instant__title { font-weight: 700; } .instant__status { grid-column: 2; color: var(--success); font-size: 0.85rem; font-weight: 700; } .instant__status--won { color: #92400e; /* the won card is faded (opacity): #b45309 would drop under 4.5:1 */ } .instant--won { opacity: 0.85; } .ranking__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .ranking__medal { width: 32px; font-size: 1.4rem; font-weight: 800; text-align: center; } .ranking__name { flex: 1; font-weight: 700; } .ranking__qty { color: var(--primary-text); font-weight: 800; } /* ------------------------------------------------------------------ notices & forms */ .notice { display: flex; gap: 12px; margin: 16px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .notice p + p { margin-top: 4px; } .notice__title { font-size: 1.1rem; font-weight: 800; } .notice--info { background: var(--info-soft); color: #1e3a8a; } .notice--success { background: var(--success-soft); color: #14532d; } .notice--warning { background: var(--warning-soft); color: #78350f; } .notice--gold { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #78350f; } .notice--neutral { background: #e2e8f0; color: #1e293b; } .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-weight: 700; } .field__optional, .field__help { color: var(--text-muted); font-weight: 400; font-size: 0.85rem; } .field__input { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface); font-size: 1rem; } .field__input:focus { border-color: var(--primary-text); outline: none; box-shadow: var(--focus); } .field__input[aria-invalid="true"] { border-color: var(--danger); } .check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; cursor: pointer; } /* Fixed size and no browser margins: long labels cannot squeeze the box, and help lines can align with the text. */ .check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary-border); } /* A checkbox with a help line aligned under its label text (box 20px + gap 10px). */ .check-option__help { display: block; margin: 4px 0 0 30px; } .form-error { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); color: #991b1b; font-weight: 600; } /* ------------------------------------------------------------------ checkout modal */ .modal { width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); } .modal::backdrop { background: rgb(15 23 42 / 0.6); } .modal__form { display: flex; flex-direction: column; gap: 14px; padding: 20px; } .modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .modal__title { font-size: 1.3rem; } .modal__close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-muted); cursor: pointer; } .modal__note { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.8rem; } .checkout-summary { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-text); font-weight: 700; } /* ------------------------------------------------------------------ sticky purchase bar (phones) */ /* campaign.js adds .is-visible once the main "Participar" button has scrolled out of view, and .has-buy-bar on (--buy-bar-height measured by the script) whenever the bar may show, so the end of the page (footer) always scrolls clear of it, however it is reached, and what gets scrolled into view (focus, anchors) lands above it. Hidden with visibility, not display, so it can slide in; while hidden it is neither focusable nor announced. */ .buy-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -6px 20px rgb(15 23 42 / 0.12); transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; } .buy-bar.is-visible { transform: none; visibility: visible; transition: transform 0.2s ease; } /* Wraps only as a last resort (a total too long to share the row even at the smallest size): the button then goes under it, on the right, instead of covering it. */ .buy-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .buy-bar__summary { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .buy-bar__quantity { color: var(--text-muted); font-size: 0.85rem; } /* Smaller on the narrowest phones, where a total of R$ 100.000,00 or more must still fit beside the button. */ .buy-bar__total strong { color: var(--primary-text); font-size: clamp(1rem, 5.5vw, 1.3rem); white-space: nowrap; } .buy-bar__cta { flex-shrink: 0; min-height: 50px; margin-left: auto; padding-inline: 22px; text-transform: uppercase; letter-spacing: 0.03em; } @media (max-width: 359.98px) { .buy-bar__cta { padding-inline: 14px; letter-spacing: 0; } } html.has-buy-bar { scroll-padding-bottom: var(--buy-bar-height, 80px); } html.has-buy-bar body { padding-bottom: var(--buy-bar-height, 80px); } /* Exact complement of BUY_BAR_MEDIA in campaign.js, which then never adds .has-buy-bar: no bar on wide screens nor on short ones (phones in landscape, high zoom), where it and the sticky header would cover about half the page. */ @media (min-width: 768px), (max-height: 479.98px) { .buy-bar { display: none; } } @media (prefers-reduced-motion: reduce) { .buy-bar, .buy-bar.is-visible { transform: none; transition: none; } } /* ------------------------------------------------------------------ order page */ .order { padding: 20px 0; } .order__header { margin-bottom: 16px; } .order__code { color: var(--text-muted); } .order__status { margin-top: 4px; } .countdown { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--header); color: #fff; font-size: 1.1rem; } .countdown__value { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 1.8rem; letter-spacing: 0.04em; } .pix { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 16px 0; padding: 20px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .pix__qr { width: min(260px, 100%); height: auto; image-rendering: pixelated; border: 1px solid var(--border); border-radius: var(--radius-sm); } .pix__label { display: flex; align-items: center; gap: 6px; align-self: flex-start; font-weight: 700; } .pix__code { width: 100%; padding: 10px 12px; border: 2px dashed var(--border-input); border-radius: var(--radius-sm); background: var(--surface-muted); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.85rem; word-break: break-all; resize: none; } .pix__link { font-size: 0.9rem; } .pix-steps { display: grid; gap: 8px; margin: 0 0 16px; padding: 16px 16px 16px 36px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .order__waiting { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); font-weight: 600; } .spinner { width: 18px; height: 18px; border: 3px solid var(--border); border-top-color: var(--primary-border); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .dev-box { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 14px; border: 2px dashed var(--warning); border-radius: var(--radius); background: var(--warning-soft); color: #78350f; } .won-list { display: grid; gap: 6px; margin: 8px 0; padding: 0; list-style: none; } .order__numbers { margin: 20px 0; padding: 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } /* Paid order: "Ver meus bilhetes" on its own row, the other two side by side when they fit ("Compartilhar" is left out once the campaign stops selling: "Voltar para a campanha" then takes the whole row too). */ .order-actions { display: grid; gap: 10px; margin: 20px 0; } @media (min-width: 560px) { .order-actions { grid-template-columns: 1fr 1fr; } .order-actions > :first-child, .order-actions > :nth-child(2):last-child { grid-column: 1 / -1; } } /* Inline flow (not flex), so a wrapped sentence stays centred together with its icon. */ .order-help { margin-top: 20px; color: var(--text-muted); text-align: center; } .order-help .icon { margin-right: 4px; vertical-align: -3px; } .order-help a { font-weight: 700; } .summary { margin-top: 20px; padding: 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .summary__title { margin-bottom: 10px; font-size: 1.1rem; } .summary__list { display: grid; gap: 8px; margin: 0; } .summary__list div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .summary__list dt { color: var(--text-muted); } .summary__list dd { margin: 0; text-align: right; font-weight: 600; } .summary__footer { margin-top: 12px; } .summary__footer a { display: inline-flex; align-items: center; gap: 6px; } /* ------------------------------------------------------------------ my tickets */ .lookup { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } /* WhatsApp and CPF side by side when they fit (each at least 180px, so a full "(11) 98765-4321" stays visible), stacked on narrow phones; the button takes its own full-width row until everything fits. */ .lookup__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .lookup__field { flex: 1 1 180px; min-width: 0; } .lookup__submit { flex: 1 1 100%; min-height: 48px; border-radius: var(--radius-sm); } @media (min-width: 640px) { .lookup__submit { flex: 0 0 auto; } } .lookup__note { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.85rem; } .lookup-results { display: grid; gap: 12px; margin-top: 20px; } .ticket-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .ticket-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ticket-card__campaign { color: var(--text); font-weight: 800; text-decoration: none; } .ticket-card__meta { color: var(--text-muted); font-size: 0.9rem; } .ticket-card__link { font-weight: 600; } /* ------------------------------------------------------------------ error page */ .error-page { text-align: center; } .error-page .page-title { justify-content: center; } .error-page__code { color: var(--primary-text); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* ------------------------------------------------------------------ footer */ .site-footer { padding-top: 32px; background: var(--header); color: #cbd5e1; font-size: 0.92rem; } .site-footer a { color: #e2e8f0; } .site-footer__grid { display: grid; gap: 24px; } @media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer__name, .site-footer__title { margin-bottom: 8px; color: #fff; font-weight: 800; } .site-footer__text { margin-bottom: 8px; } .site-footer__payment { display: flex; align-items: center; gap: 6px; } .site-footer__links, .site-footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .site-footer__contact a { display: inline-flex; align-items: center; gap: 6px; } .site-footer__feedback { color: #86efac; font-size: 0.85rem; } .site-footer__bottom { margin-top: 24px; padding-top: 16px; padding-bottom: 24px; border-top: 1px solid rgb(255 255 255 / 0.08); color: #94a3b8; font-size: 0.8rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }