/* fonts.css is linked separately in so the faces are not blocked behind this stylesheet's own download. */ /* --------------------------------------------------------------- Anjo ehf — anjo.is Palette: basalt / off-white / lava, plus derived neutrals. No JS, no cookies, no third-party requests. --------------------------------------------------------------- */ :root { --basalt: #201e1d; --paper: #f3f2f2; --lava: #ec3013; /* brand accent — marks, rules, borders (non-text) */ --lava-ink: #c62810; /* same hue, darkened for small text on paper (5.1:1) */ --lava-lit: #ef4b32; /* same hue, lifted for small text on basalt (4.5:1) */ --ash: #6b6663; /* muted text on paper */ --rule: #d8d5d3; /* hairlines on paper */ --sand: #e8e5e2; /* alternate section tint */ --ink-invert: #f3f2f2; --ash-invert: #a49e9a; --rule-invert: #3b3735; --display: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif; --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --measure: 34rem; --gutter: clamp(1.25rem, 5vw, 4.5rem); --shell: 74rem; --step: clamp(3.5rem, 8vw, 7rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--basalt); font: 400 1.0625rem/1.65 var(--body); font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-color: var(--lava); } :focus-visible { outline: 2px solid var(--lava); outline-offset: 3px; border-radius: 1px; } /* --- Typography -------------------------------------------------- */ h1, h2, h3 { margin: 0; font-weight: 700; } /* Icelandic compounds get long ("Persónuverndarstefna"). The clamp floor is set so they fit a 320px screen, soft hyphens in the copy give a clean break point, and break-word is the backstop so nothing can ever push the page into horizontal scroll. */ .display { font-family: var(--display); font-size: clamp(2rem, 7.5vw, 5.5rem); line-height: 0.95; letter-spacing: -0.021em; text-wrap: balance; overflow-wrap: break-word; } .h2 { font-family: var(--display); font-size: clamp(1.6rem, 3.6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.014em; text-wrap: balance; overflow-wrap: break-word; } .h3 { font-family: var(--body); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.004em; } /* No colour of its own — it must inherit, or it goes basalt-on-basalt inside .section-dark. */ .lead { font-size: clamp(1.125rem, 1.9vw, 1.375rem); line-height: 1.5; max-width: 32ch; } .prose { max-width: var(--measure); } .prose > .h2, .prose > .h3 { margin-bottom: 0.65rem; } .prose p { margin: 0 0 1.1em; } .prose > :last-child { margin-bottom: 0; } .prose ul { margin: 0 0 1.1em; padding-left: 1.1em; } .prose li { margin-bottom: 0.4em; } .prose li::marker { color: var(--lava-ink); } .muted { color: var(--ash); } .small { font-size: 0.9375rem; line-height: 1.6; } /* Structural device: mono eyebrow + hairline. Labels a section's role. */ .eyebrow { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.75rem; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); } .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .eyebrow > span { color: var(--lava-ink); } /* --- Layout ------------------------------------------------------ */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--step); } .section + .section { border-top: 1px solid var(--rule); } .section-tint { background: var(--sand); } .section-tint + .section, .section + .section-tint { border-top: 0; } .section-dark { background: var(--basalt); color: var(--ink-invert); border-top: 0; } .section-dark .muted { color: var(--ash-invert); } .section-dark .eyebrow { color: var(--ash-invert); } .section-dark .eyebrow::after { background: var(--rule-invert); } .section-dark + .section { border-top: 0; } .section-dark a { color: var(--ink-invert); } .section-dark .eyebrow > span { color: var(--lava-lit); } .section-dark li::marker { color: var(--lava-lit); } .skip { position: absolute; left: -9999px; top: 0; z-index: 20; background: var(--lava-ink); color: #fff; padding: 0.7rem 1.1rem; font: 500 0.875rem var(--mono); text-decoration: none; } .skip:focus { left: 0; } /* --- Header ------------------------------------------------------ */ .masthead { border-bottom: 1px solid var(--rule); background: var(--paper); } .masthead > .shell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.75rem; min-height: 4.25rem; padding-block: 0.85rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: auto; text-decoration: none; } .brand-mark { width: 1.75rem; height: 1.75rem; flex: none; display: block; } .brand-name { font: 700 1.3125rem/1 var(--display); letter-spacing: -0.012em; } .brand-name em { font-style: normal; font-weight: 400; color: var(--ash); margin-left: 0.28em; font-size: 0.72em; } .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.5rem; font-size: 0.9375rem; } .nav a { text-decoration: none; padding-block: 0.2rem; border-bottom: 1px solid transparent; } .nav a:hover { border-bottom-color: var(--lava); } .nav a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--lava); } .lang { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-decoration: none; padding: 0.45rem 0.6rem; border: 1px solid var(--rule); white-space: nowrap; } .lang:hover { border-color: var(--basalt); } .lang b { color: var(--ash); font-weight: 500; } /* --- Hero -------------------------------------------------------- */ .hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(1.75rem, 4vw, 3rem); } .hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: start; } @media (min-width: 62rem) { .hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } } .hero-body { margin-top: 1.75rem; } .hero-body > .lead { max-width: 38ch; } /* Signature: the waypoint mark. GuideMe stops are X-marked; the ring is the geofence that opens the stop when the player walks into it. */ .waypoint { display: block; width: min(100%, 20rem); margin-inline: auto; } .waypoint .ring { fill: none; stroke: var(--rule); stroke-width: 1; } .waypoint .fence { fill: none; stroke: var(--lava); stroke-width: 1.5; stroke-dasharray: 6 5; transform-origin: 100px 100px; animation: fence-turn 48s linear infinite; } .waypoint .tick { stroke: var(--basalt); stroke-width: 1; opacity: 0.45; } .waypoint .cross { fill: none; stroke: var(--lava); stroke-width: 7; stroke-linecap: square; stroke-dasharray: 62; stroke-dashoffset: 62; animation: draw-x 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .waypoint .cross:nth-of-type(2) { animation-delay: 0.18s; } .waypoint .label { font: 500 8px var(--mono); letter-spacing: 0.14em; fill: var(--ash); } @keyframes draw-x { to { stroke-dashoffset: 0; } } @keyframes fence-turn { to { transform: rotate(360deg); } } /* Placeholder art for the product page — an abstract map field. Explicitly not a screenshot; the app has not shipped. */ .mapart { display: block; width: 100%; border: 1px solid var(--rule); } .mapart-bg { fill: var(--sand); } .mapart-contour { fill: none; stroke: #cdc9c6; stroke-width: 1; } .mapart-route { fill: none; stroke: var(--basalt); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.55; } .mapart-x { stroke: var(--basalt); stroke-width: 2.5; stroke-linecap: square; opacity: 0.7; } .mapart-live circle { fill: none; stroke: var(--lava); stroke-width: 1.5; stroke-dasharray: 5 4; } .mapart-live path { stroke: var(--lava); stroke-width: 4; stroke-linecap: square; } .section-tint .mapart-bg { fill: #ddd9d6; } .coords { margin: 1.5rem 0 0; text-align: center; font: 400 0.75rem/1.7 var(--mono); letter-spacing: 0.06em; color: var(--ash); } .coords b { display: block; font-weight: 500; color: var(--basalt); letter-spacing: 0.14em; } /* --- Cards & grids ------------------------------------------------ */ .grid { display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } .card { border-top: 2px solid var(--basalt); padding-top: 1.1rem; } .card .h3 { margin-bottom: 0.5rem; } .card p { margin: 0; } .section-dark .card { border-top-color: var(--lava); } /* Ventures: the two things the company actually runs. */ .venture { display: grid; gap: 0.75rem 2rem; padding-block: 1.75rem; border-top: 1px solid var(--rule); } .venture:last-child { border-bottom: 1px solid var(--rule); } @media (min-width: 48rem) { .venture { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; } } .venture-name { font: 700 1.5rem/1.1 var(--display); letter-spacing: -0.012em; overflow-wrap: break-word; } .venture-name span { display: block; margin-top: 0.4rem; font: 400 0.6875rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); } /* --- Steps (how a hunt works — a real ordered sequence) ----------- Only used inside .section-dark; the numbers use the lifted red so the small mono type still clears 4.5:1 against basalt. */ .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; } .step { display: grid; gap: 0.4rem 1.5rem; padding-block: 1.5rem; border-top: 1px solid var(--rule-invert); counter-increment: step; } @media (min-width: 42rem) { .step { grid-template-columns: 4rem minmax(0, 1fr); } /* ::before occupies column 1; keep the heading and copy together in column 2 rather than letting the copy wrap into the number column. */ .step h3, .step p { grid-column: 2; } } .step::before { content: counter(step, decimal-leading-zero); font: 500 0.8125rem/1.6 var(--mono); letter-spacing: 0.1em; color: var(--lava-ink); } .section-dark .step::before { color: var(--lava-lit); } .step p { margin: 0.35rem 0 0; max-width: 46ch; } /* --- FAQ ---------------------------------------------------------- */ .faq { max-width: 46rem; } .faq-item { border-top: 1px solid var(--rule); padding-block: 1.6rem; } .faq-item:last-child { border-bottom: 1px solid var(--rule); } .faq-item h3 { margin-bottom: 0.5rem; } .faq-item p { margin: 0 0 0.8em; max-width: 52ch; } .faq-item > :last-child { margin-bottom: 0; } /* --- Legal / policy pages ----------------------------------------- */ .policy { max-width: 44rem; } .policy h2 { font-family: var(--display); font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -0.01em; margin: 2.75rem 0 0.85rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); } .policy h2:first-of-type { margin-top: 2rem; } .policy h3 { font-family: var(--body); font-size: 1rem; font-weight: 600; margin: 1.75rem 0 0.4rem; } .policy p, .policy ul { margin: 0 0 1.05em; } .policy ul { padding-left: 1.15em; } .policy li { margin-bottom: 0.4em; } .policy li::marker { color: var(--lava-ink); } .stamp { display: inline-block; margin-top: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--rule); font: 400 0.8125rem/1 var(--mono); letter-spacing: 0.06em; color: var(--ash); } /* Data table used for "what leaves the device" — plain facts, no spin. */ .datatable { width: 100%; border-collapse: collapse; margin: 0 0 1.25em; font-size: 0.9375rem; } .datatable caption { text-align: left; padding-bottom: 0.6rem; color: var(--ash); font-size: 0.875rem; } .datatable th, .datatable td { text-align: left; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .datatable th { font: 500 0.8125rem/1.5 var(--mono); letter-spacing: 0.02em; white-space: nowrap; } .datatable thead th { color: var(--ash); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6875rem; } .table-scroll { overflow-x: auto; } .prose + .table-scroll { margin-top: 1.75rem; } /* --- Contact ------------------------------------------------------ */ .mailto { display: inline-block; font: 700 clamp(1.5rem, 4vw, 2.5rem)/1.1 var(--display); letter-spacing: -0.014em; color: inherit; text-decoration: none; border-bottom: 2px solid var(--lava); padding-bottom: 0.1em; word-break: break-word; } .mailto:hover { color: var(--lava); } /* --- Footer ------------------------------------------------------- */ .site-foot { background: var(--basalt); color: var(--ink-invert); padding-block: var(--step) 2.5rem; } .foot-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } /* The registry block: the legal record, laid out like the record it is. */ .registry { margin: 0; } .registry div { margin-bottom: 1.15rem; } .registry dt { font: 400 0.6875rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash-invert); margin-bottom: 0.4rem; } .registry dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; } .registry dd a { color: var(--ink-invert); } .registry .kt { font-family: var(--mono); letter-spacing: 0.04em; } .foot-nav { display: grid; gap: 0.55rem; align-content: start; font-size: 0.9375rem; } .foot-nav a { text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; } .foot-nav a:hover { border-bottom-color: var(--lava); } .foot-head { font: 400 0.6875rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash-invert); margin-bottom: 0.35rem; } .foot-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-invert); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font: 400 0.8125rem/1.6 var(--mono); color: var(--ash-invert); } /* --- Motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .waypoint .cross { stroke-dashoffset: 0; } } /* --- Print (a reviewer may print the policy) ---------------------- */ @media print { .masthead, .foot-nav, .skip, .waypoint { display: none; } body { background: #fff; font-size: 11pt; } .site-foot { background: #fff; color: #000; border-top: 1px solid #000; } .registry dt, .foot-base, .registry dd { color: #000; } a { text-decoration: none; } }