nick/CatherineLynwood
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine author site facelift visuals

Browse Source
This commit is contained in:
nick 2026-07-31 20:49:13 +01:00
parent 3262923f91
commit 8cca5ee347
15 changed files with 2109 additions and 732 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
CatherineLynwood/Controllers/CalendarHouseController.cs Normal file
View File

@ -0,0 +1,17 @@
using Microsoft.AspNetCore.Mvc;
namespace CatherineLynwood.Controllers
{
[Route("the-calendar-house")]
public class CalendarHouseController : Controller
{
[Route("")]
public IActionResult Index() => View();
[Route("house-plan")]
public IActionResult HousePlan() => View();
[Route("the-pattern")]
public IActionResult ThePattern() => View();
}
}

110
CatherineLynwood/Views/CalendarHouse/HousePlan.cshtml Normal file
View File

@ -0,0 +1,110 @@
@{
Layout = "_Layout";
ViewData["Title"] = "The Calendar House Plan";
var rooms = new[]
{
("01", "Threshold Room", "Spring", "Ground"), ("02", "Blue Breakfast Room", "Spring", "Ground"),
("03", "Observatory Parlour", "Spring", "Ground"), ("04", "East Gallery", "Spring", "Ground"),
("05", "Rain Cabinet", "Spring", "Ground"), ("06", "Guest Room of Clocks", "Spring", "Ground"),
("07", "Sunday Door", "Spring", "Ground"), ("08", "Orchard Room", "Spring", "Ground"),
("09", "West Linen Hall", "Spring", "Ground"), ("10", "Glass Pantry", "Spring", "Ground"),
("11", "Green Drawing Room", "Spring", "Ground"), ("12", "Letter Room", "Spring", "Ground"),
("13", "Kitchen of Twelve Fires", "Summer", "Ground"), ("14", "Garden Stair", "Summer", "Ground"),
("15", "North Dining Room", "Summer", "Ground"), ("16", "The Long Warm Hall", "Summer", "Ground"),
("17", "Map Room", "Summer", "Ground"), ("18", "The Still Room", "Summer", "Ground"),
("19", "Ellie's Chamber", "Summer", "First"), ("20", "Moon Landing", "Summer", "First"),
("21", "Brother's Room", "Summer", "First"), ("22", "Sister's Room", "Summer", "First"),
("23", "The Red Passage", "Summer", "First"), ("24", "Mirror Bath", "Summer", "First"),
("25", "The Nursery Without Toys", "Autumn", "First"), ("26", "July Balcony", "Autumn", "First"),
("27", "The Amber Library", "Autumn", "First"), ("28", "Aunt's Room", "Autumn", "First"),
("29", "The Quiet Wardrobe", "Autumn", "First"), ("30", "Room of Names", "Autumn", "First"),
("31", "Northwest Chamber", "Autumn", "First"), ("32", "The Bell Room", "Autumn", "First"),
("33", "October Study", "Autumn", "First"), ("34", "The Locked Sitting Room", "Autumn", "First"),
("35", "Salt Corridor", "Autumn", "First"), ("36", "The Listening Room", "Autumn", "First"),
("37", "Winter Stair", "Winter", "Top"), ("38", "The Archive", "Winter", "Top"),
("39", "Moth Room", "Winter", "Top"), ("40", "Servants' Sky Hall", "Winter", "Top"),
("41", "The Twelfth Chimney", "Winter", "Top"), ("42", "Black Attic", "Winter", "Top"),
("43", "The Closed Chapel", "Winter", "Top"), ("44", "Room of Spare Keys", "Winter", "Top"),
("45", "The North Watch", "Winter", "Top"), ("46", "The Kept Room", "Winter", "Top"),
("47", "Dead Calendar Room", "Winter", "Top"), ("48", "February Box Room", "Winter", "Top"),
("49", "The Empty Room", "Winter", "Top"), ("50", "The Last Landing", "Winter", "Top"),
("51", "The Room That Moves", "Winter", "Top"), ("52", "The Room With No Date", "Winter", "Top")
};
}
<section class="calendar-page-hero">
<p class="calendar-kicker">The plan</p>
<h1>Fifty-two rooms. Three floors. Four wings.</h1>
<p>
The house presents itself as architecture, but its real floor plan is time.
The rooms below are arranged like weeks, grouped into seasonal wings, and watched over by twelve chimneys.
</p>
</section>
<section class="calendar-section calendar-house-stats" aria-label="Calendar House statistics">
<div><strong>52</strong><span>rooms</span></div>
<div><strong>3</strong><span>floors</span></div>
<div><strong>4</strong><span>wings</span></div>
<div><strong>12</strong><span>chimneys</span></div>
<div><strong>7</strong><span>doors</span></div>
<div><strong>365</strong><span>windows</span></div>
</section>
<section class="calendar-section plan-board">
<div class="plan-controls" role="tablist" aria-label="Floor selector">
<button type="button" class="plan-filter active" data-floor="All">All</button>
<button type="button" class="plan-filter" data-floor="Ground">Ground</button>
<button type="button" class="plan-filter" data-floor="First">First</button>
<button type="button" class="plan-filter" data-floor="Top">Top</button>
</div>
<div class="house-diagram" aria-label="Simplified Calendar House floor plan">
<div class="wing wing-spring">Spring Wing</div>
<div class="wing wing-summer">Summer Wing</div>
<div class="wing wing-autumn">Autumn Wing</div>
<div class="wing wing-winter">Winter Wing</div>
<div class="central-hall">Central Hall</div>
<div class="chimneys" aria-hidden="true">
@for (var i = 0; i < 12; i++)
{
<span></span>
}
</div>
<div class="doors" aria-hidden="true">
@for (var i = 0; i < 7; i++)
{
<span></span>
}
</div>
</div>
<div class="room-grid" aria-live="polite">
@foreach (var room in rooms)
{
<button type="button" class="room-tile" data-floor="@room.Item4" data-season="@room.Item3">
<span>@room.Item1</span>
<strong>@room.Item2</strong>
<em>@room.Item3 / @room.Item4 floor</em>
</button>
}
</div>
</section>
<section class="calendar-section calendar-note">
<h2>The wrongness is deliberate.</h2>
<p>
The building is almost symmetrical, but never quite. The Spring and Winter wings do not align.
The seventh door has no matching corridor. The windows are counted from the outside, but the rooms
refuse to agree from within.
</p>
</section>
@section Meta {
<MetaTag meta-title="The Calendar House Plan"
meta-description="Explore the fictional architecture of The Calendar House: 52 rooms, 3 floors, 4 wings, 12 chimneys, 7 doors, and 365 windows."
meta-author="Catherine Lynwood"
meta-url="https://www.catherinelynwood.com/the-calendar-house/house-plan"
meta-image="https://www.catherinelynwood.com/images/calendar-house-hero.png"
twitter-card-type="summary_large_image" />
}

109
CatherineLynwood/Views/CalendarHouse/Index.cshtml Normal file
View File

@ -0,0 +1,109 @@
@{
Layout = "_Layout";
ViewData["Title"] = "The Calendar House";
}
<section class="calendar-hero" aria-labelledby="calendar-house-title">
<img class="calendar-hero-image" src="/images/calendar-house-hero.png" alt="The Calendar House standing at dusk with many lit windows and chimneys" />
<div class="calendar-hero-shade"></div>
<div class="calendar-hero-content">
<p class="calendar-kicker">Standalone psychological mystery</p>
<h1 id="calendar-house-title">The Calendar House</h1>
<p class="calendar-hero-copy">
A lonely woman enters a house that offers belonging, intimacy, and safety.
Then she begins to understand the cost.
</p>
<div class="calendar-hero-actions">
<a class="calendar-button" asp-action="HousePlan">
<i class="fad fa-drafting-compass" aria-hidden="true"></i>
Explore the house
</a>
<a class="calendar-button calendar-button-ghost" asp-action="ThePattern">
<i class="fad fa-key-skeleton" aria-hidden="true"></i>
Find the pattern
</a>
</div>
</div>
<div class="calendar-hero-numbers" aria-label="House structure">
<span><strong>52</strong> rooms</span>
<span><strong>4</strong> wings</span>
<span><strong>7</strong> doors</span>
<span><strong>365</strong> windows</span>
</div>
</section>
<section class="calendar-section calendar-intro-grid">
<div>
<p class="calendar-kicker">The invitation</p>
<h2>Ellie did not come here by accident.</h2>
<p>
After betrayal, humiliation, and a period of sleeping on a friend's sofa, Ellie receives a trunk
of belongings and an invitation to an isolated house built around a system no one fully admits
to understanding.
</p>
<p>
At first, it feels like retreat. Then like a game. Then like a place that has been waiting for her
to need it badly enough.
</p>
</div>
<div class="calendar-rule-panel">
<div class="rule-line">
<span>Fifty-two rooms</span>
<b>one for every week</b>
</div>
<div class="rule-line">
<span>Four wings</span>
<b>one for every season</b>
</div>
<div class="rule-line">
<span>Seven doors</span>
<b>one for every day</b>
</div>
<div class="rule-line">
<span>One way in</span>
<b>no reliable way back</b>
</div>
</div>
</section>
<section class="calendar-section calendar-mood-board" aria-label="Story atmosphere">
<article>
<i class="fad fa-house-night" aria-hidden="true"></i>
<h3>The house watches</h3>
<p>Corridors turn familiar only after they have betrayed you. Doors remember choices better than people do.</p>
</article>
<article>
<i class="fad fa-users" aria-hidden="true"></i>
<h3>The residents belong</h3>
<p>Warmth and unease sit together here. The people are affectionate, devoted, and impossible to read from the outside.</p>
</article>
<article>
<i class="fad fa-hourglass-half" aria-hidden="true"></i>
<h3>The pattern repeats</h3>
<p>What looks like eccentric tradition may be inheritance, experiment, ritual, or something older than all three.</p>
</article>
</section>
<section class="calendar-section calendar-blurb">
<p>They say the house was built to a pattern.</p>
<p>No one remembers who designed it.</p>
<p>Fifty-two rooms. Four wings. Seven doors.</p>
<p>Each one placed with purpose.</p>
<p>Ellie did not come here by accident.</p>
<p>None of them did.</p>
</section>
@section Meta {
<MetaTag meta-title="The Calendar House by Catherine Lynwood"
meta-description="The Calendar House is a standalone dark psychological mystery about belonging, inherited behaviour, and a house built to a disturbing hidden pattern."
meta-keywords="The Calendar House, Catherine Lynwood, psychological mystery, gothic mystery, dark suspense, standalone novel"
meta-author="Catherine Lynwood"
meta-url="https://www.catherinelynwood.com/the-calendar-house"
meta-image="https://www.catherinelynwood.com/images/calendar-house-hero.png"
meta-image-alt="The Calendar House standing at dusk"
og-site-name="Catherine Lynwood - The Calendar House"
twitter-card-type="summary_large_image"
twitter-site-handle="@@CathLynwood"
twitter-creator-handle="@@CathLynwood" />
}

55
CatherineLynwood/Views/CalendarHouse/ThePattern.cshtml Normal file
View File

@ -0,0 +1,55 @@
@{
Layout = "_Layout";
ViewData["Title"] = "The Pattern";
}
<section class="calendar-page-hero pattern-hero">
<p class="calendar-kicker">The pattern</p>
<h1>Once you see it, it has already seen you.</h1>
<p>
The Calendar House is not simply a setting. It is a social system, a memory palace,
and a trap built from habit.
</p>
</section>
<section class="calendar-section pattern-grid">
<article>
<span>01</span>
<h2>Belonging</h2>
<p>Ellie arrives bruised by ordinary rejection and finds a place that answers her loneliness too precisely.</p>
</article>
<article>
<span>02</span>
<h2>Normalisation</h2>
<p>Inside the house, inherited behaviour becomes custom. What outsiders notice first, residents barely name.</p>
</article>
<article>
<span>03</span>
<h2>Inhibition</h2>
<p>The house lowers defences slowly: through ritual, warmth, secrecy, and the comfort of being wanted.</p>
</article>
<article>
<span>04</span>
<h2>Repetition</h2>
<p>Every room has a use. Every season has a pressure. Every invitation is both welcome and warning.</p>
</article>
</section>
<section class="calendar-section calendar-extract-card">
<h2>Working blurb</h2>
<p>They say the house was built to a pattern.</p>
<p>No one remembers who designed it.</p>
<p>At first, it feels like a game.</p>
<p>Corridors that shift. Doors that do not lead back.</p>
<p>Then the house begins to change.</p>
<p>Or perhaps it always was.</p>
</section>
@section Meta {
<MetaTag meta-title="The Pattern - The Calendar House"
meta-description="A spoiler-light look at the ideas behind The Calendar House: belonging, inherited behaviour, intimacy, social unease, and the house as a trap."
meta-author="Catherine Lynwood"
meta-url="https://www.catherinelynwood.com/the-calendar-house/the-pattern"
meta-image="https://www.catherinelynwood.com/images/calendar-house-hero.png"
twitter-card-type="summary_large_image" />
}

