/* ========================================================================== Reinvest Georgia — landing page (round 2) Design language studied from tref.digitaldesignnyc.co: · very large display headings, tight leading (~1.1), negative tracking · small light body copy (~14–15px) → heading/body contrast of roughly 5× · tiny uppercase micro-labels with wide tracking · deep single-colour ground, generous whitespace, photography-forward · masked line-by-line heading reveals on scroll, page loader, hero carousel Brand fonts and palette kept per the Reinvest brandbook. THREE THEMES via a class on : .theme-navy → navy ground, gold + white (version 1) .theme-cream → cream ground, navy + red accents (version 2) .theme-duo → cream base with navy feature bands (version 3) ========================================================================== */ /* ---------- Brand fonts ---------- */ @font-face { font-family: "HN Geo"; src: url("../fonts/hn-geo-35-thin.ttf") format("truetype"); font-weight: 300; font-display: swap; } @font-face { font-family: "HN Geo"; src: url("../fonts/hn-geo-65-medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } @font-face { font-family: "HN Geo"; src: url("../fonts/hn-geo-85-heavy.ttf") format("truetype"); font-weight: 800; font-display: swap; } @font-face { font-family: "HN Caps"; src: url("../fonts/hn-geo-caps-55.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "HN Caps"; src: url("../fonts/hn-geo-caps-75.ttf") format("truetype"); font-weight: 700; font-display: swap; } :root { --navy: #0a3161; --navy-deep: #071f3e; --navy-ink: #05162c; --gold: #cba750; --red: #ed1c23; --cream: #f6f0e5; --cream-warm: #fdfbf7; --soft-white: #f2f1ed; --font: "HN Geo", "Segoe UI", system-ui, sans-serif; --caps: "HN Caps", "HN Geo", sans-serif; --wrap: 1320px; --gut: 22px; /* motion — mirrors the reference's curves */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.12, 0, .39, 0); --t: .5s var(--ease-out); } /* ---------- Themes ---------- */ .theme-navy { --ground: var(--navy-deep); --ground-2: #0b2a51; --ink: var(--soft-white); --ink-soft: rgba(242, 241, 237, .68); --ink-faint: rgba(242, 241, 237, .42); --accent: var(--gold); --accent-ink: var(--navy-deep); --hair: rgba(242, 241, 237, .16); --header-bg: rgba(7, 31, 62, .93); --logo: url("../img/logo-white.png"); } .theme-cream { --ground: var(--cream); --ground-2: #efe7d8; --ink: var(--navy); --ink-soft: rgba(10, 49, 97, .72); --ink-faint: rgba(10, 49, 97, .45); /* Brand red deepened to #c2141a on light grounds: the vivid #ed1c23 only reaches 3.9:1 on cream, which fails WCAG AA for the 10–12px labels. This passes at 5.4:1 (and 6.2:1 for white-on-red buttons) while still reading as the brand red. */ --accent: #c2141a; --accent-ink: #ffffff; --hair: rgba(10, 49, 97, .16); --header-bg: rgba(246, 240, 229, .95); --logo: url("../img/logo-color.png"); } .theme-duo { --ground: var(--cream); --ground-2: #efe7d8; --ink: var(--navy); --ink-soft: rgba(10, 49, 97, .72); --ink-faint: rgba(10, 49, 97, .45); /* Brand red deepened to #c2141a on light grounds: the vivid #ed1c23 only reaches 3.9:1 on cream, which fails WCAG AA for the 10–12px labels. This passes at 5.4:1 (and 6.2:1 for white-on-red buttons) while still reading as the brand red. */ --accent: #c2141a; --accent-ink: #ffffff; --hair: rgba(10, 49, 97, .16); --header-bg: rgba(246, 240, 229, .95); --logo: url("../img/logo-color.png"); } .theme-duo .invert, .theme-navy .invert { /* navy feature band */ --ground: var(--navy-deep); --ground-2: #0b2a51; --ink: var(--soft-white); --ink-soft: rgba(242, 241, 237, .68); --ink-faint: rgba(242, 241, 237, .42); --accent: var(--gold); --accent-ink: var(--navy-deep); --hair: rgba(242, 241, 237, .16); --header-bg: rgba(7, 31, 62, .93); background: var(--ground); color: var(--ink); } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-weight: 300; font-size: 15px; /* small body, per the reference */ line-height: 1.68; letter-spacing: .005em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } p { margin: 0; } :focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Display type scale (measured from the reference) ---------- Main titles use the brand caps face (hn-geo-caps-75 = "HN Caps" 700), which renders Georgian as mtavruli. Caps need looser tracking than lowercase, so the negative letter-spacing of the reference is eased off here. */ h1, h2, h3, h4 { margin: 0; font-family: var(--font); font-weight: 500; color: var(--ink); } .d1, .d2 { font-family: var(--caps); font-weight: 700; } .d1 { font-size: clamp(38px, 6.2vw, 74px); line-height: 1.08; letter-spacing: -.004em; } .d2 { font-size: clamp(27px, 4.2vw, 50px); line-height: 1.12; letter-spacing: -.002em; } .d3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.28; letter-spacing: -.01em; font-weight: 500; } .lead { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.7; color: var(--ink-soft); } .small { font-size: 13.5px; line-height: 1.62; color: var(--ink-soft); } .micro { font-family: var(--caps); font-weight: 400; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: block; } .hair { height: 1px; background: var(--hair); border: 0; margin: 0; } /* ---------- Brand-mark watermarks (decorative circle-arrow) ---------- */ .has-wm { overflow: hidden; } .has-wm > .wrap { position: relative; z-index: 1; } .wm { position: absolute; pointer-events: none; user-select: none; z-index: 0; } .wm-hero { right: -6%; top: 2%; width: min(46vw, 620px); opacity: .1; } /* ---------- Sections ---------- */ .band { padding: clamp(64px, 9vw, 132px) 0; position: relative; } .band--tight { padding: clamp(48px, 6vw, 88px) 0; } .band--alt { background: var(--ground-2); } /* ========================================================================== Page loader — a panel that lifts away, echoing the reference's intro ========================================================================== */ .loader { position: fixed; inset: 0; z-index: 200; background: var(--navy-deep); display: grid; place-items: center; transition: transform 1s var(--ease-in) .1s, opacity .45s .8s linear; } .loader-inner { display: grid; justify-items: center; gap: 22px; } .loader-logo { width: clamp(180px, 26vw, 240px); height: auto; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out) .1s, transform .6s var(--ease-out) .1s; } .loader-line { width: 190px; height: 1px; background: rgba(203, 167, 80, .22); overflow: hidden; } .loader-line i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1.45s var(--ease-out) .15s; } body.loader-run .loader-logo { opacity: 1; transform: none; } body.loader-run .loader-line i { transform: scaleX(1); } body.is-loaded .loader { transform: translateY(-100%); opacity: 0; pointer-events: none; } /* ========================================================================== Reveal animations (IntersectionObserver adds .in) ========================================================================== */ /* masked line-by-line heading reveal — the reference's signature move */ .line-mask { display: block; overflow: hidden; } .line-mask > span { display: block; transform: translateY(105%); transition: transform .9s var(--ease-out); } .in .line-mask > span, .line-mask.in > span { transform: translateY(0); } .rise { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .rise.in { opacity: 1; transform: none; } .grow { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); } .grow.in { transform: scaleX(1); } .zoom-wrap { overflow: hidden; } .zoom-wrap img { transform: scale(1.12); transition: transform 1.4s var(--ease-out); } .zoom-wrap.in img { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .line-mask > span, .rise, .grow, .zoom-wrap img { transition: none !important; transform: none !important; opacity: 1 !important; } .loader { display: none; } .loader-mark { animation: none; } } /* ========================================================================== Header ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 26px 0; transition: padding .4s var(--ease-out), background .4s var(--ease-out); } /* Explicit rgba rather than color-mix(): color-mix is newer and degrades to a transparent result in some engines, which left the stuck header invisible. */ .site-header.stuck { padding: 13px 0; background: var(--header-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); } .header-inner { display: flex; align-items: center; gap: 20px; } .brand { flex: 0 0 auto; display: flex; align-items: center; } .brand img { height: 42px; width: auto; display: block; } .brand .logo-dark { display: none; } .site-header.stuck .logo-light { display: none; } .site-header.stuck .logo-dark { display: block; } .site-nav { display: none; margin-left: auto; align-items: center; gap: 34px; } .site-nav a { font-family: var(--caps); font-weight: 400; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); position: relative; padding: 4px 0; transition: color var(--t); } .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); } .site-nav a:hover { color: var(--ink); } .site-nav a:hover::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .site-nav + .header-actions { margin-left: 0; } /* Language dropdown — still all DIVs so it stays out of the GA4 event stream. */ .lang-dd { position: relative; } .lang-current { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--hair); cursor: pointer; user-select: none; font-family: var(--caps); font-size: 11.5px; letter-spacing: .14em; color: var(--ink); transition: border-color var(--t); } .lang-current:hover { border-color: var(--accent); } .lang-caret { width: 7px; height: 7px; margin-top: -4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform var(--t); } .lang-dd.open .lang-caret { transform: rotate(-135deg) translate(-2px, -2px); } .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 148px; background: var(--header-bg); border: 1px solid var(--hair); backdrop-filter: blur(14px); z-index: 120; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s; } .lang-dd.open .lang-menu { opacity: 1; visibility: visible; transform: none; } .lang-menu { min-width: 82px; background: #fff; border-color: rgba(10,49,97,.14); } .lang-option { display: block; padding: 10px 16px; cursor: pointer; user-select: none; font-family: var(--caps); font-weight: 700; font-size: 11.5px; letter-spacing: .16em; color: var(--navy); transition: color var(--t), background var(--t); white-space: nowrap; } .lang-option:hover { color: var(--navy-deep); background: rgba(10,49,97,.07); } .lang-option.is-active { color: var(--navy-deep); background: rgba(10,49,97,.1); } .nav-toggle { width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; color: var(--ink); } .nav-toggle i { display: block; width: 20px; height: 1px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } .mobile-nav { display: none; padding: 10px 0 20px; } .mobile-nav.is-open { display: block; } .mobile-nav a { display: block; padding: 13px 0; font-family: var(--caps); font-weight: 400; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--hair); } /* ========================================================================== Buttons —