/* * AVIRI brand override stylesheet. * Load this AFTER bootstrap.min.css and style.css on every public page. * * Why this file exists: the original template's :root vars (--primary: * #2124B1, --secondary: #4777F5) and Bootstrap's hardcoded-hex "primary" * utility classes (.bg-primary/.text-primary/.btn-primary/...) don't match * AVIRI's actual brand — sampled directly from public/img/avirilogo-black.png: * red #CC2131 (dominant) and cyan #00A2E9 (minority accent, only in the "R"). * Redeclaring --primary/--secondary here re-tints every existing var(--primary) * usage across all pages; redeclaring the Bootstrap utility classes (same * !important, later in cascade order) re-tints every bg-primary/text-primary/ * btn-primary usage without editing each page's markup. */ :root { --primary: #CC2131; --secondary: #00A2E9; --brand: #CC2131; --brand-dark: #A81729; --cyan: #00A2E9; --ink: #17181D; --muted: #5b6472; --line: #e9e3e3; --surface: #FBF3F3; --tint: #FBE7E9; --tint-cyan: #E2F5FD; /* Restrained warm-metal accent for premium micro-details only (rules, small badges, admin "owner" cues) — never a full section background, or it stops reading as an accent and starts reading as a theme. */ --gold: #B08D3F; --gold-tint: #F7F0E1; --shadow-soft: 0 20px 45px -28px rgba(23, 24, 29, .35); --shadow-lift: 0 30px 60px -30px rgba(23, 24, 29, .28); } h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: 'Poppins', sans-serif; } body { font-family: 'Inter', sans-serif; } /* ---- Premium display type ---- One serif face, used only for the large editorial headline in each hero and section title — everything else stays Poppins/Inter. This single lever is what separates "premium/editorial" from "generic SaaS sans-only" without touching the brand's actual colors. Pages must load Fraunces alongside Poppins/Inter in for this to take effect (falls back silently to Poppins otherwise, so it's non-breaking on any page that hasn't yet). */ .font-display, .hero-title, .section-h2, .cta-flat h2, .cta-section h2 { font-family: 'Fraunces', 'Poppins', serif; font-optical-sizing: auto; } html { scroll-behavior: smooth; } /* ---- Bugfixes shared by every page ---- */ /* bootstrap.min.css in this project is missing the base .container rule (only .container-fluid/-sm/-md/-lg/-xl/-xxl are defined), which leaves .container with no width/padding and lets content overflow on mobile. */ .container { width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: 1320px; } } /* Same build redefines --bs-secondary as blue and sets .text-secondary{color:#4777F5 !important}, so body copy styled with text-secondary rendered as blue link-colored text instead of gray. */ .text-secondary { color: var(--muted) !important; } /* ---- Re-tint Bootstrap's hardcoded "primary" utilities to brand red ---- */ .bg-primary { background-color: var(--brand) !important; } .text-primary { color: var(--brand) !important; } .border-primary { border-color: var(--brand) !important; } .btn-primary { color: #fff; background-color: var(--brand); border-color: var(--brand); } .btn-primary:hover, .btn-primary:focus { color: #fff; background-color: var(--brand-dark); border-color: var(--brand-dark); box-shadow: 0 0 0 .25rem rgba(204, 33, 49, .3); } .btn-primary.active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: var(--brand-dark); border-color: var(--brand-dark); } .btn-outline-primary { color: var(--brand); border-color: var(--brand); } .btn-outline-primary:hover { color: #fff; background-color: var(--brand); border-color: var(--brand); } .badge.bg-primary { background-color: var(--brand) !important; } /* ---- Hero header: same decorative pattern, brand-red base instead of blue ---- style.css sizes the bottom wave layer at `100% auto`, so its height scales proportionally with viewport width (it's a fixed-aspect-ratio image). On wide viewports + the shorter kontak/karir/event heroes, that wave grows tall enough to creep up behind the white heading text — same white color, so the text goes invisible where it overlaps (not actually clipped, just camouflaged). Pin the wave to a fixed height so it can't outgrow the hero. */ .hero-header { background-color: var(--brand); background-size: auto, auto, auto, auto, 100% 150px !important; } /* ---- Footer: flatten the map-background/blue-gradient footer to solid ink, matching the rest of the brand-red-and-ink palette. ---- */ .footer { background: var(--ink) !important; background-image: none !important; } .footer .btn-social:hover { background: var(--brand); border-color: var(--brand); } /* ---- Section heading pattern shared by product pages ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; } .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } /* The older product pages (coding/robotic/english/content-creator/karir/event) still use style.css's original .section-title h6/h2 heading pattern and .service-item/.service-icon feature cards instead of the newer eyebrow/ flat-card language. Restyle them in place (same markup, no page edits) so headings and icons read as one system instead of two: */ .section-title h6 { font-family: 'Poppins', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand) !important; } .section-title h6::before, .section-title h6::after { background: var(--brand) !important; } .section-title::before, .section-title::after { background: var(--ink) !important; } .section-title h2 { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); } /* .service-item's icon background is a hardcoded-blue PNG blob (icon-shape-primary.png) baked at the pixel level, so no CSS variable can retint it — replace it with a plain brand-tinted circle instead. */ .service-item .service-icon { background: var(--tint) !important; border-radius: 50%; } .service-item .service-icon i { color: var(--brand) !important; } .service-item:hover .service-icon { background: rgba(255, 255, 255, .2) !important; } .service-item:hover .service-icon i { color: #fff !important; } .section-h2 { font-size: 2.15rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); } /* ---- Flat card language shared across "why choose" / product / service grids ---- */ .flat-card { border: 1px solid var(--line); border-radius: 16px; padding: 28px; background: #fff; height: 100%; transition: .25s ease; } .flat-card:hover { border-color: var(--brand); box-shadow: 0 16px 32px -20px rgba(204, 33, 49, .35); transform: translateY(-2px); } .flat-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 18px; } /* ---- Buttons ---- */ .btn-brand-solid { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; border-radius: 999px; padding: .85rem 1.9rem; font-weight: 600; font-size: .95rem; border: 1px solid var(--brand); transition: .2s; } .btn-brand-solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; } .btn-outline-flat { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border-radius: 999px; padding: .85rem 1.9rem; font-weight: 600; font-size: .95rem; border: 1.5px solid var(--line); transition: .2s; } .btn-outline-flat:hover { border-color: var(--ink); color: var(--ink); } .cta-section, .cta-flat { background: var(--brand); background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); position: relative; border-radius: 24px; padding: 64px 40px; text-align: center; overflow: hidden; } /* Hairline in the warm accent, not the brand red — the one place on the page allowed to read as "premium trim" rather than "brand color". */ .cta-flat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, #fff 50%, var(--gold) 100%); opacity: .55; } .cta-flat h2 { color: #fff; font-weight: 800; letter-spacing: -0.02em; position: relative; } .cta-flat p { color: rgba(255,255,255,.82); position: relative; } .cta-flat .btn-cta-white { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--brand); border-radius: 999px; padding: .85rem 1.9rem; font-weight: 700; font-size: .95rem; border: 1px solid #fff; transition: .2s; position: relative; } .cta-flat .btn-cta-white:hover { background: var(--ink); color: #fff; border-color: var(--ink); } /* ---- Shared premium hero (used by every top-level page: home, product pages, kontak, karir, event, event landing) — one hero language instead of each page reinventing its own banner. ---- */ .lead-muted { color: var(--muted); font-size: 1.05rem; line-height: 1.75; } .hero-section { padding-top: 150px; padding-bottom: 60px; background: #fff; overflow: hidden; } @media (max-width: 991.98px) { .hero-section { padding-top: 120px; } } .hero-eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--tint); color: var(--brand); font-size: .78rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; } .hero-title { font-size: 3rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; color: var(--ink); } .hero-title .accent { color: var(--brand); font-style: italic; } @media (max-width: 575.98px) { .hero-title { font-size: 2.15rem; } } .hero-sub { color: var(--muted); font-size: 1.08rem; line-height: 1.75; max-width: 520px; } .hero-trust-list { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: .88rem; font-weight: 500; } .hero-trust-list i { color: var(--brand); margin-right: 6px; } /* Layered flat-color shape behind the hero panel/image — gives brand presence and depth without a blurred glow or a stock illustration. */ .hero-visual { position: relative; padding: 24px 24px 24px 0; } .hero-visual::before { content: ''; position: absolute; inset: 26px -14px -14px 40px; background: var(--brand); border-radius: 28px; z-index: 0; } /* Any direct child (image or panel) sits above the decorative ::before shape — not just .product-img, so a product page's hero can't silently render with its image hidden behind the red block just because the class was left off. */ .hero-visual > * { position: relative; z-index: 1; } .hero-panel { position: relative; z-index: 1; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-lift); } .hero-panel-badge { position: absolute; top: -18px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: var(--cyan); color: #fff; font-size: .78rem; font-weight: 700; padding: 9px 16px; border-radius: 999px; box-shadow: 0 10px 22px -8px rgba(0, 162, 233, .55); } .hero-panel-eyebrow { font-family: 'Poppins', sans-serif; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 18px; } .hero-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hero-panel-item { border: 1px solid var(--line); border-radius: 14px; padding: 16px; } .hero-panel-item .icon { width: 36px; height: 36px; border-radius: 10px; background: var(--tint); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: .95rem; } .hero-panel-item .label { font-weight: 600; font-size: .88rem; color: var(--ink); } /* ---- Value band ---- */ .value-band { background: var(--ink); padding: 40px 0; } .value-item { display: flex; align-items: center; gap: 14px; color: #fff; } .value-item .icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); color: var(--cyan); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; } .value-item .label { font-weight: 600; font-size: .92rem; } /* ---- About-style info card ---- */ .about-card { border: 1px solid var(--line); border-radius: 20px; padding: 32px; background: #fff; } .about-card .row-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); } .about-card .row-item:last-child { border-bottom: none; padding-bottom: 0; } .about-card .row-item:first-child { padding-top: 0; } .about-card .row-item i { width: 34px; height: 34px; border-radius: 9px; background: var(--tint); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; } /* ---- Flat card extras: numbered "why choose" cards, product cards, service cards ---- */ .flat-card:hover { box-shadow: var(--shadow-soft); } .flat-num { display: block; font-family: 'Poppins', sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .05em; color: #c7c2c2; margin-bottom: 8px; } .flat-card h6 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--ink); } .flat-card p { color: var(--muted); font-size: .92rem; margin-bottom: 0; } .product-card { text-align: left; } /* Not scoped to .product-card — also used by .event-card and any other "click to see more" card that wants the same arrow-nudge affordance. */ .stretched-link-txt { font-size: .88rem; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; } .stretched-link-txt i { transition: transform .25s ease; } .product-card:hover .stretched-link-txt i, .event-card:hover .stretched-link-txt i { transform: translateX(4px); } .service-card { text-align: center; } .service-card .logo-box { width: 64px; height: 64px; border-radius: 16px; background: var(--tint); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .service-card .logo-box img { width: 34px; height: auto; } .service-card h5 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 10px; } .service-card p { color: var(--muted); font-size: .92rem; margin-bottom: 0; } .section-py { padding-top: 88px; padding-bottom: 88px; } @media (max-width: 767.98px) { .section-py { padding-top: 56px; padding-bottom: 56px; } } /* ---- WhatsApp floating button — lives in the shared footer partial so it appears consistently on every page instead of only the homepage. ---- */ .whatsapp-floating { position: fixed; bottom: 20px; right: 25px; z-index: 999; } .wa-container { display: flex; align-items: center; background: #FFF; padding: 15px 25px; border-radius: 50px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); border: 1px solid #E0E0E0; transition: all 0.3s ease; } .wa-container:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); } .wa-icon-container { display: flex; align-items: center; gap: 15px; } .wa-content { margin-right: 15px; } .wa-title { font-size: 13px; color: #666; margin: 0; } .wa-text { font-size: 15px; color: #333; font-weight: 500; margin: 0; } .chat-btn { display: flex; align-items: center; gap: 8px; background: #00E676; color: #FFF; padding: 8px 20px; border-radius: 25px; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.3s ease; } .chat-btn:hover { background: #00C853; color: #FFF; } @media (max-width: 768px) { .wa-content { display: none; } .wa-container { padding: 12px; } } .back-to-top { background: var(--brand) !important; color: #fff !important; } /* ---- Premium status/quota chips reused by event pages ---- */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; } .chip-open { background: #ecfdf3; color: #16a34a; } .chip-closed { background: #fef2f2; color: #dc2626; } .chip-gold { background: var(--gold-tint); color: var(--gold); } /* ---- Coming Soon badge — reused on the listing cards and the detail hero ---- */ .cs-badge { background: var(--gold-tint); color: var(--gold); }