/* ============================================================================
SUPA GAMES · site.css
Camden vault · kryptonite green on moss-black. No purple, no blue, no grey.
============================================================================ */
/* ---------- 1. Tokens --------------------------------------------------- */
:root {
/* Surfaces */
--sg-void: #04130c; /* deepest — body background */
--sg-moss: #07221a; /* main panel base */
--sg-moss-2: #0a2e22; /* cards, raised panels */
--sg-moss-3: #0e3b2c; /* hovered raised panels */
--sg-mantle: #122e23; /* nav bar, hud bar */
/* Greens */
--sg-emerald: #10b981;
--sg-krypto: #34d399; /* primary accent (kryptonite pulse) */
--sg-krypto-2: #6ee7b7; /* highlights */
--sg-lime: #84cc16; /* second accent (xp / cta lime) */
--sg-lime-2: #bef264;
--sg-jungle: #16a34a;
/* Borders / dividers */
--sg-line: #1d4631;
--sg-line-2: #265a3f;
--sg-line-3: #2f7053;
/* Typography */
--sg-eggshell: #e8f5ee; /* main text */
--sg-sage: #b6cdc0; /* secondary text */
--sg-fern: #8aaa9a; /* tertiary / meta */
--sg-mist: #6e8a7d; /* muted captions */
/* Status accents (rare, used sparingly) */
--sg-orange: #f97316;
--sg-gold: #facc15;
--sg-rust: #b1623b;
/* Effects */
--sg-glow-krypto: 0 0 0 1px rgba(52, 211, 153, .35), 0 8px 32px -8px rgba(52, 211, 153, .55);
--sg-glow-soft: 0 12px 32px -16px rgba(52, 211, 153, .45);
--sg-shadow-card: 0 14px 32px -18px rgba(0, 0, 0, .8), 0 1px 0 rgba(52, 211, 153, .06) inset;
/* Fonts — Fraunces editorial serif for display, Inter everywhere else.
The mono token is kept ONLY for genuine technical strings (SKU codes,
order references, receipt rows). Never used on copy or labels. */
--sg-f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
--sg-f-body: 'Inter', system-ui, -apple-system, sans-serif;
--sg-f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
--sg-radius: 6px;
--sg-radius-lg: 14px;
--sg-container: 1240px;
--sg-pad: clamp(16px, 4vw, 32px);
}
/* ---------- 2. Reset & base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--sg-f-body);
font-size: 15px;
line-height: 1.55;
color: var(--sg-eggshell);
background:
radial-gradient(1100px 600px at 90% -100px, rgba(52, 211, 153, .08), transparent 60%),
radial-gradient(900px 500px at -10% 30%, rgba(132, 204, 22, .045), transparent 65%),
var(--sg-void);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
a { color: var(--sg-krypto); text-decoration: none; transition: color .15s; }
a:hover { color: var(--sg-krypto-2); }
hr { border: 0; border-top: 1px dashed var(--sg-line); margin: 28px 0; }
h1, h2, h3, h4, h5 {
font-family: var(--sg-f-display);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.012em;
margin: 0 0 .4em;
color: var(--sg-eggshell);
}
h1 em, h2 em, h3 em, h4 em { font-style: italic; font-weight: 500; color: var(--sg-eggshell); }
p { margin: 0 0 1em; }
::selection { background: var(--sg-krypto); color: var(--sg-void); }
.sg-container { width: 100%; max-width: var(--sg-container); margin: 0 auto; padding: 0 var(--sg-pad); }
.sg-skip {
position: absolute; left: -200px; top: 0; padding: 8px 14px;
background: var(--sg-krypto); color: var(--sg-void); font-family: var(--sg-f-mono);
z-index: 1000; transition: left .15s;
}
.sg-skip:focus { left: 8px; top: 8px; outline: 2px solid var(--sg-lime); }
/* Mono utility — reserved for genuine technical strings only (SKU, order codes) */
.sg-mono { font-family: var(--sg-f-mono); letter-spacing: 0; font-size: .92em; color: var(--sg-mist); }
/* Eyebrow — quiet kicker line above headings. Calm sans, no shouting. */
.sg-eyebrow {
font-family: var(--sg-f-body);
font-size: 12.5px;
letter-spacing: .01em;
text-transform: none;
color: var(--sg-sage);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 10px;
}
.sg-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: var(--sg-fern);
display: inline-block;
}
.sg-eyebrow--mute { color: var(--sg-fern); }
.sg-eyebrow--mute::before { background: var(--sg-line-2); }
/* ---------- 3. Buttons --------------------------------------------------- */
/* Krypto-button = primary CTA. Skewed corner cut + emerald glow + lime hover. */
.sg-btn {
--bg: var(--sg-krypto);
--fg: var(--sg-void);
--bd: var(--sg-krypto);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
padding: 12px 22px;
font-family: var(--sg-f-mono);
font-weight: 700;
font-size: 12.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg);
background: var(--bg);
border: 1px solid var(--bd);
border-radius: 2px;
cursor: pointer;
transition: transform .15s ease, background .2s, color .2s, box-shadow .2s;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
box-shadow:
0 0 0 1px rgba(52, 211, 153, .25),
0 12px 30px -14px rgba(52, 211, 153, .65);
}
.sg-btn:hover {
--bg: var(--sg-lime);
--bd: var(--sg-lime);
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(132, 204, 22, .35),
0 18px 40px -14px rgba(132, 204, 22, .7);
color: var(--sg-void);
}
.sg-btn:active { transform: translateY(0); }
/* Krypto = solid neon. Ghost = outlined. */
.sg-btn--ghost {
--bg: transparent;
--fg: var(--sg-krypto);
--bd: var(--sg-line-2);
box-shadow: none;
}
.sg-btn--ghost:hover {
--bg: rgba(52, 211, 153, .08);
--fg: var(--sg-krypto-2);
--bd: var(--sg-krypto);
box-shadow: var(--sg-glow-soft);
}
.sg-btn--dark {
--bg: var(--sg-moss-2);
--fg: var(--sg-krypto);
--bd: var(--sg-line-2);
box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .08);
}
.sg-btn--dark:hover { --bg: var(--sg-moss-3); --fg: var(--sg-krypto-2); }
.sg-btn--sm { padding: 9px 14px; font-size: 11px; letter-spacing: .12em; }
.sg-btn--lg { padding: 15px 30px; font-size: 13.5px; }
.sg-btn--block { width: 100%; }
/* ---------- 4. Promo strip (formerly HUD bar) ---------------------------- */
.sg-hud {
background: var(--sg-void);
border-bottom: 1px solid var(--sg-line);
font-family: var(--sg-f-body);
font-size: 11px;
letter-spacing: .12em;
color: var(--sg-fern);
position: relative;
}
.sg-hud__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 8px 0;
gap: 6px 28px;
text-transform: none;
font-size: 12.5px;
font-weight: 500;
}
.sg-hud__item { color: var(--sg-mist); position: relative; }
.sg-hud__item + .sg-hud__item::before {
content: '';
display: inline-block;
width: 3px; height: 3px; border-radius: 50%;
background: var(--sg-line-2);
margin-right: 28px;
vertical-align: middle;
transform: translateY(-2px);
}
.sg-hud__item--soft { color: var(--sg-fern); }
.sg-hud__item a { color: var(--sg-eggshell); text-decoration: underline; text-decoration-color: var(--sg-fern); text-underline-offset: 4px; }
.sg-hud__item a:hover { color: var(--sg-krypto); text-decoration-color: var(--sg-krypto); }
.sg-hud__dot--legacy {
/* preserved for any leftover refs but invisible */
display: none;
animation: sg-pulse 2.2s ease-in-out infinite;
}
@keyframes sg-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(.8); opacity: .55; }
}
.sg-hud__sep { color: var(--sg-line-2); font-size: 9px; }
.sg-hud__link { color: var(--sg-krypto); text-decoration: none; }
.sg-hud__link:hover { color: var(--sg-lime-2); }
.sg-hud__scanline {
position: absolute; left: 0; right: 0; bottom: -1px;
height: 1px;
background: repeating-linear-gradient(90deg, transparent 0 6px, var(--sg-line-2) 6px 8px, transparent 8px 14px);
opacity: .55;
}
/* ---------- 5. Main nav -------------------------------------------------- */
.sg-nav {
background: rgba(7, 34, 26, .82);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--sg-line);
position: sticky;
top: 0;
z-index: 50;
}
.sg-nav__row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 28px;
padding: 14px 0;
}
.sg-nav__brand {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--sg-eggshell);
}
.sg-nav__crest {
display: grid;
place-items: center;
width: 44px; height: 44px;
border: 1px solid var(--sg-line-2);
border-radius: 50%;
color: var(--sg-krypto);
background:
radial-gradient(circle, rgba(52, 211, 153, .15), transparent 70%),
var(--sg-moss);
box-shadow: var(--sg-glow-soft);
}
.sg-nav__lockup { display: grid; gap: 1px; line-height: 1; }
.sg-nav__wordmark {
font-family: var(--sg-f-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -.01em;
color: var(--sg-eggshell);
}
.sg-nav__wordmark i {
display: inline-block;
color: var(--sg-krypto);
font-style: normal;
margin: 0 1px;
transform: translateY(-2px);
}
.sg-nav__subline {
font-family: var(--sg-f-body);
font-size: 11px;
letter-spacing: .04em;
text-transform: none;
color: var(--sg-fern);
margin-top: 2px;
}
.sg-nav__menu ul {
display: flex;
gap: 4px;
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
}
.sg-nav__menu a {
display: inline-block;
padding: 10px 14px;
font-family: var(--sg-f-display);
font-weight: 500;
font-size: 14.5px;
color: var(--sg-sage);
text-decoration: none;
border-radius: 4px;
border: 1px solid transparent;
transition: color .15s, background .15s, border-color .15s;
position: relative;
}
.sg-nav__menu a:hover {
color: var(--sg-eggshell);
background: rgba(52, 211, 153, .06);
}
.sg-nav__menu a.is-on {
color: var(--sg-krypto);
background: rgba(52, 211, 153, .08);
border-color: var(--sg-line-2);
}
.sg-nav__menu a.is-on::after {
content: '';
position: absolute; left: 14px; right: 14px; bottom: 4px;
height: 2px;
background: var(--sg-krypto);
box-shadow: 0 0 8px var(--sg-krypto);
}
.sg-nav__util { display: inline-flex; align-items: center; gap: 10px; }
.sg-nav__icon {
width: 40px; height: 40px;
display: inline-grid;
place-items: center;
border: 1px solid var(--sg-line);
border-radius: 50%;
color: var(--sg-sage);
background: var(--sg-moss);
position: relative;
transition: border-color .15s, color .15s, transform .15s;
}
.sg-nav__icon:hover {
border-color: var(--sg-krypto);
color: var(--sg-krypto);
transform: translateY(-1px);
}
.sg-nav__badge {
position: absolute;
top: -4px; right: -4px;
min-width: 18px; height: 18px;
display: inline-grid; place-items: center;
padding: 0 5px;
font-family: var(--sg-f-mono);
font-size: 10px;
font-weight: 700;
color: var(--sg-void);
background: var(--sg-lime);
border-radius: 9px;
}
.sg-nav__cart {
padding: 10px 16px;
font-size: 11.5px;
white-space: nowrap;
}
.sg-nav__cart-label em { font-style: normal; color: var(--sg-void); opacity: .55; padding: 0 4px; }
.sg-nav__burger {
display: none;
width: 40px; height: 40px;
flex-direction: column;
align-items: center; justify-content: center;
gap: 5px;
border: 1px solid var(--sg-line);
border-radius: 4px;
}
.sg-nav__burger span {
display: block;
width: 18px;
height: 2px;
background: var(--sg-krypto);
border-radius: 2px;
}
/* Mobile drawer */
.sg-drawer {
position: fixed; inset: 0;
background: rgba(4, 19, 12, .92);
backdrop-filter: blur(8px);
z-index: 100;
display: none;
}
.sg-drawer[hidden] { display: none; }
.sg-drawer:not([hidden]) { display: block; }
.sg-drawer__panel {
width: min(86vw, 320px);
height: 100%;
background: var(--sg-moss);
border-right: 1px solid var(--sg-line);
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 18px;
}
.sg-drawer__close {
align-self: flex-end;
width: 38px; height: 38px;
font-size: 26px;
border: 1px solid var(--sg-line-2);
color: var(--sg-krypto);
border-radius: 50%;
}
.sg-drawer__brand { color: var(--sg-eggshell); text-decoration: none; }
.sg-drawer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sg-drawer nav a {
display: block;
padding: 12px 14px;
border: 1px solid var(--sg-line);
border-radius: 4px;
background: var(--sg-moss-2);
color: var(--sg-eggshell);
font-family: var(--sg-f-display);
font-weight: 500;
text-decoration: none;
}
.sg-drawer nav a:hover { border-color: var(--sg-krypto); color: var(--sg-krypto); }
.sg-drawer__div { height: 1px; background: var(--sg-line); margin: 6px 0; }
@media (max-width: 1100px) {
.sg-nav__menu a { padding: 10px 10px; font-size: 13.5px; }
.sg-nav__row { gap: 16px; }
}
@media (max-width: 960px) {
.sg-nav__menu { display: none; }
.sg-nav__burger { display: inline-flex; }
.sg-nav__cart-label { display: none; }
.sg-nav__cart { padding: 10px 12px; }
.sg-hud__chunk--right { display: none; }
.sg-hud__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.sg-nav__subline { display: none; }
.sg-nav__crest { width: 38px; height: 38px; }
.sg-nav__wordmark { font-size: 18px; }
.sg-hud__chunk--mid { display: none; }
.sg-hud__row { grid-template-columns: 1fr; }
}
/* ---------- 6. Toast / flash messages ----------------------------------- */
.sg-toaster {
position: fixed;
top: 100px;
right: 24px;
z-index: 90;
display: grid;
gap: 8px;
pointer-events: none;
}
.sg-toast {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 18px 12px 14px;
background: var(--sg-moss-2);
border: 1px solid var(--sg-line-2);
border-left: 3px solid var(--sg-krypto);
border-radius: 4px;
font-family: var(--sg-f-body);
font-size: 14px;
letter-spacing: 0;
color: var(--sg-eggshell);
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
animation: sg-toast-in .25s ease-out, sg-toast-out .25s ease-in 4.5s forwards;
}
.sg-toast__pip {
width: 8px; height: 8px;
background: var(--sg-krypto);
border-radius: 50%;
box-shadow: 0 0 8px var(--sg-krypto);
}
.sg-toast--wishlist { border-left-color: var(--sg-lime); }
.sg-toast--wishlist .sg-toast__pip { background: var(--sg-lime); box-shadow: 0 0 8px var(--sg-lime); }
@keyframes sg-toast-in { from { opacity: 0; transform: translateX(20px); } }
@keyframes sg-toast-out { to { opacity: 0; transform: translateX(20px); } }
/* ---------- 7. Footer --------------------------------------------------- */
.sg-foot {
margin-top: 80px;
background: linear-gradient(180deg, #03110a 0%, #010906 100%);
border-top: 1px solid var(--sg-line);
position: relative;
}
.sg-foot::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--sg-krypto), transparent);
opacity: .55;
}
.sg-foot__manifest {
display: grid;
grid-template-columns: 1fr 1.7fr 1.1fr;
gap: 40px;
padding: 70px 0 50px;
}
.sg-foot__brand { display: grid; gap: 14px; }
.sg-foot__crest { color: var(--sg-krypto); }
.sg-foot__wordmark {
font-family: var(--sg-f-display);
font-size: 28px;
font-weight: 700;
letter-spacing: -.01em;
margin: 0;
color: var(--sg-eggshell);
}
.sg-foot__wordmark i { color: var(--sg-krypto); font-style: normal; }
.sg-foot__pitch {
font-size: 14px;
line-height: 1.7;
color: var(--sg-sage);
margin: 0;
max-width: 36ch;
}
.sg-foot__addr {
font-family: var(--sg-f-body);
font-size: 13px;
line-height: 1.7;
color: var(--sg-fern);
margin: 8px 0 0;
padding-top: 14px;
border-top: 1px dashed var(--sg-line);
}
.sg-foot__addr strong { color: var(--sg-eggshell); font-weight: 600; }
.sg-foot__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.sg-foot__col h4 {
font-family: var(--sg-f-display);
font-size: 17px;
font-weight: 500;
font-style: italic;
letter-spacing: -.005em;
text-transform: none;
color: var(--sg-eggshell);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--sg-line);
}
.sg-foot__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.sg-foot__col a {
color: var(--sg-sage);
font-size: 13.5px;
text-decoration: none;
display: inline-block;
transition: color .15s, transform .15s;
}
.sg-foot__col a:hover { color: var(--sg-krypto); transform: translateX(4px); }
.sg-foot__newsletter {
background:
radial-gradient(180px 80px at 80% 10%, rgba(52, 211, 153, .12), transparent 70%),
var(--sg-moss-2);
border: 1px solid var(--sg-line-2);
border-radius: 10px;
padding: 22px 24px 24px;
}
.sg-foot__newsletter h4 {
font-family: var(--sg-f-display);
font-size: 17px;
margin: 0 0 8px;
color: var(--sg-eggshell);
}
.sg-foot__newsletter > p {
font-size: 13px;
line-height: 1.65;
color: var(--sg-sage);
margin: 0 0 16px;
}
.sg-foot__newsletter-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
background: var(--sg-void);
border: 1px solid var(--sg-line);
border-radius: 4px;
padding: 4px 4px 4px 14px;
}
.sg-foot__newsletter-label {
font-family: var(--sg-f-body);
font-size: 12px;
letter-spacing: .02em;
text-transform: none;
white-space: nowrap;
color: var(--sg-fern);
}
.sg-foot__newsletter input {
background: transparent;
border: 0;
outline: none;
padding: 8px 6px;
font-family: var(--sg-f-body);
font-size: 14px;
color: var(--sg-eggshell);
}
.sg-foot__newsletter input::placeholder { color: var(--sg-mist); }
.sg-foot__newsletter-row .sg-btn { white-space: nowrap; }
.sg-foot__newsletter-fine {
margin: 12px 0 0;
font-family: var(--sg-f-body);
font-size: 12px;
letter-spacing: .01em;
color: var(--sg-mist);
line-height: 1.55;
}
.sg-foot__strap {
border-top: 1px dashed var(--sg-line);
padding: 22px 0 36px;
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
font-family: var(--sg-f-body);
font-size: 12px;
letter-spacing: .01em;
color: var(--sg-mist);
}
.sg-foot__strap-meta { display: inline-flex; gap: 22px; flex-wrap: wrap; }
.sg-foot__strap-meta span::before { content: '◦ '; color: var(--sg-line-2); }
@media (max-width: 960px) {
.sg-foot__manifest { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 50px 0 30px; }
.sg-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-foot__strap { font-size: 10.5px; }
.sg-foot__brand,
.sg-foot__cols,
.sg-foot__col,
.sg-foot__newsletter { min-width: 0; }
.sg-foot__newsletter input { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
.sg-foot__cols { grid-template-columns: minmax(0, 1fr); }
.sg-foot__newsletter-row { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
.sg-foot__newsletter-row .sg-btn { justify-self: stretch; }
}
/* ---------- 8. Product card --------------------------------------------- */
.sg-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
border-radius: 4px;
overflow: hidden;
transition: border-color .2s, transform .2s, box-shadow .2s;
isolation: isolate;
}
.sg-card:hover {
border-color: var(--sg-krypto);
transform: translateY(-3px);
box-shadow:
0 20px 50px -20px rgba(52, 211, 153, .35),
0 0 0 1px rgba(52, 211, 153, .15);
}
.sg-card__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
background:
radial-gradient(circle at 50% 30%, rgba(52, 211, 153, .08), transparent 60%),
linear-gradient(180deg, var(--sg-mantle) 0%, var(--sg-moss) 100%);
overflow: hidden;
border-bottom: 1px solid var(--sg-line);
}
.sg-card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.sg-card:hover .sg-card__media img { transform: scale(1.04); }
.sg-card__corner {
position: absolute;
top: 0; left: 0;
width: 18px; height: 18px;
border-top: 1px solid var(--sg-krypto);
border-left: 1px solid var(--sg-krypto);
z-index: 2;
}
.sg-card__corner--br {
top: auto; left: auto; bottom: 0; right: 0;
border-top: 0; border-left: 0;
border-bottom: 1px solid var(--sg-krypto);
border-right: 1px solid var(--sg-krypto);
}
.sg-card__flags {
position: absolute;
top: 10px; left: 10px;
display: inline-flex;
gap: 6px;
z-index: 3;
}
.sg-flag {
display: inline-flex;
align-items: center;
padding: 4px 11px;
font-family: var(--sg-f-body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0;
border-radius: 999px;
text-transform: none;
}
/* on-sale flag — quiet eggshell pill on a thin border, no green shouting */
.sg-flag--off { background: var(--sg-lime); color: var(--sg-void); font-weight: 700; }
/* new/fresh — thin outlined eggshell pill, calm */
.sg-flag--new { background: transparent; color: var(--sg-eggshell); border: 1px solid var(--sg-line-2); font-weight: 500; }
.sg-card__plat {
position: absolute;
right: 10px; bottom: 10px;
padding: 3px 10px;
background: rgba(4, 19, 12, .85);
border: 1px solid var(--sg-line-2);
font-family: var(--sg-f-body);
font-size: 11px;
letter-spacing: 0;
text-transform: none;
color: var(--sg-eggshell);
border-radius: 999px;
z-index: 3;
}
.sg-card__wish {
position: absolute;
top: 10px; right: 10px;
z-index: 4;
margin: 0;
}
.sg-card__wish-btn {
width: 34px; height: 34px;
display: grid; place-items: center;
background: rgba(4, 19, 12, .82);
border: 1px solid var(--sg-line-2);
border-radius: 50%;
color: var(--sg-sage);
transition: color .15s, border-color .15s, transform .15s;
}
.sg-card__wish-btn:hover { color: var(--sg-krypto); border-color: var(--sg-krypto); transform: scale(1.06); }
.sg-card__wish-btn.is-on { color: var(--sg-krypto); border-color: var(--sg-krypto); background: rgba(52, 211, 153, .15); }
.sg-card__body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.sg-card__bucket {
font-family: var(--sg-f-body);
font-size: 11.5px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--sg-fern);
margin: 0;
}
.sg-card__title {
margin: 0;
font-family: var(--sg-f-display);
font-size: 17px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.005em;
}
.sg-card__title a { color: var(--sg-eggshell); text-decoration: none; }
.sg-card__title a:hover { color: var(--sg-krypto); }
.sg-card__teaser {
font-family: var(--sg-f-mono);
font-size: 11.5px;
line-height: 1.55;
color: var(--sg-sage);
margin: 0;
letter-spacing: .01em;
}
.sg-card__price {
margin-top: auto;
padding-top: 10px;
display: flex;
align-items: baseline;
gap: 10px;
}
.sg-card__price-now {
font-family: var(--sg-f-display);
font-size: 22px;
font-weight: 700;
color: var(--sg-krypto);
letter-spacing: -.01em;
}
.sg-card__price-old {
font-family: var(--sg-f-mono);
font-size: 12.5px;
color: var(--sg-mist);
text-decoration: line-through;
}
.sg-card__cta { margin: 4px 0 0; }
.sg-card__cta button { width: 100%; }
/* Grid helper */
.sg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px;
}
.sg-grid--4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sg-grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* ---------- 9. Hero slider ---------------------------------------------- */
.sg-hero {
position: relative;
padding: 30px 0 50px;
overflow: hidden;
}
.sg-slider {
position: relative;
border: 1px solid var(--sg-line-2);
border-radius: var(--sg-radius-lg);
background: var(--sg-moss);
overflow: hidden;
isolation: isolate;
}
.sg-slider::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 90% at 10% 50%, rgba(52, 211, 153, .12), transparent 70%),
radial-gradient(40% 60% at 100% 0%, rgba(132, 204, 22, .07), transparent 70%);
pointer-events: none;
z-index: 0;
}
.sg-slider__viewport {
position: relative;
z-index: 1;
overflow: hidden;
}
.sg-slider__track {
display: flex;
transition: transform .6s cubic-bezier(.6, .05, .15, .9);
will-change: transform;
}
.sg-slide {
flex: 0 0 100%;
min-width: 100%;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 36px;
padding: 56px clamp(28px, 4vw, 60px);
align-items: center;
min-height: 460px;
position: relative;
}
.sg-slide__copy { display: grid; gap: 18px; }
.sg-slide__no {
font-family: var(--sg-f-body);
font-size: 12.5px;
letter-spacing: .01em;
color: var(--sg-sage);
font-weight: 500;
text-transform: none;
display: inline-flex;
align-items: center;
gap: 12px;
}
.sg-slide__no::before {
content: '';
width: 30px; height: 1px;
background: var(--sg-fern);
}
.sg-slide__title {
font-family: var(--sg-f-display);
font-size: clamp(38px, 5vw, 64px);
font-weight: 700;
line-height: 1.02;
letter-spacing: -.02em;
color: var(--sg-eggshell);
margin: 0;
}
.sg-slide__title em {
font-style: italic;
color: var(--sg-eggshell);
font-weight: 500;
}
.sg-slide__title span {
display: inline-block;
font-family: var(--sg-f-body);
font-size: .28em;
letter-spacing: .02em;
vertical-align: middle;
text-transform: none;
color: var(--sg-sage);
background: transparent;
padding: 6px 12px;
border: 1px solid var(--sg-line-2);
border-radius: 999px;
margin-left: 10px;
font-weight: 500;
}
.sg-slide__lead {
font-size: 16px;
line-height: 1.7;
color: var(--sg-sage);
margin: 0;
max-width: 50ch;
}
.sg-slide__meta {
display: flex;
gap: 28px;
flex-wrap: wrap;
font-family: var(--sg-f-body);
font-size: 13px;
letter-spacing: .005em;
text-transform: none;
color: var(--sg-fern);
padding: 16px 0 14px;
border-top: 1px dashed var(--sg-line);
border-bottom: 1px dashed var(--sg-line);
}
.sg-slide__meta strong { color: var(--sg-eggshell); font-weight: 500; }
.sg-slide__cta { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.sg-slide__art {
position: relative;
height: 360px;
border-radius: 10px;
overflow: hidden;
background:
linear-gradient(135deg, var(--sg-moss-3) 0%, var(--sg-mantle) 100%);
border: 1px solid var(--sg-line-2);
box-shadow:
inset 0 0 0 1px rgba(52, 211, 153, .08),
0 30px 60px -30px rgba(0, 0, 0, .9);
}
.sg-slide__art img {
width: 100%; height: 100%;
object-fit: cover;
mix-blend-mode: luminosity;
opacity: .9;
}
.sg-slide__art::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(45deg, rgba(52, 211, 153, .25) 0%, transparent 40%),
repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px);
mix-blend-mode: overlay;
pointer-events: none;
}
.sg-slide__art::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 60px; height: 60px;
border-top: 2px solid var(--sg-krypto);
border-left: 2px solid var(--sg-krypto);
z-index: 2;
}
.sg-slide__priceflag {
position: absolute;
bottom: 18px; left: 18px;
background: var(--sg-void);
border: 1px solid var(--sg-krypto);
padding: 10px 16px;
font-family: var(--sg-f-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--sg-krypto);
border-radius: 2px;
display: grid;
gap: 2px;
box-shadow: var(--sg-glow-soft);
z-index: 3;
}
.sg-slide__priceflag strong {
font-family: var(--sg-f-display);
font-size: 22px;
font-weight: 700;
color: var(--sg-eggshell);
}
/* Controls */
.sg-slider__controls {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 22px;
border-top: 1px solid var(--sg-line);
background: rgba(4, 19, 12, .6);
position: relative;
z-index: 2;
}
.sg-slider__dots {
display: flex;
gap: 8px;
flex: 1;
}
.sg-slider__dot {
flex: 1;
height: 4px;
background: var(--sg-line);
border: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
position: relative;
overflow: hidden;
}
.sg-slider__dot::after {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 0;
background: var(--sg-krypto);
box-shadow: 0 0 8px var(--sg-krypto);
}
.sg-slider__dot.is-active::after {
width: 100%;
transition: width 6.5s linear;
}
.sg-slider__arrows { display: inline-flex; gap: 6px; }
.sg-slider__arrow {
width: 38px; height: 38px;
display: grid; place-items: center;
border: 1px solid var(--sg-line-2);
border-radius: 50%;
color: var(--sg-krypto);
transition: border-color .15s, transform .15s;
}
.sg-slider__arrow:hover { border-color: var(--sg-krypto); transform: scale(1.05); }
.sg-slider__count {
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .12em;
color: var(--sg-fern);
text-transform: uppercase;
}
.sg-slider__count strong { color: var(--sg-krypto); }
@media (max-width: 880px) {
.sg-slide { grid-template-columns: 1fr; padding: 40px 24px; min-height: auto; }
.sg-slide__art { height: 260px; }
.sg-slider__dots { display: none; }
.sg-slider__controls { justify-content: space-between; }
}
/* ---------- 10. Section atoms ------------------------------------------- */
.sg-section { padding: 60px 0; }
.sg-section--tight { padding: 36px 0; }
.sg-section--alt {
background:
linear-gradient(180deg, transparent 0%, var(--sg-moss) 50%, transparent 100%);
}
.sg-section__head {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: end;
margin-bottom: 26px;
padding-bottom: 14px;
border-bottom: 1px solid var(--sg-line);
}
.sg-section__head h2 {
font-family: var(--sg-f-display);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 500;
letter-spacing: -.02em;
line-height: 1.08;
margin: 8px 0 0;
color: var(--sg-eggshell);
}
.sg-section__head h2 em { font-style: italic; font-weight: 500; color: var(--sg-eggshell); }
.sg-section__head p {
margin: 6px 0 0;
color: var(--sg-sage);
font-size: 14.5px;
max-width: 56ch;
line-height: 1.6;
}
.sg-section__more {
font-family: var(--sg-f-mono);
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sg-krypto);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 4px;
}
.sg-section__more::after {
content: '';
transition: transform .15s;
}
.sg-section__more:hover { color: var(--sg-lime-2); }
.sg-section__more:hover::after { transform: translateX(4px); }
@media (max-width: 700px) {
.sg-section__head { grid-template-columns: 1fr; }
}
/* ---------- 11. Home bricks / strips ---------------------------------- */
.sg-bricks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 10px 0 40px;
}
.sg-brick {
position: relative;
padding: 22px 22px 24px;
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
border-radius: 6px;
display: grid;
gap: 8px;
text-decoration: none;
transition: border-color .2s, transform .2s, box-shadow .2s;
overflow: hidden;
}
.sg-brick::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--sg-krypto);
opacity: .4;
}
.sg-brick:hover {
border-color: var(--sg-krypto);
transform: translateY(-2px);
box-shadow: var(--sg-glow-soft);
}
.sg-brick:hover::before { opacity: 1; box-shadow: 0 0 12px var(--sg-krypto); }
.sg-brick__num {
font-family: var(--sg-f-mono);
font-size: 10.5px;
letter-spacing: .2em;
color: var(--sg-fern);
text-transform: uppercase;
}
.sg-brick__title {
font-family: var(--sg-f-display);
font-size: 18px;
font-weight: 600;
letter-spacing: -.005em;
color: var(--sg-eggshell);
margin: 0;
}
.sg-brick__lead {
font-family: var(--sg-f-mono);
font-size: 11.5px;
line-height: 1.65;
color: var(--sg-sage);
margin: 0;
}
@media (max-width: 880px) { .sg-bricks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sg-bricks { grid-template-columns: 1fr; } }
/* Long marquee strip with category cuts */
.sg-marquee {
background: linear-gradient(180deg, #051a12 0%, #06231a 100%);
border-top: 1px solid var(--sg-line);
border-bottom: 1px solid var(--sg-line);
padding: 14px 0;
margin: 50px 0;
overflow: hidden;
}
.sg-marquee__track {
display: flex;
gap: 40px;
white-space: nowrap;
font-family: var(--sg-f-mono);
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sg-krypto);
animation: sg-marquee 36s linear infinite;
}
.sg-marquee__track span::before { content: ' '; color: var(--sg-lime); }
@keyframes sg-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Spotlight banner wide horizontal card, half art half text */
.sg-spotlight {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
margin: 50px 0;
border: 1px solid var(--sg-line-2);
border-radius: var(--sg-radius-lg);
overflow: hidden;
background: var(--sg-moss);
min-height: 360px;
}
.sg-spotlight__art {
position: relative;
background-size: cover;
background-position: center;
filter: saturate(.7) contrast(1.05);
}
.sg-spotlight__art::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(7,34,26,.55) 70%, var(--sg-moss) 100%),
linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
}
.sg-spotlight__copy {
padding: 48px clamp(28px, 4vw, 56px);
display: grid;
gap: 18px;
align-content: center;
}
.sg-spotlight__title {
font-family: var(--sg-f-display);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -.015em;
color: var(--sg-eggshell);
margin: 0;
}
.sg-spotlight__title em { color: var(--sg-eggshell); font-style: italic; font-weight: 500; }
.sg-spotlight__lead {
color: var(--sg-sage);
font-size: 15px;
line-height: 1.7;
margin: 0;
max-width: 52ch;
}
.sg-spotlight__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
border-top: 1px dashed var(--sg-line);
padding-top: 16px;
}
.sg-spotlight__list li {
position: relative;
padding-left: 24px;
font-family: var(--sg-f-mono);
font-size: 12.5px;
line-height: 1.65;
color: var(--sg-sage);
letter-spacing: .02em;
}
.sg-spotlight__list li::before {
content: '';
position: absolute; left: 0; top: 0;
color: var(--sg-krypto);
}
.sg-spotlight__list strong { color: var(--sg-eggshell); font-weight: 600; }
.sg-spotlight__cta { padding-top: 12px; }
@media (max-width: 880px) {
.sg-spotlight { grid-template-columns: 1fr; }
.sg-spotlight__art { min-height: 260px; }
}
/* ---------- 12. Drop list (vault index style) --------------------------- */
.sg-droplist {
display: grid;
gap: 0;
border: 1px solid var(--sg-line);
border-radius: 6px;
overflow: hidden;
background: var(--sg-moss-2);
}
.sg-droplist__row {
display: grid;
grid-template-columns: 60px 100px 1fr auto auto;
gap: 20px;
align-items: center;
padding: 16px 22px;
border-bottom: 1px dashed var(--sg-line);
text-decoration: none;
color: var(--sg-eggshell);
transition: background .15s;
}
.sg-droplist__row:last-child { border-bottom: 0; }
.sg-droplist__row:hover { background: rgba(52, 211, 153, .06); }
.sg-droplist__no {
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .12em;
color: var(--sg-fern);
font-weight: 700;
}
.sg-droplist__thumb {
width: 100px; height: 70px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var(--sg-line);
background: var(--sg-moss);
}
.sg-droplist__main h4 {
margin: 0 0 4px;
font-size: 17px;
font-weight: 600;
}
.sg-droplist__meta {
font-family: var(--sg-f-mono);
font-size: 11.5px;
color: var(--sg-fern);
letter-spacing: .02em;
}
.sg-droplist__plat {
padding: 4px 10px;
background: var(--sg-mantle);
border: 1px solid var(--sg-line);
font-family: var(--sg-f-mono);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sg-krypto);
border-radius: 2px;
}
.sg-droplist__price {
font-family: var(--sg-f-display);
font-size: 22px;
font-weight: 700;
color: var(--sg-krypto);
white-space: nowrap;
}
.sg-droplist__price small {
display: block;
font-size: 11px;
color: var(--sg-mist);
text-decoration: line-through;
text-align: right;
}
@media (max-width: 760px) {
.sg-droplist__row { grid-template-columns: 80px 1fr auto; }
.sg-droplist__no, .sg-droplist__plat { display: none; }
}
/* ====================================================================== */
/* PAGEHEAD — "Camden Vault Bench Docket" */
/* A heavily-decorated header that DOES NOT look like a generic shop */
/* hero. It uses CSS-only chrome (rails, perforation, stamped tags, */
/* layered patterns) plus body-class variants for per-page personality. */
/* ====================================================================== */
.sg-pagehead {
position: relative;
isolation: isolate;
padding: 78px 0 38px;
margin-bottom: 6px;
overflow: hidden;
border-bottom: 1px solid var(--sg-line-2);
/* Layered background:
1) subtle krypto radial spotlight from top-right
2) deeper green fade at bottom-left
3) very faint grid-paper texture (CSS pattern)
4) diagonal hazard-tape inspired stripes, low opacity */
background-color: #03100a;
background-image:
radial-gradient(70% 55% at 100% 0%, rgba(132,204,22,0.10), transparent 65%),
radial-gradient(40% 55% at 0% 100%, rgba(132,204,22,0.045), transparent 70%),
linear-gradient(0deg, rgba(2,12,7,.6), rgba(2,12,7,0) 60%),
repeating-linear-gradient(90deg, rgba(132,204,22,0.045) 0 1px, transparent 1px 32px),
repeating-linear-gradient(0deg, rgba(132,204,22,0.035) 0 1px, transparent 1px 32px),
repeating-linear-gradient(135deg,
rgba(132,204,22,0.05) 0 2px,
transparent 2px 14px);
background-blend-mode: normal, normal, normal, normal, normal, normal;
}
/* Diamond crest watermark, big, low-opacity, anchored bottom-right */
.sg-pagehead::before {
content: "";
position: absolute;
right: -40px; bottom: -60px;
width: 380px; height: 380px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0.06;
pointer-events: none;
z-index: 0;
}
/* Vertical brand rail running down the left edge — printed mono caption
with diamond ticks, separated from the page by a faint krypto hairline. */
.sg-pagehead::after {
content: "VAULT 03 · INVERNESS ST · CAMDEN · EST 2019";
position: absolute;
left: 18px;
top: 50%;
transform: rotate(-90deg) translate(0, -8px);
transform-origin: left top;
font-family: var(--sg-f-mono);
font-size: 10.5px;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--sg-fern);
opacity: .55;
white-space: nowrap;
pointer-events: none;
z-index: 0;
}
/* All real content stays above the chrome */
.sg-pagehead > * { position: relative; z-index: 1; }
/* Bench-docket: tilted paper tag floating top-right, hand-stamped feel */
.sg-pagehead .sg-container { position: relative; padding-left: 56px; padding-right: 56px; }
.sg-pagehead .sg-container::after {
content: "VAULT MARK · ◆";
position: absolute;
top: 4px;
right: 56px;
padding: 8px 14px 9px;
background: var(--sg-void);
border: 1px solid var(--sg-krypto);
color: var(--sg-krypto);
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
transform: rotate(3.5deg);
box-shadow: 0 12px 30px -12px rgba(132,204,22,0.4), inset 0 0 0 1px rgba(132,204,22,0.05);
pointer-events: none;
white-space: nowrap;
}
/* Crumb takes mono pip + slashes look */
.sg-pagehead__crumb {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--sg-fern);
margin-bottom: 22px;
}
.sg-pagehead__crumb::before {
content: "◆";
margin-right: 8px;
color: var(--sg-krypto);
font-size: 10px;
}
.sg-pagehead__crumb a { color: var(--sg-sage); text-decoration: none; }
.sg-pagehead__crumb a:hover { color: var(--sg-krypto); }
.sg-pagehead__crumb span { color: var(--sg-line-2); }
.sg-pagehead__crumb em { color: var(--sg-eggshell); font-style: normal; font-weight: 500; }
/* The eyebrow (the small line above the title) becomes a "tag" pill */
.sg-pagehead .sg-eyebrow {
display: inline-block;
margin: 0 0 18px;
padding: 6px 14px 7px 26px;
position: relative;
background: rgba(132,204,22,0.07);
border: 1px solid rgba(132,204,22,0.28);
border-radius: 99px;
font-family: var(--sg-f-body);
font-size: 11.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sg-krypto);
text-decoration: none;
}
.sg-pagehead .sg-eyebrow::before {
content: "";
position: absolute;
left: 12px; top: 50%;
width: 8px; height: 8px;
margin-top: -4px;
background: var(--sg-krypto);
transform: rotate(45deg);
border-radius: 1px;
}
.sg-pagehead h1 {
font-family: var(--sg-f-display);
font-size: clamp(38px, 5.4vw, 70px);
font-weight: 700;
line-height: 1.0;
letter-spacing: -.028em;
margin: 0 0 14px;
color: var(--sg-eggshell);
max-width: 22ch;
text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.sg-pagehead h1 em {
font-style: italic;
color: var(--sg-eggshell);
font-weight: 500;
/* underline-by-baseline tease */
background-image: linear-gradient(180deg, transparent 78%, rgba(132,204,22,0.5) 78%, rgba(132,204,22,0.5) 90%, transparent 90%);
padding: 0 .04em;
}
.sg-pagehead__lede {
font-family: var(--sg-f-body);
font-size: 16px;
line-height: 1.7;
color: var(--sg-sage);
margin: 0 0 22px;
max-width: 58ch;
}
/* Meta strip becomes "rubber-stamped" pill row with a leading bar */
.sg-pagehead__meta {
display: flex;
gap: 8px 12px;
flex-wrap: wrap;
padding: 16px 0 4px;
margin: 0;
border-top: 1px dashed var(--sg-line);
font-family: var(--sg-f-body);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sg-fern);
}
.sg-pagehead__meta::before {
content: "BENCH NOTES";
flex: 0 0 100%;
margin: 0 0 8px;
font-family: var(--sg-f-mono);
font-size: 10px;
letter-spacing: .3em;
color: var(--sg-krypto);
opacity: .85;
}
.sg-pagehead__meta > span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 5px;
background: var(--sg-void);
border: 1px solid var(--sg-line);
border-radius: 3px;
}
.sg-pagehead__meta strong { color: var(--sg-krypto); letter-spacing: .05em; font-family: var(--sg-f-mono); }
/* Perforation along the bottom edge — gives the "tear-off ticket" feel */
.sg-pagehead {
/* extra padding for the perforation row */
padding-bottom: 46px;
}
.sg-pagehead > .sg-container::before {
content: "";
position: absolute;
left: 0; right: 0; bottom: -38px;
height: 14px;
background-image: radial-gradient(circle at 12px 7px, var(--sg-void) 3.5px, transparent 4px);
background-size: 24px 14px;
background-repeat: repeat-x;
pointer-events: none;
opacity: .9;
}
/* L-cut corner ticks — make the head look like it was cut out from card stock */
.sg-pagehead > .sg-container > *:last-child {
position: relative;
}
/* PER-PAGE PERSONALITY — body-class variants change the docket tag,
accent tint and the secondary radial colour. Each section gets its
own identity so nothing reads as "the same hero block". */
/* Shop / Vault — kryptonite green */
body.is-shop .sg-pagehead .sg-container::after,
body.is-category .sg-pagehead .sg-container::after { content: "VAULT FLOOR · ◆"; }
/* About — moss/sage tint, sticker says "EST 2019" */
body.is-about .sg-pagehead {
background-image:
radial-gradient(60% 55% at 100% 0%, rgba(132,204,22,0.07), transparent 65%),
radial-gradient(38% 50% at 0% 100%, rgba(245,158,11,0.04), transparent 70%),
linear-gradient(0deg, rgba(2,12,7,.6), rgba(2,12,7,0) 60%),
repeating-linear-gradient(90deg, rgba(132,204,22,0.045) 0 1px, transparent 1px 32px),
repeating-linear-gradient(0deg, rgba(132,204,22,0.035) 0 1px, transparent 1px 32px),
repeating-linear-gradient(135deg, rgba(132,204,22,0.05) 0 2px, transparent 2px 14px);
}
body.is-about .sg-pagehead .sg-container::after { content: "EST 2019 · ◆"; transform: rotate(-2.5deg); }
/* Contact — warmer amber accent, sticker mimics a stamped address tag */
body.is-contact .sg-pagehead {
background-image:
radial-gradient(60% 55% at 100% 0%, rgba(245,158,11,0.10), transparent 65%),
radial-gradient(40% 55% at 0% 100%, rgba(132,204,22,0.045), transparent 70%),
linear-gradient(0deg, rgba(2,12,7,.6), rgba(2,12,7,0) 60%),
repeating-linear-gradient(90deg, rgba(245,158,11,0.05) 0 1px, transparent 1px 32px),
repeating-linear-gradient(0deg, rgba(132,204,22,0.035) 0 1px, transparent 1px 32px),
repeating-linear-gradient(135deg, rgba(245,158,11,0.05) 0 2px, transparent 2px 14px);
}
body.is-contact .sg-pagehead .sg-container::after {
content: "POSTAL CODE · NW1 7HJ";
border-color: var(--sg-amber, #f59e0b);
color: var(--sg-amber, #f59e0b);
transform: rotate(-4deg);
}
body.is-contact .sg-pagehead::before { filter: hue-rotate(30deg); opacity: .07; }
/* Returns / Shipping / Terms / Privacy — paperwork accent */
body.is-returns .sg-pagehead .sg-container::after { content: "FORM RET-14 · ◆"; transform: rotate(-3deg); }
body.is-shipping .sg-pagehead .sg-container::after { content: "ROUTE · TRACKED 24"; }
body.is-terms .sg-pagehead .sg-container::after { content: "FILED · COMPANIES HOUSE"; transform: rotate(-2deg); }
body.is-privacy .sg-pagehead .sg-container::after { content: "UK GDPR · ICO·LOG"; transform: rotate(4deg); }
body.is-sitemap .sg-pagehead .sg-container::after { content: "SHELF MAP · A→Z"; }
/* Workshop — solder-station accent */
body.is-workshop .sg-pagehead {
background-image:
radial-gradient(60% 55% at 100% 0%, rgba(132,204,22,0.10), transparent 65%),
radial-gradient(38% 50% at 12% 100%, rgba(245,158,11,0.06), transparent 70%),
linear-gradient(0deg, rgba(2,12,7,.6), rgba(2,12,7,0) 60%),
repeating-linear-gradient(90deg, rgba(132,204,22,0.05) 0 1px, transparent 1px 28px),
repeating-linear-gradient(0deg, rgba(132,204,22,0.035) 0 1px, transparent 1px 28px),
repeating-linear-gradient(45deg, rgba(132,204,22,0.05) 0 2px, transparent 2px 12px);
}
body.is-workshop .sg-pagehead .sg-container::after { content: "BENCH 01·02 · PAD BAY"; transform: rotate(-3deg); }
/* Trade-in — ledger accent, two-tone stripes */
body.is-trade-in .sg-pagehead {
background-image:
radial-gradient(60% 55% at 100% 0%, rgba(132,204,22,0.08), transparent 65%),
radial-gradient(38% 50% at 0% 100%, rgba(132,204,22,0.05), transparent 70%),
linear-gradient(0deg, rgba(2,12,7,.6), rgba(2,12,7,0) 60%),
repeating-linear-gradient(0deg, rgba(132,204,22,0.05) 0 1px, transparent 1px 22px),
repeating-linear-gradient(135deg, rgba(132,204,22,0.045) 0 1px, transparent 1px 32px);
}
body.is-trade-in .sg-pagehead .sg-container::after { content: "INTAKE LEDGER · ◆"; }
/* Journal index — newspaper accent */
body.is-journal .sg-pagehead {
background-image:
radial-gradient(60% 55% at 100% 0%, rgba(132,204,22,0.07), transparent 65%),
radial-gradient(40% 55% at 0% 100%, rgba(132,204,22,0.04), transparent 70%),
linear-gradient(0deg, rgba(2,12,7,.6), rgba(2,12,7,0) 60%),
repeating-linear-gradient(0deg, rgba(132,204,22,0.04) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(132,204,22,0.06) 0 1px, transparent 1px 240px);
}
body.is-journal .sg-pagehead .sg-container::after { content: "FILED · ISSUE 05"; transform: rotate(-2deg); }
/* Drops — sale-spotlight accent (subtle, never garish) */
body.is-drops .sg-pagehead .sg-container::after { content: "DROP NO. 47"; transform: rotate(4deg); }
/* Wishlist / cart / checkout / order — operational accent (orange amber) */
body.is-wishlist .sg-pagehead .sg-container::after { content: "STASH · TRACKING"; }
body.is-cart .sg-pagehead .sg-container::after { content: "MANIFEST · DRAFT"; transform: rotate(-3deg); }
body.is-checkout .sg-pagehead .sg-container::after { content: "LOCK ROOM · 3DS"; }
body.is-order-complete .sg-pagehead .sg-container::after { content: "LOCKED · PACKED"; transform: rotate(2deg); }
/* 404 — broken-tag accent */
body.is-404 .sg-pagehead .sg-container::after { content: "VOID · BAY UNLOCKED"; transform: rotate(-6deg); border-color: var(--sg-orange); color: var(--sg-orange); }
/* Responsive — drop the side rail, dampen the sticker on narrow screens */
@media (max-width: 880px) {
.sg-pagehead { padding: 56px 0 32px; padding-bottom: 38px; }
.sg-pagehead::after { display: none; }
.sg-pagehead .sg-container { padding-left: 18px; padding-right: 18px; }
.sg-pagehead .sg-container::after { right: 18px; top: -2px; font-size: 10px; padding: 6px 10px 7px; }
.sg-pagehead h1 { font-size: clamp(30px, 8vw, 44px); max-width: none; }
.sg-pagehead::before { width: 220px; height: 220px; right: -50px; bottom: -50px; opacity: .05; }
}
@media (max-width: 540px) {
.sg-pagehead .sg-container::after { display: none; }
}
/* Filter / toolbar */
.sg-toolbar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 18px 0;
border-bottom: 1px dashed var(--sg-line);
margin-bottom: 30px;
}
.sg-toolbar__count {
font-family: var(--sg-f-mono);
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sg-fern);
}
.sg-toolbar__count strong { color: var(--sg-krypto); }
.sg-toolbar__chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
flex: 1;
justify-content: center;
}
.sg-chip {
display: inline-flex;
align-items: center;
padding: 7px 14px;
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sg-sage);
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
border-radius: 999px;
text-decoration: none;
transition: color .15s, border-color .15s, background .15s;
}
.sg-chip:hover { color: var(--sg-krypto); border-color: var(--sg-krypto); }
.sg-chip.is-on { color: var(--sg-void); background: var(--sg-krypto); border-color: var(--sg-krypto); }
.sg-chip span { opacity: .55; margin-left: 6px; }
.sg-toolbar select {
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
color: var(--sg-eggshell);
padding: 8px 30px 8px 14px;
font-family: var(--sg-f-mono);
font-size: 12px;
letter-spacing: .08em;
border-radius: 2px;
cursor: pointer;
appearance: none;
background-image: linear-gradient(45deg, transparent 45%, var(--sg-krypto) 45% 55%, transparent 55%),
linear-gradient(-45deg, transparent 45%, var(--sg-krypto) 45% 55%, transparent 55%);
background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
background-size: 5px 5px;
background-repeat: no-repeat;
}
/* Empty state */
.sg-empty {
border: 1px dashed var(--sg-line-2);
border-radius: 6px;
padding: 56px 30px;
text-align: center;
display: grid;
gap: 14px;
justify-items: center;
background: var(--sg-moss);
}
.sg-empty h3 {
font-family: var(--sg-f-display);
font-size: 22px;
color: var(--sg-eggshell);
margin: 0;
}
.sg-empty p {
color: var(--sg-sage);
max-width: 50ch;
margin: 0;
}
/* ---------- 14. Product detail page ------------------------------------- */
.sg-pdp {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 50px;
align-items: start;
padding: 40px 0 60px;
}
.sg-gallery {
position: relative;
border: 1px solid var(--sg-line-2);
border-radius: var(--sg-radius-lg);
background: var(--sg-moss-2);
overflow: hidden;
}
.sg-gallery__main {
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
padding: 36px;
background:
radial-gradient(60% 60% at 50% 30%, rgba(52,211,153,.1), transparent 70%);
}
.sg-gallery__main img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
}
.sg-gallery__thumbs {
display: flex;
gap: 8px;
padding: 14px 18px 18px;
flex-wrap: wrap;
border-top: 1px dashed var(--sg-line);
}
.sg-gallery__thumb {
width: 70px; height: 56px;
border: 1px solid var(--sg-line);
border-radius: 3px;
overflow: hidden;
cursor: pointer;
padding: 0;
background: var(--sg-moss);
transition: border-color .15s, transform .15s;
}
.sg-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-gallery__thumb:hover { border-color: var(--sg-krypto); transform: translateY(-2px); }
.sg-gallery__thumb.is-on { border-color: var(--sg-krypto); box-shadow: 0 0 0 1px var(--sg-krypto); }
.sg-pdp__copy { display: grid; gap: 16px; }
.sg-pdp__bucket {
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--sg-krypto);
margin: 0;
}
.sg-pdp__title {
font-family: var(--sg-f-display);
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.05;
margin: 0;
color: var(--sg-eggshell);
}
.sg-pdp__meta {
font-family: var(--sg-f-mono);
font-size: 12px;
line-height: 1.7;
color: var(--sg-sage);
margin: 0;
letter-spacing: .02em;
}
.sg-pdp__meta strong { color: var(--sg-eggshell); font-weight: 600; }
.sg-pdp__pricebox {
background:
linear-gradient(135deg, rgba(52, 211, 153, .05) 0%, transparent 50%),
var(--sg-moss-2);
border: 1px solid var(--sg-line-2);
border-radius: 8px;
padding: 22px 24px;
display: grid;
gap: 14px;
position: relative;
margin-top: 6px;
}
.sg-pdp__pricebox::before {
content: '';
position: absolute;
top: 0; left: 22px; right: 22px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sg-krypto), transparent);
}
.sg-pdp__price {
font-family: var(--sg-f-display);
font-size: 40px;
font-weight: 700;
letter-spacing: -.02em;
line-height: 1;
color: var(--sg-krypto);
display: flex;
align-items: baseline;
gap: 14px;
}
.sg-pdp__price-old {
font-family: var(--sg-f-mono);
font-size: 16px;
color: var(--sg-mist);
text-decoration: line-through;
font-weight: 400;
}
.sg-pdp__price-off {
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .12em;
color: var(--sg-void);
background: var(--sg-lime);
padding: 4px 8px;
border-radius: 2px;
text-transform: uppercase;
}
.sg-pdp__shipnote {
font-family: var(--sg-f-mono);
font-size: 11px;
color: var(--sg-fern);
letter-spacing: .04em;
line-height: 1.65;
margin: 0;
}
.sg-pdp__buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sg-pdp__buttons .sg-btn { flex: 1; min-width: 200px; }
.sg-pdp__facts {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
padding-top: 14px;
border-top: 1px dashed var(--sg-line);
}
.sg-pdp__facts li {
font-family: var(--sg-f-mono);
font-size: 12px;
line-height: 1.6;
color: var(--sg-sage);
}
.sg-pdp__facts strong { color: var(--sg-eggshell); font-weight: 600; }
.sg-pdp__desc {
margin: 36px 0 0;
padding: 30px 0 0;
border-top: 1px solid var(--sg-line);
max-width: 70ch;
}
.sg-pdp__desc h3 {
font-family: var(--sg-f-display);
font-size: 22px;
margin: 0 0 14px;
color: var(--sg-eggshell);
}
.sg-pdp__desc p {
font-size: 15.5px;
line-height: 1.78;
color: var(--sg-eggshell);
margin: 0 0 14px;
}
@media (max-width: 880px) {
.sg-pdp { grid-template-columns: 1fr; gap: 28px; }
}
/* ---------- 15. Cart / checkout / order-complete ------------------------ */
.sg-cart-wrap {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 40px;
align-items: start;
padding: 30px 0 60px;
}
.sg-cart-list {
display: grid;
gap: 14px;
}
.sg-cart-line {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 20px;
align-items: center;
padding: 18px;
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
border-radius: 6px;
}
.sg-cart-line__thumb {
width: 110px; height: 90px;
object-fit: cover;
border-radius: 4px;
background: var(--sg-moss);
}
.sg-cart-line__title {
margin: 0 0 4px;
font-family: var(--sg-f-display);
font-size: 17px;
font-weight: 600;
}
.sg-cart-line__title a { color: var(--sg-eggshell); text-decoration: none; }
.sg-cart-line__title a:hover { color: var(--sg-krypto); }
.sg-cart-line__meta {
font-family: var(--sg-f-mono);
font-size: 11.5px;
color: var(--sg-fern);
letter-spacing: .02em;
}
.sg-cart-line__ctrls {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--sg-line);
border-radius: 4px;
padding: 2px;
background: var(--sg-void);
}
.sg-cart-line__ctrls button {
width: 28px; height: 28px;
display: grid; place-items: center;
color: var(--sg-krypto);
font-family: var(--sg-f-mono);
font-weight: 700;
font-size: 14px;
}
.sg-cart-line__ctrls input {
width: 36px;
background: transparent;
border: 0;
text-align: center;
font-family: var(--sg-f-mono);
font-weight: 700;
color: var(--sg-eggshell);
outline: none;
}
.sg-cart-line__right {
display: grid;
gap: 4px;
text-align: right;
}
.sg-cart-line__price {
font-family: var(--sg-f-display);
font-size: 20px;
font-weight: 700;
color: var(--sg-krypto);
}
.sg-cart-line__remove {
font-family: var(--sg-f-mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sg-mist);
text-decoration: none;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
}
.sg-cart-line__remove:hover { color: var(--sg-orange); }
.sg-cart-summary {
position: sticky;
top: 110px;
background: var(--sg-moss-2);
border: 1px solid var(--sg-line-2);
border-radius: 8px;
padding: 24px;
display: grid;
gap: 12px;
}
.sg-cart-summary h3 {
font-family: var(--sg-f-display);
font-size: 20px;
margin: 0 0 6px;
color: var(--sg-eggshell);
padding-bottom: 10px;
border-bottom: 1px dashed var(--sg-line);
}
.sg-cart-summary__row {
display: flex;
justify-content: space-between;
font-family: var(--sg-f-mono);
font-size: 13px;
color: var(--sg-sage);
}
.sg-cart-summary__row strong { color: var(--sg-eggshell); font-weight: 600; }
.sg-cart-summary__row--total {
margin-top: 8px;
padding-top: 14px;
border-top: 1px dashed var(--sg-line);
font-family: var(--sg-f-display);
font-size: 22px;
font-weight: 700;
color: var(--sg-krypto);
}
.sg-cart-summary__row--total strong { color: var(--sg-krypto); }
.sg-cart-summary__row--ship strong { color: var(--sg-jungle); }
@media (max-width: 880px) {
.sg-cart-wrap { grid-template-columns: 1fr; gap: 20px; }
.sg-cart-summary { position: static; }
.sg-cart-line { grid-template-columns: 80px 1fr; }
.sg-cart-line__right { grid-column: 1 / -1; flex-direction: row; display: flex; justify-content: space-between; align-items: center; text-align: left; }
.sg-cart-line__thumb { width: 80px; height: 64px; }
}
/* Checkout */
.sg-co {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
padding: 30px 0 60px;
}
.sg-co__form {
display: grid;
gap: 24px;
}
.sg-co__step {
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
border-radius: 8px;
padding: 24px 26px;
}
.sg-co__step-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--sg-line);
}
.sg-co__step-no {
width: 32px; height: 32px;
display: grid; place-items: center;
background: var(--sg-krypto);
color: var(--sg-void);
font-family: var(--sg-f-display);
font-weight: 700;
border-radius: 50%;
}
.sg-co__step h3 {
margin: 0;
font-size: 19px;
color: var(--sg-eggshell);
font-family: var(--sg-f-display);
}
.sg-co__field {
display: grid;
gap: 4px;
margin-bottom: 14px;
}
.sg-co__field label {
font-family: var(--sg-f-mono);
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sg-fern);
}
.sg-co__field input,
.sg-co__field select,
.sg-co__field textarea {
background: var(--sg-void);
border: 1px solid var(--sg-line);
color: var(--sg-eggshell);
padding: 11px 14px;
font-family: var(--sg-f-mono);
font-size: 13px;
border-radius: 3px;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.sg-co__field input:focus,
.sg-co__field select:focus,
.sg-co__field textarea:focus {
border-color: var(--sg-krypto);
box-shadow: 0 0 0 3px rgba(52, 211, 153, .15);
}
.sg-co__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.sg-co__pay {
display: grid;
gap: 10px;
}
.sg-co__pay label {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--sg-void);
border: 1px solid var(--sg-line);
border-radius: 4px;
cursor: pointer;
font-family: var(--sg-f-mono);
font-size: 12.5px;
color: var(--sg-eggshell);
letter-spacing: .04em;
transition: border-color .15s, background .15s;
}
.sg-co__pay label:hover { border-color: var(--sg-krypto); }
.sg-co__pay input[type=radio] { accent-color: var(--sg-krypto); width: 16px; height: 16px; }
.sg-co__pay label:has(input:checked) {
border-color: var(--sg-krypto);
background: rgba(52, 211, 153, .07);
box-shadow: var(--sg-glow-soft);
}
.sg-pay-ico {
flex: 0 0 46px;
width: 46px; height: 32px;
display: grid; place-items: center;
color: var(--sg-krypto);
}
.sg-pay-ico svg { display: block; max-width: 100%; height: auto; }
.sg-pay-body {
display: grid;
gap: 1px;
flex: 1 1 auto;
min-width: 0;
}
.sg-pay-body strong {
font-family: var(--sg-f-display);
font-size: 14px;
color: var(--sg-eggshell);
font-weight: 600;
letter-spacing: -.005em;
}
.sg-pay-body em {
font-style: normal;
font-family: var(--sg-f-body);
font-size: 11.5px;
color: var(--sg-fern);
letter-spacing: .005em;
}
.sg-co__pay label:has(input:checked) .sg-pay-body strong { color: var(--sg-krypto); }
.sg-co__pay-tag {
margin-left: auto;
padding: 2px 8px;
background: var(--sg-mantle);
border: 1px solid var(--sg-line-2);
font-size: 10px;
color: var(--sg-fern);
border-radius: 2px;
letter-spacing: .08em;
text-transform: uppercase;
}
.sg-co__summary {
background: var(--sg-moss-2);
border: 1px solid var(--sg-line-2);
border-radius: 8px;
padding: 24px 26px;
position: sticky;
top: 110px;
display: grid;
gap: 14px;
}
.sg-co__sum-line {
display: grid;
grid-template-columns: 50px 1fr auto;
gap: 12px;
font-family: var(--sg-f-mono);
font-size: 12px;
color: var(--sg-sage);
align-items: center;
padding-bottom: 8px;
border-bottom: 1px dashed var(--sg-line);
}
.sg-co__sum-line:last-of-type { border-bottom: 0; }
.sg-co__sum-line img { width: 50px; height: 40px; object-fit: cover; border-radius: 2px; }
@media (max-width: 880px) {
.sg-co { grid-template-columns: 1fr; }
.sg-co__row { grid-template-columns: 1fr; }
.sg-co__summary { position: static; }
}
/* Order complete */
.sg-rcpt {
margin: 40px 0 50px;
max-width: 760px;
margin-inline: auto;
background:
radial-gradient(60% 80% at 50% 0%, rgba(52, 211, 153, .12), transparent 60%),
var(--sg-moss-2);
border: 1px solid var(--sg-line-2);
border-radius: var(--sg-radius-lg);
overflow: hidden;
}
.sg-rcpt__top {
padding: 36px 40px 24px;
text-align: center;
border-bottom: 1px dashed var(--sg-line);
}
.sg-rcpt__stamp {
display: inline-block;
padding: 8px 22px;
border: 2px solid var(--sg-krypto);
font-family: var(--sg-f-mono);
font-weight: 700;
font-size: 13px;
letter-spacing: .22em;
color: var(--sg-krypto);
transform: rotate(-3deg);
margin-bottom: 16px;
box-shadow: 0 0 0 1px rgba(52, 211, 153, .1) inset;
}
.sg-rcpt__top h1 {
font-family: var(--sg-f-display);
font-size: clamp(28px, 3.6vw, 38px);
font-weight: 700;
margin: 0 0 10px;
letter-spacing: -.02em;
color: var(--sg-eggshell);
}
.sg-rcpt__top p { color: var(--sg-sage); margin: 0; }
.sg-rcpt__top p strong { color: var(--sg-eggshell); }
.sg-rcpt__code {
text-align: center;
padding: 24px;
border-bottom: 1px dashed var(--sg-line);
font-family: var(--sg-f-mono);
}
.sg-rcpt__code small {
display: block;
font-size: 10.5px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--sg-fern);
margin-bottom: 6px;
}
.sg-rcpt__code strong {
display: block;
font-family: var(--sg-f-display);
font-size: 32px;
letter-spacing: .04em;
color: var(--sg-krypto);
margin-bottom: 8px;
}
.sg-rcpt__code span {
font-size: 11px;
color: var(--sg-mist);
letter-spacing: .1em;
}
.sg-tracker {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 24px 30px 0;
}
.sg-tracker__step {
text-align: center;
padding: 14px 8px;
border: 1px dashed var(--sg-line);
border-right: 0;
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sg-fern);
}
.sg-tracker__step:last-child { border-right: 1px dashed var(--sg-line); }
.sg-tracker__step strong { color: var(--sg-krypto); display: block; font-family: var(--sg-f-display); font-size: 14px; margin-bottom: 4px; }
.sg-tracker__step.is-done { border-color: var(--sg-krypto); color: var(--sg-eggshell); background: rgba(52, 211, 153, .05); }
.sg-tracker__step.is-done strong { color: var(--sg-krypto); }
.sg-tracker__step.is-active {
border-color: var(--sg-lime);
background: rgba(132, 204, 22, .08);
}
.sg-tracker__step.is-active strong { color: var(--sg-lime-2); }
.sg-rcpt__body { padding: 30px; }
.sg-rcpt__body dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 30px;
font-family: var(--sg-f-mono);
font-size: 13px;
margin: 0;
}
.sg-rcpt__body dt { color: var(--sg-fern); letter-spacing: .02em; }
.sg-rcpt__body dd { margin: 0; color: var(--sg-eggshell); text-align: right; }
.sg-rcpt__foot {
padding: 22px 30px 30px;
text-align: center;
border-top: 1px dashed var(--sg-line);
}
@media (max-width: 720px) {
.sg-tracker { grid-template-columns: 1fr 1fr; }
}
/* ---------- 16. Journal / article shells -------------------------------- */
.sg-journal-head {
padding: 70px 0 50px;
background:
radial-gradient(80% 60% at 0% 0%, rgba(52, 211, 153, .07), transparent 60%),
radial-gradient(60% 60% at 100% 100%, rgba(132, 204, 22, .04), transparent 60%);
border-bottom: 1px solid var(--sg-line);
}
.sg-journal-head__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .22em;
color: var(--sg-krypto);
text-transform: uppercase;
margin-bottom: 18px;
}
.sg-journal-head__eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--sg-krypto); }
.sg-journal-head h1 {
font-family: var(--sg-f-display);
font-size: clamp(48px, 6vw, 80px);
font-weight: 700;
font-style: italic;
line-height: 1;
letter-spacing: -.025em;
margin: 0 0 18px;
}
.sg-journal-head h1 em { color: var(--sg-eggshell); font-style: italic; font-weight: 500; }
.sg-journal-head__lede {
font-size: 18px;
line-height: 1.6;
color: var(--sg-sage);
margin: 0 0 24px;
max-width: 60ch;
}
.sg-journal-head__meta {
padding-top: 18px;
border-top: 1px dashed var(--sg-line);
display: flex;
gap: 24px;
flex-wrap: wrap;
font-family: var(--sg-f-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--sg-fern);
}
.sg-journal-head__meta strong { color: var(--sg-krypto); }
/* Journal index grid */
.sg-journal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
padding: 40px 0 60px;
}
.sg-journal-card {
display: grid;
grid-template-rows: 220px auto 1fr;
padding: 0;
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.sg-journal-card:hover {
border-color: var(--sg-krypto);
transform: translateY(-3px);
box-shadow: var(--sg-glow-soft);
}
.sg-journal-card__media {
position: relative;
background-size: cover;
background-position: center;
background-color: var(--sg-mantle);
border-bottom: 1px solid var(--sg-line);
}
.sg-journal-card__media::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, transparent 50%, rgba(4, 19, 12, .8) 100%),
radial-gradient(80% 60% at 50% 100%, rgba(52, 211, 153, .15), transparent 70%);
}
.sg-journal-card__no {
position: absolute;
top: 14px; left: 14px;
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .16em;
color: var(--sg-krypto);
text-transform: uppercase;
z-index: 1;
padding: 4px 10px;
background: rgba(4, 19, 12, .85);
border: 1px solid var(--sg-line-2);
}
.sg-journal-card__tag {
position: absolute;
bottom: 14px; left: 14px;
font-family: var(--sg-f-mono);
font-size: 10.5px;
letter-spacing: .18em;
color: var(--sg-lime-2);
text-transform: uppercase;
z-index: 1;
}
.sg-journal-card__body { padding: 22px 24px 14px; }
.sg-journal-card__body h3 {
font-family: var(--sg-f-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -.015em;
line-height: 1.2;
margin: 0 0 10px;
color: var(--sg-eggshell);
}
.sg-journal-card__body p {
color: var(--sg-sage);
font-size: 14px;
line-height: 1.65;
margin: 0;
}
.sg-journal-card__foot {
padding: 12px 24px 20px;
display: flex;
gap: 16px;
font-family: var(--sg-f-mono);
font-size: 11px;
color: var(--sg-fern);
letter-spacing: .04em;
align-items: center;
}
.sg-journal-card__foot strong { color: var(--sg-eggshell); }
@media (max-width: 720px) { .sg-journal-grid { grid-template-columns: 1fr; } }
/* Article wrapper / shared bits */
.sg-article { padding: 40px 0 60px; }
.sg-article__container { max-width: 760px; margin: 0 auto; }
.sg-article__crumb {
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sg-fern);
margin-bottom: 24px;
}
.sg-article__crumb a { color: var(--sg-krypto); text-decoration: none; }
.sg-article__no {
font-family: var(--sg-f-mono);
font-size: 11.5px;
letter-spacing: .26em;
color: var(--sg-krypto);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.sg-article__no::before { content: ''; width: 40px; height: 1px; background: var(--sg-krypto); }
.sg-article__h1 {
font-family: var(--sg-f-display);
font-size: clamp(36px, 4.6vw, 56px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -.025em;
margin: 0 0 16px;
color: var(--sg-eggshell);
}
.sg-article__h1 em { color: var(--sg-eggshell); font-style: italic; font-weight: 500; }
.sg-article__lede {
font-family: var(--sg-f-display);
font-size: 21px;
line-height: 1.55;
font-weight: 400;
color: var(--sg-sage);
margin: 0 0 26px;
padding-bottom: 24px;
border-bottom: 1px dashed var(--sg-line);
}
.sg-article__meta {
display: flex;
gap: 20px;
flex-wrap: wrap;
font-family: var(--sg-f-mono);
font-size: 11.5px;
color: var(--sg-fern);
letter-spacing: .04em;
margin-bottom: 30px;
}
.sg-article__meta strong { color: var(--sg-eggshell); }
.sg-article__body {
font-family: var(--sg-f-body);
font-size: 16.5px;
line-height: 1.78;
color: var(--sg-eggshell);
}
.sg-article__body p { margin: 0 0 18px; }
.sg-article__body p strong { color: var(--sg-eggshell); font-weight: 600; }
.sg-article__body p em { font-style: italic; color: var(--sg-eggshell); }
.sg-article__body a {
color: var(--sg-krypto);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.sg-article__body a:hover { color: var(--sg-lime-2); }
.sg-article__body h2 {
font-family: var(--sg-f-display);
font-size: 26px;
letter-spacing: -.01em;
margin: 34px 0 12px;
color: var(--sg-eggshell);
}
.sg-article__body h3 {
font-family: var(--sg-f-display);
font-size: 20px;
margin: 26px 0 10px;
color: var(--sg-eggshell);
}
.sg-article__body blockquote {
margin: 22px 0;
padding: 18px 22px;
border-left: 3px solid var(--sg-krypto);
background: rgba(52, 211, 153, .04);
font-family: var(--sg-f-display);
font-style: italic;
color: var(--sg-eggshell);
font-size: 18px;
}
.sg-article__sign {
margin-top: 40px;
padding-top: 20px;
border-top: 1px dashed var(--sg-line);
font-family: var(--sg-f-mono);
font-size: 12px;
color: var(--sg-fern);
letter-spacing: .04em;
}
/* Article template variants five unique flavours */
/* a) Long-read essay (default already styled above) */
/* b) Field report figure column + 2-col grid */
.sg-art--field .sg-article__container { max-width: 980px; }
.sg-art--field__grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 40px;
align-items: start;
margin: 30px 0;
}
.sg-art--field__photo {
position: sticky;
top: 110px;
margin: 0;
border: 1px solid var(--sg-line);
border-radius: 4px;
overflow: hidden;
}
.sg-art--field__photo img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.sg-art--field__photo figcaption {
font-family: var(--sg-f-mono);
font-size: 11px;
color: var(--sg-fern);
padding: 10px 14px;
letter-spacing: .04em;
background: var(--sg-moss-2);
border-top: 1px dashed var(--sg-line);
}
/* c) Q&A interview two-column dialog */
.sg-art--qa .sg-article__container { max-width: 820px; }
.sg-art--qa__row {
display: grid;
grid-template-columns: 90px 1fr;
gap: 20px;
margin: 26px 0;
padding-bottom: 24px;
border-bottom: 1px dashed var(--sg-line);
}
.sg-art--qa__row:last-of-type { border-bottom: 0; }
.sg-art--qa__q {
font-family: var(--sg-f-mono);
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sg-krypto);
font-weight: 700;
align-self: start;
}
.sg-art--qa__q.is-a { color: var(--sg-lime-2); }
.sg-art--qa__a {
font-size: 16px;
line-height: 1.75;
color: var(--sg-eggshell);
}
.sg-art--qa__a p:first-child { margin-top: 0; }
/* d) Photo diary large images + short captions */
.sg-art--diary .sg-article__container { max-width: 920px; }
.sg-art--diary__entry { margin: 36px 0; }
.sg-art--diary__date {
font-family: var(--sg-f-mono);
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sg-fern);
margin-bottom: 10px;
}
.sg-art--diary__date strong { color: var(--sg-krypto); }
.sg-art--diary__photo {
margin: 0 0 14px;
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--sg-line);
}
.sg-art--diary__photo img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.sg-art--diary__cap {
font-family: var(--sg-f-display);
font-size: 18px;
line-height: 1.55;
color: var(--sg-eggshell);
font-style: italic;
max-width: 56ch;
}
/* e) Listicle numbered cards */
.sg-art--list .sg-article__container { max-width: 880px; }
.sg-art--list__item {
display: grid;
grid-template-columns: 90px 1fr;
gap: 24px;
padding: 22px 0;
border-top: 1px dashed var(--sg-line);
}
.sg-art--list__item:last-child { border-bottom: 1px dashed var(--sg-line); }
.sg-art--list__no {
font-family: var(--sg-f-display);
font-size: 56px;
font-weight: 700;
color: var(--sg-krypto);
line-height: 1;
letter-spacing: -.04em;
}
.sg-art--list__title {
font-family: var(--sg-f-display);
font-size: 22px;
margin: 0 0 8px;
color: var(--sg-eggshell);
}
.sg-art--list__body p { margin: 0 0 10px; line-height: 1.7; }
@media (max-width: 720px) {
.sg-art--field__grid { grid-template-columns: 1fr; }
.sg-art--field__photo { position: static; }
.sg-art--qa__row { grid-template-columns: 1fr; gap: 6px; }
.sg-art--list__item { grid-template-columns: 60px 1fr; gap: 14px; }
.sg-art--list__no { font-size: 36px; }
}
/* ---------- 17. Long-form prose pages (terms/privacy/etc.) -------------- */
.sg-prose {
padding: 30px 0 60px;
max-width: 760px;
margin: 0 auto;
}
.sg-prose h2 {
font-family: var(--sg-f-display);
font-size: 26px;
margin: 30px 0 12px;
color: var(--sg-eggshell);
}
.sg-prose h3 {
font-family: var(--sg-f-display);
font-size: 20px;
margin: 24px 0 10px;
color: var(--sg-krypto);
}
.sg-prose p {
font-size: 15.5px;
line-height: 1.78;
color: var(--sg-eggshell);
margin: 0 0 16px;
}
.sg-prose ul, .sg-prose ol {
margin: 0 0 18px;
padding-left: 24px;
}
.sg-prose ul li, .sg-prose ol li { margin-bottom: 8px; line-height: 1.7; color: var(--sg-eggshell); }
.sg-prose strong { color: var(--sg-krypto-2); }
.sg-prose a { color: var(--sg-krypto); text-decoration: underline; text-underline-offset: 3px; }
/* About / contact page bricks */
.sg-about-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 50px;
align-items: start;
padding: 30px 0 50px;
}
.sg-about-grid__txt h2 {
font-family: var(--sg-f-display);
font-size: 28px;
margin: 26px 0 12px;
color: var(--sg-eggshell);
}
.sg-about-grid__txt p {
line-height: 1.78;
color: var(--sg-eggshell);
margin: 0 0 16px;
}
.sg-about-grid__txt p strong { color: var(--sg-krypto-2); }
.sg-about-card {
background: var(--sg-moss-2);
border: 1px dashed var(--sg-line-2);
border-radius: 10px;
padding: 24px 26px;
display: grid;
gap: 14px;
}
.sg-about-card h3 {
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--sg-krypto);
margin: 0;
padding-bottom: 12px;
border-bottom: 1px dashed var(--sg-line);
}
.sg-about-card dl {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
font-family: var(--sg-f-mono);
font-size: 12.5px;
color: var(--sg-sage);
}
.sg-about-card dt {
font-size: 10.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sg-fern);
}
.sg-about-card dd { margin: 0; color: var(--sg-eggshell); }
.sg-about-team {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 40px 0;
}
.sg-about-team__card {
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
border-radius: 6px;
padding: 20px 22px;
display: grid;
gap: 8px;
}
.sg-about-team__name {
font-family: var(--sg-f-display);
font-size: 17px;
color: var(--sg-eggshell);
margin: 0;
}
.sg-about-team__role {
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sg-krypto);
}
.sg-about-team__bio {
font-size: 13px;
color: var(--sg-sage);
line-height: 1.6;
margin: 0;
}
@media (max-width: 880px) {
.sg-about-grid { grid-template-columns: 1fr; gap: 30px; }
.sg-about-team { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.sg-about-team { grid-template-columns: 1fr; }
}
/* ---------- 18. Drops (Friday-drop landing) ----------------------------- */
.sg-drop-hero {
padding: 60px 0 50px;
position: relative;
background:
radial-gradient(60% 50% at 90% 10%, rgba(132, 204, 22, .1), transparent 60%),
radial-gradient(40% 40% at 0% 100%, rgba(52, 211, 153, .12), transparent 60%);
border-bottom: 1px solid var(--sg-line);
overflow: hidden;
}
.sg-drop-hero__inner {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 50px;
align-items: center;
}
.sg-drop-hero__counter {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 18px;
border: 1px solid var(--sg-line-2);
background: var(--sg-moss-2);
border-radius: 8px;
margin: 24px 0;
}
.sg-drop-hero__counter-cell {
text-align: center;
padding: 14px 6px;
background: var(--sg-void);
border: 1px solid var(--sg-line);
border-radius: 4px;
}
.sg-drop-hero__counter-cell strong {
display: block;
font-family: var(--sg-f-display);
font-size: 32px;
font-weight: 700;
color: var(--sg-krypto);
letter-spacing: -.02em;
line-height: 1;
}
.sg-drop-hero__counter-cell span {
display: block;
font-family: var(--sg-f-mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--sg-fern);
margin-top: 6px;
}
.sg-drop-hero__manifesto {
background: var(--sg-moss-2);
border: 1px dashed var(--sg-krypto);
border-radius: 10px;
padding: 26px 28px;
}
.sg-drop-hero__manifesto h3 {
font-family: var(--sg-f-display);
font-size: 18px;
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--sg-line);
color: var(--sg-eggshell);
}
.sg-drop-hero__manifesto ol {
margin: 0;
padding-left: 0;
list-style: none;
counter-reset: drop;
display: grid;
gap: 10px;
}
.sg-drop-hero__manifesto li {
position: relative;
padding-left: 32px;
counter-increment: drop;
font-family: var(--sg-f-mono);
font-size: 12.5px;
line-height: 1.65;
color: var(--sg-sage);
}
.sg-drop-hero__manifesto li::before {
content: counter(drop, decimal-leading-zero);
position: absolute; left: 0; top: 0;
font-family: var(--sg-f-display);
font-size: 14px;
font-weight: 700;
color: var(--sg-krypto);
}
.sg-drop-hero__manifesto strong { color: var(--sg-eggshell); }
@media (max-width: 880px) {
.sg-drop-hero__inner { grid-template-columns: 1fr; }
}
/* ---------- 19. 404 ---------------------------------------------------- */
.sg-404 {
padding: 90px 0 100px;
text-align: center;
max-width: 620px;
margin: 0 auto;
}
.sg-404__code {
font-family: var(--sg-f-display);
font-size: 120px;
font-weight: 700;
color: var(--sg-krypto);
letter-spacing: -.04em;
line-height: 1;
margin: 0 0 8px;
text-shadow: 0 0 24px rgba(52, 211, 153, .25);
}
.sg-404 h1 {
font-family: var(--sg-f-display);
font-size: 28px;
margin: 8px 0 16px;
color: var(--sg-eggshell);
}
.sg-404 p {
color: var(--sg-sage);
margin: 0 0 24px;
}
/* ---------- 20. Wishlist tile / empty cart ------------------------------ */
.sg-wish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
/* ============================================================ */
/* 21. Editorial overrides — calm down JetBrains Mono + green */
/* Goal: dark site with rare green accents (CTA, price, */
/* active nav, on-sale flag, focus, brand crest, links). */
/* ============================================================ */
/* Anywhere in body copy that still uses mono caps for labels —
render it as calm sans. Mono now lives only inside .sg-mono and
inside actual / tags. */
.sg-card__bucket,
.sg-card__cond,
.sg-card__sub,
.sg-card__platform,
.sg-card__year,
.sg-droplist__row .sg-droplist__meta,
.sg-droplist__no,
.sg-brick__num,
.sg-pricebox__warranty,
.sg-pricebox__shipnote,
.sg-cart-line__meta,
.sg-cart-line__remove,
.sg-co__step-no,
.sg-co__field label,
.sg-co__field-row label,
.sg-co__hint,
.sg-co__small,
.sg-co__pay-fine,
.sg-pagehead__meta,
.sg-pagehead__crumb,
.sg-marquee__track,
.sg-droplist__head,
.sg-spotlight__list,
.sg-art--list__no,
.sg-art--diary__date,
.sg-art--qa__q,
.sg-card__chip,
.sg-card__flag,
.sg-card__flag--sale,
.sg-section__more,
.sg-pricebox__price-old,
.sg-pricebox__sku,
.sg-meta {
font-family: var(--sg-f-body) !important;
letter-spacing: 0 !important;
}
/* Caps stay only on the most pip-style chips/flags; for label-meta
we drop the uppercase too. */
.sg-card__bucket,
.sg-card__cond,
.sg-card__sub,
.sg-card__platform,
.sg-card__year,
.sg-droplist__meta,
.sg-pricebox__warranty,
.sg-pricebox__shipnote,
.sg-cart-line__meta,
.sg-co__field label,
.sg-co__field-row label,
.sg-co__hint,
.sg-co__small,
.sg-co__pay-fine,
.sg-pagehead__crumb,
.sg-pagehead__meta,
.sg-marquee__track,
.sg-spotlight__list,
.sg-section__more,
.sg-pricebox__price-old,
.sg-meta {
text-transform: none !important;
}
/* Tighten card kicker — quiet sage instead of green caps */
.sg-card__bucket {
color: var(--sg-fern);
font-size: 12px;
font-weight: 500;
letter-spacing: .01em !important;
text-transform: uppercase !important; /* keep this single one for taxonomy */
}
/* Page-head meta — flowing sans, mist greys */
.sg-pagehead__meta {
font-size: 13.5px;
color: var(--sg-fern);
font-weight: 500;
}
.sg-pagehead__meta strong {
color: var(--sg-eggshell);
font-weight: 600;
}
/* Section section heads em — italic eggshell, never green */
.sg-section__head h2 em,
.sg-pagehead h1 em,
.sg-spotlight__title em,
.sg-slide__title em,
.sg-article__h1 em,
.sg-journal-head h1 em {
color: var(--sg-eggshell) !important;
font-style: italic;
font-weight: 500;
}
/* Brick + droplist — calm card, single green accent on the price/number */
.sg-brick__num {
color: var(--sg-fern);
font-size: 12px;
font-weight: 500;
letter-spacing: .02em !important;
text-transform: uppercase !important;
}
/* Droplist title row — light, no terminal-vibe */
.sg-droplist__row h4 {
font-family: var(--sg-f-display);
font-style: italic;
font-weight: 500;
font-size: 19px;
}
.sg-droplist__price {
font-family: var(--sg-f-display);
font-weight: 600;
color: var(--sg-krypto);
}
/* Buttons — keep krypto CTA but switch its label to calm sans
so it stops feeling like a terminal command */
.sg-btn {
font-family: var(--sg-f-body) !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
text-transform: none !important;
}
/* Eyebrow refinement — calm dash kicker that never shouts */
.sg-eyebrow {
text-transform: none !important;
letter-spacing: .005em !important;
color: var(--sg-fern);
}
/* Marquee — keep the strap but in serif italic, not terminal */
.sg-marquee__track {
font-family: var(--sg-f-display) !important;
font-style: italic;
font-weight: 500;
font-size: 18px;
letter-spacing: -.005em !important;
color: var(--sg-eggshell);
text-transform: none !important;
}
.sg-marquee__track span { color: var(--sg-fern); margin: 0 22px; }
/* Footer columns — italic serif headings */
.sg-foot__col h4 { letter-spacing: -.005em !important; }
/* Strap of meta on the page (cart, journal index) — calm sans */
.sg-meta {
font-size: 13px;
font-weight: 500;
color: var(--sg-fern);
}
.sg-meta strong { color: var(--sg-eggshell); font-weight: 600; }
/* On-sale flag — keep lime here, this IS the one place green earns its keep */
.sg-card__flag--sale {
background: var(--sg-lime);
color: var(--sg-void);
font-weight: 700;
}
/* ====================================================================== */
/* PDP — trust strip, FAQ, sticky-CTA, gallery polish */
/* ====================================================================== */
/* Trust badges row, immediately under price box */
.sg-pdp__trust {
list-style: none;
margin: 18px 0 0;
padding: 14px 16px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 16px;
background: rgba(132,204,22,.04);
border: 1px solid rgba(132,204,22,.18);
border-radius: 4px;
}
.sg-pdp__trust li {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--sg-f-body);
font-size: 12.5px;
color: var(--sg-eggshell);
}
.sg-pdp__trust svg { flex: 0 0 18px; color: var(--sg-krypto); }
.sg-pdp__trust strong { font-weight: 600; }
/* FAQ accordion under description */
.sg-pdp__faq {
margin: 12px 0 0;
padding: 0;
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
border-radius: 4px;
overflow: hidden;
}
.sg-pdp__faq + .sg-pdp__faq { margin-top: 8px; }
.sg-pdp__faq summary {
list-style: none;
cursor: pointer;
padding: 14px 18px;
font-family: var(--sg-f-display);
font-size: 14.5px;
font-weight: 600;
color: var(--sg-eggshell);
display: flex;
align-items: center;
gap: 10px;
position: relative;
transition: background .15s, color .15s;
}
.sg-pdp__faq summary::-webkit-details-marker { display: none; }
.sg-pdp__faq summary > span:first-child {
color: var(--sg-krypto);
font-size: 12px;
transform: rotate(0deg);
transition: transform .2s, color .15s;
}
.sg-pdp__faq[open] summary > span:first-child { transform: rotate(45deg); }
.sg-pdp__faq summary::after {
content: "+";
margin-left: auto;
color: var(--sg-fern);
font-family: var(--sg-f-display);
font-size: 22px;
line-height: 1;
transition: transform .2s, color .15s;
}
.sg-pdp__faq[open] summary::after { content: "−"; color: var(--sg-krypto); }
.sg-pdp__faq summary:hover { background: rgba(132,204,22,.05); color: var(--sg-krypto); }
.sg-pdp__faq p {
margin: 0;
padding: 0 18px 16px 36px;
font-family: var(--sg-f-body);
font-size: 13.5px;
line-height: 1.7;
color: var(--sg-sage);
}
.sg-pdp__faq p strong { color: var(--sg-eggshell); }
/* Search overlay — full-bleed top-aligned panel */
.sg-search {
position: fixed;
inset: 0;
z-index: 80;
background: rgba(4,19,12,.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 14vh 18px 0;
overflow-y: auto;
}
.sg-search[hidden] { display: none; }
.sg-search__form {
position: relative;
width: 100%;
max-width: 720px;
height: fit-content;
background: var(--sg-moss-2);
border: 1px solid var(--sg-line-2);
border-radius: 6px;
padding: 24px 26px 20px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px 12px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(132,204,22,.08);
}
.sg-search__form .sg-btn { align-self: stretch; }
.sg-search__close {
position: absolute;
top: 10px; right: 12px;
width: 30px; height: 30px;
background: transparent;
border: 1px solid var(--sg-line);
border-radius: 50%;
color: var(--sg-fern);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: color .15s, border-color .15s;
}
.sg-search__close:hover { color: var(--sg-krypto); border-color: var(--sg-krypto); }
.sg-search__lab {
grid-column: 1 / -1;
font-family: var(--sg-f-body);
font-size: 11px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--sg-fern);
}
.sg-search__form input[type=search] {
background: var(--sg-void);
border: 1px solid var(--sg-line);
color: var(--sg-eggshell);
padding: 14px 16px;
border-radius: 4px;
font-family: var(--sg-f-display);
font-size: 18px;
letter-spacing: -.005em;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.sg-search__form input[type=search]:focus { border-color: var(--sg-krypto); box-shadow: 0 0 0 3px rgba(132,204,22,.18); }
.sg-search__hints {
list-style: none;
margin: 4px 0 0;
padding: 0;
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
font-family: var(--sg-f-body);
font-size: 12px;
color: var(--sg-fern);
}
.sg-search__hints li:first-child { color: var(--sg-mist); padding-right: 4px; }
.sg-search__hints a {
display: inline-block;
padding: 4px 10px;
background: var(--sg-void);
border: 1px solid var(--sg-line);
border-radius: 999px;
color: var(--sg-eggshell);
text-decoration: none;
letter-spacing: .01em;
transition: color .15s, border-color .15s, background .15s;
}
.sg-search__hints a:hover { color: var(--sg-krypto); border-color: var(--sg-krypto); background: rgba(132,204,22,.06); }
@media (max-width: 540px) {
.sg-search { padding: 8vh 12px 0; }
.sg-search__form { padding: 22px 18px 16px; grid-template-columns: 1fr; }
.sg-search__form .sg-btn { width: 100%; }
}
/* Sticky bottom bar — mobile-only Add-to-Cart */
.sg-pdp-stuck {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
display: none;
align-items: center;
gap: 12px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--sg-void);
border-top: 1px solid var(--sg-line-2);
box-shadow: 0 -10px 30px -10px rgba(0,0,0,.55);
}
.sg-pdp-stuck__copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.sg-pdp-stuck__title {
font-family: var(--sg-f-display);
font-size: 13.5px;
font-weight: 600;
color: var(--sg-eggshell);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sg-pdp-stuck__price {
font-family: var(--sg-f-display);
font-size: 15px;
font-weight: 700;
color: var(--sg-krypto);
}
.sg-pdp-stuck__form { margin: 0; flex: 0 0 auto; }
.sg-pdp-stuck__form .sg-btn { white-space: nowrap; }
@media (max-width: 760px) {
.sg-pdp-stuck { display: flex; }
/* breathing room so the sticky bar doesn't cover the footer when scrolled to bottom */
body.is-product { padding-bottom: 70px; }
}
/* ====================================================================== */
/* CART REDESIGN — "despatch manifest" sheet */
/* Distinct from generic cart-summary table layouts: wide single-sheet, */
/* numbered lines like a courier waybill, route timeline, stamped tally. */
/* ====================================================================== */
.sg-mf {
margin: 24px 0 36px;
background:
repeating-linear-gradient(0deg, transparent 0 47px, rgba(132,204,22,.025) 47px 48px),
var(--sg-moss-2);
border: 1px solid var(--sg-line-2);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.sg-mf::before {
/* Punched holes along the top edge — paper-form metaphor */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 6px;
background-image: radial-gradient(circle at 12px 3px, var(--sg-void) 2.5px, transparent 3px);
background-size: 24px 6px;
background-repeat: repeat-x;
opacity: .55;
}
.sg-mf__head {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 22px 28px 18px;
border-bottom: 1px dashed var(--sg-line);
}
.sg-mf__head-cell + .sg-mf__head-cell { border-left: 1px solid var(--sg-line); padding-left: 22px; }
.sg-mf__lab {
display: block;
font-family: var(--sg-f-body);
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--sg-fern);
margin-bottom: 4px;
}
.sg-mf__val {
display: block;
font-family: var(--sg-f-display);
font-size: 15px;
letter-spacing: .01em;
color: var(--sg-eggshell);
}
.sg-mf__route {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: 0;
padding: 14px 28px;
background: var(--sg-void);
border-bottom: 1px dashed var(--sg-line);
list-style: none;
font-family: var(--sg-f-body);
font-size: 12.5px;
color: var(--sg-mist);
}
.sg-mf__route li { display: inline-flex; align-items: center; gap: 6px; }
.sg-mf__route li span { color: var(--sg-line); font-size: 9px; }
.sg-mf__route li.is-on { color: var(--sg-eggshell); }
.sg-mf__route li.is-on span { color: var(--sg-krypto); }
.sg-mf__lines {
width: 100%;
border-collapse: collapse;
font-family: var(--sg-f-body);
}
.sg-mf__lines thead th {
font-family: var(--sg-f-body);
font-size: 10.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--sg-fern);
font-weight: 500;
text-align: left;
padding: 16px 12px;
border-bottom: 1px solid var(--sg-line);
background: rgba(0,0,0,.18);
}
.sg-mf__lines thead th.sg-mf__c-prc { text-align: right; }
.sg-mf__lines thead th.sg-mf__c-qty { text-align: center; }
.sg-mf__lines thead th.sg-mf__c-act { width: 36px; }
.sg-mf__line td {
padding: 18px 12px;
border-bottom: 1px dashed var(--sg-line);
vertical-align: middle;
}
.sg-mf__line:last-child td { border-bottom: 0; }
.sg-mf__lines tbody tr:hover { background: rgba(132,204,22,.025); }
.sg-mf__c-no { width: 78px; padding-left: 28px !important; }
.sg-mf__lineno {
font-family: var(--sg-f-mono);
font-size: 12px;
letter-spacing: .12em;
color: var(--sg-fern);
display: inline-block;
padding: 4px 8px;
border: 1px solid var(--sg-line);
border-radius: 2px;
background: var(--sg-void);
}
.sg-mf__c-itm {
display: flex;
gap: 18px;
align-items: center;
}
.sg-mf__art {
flex: 0 0 auto;
display: block;
width: 64px; height: 64px;
border-radius: 4px;
overflow: hidden;
background: var(--sg-void);
border: 1px solid var(--sg-line);
}
.sg-mf__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-mf__body { display: grid; gap: 3px; min-width: 0; }
.sg-mf__title {
font-family: var(--sg-f-display);
font-size: 17px;
font-weight: 600;
color: var(--sg-eggshell);
text-decoration: none;
letter-spacing: -.005em;
}
.sg-mf__title:hover { color: var(--sg-krypto); }
.sg-mf__sku {
font-family: var(--sg-f-mono);
font-size: 11px;
letter-spacing: .04em;
color: var(--sg-fern);
}
.sg-mf__unit {
font-family: var(--sg-f-body);
font-size: 12px;
color: var(--sg-mist);
}
.sg-mf__c-qty { width: 124px; text-align: center; padding-right: 12px !important; }
.sg-mf__qty {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid var(--sg-line);
border-radius: 4px;
background: var(--sg-void);
overflow: hidden;
}
.sg-mf__qty button {
width: 30px; height: 32px;
display: grid; place-items: center;
background: transparent;
border: 0;
color: var(--sg-krypto);
font-family: var(--sg-f-display);
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: background .15s;
}
.sg-mf__qty button:hover { background: rgba(132,204,22,.08); }
.sg-mf__qty input {
width: 38px;
height: 32px;
background: transparent;
border: 0;
border-left: 1px solid var(--sg-line);
border-right: 1px solid var(--sg-line);
text-align: center;
font-family: var(--sg-f-mono);
font-size: 13px;
color: var(--sg-eggshell);
outline: none;
-moz-appearance: textfield;
appearance: textfield;
}
.sg-mf__qty input::-webkit-outer-spin-button,
.sg-mf__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sg-mf__c-prc { width: 130px; text-align: right; padding-right: 12px !important; }
.sg-mf__price {
font-family: var(--sg-f-display);
font-size: 19px;
font-weight: 700;
color: var(--sg-krypto);
letter-spacing: -.01em;
}
.sg-mf__c-act { width: 50px; padding-right: 22px !important; }
.sg-mf__rm-form { margin: 0; }
.sg-mf__rm {
width: 28px; height: 28px;
display: grid; place-items: center;
background: transparent;
border: 1px solid var(--sg-line);
color: var(--sg-fern);
border-radius: 50%;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
.sg-mf__rm:hover { color: var(--sg-orange); border-color: var(--sg-orange); background: rgba(244,114,82,.08); }
.sg-mf__tally {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 0;
border-top: 1px solid var(--sg-line-2);
background: var(--sg-void);
}
.sg-mf__tally-left {
padding: 26px 28px 30px;
border-right: 1px solid var(--sg-line);
position: relative;
}
.sg-mf__stamp {
display: inline-block;
margin: 0 0 14px;
padding: 8px 14px;
font-family: var(--sg-f-display);
font-size: 11px;
font-style: italic;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sg-krypto);
border: 2px solid var(--sg-krypto);
border-radius: 4px;
transform: rotate(-3deg);
opacity: .85;
}
.sg-mf__tally-note {
font-family: var(--sg-f-body);
font-size: 13.5px;
line-height: 1.65;
color: var(--sg-sage);
margin: 0 0 10px;
max-width: 52ch;
}
.sg-mf__tally-fine {
font-family: var(--sg-f-body);
font-size: 12.5px;
line-height: 1.6;
color: var(--sg-fern);
margin: 0;
max-width: 52ch;
}
.sg-mf__tally-right {
padding: 26px 28px 30px;
display: grid;
gap: 14px;
}
.sg-mf__totals {
margin: 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 14px;
font-family: var(--sg-f-body);
font-size: 13.5px;
color: var(--sg-sage);
}
.sg-mf__totals dt { color: var(--sg-sage); }
.sg-mf__totals dd { margin: 0; color: var(--sg-eggshell); font-weight: 600; text-align: right; }
.sg-mf__totals .sg-mf__free { color: var(--sg-jungle); font-weight: 700; }
.sg-mf__totals .sg-mf__hint {
grid-column: 1 / -1;
font-family: var(--sg-f-body);
font-size: 12px;
color: var(--sg-fern);
padding: 4px 10px;
background: rgba(132,204,22,.06);
border: 1px dashed rgba(132,204,22,.25);
border-radius: 3px;
}
.sg-mf__totals .sg-mf__hint strong { color: var(--sg-krypto); }
.sg-mf__totals dt.sg-mf__lock {
margin-top: 6px;
padding-top: 12px;
border-top: 1px dashed var(--sg-line);
font-family: var(--sg-f-display);
font-size: 16px;
font-weight: 600;
color: var(--sg-eggshell);
}
.sg-mf__totals dd.sg-mf__lock {
margin-top: 6px;
padding-top: 12px;
border-top: 1px dashed var(--sg-line);
font-family: var(--sg-f-display);
font-size: 22px;
font-weight: 700;
color: var(--sg-krypto);
}
.sg-mf__cta { display: flex; align-items: center; justify-content: space-between; }
.sg-mf__cta-arrow { font-family: var(--sg-f-display); font-size: 18px; }
.sg-mf__cta-fine {
font-family: var(--sg-f-body);
font-size: 11.5px;
color: var(--sg-mist);
margin: 0;
text-align: center;
letter-spacing: .01em;
}
/* Reassurance bar — four icons under the manifest */
.sg-mf__guarantees {
list-style: none;
margin: 0 0 60px;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.sg-mf__guarantees li {
display: grid;
grid-template-columns: 32px 1fr;
grid-template-rows: auto auto;
gap: 4px 14px;
padding: 16px 18px;
background: var(--sg-moss-2);
border: 1px solid var(--sg-line);
border-radius: 4px;
align-items: start;
}
.sg-mf__guarantees svg {
grid-row: 1 / -1;
color: var(--sg-krypto);
margin-top: 2px;
}
.sg-mf__guarantees strong {
font-family: var(--sg-f-display);
font-size: 13.5px;
color: var(--sg-eggshell);
font-weight: 600;
}
.sg-mf__guarantees span {
font-family: var(--sg-f-body);
font-size: 12.5px;
line-height: 1.55;
color: var(--sg-fern);
}
/* Empty manifest state */
.sg-mf-empty {
margin: 30px 0 60px;
padding: 50px 40px 56px;
text-align: center;
background: var(--sg-moss-2);
border: 1px dashed var(--sg-line-2);
border-radius: 4px;
position: relative;
}
.sg-mf-empty__stamp {
display: inline-block;
margin: 0 0 22px;
padding: 10px 24px;
font-family: var(--sg-f-display);
font-size: 14px;
font-style: italic;
letter-spacing: .26em;
color: var(--sg-orange);
border: 2px solid var(--sg-orange);
border-radius: 4px;
transform: rotate(-2deg);
opacity: .55;
}
.sg-mf-empty h3 {
font-family: var(--sg-f-display);
font-size: clamp(24px, 3vw, 30px);
margin: 0 0 10px;
color: var(--sg-eggshell);
font-weight: 600;
letter-spacing: -.01em;
}
.sg-mf-empty p {
max-width: 56ch;
margin: 0 auto 18px;
font-family: var(--sg-f-body);
font-size: 14.5px;
line-height: 1.7;
color: var(--sg-sage);
}
.sg-mf-empty__cta {
display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center;
margin-bottom: 16px;
}
.sg-mf-empty__small {
font-family: var(--sg-f-body);
font-size: 12px;
color: var(--sg-fern);
margin: 0;
}
/* Accessible visually-hidden helper */
.sg-vh {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Responsive — manifest collapses to stacked cards under 880px */
@media (max-width: 880px) {
.sg-mf__head { grid-template-columns: 1fr 1fr; gap: 10px 22px; padding: 18px 20px 14px; }
.sg-mf__head-cell + .sg-mf__head-cell { border-left: 0; padding-left: 0; }
.sg-mf__head-cell:nth-child(3),
.sg-mf__head-cell:nth-child(4) { padding-top: 10px; border-top: 1px dashed var(--sg-line); }
.sg-mf__route { padding: 12px 20px; gap: 4px 14px; font-size: 11.5px; }
.sg-mf__lines, .sg-mf__lines tbody, .sg-mf__lines tr, .sg-mf__lines td { display: block; }
.sg-mf__lines thead { display: none; }
.sg-mf__line {
position: relative;
padding: 16px 18px 14px;
border-bottom: 1px dashed var(--sg-line);
}
.sg-mf__line td { padding: 4px 0; border: 0; }
.sg-mf__line td[data-lab]::before {
content: attr(data-lab);
display: block;
font-family: var(--sg-f-body);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--sg-fern);
margin-bottom: 3px;
}
.sg-mf__c-no { padding-left: 0 !important; }
.sg-mf__c-no::before { display: none !important; }
.sg-mf__lineno { display: inline-block; }
.sg-mf__c-itm { gap: 14px; }
.sg-mf__c-itm::before { display: none; }
.sg-mf__c-qty, .sg-mf__c-prc {
display: inline-block !important;
width: 50% !important;
text-align: left !important;
padding-right: 0 !important;
margin-top: 8px;
vertical-align: top;
}
.sg-mf__c-prc { text-align: right !important; }
.sg-mf__c-act { position: absolute; top: 14px; right: 14px; padding: 0 !important; width: auto; }
.sg-mf__c-act::before { display: none !important; }
.sg-mf__tally { grid-template-columns: 1fr; }
.sg-mf__tally-left { border-right: 0; border-bottom: 1px dashed var(--sg-line); }
.sg-mf__guarantees { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
.sg-mf__guarantees { grid-template-columns: 1fr; }
}
/* ---------- 22. Hero-custom — full-bleed banded promo blocks ------------ */
.sg-hero-custom {
display: flex;
align-items: center;
background-color: var(--sg-void);
color: var(--sg-eggshell);
padding: 96px 0;
position: relative;
overflow: hidden;
border-top: 1px solid var(--sg-line);
border-bottom: 1px solid var(--sg-line);
}
.sg-hero-custom::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(60% 60% at 12% 100%, rgba(52, 211, 153, .10), transparent 60%),
radial-gradient(50% 60% at 90% 0%, rgba(52, 211, 153, .08), transparent 60%);
pointer-events: none;
z-index: 0;
}
.sg-hero-custom--alt {
background-color: #0c1411;
}
.sg-hero-custom--paper {
background:
repeating-linear-gradient(135deg, rgba(132, 204, 22, .04) 0 2px, transparent 2px 9px),
linear-gradient(180deg, #0a2316 0%, #04130c 100%);
}
.sg-hero-custom__inner {
display: flex;
align-items: center;
gap: 80px;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--sg-pad);
position: relative;
z-index: 2;
}
.sg-hero-custom--reverse .sg-hero-custom__inner {
flex-direction: row-reverse;
}
.sg-hero-custom__art {
flex: 1.05;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.sg-hero-custom__art img {
width: 100%;
max-width: 560px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6));
}
.sg-hero-custom__art--frame img {
border-radius: 6px;
border: 1px solid var(--sg-line);
background: var(--sg-moss-2);
padding: 18px;
}
.sg-hero-custom__copy {
flex: 1;
max-width: 580px;
}
.sg-hero-custom__eyebrow {
color: var(--sg-krypto);
font-family: var(--sg-f-mono);
text-transform: uppercase;
letter-spacing: .18em;
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.sg-hero-custom__eyebrow::before {
content: '';
width: 28px; height: 1px;
background: var(--sg-krypto);
opacity: .55;
}
.sg-hero-custom__title {
font-family: var(--sg-f-display);
font-size: clamp(34px, 4.6vw, 54px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -.02em;
color: var(--sg-eggshell);
margin: 0 0 22px;
}
.sg-hero-custom__title em {
font-style: italic;
color: var(--sg-krypto);
}
.sg-hero-custom__lead {
font-size: 16.5px;
line-height: 1.7;
margin: 0 0 30px;
color: var(--sg-sage);
max-width: 56ch;
}
.sg-hero-custom__list {
list-style: none;
padding: 0;
margin: 0 0 36px;
display: grid;
gap: 18px;
}
.sg-hero-custom__list li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 14px;
align-items: start;
font-size: 14.5px;
line-height: 1.6;
color: var(--sg-sage);
}
.sg-hero-custom__list li > span:first-child {
color: var(--sg-krypto);
margin-top: 5px;
font-size: 11px;
}
.sg-hero-custom__list strong {
color: var(--sg-eggshell);
font-weight: 600;
display: block;
margin-bottom: 2px;
}
.sg-hero-custom__cta {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
}
@media (max-width: 900px) {
.sg-hero-custom { padding: 60px 0; }
.sg-hero-custom__inner { flex-direction: column !important; gap: 40px; }
.sg-hero-custom__art img { max-width: 360px; }
.sg-hero-custom__copy { max-width: 100%; }
}
/* ---------- 23. Footer — payment row + breathing room ------------------- */
.sg-foot__pay {
border-top: 1px dashed var(--sg-line);
padding: 26px 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
flex-wrap: wrap;
}
.sg-foot__pay-lab {
font-family: var(--sg-f-mono);
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sg-fern);
margin: 0;
flex-shrink: 0;
}
.sg-foot__pay-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.sg-foot__pay-chip {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .94);
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 6px;
padding: 8px 14px;
height: 38px;
min-width: 60px;
transition: transform .18s ease, box-shadow .18s ease;
}
.sg-foot__pay-chip:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6);
}
.sg-foot__pay-chip img {
height: 100%;
width: auto;
max-height: 22px;
object-fit: contain;
display: block;
}
.sg-foot__pay-chip--klarna { background: #FFA8CD; }
.sg-foot__pay-chip--apple,
.sg-foot__pay-chip--google { background: #1a1a1a; border-color: rgba(255,255,255,.18); }
/* Manifest gets more breathing room */
.sg-foot__manifest { padding: 90px 0 60px; gap: 60px; }
/* Tighter mobile manifest stacking + bigger gap, payment chips wrap nicely */
@media (max-width: 960px) {
.sg-foot__manifest { padding: 60px 0 40px; gap: 44px; }
.sg-foot__pay { padding: 22px 0 20px; gap: 16px; flex-direction: column; align-items: flex-start; }
.sg-foot__pay-row { gap: 10px; }
.sg-foot__strap { padding: 18px 0 32px; }
}
@media (max-width: 560px) {
.sg-foot__pay-chip { padding: 6px 10px; height: 34px; min-width: 50px; }
.sg-foot__pay-chip img { max-height: 18px; }
.sg-foot__strap { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 28px; }
.sg-foot__strap-meta { gap: 14px; }
}