/* ========================================================================== Shape (შპს ფორმა 2024) — shape.ge Vanilla CSS, no build step, mobile-first. Brand system from "Shape - Brandbook.pdf": navy #0E3253 · orange #F05A23 · white · sky #379FD3 · coral #F96643 Type: FiraGO Light + Medium (SIL OFL, self-hosted, subset to ka/en/ru) Design motif: the logo symbol has exactly one rounded corner (top-left). That single-rounded-corner shape is reused for cards, media frames and the primary button, so the layout reads as Shape without needing photography. NOTE: the licensed FiraGO files carry no Georgian Mtavruli (U+1C90–1CBF), so `text-transform: uppercase` is never used — it would capitalise Latin and Russian while leaving Georgian untouched. Emphasis uses weight, colour and letter-spacing instead. ========================================================================== */ /* ---------- fonts ---------- */ @font-face { font-family: "FiraGO"; src: url("../fonts/firago-light.woff2") format("woff2"); font-weight: 300; 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; } /* ---------- tokens ---------- */ :root { --navy: #0e3253; --navy-deep: #09253f; --orange: #f05a23; --orange-dark: #d94b17; --sky: #379fd3; --coral: #f96643; --white: #fff; /* Accessible text variants of the brand colours. The brandbook's #F05A23 is a graphics colour: as small text on white it only reaches 3.4:1, and white text on it reaches 3.4:1 — both below the 4.5:1 WCAG AA floor. So --orange stays the brand colour for rules, icons and graphic elements, while text and button fills use these two tuned shades. To go back to literal brandbook orange everywhere, set both of these to #f05a23 and accept the lower contrast. */ --orange-ink: #b8410f; /* orange TEXT on white/soft → 5.6:1 / 5.1:1 */ --orange-cta: #cc4711; /* button fill under WHITE text → 4.7:1 */ --coral-ink: #fa7350; /* accent text on navy → 4.8:1 */ --ink: #0e3253; --ink-soft: #46617d; --ink-faint: #5e7391; --line: rgba(14, 50, 83, 0.14); --line-soft: rgba(14, 50, 83, 0.08); --surface: #fff; --surface-soft: #f2f5f8; /* navy 5% */ --surface-tint: #e7edf3; /* navy 10% */ --on-navy: rgba(255, 255, 255, 0.78); --on-navy-faint: rgba(255, 255, 255, 0.62); /* 0.5 gave only 4.4:1 on navy */ --corner: 26px; /* the logo's single rounded corner */ --corner-sm: 14px; --container: 1180px; --gutter: 20px; --section-y: 68px; --shadow: 0 18px 44px rgba(14, 50, 83, 0.1); --shadow-lg: 0 26px 70px rgba(14, 50, 83, 0.16); } @media (min-width: 900px) { :root { --gutter: 32px; --section-y: 108px; } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: "FiraGO", "Segoe UI", system-ui, -apple-system, sans-serif; font-weight: 300; font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-weight: 500; line-height: 1.18; margin: 0 0 0.5em; letter-spacing: -0.01em; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; } /* ========================================================================== Language visibility Every translatable node exists three times (data-lang="ka|en|ru"). The active language is stamped on by an inline head script before paint, so there is no flash of all three languages. ========================================================================== */ html[data-lang-active="ka"] [data-lang]:not([data-lang="ka"]), html[data-lang-active="en"] [data-lang]:not([data-lang="en"]), html[data-lang-active="ru"] [data-lang]:not([data-lang="ru"]) { display: none !important; } /* ---------- layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--soft { background: var(--surface-soft); } .section--navy { background: var(--navy); color: var(--white); } .section-head { max-width: 640px; margin-bottom: 40px; } .section-head--center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.09em; color: var(--orange-ink); margin-bottom: 16px; } .eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--orange); /* graphic rule — full brand orange */ flex: none; } /* The hero is navy too, but is not a .section--navy, so it needs the same on-dark treatment or its eyebrow drops to 3.9:1. */ .section--navy .eyebrow, .hero .eyebrow { color: var(--coral-ink); } .section--navy .eyebrow::before, .hero .eyebrow::before { background: var(--coral); } .section-title { font-size: clamp(28px, 4.6vw, 42px); margin-bottom: 14px; } .section-lead { font-size: clamp(16px, 2vw, 18px); color: var(--ink-soft); margin: 0; } .section--navy .section-lead { color: var(--on-navy); } /* ---------- icons ---------- SVGs live in assets/svg/ and are referenced by URL, never inlined. They are plain elements, deliberately NOT CSS masks. Chrome gives every file:// resource its own opaque origin, so a mask-image loaded from a separate SVG file is treated as cross-origin and dropped — the masked element then renders completely invisible. Since this site has to work when index.html is opened straight off disk (and on cPanel), each icon ships pre-coloured in the colours it is actually used in: -orange, -coral, -navy, -white. */ .icon { display: inline-block; width: 22px; height: 22px; flex: none; object-fit: contain; } .icon--sm { width: 18px; height: 18px; } .icon--lg { width: 28px; height: 28px; } .icon--xl { width: 32px; height: 32px; } /* ========================================================================== Buttons HOUSE RULE: