Finn Harvor: BridgeText test

<!doctype html>

<head>

content="BridgeText — new media publishing for ebooks, illustrated books and hybrid digital storytelling.">

<title>BridgeText — New Media Publishing</title>

<style>

/* ================================

BRIDGETEXT — GLOBAL STYLES

================================ */

:root {

--ink: #171327;

--muted: #625d70;

--paper: #fbfafc;

--white: #ffffff;

--purple: #6d35d9;

--magenta: #cf1686;

--blue: #143bba;

--orange: #f18b21;

--line: #e8e4ee;

--shadow: 0 20px 60px rgba(38,20,74,.12);

--radius: 24px;

/* height of the sticky nav, used for scroll offsetting anchor links */

--nav-height: 76px;

}

* {

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

body {

margin: 0;

background: var(--paper);

color: var(--ink);

font-family:

Inter,

ui-sans-serif,

system-ui,

-apple-system,

BlinkMacSystemFont,

"Segoe UI",

sans-serif;

line-height: 1.55;

}

a {

color: inherit;

text-decoration: none;

}

.container {

width: min(1160px, calc(100% - 40px));

margin: auto;

}

/* Anchor targets: offset scroll position so content isn't hidden

under the sticky nav bar when jumping to #books, #publishing, etc. */

section[id] {

scroll-margin-top: var(--nav-height);

}

/* ================================

NAVIGATION

================================ */

nav {

position: sticky;

top: 0;

z-index: 20;

background: rgba(251,250,252,.88);

-webkit-backdrop-filter: blur(16px);

backdrop-filter: blur(16px);

border-bottom: 1px solid rgba(232,228,238,.8);

}

.nav-inner {

height: var(--nav-height);

display: flex;

align-items: center;

justify-content: space-between;

gap: 24px;

}

.wordmark {

font-weight: 800;

font-size: 25px;

letter-spacing: -1px;

color: var(--purple);

}

.wordmark span {

font-weight: 400;

color: var(--ink);

}

.navlinks {

display: flex;

gap: 28px;

font-size: 14px;

font-weight: 600;

color: #403b4b;

}

.navlinks a:hover {

color: var(--purple);

}

/* ================================

BUTTONS

================================ */

.cta {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

padding: 12px 18px;

border-radius: 999px;

font-weight: 750;

font-size: 14px;

background: var(--ink);

color: white;

transition:

.2s transform,

.2s box-shadow;

}

.cta:hover {

transform: translateY(-2px);

box-shadow:

0 10px 25px rgba(23,19,39,.18);

}

.cta:focus-visible {

outline: 2px solid var(--purple);

outline-offset: 2px;

}

.cta.primary {

background:

linear-gradient(

100deg,

var(--purple),

var(--magenta)

);

}

.cta.secondary {

background: #fff;

color: var(--ink);

border: 1px solid var(--line);

}

/* ================================

HERO

================================ */

.hero {

padding: 76px 0 88px;

overflow: hidden;

}

.hero-grid {

display: grid;

grid-template-columns:

1.03fr

.97fr;

align-items: center;

gap: 55px;

}

.eyebrow {

display: inline-flex;

align-items: center;

gap: 9px;

padding: 7px 12px;

border: 1px solid #ddd6e9;

border-radius: 999px;

background: #fff;

font-size: 12px;

font-weight: 800;

letter-spacing: .08em;

text-transform: uppercase;

color: var(--purple);

}

.eyebrow i {

width: 7px;

height: 7px;

border-radius: 50%;

background: var(--magenta);

display: inline-block;

}

h1 {

font-size: clamp(48px, 7vw, 82px);

line-height: .98;

letter-spacing: -.055em;

margin: 22px 0;

}

.gradient-text {

background:

linear-gradient(

100deg,

var(--purple),

var(--magenta),

var(--orange)

);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

-webkit-text-fill-color: transparent;

}

.lead {

font-size: 20px;

color: var(--muted);

max-width: 620px;

}

.actions {

display: flex;

flex-wrap: wrap;

gap: 12px;

margin-top: 30px;

}

/* ================================

HERO IMAGE

================================ */

.hero-art {

position: relative;

display: flex;

justify-content: center;

}

.hero-art:before {

content: "";

position: absolute;

width: 85%;

aspect-ratio: 1;

border-radius: 50%;

background:

radial-gradient(

circle,

#eee7ff 0%,

#f7f3ff 48%,

transparent 70%

);

z-index: -1;

filter: blur(4px);

}

.hero-art svg,

.hero-art img {

width: min(100%, 520px);

height: auto;

border-radius: 28px;

box-shadow: var(--shadow);

display: block;

}

/* ================================

SECTIONS

================================ */

.section {

padding: 86px 0;

}

.section.alt {

background: #fff;

}

.section-head {

display: flex;

align-items: end;

justify-content: space-between;

gap: 30px;

margin-bottom: 34px;

}

.kicker {

color: var(--purple);

font-size: 12px;

font-weight: 850;

letter-spacing: .12em;

text-transform: uppercase;

}

h2 {

font-size: clamp(34px, 5vw, 54px);

line-height: 1.02;

letter-spacing: -.045em;

margin: 9px 0 0;

}

.section-head p {

max-width: 500px;

color: var(--muted);

margin: 0;

}

/* ================================

BOOK CATALOGUE

================================ */

.books {

display: grid;

grid-template-columns:

repeat(3, 1fr);

gap: 20px;

}

.book {

background: var(--paper);

border: 1px solid var(--line);

border-radius: var(--radius);

padding: 20px;

transition:

.2s transform,

.2s box-shadow;

}

.book:hover {

transform: translateY(-5px);

box-shadow: var(--shadow);

}

.cover {

height: 270px;

border-radius: 16px;

display: grid;

place-items: center;

text-align: center;

padding: 25px;

overflow: hidden;

}

.cover.one {

background:

linear-gradient(

145deg,

#23125f,

#7c2bcf 52%,

#f08b23

);

}

.cover.two {

background:

linear-gradient(

145deg,

#0c2269,

#1255c5 48%,

#df1b82

);

}

.cover.three {

background:

linear-gradient(

145deg,

#19152a,

#cf1686 55%,

#ffad29

);

}

.cover strong {

color: white;

font-size: 27px;

line-height: 1.03;

letter-spacing: -.04em;

}

.cover small {

display: block;

color: rgba(255,255,255,.8);

margin-top: 14px;

font-weight: 650;

}

.book-meta {

padding: 18px 2px 2px;

}

.book-meta h3 {

margin: 0 0 5px;

font-size: 20px;

}

.book-meta p {

margin: 0;

color: var(--muted);

font-size: 14px;

}

.pill {

display: inline-block;

margin-top: 13px;

padding: 5px 9px;

border-radius: 999px;

background: #eee8fb;

color: var(--purple);

font-size: 11px;

font-weight: 800;

}

/* ================================

FEATURES

================================ */

.features {

display: grid;

grid-template-columns:

repeat(3, 1fr);

gap: 18px;

}

.feature {

padding: 28px;

border: 1px solid var(--line);

border-radius: var(--radius);

background: #fff;

}

.icon {

width: 45px;

height: 45px;

border-radius: 14px;

display: grid;

place-items: center;

background:

linear-gradient(

135deg,

#eee7ff,

#ffe8f4

);

font-size: 21px;

margin-bottom: 20px;

}

.feature h3 {

margin: 0 0 8px;

font-size: 20px;

}

.feature p {

margin: 0;

color: var(--muted);

font-size: 15px;

}

/* ================================

ABOUT / BRIDGE SECTION

================================ */

.bridge {

display: grid;

grid-template-columns:

.9fr

1.1fr;

gap: 60px;

align-items: center;

}

.bridge-copy p {

color: var(--muted);

font-size: 17px;

}

.quote {

padding: 35px;

border-radius: 28px;

background:

linear-gradient(

135deg,

#f0eaff,

#fff1f8

);

border: 1px solid #e5dcef;

}

.quote p {

font-size: 26px;

line-height: 1.2;

letter-spacing: -.025em;

margin: 0 0 18px;

}

.quote small {

color: var(--muted);

font-weight: 700;

}

/* ================================

NEWSLETTER

================================ */

.subscribe {

border-radius: 32px;

padding: 55px;

background:

linear-gradient(

115deg,

#201052 0%,

#6d35d9 48%,

#c91583 100%

);

color: white;

display: grid;

grid-template-columns:

1fr

1fr;

gap: 40px;

align-items: center;

}

.subscribe h2 {

color: white;

}

.subscribe p {

color: rgba(255,255,255,.78);

}

.form {

display: flex;

gap: 10px;

}

input {

width: 100%;

border: 0;

border-radius: 999px;

padding: 15px 18px;

font: inherit;

outline: none;

}

input:focus-visible {

outline: 2px solid white;

outline-offset: 2px;

}

.form .cta {

background: white;

color: var(--ink);

border: 0;

white-space: nowrap;

}

/* ================================

FOOTER

================================ */

footer {

padding: 38px 0;

border-top: 1px solid var(--line);

color: var(--muted);

font-size: 13px;

}

.footer-inner {

display: flex;

justify-content: space-between;

gap: 20px;

align-items: center;

}

/* ================================

REDUCED MOTION

================================ */

@media (prefers-reduced-motion: reduce) {

html {

scroll-behavior: auto;

}

.cta,

.book {

transition: none;

}

/* ================================

MOBILE

================================ */

@media(max-width:820px) {

.navlinks {

display: none;

}

.hero {

padding-top: 50px;

}

.hero-grid,

.bridge,

.subscribe {

grid-template-columns: 1fr;

}

.hero-art {

order: -1;

}

.books,

.features {

grid-template-columns: 1fr;

}

.section-head {

display: block;

}

.section-head p {

margin-top: 14px;

}

.subscribe {

padding: 35px 25px;

}

/* ================================

SMALL PHONES

================================ */

@media(max-width:520px) {

.container {

width: min(100% - 28px, 1160px);

}

.nav-inner {

height: 68px;

}

.nav-inner > .cta {

display: none;

}

h1 {

font-size: 50px;

}

.lead {

font-size: 17px;

}

.hero-art img,

.hero-art svg {

border-radius: 20px;

}

.form {

flex-direction: column;

}

</style>

</head>

<body>

<!-- =====================================

NAVIGATION

====================================== -->

<nav>

Bridge<span>Text</span>

</a>

<a href="#books">Books</a>

<a href="#publishing">Publishing</a>

<a href="#about">About</a>

<a href="#contact">Contact</a>

</div>

Publish with us

</a>

</div>

</nav>

<!-- =====================================

MAIN

====================================== -->

<main>

<!-- =====================================

HERO

====================================== -->

<div>

New media publishing

</div>

<h1>

Books that

cross the bridge.

</span>

</h1>

BridgeText publishes ebooks and illustrated digital

works that connect literature, visual storytelling

and the possibilities of new media.

</p>

Explore the catalogue →

</a>

How BridgeText works

</a>

</div>

<!-- BRIDGETEXT GRAPHIC

Placeholder inline SVG — swap for your real artwork by

replacing this <svg> block with an <img src="..." alt="..."> tag. -->

<defs>

</linearGradient>

</defs>

<path d="M60 260 C130 210 190 210 260 240 C330 210 390 210 460 260"

fill="none" stroke="url(#bt-grad)" stroke-width="10" stroke-linecap="round"/>

<text x="260" y="345" text-anchor="middle" font-family="Inter, sans-serif" font-weight="800" font-size="30" fill="#ffffff">BridgeText</text>

<text x="260" y="372" text-anchor="middle" font-family="Inter, sans-serif" font-weight="600" font-size="14" fill="#c9bdf0">New media publishing</text>

</svg>

</div>

</section>

<!-- =====================================

BOOK CATALOGUE

====================================== -->

<div>

The catalogue

</div>

<h2>

Stories in more than one form.

</h2>

</div>

<p>

Discover fiction, literary works, visual books

and hybrid projects designed for contemporary readers.

</p>

</div>

<div>

THE<br>

BUSINESS<br>

ARMY

</strong>

<small>

An illustrated historical novel

</small>

</div>

<h3>

The Business Army

</h3>

<p>

History · Fiction · Illustrated

</p>

Coming soon

</span>

</div>

</article>

<div>

THE<br>

GREEN<br>

DIARIES

</strong>

<small>

A literary environmental project

</small>

</div>

<h3>

The Green Diaries

</h3>

<p>

Literature · Environment · Multimedia

</p>

Featured project

</span>

</div>

</article>

<div>

NEW<br>

VOICES

</strong>

<small>

Short works for a digital age

</small>

</div>

<h3>

BridgeText Editions

</h3>

<p>

Literary fiction · Essays · Poetry

</p>

Explore

</span>

</div>

</article>

</div>

</section>

<!-- =====================================

PUBLISHING MODEL

====================================== -->

<div>

The BridgeText model

</div>

<h2>

Publishing, reimagined.

</h2>

</div>

<p>

A lightweight digital-first approach lets ambitious

books reach readers without requiring a traditional

publishing infrastructure.

</p>

</div>

◈

</div>

<h3>

Digital first

</h3>

<p>

Beautiful ebooks and web-native editions built

for phones, tablets and desktops.

</p>

</article>

✦

</div>

<h3>

Visual storytelling

</h3>

<p>

Illustration, photography, video and motion can

become part of the reading experience.

</p>

</article>

↗

</div>

<h3>

Audience connected

</h3>

<p>

Books can live alongside trailers, author videos,

social media and other forms of discovery.

</p>

</article>

</div>

</section>

<!-- =====================================

ABOUT

====================================== -->

Why BridgeText?

</div>

<h2>

The bridge is the idea.

</h2>

<p>

Traditional publishing and new media do not have

to be separate worlds. BridgeText brings text,

image, film and digital distribution together

while keeping the book at the centre.

</p>

<p>

We are interested in distinctive voices, strong

ideas and projects that benefit from crossing formats.

</p>

Start a conversation →

</a>

</div>

<p>

“A book can be a doorway into an entire media world.”

</p>

<small>

BRIDGETEXT · NEW MEDIA PUBLISHING

</small>

</div>

</section>

<!-- =====================================

NEWSLETTER

====================================== -->

<div>

<div

class="kicker"

style="color:#fff"

Stay connected

</div>

<h2>

New books. New forms. New readers.

</h2>

<p>

Join the BridgeText list for announcements,

new releases and featured projects.

</p>

</div>

<form

class="form"

onsubmit="

event.preventDefault();

this.querySelector('button').textContent='Thank you ✓';

<input

type="email"

name="email"

id="subscribe-email"

aria-label="Email address"

placeholder="Your email address"

required

<button

class="cta"

type="submit"

</button>

</form>

</div>

</section>

</main>

<!-- =====================================

FOOTER

====================================== -->

<div>

BridgeText

</strong>

· New media publishing

</div>

<div>

</div>

</footer>

</body>

</html>

Tuesday, September 01, 2026

BridgeText test

No comments: