/* ========================================================================= Diocletian's Doorstep — main.css Profile: heritage-stonework (peristyle — walking-tour network branch B1, Split HR, en_GB). Axes: old-style-serif type (1.250 ratio, 600 headings, sentence case, H1 −.005em and H2 flat 0, 1.16 heading leading / 1.65 body, ALL-SMALL-CAPS eyebrows at .10em, oldstyle figures in prose and TABULAR figures in every number that is a fact) / route-strip hero (a drawn route: a full-width band with a 4px primary top rule and a horizontal line of labelled stops — NO card, NO field, NO photograph) / stop-sequence rhythm (the page is a numbered walk; CSS counters so the numbering survives an editor reordering blocks, plus a per-section connecting rail) / tinted-tile cards (0 radius, 1px INSET hairline in primary at 18%, 3px TOP EDGE RULE in accent, tint derived by darkening the surface — and NO index numerals, because the numerals belong to the rhythm axis) / stacked header (three rows: a 1px-ruled CREAM strip, a logo row, then a HAIRLINE row of small-caps nav items — never a dark topbar, never a solid nav band) / stone-course texture (coursed ashlar: regular horizontal courses with vertical joints staggered at two pitches so they never line up). Oxblood primary + deep-teal CTA on warm cream. ⚠ ZERO SHADOW. --shadow-sm/md/lg are all `none` and this is the only branch in the batch with no shadow at all: elevation is carried by --hairline (1px at 14%). Do not reintroduce a box-shadow anywhere — not on cards, not on the header, not on the form. If something must lift, it takes a hairline. Register: a local guiding outfit that draws its own plans. Quiet, exact, unhurried — the site of someone who can tell you which of the five cathedral tickets you actually need and where the shade is at 14:00. Never a photo-led OTA listing, never a "Top 10 Split tours" page. Zero requests: every texture and every diagram is a CSS gradient or a border. There is no url() in this file, no , no icon font and no self-hosted face (self_hosted_font: null — the batch's one WOFF2 exception was already spent on another branch in this batch — see DESIGN-MANIFEST.json self_hosted_font_note for which and why). See DESIGN-MANIFEST.json and walking-tour-network/DESIGN-ALLOCATION.md §5.1 / §5.3 / §5.5 / §5.8 / §7.1. 1. Design tokens (:root) 2. Reset / base (old-style-serif, small-caps eyebrows, figure policy) 3. Layout (container, grid, stone-course coursing on tinted bands) 4. Buttons + links (square plates — stone has no radius) 5. Header / nav / top bar (stacked: cream strip · logo row · hairline nav) 6. Hero (route-strip: 4px top rule, drawn stop line, H1 is the LCP) 7. Trust signals / Open Now 8. Cards + silo grids (tinted-tile) + the four-gate plan diagram 9. FAQ accordion 10. CTA banner 11. Testimonials 12. E-E-A-T 13. Breadcrumbs / prose / blog 14. Footer + mobile sticky bar 15. Utilities / a11y / motion (stop-sequence heads + the connecting rail) 16. Quote wizard (3-step lead form) 17. Directory (off by default) + conversion pack 18. Walk listing: doorstep-card, provider seam, price block, outbound CTA, affiliate disclosure (F3 / F4) ====================================================================== */ /* 1. TOKENS ------------------------------------------------------------- */ :root{ /* ── PERISTYLE · heritage-stonework · Split ──────────────────────────── Palette from DESIGN-ALLOCATION §7.1, measured in research/matrix.json. Reads as a local guiding outfit that draws its own plans: the site of someone who can tell you which of the five cathedral tickets you actually need and where the shade is at 14:00. Never a photo-led OTA listing. Customizer overrides primary/accent/text + their hovers. */ --color-primary:#8C2A21; /* oxblood: the dominant colour — hero band, header, every rule */ --color-accent:#116B60; /* deep teal: every CTA fill (WHITE ink, 6.37:1) */ --color-text:#241A17; /* near-black warm brown (15.1:1 on surface) */ --color-primary-hover:#6E2019; /* deeper oxblood (white ink 11.1:1) */ --color-accent-hover:#0D5449; /* deeper teal (white ink 8.8:1) */ --color-muted:#5A5048; /* warm brown-grey secondary text (7.0:1 on surface) */ --color-surface:#F6F1E7; /* warm cream */ --color-surface-2:#EDE6D8; /* DARKENED cream — tinted-tile derives its tint from the surface, never by tinting the accent (§7.1 delta) */ --color-border:#DDD4C2; --color-white:#ffffff; --color-page:#F6F1E7; --color-success:#116B60; /* Dark family — warm brown-black. Used sparingly; the footer floor only. */ --color-dark:#2E211C; --color-dark-2:#1E1512; --color-on-dark:#F6F1E7; --color-on-dark-muted:#C6B9A9; --color-dark-border:#4A3A32; --color-primary-rgb:140,42,33; --color-accent-rgb:17,107,96; /* ── texture: stone-course ──────────────────────────────────────────── Coursed ashlar, as the Palace is actually built: horizontal courses of uneven length with staggered vertical joints. Horizontals are regular; the verticals must NOT line up, or it reads as a grid rather than as masonry. Tinted bands only, never a full-page wash. */ --sc-course:34px; --sc-ink:color-mix(in srgb, var(--color-text) 7%, transparent); --sc-joint:color-mix(in srgb, var(--color-text) 5%, transparent); --sc-wash: repeating-linear-gradient(to bottom, transparent 0 calc(var(--sc-course) - 1px), var(--sc-ink) calc(var(--sc-course) - 1px) var(--sc-course)), repeating-linear-gradient(to right, transparent 0 118px, var(--sc-joint) 118px 119px), repeating-linear-gradient(to right, transparent 0 73px, var(--sc-joint) 73px 74px); /* ── old-style-serif scale — ratio 1.250 ────────────────────────────── A NEW token, so there is no reuse to differentiate against. Sentence case, 600 headings, H1 tracking -.005em and H2 flat 0. */ --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.25rem; --text-xl:1.5625rem; --text-2xl:1.9531rem; --text-3xl:2.4414rem; --text-4xl:3.0518rem; --text-5xl:3.8147rem; --text-6xl:4.7684rem; --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; /* H1/H2 1.16 — tight for a serif. Body 1.65 — generous, because an old-style serif at reading size needs the leading. */ --lh-tight:1.16; --lh-snug:1.35; --lh-normal:1.65; /* Eyebrows are ALL-SMALL-CAPS at .10em — the widest tracking in the batch, and a third distinct eyebrow register (pilot UPPERCASE, the Zagreb branch lowercase, peristyle small-caps). */ --track-display:-.005em; --track-eyebrow:.10em; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-20:5.5rem; --width-content:720px; --width-wide:1140px; /* Stone does not have a radius. */ --radius-sm:0; --radius:0; --radius-lg:2px; --radius-full:999px; /* ⚠ NO SHADOW ANYWHERE — the only branch in the batch with none. Elevation is carried by a 1px hairline at 14% instead. Do not reintroduce a box-shadow; use --hairline. */ --hairline:1px solid color-mix(in srgb, var(--color-text) 14%, transparent); --shadow-sm:none; --shadow-md:none; --shadow-lg:none; --transition:160ms ease; --header-h:64px; --topbar-h:36px; /* Serif display + a DIFFERENT serif body. fortress/Šibenik also takes a serif body but not the same one (Constantia at second position). */ --font-display:Palatino,'Palatino Linotype','Palatino LT STD','Book Antiqua','URW Palladio L',P052,'Iowan Old Style',Georgia,serif; --font:'Iowan Old Style',Charter,Georgia,'Noto Serif',serif; } /* 2. RESET / BASE ------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;font-family:var(--font);font-size:var(--text-base);line-height:var(--lh-normal);color:var(--color-text);background:var(--color-page);-webkit-font-smoothing:antialiased;} img{max-width:100%;height:auto;display:block;} a{color:var(--color-primary);text-decoration:none;} a:hover{text-decoration:underline;} /* ── typography: old-style-serif (DESIGN-ALLOCATION §5.1) ─────────────────── SENTENCE case throughout — an old-style serif set in caps loses the axis. Weight 600 (Palatino's bold is heavy; on stacks with no semibold 600 resolves to bold, which is intended). Tracking is near-zero because the face's own fit carries it: H1 −.005em, H2/H3 FLAT 0. Leading 1.16 on the display sizes against 1.65 in the body. Sizes are §5.1's declared 1.250 ladder — 2.75 / 2.2 / 1.76 / 1.408 desktop, one step down on mobile — which is the same ratio as the --text-* tokens at a different offset; component sizes below use the tokens. ⚠ No heading rule in this file may carry text-transform:uppercase. The tracked-label register on this branch is ALL-SMALL-CAPS and belongs to eyebrows only. */ h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-tight);font-weight:var(--fw-semibold);letter-spacing:0;color:var(--color-text);margin:0 0 var(--space-4);text-transform:none;} h1{font-size:2rem;letter-spacing:var(--track-display);} h2{font-size:1.76rem;} h3{font-size:1.408rem;line-height:1.25;} h4{font-size:1.125rem;line-height:1.25;} @media(min-width:720px){h1{font-size:2.75rem;} h2{font-size:2.2rem;} h3{font-size:1.76rem;} h4{font-size:1.408rem;}} p{margin:0 0 var(--space-4);} ul,ol{margin:0 0 var(--space-4);padding-left:1.25rem;} /* Content lists keep an ordinary marker in the primary ink. There is no marker GLYPH on this branch — the diamond that replaced every bullet was B4's signature and it does not survive the transform. */ .site-main ul:not([class]) > li::marker,.prose-content ul > li::marker,.entry-content ul > li::marker,.faq__answer ul > li::marker{color:color-mix(in srgb,var(--color-primary) 70%,transparent);} .site-main ol:not([class]) > li::marker,.prose-content ol > li::marker,.entry-content ol > li::marker{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--color-primary);font-variant-numeric:tabular-nums;} /* ── The eyebrow register: ALL-SMALL-CAPS at .10em ───────────────────────── A THIRD distinct register in the batch (the pilot's are UPPERCASE, B4's were lowercase) and it must not collapse into either. `all-small-caps` folds both cases into small capitals, so the authored string can stay sentence case in the markup. Engines without font-variant-caps fall back to uppercase at a reduced size, which is what small caps approximate — never the same rule at full size, because that IS the pilot's register. */ .eyebrow,.hero__eyebrow,.author-box__eyebrow,.card__seam,.site-title__city, .footer-widget__title,.site-footer h3,.topbar,.main-nav > ul > li > a, .silo__heading,.trust-metric__label,.codex__steps__label{ font-variant-caps:all-small-caps;text-transform:none;letter-spacing:var(--track-eyebrow);} @supports not (font-variant-caps: all-small-caps){ .eyebrow,.hero__eyebrow,.author-box__eyebrow,.card__seam,.site-title__city, .footer-widget__title,.site-footer h3,.topbar,.main-nav > ul > li > a, .silo__heading,.trust-metric__label,.codex__steps__label{ text-transform:uppercase;font-size:.86em;} } /* ── The figure policy (§5.1) ────────────────────────────────────────────── OLDSTYLE figures in prose: they sit on the baseline with ascenders and descenders, which is the whole reason to run an old-style serif. */ body{font-variant-numeric:oldstyle-nums;} /* TABULAR figures in every number that is A FACT — times, prices, distances, durations, stop counts, ratings, stop numerals. The numbers are the E-E-A-T substitute on a zero-photo build, so columns of checkable data must align. This list wins over the oldstyle default above. */ .itinerary,.itinerary th,.itinerary td,.time-box,.duration,.distance,.stop-count, .price,.tabular,time,table,.trust-metric__value,.trust-chip,.open-now, .freshness,.hero__logistics,.hero__phone,.hero-strip,.service-card__price, .extra-card__price,.section-head::before,.pagination .page-numbers, .directory__meta,.entry-meta{font-variant-numeric:tabular-nums;} /* 3. LAYOUT ------------------------------------------------------------- */ .container{width:100%;max-width:var(--width-wide);margin:0 auto;padding:0 var(--space-4);} /* section_rhythm: stop-sequence. The rhythm is carried by the NUMBERED SECTION HEAD and the connecting rail between consecutive heads (both in §15) — the page is a numbered walk, not a stack of panels. Sections themselves keep an even vertical measure and only take a tint where the content asks for one. ⚠ Do NOT reintroduce a section-level colour alternation, and do NOT put the two-column split head back: both belong to other branches. */ .section{padding:var(--space-20) 0;} /* ── texture: stone-course (DESIGN-ALLOCATION §5.8) ───────────────────────── Coursed ashlar, as the Palace is actually built. --sc-wash (in :root) draws three layers: one set of REGULAR horizontal courses, and TWO sets of vertical joints at DIFFERENT pitches (118px and 73px) so the verticals never line up on a common multiple within a band. ⚠ If the verticals align it reads as a grid, not masonry — that is the whole test, and it is what separates this token from blueprint-grid. The second pitch is therefore load-bearing: do not "tidy" the two to one value. Tinted bands ONLY: never a full-page wash, never behind body copy on the base surface, never inside a card. Alpha ceiling 7%. The .dp-texture-stone-course prefix is the body-class form the design profile emits; the unprefixed selectors carry the same rules so the wash does not depend on the profile constant being re-seeded. */ .section--tinted,.band--tinted,.dp-texture-stone-course .band--tinted{position:relative;background-color:var(--color-surface-2);background-image:var(--sc-wash);} .section--surface{background-color:var(--color-surface);background-image:none;} /* .section--dark is INERT on this branch. The markup still emits it (see front-page.php), so it is re-cast here as an ordinary BASE-surface section — untinted and untextured. There is no dark surface above the footer floor, no fill, no paper text on dark, no inverted cards. ⚠ Do NOT reintroduce a dark mid-page band — DESIGN-ALLOCATION §7.4. */ .section--dark{position:relative;background-color:var(--color-surface);background-image:none;border-block:0;color:var(--color-text);padding:var(--space-20) 0;} .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--color-text);} .section--dark p{color:var(--color-muted);} .grid{display:grid;gap:var(--space-6);} .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;} @media(min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}} @media(min-width:960px){.grid--3{grid-template-columns:repeat(3,1fr);}.grid--4{grid-template-columns:repeat(4,1fr);}} /* 4. BUTTONS ------------------------------------------------------------ */ /* Square plates — stone does not have a radius (--radius: 0), so nothing here is rounded and the floating pill register is gone. Sentence case at 600 in the display face; the tracked small-caps register belongs to eyebrows and to the nav, not to buttons. The accent is a FILL on the primary CTA, in the header CTA and on the sticky bar; everywhere else it appears as ink. ⚠ No box-shadow and no hover lift: the shadow tokens are `none` on this branch and `transform` is deliberately absent from the transition list. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); padding:var(--space-3) var(--space-6);border-radius:var(--radius);font-family:var(--font-display); font-weight:var(--fw-semibold);text-transform:none;letter-spacing:0; font-size:var(--text-base);border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.25; min-height:44px; transition:background var(--transition),border-color var(--transition),color var(--transition);} .btn:hover{text-decoration:none;} /* Primary CTA — teal fill, WHITE ink (#FFFFFF on #116B60 = 6.37:1). Never lighten this fill, never fade the label: the hover state is DARKER by construction. */ .btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:#FFFFFF;} .btn--primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#FFFFFF;} /* Secondary — oxblood fill, cream ink. */ .btn--secondary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-dark);} .btn--secondary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff;} /* Ghost / outline on a LIGHT surface — graphite rule + graphite ink. */ .btn--ghost{background:transparent;border-color:var(--color-primary);color:var(--color-primary);} .btn--ghost:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;} /* .btn--on-dark is a donor inheritance: this build has no dark band for it to sit on, so it renders as a quiet outline on bone. Kept (the markup still emits it in the hero and the CTA banner) rather than left invisible as a bone rule on a bone surface. */ .btn--on-dark{background:transparent;border-color:color-mix(in srgb,var(--color-text) 38%,transparent);color:var(--color-text);} .btn--on-dark:hover{background:var(--color-text);border-color:var(--color-text);color:var(--color-surface);} .btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);} .btn--block{width:100%;} .btn svg{width:1.1em;height:1.1em;} /* 5. HEADER (stacked) --------------------------------------------------- */ /* header: stacked — the ONE axis shared with the eldora structural donor, so the rendering delta is required rather than optional (DESIGN-ALLOCATION §7.1). eldora's is a DARK industrial utility topbar over a logo row over a FULL-WIDTH nav band. peristyle's is three rows with an entirely different weight distribution: ROW 1 — a 1px-RULED CREAM STRIP carrying only the enquiry link and the language note. No phone, no dark fill, no reversed text. ROW 2 — the logo row on cream, closed by a hairline. ROW 3 — a HAIRLINE ROW of small-caps nav items. Not a solid band: the page colour runs straight through it and the only ink is the type and the two rules that fence it. ⚠ B4's floating 999px pill is gone in full — no detached container, no radius, no shadow, no pill items and no pill hover fills. Do not put a border-radius back on .site-header. JS hooks unchanged: .site-header, .menu-toggle, .main-nav, .menu-item-has-children; JS still toggles .is-shrunk on scroll. */ /* ROW 1 — the ruled cream strip. */ .topbar{background:var(--color-surface);color:var(--color-muted);font-size:var(--text-xs); border-top:var(--hairline);border-bottom:var(--hairline);min-height:var(--topbar-h);} .topbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2) var(--space-6);padding:var(--space-2) var(--space-4);} .topbar a{color:var(--color-text);display:inline-flex;align-items:center;gap:var(--space-2);} .topbar a:hover{color:var(--color-primary);} .topbar svg{width:1em;height:1em;} .topbar__afterhours{color:var(--color-muted);} /* The strip carries the ENQUIRY LINK and the LANGUAGE NOTE and nothing else. The donor's markup still emits a click-to-call and a click-to-text in this row; both are suppressed here rather than shouted quietly, because a phone number in the strip is eldora's utility-topbar signature and this branch must not read as that. Conversion is unaffected: the phone stays in the hero, in the footer and on the mobile sticky bar. ⚠ MARKUP FOLLOW-UP (not done here, CSS-only pass): header.php should emit .topbar__enquiry and .topbar__note directly instead of relying on this suppression. Both are styled below for the day it does. */ .topbar a[href^="tel:"],.topbar a[href^="sms:"]{display:none;} .topbar__enquiry{font-weight:var(--fw-semibold);} .topbar__note{color:var(--color-muted);} /* ROWS 2 + 3 — the header itself. Flush, full-width, cream, square. */ .site-header{position:sticky;top:0;z-index:100; width:100%;max-width:none;margin:0; background:var(--color-surface); border:0;border-bottom:var(--hairline); border-radius:0; padding:0; transition:border-color var(--transition);} /* Scroll state: the strip cannot lift (there is no shadow on this branch), so it firms its bottom rule instead. It never changes shape. */ .site-header.is-shrunk{border-bottom:1px solid color-mix(in srgb,var(--color-text) 26%,transparent);} .site-header.is-shrunk .site-header__inner{padding-block:var(--space-2);} /* ROW 2 — the logo row, closed by a hairline against the nav row. */ .site-header__brand{background:transparent;border-bottom:var(--hairline);} .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:52px;padding:var(--space-3) var(--space-4);} .site-branding{display:flex;align-items:center;} /* The wordmark stacks: the name on one line, the city as a small-caps note beneath it. B4 had to put these on a single baseline to fit inside a pill; there is no pill here, so the mark gets its two lines back. */ .site-title{font-family:var(--font-display);margin:0;line-height:1.14;} .site-title a{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.1em;color:var(--color-text);font-size:1.1875rem;font-weight:var(--fw-semibold);letter-spacing:var(--track-display);line-height:1.14;} .site-title a:hover{color:var(--color-primary);text-decoration:none;} .site-title__lead{font-size:1.1875rem;font-weight:var(--fw-semibold);letter-spacing:var(--track-display);line-height:1.14;} .site-title__city{font-size:var(--text-xs);font-weight:var(--fw-normal);line-height:1.14;color:color-mix(in srgb,var(--color-text) 66%,transparent);} .site-branding .custom-logo{max-height:38px;width:auto;} /* ROW 3 — the hairline nav row. Transparent: the cream page runs through it and the row is fenced by type, not by fill. */ .site-header__nav{background:transparent;} .main-nav{display:flex;align-items:center;gap:var(--space-2);} .main-nav > ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-6);margin:0;padding:0;} .main-nav li{position:relative;} /* Small-caps items. No plate, no pill, no fill on any state — the marker is a 1px rule under the item, thickening to 2px on the current page. */ .main-nav > ul > li > a{color:var(--color-text);font-family:var(--font-display);font-size:.9375rem;font-weight:var(--fw-semibold);white-space:nowrap;display:block;padding:.65rem 0;border-radius:0;border-bottom:2px solid transparent;transition:color var(--transition),border-color var(--transition);} .main-nav > ul > li > a:hover,.main-nav > ul > li > a:focus-visible{color:var(--color-primary);border-bottom-color:color-mix(in srgb,var(--color-primary) 45%,transparent);text-decoration:none;} .main-nav > ul > li > a[aria-current="page"]{color:var(--color-primary);border-bottom-color:var(--color-primary);text-decoration:none;} /* The header CTA is the one filled element in the three rows — a square teal plate with white ink. One small fill does not make the row a band. */ .dds-header-cta{display:inline-flex;align-items:center;min-height:38px;font-family:var(--font-display);font-size:.875rem;font-weight:var(--fw-semibold);text-transform:none;letter-spacing:0;color:#FFFFFF;background:var(--color-accent);border:1px solid var(--color-accent);border-radius:var(--radius);padding:.4rem 1rem;text-decoration:none;transition:background var(--transition),border-color var(--transition);} .dds-header-cta:hover,.dds-header-cta:focus-visible{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#FFFFFF;text-decoration:none;} /* Caret on parent items with a dropdown. */ .main-nav .menu-item-has-children > a::after{content:"";display:inline-block;width:.36em;height:.36em;margin-left:.45em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--transition);} /* Submenu — a square cream sheet on a hairline, dropped flush under the row. No radius and no shadow: it is fenced by its rule alone. */ .main-nav .sub-menu{list-style:none;margin:0;padding:var(--space-2);position:absolute;top:100%;left:0;min-width:250px;background:var(--color-surface);border:var(--hairline);border-radius:0;display:none;flex-direction:column;z-index:60;} @media(min-width:960px){ .main-nav li:hover > .sub-menu,.main-nav li:focus-within > .sub-menu{display:flex;} } /* Submenu items are reading text, not labels: body face, sentence case, no small caps — so the small-caps register stays exclusive to the top row. */ .main-nav .sub-menu a{white-space:normal;padding:var(--space-2) var(--space-3);border-radius:0;font-family:var(--font);font-size:var(--text-sm);text-transform:none;font-variant-caps:normal;letter-spacing:normal;font-weight:var(--fw-normal);color:var(--color-text);} .main-nav .sub-menu a:hover{background:var(--color-surface-2);color:var(--color-primary);text-decoration:none;} .header-actions{display:flex;align-items:center;gap:var(--space-3);} .header-search form{display:flex;} .menu-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:var(--space-2);} .menu-toggle span{width:24px;height:2px;background:var(--color-text);display:block;transition:var(--transition);} @media(max-width:959px){ /* Below the nav breakpoint the three rows stay three rows: the strip, the logo row with the burger in it, and the nav row — which collapses into a square drawer under the header rather than a rounded sheet. */ .site-header__nav > .container{padding:0;} .main-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0; background:var(--color-surface);border-bottom:var(--hairline);border-radius:0; max-height:calc(100vh - var(--header-h) - var(--space-8));overflow-y:auto;padding:var(--space-2) var(--space-4) var(--space-4);} .main-nav.is-open{display:flex;} .main-nav > ul{flex-direction:column;flex-wrap:nowrap;gap:0;padding:0;align-items:stretch;} .main-nav > ul > li + li{border-top:var(--hairline);} .main-nav > ul > li > a{display:block;padding:var(--space-3) 0;white-space:normal;min-height:44px;border-bottom:0;} .main-nav > ul > li > a[aria-current="page"]{border-left:2px solid var(--color-primary);padding-left:var(--space-3);} .main-nav .menu-item-has-children > a::after{float:right;margin-top:.5em;} .main-nav .sub-menu{position:static;display:none;border:0;border-radius:0;padding:0 0 var(--space-2) var(--space-4);min-width:0;background:transparent;} .main-nav .menu-item-has-children.is-open > .sub-menu{display:flex;} .main-nav .menu-item-has-children.is-open > a::after{transform:rotate(-135deg);} .main-nav .sub-menu a{padding:var(--space-2) var(--space-3);color:var(--color-muted);} .main-nav .sub-menu a:hover{background:transparent;color:var(--color-primary);} .dds-header-cta{display:inline-flex;justify-content:center;margin-top:var(--space-4);padding:var(--space-3) 1rem;} } @media(min-width:960px){ .menu-toggle{display:none;} /* THE THIRD ROW, at width. The brand row and the nav row stay STACKED — they are never collapsed into one line, which is what separates this from every single-row header in the network. The CTA is the last child of .main-nav, so the row is one flex line: items left, CTA right. */ .main-nav{justify-content:space-between;gap:var(--space-6);width:100%;} .main-nav > ul{flex-wrap:nowrap;} .site-header__inner{min-height:60px;} } /* 6. HERO (route-strip) ------------------------------------------------- */ /* hero: route-strip — a NEW token (DESIGN-ALLOCATION §5.3). The hero is a DRAWN ROUTE, not a card on a field. B4's boxed card, its lattice field and its corner chip are gone in full: no fill behind the text, no border, no radius, nothing to lift. The composition is one full-width band on --surface closed at the top by a 4px --primary rule, and inside it, in source order: eyebrow (small caps) → H1 → one-sentence deck → THE STRIP → CTA pair. ⚠ LCP IS THE H1 TEXT BLOCK. There is no , no image preload, no background photograph and nothing to fetchpriority — locked decision #3. The strip renders AFTER the H1 in source order precisely so that it can never become the LCP candidate. ⚠ MARKUP FOLLOW-UP (not done here, CSS-only pass): the strip needs an ordered list —
  1. Peristyle
    2. … — emitted in template-parts/content-hero.php between .hero__subtitle and .hero__ctas, and DDS_DESIGN_PROFILE['hero'] in functions.php still reads 'boxed-card', so the body/section classes still say boxed-card. Everything below is therefore bound to .hero itself rather than to .hero--route-strip, so the band renders correctly today and the strip styles the day the list ships. Cap the hero strip at SEVEN stops: the full route lives in the itinerary component further down the page, and a 12-stop strip is unreadable at 360px. */ .hero{position:relative;color:var(--color-text); background-color:var(--color-surface);background-image:none; border-top:4px solid var(--color-primary); padding:var(--space-12) 0 var(--space-16);} /* No card. .hero__inner is a plain stack — the donor's fill, border, radius and padding are all removed rather than merely retuned. */ .hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-6); background:none;border:0;border-radius:0;padding:0;} .hero__content{max-width:64ch;} /* Eyebrow: ALL-SMALL-CAPS at .10em (the case rule lives in §2). */ .hero__eyebrow{display:inline-block;font-family:var(--font-display);color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--text-sm);margin-bottom:var(--space-3);} /* The H1 is the LCP element and it is TEXT. Sentence case, 600, −.005em, 1.16 leading, topping out at §5.1's declared 2.75rem. */ .hero__title{font-family:var(--font-display);font-size:clamp(2rem,5.4vw,2.75rem);font-weight:var(--fw-semibold);text-transform:none;letter-spacing:var(--track-display);line-height:var(--lh-tight);margin-bottom:var(--space-4);color:var(--color-text);} .hero__subtitle{font-size:var(--text-lg);line-height:1.45;margin-bottom:var(--space-6);color:var(--color-muted);max-width:56ch;} .hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-5);align-items:center;} /* The phone reads as a fact, not as a shout: display face, tabular figures, oxblood ink on cream. */ .hero__phone{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-lg);letter-spacing:0;color:var(--color-primary);line-height:1;min-height:44px;} .hero__phone:hover{color:var(--color-primary-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;} .hero__phone svg{width:1em;height:1em;flex:none;} /* ── THE STRIP ───────────────────────────────────────────────────────────── A line of labelled stops, drawn. Discs sit on --surface at z-index 1 so the connecting rule reads as passing BEHIND them. MOBILE-FIRST: the strip starts as a VERTICAL rail (the connecting rule is a 2px column at left:16px, names to the right of each disc) and becomes a horizontal row at 720px. Same DOM, one media query, and it neither clips nor overflows at 320px. The numeral comes from a counter local to the strip, so the markup only has to supply the stop names — and this counter is deliberately NOT the page's `stop` counter, which belongs to the section heads. */ .hero-strip{position:relative;list-style:none;counter-reset:hero-stop; display:flex;flex-direction:column;gap:var(--space-4); margin:var(--space-8) 0 0;padding:0;max-width:56ch;} .hero-strip::before{content:"";position:absolute;z-index:0; left:16px;width:2px;top:17px;bottom:17px; background:var(--color-primary);opacity:.35;} .hero-strip > li{position:relative;z-index:1;counter-increment:hero-stop; display:flex;flex-direction:row;align-items:center;gap:var(--space-3); font-size:.8125rem;line-height:1.3;color:var(--color-text);} .hero-strip > li::before{content:counter(hero-stop);flex:none; width:34px;height:34px;border-radius:50%; border:2px solid var(--color-primary);background:var(--color-surface); display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:.875rem;font-weight:var(--fw-semibold);line-height:1; font-variant-numeric:tabular-nums;color:var(--color-primary);} @media(min-width:720px){ .hero-strip{flex-direction:row;justify-content:space-between;gap:0;max-width:none;} .hero-strip::before{left:auto;top:16px;bottom:auto;inset-inline:17px;width:auto;height:2px;} .hero-strip > li{flex:1 1 0;min-width:0;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding-inline:var(--space-1);} } /* The three-cell logistics strip (walking minutes / stops / gradient) that closes the hero. Hairline-divided cells on the base surface — no tint, no plate: the figures are the content and the rules are the only furniture. Renders only where the markup supplies it. */ .hero__logistics{display:flex;flex-wrap:wrap;gap:0;margin:var(--space-8) 0 0;border-top:var(--hairline);border-bottom:var(--hairline);} .hero__logistics > *{flex:1 1 8rem;padding:var(--space-4) var(--space-4) var(--space-4) 0;} .hero__logistics > * + *{border-left:var(--hairline);padding-left:var(--space-4);} .hero__logistics dt,.hero__logistics .hero__logistics-label{display:block;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--fw-semibold);font-variant-caps:all-small-caps;letter-spacing:var(--track-eyebrow);color:var(--color-muted);} .hero__logistics dd,.hero__logistics .hero__logistics-value{display:block;margin:var(--space-1) 0 0;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-semibold);letter-spacing:0;color:var(--color-text);} /* Optional media (hero--has-media). Nothing in this build ships one — the zero-photo decision is locked and the LCP is the H1 text — but if a page sets a hero image it renders as a square inset BELOW the text, never as a background wash and never behind the route. */ .hero__media{position:relative;z-index:1;margin:var(--space-6) 0 0;max-width:880px;border:var(--hairline);border-radius:0;overflow:hidden;} .hero__media img{width:100%;height:auto;} /* The donor's outline-on-dark button has no dark surface to sit on here. */ .hero .btn--on-dark{border-color:color-mix(in srgb,var(--color-text) 38%,transparent);color:var(--color-text);} .hero .btn--on-dark:hover{background:var(--color-text);border-color:var(--color-text);color:var(--color-surface);} /* Full-width request band directly below the hero — a coursed tinted band, so the enquiry reads as a different surface from the route above it. */ .codex__band{position:relative;background-color:var(--color-surface-2);background-image:var(--sc-wash);padding:var(--space-12) 0 var(--space-16);} .codex__shell{width:100%;max-width:760px;margin:0 auto;} /* Quote form — a cream plate on a hairline, square, with a 3px accent top edge borrowed from the card axis so the two read as one system. No radius, no shadow, no corner glyph. */ .codex-wrap{position:relative;background:var(--color-surface);border:var(--hairline);border-top:3px solid var(--color-accent);border-radius:0;padding:var(--space-8);color:var(--color-text);text-align:left;} .codex-wrap h2{font-size:var(--text-xl);margin-bottom:var(--space-6);} .docket .field{margin-bottom:var(--space-4);} .docket label{display:block;font-weight:var(--fw-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2);color:var(--color-text);} .docket input,.docket select,.docket textarea{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius);font-size:var(--text-base);font-family:inherit;background:#fff;transition:border-color var(--transition);} /* Focus is an OUTLINE, not a ring: this branch has no shadow to spend. */ .docket input:focus,.docket select:focus,.docket textarea:focus{outline:2px solid var(--color-primary);outline-offset:-2px;border-color:var(--color-primary);} .docket textarea{min-height:96px;resize:vertical;} .docket .btn{margin-top:var(--space-2);} .mutecell{position:absolute!important;left:-3000px!important;top:auto!important;width:1px;height:1px;overflow:hidden;} .codex__feedback{margin-top:var(--space-3);font-weight:var(--fw-medium);} .codex__feedback.is-success{color:var(--color-success);} .codex__feedback.is-error{color:var(--color-primary);} .spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.45);border-top-color:#FFFFFF;border-radius:50%;} .is-loading .spinner{display:inline-block;animation:dds-spin .7s linear infinite;} @keyframes dds-spin{to{transform:rotate(360deg);}} .form-fallback{background:var(--color-surface-2);border:var(--hairline);border-radius:0;padding:var(--space-6);text-align:center;color:var(--color-text);} /* 7. TRUST / OPEN NOW --------------------------------------------------- */ /* The trust row sits on the cream page floor, fenced by hairlines — not on a white plate. There is no second light surface on this branch. */ .trust-bar{background:var(--color-surface);border-top:var(--hairline);border-bottom:var(--hairline);} .trust-bar__inner{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:center;justify-content:center;padding:var(--space-6) 0;text-align:center;} .trust-bar__inner>*{position:relative;} @media(min-width:768px){ /* Hairline dividers, 1px — elevation and separation are both carried by the hairline on this branch, so nothing here is thicker than a rule. */ .trust-bar__inner>*+*::before{content:"";position:absolute;left:calc(var(--space-8) / -2);top:50%;transform:translateY(-50%);width:1px;height:32px;background:color-mix(in srgb,var(--color-text) 14%,transparent);} } .trust-bar .trust-badges{padding:var(--space-5) var(--space-4);border-top:var(--hairline);margin-top:var(--space-4);} .trust-rating{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);} .trust-metric{display:flex;flex-direction:column;} .trust-metric__value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-semibold);letter-spacing:var(--track-display);color:var(--color-primary);line-height:1;} .trust-metric__label{font-size:var(--text-sm);color:var(--color-muted);} .trust-chip{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);background:var(--color-surface);border:var(--hairline);border-radius:var(--radius);padding:var(--space-1) var(--space-3);} .trust-badges{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);justify-content:center;align-items:center;} .trust-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:var(--fw-semibold);color:var(--color-text);line-height:1;} .trust-badge svg{width:20px;height:20px;flex:none;color:var(--color-success);} .open-now{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);font-size:var(--text-sm);} .open-now__dot{width:9px;height:9px;border-radius:50%;background:var(--color-muted);} .open-now.is-open .open-now__dot{background:var(--color-success);outline:3px solid color-mix(in srgb,var(--color-success) 35%,transparent);} .open-now.is-closed .open-now__dot{background:var(--color-accent);} /* 8. CARDS / SILO (tinted-tile) + THE FOUR-GATE PLAN -------------------- */ /* cards: tinted-tile — cooperstown-heat-pump shipped this token as "flat solid-tint tiles, no border/shadow, 6px radius, LARGE INDEX NUMERALS". peristyle's delta is all four of these, and they are required together (DESIGN-ALLOCATION §7.1): · 0 RADIUS — stone does not have a radius; · a 1px INSET HAIRLINE in primary at 18%, drawn inside the tile; · a 3px TOP EDGE RULE in accent; · the tint derived by DARKENING --color-surface-2 (itself the darkened cream), never by tinting the accent. ⚠ AND NO INDEX NUMERALS AT ALL. The numerals belong to the rhythm axis on this branch (§15), and repeating them on cards would double-number the page. B4's numbered tile column, its CSS counter and its corner chip are all deleted — do not put a counter back on .card. ⚠ NO HOVER LIFT and NO SHADOW: `transform` and `box-shadow` are both deliberately absent. On hover the tile deepens its accent rule and firms its hairline; nothing moves and nothing floats. */ .card{--card-tint:color-mix(in srgb,var(--color-surface-2) 94%,var(--color-text)); position:relative;display:flex;flex-direction:column; background:var(--card-tint); border:0;border-top:3px solid var(--color-accent);border-radius:0; overflow:hidden; transition:border-color var(--transition);} /* THE INSET HAIRLINE. A pseudo-element rather than a border, so it sits INSIDE the tile and under the accent edge rule instead of boxing it. */ .card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; border:1px solid color-mix(in srgb,var(--color-primary) 18%,transparent); transition:border-color var(--transition);} .card:hover,.card:focus-within{border-top-color:var(--color-accent-hover);} .card:hover::before,.card:focus-within::before{border-color:color-mix(in srgb,var(--color-primary) 34%,transparent);} /* Zero-photo: the media slot exists only when an image does. No reserved box and no aspect-ratio placeholder to collapse into a grey rectangle. */ .card__media{display:none;} .card__media:has(img){display:block;} .card__media img{width:100%;height:auto;display:block;} /* The provider-name seam row: a rendered, never-collapsible slot at the top of the tile, set as a small-caps line (§5.1's register; the case rule is in §2). On this branch the provider sits BENEATH the title on the page — the seam row carries it above the body only where the title follows it. */ .card__seam{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-4) var(--space-6) 0;font-family:var(--font-display);font-size:var(--text-xs);color:var(--color-muted);} .card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);} .card__title{font-size:var(--text-lg);margin:0;line-height:1.25;} .card__excerpt{color:var(--color-muted);font-size:var(--text-sm);margin:0;text-transform:none;letter-spacing:normal;} .card__meta{color:var(--color-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums;} .card__cta{margin-top:auto;padding-top:var(--space-3);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-semibold);text-transform:none;letter-spacing:0;color:var(--color-accent-hover);display:inline-flex;align-items:center;gap:var(--space-1);} .card__title a{color:inherit;} .card__title a:hover{color:var(--color-primary);text-decoration:none;} .card__cta svg{width:1em;height:1em;flex:none;} /* ── THE FOUR-GATE PLAN ──────────────────────────────────────────────────── The palace in plan: a rectangle with four openings — Golden (north), Silver (east), Iron (west), Brass (south). It is the section divider on the palace silo and one of the branch's four identity carriers. Pure CSS: the four walls are four one-axis gradients, each with a transparent run in the middle, so the GATE IS A GAP IN THE LINE rather than a drawn shape. No SVG file, no image, no border-radius, no shadow. Verified basis: the four named gates of Diocletian's Palace. The plan is schematic — it is not a survey drawing and must not gain streets, towers or a peristyle, which would turn a motif into a factual claim. */ .gate-plan,.silo{ --gp-w:158px; --gp-h:78px; --gp-ink:color-mix(in srgb,var(--color-primary) 55%,transparent); --gp-gap-h:38%; --gp-gap-v:34%;} @media(min-width:560px){.gate-plan,.silo{--gp-w:196px;--gp-h:96px;}} .gate-plan,.silo::before{ width:var(--gp-w);height:var(--gp-h); background-repeat:no-repeat; background-image: /* north wall — the opening is the GOLDEN gate */ linear-gradient(to right,var(--gp-ink) 0 var(--gp-gap-h),transparent var(--gp-gap-h) calc(100% - var(--gp-gap-h)),var(--gp-ink) calc(100% - var(--gp-gap-h)) 100%), /* south wall — BRASS */ linear-gradient(to right,var(--gp-ink) 0 var(--gp-gap-h),transparent var(--gp-gap-h) calc(100% - var(--gp-gap-h)),var(--gp-ink) calc(100% - var(--gp-gap-h)) 100%), /* west wall — IRON */ linear-gradient(to bottom,var(--gp-ink) 0 var(--gp-gap-v),transparent var(--gp-gap-v) calc(100% - var(--gp-gap-v)),var(--gp-ink) calc(100% - var(--gp-gap-v)) 100%), /* east wall — SILVER */ linear-gradient(to bottom,var(--gp-ink) 0 var(--gp-gap-v),transparent var(--gp-gap-v) calc(100% - var(--gp-gap-v)),var(--gp-ink) calc(100% - var(--gp-gap-v)) 100%); background-size:100% 1px,100% 1px,1px 100%,1px 100%; background-position:0 0,0 100%,0 0,100% 0;} /* Component form, for a template that wants the diagram inline. Markup:
    Golden… one span per gate, any order. ⚠ MARKUP FOLLOW-UP: no template emits .gate-plan today; the silo instance below is the shipped one and needs no markup at all. */ .gate-plan{position:relative;margin:0 auto;} .gate-plan__gate{position:absolute;font-family:var(--font-display);font-size:.625rem;font-weight:var(--fw-semibold); font-variant-caps:all-small-caps;letter-spacing:var(--track-eyebrow);color:var(--color-muted);white-space:nowrap;line-height:1;} .gate-plan__gate--golden{bottom:calc(100% + .4rem);left:50%;transform:translateX(-50%);} .gate-plan__gate--brass{top:calc(100% + .4rem);left:50%;transform:translateX(-50%);} .gate-plan__gate--iron{top:50%;right:calc(100% + .5rem);transform:translateY(-50%);} .gate-plan__gate--silver{top:50%;left:calc(100% + .5rem);transform:translateY(-50%);} /* Silo block — a coursed tinted field, square, opened by the four-gate plan drawn as its divider. */ .silo{position:relative;margin:var(--space-12) 0;padding:calc(var(--space-20) + var(--gp-h)) var(--space-2) var(--space-12);background-color:var(--color-surface-2);background-image:var(--sc-wash);border-radius:0;border-top:var(--hairline);border-bottom:var(--hairline);} /* The plan itself, centred above the heading. */ .silo::before{content:"";position:absolute;top:var(--space-12);left:50%;transform:translateX(-50%);pointer-events:none;} /* The four labels. They are decorative and generated, so they carry no information the heading does not — the same rule the numbered heads follow. Four pseudo-elements are needed and .silo has only two, so the two on .silo > .container and the one on .silo__heading complete the set; all four resolve against .silo, which is the only positioned ancestor. */ .silo::after,.silo > .container::before,.silo > .container::after,.silo__heading::before{ position:absolute;pointer-events:none; font-family:var(--font-display);font-size:.625rem;font-weight:var(--fw-semibold); font-variant-caps:all-small-caps;letter-spacing:var(--track-eyebrow); color:color-mix(in srgb,var(--color-text) 55%,transparent);white-space:nowrap;line-height:1;} .silo::after{content:"Golden";top:calc(var(--space-12) - .95rem);left:50%;transform:translateX(-50%);} .silo__heading::before{content:"Brass";top:calc(var(--space-12) + var(--gp-h) + .45rem);left:50%;transform:translateX(-50%);} .silo > .container::before{content:"Iron";top:calc(var(--space-12) + (var(--gp-h) / 2) - .35rem);right:calc(50% + (var(--gp-w) / 2) + .5rem);} .silo > .container::after{content:"Silver";top:calc(var(--space-12) + (var(--gp-h) / 2) - .35rem);left:calc(50% + (var(--gp-w) / 2) + .5rem);} .silo__heading{position:static;margin-bottom:var(--space-6);font-size:var(--text-xl);text-align:left;padding-left:var(--space-4);} .silo__links{display:flex;flex-wrap:wrap;gap:0;padding:0 var(--space-4);border-top:var(--hairline);} /* Silo links are ledger rows, not chips: a hairline between each, no fill and no radius. */ .silo__links a{flex:1 1 16rem;padding:var(--space-3) var(--space-4) var(--space-3) 0;border-bottom:var(--hairline);font-size:var(--text-sm);font-weight:var(--fw-normal);color:var(--color-text);transition:color var(--transition);} .silo__links a:hover{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;} /* 9. FAQ ---------------------------------------------------------------- */ .faq{padding:var(--space-20) 0;} /* ── The UNNUMBERED SECTION MARKER ───────────────────────────────────────── Heads that are NOT stops on the walk (the FAQ, the directory, the areas block) cannot take the numeral — only H2-level section heads are numbered (§15) — so they take a short 24px × 3px accent bar ABOVE the line instead. That bar is the card axis's top edge rule at heading scale, which keeps one marker system across the build. ⚠ B4's diamond chip is gone from every one of these heads: no clip-path, no diamond glyph, no rotated square. Do not reintroduce it — the marker glyph was B4's signature and it does not survive the transform. */ .faq__heading,.directory__heading,.local-areas__heading,.dds-walks__heading{position:relative;text-align:left;padding-left:0;padding-top:calc(var(--space-4) + 3px);} .faq__heading::before,.directory__heading::before,.local-areas__heading::before,.dds-walks__heading::before{content:"";position:absolute;left:0;top:0;width:24px;height:3px;background:var(--color-accent);} .faq__heading{margin-bottom:var(--space-8);font-size:var(--text-xl);max-width:760px;margin-left:auto;margin-right:auto;} .faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3);} /* Square plates on a hairline. No radius, no shadow, no fill change on open — the open item firms its rule and nothing lifts. */ .faq__item{border:var(--hairline);border-radius:0;background:var(--color-surface);overflow:hidden;transition:border-color var(--transition);} .faq__item:hover,.faq__item[open]{border-color:color-mix(in srgb,var(--color-text) 28%,transparent);} .faq__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);cursor:pointer;list-style:none;transition:background var(--transition);} .faq__summary::-webkit-details-marker{display:none;} .faq__summary::marker{content:"";} .faq__item[open] .faq__summary{background:var(--color-surface);} .faq__summary:hover .faq-question{color:var(--color-primary);} /* Headings are 600 on this branch, sentence case, 1.16-ish leading. */ .faq-question{font-family:var(--font-display);font-size:var(--text-lg);margin:0;font-weight:var(--fw-semibold);line-height:1.25;transition:color var(--transition);} .faq__chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:0;background:var(--color-surface-2);border:1px solid color-mix(in srgb,var(--color-primary) 18%,transparent);color:var(--color-primary);transition:transform var(--transition),background var(--transition),color var(--transition),border-color var(--transition);} .faq__chevron svg{width:18px;height:18px;transform:rotate(90deg);} .faq__item[open] .faq__chevron{transform:rotate(180deg);background:var(--color-primary);border-color:var(--color-primary);color:#fff;} .faq__answer{padding:0 var(--space-6) var(--space-6);color:var(--color-muted);font-size:var(--text-base);line-height:var(--lh-normal);} .faq__answer p:last-child{margin-bottom:0;} /* 10. CTA BANNER -------------------------------------------------------- */ /* A COURSED TINTED BAND, square, closed at the top by the card axis's 3px accent rule — the page's closing stone. B4's boxed card on a lattice wash is gone: no radius, no lattice, no lift. Still no dark surface: this is the light branch and the footer floor is the only dark thing on the page. */ .cta-banner{position:relative;background-color:var(--color-surface-2);background-image:var(--sc-wash);color:var(--color-text);border:var(--hairline);border-top:3px solid var(--color-accent);border-radius:0;padding:var(--space-16) var(--space-8);text-align:center;margin:var(--space-16) auto;} .cta-banner h2{color:var(--color-text);} .cta-banner p{color:var(--color-muted);margin-bottom:var(--space-6);} .cta-banner__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;} .cta-banner .btn--on-dark{border-color:color-mix(in srgb,var(--color-text) 38%,transparent);color:var(--color-text);} .cta-banner .btn--on-dark:hover{background:var(--color-text);border-color:var(--color-text);color:var(--color-surface);} /* 11. TESTIMONIALS ------------------------------------------------------ */ /* A coursed tinted band — the wash is allowed here because this IS a tinted band. (B4's lattice on the base surface is gone; --sc-wash never runs on --color-surface and never behind body copy on the page floor.) */ .testimonials{position:relative;padding:var(--space-20) 0;background-color:var(--color-surface-2);background-image:var(--sc-wash);} .testimonials__track{display:grid;gap:var(--space-6);} /* Each quote is a square cream plate in the tinted-tile family: 3px accent top edge rule, hairline, no radius, no shadow — and NO marker glyph. The opening mark is a typographic quote in the display face, not a drawn diamond. */ .testimonial{position:relative;background:var(--color-surface);border:var(--hairline);border-top:3px solid var(--color-accent);border-radius:0;padding:var(--space-8) var(--space-6) var(--space-6);} .testimonial::before{content:"\201C";position:absolute;top:calc(var(--space-4) - .1em);left:var(--space-6);font-family:var(--font-display);font-size:2rem;line-height:1;color:color-mix(in srgb,var(--color-primary) 45%,transparent);pointer-events:none;} .testimonial__text{font-size:var(--text-lg);margin-bottom:var(--space-4);} .testimonial__author{font-weight:var(--fw-semibold);} .testimonial__location{color:var(--color-muted);font-size:var(--text-sm);} /* 12. E-E-A-T ----------------------------------------------------------- */ .author-box{display:flex;flex-wrap:wrap;gap:var(--space-6);background:var(--color-surface);border:var(--hairline);border-top:3px solid var(--color-accent);border-radius:0;padding:var(--space-8);margin:var(--space-16) 0;} /* Square portrait, not a disc — stone has no radius, and a circular crop is the OTA-listing tell this branch is built to avoid. */ .author-box__photo img{width:96px;height:96px;border-radius:0;object-fit:cover;} .author-box__body{flex:1;min-width:240px;} /* The same ALL-SMALL-CAPS eyebrow register as the hero — one label system across the build (the case rule itself lives in §2). ⚠ B4's lowercase transform is removed: lowercase was the ZAGREB-BRANCH register and re-declaring it here would collapse the third register back into it. */ .author-box__eyebrow{display:inline-block;font-family:var(--font-display);text-transform:none;letter-spacing:var(--track-eyebrow);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--color-primary);padding:0;} .author-box__name{font-size:var(--text-xl);margin:var(--space-1) 0;} .author-box__creds{color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2);} .author-box__social{display:flex;gap:var(--space-3);margin-top:var(--space-3);} .author-box__social svg{width:1.2em;height:1.2em;} .fact-check{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-3) 0;} .fact-check > svg{width:1.1em;height:1.1em;color:var(--color-success);flex:none;} .fact-check__details{display:inline-flex;align-items:center;} .fact-check__details summary{cursor:pointer;color:var(--color-primary);list-style:none;display:inline-flex;align-items:center;} .fact-check__details summary::-webkit-details-marker{display:none;} .fact-check__details summary::marker{content:"";} .fact-check__details summary svg{width:1.1em;height:1.1em;} .fact-check__panel{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;max-width:min(420px,90vw);background:var(--color-surface);color:var(--color-text);border:var(--hairline);border-radius:0;padding:var(--space-4);z-index:20;} .fact-check__panel p{margin:0 0 var(--space-2);} .fact-check__panel p:last-child{margin-bottom:0;} .projects__grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;} @media(min-width:640px){.projects__grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:960px){.projects__grid{grid-template-columns:repeat(3,1fr);}} .project-card{border:var(--hairline);border-radius:0;overflow:hidden;background:var(--color-surface);} .project-card__images{display:grid;grid-template-columns:1fr 1fr;} .project-card__images figure{margin:0;position:relative;} .project-card__images figcaption{position:absolute;bottom:0;left:0;background:color-mix(in srgb,var(--color-dark-2) 88%,transparent);color:var(--color-on-dark);font-size:var(--text-xs);padding:2px 8px;} .project-card__body{padding:var(--space-6);} .project-card__meta{font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-2);} .credentials{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;padding:var(--space-8) 0;} .credential{display:flex;align-items:center;gap:var(--space-2);border:var(--hairline);border-radius:var(--radius);padding:var(--space-3) var(--space-4);background:var(--color-surface);} .credential svg{width:1.4em;height:1.4em;color:var(--color-primary);} .credential__value{font-weight:var(--fw-semibold);} .awards{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;justify-content:center;padding:var(--space-8) 0;} .awards img{max-height:48px;width:auto;filter:grayscale(1);opacity:.75;transition:var(--transition);} .awards a:hover img,.awards img:hover{filter:grayscale(0);opacity:1;} .team-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;} @media(min-width:640px){.team-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:960px){.team-grid{grid-template-columns:repeat(3,1fr);}} .team-card{text-align:center;background:var(--color-surface);border:var(--hairline);border-top:3px solid var(--color-accent);border-radius:0;padding:var(--space-6);} .team-card__photo img{width:120px;height:120px;border-radius:0;object-fit:cover;margin:0 auto var(--space-3);} .guarantees{display:grid;gap:var(--space-6);grid-template-columns:1fr;} @media(min-width:640px){.guarantees{grid-template-columns:repeat(3,1fr);}} .guarantee{text-align:center;padding:var(--space-6);} .guarantee svg{width:2.4em;height:2.4em;color:var(--color-primary);margin-bottom:var(--space-2);} .freshness{font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-3) 0;} /* 13. BREADCRUMBS / PROSE / BLOG --------------------------------------- */ .breadcrumbs{font-size:var(--text-sm);padding:var(--space-3) 0;background:var(--color-surface-2);border-bottom:1px solid var(--color-border);} .breadcrumbs__list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;} .breadcrumbs__item+.breadcrumbs__item::before{content:"/";margin-right:var(--space-2);color:var(--color-muted);} .content-narrow{max-width:760px;margin-left:auto;margin-right:auto;} .prose-content{max-width:var(--width-content);margin:0 auto;padding:var(--space-12) var(--space-4);font-size:var(--text-lg);} .prose-content.content-narrow{max-width:760px;} .prose-content h2{font-size:var(--text-2xl);margin-top:var(--space-12);} .prose-content h3{font-size:var(--text-xl);margin-top:var(--space-8);} .prose-content h2:first-child,.prose-content h3:first-child{margin-top:0;} .prose-content a{text-decoration:underline;text-underline-offset:2px;} .prose-content img{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin:var(--space-6) 0;} .post-thumb img{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--space-6);} .entry-meta{color:var(--color-muted);font-size:var(--text-sm);margin-bottom:var(--space-6);} .post-list{display:grid;gap:var(--space-8);} .pagination{margin-top:var(--space-12);} .pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;} /* Page numbers are FACTS, so they take tabular figures (the rule is in §2's list) and the display face at 600 — never the oldstyle default, or the column of numerals stops aligning. */ .pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 var(--space-3);border:var(--hairline);border-radius:0;font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--color-text);transition:var(--transition);} .pagination .page-numbers.current{background:var(--color-primary);color:var(--color-on-dark);border-color:var(--color-primary);} .pagination a.page-numbers:hover{background:var(--color-surface-2);color:var(--color-primary-hover);text-decoration:none;} /* Read More (collapsible) — JS-gated so no-JS shows everything. */ .readmore__btn{display:none;margin-top:var(--space-6);} .readmore--center{text-align:center;} .readmore--right{text-align:right;} .readmore__visible,.readmore__hidden,.readmore__inner{text-align:left;} .js .readmore.is-ready .readmore__btn{display:inline-flex;} .js .readmore--block.is-ready .readmore__btn{display:flex;width:100%;} .js .readmore.is-collapsed .readmore__hidden{display:none;} .readmore--height{position:relative;} .js .readmore--height.is-collapsed .readmore__inner{max-height:var(--readmore-h,480px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);} @media(prefers-reduced-motion:no-preference){ .js .readmore--height .readmore__inner{transition:max-height var(--transition);} } /* 14. FOOTER ------------------------------------------------------------ */ /* The footer floor is the ONLY dark surface on this branch (there is no dark feature band mid-page) and it is closed by a 2px primary rule, the same drawn line as the hero's horizon — the composition ends the way it began. */ .site-footer{position:relative;background:var(--color-dark-2);color:var(--color-on-dark-muted);border-top:2px solid var(--color-primary);padding:var(--space-16) 0 var(--space-12);margin-top:var(--space-20);} .site-footer a{color:var(--color-on-dark);} .site-footer a:hover{color:#fff;} .footer-grid{display:grid;gap:var(--space-8);grid-template-columns:1fr;} @media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr;}} /* Footer titles take the ALL-SMALL-CAPS register (§2). ⚠ B4's lowercase transform is removed here too — see the note on .author-box__eyebrow. */ .footer-widget__title,.site-footer h3{color:#fff;font-size:var(--text-base);text-transform:none;letter-spacing:var(--track-eyebrow);font-family:var(--font-display);font-weight:var(--fw-semibold);margin-bottom:var(--space-4);} .footer-tagline{color:var(--color-on-dark);font-weight:var(--fw-semibold);} .site-footer p{margin-bottom:var(--space-2);color:var(--color-on-dark-muted);} .footer-menu,.site-footer ul{list-style:none;padding:0;margin:0;} .footer-menu li{margin-bottom:var(--space-2);} .footer-menu a:hover{color:#fff;text-decoration:underline;} .footer-license{font-size:var(--text-sm);color:var(--color-on-dark-muted)!important;} .footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-4);} .footer-social a{width:40px;height:40px;align-items:center;justify-content:center;border-radius:0;background:rgba(255,255,255,.08);transition:var(--transition);} .footer-social a:hover{background:var(--color-primary);color:#fff;} .footer-social a{display:inline-flex;} .footer-social svg{width:1.4em;height:1.4em;} .footer-bottom{border-top:1px solid var(--color-dark-border);margin-top:var(--space-8);padding-top:var(--space-6);font-size:var(--text-sm);text-align:center;} /* Mobile sticky conversion bar — warm brown-black base, TEAL enquiry action, white ink (#FFFFFF on #116B60 = 6.37:1: never lighten the fill, never fade the label). Closed at the top by a 2px primary rule, the same drawn line as the hero and the footer. No shadow — the rule is the edge. */ .sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--color-dark);border-top:2px solid var(--color-primary);} .sticky-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:var(--color-on-dark);font-family:var(--font-display);font-weight:var(--fw-semibold);} .sticky-bar a+a{border-left:1px solid var(--color-dark-border);} .sticky-bar a:last-child{background:var(--color-accent);color:#FFFFFF;} .sticky-bar svg{width:1.2em;height:1.2em;} @media(min-width:960px){.sticky-bar{display:none;}} body.has-sticky-bar{padding-bottom:64px;} @media(min-width:960px){body.has-sticky-bar{padding-bottom:0;}} /* 15. UTILITIES / A11Y / MOTION ---------------------------------------- */ .skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--color-primary);padding:var(--space-3);z-index:1000;} .skip-link:focus{left:var(--space-3);} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;} :focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;} .text-center{text-align:center;} /* ── section_rhythm: stop-sequence (DESIGN-ALLOCATION §5.5) ──────────────── A NEW token. The page IS a numbered walk, and the mechanism is CSS COUNTERS so the numbering survives an editor reordering blocks — nothing is numbered in the markup and nothing needs renumbering when a section moves. ⚠ B4's split-head is gone in full: no two-column head, no intro column, no rule under both columns and no baseline chip. Do not put the grid back. ⚠ Only H2-level section heads are numbered. A head that carries the page's H1 (archives, the team and reviews pages) opts out below — a page where everything is numbered reads as a form, not a walk. Accessibility: the numeral is decorative and generated, so it is never announced as part of the heading. That is correct, and it is exactly why it must never carry meaning the heading text does not. */ .site-main{counter-reset:stop;} .section-head{position:relative;counter-increment:stop;text-align:left;max-width:none;margin:0 0 var(--space-12);padding-left:0;display:block;} h2.section-head{display:block;margin:0 0 var(--space-8);} /* MOBILE (<720px): the numeral sits ABOVE the heading and the rail is dropped entirely — a rail fights the reading order on a narrow column. */ .section-head::before{content:counter(stop,decimal-leading-zero); position:static;display:block;margin-bottom:var(--space-2); font:var(--fw-semibold) 1.6rem/1 var(--font-display); font-variant-numeric:tabular-nums; color:var(--color-primary);opacity:.5;} .section-head h1,.section-head h2{font-size:1.76rem;margin:0;} .section-head p{color:var(--color-muted);font-size:var(--text-lg);line-height:1.45;margin:var(--space-4) 0 0;max-width:68ch;} .section--dark .section-head p{color:var(--color-muted);} /* Heads that carry the page H1 are not stops on the walk. */ .section-head:has(h1){counter-increment:none;padding-left:0;} .section-head:has(h1)::before{content:none;} .section-head:has(h1)::after{content:none;} @media(min-width:720px){ .section-head{padding-left:4.5rem;} .section-head::before{position:absolute;left:0;top:-.15em;margin:0; font:var(--fw-semibold) 2rem/1 var(--font-display);} .section-head h1,.section-head h2{font-size:2.2rem;} /* THE CONNECTING RAIL — a 1px vertical line in the numeral gutter, drawn PER SECTION rather than as one page-long element. A single page-long rail breaks the moment a section takes a tinted band, so this one spans only the gap BETWEEN consecutive numbered heads and the eye still reads one continuous route down the page. height/top are tied to --space-20 (the section padding) so the two stay in step if the spacing scale changes. */ .section + .section .section-head::after{content:"";position:absolute; left:1rem;width:1px; top:calc(-1 * var(--space-20)); height:var(--space-20); background:var(--color-text);opacity:.16;} .section-head:has(h1){padding-left:0;} } /* Scroll reveal — only with JS + motion allowed. */ .js .reveal{opacity:0;transform:translateY(16px);} @media(prefers-reduced-motion:no-preference){ .js .reveal{transition:opacity .5s ease,transform .5s ease;} .js .reveal.is-visible{opacity:1;transform:none;} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .js .reveal{opacity:1;transform:none;} *{animation-duration:.001ms!important;transition-duration:.001ms!important;} } .no-js .reveal{opacity:1;transform:none;} /* 16. QUOTE WIZARD (3-step lead form) ----------------------------------- */ .walk-codex__head{text-align:center;margin-bottom:var(--space-6);} .walk-codex__title{font-size:var(--text-2xl);margin-bottom:var(--space-2);} .walk-codex__sub{color:var(--color-muted);margin:0;} .codex__steps{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2);margin:0 0 var(--space-8);padding:0;} .codex__steps__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);position:relative;color:var(--color-muted);font-size:var(--text-sm);font-weight:var(--fw-semibold);text-align:center;} .codex__steps__item:not(:first-child)::before{content:"";position:absolute;top:17px;right:50%;left:-50%;height:2px;background:var(--color-border);z-index:0;} .codex__steps__item.is-active::before,.codex__steps__item.is-done::before{background:var(--color-primary);} /* Step numerals are square plates with TABULAR figures. They are the form's own progress counter, not the page's stop sequence — the two never appear in the same column, and this one is authored in the markup rather than generated, so no CSS counter is involved. */ .codex__steps__num{position:relative;z-index:1;width:36px;height:36px;border-radius:0;background:var(--color-surface-2);border:1px solid color-mix(in srgb,var(--color-primary) 18%,transparent);color:var(--color-muted);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;} .codex__steps__item.is-active .codex__steps__num,.codex__steps__item.is-done .codex__steps__num{background:var(--color-primary);border-color:var(--color-primary);color:#fff;} .codex__steps__item.is-active{color:var(--color-text);} .codex__steps__label{line-height:1.2;} .ask-at-the-gate.is-enhanced .codex__steps__item.is-done{cursor:pointer;} @media(max-width:479px){.codex__steps__label{display:none;}} .codex__step+.codex__step{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-border);} .ask-at-the-gate.is-enhanced .codex__step{display:none;margin-top:0;padding-top:0;border-top:0;} .ask-at-the-gate.is-enhanced .codex__step.is-active{display:block;} .codex__step__heading{font-size:var(--text-lg);margin:var(--space-6) 0 var(--space-4);} .codex__step__heading:first-child{margin-top:0;} .codex__grid{display:grid;grid-template-columns:1fr;gap:var(--space-4) var(--space-5);} @media(min-width:560px){.codex__grid{grid-template-columns:1fr 1fr;}} .codex__grid .field{margin-bottom:0;} .field--full{grid-column:1 / -1;} .codex__nav{display:flex;gap:var(--space-3);margin-top:var(--space-8);align-items:center;justify-content:space-between;flex-wrap:wrap;} .codex__nav--end{justify-content:flex-end;} .codex__nav__btn{display:none;} .ask-at-the-gate.is-enhanced .codex__nav__btn{display:inline-flex;} .codex__submit{margin-left:auto;} /* Service option cards (Step 2) — the tinted-tile family: square, hairline, 3px accent top edge rule, no shadow and no lift. */ .service-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);} @media(min-width:560px){.service-grid{grid-template-columns:1fr 1fr;}} .service-card{position:relative;display:flex;flex-direction:column;border:var(--hairline);border-top:3px solid var(--color-accent);border-radius:0;overflow:hidden;cursor:pointer;background:var(--color-surface);transition:border-color var(--transition);} .service-card:hover{border-color:var(--color-text);} .service-card__input{position:absolute;opacity:0;width:1px;height:1px;} .service-card__media{position:relative;aspect-ratio:16/10;background:var(--color-surface-2);display:flex;align-items:center;justify-content:center;color:rgba(var(--color-primary-rgb),.35);} .service-card__media img{width:100%;height:100%;object-fit:cover;} .service-card__tick{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:0;background:var(--color-primary);color:#fff;display:none;align-items:center;justify-content:center;} .service-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1;} .service-card__title{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-lg);line-height:1.25;} .service-card__models{color:var(--color-muted);font-size:var(--text-sm);} .service-card__chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-1) 0;} .chip{font-size:var(--text-xs);font-weight:var(--fw-semibold);background:var(--color-surface-2);border:var(--hairline);border-radius:var(--radius);padding:3px 10px;color:var(--color-muted);} .service-card__price{margin-top:auto;padding-top:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-lg);color:var(--color-text);} .service-card.is-selected{border-color:var(--color-primary);outline:2px solid var(--color-primary);outline-offset:-2px;} .service-card.is-selected .service-card__tick{display:inline-flex;} .service-card__input:focus-visible+.service-card__media{outline:3px solid var(--color-accent);outline-offset:-3px;} /* Extras list (Step 3) */ .extras-list{display:flex;flex-direction:column;gap:var(--space-3);} .extra-card{position:relative;display:flex;align-items:center;gap:var(--space-4);border:var(--hairline);border-radius:0;padding:var(--space-4) var(--space-5);cursor:pointer;background:var(--color-surface);transition:border-color var(--transition);} .extra-card:hover{border-color:var(--color-text);} .extra-card__input{position:absolute;opacity:0;width:1px;height:1px;} .extra-card__check{flex:none;width:26px;height:26px;border-radius:0;border:1px solid var(--color-border);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:var(--transition);} .extra-card__check svg{opacity:0;} .extra-card__body{display:flex;flex-direction:column;} .extra-card__title{font-weight:var(--fw-semibold);} .extra-card__price{color:var(--color-muted);font-size:var(--text-sm);} .extra-card.is-selected{border-color:var(--color-accent);outline:2px solid var(--color-accent);outline-offset:-2px;} .extra-card.is-selected .extra-card__check{background:var(--color-primary);border-color:var(--color-primary);} .extra-card.is-selected .extra-card__check svg{opacity:1;} .extra-card__input:focus-visible+.extra-card__check{outline:3px solid var(--color-accent);outline-offset:2px;} /* ========================================================================= * 17. Per-city DIRECTORY (off by default in this lead-gen build) + * FEATURED #1 hero badge. Kept + self-hiding; hairline panel retint. * ====================================================================== */ /* A coursed tinted band (the wash is legal here — this is a tinted band). */ .directory{position:relative;padding:var(--space-20) 0;background-color:var(--color-surface-2);background-image:var(--sc-wash);} /* Marker + case come from the shared unnumbered-head rule in §9. */ .directory__heading{margin-bottom:var(--space-8);font-size:var(--text-xl);font-weight:var(--fw-semibold);} .directory__list{display:grid;gap:var(--space-6);grid-template-columns:1fr;} @media(min-width:680px){.directory__list{grid-template-columns:repeat(2,1fr);}} @media(min-width:1040px){.directory__list{grid-template-columns:repeat(3,1fr);}} /* Tinted-tile family: square cream plate, hairline, 3px accent top edge rule, no shadow, no lift and no index numeral. */ .directory__card{position:relative;display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-surface);border:var(--hairline);border-top:3px solid var(--color-accent);border-radius:0;padding:var(--space-6);transition:border-color var(--transition);} .directory__card:hover{border-color:color-mix(in srgb,var(--color-text) 28%,transparent);border-top-color:var(--color-accent-hover);} .directory__card--featured{border-color:var(--color-accent);} /* paid-card star glyph removed 2026-07-30: it reused rating iconography to mean "paid". A word label is emitted in PHP instead. */ .directory__name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-semibold);line-height:1.25;margin:0;color:var(--color-text);} .directory__desc{margin:0;color:var(--color-muted);font-size:var(--text-sm);line-height:var(--lh-normal);} .directory__meta{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;color:var(--color-muted);font-size:var(--text-sm);} .directory__icon{display:inline-flex;flex:none;color:var(--color-primary);margin-top:2px;} .directory__icon svg{width:1em;height:1em;} .directory__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto;padding-top:var(--space-3);} .directory__action{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-semibold);border:var(--hairline);background:var(--color-surface);color:var(--color-primary);transition:var(--transition);} .directory__action svg{width:1em;height:1em;} .directory__action:hover{text-decoration:none;border-color:var(--color-text);background:var(--color-surface-2);color:var(--color-primary-hover);} /* Call action — the one accent FILL in this component, WHITE ink (5.28:1). */ .directory__action--call{background:var(--color-accent);border-color:var(--color-accent);color:#FFFFFF;} .directory__action--call:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#FFFFFF;} /* Square teal plate, ALL-SMALL-CAPS (the §2 register — ⚠ not B4's lowercase). */ .hero__featured-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-accent);color:#FFFFFF;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-sm);letter-spacing:var(--track-eyebrow);font-variant-caps:all-small-caps;text-transform:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius);margin-bottom:var(--space-4);} @supports not (font-variant-caps: all-small-caps){ .hero__featured-badge{text-transform:uppercase;font-size:.86em;} } .hero__featured-badge svg{width:1.1em;height:1.1em;} .hero__featured-tagline{display:block;margin:calc(-1 * var(--space-4)) 0 var(--space-5);color:var(--color-muted);font-size:var(--text-lg);font-weight:var(--fw-semibold);max-width:48ch;} /* ========================================================================= * CONVERSION PACK — promo bar, area checker, video facade, map embed * ====================================================================== */ /* The promo bar is a sentence, not a label — so it keeps the display face at 600 and FLAT tracking. It must not take the small-caps eyebrow register: that register belongs to eyebrows and to the nav row only. */ .promo-bar{display:block;background:var(--color-accent);color:#FFFFFF;text-align:center;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:0;} .promo-bar__inner{display:block;padding:var(--space-2) var(--space-4);} a.promo-bar{text-decoration:none;} a.promo-bar:hover{background:var(--color-accent-hover);color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;} .promo-bar--dark{background:var(--color-dark);color:var(--color-on-dark);border-top:1px solid var(--color-dark-border);border-bottom:1px solid var(--color-dark-border);} a.promo-bar--dark:hover{background:var(--color-dark-2);color:#fff;} /* Areas we cover — chips + area checker. */ .local-areas{padding:var(--space-8) 0;} /* Marker + case come from the shared unnumbered-head rule in §9. */ .local-areas__heading{margin-bottom:var(--space-6);font-size:var(--text-xl);} .area-chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;margin:0 0 var(--space-8);padding:0;} .area-chips li{background:var(--color-surface);border:var(--hairline);border-radius:var(--radius);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--color-text);} .area-check{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;align-items:stretch;max-width:560px;margin:0;} .area-check__label{flex:1;min-width:220px;display:block;} .area-check input[type="search"]{width:100%;height:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius);font-size:var(--text-base);font-family:inherit;background:#fff;color:var(--color-text);transition:border-color var(--transition);} .area-check input[type="search"]:focus{outline:2px solid var(--color-primary);outline-offset:-2px;border-color:var(--color-primary);} .area-check__result{max-width:560px;margin:var(--space-6) 0 0;padding:var(--space-5) var(--space-6);border-radius:0;border:var(--hairline);background:var(--color-surface);text-align:left;} .area-check__result.is-yes{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 8%,transparent);} .area-check__msg{font-weight:var(--fw-semibold);margin:0 0 var(--space-3);color:var(--color-text);} .area-check__result.is-yes .area-check__msg{color:var(--color-success);} /* Video facade — click-to-load privacy embed. The facade keeps a dark plate because it stands in for a VIDEO FRAME, not for a page band. It is flat and square: no texture at all. ⚠ B4's diagonal lattice is gone with its --tl-p pitch variable, and the coursed wash is NOT substituted here — --sc-wash runs on tinted bands only, never on a dark plate and never inside a component. */ .video-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-8) var(--space-4);border-radius:0;background-color:var(--color-dark);background-image:none; border:1px solid var(--color-dark-border);color:var(--color-on-dark);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-sm);text-decoration:none;transition:border-color var(--transition);} .video-facade:hover{color:#fff;border-color:var(--color-on-dark-muted);text-decoration:none;} .video-facade__play{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:0;background:var(--color-accent);color:#FFFFFF;font-size:var(--text-2xl);} .video-facade__play svg{margin-left:2px;} .video-embed{margin-top:var(--space-4);} .video-embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:0;} /* Map embed. */ .map-embed{padding:var(--space-8) 0;} .map-embed iframe,.dds-map iframe{display:block;width:100%;min-height:320px;border:1px solid var(--color-border);border-radius:var(--radius-sm);} /* Tool page (page-tool.php) — quiet chrome for linkable assets. */ .tool-header{border-bottom:1px solid var(--color-border, #DDD4C2);padding:var(--space-3, .75rem) 0;background:var(--color-surface, #F6F1E7);} .tool-header__inner{display:flex;align-items:center;justify-content:center;} .tool-header .custom-logo-link img{max-height:36px;width:auto;} .tool-header__title{margin:0;font-family:var(--font-display);font-size:var(--text-base, 1rem);font-weight:600;} .tool-header__title a{color:var(--color-text);text-decoration:none;} .tool-page__inner{max-width:var(--width-content, 720px);padding-top:var(--space-8, 2rem);padding-bottom:var(--space-12, 3rem);} .tool-page__title{font-size:var(--text-2xl, 1.73rem);margin:0 0 var(--space-6, 1.5rem);} .tool-footer{border-top:1px solid var(--color-border, #DDD4C2);padding:var(--space-6, 1.5rem) 0;margin-top:var(--space-8, 2rem);} .tool-footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-4, 1rem);justify-content:center;font-size:var(--text-sm, .875rem);color:var(--color-muted, #5A5048);} .tool-footer__inner p{margin:0;} .tool-footer__inner a{color:inherit;} /* ========================================================================= * 18. THE WALK LISTING — [dds_walks], .doorstep-card, and the disclosure * (FEATURE CONTRACT F3 / F4) * * This section styles the ONE monetised surface on the site. Everything above * it is editorial chrome; this is the block that carries a price, names a * trader, states a tax number and links out for money. It is written last and * kept together deliberately — the legal parts of a card must be readable in * one place rather than inherited from four. * * WHAT IS BORROWED AND WHAT IS DRAWN. The tile itself is §8's tinted-tile * (0 radius, inset primary hairline at 18%, 3px accent top edge rule, tint * derived by darkening the surface) — a walk card is a card and must not become * a second card system. What §18 adds is the four blocks §8 has no vocabulary * for: the provider seam, the price plate, the fact ledger, and the disclosure. * * ⚠ NO BOX-SHADOW, ANYWHERE IN THIS SECTION, IN ANY STATE, INCLUDING FOCUS. * The shadow tokens are `none` on this branch (§1) and elevation is carried by * --hairline. Focus is an OUTLINE, never a ring. If something in here needs to * lift off the tile it takes a hairline and the base surface, which is what the * price plate does. * * ⚠ NO TOKEN IS INVENTED HERE. Every colour, space, size and rule below comes * from §1's :root. There is no raw hex in this section. * * ⚠ AND NOTHING IN HERE MAY GROW A TRUST PRIMITIVE. There is no rule for a * star, a rating, a review count, a badge, a ribbon, a "was" price, a saving, a * countdown or a scarcity line — not an empty one and not a commented-out one. * Those fields do not exist on the post type (F1), and a style waiting for one * is an invitation to register it. * ====================================================================== */ /* ── The listing wrapper ─────────────────────────────────────────────────── Not a .section: [dds_walks] is placed INSIDE a silo parent's body, below the page's own prose, so it must not open a second full-bleed band inside a band. It takes the stop-sequence measure at the top only (§3) and closes on the grid. The heading joins §9's shared unnumbered-head rule — a walk listing is not a stop on the walk, so it takes the 24px accent bar and never a numeral. */ .dds-walks{margin:var(--space-16) 0 var(--space-12);} .dds-walks__heading{margin-bottom:var(--space-6);font-size:var(--text-xl);} /* THE RANKING NOTE. A claim about this site's own conduct, so it is set in the TEXT ink rather than the muted one — the muted grey is for secondary copy and this is not secondary. Ruled top and bottom so it reads as a standing statement rather than as a caption on the heading above it. ⚠ It is also emitted OUTSIDE .dds-walks, on the search-results view (both the populated and the empty one — see dds_walks_search_rank_note()), so every rule here is written against .dds-walks__rank alone and inherits nothing from the wrapper. */ .dds-walks__rank{margin:0 0 var(--space-6);padding:var(--space-3) 0;border-top:var(--hairline);border-bottom:var(--hairline);font-size:var(--text-sm);line-height:var(--lh-normal);color:var(--color-text);} .dds-walks__rank-link{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;} .dds-walks__rank-link:hover{color:var(--color-primary-hover);} /* THE CARD GRID. The shortcode emits .grid.grid--{1..4}, so the column counts come from §3 — but a walk card is not a service card: it carries a provider seam, a price plate with a source line under it and up to seven fact rows. At §3's 640px two-up that stack is about four words to a line, which is where a price and the basis it is per stop being read together. So the walk grid stays ONE COLUMN until 900px and only then picks up the operator's chosen count. This overrides §3 for this grid and nothing else. */ @media(min-width:640px) and (max-width:899.98px){ .dds-walks__cards.grid--2,.dds-walks__cards.grid--3,.dds-walks__cards.grid--4{grid-template-columns:1fr;} } /* ── The card ───────────────────────────────────────────────────────────── .doorstep-card rides on .card (§8) and adds nothing to the tile itself. The one structural addition is that the body column stretches, so that the outbound plate at the bottom lines up across a row of cards of unequal length — a row of buttons at four different heights reads as four different offers. */ .doorstep-card .card__body{gap:var(--space-4);flex:1 1 auto;} /* ── THE PROVIDER SEAM ──────────────────────────────────────────────────── The trader's name and their OIB or VAT number, above the title, on every card, permanently. This is a legal identification (Zakon o pružanju usluga u turizmu Čl. 12/13 for naming the trader; Čl. 6.a for displaying the tax number), which is why it gets a rule of its own here rather than living on §8's generic .card__seam. ⚠ THREE OVERRIDES OF THE §2 EYEBROW REGISTER, AND EACH ONE IS THE POINT: · font-variant-caps is turned OFF. .card__seam is in §2's all-small-caps list, and small capitals flatten a company's own capitalisation — a trader identified in a register as "d.o.o." is not identified as "D.O.O." — while doing nothing at all to the digits of a tax number sitting in the same line at a reduced size. · the tracking goes back to 0 for the same reason. · the ink steps up from --color-muted to --color-text and the size from --text-xs to --text-sm. A duty to DISPLAY is not discharged at 12px in the secondary grey. Tabular figures because the line contains an eleven-digit number. The seam RULE is a hairline under the line, not a border on the tile: it separates the identification from the editorial title without boxing it. */ .doorstep-card__provider{font-variant-caps:normal;text-transform:none;letter-spacing:0; font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-text); font-variant-numeric:tabular-nums; padding:var(--space-4) var(--space-6) var(--space-3); border-bottom:var(--hairline);} @supports not (font-variant-caps: all-small-caps){ /* §2's fallback uppercases the whole eyebrow list at .86em. A trader's name and a tax number must escape that too. */ .doorstep-card__provider{text-transform:none;font-size:var(--text-sm);} } /* ── THE PRICE BLOCK ────────────────────────────────────────────────────── A plate lifted off the tinted tile onto the BASE surface with a hairline round it. That is how this branch lifts anything (§1: the shadow tokens are `none`), and the lift is earned here — the figure, what it is per, the date it was read and the line saying the operator sets the final one are one object and must not scatter into the fact ledger below. ⚠ ONE CARD, ONE PRICE. There is no rule in this file for a second price, a struck-through price, a range, a total or a "from X to Y", and there must not be: a combined figure across two services is what makes the site that prints it the organiser of a trip rather than a page pointing at one (F8.1). */ .doorstep-card__price-block{background:var(--color-surface);border:var(--hairline);border-radius:0;padding:var(--space-4) var(--space-5);} .doorstep-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);margin:0;} /* The figure is the largest thing on the card after the title, in the display face, with TABULAR figures — §2's rule is that a number which is A FACT aligns, and this is the most consequential fact on the card. */ .doorstep-card__amount{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-semibold);line-height:1.2;color:var(--color-text);font-variant-numeric:tabular-nums;} /* What the price is per, in the small-caps register — this one IS a label, so unlike the provider seam it belongs in the eyebrow voice. */ .doorstep-card__basis{font-family:var(--font-display);font-size:var(--text-xs);font-variant-caps:all-small-caps;letter-spacing:var(--track-eyebrow);color:var(--color-muted);} @supports not (font-variant-caps: all-small-caps){ .doorstep-card__basis{text-transform:uppercase;font-size:.7rem;} } /* THE CHECKED-ON LINE, directly under the figure and never anywhere else. A price with no date on it is worth less than no price, so this line is part of the plate rather than a footnote — and it keeps tabular figures because it carries a date. */ .doorstep-card__checked{margin:var(--space-2) 0 0;font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-muted);font-variant-numeric:tabular-nums;} .doorstep-card__source{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;} .doorstep-card__source:hover{color:var(--color-primary-hover);} /* The permanent "the operator sets the final price" line. Ruled off from the figure so it cannot be mistaken for a caveat that only appears when the price looks uncertain — it is on every priced card, always. */ .doorstep-card__confirm{margin:var(--space-3) 0 0;padding-top:var(--space-3);border-top:var(--hairline);font-size:var(--text-xs);line-height:var(--lh-normal);color:var(--color-muted);} /* THE HONEST UNKNOWN — a card with no price. ⚠ SET AT THE SAME SIZE AND IN THE SAME INK AS A REAL ANSWER. It is not dimmed, not italicised, not shrunk and not replaced by a dash. A gap that is styled as an apology reads as something missing from the card; this one is a statement the card is making, and the whole argument of the brand is that it says so rather than filling the space with a plausible number. The only difference from a priced plate is that there is no figure to make large. */ .doorstep-card__price--none{display:block;margin:0;font-size:var(--text-sm);line-height:var(--lh-normal);color:var(--color-text);} /* ── THE FACT LEDGER ────────────────────────────────────────────────────── Rows of label-over-value on a hairline, in the ledger register the silo links already use (§8) — no chips, no pills, no icons. Label ABOVE value at every width rather than beside it: a two-column ledger inside a card that is 340px wide at the three-up count gives the value about five words a line, and the values here are sentences ("Not confirmed here. We have not been able to establish whether it is included…") rather than one-word data points. */ .doorstep-card__facts{list-style:none;margin:0;padding:0;border-top:var(--hairline);} .doorstep-card__fact{display:block;padding:var(--space-3) 0;border-bottom:var(--hairline);} .doorstep-card__fact-label{display:block;font-family:var(--font-display);font-size:var(--text-xs);font-variant-caps:all-small-caps;letter-spacing:var(--track-eyebrow);color:var(--color-muted);} @supports not (font-variant-caps: all-small-caps){ .doorstep-card__fact-label{text-transform:uppercase;font-size:.7rem;} } /* Durations, group sizes and month names are facts, so the ledger takes tabular figures throughout rather than the body's oldstyle default (§2). */ .doorstep-card__fact-value{display:block;margin-top:var(--space-1);font-size:var(--text-sm);line-height:var(--lh-normal);color:var(--color-text);font-variant-numeric:tabular-nums;} /* "not running this month" is a computed answer, not a warning. It takes the primary ink to separate it from the season it qualifies — never a red, never a badge, never a fill: this site has no standing to flag an operator's calendar as a problem. */ .doorstep-card__offseason{color:var(--color-primary);} /* The departure row is the one a reader acts on with luggage, so it keeps a 3px accent edge on the left — the card axis's rule at row scale, which is the one marker system this build has (§8). Nothing else in the ledger is marked; marking two rows marks neither. */ .doorstep-card__fact--departure{border-left:3px solid var(--color-accent);padding-left:var(--space-3);} /* ── THE HANDOVER LINE AND THE OUTBOUND PLATE ───────────────────────────── The handover names the trader again, immediately above the button, at the moment the reader is about to leave. It is pushed to the bottom of the body column so the plate under it lines up across a row. */ .doorstep-card__handover{margin:auto 0 0;padding-top:var(--space-4);font-size:var(--text-sm);line-height:var(--lh-normal);color:var(--color-muted);} .doorstep-card__handover--nolink{margin-top:auto;padding-top:var(--space-4);border-top:var(--hairline);} /* The outbound anchor arrives as .btn.btn--primary (§4: teal fill, WHITE ink, 6.37:1) and this only makes it the full width of the tile and squares it off at the bottom of the column. Square, because stone has no radius; and no transform on hover, because nothing on this branch lifts. */ .doorstep-card__cta{display:flex;width:100%;margin-top:var(--space-3);border-radius:0;text-align:center;} /* FOCUS IS AN OUTLINE (§15's :focus-visible), and on this one control it is drawn in the PRIMARY rather than the accent: the global ring is accent-teal and this button is an accent-teal fill, so a teal outline 2px off a teal plate is a teal line on a teal edge. Oxblood on the tile behind it is the same 3px weight and unmistakably a focus state. No shadow is used to do this and none may be. */ .dds-outbound:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;} /* The sub-label inside the anchor ("opens the operator's own site in a new tab"). It is an accessible-name extension, not a caption: the visible label already names the operator, and printing the parenthesis on the plate would wrap the button to three lines on a phone. Visually hidden, exactly as .screen-reader-text in §15 — announced, never drawn. ⚠ It had NO rule at all before this section existed, so it rendered as literal parenthesised text inside the teal plate. */ .off-register{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;} /* ── THE AFFILIATE DISCLOSURE (F4) ──────────────────────────────────────── A LEGAL NOTICE, SIZED AND COLOURED AS ONE. It is not a footnote and it must not read as one, so: · the body is --text-base (16px) and never steps down on mobile — every other supporting line on a card is --text-sm, and this one deliberately is not; · the ink is --color-text on --color-surface, which is §1's measured 15.1:1 — the same contrast as the page's body copy, not the muted 7.0:1 used for secondary lines; · it sits on the BASE surface even when the band behind it is tinted, so it separates from the page rather than blending into it; · a 4px OXBLOOD edge on the leading side. Oxblood, not the accent: teal is this branch's commercial colour — it is the CTA fill, including the outbound button four lines below — and the notice about the money must not be wearing the same colour as the thing it discloses. It renders immediately above the first card (F4.2) and cannot be dismissed (F4.4): there is no closed state in this file, no `display:none`, no `[hidden]` variant and no transition to collapse it. Do not add one. */ .dds-disclosure{display:block;margin:0 0 var(--space-8);padding:var(--space-5) var(--space-6); background:var(--color-surface);border:var(--hairline);border-inline-start:4px solid var(--color-primary);border-radius:0;} .dds-disclosure__label{margin:0 0 var(--space-2);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-semibold); font-variant-caps:all-small-caps;letter-spacing:var(--track-eyebrow);color:var(--color-primary);} @supports not (font-variant-caps: all-small-caps){ .dds-disclosure__label{text-transform:uppercase;font-size:var(--text-xs);} } /* max-width in ch rather than px: the measure has to hold at 16px on a phone, and 68ch is the reading measure this branch uses for prose. */ .dds-disclosure__text{margin:0;font-size:var(--text-base);line-height:var(--lh-normal);color:var(--color-text);max-width:68ch;} .dds-disclosure__more{margin:var(--space-3) 0 0;font-size:var(--text-sm);} .dds-disclosure__more a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;} .dds-disclosure__more a:hover{color:var(--color-primary-hover);} /* On a phone the notice keeps its size and its contrast and gives back only its side padding. Nothing here reduces the font-size — that is the one property this block may not trade for space. */ @media(max-width:479.98px){ .dds-disclosure{padding:var(--space-4) var(--space-4);} } /* THE RANKING STATEMENT, printed by [dds_how_we_rank] on /how-we-rank/. Plain prose at the content measure — it is the page, not a component. */ .dds-rank-statement{max-width:var(--width-content);} .dds-rank-statement p{margin-bottom:var(--space-4);} .dds-rank-statement p:last-child{margin-bottom:0;} /* The sitewide disclosure link, for an install whose footer has no menu assigned (dds_affiliate_disclosure_footer_strip()). It renders on the footer floor, which is the only dark surface on this branch (§1, §14). */ .dds-legal-strip{background:var(--color-dark);border-top:1px solid var(--color-dark-border);padding:var(--space-3) 0;text-align:center;font-size:var(--text-sm);} .dds-legal-strip a{color:var(--color-on-dark-muted);text-decoration:underline;text-underline-offset:3px;} .dds-legal-strip a:hover{color:var(--color-on-dark);} /* .dds-menu-item--disclosure is deliberately unstyled: when the footer DOES have a menu, the link is one of its items and must look like the others. */