/* ═══════════════════════════════════════════════════════════ INTERNO — Unified Design Tokens & Base Single source of truth for the local visuals build. (This becomes the custom theme's global stylesheet later.) ═══════════════════════════════════════════════════════════ */ :root { /* ─── Brand palette ─────────────────────────────── */ --bg-color: #F5F5F5; /* warm cream */ --text-color: #1A1A1A; /* near-black */ --line-color: rgba(26, 26, 26, 0.15); /* hairline */ --line-soft: rgba(26, 26, 26, 0.08); /* soft hairline */ --accent-color: #8C3B28; /* terracotta */ /* ─── Typography ────────────────────────────────── */ --title-font: 'Mark GEO CAPS', 'Noto Sans Georgian', sans-serif; --body-font: 'FiraGo', 'Noto Sans Georgian', sans-serif; /* ─── Layout ────────────────────────────────────── */ --ih-header-height: 80px; } /* Global horizontal-scroll lockdown (required by full-bleed sections) */ html, body { overflow-x: hidden; overflow-x: clip; } body { margin: 0; background-color: var(--bg-color); color: var(--text-color); font-family: var(--body-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Full-width page wrapper — sections manage their own insets / full-bleed */ .interno-page { width: 100%; overflow-x: clip; } /* ─── BRAND FONTS ─────────────────────────────────────────────── Drop the real font files into visuals/assets/fonts/ then uncomment the matching block. Until then, the Noto Georgian fallbacks (loaded from Google Fonts in each page ) render Georgian text correctly — just not in the exact brand typeface. @font-face { font-family: 'FiraGo'; src: url('../fonts/FiraGO-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'FiraGo'; src: url('../fonts/FiraGO-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'FiraGo'; src: url('../fonts/FiraGO-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'LGV Anastasia 2025 Geo'; src: url('../fonts/LGVAnastasia2025Geo.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } ──────────────────────────────────────────────────────────────── */ /* ============================================================ Global backgrounds — very light gray page, solid-white product cards, and white single-product photo column. Overrides the per-section cream bg variables (which are non-!important). ============================================================ */ :root{ --bg-color:#F5F5F5 !important; --ibs-bg-color:#F5F5F5 !important; --icat-bg-color:#F5F5F5 !important; --ip-bg-color:#F5F5F5 !important; --ih-bg-color:#F5F5F5 !important; --ipg-bg-color:#F5F5F5 !important; --iwl-bg-color:#F5F5F5 !important; --ic-bg-color:#F5F5F5 !important; --ipj-bg-color:#F5F5F5 !important; --ipa-bg-color:#F5F5F5 !important; } body{ background-color:#F5F5F5 !important; } /* Product PHOTO BACKDROP = white (transparent photos on white; cover photos fill). Card structure/paddings/shapes unchanged — only the image wrapper backdrop. */ .interno-bestsellers-wrap .ibs-card-img-wrapper, .interno-catalog-wrap .ic-card-img-wrapper, .interno-wishlist-wrap .iwl-card-img-wrapper, .interno-product-wrap .ip-card-img-wrapper, .interno-product-wrap .ip-gallery, .interno-product-wrap .ip-mobile-gallery{ background:#fff !important; } /* ============================================================ TITLE TYPE SCALE — Mark GEO CAPS ------------------------------------------------------------ Titles and card names use Mark GEO CAPS (--*-title-font). Every font-size on that text was originally tuned for LGV Anastasia, which is ~1.94x narrower at the same size (letter height is about equal), so each size was recalculated with ONE rule: px <= 20 -> unchanged (card names, UI labels) px > 20 -> 20 * (px / 20) ^ 0.65 (display titles) e.g. 5.4rem hero 86px -> 52px (x0.60), 3.4rem section 54px -> 38px (x0.70), 2.4rem 38px -> 31px (x0.80). Large text is compressed most because it wraps and splits words first; small text stays readable. rem/px values map directly; vw terms are mapped at a reference viewport per breakpoint (base 1440, <=1200 1100, <=1024 900, <=768 390, <=480 375, <=360 340). The curve is monotonic, so every section keeps its original desktop > tablet > mobile ordering. Body text (FiraGo) is not part of this scale. Exception: the catalog filter UI and catalog card titles use a denser UI scale on purpose (see render-catalog.php, "Filter UI"). Apply the same rule when adding or resizing any title. ============================================================ */ /* ============================================================ Product TITLES → Mark GEO CAPS (global brand typography) ------------------------------------------------------------ Forces the title font on every PRODUCT-NAME title, in every context it appears: • bestsellers slider cards .ibs-card-title • catalog / archive / category .ic-card-title • single product page heading .ip-title (H1) • "you may also like" related .ip-card-title • wishlist cards .iwl-card-title !important is required because each section ships its own scoped inline CSS later in the document. (Previously pinned these to FiraGO while headings used LGV Anastasia; now cards and titles share Mark GEO CAPS, which every --*-title-font also resolves to.) ============================================================ */ .interno-bestsellers-wrap .ibs-card-title, .interno-catalog-wrap .ic-card-title, .interno-product-wrap .ip-title, .interno-product-wrap .ip-card-title, .interno-wishlist-wrap .iwl-card-title { font-family: 'Mark GEO CAPS', 'Noto Sans Georgian', sans-serif !important; }