/* ========================================================================== HAAVAA design system — hand-written, mobile-first, dark/light aware. No build step: plain CSS custom properties + small utility classes. ========================================================================== */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Brand teal, taken from the HAAVAA logo */ --brand-50: #eafbfb; --brand-100: #cdf3f3; --brand-200: #9de6e7; --brand-300: #66d1d3; --brand-400: #35b3b8; --brand-500: #16959c; --brand-600: #10787f; --brand-700: #106067; --brand-800: #124d53; --brand-900: #124046; --accent-500: #ff9d3d; /* featured/highlight accent, warm contrast to teal */ --accent-600: #e8842a; --success-500: #1fa971; --danger-500: #e0473f; --warning-500: #d99a1b; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Light theme (default) */ --bg: #f6fbfb; --surface: #ffffff; --surface-2: #f0f6f6; --border: #dfe9e9; --text: #102325; --text-muted: #5b7275; --text-inverse: #ffffff; --link: var(--brand-600); --shadow: 0 1px 2px rgba(16,35,37,.06), 0 8px 24px rgba(16,35,37,.06); } /* Default theme is always light, regardless of OS/browser preference — dark mode is opt-in only, applied when the user explicitly toggles it (see /js/theme-init.js, which stamps data-theme="light" or "dark" on from the haavaa_theme cookie before first paint). */ :root[data-theme="dark"] { --bg: #0b1516; --surface: #10201f; --surface-2: #16302f; --border: #234342; --text: #eaf6f6; --text-muted: #9db9ba; --text-inverse: #0b1516; --link: var(--brand-300); --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { padding: 0; margin: 0; } html { touch-action: manipulation; } /* removes the ~300ms tap delay + double-tap-to-zoom, so taps feel instant like a native app */ body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; padding-bottom: calc(72px + env(safe-area-inset-bottom)); /* room for mobile bottom nav */ } @media (min-width: 900px) { body { padding-bottom: 0; } } /* Standalone (installed-to-home-screen) mode has no browser chrome, so the status bar area needs its own padding — in normal browser tabs this adds nothing since safe-area-inset-top is 0 there. */ @media (display-mode: standalone) { .topnav { padding-top: env(safe-area-inset-top); } } h1,h2,h3,h4 { line-height: 1.25; margin: 0 0 var(--space-3); font-weight: 700; } h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; } h4 { font-size: 1rem; } p { margin: 0 0 var(--space-3); color: var(--text); } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } small, .muted { color: var(--text-muted); } img { max-width: 100%; display: block; } :focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; } .container { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); } .container-narrow { max-width: 680px; margin: 0 auto; padding: 0 var(--space-4); } /* --- Layout utilities ------------------------------------------------- */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .grid { display: grid; gap: var(--space-4); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (min-width: 640px) { .sm\:grid-2 { grid-template-columns: repeat(2,1fr); } } @media (min-width: 900px) { .grid-2, .grid-3, .grid-4 { } } @media (max-width: 899px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } .wrap { flex-wrap: wrap; } .w-full { width: 100%; } .mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)} .mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)} .p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)} .text-center{text-align:center} .text-sm{font-size:.875rem} .text-xs{font-size:.75rem} .font-semibold{font-weight:600} .font-bold{font-weight:700} .hidden{display:none !important} @media (max-width:899px){.hide-mobile{display:none !important}} @media (min-width:900px){.hide-desktop{display:none !important}} /* --- Top nav ------------------------------------------------------------ */ .topnav { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--border); } .topnav-inner { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); padding: 10px var(--space-4); max-width:1080px; margin:0 auto; } .brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.15rem; color: var(--text); } .brand .dot { color: var(--brand-500); } .brand-logo { width:28px; height:28px; object-fit:contain; border-radius:0; flex-shrink:0; } .nav-links { display:flex; gap: var(--space-4); align-items:center; } .nav-links a { color: var(--text); font-weight: 500; } .icon-btn { background:none; border:none; cursor:pointer; color: var(--text); padding: 6px; border-radius: 999px; min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; } .icon-btn:hover { background: var(--surface-2); } .icon-btn:active { transform: scale(.92); } /* --- Bottom mobile nav --------------------------------------------------- */ .bottomnav { position: fixed; bottom:0; left:0; right:0; z-index: 40; background: var(--surface); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid var(--border); display: flex; justify-content: space-around; padding: 6px 0 max(6px, env(safe-area-inset-bottom)); } @media (min-width: 900px) { .bottomnav { display: none; } } .bottomnav a { display:flex; flex-direction:column; align-items:center; gap:2px; color: var(--text-muted); font-size: .68rem; font-weight:600; flex:1; padding: 6px 4px; min-height:48px; justify-content:center; transition: color .15s ease, transform .1s ease; } .bottomnav a:active { transform: scale(.94); } .bottomnav a span:first-child { font-size: 1.15rem; transition: transform .15s ease; } .bottomnav a.active { color: var(--brand-600); } .bottomnav a.active span:first-child { transform: translateY(-1px) scale(1.08); } .bottomnav .fab { background: var(--brand-500); color:#fff; border-radius:999px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; margin-top:-20px; font-size:1.4rem; box-shadow: var(--shadow); } /* --- Buttons -------------------------------------------------------------*/ .btn { display: inline-flex; align-items:center; justify-content:center; gap:6px; padding: 10px 18px; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration:none; transition: transform .08s ease, filter .15s ease, background-color .15s ease; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--brand-500); color: #fff; } .btn-primary:hover { filter: brightness(1.06); text-decoration:none; } .btn-accent { background: var(--accent-500); color:#20140a; } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } .btn-outline:hover { background: var(--surface-2); text-decoration:none; } .btn-outline:active { background: var(--surface-2); } .btn-ghost { background: transparent; color: var(--brand-600); } .btn-ghost:active { background: var(--surface-2); } .btn-danger { background: var(--danger-500); color:#fff; } .btn-sm { padding: 6px 12px; min-height: 36px; font-size: .82rem; border-radius: 8px; } .btn-block { width:100%; } .btn:disabled { opacity:.55; cursor:not-allowed; } /* --- Cards ---------------------------------------------------------------*/ .card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow); } .card-flat { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); } /* Listing card */ .listing-card { display:flex; flex-direction:column; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; } .listing-card .thumb { position:relative; aspect-ratio: 4/3; background: var(--surface-2); overflow:hidden; } .listing-card .thumb img { width:100%; height:100%; object-fit:cover; } .listing-card .body { padding: var(--space-3); display:flex; flex-direction:column; gap:4px; flex:1; } .listing-card .price { font-weight:800; color: var(--brand-700); font-size:1.05rem; } :root:not([data-theme="light"]) .listing-card .price { color: var(--brand-300); } .listing-card .title { font-weight:600; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .listing-card .meta { color: var(--text-muted); font-size:.78rem; } .badge { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.02em; } .badge-featured { background: var(--accent-500); color:#20140a; position:absolute; top:8px; left:8px; } .badge-verified { background: var(--brand-100); color: var(--brand-700); } :root:not([data-theme="light"]) .badge-verified { background: var(--brand-800); color: var(--brand-100); } .badge-status { background: var(--surface-2); color: var(--text-muted); } .badge-success { background: rgba(31,169,113,.15); color: var(--success-500); } .badge-danger { background: rgba(224,71,63,.15); color: var(--danger-500); } .badge-warning { background: rgba(217,154,27,.18); color: var(--warning-500); } /* --- Forms -----------------------------------------------------------------*/ label { display:block; font-weight:600; font-size:.85rem; margin-bottom:4px; } .field { margin-bottom: var(--space-4); } .hint { font-size:.78rem; color: var(--text-muted); margin-top:4px; } .error-text { font-size:.78rem; color: var(--danger-500); margin-top:4px; } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=search], select, textarea { width:100%; padding: 11px 12px; min-height: 44px; border-radius: var(--radius-sm); border:1px solid var(--border); background: var(--surface); color: var(--text); font-size: 16px; font-family: inherit; /* font-size must stay >=16px: below that, iOS Safari auto-zooms the whole page in on focus, which is the single biggest "this feels like a website, not an app" tell on iPhone. */ } textarea { min-height: 110px; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--brand-400); } input.invalid, select.invalid, textarea.invalid { border-color: var(--danger-500); } .checkbox-row { display:flex; align-items:flex-start; gap:8px; } .checkbox-row input { width:auto; margin-top:3px; } .switch { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; } .switch input { opacity:0; width:0; height:0; } .switch .slider { position:absolute; inset:0; background: var(--border); border-radius:999px; transition:.15s; cursor:pointer; } .switch .slider::before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; } .switch input:checked + .slider { background: var(--brand-500); } .switch input:checked + .slider::before { transform: translateX(18px); } /* --- Alerts --------------------------------------------------------------*/ .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size:.9rem; } .alert-info { background: var(--brand-50); color: var(--brand-800); border:1px solid var(--brand-100); } :root:not([data-theme="light"]) .alert-info { background: var(--surface-2); color: var(--brand-100); border-color: var(--border); } .alert-success { background: rgba(31,169,113,.12); color: var(--success-500); border:1px solid rgba(31,169,113,.3); } .alert-danger { background: rgba(224,71,63,.1); color: var(--danger-500); border:1px solid rgba(224,71,63,.3); } .alert-warning { background: rgba(217,154,27,.12); color: var(--warning-500); border:1px solid rgba(217,154,27,.3); } /* --- Tabs ------------------------------------------------------------------*/ .tabs { display:flex; gap: var(--space-2); border-bottom:1px solid var(--border); overflow-x:auto; } .tabs a, .tabs button { padding: 10px 4px; margin-right: var(--space-4); border:none; background:none; font-weight:600; color: var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; font-size:.9rem; } .tabs a.active, .tabs button.active { color: var(--brand-600); border-color: var(--brand-500); } /* --- Package pricing cards --------------------------------------------------*/ .pkg-card { border:2px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--surface); position:relative; } .pkg-card.featured { border-color: var(--accent-500); background: linear-gradient(180deg, rgba(255,157,61,.08), var(--surface) 40%); } .pkg-card .ribbon { position:absolute; top:-12px; right:20px; background: var(--accent-500); color:#20140a; font-weight:800; font-size:.7rem; padding:4px 12px; border-radius:999px; } .pkg-card ul { list-style:none; padding:0; margin: var(--space-3) 0; display:flex; flex-direction:column; gap:8px; } .pkg-card li { display:flex; gap:8px; align-items:flex-start; font-size:.9rem; } .pkg-card .price-row { display:flex; justify-content:space-between; align-items:baseline; padding: 8px 0; border-top:1px dashed var(--border); font-size:.85rem; } .pkg-card .total { font-size:1.6rem; font-weight:800; } /* --- Stepper (listing wizard) ----------------------------------------------*/ .stepper { display:flex; gap:4px; margin-bottom: var(--space-5); } .stepper .step { flex:1; text-align:center; font-size:.72rem; font-weight:700; color: var(--text-muted); padding-bottom:8px; border-bottom:3px solid var(--border); } .stepper .step.done { color: var(--brand-600); border-color: var(--brand-500); } .stepper .step.current { color: var(--text); border-color: var(--brand-500); } /* --- Rating stars ------------------------------------------------------------*/ .stars { color: var(--accent-500); letter-spacing:1px; } .rating-input { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px; } .rating-input input { position:absolute; opacity:0; } .rating-input label { cursor:pointer; font-size:1.6rem; color: var(--border); margin:0; } .rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { color: var(--accent-500); } /* --- Table (admin) ----------------------------------------------------------*/ .table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius: var(--radius-md); } table { width:100%; border-collapse: collapse; font-size:.88rem; min-width: 640px; } th, td { text-align:left; padding: 10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; } th { background: var(--surface-2); color: var(--text-muted); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; } tr:last-child td { border-bottom:none; } /* --- Admin shell -------------------------------------------------------------*/ .admin-shell { display:flex; min-height:100vh; } .admin-sidebar { width:230px; flex-shrink:0; background: var(--surface); border-right:1px solid var(--border); padding: var(--space-4); position:sticky; top:0; height:100vh; overflow-y:auto; } .admin-sidebar a { display:block; padding:8px 10px; border-radius:8px; color: var(--text); font-size:.88rem; font-weight:600; margin-bottom:2px; } .admin-sidebar a.active, .admin-sidebar a:hover { background: var(--surface-2); text-decoration:none; } .admin-sidebar .group-label { font-size:.68rem; text-transform:uppercase; color: var(--text-muted); font-weight:700; margin: var(--space-4) 0 6px; letter-spacing:.04em; } .admin-main { flex:1; padding: var(--space-5); max-width: 1200px; } @media (max-width: 860px) { .admin-shell { flex-direction:column; } .admin-sidebar { width:100%; height:auto; position:static; border-right:none; border-bottom:1px solid var(--border); } } .stat-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); } .stat-card .num { font-size:1.6rem; font-weight:800; } .stat-card .label { color: var(--text-muted); font-size:.8rem; } /* --- Empty states -------------------------------------------------------------*/ .empty { text-align:center; padding: var(--space-7) var(--space-4); color: var(--text-muted); } .empty .emoji { font-size:2.4rem; margin-bottom: var(--space-3); } /* --- Avatar --------------------------------------------------------------------*/ .avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; background: var(--surface-2); display:flex; align-items:center; justify-content:center; font-weight:700; color: var(--brand-600); flex-shrink:0; } .avatar-lg { width:76px; height:76px; font-size:1.4rem; } /* --- Search bar ------------------------------------------------------------------*/ .search-bar { display:flex; gap:8px; background: var(--surface); border:1px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 16px; align-items:center; } .search-bar input { border:none; padding: 8px 4px; } .search-bar input:focus { outline:none; } .search-bar button { border-radius: 999px; } .hero-search { background: linear-gradient(160deg, var(--brand-600), var(--brand-800)); color:#fff; padding: var(--space-6) var(--space-4); border-radius: 0 0 24px 24px; } .hero-search h1 { color:#fff; } .hero-search p { color: rgba(255,255,255,.85); } .category-pill { display:flex; flex-direction:column; align-items:center; gap:6px; padding: var(--space-3); background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); text-align:center; font-size:.78rem; font-weight:600; color: var(--text); } .category-pill .emoji { font-size:1.5rem; } .promo-banner { background: linear-gradient(120deg, var(--accent-500), #ffb35c); color:#26160a; border-radius: var(--radius-md); padding: var(--space-4); display:flex; justify-content:space-between; align-items:center; gap: var(--space-3); flex-wrap:wrap; } .promo-banner.closed { background: var(--surface-2); color: var(--text-muted); } footer.site-footer { border-top:1px solid var(--border); margin-top: var(--space-7); padding: var(--space-6) 0; color: var(--text-muted); font-size:.85rem; } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton { 0%{background-position:100% 50%} 100%{background-position:0 50%} } dialog { border:none; border-radius: var(--radius-md); padding:0; max-width: 420px; width: 90%; background: var(--surface); color: var(--text); box-shadow: var(--shadow); } dialog::backdrop { background: rgba(0,0,0,.5); } dialog .dialog-body { padding: var(--space-5); } /* --- Avatar crop dialog ---------------------------------------------------*/ .crop-stage { position: relative; width: 320px; height: 320px; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 50%; background: var(--surface-2); touch-action: none; cursor: grab; border: 2px solid var(--border); } .crop-stage:active { cursor: grabbing; } .crop-stage img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }