ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / thebhoeo / public_html / readtravel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Read Travel — Client Portal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<style>

:root {
  --ink:     #080E1A;
  --ink2:    #0D1628;
  --navy:    #0C1F3F;
  --teal:    #10B9CF;
  --teal2:   #0E9FB3;
  --gold:    #F5A623;
  --cyan:    #06D6C7;
  --white:   #FFFFFF;
  --bd:      rgba(255,255,255,0.08);
  --bd2:     rgba(255,255,255,0.04);
  --td-hi:   #FFFFFF;
  --td-md:   rgba(255,255,255,0.55);
  --td-lo:   rgba(255,255,255,0.28);
  --f:       'Outfit', sans-serif;
  --fm:      'Fira Code', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--f);
  background: var(--ink);
  color: var(--td-md);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── BG LAYERS ── */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(16,185,207,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,207,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-glow-tl {
  position: fixed; top: -180px; left: -180px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(16,185,207,0.1) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
.bg-glow-br {
  position: fixed; bottom: -180px; right: -180px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(245,166,35,0.08) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* ── LAYOUT ── */
.shell {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  min-height: 100vh;
}

/* ── TOP META BAR ── */
.meta-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 60px;
  background: rgba(8,14,26,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bd);
}
.meta-brand {
  display: flex; align-items: center; gap: 10px;
}
.meta-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(16,185,207,0.7);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.meta-label {
  font-family: var(--fm); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #fff;
}
.meta-right {
  font-family: var(--fm); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--td-lo);
}
.meta-right span { color: var(--teal); }

/* ── MAIN CONTENT ── */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  width: 100%;
  text-align: center;
}

/* logo / agency mark */
.agency-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(16,185,207,0.07);
  border: 1px solid rgba(16,185,207,0.2);
  border-radius: 40px;
  padding: 8px 20px;
  margin-bottom: 48px;
}
.agency-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
}
.agency-badge-text {
  font-family: var(--fm); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal);
}

.headline {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  color: var(--td-hi);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.headline span { color: var(--teal); }

.sub {
  font-size: 17px; font-weight: 400;
  color: var(--td-md); line-height: 1.7;
  max-width: 520px; margin-bottom: 64px;
}

/* ── CARDS ── */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  margin-bottom: 48px;
}

.card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bd2);
  border-radius: 20px;
  padding: 44px 40px 40px;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  group: true;
}

/* hover glow fill */
.card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.35s;
}
.card-audit::before  { background: radial-gradient(ellipse at 50% 0%, rgba(16,185,207,0.12) 0%, transparent 65%); }
.card-proposal::before { background: radial-gradient(ellipse at 50% 0%, rgba(245,166,35,0.12) 0%, transparent 65%); }

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.card:hover::before { opacity: 1; }
.card-audit:hover  { border-color: rgba(16,185,207,0.3); }
.card-proposal:hover { border-color: rgba(245,166,35,0.3); }

/* top accent bar */
.card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  transition: opacity 0.35s;
  opacity: 0.6;
}
.card:hover::after { opacity: 1; }
.card-audit::after  { background: linear-gradient(to right, var(--teal), transparent); }
.card-proposal::after { background: linear-gradient(to right, var(--gold), transparent); }

.card-inner { position: relative; z-index: 2; }

/* icon block */
.card-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin-bottom: 28px;
  transition: transform 0.3s;
}
.card:hover .card-icon { transform: scale(1.06); }
.card-audit   .card-icon { background: rgba(16,185,207,0.12); border: 1px solid rgba(16,185,207,0.2); }
.card-proposal .card-icon { background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.25); }

/* type tag */
.card-type {
  font-family: var(--fm); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 10px;
}
.card-audit   .card-type { color: var(--teal); }
.card-proposal .card-type { color: var(--gold); }

.card-title {
  font-size: 26px; font-weight: 800;
  color: var(--td-hi); letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 12px;
}

.card-desc {
  font-size: 14px; line-height: 1.7;
  color: var(--td-md);
  margin-bottom: 32px;
}

/* meta pills */
.card-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.pill {
  font-family: var(--fm); font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 500;
}
.card-audit   .pill { background: rgba(16,185,207,0.08); color: rgba(16,185,207,0.8); border: 1px solid rgba(16,185,207,0.15); }
.card-proposal .pill { background: rgba(245,166,35,0.08); color: rgba(245,166,35,0.8); border: 1px solid rgba(245,166,35,0.15); }

/* CTA row */
.card-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--bd2);
}
.card-cta-label {
  font-size: 14px; font-weight: 700; color: var(--td-hi);
}
.card-cta-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  border: 1px solid var(--bd);
  color: var(--td-md);
  transition: all 0.3s;
}
.card:hover .card-cta-arrow {
  transform: translateX(4px);
  border-color: rgba(255,255,255,0.2);
  color: var(--td-hi);
}
.card-audit:hover   .card-cta-arrow { background: rgba(16,185,207,0.15); border-color: rgba(16,185,207,0.4); color: var(--teal); }
.card-proposal:hover .card-cta-arrow { background: rgba(245,166,35,0.15); border-color: rgba(245,166,35,0.4); color: var(--gold); }

