elements */
.faq-section{
padding: 20px 0 100px;
}
.faq-section h2{
font-size: clamp(28px, 3.6vw, 40px);
text-align:center;
margin-bottom: 30px;
}
.faq-list{
max-width: 760px;
margin: 0 auto;
display:flex;
flex-direction:column;
gap: 12px;
}
.faq-item{
border: 1px solid var(--line);
border-radius: 10px;
background: var(--ink-raised);
padding: 0 22px;
}
.faq-item summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap: 16px;
padding: 18px 0;
font-weight:600;
font-size: 15.5px;
color: var(--paper);
}
/* Hides the browser's own default disclosure triangle, in both Chrome/Safari (::-webkit-details-marker) and Firefox (list-style, already set above) */
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{
flex-shrink:0;
width: 20px;
height: 20px;
border: 1px solid var(--gold);
border-radius: 50%;
display:flex;
align-items:center;
justify-content:center;
transition: transform .2s ease;
}
.faq-icon svg{
width: 12px;
height: 12px;
display:block;
}
/* "[open]" only matches a while it's expanded — this is what spins the "+" into a "×" */
.faq-item[open] .faq-icon{
transform: rotate(45deg);
}
/*
Wraps each answer so js/adventures-loader.js can animate its height
open/closed (native has no built-in transition — it just
snaps open/shut). "overflow: hidden" is what makes the height
transition look like a reveal instead of just resizing a visible box.
*/
.faq-answer{
height: 0;
overflow:hidden;
transition: height .2s ease;
}
.faq-item p{
margin:0;
padding: 0 0 20px;
color: var(--paper-dim);
font-size: 14.5px;
line-height: 1.65;
}
/*
---------- ORNATE DIVIDER ----------
Styling shared by every gold-line SVG divider on the page (see the
matching comment in the HTML for what the graphic itself is).
"aspect-ratio: 1200 / 56" matches the SVG's own internal viewBox
proportions, so as the divider's width changes at different screen
sizes, its height scales to match instead of getting stretched/squashed.
*/
.divider-wrap{
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}
.ornate-divider{
width: 100%;
height: auto;
aspect-ratio: 1200 / 56;
display:block;
}
/*
---------- PRODUCT PAGE ----------
Everything below this point styles adventure.html (the product page
template) — none of it is used on the homepage.
*/
.product-fallback{
padding: 140px 0;
text-align:center;
}
.product-fallback h1{
font-size: clamp(28px, 4vw, 40px);
margin-bottom: 14px;
}
.product-fallback p{
color: var(--paper-dim);
margin-bottom: 26px;
}
/*
Placeholder image boxes. Until real product art exists for a given
slot, js/product-loader.js builds one of these instead of a real
![]()
— a colored gradient background (one of the 4 ".tone-*" classes
below) with a small text label so it's clear what should eventually go
there. Once real art is added to a product's entry in products.json,
that slot renders an actual photo instead — see the "src" field on any
gallery item in products.json.
*/
.placeholder-block{
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background-repeat: no-repeat;
}
.placeholder-label{
color: rgba(217,164,65,0.6);
font-size: 11px;
font-weight:600;
text-transform: uppercase;
letter-spacing: 0.08em;
text-align:center;
padding: 0 12px;
}
.tone-amber{ background: linear-gradient(135deg, #3a2a15, #14100a); }
.tone-blue{ background: linear-gradient(135deg, #1c2a33, #0a1114); }
.tone-moss{ background: linear-gradient(135deg, #24301f, #0e130c); }
.tone-plum{ background: linear-gradient(135deg, #2e1f33, #120c14); }
.back-link{
padding-top: 24px;
}
.back-link a{
display:inline-flex;
align-items:center;
gap: 6px;
color: var(--paper-dim);
text-decoration:none;
font-size: 13px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.06em;
transition: color .15s ease;
}
.back-link a:hover{ color: var(--gold); }
/* opening gallery: one large image, two stacked beside it — contained, not full-bleed */
.opening-gallery{
margin-top: 20px;
display:grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
height: 640px;
}
.opening-gallery .placeholder-block{
border-radius: 10px;
border: 1px solid var(--line);
}
.opening-gallery .placeholder-block:nth-child(1){
grid-column: 1;
grid-row: 1 / 3;
}
.opening-gallery .placeholder-block:nth-child(2){
grid-column: 2;
grid-row: 1;
}
.opening-gallery .placeholder-block:nth-child(3){
grid-column: 2;
grid-row: 2;
}
/* info bar — narrower and centered, in contrast to the wide cinematic gallery above it */
.info-bar{
max-width: 760px;
margin: 0 auto;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap: 20px;
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.info-bar-left{ display:flex; align-items:center; gap: 16px; flex-wrap:wrap; }
.info-bar-left h1{
font-size: clamp(24px, 3.2vw, 34px);
}
.info-bar-right{ display:flex; align-items:center; gap: 20px; }
.product-price{
font-size: 20px;
font-weight:700;
color: var(--gold);
}
.product-genre-pill{
display:inline-block;
font-size: 10.5px;
font-weight:600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gold);
border: 1px solid var(--gold);
background: rgba(12,12,13,0.55);
padding: 5px 10px;
border-radius: 100px;
}
/* Setup+Pacing / Profile card row, then a full-width What's Included row beneath both */
.details-row{
padding: 50px 0;
border-bottom: 1px solid var(--line);
}
.details-row h2{
font-size: clamp(22px, 2.6vw, 28px);
margin-bottom: 18px;
}
/*
align-items:stretch (the grid default) so both columns match the
row's full height — combined with .setup-col being a flex column and
.pacing-bar using margin-top:auto (below), and .profile-card being
stretched to fill its column's height, this is what lets the pacing
bar's bottom and the profile card's bottom line up with each other.
*/
.details-row-top{
display:grid;
grid-template-columns: 1.3fr 1fr;
gap: 60px;
align-items: stretch;
}
.setup-col{
display:flex;
flex-direction:column;
}
.setup-text p{
font-size: 15.5px;
line-height: 1.75;
color: var(--paper-dim);
}
.setup-text p + p{
margin-top: 16px;
}
/* Groups the "Adventure Pacing" heading with its timeline so both move together — margin-top:auto pushes the whole unit to the bottom of .setup-col (see above); padding-top guarantees at least the same 30px gap used elsewhere on this page, even in the unlikely case there's no extra space to push into */
.pacing-section{
margin-top: auto;
padding-top: 30px;
}
.pacing-bar{
display:flex;
align-items:flex-start;
}
.pacing-beat{
position:relative;
flex: 1;
text-align:center;
}
.pacing-beat:not(:last-child)::after{
content:"";
position:absolute;
top: 4px;
left: 50%;
width: 100%;
height: 1px;
background: var(--line);
}
.pacing-dot{
position:relative;
z-index:1;
display:block;
width: 9px;
height: 9px;
margin: 0 auto 10px;
border-radius:50%;
background: var(--ink);
border: 1.5px solid var(--gold);
}
.pacing-label{
font-size: 11px;
text-transform:uppercase;
letter-spacing: 0.05em;
color: var(--paper-dimmer);
}
/* Adventure Profile card — same card treatment as other cards on the site (ink-raised fill, thin line border, rounded corners), deliberately plain rather than decorated */
/* width:85% (15% narrower than its column) centered via margin:auto; height:100% stretches the card's own border to match the row's full height, which — combined with .pacing-bar's margin-top:auto opposite it — is what lines up their two bottom edges */
.profile-card{
width: 85%;
height: 100%;
margin: 0 auto;
background: var(--ink-raised);
border: 1px solid var(--line);
border-radius: 10px;
padding: 32px 28px;
text-align:center;
}
.profile-stats{
margin-top: 24px;
display:flex;
flex-direction:column;
gap: 16px;
text-align:left;
}
.profile-stat-label{
display:block;
margin-bottom: 6px;
font-size: 12px;
font-weight:600;
text-transform:uppercase;
letter-spacing: 0.05em;
color: var(--paper-dim);
}
.profile-stat-track{
width:100%;
height: 6px;
border-radius: 100px;
background: var(--ink);
overflow:hidden;
}
.profile-stat-fill{
height:100%;
border-radius: 100px;
background: var(--gold);
}
/* Reuses the same 50px rhythm as .details-row's own top/bottom padding, rather than introducing a new spacing value */
.included-row{
margin-top: 50px;
}
.included-list{
list-style:none;
margin:0; padding:0;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 32px;
}
.included-list li{
display:flex;
align-items:flex-start;
gap: 10px;
font-size: 15px;
color: var(--paper-dim);
line-height: 1.5;
}
.included-icon{
width: 16px;
height: 16px;
margin-top: 2px;
flex-shrink:0;
}
/*
Striking Locations / Maps Worth Exploring — full-width, single
centered composition. Both sections share this exact same styling
(see the matching HTML comment); only their text/image content differs.
The radial "spotlight" overlay is lighter in the middle, darker toward
the edges — the opposite of the homepage carousel's vignette — so text
reads clearly without needing a hard top/bottom band across the image.
*/
.spotlight-section{
position:relative;
min-height: 460px;
display:flex;
align-items:center;
justify-content:center;
background-size:cover;
background-position: center 75%;
background-repeat:no-repeat;
overflow:hidden;
text-align:center;
}
.spotlight-overlay{
position:absolute;
inset:0;
background: radial-gradient(ellipse at center, rgba(12,12,13,0.25) 0%, rgba(12,12,13,0.55) 55%, rgba(12,12,13,0.88) 100%);
}
.spotlight-content{
position:relative;
z-index:1;
max-width: 560px;
min-height: 440px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding: 50px 64px;
background: radial-gradient(ellipse 49% 49% at center, rgba(12,12,13,0.92) 0%, rgba(12,12,13,0.55) 45%, rgba(12,12,13,0.22) 75%, transparent 100%);
}
.spotlight-heading{
font-size: clamp(28px, 3.6vw, 40px);
line-height:1.1;
color: var(--paper);
}
.spotlight-content .eyebrow{
margin-bottom: 8px;
}
.spotlight-subtitle{
margin-top: 8px;
font-size: 15px;
line-height: 1.6;
color: var(--paper-dim);
}
/* The small "two lines + stem + dot" ornament — a simpler, quieter cousin of the full rapier divider used between major sections elsewhere on the site */
.spotlight-divider{
width: 90px;
margin: 10px auto 0;
}
.spotlight-divider svg{
width:100%;
height:auto;
display:block;
}
/* Small muted "+N more..." line, shared by all three spotlight sections */
.spotlight-more{
text-align:center;
padding: 4px 0 24px;
font-size: 12.5px;
color: var(--paper-dimmer);
}
/*
Colorful NPCs — two columns instead of the full-width layout above.
The portrait "frame" is a rounded panel; product-loader.js layers the
character image on top of it, sized taller than the panel and anchored
to the bottom, so it visually breaks past the panel's top edge instead
of sitting flush inside it.
*/
.npc-spotlight{
padding: 70px 0 20px;
}
.npc-spotlight-inner{
display:grid;
grid-template-columns: 1fr 1fr;
align-items:center;
gap: 50px;
}
.npc-portrait-col{
display:flex;
flex-direction:column;
align-items:center;
}
/*
The frame container carries the fixed size directly (rather than its
.npc-portrait-panel child), so the two decorative SVG borders below
can line up pixel-for-pixel with it. Stacking order (back to front):
panel (z-index 0, the background fill) → .npc-frame-back's faint
inner rect (1) → the character portrait (2) → .npc-frame-front's
bold outer rect + corner ticks (3). That order is what lets the inner
rect show only in the gaps around the character while the outer
border still reads clearly on top of the art.
*/
.npc-portrait-frame{
position:relative;
width: 100%;
max-width: 340px;
height: 380px;
margin: 0 auto;
}
.npc-portrait-panel{
position:absolute;
inset:0;
z-index:0;
}
.npc-frame-back{
z-index:1;
}
/*
The character portrait. Built as a background-image div (see
product-loader.js) instead of an ![]()
so the crop is directly
controlled here via background-size (zoom) and background-position
(which part of the source shows), rather than fighting object-fit's
automatic aspect-ratio math. "top" is negative so the element extends
above the frame's own top edge — combined with background-position
anchored to the top of the source art, that's what lets the character's
head/horns escape past the frame instead of being cropped by it.
scaleX(-1) mirrors the source image horizontally (there's no file-level
flip — see the note in product-loader.js).
*/
.npc-portrait-img{
position:absolute;
z-index:2;
top: -28%;
left:4px;
right:4px;
bottom:4px;
background-size: 280% auto;
background-position: 50% 0%;
background-repeat: no-repeat;
transform: scaleX(-1);
pointer-events:none;
}
.npc-frame-front{
z-index:3;
}
/*
Makes the escaping top part of the character appear to sit IN FRONT of
the frame border, instead of the border simply cutting across it. This
wrapper is clipped (overflow:hidden) to just the top half of the full
portrait's height, and sits above .npc-frame-front in stacking order —
so wherever it overlaps the gold border, it fully covers it. The lower
half is left alone, so the border still frames the character normally
there.
*/
.npc-portrait-img-overlap{
position:absolute;
z-index:4;
top: -28%;
left:4px;
right:4px;
height: 64%; /* half of the original image's full 128% (top:-28% to bottom:4px) span */
overflow:hidden;
pointer-events:none;
}
/*
An exact duplicate of .npc-portrait-img, positioned/sized identically
but relative to the wrapper above instead of the frame directly —
"top:0; height:200%" recreates the same full height within a wrapper
that's itself half that size, so the background-size/position math
(which is relative to this element's own box) lines up pixel-for-pixel
with the original. Only the portion inside the wrapper's clipped
bounds ends up visible.
*/
.npc-portrait-img-overlap .npc-portrait-img-dup{
position:absolute;
top:0;
left:0;
right:0;
height: 200%;
background-size: 280% auto;
background-position: 50% 0%;
background-repeat: no-repeat;
transform: scaleX(-1);
}
.npc-frame-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
}
.npc-text-col{
text-align:center;
}
@media (max-width: 860px){
.npc-spotlight-inner{ grid-template-columns: 1fr; gap: 24px; }
.npc-portrait-frame{ height: 300px; }
}
/*
Sticky buy bar. This is ONE bar styled two different ways depending on
screen width — the two @media blocks further down are what actually
decide whether it sticks to the top or the bottom (see the HTML
comment above this element in adventure.html for the full behavior).
"position: fixed" is what pins it to the viewport instead of scrolling
away with the page.
*/
.sticky-buy-bar{
position:fixed;
left:0; right:0;
z-index: 40;
background: rgba(12,12,13,0.92);
backdrop-filter: blur(10px);
}
/* Same max-width/margin/padding as "nav" itself, so the bar's content and height line up exactly with the nav bar underneath */
.sticky-buy-bar-inner{
max-width: 1200px;
margin: 0 auto;
padding: 18px 32px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 16px;
}
.sticky-buy-bar-info{ display:flex; align-items:center; gap:14px; min-width:0; }
.sticky-buy-bar-title{
font-family:'Barlow', sans-serif;
font-weight:700;
font-size: 15px;
color: var(--paper);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.sticky-buy-bar .product-price{ font-size: 16px; }
/*
MOBILE (screen 860px wide or narrower): the bar sticks to the bottom
and is always visible. ":has(.sticky-buy-bar)" is a way to style the
based on what's inside it — here it reserves extra space at the
bottom of the page so the fixed bar doesn't cover the footer content.
*/
@media (max-width: 860px){
body:has(.sticky-buy-bar){
padding-bottom: 76px;
}
.sticky-buy-bar{
bottom: 0;
top: auto;
border-top: 1px solid var(--line);
}
}
/*
DESKTOP (861px or wider): the bar sticks to the top instead, but stays
hidden (shifted fully off-screen via "translateY(-100%)") until
js/product-loader.js adds the ".visible" class once you've scrolled
past the main "Buy Now" button further up the page.
*/
@media (min-width: 861px){
.sticky-buy-bar{
top: 0;
bottom: auto;
border-bottom: 1px solid var(--line);
transform: translateY(-100%);
transition: transform .25s ease;
}
.sticky-buy-bar.visible{
transform: translateY(0);
}
}
@media (max-width: 860px){
.opening-gallery{ height:auto; grid-template-columns: 1fr; grid-template-rows:none; }
.opening-gallery .placeholder-block{ height:220px; grid-column:1 !important; grid-row:auto !important; }
.details-row-top{ grid-template-columns: 1fr; gap: 36px; }
.included-list{ grid-template-columns: repeat(2, 1fr); }
}
/*
---------- RESPONSIVE ----------
General mobile/tablet adjustments for the homepage that don't belong
to any one section above. "@media (max-width: ...)" rules only apply
when the browser window is narrower than that number — this is how
the site adapts to phone-sized screens (e.g. swapping the nav links
for the hamburger menu button, stacking the card grids into fewer
columns).
*/
@media (max-width: 860px){
.nav-links{ display:none; }
.nav-right .btn-cta{ display:none; }
.burger{ display:block; }
.feature-grid{ grid-template-columns: 1fr; }
.adventure-grid{ grid-template-columns: 1fr 1fr; }
.footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
.wrap{ padding: 0 20px; }
.adventure-grid{ grid-template-columns: 1fr; }
.footer-grid{ grid-template-columns: 1fr; }
.hero-ctas{ flex-direction:column; align-items:stretch; }
.cta-band{ margin: 0 20px 80px; padding: 44px 24px; }
.included-list{ grid-template-columns: 1fr; }
}
has no built-in transition — it just
snaps open/shut). "overflow: hidden" is what makes the height
transition look like a reveal instead of just resizing a visible box.
*/
.faq-answer{
height: 0;
overflow:hidden;
transition: height .2s ease;
}
.faq-item p{
margin:0;
padding: 0 0 20px;
color: var(--paper-dim);
font-size: 14.5px;
line-height: 1.65;
}
/*
---------- ORNATE DIVIDER ----------
Styling shared by every gold-line SVG divider on the page (see the
matching comment in the HTML for what the graphic itself is).
"aspect-ratio: 1200 / 56" matches the SVG's own internal viewBox
proportions, so as the divider's width changes at different screen
sizes, its height scales to match instead of getting stretched/squashed.
*/
.divider-wrap{
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}
.ornate-divider{
width: 100%;
height: auto;
aspect-ratio: 1200 / 56;
display:block;
}
/*
---------- PRODUCT PAGE ----------
Everything below this point styles adventure.html (the product page
template) — none of it is used on the homepage.
*/
.product-fallback{
padding: 140px 0;
text-align:center;
}
.product-fallback h1{
font-size: clamp(28px, 4vw, 40px);
margin-bottom: 14px;
}
.product-fallback p{
color: var(--paper-dim);
margin-bottom: 26px;
}
/*
Placeholder image boxes. Until real product art exists for a given
slot, js/product-loader.js builds one of these instead of a real
![]()
— a colored gradient background (one of the 4 ".tone-*" classes
below) with a small text label so it's clear what should eventually go
there. Once real art is added to a product's entry in products.json,
that slot renders an actual photo instead — see the "src" field on any
gallery item in products.json.
*/
.placeholder-block{
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background-repeat: no-repeat;
}
.placeholder-label{
color: rgba(217,164,65,0.6);
font-size: 11px;
font-weight:600;
text-transform: uppercase;
letter-spacing: 0.08em;
text-align:center;
padding: 0 12px;
}
.tone-amber{ background: linear-gradient(135deg, #3a2a15, #14100a); }
.tone-blue{ background: linear-gradient(135deg, #1c2a33, #0a1114); }
.tone-moss{ background: linear-gradient(135deg, #24301f, #0e130c); }
.tone-plum{ background: linear-gradient(135deg, #2e1f33, #120c14); }
.back-link{
padding-top: 24px;
}
.back-link a{
display:inline-flex;
align-items:center;
gap: 6px;
color: var(--paper-dim);
text-decoration:none;
font-size: 13px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.06em;
transition: color .15s ease;
}
.back-link a:hover{ color: var(--gold); }
/* opening gallery: one large image, two stacked beside it — contained, not full-bleed */
.opening-gallery{
margin-top: 20px;
display:grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
height: 640px;
}
.opening-gallery .placeholder-block{
border-radius: 10px;
border: 1px solid var(--line);
}
.opening-gallery .placeholder-block:nth-child(1){
grid-column: 1;
grid-row: 1 / 3;
}
.opening-gallery .placeholder-block:nth-child(2){
grid-column: 2;
grid-row: 1;
}
.opening-gallery .placeholder-block:nth-child(3){
grid-column: 2;
grid-row: 2;
}
/* info bar — narrower and centered, in contrast to the wide cinematic gallery above it */
.info-bar{
max-width: 760px;
margin: 0 auto;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap: 20px;
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.info-bar-left{ display:flex; align-items:center; gap: 16px; flex-wrap:wrap; }
.info-bar-left h1{
font-size: clamp(24px, 3.2vw, 34px);
}
.info-bar-right{ display:flex; align-items:center; gap: 20px; }
.product-price{
font-size: 20px;
font-weight:700;
color: var(--gold);
}
.product-genre-pill{
display:inline-block;
font-size: 10.5px;
font-weight:600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gold);
border: 1px solid var(--gold);
background: rgba(12,12,13,0.55);
padding: 5px 10px;
border-radius: 100px;
}
/* Setup+Pacing / Profile card row, then a full-width What's Included row beneath both */
.details-row{
padding: 50px 0;
border-bottom: 1px solid var(--line);
}
.details-row h2{
font-size: clamp(22px, 2.6vw, 28px);
margin-bottom: 18px;
}
/*
align-items:stretch (the grid default) so both columns match the
row's full height — combined with .setup-col being a flex column and
.pacing-bar using margin-top:auto (below), and .profile-card being
stretched to fill its column's height, this is what lets the pacing
bar's bottom and the profile card's bottom line up with each other.
*/
.details-row-top{
display:grid;
grid-template-columns: 1.3fr 1fr;
gap: 60px;
align-items: stretch;
}
.setup-col{
display:flex;
flex-direction:column;
}
.setup-text p{
font-size: 15.5px;
line-height: 1.75;
color: var(--paper-dim);
}
.setup-text p + p{
margin-top: 16px;
}
/* Groups the "Adventure Pacing" heading with its timeline so both move together — margin-top:auto pushes the whole unit to the bottom of .setup-col (see above); padding-top guarantees at least the same 30px gap used elsewhere on this page, even in the unlikely case there's no extra space to push into */
.pacing-section{
margin-top: auto;
padding-top: 30px;
}
.pacing-bar{
display:flex;
align-items:flex-start;
}
.pacing-beat{
position:relative;
flex: 1;
text-align:center;
}
.pacing-beat:not(:last-child)::after{
content:"";
position:absolute;
top: 4px;
left: 50%;
width: 100%;
height: 1px;
background: var(--line);
}
.pacing-dot{
position:relative;
z-index:1;
display:block;
width: 9px;
height: 9px;
margin: 0 auto 10px;
border-radius:50%;
background: var(--ink);
border: 1.5px solid var(--gold);
}
.pacing-label{
font-size: 11px;
text-transform:uppercase;
letter-spacing: 0.05em;
color: var(--paper-dimmer);
}
/* Adventure Profile card — same card treatment as other cards on the site (ink-raised fill, thin line border, rounded corners), deliberately plain rather than decorated */
/* width:85% (15% narrower than its column) centered via margin:auto; height:100% stretches the card's own border to match the row's full height, which — combined with .pacing-bar's margin-top:auto opposite it — is what lines up their two bottom edges */
.profile-card{
width: 85%;
height: 100%;
margin: 0 auto;
background: var(--ink-raised);
border: 1px solid var(--line);
border-radius: 10px;
padding: 32px 28px;
text-align:center;
}
.profile-stats{
margin-top: 24px;
display:flex;
flex-direction:column;
gap: 16px;
text-align:left;
}
.profile-stat-label{
display:block;
margin-bottom: 6px;
font-size: 12px;
font-weight:600;
text-transform:uppercase;
letter-spacing: 0.05em;
color: var(--paper-dim);
}
.profile-stat-track{
width:100%;
height: 6px;
border-radius: 100px;
background: var(--ink);
overflow:hidden;
}
.profile-stat-fill{
height:100%;
border-radius: 100px;
background: var(--gold);
}
/* Reuses the same 50px rhythm as .details-row's own top/bottom padding, rather than introducing a new spacing value */
.included-row{
margin-top: 50px;
}
.included-list{
list-style:none;
margin:0; padding:0;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 32px;
}
.included-list li{
display:flex;
align-items:flex-start;
gap: 10px;
font-size: 15px;
color: var(--paper-dim);
line-height: 1.5;
}
.included-icon{
width: 16px;
height: 16px;
margin-top: 2px;
flex-shrink:0;
}
/*
Striking Locations / Maps Worth Exploring — full-width, single
centered composition. Both sections share this exact same styling
(see the matching HTML comment); only their text/image content differs.
The radial "spotlight" overlay is lighter in the middle, darker toward
the edges — the opposite of the homepage carousel's vignette — so text
reads clearly without needing a hard top/bottom band across the image.
*/
.spotlight-section{
position:relative;
min-height: 460px;
display:flex;
align-items:center;
justify-content:center;
background-size:cover;
background-position: center 75%;
background-repeat:no-repeat;
overflow:hidden;
text-align:center;
}
.spotlight-overlay{
position:absolute;
inset:0;
background: radial-gradient(ellipse at center, rgba(12,12,13,0.25) 0%, rgba(12,12,13,0.55) 55%, rgba(12,12,13,0.88) 100%);
}
.spotlight-content{
position:relative;
z-index:1;
max-width: 560px;
min-height: 440px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding: 50px 64px;
background: radial-gradient(ellipse 49% 49% at center, rgba(12,12,13,0.92) 0%, rgba(12,12,13,0.55) 45%, rgba(12,12,13,0.22) 75%, transparent 100%);
}
.spotlight-heading{
font-size: clamp(28px, 3.6vw, 40px);
line-height:1.1;
color: var(--paper);
}
.spotlight-content .eyebrow{
margin-bottom: 8px;
}
.spotlight-subtitle{
margin-top: 8px;
font-size: 15px;
line-height: 1.6;
color: var(--paper-dim);
}
/* The small "two lines + stem + dot" ornament — a simpler, quieter cousin of the full rapier divider used between major sections elsewhere on the site */
.spotlight-divider{
width: 90px;
margin: 10px auto 0;
}
.spotlight-divider svg{
width:100%;
height:auto;
display:block;
}
/* Small muted "+N more..." line, shared by all three spotlight sections */
.spotlight-more{
text-align:center;
padding: 4px 0 24px;
font-size: 12.5px;
color: var(--paper-dimmer);
}
/*
Colorful NPCs — two columns instead of the full-width layout above.
The portrait "frame" is a rounded panel; product-loader.js layers the
character image on top of it, sized taller than the panel and anchored
to the bottom, so it visually breaks past the panel's top edge instead
of sitting flush inside it.
*/
.npc-spotlight{
padding: 70px 0 20px;
}
.npc-spotlight-inner{
display:grid;
grid-template-columns: 1fr 1fr;
align-items:center;
gap: 50px;
}
.npc-portrait-col{
display:flex;
flex-direction:column;
align-items:center;
}
/*
The frame container carries the fixed size directly (rather than its
.npc-portrait-panel child), so the two decorative SVG borders below
can line up pixel-for-pixel with it. Stacking order (back to front):
panel (z-index 0, the background fill) → .npc-frame-back's faint
inner rect (1) → the character portrait (2) → .npc-frame-front's
bold outer rect + corner ticks (3). That order is what lets the inner
rect show only in the gaps around the character while the outer
border still reads clearly on top of the art.
*/
.npc-portrait-frame{
position:relative;
width: 100%;
max-width: 340px;
height: 380px;
margin: 0 auto;
}
.npc-portrait-panel{
position:absolute;
inset:0;
z-index:0;
}
.npc-frame-back{
z-index:1;
}
/*
The character portrait. Built as a background-image div (see
product-loader.js) instead of an ![]()
so the crop is directly
controlled here via background-size (zoom) and background-position
(which part of the source shows), rather than fighting object-fit's
automatic aspect-ratio math. "top" is negative so the element extends
above the frame's own top edge — combined with background-position
anchored to the top of the source art, that's what lets the character's
head/horns escape past the frame instead of being cropped by it.
scaleX(-1) mirrors the source image horizontally (there's no file-level
flip — see the note in product-loader.js).
*/
.npc-portrait-img{
position:absolute;
z-index:2;
top: -28%;
left:4px;
right:4px;
bottom:4px;
background-size: 280% auto;
background-position: 50% 0%;
background-repeat: no-repeat;
transform: scaleX(-1);
pointer-events:none;
}
.npc-frame-front{
z-index:3;
}
/*
Makes the escaping top part of the character appear to sit IN FRONT of
the frame border, instead of the border simply cutting across it. This
wrapper is clipped (overflow:hidden) to just the top half of the full
portrait's height, and sits above .npc-frame-front in stacking order —
so wherever it overlaps the gold border, it fully covers it. The lower
half is left alone, so the border still frames the character normally
there.
*/
.npc-portrait-img-overlap{
position:absolute;
z-index:4;
top: -28%;
left:4px;
right:4px;
height: 64%; /* half of the original image's full 128% (top:-28% to bottom:4px) span */
overflow:hidden;
pointer-events:none;
}
/*
An exact duplicate of .npc-portrait-img, positioned/sized identically
but relative to the wrapper above instead of the frame directly —
"top:0; height:200%" recreates the same full height within a wrapper
that's itself half that size, so the background-size/position math
(which is relative to this element's own box) lines up pixel-for-pixel
with the original. Only the portion inside the wrapper's clipped
bounds ends up visible.
*/
.npc-portrait-img-overlap .npc-portrait-img-dup{
position:absolute;
top:0;
left:0;
right:0;
height: 200%;
background-size: 280% auto;
background-position: 50% 0%;
background-repeat: no-repeat;
transform: scaleX(-1);
}
.npc-frame-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
}
.npc-text-col{
text-align:center;
}
@media (max-width: 860px){
.npc-spotlight-inner{ grid-template-columns: 1fr; gap: 24px; }
.npc-portrait-frame{ height: 300px; }
}
/*
Sticky buy bar. This is ONE bar styled two different ways depending on
screen width — the two @media blocks further down are what actually
decide whether it sticks to the top or the bottom (see the HTML
comment above this element in adventure.html for the full behavior).
"position: fixed" is what pins it to the viewport instead of scrolling
away with the page.
*/
.sticky-buy-bar{
position:fixed;
left:0; right:0;
z-index: 40;
background: rgba(12,12,13,0.92);
backdrop-filter: blur(10px);
}
/* Same max-width/margin/padding as "nav" itself, so the bar's content and height line up exactly with the nav bar underneath */
.sticky-buy-bar-inner{
max-width: 1200px;
margin: 0 auto;
padding: 18px 32px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 16px;
}
.sticky-buy-bar-info{ display:flex; align-items:center; gap:14px; min-width:0; }
.sticky-buy-bar-title{
font-family:'Barlow', sans-serif;
font-weight:700;
font-size: 15px;
color: var(--paper);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.sticky-buy-bar .product-price{ font-size: 16px; }
/*
MOBILE (screen 860px wide or narrower): the bar sticks to the bottom
and is always visible. ":has(.sticky-buy-bar)" is a way to style the
based on what's inside it — here it reserves extra space at the
bottom of the page so the fixed bar doesn't cover the footer content.
*/
@media (max-width: 860px){
body:has(.sticky-buy-bar){
padding-bottom: 76px;
}
.sticky-buy-bar{
bottom: 0;
top: auto;
border-top: 1px solid var(--line);
}
}
/*
DESKTOP (861px or wider): the bar sticks to the top instead, but stays
hidden (shifted fully off-screen via "translateY(-100%)") until
js/product-loader.js adds the ".visible" class once you've scrolled
past the main "Buy Now" button further up the page.
*/
@media (min-width: 861px){
.sticky-buy-bar{
top: 0;
bottom: auto;
border-bottom: 1px solid var(--line);
transform: translateY(-100%);
transition: transform .25s ease;
}
.sticky-buy-bar.visible{
transform: translateY(0);
}
}
@media (max-width: 860px){
.opening-gallery{ height:auto; grid-template-columns: 1fr; grid-template-rows:none; }
.opening-gallery .placeholder-block{ height:220px; grid-column:1 !important; grid-row:auto !important; }
.details-row-top{ grid-template-columns: 1fr; gap: 36px; }
.included-list{ grid-template-columns: repeat(2, 1fr); }
}
/*
---------- RESPONSIVE ----------
General mobile/tablet adjustments for the homepage that don't belong
to any one section above. "@media (max-width: ...)" rules only apply
when the browser window is narrower than that number — this is how
the site adapts to phone-sized screens (e.g. swapping the nav links
for the hamburger menu button, stacking the card grids into fewer
columns).
*/
@media (max-width: 860px){
.nav-links{ display:none; }
.nav-right .btn-cta{ display:none; }
.burger{ display:block; }
.feature-grid{ grid-template-columns: 1fr; }
.adventure-grid{ grid-template-columns: 1fr 1fr; }
.footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
.wrap{ padding: 0 20px; }
.adventure-grid{ grid-template-columns: 1fr; }
.footer-grid{ grid-template-columns: 1fr; }
.hero-ctas{ flex-direction:column; align-items:stretch; }
.cta-band{ margin: 0 20px 80px; padding: 44px 24px; }
.included-list{ grid-template-columns: 1fr; }
}