/** Shopify CDN: Minification failed
Line 630:0 Unexpected "}"
**/
/* =============================================================
TANKS DIRECT — BRAND TOKENS v1.4 (Evolution-aligned)
Single source of truth for all design decisions.
Brand Guidelines: Tanks-Direct Brand Book (Evolution)
v1.4 changes (colour + type reconciled to the brand book):
• Navy remapped to the book navy scale (800 = workhorse #0a2540)
• Page surface → Paper #f7f4ed; borders → Line #dfe4eb
• Accent restructured: warm accent is Spring Gold #f3ba25
(--color-orange retained as a LEGACY ALIAS so existing
section files keep working — orange is retired, now gold)
• Blue River #00b7dd introduced as the primary INTERACTIVE
colour (links-hover + focus rings)
• Primary button → navy fill (book components + fixes the
white-on-gold contrast failure a gold fill would cause)
• Type: Inter (all) + JetBrains Mono (labels/code)
USAGE IN theme.liquid (Google Fonts CDN option):
─────────────────────────────────────────────────
Inside , before other stylesheets:
{{ 'brand-tokens.css' | asset_url | stylesheet_tag }}
USAGE IN theme.liquid (Self-hosted option — GDPR preferred):
─────────────────────────────────────────────────────────────
Upload Inter-Regular/Medium/SemiBold/Bold/ExtraBold.woff2 and
JetBrainsMono-Regular/Medium.woff2 to Shopify Files, then use an
@font-face block in a separate fonts.css asset.
============================================================= */
:root {
/* ── COLOUR ──────────────────────────────────────────────── */
/* Primary — book navy scale (800 is the workhorse) */
--color-navy: #0A2540; /* Navy 800 — hero/header/footer/primary */
--color-navy-mid: #123358; /* Navy 700 */
--color-navy-light: #1C4A7A; /* Navy 600 */
/* Warm accent — Spring Gold. Use for ONE highlight per visual zone. */
--color-gold: #F3BA25; /* eyebrows, dropcap, accent word, sale */
--color-gold-dark: #CF9E1F; /* hover / pressed (derived — tune to taste) */
--color-gold-pale: #FAF3DE; /* tinted backgrounds (derived) */
/* LEGACY ALIASES — existing sections reference --color-orange*.
Orange is retired; these now resolve to Spring Gold so nothing breaks. */
--color-orange: var(--color-gold);
--color-orange-dark: var(--color-gold-dark);
--color-orange-pale: var(--color-gold-pale);
/* Interactive — Blue River. Links-hover, focus rings. */
--color-blue-river: #00B7DD;
--color-blue-river-dark: #00A1C2; /* hover (derived) */
--color-blue-river-pale: #E0F7FB; /* focus tint (derived) */
/* Surfaces */
--color-white: #FFFFFF;
--color-off-white: #F7F4ED; /* Paper — page bg, alternating sections */
--color-gray-100: #EEE8DA; /* Paper-2 — cards, form inputs bg */
--color-gray-200: #DFE4EB; /* Line — borders, dividers */
--color-gray-400: #9CA3AF; /* placeholder, disabled */
--color-gray-600: #6B7380; /* Muted — secondary text, metadata */
/* Body text */
--color-text: #0E0E10; /* Ink — primary body copy */
--color-text-muted: #6B7380; /* Muted — descriptions, hints */
/* Semantic — status only, never decorative */
--color-green: #1A8E4A; /* in stock, trust icons, checkmarks */
--color-green-pale: #EAF5EE; /* in-stock badge bg */
--color-red: #DC2626; /* out of stock, errors */
--color-red-pale: #FEF2F2; /* error badge bg */
--color-blue: #1E40AF; /* trade account badge */
--color-blue-pale: #EFF6FF; /* trade badge bg */
--color-amber: #92400E; /* new arrival badge */
--color-amber-pale: #FFFBEB; /* new badge bg */
/* ── TYPOGRAPHY ──────────────────────────────────────────── */
/* Families — book defines Inter (everything) + JetBrains Mono.
Display vs body hierarchy comes from WEIGHT, not family. */
--font-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* headings, product names, prices */
--font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* all body copy, UI labels, nav */
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* code, SKUs, hex values */
/* Display weights — always use these, never invent new ones */
--font-weight-display-hero: 800; /* hero h1 */
--font-weight-display: 800; /* h1–h2, product names, prices */
--font-weight-display-sub: 700; /* h3, card names */
/* Body weights */
--font-weight-semibold: 600; /* buttons, eyebrow labels, badge text, field labels */
--font-weight-medium: 500; /* navigation, supporting UI */
--font-weight-regular: 400; /* all body copy, descriptions */
/* Type scale
px, deliberately. Dawn sets html { font-size: 62.5% } so 1rem = 10px.
This scale was authored against a 16px root and was rendering at 62.5%
of intent — body copy landed at 8.75px. Do not convert back to rem. */
--text-hero: clamp(40px, 4.5vw, 64px);
--text-h1: 32px; /* page / product title */
--text-h2: 24px; /* section heading */
--text-h3: 18px; /* card / sub-heading */
--text-lead: 16px; /* lead paragraph */
--text-body: 14px; /* standard body */
--text-small: 12px; /* metadata, trust bar descriptions */
--text-eyebrow: 10px; /* section labels, uppercase */
--text-badge: 11px; /* status badges */
--text-price: 26px; /* product price */
--text-price-sm: 18px; /* card price */
/* Line heights */
--leading-tight: 1.0; /* hero headings */
--leading-snug: 1.15; /* product names, multi-line headings */
--leading-normal: 1.6; /* base */
--leading-relaxed:1.75; /* lead copy */
--leading-loose: 1.85; /* long body paragraphs */
/* Letter spacing */
--tracking-eyebrow: 0.2em; /* eyebrow labels */
--tracking-ui: 0.08em; /* attribute badge labels */
--tracking-badge: 0.02em; /* status badges */
/* ── SPACING ──────────────────────────────────────────────── */
/* Base unit: 4px. Always use these tokens, never arbitrary px. */
--space-xs: 4px; /* icon-to-label, badge internal padding */
--space-sm: 8px; /* card inner padding top/bottom, button icon gap */
--space-md: 16px; /* card padding, form field gap, tight grid gap */
--space-lg: 24px; /* between cards in a row, trust bar item padding */
--space-xl: 48px; /* between sub-sections within a block */
--space-2xl: 64px; /* section top/bottom padding (desktop) */
--space-3xl: 96px; /* hero padding, page-level vertical rhythm */
/* Section padding shorthand */
--section-padding: var(--space-2xl) var(--gutter);
--section-padding-hero: var(--space-3xl) var(--gutter);
/* ── LAYOUT ───────────────────────────────────────────────── */
--max-width: 1280px;
--gutter: 2rem; /* horizontal page padding */
--grid-gap: 1.5px; /* separator gap for product/category grids */
--grid-gap-cards: 1rem; /* card grid gap (standard) */
/* ── BORDERS & RADIUS ─────────────────────────────────────── */
--radius-sm: 3px; /* badges, small elements */
--radius-md: 4px; /* buttons, cards, inputs */
--radius-lg: 8px; /* modals, larger containers */
--border-color: var(--color-gray-200);
--border-color-focus: var(--color-blue-river); /* book: focus = Blue River */
--border-width: 1px;
--border-width-input: 1.5px;
--border-width-btn: 2px;
/* ── TRANSITIONS ─────────────────────────────────────────── */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.3s ease;
/* ── SHADOWS ─────────────────────────────────────────────── */
/* Tanks Direct uses minimal shadows — prefer borders over box-shadow */
--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.08);
--shadow-card: 0 2px 8px rgba(10, 37, 64, 0.06);
/* ── Z-INDEX SCALE ───────────────────────────────────────── */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 9999;
/* ── COMPONENT TOKENS ────────────────────────────────────── */
/* Derived from primitives above. Change the primitive; these follow. */
/* Buttons */
--btn-font: var(--font-body);
--btn-font-weight: var(--font-weight-semibold);
--btn-font-size: 0.82rem;
--btn-padding: 0.65rem 1.4rem;
--btn-radius: var(--radius-md);
--btn-border-width: var(--border-width-btn);
--btn-transition: var(--transition-fast);
/* Primary — NAVY fill (book components; also the only choice that keeps
white text legible. Gold fill would fail contrast with white text).
To go gold instead: bg/border → var(--color-gold), color → var(--color-navy). */
--btn-primary-bg: var(--color-navy);
--btn-primary-color: var(--color-white);
--btn-primary-border: var(--color-navy);
--btn-primary-bg-hover: var(--color-navy-mid);
--btn-secondary-bg: transparent;
--btn-secondary-color: var(--color-navy);
--btn-secondary-border: var(--color-navy);
--btn-secondary-bg-hover: var(--color-navy);
--btn-secondary-color-hover: var(--color-white);
/* Inputs / forms */
--input-font: var(--font-body);
--input-font-size: 0.82rem;
--input-padding: 0.58rem 0.9rem;
--input-radius: var(--radius-md);
--input-border: var(--border-width-input) solid var(--border-color);
--input-border-focus: var(--border-width-input) solid var(--border-color-focus);
--input-bg: var(--color-white);
--input-color: var(--color-text);
/* Labels */
--label-font-size: 0.75rem;
--label-font-weight: var(--font-weight-semibold);
--label-color: var(--color-navy);
/* Product cards */
--card-bg: var(--color-white);
--card-border: var(--border-width) solid var(--border-color);
--card-radius: var(--radius-md);
--card-padding: 1rem;
/* Trust bar */
--trust-bar-bg: var(--color-white);
--trust-bar-border: var(--border-color);
--trust-bar-padding: 1.1rem 1.2rem;
--trust-icon-color: var(--color-green);
/* Section headers (eyebrow + heading pattern) — warm gold label */
--eyebrow-color: var(--color-gold);
--eyebrow-font: var(--font-body);
--eyebrow-size: var(--text-eyebrow);
--eyebrow-weight: var(--font-weight-semibold);
--eyebrow-tracking: var(--tracking-eyebrow);
/* Hero */
--hero-bg: var(--color-navy);
--hero-color: var(--color-white);
--hero-body-color: rgba(255, 255, 255, 0.6);
--hero-stat-color: rgba(255, 255, 255, 0.4);
--hero-divider: rgba(255, 255, 255, 0.1);
/* Footer */
--footer-bg: var(--color-navy);
--footer-color: rgba(255, 255, 255, 0.6);
--footer-link-color: rgba(255, 255, 255, 0.5);
/* Header / nav */
--header-bg: var(--color-navy);
--header-color: var(--color-white);
--nav-font: var(--font-body);
--nav-font-size: 0.875rem;
--nav-font-weight: var(--font-weight-medium);
/* Utility bar */
--utility-bar-bg: var(--color-navy);
--utility-bar-font-size: 0.75rem;
/* Price */
--price-font: var(--font-display);
--price-font-size: var(--text-price);
--price-font-weight: var(--font-weight-display);
--price-color: var(--color-navy);
--price-vat-size: 0.68rem;
--price-vat-color: var(--color-gray-400);
/* Drop cap — gold statement */
--dropcap-font: var(--font-display);
--dropcap-size: 4.2rem;
--dropcap-weight: 800;
--dropcap-color: var(--color-gold);
--dropcap-line-height: 0.75;
}
/* =============================================================
BASE ELEMENT STYLES
Applied globally once tokens are loaded.
============================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--font-weight-regular);
color: var(--color-text);
line-height: var(--leading-normal);
background-color: var(--color-off-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── HEADINGS ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--color-navy);
line-height: var(--leading-snug);
font-weight: var(--font-weight-display);
}
h1 { font-size: var(--text-h1); font-weight: var(--font-weight-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: var(--font-weight-display-sub); }
h4 { font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
/* ── LINKS ──────────────────────────────────────────────────── */
a {
color: var(--color-navy);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-blue-river); /* book: interactive = Blue River */
}
/* ── EYEBROW LABEL PATTERN ──────────────────────────────────── */
/* Usage: 01 — Categories */
.eyebrow {
display: block;
font-family: var(--eyebrow-font);
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-tracking);
text-transform: uppercase;
color: var(--eyebrow-color);
margin-bottom: var(--space-sm);
}
/* ── DROP CAP ───────────────────────────────────────── */
.intro-text::first-letter,
/* Pages (About, editorial) */
.rte > p:first-child::first-letter,
/* Collection description */
.collection__description > p:first-child::first-letter,
.collection-hero__description > p:first-child::first-letter,
/* Homepage editorial sections */
.sf-body::first-letter,
.ac-copy::first-letter,
/* Blog / articles */
.article-template .rte > p:first-child::first-letter,
/* Product description — first after opening H2 only */
.product__description h2:first-of-type + p::first-letter,
.product-description h2:first-of-type + p::first-letter,
.pia-description > p:first-child::first-letter,
.tab-pane--description > p:first-child::first-letter
{
font-family: var(--dropcap-font);
font-size: var(--dropcap-size);
font-weight: var(--dropcap-weight);
color: var(--dropcap-color);
float: left;
line-height: var(--dropcap-line-height);
margin-right: 0.08em;
margin-top: 0.06em;
}
/* ── BUTTONS ────────────────────────────────────────────────── */
.btn,
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
font-family: var(--btn-font);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
padding: var(--btn-padding);
border-radius: var(--btn-radius);
border: var(--btn-border-width) solid transparent;
cursor: pointer;
text-decoration: none;
transition:
background var(--btn-transition),
border-color var(--btn-transition),
color var(--btn-transition);
line-height: 1;
white-space: nowrap;
}
/* Primary — navy fill. One per section. */
.btn--primary,
.button--primary,
input[type="submit"],
button[type="submit"] {
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
border-color: var(--btn-primary-border);
}
.btn--primary:hover,
.button--primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
background: var(--btn-primary-bg-hover);
border-color: var(--btn-primary-bg-hover);
color: var(--btn-primary-color);
}
/* Secondary — navy outline. Supporting actions. */
.btn--secondary,
.button--secondary {
background: var(--btn-secondary-bg);
color: var(--btn-secondary-color);
border-color: var(--btn-secondary-border);
}
.btn--secondary:hover,
.button--secondary:hover {
background: var(--btn-secondary-bg-hover);
color: var(--btn-secondary-color-hover);
border-color: var(--btn-secondary-bg-hover);
}
/* Ghost — white outline. For use on navy backgrounds only. */
.btn--ghost {
background: transparent;
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.5);
}
/* Text link button */
.btn--text {
background: none;
border: none;
padding: 0;
color: var(--color-navy);
font-weight: var(--font-weight-medium);
}
.btn--text:hover {
color: var(--color-blue-river);
}
/* ── FORM ELEMENTS ──────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
font-family: var(--input-font);
font-size: var(--input-font-size);
color: var(--input-color);
background: var(--input-bg);
border: var(--input-border);
border-radius: var(--input-radius);
padding: var(--input-padding);
width: 100%;
outline: none;
transition: border-color var(--transition-fast);
-webkit-appearance: none;
appearance: none;
}
input:focus,
select:focus,
textarea:focus {
border: var(--input-border-focus);
}
label {
font-family: var(--font-body);
font-size: var(--label-font-size);
font-weight: var(--label-font-weight);
color: var(--label-color);
display: block;
margin-bottom: 0.35rem;
}
/* ── PRICE ──────────────────────────────────────────────────── */
.price {
font-family: var(--price-font);
font-size: var(--price-font-size);
font-weight: var(--price-font-weight);
color: var(--price-color);
}
.price__suffix {
font-family: var(--font-body);
font-size: var(--price-vat-size);
font-weight: var(--font-weight-regular);
color: var(--price-vat-color);
margin-left: 0.25rem;
}
/* ── BADGES / STATUS LABELS ─────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--font-body);
font-size: var(--text-badge);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-badge);
padding: 0.28rem 0.65rem;
border-radius: var(--radius-sm);
border: 1px solid transparent;
line-height: 1;
}
.badge--stock { background: var(--color-green-pale); color: #14622F; border-color: #B3DEC1; }
.badge--oos { background: var(--color-red-pale); color: #991B1B; border-color: #FECACA; }
.badge--trade { background: var(--color-blue-pale); color: var(--color-blue); border-color: #BFDBFE; }
.badge--new { background: var(--color-amber-pale); color: var(--color-amber); border-color: #FDE68A; }
/* Sale — gold fill with NAVY text (white-on-gold fails contrast) */
.badge--sale { background: var(--color-gold); color: var(--color-navy); border-color: var(--color-gold); }
.badge--potable { background: var(--color-navy); color: rgba(255,255,255,0.9); border-color: var(--color-navy); }
/* ── LAYOUT UTILITIES ───────────────────────────────────────── */
.page-width {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section-padding {
padding: var(--section-padding);
}
.section-padding--hero {
padding: var(--section-padding-hero);
}
/* Grid patterns */
.grid--categories {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap);
background: var(--color-gray-200);
}
.grid--products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--grid-gap);
background: var(--color-gray-200);
}
.grid--cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap-cards);
}
/* Section backgrounds (alternating pattern) */
.section--white { background: var(--color-white); }
.section--off-white { background: var(--color-off-white); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
/* ── RESPONSIVE OVERRIDES ───────────────────────────────────── */
@media (max-width: 990px) {
:root {
--gutter: 1.5rem;
--space-2xl: 48px;
--space-3xl: 64px;
}
.grid--products { grid-template-columns: repeat(2, 1fr); }
.grid--categories { grid-template-columns: repeat(2, 1fr); }
.grid--cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
:root {
--gutter: 16px;
--text-hero: 40px;
--text-h1: 26px;
--text-h2: 21px;
}
}
.grid--products { grid-template-columns: 1fr; }
.grid--categories { grid-template-columns: 1fr; }
.grid--cards { grid-template-columns: 1fr; }
}
/* Variant picker option labels */
.td-option { margin-bottom: 14px; }
.td-option__label,
.product-form__input--dropdown .form__label {
display: block !important;
position: static !important;
visibility: visible !important;
clip: auto !important;
clip-path: none !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted, #6b7380);
margin: 0 0 6px 0;
}
.td-option .select { position: relative; }
.td-option .select .icon-caret {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 6px;
pointer-events: none;
color: var(--navy-800, #0a2540);
}
.td-option .select__select {
appearance: none;
-webkit-appearance: none;
width: 100%;
padding-right: 44px;
}
.ev-product-top .viewport > .td-also {
grid-column: 2;
grid-row: 2;
}
@media (max-width: 989px) {
.ev-product-top .viewport > .td-also {
grid-column: 1;
grid-row: auto;
}
}