/* ===================================================================== STORY CRAFT — SHARED BASE --------------------------------------------------------------------- Fonts, design tokens and the page reset, shared by every route outside the homepage. PROVENANCE: this file was EXTRACTED from index-alt.html sections 01-03, not retyped. index-alt.html is a self-contained prototype destined for a WordPress theme, so it still inlines its own copy; these two must stay in step until that build lands and can serve one stylesheet to both. `projects/check-tokens.sh` diffs the two and fails loudly on drift. Run it after touching either. Do not hand-edit the token values here — change index-alt.html and re-extract. Paths are ../assets/* because this file is served from /projects/. ===================================================================== */ /* ===================================================================== 01 FONTS --------------------------------------------------------------------- Self-hosted woff2. No CDN. font-display:swap everywhere. TODO — TYPOGRAPHY LICENCE: The display face should be **Bw Gradual** (Branding with Type, commercial webfont licence required). Those files were not present in ../assets/fonts/, so this build falls back to **General Sans** (Fontshare, ITF Free Font License) — the closest free geometric match. To switch: drop BwGradual-Regular / -Italic .woff2 into ../assets/fonts/ and change the two src: lines below. The header logotype is the real brand artwork (assets/logo/), so it will not drift out of step. ===================================================================== */ @font-face{ font-family:'Display'; /* stand-in for Bw Gradual Regular 400 */ src:url('../assets/fonts/GeneralSans-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Display'; /* true italic file — not synthesised */ src:url('../assets/fonts/GeneralSans-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Display'; /* stand-in for Bw Gradual Medium 500 */ src:url('../assets/fonts/GeneralSans-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Switzer'; src:url('../assets/fonts/Switzer-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Switzer'; src:url('../assets/fonts/Switzer-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } /* ===================================================================== 02 DESIGN TOKENS --------------------------------------------------------------------- The six brand colours are the ONLY literal colours in this file. Every other tone is a color-mix() of two of them. No greys, no blacks. ===================================================================== */ :root{ /* -- brand ---------------------------------------------------------- */ --serene-navy: #102947; /* primary type */ --celestial-blue: #2198E7; /* interactive / accent only */ --cerulean-blue: #2570CC; --caspian-blue: #0A467A; /* secondary type, emphasis */ --midnight-blue: #071523; --powder-white: #F2F5F7; /* page background */ /* -- derived tints (navy mixed into the page background) ------------ */ /* Measured against --powder-white. Only two of these are safe for text, so pick by role, not by taste: --navy-70 5.37:1 any text, any size (AA body) --navy-50 3.01:1 LARGE text only, 24px+ (AA large) --navy-45 2.65:1 NON-TEXT ONLY — rules, separators, icons */ --navy-70: color-mix(in srgb, var(--serene-navy) 70%, var(--powder-white)); --navy-50: color-mix(in srgb, var(--serene-navy) 50%, var(--powder-white)); --navy-45: color-mix(in srgb, var(--serene-navy) 45%, var(--powder-white)); /* Measured against --powder-white, not chosen by eye: --navy-66 = 4.75:1, the lightest tint that still clears the 4.5:1 TEXT minimum — "(optional)" is text, so "reduced opacity" cannot be taken literally there. --navy-58 = 3.76:1, for the optional field's underline: lighter than the required fields' 5.37:1, with real margin over the 3:1 UI component floor rather than --navy-50's 3.01:1, which passes by one hundredth and is not something to ship a field boundary on. */ --navy-66: color-mix(in srgb, var(--serene-navy) 66%, var(--powder-white)); --navy-58: color-mix(in srgb, var(--serene-navy) 58%, var(--powder-white)); --navy-22: color-mix(in srgb, var(--serene-navy) 22%, var(--powder-white)); /* separators */ --rule: color-mix(in srgb, var(--serene-navy) 16%, var(--powder-white)); /* 1px hairlines */ /* -- families ------------------------------------------------------- */ --font-display:'Display', 'Helvetica Neue', Arial, sans-serif; --font-ui:'Switzer', 'Helvetica Neue', Arial, sans-serif; /* -- easing (one shared vocabulary) --------------------------------- */ --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* -- layout --------------------------------------------------------- */ --pad: clamp(1.25rem, 3.6vw, 3.75rem); /* outer page padding */ --gap: clamp(1rem, 2vw, 2rem); /* 12-col grid column gap */ /* Every vertical constant here is part of the slide budget: each slide has to fit 100svh, so these are sized down deliberately rather than to taste. Changing any of them means re-checking the fit at 1440x800, which is the tightest desktop case. */ --hdr: clamp(62px, 4.6vw, 78px); /* sized around the logotype */ --logo-h: clamp(36px, 2.8vw, 46px); /* brand logotype height */ --logo-cap: clamp(15px, 1.7vw, 25px); /* client logo base height */ --logo-row: clamp(32px, 2.9vw, 44px); /* fixed logo cell height */ /* -- the star ------------------------------------------------------- Exact brand geometry, stored once. Deliberately asymmetric: the top point sits right of centre, the bottom point sits left of centre. Reused by the header mark, the media lens and the custom cursor. */ --star-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 310.13 310.13'%3E%3Cpath fill='%23000' d='M310.13,155.06c-42.5,6.07-91.91,10.98-126.89,38.53-35.66,28.09-52.98,76.1-69.85,116.53,4.14-34.43,15.34-85.78-7.21-116.53-22.09-30.12-72.79-33.36-106.18-38.53,42.5-6.07,91.91-10.98,126.89-38.53C162.54,88.45,179.86,40.44,196.73,0c-4.14,34.43-15.34,85.78,7.21,116.53,22.09,30.12,72.79,33.36,106.18,38.53Z'/%3E%3C/svg%3E"); /* -- film grain (SVG turbulence flattened to a navy alpha channel) --- */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.027 0 0 0 0 0.082 0 0 0 0 0.137 0.34 0.34 0.34 0 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body,h1,h2,p,figure{ margin:0; } img{ display:block; max-width:100%; } button{ font:inherit; color:inherit; background:none; border:0; padding:0; } a{ color:inherit; text-decoration:none; } body{ min-height:100svh; background:var(--powder-white); color:var(--serene-navy); font-family:var(--font-ui); font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* NO overflow here. Any overflow value on propagates to the viewport and re-parents the scroll context, which is what breaks position:sticky. Horizontal bleed is clipped per-slide, and only at the widths where something actually bleeds — see section 03b. */ } /* Hide the native pointer only when the custom cursor is actually live. */ html.has-cursor, html.has-cursor *{ cursor:none; } /* ===================================================================== 04 HEADER + SHARED UTILITIES (all non-homepage routes) --------------------------------------------------------------------- Mirrors index-alt.html section 05 so the two routes are the same site. The only difference is `aria-current` on the Work link. ===================================================================== */ .hdr{ position:fixed; inset:0 0 auto 0; z-index:40; height:var(--hdr); display:flex; align-items:center; justify-content:space-between; gap:clamp(.75rem, 2vw, 2rem); padding-inline:max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right)); padding-top:env(safe-area-inset-top); } /* Over a full-bleed mobile scene the header sits ON photography. A pale scrim there does nothing for navy type on a dark frame, so the whole header INVERTS instead: white artwork, white labels, and a dark scrim under it to hold contrast whatever the footage is doing. A solid bar is not an option — it would cut the composition in half. */ .hdr::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, color-mix(in srgb, var(--midnight-blue) 55%, transparent), color-mix(in srgb, var(--midnight-blue) 0%, transparent)); opacity:0; transition:opacity .45s var(--ease-out-quart); pointer-events:none; } html[data-over-media="1"] .hdr::before{ opacity:1; } .brand{ display:inline-flex; align-items:center; flex:none; position:relative; /* The artwork is intentionally compact, but the link itself still needs a forgiving finger target. This does not change the logo's drawn size or the header's height. */ min-inline-size:44px; min-block-size:44px; } .brand__logo{ height:var(--logo-h); width:auto; transition:opacity .4s var(--ease-out-quart); } .brand__logo--light{ position:absolute; inset:0 auto 0 0; opacity:0; } html[data-over-media="1"] .brand__logo--dark { opacity:0; } html[data-over-media="1"] .brand__logo--light{ opacity:1; } .brand:hover .brand__logo--dark{ opacity:.68; } html[data-over-media="1"] .brand:hover .brand__logo--dark{ opacity:0; } html[data-over-media="1"] .brand:hover .brand__logo--light{ opacity:.68; } /* The rest of the header follows the same inversion. */ html[data-over-media="1"] .nav__link, html[data-over-media="1"] .lang__b{ color:color-mix(in srgb, var(--powder-white) 78%, transparent); } html[data-over-media="1"] .nav__link[aria-current="page"], html[data-over-media="1"] .lang__b[aria-pressed="true"]{ color:var(--powder-white); } html[data-over-media="1"] .lang__sep{ color:color-mix(in srgb, var(--powder-white) 45%, transparent); } html[data-over-media="1"] .nav__link[aria-current="page"]::after{ background:color-mix(in srgb, var(--powder-white) 55%, transparent); } html[data-over-media="1"] .cta{ background:var(--powder-white); color:var(--serene-navy); } html[data-over-media="1"] .cta:hover{ background:var(--celestial-blue); color:var(--powder-white); } html[data-over-media="1"] .hdr :focus-visible{ outline-color:var(--powder-white); } .nav{ display:flex; align-items:center; gap:clamp(.85rem, 1.8vw, 2rem); } .nav__link{ color:var(--caspian-blue); position:relative; display:inline-flex; align-items:center; justify-content:center; /* Both axes. A 44px-tall link that is 40px wide is not a 44px target, and "Darbai" at label size measures under 44 on its own. */ min-block-size:44px; min-inline-size:44px; padding-block:.9rem; } .nav__link::after{ content:''; position:absolute; left:0; right:0; bottom:.55rem; height:1px; background:var(--celestial-blue); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out-quart); } .nav__link:hover::after, .nav__link:focus-visible::after{ transform:scaleX(1); } /* Current route is stated, never colour-only. */ .nav__link[aria-current="page"]{ color:var(--serene-navy); } .nav__link[aria-current="page"]::after{ transform:scaleX(1); background:var(--navy-45); } .lang{ display:inline-flex; align-items:center; gap:.15rem; } .lang__b{ position:relative; display:inline-flex; align-items:center; justify-content:center; /* Measured: with only the ::after outset below, the real target fell to 40x44 at 390px and 38x44 at 320px — and the phone footer is exactly where the language control lives once the header drops it. The floor makes the target 44 wide on its own; the outset stays as headroom. */ min-height:44px; min-inline-size:44px; padding-inline:clamp(.3rem, 1.6vw, .55rem); color:var(--navy-70); transition:color .35s var(--ease-out-quart); } .lang__b::after{ content:''; position:absolute; top:0; bottom:0; } .lang__b[data-lang="en"]::after{ left:-10px; right:-5px; } .lang__b[data-lang="lt"]::after{ left:-5px; right:-10px; } .lang__b[aria-pressed="true"]{ color:var(--serene-navy); } .lang__b:hover{ color:var(--caspian-blue); } .lang__sep{ color:var(--navy-45); user-select:none; } .cta{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding-inline:clamp(.9rem, 1.5vw, 1.4rem); border-radius:999px; background:var(--serene-navy); color:var(--powder-white); white-space:nowrap; transition:background .4s var(--ease-out-quart); } .cta:hover{ background:var(--caspian-blue); } /* -- Mobile header ------------------------------------------------------ Work is the second-most important control on the site and it must be reachable in one tap from every route, so on a phone it is the LANGUAGE pair that goes, not Work. Three items remain, in priority order: brand · Work · Let's talk Nothing is buried behind a menu — a menu holding one item is a menu holding nothing. The language control moves to `.sfoot` below, which every route now carries, so manual selection is still one scroll away and geolocation is never the only way to change language. Measured before shortening anything: at 320px this leaves brand at 20..69, Work at 170..205 and the full "Let's talk" pill at 214..300 of 320. It fits with room, so the label is NOT abbreviated — a shortened CTA plus an aria-label to restore it is a cost worth paying only when the real label genuinely does not fit. */ @media (max-width:860px){ .lang{ display:none; } .nav{ gap:clamp(.6rem, 3vw, 1rem); } .cta{ padding-inline:clamp(.7rem, 3.2vw, 1.1rem); } } /* -- Site footer -------------------------------------------------------- Deliberately plain, and identical on every route: the language pair, the three real destinations, the address, and a line of small print. Its first job is to be where the language control lives once the header drops it. */ .sfoot{ border-top:1px solid var(--rule); margin-top:clamp(2.4rem, 7vh, 4.5rem); padding:clamp(1.3rem, 3.5vh, 2rem) max(var(--pad), env(safe-area-inset-right)) calc(clamp(1.3rem, 3.5vh, 2rem) + env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left)); color:var(--navy-70); } .sfoot__in{ max-inline-size:74rem; margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem clamp(1rem, 3vw, 2.2rem); } .sfoot__nav{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem clamp(.9rem, 2.4vw, 1.6rem); } .sfoot__a{ display:inline-flex; align-items:center; justify-content:center; min-block-size:44px; min-inline-size:44px; color:var(--caspian-blue); border-bottom:1px solid transparent; overflow-wrap:anywhere; } .sfoot__a:hover{ border-bottom-color:color-mix(in srgb, var(--caspian-blue) 45%, transparent); } .sfoot__c{ margin:0; color:var(--navy-45); } /* The footer language control is the same component as the header's, so it inherits the 44px targets and pressed state and needs no new rules beyond undoing the mobile hide above. */ .sfoot .lang{ display:inline-flex; } .sfoot__sp{ flex:1 1 auto; } @media (max-width:560px){ .sfoot__in{ align-items:flex-start; } .sfoot__sp{ flex-basis:100%; } } .t-label{ font-family:var(--font-ui); font-weight:500; font-size:.7rem; letter-spacing:.16em; line-height:1; text-transform:uppercase; } @media (max-width:860px){ .t-label{ font-size:.62rem; letter-spacing:.12em; } } .vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .skip{ position:absolute; top:0; left:0; z-index:80; transform:translateY(-150%); display:flex; align-items:center; min-block-size:44px; padding:.85rem 1.15rem; background:var(--serene-navy); color:var(--powder-white); transition:transform .3s var(--ease-out-quart); } .skip:focus{ transform:translateY(0); } :focus-visible{ outline:2px solid var(--caspian-blue); outline-offset:3px; border-radius:2px; } /* Over media the navy outline disappears, so focus gets a light ring there instead. Focus must be visible on BOTH canvases. */ .pj__scene :focus-visible, .sheet :focus-visible{ outline-color:var(--powder-white); outline-offset:4px; }