Home page creation
This commit is contained in:
Nick Beckley
parent
ac2ec1f754
commit
72e847730b
@ -1,43 +1,295 @@
|
||||
@{
|
||||
ViewData["Title"] = "PlotWeaver Studio";
|
||||
ViewData["Title"] = "Finally finish your novel";
|
||||
ViewData["ShellClass"] = "marketing-shell";
|
||||
}
|
||||
|
||||
<section class="page-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Story planning workspace</p>
|
||||
<h1>PlotWeaver Studio</h1>
|
||||
<p class="lead-text">
|
||||
A story planning workspace for writers who need to track plots, scenes, characters, clues, threads, and continuity without losing their minds.
|
||||
</p>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
@if (User.Identity?.IsAuthenticated == true)
|
||||
{
|
||||
<a class="btn btn-primary" asp-controller="Projects" asp-action="Index">Go to Projects</a>
|
||||
}
|
||||
else
|
||||
{
|
||||
<a class="btn btn-primary" asp-controller="Account" asp-action="Login">Sign in</a>
|
||||
<a class="btn btn-outline-primary" asp-controller="Account" asp-action="Register">Create account</a>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
<article class="marketing-home">
|
||||
<section class="marketing-hero reveal-section">
|
||||
<div class="marketing-container marketing-hero__grid">
|
||||
<div class="marketing-hero__copy">
|
||||
<p class="marketing-eyebrow">PlotWeaver Studio for novelists</p>
|
||||
<h1>Finally finish the novel you've always wanted to write.</h1>
|
||||
<p class="marketing-lead">
|
||||
Organise characters, plot threads, timelines, and story details in one place so you can stop feeling overwhelmed and start making progress.
|
||||
</p>
|
||||
<div class="marketing-actions">
|
||||
<a class="marketing-btn marketing-btn--primary" asp-controller="Account" asp-action="Register">Start Free Trial</a>
|
||||
<a class="marketing-btn marketing-btn--secondary" href="#overview">Watch 2 Minute Overview</a>
|
||||
</div>
|
||||
<dl class="hero-proof" aria-label="PlotWeaver highlights">
|
||||
<div>
|
||||
<dt>9</dt>
|
||||
<dd>story systems brought together</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>1</dt>
|
||||
<dd>calm place to plan, draft, and revise</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<section class="content-grid">
|
||||
<article class="plain-card">
|
||||
<h2>Plan books, chapters, and scenes</h2>
|
||||
<p>Shape a novel, a series, or a messy first draft into a structure you can actually see and revise.</p>
|
||||
</article>
|
||||
<article class="plain-card">
|
||||
<h2>Track characters and relationships</h2>
|
||||
<p>Follow appearances, arcs, knowledge, relationships, locations, and the changing emotional pressure of the story.</p>
|
||||
</article>
|
||||
<article class="plain-card">
|
||||
<h2>Follow plot lines and clues</h2>
|
||||
<p>Keep promises, reveals, unresolved threads, objects, and story assets visible from setup to payoff.</p>
|
||||
</article>
|
||||
<article class="plain-card">
|
||||
<h2>Review story health</h2>
|
||||
<p>Use timelines, metrics, warnings, and continuity checks to find problems before they spread through the manuscript.</p>
|
||||
</article>
|
||||
</section>
|
||||
<div class="browser-frame hero-product" id="overview" aria-label="PlotWeaver Studio product preview">
|
||||
<div class="browser-frame__chrome" aria-hidden="true">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="product-mockup">
|
||||
<aside class="product-sidebar">
|
||||
<strong>PlotWeaver</strong>
|
||||
<span class="is-active">Story Health</span>
|
||||
<span>Timeline</span>
|
||||
<span>Characters</span>
|
||||
<span>Plot Threads</span>
|
||||
<span>Story Bible</span>
|
||||
</aside>
|
||||
<main class="product-main">
|
||||
<div class="product-topline">
|
||||
<div>
|
||||
<small>Book 2 - The Ember Court</small>
|
||||
<h2>Chapter 18 is ready to draft</h2>
|
||||
</div>
|
||||
<span>Continuity clear</span>
|
||||
</div>
|
||||
<div class="product-grid">
|
||||
<section class="product-panel product-panel--wide">
|
||||
<div class="mock-label">Pacing and emotional flow</div>
|
||||
<div class="mock-chart" aria-hidden="true">
|
||||
<span style="--height: 42%"></span>
|
||||
<span style="--height: 63%"></span>
|
||||
<span style="--height: 36%"></span>
|
||||
<span style="--height: 72%"></span>
|
||||
<span style="--height: 54%"></span>
|
||||
<span style="--height: 88%"></span>
|
||||
<span style="--height: 58%"></span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="product-panel">
|
||||
<div class="mock-label">Threads</div>
|
||||
<div class="thread-list">
|
||||
<span>The missing heir</span>
|
||||
<span>Secret alliance</span>
|
||||
<span>Romance arc</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="product-panel">
|
||||
<div class="mock-label">Next focus</div>
|
||||
<strong>Resolve the clue before scene 22.</strong>
|
||||
<p>Three notes, two characters, one dangling promise.</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="problem-intro reveal-section">
|
||||
<div class="marketing-container">
|
||||
<p class="marketing-eyebrow">Made for real drafting problems</p>
|
||||
<h2>Every writer faces these challenges. PlotWeaver helps solve them.</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="problem-stack">
|
||||
<div class="marketing-container">
|
||||
<div class="problem-section reveal-section">
|
||||
<div class="problem-visual visual-notes" aria-hidden="true">
|
||||
<span>motive changes here</span>
|
||||
<span>Where is Mara?</span>
|
||||
<span>clue payoff?</span>
|
||||
<span>Book 1 promise</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Losing track of story details</p>
|
||||
<h3>Your story should feel alive, not impossible to remember.</h3>
|
||||
<p>Keep characters, locations, objects, reveals, and world details connected to the scenes where they matter, so the important pieces stay visible while you write.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section problem-section--reverse reveal-section">
|
||||
<div class="problem-visual visual-plot" aria-hidden="true">
|
||||
<div class="plot-lane lane-gold"></div>
|
||||
<div class="plot-lane lane-navy"></div>
|
||||
<div class="plot-lane lane-rose"></div>
|
||||
<div class="plot-node node-one"></div>
|
||||
<div class="plot-node node-two"></div>
|
||||
<div class="plot-node node-three"></div>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Managing complex plots</p>
|
||||
<h3>See the shape of your book before it tangles.</h3>
|
||||
<p>Map main plots, subplots, clues, reveals, and romantic beats across chapters so you can spot thin stretches, crowded scenes, and missing payoffs early.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section reveal-section">
|
||||
<div class="problem-visual visual-warning" aria-hidden="true">
|
||||
<strong>Continuity Review</strong>
|
||||
<span>Character knows the secret too early</span>
|
||||
<span>Object changes location between scenes</span>
|
||||
<span>Timeline gap needs a bridge</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Continuity mistakes</p>
|
||||
<h3>Catch contradictions before readers do.</h3>
|
||||
<p>PlotWeaver surfaces timeline gaps, unresolved dependencies, and story details that no longer line up, helping your manuscript feel intentional and polished.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section problem-section--reverse reveal-section">
|
||||
<div class="problem-visual visual-next" aria-hidden="true">
|
||||
<small>Write next</small>
|
||||
<strong>Draft Scene 31</strong>
|
||||
<p>Reunite the sisters, reveal the forged letter, raise suspicion of Callan.</p>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Knowing what to work on next</p>
|
||||
<h3>Turn overwhelm into a clear next step.</h3>
|
||||
<p>Use scene readiness, revision status, notes, and blockers to decide what deserves your attention today instead of rereading everything to get oriented.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section reveal-section">
|
||||
<div class="problem-visual visual-docs" aria-hidden="true">
|
||||
<span>Notebook</span>
|
||||
<span>Spreadsheet</span>
|
||||
<span>Draft notes</span>
|
||||
<span>Loose ideas</span>
|
||||
<span>Series bible</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Drowning in notes and documents</p>
|
||||
<h3>Bring the scattered pieces into one graceful workspace.</h3>
|
||||
<p>Replace the pile of half-useful documents with an organised story bible that grows with your draft and stays connected to the work in progress.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section problem-section--reverse reveal-section">
|
||||
<div class="problem-visual visual-relationships" aria-hidden="true">
|
||||
<span class="person person-a">Lena</span>
|
||||
<span class="person person-b">Orin</span>
|
||||
<span class="person person-c">Mae</span>
|
||||
<span class="person person-d">Ivo</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Tracking character relationships</p>
|
||||
<h3>Follow bonds, secrets, tension, and change.</h3>
|
||||
<p>Track relationships as they evolve across scenes, including what characters know, what they believe, and how emotional pressure shifts through the story.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section reveal-section">
|
||||
<div class="problem-visual visual-threads" aria-hidden="true">
|
||||
<span>Set up</span>
|
||||
<span>Complicate</span>
|
||||
<span>Reveal</span>
|
||||
<span>Pay off</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Keeping plot threads organised</p>
|
||||
<h3>Never lose a promise you made to the reader.</h3>
|
||||
<p>Give each thread a visible lifecycle from introduction to resolution, whether it is a murder clue, family secret, magic rule, rivalry, or slow-burn confession.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section problem-section--reverse reveal-section">
|
||||
<div class="problem-visual visual-series" aria-hidden="true">
|
||||
<span>Book I</span>
|
||||
<span>Book II</span>
|
||||
<span>Book III</span>
|
||||
<span>Future arc</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Managing series and multiple books</p>
|
||||
<h3>Plan the saga without flattening the book in front of you.</h3>
|
||||
<p>Track arcs across books, preserve long-term reveals, and keep each instalment focused while still seeing how the series fits together.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section reveal-section">
|
||||
<div class="problem-visual visual-flow" aria-hidden="true">
|
||||
<div class="flow-line"></div>
|
||||
<span style="--pos: 12%">Quiet</span>
|
||||
<span style="--pos: 34%">Tension</span>
|
||||
<span style="--pos: 61%">Break</span>
|
||||
<span style="--pos: 84%">Climax</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Understanding pacing and emotional flow</p>
|
||||
<h3>Feel the rhythm of the novel as a whole.</h3>
|
||||
<p>Review emotional intensity, purpose balance, revision state, and scene shape so the manuscript builds with confidence instead of drifting chapter by chapter.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="social-proof reveal-section">
|
||||
<div class="marketing-container">
|
||||
<div class="section-heading">
|
||||
<p class="marketing-eyebrow">Loved by story-obsessed writers</p>
|
||||
<h2>Authors use PlotWeaver to feel oriented again.</h2>
|
||||
</div>
|
||||
<div class="testimonial-grid">
|
||||
<figure>
|
||||
<blockquote>"It feels like someone finally designed a planning tool for the way my fantasy series actually works."</blockquote>
|
||||
<figcaption>R. H., epic fantasy author</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<blockquote>"I stopped losing clues in old documents. The whole mystery is visible now, including the red herrings."</blockquote>
|
||||
<figcaption>Maya K., crime novelist</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<blockquote>"PlotWeaver turned my revision from panic into decisions. I knew what to fix next."</blockquote>
|
||||
<figcaption>Elena S., romance series author</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="founder-story reveal-section">
|
||||
<div class="marketing-container founder-story__grid">
|
||||
<div class="founder-mark" aria-hidden="true">PW</div>
|
||||
<div>
|
||||
<p class="marketing-eyebrow">Built by an author</p>
|
||||
<h2>Created by a novelist who needed the same calm.</h2>
|
||||
<p>
|
||||
PlotWeaver Studio was created by a novelist who was tired of juggling Word documents, spreadsheets, notebooks, and sticky notes while writing complex stories.
|
||||
</p>
|
||||
<p>
|
||||
The goal was simple: make a beautiful, dependable place where story structure, emotional logic, continuity, and the next writing step can live together.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="final-cta reveal-section">
|
||||
<div class="marketing-container final-cta__inner">
|
||||
<p class="marketing-eyebrow">Start with the story you already have</p>
|
||||
<h2>Ready to take control of your story?</h2>
|
||||
<p>Whether you're planning your first novel or managing an epic series, PlotWeaver Studio helps you write with confidence.</p>
|
||||
<a class="marketing-btn marketing-btn--primary" asp-controller="Account" asp-action="Register">Start Your Free Trial</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
(() => {
|
||||
const sections = document.querySelectorAll(".reveal-section");
|
||||
if (!("IntersectionObserver" in window)) {
|
||||
sections.forEach((section) => section.classList.add("is-visible"));
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("is-visible");
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.14 });
|
||||
|
||||
sections.forEach((section) => observer.observe(section));
|
||||
})();
|
||||
</script>
|
||||
}
|
||||
|
||||
@ -2134,6 +2134,969 @@ a:focus-visible {
|
||||
border-color: rgba(208, 214, 223, 0.28);
|
||||
}
|
||||
|
||||
/* Premium marketing homepage */
|
||||
.marketing-shell {
|
||||
max-width: none;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.marketing-shell main {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.marketing-home {
|
||||
--marketing-navy: #1f2a44;
|
||||
--marketing-gold: #d4a574;
|
||||
--marketing-cream: #faf8f5;
|
||||
--marketing-offwhite: #fcfbf9;
|
||||
--marketing-ink: #201a16;
|
||||
--marketing-muted: #6f655c;
|
||||
--marketing-rose: #9f5f55;
|
||||
--marketing-sage: #5f786c;
|
||||
--marketing-line: rgba(31, 42, 68, 0.12);
|
||||
--marketing-shadow: 0 28px 70px rgba(31, 42, 68, 0.15);
|
||||
overflow: hidden;
|
||||
margin-top: -1rem;
|
||||
color: var(--marketing-ink);
|
||||
background:
|
||||
radial-gradient(circle at 88% 8%, rgba(212, 165, 116, 0.2), transparent 26rem),
|
||||
linear-gradient(180deg, var(--marketing-cream) 0%, var(--marketing-offwhite) 42%, #f6efe6 100%);
|
||||
}
|
||||
|
||||
.marketing-container {
|
||||
width: min(1180px, calc(100% - 32px));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.marketing-eyebrow {
|
||||
margin: 0 0 0.8rem;
|
||||
color: #8b612e;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.marketing-home h1,
|
||||
.marketing-home h2,
|
||||
.marketing-home h3 {
|
||||
color: var(--marketing-navy);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
letter-spacing: 0;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.marketing-home h1 {
|
||||
max-width: 11ch;
|
||||
margin: 0;
|
||||
font-size: clamp(3.2rem, 7vw, 6.35rem);
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.marketing-home h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(2.1rem, 4.4vw, 4rem);
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
.marketing-home h3 {
|
||||
margin: 0;
|
||||
font-size: clamp(1.7rem, 3vw, 2.7rem);
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.marketing-lead,
|
||||
.problem-copy p,
|
||||
.founder-story p,
|
||||
.final-cta p,
|
||||
.section-heading p {
|
||||
color: var(--marketing-muted);
|
||||
font-size: clamp(1rem, 1.5vw, 1.18rem);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.marketing-hero {
|
||||
position: relative;
|
||||
padding: clamp(4rem, 8vw, 7.25rem) 0 clamp(3.5rem, 7vw, 6rem);
|
||||
}
|
||||
|
||||
.marketing-hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 auto;
|
||||
height: 54%;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(115deg, rgba(31, 42, 68, 0.08), transparent 42%),
|
||||
radial-gradient(circle at 12% 20%, rgba(212, 165, 116, 0.22), transparent 24rem);
|
||||
}
|
||||
|
||||
.marketing-hero__grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.86fr) minmax(440px, 1.14fr);
|
||||
gap: clamp(2rem, 5vw, 5rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.marketing-hero__copy {
|
||||
display: grid;
|
||||
gap: 1.35rem;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.marketing-lead {
|
||||
max-width: 42rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.marketing-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.marketing-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 3.2rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
padding: 0.85rem 1.35rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
|
||||
.marketing-btn:hover,
|
||||
.marketing-btn:focus {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.marketing-btn--primary {
|
||||
color: #fffaf2;
|
||||
background: linear-gradient(135deg, var(--marketing-navy), #26375e);
|
||||
box-shadow: 0 16px 32px rgba(31, 42, 68, 0.22);
|
||||
}
|
||||
|
||||
.marketing-btn--primary:hover,
|
||||
.marketing-btn--primary:focus {
|
||||
color: #fffaf2;
|
||||
box-shadow: 0 20px 42px rgba(31, 42, 68, 0.28);
|
||||
}
|
||||
|
||||
.marketing-btn--secondary {
|
||||
color: var(--marketing-navy);
|
||||
border-color: rgba(31, 42, 68, 0.18);
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.marketing-btn--secondary:hover,
|
||||
.marketing-btn--secondary:focus {
|
||||
color: var(--marketing-navy);
|
||||
border-color: rgba(31, 42, 68, 0.3);
|
||||
background: #fffdf9;
|
||||
}
|
||||
|
||||
.hero-proof {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hero-proof div {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.55rem;
|
||||
align-items: center;
|
||||
max-width: 18rem;
|
||||
}
|
||||
|
||||
.hero-proof dt {
|
||||
color: var(--marketing-navy);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 2.35rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-proof dd {
|
||||
margin: 0;
|
||||
color: var(--marketing-muted);
|
||||
font-weight: 650;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.browser-frame {
|
||||
border: 1px solid rgba(31, 42, 68, 0.13);
|
||||
border-radius: 22px;
|
||||
background: rgba(252, 251, 249, 0.72);
|
||||
box-shadow: var(--marketing-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
transform: rotate(1deg);
|
||||
animation: productFloat 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.browser-frame__chrome {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
height: 2.55rem;
|
||||
border-bottom: 1px solid rgba(31, 42, 68, 0.1);
|
||||
padding: 0 1rem;
|
||||
background: linear-gradient(180deg, #fffdf9, #f5efe7);
|
||||
}
|
||||
|
||||
.browser-frame__chrome span {
|
||||
width: 0.72rem;
|
||||
height: 0.72rem;
|
||||
border-radius: 999px;
|
||||
background: #d8cabf;
|
||||
}
|
||||
|
||||
.browser-frame__chrome span:nth-child(2) {
|
||||
background: var(--marketing-gold);
|
||||
}
|
||||
|
||||
.browser-frame__chrome span:nth-child(3) {
|
||||
background: var(--marketing-sage);
|
||||
}
|
||||
|
||||
.product-mockup {
|
||||
display: grid;
|
||||
grid-template-columns: 170px minmax(0, 1fr);
|
||||
min-height: 470px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(250, 248, 245, 0.92)),
|
||||
var(--marketing-offwhite);
|
||||
}
|
||||
|
||||
.product-sidebar {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.5rem;
|
||||
border-right: 1px solid rgba(31, 42, 68, 0.1);
|
||||
padding: 1.1rem;
|
||||
background: rgba(31, 42, 68, 0.96);
|
||||
color: rgba(255, 250, 242, 0.72);
|
||||
}
|
||||
|
||||
.product-sidebar strong {
|
||||
margin-bottom: 0.8rem;
|
||||
color: #fffaf2;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.product-sidebar span {
|
||||
border-radius: 999px;
|
||||
padding: 0.5rem 0.7rem;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.product-sidebar .is-active {
|
||||
color: #241b12;
|
||||
background: var(--marketing-gold);
|
||||
}
|
||||
|
||||
.product-main {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
align-content: start;
|
||||
padding: clamp(1rem, 2vw, 1.45rem);
|
||||
}
|
||||
|
||||
.product-topline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.product-topline small,
|
||||
.mock-label {
|
||||
color: var(--marketing-muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 820;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.product-topline h2 {
|
||||
margin-top: 0.25rem;
|
||||
font-size: clamp(1.5rem, 2.4vw, 2.15rem);
|
||||
}
|
||||
|
||||
.product-topline > span {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
padding: 0.38rem 0.7rem;
|
||||
color: #294a35;
|
||||
background: #e5f1e8;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.product-panel {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
min-height: 150px;
|
||||
border: 1px solid rgba(31, 42, 68, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 253, 249, 0.92);
|
||||
box-shadow: 0 16px 30px rgba(31, 42, 68, 0.07);
|
||||
}
|
||||
|
||||
.product-panel--wide {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.product-panel p {
|
||||
margin: 0;
|
||||
color: var(--marketing-muted);
|
||||
}
|
||||
|
||||
.mock-chart {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 0.55rem;
|
||||
align-items: end;
|
||||
min-height: 220px;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.mock-chart span {
|
||||
height: var(--height);
|
||||
min-height: 2.2rem;
|
||||
border-radius: 999px 999px 8px 8px;
|
||||
background: linear-gradient(180deg, var(--marketing-gold), #8f5d3b);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.thread-list {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.thread-list span {
|
||||
border-left: 4px solid var(--marketing-gold);
|
||||
border-radius: 10px;
|
||||
padding: 0.55rem 0.65rem;
|
||||
color: var(--marketing-navy);
|
||||
background: rgba(212, 165, 116, 0.13);
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.problem-intro {
|
||||
padding: clamp(3rem, 7vw, 6rem) 0 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.problem-intro h2,
|
||||
.section-heading h2 {
|
||||
max-width: 850px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.problem-stack {
|
||||
padding: 1rem 0 clamp(4rem, 8vw, 7rem);
|
||||
}
|
||||
|
||||
.problem-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||||
gap: clamp(1.5rem, 5vw, 5rem);
|
||||
align-items: center;
|
||||
min-height: 460px;
|
||||
padding: clamp(2.5rem, 6vw, 5rem) 0;
|
||||
}
|
||||
|
||||
.problem-section--reverse .problem-visual {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.problem-copy {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.problem-copy p {
|
||||
max-width: 36rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.problem-visual {
|
||||
position: relative;
|
||||
min-height: 320px;
|
||||
border: 1px solid rgba(31, 42, 68, 0.11);
|
||||
border-radius: 24px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(242, 230, 215, 0.88)),
|
||||
var(--marketing-offwhite);
|
||||
box-shadow: 0 22px 56px rgba(31, 42, 68, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visual-notes span,
|
||||
.visual-docs span,
|
||||
.visual-series span,
|
||||
.visual-threads span,
|
||||
.visual-warning span {
|
||||
position: absolute;
|
||||
border: 1px solid rgba(31, 42, 68, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 0.75rem 0.9rem;
|
||||
color: var(--marketing-navy);
|
||||
background: #fffdf9;
|
||||
box-shadow: 0 14px 28px rgba(31, 42, 68, 0.08);
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.visual-notes span:nth-child(1) { top: 14%; left: 12%; transform: rotate(-5deg); }
|
||||
.visual-notes span:nth-child(2) { top: 28%; right: 10%; transform: rotate(4deg); }
|
||||
.visual-notes span:nth-child(3) { bottom: 22%; left: 16%; transform: rotate(3deg); }
|
||||
.visual-notes span:nth-child(4) { bottom: 13%; right: 18%; transform: rotate(-4deg); }
|
||||
|
||||
.visual-plot {
|
||||
background: linear-gradient(135deg, #fffdf9, #f2e8d9);
|
||||
}
|
||||
|
||||
.plot-lane {
|
||||
position: absolute;
|
||||
left: 12%;
|
||||
right: 12%;
|
||||
height: 0.62rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.lane-gold { top: 28%; background: rgba(212, 165, 116, 0.86); }
|
||||
.lane-navy { top: 50%; background: rgba(31, 42, 68, 0.82); }
|
||||
.lane-rose { top: 72%; background: rgba(159, 95, 85, 0.78); }
|
||||
|
||||
.plot-node {
|
||||
position: absolute;
|
||||
width: 4.25rem;
|
||||
height: 4.25rem;
|
||||
border: 0.55rem solid #fffaf2;
|
||||
border-radius: 999px;
|
||||
background: var(--marketing-gold);
|
||||
box-shadow: 0 15px 28px rgba(31, 42, 68, 0.16);
|
||||
}
|
||||
|
||||
.node-one { top: 18%; left: 23%; }
|
||||
.node-two { top: 40%; right: 24%; background: var(--marketing-navy); }
|
||||
.node-three { bottom: 14%; left: 44%; background: var(--marketing-rose); }
|
||||
|
||||
.visual-warning {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
align-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.visual-warning strong {
|
||||
color: var(--marketing-navy);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.visual-warning span {
|
||||
position: static;
|
||||
border-left: 4px solid var(--marketing-gold);
|
||||
}
|
||||
|
||||
.visual-next {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 0.8rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.visual-next small {
|
||||
color: #8b612e;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.visual-next strong {
|
||||
color: var(--marketing-navy);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.visual-next p {
|
||||
max-width: 22rem;
|
||||
margin: 0;
|
||||
color: var(--marketing-muted);
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.visual-docs span:nth-child(1) { top: 13%; left: 12%; }
|
||||
.visual-docs span:nth-child(2) { top: 23%; right: 12%; }
|
||||
.visual-docs span:nth-child(3) { top: 45%; left: 23%; }
|
||||
.visual-docs span:nth-child(4) { bottom: 18%; left: 12%; }
|
||||
.visual-docs span:nth-child(5) { bottom: 14%; right: 15%; }
|
||||
|
||||
.visual-relationships::before,
|
||||
.visual-relationships::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 22% 18%;
|
||||
border: 2px solid rgba(31, 42, 68, 0.16);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.visual-relationships::after {
|
||||
inset: 34% 22%;
|
||||
border-color: rgba(212, 165, 116, 0.44);
|
||||
transform: rotate(22deg);
|
||||
}
|
||||
|
||||
.person {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: 0.4rem solid #fffaf2;
|
||||
border-radius: 999px;
|
||||
color: #fffaf2;
|
||||
background: var(--marketing-navy);
|
||||
box-shadow: 0 16px 30px rgba(31, 42, 68, 0.18);
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.person-a { top: 13%; left: 18%; }
|
||||
.person-b { top: 21%; right: 18%; background: var(--marketing-rose); }
|
||||
.person-c { bottom: 17%; left: 24%; background: var(--marketing-sage); }
|
||||
.person-d { right: 24%; bottom: 13%; background: var(--marketing-gold); color: #2a2119; }
|
||||
|
||||
.visual-threads {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.85rem;
|
||||
align-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.visual-threads::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 11%;
|
||||
right: 11%;
|
||||
top: 50%;
|
||||
height: 0.32rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(31, 42, 68, 0.14);
|
||||
}
|
||||
|
||||
.visual-threads span {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 6.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.visual-series {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.8rem;
|
||||
align-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.visual-series span {
|
||||
position: static;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 10.5rem;
|
||||
border-radius: 12px 12px 18px 18px;
|
||||
color: #fffaf2;
|
||||
background: linear-gradient(180deg, var(--marketing-navy), #314263);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.visual-series span:nth-child(2) {
|
||||
background: linear-gradient(180deg, #75503a, #533424);
|
||||
}
|
||||
|
||||
.visual-series span:nth-child(3) {
|
||||
background: linear-gradient(180deg, #5f786c, #3d564b);
|
||||
}
|
||||
|
||||
.visual-series span:nth-child(4) {
|
||||
color: #2a2119;
|
||||
background: linear-gradient(180deg, #e1bd8e, var(--marketing-gold));
|
||||
}
|
||||
|
||||
.visual-flow {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.flow-line {
|
||||
position: absolute;
|
||||
left: 8%;
|
||||
right: 8%;
|
||||
top: 50%;
|
||||
height: 8rem;
|
||||
border-bottom: 0.38rem solid var(--marketing-gold);
|
||||
border-radius: 0 0 50% 50%;
|
||||
transform: translateY(-54%);
|
||||
}
|
||||
|
||||
.visual-flow span {
|
||||
position: absolute;
|
||||
left: var(--pos);
|
||||
bottom: 26%;
|
||||
border-radius: 999px;
|
||||
padding: 0.55rem 0.8rem;
|
||||
color: var(--marketing-navy);
|
||||
background: #fffaf2;
|
||||
box-shadow: 0 12px 26px rgba(31, 42, 68, 0.1);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.social-proof {
|
||||
padding: clamp(4rem, 8vw, 7rem) 0;
|
||||
background: var(--marketing-offwhite);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
margin-bottom: clamp(1.5rem, 4vw, 3rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.testimonial-grid figure {
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
min-height: 250px;
|
||||
margin: 0;
|
||||
border: 1px solid rgba(31, 42, 68, 0.1);
|
||||
border-radius: 18px;
|
||||
padding: clamp(1.25rem, 2.3vw, 1.75rem);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(250, 248, 245, 0.88)),
|
||||
#fff;
|
||||
box-shadow: 0 18px 42px rgba(31, 42, 68, 0.08);
|
||||
}
|
||||
|
||||
.testimonial-grid blockquote {
|
||||
margin: 0;
|
||||
color: var(--marketing-navy);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.32rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.testimonial-grid figcaption {
|
||||
margin-top: 1.35rem;
|
||||
color: #8b612e;
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
.founder-story {
|
||||
padding: clamp(4rem, 8vw, 7rem) 0;
|
||||
background:
|
||||
radial-gradient(circle at 10% 20%, rgba(212, 165, 116, 0.18), transparent 22rem),
|
||||
var(--marketing-cream);
|
||||
}
|
||||
|
||||
.founder-story__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 0.35fr) minmax(0, 0.65fr);
|
||||
gap: clamp(1.5rem, 5vw, 4rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.founder-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
aspect-ratio: 1;
|
||||
border: 1px solid rgba(31, 42, 68, 0.12);
|
||||
border-radius: 28px;
|
||||
color: #fffaf2;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(212, 165, 116, 0.3), transparent),
|
||||
var(--marketing-navy);
|
||||
box-shadow: var(--marketing-shadow);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(3rem, 8vw, 6rem);
|
||||
}
|
||||
|
||||
.founder-story h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.founder-story p {
|
||||
max-width: 48rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.final-cta {
|
||||
padding: clamp(4rem, 8vw, 7rem) 0;
|
||||
background: var(--marketing-navy);
|
||||
}
|
||||
|
||||
.final-cta__inner {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
border: 1px solid rgba(255, 250, 242, 0.14);
|
||||
border-radius: 28px;
|
||||
padding: clamp(2.25rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem);
|
||||
background:
|
||||
radial-gradient(circle at 50% 0%, rgba(212, 165, 116, 0.28), transparent 26rem),
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent);
|
||||
text-align: center;
|
||||
box-shadow: 0 28px 70px rgba(10, 16, 29, 0.2);
|
||||
}
|
||||
|
||||
.final-cta h2 {
|
||||
color: #fffaf2;
|
||||
}
|
||||
|
||||
.final-cta p {
|
||||
max-width: 42rem;
|
||||
margin: 0 0 0.75rem;
|
||||
color: rgba(255, 250, 242, 0.78);
|
||||
}
|
||||
|
||||
.final-cta .marketing-eyebrow {
|
||||
color: var(--marketing-gold);
|
||||
}
|
||||
|
||||
.final-cta .marketing-btn--primary {
|
||||
color: #241b12;
|
||||
background: linear-gradient(135deg, #e3bd8e, var(--marketing-gold));
|
||||
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.final-cta .marketing-btn--primary:hover,
|
||||
.final-cta .marketing-btn--primary:focus {
|
||||
color: #241b12;
|
||||
}
|
||||
|
||||
.reveal-section {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.72s ease, transform 0.72s ease;
|
||||
}
|
||||
|
||||
.marketing-hero.reveal-section {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.reveal-section.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@keyframes productFloat {
|
||||
0%, 100% {
|
||||
transform: rotate(1deg) translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(1deg) translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-product,
|
||||
.reveal-section {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.reveal-section {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1060px) {
|
||||
.marketing-hero__grid,
|
||||
.problem-section,
|
||||
.founder-story__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.marketing-home h1 {
|
||||
max-width: 13ch;
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
transform: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.problem-section--reverse .problem-visual {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.testimonial-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.marketing-container {
|
||||
width: min(100% - 24px, 1180px);
|
||||
}
|
||||
|
||||
.marketing-home {
|
||||
margin-top: -0.75rem;
|
||||
}
|
||||
|
||||
.marketing-hero {
|
||||
padding-top: 2.25rem;
|
||||
}
|
||||
|
||||
.marketing-actions,
|
||||
.marketing-actions .marketing-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-mockup {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.product-sidebar {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
overflow-x: auto;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid rgba(31, 42, 68, 0.1);
|
||||
}
|
||||
|
||||
.product-sidebar strong {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 0.4rem 0 0;
|
||||
}
|
||||
|
||||
.product-sidebar span {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.product-topline,
|
||||
.hero-proof {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hero-proof {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.hero-proof div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-proof dt {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.hero-proof dd {
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mock-chart {
|
||||
min-height: 145px;
|
||||
}
|
||||
|
||||
.problem-section {
|
||||
min-height: 0;
|
||||
padding: 2.25rem 0;
|
||||
}
|
||||
|
||||
.problem-visual {
|
||||
min-height: 260px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.visual-series,
|
||||
.visual-threads {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.visual-series span {
|
||||
min-height: 7.5rem;
|
||||
}
|
||||
|
||||
.visual-docs span,
|
||||
.visual-notes span {
|
||||
max-width: 12rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.founder-mark {
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.marketing-home h1 {
|
||||
font-size: clamp(2.7rem, 13vw, 3.55rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.browser-frame {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.product-sidebar span:not(.is-active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visual-flow span {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.person {
|
||||
width: 4.3rem;
|
||||
height: 4.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.timeline-filter-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user