/*
File: assets/css/theme.css
Purpose: Theme layer over Bootstrap 5 for the "Panorama" template — a
full-viewport horizontal reel (Bootstrap Carousel) of photo panels,
each panel self-describing the reel template itself, with a pill
nav bar, circular prev/next controls, a floating theme-picker bar
that stays reachable even where the pill nav hides below md, and a
boxed contact form. Loads after bootstrap.min.css + panorama-fonts.css.
Used by: index.html
*/
/* Palette + metrics */
:root {
--accent: #42aec5;
--accent-rgb: 66, 174, 197;
--ink: #2b2b2b;
--ink-rgb: 43, 43, 43;
--paper: #ffffff;
--navbar-height: 3.25rem;
}
/* In-page theme preview: the theme-picker-bar swatches set data-theme on
so all seven palettes can be compared without opening another
build. Cyan is the default (:root above); the other three real builds
(green/purple/red) mirror their own theme.css :root values exactly —
amber/indigo/rose are invented in the same family to round out seven. */
:root[data-theme="green"] { --accent: #3bbd90; --accent-rgb: 59, 189, 144; }
:root[data-theme="purple"] { --accent: #885db0; --accent-rgb: 136, 93, 176; }
:root[data-theme="red"] { --accent: #cb565a; --accent-rgb: 203, 86, 90; }
:root[data-theme="amber"] { --accent: #c98a3f; --accent-rgb: 201, 138, 63; }
:root[data-theme="indigo"] { --accent: #5b74c4; --accent-rgb: 91, 116, 196; }
:root[data-theme="rose"] { --accent: #c15f82; --accent-rgb: 193, 95, 130; }
/* Base typography */
html, body {
height: 100%;
}
/* The reel owns its own scrolling; the page itself never scrolls. */
body {
margin: 0;
overflow: hidden;
background: var(--ink);
color: #ffffff;
font-family: 'Open Sans', Helvetica, sans-serif;
font-weight: 400;
font-size: 1.15rem;
line-height: 1.65;
letter-spacing: 0.01em;
}
@media (max-width: 1680px) {
body { font-size: 1rem; }
}
@media (max-width: 359.98px) {
body { font-size: 0.9rem; }
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Bitter', serif;
font-weight: 700;
line-height: 1.4;
margin: 0 0 0.6em;
}
h1 {
font-family: 'Pacifico', cursive;
font-weight: 400;
font-size: 3rem;
margin-bottom: 0.3em;
}
h2 {
font-size: 1.85rem;
}
@media (max-width: 767.98px) {
h1 { font-size: 2.25rem; }
h2 { font-size: 1.4rem; }
/* Original drops manual
line-breaks once the layout is already
narrow enough to wrap headings naturally. */
h1 br, h2 br { display: none; }
}
a {
color: inherit;
}
/* Navbar (pill nav bar; hidden below md like the original — mobile relies on
the reel's prev/next controls, swipe, and keyboard) */
.site-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--navbar-height);
background: var(--accent);
z-index: 1030;
}
.site-nav-list {
width: 100%;
justify-content: center;
}
.site-nav-list .nav-link {
height: var(--navbar-height);
display: flex;
align-items: center;
padding: 0 1.5em;
border-radius: 0.25rem;
margin: 0 0.2em;
font-family: 'Bitter', serif;
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #ffffff;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.site-nav-list .nav-link:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.site-nav-list .nav-link:active {
background-color: rgba(255, 255, 255, 0.3);
}
.site-nav-list .nav-link.active {
background-color: #ffffff;
color: var(--accent);
}
/* Theme-picker bar (floating, independent of .site-navbar so it never
inherits the nav's d-none-below-md hiding — the one control that must stay
reachable at every viewport width). Sits over the navbar's right edge from
md up ("beside the pill nav"); floats top-right over the panel photo below
md, with its own translucent backdrop since it can land on any photo. */
.theme-picker-bar {
position: fixed;
top: 0.6em;
right: 0.75em;
z-index: 1040;
display: flex;
align-items: center;
padding: 0.35em 0.6em;
background-color: rgba(0, 0, 0, 0.35);
border-radius: 999px;
}
@media (min-width: 768px) {
.theme-picker-bar {
top: 0;
right: 1.5em;
height: var(--navbar-height);
padding: 0 0.25em;
background-color: transparent;
border-radius: 0;
}
}
.theme-picker {
display: flex;
align-items: center;
gap: 0.5em;
margin: 0;
padding: 0;
list-style: none;
}
.theme-picker .theme-swatch {
width: 1.15em;
height: 1.15em;
padding: 0;
border: solid 2px rgba(255, 255, 255, 0.4);
border-radius: 50%;
cursor: pointer;
transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.theme-picker .theme-swatch:hover,
.theme-picker .theme-swatch:focus {
border-color: rgba(255, 255, 255, 0.85);
}
.theme-picker .theme-swatch.is-active {
border-color: #ffffff;
transform: scale(1.2);
}
/* Each swatch's fill is a static hex, not var(--accent) — all seven
need to stay visible regardless of which theme is applied. */
.theme-swatch[data-theme-choice="cyan"] { background-color: #42aec5; }
.theme-swatch[data-theme-choice="green"] { background-color: #3bbd90; }
.theme-swatch[data-theme-choice="purple"] { background-color: #885db0; }
.theme-swatch[data-theme-choice="red"] { background-color: #cb565a; }
.theme-swatch[data-theme-choice="amber"] { background-color: #c98a3f; }
.theme-swatch[data-theme-choice="indigo"] { background-color: #5b74c4; }
.theme-swatch[data-theme-choice="rose"] { background-color: #c15f82; }
/* Reel (Bootstrap Carousel: skel's horizontal "reel" replaced 1:1 — Carousel
already IS a horizontal slide deck with prev/next + active-state tracking) */
.reel-carousel {
position: fixed;
top: var(--navbar-height);
left: 0;
width: 100%;
height: calc(100dvh - var(--navbar-height));
}
@media (max-width: 767.98px) {
.reel-carousel {
top: 0;
height: 100dvh;
}
}
.reel-carousel,
.reel-carousel .carousel-inner {
height: 100%;
}
.reel-panel {
position: relative;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Fixed backgrounds jank on touch devices — fall back to scroll */
@media (hover: none), (max-width: 767.98px) {
.reel-panel {
background-attachment: scroll;
}
}
/* Dark scrim the original laid over every photo panel at 50% — bumped to
65% for the real sunrise-to-sunset photo arc below, whose skies and
grass run brighter than the original's muted stock imagery. */
.reel-panel::before {
content: '';
position: absolute;
inset: 0;
background: var(--ink);
opacity: 0.65;
}
/* The blossom photo's dense white-on-teal clusters still read brighter
than even the raised scrim clears for white text — pushed further for
this panel alone. */
.reel-panel-three::before {
opacity: 0.78;
}
.reel-panel-intro { background-image: url("../../images/panel-01.jpg"); background-position: center center; }
.reel-panel-one { background-image: url("../../images/panel-02.jpg"); background-position: center center; }
.reel-panel-two { background-image: url("../../images/panel-03.jpg"); background-position: left center; }
.reel-panel-three { background-image: url("../../images/panel-04.jpg"); background-position: center center; }
.reel-panel-contact { background-image: url("../../images/panel-05.jpg"); background-position: center center; }
.reel-panel-frame {
position: relative;
z-index: 2;
display: flex;
align-items: center;
height: 100%;
padding: 2.375em 4em 2em;
overflow-y: auto;
}
.reel-inner {
width: 40em;
max-width: 100%;
opacity: 0;
}
/* A flat scrim alone can't clear busy local detail directly behind a
letter — a bright cloud edge, a dense cluster of white blossoms — so
panel text also carries a layered dark halo: two tight, near-solid
passes hug the glyph edges (where a soft blur alone leaves no real
contrast), a wider pass darkens the immediate surroundings, and a
dropped pass reads as depth. This is what actually guarantees
legibility independent of which of the five photos is underneath. */
.reel-panel .reel-inner h1,
.reel-panel .reel-inner h2,
.reel-panel .reel-inner p {
text-shadow:
0 0 2px rgba(0, 0, 0, 0.95),
0 0 5px rgba(0, 0, 0, 0.9),
0 0 14px rgba(0, 0, 0, 0.75),
0 2px 4px rgba(0, 0, 0, 0.9);
}
.reel-inner-hero {
width: 50em;
}
/* Content fades/lifts in once the carousel marks this panel .active —
the same trigger the original used, just keyed off Bootstrap's own
active-slide class instead of a custom switchTo() callback. */
.carousel-item.active .reel-inner {
opacity: 1;
}
/* Inline spans name one of the panel's own CSS classes or data
attributes — Bootstrap's default pink code color would clash against
white-on-photo type, so it reads as a plain translucent chip instead. */
.reel-inner code {
padding: 0.15em 0.4em;
border-radius: 0.25rem;
background-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
font-size: 0.85em;
}
@media (max-width: 980px) {
.reel-inner-hero {
width: 40em;
}
}
@media (max-width: 767.98px) {
.reel-panel-frame {
padding: 3.5em 2.5em 1.5em;
}
}
@media (max-width: 480px) {
.reel-panel-frame {
padding: 2.5em 1.5em 0.5em;
}
}
/* Reveal transition (gated behind no-preference so headless/reduced-motion
captures still show final-state content immediately) */
@media (prefers-reduced-motion: no-preference) {
.reel-inner {
transition: opacity 1s ease, transform 1s ease;
}
.reel-content-box {
transition: opacity 1s ease 0.75s, transform 1s ease 0.75s;
}
}
/* Contact content box (boxed, paper-colored — only the contact panel uses this) */
.reel-content-box {
background: var(--paper);
color: var(--ink);
padding: 2em;
border-radius: 0.25rem;
margin-bottom: 1.5em;
transform: translateY(1.5em);
opacity: 0;
}
.carousel-item.active .reel-content-box {
opacity: 1;
transform: translateY(0);
}
.reel-content-box .form-control {
color: var(--ink);
}
.reel-content-box .form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25);
}
/* The boxed content area is paper-colored — a white-bordered/white-text
.reel-btn (right at home on the dark photo panels) would be invisible
here, so it gets the same dark-on-light treatment the original gave
buttons inside .content. */
.reel-content-box .reel-btn {
border-color: rgba(var(--ink-rgb), 0.2);
color: var(--ink);
}
.reel-content-box .reel-btn:hover {
background-color: rgba(var(--ink-rgb), 0.05);
color: var(--ink);
}
.reel-content-box .reel-btn:active {
background-color: rgba(var(--ink-rgb), 0.1);
color: var(--ink);
}
/* Buttons (transparent, 1px border — the original never fills these with the
accent color, only white-alpha overlays on hover/active) */
.reel-btn {
display: inline-block;
height: 3.75em;
line-height: 3.75em;
padding: 0 2.5em;
border: solid 1px #ffffff;
border-radius: 0.25rem;
background-color: transparent;
color: #ffffff;
font-family: 'Bitter', serif;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.2s ease-in-out;
}
.reel-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.reel-btn:active {
background-color: rgba(255, 255, 255, 0.4);
color: #ffffff;
}
.reel-btn-next {
padding-right: 2em;
}
.reel-btn-next::after {
content: '';
display: inline-block;
width: 1.5em;
height: 1em;
margin: 0 0 0 0.65em;
background: url("images/long-arrow.svg") center / contain no-repeat;
vertical-align: middle;
}
/* Prev/next reel controls (circular arrow buttons, fixed bottom-center —
skel's dynamically-appended