51
CatherineLynwood/Views/CalendarHouse/_Layout.cshtml Normal file
View File

@ -0,0 +1,51 @@
@{
var title = ViewData["Title"]?.ToString() ?? "The Calendar House";
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@title | Catherine Lynwood</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/fontawesome.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/duotone.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/calendar-house.css" asp-append-version="true" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<meta name="theme-color" content="#11150f">
<link rel="canonical" href="@($"https://www.catherinelynwood.com{Context.Request.Path}")" />
@RenderSection("Meta", required: false)
</head>
<body class="calendar-house-body">
<header class="calendar-house-header">
<a class="calendar-house-brand" asp-controller="CalendarHouse" asp-action="Index">
<span class="brand-mark" aria-hidden="true">52</span>
<span>The Calendar House</span>
</a>
<nav class="calendar-house-nav" aria-label="Calendar House navigation">
<a asp-controller="CalendarHouse" asp-action="Index">Book</a>
<a asp-controller="CalendarHouse" asp-action="HousePlan">House Plan</a>
<a asp-controller="CalendarHouse" asp-action="ThePattern">The Pattern</a>
<a asp-controller="Home" asp-action="Index">Catherine Lynwood</a>
</nav>
</header>
<main>
@RenderBody()
</main>
<footer class="calendar-house-footer">
<div>
<strong>Catherine Lynwood</strong>
<span>The Calendar House is a standalone dark psychological mystery.</span>
</div>
<social-media-share title="@title" url="@Context.Request.Path" class="calendar-house-share"></social-media-share>
</footer>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/calendar-house.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>

275
CatherineLynwood/Views/Discovery/IndexDesktop.cshtml
View File

@ -1,281 +1,10 @@
@model CatherineLynwood.Models.TitlePageViewModel
@model CatherineLynwood.Models.TitlePageViewModel
@{
ViewData["Title"] = "The Alpha Flame: A Gritty 1980s Birmingham Crime Novel about Twin Sisters";
bool showReviews = Model.Reviews.Items.Any();
}
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
<li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
<li class="breadcrumb-item active" aria-current="page">Discovery</li>
</ol>
</nav>
</div>
</div>
<!-- HERO: Cover + Trailer + Buy Box -->
<section class="mb-4">
<div class="row g-3 align-items-stretch">
<!-- Book Cover -->
<div class="col-lg-5 d-flex d-none d-lg-block">
<div class="card character-card h-100 flex-fill" id="cover-card">
<responsive-image src="the-alpha-flame-discovery-cover.png"
class="card-img-top"
alt="The Alpha Flame book cover — gritty 1980s Birmingham crime novel about twin sisters uncovering secrets and surviving abuse"
display-width-percentage="50"></responsive-image>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title h5 mb-1">The Alpha Flame: <span class="fw-light">Discovery</span></h3>
<p class="card-text mb-0">It's 1983 Birmingham. Maggie, my fiery heroine, standing outside the derelict Rubery Hill Hospital. A story of survival, sisters, and fire.</p>
</div>
</div>
</div>
<!-- Trailer + Buy Box -->
<div class="col-lg-7 d-flex">
<div class="card character-card h-100 flex-fill" id="hero-media-card">
<div class="card-body d-flex flex-column">
<a asp-controller="Discovery" asp-action="Trailer" class="cl-trailer-still mb-3">
<responsive-image src="the-alpha-flame-discovery-trailer-landscape.png"
class="cl-trailer-still__image"
alt="The Alpha Flame: Discovery trailer still"
display-width-percentage="50"></responsive-image>
<span class="cl-trailer-still__veil"></span>
<span class="cl-trailer-still__button">
<i class="fad fa-play"></i>
<span>Watch the trailer</span>
</span>
</a>
@await Component.InvokeAsync("BuyPanel", new { ISO2 = Model.UserIso2, Src = Model.Src, Title = Model.Title })
</div>
</div>
</div>
</div>
</section>
<section class="mb-4">
<div class="card character-card">
<div class="card-body">
<h3 class="h6 text-uppercase text-muted mb-2">★ Audiobook Out Now ★</h3>
<p class="mb-3">
<em>The Alpha Flame: Discovery</em> is now available as a full-length audiobook, narrated to be lived in rather than rushed through.
It’s a slow-burn, character-led story where quiet moments matter, tension builds gradually, and certain scenes land harder when you hear them spoken.
</p>
<p class="mb-3">
Ideal for long drives, late nights, or anyone who prefers to sink into a story through headphones rather than skim it on a screen.
</p>
<a asp-controller="Discovery" asp-action="AudioBook" class="btn btn-dark">
🎧 Explore the audiobook
</a>
</div>
</div>
</section>
<!-- Social proof: show one standout review near the top -->
@if (showReviews)
{
var top = Model.Reviews.Items.Where(x => x.RatingValue == 5).OrderByDescending(y => y.DatePublished).First();
var fullStars = (int)Math.Floor(top.RatingValue);
var hasHalfStar = top.RatingValue - fullStars >= 0.5;
var emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
var reviewDate = top.DatePublished.ToString("d MMMM yyyy");
<section class="mb-4">
<div class="card character-card">
<div class="card-body">
<h3 class="h6 text-uppercase text-muted mb-2">★ Reader Praise ★</h3>
<blockquote class="blockquote mb-2">
<span class="mb-2 text-warning d-inline-block">
@for (int i = 0; i < fullStars; i++)
{
<i class="fad fa-star"></i>
}
@if (hasHalfStar)
{
<i class="fad fa-star-half-alt"></i>
}
@for (int i = 0; i < emptyStars; i++)
{
<i class="fad fa-star" style="--fa-primary-opacity:0.2;--fa-secondary-opacity:0.2;"></i>
}
</span>
@Html.Raw(top.ReviewBody)
<footer>
@top.AuthorName on
<cite title="@top.SiteName">
@if (string.IsNullOrEmpty(top.URL))
{
@top.SiteName
}
else
{
<a href="@top.URL" target="_blank">@top.SiteName</a>
}
</cite>
<span class="text-muted smaller">, @reviewDate</span>
</footer>
</blockquote>
@if (Model.Reviews.Items.Count > 1)
{
<div class="text-end">
<a asp-action="Reviews" class="btn btn-outline-secondary btn-sm">Read more reviews</a>
</div>
}
</div>
</div>
</section>
}
<!-- Synopsis: open on mobile, collapsible on desktop -->
<section id="synopsis" class="mb-4">
<div class="card character-card text-white" style="background: url('/images/webp/synopsis-background-960.webp'); background-position: center; background-size: cover;">
<div class="card-header">
<h2 class="card-title h1 mb-0">The Alpha Flame: <span class="fw-light">Discovery</span></h2>
<p class="mb-0">Survival, secrets, and shadows in 1983 Birmingham.</p>
</div>
<div class="card-body" id="synopsis-body">
<!-- Audio blurb -->
<div class="row align-items-center mb-3">
<div class="col-2">
<responsive-image src="catherine-lynwood-16.png" class="img-fluid rounded-circle border border-2 border-dark" alt="Catherine Lynwood" display-width-percentage="20"></responsive-image>
</div>
<div class="col-10">
<div class="audio-player text-center">
<audio id="player">
<source src="/audio/the-alpha-flame-discovery-catherine.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<p class="text-center text-white small mb-0">Listen to Catherine talking about the book</p>
</div>
</div>
<!-- Teaser -->
<p class="card-text">
She didn’t go looking for trouble. But when she found Beth, bruised, broken, and terrified, Maggie couldn’t walk away.
</p>
<p class="card-text">
But nothing prepares her for Beth. As she digs deeper into Beth’s world, Maggie finds herself pulled into the shadows, a seedy underworld of secrets, survival, and control, where loyalty is rare and nothing is guaranteed. The more she uncovers, the more she realises this isn’t someone else’s nightmare. It’s her own.
</p>
<p class="card-text">
Set in 1983 Birmingham, nearby Redditch, and Barmouth in Wales, The Alpha Flame: Discovery follows the lives of two young women, Beth and Maggie, as they uncover dark family secrets and fight to survive. Gritty and emotionally charged, it explores the bond between two women who refuse to be broken.
</p>
<!-- Desktop-only: collapse trigger -->
<p class="mb-2 d-none d-md-block">
<a class="btn btn-outline-light btn-sm"
data-bs-toggle="collapse"
href="#fullSynopsis"
role="button"
aria-expanded="false"
aria-controls="fullSynopsis">
Read full synopsis
</a>
</p>
<!-- One copy of the full synopsis -->
<div class="collapse" id="fullSynopsis">
<div class="mt-2">
<p class="card-text">For Beth, the world is a cold and unforgiving place. Devastation strikes in a single moment, leaving her isolated, shattered, and vulnerable. Alone in the bleak shadows of a city that offers neither refuge nor redemption, she is forced to navigate a relentless cycle of desperation and despair. Every step of her journey tests the limits of her endurance, pushing her into harrowing situations where survival feels like a hollow victory. Beth’s existence is marked by loss, betrayal, and an almost suffocating loneliness that threatens to consume her entirely. Yet, even in the darkest corners of her ordeal, a fragile ember of defiance smoulders within her, a quiet, stubborn refusal to let the world destroy her completely.</p>
<p class="card-text">Maggie, by contrast, is a force of nature, a woman who thrives on her unshakable drive and an unrelenting belief in her own power. Behind her fiery red hair and disarming charm lies a storm of determination and ferocity. Maggie doesn’t just live; she races through life, fuelled by a need for speed and the thrill of freedom. Her Triumph TR6 isn’t just a car; it’s an extension of her spirit, sleek, powerful, and unapologetically bold. On the open road, with the engine roaring and the world blurring past her, she feels invincible. But Maggie’s intensity doesn’t stop at the wheel. Her relationships burn just as brightly. As a lover, she is dominant, passionate, and unafraid to embrace her darker desires. While fiercely loving and loyal, Maggie is also formidable; crossing her isn’t a mistake anyone makes twice.</p>
<p class="card-text">When fate brings Beth and Maggie together, their connection is explosive, a union of two polar opposites that burns with both tenderness and raw power. For Beth, Maggie represents a lifeline, a reminder that love and trust still exist, even in a world that has betrayed her at every turn. For Maggie, Beth awakens a fierce protectiveness and vulnerability she’s rarely allowed herself to feel. Together, they ignite a flame that challenges them to confront their own fears, desires, and limitations.</p>
<p class="card-text">Set against the kaleidoscope of 1983, where synthesised anthems provide a pulsing soundtrack and the streets are alive with the bold styles and rebellious energy of the decade, their story unfolds in a city teeming with danger and intrigue. From high-speed chases along winding roads to dimly lit clubs and desolate alleyways, the heroines’ journey is a visceral exploration of survival and freedom. The neon haze of the era contrasts sharply with the stark realities they face, painting a vivid picture of a world where strength and vulnerability coexist.</p>
<p class="card-text">As secrets surface and danger tightens its grip, Beth and Maggie must confront not only the challenges around them but the truths within themselves. Their bond is tested by betrayal, desire, and the shadows of their pasts, but through it all, their flame burns brighter, illuminating their courage and the unbreakable spirit of two heroines determined to rewrite their fates.</p>
<p class="card-text">At its heart, The Alpha Flame is a story of survival, passion, and empowerment. It captures the raw power of human connection against the gritty, vibrant backdrop of an unforgettable era. With its blend of drama, intensity, and unapologetic emotion, this is a story that will leave its mark long after the final page.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Chapter Previews -->
<section id="chapters" class="mt-4">
<h2>Chapter Previews</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100 character-card">
<a asp-action="Chapter1">
<responsive-image src="beth-stood-in-bathroom.png" class="card-img-top" alt="Beth's Bathroom" display-width-percentage="50"></responsive-image>
</a>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title">Chapter 1: Drowning in Silence — Beth</h3>
<p class="card-text">Beth returns home to find her mother lifeless in the bath...</p>
<div class="text-end"><a asp-action="Chapter1" class="btn btn-dark">Read More</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 character-card">
<a asp-action="Chapter2">
<responsive-image src="maggie-with-her-tr6-2.png" class="fit-image" alt="Maggie With Her TR6" display-width-percentage="50"></responsive-image>
</a>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title">Chapter 2: The Last Lesson — Maggie</h3>
<p class="card-text">On Christmas Eve, Maggie nervously heads out for her driving test not knowing the story that will pan out before her...</p>
<div class="text-end"><a asp-action="Chapter2" class="btn btn-dark">Read More</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 character-card">
<a asp-action="Chapter13">
<responsive-image src="pub-from-chapter-13.png" class="fit-image" alt="Pub from Chapter 13" display-width-percentage="50"></responsive-image>
</a>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title">Chapter 13: A Name She Never Owned — Susie</h3>
<p class="card-text">Susie goes out for a drink with a punter. What on earth could go wrong...</p>
<div class="text-end"><a asp-action="Chapter13" class="btn btn-dark">Read More</a></div>
</div>
</div>
</div>
</div>
</section>
@section Scripts {
<!-- Plyr for audio -->
<script>
const player = new Plyr('audio');
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const el = document.getElementById('fullSynopsis');
if (!el || !window.bootstrap?.Collapse) return;
// Initialise without auto-toggling
const c = new bootstrap.Collapse(el, { toggle: false });
const mq = window.matchMedia('(min-width: 768px)'); // Bootstrap md
function setInitial() {
if (mq.matches) {
// Desktop: keep collapsed
c.hide();
} else {
// Mobile: open by default
c.show();
}
}
setInitial();
// Optional: if user resizes across the breakpoint, adjust state
mq.addEventListener?.('change', setInitial);
});
</script>
}
@await Html.PartialAsync("_DiscoveryShowcase", Model)
@section Meta {
<MetaTag meta-title="The Alpha Flame: Discovery by Catherine Lynwood"

229
CatherineLynwood/Views/Discovery/IndexMobileA.cshtml
View File

@ -1,235 +1,10 @@
@model CatherineLynwood.Models.TitlePageViewModel
@model CatherineLynwood.Models.TitlePageViewModel
@{
ViewData["Title"] = "The Alpha Flame: A Gritty 1980s Birmingham Crime Novel about Twin Sisters";
bool showReviews = Model.Reviews.Items.Any();
}
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
<li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
<li class="breadcrumb-item active" aria-current="page">Discovery</li>
</ol>
</nav>
</div>
</div>
<!-- HERO: Cover + Trailer + Buy Box -->
<section class="mb-4">
<div class="card mb-4">
<div class="card-body">
<h2 class="card-title h1 mb-0">The Alpha Flame: <span class="fw-light">Discovery</span></h2>
<p class="mb-0">Birmingham 1983 - A tale of survival, secrets, and sisterhood.</p>
</div>
</div>
<div class="row g-3 align-items-stretch">
<!-- Trailer + Buy Box -->
<div class="col-12">
<div class="card character-card" id="hero-media-card">
<div class="card-body">
<a asp-controller="Discovery" asp-action="Trailer" class="cl-trailer-still cl-trailer-still--portrait mb-3">
<responsive-image src="the-alpha-flame-discovery-trailer-portrait.png"
class="cl-trailer-still__image"
alt="The Alpha Flame: Discovery trailer still"
display-width-percentage="50"></responsive-image>
<span class="cl-trailer-still__veil"></span>
<span class="cl-trailer-still__button">
<i class="fad fa-play"></i>
<span>Watch the trailer</span>
</span>
</a>
@await Component.InvokeAsync("BuyPanel", new { ISO2 = Model.UserIso2, Src = Model.Src })
</div>
</div>
<!-- Sticky mobile buy bar -->
<div id="mobileBuyBar" class="d-md-none fixed-bottom bg-dark text-white py-2 border-top border-3 border-light" style="z-index:1030;">
<div class="container d-flex justify-content-between align-items-center">
<span class="small">The Alpha Flame: Discovery</span>
<a href="#buyBox" class="btn btn-light btn-sm">Buy now</a>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4">
<div class="card character-card">
<div class="card-body">
<h3 class="h6 text-uppercase text-muted mb-2">★ Audiobook Out Now ★</h3>
<p class="mb-3">
<em>The Alpha Flame: Discovery</em> is now available as a full-length audiobook, narrated to be lived in rather than rushed through.
It’s a slow-burn, character-led story where quiet moments matter, tension builds gradually, and certain scenes land harder when you hear them spoken.
</p>
<p class="mb-3">
Ideal for long drives, late nights, or anyone who prefers to sink into a story through headphones rather than skim it on a screen.
</p>
<a asp-controller="Discovery" asp-action="AudioBook" class="btn btn-dark">
🎧 Explore the audiobook
</a>
</div>
</div>
</section>
<!-- Social proof: show one standout review near the top -->
@if (showReviews)
{
var top = Model.Reviews.Items.Where(x => x.RatingValue == 5).OrderByDescending(y => y.DatePublished).First();
var fullStars = (int)Math.Floor(top.RatingValue);
var hasHalfStar = top.RatingValue - fullStars >= 0.5;
var emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
var reviewDate = top.DatePublished.ToString("d MMMM yyyy");
<section class="mb-4">
<div class="card character-card">
<div class="card-body">
<h3 class="h6 text-uppercase text-muted mb-2">★ Reader Praise ★</h3>
<blockquote class="blockquote mb-2">
<span class="mb-2 text-warning d-inline-block">
@for (int i = 0; i < fullStars; i++)
{
<i class="fad fa-star"></i>
}
@if (hasHalfStar)
{
<i class="fad fa-star-half-alt"></i>
}
@for (int i = 0; i < emptyStars; i++)
{
<i class="fad fa-star" style="--fa-primary-opacity:0.2;--fa-secondary-opacity:0.2;"></i>
}
</span>
@Html.Raw(top.ReviewBody)
<footer>
@top.AuthorName on
<cite title="@top.SiteName">
@if (string.IsNullOrEmpty(top.URL))
{
@top.SiteName
}
else
{
<a href="@top.URL" target="_blank">@top.SiteName</a>
}
</cite>
<span class="text-muted smaller">, @reviewDate</span>
</footer>
</blockquote>
@if (Model.Reviews.Items.Count > 1)
{
<div class="text-end">
<a asp-action="Reviews" class="btn btn-outline-secondary btn-sm">Read more reviews</a>
</div>
}
</div>
</div>
</section>
}
<!-- Synopsis: open on mobile, collapsible on desktop -->
<section id="synopsis" class="mb-4">
<div class="card character-card text-white" style="background: url('/images/webp/synopsis-background-960.webp'); background-position: center; background-size: cover;">
<div class="card-header">
<h2 class="card-title h1 mb-0">The Alpha Flame: <span class="fw-light">Discovery</span></h2>
<p class="mb-0">Birmingham 1983 - A tale of survival, secrets, and sisterhood.</p>
</div>
<div class="card-body" id="synopsis-body">
<!-- Audio blurb -->
<div class="row align-items-center mb-3">
<div class="col-2">
<responsive-image src="catherine-lynwood-16.png" class="img-fluid rounded-circle border border-2 border-dark" alt="Catherine Lynwood" display-width-percentage="20"></responsive-image>
</div>
<div class="col-10">
<div class="audio-player text-center">
<audio id="player">
<source src="/audio/the-alpha-flame-discovery-catherine.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<p class="text-center text-white small mb-0">Listen to Catherine talking about the book</p>
</div>
</div>
<!-- Full synopsis -->
<div>
<div class="mt-2">
<p class="card-text">She didn’t go looking for trouble. But when she found Beth, bruised, broken, and terrified, Maggie couldn’t walk away.</p>
<p class="card-text">But nothing prepares her for Beth. As she digs deeper into Beth’s world, Maggie finds herself pulled into the shadows, a seedy underworld of secrets, survival, and control, where loyalty is rare and nothing is guaranteed. The more she uncovers, the more she realises this isn’t someone else’s nightmare. It’s her own.</p>
<p class="card-text">Set in 1983 Birmingham, nearby Redditch, and Barmouth in Wales, The Alpha Flame: Discovery follows the lives of two young women, Beth and Maggie, as they uncover dark family secrets and fight to survive. Gritty and emotionally charged, it explores the bond between two women who refuse to be broken.</p>
<p class="card-text">For Beth, the world is a cold and unforgiving place. Devastation strikes in a single moment, leaving her isolated, shattered, and vulnerable. Alone in the bleak shadows of a city that offers neither refuge nor redemption, she is forced to navigate a relentless cycle of desperation and despair. Every step of her journey tests the limits of her endurance, pushing her into harrowing situations where survival feels like a hollow victory. Beth’s existence is marked by loss, betrayal, and an almost suffocating loneliness that threatens to consume her entirely. Yet, even in the darkest corners of her ordeal, a fragile ember of defiance smoulders within her, a quiet, stubborn refusal to let the world destroy her completely.</p>
<p class="card-text">Maggie, by contrast, is a force of nature, a woman who thrives on her unshakable drive and an unrelenting belief in her own power. Behind her fiery red hair and disarming charm lies a storm of determination and ferocity. Maggie doesn’t just live; she races through life, fuelled by a need for speed and the thrill of freedom. Her Triumph TR6 isn’t just a car; it’s an extension of her spirit, sleek, powerful, and unapologetically bold. On the open road, with the engine roaring and the world blurring past her, she feels invincible. But Maggie’s intensity doesn’t stop at the wheel. Her relationships burn just as brightly. As a lover, she is dominant, passionate, and unafraid to embrace her darker desires. While fiercely loving and loyal, Maggie is also formidable; crossing her isn’t a mistake anyone makes twice.</p>
<p class="card-text">When fate brings Beth and Maggie together, their connection is explosive, a union of two polar opposites that burns with both tenderness and raw power. For Beth, Maggie represents a lifeline, a reminder that love and trust still exist, even in a world that has betrayed her at every turn. For Maggie, Beth awakens a fierce protectiveness and vulnerability she’s rarely allowed herself to feel. Together, they ignite a flame that challenges them to confront their own fears, desires, and limitations.</p>
<p class="card-text">Set against the kaleidoscope of 1983, where synthesised anthems provide a pulsing soundtrack and the streets are alive with the bold styles and rebellious energy of the decade, their story unfolds in a city teeming with danger and intrigue. From high speed chases along winding roads to dimly lit clubs and desolate alleyways, the heroines’ journey is a visceral exploration of survival and freedom. The neon haze of the era contrasts sharply with the stark realities they face, painting a vivid picture of a world where strength and vulnerability coexist.</p>
<p class="card-text">As secrets surface and danger tightens its grip, Beth and Maggie must confront not only the challenges around them but the truths within themselves. Their bond is tested by betrayal, desire, and the shadows of their pasts, but through it all, their flame burns brighter, illuminating their courage and the unbreakable spirit of two heroines determined to rewrite their fates.</p>
<p class="card-text">At its heart, The Alpha Flame is a story of survival, passion, and empowerment. It captures the raw power of human connection against the gritty, vibrant backdrop of an unforgettable era. With its blend of drama, intensity, and unapologetic emotion, this is a story that will leave its mark long after the final page.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Chapter Previews -->
<section id="chapters" class="mt-4">
<h2>Chapter Previews</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100 character-card">
<a asp-action="Chapter1">
<responsive-image src="beth-stood-in-bathroom.png" class="card-img-top" alt="Beth's Bathroom" display-width-percentage="50"></responsive-image>
</a>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title">Chapter 1: Drowning in Silence — Beth</h3>
<p class="card-text">Beth returns home to find her mother lifeless in the bath...</p>
<div class="text-end"><a asp-action="Chapter1" class="btn btn-dark">Read More</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 character-card">
<a asp-action="Chapter2">
<responsive-image src="maggie-with-her-tr6-2.png" class="fit-image" alt="Maggie With Her TR6" display-width-percentage="50"></responsive-image>
</a>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title">Chapter 2: The Last Lesson — Maggie</h3>
<p class="card-text">On Christmas Eve, Maggie nervously heads out for her driving test not knowing the story that will pan out before her...</p>
<div class="text-end"><a asp-action="Chapter2" class="btn btn-dark">Read More</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 character-card">
<a asp-action="Chapter13">
<responsive-image src="pub-from-chapter-13.png" class="fit-image" alt="Pub from Chapter 13" display-width-percentage="50"></responsive-image>
</a>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title">Chapter 13: A Name She Never Owned — Susie</h3>
<p class="card-text">Susie goes out for a drink with a punter. What on earth could go wrong...</p>
<div class="text-end"><a asp-action="Chapter13" class="btn btn-dark">Read More</a></div>
</div>
</div>
</div>
</div>
</section>
@section Scripts {
<!-- Plyr for audio -->
<script>
const player = new Plyr('audio');
</script>
}
@await Html.PartialAsync("_DiscoveryShowcase", Model)
@section Meta {
<MetaTag meta-title="The Alpha Flame: Discovery by Catherine Lynwood"

230
CatherineLynwood/Views/Discovery/IndexMobileB.cshtml
View File

@ -1,236 +1,10 @@
@model CatherineLynwood.Models.TitlePageViewModel
@model CatherineLynwood.Models.TitlePageViewModel
@{
ViewData["Title"] = "The Alpha Flame: A Gritty 1980s Birmingham Crime Novel about Twin Sisters";
bool showReviews = Model.Reviews.Items.Any();
}
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
<li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
<li class="breadcrumb-item active" aria-current="page">Discovery</li>
</ol>
</nav>
</div>
</div>
<!-- HERO: Cover + Trailer (no Buy Box here in Version B) -->
<section class="mb-4">
<div class="row g-3 align-items-stretch">
<!-- Trailer only -->
<div class="col-12">
<div class="card character-card" id="hero-media-card">
<div class="card-body">
<a asp-controller="Discovery" asp-action="Trailer" class="cl-trailer-still cl-trailer-still--portrait mb-3">
<responsive-image src="the-alpha-flame-discovery-trailer-portrait.png"
class="cl-trailer-still__image"
alt="The Alpha Flame: Discovery trailer still"
display-width-percentage="50"></responsive-image>
<span class="cl-trailer-still__veil"></span>
<span class="cl-trailer-still__button">
<i class="fad fa-play"></i>
<span>Watch the trailer</span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4">
<div class="card character-card">
<div class="card-body">
<h3 class="h6 text-uppercase text-muted mb-2">★ Audiobook Out Now ★</h3>
<p class="mb-3">
<em>The Alpha Flame: Discovery</em> is now available as a full-length audiobook, narrated to be lived in rather than rushed through.
It’s a slow-burn, character-led story where quiet moments matter, tension builds gradually, and certain scenes land harder when you hear them spoken.
</p>
<p class="mb-3">
Ideal for long drives, late nights, or anyone who prefers to sink into a story through headphones rather than skim it on a screen.
</p>
<a asp-controller="Discovery" asp-action="AudioBook" class="btn btn-dark">
🎧 Explore the audiobook
</a>
</div>
</div>
</section>
<!-- Synopsis first (story-first layout) -->
<section id="synopsis" class="mb-4">
<div class="card character-card text-white" style="background: url('/images/webp/synopsis-background-960.webp'); background-position: center; background-size: cover;">
<div class="card-header">
<h2 class="card-title h1 mb-0">The Alpha Flame: <span class="fw-light">Discovery</span></h2>
<p class="mb-0">Survival, secrets, and sisters in 1983 Birmingham.</p>
</div>
<div class="card-body" id="synopsis-body">
<!-- Audio blurb -->
<div class="row align-items-center mb-3">
<div class="col-2">
<responsive-image src="catherine-lynwood-16.png" class="img-fluid rounded-circle border border-2 border-dark" alt="Catherine Lynwood" display-width-percentage="20"></responsive-image>
</div>
<div class="col-10">
<div class="audio-player text-center">
<audio id="player">
<source src="/audio/the-alpha-flame-discovery-catherine.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<p class="text-center text-white small mb-0">Listen to Catherine talking about the book</p>
</div>
</div>
<!-- Full synopsis -->
<div>
<div class="mt-2">
<p class="card-text">She didn’t go looking for trouble. But when she found Beth, bruised, broken, and terrified, Maggie couldn’t walk away.</p>
<p class="card-text">But nothing prepares her for Beth. As she digs deeper into Beth’s world, Maggie finds herself pulled into the shadows, a seedy underworld of secrets, survival, and control, where loyalty is rare and nothing is guaranteed. The more she uncovers, the more she realises this isn’t someone else’s nightmare. It’s her own.</p>
<p class="card-text">Set in 1983 Birmingham, nearby Redditch, and Barmouth in Wales, The Alpha Flame: Discovery follows the lives of two young women, Beth and Maggie, as they uncover dark family secrets and fight to survive. Gritty and emotionally charged, it explores the bond between two women who refuse to be broken.</p>
<p class="card-text">For Beth, the world is a cold and unforgiving place. Devastation strikes in a single moment, leaving her isolated, shattered, and vulnerable. Alone in the bleak shadows of a city that offers neither refuge nor redemption, she is forced to navigate a relentless cycle of desperation and despair. Every step of her journey tests the limits of her endurance, pushing her into harrowing situations where survival feels like a hollow victory. Beth’s existence is marked by loss, betrayal, and an almost suffocating loneliness that threatens to consume her entirely. Yet, even in the darkest corners of her ordeal, a fragile ember of defiance smoulders within her, a quiet, stubborn refusal to let the world destroy her completely.</p>
<p class="card-text">Maggie, by contrast, is a force of nature, a woman who thrives on her unshakable drive and an unrelenting belief in her own power. Behind her fiery red hair and disarming charm lies a storm of determination and ferocity. Maggie doesn’t just live; she races through life, fuelled by a need for speed and the thrill of freedom. Her Triumph TR6 isn’t just a car; it’s an extension of her spirit, sleek, powerful, and unapologetically bold. On the open road, with the engine roaring and the world blurring past her, she feels invincible. But Maggie’s intensity doesn’t stop at the wheel. Her relationships burn just as brightly. As a lover, she is dominant, passionate, and unafraid to embrace her darker desires. While fiercely loving and loyal, Maggie is also formidable; crossing her isn’t a mistake anyone makes twice.</p>
<p class="card-text">When fate brings Beth and Maggie together, their connection is explosive, a union of two polar opposites that burns with both tenderness and raw power. For Beth, Maggie represents a lifeline, a reminder that love and trust still exist, even in a world that has betrayed her at every turn. For Maggie, Beth awakens a fierce protectiveness and vulnerability she’s rarely allowed herself to feel. Together, they ignite a flame that challenges them to confront their own fears, desires, and limitations.</p>
<p class="card-text">Set against the kaleidoscope of 1983, where synthesised anthems provide a pulsing soundtrack and the streets are alive with the bold styles and rebellious energy of the decade, their story unfolds in a city teeming with danger and intrigue. From high speed chases along winding roads to dimly lit clubs and desolate alleyways, the heroines’ journey is a visceral exploration of survival and freedom. The neon haze of the era contrasts sharply with the stark realities they face, painting a vivid picture of a world where strength and vulnerability coexist.</p>
<p class="card-text">As secrets surface and danger tightens its grip, Beth and Maggie must confront not only the challenges around them but the truths within themselves. Their bond is tested by betrayal, desire, and the shadows of their pasts, but through it all, their flame burns brighter, illuminating their courage and the unbreakable spirit of two heroines determined to rewrite their fates.</p>
<p class="card-text">At its heart, The Alpha Flame is a story of survival, passion, and empowerment. It captures the raw power of human connection against the gritty, vibrant backdrop of an unforgettable era. With its blend of drama, intensity, and unapologetic emotion, this is a story that will leave its mark long after the final page.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Social proof near top -->
@if (showReviews)
{
var top = Model.Reviews.Items.Where(x => x.RatingValue == 5).OrderByDescending(y => y.DatePublished).First();
var fullStars = (int)Math.Floor(top.RatingValue);
var hasHalfStar = top.RatingValue - fullStars >= 0.5;
var emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
var reviewDate = top.DatePublished.ToString("d MMMM yyyy");
<section class="mb-4">
<div class="card character-card">
<div class="card-body">
<h3 class="h6 text-uppercase text-muted mb-2">★ Reader Praise ★</h3>
<blockquote class="blockquote mb-2">
<span class="mb-2 text-warning d-inline-block">
@for (int i = 0; i < fullStars; i++)
{
<i class="fad fa-star"></i>
}
@if (hasHalfStar)
{
<i class="fad fa-star-half-alt"></i>
}
@for (int i = 0; i < emptyStars; i++)
{
<i class="fad fa-star" style="--fa-primary-opacity:0.2;--fa-secondary-opacity:0.2;"></i>
}
</span>
@Html.Raw(top.ReviewBody)
<footer>
@top.AuthorName on
<cite title="@top.SiteName">
@if (string.IsNullOrEmpty(top.URL))
{
@top.SiteName
}
else
{
<a href="@top.URL" target="_blank">@top.SiteName</a>
}
</cite>
<span class="text-muted smaller">, @reviewDate</span>
</footer>
</blockquote>
@if (Model.Reviews.Items.Count > 1)
{
<div class="text-end">
<a asp-action="Reviews" class="btn btn-outline-secondary btn-sm">Read more reviews</a>
</div>
}
</div>
</div>
</section>
}
<!-- Buy Box now AFTER synopsis/review -->
<section class="mb-4" id="buy">
<div class="row">
<div class="col-12 d-flex">
<div class="card character-card h-100 flex-fill" id="buy-card">
<div class="card-body d-flex flex-column">
@await Component.InvokeAsync("BuyPanel", new { ISO2 = Model.UserIso2, Src = Model.Src })
</div>
</div>
</div>
</div>
</section>
<!-- Sticky mobile buy bar (global, still points to #buyBox inside the partial) -->
<div id="mobileBuyBar" class="d-md-none fixed-bottom bg-dark text-white py-2 border-top border-3 border-light" style="z-index:1030;">
<div class="container d-flex justify-content-between align-items-center">
<span class="small">The Alpha Flame: Discovery</span>
<a href="#buyBox" class="btn btn-light btn-sm">Buy now</a>
</div>
</div>
<!-- Chapter Previews -->
<section id="chapters" class="mt-4">
<h2>Chapter Previews</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100 character-card">
<a asp-action="Chapter1">
<responsive-image src="beth-stood-in-bathroom.png" class="card-img-top" alt="Beth's Bathroom" display-width-percentage="50"></responsive-image>
</a>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title">Chapter 1, Drowning in Silence, Beth</h3>
<p class="card-text">Beth returns home to find her mother lifeless in the bath...</p>
<div class="text-end"><a asp-action="Chapter1" class="btn btn-dark">Read More</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 character-card">
<a asp-action="Chapter2">
<responsive-image src="maggie-with-her-tr6-2.png" class="fit-image" alt="Maggie With Her TR6" display-width-percentage="50"></responsive-image>
</a>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title">Chapter 2, The Last Lesson, Maggie</h3>
<p class="card-text">On Christmas Eve, Maggie nervously heads out for her driving test not knowing the story that will pan out before her...</p>
<div class="text-end"><a asp-action="Chapter2" class="btn btn-dark">Read More</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 character-card">
<a asp-action="Chapter13">
<responsive-image src="pub-from-chapter-13.png" class="fit-image" alt="Pub from Chapter 13" display-width-percentage="50"></responsive-image>
</a>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title">Chapter 13, A Name She Never Owned, Susie</h3>
<p class="card-text">Susie goes out for a drink with a punter. What on earth could go wrong...</p>
<div class="text-end"><a asp-action="Chapter13" class="btn btn-dark">Read More</a></div>
</div>
</div>
</div>
</div>
</section>
@section Scripts {
<!-- Plyr for audio -->
<script>
const player = new Plyr('audio');
</script>
}
@await Html.PartialAsync("_DiscoveryShowcase", Model)
@section Meta {
<MetaTag meta-title="The Alpha Flame: Discovery by Catherine Lynwood"

207
CatherineLynwood/Views/Discovery/_DiscoveryShowcase.cshtml Normal file
View File

@ -0,0 +1,207 @@
@model CatherineLynwood.Models.TitlePageViewModel
@{
bool showReviews = Model.Reviews.Items.Any();
}
<div class="cl-discovery-wow">
<nav aria-label="breadcrumb" class="cl-discovery-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
<li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
<li class="breadcrumb-item active" aria-current="page">Discovery</li>
</ol>
</nav>
<section class="cl-discovery-hero">
<div class="cl-discovery-hero__copy">
<p class="cl-kicker mb-3">The Alpha Flame trilogy / Book one</p>
<h1>Discovery</h1>
<p class="cl-discovery-hero__series">The Alpha Flame by Catherine Lynwood</p>
<p class="cl-discovery-hero__lead">
Two young women. One act of courage. A buried truth that turns survival into fire.
</p>
<p class="cl-discovery-hero__truth">
She didn't go looking for trouble. But when Maggie finds Beth bruised, broken, and terrified, walking away is no longer an option.
</p>
<div class="cl-discovery-actions">
<a href="#buyBox" class="btn btn-dark">Buy the book</a>
<a asp-controller="Discovery" asp-action="Trailer" class="btn btn-outline-light">
<i class="fad fa-play"></i>
<span>Watch trailer</span>
</a>
<a href="#story" class="btn btn-outline-light">Enter the story</a>
</div>
</div>
<div class="cl-discovery-hero__art" aria-label="The Alpha Flame: Discovery artwork">
<div class="cl-discovery-cover-stack">
<responsive-image src="the-alpha-flame-discovery-cover.png"
class="cl-discovery-cover"
alt="The Alpha Flame: Discovery by Catherine Lynwood"
display-width-percentage="50"></responsive-image>
<a asp-controller="Discovery" asp-action="Trailer" class="cl-discovery-trailer-card">
<responsive-image src="the-alpha-flame-discovery-trailer-landscape.png"
class="cl-discovery-trailer-card__image"
alt="The Alpha Flame: Discovery trailer still"
display-width-percentage="50"></responsive-image>
<span>
<i class="fad fa-play"></i>
Trailer
</span>
</a>
</div>
</div>
</section>
<section class="cl-discovery-proof-strip" aria-label="Story signals">
<div>
<span>1983</span>
<strong>Birmingham</strong>
</div>
<div>
<span>Gritty</span>
<strong>Women's drama</strong>
</div>
<div>
<span>Audio</span>
<strong>Out now</strong>
</div>
<div>
<span>Core</span>
<strong>Survival, loyalty, fire</strong>
</div>
</section>
<section class="cl-discovery-buy-shell" aria-label="Buy The Alpha Flame: Discovery">
<div class="cl-discovery-buy-intro">
<p class="cl-kicker mb-2">Get the book</p>
<h2>Choose the edition that belongs on your shelf.</h2>
<p>Best options are shown for your location, with direct paperback, collector's hardback, ebook, audiobook, and Amazon routes kept together.</p>
</div>
<div class="cl-discovery-buy-panel">
@await Component.InvokeAsync("BuyPanel", new { ISO2 = Model.UserIso2, Src = Model.Src, Title = Model.Title })
</div>
</section>
<section class="cl-discovery-story" id="story">
<div class="cl-discovery-story__image">
<responsive-image src="rubery-hill-hospital.png"
alt="Rubery Hill Hospital, one of the atmospheric places behind The Alpha Flame: Discovery"
display-width-percentage="50"></responsive-image>
</div>
<div class="cl-discovery-story__copy">
<p class="cl-kicker mb-2">Inside Discovery</p>
<h2>Not a fairy tale. Not a soft landing.</h2>
<p>
Set in 1983 Birmingham, nearby Redditch, and Barmouth in Wales, <em>The Alpha Flame: Discovery</em> follows Beth and Maggie as they uncover dark family secrets and fight to survive.
</p>
<p>
It is character-led, emotionally charged fiction about the bond between two women who refuse to be broken by what the world has done to them.
</p>
</div>
</section>
<section class="cl-discovery-tiles" aria-label="Themes in Discovery">
<article>
<span>01</span>
<h3>The Wound</h3>
<p>Beth's world narrows into loss, danger, and loneliness, with only a fragile ember of defiance left burning.</p>
</article>
<article>
<span>02</span>
<h3>The Spark</h3>
<p>Maggie is fast, fierce, loyal, and impossible to ignore. When she steps in, the story changes shape.</p>
</article>
<article>
<span>03</span>
<h3>The Bond</h3>
<p>Their connection is tender, volatile, protective, and dangerous enough to expose every hidden truth.</p>
</article>
</section>
<section class="cl-discovery-audio">
<div>
<p class="cl-kicker mb-2">Audiobook out now</p>
<h2>Hear it lived in, not rushed through.</h2>
<p>
<em>The Alpha Flame: Discovery</em> is available as a full-length audiobook for long drives, late nights, and readers who want the quiet scenes to land with force.
</p>
</div>
<a asp-controller="Discovery" asp-action="AudioBook" class="btn btn-dark">Explore the audiobook</a>
</section>
@if (showReviews)
{
var top = Model.Reviews.Items.Where(x => x.RatingValue == 5).OrderByDescending(y => y.DatePublished).First();
var reviewDate = top.DatePublished.ToString("d MMMM yyyy");
<section class="cl-discovery-review">
<div class="cl-discovery-review__stars" aria-label="Five star review">
<i class="fad fa-star"></i>
<i class="fad fa-star"></i>
<i class="fad fa-star"></i>
<i class="fad fa-star"></i>
<i class="fad fa-star"></i>
</div>
<blockquote>
@Html.Raw(top.ReviewBody)
<footer>
@top.AuthorName on
@if (string.IsNullOrEmpty(top.URL))
{
<cite>@top.SiteName</cite>
}
else
{
<cite><a href="@top.URL" target="_blank">@top.SiteName</a></cite>
}
<span>, @reviewDate</span>
</footer>
</blockquote>
<a asp-action="Reviews" class="btn btn-outline-light">Read more reviews</a>
</section>
}
<section class="cl-discovery-chapters">
<div class="cl-discovery-section-head">
<p class="cl-kicker mb-2">Open the door</p>
<h2>Chapter previews</h2>
</div>
<div class="cl-discovery-chapter-grid">
<article>
<a asp-action="Chapter1">
<responsive-image src="beth-stood-in-bathroom.png" alt="Beth's bathroom" display-width-percentage="50"></responsive-image>
</a>
<div>
<span>Chapter 1 / Beth</span>
<h3>Drowning in Silence</h3>
<p>Beth returns home to find her mother lifeless in the bath.</p>
<a asp-action="Chapter1">Read preview</a>
</div>
</article>
<article>
<a asp-action="Chapter2">
<responsive-image src="maggie-with-her-tr6-2.png" alt="Maggie with her Triumph TR6" display-width-percentage="50"></responsive-image>
</a>
<div>
<span>Chapter 2 / Maggie</span>
<h3>The Last Lesson</h3>
<p>On Christmas Eve, Maggie heads out for her driving test, unaware of what is already moving toward her.</p>
<a asp-action="Chapter2">Read preview</a>
</div>
</article>
<article>
<a asp-action="Chapter13">
<responsive-image src="pub-from-chapter-13.png" alt="Pub from Chapter 13" display-width-percentage="50"></responsive-image>
</a>
<div>
<span>Chapter 13 / Susie</span>
<h3>A Name She Never Owned</h3>
<p>Susie goes out for a drink with a punter. What on earth could go wrong?</p>
<a asp-action="Chapter13">Read preview</a>
</div>
</article>
</div>
</section>
</div>

4
CatherineLynwood/Views/Shared/_Layout.cshtml
View File

@ -8,6 +8,10 @@
? "cl-page-guide"
: requestPath.Contains("/the-alpha-flame/blog")
? "cl-page-journal"
: requestPath.Contains("/about-catherine-lynwood")
? "cl-page-about"
: requestPath.Contains("/verostic-genre")
? "cl-page-verostic"
: requestPath == "/" || requestPath == ""
? "cl-page-home"
: "cl-page-general";

617
CatherineLynwood/wwwroot/css/calendar-house.css Normal file
View File

@ -0,0 +1,617 @@
:root {
--calendar-ink: #f3ead7;
--calendar-muted: #c7bda7;
--calendar-paper: #eadfc8;
--calendar-brass: #c79a4d;
--calendar-blood: #7e2f2a;
--calendar-moss: #51604a;
--calendar-night: #11150f;
--calendar-black: #070806;
}
* {
box-sizing: border-box;
}
.calendar-house-body {
margin: 0;
color: var(--calendar-ink);
background:
radial-gradient(circle at 15% 15%, rgba(126, 47, 42, 0.18), transparent 28rem),
linear-gradient(135deg, #10150f 0%, #171611 45%, #070806 100%);
font-family: Georgia, "Times New Roman", serif;
min-height: 100vh;
}
.calendar-house-body a {
color: inherit;
}
.calendar-house-header {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem clamp(1rem, 3vw, 2.5rem);
background: rgba(7, 8, 6, 0.88);
border-bottom: 1px solid rgba(199, 154, 77, 0.35);
backdrop-filter: blur(16px);
}
.calendar-house-brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.08rem;
font-size: 0.9rem;
}
.brand-mark {
display: inline-grid;
place-items: center;
width: 2.4rem;
height: 2.4rem;
border: 1px solid var(--calendar-brass);
color: var(--calendar-brass);
}
.calendar-house-nav {
display: flex;
align-items: center;
gap: clamp(0.7rem, 2vw, 1.4rem);
font-family: Arial, sans-serif;
font-size: 0.88rem;
}
.calendar-house-nav a {
color: var(--calendar-muted);
text-decoration: none;
}
.calendar-house-nav a:hover,
.calendar-house-nav a:focus {
color: var(--calendar-ink);
}
.calendar-hero {
position: relative;
min-height: min(860px, calc(100vh - 3.9rem));
display: grid;
align-items: end;
overflow: hidden;
border-bottom: 1px solid rgba(199, 154, 77, 0.28);
}
.calendar-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.calendar-hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(7, 8, 6, 0.9), rgba(7, 8, 6, 0.35) 52%, rgba(7, 8, 6, 0.78)),
linear-gradient(0deg, rgba(7, 8, 6, 0.96), transparent 58%);
}
.calendar-hero-content {
position: relative;
z-index: 2;
width: min(760px, 100%);
padding: clamp(7rem, 13vw, 12rem) clamp(1rem, 6vw, 5rem) clamp(7rem, 12vw, 10rem);
}
.calendar-kicker {
margin: 0 0 0.75rem;
color: var(--calendar-brass);
font-family: Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 0.16rem;
font-size: 0.78rem;
}
.calendar-hero h1,
.calendar-page-hero h1 {
margin: 0;
max-width: 12ch;
font-size: clamp(3.6rem, 12vw, 9rem);
line-height: 0.86;
font-weight: 500;
}
.calendar-hero-copy,
.calendar-page-hero p {
max-width: 42rem;
color: var(--calendar-muted);
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.6;
}
.calendar-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 2rem;
}
.calendar-button {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 3rem;
padding: 0.8rem 1rem;
background: var(--calendar-brass);
color: var(--calendar-black);
border: 1px solid var(--calendar-brass);
text-decoration: none;
font-family: Arial, sans-serif;
font-weight: 700;
}
.calendar-button:hover,
.calendar-button:focus {
color: var(--calendar-black);
background: #d8b06c;
}
.calendar-button-ghost {
color: var(--calendar-ink);
background: rgba(7, 8, 6, 0.52);
}
.calendar-button-ghost:hover,
.calendar-button-ghost:focus {
color: var(--calendar-ink);
background: rgba(81, 96, 74, 0.7);
}
.calendar-hero-numbers {
position: absolute;
right: clamp(1rem, 4vw, 3rem);
bottom: 1.25rem;
z-index: 3;
display: grid;
grid-template-columns: repeat(4, minmax(5.5rem, 1fr));
gap: 0.6rem;
width: min(620px, calc(100% - 2rem));
}
.calendar-hero-numbers span,
.calendar-house-stats div {
min-height: 5rem;
padding: 0.75rem;
background: rgba(7, 8, 6, 0.72);
border: 1px solid rgba(199, 154, 77, 0.38);
color: var(--calendar-muted);
font-family: Arial, sans-serif;
text-transform: uppercase;
font-size: 0.72rem;
}
.calendar-hero-numbers strong,
.calendar-house-stats strong {
display: block;
color: var(--calendar-ink);
font-family: Georgia, "Times New Roman", serif;
font-size: 2rem;
line-height: 1;
font-weight: 500;
}
.calendar-section,
.calendar-page-hero {
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
}
.calendar-section {
padding: clamp(3rem, 7vw, 6rem) 0;
}
.calendar-page-hero {
padding: clamp(6rem, 10vw, 9rem) 0 clamp(2.5rem, 6vw, 5rem);
}
.calendar-page-hero h1 {
max-width: 13ch;
font-size: clamp(3rem, 8vw, 7rem);
}
.calendar-intro-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
gap: clamp(2rem, 6vw, 5rem);
align-items: center;
}
.calendar-intro-grid h2,
.calendar-note h2,
.calendar-extract-card h2 {
margin: 0 0 1rem;
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1;
}
.calendar-intro-grid p,
.calendar-note p,
.pattern-grid p,
.calendar-extract-card p {
color: var(--calendar-muted);
font-size: 1.08rem;
line-height: 1.75;
}
.calendar-rule-panel,
.calendar-extract-card {
padding: clamp(1rem, 4vw, 2rem);
color: #251c12;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent),
var(--calendar-paper);
box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.42);
}
.rule-line {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(37, 28, 18, 0.24);
font-family: Arial, sans-serif;
}
.rule-line:last-child {
border-bottom: 0;
}
.rule-line span {
text-transform: uppercase;
font-size: 0.78rem;
letter-spacing: 0.08rem;
}
.rule-line b {
text-align: right;
}
.calendar-mood-board,
.pattern-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.calendar-mood-board article,
.pattern-grid article,
.calendar-note,
.plan-board {
padding: clamp(1.2rem, 3vw, 2rem);
background: rgba(7, 8, 6, 0.45);
border: 1px solid rgba(199, 154, 77, 0.25);
}
.calendar-mood-board i {
color: var(--calendar-brass);
font-size: 2rem;
}
.calendar-mood-board h3,
.pattern-grid h2 {
margin: 1rem 0 0.6rem;
font-size: 1.45rem;
}
.calendar-mood-board p {
color: var(--calendar-muted);
line-height: 1.65;
}
.calendar-blurb {
width: min(820px, calc(100% - 2rem));
text-align: center;
}
.calendar-blurb p {
margin: 0.45rem 0;
font-size: clamp(1.35rem, 3vw, 2.4rem);
line-height: 1.25;
}
.calendar-house-stats {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.75rem;
padding-top: 0;
}
.calendar-house-stats div {
text-align: center;
}
.plan-board {
padding-top: 1.4rem;
}
.plan-controls {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1.4rem;
}
.plan-filter {
min-height: 2.6rem;
padding: 0.55rem 0.85rem;
color: var(--calendar-ink);
background: rgba(7, 8, 6, 0.7);
border: 1px solid rgba(199, 154, 77, 0.32);
font-family: Arial, sans-serif;
}
.plan-filter.active {
color: var(--calendar-black);
background: var(--calendar-brass);
}
.house-diagram {
position: relative;
display: grid;
grid-template-columns: 1fr 1.3fr 1fr;
grid-template-rows: 9rem 9rem 9rem;
gap: 0.8rem;
min-height: 29rem;
margin-bottom: 1.5rem;
}
.wing,
.central-hall {
display: grid;
place-items: center;
padding: 1rem;
border: 1px solid rgba(234, 223, 200, 0.25);
background: rgba(234, 223, 200, 0.08);
color: var(--calendar-muted);
font-family: Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 0.08rem;
}
.wing-spring {
grid-column: 2;
grid-row: 1;
background: rgba(81, 96, 74, 0.32);
}
.wing-summer {
grid-column: 3;
grid-row: 2;
background: rgba(199, 154, 77, 0.2);
}
.wing-autumn {
grid-column: 1;
grid-row: 2;
background: rgba(126, 47, 42, 0.3);
}
.wing-winter {
grid-column: 2;
grid-row: 3;
background: rgba(108, 122, 128, 0.22);
transform: translateX(1.4rem);
}
.central-hall {
grid-column: 2;
grid-row: 2;
color: var(--calendar-ink);
border-color: var(--calendar-brass);
background: rgba(7, 8, 6, 0.72);
}
.chimneys,
.doors {
position: absolute;
inset: 0;
pointer-events: none;
}
.chimneys span,
.doors span {
position: absolute;
display: block;
background: var(--calendar-brass);
}
.chimneys span {
width: 0.55rem;
height: 2rem;
top: -0.4rem;
}
.chimneys span:nth-child(1) { left: 12%; }
.chimneys span:nth-child(2) { left: 19%; }
.chimneys span:nth-child(3) { left: 28%; }
.chimneys span:nth-child(4) { left: 36%; }
.chimneys span:nth-child(5) { left: 43%; }
.chimneys span:nth-child(6) { left: 51%; }
.chimneys span:nth-child(7) { left: 58%; }
.chimneys span:nth-child(8) { left: 65%; }
.chimneys span:nth-child(9) { left: 73%; }
.chimneys span:nth-child(10) { left: 81%; }
.chimneys span:nth-child(11) { left: 88%; }
.chimneys span:nth-child(12) { left: 94%; }
.doors span {
width: 1.8rem;
height: 0.38rem;
bottom: 0;
background: var(--calendar-ink);
}
.doors span:nth-child(1) { left: 9%; }
.doors span:nth-child(2) { left: 22%; }
.doors span:nth-child(3) { left: 36%; }
.doors span:nth-child(4) { left: 50%; }
.doors span:nth-child(5) { left: 63%; }
.doors span:nth-child(6) { left: 76%; }
.doors span:nth-child(7) { left: 90%; }
.room-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.6rem;
}
.room-tile {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.3rem 0.65rem;
min-height: 6.2rem;
padding: 0.75rem;
color: var(--calendar-ink);
background: rgba(17, 21, 15, 0.92);
border: 1px solid rgba(199, 154, 77, 0.22);
text-align: left;
}
.room-tile:hover,
.room-tile:focus {
border-color: var(--calendar-brass);
transform: translateY(-2px);
}
.room-tile span {
grid-row: span 2;
color: var(--calendar-brass);
font-size: 1.4rem;
}
.room-tile strong {
font-weight: 500;
}
.room-tile em {
color: var(--calendar-muted);
font-family: Arial, sans-serif;
font-size: 0.78rem;
font-style: normal;
}
.room-tile.is-hidden {
display: none;
}
.pattern-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pattern-grid article span {
color: var(--calendar-brass);
font-size: 2rem;
}
.calendar-extract-card {
width: min(820px, calc(100% - 2rem));
}
.calendar-extract-card p {
margin: 0.4rem 0;
color: #251c12;
font-size: clamp(1.2rem, 2.4vw, 2rem);
}
.calendar-house-footer {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
color: var(--calendar-muted);
border-top: 1px solid rgba(199, 154, 77, 0.28);
background: rgba(7, 8, 6, 0.72);
font-family: Arial, sans-serif;
}
.calendar-house-footer div {
display: grid;
gap: 0.2rem;
}
@media (max-width: 980px) {
.calendar-intro-grid,
.calendar-mood-board,
.pattern-grid {
grid-template-columns: 1fr;
}
.calendar-house-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.room-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.calendar-house-header,
.calendar-house-footer {
align-items: flex-start;
flex-direction: column;
}
.calendar-house-nav {
flex-wrap: wrap;
}
.calendar-hero {
min-height: 760px;
}
.calendar-hero-content {
padding-top: 5rem;
padding-bottom: 12rem;
}
.calendar-hero-numbers {
grid-template-columns: repeat(2, minmax(0, 1fr));
left: 1rem;
right: 1rem;
width: auto;
}
.calendar-house-stats,
.room-grid {
grid-template-columns: 1fr;
}
.house-diagram {
grid-template-columns: 1fr;
grid-template-rows: repeat(5, 6.5rem);
min-height: auto;
}
.wing-spring,
.wing-summer,
.wing-autumn,
.wing-winter,
.central-hall {
grid-column: 1;
transform: none;
}
.wing-spring { grid-row: 1; }
.wing-summer { grid-row: 2; }
.central-hall { grid-row: 3; }
.wing-autumn { grid-row: 4; }
.wing-winter { grid-row: 5; }
}

