/* ========================================================================== Palace Group One — pages.css Shared inner-page furniture: compact page hero, breadcrumb, filter bar, listing grid, closing CTA. Inner pages never use the full-viewport homepage hero — they open with a compact banner so the content starts above the fold. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Page hero -------------------------------------------------------------------------- */ .page-hero{ position:relative;overflow:hidden;background:var(--ink); min-height:clamp(320px,42vw,460px);display:flex;align-items:flex-end; } .page-hero picture{display:block;position:absolute;inset:0} /* The hero band is around 4:1 while the photographs are 3:2, so cover crops a lot off the top and bottom. Which part survives is the whole question — the default 50% centre kept the empty table on the About photo and lost the people. --hero-focus lets each page say where its subject actually is. */ .page-hero img{ position:absolute;inset:0;width:100%;height:100%; .page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} object-fit:cover;object-position:var(--hero-focus, 50% 50%); } .page-hero__veil{position:absolute;inset:0;z-index:2; background:linear-gradient(to top,rgba(15,31,45,.90) 0%,rgba(15,31,45,.42) 55%,rgba(15,31,45,.64) 100%)} .page-hero__inner{ position:relative;z-index:3;width:100%; /* clears the fixed bar by construction. It was a hand-tuned 84-110px, which left only 18px of air once the bar reached its 92px maximum. */ padding-block:calc(var(--hdr-h) + clamp(22px,2.8vw,40px)) clamp(32px,4vw,52px); } .page-hero h1{color:#fff;max-width:18ch;font-size:clamp(34px,4.6vw,64px)} .page-hero p{color:rgba(255,255,255,.78);max-width:50ch;margin-top:16px;font-size:var(--copy)} .page-hero .eyebrow{color:var(--gold-soft)} .page-hero .eyebrow::before{background:var(--gold-soft)} /* Brighter hero (careers). The shared veil is bottom-heavy — 90% opaque across the full width exactly where the type sits — which flattens a well-lit photograph into near-solid navy. Sweeping the darkness left-to-right instead keeps the type zone at .82 or above, which is 9.5:1 for white text even in the worst case of a pure white image behind it, while letting the right-hand half of the picture actually read. Off below 761px: there the copy spans the full width, so there is no light side to give away and the shared vertical veil is the safe one. */ @media (min-width:760.02px){ .page-hero--bright .page-hero__veil{ background: /* Top scrim FIRST, and it is not optional. Opening the right-hand side up to .30 put the centred logo over the brightest part of the photograph: the wordmark's 9px "Hospitality Management" line measured 2.9:1 there, under AA. This band takes the top back to ~.86 before the header's own scrim, and has faded out by the time it reaches the headline. */ linear-gradient(to bottom,rgba(15,31,45,.68) 0%,rgba(15,31,45,0) 32%), linear-gradient(100deg, rgba(15,31,45,.93) 0%, rgba(15,31,45,.82) 40%, rgba(15,31,45,.46) 74%, rgba(15,31,45,.30) 100%); } } /* breadcrumb */ .crumb{display:flex;align-items:center;gap:10px;margin-bottom:14px; font-size:var(--label);font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase; color:rgba(255,255,255,.55)} .crumb a{transition:color var(--t-fast)} .crumb a:hover{color:var(--gold-soft)} .crumb span[aria-current]{color:#fff} .crumb i{font-style:normal;opacity:.45} /* -------------------------------------------------------------------------- 2. Filter bar -------------------------------------------------------------------------- */ .filter-bar{ display:flex;align-items:center;justify-content:space-between;gap:24px; flex-wrap:wrap;margin-bottom:clamp(22px,2.4vw,34px); } .filters{display:flex;gap:9px;flex-wrap:wrap} .chip{ font-family:var(--sans);font-size:var(--label);font-weight:600;letter-spacing:var(--label-track); text-transform:uppercase;padding:11px 21px;border:1px solid var(--line); background:var(--card);color:var(--text); transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } /* was var(--ink): darker than the page, so the hover border vanished */ .chip:hover{border-color:var(--gold)} .chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)} .filter-count{font-size:13px;letter-spacing:.1em;color:var(--body);white-space:nowrap} .filter-count b{color:var(--text);font-weight:600} /* -------------------------------------------------------------------------- 3. Listing grid -------------------------------------------------------------------------- */ .listing{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)} .listing__empty{ grid-column:1/-1;padding:56px 0;text-align:center;color:var(--body); border:1px dashed var(--line); } /* -------------------------------------------------------------------------- 3b. Story split — framed image + gold badge beside body copy -------------------------------------------------------------------------- */ .story{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,86px);align-items:center} .story__figure{position:relative;padding-left:44px} .story__shape{position:absolute;left:0;bottom:-26px;width:58%;height:66%;background:var(--navy);z-index:0} .story__main{position:relative;z-index:1;aspect-ratio:4/4.6;overflow:hidden;box-shadow:var(--shadow-md)} .story__main picture{display:block;width:100%;height:100%} .story__main img{width:100%;height:100%;object-fit:cover} .story__badge{ position:absolute;left:0;top:9%;z-index:3;background:var(--gold);color:var(--on-gold); padding:20px 24px;text-align:center;box-shadow:var(--shadow-md); } .story__badge b{font-family:var(--display);font-size:40px;line-height:1;display:block} .story__badge span{display:block;margin-top:6px;font-size:var(--label);font-weight:600; letter-spacing:var(--label-track);text-transform:uppercase} .story__body p + p{margin-top:14px} .story__body .btn{margin-top:28px} /* -------------------------------------------------------------------------- 3c. Mission statement — oversized centred pull quote -------------------------------------------------------------------------- */ .statement{position:relative;overflow:hidden;text-align:center} .statement .ghost-word{top:-.1em;left:50%;transform:translateX(-50%)} /* Do NOT size this with `ch`: the unit resolves against THIS element's 16px font-size, not the 48px blockquote inside it, which collapses the measure to about 200px and stacks the quote one word per line. Keep an explicit width. */ .statement__inner{position:relative;z-index:1;max-width:clamp(300px,64vw,880px);margin-inline:auto} .statement blockquote{ font-family:var(--display);font-size:clamp(24px,3vw,44px);line-height:1.25; letter-spacing:-.015em;color:var(--text);text-wrap:balance; } .statement cite{ display:block;margin-top:26px;font-family:var(--sans);font-style:normal; font-size:var(--label);font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--gold-deep); } /* -------------------------------------------------------------------------- 3d. Leadership timeline (team page) Four earlier attempts were rejected: monogram boxes, a diamond mosaic, an arcade of arched niches, and a group photograph over a name line-up. The first three all made the MISSING HEADSHOTS into the design, and a big monogram reads as a placeholder whatever shape it sits in. This is a timeline instead — five nodes alternating above and below one spine, with a light travelling continuously round each panel's border. -------------------------------------------------------------------------- */ /* Split section head: eyebrow + heading on the left, the standfirst opposite. align-items:end sets both on one baseline, so the paragraph reads as a note beside the heading rather than a second stacked block. */ .split-head{ display:grid;grid-template-columns:1.02fr .98fr; gap:clamp(24px,4vw,86px);align-items:end; margin-bottom:clamp(30px,3.6vw,52px); } .split-head .sec-head{max-width:none} .split-head h2{max-width:15ch} .split-head__aside p{max-width:48ch} /* THE TIMELINE. Five nodes alternate above and below one spine — odd entries above, even below — so the set reads as a run rather than five matching cards standing in a row. With five entries that lands 3 above / 2 below. nth-child drives it, so the DOM order is the layout. */ .tl{ position:relative; display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:1fr 1fr; column-gap:clamp(12px,1.6vw,24px); } /* the spine, sitting on the row boundary */ .tl::before{ content:'';position:absolute;left:0;right:0;top:50%;height:1px; background:var(--line); } .tl__item{position:relative} /* EXPLICIT COLUMNS. With only the row given, sparse auto-placement never moves the cursor back, so items 1-5 packed into columns 1,1,2,2,3 and the whole run bunched up on the left third. One column each, stated outright. */ .tl__item:nth-child(1){grid-column:1} .tl__item:nth-child(2){grid-column:2} .tl__item:nth-child(3){grid-column:3} .tl__item:nth-child(4){grid-column:4} .tl__item:nth-child(5){grid-column:5} .tl__item:nth-child(odd) {grid-row:1;align-self:end; margin-bottom:var(--tl-stem,30px)} .tl__item:nth-child(even){grid-row:2;align-self:start;margin-top:var(--tl-stem,30px)} /* stem down (or up) to the spine, with the node's dot where the two meet */ .tl__item::before{ content:'';position:absolute;left:50%;width:1px;height:var(--tl-stem,30px); background:var(--line); } .tl__item::after{ content:'';position:absolute;left:50%;width:9px;height:9px;border-radius:50%; background:var(--card);border:1px solid var(--gold); transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease); } .tl__item:nth-child(odd)::before {top:100%} .tl__item:nth-child(even)::before{bottom:100%} .tl__item:nth-child(odd)::after {top:calc(100% + var(--tl-stem,30px));translate:-50% -50%} .tl__item:nth-child(even)::after{bottom:calc(100% + var(--tl-stem,30px));translate:-50% 50%} .tl__item:hover::after, .tl__item:focus-within::after{background:var(--gold);transform:scale(1.25)} /* THE TRAVELLING LIGHT. A conic gradient spins inside .tl__halo, which sits 4px proud of the panel on every side and BEHIND it in paint order — so the panel masks the middle and only that 4px rim shows the light going round. Built this way, rather than thickening the panel's own border, because the border has to stay a 1px hairline at rest: a 4px grey frame on five resting panels is heavy. And built with a rotating element rather than an animated @property angle, so it needs no registered custom properties. */ /* The light RUNS CONTINUOUSLY — it is the resting state of the section, not a hover reward. It used to be opacity:0 until hovered, which meant a visitor who never pointed at a panel saw five flat boxes and the whole device was invisible on touch, where there is no hover at all. Running it always means it has to be quieter: the arc is dimmer and slower at rest than the old hover version (5s, not 2.2s), so it reads as a slow glint travelling the frame rather than something demanding attention. */ .tl__halo{ position:absolute;inset:-3px;overflow:hidden;pointer-events:none; opacity:.5; transition:opacity var(--t-mid) var(--ease),inset var(--t-mid) var(--ease); } .tl__ring{ position:absolute;left:50%;top:50%;width:210%;aspect-ratio:1; translate:-50% -50%; background:conic-gradient(from 0deg,transparent 0deg,var(--gold) 20deg, var(--gold-soft) 32deg,var(--gold) 44deg,transparent 68deg,transparent 360deg); animation:tl-run 5s linear infinite; } /* NEGATIVE delays, so each panel starts partway through its own loop on the very first frame — a positive delay would hold four of them dark until their turn came round. Five evenly spaced offsets over a 5s loop stop the row marching in lockstep, which is what would make it look like a gimmick. */ .tl__item:nth-child(1) .tl__ring{animation-delay:0s} .tl__item:nth-child(2) .tl__ring{animation-delay:-1s} .tl__item:nth-child(3) .tl__ring{animation-delay:-2s} .tl__item:nth-child(4) .tl__ring{animation-delay:-3s} .tl__item:nth-child(5) .tl__ring{animation-delay:-4s} /* Hover no longer switches the light ON — it can only deepen it. The rim widens from 3px to 6px and comes to full strength; the speed is left alone on purpose, because changing animation-duration mid-loop makes the arc jump to a new position instead of easing. */ .tl__item:hover .tl__halo, .tl__item:focus-within .tl__halo{opacity:1;inset:-6px} .tl__panel{ position:relative;overflow:hidden;background:var(--line); height:100%; } @keyframes tl-run{to{rotate:360deg}} /* Five columns needs real width: at 1024 each panel is 172px and a two-title role breaks over six lines. Below 1200 the timeline turns vertical instead — one node per row, spine and dots running down the left, full width for the type. The horizontal form is a wide-screen layout, not a shrinkable one. */ /* 1199.98, not 1199. A viewport reports 1199.33px on a scaled display, and `max-width:1199px` does not match it — so at exactly the width this query exists to catch, the five-column form stayed up with 201px panels. Same trap as the header's 900/901 pair. The .98 leaves no gap against a min-width:1200px counterpart if one is ever added. */ @media (max-width:1199.98px){ .tl{grid-template-columns:1fr;grid-template-rows:none;padding-left:34px;row-gap:18px} .tl::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto} /* Reset the explicit columns. Leaving grid-column:1-5 on the items while the track list is a single 1fr makes the grid invent four implicit columns, and the run marches off to the right — clipped, and therefore silent, because .section is overflow:hidden. */ .tl__item:nth-child(1),.tl__item:nth-child(2),.tl__item:nth-child(3), .tl__item:nth-child(4),.tl__item:nth-child(5){grid-column:1} .tl__item:nth-child(odd), .tl__item:nth-child(even){grid-row:auto;align-self:auto;margin:0} .tl__item::before, .tl__item:nth-child(odd)::before, .tl__item:nth-child(even)::before{left:-29px;top:50%;bottom:auto;width:29px;height:1px} .tl__item:nth-child(odd)::after, .tl__item:nth-child(even)::after{left:-29px;top:50%;bottom:auto;translate:-50% -50%} } .tl__body{ position:relative;margin:1px;height:calc(100% - 2px);background:var(--card); padding:clamp(18px,1.9vw,26px); transition:background var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease); } /* Hover was `background:var(--paper-warm)` — which, since the re-skin, is DARKER than --card, so the panel dimmed instead of responding. It now lifts to a lighter surface and gains depth: a soft drop shadow plus a faint amber rim just inside the edge, which sits under the travelling light rather than competing with it. No transform — the stem and the node dot are drawn on .tl__item, so moving the panel would tear it away from the spine. */ .tl__item:hover .tl__body, .tl__item:focus-within .tl__body{ background:#2A3B50; box-shadow:inset 0 0 0 1px rgba(249,190,60,.28), 0 16px 38px rgba(0,0,0,.42); } /* the connective details answer too: the stem line and the spine dot */ .tl__item:hover::before, .tl__item:focus-within::before{background:var(--gold)} .tl__name{ font-family:var(--display);font-size:clamp(17px,1.35vw,21px); line-height:1.2;color:var(--text); } .tl__role{ display:block;margin-top:9px;font-size:var(--label);font-weight:600; letter-spacing:var(--label-track);text-transform:uppercase; color:var(--gold-deep);line-height:1.7; transition:color var(--t-fast) var(--ease); } .tl__item:hover .tl__role, .tl__item:focus-within .tl__role{color:var(--gold-soft)} /* A light that never stops is exactly what this setting turns off. With the global reduced-motion rule the ring would simply freeze at one angle, which leaves an arbitrary bright corner on every panel; hiding the halo gives back the clean hairline frame instead. */ @media (prefers-reduced-motion:reduce){ .tl__halo{display:none} } /* -------------------------------------------------------------------------- 3e. Exits — the sold properties → CMS: CPT `property` (status: sold) The "Sold" filter's panel. These cannot be cards: the client supplied brand, name and town only, no photography, so cards would be six empty frames. They were a ruled table of six rows and the client rejected that. Grouping them by STATE is the fix — it turns a flat list into structure, and the groups being 2 / 3 / 1 entries long is exactly what stops three columns reading as a grid. Keep the grouping if entries are added; do not level the columns out. -------------------------------------------------------------------------- */ .exits{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,4vw,72px);align-items:start; } .exit-group__place{ font-family:var(--display);font-size:clamp(21px,1.9vw,29px); line-height:1.15;color:var(--text); } .exit-group__rule{ display:block;width:34px;height:2px;background:var(--gold); margin:13px 0 clamp(18px,2.2vw,28px); } .exit{transition:padding-left var(--t-mid) var(--ease)} .exit:hover{padding-left:10px} .exit + .exit{margin-top:clamp(16px,1.9vw,26px)} .exit__name{ display:block;font-family:var(--display);font-size:clamp(17px,1.4vw,21px); line-height:1.25;color:var(--text); transition:color var(--t-mid) var(--ease); } .exit:hover .exit__name{color:var(--gold-deep)} .exit__meta{ display:block;margin-top:7px;font-size:var(--label);font-weight:600; letter-spacing:var(--label-track);text-transform:uppercase;color:var(--gold-deep); } /* "View Hotel" → CMS: a `hotel_url` field on the `property` CPT. PART-OWNED entries only, at the client's request (6 Oct 2026). The Sold entries keep no link on purpose: those properties are not Palace's in any form any more, so linking out from them would imply a relationship that no longer exists. Not "Book Now" either, which is what the operating cards say. Palace only part-owns these three and does not run them, so offering a booking would claim more than is true — the client's own wording was "a click-through link to the hotel site". The row already had a hover shift that led nowhere; the stretched ::after makes the WHOLE row the target while keeping one real link for a screen reader — the same pattern .property-card__link uses. */ .exit--linked{position:relative} .exit__link{ display:inline-flex;align-items:center;gap:8px;margin-top:11px; font-family:var(--sans);font-size:var(--label);font-weight:600; letter-spacing:var(--label-track);text-transform:uppercase; color:var(--text);padding-bottom:5px; border-bottom:1px solid var(--gold); transition:color var(--t-fast) var(--ease); } .exit__link::after{content:'';position:absolute;inset:0} .exit--linked:hover .exit__link{color:var(--gold)} .exit__link:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .exit__link .ar{transition:transform var(--t-fast) var(--ease)} .exit--linked:hover .exit__link .ar{transform:translateX(4px)} /* -------------------------------------------------------------------------- 3f. Service index — numbered jump list -------------------------------------------------------------------------- */ .svc-index{border-top:1px solid var(--line)} .svc-index__row{ display:grid;grid-template-columns:52px 1fr auto;align-items:baseline;gap:20px; padding:20px 4px;border-bottom:1px solid var(--line); transition:background var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease); } .svc-index__row:hover{background:var(--paper-warm);padding-left:14px} .svc-index__num{font-family:var(--display);font-size:13px;color:var(--gold-deep);letter-spacing:.08em} .svc-index__name{font-family:var(--display);font-size:clamp(18px,1.5vw,23px);color:var(--text);line-height:1.25} .svc-index__note{font-size:var(--copy);color:var(--body);text-align:right} .svc-index__row:hover .svc-index__note{color:var(--gold-deep)} /* -------------------------------------------------------------------------- 3g. Service block — alternating image / copy -------------------------------------------------------------------------- */ .service{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,74px); align-items:center;padding-block:clamp(34px,4vw,64px); border-top:1px solid var(--line);scroll-margin-top:110px; } .service:first-of-type{border-top:0;padding-top:0} .service--flip .service__media{order:2} .service__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink)} .service__media picture{display:block;position:absolute;inset:0} .service__media img, .service__media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 1.2s var(--ease-out)} .service:hover .service__media img, .service:hover .service__media .ph{transform:scale(1.04)} .service__badge{ position:absolute;left:0;top:0;z-index:3;background:var(--ink);color:var(--gold-soft); font-family:var(--display);font-size:15px;letter-spacing:.06em;padding:11px 18px; } .service__body h2{font-size:clamp(24px,2.5vw,36px)} .service__body > p{margin-top:14px} .service__list{margin-top:22px;display:grid;gap:11px} .service__list li{ position:relative;padding-left:24px;font-size:var(--copy);line-height:1.6;color:var(--body); } .service__list li::before{ content:'';position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--gold); } /* -------------------------------------------------------------------------- 3h. Contact — details column + form, then a full-bleed map -------------------------------------------------------------------------- */ .contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,88px)} .contact__details{align-self:start;min-width:0} /* minmax(0,1fr), not 1fr. `info@palacegroup1.com` is a single unbreakable token 256px wide at 21px, and a bare 1fr floors at min-content — so the value column refused to go under 256px, the row became 88+18+256=362px and dragged the whole details column to 362px inside a 320px screen. Every heading beside it stretched to match. overflow-wrap lets the address and the email break only when they actually have to. */ .info-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px; padding:18px 0;border-bottom:1px solid var(--line)} .info-row:first-of-type{border-top:1px solid var(--line)} .info-row dt{font-size:var(--label);font-weight:600;letter-spacing:var(--label-track); text-transform:uppercase;color:var(--gold);padding-top:3px} .info-row dd{font-size:var(--copy);line-height:1.6;color:var(--text);overflow-wrap:anywhere} .info-row dd a{transition:color var(--t-fast)} .info-row dd a:hover{color:var(--gold-deep)} .map{position:relative;height:clamp(280px,34vw,440px);background:var(--stone);overflow:hidden} .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05); transition:filter var(--t-mid) var(--ease)} .map:hover iframe{filter:none} @media (max-width:1024px){ /* minmax(0,...) here too — a bare 1fr keeps the min-content floor and the stacked column can still be wider than the screen. */ .contact{grid-template-columns:minmax(0,1fr)} } /* Below ~430px the 88px label column leaves the value under 200px, so the key and its value stack instead of sitting side by side. */ @media (max-width:430px){ .info-row{grid-template-columns:minmax(0,1fr);gap:6px} .info-row dt{padding-top:0} } /* -------------------------------------------------------------------------- 3i. Notice panel — used for the "no current openings" state -------------------------------------------------------------------------- */ .notice{ border:1px solid var(--line);border-left:3px solid var(--gold); background:var(--paper-warm);padding:clamp(26px,3vw,40px); } .notice h2,.notice h3{font-size:clamp(19px,1.7vw,25px);margin-bottom:12px} .notice p{max-width:62ch} .notice p + p{margin-top:12px} .notice .link-u{margin-top:22px} /* -------------------------------------------------------------------------- 3j. Careers layout — intro column beside the application form -------------------------------------------------------------------------- */ .apply{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(36px,5vw,80px);align-items:start} @media (max-width:1024px){ .apply{grid-template-columns:minmax(0,1fr)} } /* -------------------------------------------------------------------------- 3k. Plain page header — legal pages, where a photograph adds nothing -------------------------------------------------------------------------- */ .page-hero--plain{ min-height:0;background:var(--ink);display:block; } .page-hero--plain .page-hero__inner{ padding-block:clamp(96px,10vw,132px) clamp(30px,3.5vw,46px); } .page-hero--plain h1{font-size:clamp(30px,3.8vw,52px)} /* -------------------------------------------------------------------------- 3l. Legal prose — privacy policy, terms of use -------------------------------------------------------------------------- */ .legal{max-width:74ch} /* The lede — the opening paragraph, set larger than the body prose. This used to carry a :not(.legal__meta) guard because a "Last updated: …" line sat above it and was a

too, so a bare :first-of-type landed on the meta line instead. That line was removed from all three legal pages on 10 Oct 2026 at the client's request, so the guard went with it. */ .legal > p:first-of-type{font-size:var(--copy);line-height:1.8} .legal h2{ font-size:clamp(20px,1.8vw,26px);margin-top:clamp(34px,3.4vw,50px);margin-bottom:12px; padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line); } .legal h2:first-of-type{margin-top:clamp(28px,3vw,40px)} .legal h3{font-size:17px;margin-top:24px;margin-bottom:8px} .legal p{margin-bottom:13px} .legal ul{margin:0 0 15px;display:grid;gap:9px} .legal ul li{position:relative;padding-left:22px;font-size:var(--copy);line-height:1.7} .legal ul li::before{ content:'';position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--gold); } .legal a{color:var(--text);border-bottom:1px solid var(--gold);transition:color var(--t-fast)} .legal a:hover{color:var(--gold-deep)} /* -------------------------------------------------------------------------- 3m. Creed — the "why work here" points (careers) PARKED, NOT DEAD. The markup is out of careers.html on the client's instruction: the four points there were written by us to fill the section, because Palace supplied no benefits, tenure or employee stories. These rules stay so the block drops straight back in when real material arrives — the restore snippet is in the comment where the section used to be. Was four equal numbered boxes in a row: the uniform-grid pattern the client rejected elsewhere, and the numbering implied a sequence these are not. Full-width ruled entries instead — the claim on the left, the substance opposite — so each point gets the width to be read rather than a quarter of a row to be skimmed. -------------------------------------------------------------------------- */ .creed{border-top:1px solid var(--line);position:relative;z-index:1} .creed__row{ display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(6px,3vw,60px);align-items:baseline; padding:clamp(20px,2.4vw,32px) 0; border-bottom:1px solid var(--line); transition:padding-left var(--t-mid) var(--ease),background var(--t-mid) var(--ease); } .creed__row:hover{padding-left:18px;background:var(--paper-warm)} .creed__row h3{ font-family:var(--display);font-size:clamp(20px,1.9vw,28px);line-height:1.2; color:var(--text); } .creed__row p{color:var(--body);max-width:52ch} /* -------------------------------------------------------------------------- 3m-2. Departments band (careers) PARKED, NOT DEAD. Removed from careers.html on request; the markup to restore it is in a comment on that page and initFieldPicker is still in main.js, so the block drops back in whole. The six departments were already in the application form's