/* Theme Name: Sigiriya Wild Cottages Theme URI: https://sigiriyawildcottages.com/ Author: Sigiriya Wild Cottages Description: Bespoke theme for Sigiriya Wild Cottages, seven garden cottages twelve minutes from Sigiriya Rock. Every page is a page template; links resolve by page ID or by template, and the booking URL, WhatsApp number, phone and email are set in the Customizer. Version: 1.9.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: sigiriya-wild-cottages */ /* Sigiriya Wild Cottages, theme stylesheet. tokens, then base, then components. Loads after Bootstrap and Owl. EDIT THIS FILE DIRECTLY. It is the single source of truth for the site's CSS. It was once generated from a three-file split in assets/css/ by build/make-css.js; both the split and the generator were removed on 2026-09-14 and this file replaced them. Add new values as tokens under :root rather than writing a raw hex, size or duration further down. */ /* ============================================================== SWC TOKENS ============================================================== */ /* ════════════════════════════════════════════════════════════════ SIGIRIYA WILD COTTAGES — tokens.css ──────────────────────────────────────────────────────────────── The single source of truth for every design value on the site. Nothing else in the project may declare a raw colour, size, shadow, radius or duration. If a value is needed twice, it lives here first. LOAD ORDER (required) 1. Google Fonts 2. Bootstrap 5.3 CSS 3. Owl Carousel CSS (owl.carousel + owl.theme.default) 4. tokens.css ← this file 5. base.css 6. components.css ← must load last so it wins NOTES • Line heights are unitless because font sizes are fluid clamp() values, so a proportional line height tracks them safely. • Baskervville ships ONE weight (400 plus italic). Never bold a heading. Hierarchy comes from size and spacing. • Alpha colours are written out in full rather than derived with rgb(from …), which is not yet safe on the older Android browsers a fair share of this audience uses. ════════════════════════════════════════════════════════════════ */ :root { /* ── Colour, primary ─────────────────────────────────────── */ --color-forest: #12352A; /* deep forest, dark sections, text on gold */ --color-gold: #C9A24B; /* heritage gold, CTA fill; copied in --a-gold-*, --list-marker */ --color-bark: #5D3C1E; /* bark brown, headings on light */ --color-green: #438A42; /* wild green, accents, icons, focus, WhatsApp */ --color-cream: #F3ECDC; /* page background */ --color-white: #FFFFFF; /* cards, inputs, alt sections */ /* ── Colour, secondary ───────────────────────────────────── */ --color-night: #07130D; /* deepest green-black, footer base */ --color-canopy: #1B4535; /* panels on dark */ --color-gold-light: #E2C884; /* gold hover, gold text on dark */ --color-green-link: #2F6B33; /* text links */ --color-green-dark: #235025; /* link hover */ --color-paper: #FBF7ED; /* alt light sections, light text on dark */ --color-sage: #9AA89B; /* muted text on dark */ --color-forest-deep: #0F2A21; /* darkest band gradient stop */ --color-night-soft: #0B1F15; /* footer gradient top */ --color-footer-link: #C3C8BB; /* footer link text */ --color-footer-muted: #6F7A6C; /* footer small print */ --color-ink: #22271F; /* base text */ --color-body: #3A4038; /* paragraph text on light */ --color-muted: #5A6155; /* captions, labels, placeholders */ --color-eyebrow: #7A5C18; /* eyebrow/kicker on light */ /* ── Colour, alpha ─────────────────────────────────────────── Every transparent colour in the system, named once. Before this existed there were 29 hand-typed rgba() values scattered through the stylesheet. */ --a-night-10: rgba(7, 19, 13, .10); --a-night-12: rgba(7, 19, 13, .12); --a-night-30: rgba(7, 19, 13, .30); --a-night-35: rgba(7, 19, 13, .35); --a-night-40: rgba(7, 19, 13, .40); --a-night-45: rgba(7, 19, 13, .45); --a-night-62: rgba(7, 19, 13, .62); --a-night-72: rgba(7, 19, 13, .72); --a-night-80: rgba(7, 19, 13, .80); --a-night-82: rgba(7, 19, 13, .82); --a-night-92: rgba(7, 19, 13, .92); --a-night-00: rgba(7, 19, 13, 0); --a-forest-05: rgba(18, 53, 42, .05); --a-forest-06: rgba(18, 53, 42, .06); --a-forest-25: rgba(18, 53, 42, .25); --a-forest-30: rgba(18, 53, 42, .30); --a-forest-55: rgba(18, 53, 42, .55); --a-forest-72: rgba(18, 53, 42, .72); --a-forest-88: rgba(18, 53, 42, .88); --a-cream-14: rgba(243, 236, 220, .14); --a-cream-22: rgba(243, 236, 220, .22); --a-cream-40: rgba(243, 236, 220, .40); --a-cream-60: rgba(243, 236, 220, .60); --a-paper-35: rgba(251, 247, 237, .35); --a-paper-94: rgba(251, 247, 237, .94); --a-green-15: rgba(67, 138, 66, .15); --a-green-16: rgba(67, 138, 66, .16); --a-green-60: rgba(67, 138, 66, .60); --a-sage-50: rgba(154, 168, 155, .50); --a-gold-30: rgba(201, 162, 75, .30); --a-gold-60: rgba(201, 162, 75, .60); --a-white-92: rgba(255, 255, 255, .92); /* ── Lines ───────────────────────────────────────────────── */ --line-light: rgba(93, 60, 30, .16); /* hairline on light, bark at 16% */ --line-dark: rgba(226, 200, 132, .25); /* hairline on dark, gold-light 25% */ --line-forest: rgba(18, 53, 42, .14); /* input borders */ /* ── Shadows ─────────────────────────────────────────────── */ --shadow-nav: 0 6px 24px -18px var(--a-night-40); --shadow-lift: 0 30px 50px -30px var(--a-night-35); /* card hover */ --shadow-frame: 0 28px 56px -32px var(--a-night-35); /* framed photo tile */ --shadow-float: 0 14px 30px -10px var(--a-green-60); /* WhatsApp button */ --shadow-panel: 0 24px 48px -28px var(--a-night-35); /* nav mega panel */ --ring-focus: 0 0 0 3px var(--a-green-15); /* ── List marker ─────────────────────────────────────────── */ /* The .list bullet (§15): a gold diamond, 17 x 12, drawn as the list's own marker image. An SVG in a data URI cannot read a CSS variable, so its fill is written out here: it is --color-gold, and the two must change together. The diamond sits at the left of the box, centred 5.2px above its bottom edge, which the browser stands on the text baseline, so it centres on the first line of 16px Montserrat at --lh-body. */ --list-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='12' viewBox='0 0 17 12'%3E%3Cpath d='M5 2.56 9.24 6.8 5 11.04.76 6.8z' fill='%23C9A24B'/%3E%3C/svg%3E"); /* ── Type, families and weights ──────────────────────────── */ --font-heading: 'Baskervville', Georgia, serif; --font-body: 'Montserrat', sans-serif; --fw-heading: 400; /* Baskervville has one weight, never 600 or 700 */ --fw-body: 300; /* brand body runs Light, 500/600 for UI labels */ --fw-label: 600; /* ── Type, scale ─────────────────────────────────────────── */ --fs-h1: clamp(36px, 5vw, 50px); --fs-h2: clamp(30px, 4vw, 38px); --fs-h3: clamp(23px, 3vw, 28px); --fs-h4: clamp(18px, 2.2vw, 20px); --fs-body: 16px; --fs-quote: clamp(17px, 1.6vw, 20px); --fs-lead: clamp(15.5px, 1.4vw, 18px); --fs-display: clamp(52px, 8vw, 86px); /* the 4.9/5 score */ --fs-mark: clamp(64px, 7vw, 88px); /* the oversized quote mark */ --fs-form: 15px; --fs-small: 14px; /* stars, struck price, footer links */ --fs-label: 12px; /* buttons, nav links, footer bottom, link-more */ --fs-micro: 11.5px; /* small buttons, footer headings, price per */ --fs-eyebrow: 11px; --fs-nano: 10.5px; /* badges, price prefix */ --fs-tiny: 9.5px; /* form labels, the smallest text in the system */ /* ── Type, line height ───────────────────────────────────── */ --lh-h1: 1.2; --lh-h2: 1.2; --lh-h3: 1.2; --lh-h4: 1.3; --lh-body: 1.75; --lh-quote: 1.7; --lh-lead: 1.85; --lh-flat: 1; /* ── Type, tracking ──────────────────────────────────────── */ --ls-h1: -0.015em; --ls-h2: -0.01em; --ls-display: -0.02em; --ls-badge: .08em; --ls-stars: .14em; --ls-link: .16em; --ls-label: .18em; /* buttons, nav links */ --ls-heading: .2em; /* footer headings */ --ls-form: .24em; /* form labels */ --ls-eyebrow: .3em; /* section kickers */ /* ── Spacing ─────────────────────────────────────────────── */ --sp-5: 5px; --sp-10: 10px; --sp-15: 15px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-25: 25px; --sp-30: 30px; --sp-40: 40px; --sp-50: 50px; --sp-60: 60px; --sp-70: 70px; --sp-80: 80px; --sp-100: 100px; --sp-150: 150px; --sec-pad: clamp(80px, 11vw, 150px); --sec-pad-sm: clamp(64px, 9vw, 120px); /* ── Layout ──────────────────────────────────────────────── */ --container-width: 1200px; --cap-media: 490px; --h-mobile-bar: 76px; /* the fixed .mobile-cta-bar: 10 + 55 + 10 + a 1px rule */ --cap-media-sm: 440px; --cap-lead: 640px; --cap-grid: 1080px; --nav-offset: 92px; /* fixed nav height, used by scroll-padding */ /* ── Radii ───────────────────────────────────────────────── */ --radius: 15px; /* cards and image tiles, brand 14 to 16px */ --r-sm: 6px; /* badges, review cards */ --r-btn: 2px; /* SIGNATURE: buttons are sharp, never pills */ --r-input: 8px; /* form fields */ --r-round: 50%; /* avatars, icon buttons */ /* ── Motion ──────────────────────────────────────────────── */ --ease-brand: cubic-bezier(.2, .7, .2, 1); --ease-cue: cubic-bezier(.6, 0, .4, 1); --t-fast: .3s; /* hovers */ --t-nav: .45s; /* navbar transitions */ --t-reveal: .9s; /* scroll reveals */ --t-zoom: 1.1s; /* image hover zoom */ /* ── Stacking ────────────────────────────────────────────── */ --z-content: 2; --z-overlay: 3; --z-nav: 1030; --z-bar: 1035; --z-float: 1040; --z-lightbox: 1050; /* gallery overlay, above the floating CTAs */ /* Bootstrap's offcanvas sits at 1045 and correctly covers all three */ /* ── Dark-section context ──────────────────────────────────── These four are REASSIGNED by .section-forest / .section-canopy / .section-night / .on-dark in base.css. Components read them instead of hard-coding a colour, which is what lets one flat rule flip a whole section rather than 30 descendant selectors. */ --c-heading: var(--color-bark); --c-text: var(--color-body); --c-eyebrow: var(--color-eyebrow); --c-em: var(--color-green); --c-link: var(--color-green-link); --c-link-hover: var(--color-green-dark); --c-rule: var(--line-light); } /* ============================================================== SWC BASE ============================================================== */ /* ════════════════════════════════════════════════════════════════ SIGIRIYA WILD COTTAGES — base.css ──────────────────────────────────────────────────────────────── Element defaults, layout primitives and utilities. Loads after tokens.css and before components.css. THE INHERITANCE RULE Font family, size, line height, weight and colour are set ONCE on body. No component restates them. A property appears on a child only where the value genuinely differs from what it inherits. If deleting a declaration changes nothing on screen, it should not be there. Form controls are the exception the browser forces on us: inputs, buttons, selects and textareas do not inherit type, so they are given font and colour inherit once, here, rather than per component. ════════════════════════════════════════════════════════════════ */ /* ══ RESET ═══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--nav-offset); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); color: var(--color-ink); background-color: var(--color-cream); overflow-x: clip; -webkit-font-smoothing: antialiased; letter-spacing: 0.5px; } /* Type does not inherit into form controls. Set it once, here. */ input, select, textarea, button { font: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } img { height: auto; } /* ══ TYPOGRAPHY ══════════════════════════════════════════════ */ h1, h2, h3, h4 { text-wrap: balance; font-family: var(--font-heading); font-weight: var(--fw-heading); color: var(--c-heading); } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); } p { color: var(--c-text); text-wrap: pretty; } a { color: var(--c-link); text-decoration: none; transition: color var(--t-fast) ease; } /* Scoped to unclassed links only. The old global a:hover (0,1,1) out-specified every single-class component and forced ten defensive colour restatements across the components file. The hover colour is a context token (since 1.8.4): darker green on light sections, paper on dark ones, where the old fixed dark green all but vanished against the forest. */ a:not([class]):hover { color: var(--c-link-hover); } /* No link is underlined (the owner, 2026-10-15, 1.8.8): colour alone marks a link, in running copy too. From 1.8.5 to 1.8.7 an unclassed link inside a p, .list, td or th was underlined for WCAG 1.4.1; the rule is kept here at none so a plugin or editor style cannot bring the underline back. */ p a:not([class]), .list a:not([class]), td a:not([class]), th a:not([class]) { text-decoration: none; } a[href^="tel:"] { white-space: nowrap; } a[href^="mailto:"] { overflow-wrap: anywhere; } ::selection { background-color: var(--color-gold-light); color: var(--color-forest); } :focus-visible { outline: 2px solid var(--color-green); outline-offset: 3px; } /* ══ SECTION CONTEXT ═════════════════════════════════════════ A dark section reassigns the six context tokens. Everything inside then recolours by inheritance rather than by the 30 descendant selectors the old stylesheet needed. ═══════════════════════════════════════════════════════════════ */ .section-cream { background-color: var(--color-cream); } .section-paper { background-color: var(--color-paper); } .section-white { background-color: var(--color-white); } .section-forest { background-color: var(--color-forest); } .section-canopy { background-color: var(--color-canopy); } .section-night { background-color: var(--color-night); } .section-forest, .section-canopy, .section-night, .on-dark { color: var(--color-paper); --c-heading: var(--color-paper); --c-text: var(--color-sage); --c-eyebrow: var(--color-gold-light); --c-em: var(--color-gold-light); --c-link: var(--color-gold-light); --c-link-hover: var(--color-paper); --c-rule: var(--line-dark); } /* A light card inside a dark section, such as the home page booking card, takes the light context back: the values :root and body set. */ .on-light { color: var(--color-ink); --c-heading: var(--color-bark); --c-text: var(--color-body); --c-eyebrow: var(--color-eyebrow); --c-em: var(--color-green); --c-link: var(--color-green-link); --c-link-hover: var(--color-green-dark); --c-rule: var(--line-light); } /* ══ LAYOUT ══════════════════════════════════════════════════ */ /* Cap Bootstrap's container at the theme width. Bootstrap would otherwise give 1140px from xl and 1320px from xxl. */ @media (min-width: 1200px) { .container, .container-lg, .container-xl, .container-xxl { max-width: var(--container-width); } } /* Responsive section rhythm. Use these for full sections and the p-t / p-b / m-b utilities for anything finer. */ .sec-pad { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); } .sec-pad-sm { padding-top: var(--sec-pad-sm); padding-bottom: var(--sec-pad-sm); } /* Width caps, all centred */ .media-cap { max-width: var(--cap-media); margin-left: auto; margin-right: auto; } @media (max-width: 991.98px) { .media-cap { margin-left: 0; } } .media-cap-sm { max-width: var(--cap-media-sm); margin-left: auto; margin-right: auto; } .lead-cap { max-width: var(--cap-lead); margin-left: auto; margin-right: auto; } .grid-cap { max-width: var(--cap-grid); margin-left: auto; margin-right: auto; } /* ══ SPACING UTILITIES ═══════════════════════════════════════ !important is deliberate and is confined to this block. These exist to beat Bootstrap's own spacing utilities, which carry !important themselves. Nothing else in the theme layer uses it. The ladder was trimmed in Phase 2: 17 steps carried by the old stylesheet had never been used on any page. ═══════════════════════════════════════════════════════════════ */ .p-t-5 { padding-top: var(--sp-5) !important; } .p-t-10 { padding-top: var(--sp-10) !important; } .p-t-15 { padding-top: var(--sp-15) !important; } .p-t-20 { padding-top: var(--sp-20) !important; } .p-t-25 { padding-top: var(--sp-25) !important; } .p-t-30 { padding-top: var(--sp-30) !important; } .p-t-40 { padding-top: var(--sp-40) !important; } .p-t-50 { padding-top: var(--sp-50) !important; } .p-t-60 { padding-top: var(--sp-60) !important; } .p-t-70 { padding-top: var(--sp-70) !important; } .p-t-80 { padding-top: var(--sp-80) !important; } .p-t-100 { padding-top: var(--sp-100) !important; } .p-t-150 { padding-top: var(--sp-150) !important; } .p-b-30 { padding-bottom: var(--sp-30) !important; } .p-b-40 { padding-bottom: var(--sp-40) !important; } .p-b-50 { padding-bottom: var(--sp-50) !important; } .p-b-60 { padding-bottom: var(--sp-60) !important; } .p-b-70 { padding-bottom: var(--sp-70) !important; } .p-b-80 { padding-bottom: var(--sp-80) !important; } .p-b-100 { padding-bottom: var(--sp-100) !important; } .m-b-10 { margin-bottom: var(--sp-10) !important; } .m-b-16 { margin-bottom: var(--sp-16) !important; } .m-b-20 { margin-bottom: var(--sp-20) !important; } .m-b-24 { margin-bottom: var(--sp-24) !important; } .m-b-30 { margin-bottom: var(--sp-30) !important; } .m-b-40 { margin-bottom: var(--sp-40) !important; } .m-b-60 { margin-bottom: var(--sp-60) !important; } .no-margin { margin: 0 !important; } /* ══ COLOUR HELPERS ══════════════════════════════════════════ A utility has to beat the component it is applied to, and components.css loads after this file, so these carry !important the same way the spacing utilities do. That is the sanctioned utility-layer exception in R3, not a specificity accident. Token reassignment did remove the OTHER reason these once needed it: they no longer have to out-specify thirty dark-section descendant selectors, because those are gone. Two carry a -swc suffix because Bootstrap ships classes of the same name: .text-body and .bg-white. ═══════════════════════════════════════════════════════════════ */ .text-gold { color: var(--color-gold) !important; } .text-gold-light { color: var(--color-gold-light) !important; } .text-green { color: var(--color-green) !important; } .text-forest { color: var(--color-forest) !important; } .text-bark { color: var(--color-bark) !important; } .text-sage { color: var(--color-sage) !important; } .text-paper { color: var(--color-paper) !important; } .text-body-swc { color: var(--color-body) !important; } .text-muted-swc { color: var(--color-muted) !important; } .bg-cream { background-color: var(--color-cream) !important; } .bg-paper { background-color: var(--color-paper) !important; } .bg-white-swc { background-color: var(--color-white) !important; } .bg-forest { background-color: var(--color-forest) !important; } .bg-canopy { background-color: var(--color-canopy) !important; } .bg-night { background-color: var(--color-night) !important; } .bg-bark { background-color: var(--color-bark) !important; } .bg-green { background-color: var(--color-green) !important; } .bg-gold { background-color: var(--color-gold) !important; color: var(--color-forest) !important; } /* ══ REDUCED MOTION ══════════════════════════════════════════ The universal reset is the second and last sanctioned use of !important in the theme layer. It is deliberate: a targeted list, which is what the old stylesheet had, kept missing things. It left the button lift, the card lift, the WhatsApp hover scale and the navbar padding change all still moving, and it could never reach Owl's own transitions at all. ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } } /* ============================================================== SWC COMPONENTS ============================================================== */ /* ════════════════════════════════════════════════════════════════ SIGIRIYA WILD COTTAGES — components.css ──────────────────────────────────────────────────────────────── Every reusable block. Loads last so it wins over Bootstrap, Owl and base.css. ORDER 1 Type helpers 8 Navigation, desktop 2 Buttons 9 Navigation, drawer 3 Cards 10 Footer 4 Image tiles 11 Floating CTAs 5 Badges, links, marks 12 Motion 6 Forms 13 Hero and bands 7 Disclosure, tables 14 VENDOR OVERRIDES RULES (see R3 in docs/07-CORRECTIONS.md) Everything above section 14 is the theme layer: flat specificity, no !important, nothing deeper than two levels. Section 14 is the only place where Bootstrap and Owl have to be out-specified, and it is allowed both. Keep it that way. Components read the context tokens (--c-heading, --c-text, --c-eyebrow, --c-em, --c-link, --c-rule) rather than hard-coding a colour, so a dark section recolours them for free. ════════════════════════════════════════════════════════════════ */ /* ══ 1. TYPE HELPERS ═════════════════════════════════════════ */ .eyebrow { display: block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-label); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-eyebrow); } .em-gold, .em-green { font-style: italic; } .em-gold { color: var(--c-em); } .em-green { color: var(--c-em); } .lead-sub { font-size: var(--fs-lead); line-height: var(--lh-lead); } .quote { font-family: var(--font-heading); font-size: var(--fs-quote); line-height: var(--lh-quote); color: var(--color-ink); } .on-dark .quote { color: var(--color-paper); } .quote-mark { display: block; font-family: var(--font-heading); font-size: var(--fs-mark); line-height: .55; color: var(--color-gold); margin: 0 0 6px; } .stars { color: var(--color-eyebrow); letter-spacing: var(--ls-stars); font-size: var(--fs-small); } .score-swc { font-family: var(--font-heading); font-size: var(--fs-display); line-height: var(--lh-flat); letter-spacing: var(--ls-display); color: var(--c-heading); } .divider-gold { width: 54px; height: 2px; background-color: var(--color-gold); border: 0; opacity: 1; margin: 0; } /* The 40 to 60 word direct answer that sits under a guide H2 */ .answer-block { border-left: 2px solid var(--color-gold); padding-left: var(--sp-20); font-size: var(--fs-lead); line-height: var(--lh-lead); } /* ══ 2. BUTTONS ══════════════════════════════════════════════ Standalone. Never combine with Bootstrap's .btn. Sharp 2px corners are a brand signature. ═══════════════════════════════════════════════════════════════ */ .btn-primary, .btn-outline, .btn-outline-light, .btn-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-10); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none; white-space: nowrap; min-height: 48px; padding: var(--sp-16) var(--sp-30); border-radius: var(--r-btn); border: 1px solid transparent; cursor: pointer; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease; } .btn-primary { background-color: var(--color-gold); color: var(--color-forest); } .btn-primary:hover { background-color: var(--color-gold-light); transform: translateY(-2px); } .btn-outline { background-color: transparent; color: var(--color-forest); border-color: var(--a-forest-30); } .btn-outline:hover { background-color: var(--a-forest-05); border-color: var(--color-forest); } .btn-outline-light { background-color: transparent; color: var(--color-paper); border-color: var(--a-cream-60); } .btn-outline-light:hover { background-color: var(--a-cream-14); border-color: var(--color-cream); } .btn-whatsapp { background-color: var(--color-green-link); color: var(--color-white); } .btn-whatsapp:hover { background-color: var(--color-green-dark); transform: translateY(-2px); } .btn-lg { padding: 19px 38px; min-height: 52px; } .btn-sm { padding: 12px 22px; min-height: 44px; font-size: var(--fs-micro); } .btn-block { display: flex; width: 100%; } /* On a phone the large buttons in a wrapping group (the pair in every hero and CTA band, in a .d-flex.flex-wrap) stack one above the other. At their own widths they stood ragged, one wider than the next, so each takes the whole row and the stack lines up. */ .btn-primary svg, .btn-outline svg, .btn-outline-light svg, .btn-whatsapp svg { flex-shrink: 0; } @media (max-width: 575.98px) { .flex-wrap > .btn-lg, .flex-wrap > .btn-primary, .flex-wrap > .btn-outline, .flex-wrap > .btn-outline-light, .flex-wrap > .btn-whatsapp { flex: 1 1 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; padding-left: var(--sp-20); padding-right: var(--sp-20); } } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-round); border: 1px solid var(--a-sage-50); background: transparent; color: var(--color-green); cursor: pointer; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; } .btn-icon:hover { background-color: var(--a-green-16); border-color: var(--color-green); } .btn-icon-light { border-color: var(--a-cream-40); color: var(--color-cream); } /* ══ 3. CARDS ════════════════════════════════════════════════ */ .card-swc { background-color: var(--color-white); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease; } .card-swc:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } .card-pad { padding: var(--sp-24); } .card-pad-lg { padding: clamp(40px, 5vw, 80px) clamp(24px, 3.4vw, 40px); } .card-tight { border-radius: var(--r-sm); } /* A card whose title links. Colour comes from the heading token. */ .card-title-link { color: inherit; } /* Review card. Fixed width so Owl's autoWidth shows three plus a peek at the fourth, which is what the approved design does. */ .review-card { width: min(340px, 84vw); padding: clamp(24px, 2.4vw, 30px); } /* Host card, dark sections */ .host-card { background-color: var(--color-canopy); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: var(--sp-16); display: flex; align-items: center; gap: 18px; max-width: 480px; } .host-card .link-more { white-space: nowrap; } .host-photo { width: 132px; aspect-ratio: 4 / 5; border-radius: var(--radius); object-fit: cover; flex: none; } @media (max-width: 399.98px) { .host-photo { width: 96px; } } /* Callout */ .callout { border: 1px solid var(--c-rule); border-radius: var(--r-sm); padding: var(--sp-20) var(--sp-24); background-color: var(--color-paper); font-style: italic; } /* Related pages */ .related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-10); } .related-list a { display: block; padding: var(--sp-15) 0; border-bottom: 1px solid var(--c-rule); min-height: 44px; } /* ══ 4. IMAGE TILES ══════════════════════════════════════════ */ .img-tile { border-radius: var(--radius); overflow: hidden; position: relative; } .img-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-brand); } .img-tile:hover img, .card-swc:hover .img-tile img { transform: scale(1.06); } .tile-square { aspect-ratio: 1 / 1; } .tile-portrait { aspect-ratio: 4 / 5; } .tile-photo { aspect-ratio: 4 / 3; } .tile-landscape { aspect-ratio: 5 / 4; } .tile-wide { aspect-ratio: 3 / 2; } .tile-stagger { transform: translateY(32px); } .tile-framed { border: 1px solid var(--line-forest); box-shadow: var(--shadow-frame); } .tile-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to top, var(--a-night-72), var(--a-night-00)); } .tile-badge { position: absolute; top: 12px; left: 12px; z-index: var(--z-content); } .tile-caption { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: var(--z-content); margin: 0; font-family: var(--font-heading); font-size: 17px; color: var(--color-paper); } /* Static map, click to load the interactive one. Keeps the map off the LCP path entirely. */ .map-static { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-light); } .map-static button { position: absolute; inset: 0; width: 100%; border: 0; background-color: var(--a-night-30); color: var(--color-paper); cursor: pointer; } /* A cropped photograph (object-fit: cover) keeps its right-hand side, where the subject sits, instead of its centre. */ .crop-right { object-position: right center; } .crop-left-quarter { object-position: 25% center; } .crop-right-third { object-position: 65% center; } /* ══ 5. BADGES, LINKS, MARKS ═════════════════════════════════ */ .badge-tag { display: inline-block; background-color: var(--a-white-92); color: var(--color-bark); font-size: var(--fs-nano); font-weight: var(--fw-label); letter-spacing: var(--ls-badge); text-transform: uppercase; padding: 5px var(--sp-10); border-radius: var(--r-sm); } .link-more { font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-link); text-transform: uppercase; color: var(--c-link); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; } .avatar-swc { width: 44px; height: 44px; border-radius: var(--r-round); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: var(--fw-label); color: var(--color-paper); background-color: var(--color-green); flex: none; } img.avatar-swc { object-fit: cover; } .price-swc { font-family: var(--font-heading); font-size: 24px; color: var(--color-forest); } .price-swc small { font-family: var(--font-body); font-size: var(--fs-nano); font-weight: var(--fw-label); letter-spacing: var(--ls-heading); text-transform: uppercase; color: var(--color-muted); } .price-swc s { font-family: var(--font-body); font-size: var(--fs-small); color: var(--color-muted); } .price-swc .price-per { font-family: var(--font-body); font-size: var(--fs-micro); color: var(--color-muted); } .pillar-icon { width: 48px; height: 48px; margin: 0 auto 22px; border: 1px solid var(--a-gold-60); border-radius: var(--r-round); display: flex; align-items: center; justify-content: center; color: var(--color-green); } /* Breadcrumb */ .breadcrumb-swc { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: var(--fs-micro); color: var(--color-muted); } .breadcrumb-swc a { display: inline-block; padding-top: var(--sp-15); padding-bottom: var(--sp-15); margin-top: calc(var(--sp-15) * -1); margin-bottom: calc(var(--sp-15) * -1); } .breadcrumb-swc li::after { content: '·'; margin-left: 8px; } .breadcrumb-swc li:last-child::after { content: ''; } /* ══ 6. FORMS ════════════════════════════════════════════════ Four fields maximum on any form. Contact Form 7 output is skinned by the same classes in section 14. ═══════════════════════════════════════════════════════════════ */ .form-label-swc { display: block; font-size: var(--fs-micro); font-weight: var(--fw-label); letter-spacing: var(--ls-form); text-transform: uppercase; color: var(--color-muted); margin-bottom: 7px; } /* ══ 7. DISCLOSURE AND TABLES ════════════════════════════════ One details/summary primitive serves the FAQ block on every guide page AND the mobile navigation accordions. No JS. ═══════════════════════════════════════════════════════════════ */ .disclosure { border-bottom: 1px solid var(--c-rule); } .disclosure > summary { cursor: pointer; list-style: none; padding: var(--sp-20) 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); font-family: var(--font-heading); font-size: var(--fs-h4); color: var(--c-heading); } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure > summary::after { content: '+'; font-family: var(--font-body); font-size: var(--fs-h4); color: var(--c-eyebrow); flex: none; } .disclosure[open] > summary::after { content: '\2013'; } .disclosure > .disclosure-body { padding-bottom: var(--sp-20); } .table-swc { width: 100%; border-collapse: collapse; font-size: var(--fs-form); } .table-swc th, .table-swc td { text-align: left; vertical-align: top; padding: var(--sp-15); border-bottom: 1px solid var(--c-rule); } /* No rule under the final row: there is nothing below it to separate. */ .table-swc tbody tr:last-child th, .table-swc tbody tr:last-child td { border-bottom: 0; } .table-swc th { font-size: var(--fs-tiny); font-weight: var(--fw-label); letter-spacing: var(--ls-form); text-transform: uppercase; color: var(--color-muted); } /* A row header is what the reader looks for (the cottage, the time, the place), so it reads at the body size; the tiny label style stays on the column headings in thead. */ .table-swc tbody th { font-size: var(--fs-small); letter-spacing: normal; text-transform: none; color: var(--c-text); } @media (max-width: 575.98px) { .table-swc th, .table-swc td { padding: var(--sp-10); } } /* .table-stack: a table that becomes labelled blocks on a phone, one row per block, each value under its column heading (the td's data-label). For tables of three or more text columns, which no phone can show side by side. */ @media (max-width: 575.98px) { .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .table-stack, .table-stack tbody, .table-stack tr, .table-stack th, .table-stack td { display: block; width: 100%; } .table-stack tr { padding: var(--sp-15) 0; border-bottom: 1px solid var(--c-rule); } .table-stack tr:last-child { border-bottom: 0; } .table-stack th, .table-stack td { padding: 0; border-bottom: 0; } .table-stack td { margin-top: var(--sp-10); } .table-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--sp-5); font-size: var(--fs-tiny); font-weight: var(--fw-label); letter-spacing: var(--ls-form); text-transform: uppercase; color: var(--color-muted); } } /* Sideways only, and the vertical axis is pinned shut. Why: overflow-x: auto silently computes overflow-y to auto as well, and these tables round to a fractional height (borders land on 0.8 device pixels), so clientHeight floors to 512 while scrollHeight ceils to 513. That phantom 1px drew a vertical scrollbar on all eleven tables on the site. Nothing real is clipped by hiding it. Horizontal scrolling stays: the month table on /guides/best-time-to-visit-sigiriya/ genuinely needs 562px, and initTables() gives any table that overflows a tabindex and a label. */ .table-wrap { overflow-x: auto; overflow-y: hidden; } /* ══ 8. NAVIGATION, DESKTOP ══════════════════════════════════ Rule R1. Two mega menus (Cottages, Experiences) and two simple dropdowns (Plan, Offers). Behaviour comes from Bootstrap's dropdown JavaScript, so this file supplies layout only. ═══════════════════════════════════════════════════════════════ */ /* The nav RESTS SOLID, and goes transparent only where a photograph sits behind it. Only two pages open that way, the home page and the cottages hub. The other 24 open on cream, and a transparent nav there paints cream links and the cream logo onto a cream background, so the whole menu is invisible until you scroll. Solid-by-default also fails safe: a browser with no :has() support gets a legible nav everywhere instead of an invisible one on 24 pages. */ .navbar-swc { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); background-color: var(--a-paper-94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-nav); padding-top: var(--sp-10); padding-bottom: var(--sp-10); transition: background-color var(--t-nav) ease, box-shadow var(--t-nav) ease, padding var(--t-nav) var(--ease-brand); } /* Over a hero, until the page scrolls off it. */ body:has(.hero-swc, .hero-page) .navbar-swc:not(.scrolled) { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding-top: 18px; padding-bottom: 18px; } .logo-swc { height: 48px; width: auto; /* If the bar is ever squeezed (a seventh nav item, a longer label), the logo shrinks in proportion rather than being crushed to a sliver. */ object-fit: contain; object-position: left center; transition: height var(--t-nav) var(--ease-brand); } .logo-light { display: none; } .logo-dark { display: block; } body:has(.hero-swc, .hero-page) .navbar-swc:not(.scrolled) .logo-swc { height: clamp(56px, 8vw, 90px); } body:has(.hero-swc, .hero-page) .navbar-swc:not(.scrolled) .logo-light { display: block; } body:has(.hero-swc, .hero-page) .navbar-swc:not(.scrolled) .logo-dark { display: none; } /* .btn-icon-light keeps its meaning elsewhere, so this is scoped to the nav. */ .navbar-swc .btn-icon-light { border-color: var(--a-sage-50); color: var(--color-green); } body:has(.hero-swc, .hero-page) .navbar-swc:not(.scrolled) .btn-icon-light { border-color: var(--a-cream-40); color: var(--color-cream); } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(6px, 1.6vw, 20px); } /* A nav item is its link plus its panel toggle, side by side. Without this the toggle dropped under the label when the bar got tight (seen at 1024px), and the mega items stood two lines tall beside the single-line ones. */ .nav-list > .nav-item { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; } .nav-list > .nav-item .nav-panel { white-space: normal; } /* Bootstrap gives .dropdown position:relative, which is what the two simple dropdowns want. The mega items opt out so their panel spans the container instead of the list item. Paired with data-bs-display="static" on the toggle so Bootstrap hands positioning to CSS rather than Popper. */ /* The nav is .container-fluid, so it runs edge to edge. Bootstrap's own gutter on that class is 12px, which put the logo almost against the viewport while the hero content below it started at 112px. This sets the gutter instead: wide enough to read as a margin at every width, still full-bleed. */ .nav-inner { position: relative; padding-left: clamp(var(--sp-20), 3.2vw, var(--sp-50)); padding-right: clamp(var(--sp-20), 3.2vw, var(--sp-50)); } .nav-item-mega { position: static; } .nav-link-swc { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-ink); padding: 0 2px; transition: color var(--t-nav) ease, opacity var(--t-fast) ease; } .nav-link-swc:hover { opacity: .65; } body:has(.hero-swc, .hero-page) .navbar-swc:not(.scrolled) .nav-link-swc { color: var(--color-cream); } /* The panel trigger sits beside the link so the hub page stays reachable by click and the panel stays reachable by keyboard. */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 44px; border: 0; background: transparent; color: var(--color-ink); padding: 0 4px; cursor: pointer; line-height: var(--lh-flat); transition: color var(--t-nav) ease, transform var(--t-fast) ease; outline:none; } body:has(.hero-swc, .hero-page) .navbar-swc:not(.scrolled) .nav-toggle { color: var(--color-cream); } .nav-toggle[aria-expanded="true"] { transform: rotate(180deg); } /* 992px to 1199px (an iPad on its side): six items, two buttons and the logo have to share about 1000px, so the gutter, the tracking, the toggles and the logo all give a little until xl. This block sits after .nav-link-swc and .nav-toggle on purpose: until 1.8.5 it sat before them, they won on source order, and the bar ran 130px over at 992px, which squeezed the logo to a 7px sliver. */ @media (min-width: 992px) and (max-width: 1199.98px) { .nav-inner { padding-left: var(--sp-20); padding-right: var(--sp-20); } .nav-list { gap: var(--sp-10); } .nav-link-swc { letter-spacing: var(--ls-badge); } .nav-toggle { min-width: 24px; padding: 0 2px; } .navbar-swc .btn-primary { padding-left: var(--sp-15); padding-right: var(--sp-15); letter-spacing: var(--ls-badge); } body:has(.hero-swc, .hero-page) .navbar-swc:not(.scrolled) .logo-swc { height: 48px; } } /* Panel surface, shared by both patterns */ .nav-panel { border: 1px solid var(--line-light); border-radius: var(--radius); box-shadow: var(--shadow-panel); background-color: var(--color-paper); padding: var(--sp-20) var(--sp-20); } /* Simple dropdown: text list, six items maximum */ .nav-panel-simple { min-width: 320px; } .nav-panel-simple a { display: flex; align-items: center; min-height: 44px; padding: 6px var(--sp-15); border-radius: 2px; color: var(--color-ink); font-size: var(--fs-form); transition: background-color var(--t-fast) ease, color var(--t-fast) ease; } .nav-panel-simple a:hover, .nav-panel-simple a:focus-visible { background-color: var(--a-forest-05); color: var(--color-green-link); } /* Mega panel: full container width, photo-led */ .nav-panel-mega { left: 0; right: 0; width: 100%; padding: var(--sp-30) clamp(24px, 4vw, 40px) var(--sp-20); } /* The panel spans .nav-inner, which is .container-fluid, so its ground runs the full width of the window. Its contents must not: the grid is auto-fit, and left to itself it made the four cottage cards 601px wide on a 2560px monitor, with 451px images — a menu taller than the hero. Cap the contents at --container-width, the same width .container is held to on every page, so the panel lines up with the page underneath, and let the ground stay edge to edge. */ .nav-panel-mega > * { max-width: var(--container-width); margin-left: auto; margin-right: auto; } .nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-20); } .nav-card { color: inherit; display: block; } .nav-card .img-tile { margin-bottom: var(--sp-15); } .nav-card-title { font-family: var(--font-heading); font-size: var(--fs-h4); color: var(--color-bark); margin: 0; } .nav-card-meta { font-size: var(--fs-nano); font-weight: var(--fw-label); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--color-muted); margin: 4px 0 0; } .nav-card:hover .nav-card-title { color: var(--color-green-link); } .nav-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-16); margin-top: var(--sp-20); padding-top: var(--sp-20); border-top: 1px solid var(--line-light); } /* Plan: a mega panel of two link columns and two photo cards, deliberately unlike the card grids of Cottages and Experiences (the owner's request of 2026-10-05, which supersedes R1's "simple dropdown" for Plan). */ .nav-plan-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-30); align-items: start; } .nav-group .eyebrow { margin: 0 var(--sp-15) var(--sp-15); } .nav-group a { display: flex; align-items: center; min-height: 44px; padding: 6px var(--sp-15); border-radius: 2px; color: var(--color-ink); font-size: var(--fs-form); transition: background-color var(--t-fast) ease, color var(--t-fast) ease; } .nav-group a:hover, .nav-group a:focus-visible { background-color: var(--a-forest-05); color: var(--color-green-link); } /* The two cards stack, each a small 3:2 photograph beside its title, so the pair stands about as tall as a link column and the images stay short. */ .nav-plan-cards { display: grid; gap: var(--sp-16); align-content: start; } .nav-plan-cards .nav-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-15); align-content: center; } .nav-plan-cards .img-tile { grid-row: 1 / 3; margin-bottom: 0; } .nav-plan-cards .nav-card-title { align-self: end; } .nav-plan-cards .nav-card-meta { align-self: start; } /* ══ 9. NAVIGATION, DRAWER ═══════════════════════════════════ */ .offcanvas-swc { background-color: var(--color-forest); color: var(--color-paper); --c-heading: var(--color-paper); --c-text: var(--color-sage); --c-eyebrow: var(--color-gold-light); --c-rule: var(--line-dark); } .logo-offcanvas { height: 42px; width: auto; } .offcanvas-link { font-family: var(--font-heading); font-size: clamp(23px, 4.4vh, 32px); color: var(--color-paper); padding: 8px 0; min-height: 44px; display: flex; align-items: center; } .offcanvas-link:hover { color: var(--color-gold-light); } .btn-close-swc { width: 46px; height: 46px; background: transparent; border: 0; color: var(--color-paper); font-size: 26px; line-height: var(--lh-flat); cursor: pointer; margin-left: auto; } /* The drawer reuses the disclosure primitive for its two mega sections, so the mobile menu needs no JavaScript of its own. */ .offcanvas-swc .disclosure > summary { font-size: clamp(23px, 4.4vh, 32px); color: var(--color-paper); padding: 8px 0; } .offcanvas-swc .disclosure a { display: flex; align-items: center; min-height: 44px; padding: 4px 0 4px var(--sp-20); color: var(--color-sage); font-size: var(--fs-form); } .offcanvas-swc .disclosure a:hover { color: var(--color-gold-light); } /* ══ 10. FOOTER ══════════════════════════════════════════════ */ .footer-swc { background: linear-gradient(180deg, var(--color-night-soft) 0%, var(--color-night) 55%); border-top: 1px solid var(--a-gold-30); color: var(--color-sage); --c-text: var(--color-sage); --c-rule: var(--line-dark); } .footer-swc a { color: var(--color-footer-link); } .footer-swc a:hover { color: var(--color-gold-light); } .logo-footer { height: 62px; width: auto; } .footer-heading { font-size: var(--fs-micro); font-weight: var(--fw-label); letter-spacing: var(--ls-heading); text-transform: uppercase; color: var(--color-gold); } .footer-link { font-size: var(--fs-small); padding: var(--sp-10) 0; min-height: 44px; display: flex; align-items: center; gap: var(--sp-10); } .footer-bottom { margin-top: var(--sp-40); border-top: 1px solid var(--line-dark); font-size: var(--fs-label); color: var(--color-sage); } .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; } /* ══ 11. FLOATING CTAs ═══════════════════════════════════════ */ .wa-float { position: fixed; right: 22px; bottom: 22px; z-index: var(--z-float); width: 56px; height: 56px; border-radius: var(--r-round); background-color: var(--color-green); color: var(--color-white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-float); transition: transform var(--t-fast) ease; } .wa-float:hover { transform: scale(1.08); color: var(--color-white); } .wa-float::before, .wa-float::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-round); background-color: var(--color-green); z-index: -1; animation: swcWave 2.4s ease-out infinite; } .wa-float::after { animation-delay: .8s; } @keyframes swcWave { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.85); opacity: 0; } 100% { transform: scale(1.85); opacity: 0; } } .mobile-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: none; gap: var(--sp-10); padding: var(--sp-10) 12px calc(var(--sp-10) + env(safe-area-inset-bottom)); background-color: var(--a-night-92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line-dark); } .mobile-cta-bar > * { flex: 1; } @media (max-width: 991.98px) { .mobile-cta-bar { display: flex; } .scroll-cue { display: none; } .wa-float { display: none; } /* Reserve the bar's own height at the end of the document, otherwise the bar covers the footer's legal links and nothing scrolls out from under it. */ body { padding-bottom: calc(var(--h-mobile-bar) + env(safe-area-inset-bottom)); } /* Two buttons, a gap and the bar's padding have to fit a 320px screen. */ .mobile-cta-bar > * { min-width: 0; padding-left: var(--sp-10); padding-right: var(--sp-10); letter-spacing: .08em; } } /* ══ 12. MOTION ══════════════════════════════════════════════ Reveal styles are gated on html.js so the page is fully readable with JavaScript off. ═══════════════════════════════════════════════════════════════ */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-reveal) var(--ease-brand), transform var(--t-reveal) var(--ease-brand); } .js .reveal.in { opacity: 1; transform: none; } /* ══ 13. HERO AND BANDS ══════════════════════════════════════ */ .hero-swc { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background-color: var(--color-forest); } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: swcHeroZoom 20s ease-in-out infinite; will-change: transform; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--a-night-62) 0%, var(--a-night-12) 32%, var(--a-night-30) 42%, var(--a-night-80) 100%); } .hero-content { position: relative; z-index: var(--z-content); } @media (max-width: 767.98px) { .hero-scrim { background: linear-gradient(to bottom, var(--a-night-62) 0%, var(--a-night-62) 45%, var(--a-night-80) 100%); } } /* The home hero's display line. Since 1.8.3 the page's h1 heads the welcome section below; since 1.8.6 (the owner's request) the hero line is a p, so this carries every heading style itself (face, weight, colour, the h1 size) and the p rule does not win. */ .hero-title { font-family: var(--font-heading); font-weight: var(--fw-heading); color: var(--c-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); text-wrap: balance; } /* An h2 set at the h3 size: for headings that are a section's top level in the outline but sit as small labels on the page (since 1.8.3, the home welcome's three pillars, which follow the page's h1 directly, so an h3 would skip a level). */ .h-sub { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: inherit; } @keyframes swcHeroZoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .scroll-cue { position: absolute; left: 50%; bottom: 0; z-index: var(--z-content); width: 3px; height: 54px; overflow: hidden; background-color: var(--a-cream-22); } .scroll-cue span { display: block; width: 3px; height: 54px; background-color: var(--color-gold-light); animation: swcCue 2.6s var(--ease-cue) infinite; } @keyframes swcCue { 0% { transform: translateY(-60%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(60%); opacity: 0; } } /* ══ PAGE HERO ═══════════════════════════════════════════════ The interior-page hero. The home page keeps .hero-swc at full viewport height because arriving is its whole job. An interior page has to show that content continues below the fold, so this one is capped and its content is centred. The photograph sits under a forest wash rather than the neutral night scrim used on the home page, so the image reads as part of the brand instead of a stock picture behind text. ═══════════════════════════════════════════════════════════════ */ .hero-page { position: relative; display: flex; align-items: center; overflow: hidden; min-height: clamp(480px, 66svh, 680px); background-color: var(--color-forest); } /* Two stacked layers. The linear seats the text and darkens the join with the section below; the radial is a vignette that keeps the middle of the photograph readable. Composited they sit near 55% over the centre and 80% at the edges, dark enough for paper text on a busy canopy and light enough that the cottage is still visible, which is the point of using a photograph. */ .hero-page-wash { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--a-night-62) 0%, var(--a-forest-55) 46%, var(--a-night-72) 100%), radial-gradient(90% 78% at 50% 46%, var(--a-forest-05) 0%, var(--a-forest-55) 100%); } .hero-page .breadcrumb-swc { justify-content: center; } /* .breadcrumb-swc sets its own muted colour, which .on-dark cannot reach through a custom property. On a dark ground that lands at 2.09:1, so name it here. */ .on-dark .breadcrumb-swc { color: var(--color-sage); } /* Over a hero photograph sage fell to 1.8:1 where the sky is pale. */ .hero-page .breadcrumb-swc { color: var(--color-paper); } @media (max-width: 575.98px) { .hero-page-wash { background: linear-gradient(to bottom, var(--a-night-80) 0%, var(--a-night-72) 46%, var(--a-night-80) 100%); } } .band-swc { position: relative; min-height: min(88vh, 760px); display: flex; align-items: center; overflow: hidden; background: linear-gradient(135deg, var(--color-forest-deep) 0%, var(--color-canopy) 52%, var(--color-night) 100%); } .band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .band-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--a-night-82), var(--a-night-45) 46%, var(--a-night-10)); } .band-right .band-scrim { background: linear-gradient(270deg, var(--a-night-82), var(--a-night-45) 46%, var(--a-night-10)); } .band-content { position: relative; z-index: var(--z-content); } .band-content .lead-sub { color: var(--color-paper); } @media (max-width: 991.98px) { .band-scrim, .band-right .band-scrim { background: linear-gradient(to bottom, var(--a-night-62) 0%, var(--a-night-80) 100%); } } /* ══ 14. VENDOR OVERRIDES ════════════════════════════════════ ⚠ THE ONLY PLACE !important AND DEEP SELECTORS ARE ALLOWED. Bootstrap and Owl both ship selectors the theme layer cannot reach from a flat class. Owl's own rules run at (0,3,1), which is why the `button` element has to stay in these selectors. Everything above this line is the theme layer. Keep it clean. See R3 in docs/07-CORRECTIONS.md. ═══════════════════════════════════════════════════════════════ */ /* ── Bootstrap: dropdown, used by the navigation ───────────── Bootstrap paints its own surface, arrow and padding onto .dropdown-menu. Strip it back so .nav-panel can own the look. */ .navbar-swc .dropdown-menu { /* No padding here. .nav-panel owns it; this rule used to zero it from below. */ margin-top: var(--sp-10); font-size: inherit; color: inherit; } /* ── Bootstrap: offcanvas ────────────────────────────────── */ .offcanvas-swc.offcanvas { background-color: var(--color-forest); } /* ── Bootstrap: g-5 rows on phones ────────────────────────── The 3rem gutter gives a -24px row margin against the container's 12px padding, so every g-5 row ran 12px past the screen on both sides (hidden only by overflow-x: clip). The vertical gutter stays 3rem. */ @media (max-width: 575.98px) { .row.g-5 { --bs-gutter-x: var(--sp-24); } } /* ── Bootstrap: form controls ─────────────────────────────── */ @media (max-width: 767.98px) { .form-swc .form-control, .form-swc .form-select { font-size: var(--fs-body) !important; } } .form-swc .form-control, .form-swc .form-select { font-size: var(--fs-form); background-color: var(--color-white); border: 1px solid var(--line-forest); border-radius: var(--r-input); min-height: 48px; padding: var(--sp-10) 14px; transition: border-color var(--t-fast) ease; } .form-swc .form-control::placeholder { color: var(--color-muted); } .form-swc .form-control:focus, .form-swc .form-select:focus { border-color: var(--color-green); box-shadow: var(--ring-focus); outline: 2px solid transparent; /* keeps a visible ring in forced-colours mode */ outline-offset: 2px; } /* ── Bootstrap: border utility on the room card ───────────── */ .card-swc .border-top { border-top-color: var(--line-light) !important; } /* ── Owl: core hides the carousel until its JS runs ───────── */ html:not(.js) .owl-carousel { display: block; } html:not(.js) .owl-carousel .img-tile { margin-bottom: var(--sp-15); } /* ── Owl: nav buttons. Owl's own rule is .owl-carousel .owl-nav button.owl-prev at (0,3,1), so `button` must stay in the selector or background, colour and border are all lost. ───────────────────────────── */ .owl-theme .owl-nav { margin-top: var(--sp-24); } .owl-theme .owl-nav button[class*='owl-'] { width: 46px; height: 46px; margin: 0 6px; border-radius: var(--r-round); border: 1px solid var(--a-forest-25); background: transparent; color: var(--color-forest); font-size: 18px; line-height: var(--lh-flat); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--t-fast) ease; } .owl-theme .owl-nav button[class*='owl-']:hover { background-color: var(--a-forest-06); color: var(--color-forest); } .on-dark .owl-theme .owl-nav button[class*='owl-'], .section-forest .owl-nav button[class*='owl-'] { border-color: var(--a-paper-35); color: var(--color-paper); } /* Arrows overlaid on the image, cottage-experience slider */ .owl-overlay-nav .owl-nav { position: absolute; top: var(--sp-16); right: var(--sp-16); margin: 0; z-index: var(--z-overlay); display: flex; gap: var(--sp-10); } .owl-overlay-nav .owl-nav button[class*='owl-'] { width: 44px; height: 44px; margin: 0; border: 1px solid var(--a-paper-35); background-color: var(--a-night-45); color: var(--color-paper); } .owl-overlay-nav .owl-nav button[class*='owl-']:hover { background-color: var(--a-night-72); color: var(--color-paper); } /* ── Owl: equal-height review cards under autoWidth. Never give the figure width:100% here. Owl measures the child to size the item, so a full-width child collapses the strip. ── */ .owl-reviews .owl-stage { display: flex; } .owl-reviews .owl-item { display: flex; flex: none; } /* ── Owl: core forces .owl-item img to width:100% ─────────── */ .owl-carousel .owl-item img.avatar-swc { width: 44px; } /* ── Contact Form 7 skin. The home page booking form. The shortcode's html_class gives the form .form-swc, so everything here is scoped to it. CF7's own response rule is .wpcf7 form .wpcf7-response-output at (0,2,1), hence the !important. ───────────────────────────────────────── */ .form-swc .wpcf7-form-control-wrap { display: block; } /* CF7 wraps each control in an inline span */ .form-swc .wpcf7-not-valid-tip { font-size: var(--fs-micro); color: var(--color-bark); margin-top: 6px; } .form-swc .form-control.wpcf7-not-valid { border-color: var(--color-bark); } .form-swc .wpcf7-response-output { border: 1px solid var(--c-rule) !important; border-radius: var(--r-input); padding: var(--sp-15) !important; margin: var(--sp-20) 0 0 !important; font-size: var(--fs-form); } /* The spinner CF7's script adds after the submit button would take a row of its own in the .d-grid. The button dims instead. */ .form-swc .wpcf7-spinner { display: none; } .form-swc.submitting .wpcf7-submit { opacity: .65; cursor: progress; } /* ══ 14. CAROUSEL CONTROLS, MAP FRAME, OWL FALLBACK ══════════ */ /* WCAG 2.2.2. Owl's own autoplayHoverPause is mouse-only, so main.js adds a real button and this styles it. */ .carousel-pause { position: absolute; right: 0; bottom: 100%; z-index: 2; margin-bottom: var(--sp-10); border: 1px solid var(--line-light); border-radius: 2px; background-color: var(--color-white); color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; min-height: 44px; padding: 0 var(--sp-20); cursor: pointer; } .carousel-pause:hover { background-color: var(--color-paper); } /* The pause button sits above its carousel. Where the home page's cottage-experience slider stacks under its text (below 992px), the row's gutter alone left the button 6px into the last line of copy, so the slider takes a little more room. */ @media (max-width: 991.98px) { .owl-exp, .owl-reviews { margin-top: var(--sp-16); } } .on-dark .carousel-pause, .section-forest .carousel-pause, .section-canopy .carousel-pause, .section-night .carousel-pause { background-color: transparent; border-color: var(--line-dark); color: var(--color-paper); } /* The map iframe used to carry an inline style attribute. */ .map-frame { border: 0; } .map-static { position: relative; } .map-static:focus { outline: none; } .map-static:focus-visible { box-shadow: var(--ring-focus); } /* Owl's vendor CSS hides .owl-carousel until its own script adds .owl-loaded. When that script fails to load, the cottage-experience and review sections disappear entirely. Falling back to a plain stack keeps the content. */ .owl-carousel:not(.owl-loaded) { display: block; } /* A horizontally scrolling table has to be reachable by keyboard. main.js gives these a tabindex; this makes the focus visible. */ .table-wrap:focus { outline: none; } .table-wrap:focus-visible { box-shadow: var(--ring-focus); } /* The skip link had no focus styling and landed under the fixed navbar. */ .visually-hidden-focusable:focus { position: fixed; top: var(--sp-10); left: var(--sp-10); z-index: calc(var(--z-nav) + 1); width: auto; height: auto; padding: var(--sp-10) var(--sp-20); border-radius: 2px; background-color: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; box-shadow: var(--shadow-nav); } /* Type specimen on components.html: looks like an h1 without being a second one. */ .h1-sample { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--color-bark); } /* ══ 15. MARKED LISTS ════════════════════════════════════════ .list is the site's bullet list: every plain list of points in the page copy carries it, and the bullets of blog posts and other editor content take the same marker. .list-marked with .list-yes or .list-no is for included / not included pairs. .related-list is built for links and gives plain text items no marker at all, so a mixed list rendered some rows bordered and some bare. The .list-marked markers are DRAWN, not typed. A glyph in content: would be announced by some screen readers as "check mark" on every line; these announce nothing, and the Included and Not Included headings above each list already carry the meaning. ═══════════════════════════════════════════════════════════════ */ /* The bullet: a small gold diamond, the gold of .divider-gold, so a list reads as one of the page's editorial marks rather than the browser's black disc. It is the list's OWN marker, an image (--list-marker in :root), not a drawn ::before. A ::before needs list-style: none, and then Safari stops announcing the list as a list unless every item carries generated text, which in turn adds a silent extra stop per item for NVDA in Chrome and Edge. A marker image avoids both: the list stays a list everywhere, the image prints, and beside a floated photograph it follows the text the way the browser's disc always has. disc is the fallback if the image cannot load. Gold reads on light and on dark alike, so there is no dark-context rule. The text takes --c-text, as paragraphs do, so a list does not read darker than the copy around it. Nested bullets keep the same diamond; the indent shows the level. Chrome and Edge hand the image to Windows screen readers as an unnamed graphic on each item, which NVDA's source shows it skips (read in the source, not heard). Hiding it with li::marker content was tested on 2026-10-07 and held back, because Safari's support for that is too new to measure. Editor content (§17) gets the same marker on its plain and block-editor lists, and in forced colours (Windows contrast themes) both fall back to the disc, also in §17. */ .list { list-style-type: disc; list-style-position: outside; list-style-image: var(--list-marker); margin: 0; padding: 0 0 0 var(--sp-24); color: var(--c-text); } .list li + li { margin-top: var(--sp-10); } /* list-style-image is inherited, so a numbered list inside a bulleted one (in a .list or in editor content) would show diamonds in place of its numbers. :where() keeps this at the weight of a bare ol, so a plugin's own classed ol keeps whatever marker it sets. */ :where(.entry-content, .list) ol { list-style-image: none; } .list-marked { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-15); } .list-marked li { position: relative; padding-left: var(--sp-30); line-height: var(--lh-body); } .list-marked li::before { content: ""; position: absolute; left: 0; box-sizing: border-box; } /* Tick: two borders on a rotated box. */ .list-yes li::before { top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--color-green); border-bottom: 2px solid var(--color-green); transform: rotate(-45deg); } /* Exclusion: a plain rule, quieter than the tick on purpose. */ .list-no li::before { top: .85em; width: 12px; height: 0; border-top: 2px solid var(--color-muted); } .on-dark .list-yes li::before, .section-forest .list-yes li::before, .section-canopy .list-yes li::before, .section-night .list-yes li::before { border-left-color: var(--color-gold); border-bottom-color: var(--color-gold); } .on-dark .list-no li::before, .section-forest .list-no li::before, .section-canopy .list-no li::before, .section-night .list-no li::before { border-top-color: var(--color-sage); } /* The price block is dark green on light. Over a hero photograph every part of it turns light: the rate, and "from", the struck booking-site rate and "/ night, breakfast included", which on light are --color-muted and over the hero wash all but vanish. Size and the strike keep the rate first. It reads --c-heading, paper here, so print (section 16) turns it back to bark. */ .on-dark .price-swc, .on-dark .price-swc small, .on-dark .price-swc s, .on-dark .price-swc .price-per { color: var(--c-heading); } /* ══ 16. GALLERY AND LIGHTBOX ════════════════════════════════ /gallery/, and the four-photograph strip on the home page. Each tile is a real link to the full photograph, so the grid still works with JavaScript off; initGallery() intercepts the click and opens the overlay instead. It takes the first [data-gallery] on the page, so a page carries one grid. ═══════════════════════════════════════════════════════════════ */ .gal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-20); border-bottom: 1px solid var(--line-light); padding-bottom: var(--sp-25); } .gal-filters { display: flex; flex-wrap: wrap; gap: var(--sp-10); } @media (max-width: 575.98px) { .gal-filter { flex: 1 1 auto; justify-content: center; } } .gal-filter { display: inline-flex; align-items: center; gap: var(--sp-10); min-height: 44px; padding: 0 var(--sp-20); border: 1px solid var(--line-light); border-radius: 2px; background-color: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease; } .gal-filter:hover { border-color: var(--color-green); color: var(--color-green-link); } .gal-filter:focus-visible { outline: none; box-shadow: var(--ring-focus); } .gal-filter.is-on { background-color: var(--color-forest); border-color: var(--color-forest); color: var(--color-paper); } .gal-count { font-size: var(--fs-nano); letter-spacing: 0; opacity: .62; } .gal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); } @media (max-width: 767.98px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } } /* The photograph strip (the home page, and each cottage page's own photographs): four across from 768px, two across below that, never one. After the rules above so it wins at every width. Its tiles stand portrait. On the home page the last one is a .gal-more; on a cottage page it is a .gal-link carrying the count of photographs still to come, and a cottage with more than 8 photographs shows two rows. */ .gal-strip { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .gal-strip { grid-template-columns: repeat(4, 1fr); } } .gal-strip .gal-link, .gal-strip .gal-more { aspect-ratio: 3 / 4; } /* Photographs the lightbox steps through but the grid never shows. initGallery() counts every .gal-link in the grid, hidden or not, and loads each full photograph only when it comes up. The thumbnails carry loading="lazy", so hidden they never download at all. */ .gal-extra { display: none; } /* Items fade and rise as they come back from a filter change. The index is set from JavaScript so the stagger follows the order actually on screen. */ .gal-item { --i: 0; } .js .gal-item.is-in { animation: galIn var(--t-reveal) var(--ease-brand) backwards; animation-delay: calc(var(--i) * 26ms); } @keyframes galIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .gal-link, .gal-more { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background-color: var(--a-forest-06); } .gal-link img, .gal-more img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-zoom) var(--ease-brand); } .gal-link:hover img, .gal-link:focus-visible img, .gal-more:hover img, .gal-more:focus-visible img { transform: scale(1.06); } .gal-link:focus-visible, .gal-more:focus-visible { outline: none; box-shadow: var(--ring-focus); } .gal-zoom { position: absolute; right: var(--sp-10); bottom: var(--sp-10); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background-color: var(--a-night-72); color: var(--color-paper); opacity: 0; transform: translateY(6px); transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease-brand); } .gal-link:hover .gal-zoom, .gal-link:focus-visible .gal-zoom { opacity: 1; transform: none; } /* A tile that leads on to /gallery/ rather than opening the lightbox: the last photograph of the home page strip. It is not a .gal-link, so initGallery() leaves its click alone. The label rises out of a forest wash on hover and on keyboard focus, and its gold rule draws out. A touch screen cannot hover, so there the label always shows, on a gradient that leaves the photograph clear above it. The cottage pages put the same label on the last tile of their strip, but that tile stays a .gal-link: it opens the lightbox on its own photograph, and the arrows step on through the .gal-extra items the label counts ("+2 More Photographs"). It carries no .gal-zoom. */ .gal-more { color: var(--color-paper); text-decoration: none; } .gal-link .gal-more-label { color: var(--color-paper); } .gal-more-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-15); padding: var(--sp-20); background-color: var(--a-forest-72); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-link); line-height: var(--lh-body); text-align: center; text-transform: uppercase; opacity: 0; transition: opacity var(--t-fast) ease; } .gal-more-label::before { content: ''; width: 40px; height: 2px; background-color: var(--color-gold); transform: scaleX(.3); transition: transform var(--t-fast) var(--ease-brand); } .gal-more:hover .gal-more-label, .gal-more:focus-visible .gal-more-label, .gal-link:hover .gal-more-label, .gal-link:focus-visible .gal-more-label { opacity: 1; } .gal-more:hover .gal-more-label::before, .gal-more:focus-visible .gal-more-label::before, .gal-link:hover .gal-more-label::before, .gal-link:focus-visible .gal-more-label::before { transform: none; } @media (hover: none) { .gal-more-label { justify-content: flex-end; background: linear-gradient(to top, var(--a-night-72), var(--a-night-00) 70%); opacity: 1; } .gal-more-label::before { transform: none; } } .gal-empty { padding-top: var(--sp-50); text-align: center; color: var(--color-muted); } /* ── Lightbox ───────────────────────────────────────────────── Built by initGallery(), so there is nothing in the markup to confuse a reader without JavaScript. */ .gal-lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 40px); background-color: var(--a-night-92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--t-nav) ease, visibility 0s linear var(--t-nav); } .gal-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-nav) ease, visibility 0s; } .gal-lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-15); } .gal-lb-img { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: var(--radius); background-color: var(--color-forest); opacity: 0; transform: scale(.972); transition: opacity var(--t-nav) ease, transform var(--t-nav) var(--ease-brand); } .gal-lightbox.is-ready .gal-lb-img { opacity: 1; transform: none; } .gal-lb-cap { font-family: var(--font-body); font-weight: var(--fw-label); font-size: var(--fs-nano); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-gold-light); } .gal-lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--a-cream-22); border-radius: 50%; background-color: var(--a-night-72); color: var(--color-paper); cursor: pointer; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-brand); } .gal-lb-btn:hover { background-color: var(--color-canopy); border-color: var(--a-cream-40); } .gal-lb-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); } .gal-lb-btn:active { transform: scale(.94); } .gal-lb-close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); } .gal-lb-prev { left: clamp(8px, 2vw, 28px); top: 50%; margin-top: -26px; } .gal-lb-next { right: clamp(8px, 2vw, 28px); top: 50%; margin-top: -26px; } @media (max-width: 991.98px) { .gal-lb-prev { left: 50%; margin-left: -66px; top: auto; bottom: clamp(12px, 3vw, 28px); margin-top: 0; } .gal-lb-next { right: 50%; margin-right: -66px; top: auto; bottom: clamp(12px, 3vw, 28px); margin-top: 0; } .gal-lb-img { max-height: 62vh; } } /* Card grids that should sit as close together as the gallery grid does. Bootstrap rows space themselves through these two custom properties, so setting them is the supported way in rather than overriding padding. */ .row.g-tight { --bs-gutter-x: var(--sp-10); --bs-gutter-y: var(--sp-10); } /* .pillar-icon sits centred under the home page pillars. In a left-set card it sits at the left edge instead. */ .pillar-icon-start { margin-left: 0; margin-right: 0; } /* .badge-tag is built to sit on a photograph, white on the image. On a cream section it needs a ground of its own. */ .badge-tag-cream { background-color: var(--color-white); border: 1px solid var(--line-light); } /* A short direct answer set in the heading face, for the band under a page hero. A paragraph, not a heading: the page already has its h1. */ .statement { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--c-heading); } .statement a { color: var(--c-link); text-decoration: none; } /* ══ 16. PRINT ═══════════════════════════════════════════════ The guide pages carry the things a traveller prints or saves as a PDF: ticket prices, bus times, directions. Without this block the screen styles make that print badly in two ways. First, .reveal sits at opacity 0 until the observer adds .in, and a print or a PDF export does not scroll, so everything below the fold prints blank. Second, browsers drop background colours when printing, and the dark sections set light text against them, so .section-forest prints pale grey on white. Both are fixed by reassigning, not by restyling components. ═══════════════════════════════════════════════════════════════ */ @media print { .js .reveal { opacity: 1; transform: none; } /* Fixed and floating chrome has no meaning on paper. */ .navbar-swc, .offcanvas-swc, .wa-float, .mobile-cta-bar, .scroll-cue, .carousel-pause, .gal-lightbox, .visually-hidden-focusable { display: none !important; } /* The mobile bar's clearance goes with it. */ body { padding-bottom: 0; background: none; } /* No background means the dark contexts have to hand back the light ones. */ .section-forest, .section-canopy, .section-night, .on-dark, .footer-swc { background: none; color: var(--color-body); --c-heading: var(--color-bark); --c-text: var(--color-body); --c-eyebrow: var(--color-eyebrow); --c-em: var(--color-bark); --c-link: var(--color-green-link); --c-link-hover: var(--color-green-dark); --c-rule: var(--line-light); } /* Do not break a card, a table row or a heading across two sheets. */ .card-swc, .review-card, .answer-block, .callout, .disclosure, tr { break-inside: avoid; } h1, h2, h3, h4 { break-after: avoid; } /* A carousel prints as whatever slide happened to be showing; let it. */ .owl-nav, .owl-dots { display: none !important; } } /* ══ WordPress additions (build/wp/wp.css) ══ */ /* ══ 17. WORDPRESS ═══════════════════════════════════════════ WordPress-only additions. build/wp-theme.js appends this file to the theme's style.css, after the root style.css, and the static build never loads it. Tokens only, like everything above: no raw hex, no transparent colours outside the root block. Four jobs: 1. the admin bar, which pushes the fixed nav and the drawer down 2. the visually hidden text WordPress core prints 3. editor content on page.php and index.php 4. pagination on index.php and on paged content ═══════════════════════════════════════════════════════════════ */ /* ── 1. Admin bar ──────────────────────────────────────────── Logged in, WordPress fixes its own bar to the top of the window: 32px tall, 46px on narrow screens, painted above everything. The fixed things that sit at the top of the window move under it: the nav, the drawer, the focused skip link and the gallery lightbox (so its close button is not hidden). In-page anchors clear both. --admin-bar holds the bar's height for everything inside body. */ .admin-bar { --admin-bar: 32px; } .admin-bar .navbar-swc { top: var(--admin-bar); } .admin-bar .offcanvas-swc.offcanvas { top: var(--admin-bar); } .admin-bar .visually-hidden-focusable:focus { top: calc(var(--admin-bar) + var(--sp-10)); } .admin-bar .gal-lightbox { top: var(--admin-bar); } html:has(body.admin-bar) { scroll-padding-top: calc(var(--nav-offset) + 32px); } @media screen and (max-width: 782px) { .admin-bar { --admin-bar: 46px; } html:has(body.admin-bar) { scroll-padding-top: calc(var(--nav-offset) + 46px); } } /* At 600px and below the admin bar scrolls away with the page, so once initNav() marks the nav as scrolled, the nav, and the drawer and the lightbox opened from there, go back to the very top of the window. */ @media screen and (max-width: 600px) { .admin-bar .navbar-swc.scrolled, .admin-bar:has(.navbar-swc.scrolled) .offcanvas-swc.offcanvas, .admin-bar:has(.navbar-swc.scrolled) .gal-lightbox { top: 0; } } /* ── 2. Screen-reader text ─────────────────────────────────── Core's standard rule. WordPress prints this class itself, on the pagination heading and elsewhere, and page content may use it. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--color-paper); border-radius: var(--r-btn); box-shadow: var(--shadow-panel); clip: auto !important; clip-path: none; color: var(--color-forest); display: block; font-size: var(--fs-small); font-weight: var(--fw-label); height: auto; left: var(--sp-5); line-height: normal; padding: var(--sp-15) var(--sp-24); text-decoration: none; top: var(--sp-5); width: auto; z-index: 100000; } /* ── 3. Editor content ─────────────────────────────────────── .entry-content wraps the_content() on page.php and index.php. Everything else on the site is the approved markup and needs none of this. Colours come from the context tokens, so the prose would recolour correctly inside a dark section too. */ .entry-content { color: var(--c-text); } .entry-content::after { content: ''; display: table; clear: both; } .entry-content > :first-child { margin-top: 0; } .entry-content > :last-child { margin-bottom: 0; } .entry-content p, .entry-content ul, .entry-content ol, .entry-content dl, .entry-content blockquote, .entry-content figure, .entry-content table, .entry-content pre { margin: 0 0 var(--sp-24); } /* Headings. Only h1 to h4 are styled site-wide; editor content can still hold an h5 or h6, so they take the h4 look rather than none. */ .entry-content h2 { margin: var(--sp-40) 0 var(--sp-20); } .entry-content h3 { margin: var(--sp-30) 0 var(--sp-16); } .entry-content h4 { margin: var(--sp-24) 0 var(--sp-10); } .entry-content h5, .entry-content h6 { margin: var(--sp-24) 0 var(--sp-10); font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--c-heading); } /* Lists. Plain and block-editor bullets take the .list diamond, the same marker image (§15); numbered lists and any plugin's own classed list keep the browser's markers. :where() keeps the rule at the specificity of .entry-content ul. A List block with a background colour gets a wider inset, so the diamond, which sits at the left of the 24px gutter, does not touch the coloured edge. The marker is drawn for 16px text: it stays centred on the first line up to the editor's Medium size (20px), and on a list set to Large or Extra Large it sits low. Lists in posts are body text, so that is accepted rather than falling back to the disc. Forced colours (Windows contrast themes) repaint text and borders but never a marker image, so the diamond would ignore the reader's palette. There the bullet goes back to the disc, which takes the theme's text colour. The rule follows the image rule so it wins. */ .entry-content ul, .entry-content ol { padding-left: var(--sp-24); } .entry-content ul:where(:not([class]), .wp-block-list) { list-style-image: var(--list-marker); } @media (forced-colors: active) { .list, .entry-content ul:where(:not([class]), .wp-block-list, .list) { list-style-image: none; } } .entry-content ul.wp-block-list.has-background { padding-left: calc(var(--sp-24) + var(--sp-20)); } .entry-content li { color: var(--c-text); } .entry-content li + li { margin-top: var(--sp-10); } .entry-content li > ul, .entry-content li > ol { margin: var(--sp-10) 0 0; } .entry-content dt { font-weight: var(--fw-label); color: var(--c-heading); } .entry-content dd { margin: 0 0 var(--sp-10); } /* Links. No underline, like every link on the site (1.8.8); classed links, such as buttons, keep their own look. */ .entry-content a:not([class]) { color: var(--c-link); text-decoration: none; } .entry-content a:not([class]):hover { color: var(--c-link-hover); } .entry-content strong, .entry-content b { font-weight: var(--fw-label); } .entry-content hr { border: 0; border-top: 1px solid var(--c-rule); margin: var(--sp-40) 0; opacity: 1; } /* Images, figures and captions */ .entry-content img { border-radius: var(--radius); } .entry-content figcaption, .entry-content .wp-caption-text, .entry-content .wp-element-caption, .entry-content .gallery-caption { margin-top: var(--sp-10); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-muted); } .wp-caption { max-width: 100%; margin-bottom: var(--sp-24); } .wp-caption img { display: block; } .entry-content .wp-block-image { margin: 0 0 var(--sp-24); } .entry-content .wp-block-image img { border-radius: var(--radius); } .entry-content .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-10); margin: 0 0 var(--sp-24); } .entry-content .gallery-item { margin: 0; } .entry-content .gallery-icon img { width: 100%; } /* Blockquote: the direct-answer rule, set in the quote face. */ .entry-content blockquote { border-left: 2px solid var(--color-gold); padding-left: var(--sp-20); font-family: var(--font-heading); font-size: var(--fs-quote); line-height: var(--lh-quote); color: var(--c-heading); } .entry-content blockquote p { color: inherit; } .entry-content blockquote > :last-child { margin-bottom: 0; } .entry-content blockquote cite, .entry-content blockquote footer { display: block; margin-top: var(--sp-10); font-family: var(--font-body); font-size: var(--fs-small); font-style: normal; color: var(--color-muted); } /* Tables, in the .table-swc look */ .entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-form); } .entry-content th, .entry-content td { text-align: left; vertical-align: top; padding: var(--sp-15); border-bottom: 1px solid var(--c-rule); } .entry-content th { font-size: var(--fs-tiny); font-weight: var(--fw-label); letter-spacing: var(--ls-form); text-transform: uppercase; color: var(--color-muted); } .entry-content .wp-block-table { margin: 0 0 var(--sp-24); overflow-x: auto; } .entry-content .wp-block-table table { margin: 0; } /* Code */ .entry-content code { color: var(--color-bark); font-size: .9em; } .entry-content pre { padding: var(--sp-16); overflow-x: auto; font-size: var(--fs-small); background-color: var(--color-white); border: 1px solid var(--line-light); border-radius: var(--r-sm); } .entry-content pre code { color: inherit; font-size: inherit; } /* Alignment. The content column is .col-lg-8, left-aligned in the container. Wide fills the container: the column is two thirds of the row, so 150% of it, less the half-gutter, is the container's content box. Full fills the window. */ .alignleft { float: left; max-width: 50%; margin: var(--sp-5) var(--sp-24) var(--sp-16) 0; } .alignright { float: right; max-width: 50%; margin: var(--sp-5) 0 var(--sp-16) var(--sp-24); } /* A left-floated photograph keeps 30px clear on its right. The list diamond hangs about 23px before its text, and core's image block gives the figure only 16px (.wp-block-image .alignleft, which loads after this sheet; figure.alignleft outweighs it), so a bullet beside the photograph would touch it or sit on it. A right-floated figure gets its gap back too: .entry-content figure (0 at the sides) would otherwise outweigh .alignright and leave text against the photo. Phones are below: there nothing floats. */ @media (min-width: 576px) { .entry-content .alignleft, .entry-content figure.alignleft { margin-right: var(--sp-30); } .entry-content figure.alignright { margin-left: var(--sp-24); } } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .entry-content .alignwide, .entry-content .alignfull { clear: both; max-width: none; } .entry-content .alignwide { width: 100%; } .entry-content .alignfull { width: 100vw; margin-left: calc(50% - 50vw); } .entry-content .alignfull img, .entry-content .alignfull.wp-block-image img { border-radius: 0; } @media (min-width: 992px) { .entry-content .alignwide { width: calc(150% + 12px); } .entry-content .alignfull { margin-left: calc(75% + 6px - 50vw); } /* A blog post (single.php, .entry-centred) centres its column, so a Wide image reaches out by the same amount on both sides and a Full one starts at the window's edge; the left-aligned sums above would push both off the right of the page. */ .entry-centred .alignwide { margin-left: calc(-25% - 6px); } .entry-centred .alignfull { margin-left: calc(50% - 50vw); } } @media (max-width: 575.98px) { .alignleft, .alignright, .entry-content figure.alignleft, .entry-content figure.alignright { float: none; max-width: 100%; margin: 0 0 var(--sp-24); } } /* Buttons from the block editor, in the .btn-outline look */ .entry-content .wp-block-button__link, .entry-content .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-10); min-height: 48px; padding: var(--sp-16) var(--sp-30); font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); line-height: var(--lh-flat); text-transform: uppercase; text-decoration: none; color: var(--color-forest); background-color: transparent; border: 1px solid var(--a-forest-30); border-radius: var(--r-btn); cursor: pointer; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease; } .entry-content .wp-block-button__link:hover, .entry-content .wp-element-button:hover { color: var(--color-forest); background-color: var(--a-forest-05); border-color: var(--color-forest); } /* ── 4. Post lists and pagination ──────────────────────────── index.php lists entries as .card-swc cards with the excerpt in .entry-summary. the_posts_pagination() on index.php and wp_link_pages() on paged content both render inside .nav-links. */ .entry-summary p { margin: 0 0 var(--sp-16); } .navigation.pagination { margin-top: var(--sp-40); } .page-links { margin-top: var(--sp-40); } .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); } .nav-links .page-numbers, .nav-links .post-page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--sp-15); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-link); text-transform: uppercase; text-decoration: none; color: var(--color-forest); border: 1px solid var(--line-light); border-radius: var(--r-btn); transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; } .nav-links a.page-numbers:hover, .nav-links a.post-page-numbers:hover { background-color: var(--a-forest-05); border-color: var(--color-forest); } .nav-links .current { color: var(--color-paper); background-color: var(--color-forest); border-color: var(--color-forest); } .nav-links .dots { border-color: transparent; } @media print { .navigation.pagination, .page-links { display: none !important; } }