907
CatherineLynwood/wwwroot/css/site.css
View File

@ -853,3 +853,910 @@ body.cl-site-shell {
border-left: 3px solid var(--cl-tea);
}
/* Experimental Discovery showcase */
.cl-footer {
position: relative;
z-index: 2;
}
.cl-page-home .static-background {
background-image:
linear-gradient(90deg, rgba(14, 12, 11, 0.84), rgba(32, 24, 23, 0.58) 52%, rgba(14, 12, 11, 0.88)),
linear-gradient(0deg, rgba(14, 12, 11, 0.91), rgba(14, 12, 11, 0.34) 48%, rgba(14, 12, 11, 0.68)),
url('/images/webp/1983-birmingham-1920.webp');
filter: saturate(0.7) contrast(1.06) brightness(0.94);
}
.cl-discovery-wow {
--discovery-black: #070707;
--discovery-ink: #11100f;
--discovery-card: rgba(17, 14, 13, 0.78);
--discovery-glass: rgba(243, 235, 221, 0.08);
--discovery-line: rgba(200, 169, 130, 0.26);
--discovery-fire: #b74d37;
--discovery-teal: #5f8f8a;
--discovery-gold: #d4b47d;
--discovery-paper: #f5ecdd;
position: relative;
color: var(--discovery-paper);
}
.cl-page-discovery .scroll-hint {
display: none !important;
}
.cl-discovery-wow::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 12% 18%, rgba(183, 77, 55, 0.28), transparent 21rem),
radial-gradient(circle at 88% 16%, rgba(95, 143, 138, 0.22), transparent 26rem),
linear-gradient(180deg, rgba(7, 7, 7, 0), rgba(7, 7, 7, 0.88));
}
.cl-discovery-breadcrumb {
margin-bottom: clamp(1.2rem, 3vw, 2.2rem);
}
.cl-discovery-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(21rem, 0.86fr);
gap: clamp(1.5rem, 5vw, 5rem);
align-items: center;
min-height: min(48rem, calc(100vh - 8.5rem));
padding: clamp(1.25rem, 4vw, 4rem);
overflow: hidden;
background:
linear-gradient(135deg, rgba(10, 9, 9, 0.74), rgba(10, 9, 9, 0.9)),
url('/images/webp/rubery-hill-hospital-1920.webp') center / cover;
border: 1px solid rgba(212, 180, 125, 0.28);
box-shadow: 0 2.8rem 7rem rgba(0, 0, 0, 0.54);
}
.cl-discovery-hero::before,
.cl-discovery-hero::after {
content: "";
position: absolute;
pointer-events: none;
}
.cl-discovery-hero::before {
inset: 0;
background:
linear-gradient(90deg, rgba(75, 36, 58, 0.48), transparent 36%),
linear-gradient(135deg, transparent 0 58%, rgba(183, 77, 55, 0.24) 58% 59%, transparent 59%),
repeating-linear-gradient(90deg, rgba(245, 236, 221, 0.1) 0 1px, transparent 1px 4px);
mix-blend-mode: screen;
opacity: 0.32;
}
.cl-discovery-hero::after {
right: -12%;
bottom: -20%;
width: min(48vw, 40rem);
aspect-ratio: 1;
border: 1px solid rgba(212, 180, 125, 0.18);
border-radius: 50%;
box-shadow: inset 0 0 0 4rem rgba(95, 143, 138, 0.07), 0 0 5rem rgba(183, 77, 55, 0.16);
}
.cl-discovery-hero__copy,
.cl-discovery-hero__art {
position: relative;
z-index: 1;
}
.cl-discovery-hero h1 {
margin: 0;
color: var(--discovery-paper);
font-family: var(--cl-heading-font);
font-size: clamp(4rem, 10vw, 8.6rem);
font-weight: 500;
line-height: 0.84;
}
.cl-discovery-hero__series {
margin: 0.8rem 0 1.2rem;
color: var(--discovery-gold);
font-family: var(--cl-heading-font);
font-size: clamp(1.45rem, 3vw, 2.4rem);
}
.cl-discovery-hero__lead {
max-width: 48rem;
color: rgba(245, 236, 221, 0.96);
font-family: var(--cl-heading-font);
font-size: clamp(1.35rem, 2.5vw, 2.15rem);
line-height: 1.18;
}
.cl-discovery-hero__truth {
max-width: 42rem;
padding-left: 1rem;
color: rgba(245, 236, 221, 0.78);
border-left: 3px solid var(--discovery-fire);
}
.cl-discovery-actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 1.6rem;
}
.cl-discovery-actions .btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.cl-discovery-cover-stack {
position: relative;
display: grid;
justify-items: center;
padding: clamp(0.75rem, 2vw, 1.25rem);
}
.cl-discovery-cover-stack::before {
content: "";
position: absolute;
inset: 9% 1% 5% 18%;
background:
linear-gradient(135deg, rgba(95, 143, 138, 0.28), rgba(183, 77, 55, 0.2)),
url('/images/webp/the-alpha-flame-discovery-open-on-the-table-beth-1200.webp') center / cover;
border: 1px solid rgba(212, 180, 125, 0.22);
filter: saturate(0.64) brightness(0.7);
transform: rotate(3deg);
}
.cl-discovery-cover {
position: relative;
width: min(82%, 25rem);
border: 1px solid rgba(245, 236, 221, 0.32);
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.55);
filter: saturate(0.88) contrast(1.04);
transform: rotate(-2deg);
}
.cl-discovery-trailer-card {
position: absolute;
right: 0;
bottom: 7%;
display: block;
width: min(54%, 19rem);
overflow: hidden;
color: var(--discovery-paper);
text-decoration: none;
border: 1px solid rgba(245, 236, 221, 0.32);
box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.48);
transform: rotate(2deg);
}
.cl-discovery-trailer-card__image {
display: block;
width: 100%;
filter: saturate(0.72) contrast(1.05) brightness(0.78);
}
.cl-discovery-trailer-card span {
position: absolute;
left: 0.8rem;
bottom: 0.8rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.62rem;
color: var(--discovery-paper);
background: rgba(75, 36, 58, 0.88);
border: 1px solid rgba(245, 236, 221, 0.2);
font-weight: 750;
}
.cl-discovery-proof-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: clamp(1rem, 3vw, 1.75rem) 0 clamp(2rem, 5vw, 4rem);
border-top: 1px solid var(--discovery-line);
border-bottom: 1px solid var(--discovery-line);
background: rgba(7, 7, 7, 0.42);
backdrop-filter: blur(8px);
}
.cl-discovery-proof-strip div {
padding: 1rem;
border-right: 1px solid var(--discovery-line);
}
.cl-discovery-proof-strip div:last-child {
border-right: 0;
}
.cl-discovery-proof-strip span,
.cl-discovery-chapter-grid span {
display: block;
color: var(--discovery-gold);
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
}
.cl-discovery-proof-strip strong {
display: block;
margin-top: 0.2rem;
color: var(--discovery-paper);
font-family: var(--cl-heading-font);
font-size: clamp(1rem, 1.7vw, 1.4rem);
font-weight: 500;
}
.cl-discovery-buy-shell,
.cl-discovery-story,
.cl-discovery-audio,
.cl-discovery-review {
margin-bottom: clamp(2rem, 5vw, 4rem);
}
.cl-discovery-buy-shell {
display: grid;
grid-template-columns: minmax(16rem, 0.52fr) minmax(0, 1fr);
gap: clamp(1rem, 3vw, 2rem);
align-items: stretch;
}
.cl-discovery-buy-intro,
.cl-discovery-buy-panel,
.cl-discovery-audio,
.cl-discovery-review {
background:
linear-gradient(135deg, rgba(245, 236, 221, 0.11), rgba(245, 236, 221, 0.02)),
rgba(7, 7, 7, 0.68);
border: 1px solid var(--discovery-line);
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.34);
backdrop-filter: blur(12px);
}
.cl-discovery-buy-intro {
padding: clamp(1.2rem, 3vw, 2.2rem);
}
.cl-discovery-buy-intro h2,
.cl-discovery-story h2,
.cl-discovery-audio h2,
.cl-discovery-section-head h2 {
color: var(--discovery-paper);
font-size: clamp(2rem, 4vw, 4rem);
line-height: 0.95;
}
.cl-discovery-buy-intro p,
.cl-discovery-story p,
.cl-discovery-audio p {
color: rgba(245, 236, 221, 0.78);
}
.cl-discovery-buy-panel {
padding: clamp(0.8rem, 2vw, 1.4rem);
}
.cl-discovery-buy-panel #buyBox {
margin: 0;
background:
linear-gradient(135deg, rgba(245, 236, 221, 0.96), rgba(229, 213, 189, 0.92)) !important;
}
.cl-discovery-buy-panel #buyBox,
.cl-discovery-buy-panel #buyBox p,
.cl-discovery-buy-panel #buyBox li,
.cl-discovery-buy-panel #buyBox span {
color: var(--cl-ink);
}
.cl-discovery-buy-panel #buyBox h1,
.cl-discovery-buy-panel #buyBox h2,
.cl-discovery-buy-panel #buyBox h3,
.cl-discovery-buy-panel #buyBox h4,
.cl-discovery-buy-panel #buyBox h5,
.cl-discovery-buy-panel #buyBox h6 {
color: var(--cl-ink) !important;
}
.cl-discovery-buy-panel #buyBox .btn,
.cl-discovery-buy-panel #buyBox .btn span,
.cl-discovery-buy-panel #buyBox .btn i {
color: var(--cl-paper) !important;
}
.cl-discovery-buy-panel #buyBox .price-chip,
.cl-discovery-buy-panel #buyBox .price-chip span {
color: var(--cl-ink) !important;
}
.cl-discovery-story {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.72fr);
gap: clamp(1.2rem, 4vw, 3.5rem);
align-items: end;
}
.cl-discovery-story__image {
position: relative;
overflow: hidden;
min-height: 23rem;
border: 1px solid var(--discovery-line);
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.44);
}
.cl-discovery-story__image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(7, 7, 7, 0.7), transparent 48%),
linear-gradient(0deg, rgba(7, 7, 7, 0.72), transparent 42%);
}
.cl-discovery-story__image img,
.cl-discovery-story__image picture,
.cl-discovery-story__image responsive-image {
width: 100%;
}
.cl-discovery-story__copy {
padding: clamp(1.2rem, 3vw, 2.5rem) 0;
}
.cl-discovery-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin-bottom: clamp(2rem, 5vw, 4rem);
background: var(--discovery-line);
}
.cl-discovery-tiles article {
padding: clamp(1.2rem, 3vw, 2rem);
background:
linear-gradient(160deg, rgba(75, 36, 58, 0.24), rgba(7, 7, 7, 0.86)),
rgba(7, 7, 7, 0.78);
}
.cl-discovery-tiles span {
color: rgba(212, 180, 125, 0.54);
font-family: var(--cl-heading-font);
font-size: clamp(2.4rem, 5vw, 4.8rem);
line-height: 1;
}
.cl-discovery-tiles h3,
.cl-discovery-chapter-grid h3 {
color: var(--discovery-paper);
}
.cl-discovery-tiles p,
.cl-discovery-review blockquote,
.cl-discovery-chapter-grid p {
color: rgba(245, 236, 221, 0.76);
}
.cl-discovery-audio {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: clamp(1.25rem, 3vw, 2.3rem);
border-left: 5px solid var(--discovery-fire);
}
.cl-discovery-audio h2 {
max-width: 46rem;
}
.cl-discovery-audio p {
max-width: 54rem;
margin-bottom: 0;
}
.cl-discovery-review {
display: grid;
grid-template-columns: 8rem minmax(0, 1fr) auto;
gap: clamp(1rem, 3vw, 2rem);
align-items: center;
padding: clamp(1.25rem, 3vw, 2.3rem);
}
.cl-discovery-review__stars {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.18rem;
color: var(--discovery-gold);
}
.cl-discovery-review blockquote {
margin: 0;
border-left: 0;
font-family: var(--cl-heading-font);
font-size: clamp(1.1rem, 2vw, 1.45rem);
}
.cl-discovery-review footer {
margin-top: 0.8rem;
color: rgba(245, 236, 221, 0.62);
font-family: var(--cl-body-font);
font-size: 0.95rem;
}
.cl-discovery-chapters {
margin-bottom: clamp(2rem, 5vw, 4rem);
}
.cl-discovery-section-head {
margin-bottom: 1rem;
}
.cl-discovery-chapter-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2vw, 1.4rem);
}
.cl-discovery-chapter-grid article {
overflow: hidden;
background: rgba(7, 7, 7, 0.72);
border: 1px solid var(--discovery-line);
box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.28);
}
.cl-discovery-chapter-grid img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
filter: saturate(0.75) contrast(1.08) brightness(0.86);
}
.cl-discovery-chapter-grid article > div {
padding: 1.1rem;
}
.cl-discovery-chapter-grid a:not(.btn) {
color: var(--discovery-gold);
font-weight: 750;
}
/* Rich reader warmth pass */
:root {
--cl-chocolate: #150d0d;
--cl-chocolate-soft: #241615;
--cl-wine: #5c203f;
--cl-wine-deep: #351324;
--cl-plum: #2a1626;
--cl-merlot: #7b2943;
--cl-candle: #f0d0a0;
--cl-ganache: #c99a73;
--cl-velvet-paper: #ead8bd;
--cl-cream-shadow: #d6b98f;
}
.cl-site-shell {
background:
radial-gradient(circle at 18% 8%, rgba(123, 41, 67, 0.34), transparent 26rem),
radial-gradient(circle at 82% 12%, rgba(201, 154, 115, 0.18), transparent 24rem),
linear-gradient(135deg, var(--cl-chocolate-soft), var(--cl-chocolate) 48%, #070404) !important;
}
.cl-site-shell .static-background::before {
background:
radial-gradient(circle at 18% 14%, rgba(123, 41, 67, 0.4), transparent 25rem),
radial-gradient(circle at 78% 18%, rgba(201, 154, 115, 0.22), transparent 26rem),
linear-gradient(90deg, rgba(74, 24, 39, 0.18), transparent 45%, rgba(42, 18, 10, 0.3));
}
.cl-page-about .static-background,
.cl-page-verostic .static-background {
background-image:
linear-gradient(90deg, rgba(20, 10, 10, 0.88), rgba(60, 29, 35, 0.58) 52%, rgba(20, 10, 10, 0.9)),
linear-gradient(0deg, rgba(20, 10, 10, 0.94), rgba(20, 10, 10, 0.34) 48%, rgba(20, 10, 10, 0.68)),
url('/images/webp/beth-and-maggie-rubery-hill-1920.webp');
filter: saturate(0.74) contrast(1.08) brightness(0.82);
}
.cl-page-journal .static-background,
.cl-page-guide .static-background {
filter: saturate(0.74) contrast(1.08) brightness(0.86);
}
.cl-page-discovery .static-background {
filter: saturate(0.5) contrast(1.14) brightness(0.8);
}
.cl-navbar {
min-height: 4.35rem;
background:
linear-gradient(90deg, rgba(20, 10, 10, 0.98), rgba(58, 24, 39, 0.94) 45%, rgba(20, 10, 10, 0.98)) !important;
border-bottom: 1px solid rgba(240, 208, 160, 0.5) !important;
box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.42), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.cl-navbar::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 8% 0%, rgba(240, 208, 160, 0.16), transparent 14rem),
linear-gradient(90deg, transparent, rgba(240, 208, 160, 0.08), transparent);
}
.cl-navbar .container-fluid {
position: relative;
z-index: 1;
}
.cl-navbar .navbar-brand {
padding: 0.3rem 0.65rem 0.3rem 0;
}
.cl-navbar .navbar-brand img {
height: 50px !important;
width: 294px !important;
filter: sepia(0.24) saturate(0.95) brightness(1.12) drop-shadow(0 0.25rem 0.8rem rgba(240, 208, 160, 0.18));
}
.cl-navbar .nav-link {
position: relative;
margin-inline: 0.08rem;
padding: 0.78rem 0.72rem !important;
color: rgba(240, 208, 160, 0.82) !important;
font-size: 0.9rem;
border-radius: 999px;
transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.cl-navbar .nav-link::after {
content: "";
position: absolute;
left: 0.8rem;
right: 0.8rem;
bottom: 0.38rem;
height: 1px;
background: linear-gradient(90deg, transparent, var(--cl-candle), transparent);
opacity: 0;
transform: scaleX(0.4);
transition: opacity 180ms ease, transform 180ms ease;
}
.cl-navbar .nav-link:hover,
.cl-navbar .nav-link:focus,
.cl-navbar .nav-link.show {
color: #fff3df !important;
background: rgba(240, 208, 160, 0.08);
transform: translateY(-1px);
}
.cl-navbar .nav-link:hover::after,
.cl-navbar .nav-link:focus::after,
.cl-navbar .nav-link.show::after {
opacity: 0.9;
transform: scaleX(1);
}
.cl-navbar .dropdown-menu {
padding: 0.45rem;
background:
linear-gradient(145deg, rgba(46, 20, 27, 0.98), rgba(20, 10, 10, 0.98));
border-color: rgba(240, 208, 160, 0.34);
box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.48);
}
.cl-navbar .dropdown-item {
color: rgba(240, 208, 160, 0.88);
border-radius: 3px;
}
.cl-navbar .dropdown-item:hover,
.cl-navbar .dropdown-item:focus {
color: #fff3df;
background: rgba(123, 41, 67, 0.86);
}
.cl-site-shell .card,
.cl-site-shell .character-card,
.cl-site-shell .accordion-item,
.cl-site-shell form.bg-white,
.cl-site-shell .modal-content,
.cl-site-shell .alert,
.cl-site-shell .bg-white,
.cl-site-shell .bg-light {
color: #f7ead5 !important;
background:
linear-gradient(145deg, rgba(255, 233, 197, 0.13), rgba(79, 28, 42, 0.1)),
linear-gradient(180deg, rgba(43, 24, 18, 0.92), rgba(25, 13, 12, 0.92)) !important;
border-color: rgba(240, 208, 160, 0.28) !important;
box-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cl-site-shell .card-header,
.cl-site-shell .accordion-button {
color: #fff0d9 !important;
background:
linear-gradient(90deg, rgba(92, 32, 63, 0.72), rgba(36, 22, 16, 0.72)) !important;
border-bottom-color: rgba(240, 208, 160, 0.2);
}
.cl-site-shell .card h1,
.cl-site-shell .card h2,
.cl-site-shell .card h3,
.cl-site-shell .card h4,
.cl-site-shell .card h5,
.cl-site-shell .card h6,
.cl-site-shell .accordion-item h2,
.cl-site-shell .modal-content h5,
.cl-site-shell .bg-white h1,
.cl-site-shell .bg-white h2,
.cl-site-shell .bg-white h3,
.cl-site-shell .bg-light h1,
.cl-site-shell .bg-light h2,
.cl-site-shell .bg-light h3 {
color: #fff0d9 !important;
}
.cl-site-shell .card p,
.cl-site-shell .card li,
.cl-site-shell .card dd,
.cl-site-shell .card dt,
.cl-site-shell .bg-white p,
.cl-site-shell .bg-white li,
.cl-site-shell .bg-light p,
.cl-site-shell .bg-light li {
color: rgba(247, 234, 213, 0.82);
}
.cl-site-shell .text-black,
.cl-site-shell .text-dark,
.cl-site-shell .link-dark,
.cl-site-shell a.link-dark,
.cl-site-shell .card a:not(.btn),
.cl-site-shell .accordion-item a:not(.btn),
.cl-site-shell .modal-content a:not(.btn),
.cl-site-shell .bg-white a:not(.btn),
.cl-site-shell .bg-light a:not(.btn) {
color: var(--cl-candle) !important;
}
.cl-site-shell .text-muted,
.cl-site-shell .card .text-muted,
.cl-site-shell .accordion-item .text-muted,
.cl-site-shell .modal-content .text-muted,
.cl-site-shell .bg-white .text-muted,
.cl-site-shell .bg-light .text-muted {
color: rgba(234, 216, 189, 0.68) !important;
}
.cl-site-shell .card-img,
.cl-site-shell .card-img-top,
.cl-site-shell .img-fluid,
.cl-site-shell .fit-image {
filter: saturate(0.86) contrast(1.06) brightness(0.94);
}
.cl-site-shell .btn-dark,
.cl-site-shell .btn-primary {
color: #fff0d9 !important;
background:
linear-gradient(135deg, var(--cl-merlot), var(--cl-wine-deep)) !important;
border-color: rgba(240, 208, 160, 0.3) !important;
}
.cl-site-shell .btn-dark:hover,
.cl-site-shell .btn-dark:focus,
.cl-site-shell .btn-primary:hover,
.cl-site-shell .btn-primary:focus {
color: #fff7ec !important;
background:
linear-gradient(135deg, #8d314c, #52223b) !important;
border-color: rgba(240, 208, 160, 0.52) !important;
}
.cl-site-shell .btn-outline-dark,
.cl-site-shell .btn-outline-secondary,
.cl-site-shell .btn-outline-light {
color: var(--cl-candle) !important;
border-color: rgba(240, 208, 160, 0.48) !important;
}
.cl-site-shell .btn-outline-dark:hover,
.cl-site-shell .btn-outline-dark:focus,
.cl-site-shell .btn-outline-secondary:hover,
.cl-site-shell .btn-outline-secondary:focus,
.cl-site-shell .btn-outline-light:hover,
.cl-site-shell .btn-outline-light:focus {
color: #fff3df !important;
background: rgba(92, 32, 63, 0.86) !important;
}
.cl-site-shell .badge.bg-dark,
.cl-site-shell .badge.text-bg-secondary,
.cl-site-shell .badge.text-bg-dark {
color: #fff0d9 !important;
background: rgba(92, 32, 63, 0.82) !important;
border: 1px solid rgba(240, 208, 160, 0.26);
}
.cl-site-shell audio {
filter: sepia(0.16) saturate(0.82);
}
.cl-site-shell .plyr--audio .plyr__controls {
background:
linear-gradient(135deg, rgba(255, 243, 223, 0.96), rgba(229, 202, 162, 0.9)) !important;
border-color: rgba(92, 32, 63, 0.45) !important;
}
.cl-site-shell .form-control,
.cl-site-shell .form-select {
color: #2a1812;
background-color: #f4e6d0;
border-color: rgba(124, 88, 61, 0.42);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.cl-site-shell blockquote,
.cl-site-shell .blockquote {
color: #f7ead5;
border-left-color: rgba(190, 74, 100, 0.86);
}
.cl-site-shell blockquote p,
.cl-site-shell .blockquote p {
color: #f7ead5;
opacity: 0.94;
}
.cl-journal-filter,
.cl-feature-card,
.cl-page-discovery .card,
.cl-page-discovery .alert,
.cl-page-guide .card,
.cl-page-journal .card,
.cl-page-verostic .accordion-item,
.cl-page-about section {
backdrop-filter: blur(10px);
}
.cl-page-about section,
.cl-page-verostic section > .mb-4,
.cl-page-verostic section > .mb-5 {
padding: clamp(1rem, 2vw, 1.5rem);
background:
linear-gradient(145deg, rgba(255, 233, 197, 0.11), rgba(79, 28, 42, 0.08)),
rgba(21, 13, 13, 0.68);
border: 1px solid rgba(240, 208, 160, 0.22);
box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.28);
}
.cl-discovery-buy-panel #buyBox {
background:
linear-gradient(145deg, rgba(83, 47, 34, 0.94), rgba(43, 22, 19, 0.96)),
linear-gradient(180deg, rgba(255, 230, 191, 0.1), rgba(92, 32, 63, 0.08)) !important;
border-color: rgba(240, 208, 160, 0.36) !important;
box-shadow: 0 1.6rem 3.8rem rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.cl-discovery-buy-panel #buyBox,
.cl-discovery-buy-panel #buyBox p,
.cl-discovery-buy-panel #buyBox li,
.cl-discovery-buy-panel #buyBox span,
.cl-discovery-buy-panel #buyBox h1,
.cl-discovery-buy-panel #buyBox h2,
.cl-discovery-buy-panel #buyBox h3,
.cl-discovery-buy-panel #buyBox h4,
.cl-discovery-buy-panel #buyBox h5,
.cl-discovery-buy-panel #buyBox h6,
#buyBox,
#buyBox p,
#buyBox li,
#buyBox span,
#buyBox h1,
#buyBox h2,
#buyBox h3,
#buyBox h4,
#buyBox h5,
#buyBox h6 {
color: #fff0d9 !important;
}
#buyBox .btn,
#buyBox .btn span,
#buyBox .btn i {
color: #fff0d9 !important;
}
#buyBox .price-chip,
#buyBox .price-chip span {
color: #2a1812 !important;
background: #d9b979 !important;
border-color: rgba(255, 243, 223, 0.44) !important;
}
.cl-footer {
background:
linear-gradient(180deg, rgba(20, 10, 10, 0.98), rgba(10, 5, 5, 0.98)) !important;
border-top-color: rgba(240, 208, 160, 0.36) !important;
}
@media (max-width: 991.98px) {
.cl-discovery-hero,
.cl-discovery-buy-shell,
.cl-discovery-story,
.cl-discovery-review {
grid-template-columns: 1fr;
}
.cl-discovery-hero {
min-height: 0;
}
.cl-discovery-cover-stack {
max-width: 34rem;
margin-inline: auto;
}
.cl-discovery-review {
align-items: start;
}
}
@media (max-width: 767.98px) {
.cl-discovery-hero {
padding: 1rem;
}
.cl-discovery-hero h1 {
font-size: clamp(3.5rem, 17vw, 4.9rem);
line-height: 0.92;
}
.cl-discovery-hero__series {
font-size: clamp(1.15rem, 6vw, 1.55rem);
line-height: 1.16;
}
.cl-discovery-hero__lead {
font-size: clamp(1.15rem, 6vw, 1.55rem);
line-height: 1.26;
}
.cl-discovery-proof-strip,
.cl-discovery-tiles,
.cl-discovery-chapter-grid {
grid-template-columns: 1fr;
}
.cl-discovery-proof-strip div {
border-right: 0;
border-bottom: 1px solid var(--discovery-line);
}
.cl-discovery-proof-strip div:last-child {
border-bottom: 0;
}
.cl-discovery-audio {
display: block;
}
.cl-discovery-audio .btn {
margin-top: 1rem;
width: 100%;
}
.cl-discovery-trailer-card {
right: 0.35rem;
bottom: 3%;
width: 58%;
}
}

2
CatherineLynwood/wwwroot/css/site.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
CatherineLynwood/wwwroot/images/calendar-house-hero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

22
CatherineLynwood/wwwroot/js/calendar-house.js Normal file
View File

@ -0,0 +1,22 @@
(function () {
const filters = document.querySelectorAll(".plan-filter");
const rooms = document.querySelectorAll(".room-tile");
if (!filters.length || !rooms.length) {
return;
}
filters.forEach((filter) => {
filter.addEventListener("click", () => {
const selectedFloor = filter.dataset.floor;
filters.forEach((item) => item.classList.remove("active"));
filter.classList.add("active");
rooms.forEach((room) => {
const shouldShow = selectedFloor === "All" || room.dataset.floor === selectedFloor;
room.classList.toggle("is-hidden", !shouldShow);
});
});
});
})();