diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index b1a8395..500164c 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -42,18 +42,28 @@ body::after {
padding: 0 var(--space-5);
height: var(--site-header-height);
background: var(--color-canvas);
- border-top: 3px solid var(--color-accent);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 100;
}
+.site-header::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
+ pointer-events: none;
+}
+
.site-title {
font-family: var(--font-display);
- font-size: var(--text-lg);
+ font-size: var(--text-xl);
font-weight: 400;
- letter-spacing: -0.01em;
+ letter-spacing: 0.06em;
text-decoration: none;
color: var(--color-ink);
line-height: 1;
@@ -140,21 +150,6 @@ body::after {
.entry-card:hover .entry-title { color: var(--color-accent); }
-/* Location & weather badges (single entry page) */
-
-.entry-location {
- font-size: var(--text-sm);
- color: var(--color-ink-2);
- display: inline-flex;
- align-items: center;
- gap: var(--space-1);
-}
-
-.entry-weather {
- font-size: var(--text-sm);
- color: var(--color-ink-2);
-}
-
@keyframes card-highlight {
0% { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
100% { background-color: transparent; }
@@ -203,6 +198,9 @@ body::after {
.journal-post-location,
.journal-post-weather {
color: var(--color-ink-muted);
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-1);
}
.journal-photo-wrap {
@@ -346,21 +344,6 @@ body::after {
/* ── Single entry ────────────────────────────────────────────────────────────── */
-.entry-hero {
- width: 100%;
- max-height: 480px;
- overflow: hidden;
- margin-bottom: var(--space-8);
- border-radius: var(--radius-md);
-}
-
-.entry-hero img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- display: block;
-}
-
.entry-back-fixed {
position: fixed;
top: calc(var(--site-header-height) + var(--space-3));
@@ -368,91 +351,10 @@ body::after {
z-index: 100;
}
-.entry-header { margin-bottom: var(--space-8); }
-
-.entry-header-meta {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- gap: var(--space-3);
- margin-bottom: var(--space-4);
-}
-
-.entry-header .entry-date {
- font-size: var(--text-sm);
- font-weight: 600;
- letter-spacing: 0.06em;
- text-transform: uppercase;
- color: var(--color-ink-muted);
- display: inline;
- margin-bottom: 0;
-}
-
-.entry .entry-title {
- font-family: var(--font-display);
- font-size: var(--text-2xl);
- font-weight: 400;
- line-height: var(--leading-snug);
- color: var(--color-ink);
- margin-bottom: var(--space-4);
-}
-
-@media (min-width: 520px) {
- .entry .entry-title { font-size: var(--text-3xl); }
-}
-
-.entry-title-rule {
- height: 1px;
- background: var(--color-border);
- margin-bottom: var(--space-8);
-}
-
-.entry-body { margin-bottom: var(--space-10); }
-.entry-body p { margin-bottom: 1.4em; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-ink-2); }
-.entry-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
-
.entry-footer { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.entry-footer a { color: var(--color-accent); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.entry-footer a:hover { color: var(--color-accent-hover); }
-/* ── Photo gallery ───────────────────────────────────────────────────────────── */
-
-.entry-gallery {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 3px;
- margin-bottom: var(--space-10);
- border-radius: var(--radius-md);
- overflow: hidden;
-}
-
-@media (min-width: 520px) {
- .entry-gallery { grid-template-columns: repeat(3, 1fr); }
-}
-
-.gallery-thumb {
- background: none;
- border: none;
- padding: 0;
- cursor: pointer;
- display: block;
- aspect-ratio: 1;
- overflow: hidden;
-}
-
-.gallery-thumb img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- display: block;
- transition: opacity 0.15s;
-}
-
-.gallery-thumb:hover img,
-.gallery-thumb:focus img { opacity: 0.82; }
-
-.gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
-
/* ── PhotoSwipe overrides ─────────────────────────────────────────────────────── */
.pswp__bg { background: #000; }
@@ -593,12 +495,9 @@ body::after {
}
.stat-block {
- background: var(--color-canvas);
- border: 1px solid var(--color-border);
- border-radius: var(--radius-md);
- padding: var(--space-6) var(--space-5);
- text-align: center;
- box-shadow: var(--shadow-sm);
+ border-left: 2px solid var(--color-accent);
+ padding: var(--space-2) 0 var(--space-2) var(--space-4);
+ text-align: left;
}
.stat-value {
@@ -606,7 +505,7 @@ body::after {
font-family: var(--font-display);
font-size: clamp(2rem, 6vw, var(--text-3xl));
font-weight: 400;
- color: var(--color-accent);
+ color: var(--color-ink);
line-height: 1.1;
margin-bottom: var(--space-2);
font-variant-numeric: tabular-nums;
@@ -1004,7 +903,7 @@ body::after {
color: var(--color-ink-muted);
background: transparent;
border: 1px solid var(--color-border);
- border-radius: var(--radius-full);
+ border-radius: var(--radius-sm);
padding: var(--space-1) var(--space-4);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
@@ -1107,6 +1006,24 @@ body::after {
background: var(--color-surface-raised);
}
+.trip-card-cover {
+ aspect-ratio: 3 / 1;
+ overflow: hidden;
+ border-radius: var(--radius-md) var(--radius-md) 0 0;
+ background: var(--color-border);
+ margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
+}
+
+.trip-card-cover img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ transition: transform 0.45s ease;
+}
+
+.trip-card:hover .trip-card-cover img { transform: scale(1.04); }
+
.trip-card-title {
font-family: var(--font-display);
font-size: var(--text-xl);
@@ -1460,6 +1377,41 @@ body::after {
text-decoration: none;
}
+/* ── Story progress bar ──────────────────────────────────── */
+.story-progress {
+ position: fixed;
+ top: var(--site-header-height);
+ left: 0;
+ height: 2px;
+ width: 0%;
+ background: var(--color-accent);
+ z-index: 200;
+ pointer-events: none;
+ will-change: width;
+}
+
+/* ── Story opener (location + date eyebrow) ──────────────── */
+.story-opener {
+ text-align: center;
+ padding-bottom: var(--space-12);
+ margin-bottom: var(--space-12);
+ border-bottom: 1px solid var(--color-border);
+ opacity: 0;
+ animation: storyReveal 0.9s cubic-bezier(.16,1,.3,1) 0.8s both;
+}
+
+.story-opener__text {
+ font-family: var(--font-ui);
+ font-size: var(--text-sm);
+ color: var(--color-ink-muted);
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .story-opener { opacity: 1; animation: none; }
+}
+
/* ── Story nav title (desktop: fades into header center) ─────── */
.story-nav-title {
position: absolute;
diff --git a/themes/intotheeast/templates/partials/entry-journal.html.twig b/themes/intotheeast/templates/partials/entry-journal.html.twig
index 17de19e..c5826ef 100644
--- a/themes/intotheeast/templates/partials/entry-journal.html.twig
+++ b/themes/intotheeast/templates/partials/entry-journal.html.twig
@@ -1,12 +1,12 @@
{% set weather_icons = {
- 'Sunny': '',
- 'Partly cloudy': '',
- 'Cloudy': '',
- 'Foggy': '',
- 'Drizzle': '',
- 'Rain': '',
- 'Snow': '',
- 'Thunderstorm': ''
+ 'sunny': '',
+ 'partly cloudy': '',
+ 'cloudy': '',
+ 'foggy': '',
+ 'drizzle': '',
+ 'rain': '',
+ 'snow': '',
+ 'thunderstorm': ''
} %}