/* ========================================================================== Puerto Rico Local: one stylesheet, hand-editable. Two modes on : .utility (homepage shell, hubs, lists) and .editorial (article pages). Tokens first, then base, then components. ========================================================================== */ :root { /* Utility mode */ --ui-ground: #fbfbfa; --ui-card: #ffffff; --ui-line: #e4e5e4; --ui-ink: #191c1c; --ui-muted: #5e6562; --teal: oklch(0.52 0.11 205); --teal-deep: oklch(0.42 0.1 205); --teal-wash: oklch(0.96 0.014 205); /* Editorial mode */ --paper: #faf6ef; --ink: #221c16; --muted: #6b5f52; --terra: oklch(0.55 0.12 45); --terra-deep: oklch(0.47 0.11 45); --line-warm: #e6ddcd; /* Hero color fields, tinted by landscape */ --coastal-a: oklch(0.93 0.035 210); --coastal-b: oklch(0.82 0.07 215); --coastal-c: oklch(0.62 0.09 220); --forest-a: oklch(0.92 0.04 150); --forest-b: oklch(0.74 0.08 155); --forest-c: oklch(0.45 0.08 160); --town-a: oklch(0.95 0.03 75); --town-b: oklch(0.84 0.07 60); --town-c: oklch(0.62 0.1 45); --sand-a: oklch(0.96 0.025 85); --sand-b: oklch(0.88 0.05 80); --sand-c: oklch(0.72 0.07 70); --karst-a: oklch(0.93 0.02 170); --karst-b: oklch(0.78 0.045 180); --karst-c: oklch(0.5 0.05 190); --dry-a: oklch(0.95 0.03 95); --dry-b: oklch(0.85 0.06 90); --dry-c: oklch(0.63 0.08 75); --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; --grot: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; --measure: 680px; --wide: 1080px; --r-card: 14px; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.utility { background: var(--ui-ground); color: var(--ui-ink); font-family: var(--grot); font-size: 16px; line-height: 1.55; } body.editorial { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.65; } img, svg { display: block; max-width: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; } body.editorial :focus-visible { outline-color: var(--terra); } ::selection { background: var(--teal-wash); } body.editorial ::selection { background: #f1e4d2; } /* -------------------------------------------------------------------------- Mono metadata: the connective tissue of the whole site -------------------------------------------------------------------------- */ .mono, .kicker, .label { font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; } /* -------------------------------------------------------------------------- Masthead and footer, shared across modes -------------------------------------------------------------------------- */ .masthead { max-width: var(--wide); margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .wordmark { font-family: var(--grot); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .wordmark .pin { color: var(--teal); } body.editorial .wordmark .pin { color: var(--terra); } .masthead nav { display: flex; gap: 4px; flex-wrap: wrap; } .masthead nav a { font-family: var(--grot); font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ui-muted); padding: 11px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; } body.editorial .masthead nav a { color: var(--muted); border-radius: 2px; } .masthead nav a:hover { color: var(--teal); } body.editorial .masthead nav a:hover { color: var(--terra-deep); } .masthead nav a[aria-current="page"] { color: var(--teal); } body.editorial .masthead nav a[aria-current="page"] { color: var(--terra-deep); } .foot { margin-top: 96px; border-top: 1px solid var(--ui-line); padding: 32px 24px 48px; } body.editorial .foot { border-top-color: var(--line-warm); } .foot-inner { max-width: var(--wide); margin: 0 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; } .foot p { margin: 0; font-family: var(--grot); font-size: 12px; color: var(--ui-muted); } body.editorial .foot p { color: var(--muted); } .foot a { color: inherit; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- EDITORIAL: article anatomy -------------------------------------------------------------------------- */ .article { max-width: var(--measure); margin: 0 auto; padding: 24px 24px 0; } .kicker { color: var(--terra); margin: 24px 0 14px; } .kicker a { color: inherit; text-decoration: none; } .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; } .article h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(29px, 6vw, 38px); line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 14px; } .deck { font-style: italic; font-size: 16.5px; line-height: 1.55; color: var(--muted); margin: 0 0 28px; } .article p { margin: 0 0 1.35em; } .article a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--terra) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; } .article a:hover { text-decoration-color: var(--terra); } /* Section labels: h2 rendered as terracotta mono rules */ .article h2 { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--terra); margin: 44px 0 16px; display: flex; align-items: center; gap: 14px; } .article h2::after { content: ""; flex: 1; height: 1px; background: var(--line-warm); } .article h3 { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.3; margin: 26px 0 8px; } .article ul { padding-left: 1.2em; margin: 0 0 1.35em; } .article li { margin-bottom: .45em; } /* -------------------------------------------------------------------------- Hero: color-field band + SVG motif + coordinates mark. .hero-photo carries a background-image of the future photo and no-ops until the file exists in /images. Zero JS, zero layout shift. -------------------------------------------------------------------------- */ .hero { position: relative; margin: 0 0 36px; aspect-ratio: 5 / 2.6; overflow: hidden; border-radius: 3px; } .hero svg.motif { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; } .hero-mark { position: absolute; left: 16px; bottom: 12px; margin: 0; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .hero--coastal { background: linear-gradient(168deg, var(--coastal-a), var(--coastal-b) 58%, var(--coastal-c)); } .hero--forest { background: linear-gradient(168deg, var(--forest-a), var(--forest-b) 58%, var(--forest-c)); } .hero--town { background: linear-gradient(168deg, var(--town-a), var(--town-b) 58%, var(--town-c)); } .hero--sand { background: linear-gradient(168deg, var(--sand-a), var(--sand-b) 58%, var(--sand-c)); } .hero--karst { background: linear-gradient(168deg, var(--karst-a), var(--karst-b) 58%, var(--karst-c)); } .hero--dry { background: linear-gradient(168deg, var(--dry-a), var(--dry-b) 58%, var(--dry-c)); } /* -------------------------------------------------------------------------- Almanac: a one-line seasonal strip between deck and body -------------------------------------------------------------------------- */ .almanac { border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm); padding: 12px 0; margin: 0 0 32px; display: flex; gap: 14px; align-items: baseline; } .almanac .label { color: var(--terra); flex-shrink: 0; } .almanac p { margin: 0; font-size: 15.5px; color: var(--muted); font-style: italic; } /* -------------------------------------------------------------------------- Facts grid: 3-column hairline-ruled strip -------------------------------------------------------------------------- */ .facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-warm); border-left: 1px solid var(--line-warm); margin: 40px 0; } .facts > div { border-right: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm); padding: 14px 16px 16px; } .facts .label { color: var(--muted); display: block; margin-bottom: 6px; } .facts .value { font-family: var(--serif); font-size: 16px; line-height: 1.4; margin: 0; } /* -------------------------------------------------------------------------- Local tip: terracotta left rule, fully visible, never gated -------------------------------------------------------------------------- */ .tip { border-left: 2px solid var(--terra); padding: 4px 0 4px 20px; margin: 36px 0; } .tip .label { color: var(--terra); display: block; margin-bottom: 8px; } .tip p { margin: 0; font-size: 17px; } /* -------------------------------------------------------------------------- Nearby: compact linked list -------------------------------------------------------------------------- */ .nearby { list-style: none; padding: 0; margin: 0 0 1.35em; } .nearby li { padding: 12px 0; border-bottom: 1px solid var(--line-warm); font-size: 16px; } .nearby li:first-child { border-top: 1px solid var(--line-warm); } .nearby .place { font-weight: 500; } /* -------------------------------------------------------------------------- Questions -------------------------------------------------------------------------- */ .questions h3 { font-size: 18px; } .questions p { font-size: 16px; color: color-mix(in oklch, var(--ink) 88%, var(--muted)); } /* -------------------------------------------------------------------------- Tour block: the only dark element on any page. Full-bleed warm ink, a considered recommendation, never an ad. -------------------------------------------------------------------------- */ .tour-bleed { margin: 56px calc(50% - 50vw) 0; background: var(--ink); } .tour-block { max-width: var(--measure); margin: 0 auto; padding: 44px 24px 48px; color: #f6efe4; } .tour-block .label { color: oklch(0.72 0.13 45); display: block; margin-bottom: 14px; } .tour-block .tour-name { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.2; margin: 0 0 10px; } .tour-block .tour-meta { font-family: var(--grot); font-size: 13.5px; color: rgba(246, 239, 228, 0.72); margin: 0 0 12px; } .tour-block .tour-why { font-size: 16.5px; font-style: italic; color: rgba(246, 239, 228, 0.88); margin: 0 0 24px; max-width: 52ch; } .tour-block .tour-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border: 1px solid rgba(246, 239, 228, 0.45); border-radius: 2px; font-family: var(--grot); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: #f6efe4; } .tour-block .tour-link:hover { border-color: #f6efe4; background: rgba(246, 239, 228, 0.06); } .tour-block .tour-link:focus-visible { outline-color: #f6efe4; } /* -------------------------------------------------------------------------- Closing line -------------------------------------------------------------------------- */ .close-line { max-width: var(--measure); margin: 0 auto; padding: 40px 24px 0; font-family: var(--serif); font-style: italic; font-size: 16.5px; color: var(--muted); } /* -------------------------------------------------------------------------- UTILITY: homepage shell, hubs, lists -------------------------------------------------------------------------- */ .shell { max-width: var(--wide); margin: 0 auto; padding: 0 24px; } .shell-narrow { max-width: var(--measure); margin: 0 auto; padding: 0 24px; } .screen-title { font-family: var(--grot); font-weight: 700; font-size: clamp(26px, 5vw, 34px); letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 10px; } .utility .kicker { color: var(--teal); } .utility .lede { font-size: 16px; color: var(--ui-muted); max-width: 62ch; margin: 0 0 12px; } .caption { font-size: 12px; color: var(--ui-muted); } /* Editorial hero band on the utility homepage */ .pillar-hero { border-bottom: 1px solid var(--ui-line); padding: 48px 0 44px; } .pillar-hero .positioning { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ui-muted); margin: 6px 0 0; } /* Card grid */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 0; margin: 20px 0 0; list-style: none; } .card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--r-card); padding: 20px; display: flex; flex-direction: column; gap: 6px; } .card .mono { color: var(--ui-muted); } .card h3, .card .card-name { font-family: var(--grot); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin: 0; } .card a { text-decoration: none; color: var(--ui-ink); } .card a:hover { color: var(--teal); } .card p { margin: 0; font-size: 13.5px; color: var(--ui-muted); line-height: 1.5; } /* THE LIST: numbered editorial entries on the pillar */ .the-list { list-style: none; margin: 8px 0 0; padding: 0; } .the-list li { display: grid; grid-template-columns: 44px 1fr; gap: 8px 18px; padding: 22px 0; border-bottom: 1px solid var(--ui-line); } .the-list .num { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--teal); padding-top: 5px; } .the-list .entry-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .the-list .entry-head a { font-family: var(--grot); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--ui-ink); text-decoration: none; } .the-list .entry-head a:hover { color: var(--teal); } .the-list .region-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ui-muted); } .the-list .why { grid-column: 2; margin: 0; font-size: 14.5px; color: var(--ui-muted); line-height: 1.55; max-width: 68ch; } /* Section band on utility pages */ .band { padding: 44px 0 8px; } .band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .band h2 { font-family: var(--grot); font-weight: 700; font-size: 21px; letter-spacing: -0.015em; margin: 0; } .band .band-kicker { color: var(--teal); display: block; margin-bottom: 8px; } /* Hub POI cards: fuller rows */ .hub-list { list-style: none; margin: 24px 0 0; padding: 0; } .hub-list li { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--r-card); padding: 20px 22px; margin-bottom: 12px; } .hub-list .mono { color: var(--ui-muted); } .hub-list h3 { margin: 4px 0 6px; font-size: 18px; letter-spacing: -0.01em; } .hub-list h3 a { text-decoration: none; color: var(--ui-ink); } .hub-list h3 a:hover { color: var(--teal); } .hub-list p { margin: 0; font-size: 14.5px; color: var(--ui-muted); font-family: var(--serif); font-style: italic; } /* FAQ on utility pages */ .faq { max-width: var(--measure); } .faq h3 { font-family: var(--grot); font-weight: 700; font-size: 16px; margin: 26px 0 6px; } .faq p { font-size: 14.5px; color: var(--ui-muted); margin: 0; line-height: 1.6; } /* Quiet CTA link, teal, utility only */ .go-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--grot); font-size: 13.5px; font-weight: 500; color: var(--teal); text-decoration: none; } .go-link:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- Small screens -------------------------------------------------------------------------- */ @media (max-width: 480px) { .masthead { padding: 14px 18px; } .article, .shell, .shell-narrow, .close-line { padding-left: 18px; padding-right: 18px; } .tour-block { padding: 36px 18px 40px; } .facts { grid-template-columns: 1fr; border-left: none; } .facts > div { border-right: none; padding-left: 0; } .hero { aspect-ratio: 4 / 3; border-radius: 2px; } .the-list li { grid-template-columns: 34px 1fr; } } @media (min-width: 481px) and (max-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); } }