:root { --ink: #16303a; --ink-2: #24505f; --aqua: #4fc0c7; --aqua-dark: #2fa3ab; --aqua-pale: #ddf3f4; --sand: #f6efe7; --coral: #ef8b6b; --navy: #17323d; --line: #dfeaed; --bg: #ffffff; --tint: #f4fafb; --muted: #6b8894; --ok: #2f8f6b; --ok-bg: #e4f4ee; --no: #b4553f; --no-bg: #fbeae4; --unk-bg: #eef2f4; --gold: #b8862b; --gold-bg: #fbf1dc; --radius: 14px; --shadow: 0 1px 2px rgba(22,48,58,.06), 0 8px 24px rgba(22,48,58,.06); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; } img { max-width: 100%; height: auto; } a { color: var(--aqua-dark); } .container { width: min(1120px, 100% - 2.5rem); margin-inline: auto; } .narrow { width: min(720px, 100% - 2.5rem); } .skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: .6rem 1rem; z-index: 100; } .skip:focus { left: 0; } /* ---- language toggle ---- */ /* Both languages ship in the document; this hides the one that isn't active. With JS off, the server-rendered data-lang on still applies, so a no-JS reader gets the page's default language rather than both at once. */ html[data-lang="en"] .i18n[data-lang="fr"], html[data-lang="fr"] .i18n[data-lang="en"] { display: none; } .lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-left: auto; } .lang-btn { font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .04em; padding: .3rem .7rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; } html[data-lang="en"] .lang-btn[data-set-lang="en"], html[data-lang="fr"] .lang-btn[data-set-lang="fr"] { background: var(--aqua); color: #fff; } /* ---- header ---- */ .site-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 40; } .nav { display: flex; align-items: center; gap: 1.25rem; padding: .85rem 0; } .logo { font-weight: 800; font-size: 1.28rem; color: var(--navy); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; } .logo span { color: var(--aqua-dark); } .logo .dot { display: inline-block; width: .38rem; height: .38rem; border-radius: 50%; background: var(--coral); margin: 0 .12rem .05rem .12rem; } .logo .tld { color: var(--muted); font-weight: 500; font-size: .9em; } .nav-links { display: flex; gap: 1.15rem; flex-wrap: wrap; align-items: center; } .nav-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; } .nav-links a:hover { color: var(--aqua-dark); } .nav-cta { background: var(--aqua); color: #fff !important; padding: .45rem .9rem; border-radius: 999px; font-weight: 700 !important; } /* ---- hero ---- */ .hero { background: linear-gradient(160deg, var(--aqua-pale), var(--sand) 90%); padding: 3.5rem 0 3rem; } .hero-sm { padding: 2.25rem 0 2rem; } .hero-soon { background: linear-gradient(160deg, var(--tint), var(--sand) 90%); } .eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700; color: var(--aqua-dark); margin: 0 0 .5rem; } .hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.1; margin: 0 0 .9rem; letter-spacing: -.02em; max-width: 20ch; } .hero h1 em { font-style: normal; color: var(--aqua-dark); } .lede { font-size: 1.1rem; max-width: 56ch; color: var(--ink-2); margin: 0 0 1.4rem; } .lede-sm { color: var(--ink-2); max-width: 62ch; } .hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; } .hero-stats { display: flex; gap: 2.2rem; margin-top: 2.2rem; flex-wrap: wrap; } .hero-stats b { display: block; font-size: 1.8rem; line-height: 1; color: var(--navy); } .hero-stats span { font-size: .85rem; color: var(--muted); } .btn { display: inline-block; padding: .7rem 1.35rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; font-size: 1rem; } .btn-aqua { background: var(--aqua); color: #fff; } .btn-aqua:hover { background: var(--aqua-dark); } .btn-navy { background: var(--navy); color: #fff; } .btn-ghost { border-color: var(--ink-2); color: var(--ink-2); } .btn-ghost:hover { background: rgba(255,255,255,.6); } /* ---- sections ---- */ .section { padding: 3rem 0; } .section-tint { background: var(--tint); } .section-head { margin-bottom: 1.6rem; max-width: 62ch; } .section-head h2 { font-size: 1.7rem; margin: 0 0 .4rem; letter-spacing: -.01em; } .section-head p { color: var(--ink-2); margin: 0; } /* ---- category tiles ---- */ .cat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .cat-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow); } .cat-tile:hover { border-color: var(--aqua); } .cat-tile h3 { margin: 0 0 .4rem; font-size: 1.1rem; } .cat-tile p { margin: 0 0 .7rem; font-size: .92rem; color: var(--ink-2); } .cat-count { font-size: .8rem; font-weight: 700; color: var(--aqua-dark); text-transform: uppercase; letter-spacing: .05em; } /* ---- province list ---- */ .prov-list { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .prov-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .7rem 1rem; text-decoration: none; color: inherit; } .prov-row:hover { border-color: var(--aqua); } .prov-name { font-weight: 600; } .prov-state { font-size: .82rem; color: var(--muted); white-space: nowrap; } .prov-full .prov-state { color: var(--aqua-dark); font-weight: 700; } .prov-coming-soon .prov-state { color: var(--coral); font-weight: 700; } /* ---- cards ---- */ .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; } .card:hover { border-color: var(--aqua); transform: translateY(-2px); } .card-claimed { border-color: var(--gold); background: linear-gradient(#fffdf7, #fff); } .card-body { padding: 1.1rem 1.2rem 1.2rem; } .card-cat { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--aqua-dark); margin-bottom: .35rem; } .card h3 { margin: 0 0 .2rem; font-size: 1.08rem; line-height: 1.25; } .card-city { color: var(--muted); font-size: .9rem; } .card-age { font-size: .87rem; margin: .5rem 0; } .card-age b { color: var(--ink-2); } .card-age-unk { color: var(--muted); } .rating { display: flex; align-items: center; gap: .25rem; font-weight: 700; font-size: .9rem; margin-top: .35rem; } .rating-lg { font-size: 1.05rem; } .star { width: 1em; height: 1em; fill: #f0b429; } .rating .muted { font-weight: 500; color: var(--muted); } .tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; } .tag { background: var(--aqua-pale); color: var(--ink-2); font-size: .76rem; padding: .18rem .55rem; border-radius: 999px; } .pill { display: inline-block; font-size: .76rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px; margin-right: .3rem; } .pill-yes { background: var(--ok-bg); color: var(--ok); } .pill-no { background: var(--no-bg); color: var(--no); } .pill-unk { background: var(--unk-bg); color: var(--muted); } .pill-soft { background: var(--aqua-pale); color: var(--aqua-dark); } .pill-claimed { background: var(--gold-bg); color: var(--gold); } .badges { margin: .5rem 0; } .pill-link { display: inline-block; background: var(--aqua-pale); color: var(--aqua-dark); font-size: .82rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; text-decoration: none; margin: 0 .3rem .3rem 0; } /* ---- filters ---- */ .filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.2rem; } .filter-row { display: flex; gap: .8rem; align-items: flex-start; padding: .45rem 0; flex-wrap: wrap; } .filter-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 72px; padding-top: .35rem; } .searchbox { flex: 1; min-width: 200px; font: inherit; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; } .chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; } .chip, .toggle { font: inherit; font-size: .85rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink-2); } .chip b { color: var(--muted); font-weight: 600; } .chip.on, .toggle.on { background: var(--aqua); border-color: var(--aqua); color: #fff; } .chip.on b { color: rgba(255,255,255,.8); } .linkish { font: inherit; font-size: .85rem; background: none; border: 0; color: var(--aqua-dark); text-decoration: underline; cursor: pointer; } .result-count { font-size: .88rem; color: var(--muted); margin: 0 0 .8rem; } .no-results { padding: 2rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); } .empty-panel { padding: 2.5rem 1.5rem; text-align: center; background: var(--tint); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); } .empty-panel p { margin: 0; font-size: 1.05rem; } /* ---- city ---- */ .city-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .city-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration: none; color: inherit; position: relative; } .city-tile:hover { border-color: var(--aqua); } .city-tile h3 { margin: 0; font-size: 1rem; } .city-tile p { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; } .city-tile .arrow { position: absolute; right: 1rem; top: 1rem; color: var(--aqua); } .city-head { margin: 1.5rem 0 1.6rem; } .city-head h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0 0 .5rem; letter-spacing: -.02em; } .city-cat { margin: 2rem 0; } .city-cat h2 { font-size: 1.3rem; margin: 0 0 .8rem; } .other-cities { color: var(--muted); font-size: .9rem; margin-top: 1.6rem; } .crumbs { font-size: .85rem; color: var(--muted); padding: 1rem 0 0; } .crumbs a { color: var(--muted); } /* ---- profile ---- */ .profile { margin: 1.2rem 0 2.5rem; } .profile-head h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: .2rem 0 .3rem; letter-spacing: -.02em; } .profile .note { color: var(--ink-2); max-width: 62ch; margin: .9rem 0 1rem; } .profile-head .btn { margin-top: .6rem; } .facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin: 1.5rem 0; } .fact { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; } .fact-wide { grid-column: 1 / -1; } .fact h4 { margin: 0 0 .4rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .fact p { margin: 0; font-size: .95rem; } .badge-inline { margin-bottom: .4rem; } .contact-links a { font-weight: 600; } .muted { color: var(--muted); } .fine-print { font-size: .85rem; color: var(--muted); max-width: 68ch; } /* ---- article ---- */ .article { padding: 1rem 0 3rem; } .article h1 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); letter-spacing: -.02em; margin: .5rem 0 1rem; } .article h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; } .article p, .article li { color: var(--ink-2); } .soon-list { padding-left: 1.1rem; } .soon-list li { margin-bottom: .5rem; } /* ---- claim ---- */ .price-card { border: 2px solid var(--aqua); border-radius: var(--radius); padding: 1.5rem; background: linear-gradient(var(--aqua-pale), #fff); margin: 1.5rem 0; } .price-head { display: flex; align-items: baseline; gap: .5rem; } .price { font-size: 2.6rem; font-weight: 800; color: var(--navy); line-height: 1; } .price-period { color: var(--muted); font-weight: 600; } .price-list { margin: 1rem 0 0; padding-left: 1.1rem; } .price-list li { margin-bottom: .4rem; color: var(--ink-2); } .claim-band { background: var(--sand); } /* Contact details that do not exist yet. Deliberately not a link and deliberately not styled like one -- there is nowhere to send anyone. */ .pending { color: var(--muted); font-style: italic; } .aid-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .aid-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .4rem; } .aid-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; } .aid-head h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; } .aid-head .pill { flex: none; } .aid-who { margin: 0; font-size: .82rem; color: var(--muted); font-weight: 600; } .aid-card p { margin: 0; font-size: .92rem; color: var(--ink-2); } .aid-link { margin-top: auto; padding-top: .5rem; font-weight: 700; font-size: .9rem; text-decoration: none; } .pill-cost { background: var(--sand); color: var(--gold); } .public-note { margin: 1.4rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--aqua); background: var(--tint); font-size: .9rem; color: var(--ink-2); border-radius: 0 8px 8px 0; } .article-tile { display: flex; flex-direction: column; gap: .6rem; } .article-tile-link { text-decoration: none; color: inherit; } .article-tile-link h3 { margin: .2rem 0 .3rem; font-size: 1.05rem; } .article-tile-link p { margin: 0; color: var(--ink-2); font-size: .9rem; } .article-cta { margin: 2rem 0 1rem; } /* ---- CTA band ---- */ .cta-band { background: var(--navy); color: #fff; } .cta-inner { max-width: 62ch; } .cta-band h2, .claim-band h2 { font-size: 1.7rem; margin: 0 0 .6rem; } .cta-band p { color: rgba(255,255,255,.85); } .cta-band .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; } .cta-inner .btn { margin-right: .5rem; margin-top: .4rem; } /* ---- affiliate ---- */ .affiliate-cta { border: 1px solid var(--coral); border-radius: var(--radius); background: #fff8f5; padding: 1.2rem 1.3rem; margin: 2rem 0; } .affiliate-cta-copy { margin: 0 0 .8rem; color: var(--ink-2); } .btn-affiliate { display: inline-block; background: var(--coral); color: #fff; font-weight: 700; padding: .6rem 1.2rem; border-radius: 999px; text-decoration: none; } /* ---- forms ---- */ .contact-form { display: grid; gap: .9rem; max-width: 34rem; margin: 1.5rem 0; } .contact-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; } .contact-form input, .contact-form textarea, .contact-form select { font: inherit; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 10px; font-weight: 400; } .contact-form button { justify-self: start; } .hidden-field { position: absolute; left: -9999px; } /* ---- footer ---- */ .site-footer { background: var(--navy); color: rgba(255,255,255,.8); padding: 2.5rem 0 1.5rem; margin-top: 2rem; } .footer-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .footer-grid p { font-size: .9rem; max-width: 34ch; } .footer-grid h4 { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--aqua); } .footer-grid a { display: block; color: rgba(255,255,255,.8); text-decoration: none; font-size: .92rem; padding: .12rem 0; } .footer-grid a:hover { color: #fff; } .logo-footer { color: #fff; display: inline-block; margin-bottom: .5rem; } .logo-footer span { color: var(--aqua); } .logo-footer .tld { color: rgba(255,255,255,.5); } .footer-note { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1rem; font-size: .8rem; color: rgba(255,255,255,.6); } .disclaimer { max-width: 80ch; margin: .5rem 0 0; } @media (max-width: 640px) { .nav { flex-wrap: wrap; gap: .6rem; } .nav-links { gap: .8rem; font-size: .9rem; order: 3; width: 100%; } .lang-toggle { margin-left: 0; } .hero-stats { gap: 1.4rem; } }