/* ========================================================================= Изолации — light skin ------------------------------------------------------------------------ A second colour scheme on the SAME markup. Everything here is scoped under `.skin-light` on , so this file is inert until functions.php puts that class there (see izolacii_skin()). One codebase, two review URLs: / → dark (the built design) /?skin=light → light (assets/design light .png) Scope discipline — read before adding a rule: · Only colour belongs in this file. Layout, spacing and type live in main.css and must stay identical between the two skins, or the client is reviewing two different sites rather than one site in two palettes. · The dark anchors stay dark. The comp keeps the hero, the stat band, the featured-project card and the CTA band on ink — the light skin is a lighter *ground*, not the removal of contrast. · Colours come from the tokens below, never as literals in a rule. ====================================================================== */ /* ------------------------------------------------------------------------- Tokens Sampled off assets/design light .png rather than invented: the tinted bands in the comp are a single warm off-white #F8F6F2, and the header is paper. That collapses `--paper-alt` (cool grey in the dark skin) and `--warm` onto one value on purpose — the comp alternates paper against one tint, not two. `--line` warms with them, or the rules read cold against a warm ground. ---------------------------------------------------------------------- */ .skin-light { --paper-alt: #f8f6f2; --warm: #f8f6f2; --line: #e6e2da; } /* ------------------------------------------------------------------------- Header The one structural inversion in the skin: ink bar → paper bar. The red brand block and the red CTA are unchanged — they are the two fixed points the comp keeps across both versions, and they are what still identifies the header as this company's at a glance. ---------------------------------------------------------------------- */ .skin-light .site-header { background: var(--paper); /* Two shadows, both deliberate: · the inset hairline is the dark skin's border trick — a real border would add to the header height and push the hero past the fold; · the outer shadow is light-skin-only. On the homepage the bar sits over the dark hero and separates itself, but on an inner page it is paper over paper and a 1px rule alone left it floating unanchored. Kept at 6% so it is invisible against the hero and only does work on white. */ box-shadow: inset 0 -1px 0 var(--line), 0 1px 12px rgb(16 17 20 / .06); } .skin-light .site-nav a { color: var(--text); } .skin-light .site-nav a:hover, .skin-light .site-nav .current-menu-item > a { color: var(--accent); border-block-end-color: var(--accent); } /* The dropdown is the one place a light header needs something the dark one did not: on ink the panel separated itself by being lighter than the bar. On paper it is the same value as the bar, so it needs a shadow to lift off the page. */ .skin-light .site-nav .subnav { background: var(--paper); border: 1px solid var(--line); border-block-start: 2px solid var(--accent); box-shadow: 0 14px 30px rgb(16 17 20 / .12); } .skin-light .site-nav .subnav a { color: var(--text); } .skin-light .site-nav .subnav a:hover { background: var(--accent); color: var(--paper); } .skin-light .header__phone { color: var(--text); } .skin-light .header__phone:hover { color: var(--accent); } .skin-light .lang a { color: var(--muted); } .skin-light .lang a:hover, .skin-light .lang a.is-current { color: var(--text); } .skin-light .lang a + a { border-inline-start-color: var(--line); } .skin-light .nav-toggle { color: var(--text); } .skin-light .nav-toggle__bars i { background: var(--text); } /* ------------------------------------------------------------------------- Mobile drawer Follows the header. Left on ink it would flip the whole screen to dark the moment a phone user opens the menu, which is the opposite of what the skin is for. The red call button is untouched. ---------------------------------------------------------------------- */ .skin-light .drawer { background: var(--paper); } .skin-light .drawer a { color: var(--text); border-block-end-color: var(--line); } .skin-light .drawer .drawer__sub a { color: var(--muted); } .skin-light .drawer .drawer__phone { color: var(--paper); }