/* ═══════════════════════════════════════════════════════════════
ITALY LIONS — DESIGN SYSTEM 2026
Loaded AFTER styles.css. Overrides presentation only; no layout
structure, ids, or class hooks used by JS are changed.
Fixes the root cause of the "not professional" feel: styles.css
asks for 'Cinzel' and 'Lato' on almost every element, but no page
ever loaded those fonts — everything fell back to browser defaults
(Times/Arial). Fonts are now loaded and the whole type system is
rebuilt on a fluid, mobile-first scale.
═══════════════════════════════════════════════════════════════ */
/* Fonts are loaded via in each page (with preconnect) rather
than @import here — a chained @import blocks the render path on mobile. */
/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
/* Gold scale — used as an accent, never as a flood */
--g-50: #FBF3D6;
--g-100: #F2E3A8;
--g-200: #E6CE74;
--g-300: #D9B948;
--g-400: #C9A227; /* brand base */
--g-500: #AC8A1E;
--g-600: #8B6914;
--g-700: #634C0F;
/* Warm-black surface ladder */
--s-0: #080806; /* page canvas */
--s-1: #0E0D0A; /* raised */
--s-2: #14120D; /* card */
--s-3: #1C1913; /* card hover / input */
--s-4: #262117; /* popover */
/* Ink */
--ink-hi: #FFFFFF;
--ink: rgba(255,255,255,0.88);
--ink-mid: rgba(255,255,255,0.62);
--ink-low: rgba(255,255,255,0.42);
/* Lines */
--line: rgba(201,162,39,0.16);
--line-soft: rgba(255,255,255,0.07);
--line-hot: rgba(201,162,39,0.42);
/* Elevation — layered, not flat drop shadows */
--e-1: 0 1px 2px rgba(0,0,0,.35);
--e-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.28);
--e-3: 0 4px 12px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.4);
--e-glow: 0 0 0 1px rgba(201,162,39,.18), 0 10px 34px rgba(201,162,39,.10);
/* Radius */
--r-sm: 10px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 26px;
--r-pill: 999px;
/* Motion */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-spring: cubic-bezier(.34,1.36,.64,1);
/* Keep legacy variable names working, remapped to the new ladder */
--black: var(--s-0);
--black-mid: var(--s-1);
--black-soft: var(--s-3);
--black-card: var(--s-2);
--gold: var(--g-400);
--gold-light: var(--g-200);
--gold-dark: var(--g-600);
--white: var(--ink-hi);
--white-dim: var(--ink);
--white-muted: var(--ink-mid);
--border: var(--line);
--border-glow: var(--line-hot);
--radius: var(--r-md);
}
/* ── 2. BASE + TYPOGRAPHY ──────────────────────────────────── */
body {
background:
radial-gradient(1100px 620px at 78% -8%, rgba(201,162,39,.055), transparent 62%),
radial-gradient(760px 520px at 4% 12%, rgba(201,162,39,.032), transparent 58%),
var(--s-0);
background-attachment: fixed;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 16px;
line-height: 1.65;
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Anything that asked for Lato now gets Inter */
[style*="Lato"], .post-input, .comment-input, input, select, textarea, button {
font-family: 'Inter', system-ui, sans-serif !important;
}
h1, h2, h3, h4, h5 {
font-family: 'Cinzel', Georgia, serif;
color: var(--ink-hi);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.14;
text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 4.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.65rem); }
h4 { font-size: clamp(1rem, 0.94rem + 0.28vw, 1.18rem); }
p { color: var(--ink-mid); line-height: 1.75; text-wrap: pretty; }
p, li { font-size: clamp(0.94rem, 0.9rem + 0.16vw, 1.02rem); }
.gold-text {
background: linear-gradient(112deg, var(--g-100) 0%, var(--g-300) 45%, var(--g-500) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
::selection { background: rgba(201,162,39,.28); color: #fff; }
/* Section rhythm — tighter on phones, generous on desktop */
.section { padding: clamp(52px, 4vw + 34px, 104px) 0; }
.section-sm { padding: clamp(34px, 2.4vw + 24px, 62px) 0; }
.container { padding-inline: clamp(16px, 4vw, 28px); }
.section-header { margin-bottom: clamp(30px, 3vw + 16px, 58px); }
/* ── 3. BUTTONS ────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: 'Inter', sans-serif;
font-weight: 650;
font-size: 0.94rem;
letter-spacing: 0.01em;
padding: 12px 22px;
border-radius: var(--r-sm);
border: 1px solid transparent;
cursor: pointer;
min-height: 46px; /* comfortable touch target */
transition: transform .18s var(--ease-spring), box-shadow .25s var(--ease),
background .25s var(--ease), border-color .25s var(--ease), color .2s;
}
.btn-lg { padding: 15px 32px; font-size: 1.02rem; min-height: 54px; border-radius: var(--r-md); }
.btn-primary {
background: linear-gradient(160deg, var(--g-200) 0%, var(--g-400) 52%, var(--g-500) 100%);
color: #14120A !important;
font-weight: 750;
box-shadow: 0 1px 0 rgba(255,255,255,.34) inset, 0 6px 18px rgba(201,162,39,.24);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 30px rgba(201,162,39,.36);
color: #14120A !important;
}
.btn-outline, .btn-ghost {
background: rgba(255,255,255,.02);
border-color: var(--line-hot);
color: var(--g-200) !important;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-outline:hover, .btn-ghost:hover {
background: rgba(201,162,39,.10);
border-color: var(--g-300);
transform: translateY(-2px);
color: var(--g-100) !important;
}
.btn-gold { background: linear-gradient(160deg, var(--g-200), var(--g-500)); color:#14120A !important; font-weight:750; }
.btn:active { transform: translateY(0) scale(.985); }
/* ── 4. SURFACES ───────────────────────────────────────────── */
.card, .post-card, .widget, .price-card, .biz-card, .job-card,
.market-card, .rental-card, .cargo-card, .value-item, .team-card, .stat-box {
background:
linear-gradient(168deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 42%),
var(--s-2);
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
box-shadow: var(--e-1);
transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.card:hover, .post-card:hover, .price-card:hover, .biz-card:hover,
.market-card:hover, .rental-card:hover, .value-item:hover, .team-card:hover {
border-color: var(--line-hot);
box-shadow: var(--e-3), var(--e-glow);
transform: translateY(-3px);
}
.widget {
border-radius: var(--r-md);
}
.widget h4 {
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--g-300);
}
/* ── 5. FORMS ──────────────────────────────────────────────── */
input, select, textarea {
background: var(--s-1) !important;
border: 1px solid var(--line-soft) !important;
border-radius: var(--r-sm) !important;
color: var(--ink-hi) !important;
font-size: 16px !important; /* prevents iOS zoom-on-focus */
padding: 13px 15px !important;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
input::placeholder, textarea::placeholder { color: var(--ink-low); }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--g-400) !important;
background: var(--s-2) !important;
box-shadow: 0 0 0 4px rgba(201,162,39,.13);
}
label, .form-label {
font-family: 'Inter', sans-serif;
font-size: 0.72rem !important;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-mid) !important;
}
/* ── 6. HEADER ─────────────────────────────────────────────── */
/* FIX: .navbar is position:fixed at top:0 while .top-bar sits in normal flow,
also at the top — so the navbar rendered ON TOP of the announcement bar and
the two collided (visible as overlapping text in the header). The header is
now a proper stack: the bar is fixed above, the navbar is offset below it,
and body picks up matching padding so no content hides underneath. */
:root { --tb-h: 40px; --nav-h: 67px; --bn-h: 0px; }
@media (max-width: 768px) { :root { --tb-h: 34px; --nav-h: 67px; --bn-h: 84px; } }
/* The mobile dropdown was hardcoded to `top:72px` in styles.css, from back
when the navbar was 72px tall and started at y=0. With the announcement bar
above it the navbar now ends at 101px, so the menu's first ~29px — including
the first link — was rendering BEHIND the navbar and appeared cut off.
Anchor it to the real header height instead. */
body:has(.top-bar) .nav-links.open { top: calc(var(--tb-h) + var(--nav-h)) !important; }
body:not(:has(.top-bar)) .nav-links.open { top: var(--nav-h) !important; }
.nav-links.open {
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
overscroll-behavior: contain;
}
.top-bar {
position: fixed; top: 0; left: 0; right: 0;
z-index: 9705;
height: var(--tb-h);
display: flex; align-items: center; justify-content: center; gap: 6px;
white-space: nowrap; overflow: hidden;
padding: 0 14px !important;
}
body:has(.top-bar) { padding-top: var(--tb-h); }
body:has(.top-bar) .navbar { top: var(--tb-h); }
/* Sticky in-page sidebars must clear the taller header stack */
body:has(.top-bar) .sidebar-left,
body:has(.top-bar) .sidebar-right { top: calc(var(--tb-h) + 74px); }
/* members.html + join now.html were built on a different header pattern
(.nav/.navlinks inside .wrap, no hamburger, links wrapping onto 2 rows on
phones). They now use the same fixed .navbar as every other page, so their
.wrap needs top padding to clear it, and join-now's local full-width form
.btn must not stretch the header's "Join Free" button. */
.wrap { padding-top: 88px !important; }
@media (max-width: 768px) { .wrap { padding-top: 74px !important; } }
.nav-inner .btn, .nav-links .btn { width: auto !important; margin-top: 0 !important; }
.navbar {
background: rgba(8,8,6,.72) !important;
backdrop-filter: blur(26px) saturate(180%) !important;
-webkit-backdrop-filter: blur(26px) saturate(180%) !important;
border-bottom: 1px solid var(--line-soft) !important;
box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 30px rgba(0,0,0,.5);
}
.nav-inner, .nav-container { height: 66px; }
.nav-logo-text, .brand span {
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.035em;
font-size: clamp(0.95rem, 0.86rem + 0.4vw, 1.22rem);
white-space: nowrap;
}
.nav-links a, .navlinks a {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--ink-mid);
}
.nav-links a:hover, .nav-links a.active,
.navlinks a:hover, .navlinks a.active { color: var(--g-200); }
.top-bar {
background: linear-gradient(90deg, rgba(201,162,39,.14), rgba(201,162,39,.07) 50%, rgba(201,162,39,.14)) !important;
border-bottom: 1px solid var(--line-soft);
color: var(--g-200);
font-size: clamp(.7rem, .66rem + .18vw, .8rem) !important;
font-weight: 600;
letter-spacing: .01em;
padding: 9px 16px !important;
}
/* ── 7. BOTTOM NAV (mobile app bar) ────────────────────────── */
.bottom-nav {
background: rgba(10,9,7,.86) !important;
backdrop-filter: blur(28px) saturate(180%) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%) !important;
border-top: 1px solid var(--line-soft) !important;
box-shadow: 0 -10px 34px rgba(0,0,0,.62);
}
.bnav-item {
color: var(--ink-low);
font-weight: 600;
gap: 3px;
min-height: 54px;
transition: color .22s var(--ease), transform .22s var(--ease-spring);
}
.bnav-item > span:last-child, .bnav-center-lbl {
font-size: 0.63rem !important;
letter-spacing: .035em;
font-weight: 650;
}
.bnav-item.active { color: var(--g-300) !important; }
.bnav-center-disc {
background: linear-gradient(160deg, var(--g-100), var(--g-400) 58%, var(--g-600)) !important;
box-shadow: 0 0 0 4px rgba(8,8,6,.9), 0 8px 24px rgba(201,162,39,.4) !important;
}
/* ── 8. MODALS ─────────────────────────────────────────────── */
.modal {
background: var(--s-2) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--e-3) !important;
}
.modal-overlay { background: rgba(4,4,3,.78) !important; backdrop-filter: blur(10px); }
/* ── 9. BADGES / PILLS ─────────────────────────────────────── */
.hero-badge, .member-badge, .city-tag, .rental-feat, .biz-category {
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hero-badge {
background: rgba(201,162,39,.08);
border: 1px solid var(--line-hot);
color: var(--g-200);
border-radius: var(--r-pill);
padding: 8px 17px;
backdrop-filter: blur(10px);
}
/* ── 10. MOBILE ────────────────────────────────────────────── */
@media (max-width: 768px) {
body { font-size: 15.5px; }
/* Legacy pages used a hard 50px display size that wrapped badly */
h1 { font-size: clamp(1.85rem, 1.3rem + 3.4vw, 2.5rem) !important; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.9vw, 1.95rem) !important; }
.container, .wrap { padding-inline: 16px !important; }
.section { padding: 46px 0; }
/* Keep content clear of the fixed bottom app bar */
body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
.btn { width: auto; }
.hero-btns .btn, .cta-btns .btn { width: 100%; }
/* Nothing may exceed the viewport */
img, video, canvas, svg, table, pre { max-width: 100%; height: auto; }
.grid, .points, .tabs, .hero, .value-row, .mission-grid { grid-template-columns: 1fr !important; }
.card, .post-card, .widget, .modal { border-radius: var(--r-md); }
}
@media (max-width: 420px) {
.nav-logo img, .brand img { width: 32px !important; height: 32px !important; }
.btn { padding: 11px 18px; font-size: 0.9rem; }
.btn-lg { padding: 13px 22px; font-size: 0.96rem; }
}
/* ── 11. A11Y + MOTION ─────────────────────────────────────── */
:focus-visible {
outline: 2px solid var(--g-300);
outline-offset: 3px;
border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* Custom scrollbar — desktop polish */
@media (min-width: 769px) {
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--s-0); }
::-webkit-scrollbar-thumb {
background: linear-gradient(var(--g-600), var(--g-700));
border-radius: 99px;
border: 3px solid var(--s-0);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--g-400), var(--g-600)); }
}
/* ═══════════════════════════════════════════════════════════════
STATUS RINGS (companion to il-status.js)
Four meanings, each a spinning + sparkling ring around the avatar:
green = offering a job red = looking for a job
yellow = room available orange = looking for a room
Active for 90 days, then il-status.js removes the classes and all
animation stops.
═══════════════════════════════════════════════════════════════ */
.il-ring-wrap { position: relative; flex-shrink: 0; display: inline-block; }
.il-ring-inner {
position: absolute; inset: 3px;
border-radius: 50%; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--s-2);
z-index: 2;
}
.il-ring-inner img { width: 100%; height: 100%; object-fit: cover; }
.il-ring {
position: absolute; inset: 0;
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: opacity .4s var(--ease);
}
.il-ring.is-active { opacity: 1; animation: ilRingSpin 2.6s linear infinite; }
.il-ring--offering { background: conic-gradient(#00e676,#004d1c,#00ff88,#00602a,#00e676,#003d15,#00cc44,#00e676); }
.il-ring--looking { background: conic-gradient(#ff2222,#5c0000,#ff6b6b,#7a0000,#ff2222,#6b0000,#ff4444,#ff2222); }
.il-ring--rent-offering { background: conic-gradient(#ffd60a,#6b5200,#fff08a,#7d6100,#ffd60a,#5c4700,#ffe14d,#ffd60a); }
.il-ring--rent-looking { background: conic-gradient(#ff9500,#6b3d00,#ffc46b,#7d4700,#ff9500,#5c3400,#ffab3d,#ff9500); }
/* Sparkle: tiny glints drifting the opposite way so the ring shimmers */
.il-ring-sparkle {
position: absolute; inset: -2px;
border-radius: 50%;
pointer-events: none;
z-index: 3;
background:
radial-gradient(circle 1.6px at 50% 3%, rgba(255,255,255,.95), transparent 60%),
radial-gradient(circle 1.2px at 86% 22%, rgba(255,255,255,.85), transparent 60%),
radial-gradient(circle 1.5px at 94% 62%, rgba(255,255,255,.9), transparent 60%),
radial-gradient(circle 1.1px at 58% 96%, rgba(255,255,255,.8), transparent 60%),
radial-gradient(circle 1.4px at 12% 76%, rgba(255,255,255,.9), transparent 60%),
radial-gradient(circle 1.2px at 6% 30%, rgba(255,255,255,.85), transparent 60%);
animation: ilRingSparkle 3.2s linear infinite, ilRingTwinkle 1.5s ease-in-out infinite alternate;
}
.il-ring-wrap:not(:has(.il-ring.is-active)) .il-ring-sparkle { display: none; }
@keyframes ilRingSpin { to { transform: rotate(360deg); } }
@keyframes ilRingSparkle { to { transform: rotate(-360deg); } }
@keyframes ilRingTwinkle { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.il-ring.is-active, .il-ring-sparkle { animation: none !important; }
}
/* Countdown pill under the avatar: 90 … 1, then FINAL DAY */
.il-day-badge {
position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
z-index: 5; white-space: nowrap;
background: rgba(6,6,4,.94);
border: 1px solid var(--line-hot);
color: var(--g-200);
font-family: 'Inter', sans-serif;
font-size: 0.55rem; font-weight: 800; letter-spacing: .05em;
padding: 2px 8px; border-radius: var(--r-pill);
box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.il-day-badge.is-final { color: #ff6b6b; border-color: rgba(255,80,80,.65); }
/* Status chip used on cards in the feed / rentals list */
.il-status-chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'Inter', sans-serif;
font-size: 0.63rem; font-weight: 800; letter-spacing: .09em;
padding: 3px 10px; border-radius: var(--r-pill);
border: 1px solid currentColor;
background: rgba(255,255,255,.04);
}
.il-status-chip::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; box-shadow: 0 0 8px currentColor;
}
.il-status-chip--offering { color: #00e676; }
.il-status-chip--looking { color: #ff5555; }
.il-status-chip--rent-offering { color: #ffd60a; }
.il-status-chip--rent-looking { color: #ff9500; }
/* ── Reactions: Like · Sad · Angry · Hopeful · Fun (see il-react.js) ── */
.reaction-wrap { position: relative; display: inline-flex; }
.reaction-btn-trigger {
display: inline-flex; align-items: center; gap: 7px;
cursor: pointer; user-select: none; -webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
transition: color .2s var(--ease), transform .18s var(--ease-spring);
}
.reaction-btn-trigger:active { transform: scale(.94); }
.reaction-btn-trigger.is-reacted { font-weight: 750; }
.reaction-picker, .il-rpicker {
position: absolute; bottom: calc(100% + 10px); left: 50%;
transform: translateX(-50%) scale(.9);
display: flex; gap: 2px; padding: 7px 9px;
background: rgba(18,16,10,.97);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
border: 1px solid var(--line-hot); border-radius: var(--r-pill);
box-shadow: var(--e-3);
z-index: 900; white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity .18s var(--ease), transform .22s var(--ease-spring);
max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
}
.reaction-picker::-webkit-scrollbar, .il-rpicker::-webkit-scrollbar { display: none; }
.reaction-picker.open, .il-rpicker.open {
opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1);
}
.il-rp-opt {
display: flex; flex-direction: column; align-items: center; gap: 2px;
background: none; border: none; cursor: pointer;
padding: 6px 9px; border-radius: var(--r-md);
font-family: 'Inter', sans-serif; font-size: .58rem; font-weight: 700;
letter-spacing: .03em; line-height: 1;
transition: background .2s var(--ease), transform .2s var(--ease-spring);
}
.il-rp-opt span { color: var(--ink-mid); }
.il-rp-opt:hover, .il-rp-opt:focus-visible {
background: rgba(255,255,255,.07); transform: translateY(-3px) scale(1.06);
}
.il-rp-opt:hover span { color: var(--ink-hi); }
.post-stat svg { vertical-align: -2px; }
/* styles.css defines .reaction-picker twice (a base rule and a mobile media
query) with its own transform/opacity, which fought these rules and left
the picker stuck mid-transition and off-screen. Win decisively.
The picker is anchored to the Like button, which sits at the far LEFT of
the action bar — centring it there pushed the 5 options off the left edge
of a phone screen, so anchor left instead of centre. */
.reaction-picker, .il-rpicker {
left: 0 !important; right: auto !important;
transform: translateX(0) scale(.92) !important;
transform-origin: bottom left !important;
opacity: 0 !important; pointer-events: none !important;
}
.reaction-picker.open, .il-rpicker.open {
display: flex !important;
opacity: 1 !important; pointer-events: auto !important;
transform: translateX(0) scale(1) !important;
}
@media (max-width: 560px) { .il-rp-opt { padding: 6px 7px; } }
/* ═══════════════════════════════════════════════════════════════
MOBILE APP BAR — BACK AT THE BOTTOM (28 Jul 2026)
An earlier pass moved this bar to the top of the screen. It was
moved back: a bottom bar is the standard mobile app pattern, it is
thumb-reachable, and at the top it ate a second full row of header
on an already crowded phone screen and overlapped the first section
of the homepage.
styles.css redefines .bottom-nav's position/border/shadow across
several accumulated redesign passes — this file loads last on every
page, so this block (also last in this file) is the one rule set
that actually wins for all of them. Markup/class names
(.bottom-nav, .bnav-*) are unchanged.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.bottom-nav {
top: auto !important; bottom: 0 !important;
border-top: 1px solid rgba(201,162,39,0.25) !important;
border-bottom: none !important;
box-shadow: 0 -8px 30px rgba(0,0,0,0.55) !important;
padding-top: 0 !important;
/* Clear the iPhone home indicator / Android gesture bar. */
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
/* overflow MUST be visible. styles.css:1274 sets `overflow:hidden
!important` here to stop the labels wrapping on tiny screens, but that
also clips the FEED disc, which deliberately pokes ~20px ABOVE the bar —
the top of the round Italy Lions button simply disappeared. Wrapping is
already prevented by flex-wrap:nowrap and the per-label ellipsis rules,
so hiding overflow on the container was never needed for that. */
.bottom-nav-inner { align-items: flex-end !important; overflow: visible !important; }
.bottom-nav { overflow: visible !important; }
/* The FEED disc pokes UP above the bar's top edge again, the way it
was designed to when the bar lives at the bottom. */
.bnav-center-disc { margin-top: -18px !important; }
/* The disc must sit above the bar's own background/border to look like it
is breaking out of it, not hiding behind it. */
.bnav-center { position: relative !important; z-index: 2 !important; }
/* The active-item accent line hugs the bar's TOP edge so it faces the
page content, which is now above the bar. */
.bnav-item.active::before {
top: 0 !important; bottom: auto !important;
border-radius: 0 0 4px 4px !important;
}
/* No extra TOP clearance is needed any more — each page's own
top-bar/navbar clearance (.hero, .wrap, .app-layout, profile covers)
is enough on its own, exactly as it was before the bar was moved. */
body:has(.top-bar) { padding-top: var(--tb-h) !important; }
body:not(:has(.top-bar)) { padding-top: 0 !important; }
/* BOTTOM clearance instead, so the bar never covers the last section,
the footer, or a page's final call to action. */
body { padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px)) !important; }
.app-layout { padding-bottom: 24px !important; }
.profile-body { padding-bottom: 24px !important; }
#toast { bottom: calc(var(--bn-h) + 16px) !important; }
/* profile.html/profile-business.html: the cover no longer has to clear
a second bar at the top, so hand it back to styles.css's own value. */
.profile-cover { margin-top: 0 !important; }
}
/* ═══════════════════════════════════════════════════════════════
LEGACY PAGES — jobs.html / businesses.html / terms.html
These three were built on an older markup pattern (.nav-container
navbar, .biz-hero, .listing-card, .biz-card, .filter-chip, …) whose
CSS never existed in styles.css or here — so on the live site they
rendered as raw overlapping text with no layout at all. This block
is that missing stylesheet, matching the black/gold system used by
the rest of the app.
═══════════════════════════════════════════════════════════════ */
/* ── Legacy navbar: make it behave exactly like the modern .navbar ── */
.navbar .nav-container {
max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
gap: 18px; height: var(--nav-h);
}
.nav-container .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-hi); font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.nav-container .nav-logo b { color: var(--g-400); }
.lion-mini {
width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
background: linear-gradient(160deg, var(--g-200), var(--g-500));
color: #14120A; display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.nav-container .nav-links { display: flex; align-items: center; gap: 22px; }
.nav-container .nav-links a { color: var(--ink-mid); text-decoration: none; font-size: .86rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.nav-container .nav-links a:hover, .nav-container .nav-links a.active { color: var(--g-300); }
.nav-container .nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: none; border: none; color: var(--g-300); font-size: 1.15rem; cursor: pointer; padding: 6px; }
.btn-ghost { background: transparent !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.btn-gold { background: linear-gradient(160deg, var(--g-200), var(--g-500)) !important; color: #14120A !important; font-weight: 750; border: none !important; }
@media (max-width: 900px) {
.nav-container .nav-links {
display: none; position: fixed; left: 0; right: 0;
top: calc(var(--nav-h) + var(--bn-h));
flex-direction: column; align-items: stretch; gap: 0;
background: rgba(8,8,6,.98); backdrop-filter: blur(20px);
border-top: 1px solid var(--line); padding: 8px 0; z-index: 9600;
}
.nav-container .nav-links.open { display: flex; }
.nav-container .nav-links a { padding: 14px 22px; font-size: .95rem; }
.nav-toggle { display: block; }
.nav-container .nav-actions .btn { padding: 7px 13px !important; font-size: .78rem !important; }
}
@media (max-width: 560px) {
.nav-container .nav-logo span { font-size: .95rem; }
.nav-container .nav-actions .btn-ghost { display: none; }
}
/* ── Page hero (jobs + businesses) ──
padding-top includes var(--nav-h): the navbar is position:fixed, so
unlike a normal-flow header it reserves no space of its own and the
hero would otherwise start at y=0 underneath it. Modern pages carry
this same clearance in their own .hero/.wrap/.app-layout rules; these
legacy pages had none, which is why their titles sat behind the bar. */
.biz-hero {
padding: calc(var(--nav-h) + 46px) 0 30px; text-align: center;
background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(201,162,39,.10), transparent 70%);
border-bottom: 1px solid var(--line-soft);
}
.biz-hero h1 { font-family: 'Cinzel', serif; margin-bottom: 10px; }
.biz-hero > .container > p { color: var(--ink-mid); max-width: 620px; margin: 0 auto 22px; font-size: .96rem; }
.biz-search { display: flex; gap: 8px; max-width: 620px; margin: 0 auto; }
.biz-search > * { min-width: 0; }
.biz-search input, .biz-search select {
flex: 1; padding: 12px 14px; border-radius: var(--r-md);
background: var(--s-2); border: 1px solid var(--line); color: var(--ink-hi); outline: none; font-size: .88rem;
}
.biz-search select { flex: 0 0 auto; max-width: 140px; }
.biz-search .btn { flex: 0 0 auto; padding: 12px 18px !important; }
@media (max-width: 560px) {
.biz-search { flex-wrap: wrap; }
.biz-search input { flex: 1 1 100%; }
.biz-search select { flex: 1; max-width: none; }
}
/* ── Filter chips ── */
.biz-controls { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding: 18px 20px 6px; scrollbar-width: none; }
.biz-controls::-webkit-scrollbar { display: none; }
.filter-chip {
flex-shrink: 0; padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer;
background: var(--s-2); border: 1px solid var(--line);
color: var(--ink-mid); font-size: .82rem; font-weight: 600; white-space: nowrap;
transition: all .2s;
}
.filter-chip:hover, .filter-chip.active { border-color: var(--g-400); color: var(--g-300); background: rgba(201,162,39,.10); }
/* ── Listing cards (jobs) ── */
.listing-page { padding: 18px 20px 50px; }
.listing-layout { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.listing-card {
display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start;
background: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 18px; transition: border-color .25s, transform .25s;
}
.listing-card > * { min-width: 0; }
.listing-card:hover { border-color: var(--line-hot); transform: translateY(-2px); }
.listing-card h3 { font-size: 1.02rem; margin-bottom: 8px; color: var(--ink-hi); }
.listing-card p { color: var(--ink-mid); font-size: .88rem; line-height: 1.6; }
.icon-col {
width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-md);
background: linear-gradient(135deg, var(--g-300), var(--g-600));
color: #14120A; display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.meta-line { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.meta-line span { color: var(--ink-low); font-size: .78rem; display: inline-flex; align-items: center; gap: 5px; }
.price-tag { font-family: 'Cinzel', serif; font-size: 1.15rem; color: var(--g-300); white-space: nowrap; text-align: right; }
.tag {
display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: var(--r-pill);
font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.tag.offer { background: rgba(61,220,132,.14); color: #3ddc84; border: 1px solid rgba(61,220,132,.35); }
.tag.seeking { background: rgba(201,162,39,.14); color: var(--g-300); border: 1px solid var(--line-hot); }
.tag.new { background: rgba(91,156,255,.14); color: #5b9cff; border: 1px solid rgba(91,156,255,.35); }
.tag.urgent { background: rgba(255,107,53,.14); color: #ff6b35; border: 1px solid rgba(255,107,53,.35); }
@media (max-width: 640px) {
.listing-card { grid-template-columns: auto 1fr; gap: 12px; padding: 15px; }
.listing-card > div:last-child { grid-column: 1 / -1; }
.price-tag { text-align: left; }
}
/* ── Business directory cards ── */
.biz-grid { max-width: 1000px; margin: 0 auto; padding: 18px 20px 50px; display: flex; flex-direction: column; gap: 14px; }
.biz-card {
display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
background: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 18px; transition: border-color .25s, transform .25s;
}
.biz-card > * { min-width: 0; }
.biz-card:hover { border-color: var(--line-hot); transform: translateY(-2px); }
.biz-img {
width: 54px; height: 54px; flex-shrink: 0; border-radius: var(--r-md);
background: linear-gradient(135deg, var(--g-300), var(--g-600));
color: #14120A; display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; gap: 3px;
}
.biz-info h3 { font-size: 1.02rem; margin-bottom: 4px; color: var(--ink-hi); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.biz-category { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--g-300); display: block; margin-bottom: 7px; }
.biz-stars { color: var(--g-300); font-size: .82rem; margin-bottom: 6px; }
.biz-info .address { color: var(--ink-low); font-size: .8rem; display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.biz-info .intro { color: var(--ink-mid); font-size: .87rem; line-height: 1.6; }
@media (max-width: 560px) { .biz-card { padding: 15px; gap: 12px; } }
/* ── CTA + footer strip ── */
.cta-section {
padding: 52px 20px; text-align: center;
background: linear-gradient(135deg, rgba(201,162,39,.10), transparent 70%);
border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.cta-inner h2 { font-family: 'Cinzel', serif; margin-bottom: 10px; }
.cta-inner p { color: var(--ink-mid); max-width: 560px; margin: 0 auto 24px; }
.footer-bottom { text-align: center; padding: 26px 20px; color: var(--ink-low); font-size: .82rem; }
/* ── terms.html readable column ──
Same fixed-navbar clearance as .biz-hero above (terms.html has no hero). */
.terms-page { max-width: 800px; margin: 0 auto; padding: calc(var(--nav-h) + 30px) 20px 60px; }
.terms-page h1 { font-family: 'Cinzel', serif; margin-bottom: 20px; }
.terms-page h2 { font-size: 1.15rem; margin: 26px 0 10px; color: var(--g-300); }
.terms-page p, .terms-page li { color: var(--ink-mid); line-height: 1.75; font-size: .92rem; margin-bottom: 10px; }
.terms-page ul { padding-left: 22px; }
/* ═══════════════════════════════════════════════════════════════
BOTTOM NAV — LUXURY EMBLEM REDESIGN (29 Jul 2026)
The FEED lion reads like a luxury watch crown / automotive emblem
set INTO the bar, not a big button floating above it. Five concentric
circles share one centre point and step by exactly 4px of diameter:
56px socket — blends into the bar, makes the badge look built-in
52px outer — premium thin gold ring + shadow beneath
48px mid — near-black, soft gold glow
44px inner — dark-gold gradient
40px core — bright gold face holding the 27px lion
Only the top 8px of the 56px stack sits above the bar's border = 14%,
inside the 10-15% brief. Everything is centred on ONE point (top:20px
from the bar's top edge) so the rings can never drift apart.
This block is last in the file that loads last on every page, so it
wins over the five separate .bnav-center-disc definitions scattered
through styles.css (lines 736, 1234, 1503, 1720) — hence !important
on anything they also set.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Bar shell: taller, balanced, and never clipping the emblem ── */
.bottom-nav {
overflow: visible !important;
background: linear-gradient(180deg, rgba(10,9,4,0.96) 0%, rgba(6,6,6,0.99) 100%) !important;
border-top: 1px solid rgba(201,162,39,0.28) !important;
box-shadow: 0 -10px 34px rgba(0,0,0,0.65) !important;
}
.bottom-nav-inner {
height: 66px !important;
padding: 0 4px !important;
gap: 0 !important;
align-items: flex-end !important;
overflow: visible !important;
flex-wrap: nowrap !important;
}
/* ── The four side items: identical box, so spacing is perfectly even ── */
.bnav-item,
.bnav-center {
flex: 1 1 0 !important;
min-width: 0 !important;
height: 66px !important;
padding: 0 2px 8px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
}
.bnav-item .bnav-icon { font-size: 1.3rem !important; line-height: 1 !important; }
.bnav-item > span:last-child,
.bnav-center-lbl {
font-size: 0.6rem !important;
line-height: 1.15 !important;
letter-spacing: 0.4px !important;
max-width: 100% !important;
}
.bnav-center-lbl { color: var(--gold) !important; font-weight: 800 !important; }
/* ── Shared centre point for every ring ── */
.bnav-center { position: relative !important; }
/* LAYER 5 — 56px socket. Dark and low-contrast so the emblem looks
recessed into the bar rather than stuck on top of it. */
.bnav-center::before {
content: '';
position: absolute; left: 50%; top: 20px;
transform: translate(-50%, -50%);
width: 56px; height: 56px; border-radius: 50%;
background: radial-gradient(circle at 50% 35%, rgba(201,162,39,0.16) 0%, rgba(10,9,4,0.96) 62%, rgba(6,6,6,1) 100%);
box-shadow: 0 0 16px rgba(201,162,39,0.20);
pointer-events: none;
z-index: 0;
}
/* Soft shadow pooled beneath the emblem — grounds it on the bar. */
.bnav-center::after {
content: '';
position: absolute; left: 50%; top: 44px;
transform: translateX(-50%);
width: 42px; height: 10px; border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 72%);
pointer-events: none;
z-index: 0;
}
/* LAYER 4 — 52px outer ring: the premium thin gold line. */
.bnav-center-disc {
position: absolute !important;
left: 50% !important; top: 20px !important;
transform: translate(-50%, -50%) !important;
width: 52px !important; height: 52px !important;
margin: 0 !important;
border-radius: 50% !important;
border: 1px solid rgba(201,162,39,0.75) !important;
background: linear-gradient(160deg, rgba(28,22,6,0.98), rgba(8,8,8,1)) !important;
box-shadow:
0 6px 18px rgba(0,0,0,0.65),
0 0 22px rgba(201,162,39,0.28),
inset 0 1px 0 rgba(255,227,138,0.28) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
animation: none !important; /* kills styles.css bnavPulse */
transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease !important;
z-index: 1;
}
/* LAYER 3 — 48px, near-black with a soft gold glow in the gap. */
.bnav-center-disc::before {
content: '';
position: absolute; inset: 2px;
border-radius: 50%;
background: linear-gradient(200deg, #16120a 0%, #0a0a0a 70%);
box-shadow: 0 0 9px rgba(201,162,39,0.42), inset 0 0 6px rgba(0,0,0,0.9);
}
/* LAYER 2 — 44px, dark-gold gradient separating black from the gold face. */
.bnav-center-disc::after {
content: '';
position: absolute; inset: 4px;
border-radius: 50%;
background: linear-gradient(150deg, rgba(201,162,39,0.55) 0%, rgba(139,105,20,0.30) 55%, rgba(10,10,10,0.85) 100%);
box-shadow: inset 0 1px 0 rgba(255,227,138,0.35);
}
/* LAYER 1 — 40px gold face. The ![]()
IS the core: padding sets the
lion to 27px, which is ~23% larger than the 22px side icons. */
.bnav-center-disc img {
position: relative;
z-index: 2;
width: 40px !important;
height: 40px !important;
padding: 6.5px !important;
box-sizing: border-box !important;
border-radius: 50% !important;
object-fit: contain !important;
background: linear-gradient(135deg, #FFE38A 0%, #FFD56B 26%, var(--gold) 62%, #8B6914 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 4px rgba(0,0,0,0.5) !important;
filter: brightness(1.05) !important;
}
/* ── Tap: 1.0 → 1.08 → 1.0 ── */
@keyframes ilBnavTap {
0% { transform: translate(-50%, -50%) scale(1); }
45% { transform: translate(-50%, -50%) scale(1.08); }
100% { transform: translate(-50%, -50%) scale(1); }
}
.bnav-center.bnav-tap .bnav-center-disc {
animation: ilBnavTap .34s cubic-bezier(.34,1.56,.64,1) !important;
}
.bnav-center:active .bnav-center-disc {
transform: translate(-50%, -50%) scale(1.06) !important;
}
/* ── Selected: slow gold glow breathing, no size change ── */
@keyframes ilBnavGlow {
0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.65), 0 0 20px rgba(201,162,39,0.30), inset 0 1px 0 rgba(255,227,138,0.28); }
50% { box-shadow: 0 6px 22px rgba(0,0,0,0.65), 0 0 34px rgba(201,162,39,0.60), inset 0 1px 0 rgba(255,227,138,0.45); }
}
.bnav-center.active .bnav-center-disc {
border-color: rgba(255,227,138,0.9) !important;
animation: ilBnavGlow 2.6s ease-in-out infinite !important;
}
.bnav-center.active::before { box-shadow: 0 0 24px rgba(201,162,39,0.34); }
.bnav-center.active .bnav-center-lbl { color: #FFE38A !important; }
/* The side items keep their own active accent line at the bar's top edge. */
.bnav-item.active::before { top: 0 !important; bottom: auto !important; border-radius: 0 0 4px 4px !important; }
/* Narrow phones: shrink the whole stack proportionally, ratios intact. */
@media (max-width: 340px) {
.bottom-nav-inner, .bnav-item, .bnav-center { height: 62px !important; }
.bnav-center::before { width: 50px; height: 50px; top: 18px; }
.bnav-center-disc { width: 46px !important; height: 46px !important; top: 18px !important; }
.bnav-center-disc img { width: 36px !important; height: 36px !important; padding: 5.5px !important; }
.bnav-center::after { top: 39px; width: 36px; }
}
}
@media (prefers-reduced-motion: reduce) {
.bnav-center-disc,
.bnav-center.active .bnav-center-disc,
.bnav-center.bnav-tap .bnav-center-disc { animation: none !important; }
}