/* ==========================================================================
Savage Lane — Guide Reading Mode (dark)
Used by: /guides/*.html
Purpose: clean, high-contrast, easy-reading article layout
========================================================================== */
/* Theme tokens (dark) */
:root{
--bg:#0b1020; /* page background */
--panel:#0f172a; /* panel cards */
--text:#eef2f7; /* primary text */
--muted:#b8c1d8; /* secondary text */
--accent:#5a7cff; /* buttons/links (brand) */
--ring: rgba(90,124,255,.45);
--border:#1f2937;
--shadow:0 10px 28px rgba(0,0,0,.18); /* toned down from 0 18px 40px */
--wrap:900px; /* max content width */
--radius:14px;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
line-height:1.7;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* Layout */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:32px 20px }
/* Header */
header{
display:flex; justify-content:space-between; align-items:center;
gap:14px; margin-bottom:16px;
}
header img{ height:56px; width:auto; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.22) }
header nav{ display:flex; align-items:center; flex-wrap:wrap; gap:10px }
header nav .sep{ opacity:.6 }
@media (max-width:640px){
header{ flex-direction:column; align-items:flex-start }
header img{ height:48px; }
}
/* Links */
a{ color:#8ab4ff; text-decoration:none }
a:hover{ text-decoration:underline }
/* Buttons */
.btn{
display:inline-block; padding:10px 14px; border-radius:10px;
background:#2b2f3a; color:#fff; font-weight:600; border:1px solid #343a46;
text-decoration:none;
}
.btn.primary{ background:var(--accent); border-color:transparent }
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }
/* Article */
article{ margin-top:10px }
/* clamp headings for nicer small-screen scale */
h1{ font-size:clamp(1.6rem, 3.8vw, 2rem); margin:8px 0 12px; line-height:1.2 }
h2{ margin:18px 0 8px; font-size:clamp(1.05rem, 2.6vw, 1.25rem) }
p{ color:#cfd6e6; margin:0 0 12px }
/* Panels / callouts */
.panel{
background:var(--panel);
border:1px solid var(--border);
border-radius:var(--radius);
padding:18px;
margin:12px 0;
box-shadow:var(--shadow); /* softer */
}
/* Lists and text elements */
ul,ol{ margin:10px 0 0; padding-left:20px }
li{ margin:6px 0 }
strong,b{ color:#fff }
em,i{ color:#d4dbeb }
blockquote{
margin:12px 0; padding:10px 14px;
border-left:3px solid var(--accent);
background:rgba(255,255,255,.03);
border-radius:10px;
color:#dbe3f7;
}
code, pre{
font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
background:#111827; color:#e5e7eb; border-radius:8px;
}
code{ padding:.15em .35em; border:1px solid #1f2937 }
pre{ padding:12px; overflow:auto; border:1px solid #1f2937 }
/* Media */
img, video, iframe{ max-width:100%; height:auto }
iframe{ border:0; aspect-ratio:16/9 }
figure{ margin:12px 0 }
figcaption{ color:var(--muted); font-size:.95rem; margin-top:6px }
/* Footer */
footer{
margin-top:28px; color:#9aa6bd;
display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
footer a{ color:#b8c1ff }
/* Accessibility */
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:10px }
/* Small devices */
@media (max-width:480px){
h1{ font-size:clamp(1.4rem, 6vw, 1.7rem) }
}
/* ================= Reading progress bar (inert until markup exists) ================ */
/* Usage (next step): add
at the start of , and a 6-line script to update width on scroll. */
.reading-progress{
position:fixed; inset:0 auto auto 0; height:4px; width:100%;
background:transparent; z-index:100; pointer-events:none;
}
.reading-progress__bar{
display:block; height:100%; width:0%;
background:linear-gradient(90deg, var(--accent), #8ab4ff);
box-shadow:0 2px 8px rgba(0,0,0,.25);
transition:width .15s ease;
}
/* ================= CTA helper line ================= */
/* Used under Concierge buttons on guides. Keeps tone subtle and local. */
.cta-note{
display:block;
margin-top:6px;
font-size:.9rem;
color:var(--muted);
opacity:.85;
line-height:1.4;
text-align:right; /* aligns neatly under button */
width:100%; /* forces it below flex items */
}
/* === Visual enhancements for all guides (drop-in, no HTML edits required) === */
/* Color tokens used for alternating accents */
:root{
--sl-accent-a:#5a7cff; /* blue-violet */
--sl-accent-b:#2ec5b6; /* teal */
--sl-accent-c:#ffd27d; /* warm yellow (for tips if used) */
--sl-muted-bg:rgba(255,255,255,.02);
}
/* Base panel card already exists; add comfortable spacing defaults if missing */
.panel{
position: relative;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background:
linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
box-shadow: 0 10px 28px rgba(0,0,0,.18); /* softer */
padding: 16px;
}
/* Breadcrumbs: allow horizontal scroll instead of squishing */
.sl-breadcrumbs{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
white-space:nowrap;
}
/* Alternating left accent stripe + subtle background tint
Works on existing markup: every automatically benefits */
article .panel{
overflow: hidden;
}
article .panel::before{
content: "";
position: absolute;
inset: 0 0 0 auto; /* allow left border via gradient below */
pointer-events: none;
}
/* Odd panels: violet accent on left — reduced intensity */
article .panel:nth-of-type(odd){
background:
linear-gradient(90deg, rgba(90,124,255,.08) 0%, rgba(90,124,255,0) 18%),
linear-gradient(180deg, var(--sl-muted-bg), transparent);
border-left: 4px solid var(--sl-accent-a); /* was 6px */
}
/* Even panels: teal accent on left — reduced intensity */
article .panel:nth-of-type(even){
background:
linear-gradient(90deg, rgba(46,197,182,.08) 0%, rgba(46,197,182,0) 18%),
linear-gradient(180deg, var(--sl-muted-bg), transparent);
border-left: 4px solid var(--sl-accent-b); /* was 6px */
}
/* Headings inside panels: a touch tighter with subtle underline */
article .panel > h2{
margin: 0 0 8px;
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
line-height: 1.3;
border-bottom: 1px dashed rgba(255,255,255,.08);
padding-bottom: 6px;
}
/* Lists: improved spacing and checkmark style for readability */
article .panel ul{
margin: 8px 0 0;
padding-left: 1.2em;
}
article .panel li{
margin: 6px 0;
}
/* Optional “checklist style” when the list is inside a .panel and you want checks
(applies lightly to any UL that has data-checks attr if you choose to add later,
but stays invisible for existing pages) */
article .panel ul[data-checks]{
list-style: none;
padding-left: 0;
}
article .panel ul[data-checks] > li{
position: relative;
padding-left: 28px;
}
article .panel ul[data-checks] > li::before{
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--sl-accent-b);
font-weight: 800;
}
/* Soft callout variant you can opt into later with …
Older guides won’t need HTML changes; leaving here for future flexibility */
.callout{
border: 1px solid rgba(255,255,255,.10);
border-left-width: 4px; /* was 6px */
border-radius: 14px;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
margin: 12px 0;
}
.callout.tip{ border-left-color: var(--sl-accent-b) }
.callout.note{ border-left-color: var(--sl-accent-a) }
.callout.warn{ border-left-color: var(--sl-accent-c) }
/* Ensure the AskSavvy CTA note always stacks beneath the Concierge button */
.cta-wrap{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:6px }
.cta-note{ display:block; margin:0 }
/* Small screens: make stripes even subtler and reduce left border width */
@media (max-width: 540px){
article .panel:nth-of-type(odd){
background:
linear-gradient(90deg, rgba(90,124,255,.06) 0%, rgba(90,124,255,0) 26%),
linear-gradient(180deg, var(--sl-muted-bg), transparent);
border-left-width: 3px; /* was 4px */
}
article .panel:nth-of-type(even){
background:
linear-gradient(90deg, rgba(46,197,182,.06) 0%, rgba(46,197,182,0) 26%),
linear-gradient(180deg, var(--sl-muted-bg), transparent);
border-left-width: 3px; /* was 4px */
}
}