/* ── STATS ROW ── */
.stats {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--bd2);
  border-radius: 14px; overflow: hidden;
  width: 100%;
}
.stat-item {
  flex: 1; text-align: center;
  padding: 20px 16px;
  border-right: 1px solid var(--bd2);
  background: rgba(255,255,255,0.02);
}
.stat-item:last-child { border-right: none; }
.stat-n {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1; margin-bottom: 5px;
}
.stat-l {
  font-family: var(--fm); font-size: 9px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--td-lo);
}
.s-teal { color: var(--teal); }
.s-gold { color: var(--gold); }
.s-white { color: var(--td-hi); }

/* ── FOOTER ── */
.foot {
  position: relative; z-index: 2;
  text-align: center;
  padding: 24px;
  border-top: 1px solid var(--bd2);
  font-family: var(--fm); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--td-lo);
}
.foot span { color: var(--td-lo); margin: 0 8px; }
.foot a { color: var(--teal); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 680px) {
  .cards { grid-template-columns: 1fr; }
  .meta-bar { padding: 0 24px; }
  .shell { padding: 80px 20px 40px; }
  .card { padding: 32px 28px 28px; }
  .stats { flex-wrap: wrap; border-radius: 10px; }
  .stat-item { min-width: 50%; border-bottom: 1px solid var(--bd2); }
}

</style>
</head>
<body>

<div class="meta-bar">
  <div class="meta-brand">
    <span class="meta-dot"></span>
    <span class="meta-label">The Binary Souls</span>
  </div>
  <div class="meta-right">Client: <span>Read Travel</span> &nbsp;·&nbsp; Ref: RT-2026</div>
</div>

<div class="shell">
  <div class="content">

<div class="agency-badge">
      <span class="agency-badge-dot"></span>
      <span class="agency-badge-text">Prepared by The Binary Souls — 27<small>th</small> Feb 2026</span>
    </div>

<h1 class="headline">Your <span>Digital</span><br>Strategy, Delivered.</h1>
    <p class="sub">Everything we've prepared for Read Travel — choose a document below to explore the full audit of your current site or the complete redesign proposal.</p>

<div class="cards">

<a class="card card-audit" href="website_audit.html">
        <div class="card-inner">
          <div class="card-icon">🔍</div>
          <div class="card-type">Document 01</div>
          <div class="card-title">Website Audit Report</div>
          <div class="card-desc">A deep, evidence-based analysis of your current website — covering 18 UX issues, 10 conversion leaks, credibility gaps, mobile risks, and a competitor benchmark against 9 direct rivals.</div>
          <div class="card-pills">
            <span class="pill">18 UX Issues</span>
            <span class="pill">10 Conversion Leaks</span>
            <span class="pill">9 Competitors</span>
            <span class="pill">Quick Wins</span>
            <span class="pill">90-Day Roadmap</span>
          </div>
          <div class="card-cta">
            <span class="card-cta-label">Open Audit Report</span>
            <span class="card-cta-arrow">→</span>
          </div>
        </div>
      </a>

<a class="card card-proposal" href="website_proposal.html">
        <div class="card-inner">
          <div class="card-icon">📋</div>
          <div class="card-type">Document 02</div>
          <div class="card-title">Redesign Proposal</div>
          <div class="card-desc">The full website redesign strategy — new sitemap, homepage wireframe, quote form rebuild, trust architecture, brand direction, 3 investment tiers, timeline, and scope of work.</div>
          <div class="card-pills">
            <span class="pill">Full Scope</span>
            <span class="pill">8-Phase Timeline</span>
            <span class="pill">GA4 Tracking</span>
            <span class="pill">Homepage Blueprint</span>
          </div>
          <div class="card-cta">
            <span class="card-cta-label">Open Proposal</span>
            <span class="card-cta-arrow">→</span>
          </div>
        </div>
      </a>

</div>

<div class="stats">
      <div class="stat-item">
        <div class="stat-n s-teal">18</div>
        <div class="stat-l">Issues Found</div>
      </div>
      <div class="stat-item">
        <div class="stat-n s-white">9</div>
        <div class="stat-l">Competitors Audited</div>
      </div>
      <div class="stat-item">
        <div class="stat-n s-gold">3</div>
        <div class="stat-l">Investment Options</div>
      </div>
      <div class="stat-item">
        <div class="stat-n s-teal">12</div>
        <div class="stat-l">Quick Wins</div>
      </div>
      <div class="stat-item">
        <div class="stat-n s-white">8</div>
        <div class="stat-l">Proposal Sections</div>
      </div>
      <div class="stat-item">
        <div class="stat-n s-gold">60%</div>
        <div class="stat-l">Est. Uplift</div>
      </div>
    </div>

</div>
</div>

<div class="foot">
  thebinarysouls.com/readtravel
  <span>·</span>
  Prepared for Read Travel
  <span>·</span>
  Confidential
  <span>·</span>
  <a href="https://thebinarysouls.com" target="_blank">thebinarysouls.com</a>
</div>

</body>
</html>

[-] website_proposal.html [edit]
[-] index.html [edit]
[-] .htaccess [edit]
[+] ..
[-] website_audit.html [edit]