/* ========================================================================== VIKA — inner pages (loaded after vika.css by _LayoutRTL) Shared primitives every inner page can reuse: 1. Shell offsets 2. Nav tweaks 3. Language links 4. Basket badge 5. Page hero 6. Page sections 7. Form controls 8. Messages/spinner 9. Mobile ========================================================================== */ /* 1. SHELL ----------------------------------------------------------------- */ .page-content { position: relative; z-index: 1; padding-block-start: var(--nav-h); min-height: 60vh; } .page-content--full { padding-block-start: 0; } /* 2. NAV ------------------------------------------------------------------- */ /* inner pages: nav is glass from the start (home keeps the transparent-until-scroll hero nav) */ .nav--solid { background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border-block-end-color: var(--glass-border); height: 62px; } .page-content:not(.page-content--full) { padding-block-start: 62px; } .nav__logo img { display: block; width: 120px; height: auto; } .menu-overlay__col a.is-current { color: var(--accent); } /* 3. LANGUAGE LINKS (real links inside the dropdown) ----------------------- */ .lang-switch__menu li { padding: 0; } .lang-switch__menu li a { display: block; padding: 0.65rem 1rem; color: inherit; transition: padding-inline-start var(--t-fast), color var(--t-fast), background var(--t-fast); } .lang-switch__menu li a:hover, .lang-switch__menu li a.active { color: var(--accent); background: oklch(74% 0.09 85 / 0.08); padding-inline-start: 1.3rem; } .lang-switch__menu li:hover, .lang-switch__menu li.active { padding-inline-start: 0; background: transparent; } /* 4. BASKET BADGE (shown by updateBasketCount when count > 0) --------------- */ .basket-count { display: none; align-items: center; justify-content: center; } .tabbar__icon-wrap { position: relative; display: grid; place-items: center; } .tabbar__icon-wrap .icon-btn__badge { inset-block-start: -6px; inset-inline-end: -10px; } /* 5. PAGE HERO ------------------------------------------------------------- */ .page-hero { padding-block: var(--sp-8) var(--sp-6); text-align: center; position: relative; z-index: 1; } .page-hero__title { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.01em; margin-block-end: var(--sp-4); } .page-hero .lead { max-width: 640px; margin-inline: auto; } .breadcrumb { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; font-size: 0.78rem; color: var(--fg-faint); margin-block-end: var(--sp-5); } .breadcrumb a { color: var(--fg-muted); transition: color var(--t-fast); } .breadcrumb a:hover { color: var(--accent); } /* 6. PAGE SECTIONS --------------------------------------------------------- */ .page-section { padding-block: var(--sp-7); position: relative; z-index: 1; } .page-section__title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-block-end: var(--sp-5); } .page-section__title::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin-inline-end: var(--sp-3); } /* 7. FORM CONTROLS --------------------------------------------------------- */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .form-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-end: var(--sp-5); } .form-group label { font-size: 0.82rem; color: var(--fg-muted); } .form-group input, .form-group select, .form-group textarea { width: 100%; background: oklch(18% 0.005 85 / 0.6); border: 1px solid var(--glass-border); padding: 0.8rem 1rem; font-size: 0.92rem; color: var(--fg); border-radius: 0; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .form-group textarea { min-height: 150px; resize: vertical; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--fg-faint); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px oklch(74% 0.09 85 / 0.15); } .form-group select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23c9a24f' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: var(--select-pos); } .form-group select option { background: var(--c-ink); color: var(--fg); } /* 8. MESSAGES + SPINNER ---------------------------------------------------- */ .message { padding: var(--sp-4) var(--sp-5); margin-block-end: var(--sp-5); border: 1px solid var(--glass-border); font-size: 0.88rem; } .message.success { border-color: oklch(70% 0.12 150 / 0.6); background: oklch(70% 0.12 150 / 0.08); color: oklch(85% 0.1 150); } .message.error { border-color: oklch(65% 0.18 25 / 0.6); background: oklch(65% 0.18 25 / 0.08); color: oklch(82% 0.1 25); } .spinner { width: 16px; height: 16px; display: inline-block; border: 2px solid oklch(15% 0.004 30 / 0.3); border-top-color: var(--c-ink-deep); border-radius: 50%; animation: spinSlow 0.8s linear infinite; } /* 9. MOBILE ---------------------------------------------------------------- */ @media (max-width: 767px) { /* cart + profile live in the bottom tab bar on mobile */ .nav__utils .icon-btn { display: none; } .nav__logo img { width: 96px; } .form-row { grid-template-columns: 1fr; gap: 0; } .page-hero { padding-block: var(--sp-7) var(--sp-5); } } /* ========================================================================== 10. SHARED LIST/DETAIL PRIMITIVES (blog + tutorials + future pages) ========================================================================== */ /* small button */ .btn-sm { padding: 0.55rem 1.2rem; font-size: 0.82rem; } /* chips: blog tags, tutorial tags, translation links */ .tag, .tag-item, .translation-link { display: inline-flex; align-items: center; padding: 0.28rem 0.8rem; font-size: 0.75rem; border: 1px solid var(--glass-border); color: var(--fg-faint); transition: border-color var(--t-fast), color var(--t-fast); } a.tag:hover, a.translation-link:hover { border-color: var(--accent); color: var(--accent); } /* pagination — supports both markups: