/* ============================================================ BET ETHIOPIA — SHARED STYLESHEET Design tokens are defined once in :root. Change colors, fonts, or spacing there and they update across the whole site. ============================================================ */ /* Fonts are loaded via tags in each page's , not @import — @import blocks CSS parsing and delays first paint. */ :root { /* ---- Color: named for the Ethiopian highlands (ink), turmeric and coffee-ceremony gold (accent), and sun-baked clay (secondary) ---- */ --ink: #1F3D2B; --ink-deep: #16291D; --paper: #FCFBF6; --parchment: #EFE9DB; --card: #FFFFFF; --charcoal: #22231C; --text-muted: #57584C; --text-on-ink: #F5F1E6; --text-on-ink-muted: #C7D2C6; --gold: #C08A28; --gold-bright: #D9A23B; --clay: #8C3B2E; --line: rgba(31, 61, 43, 0.14); --line-on-ink: rgba(245, 241, 230, 0.18); /* ---- Type ---- */ --font-display: 'Petrona', Georgia, serif; --font-body: 'IBM Plex Sans', -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* ---- Layout ---- */ --max-width: 1180px; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 22px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; } /* ---------- Reset ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--paper); color: var(--charcoal); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-3); } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); display: inline-flex; align-items: center; gap: 0.5em; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); display: inline-block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); } h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); } h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); } h3 { font-size: 1.25rem; } p { color: var(--text-muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.9em 1.6em; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--gold); color: var(--ink-deep); font-weight: 600; } .btn-primary:hover { background: var(--gold-bright); } .btn-ghost-light { background: transparent; color: var(--text-on-ink); border-color: var(--line-on-ink); } .btn-ghost-light:hover { border-color: var(--gold-bright); color: var(--gold-bright); } .btn-ghost-dark { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost-dark:hover { border-color: var(--ink); } .btn-block { width: 100%; } /* ---------- Header ---------- */ .site-header { background: var(--ink); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line-on-ink); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-ink); display: flex; align-items: center; gap: 0.6em; } .logo .dot { color: var(--gold-bright); } .nav-links { display: flex; align-items: center; gap: var(--space-4); } .nav-links a { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-on-ink-muted); transition: color 0.2s ease; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold-bright); } .nav-toggle { display: none; background: none; border: none; color: var(--text-on-ink); font-size: 1.6rem; cursor: pointer; } /* ---------- Hero (verification-seal signature) ---------- */ .hero { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%); color: var(--text-on-ink); padding: var(--space-6) 0 var(--space-5); position: relative; overflow: hidden; } .hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); align-items: center; } .hero h1 { color: var(--text-on-ink); margin: var(--space-2) 0 var(--space-2); } .hero p.lead { color: var(--text-on-ink-muted); font-size: 1.08rem; max-width: 46ch; margin-bottom: var(--space-4); } .hero-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); } .search-card { background: rgba(252, 251, 246, 0.06); border: 1px solid var(--line-on-ink); border-radius: var(--radius-md); padding: var(--space-2); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); } .search-card select, .search-card input { width: 100%; background: var(--paper); border: none; border-radius: var(--radius-sm); padding: 0.75em 0.8em; font-family: var(--font-body); font-size: 0.88rem; color: var(--charcoal); } .search-card button { grid-column: span 4; margin-top: 0.35rem; } /* ---- Seal / stamp signature element ---- */ .seal-wrap { display: flex; align-items: center; justify-content: center; } .seal { width: min(340px, 90%); height: auto; } .seal-ring-text { animation: spin 40s linear infinite; transform-origin: 50% 50%; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Trust bar ---------- */ .trust-bar { background: var(--parchment); border-bottom: 1px solid var(--line); } .trust-bar .wrap { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); justify-content: center; padding: var(--space-2) var(--space-3); } .trust-item { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--ink); display: flex; align-items: center; gap: 0.5em; } .trust-item::before { content: "✔"; color: var(--gold); } /* ---------- Generic section rhythm ---------- */ .section { padding: var(--space-6) 0; } .section-alt { background: var(--parchment); } .section-head { max-width: 60ch; margin-bottom: var(--space-4); } .section-head h2 { margin-top: var(--space-1); } .section-head p { margin-top: var(--space-2); font-size: 1.05rem; } .section-dark { background: var(--ink); color: var(--text-on-ink); } .section-dark h2 { color: var(--text-on-ink); } .section-dark p { color: var(--text-on-ink-muted); } /* ---------- Cards / grids ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); } .card h3 { margin-bottom: 0.5rem; } .card p { font-size: 0.95rem; } .path-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3); transition: border-color 0.2s ease, transform 0.2s ease; } .path-card:hover { border-color: var(--gold); transform: translateY(-3px); } .path-card .eyebrow { color: var(--clay); } .path-card .eyebrow::before { background: var(--clay); } .path-card h3 { margin: 0.7em 0 0.5em; } .path-card a.cta-link { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--gold); padding-bottom: 2px; display: inline-block; margin-top: var(--space-2); } .step { display: flex; gap: var(--space-2); align-items: flex-start; position: relative; padding-bottom: var(--space-3); } .step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; border-left: 1px dashed var(--line); } .step-marker { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-mono); font-size: 0.78rem; display: flex; align-items: center; justify-content: center; background: var(--card); } /* Listing card */ .listing { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .listing-media { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--parchment), #E3DAC3); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); position: relative; } .badge-verified { position: absolute; top: 10px; left: 10px; background: var(--ink); color: var(--gold-bright); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.35em 0.6em; border-radius: 20px; } .listing-body { padding: var(--space-2) var(--space-3) var(--space-3); } .listing-price { font-family: var(--font-mono); color: var(--ink); font-weight: 600; margin-bottom: 0.2em; } .listing-loc { font-size: 0.85rem; color: var(--text-muted); } /* Location pills */ .pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .pill { font-family: var(--font-mono); font-size: 0.8rem; border: 1px solid var(--line); border-radius: 30px; padding: 0.5em 1.1em; color: var(--ink); background: var(--card); } /* Testimonial */ .testimonial { border-left: 2px solid var(--gold); padding-left: var(--space-2); } .testimonial p.quote { font-size: 1.02rem; color: var(--charcoal); font-style: italic; } .testimonial .attribution { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); margin-top: 0.6em; } /* CTA band */ .cta-band { background: var(--gold); color: var(--ink-deep); } .cta-band h2 { color: var(--ink-deep); } .cta-band p { color: rgba(22, 41, 29, 0.75); } .cta-band .btn-ghost-dark { border-color: rgba(22,41,29,0.35); } /* ---------- Page header (sub-hero, for About/Services/Contact) ---------- */ .page-header { background: var(--ink); color: var(--text-on-ink); padding: var(--space-5) 0 var(--space-4); } .page-header .wrap { display: flex; align-items: center; gap: var(--space-4); justify-content: space-between; } .page-header h1 { color: var(--text-on-ink); margin-top: 0.4em; } .page-header p.lead { color: var(--text-on-ink-muted); max-width: 50ch; margin-top: var(--space-2); } .page-header .mini-seal { width: 110px; flex: none; } /* ---------- Contact page ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; } .contact-channel { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); } .contact-channel:first-child { padding-top: 0; } .contact-channel h3 { margin-bottom: 0.3em; } .contact-channel .method { font-family: var(--font-mono); font-size: 0.88rem; color: var(--ink); } .form-field { margin-bottom: var(--space-2); } .form-field label { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4em; } .form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.8em 0.9em; font-family: var(--font-body); font-size: 0.95rem; background: var(--card); color: var(--charcoal); } .form-field textarea { resize: vertical; min-height: 120px; } .form-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); margin-top: var(--space-2); } /* Formspree honeypot field — present in the DOM for bots to fill in, invisible and unreachable for real visitors and screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Contact form submit feedback */ .form-status { font-family: var(--font-mono); font-size: 0.85rem; margin-top: var(--space-2); min-height: 1.2em; } .form-status--success { color: #2E6B3E; } .form-status--error { color: var(--clay); } /* ---------- Auth pages (login/register) ---------- */ .auth-shell { max-width: 460px; margin: 0 auto; } .auth-shell .card { padding: var(--space-4) var(--space-3); } .auth-switch { text-align: center; margin-top: var(--space-3); font-size: 0.92rem; color: var(--text-muted); } .auth-switch a { color: var(--gold); text-decoration: underline; } /* ---------- Dashboard / Admin ---------- */ .dash-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: var(--space-3); } .dash-toolbar { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; } .status-badge { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3em 0.7em; border-radius: 20px; display: inline-block; } .status-badge--pending { background: #F3E4C4; color: #7A5A12; } .status-badge--verified { background: #DCEBDD; color: #2E6B3E; } .status-badge--rejected { background: #F2DAD5; color: var(--clay); } .manage-row { display: grid; grid-template-columns: 90px 1fr auto auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); } .manage-row .thumb { width: 90px; height: 64px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--parchment), #E3DAC3); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); } .manage-row h3 { font-size: 0.98rem; margin-bottom: 0.2em; } .manage-row .meta { font-size: 0.82rem; color: var(--text-muted); } .manage-row .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .manage-row .actions .btn { padding: 0.5em 0.9em; font-size: 0.7rem; } .empty-state { text-align: center; padding: var(--space-5) var(--space-2); color: var(--text-muted); font-size: 0.95rem; } .auth-gate-note { background: var(--parchment); border-radius: var(--radius-md); padding: var(--space-3); font-size: 0.92rem; color: var(--text-muted); text-align: center; } @media (max-width: 600px) { .manage-row { grid-template-columns: 70px 1fr; } .manage-row .actions { grid-column: 1 / -1; } } /* ---------- Footer ---------- */ .site-footer { background: var(--ink-deep); color: var(--text-on-ink-muted); padding: var(--space-5) 0 var(--space-3); } .footer-grid { display: grid; grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr 1.1fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-on-ink); } .footer-grid h4 { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-ink); margin-bottom: var(--space-2); } .footer-grid ul li { margin-bottom: 0.6em; font-size: 0.9rem; } .footer-grid ul li a:hover { color: var(--gold-bright); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3); font-family: var(--font-mono); font-size: 0.75rem; flex-wrap: wrap; gap: var(--space-2); } /* WhatsApp floating button */ .wa-float { position: fixed; bottom: 24px; right: 24px; background: var(--gold); color: var(--ink-deep); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 60; font-family: var(--font-mono); font-weight: 700; transition: transform 0.2s ease; } .wa-float:hover { transform: scale(1.06); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .seal-wrap { order: -1; max-width: 220px; margin: 0 auto var(--space-3); } .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); } .footer-grid > div:first-child { grid-column: 1 / -1; } .search-card { grid-template-columns: 1fr 1fr; } .search-card button { grid-column: span 2; } } @media (max-width: 720px) { .nav-links { position: absolute; top: 76px; left: 0; right: 0; background: var(--ink); flex-direction: column; align-items: flex-start; padding: var(--space-3); gap: var(--space-2); display: none; border-bottom: 1px solid var(--line-on-ink); } .nav-links.open { display: flex; } .nav-toggle { display: block; } .page-header .wrap { flex-direction: column; align-items: flex-start; } .page-header .mini-seal { display: none; } .footer-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .search-card { grid-template-columns: 1fr; } .search-card button { grid-column: span 1; } }