/* ======================================================================== Handcrafted By Luke — "Kiln & Ember" brand Warm, grounded workshop aesthetic — sand/putty "studio floor" for content, framed top and bottom by a near-black "firebox frame" (header, hero, footer). Deep rust/cognac + chestnut accents. Handmade, not sketchy. ======================================================================== */ /* --- Design tokens ------------------------------------------------------- */ :root { /* Studio floor: warm sand/putty, sunlit and lived-in */ --bg: #EEE3D2; --bg-2: #E3D4BB; --bg-3: #D3BF9C; /* Foregrounds: near-black warm-brown ink scale */ --fg: #2A211B; --fg-2: #5B4A3A; --fg-3: #8A7660; /* Rules: warm hairlines */ --rule: #DACAAC; --rule-2: #C9B38D; /* Accent: deep rust / cognac leather */ --accent: #A8472D; --accent-fg: #F9F1E6; --accent-soft: #E3C9BA; --warn: #C4861E; --danger: #B03A2E; --radius: 1px; --radius-lg: 2px; --shadow: 0 2px 8px rgba(0, 0, 0, .5); /* Typography: Lora (display) + Karla (body) + JetBrains Mono */ --font-display: 'Lora', Georgia, serif; --font-body: 'Karla', sans-serif; --font-serif: 'Lora', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --container: 1180px; --reading: 680px; } /* --- Firebox frame: header, hero, and footer keep the dark char tones, framing the lighter studio-floor content sections. --- */ .ll-header, .ll-hero, .ll-footer { --bg: #2A1B14; --bg-2: #3A2419; --bg-3: #4A3022; --fg: #F2E6D8; --fg-2: #D9C4AC; --fg-3: #A8927A; --fg-4: #F7EFE3; --rule: #4A3325; --rule-2: #5E4232; --accent: #D9794F; --accent-fg: #2A1B14; --accent-soft: #4A3022; } /* --- Admin: near-black workshop tokens, calmer than the public studio, shifted to the same rust/ember family. --- */ .admin-shell, .admin-auth { --bg: #0E0B08; --bg-2: #18120D; --bg-3: #221A12; --fg: #F2E6D8; --fg-2: #CDBBA4; --fg-3: #8A7860; --rule: #281F15; --rule-2: #3A2C1C; --accent: #C9784F; --accent-fg: #0E0B08; --accent-soft: #281C12; } /* --- Google Font import -------------------------------------------------- */ /* Loaded via in _header.php — see below for updated link tag */ /* --- Reset / base -------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); overflow-x: hidden; } body { font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } table { font-variant-numeric: tabular-nums; } input:focus, textarea:focus { border-color: var(--accent) !important; } ::selection { background: var(--accent); color: var(--accent-fg); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* --- Layout containers --------------------------------------------------- */ .ll-container { max-width: var(--container); margin: 0 auto; padding: 0 32px; } .ll-container--reading { max-width: var(--reading); margin: 0 auto; padding: 0 32px; } .ll-container--wide { max-width: 1080px; margin: 0 auto; padding: 0 32px; } /* --- Staging banner -------------------------------------------------------- */ .ll-staging-banner { background: var(--warn); color: var(--fg); text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; } /* --- Public header ------------------------------------------------------- */ .ll-header { border-bottom: 1px solid var(--rule); background: var(--bg); /* Thin gold top-rule — a signature atelier touch */ border-top: 2px solid var(--accent); position: sticky; top: 0; z-index: 200; } .ll-header__row { max-width: var(--container); margin: 0 auto; padding: 22px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .ll-brand { display: inline-block; } .ll-brand__name { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; color: var(--fg); /* Subtle gold shimmer on hover */ transition: color .2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ll-brand:hover .ll-brand__name { color: var(--accent); } .ll-brand__kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ll-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .ll-nav__links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .ll-nav__toggle { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; padding: 0; color: var(--fg); cursor: pointer; } .ll-nav__item { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--fg-3); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; } .ll-nav__item:hover { color: var(--fg); } .ll-nav__item.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* --- Nav dropdown (Shop categories) -------------------------------------- */ .ll-nav__dropdown { position: relative; display: flex; align-items: center; } .ll-nav__dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; min-width: 180px; padding: 8px 0; background: var(--bg); border: 1px solid var(--rule-2); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(0,0,0,.18); z-index: 210; } .ll-nav__dropdown-menu a { padding: 9px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; transition: color .15s ease, background .15s ease; } .ll-nav__dropdown-menu a:hover { color: var(--fg); background: var(--bg-2); } /* Reveal a dropdown on keyboard focus or (for the search box) the JS-driven `.is-open` class. Each dropdown is independent, so only the one the pointer/focus is actually in can be open at a time. Hover is a separate, pointer-only trigger below — touch devices have no real hover state, and letting `:hover` control this caused dropdowns to get stuck open after a tap on mobile. */ .ll-nav__dropdown:focus-within > .ll-nav__dropdown-menu, .ll-nav__dropdown.is-open > .ll-nav__dropdown-menu, .ll-nav__dropdown:focus-within > .ll-nav__search-panel, .ll-nav__dropdown.is-open > .ll-nav__search-panel { display: flex; } @media (hover: hover) and (pointer: fine) { .ll-nav__dropdown:hover > .ll-nav__dropdown-menu, .ll-nav__dropdown:hover > .ll-nav__search-panel { display: flex; } } /* Subcategory flyout: a dropdown nested inside another dropdown's menu, opening to the right instead of below. */ .ll-nav__dropdown--sub > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ll-nav__dropdown--sub > a .ll-icon { color: var(--fg-3); } .ll-nav__dropdown-menu--sub { top: -9px; left: 100%; transform: none; margin-left: 4px; z-index: 211; } /* --- Nav search ------------------------------------------------------------ */ .ll-nav__search-toggle { display: inline-flex; align-items: center; background: none; border: none; padding: 0; font: inherit; cursor: pointer; } .ll-nav__search-panel { position: absolute; top: 100%; right: 0; left: auto; display: none; flex-direction: column; gap: 8px; z-index: 210; } .ll-nav__search-form { display: flex; align-items: center; padding: 4px; background: var(--bg); border: 1px solid var(--rule-2); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(0,0,0,.18); } .ll-nav__search-form input[type="search"] { width: 200px; padding: 8px 10px; font-family: var(--font-body); font-size: 13px; color: var(--fg); background: transparent; border: none; outline: none; } .ll-nav__search-form button { display: inline-flex; align-items: center; padding: 0 8px; color: var(--fg-3); background: transparent; border: none; cursor: pointer; } .ll-nav__search-form button:hover { color: var(--accent); } .ll-nav__search-close { display: none; } /* Live search results dropdown */ .ll-search-results { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--rule-2); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(0,0,0,.18); max-height: 360px; overflow-y: auto; overflow-x: hidden; } .ll-search-results[hidden] { display: none; } .ll-search-results__group { padding: 10px 14px 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); } .ll-search-results__item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 14px; font-size: 13.5px; color: var(--fg); } .ll-search-results__item:hover, .ll-search-results__item.is-active { background: var(--bg-2); } .ll-search-results__meta { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); } .ll-search-results__empty { padding: 14px; font-size: 13px; color: var(--fg-3); } .ll-search-results__more { padding: 10px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); border-top: 1px solid var(--rule); } .ll-search-results__more:hover { color: var(--fg); background: var(--bg-2); } /* --- Mobile nav: hamburger-collapsed links, search expands to cover the whole header bar and autofocuses (JS calls input.focus() on open). Positioning is anchored to .ll-header__row (not .ll-nav) because .ll-nav's own box starts wherever the brand happens to end — using it as the containing block let the dropdown's left/right offsets drift past the viewport edge and force horizontal page scroll. .ll-header__row has no border, so the containing block its padding forms already sits flush with its outer edge — left:0/right:0 is full-bleed on its own; no negative offset is needed (or correct) to "cancel" the row's padding. --- */ @media (max-width: 860px) { .ll-header__row { flex-wrap: nowrap; position: relative; } .ll-brand { flex-shrink: 1; min-width: 0; } .ll-nav { flex: 1; justify-content: flex-end; gap: 14px; } .ll-nav__toggle { display: inline-flex; } .ll-nav__links { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 12px 28px rgba(0,0,0,.18); z-index: 220; padding: 4px 0; } .ll-nav__links.is-open { display: flex; } .ll-nav__links .ll-nav__item { padding: 14px 32px; border-bottom: 1px solid var(--rule); } .ll-nav__links .ll-nav__dropdown { flex-direction: column; align-items: stretch; } .ll-nav__links .ll-nav__dropdown-menu { position: static; transform: none; width: 100%; border: none; box-shadow: none; background: transparent; padding: 0 0 8px 16px; } .ll-nav__links .ll-nav__dropdown-menu--sub { left: 0; margin-left: 0; padding-left: 28px; } /* Search: on mobile it's a plain field inside the open nav list, not a toggled icon + overlay — touch devices have no real hover state for that pattern to hook into, and the icon read as disconnected from the menu. The toggle button and close button are unused here. */ .ll-nav__search-toggle { display: none; } .ll-nav__search-close { display: none; } .ll-nav__links .ll-nav__dropdown.ll-nav__search { padding: 14px 32px; border-top: 1px solid var(--rule); } .ll-nav__links .ll-nav__search-panel { position: static; display: flex; width: 100%; } .ll-nav__links .ll-nav__search-form { flex: 1; width: 100%; box-shadow: none; } .ll-nav__search-form input[type="search"] { width: 100%; } /* Inset to match the search wrapper's own 14px/32px padding — the wrapper has no border, so left:0/right:0 here would be flush with its outer edge (full-bleed), wider than the input row above it. */ .ll-search-results { position: absolute; top: 100%; left: 32px; right: 32px; } /* Title + meta side-by-side (base rule) doesn't leave room for long product names at mobile widths and pushes the meta text off-screen — stack them instead so the title can wrap normally. align-items is stretch (not flex-start) so each line gets the full row width to wrap within, instead of sizing to its own unbroken content width. */ .ll-search-results__item { flex-direction: column; align-items: stretch; gap: 2px; } .ll-search-results__item > * { max-width: 100%; white-space: normal; overflow-wrap: break-word; } } /* --- Section header ------------------------------------------------------ */ .ll-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 14px; flex-wrap: wrap; } .ll-section-head__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .ll-section-head__title { font-family: var(--font-display); font-size: 32px; margin: 0; font-weight: 600; color: var(--fg); letter-spacing: .01em; line-height: 1.1; } .ll-section-head__action { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; } .ll-section-head__action:hover { text-decoration: underline; } /* --- Hero ---------------------------------------------------------------- */ .ll-hero { border-bottom: 1px solid var(--rule); background: var(--bg); position: relative; overflow: hidden; } /* Subtle texture overlay — suggests worn leather */ .ll-hero::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: .025; pointer-events: none; z-index: 1; } /* Full-bleed cover image behind the hero content */ .ll-hero__cover { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .ll-hero__cover::after { content: ''; position: absolute; inset: 0; background: rgba(43, 31, 22, .55); } .ll-hero--has-cover { background: transparent; } .ll-hero__inner { max-width: var(--container); margin: 0 auto; padding: 72px 32px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; position: relative; z-index: 2; } .ll-hero__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; } .ll-hero__kicker::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--accent); } .ll-hero__title { font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 60px); line-height: 1.15; letter-spacing: .01em; margin: 0; color: var(--fg-4); font-weight: 400; font-style: normal; text-shadow: 0 2px 16px rgba(43, 31, 22, .7); } .ll-hero__lead { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--fg-4); max-width: 46ch; margin-top: 24px; } .ll-hero__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } @media (max-width: 800px) { .ll-hero__inner { grid-template-columns: 1fr; gap: 36px; padding: 48px 32px; } } /* --- Buttons ------------------------------------------------------------- */ .ll-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 11px 20px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--radius); cursor: pointer; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .ll-btn:hover { background: var(--accent); color: var(--accent-fg); } .ll-btn--ghost { background: transparent; color: var(--fg-3); border-color: var(--rule-2); } .ll-btn--ghost:hover { background: transparent; color: var(--fg); border-color: var(--fg-3); } .ll-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .ll-btn--accent:hover { background: transparent; color: var(--accent); } .ll-btn .ll-arrow { transition: transform .15s ease; } .ll-btn:hover .ll-arrow { transform: translateX(3px); } /* --- Chip / pill --------------------------------------------------------- */ .ll-chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); border: 1px solid var(--rule-2); padding: 3px 8px; border-radius: var(--radius); background: transparent; } .ll-chip--accent { color: var(--accent); border-color: var(--accent); } .ll-chip--pub { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); } /* --- Filter buttons ------------------------------------------------------ */ .ll-filters { display: flex; gap: 10px; flex-wrap: wrap; } .ll-filter { background: transparent; color: var(--fg-3); border: 1px solid var(--rule-2); padding: 5px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--radius); text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease; } .ll-filter:hover { color: var(--fg); border-color: var(--fg-3); } .ll-filter.is-active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .ll-filter--sub { padding: 4px 10px; font-size: 9px; border-style: dashed; color: var(--fg-3); } /* --- Card --------------------------------------------------------------- */ .ll-card { background: var(--bg-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px; display: block; text-decoration: none; color: inherit; transition: border-color .2s ease; } .ll-card:hover { border-color: var(--accent); } .ll-card__meta { display: flex; gap: 10px; align-items: center; margin: 14px 0 10px; flex-wrap: wrap; } .ll-card__metaline { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); } .ll-card__title { font-family: var(--font-display); font-size: 24px; line-height: 1.15; margin: 0; font-weight: 600; letter-spacing: .01em; color: var(--fg); font-style: italic; } .ll-card__excerpt { font-size: 14px; line-height: 1.65; color: var(--fg-2); margin: 10px 0 0; } .ll-card__videoflag { margin-top: 12px; font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; } /* --- Placeholder swatch ------------------------------------------------- */ .ll-placeholder { position: relative; width: 100%; border-radius: var(--radius); user-select: none; overflow: hidden; border: 1px solid var(--rule); background: var(--bg-3); } .ll-placeholder__label { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(240, 232, 216, .5); } /* --- Grids --------------------------------------------------------------- */ .ll-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .ll-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ll-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } @media (max-width: 1000px) { .ll-grid-3 { grid-template-columns: repeat(2, 1fr); } .ll-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ll-grid-3, .ll-grid-4, .ll-grid-2 { grid-template-columns: 1fr; } } /* --- Gallery tile -------------------------------------------------------- */ .ll-tile { display: block; text-decoration: none; color: inherit; scroll-margin-top: 100px; } .ll-tile__media { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); } .ll-tile__media img { transition: transform .4s ease; } .ll-tile:hover .ll-tile__media img { transform: scale(1.04); } /* --- Instagram reels ------------------------------------------------------ */ .ll-reels-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } @media (max-width: 1000px) { .ll-reels-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .ll-reels-grid { grid-template-columns: repeat(2, 1fr); } } .ll-reel-card { display: block; text-decoration: none; color: inherit; } .ll-reel-card__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-3); } .ll-reel-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .ll-reel-card:hover .ll-reel-card__media img { transform: scale(1.04); } .ll-reel-card__play { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(15, 13, 10, .6); display: flex; align-items: center; justify-content: center; color: var(--fg); } .ll-reel-card__play .ll-icon { width: 11px; height: 11px; } .ll-reel-card__caption { font-size: 12px; line-height: 1.5; color: var(--fg-2); margin: 8px 0 0; } .ll-tile__meta { margin-top: 11px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ll-tile__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--fg); line-height: 1.2; font-style: italic; } .ll-tile__title--compact { font-size: 15px; } .ll-tile__sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-top: 3px; } .ll-tile__sold { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); } /* --- Article ------------------------------------------------------------ */ .ll-article-head { background: var(--bg); border-bottom: 1px solid var(--rule); } .ll-article-head__inner { max-width: 760px; margin: 0 auto; padding: 64px 32px 28px; } .ll-article-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; } .ll-article-metaline { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: .14em; text-transform: uppercase; } .ll-article__title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); line-height: 1.08; letter-spacing: .01em; margin: 0; font-weight: 600; font-style: italic; color: var(--fg); } .ll-article__lead { font-family: var(--font-serif); font-size: 20px; line-height: 1.55; color: var(--fg-2); margin: 20px 0 0; } .ll-article__cover { max-width: 1080px; margin: 0 auto; padding: 28px 32px 0; } .ll-article__body { max-width: var(--reading); margin: 0 auto; padding: 44px 32px 24px; } .ll-article-p { font-family: var(--font-serif); font-size: 19px; line-height: 1.72; color: var(--fg); margin: 0 0 22px; } .ll-article-h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--fg); margin: 36px 0 16px; } .ll-article-ul { font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--fg); margin: 0 0 22px; padding-left: 26px; } .ll-article-ul li { margin-bottom: 10px; } .ll-article-ul li:last-child { margin-bottom: 0; } .ll-article-p a, .ll-article-h2 a, .ll-article-ul a { color: var(--accent); } .ll-dropcap { font-family: var(--font-display); font-size: 60px; line-height: .88; float: left; margin: 8px 10px 0 0; color: var(--accent); } /* Video block */ .ll-video { background: var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .ll-video__inner { max-width: 920px; margin: 0 auto; padding: 40px 32px; } .ll-video__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; } .ll-video__frame { position: relative; padding-bottom: 56.25%; background: #000; border: 1px solid var(--accent); overflow: hidden; } .ll-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ll-video__playstub { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; color: var(--fg); text-decoration: none; } .ll-video__playstub-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; } .ll-video__url { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .6; } /* Byline */ .ll-byline { display: flex; gap: 14px; align-items: center; margin-top: 24px; } .ll-byline__avatar { width: 56px; height: 56px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--rule-2); display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; color: var(--accent); font-style: italic; } .ll-byline__name { font-family: var(--font-display); font-size: 18px; font-weight: 600; font-style: italic; } .ll-byline__sub { font-size: 13px; color: var(--fg-3); } /* --- Divider ------------------------------------------------------------ */ .ll-divider { display: flex; align-items: center; gap: 12px; color: var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; } .ll-divider::before, .ll-divider::after { content: ''; flex: 1; border-top: 1px solid var(--rule); } /* --- Footer ------------------------------------------------------------- */ .ll-footer { border-top: 1px solid var(--rule); background: var(--bg); /* Gold top accent on footer too */ position: relative; } .ll-footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .6; } .ll-footer__cols { max-width: var(--container); margin: 0 auto; padding: 52px 32px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; } .ll-footer__brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; font-style: italic; color: var(--fg); letter-spacing: .02em; } .ll-footer__brand-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-top: 5px; } .ll-footer__brand-bio { font-size: 13px; color: var(--fg-3); line-height: 1.65; margin-top: 18px; max-width: 36ch; } .ll-footer__col-title { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .ll-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .ll-footer__col li { font-size: 13px; color: var(--fg-3); } .ll-footer__col a { color: var(--fg-3); transition: color .15s ease; } .ll-footer__col a:hover { color: var(--accent); } .ll-footer__newsletter { display: flex; gap: 0; margin-top: 14px; } .ll-footer__newsletter input { flex: 1; padding: 8px 10px; font-size: 12px; border: 1px solid var(--rule-2); border-right: none; background: var(--bg-2); border-radius: 0; font-family: inherit; color: var(--fg); } .ll-footer__newsletter button { padding: 8px 14px; font-size: 10px; background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .15s ease; } .ll-footer__newsletter button:hover { background: #A8822A; } .ll-footer__bar { border-top: 1px solid var(--rule); } .ll-footer__bar-inner { max-width: var(--container); margin: 0 auto; padding: 16px 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); } @media (max-width: 800px) { .ll-footer__cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .ll-footer__cols { grid-template-columns: 1fr; } } /* --- Section spacing utilities ----------------------------------------- */ .ll-section { background: var(--bg); border-bottom: 1px solid var(--rule); } .ll-section--alt{ background: var(--bg-2); border-bottom: 1px solid var(--rule); } .ll-section__inner-tight { max-width: var(--container); margin: 0 auto; padding: 32px 32px 80px; } .ll-section__inner { max-width: var(--container); margin: 0 auto; padding: 60px 32px; } .ll-section__inner-narrow { max-width: var(--container); margin: 0 auto; padding: 44px 32px 80px; } /* --- Empty state -------------------------------------------------------- */ .ll-empty { text-align: center; padding: 60px 0; color: var(--fg-3); border: 1px dashed var(--rule-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } /* --- About + Contact layouts ------------------------------------------- */ .ll-prose { max-width: var(--reading); margin: 0 auto; padding: 64px 32px 88px; } .ll-prose h1 { font-family: var(--font-display); font-size: clamp(38px, 5vw, 58px); line-height: 1.05; letter-spacing: .01em; font-weight: 600; font-style: italic; margin: 0 0 26px; color: var(--fg); } .ll-prose p { font-family: var(--font-serif); font-size: 19px; line-height: 1.72; color: var(--fg-2); margin: 0 0 22px; } .ll-form { display: grid; gap: 16px; margin-top: 24px; } .ll-form label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 6px; } .ll-form input, .ll-form textarea { width: 100%; padding: 10px 12px; font-family: var(--font-body); font-size: 15px; color: var(--fg); background: var(--bg-2); border: 1px solid var(--rule-2); border-radius: var(--radius); } .ll-form textarea { min-height: 140px; resize: vertical; } .ll-form__row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } @media (max-width: 600px) { .ll-form__row { grid-template-columns: 1fr; } } /* --- Star rating input (review form) ------------------------------------ */ .ll-star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; } .ll-star-input input { position: absolute; opacity: 0; pointer-events: none; } .ll-star-input label { margin: 0; cursor: pointer; color: var(--rule-2); transition: color .12s ease; } .ll-star-input label svg { display: block; width: 30px; height: 30px; fill: currentColor; } .ll-star-input input:checked ~ label, .ll-star-input label:hover, .ll-star-input label:hover ~ label { color: var(--accent); } /* --- Reviews ------------------------------------------------------------ */ .ll-review-stars { display: inline-flex; gap: 2px; color: var(--accent); } .ll-review-star { width: 16px; height: 16px; } .ll-review-star:not(.is-filled) { color: var(--rule-2); } .ll-review-card { padding: 24px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--bg-2); display: flex; flex-direction: column; gap: 12px; } .ll-review-card__body { font-family: var(--font-serif); font-size: 16px; line-height: 1.65; color: var(--fg-2); margin: 0; } .ll-review-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); } .ll-review-card__name { color: var(--fg); } .ll-review-card__product { color: inherit; text-decoration: none; } .ll-review-card__product::before { content: '— '; } .ll-review-card__product:hover { color: var(--accent); } .ll-review-card__reply { margin-top: 4px; padding: 14px 16px; border-left: 2px solid var(--accent); background: var(--bg); } .ll-review-card__reply-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .ll-review-card__reply p { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; } .ll-reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; } /* --- Inline icon -------------------------------------------------------- */ .ll-icon { width: 14px; height: 14px; flex-shrink: 0; } /* --- Article page extras ----------------------------------------------- */ .ll-article-section { background: var(--bg); } /* ======================================================================== ADMIN — sidebar, page header, panels, forms, tables. Same dark tokens; intentionally calmer than public site chrome. ======================================================================== */ .admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--bg); } .admin-aside { background: var(--bg-2); border-right: 1px solid var(--rule); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; } .admin-aside__brand { padding: 8px 10px 16px; border-bottom: 1px solid var(--rule); margin-bottom: 10px; } .admin-aside__brand-kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .admin-aside__brand-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; font-style: italic; margin-top: 4px; color: var(--fg); } .admin-search { position: relative; margin: 0 0 10px; padding: 0 10px; } .admin-search__input { width: 100%; background: var(--bg); border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--fg); font-family: var(--font-body); font-size: 13px; padding: 7px 32px 7px 10px; } .admin-search__input::placeholder { color: var(--fg-3); } .admin-search__input:focus { outline: none; border-color: var(--accent); } .admin-search__btn { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; color: var(--fg-3); cursor: pointer; } .admin-search__btn:hover { color: var(--accent); } .admin-search__btn .ll-icon { width: 14px; height: 14px; } .admin-nav__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius); color: var(--fg-3); font-size: 13px; font-weight: 500; text-align: left; text-decoration: none; background: transparent; cursor: pointer; font-family: var(--font-body); transition: color .15s ease; } .admin-nav__item:hover { color: var(--fg); } .admin-nav__item.is-active { background: var(--bg-3); border-color: var(--rule-2); color: var(--accent); font-weight: 600; } .admin-nav__glyph { font-family: var(--font-mono); font-size: 9px; color: var(--fg-3); width: 18px; } .admin-aside__foot { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 12px; } .admin-aside__foot-kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); padding: 0 10px 6px; } .admin-aside__foot-info { padding: 0 10px; font-size: 13px; color: var(--fg); font-family: var(--font-display); font-style: italic; } .admin-aside__foot-sub { padding: 0 10px; font-size: 11px; color: var(--fg-3); margin-top: 2px; } .admin-aside__viewlive { margin-top: 12px; padding: 6px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .admin-aside__viewlive:hover { text-decoration: underline; } .admin-main { min-width: 0; } .admin-page-head { padding: 28px 36px 20px; border-bottom: 1px solid var(--rule); background: var(--bg); } .admin-page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .admin-page-head__kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .admin-page-head__title { font-family: var(--font-display); font-size: 28px; margin: 0; font-weight: 600; font-style: italic; color: var(--fg); line-height: 1.15; } .admin-page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; } .admin-body { padding: 28px 36px 60px; } .admin-grid-dashboard { display: grid; grid-template-columns: 1.4fr .9fr; gap: 28px; } @media (max-width: 1100px) { .admin-grid-dashboard { grid-template-columns: 1fr; } } .admin-panel { background: var(--bg-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px 20px 14px; margin-bottom: 24px; } .admin-panel__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 10px; } .admin-panel__kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .admin-panel__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; font-style: italic; color: var(--fg); line-height: 1.2; } .admin-panel__hint { font-family: var(--font-mono); font-size: 9px; color: var(--fg-3); letter-spacing: .12em; text-transform: uppercase; } .admin-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); } .admin-row__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--fg); line-height: 1.25; } .admin-row__sub { font-size: 12px; color: var(--fg-3); margin-top: 4px; } .admin-kv { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--rule); } .admin-kv__label { font-size: 13px; color: var(--fg-3); } .admin-kv__value { font-family: var(--font-mono); font-size: 13px; color: var(--fg); } .admin-empty { padding: 26px 0; text-align: center; color: var(--fg-3); border-top: 1px dashed var(--rule-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } /* --- Table -------------------------------------------------------------- */ .admin-table { width: 100%; border-collapse: collapse; background: var(--bg); } .admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); font-size: 13.5px; vertical-align: middle; } .admin-table th { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); background: var(--bg-2); border-bottom: 1px solid var(--rule-2); vertical-align: middle; } .admin-table tr:hover td { background: var(--bg-2); } .admin-table__row--clickable { cursor: pointer; } /* --- Sortable column headers --------------------------------------------- */ .admin-sort { color: inherit; text-decoration: none; white-space: nowrap; } .admin-sort:hover { color: var(--fg); } .admin-sort.is-active { color: var(--fg); } /* --- Pagination ------------------------------------------------------------ */ .admin-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 0; } .admin-pagination__btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-decoration: none; padding: 6px 12px; border: 1px solid var(--rule-2); border-radius: var(--radius); } .admin-pagination__btn:hover { background: var(--bg-2); } .admin-pagination__btn.is-disabled { color: var(--fg-3); opacity: .5; cursor: default; } .admin-pagination__status { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); } .admin-table__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; font-style: italic; color: var(--fg); } .admin-table__sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; font-family: var(--font-mono); letter-spacing: .04em; } .admin-table__actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; white-space: nowrap; vertical-align: middle !important; } .admin-status { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--fg-3); } .admin-status--published { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); } .admin-status--available { color: #1A5C30; background: #1A2E20; border-color: #2A5030; } .admin-status--sold { color: var(--fg-3); background: var(--bg-3); border-color: var(--rule-2); } .admin-status--draft { color: var(--fg-3); } .admin-status--featured { color: var(--accent); border-color: var(--accent); } /* Admin table thumbnail */ .admin-table__thumb { width: 52px; height: 44px; border-radius: 1px; overflow: hidden; border: 1px solid var(--rule); flex-shrink: 0; } .admin-table__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin-table__swatch { width: 100%; height: 100%; } .admin-table input[type="text"], .admin-table input[type="number"] { width: 100%; padding: 6px 8px; font-family: var(--font-body); font-size: 13px; color: var(--fg); background: var(--bg-2); border: 1px solid var(--rule-2); border-radius: var(--radius); } /* --- Forms --------------------------------------------------------------- */ .admin-form { display: grid; gap: 20px; max-width: 760px; } .admin-form--wide { max-width: 100%; } .admin-form__row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } .admin-form__row--three { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 720px) { .admin-form__row, .admin-form__row--three { grid-template-columns: 1fr; } } .admin-form label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 6px; } .admin-form input[type="text"], .admin-form input[type="email"], .admin-form input[type="password"], .admin-form input[type="number"], .admin-form input[type="date"], .admin-form input[type="url"], .admin-form textarea, .admin-form select { width: 100%; padding: 10px 12px; font-family: var(--font-body); font-size: 14px; color: var(--fg); background: var(--bg-2); border: 1px solid var(--rule-2); border-radius: var(--radius); } .admin-form select option { background: var(--bg-2); color: var(--fg); } .admin-form textarea { min-height: 200px; resize: vertical; font-family: var(--font-serif); font-size: 16px; line-height: 1.6; } .admin-form textarea.code { font-family: var(--font-mono); font-size: 13px; min-height: 320px; } .admin-form__help { margin-top: 6px; font-size: 12px; color: var(--fg-3); } .admin-form__check { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 14px; color: var(--fg); text-transform: none; letter-spacing: 0; } .admin-form__check input { margin: 0; accent-color: var(--accent); } .admin-form__actions { display: flex; gap: 12px; align-items: center; padding-top: 8px; border-top: 1px solid var(--rule); margin-top: 8px; flex-wrap: wrap; } .admin-form__error { background: #2A0E0A; border: 1px solid var(--danger); color: #E8907A; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; } .admin-flash { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--fg); padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; margin: 0 36px 18px; } /* --- Button variants (admin) -------------------------------------------- */ .ll-btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; } .ll-btn--danger:hover { background: #8C2E23; border-color: #8C2E23; } .ll-btn--sm { padding: 6px 11px; font-size: 10px; } /* --- Auth shell ---------------------------------------------------------- */ .admin-auth { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 32px; /* Subtle leather-grain texture */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } .admin-auth__card { width: 100%; max-width: 400px; background: var(--bg-2); border: 1px solid var(--rule-2); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow); /* Gold top accent */ border-top: 2px solid var(--accent); } .admin-auth__brand { font-family: var(--font-display); font-size: 22px; font-weight: 600; font-style: italic; color: var(--fg); } .admin-auth__kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-top: 5px; } .admin-auth__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; font-style: italic; margin: 24px 0 6px; color: var(--fg); } .admin-auth__sub { font-size: 14px; color: var(--fg-3); margin: 0 0 18px; } /* --- Image preview in upload field -------------------------------------- */ .admin-imgfield { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: start; } .admin-imgfield__preview { width: 160px; height: 200px; border: 1px solid var(--rule-2); background: var(--bg-3); display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); overflow: hidden; } .admin-imgfield__preview img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 640px) { .admin-imgfield { grid-template-columns: 1fr; } .admin-imgfield__preview { width: 100%; height: 220px; } } /* --- "Reuse an existing upload" picker ---------------------------------- */ .admin-media-picker { margin-top: 12px; } .admin-media-picker > summary { cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .admin-media-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 10px; max-height: 320px; overflow-y: auto; padding: 8px; border: 1px solid var(--rule); border-radius: var(--radius); } .admin-media-picker__item { position: relative; display: block; aspect-ratio: 1; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; cursor: pointer; } .admin-media-picker__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin-media-picker__item input { position: absolute; top: 4px; left: 4px; margin: 0; accent-color: var(--accent); } .admin-media-picker__item:has(input:checked) { border-color: var(--accent); } /* ======================================================================== SHOP, PRODUCTS, ORDERS ======================================================================== */ .admin-status--commission { color: var(--warn); background: transparent; border-color: var(--warn); } .admin-status--new { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); } .admin-status--quoted { color: var(--warn); border-color: var(--warn); } .admin-status--paid { color: #3A8C50; border-color: #3A8C50; } .admin-status--shipped { color: var(--fg-3); } .admin-status--cancelled { color: var(--danger); border-color: var(--danger); } /* Review statuses */ .admin-status--requested { color: var(--fg-3); } .admin-status--pending { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); } .admin-status--approved { color: #3A8C50; border-color: #3A8C50; } .admin-status--rejected { color: var(--danger); border-color: var(--danger); } .admin-nav__badge { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 500; background: var(--accent); color: var(--accent-fg); border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; } .ll-product-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; } @media (max-width: 820px) { .ll-product-intro { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 900px) { .admin-order-grid { grid-template-columns: 1fr !important; } } /* ======================================================================== PAYFAST BUTTON & SHIPPING ESTIMATOR ======================================================================== */ .ll-btn--payfast { background: #1A6B3A; border-color: #1A6B3A; color: #fff; } .ll-btn--payfast:hover { background: #155430; border-color: #155430; } .ll-btn--payfast svg { flex-shrink: 0; } .ll-shipping-estimator { margin-top: 24px; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px 18px; background: var(--bg-2); } .ll-shipping-estimator__title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .ll-shipping-estimator__form { display: flex; flex-direction: column; gap: 10px; } .ll-shipping-estimator__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } @media (max-width: 600px) { .ll-shipping-estimator__row { grid-template-columns: 1fr; } } .ll-shipping-estimator__result { margin-top: 10px; font-size: 14px; color: var(--accent); font-family: var(--font-mono); letter-spacing: .02em; padding: 8px 10px; background: var(--accent-soft); border-radius: var(--radius); } .ll-form__shipping-toggle { border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; } .ll-form__shipping-toggle summary { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); cursor: pointer; user-select: none; } .ll-form__shipping-toggle summary:hover { color: var(--accent); } /* ======================================================================== PAYFAST CHECKOUT PAGE ======================================================================== */ .ll-checkout__save-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 4px; } .ll-checkout__save-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-2); cursor: pointer; user-select: none; } .ll-checkout__save-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .ll-checkout__saved-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #3A8C50; background: #1A2E20; border-radius: 99px; padding: 3px 10px; } .ll-form__hint { display: block; font-size: 12px; color: var(--fg-3); margin-top: 4px; line-height: 1.5; } /* ======================================================================== PAYFAST RETURN / CANCEL PAGES ======================================================================== */ .ll-return__info-box { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; margin-top: 20px; font-size: 13.5px; color: var(--fg-2); line-height: 1.6; } .ll-return__info-box svg { flex-shrink: 0; margin-top: 2px; color: var(--fg-3); } .ll-return__info-box p { margin: 0; } .ll-return__info-box a { color: var(--accent); text-decoration: underline; } /* ======================================================================== SOLD OUT BADGE ======================================================================== */ .ll-sold-out-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 4px; } .ll-edition-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 14px; } /* ======================================================================== CHECKOUT LAYOUT ======================================================================== */ .ll-checkout__wrap { max-width: var(--container); margin: 0 auto; padding: 52px 32px 80px; display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: start; } @media (max-width: 900px) { .ll-checkout__wrap { grid-template-columns: 1fr; gap: 32px; } .ll-checkout__summary-col { order: -1; } } @media (max-width: 480px) { .ll-checkout__wrap { padding: 24px 20px 48px; } } .ll-checkout__title { font-family: var(--font-display); font-size: clamp(22px, 3.5vw, 36px); margin: 0 0 22px; font-weight: 600; font-style: italic; line-height: 1.1; color: var(--fg); } .ll-checkout__section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); } /* Shipping radio group */ .ll-shipping-radio-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .ll-shipping-radio { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: var(--radius); cursor: pointer; transition: border-color .15s ease, background .15s ease; background: var(--bg); } .ll-shipping-radio:hover { border-color: var(--rule-2); background: var(--bg-2); } .ll-shipping-radio--selected { border-color: var(--accent); background: var(--accent-soft); } .ll-shipping-radio input[type="radio"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; } .ll-shipping-radio__body { flex: 1; min-width: 0; } .ll-shipping-radio__name { font-size: 14px; font-weight: 600; color: var(--fg); line-height: 1.3; } .ll-shipping-radio__desc { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; line-height: 1.4; } .ll-shipping-radio__note { font-size: 11.5px; color: var(--accent); margin-top: 4px; font-style: italic; } .ll-shipping-radio__price { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; flex-shrink: 0; padding-top: 2px; } .ll-shipping-radio--selected .ll-shipping-radio__price { color: var(--accent); } /* Checkout total box */ .ll-checkout__total-box { margin-top: 20px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .ll-checkout__total-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 14px; color: var(--fg-2); border-bottom: 1px solid var(--rule); } .ll-checkout__total-row:last-child { border-bottom: none; } .ll-checkout__total-row--grand { font-weight: 700; font-size: 15px; color: var(--fg); background: var(--bg-2); } /* Order summary card (right col) */ .ll-checkout__summary-card { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 24px; } /* ======================================================================== ADMIN — FLAGS BOX ======================================================================== */ .admin-form__flags-box { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-2); } .admin-form__flags-title { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 2px; } .admin-form__check-desc { display: block; font-size: 12px; color: var(--fg-3); margin-top: 2px; line-height: 1.5; } /* ======================================================================== CHECKOUT — SAVED ADDRESS BOX ======================================================================== */ .ll-checkout__same-addr { border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 12px 14px; background: var(--accent-soft); margin-bottom: 10px; } /* ======================================================================== CHECKOUT — OPTIONAL ADDRESS FIELDS (locker mode) ======================================================================== */ .ll-addr-optional { opacity: 0.35; pointer-events: none; transition: opacity .2s ease; } .ll-addr-optional input, .ll-addr-optional select { background: var(--bg-3); } /* Autocomplete dropdown */ .ll-autocomplete { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: var(--bg-2); border: 1px solid var(--rule-2); border-top: none; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.5); max-height: 220px; overflow-y: auto; } .ll-autocomplete__item { padding: 9px 12px; font-size: 13.5px; color: var(--fg); cursor: pointer; border-bottom: 1px solid var(--rule); line-height: 1.4; } .ll-autocomplete__item:last-child { border-bottom: none; } .ll-autocomplete__item:hover, .ll-autocomplete__item--active { background: var(--bg-3); } .ll-autocomplete__item strong { color: var(--accent); font-weight: 600; } /* ======================================================================== ADMIN — SHIPPING PANEL TAGS ======================================================================== */ .admin-ship-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; border: 1px solid transparent; } .admin-ship-tag--done { color: #3A8C50; background: #1A2E20; border-color: #2A5030; } .admin-ship-tag--pending { color: #C4861E; background: #2A1E08; border-color: #5A3E10; } .admin-status--paid { color: #3A8C50; background: #1A2E20; border-color: #2A5030; } .admin-status--shipped { color: #4A7AB0; background: #161E2E; border-color: #2A3E60; } /* ======================================================================== ADMIN — STAT CARDS ======================================================================== */ .admin-stat-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 24px; background: var(--bg-2); min-width: 120px; } .admin-stat-card__num { font-family: var(--font-display); font-size: 40px; font-weight: 600; font-style: italic; color: var(--accent); line-height: 1; margin-bottom: 4px; } .admin-stat-card__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); } /* ======================================================================== FOOTER — NEWSLETTER FEEDBACK ======================================================================== */ .ll-footer__newsletter-msg { font-size: 12px; color: #3A8C50; background: #1A2E20; border: 1px solid #2A5030; border-radius: 2px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.5; } .ll-footer__newsletter-msg--error { color: #E8907A; background: #2A0E0A; border-color: var(--danger); } /* ======================================================================== HOME — HERO IMAGE ======================================================================== */ .ll-hero__img-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule-2); /* Subtle gold frame effect */ box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--rule-2); } .ll-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .5s ease; } .ll-hero__img-wrap:hover .ll-hero__img { transform: scale(1.03); }