feat: BLB landing page — dark hero, about, characters, follow CTA
This commit is contained in:
+142
-66
@@ -1,87 +1,163 @@
|
||||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import styles from "@/styles/Home.module.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create Next App</title>
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<title>Bone Lord Bob — American Anime</title>
|
||||
<meta name="description" content="Bone Lord Bob is an American Anime project — dark, brutal, beautiful. Coming soon." />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
||||
{/* Open Graph */}
|
||||
<meta property="og:title" content="Bone Lord Bob" />
|
||||
<meta property="og:description" content="American Anime. Dark. Brutal. Beautiful." />
|
||||
<meta property="og:type" content="website" />
|
||||
</Head>
|
||||
<div
|
||||
className={`${styles.page} ${geistSans.variable} ${geistMono.variable}`}
|
||||
>
|
||||
<main className={styles.main}>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className={styles.intro}>
|
||||
<h1>To get started, edit the index.tsx file.</h1>
|
||||
<p>
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
|
||||
<div className={styles.page}>
|
||||
|
||||
{/* ── Nav ─────────────────────────────────────────────────────── */}
|
||||
<nav className={styles.nav}>
|
||||
<span className={styles.navLogo}>
|
||||
Bone Lord <span>Bob</span>
|
||||
</span>
|
||||
<ul className={styles.navLinks}>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#characters">Characters</a></li>
|
||||
<li><a href="#follow">Follow</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{/* ── Hero ────────────────────────────────────────────────────── */}
|
||||
<section className={styles.hero}>
|
||||
<div className={styles.heroBg} />
|
||||
<div className={styles.heroContent}>
|
||||
<span className={styles.eyebrow}>American Anime</span>
|
||||
<h1 className={styles.heroTitle}>
|
||||
Bone Lord <em>Bob</em>
|
||||
</h1>
|
||||
<p className={styles.heroSub}>
|
||||
A story born from the bones of American myth. Dark. Brutal. Alive.
|
||||
An original anime series unlike anything you've seen before.
|
||||
</p>
|
||||
<div className={styles.heroCtas}>
|
||||
<a href="#about" className={styles.btnPrimary}>
|
||||
Enter the World
|
||||
</a>
|
||||
<a href="#follow" className={styles.btnSecondary}>
|
||||
Stay Updated
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Divider ─────────────────────────────────────────────────── */}
|
||||
<div className={styles.divider}>
|
||||
{["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
|
||||
<span key={i} className={styles.dividerSkull}>{s}</span>
|
||||
))}
|
||||
<span className={styles.dividerText}>Coming Soon</span>
|
||||
{["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
|
||||
<span key={i} className={styles.dividerSkull}>{s}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── About ───────────────────────────────────────────────────── */}
|
||||
<section id="about" className={styles.about}>
|
||||
<div>
|
||||
<span className={styles.sectionLabel}>The Project</span>
|
||||
<h2 className={styles.sectionTitle}>
|
||||
American stories.<br />Anime soul.
|
||||
</h2>
|
||||
<p className={styles.sectionBody}>
|
||||
Bone Lord Bob is an original American Anime project — a dark, hand-crafted
|
||||
universe that pulls from the grit of American storytelling and channels it
|
||||
through the visual language of anime.
|
||||
</p>
|
||||
<p className={styles.sectionBody}>
|
||||
Not an adaptation. Not a tribute. Something new.
|
||||
A world of bone and blood and meaning, built from scratch.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.ctas}>
|
||||
<div className={styles.aboutVisual}>
|
||||
<span className={styles.aboutPlaceholder}>💀</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Characters ──────────────────────────────────────────────── */}
|
||||
<section id="characters" className={styles.characters}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<span className={styles.sectionLabel}>The Cast</span>
|
||||
<h2 className={styles.sectionTitle}>Characters</h2>
|
||||
<p className={styles.sectionBody}>
|
||||
Every soul in this world has a price. Meet the ones who pay it.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.characterGrid}>
|
||||
<div className={styles.characterCard}>
|
||||
<span className={styles.characterEmoji}>🦴</span>
|
||||
<h3 className={styles.characterName}>Bone Lord Bob</h3>
|
||||
<p className={styles.characterRole}>The Protagonist</p>
|
||||
<p className={styles.characterDesc}>
|
||||
A man cursed to walk between worlds — carrying the weight
|
||||
of the dead and the rage of the living. He answers to no one.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.characterCard}>
|
||||
<span className={styles.characterEmoji}>🔥</span>
|
||||
<h3 className={styles.characterName}>???</h3>
|
||||
<p className={styles.characterRole}>Coming Soon</p>
|
||||
<p className={styles.characterDesc}>
|
||||
More characters will be revealed as the story unfolds.
|
||||
The roster is deep. The world is darker than it looks.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.characterCard}>
|
||||
<span className={styles.characterEmoji}>⚔️</span>
|
||||
<h3 className={styles.characterName}>???</h3>
|
||||
<p className={styles.characterRole}>Coming Soon</p>
|
||||
<p className={styles.characterDesc}>
|
||||
Every legend needs its foil. Every bone lord needs someone
|
||||
willing to break them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Follow CTA ──────────────────────────────────────────────── */}
|
||||
<section id="follow" className={styles.cta}>
|
||||
<div className={styles.ctaContent}>
|
||||
<span className={styles.sectionLabel}>Stay in the loop</span>
|
||||
<h2 className={styles.ctaTitle}>
|
||||
The story is <em>coming</em>.
|
||||
</h2>
|
||||
<p className={styles.sectionBody}>
|
||||
Bone Lord Bob is in active development. Follow along as the
|
||||
world takes shape — art, lore, characters, and more.
|
||||
</p>
|
||||
<a
|
||||
className={styles.primary}
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
href="https://x.com/bonelordbob"
|
||||
className={styles.btnPrimary}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className={styles.secondary}
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
Follow on X
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
{/* ── Footer ──────────────────────────────────────────────────── */}
|
||||
<footer className={styles.footer}>
|
||||
<span className={styles.footerLogo}>
|
||||
Bone Lord <span>Bob</span>
|
||||
</span>
|
||||
<span className={styles.footerNote}>
|
||||
© {new Date().getFullYear()} Mathison Projects Inc. All rights reserved.
|
||||
</span>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
+383
-112
@@ -1,141 +1,412 @@
|
||||
/* ── Layout ──────────────────────────────────────────────────────────────── */
|
||||
.page {
|
||||
--background: #fafafa;
|
||||
--foreground: #fff;
|
||||
|
||||
--text-primary: #000;
|
||||
--text-secondary: #666;
|
||||
|
||||
--button-primary-hover: #383838;
|
||||
--button-secondary-hover: #f2f2f2;
|
||||
--button-secondary-border: #ebebeb;
|
||||
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-geist-sans);
|
||||
background-color: var(--background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main {
|
||||
/* ── Nav ─────────────────────────────────────────────────────────────────── */
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--foreground);
|
||||
padding: 120px 60px;
|
||||
padding: 1rem 2.5rem;
|
||||
background: rgba(10, 8, 6, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.intro {
|
||||
.navLogo {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--bone);
|
||||
}
|
||||
|
||||
.navLogo span {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.navLinks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
gap: 24px;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
max-width: 320px;
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
line-height: 48px;
|
||||
letter-spacing: -2.4px;
|
||||
text-wrap: balance;
|
||||
color: var(--text-primary);
|
||||
.navLinks a {
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--bone-dim);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
max-width: 440px;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
text-wrap: balance;
|
||||
color: var(--text-secondary);
|
||||
.navLinks a:hover {
|
||||
color: var(--bone);
|
||||
}
|
||||
|
||||
.intro a {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctas {
|
||||
/* ── Hero ─────────────────────────────────────────────────────────────────── */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
gap: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ctas a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: 128px;
|
||||
border: 1px solid transparent;
|
||||
transition: 0.2s;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 8rem 2rem 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroBg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(192, 57, 43, 0.08) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 60% 40% at 50% 80%, rgba(192, 57, 43, 0.05) 0%, transparent 70%),
|
||||
var(--dark);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Grain texture overlay */
|
||||
.heroBg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.35rem 1rem;
|
||||
border: 1px solid rgba(192, 57, 43, 0.4);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(3rem, 8vw, 6.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--bone);
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow: 0 0 80px rgba(232, 220, 200, 0.08);
|
||||
}
|
||||
|
||||
.heroTitle em {
|
||||
font-style: normal;
|
||||
color: var(--red);
|
||||
text-shadow: 0 0 40px var(--red-glow);
|
||||
}
|
||||
|
||||
.heroSub {
|
||||
font-size: 1.05rem;
|
||||
color: var(--bone-dim);
|
||||
max-width: 520px;
|
||||
margin: 0 auto 2.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.heroCtas {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btnPrimary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem 2rem;
|
||||
background: var(--red);
|
||||
color: var(--bone);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
a.primary {
|
||||
background: var(--text-primary);
|
||||
color: var(--background);
|
||||
gap: 8px;
|
||||
.btnPrimary:hover {
|
||||
background: #a93226;
|
||||
box-shadow: 0 0 24px var(--red-glow);
|
||||
}
|
||||
|
||||
a.secondary {
|
||||
border-color: var(--button-secondary-border);
|
||||
.btnSecondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem 2rem;
|
||||
background: transparent;
|
||||
color: var(--bone);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
a.primary:hover {
|
||||
background: var(--button-primary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
a.secondary:hover {
|
||||
background: var(--button-secondary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
.btnSecondary:hover {
|
||||
border-color: var(--bone-dim);
|
||||
color: var(--bone);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.main {
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -1.92px;
|
||||
}
|
||||
/* ── Divider ─────────────────────────────────────────────────────────────── */
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 2rem 2.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--dark-mid);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.logo {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.page {
|
||||
--background: #000;
|
||||
--foreground: #000;
|
||||
|
||||
--text-primary: #ededed;
|
||||
--text-secondary: #999;
|
||||
|
||||
--button-primary-hover: #ccc;
|
||||
--button-secondary-hover: #1a1a1a;
|
||||
--button-secondary-border: #1a1a1a;
|
||||
}
|
||||
.dividerSkull {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.4;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dividerText {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: var(--bone-dim);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── About section ───────────────────────────────────────────────────────── */
|
||||
.about {
|
||||
padding: 6rem 2.5rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sectionLabel {
|
||||
display: block;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
|
||||
line-height: 1.15;
|
||||
color: var(--bone);
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.sectionBody {
|
||||
font-size: 0.95rem;
|
||||
color: var(--bone-dim);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.aboutVisual {
|
||||
position: relative;
|
||||
aspect-ratio: 4/5;
|
||||
background: var(--dark-card);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aboutPlaceholder {
|
||||
font-size: 6rem;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.aboutVisual::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(192,57,43,0.06) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
/* ── Characters section ──────────────────────────────────────────────────── */
|
||||
.characters {
|
||||
padding: 6rem 2.5rem;
|
||||
background: var(--dark-mid);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.characterGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 1.5rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.characterCard {
|
||||
background: var(--dark-card);
|
||||
border: 1px solid var(--border);
|
||||
padding: 2rem 1.75rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.characterCard:hover {
|
||||
border-color: rgba(232, 220, 200, 0.25);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.characterCard::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: var(--red);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.characterCard:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.characterEmoji {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.characterName {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.2rem;
|
||||
color: var(--bone);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.characterRole {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.characterDesc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--bone-dim);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* ── CTA section ─────────────────────────────────────────────────────────── */
|
||||
.cta {
|
||||
padding: 6rem 2.5rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cta::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(192, 57, 43, 0.07) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ctaContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
color: var(--bone);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.ctaTitle em {
|
||||
font-style: normal;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
/* ── Footer ──────────────────────────────────────────────────────────────── */
|
||||
.footer {
|
||||
padding: 2rem 2.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footerLogo {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--bone-dim);
|
||||
}
|
||||
|
||||
.footerLogo span {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.footerNote {
|
||||
font-size: 0.75rem;
|
||||
color: var(--bone-dim);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ── Responsive ──────────────────────────────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 1rem 1.25rem; }
|
||||
.navLinks { display: none; }
|
||||
.about { grid-template-columns: 1fr; gap: 2.5rem; }
|
||||
.footer { flex-direction: column; text-align: center; }
|
||||
}
|
||||
|
||||
+40
-32
@@ -1,33 +1,33 @@
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bone: #e8dcc8;
|
||||
--bone-dim: #9e9080;
|
||||
--red: #c0392b;
|
||||
--red-glow: rgba(192, 57, 43, 0.4);
|
||||
--dark: #0a0806;
|
||||
--dark-mid: #120f0a;
|
||||
--dark-card: #1a1510;
|
||||
--border: rgba(232, 220, 200, 0.12);
|
||||
--font-display: 'Georgia', 'Times New Roman', serif;
|
||||
--font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--dark);
|
||||
color: var(--bone);
|
||||
font-family: var(--font-body);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -35,8 +35,16 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--red);
|
||||
color: var(--bone);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: var(--dark); }
|
||||
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }
|
||||
|
||||
Reference in New Issue
Block a user