/* ============================================================================ BRUDA CLUB — TYPOGRAPHY & PROPORTION LAYER ============================================================================ Loaded after every other stylesheet, so this file has the last word on type, rhythm and the way a photo sits inside a card. Why it exists. The theme grew section by section and each section brought its own font sizes with it. Measured on the live site there were eleven different h2 sizes (24px to 65px), seven h3 sizes, and h3 was frequently larger than the h2 above it — on /adventure/ the section title read at 40.7px while the product titles under it read at 42.6px. Half the headings shouted in capitals, half did not. Nothing was broken, but nothing lined up either, and that is what made the pages feel unsettled. The fix is a single scale, applied everywhere: hero 72px the one headline per page that is allowed to be loud h1 54px page hero h2 40px section title h2 small 28px sub-section title (FAQ groups, form panels) h3 23px card title h4 17px list/label heading lead 19px body 17px small 15px label 12px uppercase, tracked, always the body font Every step is at least 1.2x its neighbour, so the hierarchy survives at any viewport. Sizes interpolate between 390px and 1440px. ========================================================================= */ :root{ /* ── families ────────────────────────────────────────────────────────── Fraunces carries the brand voice: a warm soft serif that reads as hand-made rather than formal. Be Vietnam Pro is the working font — geometric, even colour, and drawn for Vietnamese diacritics, which matters on a site that says "Đà Lạt" on every screen. */ --font-display:'Fraunces','Iowan Old Style',Georgia,'Times New Roman',serif; --font-body:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; /* ── type scale ───────────────────────────────────────────────────────── Sizes are in px on purpose. final-polish.css scales the root font size from 16.5px on a phone to 18.5px on a desktop, which is a legitimate trick for lifting a whole theme at once — but it means a rem written here would land 15% larger than it reads, and a fluid rem inside a fluid root scales twice. Everything in this file is therefore absolute, and the numbers in the comments are the numbers on screen. The rest of the theme keeps using rem and keeps being scaled by the root. That is intentional: this file only owns what it names. */ --fs-hero: clamp(40px, 28.1px + 3.05vw, 72px); --fs-h1: clamp(34px, 25.8px + 2.10vw, 56px); --fs-h2: clamp(28px, 23.5px + 1.14vw, 40px); --fs-h2-sm: clamp(22px, 19.8px + 0.57vw, 28px); --fs-h3: clamp(20px, 18.9px + 0.29vw, 23px); --fs-h4: 17px; --fs-lead: clamp(17px, 16.3px + 0.19vw, 19px); --fs-body: clamp(16px, 15.4px + 0.15vw, 17.5px); --fs-sm: 15px; --fs-xs: 13px; --fs-label: 12px; /* the two loudest moments, both still well under the hero */ --fs-close: clamp(32px, 26.1px + 1.52vw, 48px); --fs-feature:clamp(24px, 21.0px + 0.76vw, 32px); --fs-shout: clamp(30px, 24.1px + 1.52vw, 46px); --lh-display:1.06; --lh-head:1.16; --lh-body:1.65; /* Optical sizing for Fraunces. Large text wants the display cut (tight joints, high contrast); small text wants the text cut. */ --opsz-display:'opsz' 120; --opsz-head:'opsz' 60; --opsz-small:'opsz' 20; /* ── rhythm ───────────────────────────────────────────────────────────── Every section used to be padded a flat 100px top and bottom. Because nearly every section on this site sits on the same cream, two of them meeting produced 200px of empty paper — not air, a hole. 88px a side reads as generous without losing the thread between sections. */ --space-section: clamp(60px, 49.6px + 2.67vw, 88px); --space-section-tight:clamp(40px, 34.0px + 1.52vw, 56px); --space-head: clamp(28px, 23.5px + 1.14vw, 40px); --gap-grid: clamp(20px, 15.5px + 1.14vw, 32px); --section-pad:var(--space-section) 24px; /* Line length. Anything longer than this is measurably slower to read; the old layout let intro copy run to 1150px. */ --measure:66ch; --measure-narrow:56ch; } /* ============================================================================ 1 — BASE ========================================================================== */ body{ font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:400; letter-spacing:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:600; line-height:var(--lh-head); letter-spacing:-0.01em; font-variation-settings:var(--opsz-head); text-wrap:balance; } /* vibe.js wraps the text of every heading in so the warm gradient can sweep across it. That span is invisible to the design but not to the cascade: rules like `.showcase-header span` — written for the eyebrow label that sits next to the heading — were matching it and rendering whole section titles as 14px tracked capitals. "Two ways to explore." on /adventure/ had been a label-sized line for that reason. The wrapper must never carry type of its own. */ h1 .bc-lit, h2 .bc-lit, h3 .bc-lit, h4 .bc-lit, h5 .bc-lit, .hero__title .bc-lit, .page-hero__content h1 .bc-lit{ /* Longhands, not the `font` shorthand — the shorthand would reset font-variation-settings and take the optical size with it. */ font-size:inherit!important; font-family:inherit!important; font-weight:inherit!important; font-style:inherit!important; font-variation-settings:inherit!important; letter-spacing:inherit!important; text-transform:inherit!important; line-height:inherit!important; color:inherit; } /* Paragraphs never sit wider than the measure, and never break to a single orphan word on the last line. */ p{text-wrap:pretty;} /* ============================================================================ 2 — THE SCALE, APPLIED ---------------------------------------------------------------------------- Defaults first, exceptions after. The first version of this file listed every wrapper that contains a section title — and missed several, because the theme has a dozen names for the same thing (.section-header, .showcase-header, .path-header, .team-caption, .rental-stack__head, .copy-block …). A heading that nobody had listed fell back to the browser default of 1.5em and quietly broke the hierarchy again. So: an h2 is a section title until something says otherwise. New sections inherit the scale for free. ========================================================================== */ h1{ font-size:var(--fs-h1); line-height:1.08; font-variation-settings:var(--opsz-display); letter-spacing:-0.015em; } h2{ font-size:var(--fs-h2); line-height:var(--lh-head); font-variation-settings:var(--opsz-head); letter-spacing:-0.012em; } h3{ font-size:var(--fs-h3); line-height:1.25; font-variation-settings:var(--opsz-small); letter-spacing:-0.005em; } h4{ font-size:var(--fs-h4); line-height:1.35; font-variation-settings:var(--opsz-small); } /* ── hero: the one loud headline per page ───────────────────────────────── */ .hero__title{ font-size:var(--fs-hero); line-height:var(--lh-display); font-variation-settings:var(--opsz-display); letter-spacing:-0.018em; font-weight:600; margin-bottom:20px; } .page-hero__content h1{ /* !important because final-polish.css already sets this one with !important; without it the page heroes stay 15% larger than the scale. */ font-size:var(--fs-h1)!important; line-height:1.08; font-variation-settings:var(--opsz-display); letter-spacing:-0.015em; font-weight:600; } /* The element defaults above only win where the theme is silent. Every wrapper that carries its own `font-size` for a section title has to be named, or its old value comes back — that is how "Club Life" ended up at 50px while "Two ways to explore." sat at 40px. Anything added to the theme later still lands on the default without being listed here. */ .section-header h2, .showcase-header h2, .path-header h2, .touring-header h2, .team-caption h2, .intro-section h2, .reset-section h2, .reset-content h2, .base-section h2, .app-section h2, .support-section h2, .manifesto-section .container > h2, .rental-stack__head h2, .rental-stack__head h3, .copy-block h2, .reviews-section h2, .statement-title{ font-size:var(--fs-h2); line-height:var(--lh-head); font-variation-settings:var(--opsz-head); letter-spacing:-0.012em; font-weight:600; } /* The closing shout and the final CTA are the page's last word — one step up from a normal section title, still well below the hero. */ .final-cta h2, .closing-line h2, .manifesto-close h2{ font-size:var(--fs-close); line-height:1.14; } /* A statement headline: a section that is one centred paragraph block with a headline on top, rather than a header followed by a grid. Same size as a section title so the page keeps one voice. */ .statement-title{ font-size:var(--fs-h2); line-height:var(--lh-head); font-variation-settings:var(--opsz-head); letter-spacing:-0.012em; font-weight:600; text-transform:none; } .lead-copy{font-size:var(--fs-lead);line-height:var(--lh-body);} .lead-strong{font-size:var(--fs-lead);line-height:var(--lh-body);font-weight:600;} /* ── sub-section titles: a heading inside a panel or a group, not over one ─ */ .faq-category__title, .contact-page-title, .bw-headline{ font-size:var(--fs-h2-sm)!important; line-height:1.22; font-variation-settings:var(--opsz-head); letter-spacing:-0.008em; font-weight:600; } /* ── card titles: always smaller than the section title above them ──────── */ .focus-card h3, .path-card__body h3, .product-card__body h3, .touring-card h3, .team-card h3, .point-item h3, .support-intro h3, .entry-card__title, .review-card__name, .contact-form-title, .svc-item__name{ font-size:var(--fs-h3); line-height:1.25; font-variation-settings:var(--opsz-small); letter-spacing:-0.005em; font-weight:600; } /* Featured cards get one step more, not three. */ .path-featured__body h3, .exp-copy h3{ font-size:var(--fs-feature); line-height:1.18; font-variation-settings:var(--opsz-head); font-weight:600; } /* ── body copy ──────────────────────────────────────────────────────────── */ .section-header p, .showcase-header p, .path-header p, .intro-section p, .copy-block p, .exp-copy p, .reset-content p, .page-hero__content p{ font-size:var(--fs-lead); line-height:var(--lh-body); max-width:var(--measure); margin-left:auto; margin-right:auto; } .focus-card p, .path-card__body p, .product-card__body p, .touring-card p{ font-size:var(--fs-sm); line-height:1.6; } /* ── labels and eyebrows: body font, never the serif ────────────────────── */ .hero__eyebrow, .page-hero__eyebrow, .focus-card__tag, .product-card__label, .path-featured__tag, /* Direct child only. vibe.js wraps every heading in , so a descendant selector here turns the section title itself into a 12px tracked label — which is exactly what it did on the first pass. */ .section-header > span, .showcase-header > span, .path-header > span, .touring-header > span, .team-caption > span, .rental-banner__tag, .rental-eyebrow, .base-eyebrow, .reset-eyebrow, .intro-eyebrow, .about__label, .closing-line__lead, .section-label, .footer-nav h4, .app-feature h4, /* The price-list category bars on the Bike Hub page. A row label in a dark bar, not a heading — it belongs with the labels. */ .svc-cat__title, .bw-summary-block__head h4{ font-family:var(--font-body)!important; font-size:var(--fs-label)!important; font-weight:600!important; letter-spacing:0.22em!important; text-transform:uppercase!important; line-height:1.4; } /* The hero eyebrow keeps its pill, just calmer inside it. */ .hero__eyebrow{padding:7px 18px;letter-spacing:0.2em!important;} /* ============================================================================ 3 — CAPITALS ---------------------------------------------------------------------------- Only the manifesto shouts. Everything else reads in sentence case, which is what makes the Pars pages legible: capitals cost roughly 15% reading speed and remove the word shapes the eye scans for. ========================================================================== */ .section-header h2, .showcase-header h2, .path-header h2, .touring-header h2, .intro-section h2, .reset-section h2, .base-section h2, .app-section h2, .rental-stack__head h2, .rental-stack__head h3, .copy-block h2, .reviews-section h2, .final-cta h2, .closing-line h2, .manifesto-close h2, .hero__title, .page-hero__content h1, .path-card__body h3, .product-card__body h3, .path-featured__body h3, .exp-copy h3, .faq-category__title, .point-item h3, .support-intro h3, .statement-title, .team-caption h2, .reset-content h2, .support-section h2, .manifesto-section .container > h2, .team-card h3{ text-transform:none!important; } /* FAQ questions are a control, not a heading — body font, clear hit target. */ .faq-question{ font-family:var(--font-body); font-size:var(--fs-body); font-weight:500; line-height:1.45; padding:18px 0; } .faq-answer{font-size:var(--fs-sm);line-height:1.7;} .faq-nav a{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:0.04em;} .faq-category{margin-top:var(--space-section-tight);} /* The three-word manifesto is the one place capitals earn their keep. */ .manifesto-part h3{ text-transform:uppercase!important; font-size:var(--fs-shout); line-height:1.05; letter-spacing:0.005em; font-variation-settings:var(--opsz-display); font-weight:600; } .manifesto-part .manifesto-sub{ font-family:var(--font-body); font-size:var(--fs-label); font-weight:600; letter-spacing:0.22em; text-transform:uppercase; } /* ============================================================================ 4 — SECTION HEADER: one pattern, used everywhere ---------------------------------------------------------------------------- Label, title, hairline. The hairline is the existing charge-up underline from vibe.css; all this does is give every header the same spacing so the rule lands in the same place on every section of every page. ========================================================================== */ .section-header, .showcase-header, .path-header, .touring-header, .team-caption{ text-align:center; margin-bottom:var(--space-head); padding-bottom:6px; } .section-header h2, .showcase-header h2, .path-header h2, .touring-header h2, .team-caption h2{ margin:0 auto 14px; max-width:20ch; } .section-header > span, .showcase-header > span, .path-header > span, .touring-header > span, .team-caption > span{ display:block; margin-bottom:12px; color:var(--orange-dark); } .section-header p, .showcase-header p, .path-header p, .team-caption p{ margin-top:6px; color:var(--ink-2); } /* The underline sits 14px under the title in every header, not under whatever happened to follow it. */ .section-header h2::after, .showcase-header h2::after, .path-header h2::after, .touring-header h2::after{bottom:-12px;} /* ============================================================================ 5 — SECTION RHYTHM ---------------------------------------------------------------------------- Sections were padded 100px top and bottom regardless of viewport, so on a phone a third of every screen was empty and on a wide monitor sections ran into each other. Now it scales. ========================================================================== */ .section, .focus-section, .showcase-section, .rental-section, .base-section, .reset-section, .intro-section, .path-section, .reviews-section, .app-section{ padding-top:var(--space-section); padding-bottom:var(--space-section); } .manifesto-section{ padding-top:var(--space-section); padding-bottom:var(--space-section); } .reviews-more{padding-top:0;} .manifesto-close{margin-top:var(--space-section-tight);} /* Two sections of the same colour running together read as one long section. A little less air between them keeps the page from stretching. */ .section + .section{padding-top:var(--space-section-tight);} /* ============================================================================ 5b — ONE CONTENT WIDTH ---------------------------------------------------------------------------- Measured on a 1440px screen, the theme was running nine different content widths down a single page: 1152 container, card grids, service tables, adventure blocks 1000 the gallery slider on The Reset 960 the map 900 the bike rental block, the touring film 860 the pricing cards 700 the timeline 640 the bike carousel itself 410 a slide in "Our Visitors" 321 a review card Each of those numbers was defensible on its own — the bike carousel even carries a comment explaining that a bike "does not need the full width of the page". Together they read as a page that cannot decide where its edges are, and they are the reason the rental and visitor blocks looked like afterthoughts next to the card grids. There is now one shell. Everything that is a section-level block fills it. Media frames inside it differ in aspect ratio, not in width, which keeps every block's height in the same 520–800px band. ========================================================================== */ :root{ /* .container is border-box with 24px of padding, so this cap yields 1280px of content. Below 1328px the container is fluid exactly as before — this only lifts the ceiling, it never narrows anything. */ --max-w:1328px; } /* Blocks that used to cap themselves below the container. */ .rental-stack, .rental-stack__media, .bike-carousel, .touring-video-wrap, .touring-video-wrap .touring-video, .visit-map, .visit-map--wide, .offer-grid, .timeline, .bc-slider--gallery, .reset-gallery, .sky-section .bc-slider--sky, .reset-service-note, .support-links{ max-width:100%; width:100%; margin-left:auto; margin-right:auto; } /* A block can be full width and still keep its text readable. */ .reset-service-note p{max-width:var(--measure);} /* The booking wizard is the one deliberate exception. A form field wider than about 700px is harder to use, not easier — the eye loses the start of the row on the way back from the end of it. It moves closer to the shell without going all the way. */ .bw-inline, .bw-panel, .bw-wizard-section .bw-shell{max-width:1080px!important;} /* The rental fleet. Every one of the six photos is shot on white (measured: 254–255 in all corners), so `contain` on a white card crops nothing and shows no letterbox — the frame can be any shape and the bike is always whole. `cover` was trimming the 3:2 shots top and bottom. */ .bike-card img{ aspect-ratio:16/9; object-fit:contain; background:var(--card-bg); width:100%; height:auto; } .bike-carousel{background:var(--card-bg);} @media(max-width:640px){ .bike-card img{aspect-ratio:4/3;} } /* The map deserves the same frame as everything else, and enough height to actually read the streets around the Hub. */ .visit-map--wide iframe{min-height:min(56vh,540px);} @media(max-width:768px){ .visit-map--wide iframe{min-height:320px;} } /* ============================================================================ 6 — PHOTO IN A CARD ---------------------------------------------------------------------------- The part borrowed from the PARS service cards. Three things make that treatment read as clean: 1. the photo runs to the card edge, it is not a picture pasted on a card; 2. the frame matches the shape the photos were actually shot in, so nothing important is cropped away; 3. the bottom of the photo dissolves into the card surface instead of ending on a hard line, which is what removes the "sticker" look. All three are cheap, and (2) is the one that was most wrong here: the photos are 3:2, every frame on the site was 4:3. ========================================================================== */ .focus-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); } .focus-card__media{ aspect-ratio:3/2; position:relative; overflow:hidden; background:var(--paper); } .focus-card__media img{ width:100%;height:100%; object-fit:cover; display:block; transform:scale(1.005); transition:transform .9s cubic-bezier(.2,.7,.2,1); } .focus-card:hover .focus-card__media img{transform:scale(1.05);} /* The dissolve. Top edge is a whisper of shade so the photo reads as sunk into the card, the bottom 28% fades to the card colour itself. */ .focus-card__media::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(23,48,31,0.05) 0%, rgba(23,48,31,0) 18%, rgba(255,255,255,0) 68%, var(--card-bg) 100%); } .focus-card__body{ padding:22px 26px 28px; gap:12px; /* pull the copy up into the tail of the fade, the way PARS does */ margin-top:-14px; position:relative; z-index:1; } /* Same treatment for the other image-topped cards on the site, so the homepage and the sub-pages agree with each other. */ .path-card, .product-card, .touring-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; } .path-card__img, .product-card__img, .entry-card__img{ aspect-ratio:3/2; object-fit:cover; width:100%; display:block; } /* Cards whose photo is a bare followed by the body, with no media wrapper to hang a gradient on. The fade goes on the body instead and reaches back over the bottom of the photo — same result, no markup change. Team portraits keep their 3:4 frame; people are shot upright. */ .team-card, .path-card, .product-card{position:relative;overflow:hidden;} .team-card__body, .path-card__body, .product-card__body{position:relative;} .team-card__body::before, .path-card__body::before, .product-card__body::before{ content:''; position:absolute; left:0;right:0;top:-60px; height:60px; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0),var(--card-bg)); } .team-card__img{ transition:transform .9s cubic-bezier(.2,.7,.2,1); } .team-card:hover .team-card__img{transform:scale(1.04);} /* ============================================================================ 7 — THE ADVENTURE TILES (/adventure/) ---------------------------------------------------------------------------- These were two loose columns: a copy stack floating next to a grid of four photos with different crops. Turned into one card each, with the photos bleeding to the card edge — the PARS "Kernleistung" layout. ========================================================================== */ .exp-block{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; align-items:stretch!important; gap:0!important; grid-template-columns:1fr 1.1fr!important; margin-top:var(--space-section-tight); transition:box-shadow .3s cubic-bezier(.2,.7,.2,1); } .exp-block:hover{box-shadow:var(--shadow-md);} .exp-copy{ padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; position:relative; z-index:2; } .exp-copy p{max-width:44ch;} /* Photos fill their half of the card edge to edge. The lead runs across the top of the column, the three supporting shots sit under it in an even row, separated only by the card surface showing through. */ .exp-media{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; grid-auto-rows:auto; /* The 3px grid gaps drew three hairlines across the photo block. The photos now touch, so the media column reads as one field. */ gap:0!important; background:var(--card-bg); align-content:stretch; position:relative; } .exp-media img{ border-radius:0!important; aspect-ratio:1/1; width:100%;height:100%; object-fit:cover; display:block; transform:none!important; transition:filter .4s ease; } .exp-media__lead{ grid-column:1/-1; aspect-ratio:3/2!important; } @media (hover:hover){ .exp-media img:hover{filter:brightness(1.06);} } /* The seam between photo and copy. ---------------------------------------------------------------------------- This was a white gradient laid over the edge of the photo, and it was the wrong tool. The card is white, so "fading the photo into the card" can only mean washing the photo out — and over a dark forest shot that reads as fog, with a visible boundary where the fog stops. Rendering the same tile with a 220px ramp, a 44px ramp and no ramp at all made it obvious: the wide ramp erased the rider standing on the left of the photo, and every ramp still left an edge, just a blurrier one. The photo now runs to the column edge at full strength, and the edge is given depth with an inset shadow instead of being blended away. That is what the PARS featured card does, and it is why that card reads as clean: a confident edge is not the same thing as a hard one. */ .exp-media::after{content:none;} .exp-media{ box-shadow:inset 26px 0 30px -26px rgba(23,48,31,0.30); } .exp-block--flip .exp-media{ box-shadow:inset -26px 0 30px -26px rgba(23,48,31,0.30); } /* Stacked, the copy is always on top and the photos always below — the flip only reverses the columns, and that rule is switched off down here. So both variants need the fade on the top edge of the media, not one each way as they do side by side. */ @media(max-width:900px){ .exp-block{grid-template-columns:1fr!important;} /* Stacked, the copy sits above the photos. Same reasoning as the vertical seam: an edge with depth, not a wash. */ .exp-media, .exp-block--flip .exp-media{ box-shadow:inset 0 22px 26px -24px rgba(23,48,31,0.30); } } /* ============================================================================ 8 — "OUR VISITORS" ---------------------------------------------------------------------------- The complaint that started this. Ten of the twelve photos in images/happy-customers are 1600x1067, that is 3:2. The frame was 4:3 with object-fit:cover, so every one of them lost 11% off the top and bottom — which on group photos is heads and feet. The two portraits lost far more. Frame is now 3:2, matching the source. The rail also got wider slides: at 360px on a 1440px screen the row read as a strip of thumbnails with two half-cropped photos hanging off the edges. ========================================================================== */ .pc-photo{ aspect-ratio:3/2; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm); background:var(--paper); } .pc-photo img{width:100%;height:100%;object-fit:cover;display:block;} /* A slide was 410px wide on a 1440px screen — a 390×260 photo of people, which is a thumbnail, not a portrait. The rail sits outside .container in the template, so it can run wider than the content shell and let the neighbouring photos peek in at the edges. `!important` is not decoration here: style.css sets `.cf-slide` inside a `min-width:900px` media query, and the first version of this rule lost to it and shipped at the old size. */ .pc-outer{ padding:36px 0 60px; max-width:100%; margin-inline:auto; } .pc-outer .cf-slide, .pc-outer .pc-slide{ flex:0 0 min(64vw,920px)!important; padding:0 14px!important; } .cf-slide.is-active .pc-photo{ box-shadow:0 28px 60px -22px rgba(23,48,31,0.42); border-color:var(--orange); } /* The neighbours were dimmed to 45% opacity at 82% scale, which turned the row into one photo flanked by grey. They now read as part of the set. */ .pc-outer .cf-slide{transform:scale(0.88) translateY(6px);opacity:0.62;filter:brightness(0.9);} .pc-outer .cf-slide.is-adjacent{transform:scale(0.93) translateY(3px);opacity:0.82;filter:brightness(0.96);} .pc-outer .cf-slide.is-active{transform:scale(1) translateY(0);opacity:1;filter:none;} @media(max-width:900px){ .pc-outer .cf-slide, .pc-outer .pc-slide{flex:0 0 min(84vw,640px)!important;padding:0 10px!important;} } @media(max-width:600px){ .pc-outer .cf-slide, .pc-outer .pc-slide{flex:0 0 88vw!important;padding:0 7px!important;} } /* The review coverflow had the same problem at 321px per card. */ .cf-outer .cf-slide{flex:0 0 min(46vw,560px);} @media(max-width:600px){ /* 86vw left the card wider than the gap the arrows sit in, so on a phone the arrows landed in the middle of the quote. 76vw gives them a lane of their own. A photo can carry an arrow on top of it; a paragraph cannot. */ .cf-outer .cf-slide{flex:0 0 76vw;} .cf-outer .cf-arrow--prev{left:4px;} .cf-outer .cf-arrow--next{right:4px;} } /* The arrows were parked at `50% - 250px`, which was outside a 410px slide and is now well inside a 920px one — they had ended up sitting on the photo, over somebody's face. They move out to the edge of the active slide, and fall back to the viewport edge when there is no room. */ .pc-outer .cf-arrow--prev{left:max(10px,calc(50% - 498px));} .pc-outer .cf-arrow--next{right:max(10px,calc(50% - 498px));} .cf-outer .cf-arrow--prev{left:max(10px,calc(50% - 318px));} .cf-outer .cf-arrow--next{right:max(10px,calc(50% - 318px));} @media(max-width:900px){ .pc-outer .cf-arrow--prev{left:10px;} .pc-outer .cf-arrow--next{right:10px;} } /* ============================================================================ 9 — GALLERIES ---------------------------------------------------------------------------- The shared gallery frame was 4:3 with the photo contained over a blurred copy of itself. Most of the library is 3:2, so a 3:2 frame leaves far less blurred filler while still handling the occasional portrait shot. ========================================================================== */ .bc-slider--gallery{aspect-ratio:3/2;} @media(max-width:640px){ .bc-slider--gallery{aspect-ratio:4/3;} } /* ============================================================================ 10 — REVIEWS ---------------------------------------------------------------------------- Review text was set in the display serif, italic, at 16px and clamped to five lines. Long italic serif at body size is the slowest combination to read on a screen. It moves to the body font; the serif stays on the name, where it is decoration rather than reading matter. ========================================================================== */ .cf-text{ font-family:var(--font-body); font-style:normal; font-size:var(--fs-sm); line-height:1.62; } .cf-slide.is-active .cf-text{-webkit-line-clamp:9;} .cf-meta strong{font-size:var(--fs-sm);} .cf-meta span{font-size:var(--fs-xs);} .cf-duration{font-family:var(--font-body);font-size:var(--fs-xs);font-style:normal;letter-spacing:0.02em;} /* ============================================================================ 10b — CAROUSEL ARROWS ON A PHONE ---------------------------------------------------------------------------- Not typography, but found while checking this work at 390px and worth fixing here rather than leaving: below 600px the arrows were white circles with white chevrons on them. final-polish.css sets the circle to rgba(18,41,30,0.72) with a #fff icon, then a later media query repaints the background to var(--card-bg) — white — and leaves the icon white. On every carousel on the site the controls were invisible on a phone. The dark circle is the intended design and already works over both photos and cream, so it simply keeps it at every width. ========================================================================== */ @media(max-width:600px){ .cf-arrow{ background:rgba(18,41,30,0.72); border:1px solid rgba(255,255,255,0.28); color:#fff; box-shadow:0 2px 10px rgba(23,48,31,0.22); } .cf-arrow:hover, .cf-arrow:active{background:var(--orange);color:#fff;} } /* ============================================================================ 11 — BUTTONS & SMALL PRINT ========================================================================== */ .btn{ font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:0.06em; padding:14px 30px; } .hero__link{font-family:var(--font-body);font-size:var(--fs-sm);letter-spacing:0.08em;} .site-nav a{font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0.08em;} .site-footer, .site-footer p, .site-footer a{font-size:var(--fs-sm);} .footer-nav h4{margin-bottom:14px;} .rental-note, .fact-chip{font-size:var(--fs-sm);} /* ============================================================================ 12 — BOOKING WIZARD ---------------------------------------------------------------------------- The wizard was the only place still pulling a third and fourth family (Playfair + JetBrains Mono) and it labelled things at 8 to 9.5px. Same two families as the rest of the site now, and nothing under 10.5px. ========================================================================== */ :root{ --bw-font-display:var(--font-display); --bw-font-body:var(--font-body); --bw-font-mono:var(--font-body); } .bw-stamp__top, .bw-stamp__date, .bw-opt__badge{font-size:10.5px!important;letter-spacing:0.16em!important;} .bw-mini-label{font-size:10.5px!important;} .bw-eyebrow, .bw-eyebrow-step, .bw-ticket__lbl, .bw-step-label{font-size:11px!important;} .bw-ticket__val{font-size:14px!important;} /* ============================================================================ 13 — MEASURE ---------------------------------------------------------------------------- Copy blocks that used to run the full 1150px container. ========================================================================== */ .copy-block, .copy-block--centered{ max-width:var(--measure); margin-left:auto; margin-right:auto; } .copy-block--centered{text-align:center;} .final-cta p, .closing-line p, .manifesto-part p{max-width:var(--measure-narrow);margin-left:auto;margin-right:auto;} /* ============================================================================ 14 — MOBILE ---------------------------------------------------------------------------- The scale already shrinks on its own; these are the few places where the layout, not the type, needed to give. ========================================================================== */ @media(max-width:760px){ .section-header h2, .showcase-header h2, .path-header h2, .team-caption h2{max-width:16ch;} .focus-card__body{padding:20px 20px 24px;} .exp-copy{padding:26px 22px 30px;} .hero__title{letter-spacing:-0.012em;} /* The map footer put the address and the "Open in Google Maps" link in one row at every width. In a 390px column that squeezed the address into eight lines beside the link. Below 640px they stack. */ .visit-map__address{ flex-direction:column; align-items:flex-start; gap:10px; } .visit-map__go{align-self:flex-start;} } @media(max-width:400px){ :root{--fs-sm:14px;--fs-xs:12.5px;} .pc-outer{padding-bottom:44px;} } /* ============================================================================ 15 — MOTION ========================================================================== */ @media(prefers-reduced-motion:reduce){ .focus-card__media img, .exp-media img{transition:none!important;transform:none!important;} } /* ============================================================================ 17 — THE RESET, the statement stack Replaces a paragraph that said "private" four ways in one breath. One claim per line, each allowed to land before the next one starts. ========================================================================== */ .reset-statements{margin-bottom:22px;} .reset-statements p{ font-size:var(--fs-lead); line-height:1.5; color:var(--ink-2); margin:0 0 10px; } /* Said with a shrug, so it should not shout alongside the rest. */ .reset-statements__aside{ color:var(--ink-muted)!important; font-style:italic; margin-top:14px; } /* ============================================================================ 18 — MANIFESTO: let the photo be a photo ---------------------------------------------------------------------------- It used to be a 900x1600 portrait phone shot stretched across a wide, short section with object-fit:cover and object-position:center 40%. That showed roughly a fifth of the frame, and the fifth it picked was empty pink sky: no horizon, no leaves, no valley. Combined with opacity 0.30 over a green gradient, there was nothing left to recognise. Now: a landscape source, a real opacity, and a scrim that buys the type its contrast instead of the photo paying for it with a green wash. ========================================================================== */ /* .manifesto-bg is a now, and object-fit does nothing on one, so the fitting moves to the image inside it. */ .manifesto-bg{ position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0.92; z-index:0; pointer-events:none; } .manifesto-bg img{ width:100%; height:100%; object-fit:cover; /* Slightly below centre: drops some corrugated roof at the top and keeps the valley, the pull-up bars and the banana trees. */ object-position:center 56%; display:block; } /* The scrim. Sits above the photo and below the type, darkest where the headings actually land. Jungle green rather than black, so the section still belongs to the palette. */ .manifesto-section--photo::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(18,41,30,0.68) 0%, rgba(18,41,30,0.40) 44%, rgba(18,41,30,0.76) 100%); } @media(max-width:800px){ /* The portrait source takes over here; centre is the right crop for it. */ .manifesto-bg img{object-position:center 46%;} /* A phone column is taller, so the type sits over more of the frame and needs a touch more cover. */ .manifesto-section--photo::after{ background:linear-gradient(180deg, rgba(18,41,30,0.72) 0%, rgba(18,41,30,0.50) 44%, rgba(18,41,30,0.80) 100%); } } /* ============================================================================ 20 — THE CAT AS A MARK Twice on the homepage: opening the hero, and closing the manifesto above "Go explore it.". Both are decorative repeats of the logo already in the header, so both are aria-hidden with an empty alt — a screen reader that announced "Bruda Club" three times on one screen would be worse, not more accessible. ========================================================================== */ .hero__mark{ display:block; height:clamp(64px,9vw,104px); width:auto; /* auto on both sides: the rest of the hero centres itself the same way (.hero__subtitle uses auto margins, .hero__cta uses justify-content), so a block image needs it too or it sits left of everything else. */ margin:0 auto 18px; /* The hero sits on a photo; a soft drop shadow keeps the outline readable over the bright parts of it. */ filter:drop-shadow(0 6px 18px rgba(0,0,0,0.45)); /* enhancements.css starts the eyebrow, title and subtitle at opacity 0 and enhancements.js adds .hero--revealed to the section shortly after load. Without joining that, the cat would appear on its own before the words it belongs to. Same easing, so they arrive together. */ opacity:0; transform:translateY(32px); transition:opacity 1s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1); } .hero--revealed .hero__mark{ opacity:1; transform:none; } /* The eyebrow moved below the subtitle, so it signs the block off rather than introducing it. It needs air above, not below. */ .hero__content .hero__eyebrow{ margin-top:22px; margin-bottom:0; } .manifesto-mark{ display:block; height:clamp(72px,10vw,120px); width:auto; margin:0 auto 20px; filter:drop-shadow(0 6px 20px rgba(0,0,0,0.4)); } @media(max-width:600px){ .hero__mark{margin-bottom:14px;} .hero__content .hero__eyebrow{margin-top:18px;} .manifesto-mark{margin-bottom:16px;} } @media(prefers-reduced-motion:reduce){ .hero__mark,.manifesto-mark{filter:none;} } /* ── The cat is already in the header. On a phone the two sit within a thumb's width of each other and read as a printing mistake, so the hero copy keeps it only where there is room. ── */ @media(max-width:768px){ .hero__mark{display:none;} } /* ── "Go explore it." is the call to action now, not a heading with a button under it. Kept at heading size: it is the last line of the manifesto and shrinking it into a pill would throw the section away. ── */ .manifesto-close__cta a{ color:inherit; text-decoration:none; display:inline-block; padding-bottom:6px; border-bottom:2px solid rgba(235,180,76,0.55); transition:border-color .22s ease,transform .22s ease; } .manifesto-close__cta a:hover, .manifesto-close__cta a:focus-visible{ border-bottom-color:var(--gold); transform:translateY(-2px); } .manifesto-close__cta a:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; } @media(prefers-reduced-motion:reduce){ .manifesto-close__cta a{transition:none;} .manifesto-close__cta a:hover{transform:none;} } /* ============================================================================ 21 — CAROUSEL DOTS ON TOUCH DEVICES ---------------------------------------------------------------------------- vibe.css gives every dot padding:18px on (hover:none) so a finger has something to hit. With box-sizing:content-box that makes each dot 44x44, and .bc-slider__dots is a nowrap flex row: ten gallery photos produced a 440px band of hit areas laid across the bottom of the picture, wider than the phone it was on. The target still has to be comfortable, so the padding shrinks rather than disappears (28px, with swipe as the primary gesture anyway) and the row is allowed to wrap instead of running off the frame. ========================================================================== */ .bc-slider__dots{ flex-wrap:wrap; row-gap:6px; max-width:calc(100% - 32px); margin:0 auto; padding:0 8px; } @media(hover:none) and (max-width:820px){ /* !important because the vibe.css rule it corrects carries one too. */ .bc-slider__dot, .cf-dot, .bike-dots button, .reset-gallery__dots button{ padding:10px!important; } } /* Below this a ten-photo row still crowds the frame, so the dots step back and the arrows plus swiping carry the navigation. */ @media(max-width:420px){ .bc-slider--gallery .bc-slider__dots{ bottom:8px; opacity:0.75; } .bc-slider--gallery .bc-slider__dot{ padding:8px!important; } } /* ── Adventure: the price ladder ─────────────────────────────────────────── */ .price-ladder{ list-style:none; margin:14px 0 22px; padding:0; max-width:280px; } .price-ladder li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid rgba(23,48,31,0.10); font-size:var(--fs-sm); color:var(--ink-2); } .price-ladder li:last-child{border-bottom:0;} .price-ladder strong{color:var(--ink);font-weight:600;white-space:nowrap;} /* ── The Reset: the flexible-times line ──────────────────────────────────── */ .reset-flex{ text-align:center; font-size:var(--fs-sm); color:var(--ink-muted); margin:18px 0 0; } /* ── Final CTA: the sign-off is the button ───────────────────────────────── */ .final-cta__close--cta a{ color:inherit; text-decoration:none; display:inline-block; padding-bottom:6px; border-bottom:2px solid rgba(235,180,76,0.55); transition:border-color .22s ease,transform .22s ease; } .final-cta__close--cta a:hover, .final-cta__close--cta a:focus-visible{ border-bottom-color:var(--gold); transform:translateY(-2px); } .final-cta__close--cta a:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; } @media(prefers-reduced-motion:reduce){ .final-cta__close--cta a{transition:none;} .final-cta__close--cta a:hover{transform:none;} } /* ============================================================================ 22 — THE FUNNEL BLOCKS ---------------------------------------------------------------------------- The homepage used to be a menu: three product cards of equal size, then a rental price list, then the brand. It is now a sequence where each block either says who we are or opens one specific door, and the two products that need selling get a screen each. ========================================================================== */ /* ── Hero: the one quiet way forward ───────────────────────────────────── The house rule is no buttons in a hero, and .hero__cta is display:none to enforce it. That left the first screen with no action at all. A text link keeps the rule and removes the dead end. */ /* The row exists to break the line: see the comment in front-page.php. */ .hero__see-row{ display:block; width:100%; margin-top:26px; } .hero__see{ display:inline-block; font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#F2EDDF; text-decoration:none; padding-bottom:5px; border-bottom:1.5px solid var(--gold); transition:color .22s ease,border-color .22s ease,transform .22s ease; } .hero__see::after{content:" \2192";} .hero__see:hover, .hero__see:focus-visible{color:var(--gold);transform:translateY(-1px);} .hero__see:focus-visible{outline:2px solid var(--gold);outline-offset:5px;} /* Joins the staggered hero reveal instead of appearing before the words. */ .hero__content .hero__see-row{opacity:0;transform:translateY(32px); transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);} .hero--revealed .hero__see-row{opacity:1;transform:none;transition-delay:1.05s;} /* ── Product blocks ─────────────────────────────────────────────────────── */ .offer{ padding-top:var(--space-section); padding-bottom:var(--space-section); } .offer__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; } /* The second product mirrors the first so the page alternates instead of marching down one side. */ .offer__grid--flip .offer__media{order:2;} .offer__media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); line-height:0; } .offer__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; } .offer__tag{ display:inline-block; font-size:var(--fs-label); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:14px; } .offer__body h2{margin-bottom:16px;} .offer__body > p{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--ink-2); margin:0 0 20px; max-width:46ch; } .offer__points{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; } .offer__points li{ position:relative; padding-left:24px; font-size:var(--fs-sm); color:var(--ink-2); } .offer__points li::before{ content:""; position:absolute; left:2px;top:.62em; width:9px;height:9px; border-radius:50%; background:var(--orange); } .offer__price{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin:0 0 24px; font-size:var(--fs-sm); color:var(--ink-muted); } .offer__price strong{ font-family:var(--font-display); font-size:var(--fs-h2-sm); font-weight:600; color:var(--ink); } /* ── Why ────────────────────────────────────────────────────────────────── */ .why-section{ padding-top:var(--space-section); padding-bottom:var(--space-section); } .why-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,56px); align-items:center; } .why-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); line-height:0; } .why-media img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 60%; display:block; } .why-body h2{margin:10px 0 18px;max-width:18ch;} .why-body p{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--ink-2); margin:0 0 14px; max-width:52ch; } .why-body .focus-link{margin-top:8px;display:inline-block;} /* ── Bike Hub strip ─────────────────────────────────────────────────────── */ .hub-strip{ padding-top:var(--space-section-tight); padding-bottom:var(--space-section-tight); } .hub-strip__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:26px 30px; border:1px solid var(--border,rgba(23,48,31,.14)); border-radius:var(--radius-lg); background:var(--card-bg,#fff); } .hub-strip__inner h3{margin:0 0 6px;color:var(--ink);} .hub-strip__inner p{margin:0;font-size:var(--fs-sm);color:var(--ink-2);max-width:52ch;} /* ============================================================================ 23 — ADVENTURE: THE DAY ---------------------------------------------------------------------------- Deliberately not the .timeline component used on The Reset. That one lists four moods of a free day; this one lists seven steps of a trip somebody is about to pay for, and the side-quest step is not a step at all but the reason the plan has room in it. ========================================================================== */ .daylist{ list-style:none; margin:0 auto; padding:0; max-width:760px; counter-reset:none; } .daylist__item{ display:grid; grid-template-columns:132px 1fr; gap:10px 28px; padding:26px 0; border-top:1px solid var(--border-sub,rgba(23,48,31,.10)); } .daylist__item:first-child{border-top:0;padding-top:0;} .daylist__time{ font-family:var(--font-body); font-size:var(--fs-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); padding-top:5px; font-variant-numeric:tabular-nums; } .daylist__body h3{margin:0 0 7px;color:var(--ink);} .daylist__body p{ margin:0; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); max-width:56ch; } /* The side quest. Not a time of day, so it is marked as a different kind of thing rather than dressed up as another stop on the route. */ .daylist__item--quest{ background:linear-gradient(100deg, rgba(217,130,43,.09) 0%, rgba(235,180,76,.05) 60%, transparent 100%); border-left:3px solid var(--orange); border-top:0; padding-left:22px; padding-right:18px; border-radius:0 var(--radius-md) var(--radius-md) 0; margin:8px 0; } .daylist__item--quest .daylist__time{color:var(--orange);} .daylist__item--quest h3{color:var(--ink);} .daylist__aside{ margin-top:10px!important; font-style:italic; color:var(--ink-muted)!important; font-size:var(--fs-sm)!important; } /* ── Price and inclusions, side by side ─────────────────────────────────── */ .adv-offer{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); max-width:860px; margin:var(--space-section-tight) auto 0; align-items:start; } .adv-offer h3{ font-size:var(--fs-h4); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 14px; } .adv-offer .price-ladder{max-width:none;margin:0;} .adv-offer__note{ margin:16px 0 0; font-size:var(--fs-sm); color:var(--ink-muted); } .incl-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .incl-list li{ position:relative; padding-left:26px; font-size:var(--fs-sm); color:var(--ink-2); } .incl-list li::before{ content:""; position:absolute; left:3px;top:.42em; width:11px;height:6px; border-left:2px solid var(--orange); border-bottom:2px solid var(--orange); transform:rotate(-45deg); } .incl-not__title{margin-top:26px!important;} .incl-not{ font-size:var(--fs-sm); color:var(--ink-muted); margin:0; max-width:42ch; } .adv-cta{text-align:center;margin-top:var(--space-section-tight);} /* ── Who it's for ───────────────────────────────────────────────────────── */ .who-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); max-width:860px; margin:0 auto; } .who-col{ padding:26px 26px 28px; border-radius:var(--radius-lg); border:1px solid var(--border-sub,rgba(23,48,31,.12)); background:var(--card-bg,#fff); } .who-col h3{ font-size:var(--fs-h4); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px; } .who-col--yes h3{color:#2D6A4F;} .who-col--no h3{color:var(--ink-muted);} .who-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;} .who-col li{ font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2); padding-left:22px; position:relative; } .who-col--yes li::before{ content:"";position:absolute;left:2px;top:.44em; width:10px;height:6px; border-left:2px solid #2D6A4F;border-bottom:2px solid #2D6A4F; transform:rotate(-45deg); } .who-col--no li::before{ content:"";position:absolute;left:3px;top:.72em; width:10px;height:2px;background:var(--ink-muted); } /* ── Special Expedition, demoted ────────────────────────────────────────── */ .expedition-strip{ padding-top:var(--space-section-tight); padding-bottom:var(--space-section); } .expedition-strip__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:26px 30px; border:1px dashed var(--border,rgba(23,48,31,.22)); border-radius:var(--radius-lg); } .expedition-strip__inner h3{margin:0 0 6px;color:var(--ink);} .expedition-strip__inner p{margin:0;font-size:var(--fs-sm);color:var(--ink-2);max-width:52ch;} .reset-honest{ max-width:620px; margin:var(--space-section-tight) auto 0; text-align:center; padding-top:var(--space-section-tight); border-top:1px solid var(--border-sub,rgba(23,48,31,.12)); } .reset-honest h3{ font-size:var(--fs-h4); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 12px; } .reset-honest p{ font-size:var(--fs-sm); line-height:1.7; color:var(--ink-2); margin:0; } /* ── Mobile ─────────────────────────────────────────────────────────────── */ @media(max-width:860px){ .offer__grid, .offer__grid--flip, .why-grid, .adv-offer, .who-grid{grid-template-columns:1fr;} /* Photo first in both directions once they stack: the flip only exists to alternate on a wide screen. */ .offer__grid--flip .offer__media{order:0;} .why-media img{aspect-ratio:4/3;} .offer__media img{aspect-ratio:3/2;} } @media(max-width:620px){ .daylist__item{grid-template-columns:1fr;gap:4px;padding:22px 0;} .daylist__time{padding-top:0;} .daylist__item--quest{padding:20px 18px;} .hub-strip__inner, .expedition-strip__inner{flex-direction:column;align-items:flex-start;padding:22px;} .hub-strip__inner .btn, .expedition-strip__inner .btn{width:100%;text-align:center;} } @media(prefers-reduced-motion:reduce){ .hero__see{transition:none;} .hero__see:hover{transform:none;} } /* ============================================================================ 24 — HOMEPAGE CORRECTIONS ========================================================================== */ /* The eyebrow pill sat in orange while the headline above it is gold, because an earlier rule set its border-color with !important. Same colour as the title now, which is what the frame was always meant to echo. */ .hero__eyebrow{ border-color:var(--gold)!important; color:var(--gold)!important; } /* The cat left the hero: it is in the fixed header a few pixels higher, and two of them on one screen read as a printing mistake rather than a brand. These rules stay only for .manifesto-mark below. */ .hero__mark{display:none!important;} /* It opens the manifesto instead, above the three words rather than beside the closing line. Centred, and joining the section rather than floating over the photo. */ .manifesto-mark--top{ position:relative; z-index:1; display:block; height:clamp(84px,11vw,132px); width:auto; margin:0 auto clamp(28px,4vw,44px); filter:drop-shadow(0 6px 20px rgba(0,0,0,.4)); } @media(max-width:600px){ .manifesto-mark--top{ height:clamp(72px,20vw,96px); margin-bottom:26px; } } @media(prefers-reduced-motion:reduce){ .manifesto-mark--top{filter:none;} } /* ============================================================================ 16 — ABOUT ---------------------------------------------------------------------------- Plain on purpose. The first version set the story in display type on a green ground with emphasised beats every few lines, which made a personal story read like an advertisement for itself. Heading, then text. ========================================================================== */ .story-col{ max-width:660px; margin:0 auto; } /* The paragraphs carry hard line breaks, so the leading inside one is tighter than normal body copy and the gap between them is wider. That is what separates the groups: loose lines plus a small gap ran the whole story together into one block. */ .story-col p{ font-size:var(--fs-lead); line-height:1.62; color:var(--ink-2); margin:0 0 var(--space-section-tight); } /* The last line of the story is the only one that lifts, and only a little: same size, the ink colour instead of the muted one, and a touch heavier. */ .story-close{ color:var(--ink)!important; font-weight:600; margin-top:30px!important; } .story-section{padding-bottom:var(--space-section-tight);} .story-photo{ padding-top:var(--space-section-tight); padding-bottom:var(--space-section); } .story-photo__frame{ max-width:860px; margin:0 auto; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); line-height:0; } .story-photo__frame img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; } .vision-section{padding-top:var(--space-section-tight);} /* Ends in a call to action, so it is centred like every other block that does. The text above it stays left aligned and readable. */ .vision-cta{ text-align:center; margin-top:var(--space-section-tight); } @media(max-width:600px){ .story-photo__frame{border-radius:var(--radius-md,16px);} .story-photo__frame img{aspect-ratio:4/3;} } /* The line that asks. Small and grey on purpose: it sits under the vision and must not compete with it. */ .story-note{ font-size:var(--fs-sm)!important; line-height:1.7!important; color:var(--ink-muted)!important; margin-top:var(--space-section-tight)!important; margin-bottom:0!important; } /* The single lifted line in the story. Weight and ink colour only: same size as the text around it, so it reads as emphasis rather than as a heading dropped into the middle of a paragraph run. */ .story-beat{ font-weight:600; color:var(--ink)!important; } /* The six-line run. Tighter than the rest because it is a list read as one breath, not six sentences. */ .story-list{line-height:1.5!important;} /* ============================================================================ 25 — THE TOURING FILM ON A PHONE ---------------------------------------------------------------------------- 16:9 inside a portrait column is about 340 x 190 px, and Vimeo's own fullscreen button is then a few pixels in the corner of that. Two changes: the inline embed runs edge to edge so it is as large as the screen allows, and tapping it opens a real fullscreen overlay instead of playing in the box. ========================================================================== */ @media(max-width:900px){ /* Out of the container and across the full viewport. Wider than the text around it on purpose: this is the one block that gains from every pixel. */ .touring-video-wrap{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .touring-video-wrap .touring-video{ border-radius:0; border-left:0; border-right:0; } /* A smaller play button, because the frame it sits in is smaller too. */ .touring-video__play{width:66px;height:66px;} .touring-video__play svg{width:28px;height:28px;} .touring-video__label{bottom:18px;font-size:.74rem;} } /* ── The overlay ───────────────────────────────────────────────────────── Placed with fixed positioning rather than the Fullscreen API: iOS Safari only grants that to a