/** * universal.css * ───────────────────────────────────────────────────────────────── * Shared header / footer / mobile-nav styles for all public pages. * Include via: * * CSS custom properties (--p, --a) are set inline on or :root * by each page from the DB settings. These styles reference them. */ /* ── ANNOUNCEMENT BAR ─────────────────────────────────────────── */ .u-ann { background: var(--p); color: #fff; text-align: center; padding: 9px 16px; font-size: .84rem; font-weight: 600; letter-spacing: .03em; } /* ── HEADER ───────────────────────────────────────────────────── */ .u-header { background: var(--a); position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 20px rgba(0,0,0,.3); } .u-hdr { max-width: 1200px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; } /* Logo */ .u-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .u-logo-img { height: 42px; object-fit: contain; } .u-logo-icon { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; } .u-logo-text { display: flex; flex-direction: column; } .u-logo-name { font-family: 'Bebas Neue', cursive; font-size: 1.5rem; color: #fff; letter-spacing: .05em; line-height: 1; } .u-logo-sub { font-size: .6rem; color: rgba(255,255,255,.45); letter-spacing: .1em; text-transform: uppercase; } /* Desktop nav */ .u-nav { display: flex; align-items: center; gap: 4px; } .u-nav-a { color: rgba(255,255,255,.65); text-decoration: none; font-size: .85rem; padding: 7px 14px; border-radius: 6px; transition: .15s; font-weight: 500; } .u-nav-a:hover, .u-nav-a.u-active { color: #fff; background: rgba(255,255,255,.1); } .u-nav-a.u-active { color: #fff; font-weight: 700; } /* Desktop call buttons */ .u-hdr-phones { display: flex; align-items: center; gap: 8px; } .u-hdr-btn { display: flex; align-items: center; gap: 7px; background: var(--p); color: #fff; padding: 10px 18px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: .86rem; white-space: nowrap; transition: transform .15s, box-shadow .15s; flex-shrink: 0; } .u-hdr-btn:hover { transform: scale(1.04); box-shadow: 0 0 24px rgba(232,67,26,.5); } .u-hdr-btn--sec { background: transparent; border: 2px solid rgba(255,255,255,.3); color: #fff; } .u-hdr-btn--sec:hover { background: rgba(255,255,255,.1); box-shadow: none; } /* Hamburger button */ .u-menu-btn { display: none; background: none; border: none; color: #fff; cursor: pointer; padding: 4px; flex-shrink: 0; } .u-menu-btn svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; } /* ── MOBILE OVERLAY & DRAWER ──────────────────────────────────── */ .u-mob-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .u-mob-overlay.u-open { display: block; } .u-mob-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 85vw); background: var(--a); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); } .u-mob-overlay.u-open .u-mob-drawer { transform: translateX(0); } .u-mob-hdr { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0; } .u-mob-logo { font-family: 'Bebas Neue', cursive; font-size: 1.3rem; color: #fff; letter-spacing: .05em; } .u-mob-close { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 1.4rem; padding: 4px 8px; border-radius: 6px; transition: .15s; line-height: 1; } .u-mob-close:hover { color: #fff; background: rgba(255,255,255,.1); } .u-mob-links { padding: 12px 0; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .u-mob-link { display: block; color: rgba(255,255,255,.75); text-decoration: none; font-size: .95rem; font-weight: 500; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.06); transition: .15s; } .u-mob-link:hover, .u-mob-link.u-mob-active { color: #fff; background: rgba(255,255,255,.07); } .u-mob-link.u-mob-active { font-weight: 700; border-left: 3px solid var(--p); padding-left: 21px; } .u-mob-link--policy { font-size: .82rem; color: rgba(255,255,255,.45); padding-top: 10px; padding-bottom: 10px; } .u-mob-phones { padding: 16px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .u-mob-call-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--p); color: #fff; text-decoration: none; padding: 14px; border-radius: 10px; font-weight: 700; font-size: .92rem; transition: opacity .15s; } .u-mob-call-btn:hover { opacity: .9; } /* ── FOOTER ───────────────────────────────────────────────────── */ .u-footer { background: #0F0F1E; color: rgba(255,255,255,.55); padding: 48px 24px 32px; } .u-ft-inner { max-width: 1100px; margin: auto; } .u-ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 32px; } .u-ft-brand .u-ft-logo { font-family: 'Bebas Neue', cursive; font-size: 1.6rem; color: #fff; letter-spacing: .08em; margin-bottom: 8px; } .u-ft-tagline { font-size: .84rem; line-height: 1.8; color: rgba(255,255,255,.5); max-width: 280px; margin-bottom: 6px; } .u-ft-detail { font-size: .82rem; color: rgba(255,255,255,.45); margin-top: 4px; } .u-ft-email { color: rgba(255,255,255,.45); text-decoration: none; transition: .15s; } .u-ft-email:hover { color: var(--p); } .u-ft-col-title { color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; } .u-ft-link { display: block; color: rgba(255,255,255,.5); text-decoration: none; font-size: .84rem; margin-bottom: 8px; transition: .15s; } .u-ft-link:hover { color: var(--p); } .u-ft-phone-link { display: flex; align-items: center; gap: 6px; color: var(--p); text-decoration: none; font-weight: 700; font-size: .88rem; margin-bottom: 8px; transition: .15s; } .u-ft-phone-link:hover { color: #FF8C66; } .u-ft-phone-label { font-size: .72rem; color: rgba(255,255,255,.4); font-weight: 400; } .u-ft-whatsapp { display: flex; align-items: center; gap: 6px; color: #25D366; font-weight: 700; font-size: .88rem; text-decoration: none; margin-top: 4px; transition: .15s; } .u-ft-whatsapp:hover { opacity: .85; } .u-ft-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .u-ft-copy { font-size: .8rem; } .u-ft-bottom-links { display: flex; flex-wrap: wrap; gap: 16px; } .u-ft-policy-link { color: rgba(255,255,255,.4); text-decoration: none; font-size: .78rem; transition: .15s; } .u-ft-policy-link:hover { color: var(--p); } /* ── FLOATING CALL BUTTON (mobile) ────────────────────────────── */ .u-float-btn { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 999; background: var(--p); color: #fff; padding: 15px 36px; border-radius: 50px; font-weight: 800; font-size: 1rem; text-decoration: none; box-shadow: 0 8px 32px rgba(232,67,26,.6); white-space: nowrap; align-items: center; gap: 8px; animation: uFloatAnim 3s ease-in-out infinite; } @keyframes uFloatAnim { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } } /* ── RESPONSIVE ───────────────────────────────────────────────── */ @media (max-width: 900px) { .u-ft-grid { grid-template-columns: 1fr 1fr; } .u-ft-brand { grid-column: 1 / -1; } } @media (max-width: 640px) { /* Hide desktop nav & phone buttons */ .u-nav, .u-hdr-phones { display: none; } /* Show hamburger */ .u-menu-btn { display: block; } /* Show floating call button */ .u-float-btn { display: flex; } /* Footer stacks */ .u-ft-grid { grid-template-columns: 1fr; } .u-ft-bottom { flex-direction: column; text-align: center; } .u-ft-bottom-links { justify-content: center; } }