/* ── PAGE LOADER ── */ .page-loader { position: fixed; inset: 0; background: #efeeee; z-index: 9999; display: flex; flex-direction: column; justify-content: center; padding: 64px; overflow: hidden; } .pl-folio { overflow: hidden; margin-bottom: 48px; } .pl-folio span { display: block; font-family: 'NudicaMono', monospace; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.3px; color: rgba(0,0,0,0.35); transform: translateY(120%); animation: plUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; } .pl-rule { width: 0; height: 1px; background: rgba(0,0,0,0.15); margin-bottom: 52px; animation: plExpand 0.9s cubic-bezier(0.16,1,0.3,1) 0.25s forwards; } .pl-line { overflow: hidden; line-height: 0.92; margin-bottom: 6px; } .pl-line span { display: block; font-family: 'Borna', sans-serif; font-size: clamp(48px, 6.8vw, 92px); font-weight: 700; letter-spacing: -3px; text-transform: uppercase; color: #000; transform: translateY(110%); animation: plUp 0.75s cubic-bezier(0.16,1,0.3,1) forwards; } .pl-line:nth-child(3) span { animation-delay: 0.4s; } .pl-line:nth-child(4) span { animation-delay: 0.57s; } .pl-line:nth-child(5) span { animation-delay: 0.74s; } .pl-gap { height: 20px; } .pl-strike { text-decoration: line-through; text-decoration-color: #BF7665; text-decoration-thickness: 3px; color: rgba(0,0,0,0.3); } .pl-accent { color: #BF7665; } .pl-sub { overflow: hidden; margin-top: 40px; } .pl-sub span { display: block; font-family: 'NudicaMono', monospace; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.5px; color: rgba(0,0,0,0.4); transform: translateY(120%); animation: plUp 0.7s cubic-bezier(0.16,1,0.3,1) 1.35s forwards; } .pl-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: #BF7665; width: 0; animation: plProgress 2.8s cubic-bezier(0.4,0,0.2,1) 0.2s forwards; } .page-loader.is-done { animation: plFadeOut 0.6s ease forwards; } @keyframes plUp { to { transform: translateY(0); } } @keyframes plExpand { to { width: 100%; } } @keyframes plProgress{ to { width: 100%; } } @keyframes plFadeOut { to { opacity: 0; pointer-events: none; } } /* ── FONTS loaded via CDN in HTML ── */ /* ── RESET & BASE ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #efeeee; --black: #000000; --white: #ffffff; --card-bg: #ffffff; --tag-bg: #e8e6e6; --tag-bg-hi: rgba(229,226,226,0.7); --border: rgba(0,0,0,0.1); --border-strong: #000000; --page-pad: 64px; --font-head: 'Borna', sans-serif; --font-body: 'Silka', sans-serif; --font-mono: 'NudicaMono', 'Courier New', monospace; --da-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --da-ink: #000000; --da-white: #ffffff; --da-rust: #BF7665; } html { scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--black); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } img { display: block; width: 100%; height: 100%; object-fit: cover; } a { color: inherit; text-decoration: none; } /* ── NAVBAR ── */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--bg); padding: 0 var(--page-pad); height: 71px; display: flex; align-items: flex-end; } .navbar-inner { width: 100%; max-width: 1312px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--black); } .navbar-logo .logo-text { font-family: var(--font-mono); font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.72px; color: var(--black); } .logo-container { display: flex; align-items: center; gap: 16px; text-decoration: none; } .nav-geo-logo { height: 40px; width: 40px; object-fit: contain; } .navbar-links { list-style: none; display: flex; gap: 32px; } .navbar-links a { font-family: var(--font-mono); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.64px; color: var(--black); line-height: 1.5; transition: opacity 0.2s; } .navbar-links a:hover { opacity: 0.5; } /* ── HERO SWISS STYLE ── */ .hero-swiss { padding: 80px var(--page-pad) 132px; position: relative; overflow: hidden; background: var(--bg); } .massive-letter-hero { position: absolute; top: -150px; left: -80px; font-family: var(--font-head); font-size: 1000px; font-weight: 700; line-height: 1; color: var(--black); opacity: 0.07; pointer-events: none; z-index: 0; } .massive-letter-hero--2 { top: -80px; left: auto; right: -120px; font-size: 900px; } .massive-letter-hero--3 { top: 200px; left: 38%; font-size: 700px; } .hero-inner-swiss { max-width: 1312px; margin: 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; } .hero-main-title { margin-bottom: 32px; } .hero-main-title h1 { font-family: var(--font-head); font-size: 110px; font-weight: 700; line-height: 0.9; text-transform: uppercase; letter-spacing: -4px; color: var(--black); white-space: nowrap; } .hero-mid { max-width: 540px; margin-bottom: 80px; } .hero-description p { font-family: var(--font-head); font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--black); } .hero-meta-bar { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 8px; margin-bottom: 0; } .hero-label { font-family: var(--font-mono); font-size: 16px; font-weight: 500; text-transform: uppercase; display: flex; gap: 4px; } .label-bracket { color: #888; } .hero-date { font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1; display: flex; align-items: center; gap: 8px; } .date-sep { opacity: 0.2; } .hero-full-image { width: 100%; height: 566px; overflow: hidden; border: 1px solid var(--black); } .hero-full-image img { width: 100%; height: 100%; object-fit: cover; } /* ── TOPICS ── */ .topics { padding: 132px var(--page-pad); } .topics-inner { max-width: 1312px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; } .topics-header { display: flex; flex-direction: column; gap: 24px; max-width: 745px; } .topics-header h2 { font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1; color: var(--black); text-transform: uppercase; } .topics-header p { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--black); max-width: 600px; } .topics-list { display: flex; flex-direction: column; gap: 73px; } .topic-card { display: flex; align-items: center; justify-content: space-between; padding-bottom: 32px; border-bottom: 1px solid var(--black); gap: 16px; } .topic-content { width: 648px; flex-shrink: 0; display: flex; flex-direction: column; gap: 43px; } .topic-text { display: flex; flex-direction: column; gap: 24px; } .topic-text h3 { font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 1; color: var(--black); } .topic-text p { font-family: var(--font-head); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--black); max-width: 536px; } .topic-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .tag { display: inline-flex; align-items: center; justify-content: center; padding: 8px; background: var(--tag-bg); border: 1px solid var(--border); border-radius: 12px; font-family: var(--font-head); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--black); white-space: nowrap; transition: background 0.15s, border-color 0.15s; cursor: pointer; } .tag[href]:hover { background: #d8d6d6; text-decoration: underline; } .tag--plain { cursor: default; } .topic-image { width: 648px; height: 337px; flex-shrink: 0; overflow: hidden; background: #3a3a3a; } .topic-image img { width: 100%; height: 100%; object-fit: cover; } /* ── STATS MARQUEE ── */ .stats-marquee-wrapper { padding: 56px 0; background: var(--bg); color: var(--black); overflow: hidden; width: 100%; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); } .marquee { display: flex; width: 100%; } .marquee-content { display: flex; gap: 80px; animation: scroll 40s linear infinite; padding-left: 80px; } .marquee:hover .marquee-content { animation-play-state: paused; } .stat-item { flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid rgba(0, 0, 0, 0.2); padding-left: 24px; width: 380px; } .stat-number { font-family: var(--font-head); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -1px; white-space: nowrap; } .stat-label { font-family: var(--font-mono); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; line-height: 1.4; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 40px)); } } /* ── ONTOLOGY ── */ .ontology { padding: 132px var(--page-pad); border-bottom: 1px solid var(--black); } .ontology-inner { max-width: 1312px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; } .ontology-header { display: flex; flex-direction: column; gap: 24px; max-width: 745px; } .ontology-header h2 { font-family: var(--font-head); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -1px; text-transform: uppercase; } .ontology-header p { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.45; max-width: 560px; opacity: 0.75; } /* ── ONTOLOGY CARDS (EDITORIAL) ── */ .ont-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 20px; grid-template-areas: "hero side1" "side2 wide"; } .vb-card { background: var(--bg); border: 1px solid var(--black); padding: 28px 32px; display: flex; flex-direction: column; gap: 24px; position: relative; overflow: hidden; min-height: 500px; transition: background .35s var(--da-ease); } .vb-card:hover { background: rgba(0,0,0,0.025); } .vb-card.vb-hero { grid-area: hero; background: var(--white); } .vb-card.vb-side1 { grid-area: side1; } .vb-card.vb-side2 { grid-area: side2; } .vb-card.vb-wide { grid-area: wide; } /* Register bar */ .vb-register { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.1); } .vb-register-folio { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 4px; } .folio-mark { opacity: 0.4; margin-right: 2px; } .vb-sep { opacity: 0.25; margin: 0 2px; } .vb-total { opacity: 0.35; } .vb-register-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; padding: 4px 14px; border: 1px solid var(--black); border-radius: 20px; } /* Hero card two-column layout */ .vb-hero-grid { display: flex; flex: 1; gap: 0; } .vb-hero-numeral-col { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; padding-right: 32px; } .vb-hero-numeral { font-family: var(--font-head); font-size: 220px; font-weight: 700; letter-spacing: -10px; line-height: 0.9; } .vb-hero-folio { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid rgba(0,0,0,0.15); padding-top: 14px; } .folio-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.4; } .vb-hero-rule { width: 1px; background: rgba(0,0,0,0.12); flex-shrink: 0; align-self: stretch; position: relative; } .vb-hero-body { flex: 1; padding-left: 28px; display: flex; flex-direction: column; gap: 16px; } /* Eyebrow label */ .vb-eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.4; } /* Card titles */ .ont-h3-lg { font-family: var(--font-head); font-size: 52px; font-weight: 700; letter-spacing: -2px; line-height: 0.88; } .ont-h3 { font-family: var(--font-head); font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 0.95; } /* Description */ .ont-p { font-family: var(--font-body); font-size: 15px; line-height: 1.55; opacity: 0.8; } .ont-p strong { opacity: 1; font-weight: 600; } /* Property tag pills (hero card) */ .ont-prop-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ont-prop { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 6px 14px; background: var(--black); color: var(--white); border-radius: 20px; letter-spacing: 0.5px; } /* Relation list */ .ont-rel-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .ont-rel { font-family: var(--font-mono); font-size: 12px; font-weight: 500; display: flex; align-items: baseline; gap: 10px; line-height: 1.3; } .ont-rel-arr { opacity: 0.3; flex-shrink: 0; } .ont-rel em { font-style: italic; opacity: 0.5; font-family: var(--font-body); font-size: 12px; } /* Ghost watermark numeral */ .vb-watermark { position: absolute; top: 10px; right: -20px; font-family: var(--font-head); font-size: 320px; font-weight: 700; letter-spacing: -12px; line-height: 1; color: var(--black); opacity: 0.06; pointer-events: none; z-index: 0; user-select: none; } .vb-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; flex: 1; } /* Card footer */ .vb-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 16px; flex-shrink: 0; } .vb-foot-meta { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.4; } .vb-foot-link { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--black); opacity: 0.45; transition: opacity 0.2s; } .vb-foot-link:hover { opacity: 1; } /* ── VB-CARD HOVER ANIMATIONS (8 rules) ── */ /* 2. Tag pill: outline → filled ink */ .vb-register-tag { transition: background .35s var(--da-ease), color .35s var(--da-ease), border-color .35s var(--da-ease); } .vb-card:hover .vb-register-tag { background: var(--da-ink); color: var(--da-white); border-color: var(--da-ink); } /* 3. Watermark: solid fill → hollow outline + drift up-right */ .vb-watermark { -webkit-text-stroke: 0 transparent; transition: color .45s var(--da-ease), -webkit-text-stroke-color .45s var(--da-ease), -webkit-text-stroke-width .45s var(--da-ease), transform .55s var(--da-ease); } .vb-card:hover .vb-watermark { color: transparent; -webkit-text-stroke: 1.5px rgba(0,0,0,0.2); transform: translate(-6px, -8px); } /* 4. Body slides right 6px */ .vb-body { transition: transform .5s var(--da-ease); } .vb-card:hover .vb-body { transform: translateX(6px); } /* 5. Title underline draws L → R (100ms stagger) */ .vb-title-wrap { position: relative; display: inline-block; } .vb-title-wrap::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1.5px; background: var(--da-ink); transition: right .55s var(--da-ease) .1s; } .vb-card:hover .vb-title-wrap::after { right: 0; } /* 6. Footer arrow translates + link turns rust */ .vb-foot-link { transition: color .35s var(--da-ease), opacity .2s; } .vb-foot-link .arr { display: inline-block; transition: transform .4s var(--da-ease); } .vb-card:hover .vb-foot-link .arr { transform: translateX(5px); } .vb-card:hover .vb-foot-link { color: var(--da-rust); opacity: 1; } /* 7. Hero numeral: filled → hollow + drifts left */ .vb-hero-numeral { -webkit-text-stroke: 0 transparent; transition: color .4s var(--da-ease), -webkit-text-stroke-color .4s var(--da-ease), transform .55s var(--da-ease); } .vb-hero:hover .vb-hero-numeral { color: transparent; -webkit-text-stroke: 1.4px var(--da-ink); transform: translateX(-6px); } /* 8. Hero rule notch travels top → bottom, lands in rust */ .vb-hero-rule::before { content: ""; position: absolute; left: -3px; top: 18px; width: 7px; height: 1px; background: var(--da-ink); transition: top .6s var(--da-ease), background .35s var(--da-ease); } .vb-hero:hover .vb-hero-rule::before { top: calc(100% - 20px); background: var(--da-rust); } /* ── CLAIMS ── */ .claims { padding: 132px var(--page-pad); } .claims-inner { max-width: 1312px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; } .claims-header { display: flex; flex-direction: column; gap: 24px; max-width: 745px; } .claims-header h2 { font-family: var(--font-head); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -1px; color: var(--black); text-transform: uppercase; } .claims-header p { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.45; color: var(--black); max-width: 560px; opacity: 0.75; } .claims-carousel-wrapper { overflow: hidden; width: 100%; } .claims-track { display: flex; gap: 32px; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .claim-card { flex: 0 0 calc(25% - 24px); min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.12); } .claim-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.18; z-index: 0; } .claim-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 20%, rgba(239,238,238,0.6) 100%); z-index: 0; pointer-events: none; } .claim-card--first::before, .claim-card--enoch::before, .claim-card--binet::before, .claim-card--vesuvius::before, .claim-card--nazca::before { background-image: none; } .claim-card-content { display: flex; flex-direction: column; gap: 32px; flex: 1; position: relative; z-index: 2; } .claim-card h4 { font-family: var(--font-head); font-size: 20px; font-weight: 500; line-height: 1; color: var(--black); } .claim-quote { display: flex; flex-direction: column; gap: 24px; flex: 1; } .claim-quote > p { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--black); flex: 1; } .claim-author { display: flex; align-items: center; gap: 20px; } .author-avatar { width: 56px; height: 56px; border-radius: 0; overflow: hidden; flex-shrink: 0; background: #d4d4d4; } .author-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .author-info { display: flex; flex-direction: column; gap: 2px; } .author-name { font-family: var(--font-head); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--black); } .author-role { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--black); } .claim-card-footer { flex-shrink: 0; position: relative; z-index: 2; } /* ── CLAIM CARDS: SWISS REGISTER + NUMERAL ── */ .claim-register { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(0,0,0,0.1); position: relative; z-index: 2; flex-shrink: 0; } .claim-register-folio { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 3px; } .claim-register-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; padding: 3px 12px; border: 1px solid rgba(0,0,0,0.2); border-radius: 20px; } .claim-num { position: absolute; top: 6px; right: -14px; font-family: var(--font-head); font-size: 200px; font-weight: 700; letter-spacing: -8px; line-height: 1; color: var(--black); opacity: 0.06; pointer-events: none; z-index: 1; user-select: none; } .claim-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; background: var(--tag-bg); border: 1px solid var(--border); border-radius: 12px; font-family: var(--font-head); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--black); white-space: nowrap; transition: background 0.15s, border-color 0.15s; cursor: pointer; } .claim-link:hover { background: #d8d6d6; text-decoration: underline; } .claims-controls { display: flex; align-items: center; justify-content: space-between; padding-top: 40px; border-top: 1px solid var(--black); } .pagination-fraction { font-family: var(--font-mono); font-size: 18px; font-weight: 500; letter-spacing: -0.5px; display: flex; gap: 8px; color: var(--black); } .fraction-sep { opacity: 0.3; } .claims-arrows { display: flex; gap: 0; border: 1px solid var(--black); } .arrow-btn { width: 64px; height: 48px; border: none; border-radius: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, color 0.2s; color: var(--black); } .arrow-btn:first-child { border-right: 1px solid var(--black); } .arrow-btn:hover:not(:disabled) { background: var(--black); color: var(--white); } .arrow-btn:disabled { opacity: 0.2; cursor: not-allowed; } .arrow-btn svg { flex-shrink: 0; } /* ── CREDITS SWISS STYLE ── */ .credits-swiss { padding: 180px var(--page-pad); background: var(--bg); position: relative; overflow: hidden; border-top: 1px solid var(--black); } .massive-letter { position: absolute; top: -100px; right: -50px; font-family: var(--font-head); font-size: 800px; font-weight: 700; line-height: 1; color: var(--black); opacity: 0.03; pointer-events: none; z-index: 0; } .credits-inner { max-width: 1312px; margin: 0 auto; position: relative; z-index: 1; } .credits-header-swiss { margin-bottom: 100px; } .credits-header-swiss h2 { font-family: var(--font-head); font-size: 110px; font-weight: 700; line-height: 0.9; text-transform: uppercase; letter-spacing: -4px; color: var(--black); } .swiss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; align-items: start; } .swiss-group { display: flex; flex-direction: column; gap: 40px; } .group-header { display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--black); padding-bottom: 16px; } .group-num { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--black); } .group-label { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; opacity: 0.5; } .group-content { display: flex; flex-direction: column; gap: 12px; } .credit-item { font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -0.2px; text-transform: uppercase; color: var(--black); } .split-text { overflow: hidden; display: block; } .credit-item:hover { transform: translateX(10px); transition: transform 0.3s ease; } /* ── FOOTER ── */ .footer { padding: 80px var(--page-pad) 40px; background: #000000; color: #ffffff; } .footer-inner { max-width: 1312px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; } .footer-left { display: flex; flex-direction: column; gap: 24px; max-width: 400px; } .footer-tagline { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.45); } .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 40px; } .footer-links { list-style: none; display: flex; gap: 32px; } .footer-links a { font-family: var(--font-mono); font-size: 14px; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: #ffffff; } .copyright { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.25); } .footer .logo-text { color: #ffffff; } .footer .nav-geo-logo { filter: invert(1); } @media (max-width: 1024px) { .hero-main-title h1 { font-size: 80px; letter-spacing: -3px; } .hero-full-image { height: 320px; } .massive-letter-hero, .massive-letter { font-size: 400px; } .credits-header-swiss h2 { font-size: 64px; letter-spacing: -2px; } .swiss-grid { grid-template-columns: 1fr; gap: 80px; } .stats-inner, .ontology-grid, .credits-list, .ont-grid { grid-template-columns: 1fr; grid-template-areas: none; display: flex; flex-direction: column; } .footer-inner { flex-direction: column; align-items: flex-start; } .footer-right { align-items: flex-start; } .footer-links { flex-direction: column; gap: 16px; } } @media (min-width: 1200px) { .hero-main-title h1 { font-size: 110px; } } @media (min-width: 1024px) { .claims-track { gap: 16px; } .claim-card { min-width: 538px; flex: 0 0 538px; } } /* ══════════════════════════════════════════════════ BOUNTY SECTION — inverted black ══════════════════════════════════════════════════ */ .bounty-section { background: #000000; padding: 80px 64px 96px; position: relative; overflow: hidden; } .bounty-inner { max-width: 1600px; margin: 0 auto; } /* Label row */ .bounty-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; } .bounty-folio { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--da-rust); } .bounty-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.25); } /* Hairline */ .bounty-hairline { width: 100%; height: 1px; background: rgba(255,255,255,0.1); margin-bottom: 72px; } /* Two-column grid */ .bounty-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } /* Left: title + desc + cta */ .bounty-title { font-family: var(--font-head); font-size: 62px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; color: #ffffff; margin-bottom: 36px; } .bounty-desc { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.5); margin-bottom: 48px; max-width: 460px; } .bounty-cta { display: inline-flex; align-items: center; gap: 12px; padding: 13px 24px; border: 1px solid rgba(255,255,255,0.4); font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: #ffffff; text-decoration: none; transition: background 0.2s var(--da-ease), border-color 0.2s, color 0.2s; } .bounty-cta:hover { background: #ffffff; border-color: #ffffff; color: #000000; } .bounty-cta .arr { transition: transform 0.3s var(--da-ease); } .bounty-cta:hover .arr { transform: translateX(4px); } /* Right: metrics list */ .bounty-right { display: flex; flex-direction: column; } .bounty-metric { display: flex; align-items: baseline; gap: 28px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.07); transition: border-color 0.2s; } .bounty-metric:first-child { border-top: 1px solid rgba(255,255,255,0.07); } .bounty-metric:hover { border-bottom-color: rgba(255,255,255,0.18); } .bounty-metric-num { font-family: var(--font-head); font-size: 48px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; color: var(--da-rust); width: 110px; flex-shrink: 0; } .bounty-metric-label { font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.3; } @media (max-width: 900px) { .bounty-section { padding: 60px 32px; } .bounty-main-grid { grid-template-columns: 1fr; gap: 56px; } .bounty-title { font-size: 56px; } }