/* ═══════════════════════════════════════════════════════════════════════════ brand.css — bahasa visual tiketlari.id (beranda, header, footer) Dimuat SETELAH vendor/bootstrap dan SETELAH css/app.css. Isi berkas ini berasal dari berkas contoh "tiketlari.id — Satu Platform Tiket Lari Online Bootstrap.html" (Bootstrap 5.3.8 dikompilasi dengan Sass + variabel brand IRM), dengan tiga penyesuaian yang disengaja: 1. Kelas `.hero` contoh diganti `.hero-lp`. `.hero` sudah dipakai halaman /organize, /products, dan /events/{slug} dengan gaya berbeda dari app.css; memakai nama yang sama akan merombak halaman-halaman itu diam-diam. 2. Gaya dibagi dua lingkup. Komponen katalog publik — judul uppercase, eyebrow, kartu event `.ev`, poster, lencana ikon `.ico` — dilingkupi `.catalog`, kelas yang dibawa beranda, /events, dan /events/{slug} sekaligus. Sisanya (hero, bagian bertema, animasi masuk `.rv`) tetap `#lp` dan hanya hidup di beranda. Tidak ada satu pun yang bocor ke 20 halaman lain yang memakai layouts.app. 3. Navbar dan footer dikunci ke `#nav` / `#siteFooter` — dua komponen itu memang global, tapi tidak boleh menyerempet aturan app.css yang lama. Berkas ini dihasilkan /tmp/mk-brand.py dari salinan contoh di /tmp/ref-tiketlari; sunting berkas ini langsung kalau perlu, tapi catat bahwa ia bukan lagi salinan apa adanya dari contoh. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Tinggi navbar fixed-top. Dipakai .page-with-fixed-nav supaya isi halaman yang bukan beranda tidak tersembunyi di balik navbar. */ --nav-h: 72px; /* Dua gradasi brand. Keduanya didefinisikan di aturan PERTAMA kustom.css (`:root{--gu:…;--gl:…}`), yang ikut terpotong saat berkas contoh diiris dari style0.css — tanpa keduanya .poster-0/.poster-1/.ico/.ph1/.ph2 kehilangan latarnya. */ --gu: linear-gradient(135deg, #D11D3B, #582A7C); --gl: linear-gradient(135deg, #1B429A, #00A9E0); } /* Lompatan anchor berhenti di bawah navbar fixed-top, bukan di baliknya. Dipakai scrollspy Bootstrap (data-bs-smooth-scroll) yang menghormati scroll-padding. */ html { scroll-padding-top: calc(var(--nav-h) + 12px); } /* Latar halaman mengikuti token brand, bukan #f8f9fa yang dipaku app.css tanpa syarat tema: aturan itu membuat halaman tetap berlatar terang di mode gelap setelah aturan body khusus tema yang lama dihapus. */ body { background-color: var(--bs-body-bg); } /* Teks isi memakai Montserrat seperti contoh. app.css sudah menyebut Montserrat di `--font-secondary` tapi menaruh Roboto di depan, jadi Roboto selalu menang dan Montserrat tidak pernah diunduh. Berkas ini dimuat sesudah app.css, dan kedua aturan itu sama-sama `:root`, jadi yang belakangan yang menang. Judul tidak ikut berubah: aturan `h1..h6` di app.css memilih `--font-primary` (Oswald) dan tidak tersentuh. Roboto tetap jadi cadangan pertama, jadi selama unduhan Montserrat belum selesai — atau bila permintaan ke Google Fonts gagal — teks tidak pernah kosong. */ :root { --font-secondary: 'Montserrat', 'Roboto', system-ui, sans-serif; } /* ── Token brand: palet, radius, dan font dari kompilasi Sass contoh ───────── */ :root,[data-bs-theme=light]{--bs-blue: #0d6efd;--bs-indigo: #6610f2;--bs-purple: #6f42c1;--bs-pink: #d63384;--bs-red: #dc3545;--bs-orange: #fd7e14;--bs-yellow: #ffc107;--bs-green: #198754;--bs-teal: #20c997;--bs-cyan: #0dcaf0;--bs-black: #121212;--bs-white: #fff;--bs-gray: #6c757d;--bs-gray-dark: #343a40;--bs-gray-100: #f8f9fa;--bs-gray-200: #e9ecef;--bs-gray-300: #dee2e6;--bs-gray-400: #ced4da;--bs-gray-500: #adb5bd;--bs-gray-600: #6c757d;--bs-gray-700: #495057;--bs-gray-800: #343a40;--bs-gray-900: #212529;--bs-primary: #C82333;--bs-secondary: #2B328C;--bs-success: #198754;--bs-info: #00A9E0;--bs-warning: #ffc107;--bs-danger: #dc3545;--bs-light: #F3F5FA;--bs-dark: #0B1120;--bs-primary-rgb: 200, 35, 51;--bs-secondary-rgb: 43, 50, 140;--bs-success-rgb: 25, 135, 84;--bs-info-rgb: 0, 169, 224;--bs-warning-rgb: 255, 193, 7;--bs-danger-rgb: 220, 53, 69;--bs-light-rgb: 243, 245, 250;--bs-dark-rgb: 11, 17, 32;--bs-primary-text-emphasis: rgb(31.3725490196%, 5.4901960784%, 8%);--bs-secondary-text-emphasis: rgb(6.7450980392%, 7.8431372549%, 21.9607843137%);--bs-success-text-emphasis: rgb(3.9215686275%, 21.1764705882%, 13.1764705882%);--bs-info-text-emphasis: rgb(0%, 26.5098039216%, 35.137254902%);--bs-warning-text-emphasis: rgb(40%, 30.2745098039%, 1.0980392157%);--bs-danger-text-emphasis: rgb(34.5098039216%, 8.3137254902%, 10.8235294118%);--bs-light-text-emphasis: #495057;--bs-dark-text-emphasis: #495057;--bs-primary-bg-subtle: rgb(95.6862745098%, 82.7450980392%, 84%);--bs-secondary-bg-subtle: rgb(83.3725490196%, 83.9215686275%, 90.9803921569%);--bs-success-bg-subtle: rgb(81.9607843137%, 90.5882352941%, 86.5882352941%);--bs-info-bg-subtle: rgb(80%, 93.2549019608%, 97.568627451%);--bs-warning-bg-subtle: rgb(100%, 95.137254902%, 80.5490196078%);--bs-danger-bg-subtle: rgb(97.2549019608%, 84.1568627451%, 85.4117647059%);--bs-light-bg-subtle: rgb(98.6274509804%, 98.8235294118%, 99.0196078431%);--bs-dark-bg-subtle: #ced4da;--bs-primary-border-subtle: rgb(91.3725490196%, 65.4901960784%, 68%);--bs-secondary-border-subtle: rgb(66.7450980392%, 67.8431372549%, 81.9607843137%);--bs-success-border-subtle: rgb(63.9215686275%, 81.1764705882%, 73.1764705882%);--bs-info-border-subtle: rgb(60%, 86.5098039216%, 95.137254902%);--bs-warning-border-subtle: rgb(100%, 90.2745098039%, 61.0980392157%);--bs-danger-border-subtle: rgb(94.5098039216%, 68.3137254902%, 70.8235294118%);--bs-light-border-subtle: #e9ecef;--bs-dark-border-subtle: #adb5bd;--bs-white-rgb: 255, 255, 255;--bs-black-rgb: 18, 18, 18;--bs-font-sans-serif: Montserrat, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family: var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight: 400;--bs-body-line-height: 1.5;--bs-body-color: #1d2238;--bs-body-color-rgb: 29, 34, 56;--bs-body-bg: #fff;--bs-body-bg-rgb: 255, 255, 255;--bs-emphasis-color: #121212;--bs-emphasis-color-rgb: 18, 18, 18;--bs-secondary-color: rgba(29, 34, 56, 0.75);--bs-secondary-color-rgb: 29, 34, 56;--bs-secondary-bg: #e9ecef;--bs-secondary-bg-rgb: 233, 236, 239;--bs-tertiary-color: rgba(29, 34, 56, 0.5);--bs-tertiary-color-rgb: 29, 34, 56;--bs-tertiary-bg: #F3F5FA;--bs-tertiary-bg-rgb: 243, 245, 250;--bs-heading-color: #2B328C;--bs-link-color: #2B328C;--bs-link-color-rgb: 43, 50, 140;--bs-link-decoration: underline;--bs-link-hover-color: rgb(13.4901960784%, 15.6862745098%, 43.9215686275%);--bs-link-hover-color-rgb: 34, 40, 112;--bs-code-color: #d63384;--bs-highlight-color: #1d2238;--bs-highlight-bg: rgb(100%, 95.137254902%, 80.5490196078%);--bs-border-width: 1px;--bs-border-style: solid;--bs-border-color: #E3E7F1;--bs-border-color-translucent: rgba(18, 18, 18, 0.175);--bs-border-radius: 0.75rem;--bs-border-radius-sm: 0.25rem;--bs-border-radius-lg: 1.25rem;--bs-border-radius-xl: 1.5rem;--bs-border-radius-xxl: 2rem;--bs-border-radius-2xl: var(--bs-border-radius-xxl);--bs-border-radius-pill: 50rem;--bs-box-shadow: 0 0.5rem 1rem rgba(18, 18, 18, 0.15);--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(18, 18, 18, 0.075);--bs-box-shadow-lg: 0 1rem 3rem rgba(18, 18, 18, 0.175);--bs-box-shadow-inset: inset 0 1px 2px rgba(18, 18, 18, 0.075);--bs-focus-ring-width: 0.25rem;--bs-focus-ring-opacity: 0.25;--bs-focus-ring-color: rgba(200, 35, 51, 0.25);--bs-form-valid-color: #198754;--bs-form-valid-border-color: #198754;--bs-form-invalid-color: #dc3545;--bs-form-invalid-border-color: #dc3545} [data-bs-theme=dark]{color-scheme:dark;--bs-body-color: #F8F9FA;--bs-body-color-rgb: 248, 249, 250;--bs-body-bg: #0B1120;--bs-body-bg-rgb: 11, 17, 32;--bs-emphasis-color: #fff;--bs-emphasis-color-rgb: 255, 255, 255;--bs-secondary-color: rgba(248, 249, 250, 0.75);--bs-secondary-color-rgb: 248, 249, 250;--bs-secondary-bg: #151D33;--bs-secondary-bg-rgb: 21, 29, 51;--bs-tertiary-color: rgba(248, 249, 250, 0.5);--bs-tertiary-color-rgb: 248, 249, 250;--bs-tertiary-bg: #121212;--bs-tertiary-bg-rgb: 18, 18, 18;--bs-primary-text-emphasis: rgb(87.0588235294%, 48.2352941176%, 52%);--bs-secondary-text-emphasis: rgb(50.1176470588%, 51.7647058824%, 72.9411764706%);--bs-success-text-emphasis: rgb(45.8823529412%, 71.7647058824%, 59.7647058824%);--bs-info-text-emphasis: rgb(40%, 79.7647058824%, 92.7058823529%);--bs-warning-text-emphasis: rgb(100%, 85.4117647059%, 41.6470588235%);--bs-danger-text-emphasis: rgb(91.7647058824%, 52.4705882353%, 56.2352941176%);--bs-light-text-emphasis: #f8f9fa;--bs-dark-text-emphasis: #dee2e6;--bs-primary-bg-subtle: rgb(15.6862745098%, 2.7450980392%, 4%);--bs-secondary-bg-subtle: rgb(3.3725490196%, 3.9215686275%, 10.9803921569%);--bs-success-bg-subtle: rgb(1.9607843137%, 10.5882352941%, 6.5882352941%);--bs-info-bg-subtle: rgb(0%, 13.2549019608%, 17.568627451%);--bs-warning-bg-subtle: rgb(20%, 15.137254902%, 0.5490196078%);--bs-danger-bg-subtle: rgb(17.2549019608%, 4.1568627451%, 5.4117647059%);--bs-light-bg-subtle: #343a40;--bs-dark-bg-subtle: #232629;--bs-primary-border-subtle: rgb(47.0588235294%, 8.2352941176%, 12%);--bs-secondary-border-subtle: rgb(10.1176470588%, 11.7647058824%, 32.9411764706%);--bs-success-border-subtle: rgb(5.8823529412%, 31.7647058824%, 19.7647058824%);--bs-info-border-subtle: rgb(0%, 39.7647058824%, 52.7058823529%);--bs-warning-border-subtle: rgb(60%, 45.4117647059%, 1.6470588235%);--bs-danger-border-subtle: rgb(51.7647058824%, 12.4705882353%, 16.2352941176%);--bs-light-border-subtle: #495057;--bs-dark-border-subtle: #343a40;--bs-heading-color: inherit;--bs-link-color: #00A9E0;--bs-link-hover-color: rgb(20%, 73.0196078431%, 90.2745098039%);--bs-link-color-rgb: 0, 169, 224;--bs-link-hover-color-rgb: 51, 186, 230;--bs-code-color: rgb(90.3529411765%, 52%, 71.0588235294%);--bs-highlight-color: #F8F9FA;--bs-highlight-bg: rgb(40%, 30.2745098039%, 1.0980392157%);--bs-border-color: #232C47;--bs-border-color-translucent: rgba(255, 255, 255, 0.15);--bs-form-valid-color: rgb(45.8823529412%, 71.7647058824%, 59.7647058824%);--bs-form-valid-border-color: rgb(45.8823529412%, 71.7647058824%, 59.7647058824%);--bs-form-invalid-color: rgb(91.7647058824%, 52.4705882353%, 56.2352941176%);--bs-form-invalid-border-color: rgb(91.7647058824%, 52.4705882353%, 56.2352941176%)} [data-bs-theme=dark]{--bs-navbar-color: rgba(255, 255, 255, 0.55);--bs-navbar-hover-color: rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);--bs-navbar-active-color: #fff;--bs-navbar-brand-color: #fff;--bs-navbar-brand-hover-color: #fff;--bs-navbar-toggler-border-color: transparent;--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")} /* ── Navbar ────────────────────────────────────────────────────────────────── Transparan di atas hero beranda (seperti contoh), tapi SOLID di halaman lain: di sana latarnya terang dan teks putih akan hilang. `.navbar-solid` dipasang layouts/nav.blade.php saat halaman bukan beranda. ─────────────────────────────────────────────────────────────────────────── */ #nav.navbar-solid { background: #0B1120; } /* ── Footer ────────────────────────────────────────────────────────────────── Footer selalu gelap, jadi logo IRM/RRCA yang aslinya gelap diinversi di sini — bukan lewat `[data-bs-theme=dark]` yang dulu berarti "ikut tema halaman". ─────────────────────────────────────────────────────────────────────────── */ #siteFooter .irm-logo-footer, #siteFooter .rrca-logo-footer { filter: brightness(0) invert(1); width: auto; opacity: .9; transition: opacity .2s; } #siteFooter .irm-logo-footer { height: 22px; } #siteFooter .rrca-logo-footer { height: 28px; } #siteFooter .irm-logo-footer:hover, #siteFooter .rrca-logo-footer:hover { opacity: 1; } /* ── Offset navbar fixed-top untuk halaman yang BUKAN beranda ─────────────── */ .container.page-with-fixed-nav { padding-top: calc(var(--nav-h) + 1.5rem) !important; } /* ── Kartu katalog ─────────────────────────────────────────────────────────── app.css masih memaksa `.card` gelap ke #1e293b lewat `[data-bs-theme=dark] .card` (bobot 0,2,0). Aturan di bawah menang lewat kelas `.catalog` (bobot 0,2,0 juga, tapi dimuat sesudahnya), supaya kartu di seluruh katalog mengikuti --cardbg — termasuk kartu E-Ticket di hero beranda yang membawa `data-bs-theme="light"` sendiri agar tetap putih di atas hero gelap. ─────────────────────────────────────────────────────────────────────────── */ .catalog .card { background: var(--cardbg); border-color: var(--bs-border-color); color: var(--bs-body-color); } /* ── Poster kartu event: foto cover ────────────────────────────────────────── Garis diagonal di .poster:after digambar untuk latar bergradasi dan terbaca seperti cacat bila ada foto di bawahnya, jadi dimatikan dan diganti lapisan gelap tipis supaya badge status tetap terbaca di bagian foto yang terang. ─────────────────────────────────────────────────────────────────────────── */ .catalog .poster.has-photo:after { display: none; } .catalog .poster.has-photo:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 17, 32, .55), rgba(11, 17, 32, .1)); } /* Lebih spesifik daripada `.catalog .poster>*` supaya foto tetap di bawah lapisan gelap. */ .catalog .poster.has-photo .poster-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } /* ── Skala judul seksi beranda ─────────────────────────────────────────────── Satu-satunya aturan judul yang TIDAK ikut ke `.catalog`. 46px adalah skala seksi halaman pemasaran; di halaman detail event, h2 adalah label seksi kecil (`

Pilih Kategori

`) dan ukuran ini membuatnya lebih besar daripada judul halamannya sendiri — hierarki terbalik. Judul halaman /events memakai skala yang sama, tapi lewat `.events-header h1` di app.css, karena di sana elemennya memang judul halaman. ─────────────────────────────────────────────────────────────────────────── */ #lp h2, #lp .h2 { font-size: clamp(30px, 3.8vw, 46px); } /* ── Tombol primary ────────────────────────────────────────────────────────── Berkas contoh punya DUA aturan `.btn-primary`: satu hasil kompilasi Sass Bootstrap (nilai dasarnya) dan satu blok kustom (hover/active/bayangan). Generator hanya menyalin blok kustomnya, jadi tombolnya jatuh kembali ke biru bawaan Bootstrap (#0d6efd) sementara hover-nya tetap merah brand — tombol yang sama berubah warna dari biru ke merah begitu disorot. Nilai dasar di bawah ini disalin apa adanya dari aturan pertama contoh; hover/active tetap datang dari aturan kustom yang menyusul di bawah. ─────────────────────────────────────────────────────────────────────────── */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #C82333; --bs-btn-border-color: #C82333; --bs-btn-focus-shadow-rgb: 208, 68, 82; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #C82333; --bs-btn-disabled-border-color: #C82333; } /* ── Gaya beranda (dari blok kustom contoh) ─────────────────────────────────── */ .catalog h1, .catalog .h1, .catalog h2, .catalog .h2, .catalog h3, .catalog .h3, .catalog h4, .catalog .h4, .catalog h5, .catalog .h5, .catalog h6, .catalog .h6{text-transform:uppercase;letter-spacing:.3px} [data-bs-theme=dark]{--bs-heading-color:#fff} #lp .sec{padding:6rem 0} @media(max-width: 767px) { #lp .sec{padding:4.5rem 0} } .catalog .eyebrow{font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--bs-primary)} [data-bs-theme=dark] .catalog .eyebrow{color:var(--bs-info)} .btn-primary{--bs-btn-hover-bg:#A81C2A;--bs-btn-hover-border-color:#A81C2A;--bs-btn-active-bg:#A81C2A;--bs-btn-active-border-color:#A81C2A;box-shadow:0 10px 26px -10px rgba(200,35,51,.75)} .btn:focus-visible{outline:3px solid var(--bs-info);outline-offset:3px} [data-bs-theme=light]{--cardbg:#fff} [data-bs-theme=dark]{--cardbg:#151D33} .card{--bs-card-bg:var(--cardbg)} #lp .acc2{color:var(--bs-secondary)} [data-bs-theme=dark] #lp .acc2{color:var(--bs-info)} #lp .dashed{border-top-style:dashed !important} #nav{transition:.3s;--bs-navbar-brand-font-size:1.75rem} #nav.scrolled{background:rgba(11,17,32,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)} .navbar-brand{font-family:Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.5px} #nav .nav-link{font-weight:600;font-size:.9rem;position:relative} #nav .nav-link.active{color:#fff} @media(min-width: 992px) { #nav .nav-link.active:after{content:"";position:absolute;left:var(--bs-nav-link-padding-x);right:var(--bs-nav-link-padding-x);bottom:2px;height:2px;border-radius:2px;background:var(--bs-info)} } #nav .offcanvas{--bs-offcanvas-bg:#0B1120} #lp .hero-lp{position:relative;overflow:hidden;padding:7.25rem 0 7.5rem;background:radial-gradient(700px 420px at 90% 0%, rgba(88, 42, 124, 0.5), transparent 65%),radial-gradient(600px 380px at 0% 100%, rgba(27, 66, 154, 0.35), transparent 65%),#0b1120} #lp .speed{position:absolute;right:0;top:0;width:55%;height:100%;pointer-events:none;opacity:.55} #lp .hero-lp h1, #lp .hero-lp .h1{font-size:clamp(38px,4.3vw,62px);line-height:1.02;text-wrap:balance;color:#fff} #lp .hero-lp h1 em, #lp .hero-lp .h1 em{white-space:nowrap} #lp .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bs-info);box-shadow:0 0 0 4px rgba(0,169,224,.25);margin-right:.5rem} #lp .search-box:focus-within{box-shadow:0 0 0 3px var(--bs-info),0 24px 50px -20px rgba(0,0,0,.6) !important} #lp .vis{max-width:420px} #lp .ticket{position:relative} #lp .ticket:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg, #D11D3B, #582A7C, #1B429A, #00A9E0)} #lp .bib{font-family:Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:700;font-size:3.75rem;line-height:1;color:var(--bs-primary)} #lp .qr{width:72px;height:72px;border-radius:8px;background:conic-gradient(#2B328C 25%, #fff 0 50%, #2B328C 0 75%, #fff 0) 0 0/18px 18px;border:6px solid #2b328c} #lp .mini{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)} #lp .mini small, #lp .mini .small{font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#a9b1d6} #lp .pull-up{margin-top:-3.5rem;position:relative;z-index:2} #lp .stat-n{font-family:Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:700;font-size:clamp(30px,4vw,48px);line-height:1.1;text-transform:uppercase} @media(max-width: 575px) { #lp .stat-n{font-size:22px} } .catalog .ev{transition:.25s} .catalog .ev:hover{transform:translateY(-6px);border-color:var(--bs-primary) !important;box-shadow:0 28px 50px -28px rgba(11,17,32,.55) !important} .catalog .poster{position:relative;height:160px;overflow:hidden} .catalog .poster:after{content:"";position:absolute;right:-40px;top:-20px;width:200px;height:260px;background:rgba(255,255,255,.14);transform:skewX(-24deg)} .catalog .poster>*{position:relative;z-index:1} .catalog .poster-0{background:var(--gu)} .catalog .poster-1{background:var(--gl)} .catalog .poster-2{background:linear-gradient(135deg, #2B328C, #582A7C)} #lp .date{background:#fff;color:#2b328c;font-family:Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:700;line-height:1.1;text-align:center;text-transform:uppercase} #lp .nav-pills{--bs-nav-pills-link-active-bg:#2B328C} [data-bs-theme=dark] #lp .nav-pills{--bs-nav-pills-link-active-bg:#00A9E0} [data-bs-theme=dark] #lp .nav-pills .nav-link.active{color:#06121d} #lp .nav-pills .nav-link{font-weight:600;font-size:.9rem;border:1px solid var(--bs-border-color)} .catalog .ico{width:48px;height:48px;border-radius:14px;background:var(--gl);color:#fff;display:grid;place-items:center;font-size:1.3rem} .catalog .ico.up{background:var(--gu)} #lp .ph1{background:var(--gl)} #lp .ph2{background:var(--gu)} #lp .ph3{background:linear-gradient(135deg, #2B328C, #00A9E0)} #lp .ph4{background:linear-gradient(135deg, #582A7C, #1B429A)} #lp .ph5{background:linear-gradient(135deg, #00A9E0, #2B328C)} #lp .ph6{background:linear-gradient(135deg, #C82333, #2B328C)} #lp .bibtag{position:absolute;left:8px;bottom:8px;top:auto;background:#fff;color:#2b328c;font-family:Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:700;font-size:.8rem;padding:0 8px;border-radius:6px;letter-spacing:.5px} #lp .rowx{background:var(--bs-tertiary-bg);font-weight:600;font-size:.9rem} #lp .rowx:first-child{background:var(--gl);color:#fff} #lp .rowx b{font-family:Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;letter-spacing:.5px;font-size:1.05rem} #lp .num{width:52px;height:52px;border-radius:50%;background:var(--gu);color:#fff;display:grid;place-items:center;font-family:Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:700;font-size:1.4rem;position:relative;z-index:1} @media(min-width: 768px) { #lp .steps{position:relative} #lp .steps:before{content:"";position:absolute;left:17%;right:17%;top:26px;border-top:2px dashed var(--bs-border-color)} } #lp .org{background:linear-gradient(135deg, #2B328C 0%, #0B1120 78%);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden} #lp .org:before{content:"";position:absolute;right:-100px;top:-100px;width:340px;height:340px;border-radius:50%;background:#582a7c;opacity:.5;filter:blur(80px)} #lp .org>*{position:relative} #lp .org h2, #lp .org .h2{color:#fff} #lp .orgi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)} #lp .final{background:linear-gradient(120deg, #1B429A, #2B328C 55%, #582A7C);position:relative;overflow:hidden} #lp .final:before, #lp .final:after{content:"";position:absolute;top:-20%;bottom:-20%;width:90px;background:rgba(255,255,255,.07);transform:skewX(-24deg)} #lp .final:before{left:12%} #lp .final:after{right:10%;width:160px} #lp .final>*{position:relative} #lp .final h2, #lp .final .h2{color:#fff} #lp .accordion{--bs-accordion-bg:transparent;--bs-accordion-active-bg:transparent;--bs-accordion-active-color:var(--bs-heading-color);--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-border-radius:1rem} #lp .accordion-item{background:var(--bs-body-bg);border:1px solid var(--bs-border-color) !important} #lp .accordion-item:has(.show){border-color:var(--bs-primary) !important} [data-bs-theme=dark] #lp .accordion-item:has(.show){border-color:var(--bs-info) !important} #lp .accordion-header{text-transform:none;font-family:var(--bs-body-font-family)} #lp .accordion-button{font-family:Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-size:1.15rem;font-weight:500;letter-spacing:.2px;color:var(--bs-heading-color);padding:1.1rem 1.5rem} #lp .accordion-body{padding:0 1.5rem 1.4rem} #siteFooter .irm{font-family:Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:700;font-size:1.4rem;color:#f8f9fa} #siteFooter a{color:inherit;text-decoration:none} #siteFooter a:hover{color:#fff} .bi{vertical-align:-0.125em} #lp .rv{opacity:0;transform:translateY(24px);transition:.7s} #lp .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion: reduce) { #lp *{transition:none !important;scroll-behavior:auto !important} #lp .rv{opacity:1;transform:none} } [data-bs-theme=dark] #lp .btn-outline-secondary{--bs-btn-color:#00A9E0;--bs-btn-border-color:#00A9E0;--bs-btn-hover-bg:#00A9E0;--bs-btn-hover-border-color:#00A9E0;--bs-btn-hover-color:#06121d;--bs-btn-active-bg:#00A9E0;--bs-btn-active-color:#06121d}