/* =================================================================== SHRS Prestige Layer ------------------------------------------------------------------- A reusable "flagship" design system for interior pages (Academics, Discover/About, …). Additive and self-contained: every selector is pr-* prefixed so it never collides with brand.css, and the layer is loaded ONLY on pages flagged prestige:true in the build, so no other page is affected. Colours reference brand.css's own tokens (--gold, --navy, --ivory …) so it stays on-palette automatically. Motion is opt-in and fully disabled under prefers-reduced-motion. =================================================================== */ :root{ --pr-gold:rgb(var(--lv-g,198,161,91)); --pr-gold-bright:rgb(var(--lv-gb,233,206,138)); --pr-gold-deep:rgb(var(--lv-gd,156,122,60)); --pr-gold-pale:rgb(var(--lv-gp,243,226,188)); --pr-coffee:rgb(var(--lv-cfd2,42,28,16)); --pr-coffee-2:rgb(var(--lv-cf,59,42,29)); --pr-ink:rgb(var(--lv-ink,42,32,22)); --pr-ivory:rgb(var(--lv-p3,247,238,223)); --pr-cream:rgb(var(--lv-p5,241,228,200)); --pr-milk:rgb(var(--lv-p2,252,250,246)); --pr-line:rgba(var(--lv-g,198,161,91),0.34); /* Radius scale. Crisp edges are reserved for editorial furniture — rules, table cells, the hero's drawn frame — where a sharp line reads as engraving. Everything a hand would "pick up" (cards, tiles, stats, panels, buttons) is softened, because unrelieved 90° corners read as utilitarian rather than expensive. */ --pr-r-xs:6px; --pr-r-sm:10px; --pr-r-md:16px; --pr-r-lg:22px; --pr-r-xl:30px; --pr-r-pill:999px; /* Layered elevation: a wide ambient wash, a directional key shadow and a tight contact shadow. One flat shadow always looks like a sticker; three stacked at different blurs is what reads as physical depth. */ --pr-shadow-soft: 0 1px 2px rgba(var(--lv-cfd2,42,28,16),.06), 0 8px 20px -12px rgba(var(--lv-cfd2,42,28,16),.22), 0 24px 48px -32px rgba(var(--lv-cfd2,42,28,16),.30); --pr-shadow: 0 1px 2px rgba(var(--lv-cfd2,42,28,16),.08), 0 12px 28px -14px rgba(var(--lv-cfd2,42,28,16),.32), 0 40px 80px -40px rgba(var(--lv-cfd2,42,28,16),.46); --pr-shadow-lift: 0 2px 4px rgba(var(--lv-cfd2,42,28,16),.10), 0 18px 40px -16px rgba(var(--lv-cfd2,42,28,16),.38), 0 56px 100px -48px rgba(var(--lv-cfd2,42,28,16),.52); /* Inner top highlight — the "lit edge" that makes a surface feel raised. */ --pr-bevel:inset 0 1px 0 rgba(255,255,255,.72); --pr-bevel-dark:inset 0 1px 0 rgba(var(--lv-gb,233,206,138),.16); --pr-glow:0 0 0 1px rgba(var(--lv-g,198,161,91),.30), 0 0 28px -6px rgba(var(--lv-g,198,161,91),.42); --pr-glow-strong:0 0 0 1px rgba(var(--lv-gb,233,206,138),.5), 0 0 46px -8px rgba(var(--lv-gb,233,206,138),.6); --pr-ease:cubic-bezier(.16,.8,.24,1); --pr-coffee-bg:rgb(var(--lv-cfd2,42,28,16)); --pr-coffee-2-bg:rgb(var(--lv-cf,59,42,29)); --pr-milk-bg:rgb(var(--lv-p2,252,250,246)); --pr-ivory-bg:rgb(var(--lv-p3,247,238,223)); --pr-cream-bg:rgb(var(--lv-p5,241,228,200)); } /* ---------- Reveal on scroll -------------------------------------- */ .pr-reveal{opacity:0;transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,.8,.24,1),transform .9s cubic-bezier(.16,.8,.24,1); will-change:opacity,transform;} .pr-reveal.pr-in{opacity:1;transform:none;} .pr-stagger > *{opacity:0;transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,.8,.24,1),transform .8s cubic-bezier(.16,.8,.24,1);} .pr-stagger.pr-in > *{opacity:1;transform:none;} .pr-stagger.pr-in > *:nth-child(1){transition-delay:.00s} .pr-stagger.pr-in > *:nth-child(2){transition-delay:.08s} .pr-stagger.pr-in > *:nth-child(3){transition-delay:.16s} .pr-stagger.pr-in > *:nth-child(4){transition-delay:.24s} .pr-stagger.pr-in > *:nth-child(5){transition-delay:.32s} .pr-stagger.pr-in > *:nth-child(6){transition-delay:.40s} .pr-stagger.pr-in > *:nth-child(7){transition-delay:.48s} .pr-stagger.pr-in > *:nth-child(n+8){transition-delay:.54s} /* ---------- Luxury surface treatments ----------------------------- */ /* A "gilded" surface: soft radius, layered depth, a lit top edge, and a hairline gradient border that catches more gold at the top-left — the way a real bevelled edge catches a light source. */ .pr-gilded{ position:relative;border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),var(--pr-milk-bg) 46%,rgb(var(--lv-w25,248,241,228))); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); border:1px solid transparent; background-clip:padding-box; } .pr-gilded::after{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(150deg,rgba(var(--lv-gbs,233,206,138),.85),rgba(var(--lv-gs,198,161,91),.28) 38%,rgba(var(--lv-gs,198,161,91),.10) 62%,rgba(var(--lv-gbs,233,206,138),.55)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;pointer-events:none; } /* ---------- Traveling light border -------------------------------- */ /* A single point of light that runs the perimeter. Implemented as a rotating conic gradient masked to a 1px ring, so it traces the border rather than washing the whole element. @property lets the angle animate on the compositor; browsers without it fall back to a still gilded edge. */ @property --pr-angle{syntax:'';initial-value:0deg;inherits:false;} .pr-lightborder{position:relative;border-radius:var(--pr-r-lg);isolation:isolate;} .pr-lightborder.is-xl{border-radius:var(--pr-r-xl);} /* superseded by .pr-lightborder > .pr-surface in v3.10 */ .pr-lightborder::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--pr-angle), rgba(var(--lv-gs,198,161,91),.16) 0deg, rgba(var(--lv-gs,198,161,91),.16) 300deg, rgba(var(--lv-gbs,233,206,138),.95) 336deg, rgb(var(--lv-w61s,255,243,214)) 348deg, rgba(var(--lv-gbs,233,206,138),.95) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; animation:pr-orbit 7s linear infinite;pointer-events:none;z-index:1; } /* A soft bloom that follows the same light, so the edge glows rather than simply being brighter. Deliberately faint: this should register as candlelight on gilt, not as neon. */ .pr-lightborder::after{ content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none; box-shadow:var(--pr-glow);opacity:.65;z-index:0; } @supports not (background:conic-gradient(from 0deg,red,blue)){ .pr-lightborder::before{background:linear-gradient(140deg,rgba(var(--lv-gbs,233,206,138),.9),rgba(var(--lv-gs,198,161,91),.25));animation:none;} } @keyframes pr-orbit{to{--pr-angle:360deg;}} /* Static gold glow, for elements that should feel lit without motion. */ .pr-glow{box-shadow:var(--pr-shadow-soft),var(--pr-glow);} .pr-glow-hover{transition:box-shadow .5s var(--pr-ease),transform .5s var(--pr-ease);} .pr-glow-hover:hover{box-shadow:var(--pr-shadow-lift),var(--pr-glow-strong);} /* A slow sheen that crosses a surface once on reveal — the light passing over polished metal. */ .pr-sheen{position:relative;overflow:hidden;} .pr-sheen::before{ content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:32%; background:linear-gradient(100deg,transparent,rgba(var(--lv-wh,255,255,255),.42),transparent); transform:translateX(-260%) rotate(8deg);pointer-events:none;z-index:2; } .pr-sheen.pr-in::before{animation:pr-sweep 2.4s var(--pr-ease) .35s 1;} @keyframes pr-sweep{to{transform:translateX(560%) rotate(8deg);}} /* ---------- 3D tilt ----------------------------------------------- */ /* Pointer-tracked parallax. js/prestige.js writes --rx/--ry/--mx/--my. */ /* No transform and no will-change at rest — see the v4.2 CLARITY note further down this file. A card that is standing still must be a plain, unlayered box, or its text is rasterised into a GPU texture and reads soft even though nothing is moving. */ .pr-tilt{ transform-style:flat; transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease); } .pr-tilt.is-tilting{ transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d; transition:transform .08s linear,box-shadow .5s var(--pr-ease);} /* A highlight that follows the cursor across the surface. Deliberately on ::after — .pr-card and .pr-cta already own their ::before for the gold rule and the dot field, and a collision would silently kill one of them. A tight specular pass, not a fog: the old 50%-white 420px wash sat over half the card and read as haze rather than light on a polished surface. */ .pr-tilt::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1; background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),rgba(var(--lv-wh,255,255,255),.20),transparent 58%); opacity:0;transition:opacity .45s; } .pr-tilt.is-tilting::after{opacity:1;} .pr-section.is-royal .pr-tilt::after{ background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(var(--lv-gbs,233,206,138),.14),transparent 60%); } /* Tilted cards need their own content above the highlight wash. */ .pr-tilt > *{position:relative;z-index:2;} /* ---------- Typewriter -------------------------------------------- */ /* Visually hidden but readable by assistive technology — the typewriter keeps the real sentence here so a screen reader gets it whole, not letter by letter. */ .pr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;} .pr-type{display:inline;} .pr-type-caret{display:inline-block;width:2px;height:.92em;margin-left:.08em; vertical-align:-.08em;background:linear-gradient(180deg,var(--pr-gold-bright),var(--pr-gold-deep)); animation:pr-blink 1.05s steps(1,end) infinite;border-radius:1px;} .pr-type.is-done .pr-type-caret{animation:pr-blink 1.05s steps(1,end) 3;opacity:0;} @keyframes pr-blink{0%,49%{opacity:1}50%,100%{opacity:0}} /* ---------- Shared type / ornament -------------------------------- */ .pr-eyebrow{display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-body);font-size:.72rem;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--pr-gold-deep);} .pr-eyebrow::before,.pr-eyebrow.is-centered::after{content:"";width:34px;height:1px; background:linear-gradient(90deg,transparent,var(--pr-gold));display:inline-block;} .pr-eyebrow.is-centered::before{background:linear-gradient(90deg,var(--pr-gold),transparent);} .pr-h2{font-family:var(--font-label);font-weight:600;line-height:1.12; font-size:clamp(1.8rem,4.4vw,3rem);color:var(--pr-coffee);margin:.5rem 0 0;} .pr-lead{font-family:var(--font-display);font-size:clamp(1.12rem,2.3vw,1.4rem); line-height:1.6;color:rgb(var(--lv-w16,90,74,56));max-width:64ch;margin:1rem 0 0;} .pr-divider{width:120px;height:22px;margin:26px auto;opacity:.9} .pr-center{text-align:center;display:flex;flex-direction:column;align-items:center;} /* ---------- Diamond + gold traveling light ------------------------ */ /* A deliberately VISIBLE version of the light border:a warm gold arc runs the perimeter one way while a small white "diamond" spark counter-rotates faster, so the two cross and the border reads as a jewel catching light rather than a tube of neon. Reserved for the single most important panel on a page. */ @property --pr-angle2{syntax:'';initial-value:0deg;inherits:false;} .pr-diamond{position:relative;isolation:isolate; box-shadow:var(--pr-shadow),0 0 0 1px rgba(var(--lv-gs,198,161,91),.34),0 0 44px -10px rgba(var(--lv-gbs,233,206,138),.55);} .pr-diamond > *{position:relative;z-index:3;} .pr-diamond::before,.pr-diamond::after{ content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;pointer-events:none; } /* the gold arc */ .pr-diamond::before{ background:conic-gradient(from var(--pr-angle), rgba(var(--lv-gs,198,161,91),.20) 0deg, rgba(var(--lv-gs,198,161,91),.20) 232deg, rgba(var(--lv-gs,198,161,91),.62) 276deg, rgb(var(--lv-gbs,233,206,138)) 308deg, rgb(var(--lv-gls,255,246,223)) 320deg, rgb(var(--lv-gbs,233,206,138)) 332deg, rgba(var(--lv-gs,198,161,91),.62) 352deg, rgba(var(--lv-gs,198,161,91),.20) 360deg); animation:pr-orbit 5.6s linear infinite;z-index:1; filter:drop-shadow(0 0 5px rgba(var(--lv-gbs,233,206,138),.55)); } /* the diamond spark, counter-rotating and faster, with a prismatic edge */ .pr-diamond::after{ background:conic-gradient(from var(--pr-angle2), transparent 0deg, transparent 340deg, rgba(190,235,255,.75) 348deg, rgb(var(--lv-wh,255,255,255)) 353deg, rgba(var(--lv-w211,255,240,205),.95) 357deg, transparent 360deg); animation:pr-orbit2 3.4s linear infinite;z-index:2; filter:drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(var(--lv-gbs,233,206,138),.8)); } @keyframes pr-orbit2{to{--pr-angle2:-360deg;}} @supports not (background:conic-gradient(from 0deg,red,blue)){ .pr-diamond::before{background:linear-gradient(140deg,rgb(var(--lv-gbs,233,206,138)),rgba(var(--lv-gs,198,161,91),.3));animation:none;} .pr-diamond::after{display:none;} } /* ---------- Photographic frames ----------------------------------- */ /* Rounded, raised, and revealed with a horizontal wipe rather than a fade — the image appears to be drawn across the frame. A gold bar travels ahead of the wipe so the reveal has an edge of light leading it. */ .pr-photo{position:relative;border-radius:var(--pr-r-lg);overflow:hidden; box-shadow:var(--pr-shadow),var(--pr-bevel); clip-path:inset(0 100% 0 0 round var(--pr-r-lg)); transition:clip-path 1.15s var(--pr-ease),transform .6s var(--pr-ease),box-shadow .6s var(--pr-ease); transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d;background:var(--pr-cream-bg);} .pr-photo.pr-in{clip-path:inset(0 0 0 0 round var(--pr-r-lg));} .pr-photo img{display:block;width:100%;height:auto; transform:scale(1.05);transition:transform 1.4s var(--pr-ease),filter .7s; filter:saturate(.96) contrast(1.02);} .pr-photo:hover{box-shadow:var(--pr-shadow-lift),var(--pr-glow);} .pr-photo:hover img{transform:scale(1.11);filter:saturate(1.04) contrast(1.05);} /* leading edge of light on the wipe */ .pr-photo::before{content:"";position:absolute;top:-10%;bottom:-10%;width:16%;left:-20%;z-index:2; background:linear-gradient(100deg,transparent,rgba(var(--lv-gls,255,246,223),.85),transparent); opacity:0;pointer-events:none;} .pr-photo.pr-in::before{animation:pr-photo-sweep 1.35s var(--pr-ease) 1;} @keyframes pr-photo-sweep{0%{opacity:0;transform:translateX(0)}12%{opacity:1}100%{opacity:0;transform:translateX(760%)}} /* inner gold hairline so the rounded corner reads as a mount, not a crop */ .pr-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(var(--lv-gbs,233,206,138),.5),inset 0 0 34px -14px rgba(var(--lv-cfd2s,42,28,16),.55);} .pr-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;} .pr-photo-cap{margin-top:14px;font-size:.82rem;color:rgb(var(--lv-ink3,114,100,73));line-height:1.5;} /* ---------- Statistic animation variants -------------------------- */ /* Odometer: each digit rides a reel that spins through 0-9 and lands on its value, staggered left to right. */ .pr-od{display:inline-block;height:1em;overflow:hidden;vertical-align:top;line-height:1;} .pr-od-reel{display:block;transition:transform 1.5s var(--pr-ease);} .pr-od-reel i{display:block;height:1em;line-height:1;font-style:normal;} /* Ring: an arc draws around the figure as it counts. */ .pr-stat-ring{position:relative;display:inline-grid;place-items:center; width:106px;height:106px;margin:0 auto;} .pr-stat-ring .pr-stat-n{font-size:clamp(1.5rem,3.4vw,2.05rem);} .pr-stat-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);} .pr-stat-ring circle{fill:none;stroke-width:3;} .pr-stat-ring .trk{stroke:rgba(var(--lv-g,198,161,91),.18);} .pr-stat-ring .arc{stroke:url(#pr-gold-grad);stroke-linecap:round; transition:stroke-dashoffset 1.7s var(--pr-ease);} /* Underline bar that grows beneath a figure. */ .pr-stat-bar{height:3px;width:0;margin:12px auto 0;border-radius:var(--pr-r-pill); background:linear-gradient(90deg,var(--pr-gold-deep),var(--pr-gold-bright)); transition:width 1.5s var(--pr-ease);box-shadow:0 0 10px -2px rgba(var(--lv-gs,198,161,91),.7);} .pr-stat{position:relative;overflow:hidden;} /* a slow gold wash that lifts each cell as it populates */ .pr-stat::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(160px 90px at 50% 0%,rgba(var(--lv-gbs,233,206,138),.22),transparent 70%); opacity:0;transition:opacity 1.1s var(--pr-ease);} .pr-in .pr-stat::after,.pr-stat.pr-in::after{opacity:1;} /* ---------- Pledge line (typewriter) ------------------------------ */ /* One defining sentence per page, set large and centred between two gold rules, that writes itself out when it scrolls into view. Used sparingly — the effect is only impressive while it stays rare. */ .pr-pledge{padding:clamp(46px,8vh,86px) 0;text-align:center;} .pr-pledge-rule{width:74px;height:1px;margin:0 auto; background:linear-gradient(90deg,transparent,var(--pr-gold),transparent);} .pr-pledge-rule.is-btm{margin-top:26px;} .pr-pledge blockquote{margin:26px auto 0;max-width:30ch; font-family:var(--font-display);font-style:italic; font-size:clamp(1.45rem,3.6vw,2.35rem);line-height:1.42;color:var(--pr-coffee);} .pr-section.is-royal .pr-pledge blockquote{color:#fff;} .pr-pledge cite{display:block;margin-top:20px;font-family:var(--font-body);font-style:normal; font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pr-gold-deep);} .pr-section.is-royal .pr-pledge cite{color:var(--pr-gold-bright);} /* ---------- Immersive hero ---------------------------------------- */ .pr-hero{position:relative;min-height:min(84vh,720px);display:flex;align-items:flex-end; overflow:hidden;color:#fff;isolation:isolate;} .pr-hero-media{position:absolute;inset:0;z-index:-2;} .pr-hero-media img{width:100%;height:100%;object-fit:cover; transform:scale(1.08);animation:pr-kenburns 22s ease-out forwards;} /* Legibility for the text over the photograph comes entirely from .pr-hero-inner::before (a crimson-tinted panel, not a wash over the photograph) and text-shadow below — the photograph itself carries no dark overlay at all now, by explicit request: no black or near-black tint on any image, however light. */ .pr-hero::after{content:"";position:absolute;inset:0;z-index:-1;} .pr-hero-inner{width:min(1180px,92%);margin:0 auto;padding:0 0 clamp(48px,8vh,110px);} .pr-hero .pr-eyebrow{color:var(--pr-gold-bright);} .pr-hero .pr-eyebrow::before{background:linear-gradient(90deg,transparent,var(--pr-gold-bright));} /* The colour is stated, not inherited. css/brand.css sets every heading to --navy, which is a dark brown, and a direct rule on the element always beats a colour inherited from .pr-hero — so the title of every photographic hero on the site was being painted dark brown over a sunlit photograph, and effectively disappeared. */ .pr-hero-title{font-family:var(--font-label);font-weight:700;line-height:1.06; font-size:clamp(2.4rem,6.4vw,4.6rem);margin:.4rem 0 0; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);} .pr-hero-title span{color:inherit;} .pr-hero-sub{font-family:var(--font-display);font-size:clamp(1.15rem,2.6vw,1.6rem); line-height:1.55;max-width:60ch;margin:1.1rem 0 0;color:rgba(255,255,255,.92);} .pr-hero-cues{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;} .pr-hero-frame{position:absolute;inset:18px;z-index:-1;border:1px solid rgba(var(--lv-gbs,233,206,138),.34); pointer-events:none;} .pr-hero-frame::before,.pr-hero-frame::after{content:"";position:absolute;width:26px;height:26px; border:2px solid var(--pr-gold-bright);} .pr-hero-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;} .pr-hero-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;} @keyframes pr-kenburns{from{transform:scale(1.14) translateY(2%)}to{transform:scale(1.02)}} /* ---------- Buttons ---------------------------------------------- */ .pr-btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body); font-weight:600;font-size:.92rem;letter-spacing:.02em;padding:.9em 1.7em;border-radius:var(--pr-r-pill); text-decoration:none;transition:transform .3s,box-shadow .3s,background .3s;position:relative;} .pr-btn .a{transition:transform .3s;} .pr-btn:hover .a{transform:translateX(4px);} .pr-btn.is-gold{background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright)); color:rgb(var(--lv-cfd2,42,28,16));box-shadow:0 10px 26px -12px rgba(var(--lv-gs,198,161,91),.7);} .pr-btn.is-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(var(--lv-gs,198,161,91),.85);} .pr-btn.is-ghost{border:1px solid rgba(var(--lv-gbs,233,206,138),.6);color:var(--pr-gold-bright);} .pr-btn.is-ghost:hover{background:rgba(var(--lv-gbs,233,206,138),.12);transform:translateY(-2px);} .pr-btn.is-ink{border:1px solid var(--pr-line);color:var(--pr-coffee-2);} .pr-btn.is-ink:hover{background:var(--pr-ivory-bg);transform:translateY(-2px);} /* ---------- Section frame ---------------------------------------- */ .pr-section{padding:clamp(56px,9vh,110px) 0;} .pr-section .wrap,.pr-wrap{width:min(1180px,92%);margin:0 auto;} .pr-section.is-ivory{background:radial-gradient(1200px 500px at 80% -10%,rgba(var(--lv-gs,198,161,91),.10),transparent 60%),var(--pr-ivory-bg);} .pr-section.is-royal{position:relative;color:rgb(var(--lv-w06,244,234,212));overflow:hidden; background:radial-gradient(1000px 600px at 15% 0%,rgb(var(--lv-w158,58,40,20)),rgb(var(--lv-cfd,36,23,8)) 62%,rgb(var(--lv-w159,28,18,8)));} .pr-section.is-royal .pr-h2{color:#fff;} .pr-section.is-royal .pr-eyebrow{color:var(--pr-gold-bright);} .pr-section.is-royal .pr-lead{color:rgba(var(--lv-w06,244,234,212),.82);} .pr-section.is-royal::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:radial-gradient(circle at 1px 1px,rgba(var(--lv-gbs,233,206,138),.16) 1px,transparent 0); background-size:26px 26px;mask-image:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);} /* ---------- Stat band (animated counters) ------------------------ */ .pr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px; border:1px solid var(--pr-line);border-radius:var(--pr-r-lg);overflow:hidden;background:var(--pr-line); box-shadow:var(--pr-shadow-soft),var(--pr-bevel);} .pr-stat{background:var(--pr-milk-bg);padding:30px 20px;text-align:center;} .pr-section.is-royal .pr-stat{background:rgba(var(--lv-wh,255,255,255),.03);} .pr-stat-n{font-family:var(--font-label);font-weight:700;line-height:1; font-size:clamp(2.1rem,5vw,3.2rem); background:linear-gradient(120deg,var(--pr-gold-deep),var(--pr-gold-bright)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .pr-stat-l{font-family:var(--font-body);font-weight:600;font-size:.82rem; letter-spacing:.04em;color:var(--pr-coffee-2);margin-top:10px;} .pr-section.is-royal .pr-stat-l{color:rgb(var(--lv-w81,232,220,194));} .pr-stat-s{font-size:.76rem;color:rgb(var(--lv-ink3,114,100,73));margin-top:5px;} .pr-section.is-royal .pr-stat-s{color:rgba(var(--lv-w81,232,220,194),.6);} /* ---------- Pillar cards (icons) --------------------------------- */ .pr-grid{display:grid;gap:22px;} .pr-grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));} .pr-grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));} .pr-card{background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),var(--pr-milk-bg) 52%,rgb(var(--lv-w25,248,241,228))); border:1px solid var(--pr-line);border-radius:var(--pr-r-md); padding:30px 28px;position:relative;overflow:hidden; box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .45s var(--pr-ease),box-shadow .45s var(--pr-ease);} .pr-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--pr-gold-deep),var(--pr-gold-bright),transparent); transform:scaleX(0);transform-origin:left;transition:transform .5s;} .pr-card:hover{transform:translateY(-7px);box-shadow:var(--pr-shadow-lift),var(--pr-bevel),var(--pr-glow);} .pr-card:hover::before{transform:scaleX(1);} .pr-ico{width:54px;height:54px;display:grid;place-items:center;border-radius:var(--pr-r-md); background:linear-gradient(140deg,rgba(var(--lv-gs,198,161,91),.16),rgba(var(--lv-gbs,233,206,138),.06)); border:1px solid var(--pr-line);color:var(--pr-gold-deep);margin-bottom:16px;} .pr-ico svg{width:26px;height:26px;} .pr-card h3{font-family:var(--font-label);font-size:1.16rem;color:var(--pr-coffee);margin:0 0 8px;} .pr-card p{color:rgb(var(--lv-w16,90,74,56));font-size:.96rem;line-height:1.6;margin:0;} /* ---------- Learning pathway (infographic) ----------------------- */ .pr-path{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;position:relative;margin-top:34px;} .pr-path-step{position:relative;padding:26px 16px 20px;text-align:center;} .pr-path-line{position:absolute;top:52px;left:12%;right:12%;height:2px;z-index:0; background:repeating-linear-gradient(90deg,var(--pr-gold) 0 8px,transparent 8px 16px);opacity:.5;} .pr-path-dot{width:20px;height:20px;border-radius:50%;margin:0 auto 16px;position:relative;z-index:1; background:linear-gradient(140deg,var(--pr-gold-bright),var(--pr-gold-deep)); box-shadow:0 0 0 6px rgba(var(--lv-gs,198,161,91),.14);} .pr-path-age{font-family:var(--font-label);font-weight:700;color:var(--pr-gold-deep);font-size:1.05rem;} .pr-path-t{font-weight:600;color:var(--pr-coffee-2);font-size:.92rem;margin-top:6px;} .pr-path-d{color:rgb(var(--lv-w45,122,106,82));font-size:.8rem;margin-top:4px;line-height:1.45;} /* ---------- Charts (animated SVG) -------------------------------- */ .pr-chart-card{background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),var(--pr-milk-bg) 52%,rgb(var(--lv-w25,248,241,228))); border:1px solid var(--pr-line);border-radius:var(--pr-r-lg); padding:30px 28px;box-shadow:var(--pr-shadow),var(--pr-bevel);} .pr-chart-card h3{font-family:var(--font-label);font-size:1.1rem;color:var(--pr-coffee);margin:0 0 4px;} .pr-chart-card .cap{font-size:.82rem;color:rgb(var(--lv-ink3,114,100,73));margin:0 0 18px;} .pr-bars{display:flex;align-items:flex-end;gap:14px;height:210px;padding-top:10px;} .pr-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;} .pr-bar-fill{width:100%;max-width:56px;border-radius:var(--pr-r-sm) var(--pr-r-sm) 4px 4px;height:0; background:linear-gradient(180deg,var(--pr-gold-bright),var(--pr-gold-deep)); transition:height 1.3s cubic-bezier(.16,.8,.24,1);position:relative;} .pr-bar-fill[data-alt]{background:linear-gradient(180deg,#6c8f9e,#3f5b68);} .pr-bar-v{font-family:var(--font-label);font-weight:700;color:var(--pr-coffee-2);font-size:.9rem;margin-bottom:8px;opacity:0;transition:opacity .6s .5s;} .pr-in .pr-bar-v{opacity:1;} .pr-bar-x{font-size:.76rem;color:rgb(var(--lv-w45,122,106,82));margin-top:10px;text-align:center;line-height:1.3;} .pr-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;font-size:.82rem;color:rgb(var(--lv-w16,90,74,56));} .pr-legend span{display:inline-flex;align-items:center;gap:7px;} .pr-legend i{width:12px;height:12px;border-radius:3px;display:inline-block;} .pr-donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;} .pr-donut{--v:0;width:168px;height:168px;flex-shrink:0;} .pr-donut circle{fill:none;stroke-width:16;} .pr-donut .track{stroke:rgba(var(--lv-g,198,161,91),.16);} .pr-donut .val{stroke:url(#pr-gold-grad);stroke-linecap:round; transition:stroke-dashoffset 1.6s cubic-bezier(.16,.8,.24,1);transform:rotate(-90deg);transform-origin:center;} .pr-donut-c{font-family:var(--font-label);font-weight:700;font-size:1.6rem;fill:var(--pr-coffee-bg);} .pr-line-svg .area{fill:url(#pr-area-grad);opacity:0;transition:opacity 1s .6s;} .pr-in .pr-line-svg .area{opacity:1;} .pr-line-svg .line{fill:none;stroke:url(#pr-gold-grad);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; transition:stroke-dashoffset 1.8s cubic-bezier(.22,.7,.3,1);} .pr-line-svg .dot{fill:var(--pr-gold-deep);opacity:0;transition:opacity .4s;} .pr-in .pr-line-svg .dot{opacity:1;} .pr-line-svg text{font-size:9px;fill:rgb(var(--lv-w82,138,122,96));font-family:var(--font-body);} /* ---------- Age-coverage chart (horizontal, honest) -------------- */ .pr-agechart{margin-top:10px;} .pr-age-row{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:14px;margin:14px 0;} .pr-age-label{font-weight:600;color:var(--pr-coffee-2);font-size:.9rem;text-align:right;line-height:1.25;} .pr-age-label small{display:block;font-weight:400;color:rgb(var(--lv-ink3,114,100,73));font-size:.74rem;} .pr-age-track{position:relative;height:36px;background:rgba(var(--lv-gs,198,161,91),.10);border-radius:var(--pr-r-pill); overflow:hidden;box-shadow:inset 0 1px 3px rgba(var(--lv-cfd2s,42,28,16),.10);} .pr-age-fill{position:absolute;top:0;bottom:0;width:0;border-radius:var(--pr-r-pill); box-shadow:0 2px 8px -2px rgba(var(--lv-gds,156,122,60),.55),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.35); background:linear-gradient(120deg,var(--pr-gold-deep),var(--pr-gold-bright)); transition:width 1.4s cubic-bezier(.16,.8,.24,1);display:flex;align-items:center;padding-left:12px; color:rgb(var(--lv-cfd2,42,28,16));font-size:.78rem;font-weight:600;white-space:nowrap;} .pr-age-fill.is-open{background:linear-gradient(120deg,#4f6f7c,#7ea1ad);color:#fff;} .pr-age-axis{display:grid;grid-template-columns:200px 1fr;gap:14px;margin-top:8px;} .pr-age-axis .ticks{display:flex;justify-content:space-between;font-size:.72rem;color:rgb(var(--lv-ink3,114,100,73)); border-top:1px solid var(--pr-line);padding-top:6px;} @media (max-width:620px){ .pr-age-row,.pr-age-axis{grid-template-columns:1fr;} .pr-age-label{text-align:left;} .pr-age-axis .ticks{margin-left:0;} } /* ---------- Comparison table ------------------------------------- */ .pr-compare-scroll{overflow-x:auto;border:1px solid var(--pr-line);border-radius:var(--pr-r-lg); box-shadow:var(--pr-shadow),var(--pr-bevel);background:var(--pr-milk-bg);} .pr-compare{border-collapse:collapse;width:100%;min-width:720px;background:var(--pr-milk-bg);font-size:.9rem;} .pr-compare th,.pr-compare td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.16);vertical-align:top;} .pr-compare thead th{background:linear-gradient(120deg,rgb(var(--lv-cfs,59,42,29)),rgb(var(--lv-cfd,36,23,8)));color:var(--pr-gold-bright); font-family:var(--font-label);font-weight:600;font-size:.86rem;position:sticky;top:0;} .pr-compare tbody th{font-weight:600;color:var(--pr-coffee-2);background:rgba(var(--lv-gs,198,161,91),.06);white-space:nowrap;} .pr-compare tbody tr:hover td{background:rgba(var(--lv-gs,198,161,91),.05);} .pr-compare td b{color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} /* ---------- Feature tiles (upgraded school-blocks) --------------- */ .pr-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:34px;} .pr-feature{position:relative;border-radius:var(--pr-r-lg);overflow:hidden;min-height:270px;display:flex; align-items:flex-end;color:#fff;box-shadow:var(--pr-shadow);isolation:isolate; transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease);} .pr-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s;} .pr-feature:hover img{transform:scale(1.06);} /* The tile is a photograph with its words laid over it, so the scrim is the only thing that makes them readable. The old ramp was 5% dark at the top and did not reach half opacity until 55% of the way down — but the body begins around a quarter of the way down, and over the sunlit photographs actually used here the headings measured 1.01:1. Dark from the top, and a shadow under the type as well. */ .pr-feature::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(110,38,34,.14) 0%,rgba(110,38,34,.28) 42%,rgba(110,38,34,.5) 100%);} /* The words get their own plate rather than relying on a wash over the whole photograph. A wash heavy enough to carry type over a bright, busy picture ruins the picture; a plate under the type alone leaves the top of the frame open and still guarantees the reading. */ .pr-feature .pr-feature-body{width:100%;padding:56px 24px 24px; text-shadow:0 1px 10px rgba(var(--lv-w09,10,6,1),.8); background:linear-gradient(180deg,rgba(110,38,34,0) 0%,rgba(110,38,34,.55) 26%,rgba(110,38,34,.78) 100%);} .pr-feature-body{padding:24px;} .pr-feature .tag{display:inline-block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--pr-gold-bright);font-weight:600;} .pr-feature h3{font-family:var(--font-label);font-size:1.2rem;margin:8px 0 6px;} .pr-feature p{font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.85);margin:0 0 12px;} .pr-feature a{color:#fff;font-weight:600;font-size:.88rem;text-decoration:none;border-bottom:1px solid var(--pr-gold-bright);padding-bottom:2px;} /* ---------- Founder / message block ------------------------------ */ .pr-founder{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:36px;align-items:start;} @media (max-width:760px){.pr-founder{grid-template-columns:1fr;}} .pr-founder-card{background:linear-gradient(160deg,rgb(var(--lv-cfs,59,42,29)),rgb(var(--lv-cfd,36,23,8)));color:rgb(var(--lv-w06,244,234,212));border-radius:var(--pr-r-lg); padding:34px 28px;text-align:center;box-shadow:var(--pr-shadow),var(--pr-bevel-dark);position:sticky;top:90px;} .pr-founder-card .crest{width:96px;height:96px;object-fit:contain;margin:0 auto 14px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));} .pr-founder-card .role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pr-gold-bright);} .pr-founder-card h3{font-family:var(--font-label);font-size:1.3rem;margin:8px 0 12px;color:#fff;} .pr-creds{font-size:.78rem;line-height:1.6;color:rgba(var(--lv-w06,244,234,212),.72);border-top:1px solid rgba(var(--lv-gbs,233,206,138),.24);padding-top:12px;} .pr-founder-body p{color:rgb(var(--lv-w16,90,74,56));font-size:1.04rem;line-height:1.8;margin:0 0 16px;} .pr-founder-body p:first-child::first-letter{float:left;font-family:var(--font-label);font-size:3.4rem; line-height:.8;padding:6px 12px 0 0;color:var(--pr-gold-deep);} /* ---------- Pull quote ------------------------------------------- */ .pr-quote{position:relative;background:var(--pr-milk-bg);border:1px solid var(--pr-line);border-left:4px solid var(--pr-gold); border-radius:var(--pr-r-md);padding:34px 36px;box-shadow:var(--pr-shadow-soft),var(--pr-bevel);} .pr-quote .mk{font-family:var(--font-label);font-size:3rem;line-height:0;color:var(--pr-gold);opacity:.5;} .pr-quote p{font-family:var(--font-display);font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.5; color:var(--pr-coffee);margin:10px 0 14px;font-style:italic;} .pr-quote .who{font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--pr-gold-deep);} /* ---------- Checklist -------------------------------------------- */ .pr-checklist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;} .pr-checklist li{display:flex;gap:12px;align-items:flex-start;color:rgb(var(--lv-w160,74,63,48));font-size:1rem;line-height:1.55;} .pr-checklist li svg{flex-shrink:0;width:22px;height:22px;color:var(--pr-gold-deep);margin-top:1px;} /* ---------- Letter value cards ----------------------------------- */ .pr-letter{font-family:var(--font-label);font-weight:700;font-size:1.7rem; background:linear-gradient(120deg,var(--pr-gold-deep),var(--pr-gold-bright)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} /* ---------- Crest quadrants -------------------------------------- */ /* The four devices are cropped from the school's own crest artwork rather than substituted with generic symbols — they are the institution's heraldry and nothing else may stand in for them. */ .pr-quad{display:flex;gap:22px;align-items:flex-start;text-align:left;} .pr-quad-ico{width:92px;height:92px;flex-shrink:0;border-radius:var(--pr-r-md); display:grid;place-items:center;position:relative;overflow:hidden; background:radial-gradient(circle at 34% 26%,rgba(var(--lv-gbs,233,206,138),.22),rgba(var(--lv-gs,198,161,91),.07) 58%,transparent 78%); border:1px solid rgba(var(--lv-gbs,233,206,138),.32); box-shadow:inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.26),0 10px 26px -16px rgba(0,0,0,.7);} .pr-quad-ico img{width:62px;height:62px;object-fit:contain; filter:drop-shadow(0 5px 12px rgba(0,0,0,.5)); transition:transform .6s var(--pr-ease);} .pr-quad:hover .pr-quad-ico img{transform:scale(1.09) rotate(-2deg);} .pr-quad-body h3{font-family:var(--font-label);font-size:1.12rem;margin:2px 0 8px;} @media (max-width:520px){.pr-quad{flex-direction:column;gap:16px;}} .pr-crest-img{width:150px;height:150px;object-fit:contain;margin:0 auto 8px;display:block; filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));} /* ---------- Impact band ------------------------------------------ */ .pr-impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:30px;} .pr-impact-item{padding:24px;border:1px solid var(--pr-line);border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),var(--pr-milk-bg));box-shadow:var(--pr-shadow-soft),var(--pr-bevel);} .pr-impact-item .pr-ico{margin-bottom:12px;} .pr-impact-item :is(h3,h4){font-family:var(--font-label);font-size:1rem;color:var(--pr-coffee);margin:0 0 6px;} .pr-impact-item p{font-size:.9rem;color:rgb(var(--lv-w62,106,90,69));line-height:1.55;margin:0;} /* ---------- Vertical timeline ------------------------------------ */ .pr-timeline{position:relative;margin-top:26px;} .pr-timeline::before{content:"";position:absolute;left:15px;top:6px;bottom:18px;width:2px; background:linear-gradient(180deg,var(--pr-gold),rgba(var(--lv-gs,198,161,91),.2));} .pr-tl-item{position:relative;padding:0 0 24px 52px;} .pr-tl-item:last-child{padding-bottom:0;} .pr-tl-dot{position:absolute;left:4px;top:1px;width:24px;height:24px;border-radius:50%; display:grid;place-items:center;font-family:var(--font-label);font-size:.72rem;font-weight:700;color:rgb(var(--lv-cfd2,42,28,16)); /* The medallion runs the full gold scale, and a numeral sitting over its darker end measured 2.66:1. Held to the bright half, where the same ink reads at 6.8:1 at the darkest point. */ background:linear-gradient(140deg,var(--pr-gold-bright,rgb(var(--lv-gbs,233,206,138))),var(--pr-gold,rgb(var(--lv-gs,198,161,91)))); box-shadow:0 0 0 5px var(--pr-ivory-bg);z-index:1;} .pr-section.is-royal .pr-tl-dot{box-shadow:0 0 0 5px rgb(var(--lv-cfd,36,23,8));} .pr-tl-item :is(h3,h4){font-family:var(--font-label);font-size:1.02rem;color:var(--pr-coffee);margin:0 0 3px;} .pr-section.is-royal .pr-tl-item :is(h3,h4){color:#fff;} .pr-tl-item p{color:rgb(var(--lv-w62,106,90,69));font-size:.92rem;line-height:1.55;margin:0;} .pr-section.is-royal .pr-tl-item p{color:rgba(var(--lv-w06,244,234,212),.78);} /* ---------- Outcome chips ---------------------------------------- */ .pr-outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px;} .pr-outcome{border:1px solid var(--pr-line);border-radius:var(--pr-r-md);padding:22px 24px; background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),var(--pr-milk-bg));border-top:3px solid var(--pr-gold); box-shadow:var(--pr-shadow-soft),var(--pr-bevel);} .pr-outcome.is-yes{border-top-color:#3f7d55;} .pr-outcome.is-wait{border-top-color:rgb(var(--lv-w83,192,138,46));} .pr-outcome.is-no{border-top-color:rgb(var(--lv-w84,154,75,75));} .pr-outcome :is(h3,h4){font-family:var(--font-label);font-size:1.05rem;color:var(--pr-coffee);margin:0 0 6px;} .pr-outcome p{font-size:.9rem;color:rgb(var(--lv-w62,106,90,69));line-height:1.55;margin:0;} /* ---------- Documents cards -------------------------------------- */ .pr-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px;} .pr-doc{display:flex;gap:14px;align-items:center;background:var(--pr-milk-bg);border:1px solid var(--pr-line); border-radius:var(--pr-r-md);padding:20px 22px;box-shadow:var(--pr-shadow-soft),var(--pr-bevel);} .pr-doc .pr-ico{margin:0;width:44px;height:44px;flex-shrink:0;} .pr-doc .pr-ico svg{width:22px;height:22px;} .pr-doc b{display:block;color:var(--pr-coffee);font-size:.96rem;} .pr-doc span{font-size:.82rem;color:rgb(var(--lv-ink3,114,100,73));} /* ---------- Closing CTA band ------------------------------------- */ /* The dot field lives in the element's own background rather than a ::before, which frees that pseudo-element for the traveling-light ring. */ .pr-cta{text-align:center;border-radius:var(--pr-r-xl);padding:clamp(46px,7vw,82px) 30px; position:relative;overflow:hidden;color:rgb(var(--lv-w06,244,234,212));box-shadow:var(--pr-shadow),var(--pr-bevel-dark); background:radial-gradient(circle at 1px 1px,rgba(var(--lv-gbs,233,206,138),.14) 1px,transparent 0) 0 0/24px 24px, radial-gradient(900px 400px at 50% -30%,rgb(var(--lv-w161,74,52,24)),rgb(var(--lv-cfd2s,42,28,16)) 70%);} .pr-cta h2{font-family:var(--font-label);font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 12px;color:#fff;position:relative;z-index:2;} .pr-cta p{max-width:56ch;margin:0 auto 26px;color:rgba(var(--lv-w06,244,234,212),.86);position:relative;z-index:2;font-size:1.04rem;line-height:1.7;} .pr-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;} /* ---------- Reduced motion --------------------------------------- */ @media (prefers-reduced-motion:reduce){ .pr-reveal,.pr-stagger>*{opacity:1!important;transform:none!important;transition:none!important;} .pr-hero-media img{animation:none;transform:scale(1.02);} .pr-bar-fill,.pr-age-fill,.pr-donut .val,.pr-line-svg .line{transition:none!important;} /* Every ornamental animation stops; the ornament itself stays, so the page still looks gilded rather than stripped. */ .pr-lightborder::before{animation:none; background:linear-gradient(140deg,rgba(var(--lv-gbs,233,206,138),.9),rgba(var(--lv-gs,198,161,91),.25));} .pr-sheen::before,.pr-sheen.pr-in::before{animation:none;display:none;} .pr-tilt,.pr-tilt.is-tilting{transform:none!important;transition:none!important;} .pr-tilt::after{display:none;} .pr-type-caret{animation:none;opacity:0;} .pr-diamond::before{animation:none;background:linear-gradient(140deg,rgb(var(--lv-gbs,233,206,138)),rgba(var(--lv-gs,198,161,91),.3));} .pr-diamond::after{display:none;} .pr-photo{clip-path:none!important;transform:none!important;transition:none!important;} .pr-photo::before{display:none;} .pr-od-reel,.pr-stat-ring .arc,.pr-stat-bar{transition:none!important;} } /* =================================================================== PRESTIGE v3 — corrections from a four-lens critique ------------------------------------------------------------------- Applied in dependency order: colour ladder, typography, the two raw brand.css components, sharp caps, hero, royal band, stat plates, buttons, 3D, traveling light, motion. Later rules intentionally override the v1/v2 declarations above at equal specificity. =================================================================== */ /* --- v3.1 Fix the dead colour ladder. `--pr-ivory:rgb(var(--lv-p3,247,238,223))` (prestige.css:18) is byte-identical to brand.css `--ivory`/`- --- */ :root{ --pr-ground:rgb(var(--lv-w85,242,231,213)); /* plain band — the settled tone */ --pr-band:rgb(var(--lv-w46,251,246,236)); /* lifted band — near-white parchment */ --pr-band-2:rgb(var(--lv-w162,237,224,202)); /* lifted band, foot */ } /* prestige.css only ships on prestige:true pages (build.js:246), so an unscoped body rule is already correctly scoped. Guard it so the Personalisation Centre reading modes (brand.css:77-82) still win. */ /* body ground intentionally left to brand.css — this layer now loads site-wide */ .pr-section{position:relative;background:var(--pr-ground);} .pr-section.is-ivory{ background:radial-gradient(1300px 560px at 82% -14%, rgba(var(--lv-gbs,233,206,138),.20), transparent 62%), radial-gradient(900px 420px at 6% 108%, rgba(var(--lv-gs,198,161,91),.09), transparent 60%), linear-gradient(180deg,var(--pr-band) 0%,var(--pr-band-2) 100%); } /* the join between two light bands is currently invisible — draw it */ .pr-section + .pr-section:not(.is-royal)::after{ content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(var(--lv-gs,198,161,91),.30) 18%,rgba(var(--lv-gs,198,161,91),.30) 82%,transparent); } /* a section that only exists to carry a pledge must not draw a second seam */ .pr-section[style*="padding-top:0"]::after{display:none;} /* --- v3.2 Give the typography a scale, retire eleven repeated inline paragraph styles, and add air. `.pr-h2` (prestige.c --- */ :root{ --pr-t-h2:clamp(1.9rem,4.2vw,3.1rem); --pr-t-lead:clamp(1.14rem,1.9vw,1.4rem); --pr-t-body:1.04rem; --pr-lh-body:1.78; } .pr-h2{ font-size:var(--pr-t-h2); letter-spacing:.012em; /* Cinzel caps need air — this is the whole fix */ line-height:1.14; text-wrap:balance; } /* every Cinzel run on these pages is currently untracked; none should be */ .pr-card h3,.pr-outcome :is(h3,h4),.pr-impact-item :is(h3,h4),.pr-tl-item :is(h3,h4), .pr-feature h3,.pr-chart-card h3,.pr-founder-card h3,.pr-h3{letter-spacing:.02em;} .pr-lead{font-size:var(--pr-t-lead);line-height:1.62;max-width:46ch;} .pr-hero-sub{max-width:44ch;} /* one class replaces ten inline styles */ .pr-body{ color:rgb(var(--lv-w16,90,74,56));font-size:var(--pr-t-body);line-height:var(--pr-lh-body); max-width:62ch;margin:1.05rem 0 0; } .pr-body + .pr-body{margin-top:.9rem;} .pr-body b,.pr-body strong{color:var(--pr-coffee-2);font-weight:600;} .pr-body.src{font-size:.78rem;color:rgb(var(--lv-w163,138,136,128));margin-top:16px;} .pr-section.is-royal .pr-body{color:rgba(var(--lv-w06,244,234,212),.82);} /* promotes the inline

at about.html:88 */ .pr-h3{font-family:var(--font-label);color:var(--pr-coffee);font-size:1.3rem;margin:8px 0 10px;} /* air */ .pr-section{padding:clamp(76px,11vh,140px) 0;} .pr-section .wrap,.pr-wrap{width:min(1200px,90%);} /* --- v3.3 Elevate `.institution-card` (5 on /academics/) and `.flow-stage` (7 on /admission/) — the two largest un-eleva --- */ /* ---------- Institution cards, prestige-grade ---------- */ .institutions-showcase{gap:30px;} .institution-card{ border-radius:var(--pr-r-lg); border:1px solid rgba(var(--lv-gs,198,161,91),.20); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)) 0%,var(--pr-milk-bg) 52%,rgb(var(--lv-p4,247,240,226)) 100%); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); overflow:hidden;isolation:isolate; transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease); } .institution-card:hover{box-shadow:var(--pr-shadow-lift),var(--pr-bevel),var(--pr-glow);} /* kill the square inset picture-frame; replace with an inlaid ring that follows the curve */ .institution-card::after{ inset:0;border:0;border-radius:inherit;z-index:4; box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.9), inset 0 0 0 1px rgba(var(--lv-gs,198,161,91),.12); } .institution-card .ic-visual{aspect-ratio:16/10;} .institution-card .ic-visual::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,transparent 46%,rgba(110,38,34,.26) 78%,rgba(110,38,34,.46)); } .institution-card .ic-visual img{transition:transform 1.1s var(--pr-ease);} .institution-card:hover .ic-visual img{transform:scale(1.05);} .institution-card .ic-tag{ display:inline-block;width:fit-content;align-self:flex-start; padding:7px 15px;border-radius:var(--pr-r-pill); background:linear-gradient(168deg,rgba(var(--lv-gs,198,161,91),.16),rgba(var(--lv-gs,198,161,91),.07)); border:1px solid rgba(var(--lv-gs,198,161,91),.32); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.7); } .institution-card .ic-meta{ border-radius:var(--pr-r-sm);border-inline-start:0;position:relative;overflow:hidden; background:linear-gradient(168deg,rgba(var(--lv-wh,255,255,255),.92),rgba(var(--lv-w40,240,231,214),.72)); border:1px solid rgba(var(--lv-gs,198,161,91),.18); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.9), 0 10px 22px -18px rgba(var(--lv-cfd5,34,23,9),.35); padding:16px 18px; } .institution-card .ic-meta::before{ content:"";position:absolute;inset-inline-start:0;top:14%;bottom:14%;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--pr-gold-bright),var(--pr-gold) 55%,rgba(var(--lv-gs,198,161,91),0)); } .institution-card .ic-cta{border-radius:var(--pr-r-pill);padding:11px 20px;} .institution-card .ic-strengths li::before{border-radius:50%;} /* ---------- Admission flow stages: same disease, same cure ---------- */ .flow-diagram{gap:10px;} .flow-stage{ position:relative; border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w63,246,239,225))); border:1px solid rgba(var(--lv-gs,198,161,91),.20); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); padding:26px 20px; transition:transform .4s var(--pr-ease),box-shadow .4s var(--pr-ease),background .3s ease; } .flow-stage:hover,.flow-stage:focus-visible{ transform:translateY(-4px); box-shadow:var(--pr-shadow),var(--pr-bevel); } /* the square 3px top caps become inset rounded rules that respect the curve */ .flow-stage.is-complete,.flow-stage.is-terminal{border-top-width:1px;} .flow-stage.is-complete::before,.flow-stage.is-terminal::before{ content:"";position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 3px 3px; } .flow-stage.is-complete::before{background:linear-gradient(90deg,transparent,var(--pr-gold),transparent);} .flow-stage.is-terminal::before{background:linear-gradient(90deg,transparent,rgb(var(--lv-w86,168,86,74)),transparent);} /* ---------- The seven stages, laid out so seven actually fits ---------- The row was flex-wrap with flex:1 on each card and a separate arrow between every pair. Seven cards do not divide into a 1280px row: five took the first line and two stretched to fill the second, so the same seven stages appeared at two completely different sizes — and the arrow that had been sitting between 05 and 06 was stranded at the end of the first row, pointing into empty space. It is a grid now, with a column count the layout commits to, so every card is the same size on every row at every width. The arrows are gone rather than repositioned, and that is deliberate. They were the broken part: an inter-item connector cannot know where a row ends, so it always risks pointing at nothing. Rebuilding them as a per-card pseudo-element does not fix that either — the .flow-arrow spans sit BETWEEN the stages in the DOM, so every .flow-stage is an odd child and any :nth-child(4n) rule meant to suppress the end-of-row chevron matches an arrow span instead of a card. The sequence is already stated, unambiguously and in every language, by the 01..07 numbering on the cards themselves. Hiding the spans also takes six glyph-only stops out of a screen reader's path through the diagram. */ .flow-arrow{display:none;} .flow-diagram{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:stretch; } @media (max-width:1080px){ .flow-diagram{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:720px){ .flow-diagram{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:480px){ .flow-diagram{ grid-template-columns:minmax(0,1fr); } } .adm-enquiry-cta{ border-radius:var(--pr-r-lg);border-top:0; background:linear-gradient(165deg,rgb(var(--lv-w87,62,44,30)) 0%,rgb(var(--lv-w47,44,30,18)) 48%,rgb(var(--lv-w35,33,21,8)) 100%); box-shadow:var(--pr-shadow),var(--pr-bevel-dark); } .adm-enquiry-btn{border-radius:var(--pr-r-pill);padding:11px 20px;} .adm-progress-banner{border-radius:var(--pr-r-sm);border-inline-start-width:4px;} .faq-item{ border-bottom:0;border-radius:var(--pr-r-sm);margin-bottom:10px;padding:0 18px; background:rgba(var(--lv-wh,255,255,255),.5);border:1px solid rgba(var(--lv-gs,198,161,91),.16); transition:background .35s ease,box-shadow .35s ease; } .faq-item.is-open{background:rgb(var(--lv-p1,255,253,249));box-shadow:var(--pr-shadow-soft);} .light-photo-pair .lpp-frame{border-radius:var(--pr-r-md);box-shadow:var(--pr-shadow-soft);border-color:rgba(var(--lv-gs,198,161,91),.22);} @media (prefers-reduced-motion:reduce){ .institution-card,.flow-stage{transition:none!important;transform:none!important;} .institution-card:hover .ic-visual img{transform:none;} } /* --- v3.4 Remove the straight caps butting rounded boxes — the residual 'sharp edge' after the hero. Three components pu --- */ /* quote: the 4px bar becomes an inlaid rounded rail set inside the panel */ .pr-quote{ border:1px solid var(--pr-line);border-left:1px solid var(--pr-line); border-radius:var(--pr-r-md);padding:44px 40px 36px 48px;overflow:hidden; } .pr-quote::before{ content:"";position:absolute;inset-inline-start:14px;top:18%;bottom:18%; width:4px;border-radius:4px; background:linear-gradient(180deg,rgb(var(--lv-w61s,255,243,214)),var(--pr-gold-bright) 22%,var(--pr-gold) 62%,rgba(var(--lv-gs,198,161,91),0)); box-shadow:0 0 18px -4px rgba(var(--lv-gbs,233,206,138),.65); } /* the quote mark becomes a watermark behind the text, not an inline glyph */ .pr-quote .mk{ position:absolute;top:-14px;inset-inline-end:22px; font-family:var(--font-label);font-size:9rem;line-height:1; color:var(--pr-gold);opacity:.10;pointer-events:none;user-select:none; } .pr-quote p{position:relative;margin:0 0 18px;} /* outcomes: the top cap becomes an inset rounded rule that respects the curve */ .pr-outcome{border-top:1px solid var(--pr-line);position:relative;padding-top:26px;} .pr-outcome.is-yes,.pr-outcome.is-wait,.pr-outcome.is-no{border-top-color:var(--pr-line);} .pr-outcome::before{ content:"";position:absolute;top:0;left:26px;right:26px;height:3px;border-radius:0 0 3px 3px; background:linear-gradient(90deg,transparent,var(--pr-gold),transparent); } .pr-outcome.is-yes::before{background:linear-gradient(90deg,transparent,#3F7D55,transparent);} .pr-outcome.is-wait::before{background:linear-gradient(90deg,transparent,rgb(var(--lv-w83,192,138,46)),transparent);} .pr-outcome.is-no::before{background:linear-gradient(90deg,transparent,rgb(var(--lv-w84,154,75,75)),transparent);} /* card sweep gets inset ends so it reads as a drawn rule, not a bleed */ .pr-card::before{left:24px;right:24px;height:2px;border-radius:0 0 2px 2px;} /* Deliberately STAY crisp — editorial furniture, not objects. Rounding any of these destroys the soft/sharp contrast that makes the soft things read as expensive: .pr-compare th/td cell edges, .pr-path-line, .pr-timeline::before, the .pr-eyebrow rules, .pr-age-axis .ticks border-top, .pr-pledge-rule. */ /* --- v3.5 Round and light the hero frame — the sharpest object on all three pages and the owner's literal complaint. `.p --- */ .pr-hero-frame{ inset:clamp(14px,2vw,26px); border:1px solid rgba(var(--lv-gbs,233,206,138),.28); border-radius:var(--pr-r-xl); box-shadow:inset 0 0 90px -30px rgba(0,0,0,.55), 0 0 40px -20px rgba(var(--lv-gbs,233,206,138),.30); } /* four corner brackets that follow the curve, not two that fight it. Requires one empty inside the frame div for the other two corners: */ .pr-hero-frame::before,.pr-hero-frame::after, .pr-hero-frame > i::before,.pr-hero-frame > i::after{ content:"";position:absolute;width:44px;height:44px; border:2px solid var(--pr-gold-bright);border-radius:var(--pr-r-xl); filter:drop-shadow(0 0 12px rgba(var(--lv-gbs,233,206,138),.55)); } .pr-hero-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0; border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;} .pr-hero-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0; border-bottom-left-radius:0;border-top-right-radius:0;border-top-left-radius:0;} .pr-hero-frame > i{position:absolute;inset:0;display:block;} .pr-hero-frame > i::before{top:-1px;right:-1px;border-left:0;border-bottom:0; border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;} .pr-hero-frame > i::after{bottom:-1px;left:-1px;border-right:0;border-top:0; border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;} /* v3.5 above rounded and lit this frame as a compromise, on the same complaint raised again since: a rectangle of lines laid over a photograph of the school reads as decoration bolted on, not as part of the photograph. Hidden outright this time rather than softened again. Left in the markup on every .pr-hero page, so restoring it is a CSS change and not a rebuild. */ .pr-hero-frame{display:none;} /* vignette + soft hand-off into the band below, replacing the hard cut */ .pr-hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,transparent 74%, rgba(var(--lv-w85,242,231,213),.10) 94%, var(--pr-ground) 100%); } /* Cinzel counters mush at 4.6rem over a photo with only one soft halo — add a tight contact shadow beneath the existing ambient one */ .pr-hero-title{ letter-spacing:.005em;text-wrap:balance; text-shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 30px rgba(0,0,0,.42), 0 0 90px rgba(0,0,0,.32); } /* the Ken Burns currently runs `forwards` (prestige.css:210) and freezes dead at scale(1.02) after 22s — a visitor scrolling back up finds a still image */ .pr-hero-media img{animation:pr-kenburns 26s ease-in-out infinite alternate;} /* This component carries a dozen different photographs across a dozen different pages — a gate, a hall, a laboratory, a classroom — each one genuinely the right picture for its own page, so swapping them all for a single repeated image would trade one complaint for the one this whole redesign started with. Several were shot indoors or in overcast light and read as flatly dark once the scrim (further down this file) sits over them. A straight exposure lift, applied here rather than to any one image, gets every one of them closer to how the room actually looked without needing new photography. */ /* Uniformly scaling every pixel brighter clips highlights first — a photograph with real sky or a light-coloured roof in frame (most of this site's campus photography) gets those areas pushed toward flat, detail-less white, which reads as a hazy or "blurred" patch rather than a bright photograph. Pulled back from 1.16 to keep the lift visible without blowing out what was already light in the source. */ .pr-hero-media img{filter:brightness(1.06) contrast(1.03) saturate(1.1);} @media (prefers-reduced-motion:reduce){ .pr-hero-media img{animation:none!important;transform:scale(1.02);} } /* --- v3.6 Light the royal band and close its edges. `.pr-section.is-royal` (prestige.css:249-256) is a single off-centre --- */ .pr-section.is-royal{ position:relative;color:rgb(var(--lv-w06,244,234,212));overflow:hidden;isolation:isolate; background:radial-gradient(120% 92% at 50% -28%, rgba(var(--lv-gbs,233,206,138),.16), transparent 58%), radial-gradient(70% 55% at 6% 104%, rgba(110,38,34,.12), transparent 62%), linear-gradient(168deg,rgb(var(--lv-w88,62,44,28)) 0%, rgb(var(--lv-cfd2s,42,28,16)) 46%, rgb(var(--lv-w164,27,17,7)) 100%); box-shadow:inset 0 -1px 0 rgba(var(--lv-gs,198,161,91),.26), inset 0 60px 90px -80px rgba(0,0,0,.9); } /* texture retreats to a whisper */ .pr-section.is-royal::before{ opacity:.24;background-size:34px 34px; background-image:radial-gradient(circle at 1px 1px,rgba(var(--lv-gbs,233,206,138),.14) 1px,transparent 0); mask-image:radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%); } /* the top edge closes with a lit hairline instead of a raw colour cut. is-royal has no ::after today, so this is free — and the light-band seam rule in entry 1 already excludes .is-royal, so they never collide. */ .pr-section.is-royal::after{ content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(var(--lv-gbs,233,206,138),.22) 14%,rgba(var(--lv-w36,255,248,228),.70) 50%,rgba(var(--lv-gbs,233,206,138),.22) 86%,transparent); } .pr-section.is-royal .wrap{position:relative;z-index:2;} /* gold on dark is under-saturated at these values */ .pr-section.is-royal .pr-eyebrow{color:rgb(var(--lv-w89,240,220,174));} .pr-section.is-royal .pr-h2{text-shadow:0 2px 30px rgba(0,0,0,.35);} /* the four crest quadrants (about.html:106,111,116,121) carry an inline style="background:rgba(var(--lv-wh,255,255,255),.04);border-color:rgba(var(--lv-gbs,233,206,138),.24)" which flattens .pr-card to a 4%-white wash, plus per-element colour styles. Delete all of them and let these rules own the dark surface. */ .pr-section.is-royal .pr-card{ background:linear-gradient(168deg,rgba(var(--lv-w109,78,56,38),.60) 0%,rgba(var(--lv-w110,45,31,19),.70) 55%,rgba(var(--lv-cfd5,34,23,9),.78) 100%); border-color:rgba(var(--lv-gbs,233,206,138),.22); box-shadow:0 10px 24px -14px rgba(0,0,0,.55), var(--pr-bevel-dark); } .pr-section.is-royal .pr-card:hover{ box-shadow:0 26px 52px -24px rgba(0,0,0,.70), var(--pr-bevel-dark), var(--pr-glow); } .pr-section.is-royal .pr-card h3{color:#fff;} .pr-section.is-royal .pr-card p{color:rgba(var(--lv-w06,244,234,212),.8);} /* --- v3.7 Make the stat band read as engraved plates rather than a dashboard, and let the gold focal points emit light. --- */ .pr-stat{ background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)) 0%,rgb(var(--lv-w165,250,243,231)) 58%,rgb(var(--lv-w64,244,235,218)) 100%); padding:clamp(30px,3.4vw,44px) clamp(16px,2vw,26px); position:relative;transition:background .5s var(--pr-ease); } .pr-stat:hover{background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)) 0%,rgb(var(--lv-w166,253,248,239)) 58%,rgb(var(--lv-w167,248,241,226)) 100%);} /* a lit crown on each cell so the grid reads as separate struck plates */ .pr-stat::before{ content:"";position:absolute;left:22%;right:22%;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(var(--lv-gbs,233,206,138),.75),transparent); } .pr-stat-n{ font-size:clamp(2.3rem,5.4vw,3.6rem); font-variant-numeric:tabular-nums; /* stops the counter jittering mid-count */ letter-spacing:.005em; background:linear-gradient(168deg,rgb(var(--lv-w48s,255,243,210)) 0%,var(--pr-gold-bright) 32%,var(--pr-gold) 70%,rgb(var(--lv-w90,154,118,56)) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; /* box-shadow cannot reach background-clip text — drop-shadow follows the glyph */ filter:drop-shadow(0 2px 14px rgba(var(--lv-gbs,233,206,138),.34)); } .pr-stat-l{ font-family:var(--font-label);font-weight:600;font-size:.72rem; letter-spacing:.17em;text-transform:uppercase; color:var(--pr-coffee-2);margin-top:16px; } .pr-stat-s{font-size:.78rem;line-height:1.6;color:rgb(var(--lv-ink3,114,100,73));margin-top:7px;max-width:24ch;margin-inline:auto;} .pr-section.is-royal .pr-stats{ background:rgba(var(--lv-gs,198,161,91),.22);border-color:rgba(var(--lv-gs,198,161,91),.26); box-shadow:0 40px 80px -46px rgba(0,0,0,.72), var(--pr-bevel-dark); } .pr-section.is-royal .pr-stat{background:linear-gradient(168deg,rgba(var(--lv-w111,70,50,32),.55),rgba(var(--lv-w69,30,19,8),.72));} .pr-section.is-royal .pr-stat:hover{background:linear-gradient(168deg,rgba(var(--lv-w112,90,66,42),.62),rgba(var(--lv-w113,38,25,11),.75));} /* the gold focal points should emit light, not merely cast a tinted shadow */ .pr-path-dot{ box-shadow:0 0 0 6px rgba(var(--lv-gs,198,161,91),.12), 0 0 20px -2px rgba(var(--lv-gbs,233,206,138),.50), inset 0 1px 0 rgba(var(--lv-w02,255,247,225),.6); } .pr-tl-dot{box-shadow:0 0 0 5px var(--pr-ivory-bg), 0 0 18px -6px rgba(var(--lv-gbs,233,206,138),.45);} .pr-section.is-royal .pr-tl-dot{box-shadow:0 0 0 5px rgb(var(--lv-cfd,36,23,8)), 0 0 18px -6px rgba(var(--lv-gbs,233,206,138),.45);} .pr-bar-fill{box-shadow:0 -2px 22px -6px rgba(var(--lv-gbs,233,206,138),.45);} .pr-bar-fill::after{ content:"";position:absolute;inset-inline:0;top:0;height:38%; border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(var(--lv-w36,255,248,228),.5),transparent); } /* --- v3.8 Give `.pr-btn` the brand's voice and `.is-ink` a surface. `.pr-btn` (prestige.css:231) is Inter 600 at `.92rem --- */ .pr-btn{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--font-label);font-weight:600; font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; padding:17px 34px;border-radius:var(--pr-r-pill); text-decoration:none;position:relative;overflow:hidden;isolation:isolate; transition:transform .35s var(--pr-ease),box-shadow .35s var(--pr-ease), gap .35s var(--pr-ease),background .35s var(--pr-ease); } .pr-btn:hover{gap:.95em;} .pr-btn.is-gold{ background:linear-gradient(168deg,rgb(var(--lv-w20s,228,200,138)) 0%,var(--pr-gold) 58%,rgb(var(--lv-w34,169,131,63)) 100%); color:rgb(var(--lv-cfd3,36,24,9)); box-shadow:0 16px 30px -14px rgba(var(--lv-w10,140,100,40),.62), inset 0 1px 0 rgba(var(--lv-w02,255,247,225),.62), 0 0 18px -6px rgba(var(--lv-gbs,233,206,138),.45); } /* a specular sweep across the face on hover — the 'polished' cue */ .pr-btn.is-gold::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(105deg,transparent 34%,rgba(var(--lv-w213,255,252,240),.55) 50%,transparent 66%); transform:translateX(-120%);transition:transform .85s var(--pr-ease); } .pr-btn.is-gold:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -14px rgba(var(--lv-w10,140,100,40),.70), inset 0 1px 0 rgba(var(--lv-w02,255,247,225),.80), var(--pr-glow-strong); } .pr-btn.is-gold:hover::after{transform:translateX(120%);} .pr-btn.is-ghost{ border:1px solid rgba(var(--lv-gbs,233,206,138),.5);color:var(--pr-gold-bright); background:rgba(var(--lv-gbs,233,206,138),.05); box-shadow:inset 0 1px 0 rgba(var(--lv-w02,255,247,225),.16); } .pr-btn.is-ghost:hover{ background:rgba(var(--lv-gbs,233,206,138),.14);border-color:var(--pr-gold-bright); transform:translateY(-3px);box-shadow:var(--pr-glow),inset 0 1px 0 rgba(var(--lv-w02,255,247,225),.28); } /* .is-ink gets an actual surface instead of floating on the band */ .pr-btn.is-ink{ border:1px solid rgba(var(--lv-gs,198,161,91),.34);color:var(--pr-coffee-2); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg) 52%,rgb(var(--lv-w25,248,241,228))); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); } .pr-btn.is-ink:hover{ transform:translateY(-3px);border-color:rgba(var(--lv-gs,198,161,91),.6); background:rgb(var(--lv-p1,255,253,249));box-shadow:var(--pr-shadow),inset 0 1px 0 rgb(var(--lv-bev,255,255,255)); } @media (prefers-reduced-motion:reduce){ .pr-btn,.pr-btn:hover{transform:none!important;gap:.55em!important;} .pr-btn.is-gold::after{display:none;} } /* admission.html:55-58 — replace the stray brand buttons so one row speaks one language. Destinations and labels unchanged:
Register / Login -> Start Admission Application
*/ /* --- v3.9 Extend the 3D to the surfaces that lack it, and fix a real performance defect in the tilt. `.pr-tiltwill-chan --- */ /* will-change is a promise, not a hint — do not hold 12 layers open at rest */ /* --- v4.2 CLARITY. The tilt now exists ONLY while the pointer is on the card. Previously every .pr-tilt carried a perspective()+translateZ() transform at all times, which promotes the box to its own GPU layer and makes the browser rasterise its text once into a texture instead of painting it with the screen's subpixel grid. The card sat still and still looked soft. Untransformed at rest = genuinely sharp type; the 3D returns the instant the pointer arrives, which is the only moment it was ever meant to be seen. */ .pr-tilt{ transform-style:flat; transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease); } .pr-tilt.is-tilting{ transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d; transition:transform .08s linear,box-shadow .5s var(--pr-ease);will-change:transform;} /* below 760px a 4deg rotation on a full-width card is noise, and the pointer maths never fires anyway — do not pay for the stacking context */ @media (max-width:760px){ .pr-tilt{transform:none!important;} .pr-tilt::after{display:none;} } .pr-feature,.pr-founder-card,.pr-doc,.pr-chart-card, .institution-card,.flow-stage{position:relative;} @media (prefers-reduced-motion:reduce){ .pr-tilt,.pr-tilt.is-tilting{transform:none!important;transition:none!important;will-change:auto!important;} .pr-tilt::after{display:none;} } /* Markup — add class="pr-tilt" plus these exact data-tilt-max values, which js/prestige.js:134 already reads. Angles fall as the box grows: a 250px tile at 9deg is a toy, an 1100px chart card at 5deg is seasick. .pr-feature data-tilt-max="4" academics.html:428,437,446 .pr-founder-card data-tilt-max="3" about.html:28 .pr-doc data-tilt-max="6" admission.html:114,115,116 .pr-chart-card data-tilt-max="1.5" academics.html:177 .institution-card data-tilt-max="3.5" academics.html:211,240,272,300,332 .flow-stage data-tilt-max="5" admission.html:39,41,43,45,47,49,51 Leave .pr-card at its default 5 — it is already correct. */ /* --- v3.10 Repair the traveling light — it is currently INVISIBLE and running at twice the right speed. Real bug: `.pr-ct --- */ /* 1. speed becomes a per-element token, and the default halves in pace */ .pr-lightborder{--pr-orbit:14s;} .pr-lightborder::before{animation:pr-orbit var(--pr-orbit) linear infinite;animation-play-state:paused;} /* 2. the light only runs once revealed — no off-screen compositing, and the first pass is seen rather than missed. `.pr-in` is already applied by the existing IntersectionObserver, so this needs no JS change. */ .pr-lightborder.pr-in::before{animation-play-state:running;} /* 3. THE BUG: the CTA clips its own bloom. It has no overflowing children and backgrounds already clip to the radius, so the declaration buys nothing. */ .pr-cta.pr-lightborder{overflow:visible;--pr-orbit:18s;} /* 4. a second, slower instance high on the page so the effect is actually seen. The founder plaque is sticky and dark — ideal. Replaces its static `.pr-glow` at about.html:28. */ .pr-founder-card.pr-lightborder{--pr-orbit:13s;} /* 5. `.pr-lightborder > *{border-radius:inherit}` (line 96) blindly stamps a 30px radius on every direct child — harmless only because .pr-cta's children have no background. Scope it to an explicit surface layer. */ .pr-lightborder > .pr-surface{border-radius:inherit;} /* NOT on .pr-card, .pr-outcome or any repeated grid item. The rule is: at most ONE travelling light per viewport height, never on a grid item. Six orbiting rings side by side is a casino, not a school. */ @media (prefers-reduced-motion:reduce){ .pr-lightborder::before,.pr-lightborder.pr-in::before{ animation:none!important; background:linear-gradient(140deg,rgba(var(--lv-gbs,233,206,138),.9),rgba(var(--lv-gs,198,161,91),.25)); } } /* --- v3.11 Fix the stagger that collapses, reserve space for the typewriter, and let the drawn lines draw. `.pr-stagger.p --- */ /* stagger that scales past 8 — replace lines 60-67 wholesale */ .pr-stagger.pr-in > *{transition-delay:calc(var(--i,0) * .07s);} /* nth-child ladder to 12 remains the no-JS path */ .pr-stagger.pr-in > *:nth-child(1){--i:0} .pr-stagger.pr-in > *:nth-child(2){--i:1} .pr-stagger.pr-in > *:nth-child(3){--i:2} .pr-stagger.pr-in > *:nth-child(4){--i:3} .pr-stagger.pr-in > *:nth-child(5){--i:4} .pr-stagger.pr-in > *:nth-child(6){--i:5} .pr-stagger.pr-in > *:nth-child(7){--i:6} .pr-stagger.pr-in > *:nth-child(8){--i:7} .pr-stagger.pr-in > *:nth-child(9){--i:8} .pr-stagger.pr-in > *:nth-child(10){--i:9} .pr-stagger.pr-in > *:nth-child(11){--i:10} .pr-stagger.pr-in > *:nth-child(12){--i:11} .pr-stagger.pr-in > *:nth-child(n+13){--i:12} /* typewriter must not reflow the page as it types */ .pr-type{display:inline-block;min-height:1em;} .pr-pledge blockquote{min-height:calc(1.42em * 3);display:flex;align-items:center;justify-content:center;} @media (max-width:620px){.pr-pledge blockquote{min-height:calc(1.42em * 4);}} /* the timeline thread draws itself instead of appearing whole */ .pr-timeline::before{transform:scaleY(0);transform-origin:top; transition:transform 1.4s var(--pr-ease) .15s;} .pr-timeline.pr-in::before{transform:scaleY(1);} /* the pathway dashes draw left to right */ .pr-path-line{transform:scaleX(0);transform-origin:left; transition:transform 1.3s var(--pr-ease) .2s;} .pr-path.pr-in .pr-path-line{transform:scaleX(1);} /* The CTA arrives in three beats rather than one lump. THE THIRD SELECTOR HAD LOST ITS ANCESTOR. This read .pr-cta h2, .pr-cta p, .pr-cta-row — and a comma ends a selector. So the first two were correctly scoped to a .pr-cta section, and the third hid EVERY .pr-cta-row on the site, while the only rule that brings one back is .pr-cta.pr-in .pr-cta-row. Any CTA row that does not sit inside a .pr-cta section was therefore set to opacity:0 and never set back: it occupied its full height, held its layout, answered getBoundingClientRect with real numbers, and painted nothing, for good. On /admission/ that was "Register / Login" and "Start Admission Application" — the primary call to action on the page the entire site points at for admissions — invisible on the live site. A button that reserves its own space is the worst way to be broken, because nothing collapses to give the fault away; the page just quietly stops asking. Scoped to .pr-cta, which is what the other two selectors say and what the .pr-in rules below assume. */ .pr-cta h2,.pr-cta p,.pr-cta .pr-cta-row{ opacity:0;transform:translateY(14px); transition:opacity .8s var(--pr-ease),transform .8s var(--pr-ease); } .pr-cta.pr-in h2{opacity:1;transform:none;transition-delay:.10s;} .pr-cta.pr-in p{opacity:1;transform:none;transition-delay:.22s;} .pr-cta.pr-in .pr-cta-row{opacity:1;transform:none;transition-delay:.34s;} @media (prefers-reduced-motion:reduce){ .pr-timeline::before,.pr-path-line{transform:none!important;transition:none!important;} /* This one stays unscoped on purpose. It carries the same missing ancestor as the rule above once did, but here the effect is to FORCE every CTA row visible, which is right under reduced motion and is a useful backstop. It is also why the fault above lived so long: anyone testing with reduced motion on saw the buttons exactly as intended, and only visitors with ordinary motion settings — which is to say nearly all of them — got a page whose main call to action never painted. */ .pr-cta h2,.pr-cta p,.pr-cta-row{opacity:1!important;transform:none!important;transition:none!important;} .pr-pledge blockquote{min-height:0;display:block;} } /* js/prestige.js — inside fire(), before the existing animate* calls, so --i is exact rather than capped: if (el.classList.contains('pr-stagger')) { Array.prototype.forEach.call(el.children, function (c, i) { c.style.setProperty('--i', i); }); } And in typewriter(), reserve the box before emptying it — insert immediately before `el.textContent = '';` at line 95: var h = el.getBoundingClientRect().height; if (h) el.style.minHeight = h + 'px'; */ /* --- v3.12 The diamond light: gated, and paced to read as jewellery --- */ /* The founder's plaque keeps the diamond treatment the owner asked for, but it must not composite a masked conic gradient while off-screen, and at 5.6s it read as a spinner. Slowed, and started only once the panel is in view. */ .pr-diamond::before{animation-duration:12s;animation-play-state:paused;} .pr-diamond::after{animation-duration:7s;animation-play-state:paused;} .pr-diamond.pr-in::before,.pr-diamond.pr-in::after{animation-play-state:running;} @media (prefers-reduced-motion:reduce){ .pr-diamond.pr-in::before,.pr-diamond.pr-in::after{animation:none!important;} } /* ---------- Organisational chart --------------------------------- */ /* Tiers of nodes joined by rules that draw themselves downward as the chart is revealed, so authority reads as flowing rather than as a static diagram. Pure CSS — no path maths, and it reflows on mobile. */ .pr-org{display:flex;flex-direction:column;align-items:center;gap:0;} .pr-org-tier{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:100%;} .pr-org-link{width:2px;height:34px;margin:0 auto;flex-shrink:0; background:linear-gradient(180deg,var(--pr-gold),rgba(var(--lv-gs,198,161,91),.25)); transform:scaleY(0);transform-origin:top; transition:transform .7s var(--pr-ease);} .pr-org.pr-in .pr-org-link{transform:scaleY(1);} .pr-org.pr-in .pr-org-link:nth-of-type(2){transition-delay:.25s} .pr-org.pr-in .pr-org-link:nth-of-type(3){transition-delay:.5s} .pr-org-node{position:relative;min-width:200px;max-width:290px;flex:1 1 200px; padding:18px 20px;border-radius:var(--pr-r-md);text-align:center; background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg) 55%,rgb(var(--lv-p4,247,240,226))); border:1px solid rgba(var(--lv-gs,198,161,91),.26); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .45s var(--pr-ease),box-shadow .45s var(--pr-ease);} .pr-org-node:hover{transform:translateY(-4px);box-shadow:var(--pr-shadow),var(--pr-glow);} .pr-org-node .role{display:block;font-family:var(--font-label);font-size:.95rem;color:var(--pr-coffee);line-height:1.3;} .pr-org-node .who{display:block;margin-top:7px;font-size:.82rem;color:var(--pr-gold-deep);font-weight:600;} .pr-org-node.is-apex{background:linear-gradient(160deg,rgb(var(--lv-cfs,59,42,29)),rgb(var(--lv-cfd,36,23,8)));border-color:rgba(var(--lv-gbs,233,206,138),.34);} .pr-org-node.is-apex .role{color:#fff;} .pr-org-node.is-apex .who{color:var(--pr-gold-bright);} /* ---------- Ledger cards (people) -------------------------------- */ .pr-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;} .pr-person{position:relative;padding:22px 24px;border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg)); border:1px solid rgba(var(--lv-gs,198,161,91),.22); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); border-left:3px solid var(--pr-gold); transition:transform .45s var(--pr-ease),box-shadow .45s var(--pr-ease);} .pr-person:hover{transform:translateY(-4px);box-shadow:var(--pr-shadow),var(--pr-glow);} .pr-person .nm{font-family:var(--font-label);font-size:1.02rem;color:var(--pr-coffee);display:block;} .pr-person .rl{display:block;margin-top:6px;font-size:.86rem;color:var(--pr-gold-deep);font-weight:600;line-height:1.4;} .pr-person .cr{display:block;margin-top:8px;font-size:.76rem;color:rgb(var(--lv-ink3,114,100,73));line-height:1.5;} /* A vacant seat is set apart by italic and a quieter tone, not by fading it toward the paper. At .82 opacity over the old muted gold the name measured 3.65:1; the seat is still legible business of the Board and has to be readable as such. */ .pr-person.is-vacant{border-left-color:rgba(var(--lv-gs,198,161,91),.3);} .pr-person.is-vacant .nm{color:rgb(var(--lv-ink3,114,100,73));font-style:italic;} /* ---------- Committee chips -------------------------------------- */ .pr-chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px;} .pr-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 18px; border-radius:var(--pr-r-pill);font-size:.88rem;color:var(--pr-coffee-2); background:linear-gradient(168deg,rgba(var(--lv-wh,255,255,255),.9),rgba(var(--lv-w40,240,231,214),.7)); border:1px solid rgba(var(--lv-gs,198,161,91),.3); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.8),0 6px 16px -12px rgba(var(--lv-cfd2s,42,28,16),.4); transition:transform .35s var(--pr-ease),box-shadow .35s var(--pr-ease);} .pr-chip:hover{transform:translateY(-3px);box-shadow:var(--pr-shadow-soft),var(--pr-glow);} .pr-chip::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0; background:linear-gradient(140deg,var(--pr-gold-bright),var(--pr-gold-deep));} .pr-section.is-royal .pr-chip{background:rgba(var(--lv-wh,255,255,255),.05);border-color:rgba(var(--lv-gbs,233,206,138),.28);color:rgb(var(--lv-w168,240,230,210));} .pr-chip.is-reserved{border-style:dashed;color:rgb(var(--lv-ink3,114,100,73));} /* ---------- Founder plaque (governance) -------------------------- */ .pr-plaque{display:flex;gap:26px;align-items:center;flex-wrap:wrap; padding:28px 30px;border-radius:var(--pr-r-lg); background:linear-gradient(160deg,rgb(var(--lv-cfs,59,42,29)),rgb(var(--lv-cfd,36,23,8)));color:rgb(var(--lv-w06,244,234,212));} .pr-plaque img{width:118px;height:118px;border-radius:50%;object-fit:cover;flex-shrink:0; border:2px solid rgba(var(--lv-gbs,233,206,138),.5);box-shadow:0 12px 30px -14px rgba(0,0,0,.8);} .pr-plaque .lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pr-gold-bright);} .pr-plaque .nm{display:block;font-family:var(--font-label);font-size:1.5rem;color:#fff;margin:6px 0;} .pr-plaque .cr{display:block;font-size:.8rem;color:rgba(var(--lv-w06,244,234,212),.7);line-height:1.6;} .pr-plaque .rl{display:block;margin-top:8px;font-size:.9rem;color:var(--pr-gold-bright);font-weight:600;} @media (prefers-reduced-motion:reduce){ .pr-org-link{transform:none!important;transition:none!important;} .pr-org-node,.pr-person,.pr-chip{transition:none!important;} } /* =================================================================== THE ARRIVAL BAND — the closing statement of a page ------------------------------------------------------------------- Replaces the flat charcoal box that used to sit above the footer. A dark panel alone reads as an unfinished placeholder; what makes a closing statement feel like arrival is depth behind it, an ornament that belongs to the institution, and light that moves. Five layers, back to front: a photographic ground held far back, an Islamic eight-point geometry drawn in gold, a warm radial bloom, the crest, and the type. A travelling light runs the frame. =================================================================== */ .pr-arrival{position:relative;isolation:isolate;overflow:hidden; border-radius:var(--pr-r-xl); padding:clamp(52px,8vw,96px) clamp(24px,5vw,72px); text-align:center;color:rgb(var(--lv-w91,246,238,220)); background:radial-gradient(1100px 520px at 50% -18%, rgb(var(--lv-w169,90,64,32)) 0%, rgb(var(--lv-w170,52,34,15)) 44%, rgb(var(--lv-cfd,36,23,8)) 76%, rgb(var(--lv-w171,27,16,6)) 100%); box-shadow:var(--pr-shadow),var(--pr-bevel-dark);} /* photographic ground, held far back so it reads as atmosphere not content */ .pr-arrival-media{position:absolute;inset:0;z-index:-3;} .pr-arrival-media img{width:100%;height:100%;object-fit:cover; opacity:.20;filter:saturate(.7) contrast(1.05); transform:scale(1.06) translate3d(0,calc(var(--p,0) * 16px),0);} .pr-arrival::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(780px 340px at 50% 8%, rgba(var(--lv-gbs,233,206,138),.20), transparent 66%), linear-gradient(180deg, rgba(var(--lv-w01,20,12,4),.30), rgba(var(--lv-w01,20,12,4),.72));} /* the geometry: an eight-point star grid, drawn once on reveal */ .pr-arrival-geo{position:absolute;inset:-6%;z-index:-1;pointer-events:none;opacity:.30;} .pr-arrival-geo path,.pr-arrival-geo line,.pr-arrival-geo circle{ fill:none;stroke:rgba(var(--lv-gb,233,206,138),.55);stroke-width:.6; stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900); transition:stroke-dashoffset 2.6s var(--pr-ease) .2s;} .pr-arrival.pr-in .pr-arrival-geo path, .pr-arrival.pr-in .pr-arrival-geo line, .pr-arrival.pr-in .pr-arrival-geo circle{stroke-dashoffset:0;} /* corner brackets, all four, following the radius */ .pr-arrival-frame{position:absolute;inset:clamp(12px,1.8vw,22px);z-index:0;pointer-events:none; border:1px solid rgba(var(--lv-gbs,233,206,138),.20);border-radius:var(--pr-r-lg);} .pr-arrival-frame::before,.pr-arrival-frame::after, .pr-arrival-frame > i::before,.pr-arrival-frame > i::after{ content:"";position:absolute;width:38px;height:38px; border:2px solid var(--pr-gold-bright);border-radius:var(--pr-r-lg); filter:drop-shadow(0 0 10px rgba(var(--lv-gbs,233,206,138),.6));} .pr-arrival-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0; border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;} .pr-arrival-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0; border-bottom-left-radius:0;border-top-right-radius:0;border-top-left-radius:0;} .pr-arrival-frame > i{position:absolute;inset:0;display:block;} .pr-arrival-frame > i::before{top:-1px;right:-1px;border-left:0;border-bottom:0; border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;} .pr-arrival-frame > i::after{bottom:-1px;left:-1px;border-right:0;border-top:0; border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;} /* crest, lit */ .pr-arrival-crest{width:96px;height:96px;object-fit:contain;margin:0 auto 20px;display:block; filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(var(--lv-gbs,233,206,138),.34)); animation:pr-crest-breathe 7s ease-in-out infinite;} @keyframes pr-crest-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.02)}} .pr-arrival .pr-eyebrow{color:var(--pr-gold-bright);justify-content:center;} .pr-arrival h2{font-family:var(--font-label);font-weight:600;letter-spacing:.012em; font-size:clamp(1.8rem,4.6vw,3.1rem);line-height:1.12;margin:.55rem 0 0;color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.45);position:relative;z-index:2;} .pr-arrival .lead{font-family:var(--font-display); font-size:clamp(1.1rem,2.3vw,1.42rem);line-height:1.62;color:rgba(var(--lv-w91,246,238,220),.86); max-width:56ch;margin:18px auto 0;position:relative;z-index:2;} .pr-arrival-rule{width:96px;height:1px;margin:26px auto 0;position:relative;z-index:2; background:linear-gradient(90deg,transparent,var(--pr-gold-bright),transparent);} .pr-arrival-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap; margin-top:28px;position:relative;z-index:2;} @media (prefers-reduced-motion:reduce){ .pr-arrival-crest{animation:none;} .pr-arrival-media img{transform:scale(1.04);} .pr-arrival-geo path,.pr-arrival-geo line,.pr-arrival-geo circle{ stroke-dashoffset:0!important;transition:none!important;} } /* ---------- Milk / pearl travelling light ------------------------ */ /* A cooler, softer third light for panels that should read as pearl rather than gilt. Same mechanism, different temperature. */ .pr-milklight{position:relative;isolation:isolate;} .pr-milklight::before{ content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--pr-angle), rgba(var(--lv-w19,255,252,244),.10) 0deg, rgba(var(--lv-w19,255,252,244),.10) 268deg, rgba(var(--lv-w214,255,250,238),.55) 306deg, rgb(var(--lv-wh,255,255,255)) 330deg, rgba(233,240,255,.85) 342deg, rgba(var(--lv-w19,255,252,244),.45) 356deg, rgba(var(--lv-w19,255,252,244),.10) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;pointer-events:none;z-index:2; animation:pr-orbit 16s linear infinite;animation-play-state:paused; filter:drop-shadow(0 0 6px rgba(255,255,255,.55));} .pr-milklight.pr-in::before{animation-play-state:running;} @media (prefers-reduced-motion:reduce){ .pr-milklight::before{animation:none;background:linear-gradient(140deg,rgba(var(--lv-wh,255,255,255),.7),rgba(var(--lv-w19,255,252,244),.2));} } /* ---------- People cards with portraits -------------------------- */ .pr-person.has-photo{display:flex;gap:18px;align-items:flex-start;} .pr-person .por{width:74px;height:74px;flex-shrink:0;border-radius:50%;object-fit:cover; border:2px solid rgba(var(--lv-gs,198,161,91),.55); box-shadow:0 10px 24px -12px rgba(var(--lv-cfd2s,42,28,16),.7),0 0 0 4px rgba(var(--lv-gbs,233,206,138),.10); transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease);} .pr-person:hover .por{transform:scale(1.06);box-shadow:0 14px 30px -12px rgba(var(--lv-cfd2s,42,28,16),.8),0 0 0 6px rgba(var(--lv-gbs,233,206,138),.20);} .pr-person .por-fallback{width:74px;height:74px;flex-shrink:0;border-radius:50%;display:grid;place-items:center; font-family:var(--font-label);font-size:1.4rem;color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40))); background:radial-gradient(circle at 34% 28%,rgba(var(--lv-gbs,233,206,138),.30),rgba(var(--lv-gs,198,161,91),.10) 62%,transparent); border:1px solid rgba(var(--lv-gs,198,161,91),.4);box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.6);} /* ---------- Committee cards -------------------------------------- */ .pr-committees{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;margin-top:26px;} .pr-committee{position:relative;padding:24px 22px;border-radius:var(--pr-r-md);text-align:center; background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg) 55%,rgb(var(--lv-p4,247,240,226))); border:1px solid rgba(var(--lv-gs,198,161,91),.24); box-shadow:var(--pr-shadow-soft),var(--pr-bevel);overflow:hidden; transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease);} .pr-committee::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--pr-gold-bright),transparent); transform:scaleX(0);transition:transform .55s var(--pr-ease);} .pr-committee:hover{transform:translateY(-6px);box-shadow:var(--pr-shadow-lift),var(--pr-glow);} .pr-committee:hover::before{transform:scaleX(1);} .pr-committee .ic{width:58px;height:58px;margin:0 auto 14px;border-radius:var(--pr-r-md); display:grid;place-items:center;color:var(--pr-gold-deep); background:linear-gradient(140deg,rgba(var(--lv-gs,198,161,91),.18),rgba(var(--lv-gbs,233,206,138),.06)); border:1px solid rgba(var(--lv-gs,198,161,91),.34);box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.7);} .pr-committee .ic svg{width:27px;height:27px;} .pr-committee h4{font-family:var(--font-label);font-size:.99rem;color:var(--pr-coffee);margin:0 0 6px;line-height:1.3;} .pr-committee p{font-size:.82rem;color:rgb(var(--lv-w45,122,106,82));line-height:1.5;margin:0;} .pr-committee.is-reserved{border-style:dashed;background:rgba(var(--lv-wh,255,255,255),.5);} .pr-committee.is-reserved h4{color:rgb(var(--lv-ink3,114,100,73));} .pr-section.is-royal .pr-committee{background:rgba(var(--lv-wh,255,255,255),.05);border-color:rgba(var(--lv-gbs,233,206,138),.26);} .pr-section.is-royal .pr-committee h4{color:#fff;} .pr-section.is-royal .pr-committee p{color:rgba(var(--lv-w06,244,234,212),.76);} /* ---------- Brightened photography ------------------------------- */ /* Some of the campus photography is underexposed. Lifted here rather than re-encoding the files, so the originals stay untouched. */ .pr-photo.is-bright img,.is-bright .pr-photo img{ filter:brightness(1.12) saturate(1.10) contrast(1.05);} .pr-photo.is-bright:hover img,.is-bright .pr-photo:hover img{ filter:brightness(1.16) saturate(1.16) contrast(1.07);} /* ---------- Wide photo mosaic ------------------------------------ */ .pr-mosaic{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);} .pr-mosaic .pr-photo{margin:0;} .pr-mosaic .span2{grid-column:span 2;} .pr-mosaic .span2r{grid-row:span 2;} /* The scrim carries the caption, so it has to be dark enough at the caption's own height and not merely at the very bottom of the frame. The old two-stop ramp was about 40% opaque where the words actually sit; over a sunlit photograph that is not a background, it is a haze. Three stops: fully clear above the caption, already dark where the text begins, solid beneath it. A text-shadow underwrites the rest. */ .pr-mosaic figcaption{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:22px 16px 14px; font-size:.8rem;color:#fff;letter-spacing:.02em; text-shadow:0 1px 3px rgba(var(--lv-w39,12,7,2),.85); background:linear-gradient(180deg,transparent 0%,rgba(110,38,34,.56) 34%,rgba(110,38,34,.8) 100%);} @media (max-width:900px){.pr-mosaic{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.pr-mosaic{grid-template-columns:1fr;}.pr-mosaic .span2{grid-column:span 1;}} @media (prefers-reduced-motion:reduce){ .pr-committee,.pr-person .por{transition:none!important;transform:none!important;} .pr-committee::before{transform:scaleX(1);} } /* =================================================================== LEGACY COMPONENT ELEVATION ------------------------------------------------------------------- The five flagship pages were rebuilt on pr-* components. The rest of the site — thirty-odd pages — is built from an older vocabulary in brand.css: .school-block, .stat-band, .page-hero-icon, .ledger, .gallery-grid and so on. Rewriting every page by hand would take weeks and risk the content; raising the components themselves lifts every page that uses them at once, and does it consistently. Everything here is a visual upgrade only. No layout is restructured, no markup is required, and every page keeps working exactly as before. =================================================================== */ /* ---- the page hero icon: a struck medallion rather than a loose glyph ---- */ .page-hero-icon{ display:grid;place-items:center;width:70px;height:70px;margin-bottom:18px; border-radius:var(--pr-r-md);position:relative;overflow:hidden; background:linear-gradient(150deg,rgba(var(--lv-gs,198,161,91),.20),rgba(var(--lv-gbs,233,206,138),.05)); border:1px solid rgba(var(--lv-gs,198,161,91),.36); box-shadow:var(--pr-shadow-soft),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.6); color:var(--pr-gold-deep); transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease); } .page-hero-icon:hover{transform:translateY(-3px) rotate(-3deg); box-shadow:var(--pr-shadow),var(--pr-glow);} .page-hero-icon svg{width:32px;height:32px;} .is-royal .page-hero-icon,.governance .page-hero-icon{ background:linear-gradient(150deg,rgba(var(--lv-gbs,233,206,138),.18),rgba(var(--lv-gbs,233,206,138),.04)); border-color:rgba(var(--lv-gbs,233,206,138),.34);color:var(--pr-gold-bright); box-shadow:var(--pr-shadow),var(--pr-bevel-dark);} /* ---- .school-block: the workhorse panel on twenty pages ---- */ .school-block{ position:relative;border-radius:var(--pr-r-lg);padding:30px 32px;margin-top:26px; background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg) 54%,rgb(var(--lv-p4,247,240,226))); border:1px solid rgba(var(--lv-gs,198,161,91),.22);border-left:0; box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .45s var(--pr-ease),box-shadow .45s var(--pr-ease); overflow:hidden; } .school-block::before{content:"";position:absolute;inset-inline-start:0;top:16%;bottom:16%;width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--pr-gold-bright),var(--pr-gold) 55%,rgba(var(--lv-gs,198,161,91),0));} .school-block:hover{transform:translateY(-4px);box-shadow:var(--pr-shadow),var(--pr-glow);} .school-block h3{font-family:var(--font-label);letter-spacing:.01em;} .school-block .tag,.school-block span.tag{ display:inline-block;padding:6px 14px;border-radius:var(--pr-r-pill); background:linear-gradient(168deg,rgba(var(--lv-gs,198,161,91),.16),rgba(var(--lv-gs,198,161,91),.06)); border:1px solid rgba(var(--lv-gs,198,161,91),.34); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.7); font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; /* The pill carries its own pale ground wherever it sits, so the ink is the same on the cream and on the charcoal band, and it is the darker reading gold: the ornament gold measured 3.5:1 here. The .school-block span.tag half of this selector outranks the ivory rule further down the sheet, so the colour has to be right here. */ color:rgb(var(--lv-gt5,95,69,24));} /* ---- .stat-band / .stat-tile: engraved plates ---- */ .stat-band{ border-radius:var(--pr-r-lg);overflow:hidden;gap:1px; border:1px solid rgba(var(--lv-gs,198,161,91),.3);background:rgba(var(--lv-gs,198,161,91),.3); box-shadow:var(--pr-shadow-soft),var(--pr-bevel);} .stat-tile{background:var(--pr-milk-bg);padding:28px 18px;position:relative;overflow:hidden;} .stat-tile::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(150px 80px at 50% 0%,rgba(var(--lv-gbs,233,206,138),.20),transparent 70%);} .stat-tile .num{ background:linear-gradient(120deg,var(--pr-gold-deep),var(--pr-gold-bright)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; font-family:var(--font-label);font-weight:700;} .stat-tile .label{font-weight:600;letter-spacing:.03em;} .governance .stat-tile,.is-royal .stat-tile{background:rgba(var(--lv-wh,255,255,255),.045);} /* ---- .page-crosslinks: a footer rail, not a leftover box ---- */ .page-crosslinks{ margin-top:56px;padding:26px 30px;border-radius:var(--pr-r-lg);border-left:0; background:linear-gradient(168deg,rgba(var(--lv-wh,255,255,255),.9),rgba(var(--lv-w40,240,231,214),.72)); border:1px solid rgba(var(--lv-gs,198,161,91),.24); box-shadow:var(--pr-shadow-soft),var(--pr-bevel);position:relative;overflow:hidden;} .page-crosslinks::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,var(--pr-gold),transparent);} .page-crosslinks a{ display:inline-block;padding:7px 15px;margin:3px 4px 3px 0;border-radius:var(--pr-r-pill); border:1px solid rgba(var(--lv-gs,198,161,91),.28);background:rgba(var(--lv-wh,255,255,255),.7); text-decoration:none;transition:transform .3s var(--pr-ease),box-shadow .3s,background .3s;} .page-crosslinks a:hover{transform:translateY(-2px);background:rgb(var(--lv-wh,255,255,255)); box-shadow:0 8px 18px -10px rgba(var(--lv-cfd2s,42,28,16),.45),0 0 14px -6px rgba(var(--lv-gs,198,161,91),.7);} /* ---- .placeholder-block: an editorial note, not a sticky note ---- */ .placeholder-block{ border-radius:var(--pr-r-md);padding:24px 26px; background:linear-gradient(168deg,rgba(var(--lv-wh,255,255,255),.86),rgba(var(--lv-w58,243,234,218),.7)); border:1px dashed rgba(var(--lv-gs,198,161,91),.5); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.7);} .placeholder-block .tag{background:transparent;border-color:rgba(var(--lv-gs,198,161,91),.4);} /* ---- .ledger: a register, ruled like one ---- */ .ledger{border-radius:var(--pr-r-lg);overflow:hidden; border:1px solid rgba(var(--lv-gs,198,161,91),.26);box-shadow:var(--pr-shadow-soft);} .ledger-row{transition:background .3s var(--pr-ease),transform .3s var(--pr-ease);} .ledger-row:hover{background:rgba(var(--lv-gs,198,161,91),.09);transform:translateX(3px);} .ledger-heading{font-family:var(--font-label);letter-spacing:.03em;} /* ---- .gallery-grid / .light-photo-pair: rounded, raised, lit on hover ---- */ .gallery-item .gi-frame,.lpp-frame{ border-radius:var(--pr-r-md);overflow:hidden; box-shadow:var(--pr-shadow-soft),var(--pr-bevel); border:1px solid rgba(var(--lv-gs,198,161,91),.2); transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease);} .gallery-item:hover .gi-frame,.lpp-frame:hover{ transform:translateY(-5px);box-shadow:var(--pr-shadow),var(--pr-glow);} .gallery-item .gi-frame img,.lpp-frame img{transition:transform 1.1s var(--pr-ease);} .gallery-item:hover .gi-frame img,.lpp-frame:hover img{transform:scale(1.06);} /* ---- .steps / .step: a numbered sequence with a spine ---- */ .step{border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg)); border:1px solid rgba(var(--lv-gs,198,161,91),.2); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .4s var(--pr-ease),box-shadow .4s var(--pr-ease);} .step:hover{transform:translateY(-3px);box-shadow:var(--pr-shadow);} /* ---- .docs-box ---- */ .docs-box{border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg)); border:1px solid rgba(var(--lv-gs,198,161,91),.24); box-shadow:var(--pr-shadow-soft),var(--pr-bevel);padding:24px 26px;} /* ---- verification forms: the input a credential is checked in ---- */ .cert-verify-form{display:flex;gap:12px;flex-wrap:wrap;align-items:center;} .cert-verify-form input{ flex:1;min-width:240px;padding:15px 18px;border-radius:var(--pr-r-pill); border:1px solid rgba(var(--lv-gs,198,161,91),.4);background:rgb(var(--lv-p1,255,253,249)); font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;letter-spacing:.06em; box-shadow:inset 0 2px 5px rgba(var(--lv-cfd2s,42,28,16),.07); transition:border-color .3s,box-shadow .3s;} .cert-verify-form input:focus{outline:none;border-color:var(--pr-gold); box-shadow:inset 0 2px 5px rgba(var(--lv-cfd2s,42,28,16),.05),0 0 0 4px rgba(var(--lv-gs,198,161,91),.18);} .cert-verify-form button,.btn-gold{ border-radius:var(--pr-r-pill);padding:14px 30px;border:0;cursor:pointer; font-family:var(--font-label);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase; background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright));color:rgb(var(--lv-cfd2,42,28,16)); box-shadow:0 10px 24px -12px rgba(var(--lv-gs,198,161,91),.8),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.6); transition:transform .35s var(--pr-ease),box-shadow .35s var(--pr-ease);} .cert-verify-form button:hover,.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(var(--lv-gs,198,161,91),.9),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.7);} .cert-verify-field{border-radius:var(--pr-r-sm);} /* ---- FAQ ---- */ .faq-item{border-radius:var(--pr-r-sm);margin-bottom:10px;padding:0 18px;border-bottom:0; background:rgba(var(--lv-wh,255,255,255),.6);border:1px solid rgba(var(--lv-gs,198,161,91),.18); transition:background .35s,box-shadow .35s;} .faq-item:hover{background:rgb(var(--lv-p1,255,253,249));box-shadow:var(--pr-shadow-soft);} @media (prefers-reduced-motion:reduce){ .page-hero-icon,.school-block,.step,.ledger-row,.page-crosslinks a, .gallery-item .gi-frame,.lpp-frame,.cert-verify-form button,.btn-gold{ transition:none!important;transform:none!important;} } /* =================================================================== THE DIGITAL CAMPUS ------------------------------------------------------------------- The page describing the school's own software should be the most technical-feeling page on the site without becoming a startup landing page. Three purpose-built pieces: a network diagram with data moving along its links, a device in which the portal is actually shown, and system cards that carry a live status rather than a paragraph. =================================================================== */ /* ---- the network: one platform, five institutions ---- */ .dc-net{position:relative;width:100%;max-width:940px;margin:0 auto;} .dc-net svg{width:100%;height:auto;overflow:visible;} .dc-net .link{fill:none;stroke:rgba(var(--lv-gb,233,206,138),.34);stroke-width:1.4; stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600); transition:stroke-dashoffset 1.5s var(--pr-ease);} .dc-net.pr-in .link{stroke-dashoffset:0;} .dc-net.pr-in .link:nth-of-type(2){transition-delay:.12s} .dc-net.pr-in .link:nth-of-type(3){transition-delay:.24s} .dc-net.pr-in .link:nth-of-type(4){transition-delay:.36s} .dc-net.pr-in .link:nth-of-type(5){transition-delay:.48s} /* data travelling the links — CSS offset-path so reduced motion can stop it */ .dc-net .pulse{fill:rgb(var(--lv-w61,255,243,214));opacity:0; filter:drop-shadow(0 0 6px rgba(var(--lv-gbs,233,206,138),.95)); offset-rotate:0deg;animation:dc-pulse 3.4s linear infinite;} .dc-net.pr-in .pulse{opacity:1;} @keyframes dc-pulse{from{offset-distance:0%}to{offset-distance:100%}} .dc-net .node{fill:rgba(255,255,255,.05);stroke:rgba(var(--lv-gb,233,206,138),.5);stroke-width:1.2;} .dc-net .hub{fill:url(#dc-hub);stroke:rgba(var(--lv-gb,233,206,138),.75);stroke-width:1.6; filter:drop-shadow(0 0 22px rgba(var(--lv-gbs,233,206,138),.4));} .dc-net .ring{fill:none;stroke:rgba(var(--lv-gb,233,206,138),.28);stroke-width:1; transform-origin:450px 260px;animation:dc-spin 34s linear infinite;} @keyframes dc-spin{to{transform:rotate(360deg)}} .dc-net text{font-family:var(--font-body);fill:rgb(var(--lv-w172,239,227,203));font-size:13px;text-anchor:middle;} .dc-net text.sub{fill:rgba(var(--lv-gb,233,206,138),.72);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;} .dc-net text.hubname{font-family:var(--font-label);fill:#fff;font-size:16px;} /* ---- device: the portal, shown rather than described ---- */ .dc-device{position:relative;width:min(300px,74vw);margin:0 auto; aspect-ratio:9/18.5;border-radius:38px;padding:11px; background:linear-gradient(160deg,rgb(var(--lv-w24s,74,53,32)),rgb(var(--lv-cfd,36,23,8)) 55%,rgb(var(--lv-w92,22,13,4))); box-shadow:var(--pr-shadow-lift),inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.3),0 0 0 1px rgba(var(--lv-gs,198,161,91),.4); transform:perspective(1200px) rotateX(var(--rx,6deg)) rotateY(var(--ry,-10deg)); transform-style:preserve-3d;transition:transform .6s var(--pr-ease);} .dc-device:hover{transform:perspective(1200px) rotateX(2deg) rotateY(-2deg);} .dc-device::before{content:"";position:absolute;top:11px;left:50%;translate:-50% 0; width:34%;height:20px;border-radius:0 0 14px 14px;background:rgb(var(--lv-w92,22,13,4));z-index:3;} .dc-screen{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden; background:linear-gradient(180deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w58,243,234,218)));display:flex;flex-direction:column;} .dc-screen-top{padding:30px 16px 12px;background:linear-gradient(160deg,rgb(var(--lv-cfs,59,42,29)),rgb(var(--lv-cfd,36,23,8)));color:rgb(var(--lv-p3,247,238,223));} .dc-screen-top .t{font-family:var(--font-label);font-size:.82rem;} .dc-screen-top .s{font-size:.6rem;color:rgba(var(--lv-gb,233,206,138),.8);letter-spacing:.14em;text-transform:uppercase;margin-top:3px;} .dc-rows{padding:12px;display:flex;flex-direction:column;gap:9px;overflow:hidden;} .dc-row{background:rgb(var(--lv-wh,255,255,255));border:1px solid rgba(var(--lv-gs,198,161,91),.24);border-radius:10px;padding:9px 11px; box-shadow:0 4px 10px -8px rgba(var(--lv-cfd2s,42,28,16),.5);} .dc-row .k{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--lv-ink3,114,100,73));} .dc-row .v{font-family:var(--font-label);font-size:.82rem;color:var(--pr-coffee);margin-top:2px;} .dc-row .bar{height:5px;border-radius:99px;background:rgba(var(--lv-gs,198,161,91),.18);margin-top:6px;overflow:hidden;} .dc-row .bar i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,var(--pr-gold-deep),var(--pr-gold-bright)); transition:width 1.6s var(--pr-ease);} .pr-in .dc-row .bar i{width:var(--w,60%);} .dc-screen-glare{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:28px; background:linear-gradient(120deg,transparent 38%,rgba(var(--lv-wh,255,255,255),.34) 47%,transparent 56%);} /* ---- system cards with a live indicator ---- */ .dc-systems{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;} .dc-sys{position:relative;padding:28px 26px;border-radius:var(--pr-r-lg);overflow:hidden; background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg) 55%,rgb(var(--lv-p4,247,240,226))); border:1px solid rgba(var(--lv-gs,198,161,91),.24); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease);} .dc-sys:hover{transform:translateY(-6px);box-shadow:var(--pr-shadow-lift),var(--pr-glow);} .dc-sys::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--pr-gold-deep),var(--pr-gold-bright),transparent); transform:scaleX(0);transform-origin:left;transition:transform .6s var(--pr-ease);} .dc-sys:hover::before{transform:scaleX(1);} .dc-sys-head{display:flex;align-items:center;gap:13px;margin-bottom:14px;} .dc-sys-ico{width:50px;height:50px;flex-shrink:0;border-radius:var(--pr-r-md);display:grid;place-items:center; background:linear-gradient(140deg,rgba(var(--lv-gs,198,161,91),.18),rgba(var(--lv-gbs,233,206,138),.05)); border:1px solid rgba(var(--lv-gs,198,161,91),.34);color:var(--pr-gold-deep); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.7);} .dc-sys-ico svg{width:24px;height:24px;} .dc-sys h3{font-family:var(--font-label);font-size:1.06rem;color:var(--pr-coffee);margin:0;line-height:1.25;} .dc-live{display:inline-flex;align-items:center;gap:7px;margin-top:5px; font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:#3f7d55;font-weight:600;} .dc-live i{width:7px;height:7px;border-radius:50%;background:#3f7d55;position:relative;} .dc-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3f7d55; animation:dc-ping 2.4s cubic-bezier(0,0,.2,1) infinite;} @keyframes dc-ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3);opacity:0}} .dc-sys p{color:rgb(var(--lv-w16,90,74,56));font-size:.95rem;line-height:1.62;margin:0;} .dc-sys .who{display:inline-block;margin-bottom:10px;padding:5px 13px;border-radius:var(--pr-r-pill); font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; background:linear-gradient(168deg,rgba(var(--lv-gs,198,161,91),.16),rgba(var(--lv-gs,198,161,91),.06)); border:1px solid rgba(var(--lv-gs,198,161,91),.32);color:rgb(var(--lv-gt5,95,69,24));} @media (prefers-reduced-motion:reduce){ .dc-net .pulse{animation:none;opacity:0;} .dc-net .ring{animation:none;} .dc-net .link{stroke-dashoffset:0!important;transition:none!important;} .dc-device,.dc-device:hover{transform:none;transition:none;} .dc-row .bar i,.pr-in .dc-row .bar i{transition:none;width:var(--w,60%);} .dc-live i::after{animation:none;} .dc-sys{transition:none!important;} .dc-sys::before{transform:scaleX(1);} } /* =================================================================== TRAVELLING LIGHT ON HOVER ------------------------------------------------------------------- A permanent orbiting ring on every box would be a casino. A ring that lights and runs the moment the pointer arrives is the opposite: the page is still at rest, and the light follows attention. Applied only to components whose ::after is free — the cards that already own that pseudo-element for a cursor highlight keep it. =================================================================== */ .dc-sys,.pr-committee,.school-block,.pr-person,.pr-org-node,.stat-tile,.pr-doc,.pr-outcome{ isolation:isolate; } .dc-sys::after,.pr-committee::after,.school-block::after,.pr-person::after, .pr-org-node::after,.stat-tile::after,.pr-doc::after,.pr-outcome::after{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--pr-angle), rgba(var(--lv-gs,198,161,91),0) 0deg, rgba(var(--lv-gs,198,161,91),0) 286deg, rgba(var(--lv-gbs,233,206,138),.85) 322deg, rgb(var(--lv-gls,255,246,223)) 338deg, rgba(var(--lv-gbs,233,206,138),.85) 352deg, rgba(var(--lv-gs,198,161,91),0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; opacity:0;pointer-events:none;z-index:4; transition:opacity .45s var(--pr-ease); filter:drop-shadow(0 0 5px rgba(var(--lv-gbs,233,206,138),.7)); } .dc-sys:hover::after,.pr-committee:hover::after,.school-block:hover::after, .pr-person:hover::after,.pr-org-node:hover::after,.stat-tile:hover::after, .pr-doc:hover::after,.pr-outcome:hover::after{ opacity:1;animation:pr-orbit 3.2s linear infinite; } /* .stat-tile already used ::after for its gold wash — restore it as ::before */ .stat-tile::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(150px 80px at 50% 0%,rgba(var(--lv-gbs,233,206,138),.20),transparent 70%);} .stat-tile > *{position:relative;z-index:1;} @media (prefers-reduced-motion:reduce){ .dc-sys:hover::after,.pr-committee:hover::after,.school-block:hover::after, .pr-person:hover::after,.pr-org-node:hover::after,.stat-tile:hover::after, .pr-doc:hover::after,.pr-outcome:hover::after{ animation:none;background:linear-gradient(140deg,rgba(var(--lv-gbs,233,206,138),.8),rgba(var(--lv-gs,198,161,91),.2));} } /* =================================================================== THE PERSONALISATION CENTRE ------------------------------------------------------------------- The drawer is a real, dense control panel — language, calendar, theme, density, reminders, data export — and it was the last surface still wearing the old flat treatment while sitting on top of every page on the site. Raised to the same standard, without touching a single control's behaviour. =================================================================== */ /* No backdrop blur anywhere on this site. Frosted glass reads soft and cheap at this scale, and because backdrop-filter forces the element onto its own composited layer it also costs the text inside its crisp subpixel rendering. Depth here comes from opaque layered gradients, a hairline and a shadow — never from smearing what sits behind. */ .pc-overlay{background:rgba(var(--lv-w01,20,12,4),.74);} .pc-drawer{ width:min(470px,100vw); background:radial-gradient(600px 300px at 100% 0%, rgba(var(--lv-gbs,233,206,138),.10), transparent 60%), linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)) 0%,rgb(var(--lv-w25,248,241,228)) 58%,rgb(var(--lv-w26,241,231,213)) 100%); box-shadow:-30px 0 90px -30px rgba(var(--lv-w01,20,12,4),.7),-1px 0 0 0 rgba(var(--lv-gs,198,161,91),.4); border-inline-start:0; } /* a light running the drawer's leading edge, so it reads as gilt */ .pc-drawer::before{ content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:2px;z-index:5;pointer-events:none; background:linear-gradient(180deg,transparent,var(--pr-gold-bright) 18%,rgb(var(--lv-gls,255,246,223)) 50%,var(--pr-gold-bright) 82%,transparent); opacity:.85; } .pc-head{ background:linear-gradient(160deg,rgb(var(--lv-cfs,59,42,29)),rgb(var(--lv-cfd,36,23,8)));color:rgb(var(--lv-p3,247,238,223)); padding:26px 24px 22px;position:relative;overflow:hidden; box-shadow:0 10px 30px -22px rgba(var(--lv-w01,20,12,4),.9); } .pc-head::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:radial-gradient(circle at 1px 1px,rgba(var(--lv-gbs,233,206,138),.18) 1px,transparent 0); background-size:22px 22px; -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent);} .pc-title{font-family:var(--font-label);color:#fff;letter-spacing:.02em;position:relative;z-index:1;} .pc-sub{color:rgba(var(--lv-gb,233,206,138),.85);letter-spacing:.16em;text-transform:uppercase;font-size:.64rem;position:relative;z-index:1;} .pc-close{ border-radius:50%;width:38px;height:38px;display:grid;place-items:center; background:rgba(var(--lv-wh,255,255,255),.07);border:1px solid rgba(var(--lv-gbs,233,206,138),.3);color:rgb(var(--lv-p3,247,238,223)); transition:transform .35s var(--pr-ease),background .3s,box-shadow .3s;position:relative;z-index:2;} .pc-close:hover{transform:rotate(90deg);background:rgba(var(--lv-gbs,233,206,138),.2); box-shadow:0 0 18px -4px rgba(var(--lv-gbs,233,206,138),.8);} /* tabs become a gilded rail */ .pc-tabs{gap:6px;padding:14px 16px 0;background:transparent;} .pc-tab{ border-radius:var(--pr-r-pill);padding:9px 15px;border:1px solid transparent; font-size:.78rem;font-weight:600;color:rgb(var(--lv-w45,122,106,82));background:transparent; transition:transform .3s var(--pr-ease),background .3s,box-shadow .3s,color .3s;} .pc-tab:hover{color:var(--pr-coffee);background:rgba(var(--lv-gs,198,161,91),.12);transform:translateY(-1px);} .pc-tab.is-active{ color:rgb(var(--lv-cfd2,42,28,16));border-color:rgba(var(--lv-gs,198,161,91),.45); background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright)); box-shadow:0 8px 18px -10px rgba(var(--lv-gs,198,161,91),.9),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.6);} /* every card in the drawer gets the surface language */ .pc-card{ border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg)); border:1px solid rgba(var(--lv-gs,198,161,91),.24); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .4s var(--pr-ease),box-shadow .4s var(--pr-ease);} .pc-card:hover{transform:translateY(-2px);box-shadow:var(--pr-shadow);} .pc-card-head{font-family:var(--font-label);color:var(--pr-coffee);} /* switches: a struck toggle rather than a grey pill */ .pc-switch{ border-radius:999px;border:1px solid rgba(var(--lv-gs,198,161,91),.4); background:linear-gradient(180deg,rgba(var(--lv-gs,198,161,91),.14),rgba(var(--lv-gs,198,161,91),.06)); box-shadow:inset 0 2px 4px rgba(var(--lv-cfd2s,42,28,16),.14); transition:background .35s var(--pr-ease),box-shadow .35s;} .pc-switch.is-on{ background:linear-gradient(120deg,var(--pr-gold-deep),var(--pr-gold-bright)); border-color:rgba(var(--lv-gs,198,161,91),.7); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.5),0 0 16px -4px rgba(var(--lv-gs,198,161,91),.9);} .pc-switch-knob{ background:linear-gradient(160deg,rgb(var(--lv-wh,255,255,255)),rgb(var(--lv-w173,240,230,212))); box-shadow:0 2px 6px rgba(var(--lv-cfd2s,42,28,16),.4),inset 0 1px 0 rgb(var(--lv-bev,255,255,255)); transition:transform .35s var(--pr-ease);} /* segmented controls */ .pc-segmented-wrap{border-radius:var(--pr-r-pill);padding:4px; background:rgba(var(--lv-gs,198,161,91),.10);border:1px solid rgba(var(--lv-gs,198,161,91),.26); box-shadow:inset 0 2px 4px rgba(var(--lv-cfd2s,42,28,16),.08);} .pc-segmented{border-radius:var(--pr-r-pill);border:0;background:transparent; transition:background .3s,color .3s,box-shadow .3s,transform .3s var(--pr-ease);} .pc-segmented:hover{transform:translateY(-1px);} .pc-segmented[aria-checked="true"],.pc-segmented.is-active{ background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright));color:rgb(var(--lv-cfd2,42,28,16)); box-shadow:0 6px 14px -8px rgba(var(--lv-gs,198,161,91),.9),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.6);} /* language rows, office rows, adhkar widget */ .pc-lang-row,.pc-office-row,.pc-toggle-row,.pc-option{ border-radius:var(--pr-r-sm);transition:background .3s,transform .3s var(--pr-ease);} .pc-lang-row:hover,.pc-office-row:hover,.pc-option:hover{ background:rgba(var(--lv-gs,198,161,91),.10);transform:translateX(3px);} .pc-lang-badge{border-radius:var(--pr-r-pill);letter-spacing:.1em;} .pc-lang-badge.is-current{ background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright));color:rgb(var(--lv-cfd2,42,28,16));border:0;} .pc-adhkar-progress{border-radius:999px;overflow:hidden;background:rgba(var(--lv-gs,198,161,91),.16); box-shadow:inset 0 1px 3px rgba(var(--lv-cfd2s,42,28,16),.14);} .pc-adhkar-progress-bar{ background:linear-gradient(90deg,var(--pr-gold-deep),var(--pr-gold-bright)); box-shadow:0 0 10px -2px rgba(var(--lv-gs,198,161,91),.9);} .pc-hcal-cell{border-radius:8px;transition:background .25s,transform .25s var(--pr-ease);} .pc-hcal-cell:hover{transform:translateY(-1px);background:rgba(var(--lv-gs,198,161,91),.14);} .pc-hcal-cell.is-today{ background:linear-gradient(140deg,var(--pr-gold),var(--pr-gold-bright));color:rgb(var(--lv-cfd2,42,28,16)); box-shadow:0 4px 12px -6px rgba(var(--lv-gs,198,161,91),.9);} /* the trigger that opens it */ .pc-trigger{ border-radius:var(--pr-r-pill); transition:transform .35s var(--pr-ease),box-shadow .35s var(--pr-ease);} .pc-trigger:hover{transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(var(--lv-cfd2s,42,28,16),.5),0 0 18px -6px rgba(var(--lv-gs,198,161,91),.8);} @media (prefers-reduced-motion:reduce){ .pc-close:hover,.pc-tab,.pc-card,.pc-segmented,.pc-lang-row,.pc-office-row, .pc-option,.pc-hcal-cell,.pc-trigger{transition:none!important;transform:none!important;} } /* the device's pearl ring has to follow the handset's radius, not the layer's */ .dc-device.pr-milklight::before{border-radius:38px;} /* =================================================================== ALWAYS-ON GILDING ------------------------------------------------------------------- Every box now carries its light permanently, not only on hover. The thing that keeps twenty rings from reading as a fairground is that no two are in phase: each box is given a different start delay and a different orbit period by position, so the effect is a room of gilt catching light at slightly different moments rather than a bank of indicators blinking together. At rest the ring is faint; the pointer brings it up to full and speeds it. =================================================================== */ .dc-sys::after,.pr-committee::after,.school-block::after,.pr-person::after, .pr-org-node::after,.stat-tile::after,.pr-doc::after,.pr-outcome::after, .pr-card::before,.gateway-card::after,.portal-card::after,.pc-card::after{ opacity:.42; animation:pr-orbit var(--pr-orbit,22s) linear infinite; } .dc-sys:hover::after,.pr-committee:hover::after,.school-block:hover::after, .pr-person:hover::after,.pr-org-node:hover::after,.stat-tile:hover::after, .pr-doc:hover::after,.pr-outcome:hover::after, .gateway-card:hover::after,.portal-card:hover::after,.pc-card:hover::after{ opacity:1;animation-duration:3.4s; } /* de-phase by position — the whole point of the effect */ .pr-stagger > *:nth-child(6n+1),.pr-grid > *:nth-child(6n+1),.dc-systems > *:nth-child(6n+1), .pr-people > *:nth-child(6n+1),.pr-committees > *:nth-child(6n+1){--pr-orbit:19s;animation-delay:0s} .pr-stagger > *:nth-child(6n+2),.pr-grid > *:nth-child(6n+2),.dc-systems > *:nth-child(6n+2), .pr-people > *:nth-child(6n+2),.pr-committees > *:nth-child(6n+2){--pr-orbit:24s} .pr-stagger > *:nth-child(6n+3),.pr-grid > *:nth-child(6n+3),.dc-systems > *:nth-child(6n+3), .pr-people > *:nth-child(6n+3),.pr-committees > *:nth-child(6n+3){--pr-orbit:21s} .pr-stagger > *:nth-child(6n+4),.pr-grid > *:nth-child(6n+4),.dc-systems > *:nth-child(6n+4), .pr-people > *:nth-child(6n+4),.pr-committees > *:nth-child(6n+4){--pr-orbit:27s} .pr-stagger > *:nth-child(6n+5),.pr-grid > *:nth-child(6n+5),.dc-systems > *:nth-child(6n+5), .pr-people > *:nth-child(6n+5),.pr-committees > *:nth-child(6n+5){--pr-orbit:23s} .pr-stagger > *:nth-child(6n+6),.pr-grid > *:nth-child(6n+6),.dc-systems > *:nth-child(6n+6), .pr-people > *:nth-child(6n+6),.pr-committees > *:nth-child(6n+6){--pr-orbit:29s} .dc-sys::after,.pr-committee::after,.pr-person::after,.pr-doc::after,.pr-outcome::after{ animation-delay:calc(var(--pr-orbit,22s) * -0.37);} .school-block::after{animation-delay:-6s;} .stat-tile::after{animation-delay:-11s;} /* .pr-card carried a static gold rule on ::before; it becomes the ring */ .pr-card::before{ content:"";position:absolute;inset:0;height:auto;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--pr-angle), rgba(var(--lv-gs,198,161,91),0) 0deg, rgba(var(--lv-gs,198,161,91),0) 288deg, rgba(var(--lv-gbs,233,206,138),.9) 324deg, rgb(var(--lv-gls,255,246,223)) 340deg, rgba(var(--lv-gbs,233,206,138),.9) 353deg, rgba(var(--lv-gs,198,161,91),0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;transform:none;z-index:4;pointer-events:none; filter:drop-shadow(0 0 5px rgba(var(--lv-gbs,233,206,138),.6));} .pr-card:hover::before{transform:none;opacity:1;animation-duration:3.4s;} /* =================================================================== RAKING LIGHT ------------------------------------------------------------------- Real gilt does not have a fixed highlight — the bright band moves as the viewer does. js/motion.js writes the pointer's position to the document as --gx/--gy, and every gold surface reads it, so the sheen on headings, rules and figures shifts as the reader moves across the page. It is the difference between gold-coloured and gilded. =================================================================== */ /* .idc-inst was in this list but never in the background-clip:text rule two lines below, and never in the background-image:none rule either. The raking gradient therefore painted as an opaque gold block behind the institution's name on every identity card — a hard-edged bar across the header that read as a printing fault. The card has its own holographic foil; it does not need this as well. */ .pr-h2,.pr-hero-title,.pr-stat-n,.pr-letter,.pr-arrival h2{ background-image:linear-gradient( calc(100deg + (var(--gx,50) - 50) * 0.6deg), var(--pr-gold-deep) 0%, var(--pr-gold-deep) 34%, rgb(var(--lv-gls,255,246,223)) calc(42% + (var(--gx,50) - 50) * 0.22%), var(--pr-gold) 58%, var(--pr-gold-deep) 100%); } /* headings keep their ink colour; only the gold ones take the rake */ .pr-h2,.pr-hero-title,.pr-arrival h2{background-image:none;} .pr-stat-n,.pr-letter{ -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .pr-pledge-rule,.pr-arrival-rule,.pr-divider{ background-image:linear-gradient( calc(90deg + (var(--gx,50) - 50) * 0.5deg), transparent, var(--pr-gold-bright) calc(50% + (var(--gx,50) - 50) * 0.3%), transparent);} @media (prefers-reduced-motion:reduce){ .dc-sys::after,.pr-committee::after,.school-block::after,.pr-person::after, .pr-org-node::after,.stat-tile::after,.pr-doc::after,.pr-outcome::after, .pr-card::before,.gateway-card::after,.portal-card::after,.pc-card::after{ animation:none!important;opacity:.5; background:linear-gradient(140deg,rgba(var(--lv-gbs,233,206,138),.8),rgba(var(--lv-gs,198,161,91),.2));} } /* =================================================================== THE PORTAL GATEWAYS ------------------------------------------------------------------- The portal screens are hand-authored outside the page build, which is why they never received any of this. They are the first thing a parent sees after deciding to trust the school, and they were the plainest surface on the site. Raised here, with no change to a single form, field name or script. =================================================================== */ .portal-body{ background:radial-gradient(1200px 620px at 78% -12%, rgba(var(--lv-gbs,233,206,138),.13), transparent 62%), radial-gradient(900px 500px at 8% 108%, rgba(var(--lv-gs,198,161,91),.09), transparent 60%), linear-gradient(168deg,rgb(var(--lv-w47,44,30,18)) 0%,rgb(var(--lv-cfd,36,23,8)) 46%,rgb(var(--lv-cfd4s,26,16,6)) 100%); color:rgb(var(--lv-w03,243,232,212));min-height:100vh;position:relative; } /* an eight-point field, held very faint, so the ground is never flat */ .portal-body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5; background-image:radial-gradient(circle at 1px 1px, rgba(var(--lv-gbs,233,206,138),.13) 1px, transparent 0); background-size:26px 26px; -webkit-mask:radial-gradient(1100px 700px at 50% 30%,#000,transparent 78%); mask:radial-gradient(1100px 700px at 50% 30%,#000,transparent 78%); } .portal-body > *{position:relative;z-index:1;} .portal-topbar{ background:linear-gradient(180deg,rgb(var(--lv-w79,30,20,8)) 0%,rgb(var(--lv-w37,24,15,6)) 100%); border-bottom:1px solid rgba(var(--lv-gbs,233,206,138),.24); box-shadow:0 1px 0 0 rgba(var(--lv-gbs,233,206,138),.08),0 14px 30px -26px rgba(0,0,0,.9);} .portal-brand{font-family:var(--font-label);color:rgb(var(--lv-gl4,255,243,216));letter-spacing:.03em;} /* the gateway cards — the thing a visitor actually chooses from */ /* Opaque lacquer, not frosted glass. The card used to be a translucent sheet with a 6px backdrop blur, so every one of them showed a smeared copy of the page behind it — the single biggest reason the gateway read hazy rather than sharp. It is now a solid, self-lit surface: its own gradient, its own hairline, its own bevel. Nothing shows through. */ .gateway-card{ position:relative;isolation:isolate;overflow:hidden; border-radius:var(--pr-r-lg);padding:30px 26px; background:radial-gradient(520px 220px at 12% -20%, rgba(var(--lv-gbs,233,206,138),.13), transparent 62%), linear-gradient(168deg,rgb(var(--lv-w174,51,35,18)) 0%,rgb(var(--lv-w65s,42,27,13)) 52%,rgb(var(--lv-w175,32,20,10)) 100%); border:1px solid rgba(var(--lv-gbs,233,206,138),.28); box-shadow:0 2px 4px rgba(0,0,0,.3),0 22px 46px -26px rgba(0,0,0,.8),inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.22); transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease),border-color .5s; text-decoration:none;color:inherit;display:block;} .gateway-card:hover{transform:translateY(-7px);border-color:rgba(var(--lv-gbs,233,206,138),.45); box-shadow:0 4px 8px rgba(0,0,0,.35),0 34px 66px -28px rgba(0,0,0,.9), 0 0 40px -10px rgba(var(--lv-gbs,233,206,138),.45),inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.3);} .gateway-card-icon{ width:56px;height:56px;border-radius:var(--pr-r-md);display:grid;place-items:center; background:linear-gradient(140deg,rgba(var(--lv-gbs,233,206,138),.22),rgba(var(--lv-gs,198,161,91),.06)); border:1px solid rgba(var(--lv-gbs,233,206,138),.34);color:var(--pr-gold-bright); box-shadow:inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.3);margin-bottom:16px; transition:transform .5s var(--pr-ease),box-shadow .5s var(--pr-ease);} .gateway-card:hover .gateway-card-icon{transform:translateY(-3px) scale(1.07) rotate(-4deg); box-shadow:0 12px 26px -14px rgba(var(--lv-gbs,233,206,138),.8);} .gateway-card-icon svg{width:27px;height:27px;} .gateway-card-eyebrow{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(var(--lv-gb,233,206,138),.8);} .gateway-card h2,.gateway-card h3{font-family:var(--font-label);color:#fff; font-size:1.12rem;margin:7px 0 8px;} .gateway-card p{color:rgba(var(--lv-w03,243,232,212),.74);font-size:.92rem;line-height:1.6;} .gateway-card-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px; color:var(--pr-gold-bright);font-weight:600;font-size:.86rem;} .gateway-card:hover .gateway-card-cta{gap:12px;} /* the sign-in card itself */ .portal-card{ position:relative;isolation:isolate; border-radius:var(--pr-r-xl);padding:clamp(28px,4vw,42px); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w63,246,239,225))); border:1px solid rgba(var(--lv-gs,198,161,91),.3); box-shadow:0 3px 6px rgba(0,0,0,.22),0 32px 70px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.9);} .portal-card h1{font-family:var(--font-label);color:var(--pr-coffee);letter-spacing:.01em;} /* THE EDITION-BLIND PATTERN. The plate above is cream in EVERY edition — this rule sets it with no theme condition, and it is a later stylesheet than portal.css, so it wins everywhere. But .portal-card .sub takes its colour from --ink-soft, a body-level variable that flips with the edition, and in Midnight that variable is ivory. So the standfirst under the heading on every card in the portal — sign-in, register, apply, every error state — was ivory on cream at 1.09:1 for anyone using the Midnight edition. The heading beside it was already stated against the plate, which is why only half of each card was affected and it went unnoticed. Sampled from painted pixels the plate is rgb(249,244,233) in Clear, Royal and Midnight alike, so the standfirst is stated against cream once, for all three. */ .portal-card .sub{color:rgba(var(--lv-cf,59,42,29),.82);} .portal-field label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--lv-ink3,114,100,73));} .portal-field input,.portal-card input[type="text"],.portal-card input[type="email"], .portal-card input[type="password"],.portal-card input[type="tel"]{ border-radius:var(--pr-r-pill);padding:14px 18px; border:1px solid rgba(var(--lv-gs,198,161,91),.36);background:rgb(var(--lv-wh,255,255,255)); box-shadow:inset 0 2px 5px rgba(var(--lv-cfd2s,42,28,16),.07); transition:border-color .3s,box-shadow .3s;} .portal-field input:focus,.portal-card input:focus{outline:none;border-color:var(--pr-gold); box-shadow:inset 0 2px 5px rgba(var(--lv-cfd2s,42,28,16),.05),0 0 0 4px rgba(var(--lv-gs,198,161,91),.2);} .portal-card button[type="submit"],.portal-card .btn-gold{ width:100%;border-radius:var(--pr-r-pill);padding:15px 26px;border:0;cursor:pointer; font-family:var(--font-label);font-size:.84rem;letter-spacing:.13em;text-transform:uppercase; background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright));color:rgb(var(--lv-cfd2,42,28,16)); box-shadow:0 12px 26px -14px rgba(var(--lv-gs,198,161,91),.9),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.6); transition:transform .35s var(--pr-ease),box-shadow .35s var(--pr-ease);} .portal-card button[type="submit"]:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(var(--lv-gs,198,161,91),1),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.7);} /* the panel beside the form */ .portal-aside-eyebrow{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--lv-gb,233,206,138),.85);} .portal-aside-title{font-family:var(--font-label);color:#fff;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.15;} .portal-aside-copy{color:rgba(var(--lv-w03,243,232,212),.78);line-height:1.7;} .portal-aside-points li{color:rgba(var(--lv-w03,243,232,212),.8);} .portal-aside-points li::marker{color:var(--pr-gold-bright);} .portal-back-link{color:rgba(var(--lv-gb,233,206,138),.85);transition:color .3s,transform .3s;} .portal-back-link:hover{color:var(--pr-gold-bright);transform:translateX(-3px);} .portal-notice,.portal-error{border-radius:var(--pr-r-sm);} /* =================================================================== THE ADHKĀR CENTRE ------------------------------------------------------------------- The most-used devotional surface on the site, and the one a family may open every morning and evening. It should feel like a bound companion rather than a settings screen. Raised without touching the counter logic, the Wird tracking or the session dashboard. =================================================================== */ .adhkar-page{position:relative;} .adhkar-intro{font-family:var(--font-display);font-size:clamp(1.06rem,2.2vw,1.28rem); line-height:1.7;color:rgb(var(--lv-w16,90,74,56));} /* category rail */ .adk-cat-nav{gap:9px;} .adk-cat-btn{ border-radius:var(--pr-r-pill);padding:10px 18px; border:1px solid rgba(var(--lv-gs,198,161,91),.3); background:linear-gradient(168deg,rgba(var(--lv-wh,255,255,255),.9),rgba(var(--lv-w40,240,231,214),.72)); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.8),0 6px 14px -12px rgba(var(--lv-cfd2s,42,28,16),.5); font-weight:600;letter-spacing:.02em; transition:transform .35s var(--pr-ease),box-shadow .35s,background .35s,color .35s;} .adk-cat-btn:hover{transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(var(--lv-cfd2s,42,28,16),.55),0 0 16px -6px rgba(var(--lv-gs,198,161,91),.8);} .adk-cat-btn[aria-pressed="true"],.adk-cat-btn.is-active{ background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright));color:rgb(var(--lv-cfd2,42,28,16)); border-color:rgba(var(--lv-gs,198,161,91),.6); box-shadow:0 10px 22px -12px rgba(var(--lv-gs,198,161,91),.95),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.6);} /* search */ .adk-search input,.adk-search{border-radius:var(--pr-r-pill);} .adk-search input{padding:14px 20px;border:1px solid rgba(var(--lv-gs,198,161,91),.36);background:rgb(var(--lv-p1,255,253,249)); box-shadow:inset 0 2px 5px rgba(var(--lv-cfd2s,42,28,16),.07);transition:border-color .3s,box-shadow .3s;} .adk-search input:focus{outline:none;border-color:var(--pr-gold); box-shadow:inset 0 2px 5px rgba(var(--lv-cfd2s,42,28,16),.05),0 0 0 4px rgba(var(--lv-gs,198,161,91),.18);} /* each remembrance: a leaf of a bound book */ .adk-item,.adk-static-item{ position:relative;isolation:isolate;overflow:hidden; border-radius:var(--pr-r-md);padding:24px 26px; background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg) 56%,rgb(var(--lv-p4,247,240,226))); border:1px solid rgba(var(--lv-gs,198,161,91),.22); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .45s var(--pr-ease),box-shadow .45s var(--pr-ease);} .adk-item:hover,.adk-static-item:hover{transform:translateY(-4px);box-shadow:var(--pr-shadow);} .adk-item::after,.adk-static-item::after{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--pr-angle), rgba(var(--lv-gs,198,161,91),0) 0deg,rgba(var(--lv-gs,198,161,91),0) 290deg, rgba(var(--lv-gbs,233,206,138),.85) 326deg,rgb(var(--lv-gls,255,246,223)) 341deg, rgba(var(--lv-gbs,233,206,138),.85) 354deg,rgba(var(--lv-gs,198,161,91),0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;opacity:.4;pointer-events:none;z-index:4; animation:pr-orbit 25s linear infinite;animation-delay:-9s; filter:drop-shadow(0 0 5px rgba(var(--lv-gbs,233,206,138),.65));} .adk-item:hover::after,.adk-static-item:hover::after{opacity:1;animation-duration:3.4s;} .adk-num{ background:linear-gradient(140deg,var(--pr-gold-bright),var(--pr-gold-deep)); color:rgb(var(--lv-cfd2,42,28,16));border-radius:var(--pr-r-pill);font-family:var(--font-label);font-weight:700; box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.5),0 4px 10px -6px rgba(var(--lv-gds,156,122,60),.9);} .adk-repeat{border-radius:var(--pr-r-pill); background:linear-gradient(168deg,rgba(var(--lv-gs,198,161,91),.18),rgba(var(--lv-gs,198,161,91),.07)); border:1px solid rgba(var(--lv-gs,198,161,91),.34);color:var(--pr-gold-deep); font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:5px 12px;} .adk-static-arabic,.adk-ctr-arabic,.adk-arabic-preview{ font-family:'Amiri',serif;line-height:2.05;color:var(--pr-coffee);} .adk-fav-btn{border-radius:50%;transition:transform .3s var(--pr-ease),color .3s;} .adk-fav-btn:hover{transform:scale(1.18);color:var(--pr-gold-deep);} /* panels: progress, wird, priority, achievements */ .adk-progress-panel,.adk-wird-panel,.adk-priority-panel,.adk-session-dash,.adk-counter-card{ border-radius:var(--pr-r-lg); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),var(--pr-milk-bg) 55%,rgb(var(--lv-p4,247,240,226))); border:1px solid rgba(var(--lv-gs,198,161,91),.24); box-shadow:var(--pr-shadow),var(--pr-bevel);} .adk-progress-head,.adk-wird-head,.adk-priority-head,.adk-section-head{ font-family:var(--font-label);color:var(--pr-coffee);letter-spacing:.02em;} .adk-progress-stat,.adk-sd-stat,.adk-priority-card,.adk-wird-card,.adk-achv-badge{ border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),var(--pr-milk-bg)); border:1px solid rgba(var(--lv-gs,198,161,91),.2); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .4s var(--pr-ease),box-shadow .4s var(--pr-ease);} .adk-progress-stat:hover,.adk-sd-stat:hover,.adk-priority-card:hover, .adk-wird-card:hover,.adk-achv-badge:hover{transform:translateY(-3px);box-shadow:var(--pr-shadow);} .adk-progress-stat--streak{ background:linear-gradient(160deg,rgb(var(--lv-cfs,59,42,29)),rgb(var(--lv-cfd,36,23,8)));color:rgb(var(--lv-p3,247,238,223)); border-color:rgba(var(--lv-gbs,233,206,138),.3);box-shadow:var(--pr-shadow),var(--pr-bevel-dark);} /* the tasbih counter — the piece a person actually holds */ .adk-counter-modal{background:rgba(var(--lv-w01,20,12,4),.78);} .adk-ctr-dial-wrap{filter:drop-shadow(0 18px 40px rgba(var(--lv-cfd2s,42,28,16),.35));} .adk-ctr-dial{ border-radius:50%; background:radial-gradient(circle at 34% 28%,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-p5,241,228,200)) 62%,rgb(var(--lv-w176,226,210,178))); border:1px solid rgba(var(--lv-gs,198,161,91),.5); box-shadow:inset 0 2px 0 rgba(var(--lv-bev,255,255,255),.9),inset 0 -8px 20px rgba(var(--lv-gds,156,122,60),.18), 0 20px 44px -20px rgba(var(--lv-cfd2s,42,28,16),.6),0 0 34px -12px rgba(var(--lv-gs,198,161,91),.7); transition:transform .18s var(--pr-ease),box-shadow .35s;} .adk-ctr-dial:active{transform:scale(.965); box-shadow:inset 0 2px 8px rgba(var(--lv-gds,156,122,60),.35),0 10px 24px -16px rgba(var(--lv-cfd2s,42,28,16),.6);} .adk-ctr-dial-inner{font-family:var(--font-label); background:linear-gradient(120deg,var(--pr-gold-deep),var(--pr-gold-bright)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .adk-ctr-icon-btn,.adk-ctr-nav-btn,.adk-ctr-reset,.adk-quick-btn{ border-radius:var(--pr-r-pill);border:1px solid rgba(var(--lv-gs,198,161,91),.34); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w177,241,231,215))); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.85),0 6px 14px -10px rgba(var(--lv-cfd2s,42,28,16),.5); transition:transform .3s var(--pr-ease),box-shadow .3s;} .adk-ctr-icon-btn:hover,.adk-ctr-nav-btn:hover,.adk-ctr-reset:hover,.adk-quick-btn:hover{ transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(var(--lv-cfd2s,42,28,16),.55),0 0 16px -6px rgba(var(--lv-gs,198,161,91),.85);} .adk-ctr-complete-badge{ background:linear-gradient(120deg,#3f7d55,#5aa473);color:#fff;border-radius:var(--pr-r-pill); box-shadow:0 8px 18px -10px rgba(63,125,85,.9);} .adk-sd-ring circle{transition:stroke-dashoffset 1.4s var(--pr-ease);} .adk-theme-swatch{border-radius:var(--pr-r-sm);box-shadow:var(--pr-shadow-soft); transition:transform .3s var(--pr-ease);} .adk-theme-swatch:hover{transform:translateY(-3px) scale(1.05);} .adk-static-jump-btn{border-radius:var(--pr-r-pill);} @media (prefers-reduced-motion:reduce){ .adk-item::after,.adk-static-item::after{animation:none;opacity:.5; background:linear-gradient(140deg,rgba(var(--lv-gbs,233,206,138),.8),rgba(var(--lv-gs,198,161,91),.2));} .adk-cat-btn,.adk-item,.adk-static-item,.adk-progress-stat,.adk-sd-stat, .adk-priority-card,.adk-wird-card,.adk-achv-badge,.adk-ctr-dial, .adk-ctr-icon-btn,.adk-theme-swatch{transition:none!important;transform:none!important;} } /* =================================================================== THE CLARITY PASS (v4.2) ------------------------------------------------------------------- A single, deliberate rule for this site: nothing on it is frosted. Every panel, card, drawer and bar is an opaque, self-lit surface. Depth is built from a layered gradient, a hairline, a bevel and a shadow — the four things that survive at any zoom level and print correctly — and never from blurring whatever happens to be behind. Frosted glass photographs badly, renders differently on every GPU, forces the panel onto its own composited layer (which costs the type inside it the screen's subpixel grid), and at any real density it simply reads as a smudge. It was making the boxes look soft rather than expensive. This block is the belt-and-braces guarantee that it cannot creep back in through a stylesheet loaded after this one. =================================================================== */ .pr-card,.pr-feature,.pr-doc,.pr-chart-card,.pr-founder-card,.pr-person, .pr-org-node,.pr-committee,.pr-outcome,.pr-plaque,.stat-tile, .gateway-card,.portal-card,.portal-topbar,.pc-card,.pc-drawer,.pc-overlay, .adk-counter-modal,.institution-card,.flow-stage,.dc-net,.dc-device,.dc-sys{ backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } /* Light type on a dark ground: subpixel antialiasing over-inks the stems and reads as a halo, which is the other half of "it looks blurry". Greyscale antialiasing is the correct choice for these surfaces only — it is deliberately NOT applied to the cream pages, where subpixel rendering is what keeps small text sharp. */ .portal-body,.gateway-card,.pr-section.is-royal,.pr-arrival, .adk-progress-stat--streak,.portal-topbar{ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } /* =================================================================== THE GATEWAY, AS A PAGE OF THE SITE ------------------------------------------------------------------- /portal/select/ used to be hand-authored outside the page build, and so it carried a stub top bar and no footer at all — a visitor arrived at the most consequential screen on the site and lost the navigation that had brought them there. It is now assembled from the same partials as every other page and therefore wears the real header and the real footer, while keeping the dark .portal-body ground that marks it as the threshold of the Digital Campus rather than more marketing. These rules cover only what that change introduced. =================================================================== */ /* The header, ribbon and footer are opaque, dark and self-lit already, so they sit on the portal ground without adjustment — but the body's fixed dot field must not be allowed to wash over them. */ .portal-body > header.nav,.portal-body > footer,.portal-body > .topbar{z-index:2;} /* Each door now carries its full explanation, so the card is a column with the call to action pinned to the bottom edge — otherwise a card with four bullet points and one with three would end at different heights and the row would read as ragged rather than ruled. */ .gateway-card{display:flex;flex-direction:column;height:100%;} .gateway-card > p{flex:0 0 auto;} .gateway-card .gateway-card-cta{margin-top:auto;padding-top:16px;} /* "What stands behind this door" — the list a visitor reads to decide whether this is theirs, set as a ruled register rather than bullets. */ .gw-points{list-style:none;margin:16px 0 0;padding:0; border-top:1px solid rgba(var(--lv-gbs,233,206,138),.16);} .gw-points li{ position:relative;padding:9px 0 9px 20px;font-size:.85rem;line-height:1.5; color:rgba(var(--lv-w03,243,232,212),.7);border-bottom:1px solid rgba(var(--lv-gbs,233,206,138),.09);} .gw-points li:last-child{border-bottom:0;} [dir="rtl"] .gw-points li{padding:9px 20px 9px 0;} .gw-points li::before{ content:"";position:absolute;inset-inline-start:2px;top:16px; width:6px;height:6px;border-radius:50%; background:linear-gradient(140deg,var(--pr-gold-bright),var(--pr-gold)); box-shadow:0 0 8px -1px rgba(var(--lv-gbs,233,206,138),.9);} /* What you actually need in order to get through the door. Held quieter than the description on purpose: it is a footnote, not a warning. */ .gw-need{margin-top:14px;font-size:.79rem;line-height:1.55; color:rgba(var(--lv-w03,243,232,212),.52);font-style:italic;} /* The two group headings that divide staff access from public access. */ .gw-group-head{ max-width:1180px;margin:52px auto 18px;padding:0 22px; font-family:var(--font-label);font-size:.74rem;letter-spacing:.24em; text-transform:uppercase;color:rgba(var(--lv-gb,233,206,138),.78); display:flex;align-items:center;gap:16px;} .gw-group-head::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,rgba(var(--lv-gbs,233,206,138),.42),transparent);} [dir="rtl"] .gw-group-head::after{ background:linear-gradient(270deg,rgba(var(--lv-gbs,233,206,138),.42),transparent);} /* A single gold rule closing the hero, so the eye is handed down to the first row of doors rather than left hanging in the dark. */ @media (max-width:760px){ .gw-group-head{margin:38px auto 14px;letter-spacing:.18em;} } /* ------------------------------------------------------------------- Four defects the gateway carried, fixed here rather than left in place. Each was load-bearing, not cosmetic. ------------------------------------------------------------------- */ /* 1. THE GROUND WAS NEVER DARK. The dark portal ground above is written as `.portal-body`, but css/portal.css sets its cream ground as `body.portal-body` — one ID-less class more specific — so the dark gradient never applied and every gateway card, all of which are designed for a dark ground, sat on cream. Matching the specificity is the whole fix. */ body.portal-body{ background:radial-gradient(1200px 620px at 78% -12%, rgba(var(--lv-gbs,233,206,138),.13), transparent 62%), radial-gradient(900px 500px at 8% 108%, rgba(var(--lv-gs,198,161,91),.09), transparent 60%), linear-gradient(168deg,rgb(var(--lv-w47,44,30,18)) 0%,rgb(var(--lv-cfd,36,23,8)) 46%,rgb(var(--lv-cfd4s,26,16,6)) 100%); color:rgb(var(--lv-w03,243,232,212)); } /* 2. THE CARD TEXT INHERITED THE PAGE'S DARK INK. `.gateway-card` was set to `color:inherit`, which on a cream-themed body resolved to near-black — dark ink on a dark card. Stated explicitly now, so it cannot be changed out from under the card by a theme token. */ .gateway-card{color:rgb(var(--lv-w03,243,232,212));} .gateway-card h2,.gateway-card h3{color:rgb(var(--lv-w93,255,253,247));} .gateway-card > p{color:rgba(var(--lv-w03,243,232,212),.76);} /* 3. THE TITLE BLINKED ITSELF OUT OF EXISTENCE. The hero title carried `exec-caret-blink`, whose one keyframe is `50%{opacity:0}`. That rule was written for a 2px ::after caret; applied to the heading itself it made the entire title vanish for half of every 0.9s, for as long as the page stayed open. The caret is the thing that should blink, so it blinks — by its own border colour, and only its own. */ @keyframes pr-caret-blink{50%{border-inline-end-color:transparent;}} /* 4. FOUR COLUMNS OF 250px. Each door now carries its explanation and its list of what stands behind it, and none of that is legible in a 250px column. Two generous columns on a desktop, one on a phone. */ .gateway-grid{ grid-template-columns:1fr; gap:26px;max-width:1180px;padding:0 22px;align-items:stretch;} /* Two columns, not three. Each group holds exactly four doors, so a two-by-two block closes cleanly; a three-across row leaves the fourth door stranded on a line of its own with half the page beside it. */ @media (min-width:900px){ .gateway-grid{grid-template-columns:1fr 1fr;} } @media (min-width:1500px){ .gateway-grid{max-width:1300px;gap:30px;} } /* The crest is a block-level image under the site's own img reset, so text-align could never centre it. */ /* ------------------------------------------------------------------- Floating chrome must stay floating on the portal ground. css/portal.css raises every direct child of .portal-body with `body.portal-body > *{position:relative}` so the fixed dot field can sit behind them. That was written when the portal pages had no site chrome at all; now that the Gateway carries the real header and footer it also carries the assistant launcher, the WhatsApp button, the sound toggle, the search overlay and the install banner — all of which are position:fixed by design, and all of which that blanket rule dropped into the document flow, where they piled up as roughly two hundred pixels of dead space below the footer. Restored here, at equal specificity, without weakening the rule for anything else. ------------------------------------------------------------------- */ body.portal-body > .assistant-root, body.portal-body > .whatsapp-float, body.portal-body > .search-overlay, body.portal-body > .pwa-install-banner, /* =================================================================== THE TYPOGRAPHIC ORDER (v4.3) ------------------------------------------------------------------- Two devices belong to the printed book and to nothing else on the web, and both are here for the same reason: a page that is read should look like a page that was set, not like a page that was uploaded. JUSTIFICATION is applied only where it is correct — to running prose at a measure wide enough to carry it. Justified text at a narrow measure opens rivers of white down the column, so below 760px, and in every short column, the text falls back to ragged-right. Automatic hyphenation does the work that a compositor's hand would, and `text-wrap:pretty` keeps the last line of a paragraph from ending in a single orphaned word. =================================================================== */ .pr-justify, .pr-lead.pr-justify, .pr-body, .pr-section p.pr-body, .policy-body .section-block > p, .school-block > p, .chapter-band p, .chapter-band-alt p, .pr-prose p{ text-align:justify;text-justify:inter-word; hyphens:auto;-webkit-hyphens:auto; text-wrap:pretty; } /* Arabic justifies natively and must not be hyphenated by the Latin ruleset — the language has its own tradition of kashīda extension, and browser hyphenation of Arabic is simply wrong. */ [lang="ar"] .pr-justify,[lang="ar"] .pr-body,[dir="rtl"] .pr-justify, [dir="rtl"] .pr-body,[dir="rtl"] .school-block > p, [dir="rtl"] .policy-body .section-block > p{hyphens:none;-webkit-hyphens:none;} /* Never justify a short measure: rivers are worse than a ragged edge. */ @media (max-width:760px){ .pr-justify,.pr-body,.pr-section p.pr-body,.policy-body .section-block > p, .school-block > p,.chapter-band p,.chapter-band-alt p,.pr-prose p{ text-align:start;hyphens:none;-webkit-hyphens:none;} } /* Nor inside a card, a stat, a caption or a list — those are labels and fragments, not prose, and justification only distorts them. */ .pr-card p,.pr-stat p,.pr-chip,.cap,.pr-caption,.gw-points li,.pgx-pane-d, .pgc-desc,.ic-desc,.pr-path-d,.fd-item,.nav-mega-text .d{ text-align:start!important;hyphens:none!important;} /* ------------------------------------------------------------------- THE DROP CAP A versal in Cinzel, three lines deep, cut into the first paragraph of a chapter — the oldest signal in typography that a passage of reading begins here. It is set in the institution's gold, sits on the baseline of the third line, and is hidden from assistive technology's point of view entirely (it is the same letter, only larger). ------------------------------------------------------------------- */ .pr-dropcap::first-letter{ float:inline-start; font-family:var(--font-label); font-weight:600; font-size:3.5em; line-height:.84; padding-inline-end:.10em; padding-top:.04em; margin-inline-end:.02em; color:var(--pr-gold-deep,rgb(var(--lv-gd,156,122,60))); text-shadow:0 1px 0 rgba(255,255,255,.6); } /* On the dark royal bands the versal is bright gold, not deep gold, and its shadow falls the other way. */ .pr-section.is-royal .pr-dropcap::first-letter, .chapter-band .pr-dropcap::first-letter, .chapter-band-alt .pr-dropcap::first-letter, .academics > .wrap .pr-dropcap::first-letter, .policies > .wrap .pr-dropcap::first-letter, .page-hero .pr-dropcap::first-letter, .portal-body .pr-dropcap::first-letter{ color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138))); text-shadow:0 1px 0 rgba(0,0,0,.45); } /* A rule of gold under the versal's column, as a printed versal would sit against a ruled initial block. Kept to the widest screens, where there is room for it to read as intention rather than as clutter. */ @media (min-width:1100px){ .pr-dropcap{position:relative;} } /* At small sizes a three-line versal eats half the column. Two lines. */ @media (max-width:760px){ .pr-dropcap::first-letter{font-size:2.6em;line-height:.86;} } /* A versal is set against a left (or right) edge; it cannot sit under centred text without the column collapsing around it. Belt and braces for any lead that is centred by a page's own inline style. */ [style*="text-align:center"].pr-dropcap::first-letter, [style*="text-align: center"].pr-dropcap::first-letter, .pr-section [style*="text-align:center"].pr-dropcap::first-letter{ float:none;font-size:inherit;line-height:inherit;padding:0;margin:0; color:inherit;text-shadow:none;} @media print{ .pr-dropcap::first-letter{color:rgb(var(--lv-w178,138,107,50));text-shadow:none;} } /* =================================================================== THE GOVERNANCE LIBRARY REGISTER ------------------------------------------------------------------- Twenty-five instruments is a library, and a library needs a catalogue. The register indexes every one of them by code, title and head of governance, and can be searched and narrowed; narrowing it narrows the page beneath it, so the reader never scrolls past instruments they have just filtered out. =================================================================== */ .plib{ margin:-34px auto 44px;position:relative;z-index:3; border-radius:var(--pr-r-lg);overflow:hidden; background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)) 0%,rgb(var(--lv-w25,248,241,228)) 62%,rgb(var(--lv-w94,242,232,214)) 100%); border:1px solid rgba(var(--lv-gs,198,161,91),.34); box-shadow:var(--pr-shadow-lift),var(--pr-bevel);} .plib-head{ display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; padding:26px 28px 18px;border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.22);} .plib-h{font-family:var(--font-label);font-size:1.24rem;color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));margin:6px 0 0;} .plib-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:18px 28px; border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.16);} .plib-search{display:flex;align-items:center;gap:10px;flex:1 1 320px; padding:11px 16px;border-radius:var(--pr-r-pill); background:rgb(var(--lv-wh,255,255,255));border:1px solid rgba(var(--lv-gs,198,161,91),.36); box-shadow:inset 0 2px 5px rgba(var(--lv-cfd2s,42,28,16),.06); color:var(--pr-gold-deep,rgb(var(--lv-gd,156,122,60)));transition:border-color .3s,box-shadow .3s;} .plib-search:focus-within{border-color:var(--pr-gold); box-shadow:inset 0 2px 5px rgba(var(--lv-cfd2s,42,28,16),.05),0 0 0 4px rgba(var(--lv-gs,198,161,91),.2);} .plib-search svg{flex:0 0 auto;} .plib-search input{flex:1;border:0;outline:none;background:none;font:inherit;font-size:.9rem;color:rgb(var(--lv-cf,59,42,29));} .plib-chips{display:flex;flex-wrap:wrap;gap:8px;} .plib-chip{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; padding:9px 15px;border-radius:var(--pr-r-pill);font:inherit;font-size:.78rem;font-weight:600; color:var(--pr-coffee-2,rgb(var(--lv-w49,84,67,44))); background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),rgb(var(--lv-w64,244,235,218))); border:1px solid rgba(var(--lv-gs,198,161,91),.3); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.85),0 6px 14px -12px rgba(var(--lv-cfd2s,42,28,16),.5); transition:transform .3s var(--pr-ease),box-shadow .3s,background .3s,color .3s,border-color .3s;} .plib-chip:hover{transform:translateY(-2px);border-color:rgba(var(--lv-gs,198,161,91),.55); box-shadow:0 10px 20px -12px rgba(var(--lv-cfd2s,42,28,16),.55),0 0 16px -6px rgba(var(--lv-gs,198,161,91),.8);} .plib-chip.is-on{ color:rgb(var(--lv-cfd2,42,28,16));border-color:transparent; background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright)); box-shadow:0 10px 22px -14px rgba(var(--lv-gs,198,161,91),.95),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.6);} .plib-chip-n{font-size:.68rem;opacity:.7;font-variant-numeric:tabular-nums;} .plib-index{display:flex;flex-direction:column;} .plib-row{ display:grid;grid-template-columns:88px 1fr auto 22px;gap:16px;align-items:center; padding:14px 28px;text-decoration:none;color:inherit; border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.14); transition:background .28s ease,padding-inline-start .28s ease;} .plib-row:last-child{border-bottom:none;} .plib-row:hover{background:rgba(var(--lv-gs,198,161,91),.08);padding-inline-start:34px;} .plib-row[hidden]{display:none;} .plib-code{font-family:var(--font-label);font-size:.76rem;letter-spacing:.08em; color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));font-variant-numeric:tabular-nums;} .plib-title{font-size:.94rem;color:rgb(var(--lv-cf2,51,40,28));} .plib-cat{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--lv-ink3,114,100,73));white-space:nowrap;} .plib-go{color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));opacity:0;transform:translateX(-4px); transition:opacity .28s,transform .28s;} [dir="rtl"] .plib-go{transform:translateX(4px);} .plib-row:hover .plib-go{opacity:1;transform:none;} .plib-empty{padding:26px 28px;color:rgb(var(--lv-w179,122,108,86));font-style:italic;margin:0;} @media (max-width:760px){ .plib{margin-top:-18px;} .plib-head,.plib-controls{padding-inline:18px;} .plib-row{grid-template-columns:74px 1fr;gap:6px 12px;padding:13px 18px;} .plib-cat{grid-column:2;font-size:.64rem;} .plib-go{display:none;} } @media print{ .plib-controls,.plib-head button{display:none;} .plib{box-shadow:none;border-color:rgb(var(--lv-w180,203,191,166));} } /* ------------------------------------------------------------------- The rolling figures were invisible. .pr-stat-n paints its gold by clipping a gradient to its own text and setting -webkit-text-fill-color:transparent. A counted figure is a text node of that element, so it takes the gradient; a rolled figure is not — its digits live in elements inside the reel, which inherit the transparent fill but not the gradient box, and so were painted in nothing at all. Every digit therefore carries the gilding itself, on the same raking-light axis as the rest of the page. ------------------------------------------------------------------- */ .pr-stat-n .pr-od-reel i,.pr-letter .pr-od-reel i,.pr-arrival .pr-od-reel i{ background-image:linear-gradient( calc(100deg + (var(--gx,50) - 50) * 0.6deg), var(--pr-gold-deep) 0%, var(--pr-gold-deep) 34%, rgb(var(--lv-gls,255,246,223)) calc(42% + (var(--gx,50) - 50) * 0.22%), var(--pr-gold) 58%, var(--pr-gold-deep) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } /* The Governance Library register lifts into the band above it, so the hero must not also reserve its own full run of padding beneath. */ .policies > .wrap:first-child{padding-top:0;} #policies-hero{padding-bottom:clamp(48px,7vw,86px);} /* ------------------------------------------------------------------- The Personalisation drawer is 470px wide and its segmented controls were laid out in a single non-wrapping row, so any control with more than two long labels ran off the drawer's trailing edge and could not be reached. They wrap now, and the panel clips nothing. ------------------------------------------------------------------- */ .pc-panel,.pc-body{min-width:0;} .pc-segmented{flex-wrap:wrap;} .pc-segmented > button{flex:1 1 auto;min-width:0;white-space:normal;} /* =================================================================== THE INSTITUTIONAL CHROME (v4.4) ------------------------------------------------------------------- The furniture a reader expects of a serious institution's site, and notices only by its absence: a trail telling them where in the building they are standing, a masthead that gets out of the way once they have started reading, a way back to the top of a long chapter, and photographs presented as plates rather than as pasted-in files. =================================================================== */ /* ---------- The trail ---------------------------------------------- */ .breadcrumbs{ position:relative;z-index:3; background:linear-gradient(180deg,rgb(var(--lv-cfd,36,23,8)) 0%,rgb(var(--lv-w95,28,18,7)) 100%); border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.2); box-shadow:inset 0 -1px 0 rgba(var(--lv-gbs,233,206,138),.06); font-size:.76rem;} .breadcrumbs .wrap{ display:flex;flex-wrap:wrap;align-items:center;gap:2px; padding-top:11px;padding-bottom:11px;} .breadcrumbs a{ color:rgba(var(--lv-w03,243,232,212),.66);text-decoration:none; padding:3px 2px;border-bottom:1px solid transparent; transition:color .25s ease,border-color .25s ease;} .breadcrumbs a:hover{color:var(--pr-gold-bright);border-bottom-color:rgba(var(--lv-gbs,233,206,138),.5);} .breadcrumbs [aria-current="page"]{ color:var(--pr-gold-bright);font-weight:600;letter-spacing:.01em;} .bc-sep{color:rgba(var(--lv-g,198,161,91),.5);padding:0 9px;font-size:.86em;line-height:1;} @media (max-width:640px){ .breadcrumbs{font-size:.71rem;} .bc-sep{padding:0 6px;} } @media print{.breadcrumbs{display:none;}} /* ---------- The masthead, condensed -------------------------------- Once the reader has left the top of the page the masthead gives back the height it was holding: the crest and the wordmark shrink, the rows tighten, and a real shadow appears so the bar reads as floating over the page rather than printed on it. The transition is on dimensions only — nothing moves horizontally, so nothing jumps. */ header.nav{ transition:box-shadow .45s var(--pr-ease),background .45s var(--pr-ease);} header.nav.is-condensed{ box-shadow:0 18px 40px -28px rgba(0,0,0,.95),0 1px 0 rgba(var(--lv-gbs,233,206,138),.14);} header.nav .brand-mark,header.nav .brand-mark img{ transition:width .4s var(--pr-ease),height .4s var(--pr-ease);} header.nav.is-condensed .brand-mark{width:64px;height:64px;} header.nav .nav.wrap,header.nav nav.wrap{ transition:padding .4s var(--pr-ease);} header.nav.is-condensed nav.wrap{padding-top:8px;padding-bottom:8px;} header.nav.is-condensed .brand-text .line2{ opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .4s;} header.nav .brand-text .line2{opacity:1;max-height:1.4em;transition:opacity .3s,max-height .4s;} @media (prefers-reduced-motion:reduce){ header.nav,header.nav *{transition:none!important;} } /* ---------- Back to top --------------------------------------------- Offered only once there is enough page behind the reader for it to be worth offering, and placed on the leading rail so it never contends with the assistant, WhatsApp and sound controls on the trailing one. */ .to-top{ position:fixed;inset-inline-start:26px;bottom:26px;z-index:197; width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer; color:var(--pr-gold-deep,rgb(var(--lv-gd,156,122,60))); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w94,242,232,214))); border:1px solid rgba(var(--lv-gs,198,161,91),.45); box-shadow:0 10px 26px -14px rgba(var(--lv-cfd2s,42,28,16),.65),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.9); opacity:0;visibility:hidden;transform:translateY(14px) scale(.9); transition:opacity .4s var(--pr-ease),transform .4s var(--pr-ease), visibility .4s,box-shadow .35s;} .to-top.is-shown{opacity:1;visibility:visible;transform:none;} .to-top:hover{transform:translateY(-3px); box-shadow:0 16px 32px -14px rgba(var(--lv-cfd2s,42,28,16),.72),0 0 22px -6px rgba(var(--lv-gs,198,161,91),.85), inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.95);} .to-top svg{width:19px;height:19px;} @media (max-width:620px){.to-top{inset-inline-start:16px;bottom:16px;width:42px;height:42px;}} @media print{.to-top{display:none;}} /* ---------- Photographs, presented as plates ------------------------ A photograph on this site is framed, ruled and captioned — the way a plate is bound into a printed volume — rather than dropped in as a file. The frame is gold hairline over a cream mount; the image lifts very slightly and warms under the pointer; and a caption, where one exists, is set on a ribbon along the foot of the plate. */ .gi-frame{ position:relative;overflow:hidden;isolation:isolate; border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w64,244,235,218))); border:1px solid rgba(var(--lv-gs,198,161,91),.34); padding:8px; box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:box-shadow .5s var(--pr-ease),border-color .5s var(--pr-ease);} .gi-frame img{ display:block;width:100%;height:auto;border-radius:calc(var(--pr-r-md) - 7px); transition:transform .8s var(--pr-ease),filter .6s var(--pr-ease);} .gi-frame:hover{border-color:rgba(var(--lv-gs,198,161,91),.6); box-shadow:var(--pr-shadow-lift),var(--pr-glow),var(--pr-bevel);} .gi-frame:hover img{transform:scale(1.035);filter:saturate(1.06) brightness(1.02);} /* the inner rule that marks the mount */ .gi-frame::after{ content:"";position:absolute;inset:8px;border-radius:calc(var(--pr-r-md) - 7px); border:1px solid rgba(255,255,255,.4);pointer-events:none;z-index:2; box-shadow:inset 0 0 0 1px rgba(var(--lv-gs,198,161,91),.16);} @media (prefers-reduced-motion:reduce){ .gi-frame img{transition:none;} .gi-frame:hover img{transform:none;} } /* An engraved plate is already dark and already framed, so it takes the mount but not the cream — it sits in the page as an inset panel. */ .gi-frame.is-plate{background:linear-gradient(168deg,rgb(var(--lv-w65s,42,27,13)),rgb(var(--lv-w95,28,18,7))); border-color:rgba(var(--lv-gbs,233,206,138),.28);} .gi-frame.is-plate::after{border-color:rgba(var(--lv-gbs,233,206,138),.14); box-shadow:inset 0 0 0 1px rgba(var(--lv-gbs,233,206,138),.08);} .gi-frame.is-plate:hover img{transform:none;filter:none;} .gi-plate-note{ position:absolute;inset-inline-start:0;bottom:0;z-index:3; padding:8px 16px 8px 18px; font-family:var(--font-label);font-size:.6rem;letter-spacing:.2em; /* The plate's ground faded out across the label itself, so the last third of the words sat on bare photograph and measured 1.93:1. It now holds full strength under the whole label and only softens past its trailing edge. */ text-transform:uppercase;color:rgba(var(--lv-w215,240,220,166),.94); background:linear-gradient(90deg,rgba(110,38,34,.92) 0%,rgba(110,38,34,.88) 76%,rgba(110,38,34,0) 100%); border-start-end-radius:10px;pointer-events:none;} [dir="rtl"] .gi-plate-note{ background:linear-gradient(270deg,rgba(110,38,34,.92) 0%,rgba(110,38,34,.88) 76%,rgba(110,38,34,0) 100%);} /* ---------- The campus mosaic --------------------------------------- A single frame shown at a time, on a timer, asks the reader to wait for the school. A mosaic gives them the whole of it at a glance: one lead plate at twice the size, five beside it, each captioned along its foot. It is the arrangement a printed prospectus uses for the same reason. */ .cl-mosaic{ display:grid;gap:16px;margin-top:32px; grid-template-columns:1fr;} @media (min-width:720px){ .cl-mosaic{grid-template-columns:repeat(2,1fr);} } /* Four columns by three rows, with the lead holding the left half for its full height: one lead plus six closes the block exactly, with no ragged tail row — the arrangement a printed prospectus uses for the same reason. */ @media (min-width:1040px){ .cl-mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:206px;align-items:stretch;} /* height:100% resolves against the grid area, which is what makes a tile spanning three rows actually occupy three rows; without it the figure is sized by its own photograph and the block goes ragged. */ .cl-tile{grid-column:span 1;grid-row:span 1;height:100%;} .cl-tile.is-lead{grid-column:span 2;grid-row:span 3;} .cl-tile > img{height:100%;} } .cl-tile{position:relative;margin:0;overflow:hidden;} .cl-tile img{width:100%;height:100%;object-fit:cover;} @media (max-width:1039px){ .cl-tile img{aspect-ratio:4/3;} .cl-tile.is-lead img{aspect-ratio:16/9;} } /* the caption rides along the foot of the plate, over a fall of shadow, and comes up to full strength when the pointer is on it */ .cl-tile figcaption{ position:absolute;inset-inline:8px;bottom:8px;z-index:3; padding:34px 16px 14px;pointer-events:none; border-end-start-radius:calc(var(--pr-r-md) - 7px); border-end-end-radius:calc(var(--pr-r-md) - 7px); background:linear-gradient(180deg,rgba(110,38,34,0),rgba(110,38,34,.62) 42%,rgba(110,38,34,.85)); color:rgba(var(--lv-w216,255,250,240),.92);font-size:.84rem;line-height:1.45; opacity:.94;transition:opacity .45s var(--pr-ease);} .cl-tile:hover figcaption{opacity:1;} .cl-cap-k{ display:block;font-family:var(--font-label); font-size:.58rem;letter-spacing:.22em;text-transform:uppercase; color:var(--pr-gold-bright);margin-bottom:5px;} .cl-tile.is-lead figcaption{font-size:.94rem;padding:44px 20px 18px;} .cl-tile.is-lead .cl-cap-k{font-size:.64rem;} .cl-foot{ display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:26px;} @media (max-width:560px){ .cl-tile figcaption{font-size:.79rem;padding:28px 13px 12px;} } /* =================================================================== THE CONTACT CENTRE (v4.5) ------------------------------------------------------------------- Three stacked forms told a visitor nothing about which desk they were writing to. The page now opens with the institution's own particulars set as a calling card, sets out what each office actually decides, and then offers three forms that reach three different desks. =================================================================== */ /* ---- the calling card ---- */ .ct-card{ margin-top:34px;border-radius:var(--pr-r-lg);overflow:hidden; background:linear-gradient(168deg,rgba(var(--lv-wh,255,255,255),.07),rgba(var(--lv-wh,255,255,255),.025)); border:1px solid rgba(var(--lv-gbs,233,206,138),.26); box-shadow:0 2px 4px rgba(0,0,0,.3),0 26px 54px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.2);} .ct-card-head{ display:flex;align-items:center;gap:18px;padding:24px 28px; border-bottom:1px solid rgba(var(--lv-gbs,233,206,138),.18); background:linear-gradient(180deg,rgba(var(--lv-gbs,233,206,138),.07),transparent);} .ct-crest{width:64px;height:64px;object-fit:contain;flex:0 0 auto; filter:drop-shadow(0 0 14px rgba(var(--lv-gbs,233,206,138),.4));} .ct-card-name{font-family:var(--font-label);font-size:1.16rem;color:#fff;margin:0;letter-spacing:.02em;} .ct-card-sub{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(var(--lv-gb,233,206,138),.78);margin:6px 0 0;} .ct-card-grid{display:grid;grid-template-columns:1fr;} @media (min-width:640px){.ct-card-grid{grid-template-columns:1fr 1fr;}} @media (min-width:1080px){.ct-card-grid{grid-template-columns:repeat(4,1fr);}} .ct-item{ display:flex;flex-direction:column;gap:7px;padding:24px 26px; border-inline-end:1px solid rgba(var(--lv-gbs,233,206,138),.13); border-bottom:1px solid rgba(var(--lv-gbs,233,206,138),.13);} .ct-item:last-child{border-inline-end:none;} @media (min-width:1080px){.ct-item{border-bottom:none;}.ct-item:nth-child(4){border-inline-end:none;}} .ct-ico{display:flex;width:22px;height:22px;color:var(--pr-gold-bright);} .ct-ico svg{width:100%;height:100%;} .ct-k{font-family:var(--font-label);font-size:.6rem;letter-spacing:.2em; text-transform:uppercase;color:rgba(var(--lv-gb,233,206,138),.8);} .ct-v{font-size:.88rem;line-height:1.62;color:rgba(var(--lv-w03,243,232,212),.86);} .ct-v a{color:rgba(var(--lv-w03,243,232,212),.92);text-decoration:none;border-bottom:1px solid rgba(var(--lv-gbs,233,206,138),.32);} .ct-v a:hover{color:var(--pr-gold-bright);border-bottom-color:var(--pr-gold-bright);} .ct-go{margin-top:auto;padding-top:10px;font-size:.76rem;font-weight:600; color:var(--pr-gold-bright);text-decoration:none; transition:letter-spacing .3s var(--pr-ease);} .ct-go:hover{letter-spacing:.02em;} /* ---- office hours ---- */ .ct-hours{ display:grid;grid-template-columns:1fr;gap:26px;margin-top:30px; padding:26px 28px;border-radius:var(--pr-r-lg); background:linear-gradient(168deg,rgba(var(--lv-gbs,233,206,138),.08),rgba(var(--lv-gbs,233,206,138),.02)); border:1px solid rgba(var(--lv-gbs,233,206,138),.2);} @media (min-width:900px){.ct-hours{grid-template-columns:1.6fr 1fr;align-items:start;}} .ct-hours-list{list-style:none;margin:0;padding:0;} .ct-hours-list li{ display:flex;justify-content:space-between;gap:14px;align-items:baseline; padding:11px 0;border-bottom:1px solid rgba(var(--lv-gbs,233,206,138),.14);} .ct-hours-list li:last-child{border-bottom:none;} .ct-hours-list span{font-family:var(--font-label);font-size:.74rem; letter-spacing:.12em;text-transform:uppercase;color:var(--pr-gold-bright);white-space:nowrap;} .ct-hours-list em{font-style:normal;font-size:.82rem;color:rgba(var(--lv-w03,243,232,212),.72);text-align:end;} /* ---- the office directory ---- */ .ct-dir{display:grid;gap:18px;margin-top:32px;grid-template-columns:1fr;} @media (min-width:680px){.ct-dir{grid-template-columns:repeat(2,1fr);}} @media (min-width:1100px){.ct-dir{grid-template-columns:repeat(3,1fr);}} .ct-office{ position:relative;isolation:isolate;display:flex;flex-direction:column; padding:24px 24px 22px;border-radius:var(--pr-r-md);text-decoration:none;color:inherit; background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w63,246,239,225))); border:1px solid rgba(var(--lv-gs,198,161,91),.28); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .45s var(--pr-ease),box-shadow .45s var(--pr-ease),border-color .45s;} .ct-office:hover{transform:translateY(-5px);border-color:rgba(var(--lv-gs,198,161,91),.55); box-shadow:var(--pr-shadow-lift),var(--pr-glow),var(--pr-bevel);} .ct-office-ico{ display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px; border-radius:var(--pr-r-sm);color:var(--pr-gold-deep); background:linear-gradient(140deg,rgba(var(--lv-gbs,233,206,138),.28),rgba(var(--lv-gs,198,161,91),.08)); border:1px solid rgba(var(--lv-gs,198,161,91),.3); transition:transform .45s var(--pr-ease);} .ct-office:hover .ct-office-ico{transform:translateY(-2px) rotate(-4deg);} .ct-office-ico svg{width:22px;height:22px;} .ct-office h3{font-family:var(--font-label);font-size:1.02rem;color:var(--pr-coffee);margin:0 0 8px;} .ct-office p{font-size:.87rem;line-height:1.62;color:rgb(var(--lv-w49,84,67,44));margin:0;flex:1;text-align:start;} .ct-office-go{margin-top:14px;font-size:.76rem;font-weight:600;color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40))); transition:letter-spacing .3s var(--pr-ease);} .ct-office:hover .ct-office-go{letter-spacing:.02em;} .ct-note{margin-top:26px;font-size:.84rem;line-height:1.7;color:rgb(var(--lv-w181,107,92,68));max-width:78ch;} /* ---- the three forms ---- */ .ct-forms{display:grid;gap:22px;margin-top:34px;grid-template-columns:1fr;} @media (min-width:900px){.ct-forms{grid-template-columns:repeat(3,1fr);}} .ct-form-card{ position:relative;isolation:isolate;display:flex;flex-direction:column; padding:28px 26px 26px;border-radius:var(--pr-r-lg); background:linear-gradient(168deg,rgba(var(--lv-wh,255,255,255),.07),rgba(var(--lv-wh,255,255,255),.028)); border:1px solid rgba(var(--lv-gbs,233,206,138),.24); box-shadow:0 2px 4px rgba(0,0,0,.3),0 24px 50px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.18);} .ct-form-n{ font-family:var(--font-label);font-size:.68rem;letter-spacing:.24em; color:rgba(var(--lv-gb,233,206,138),.72);} .ct-form-card h3{font-family:var(--font-label);font-size:1.1rem;color:#fff;margin:8px 0 8px;} .ct-form-d{font-size:.84rem;line-height:1.62;color:rgba(var(--lv-w03,243,232,212),.72);margin:0 0 18px;text-align:start;} .ct-form-card .contact-form{margin:0;max-width:none;} .ct-opt{font-weight:400;opacity:.6;text-transform:none;letter-spacing:0;} .ct-select{ width:100%;padding:11px 14px;margin-bottom:16px; border-radius:var(--pr-r-pill);border:1px solid rgba(var(--lv-gbs,233,206,138),.3); background:rgba(var(--lv-wh,255,255,255),.05);color:rgb(var(--lv-w03,243,232,212)); font-family:var(--font-body);font-size:.88rem;} .ct-select option{background:rgb(var(--lv-cfd,36,23,8));color:rgb(var(--lv-w03,243,232,212));} .ct-select:focus{outline:none;border-color:var(--pr-gold-bright); box-shadow:0 0 0 4px rgba(var(--lv-gs,198,161,91),.2);} /* ---- getting here ---- */ .ct-dir-grid{display:grid;gap:18px;margin-top:30px;grid-template-columns:1fr;} @media (min-width:760px){.ct-dir-grid{grid-template-columns:repeat(3,1fr);}} .ct-photo{margin-top:28px;max-width:820px;} /* ---- The Adhkār Centre's own standards ---------------------------- */ .adk-standards{ display:grid;gap:16px;margin:26px 0 8px;grid-template-columns:1fr;} @media (min-width:700px){.adk-standards{grid-template-columns:repeat(2,1fr);}} @media (min-width:1080px){.adk-standards{grid-template-columns:repeat(4,1fr);}} .adk-std{ padding:22px 22px 20px;border-radius:var(--pr-r-md); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w50,245,236,220))); border:1px solid rgba(var(--lv-gs,198,161,91),.26); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); transition:transform .45s var(--pr-ease),box-shadow .45s var(--pr-ease);} .adk-std:hover{transform:translateY(-4px);box-shadow:var(--pr-shadow),var(--pr-glow),var(--pr-bevel);} .adk-std-ico{ display:grid;place-items:center;width:40px;height:40px;margin-bottom:13px; border-radius:var(--pr-r-sm);color:var(--pr-gold-deep); background:linear-gradient(140deg,rgba(var(--lv-gbs,233,206,138),.3),rgba(var(--lv-gs,198,161,91),.08)); border:1px solid rgba(var(--lv-gs,198,161,91),.3);} .adk-std-ico svg{width:20px;height:20px;} .adk-std h3{font-family:var(--font-label);font-size:.98rem;color:var(--pr-coffee);margin:0 0 7px;} .adk-std p{font-size:.85rem;line-height:1.62;color:rgb(var(--lv-w49,84,67,44));margin:0;text-align:start;} /* =================================================================== LEGIBILITY — THE CORRECTIONS (v4.6) ------------------------------------------------------------------- A full contrast audit was run over the site: every text-bearing element was measured against the background actually rendered behind it (the page screenshotted with every glyph made transparent, then the pixel under each element sampled), and every pair scored against WCAG AA. What follows fixes every failure it found. The worst of it was the Adhkār Centre, and the cause was this file. The prestige layer changed .adk-priority-card, .adk-wird-card, .adk-sd-stat, .adk-progress-stat and .adk-achv-badge from the dark navy they were designed as to a cream plate — but their text colours live in css/brand.css and stayed white. White type on a white card: measured ratios of 1.01 to 1.15, which is to say invisible. Sixty-nine elements on that page alone. Every one of them is given the ink palette here. =================================================================== */ /* ---- The Adhkār Centre, made legible --------------------------------- */ .adk-priority-card h4, .adk-wird-card .awc-label, .adk-progress-stat .value, .adk-sd-stat .value, .adk-sd-ring .sd-pct, .adk-quick-mode h4,.adk-quick-modes h4{ color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)))!important;} .adk-priority-card p, .adk-priority-card .apc-translation, .adk-wird-card .awc-sub, .adk-progress-stat .label, .adk-sd-stat .label, .adk-progress-empty, .adk-wird-note, .adk-translation-preview, .adk-quick-mode p{ color:rgb(var(--lv-w49,84,67,44))!important;} .adk-priority-card .apc-arabic{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)))!important;} /* The gold that reads on navy is too pale on cream — the deep gold does the same job at a legible ratio. */ .adk-priority-card .apc-count, .adk-wird-card .awc-time, .adk-wird-card .awc-count, .adk-sd-stat .value, .adk-priority-card svg, .adk-progress-stat svg, .adk-repeat, .adk-static-repeat{ color:var(--pr-gold-deep,rgb(var(--lv-gd,156,122,60)))!important;} .adk-progress-stat--streak .value{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)))!important;} /* The section heads sat as gold-on-navy chips; on the cream plate they are set as gold on the institution's coffee, which is the same device the rest of the site uses for a section head. */ .adk-priority-head,.adk-progress-head,.adk-wird-head,.adk-section-head{ background:linear-gradient(120deg,var(--pr-coffee-bg,rgb(var(--lv-cfs,59,42,29))),rgb(var(--lv-cfd,36,23,8)))!important; color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)))!important; border-radius:var(--pr-r-pill);padding:6px 16px!important; box-shadow:0 8px 18px -12px rgba(var(--lv-cfd2s,42,28,16),.6);} .adk-sd-close{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)))!important;} .adhkar-note{color:rgb(var(--lv-w66,74,58,36))!important;} .adhkar-note strong{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)))!important;} /* ---- The eyebrow, on cream ------------------------------------------ --gold (rgb(var(--lv-g,198,161,91))) against the cream band measures 1.5:1. The deep gold carries the same colour at a legible weight, and the rule beside it stays bright so the device still reads as gilt. */ .eyebrow,.pr-eyebrow{color:var(--pr-gold-deep,rgb(var(--lv-gd,156,122,60)));} .eyebrow::before,.pr-eyebrow::before{background:linear-gradient(90deg,var(--pr-gold),var(--pr-gold-bright));} /* On every dark ground the bright gold is correct and is restored. .hero was in this list when the eyebrow sat over the photograph; it now sits on the page's own white/off-white ground below the photo, so it takes the base rule above (gold-deep, already tuned for a light ground) like every other on-page eyebrow. */ .pr-section.is-royal .pr-eyebrow,.pr-hero .pr-eyebrow,.pr-arrival .pr-eyebrow, .chapter-band .eyebrow,.chapter-band-alt .eyebrow, .academics > .wrap .eyebrow,.policies > .wrap .eyebrow, .portal-body .eyebrow,footer .eyebrow,.contact .eyebrow, .digital-campus-teaser .eyebrow,.governance .eyebrow,.adhkar-teaser .eyebrow, .foundation .eyebrow,.ct-hours .pr-eyebrow{ color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* ---- The outline button, on cream ------------------------------------ Designed for a dark band, where bright gold on near-black is correct. On the cream it measured 1.31:1. It keeps its shape and takes the ink. .hero used to be excluded here because its CTAs sat over the photograph; they now sit on the page's own ground below it, so the hero's outline button takes the same on-light treatment as everywhere else instead of the gold-on-dark variant. */ .pr-section.is-ivory .btn-outline, .wrap > .cl-foot .btn-outline, .plib .btn-outline, /* .academics and .policies were excluded here on the assumption that they were dark bands. Measured, both are pale on every page that carries them, and the Governance Library's own print button was therefore left at 1.31:1. */ section:not(.is-royal):not(.contact) .btn-outline{ color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40))); border-color:rgba(var(--lv-gs,198,161,91),.55); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w50,245,236,220)));} .pr-section.is-ivory .btn-outline:hover,.wrap > .cl-foot .btn-outline:hover, .plib .btn-outline:hover{ color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));border-color:var(--pr-gold); background:linear-gradient(168deg,rgb(var(--lv-w96,255,248,232)),rgb(var(--lv-w97,242,229,204)));} /* ---- Photographic heroes: no wash on the photograph itself ------------ The eyebrow and the standfirst sit over a sunlit photograph. Earlier passes carried that contrast with a black/near-black scrim laid over the whole photograph, at increasing strength each time it was revisited — by the last version, up to 80% black behind the text column. Removed by explicit direction: no dark tint of any strength on the photographs. The type now carries on a crimson-tinted panel scoped to .pr-hero-inner::before below, plus text-shadow — the photograph itself stays untouched and at full brightness. */ .pr-hero::after{background:none;} .pr-hero-inner{position:relative;} .pr-hero-inner::before{ content:"";position:absolute;inset:-40px -40px -30px -40px;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(110,38,34,0) 0%,rgba(110,38,34,.42) 55%,rgba(110,38,34,.58) 100%);} .pr-hero .pr-eyebrow{color:rgb(var(--lv-w98,245,228,184));text-shadow:0 1px 10px rgba(0,0,0,.75);} .pr-hero-sub{color:rgba(var(--lv-w80,255,252,246),.96);text-shadow:0 1px 14px rgba(0,0,0,.7);} /* ---- The remainder of the audit's findings --------------------------- */ .ann-countdown-empty{color:rgb(var(--lv-w182,92,76,52))!important;} .pr-body.src{color:rgb(var(--lv-w27,93,76,52));} .pr-photo-cap{color:rgb(var(--lv-w27,93,76,52));} .pr-path-age{color:var(--pr-gold-deep,rgb(var(--lv-gd,156,122,60)));} .pr-path-d{color:rgb(var(--lv-w99,79,64,48));} .pr-stat-s{color:rgb(var(--lv-w27,93,76,52));} .el-voice .who,.quote-panel .who{color:rgb(var(--lv-w27,93,76,52));} .at-ref{color:var(--pr-gold-deep,rgb(var(--lv-gd,156,122,60)));} .ic-mt-day{color:rgb(var(--lv-w27,93,76,52));} .pr-quote cite,.pr-founder-card cite,cite{color:rgb(var(--lv-w27,93,76,52));} .plib .stat-num,.policy-head .stat-num{color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} .sign-row .lab{color:rgb(var(--lv-w100,107,90,64));} /* the mosaic caption eyebrow, over a photograph */ .cl-cap-k{color:rgb(var(--lv-w98,245,228,184));text-shadow:0 1px 8px rgba(0,0,0,.8);} /* ---- Second pass: the audit re-run, corrected by measured ground ----- Each rule below was written against the actual pixel sampled behind the element, not against an assumption about which band it sits in. */ /* Dark grounds that had taken the ink palette by mistake */ .adk-static-section h2,.adk-static-section h3, .adk-static-section .adk-section-time, .adk-section-time{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)))!important;} .adk-static-item h4{color:rgb(var(--lv-gl2,255,248,234))!important;} .adk-static-translit,.adk-static-translation{color:rgba(var(--lv-p3,247,238,223),.86)!important;} .adk-static-ref{color:rgba(var(--lv-gb,233,206,138),.85)!important;} .ic-mt-day,.ic-mt-date{color:rgb(var(--lv-w183,255,243,220))!important;} .el-voices .who,.el-voice .who,.quote-panel .who{color:rgba(var(--lv-p3,247,238,223),.9);} .pr-section.is-ivory .quote-panel .who, .pr-section.is-ivory .el-voice .who{color:rgb(var(--lv-w66,74,58,36));} /* Light gold bands — the deep gold is not dark enough against them */ .adhkar-page > .wrap > .eyebrow, .adhkar-teaser .eyebrow, .adhkar-page .eyebrow, .at-ref, .adk-repeat,.adk-static-repeat{color:rgb(var(--lv-gt3,99,72,27))!important;} .adk-priority-card .apc-count, .adk-wird-card .awc-time, .adk-wird-card .awc-count, .adk-progress-stat .value, .adk-sd-stat .value{color:rgb(var(--lv-w67,122,90,36))!important;} /* Cream plates — a shade further down so small type carries */ .pr-path-age{color:rgb(var(--lv-w67,122,90,36));} cite,.pr-quote cite,.pr-founder-card cite{color:rgb(var(--lv-w66,74,58,36));} .pr-stat-s,.pr-photo-cap,.pr-body.src{color:rgb(var(--lv-w99,79,64,48));} .pr-section.is-ivory .btn-outline,.wrap > .cl-foot .btn-outline,.plib .btn-outline{ color:rgb(var(--lv-w67,122,90,36));} /* The photographic hero. The standfirst and its eyebrow sit over a sunlit wall, and no text colour survives that on its own. Two earlier passes solved this by darkening the photograph — the second reaching 80% black behind the whole text column. Replaced by direct request: no black or near-black tint on the photograph, at any strength. The panel below is the school's own crimson (the same accent used for the site's primary call-to-action) rather than a neutral shadow — bright and saturated rather than dark, carrying the type the same way a coloured plate would, not a shadow. */ .pr-hero-inner::before{ inset:-120px -60px -40px -60px; background:linear-gradient(180deg,rgba(110,38,34,0) 0%,rgba(110,38,34,.5) 45%,rgba(110,38,34,.66) 100%); -webkit-mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);} @media (max-width:760px){ .pr-hero-inner::before{inset:-80px -24px -30px -24px;} } /* The mosaic caption ribbon, deepened where a photograph is pale */ .cl-tile figcaption{ background:linear-gradient(180deg,rgba(110,38,34,0),rgba(110,38,34,.68) 38%,rgba(110,38,34,.88));} /* ---- Third pass: the last of the audit ------------------------------- */ /* The eyebrow appears on cream, on the pale gold band and on the dark bands. One colour cannot serve all three, so the default is set dark enough for the palest gold the site uses, and every dark ground restores the bright gold above. */ .eyebrow,.pr-eyebrow{color:rgb(var(--lv-gt3,99,72,27));} .pr-section.is-ivory .btn-outline,.wrap > .cl-foot .btn-outline,.plib .btn-outline{color:rgb(var(--lv-gt3,99,72,27));} /* A heading on a dark band must not take the ink colour brand.css gives every heading — the same defect that made the photographic hero titles invisible, in the one place it survived. */ .adhkar-page > .wrap > h2,.adhkar-page > .wrap > h3, .adk-static-section > h3,.adk-static-section > h2{color:rgb(var(--lv-gl2,255,248,234))!important;} /* The selected day chip carries a gold ground, so its label is ink. */ .ic-mt-day.is-on,.ic-mt-date.is-on{color:rgb(var(--lv-w65,42,27,13))!important;} /* Attribution lines, on cream */ cite,.pr-quote cite,.pr-founder-card cite{color:rgb(var(--lv-cf,59,42,29));} .pr-section.is-ivory .quote-panel .who,.pr-section.is-ivory .el-voice .who, .el-figures .who,.wrap .quote-panel .who{color:rgb(var(--lv-cf,59,42,29));} /* ---- Fourth pass ------------------------------------------------------ section.academics carries both the dark hero of an interior page and the light "Our Schools" band of the homepage, so it cannot be treated as one. The hero is distinguished by the crest icon it opens with. */ .academics > .wrap .eyebrow{color:rgb(var(--lv-gt3,99,72,27));} .academics > .wrap:has(> .page-hero-icon) .eyebrow, .policies > .wrap:has(> .page-hero-icon) .eyebrow{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* The testimonial attribution follows its band, dark or light. */ .el-voices .who,.el-voices-track .who{color:rgba(var(--lv-p3,247,238,223),.92)!important;} .pr-section.is-ivory .el-voices .who, .is-ivory .el-voices .who{color:rgb(var(--lv-cf,59,42,29))!important;} /* Attribution and outline buttons on cream, taken a shade further down. */ cite,.pr-quote cite,.pr-founder-card cite,figure cite{color:rgb(var(--lv-cf,59,42,29))!important;} .pr-section.is-ivory .btn-outline,.wrap > .cl-foot .btn-outline,.plib .btn-outline{ color:rgb(var(--lv-gt5,95,69,24))!important;} /* A milestone label on the dark timeline band. */ .chapter-band .pr-path-t,.chapter-band-alt .pr-path-t, .pr-section.is-royal .pr-path-t{color:rgb(var(--lv-gl2,255,248,234));} .pr-section.is-royal .pr-path-d,.chapter-band-alt .pr-path-d{color:rgba(var(--lv-w06,244,234,212),.84);} .pr-section.is-royal .pr-path-age,.chapter-band-alt .pr-path-age{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* The ghost button and the tag chip were both drawn for a dark band. On a cream one they keep their outline and take the ink. */ .pr-section.is-ivory .pr-btn.is-ghost, .is-ivory .pr-btn.is-ghost, .chapter-band-light .pr-btn.is-ghost{ color:rgb(var(--lv-gt5,95,69,24));border-color:rgba(var(--lv-gs,198,161,91),.55); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w50,245,236,220)));} .pr-section.is-ivory .pr-btn.is-ghost:hover,.is-ivory .pr-btn.is-ghost:hover{ color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));border-color:var(--pr-gold);} .pr-section.is-ivory .tag,.is-ivory .tag, .school-block .tag,.fac-profile .tag,.ct-office .tag{color:rgb(var(--lv-gt5,95,69,24));} .pr-section.is-royal .tag,.chapter-band .tag,.chapter-band-alt .tag, .portal-body .tag,.gateway-card .tag{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* A bare inline link on a pale band. */ .pr-section.is-ivory .text-link,.is-ivory .text-link{color:rgb(var(--lv-gt3,99,72,27));} .pr-section.is-royal .text-link,.chapter-band .text-link,.chapter-band-alt .text-link, .portal-body .text-link,footer .text-link,.text-link.on-dark{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* ---- Fifth pass: rules that follow their band instead of guessing ---- Some elements appear on both a cream band and a royal one. Rather than enumerate every place each occurs, they take the colour of the band they are standing in and step back from it — which is correct on any ground, and stays correct when a band is later re-toned. */ .el-voice .who,.el-voices .who,.quote-panel .who,.el-figures .who, .pr-quote cite{ color:inherit!important;opacity:.78;} /* .at-ref is deliberately NOT in that list, and this is the whole reason the exception exists. Taking the band's colour is right for an attribution printed straight onto the band. It is wrong for this one, because .at-ref carries its own dark chip — brand.css sets background:var(--navy-deep-bg) on it — so on a cream band it inherited the band's dark ink and painted dark on dark. Measured at 1.22:1, which is not poor contrast but invisibility. It keeps the bright gold its own ground was chosen for: 11.44:1, and 9.81:1 after the opacity below. */ .at-ref{color:var(--gold-bright)!important;opacity:.92;} /* The ghost button is ink by default and only goes pale on a dark band — the safer way round, since the cream bands outnumber the royal ones. */ .pr-btn.is-ghost{ color:rgb(var(--lv-gt5,95,69,24));border-color:rgba(var(--lv-gs,198,161,91),.5); background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w50,245,236,220)));} .pr-btn.is-ghost:hover{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));border-color:var(--pr-gold); background:linear-gradient(168deg,rgb(var(--lv-w96,255,248,232)),rgb(var(--lv-w97,242,229,204)));} .pr-section.is-royal .pr-btn.is-ghost,.pr-hero .pr-btn.is-ghost, .pr-arrival .pr-btn.is-ghost,.chapter-band .pr-btn.is-ghost, .chapter-band-alt .pr-btn.is-ghost,.portal-body .pr-btn.is-ghost, .academics > .wrap:has(> .page-hero-icon) .pr-btn.is-ghost{ color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));border-color:rgba(var(--lv-gbs,233,206,138),.45); background:rgba(var(--lv-wh,255,255,255),.05);} .pr-section.is-royal .pr-btn.is-ghost:hover,.pr-hero .pr-btn.is-ghost:hover{ color:#fff;border-color:var(--pr-gold-bright);background:rgba(var(--lv-gbs,233,206,138),.14);} /* The Foundation band on the homepage is cream, not royal. */ .foundation .eyebrow{color:rgb(var(--lv-gt3,99,72,27));} /* An open-ended age band is filled in a pale slate; its label takes ink. */ .pr-age-fill.is-open{background:linear-gradient(120deg,#33525E,#5C8391);color:#fff;} /* Small emphasis and captions on the palest plates. */ .pr-card b,.school-block b,.pr-body b,.cap,small{color:rgb(var(--lv-cf,59,42,29));} .pr-section.is-royal .cap,.pr-section.is-royal small, .chapter-band .cap,.chapter-band-alt .cap{color:rgba(var(--lv-w06,244,234,212),.86);} /* ---- Sixth pass: the last three ---------------------------------------- */ /* The section head is a dark chip; the heading inside it must not take the ink colour every heading inherits. */ .adk-section-head h2,.adk-section-head h3, .adk-priority-head h2,.adk-progress-head h2,.adk-wird-head h2{ color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)))!important;margin:0;} /* The feature card was drawn dark and is now a cream plate. */ .pr-feature .pr-feature-body h3{color:#FFFFFF;} .pr-feature .pr-feature-body p{color:rgba(255,255,255,.9);} .pr-feature .pr-feature-body > span:last-child{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));font-weight:600;} .pr-feature .pr-feature-body .tag{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} .pr-section.is-royal .pr-feature .pr-feature-body h3{color:rgb(var(--lv-gl2,255,248,234));} .pr-section.is-royal .pr-feature .pr-feature-body p{color:rgba(var(--lv-w06,244,234,212),.84);} .pr-section.is-royal .pr-feature .pr-feature-body > span:last-child{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* An attribution should sit just back from its band, not half-way to it. */ .el-voice .who,.el-voices .who,.quote-panel .who,.el-figures .who, .pr-quote cite,.at-ref{opacity:.92;} /* Emphasis and captions, wherever they fall on a pale plate. */ b,strong,small,.cap{color:inherit;} .pr-section.is-ivory b,.pr-section.is-ivory strong,.pr-section.is-ivory small, .pr-section.is-ivory .cap,.wrap > .cap,.school-block b,.school-block small{color:rgb(var(--lv-cf,59,42,29));} /* The open-ended age band, deepened until its white label carries. */ .pr-age-fill.is-open{background:linear-gradient(120deg,#2C4750,#48707E);} /* ---- Seventh pass: the last four -------------------------------------- */ /* The Adhkār Centre's own hero stands on the pale gold band, not a dark one — its title takes ink, and only the JS-rendered section chips are dark. */ .adhkar-page > .wrap > h2{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)))!important;} .adhkar-page > .wrap > h3{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)))!important;} .pr-age-fill.is-open{background:linear-gradient(120deg,#22383F,#3A5D68);} b,strong{color:rgb(var(--lv-cf,59,42,29));} .pr-section.is-royal b,.pr-section.is-royal strong,.chapter-band b,.chapter-band strong, .chapter-band-alt b,.chapter-band-alt strong,.portal-body b,.portal-body strong, footer b,footer strong,.pr-hero b,.pr-hero strong,.gateway-card b, /* The dark bands that were missing from this list. A bolded phrase in the governance note measured 1.0:1 — the coffee ink for the cream, set on the coffee band itself. */ .governance b,.governance strong,.facilities b,.facilities strong, .contact b,.contact strong,.digital-campus-teaser b,.digital-campus-teaser strong, .hero b,.hero strong,.pr-arrival b,.pr-arrival strong{color:inherit;} /* …and the pale plates that stand on those bands take the ink back. */ .governance .page-crosslinks b,.chapter-band-alt .page-crosslinks b, .governance .school-block b,.chapter-band-alt .school-block b, .governance .pr-card b,.chapter-band-alt .pr-card b{color:rgb(var(--lv-cf,59,42,29));} /* The attribution line follows its plate, not the band around it. .quote-panel and .el-voice are both dark plates wherever they stand, so the line is pale on both; the earlier reading — coffee, forced — put it at 1.0:1 against its own plate on the Arabic pages, where the plainer markup is still in use. .el-figures is not a plate and keeps the coffee. */ .el-figures .who{opacity:1;color:rgb(var(--lv-cf,59,42,29))!important;} .el-voice .who,.el-voices .who,.quote-panel .who{opacity:1;color:rgba(var(--lv-p3,247,238,223),.94)!important;} /* =================================================================== THE CLEAR EDITION (v4.7) ------------------------------------------------------------------- The institution's own livery is the royal coffee-and-gold, and it remains the default. But a reader who wants daylight should not get a half-measure: choosing Clear in the Personalisation Centre turns every royal ground into pearl and ivory and keeps the whole of the ornament — the corner rules, the gilt hairlines, the travelling light, the engraved plates — so that it reads as a second livery of the same house rather than as the dark one with the lights switched off. Everything below is scoped to html[data-pc-theme="light"] and touches nothing in the default. =================================================================== */ html[data-pc-theme="light"]{ --pearl:rgb(var(--lv-w101,251,247,239)); --pearl-2:rgb(var(--lv-w68,244,237,224)); --pearl-3:rgb(var(--lv-w102,237,227,210)); --pearl-ink:rgb(var(--lv-cf2,51,40,28)); --pearl-ink-2:rgb(var(--lv-ink2,87,71,47)); --pearl-line:rgba(var(--lv-g,198,161,91),.34); } /* ---- The masthead, in platinum ---- Previously ran to an actual cream (rgb 243,234,219) at 130% — a deliberate choice at the time ("the bands keep their cream", see masthead.css), reversed by direct request: white/platinum, not cream, for the header. The gold radial glow stays — it's the accent, not the ground. */ html[data-pc-theme="light"] header.nav{ background:radial-gradient(700px 140px at 12% 0%, rgba(var(--lv-gbs,233,206,138),.16), transparent 65%), linear-gradient(155deg,#FFFFFF 0%,#F7F7F8 130%); border-bottom:1px solid var(--pearl-line);} html[data-pc-theme="light"] header.nav::before{opacity:.05;} html[data-pc-theme="light"] .navlinks > a, html[data-pc-theme="light"] .nav-drop-trigger, html[data-pc-theme="light"] .brand-text .line1{color:var(--pearl-ink);} html[data-pc-theme="light"] .brand-text .line2{color:rgb(var(--lv-gt2,138,106,47));} html[data-pc-theme="light"] .search-toggle, html[data-pc-theme="light"] .menu-toggle, html[data-pc-theme="light"] .nav-drop-toggle{color:var(--pearl-ink);} /* The edition switch, on the Clear edition's pearl band. Written in bright gold for the dark masthead it was first drawn against, it arrived here as a pale ring on cream — legible if you knew where to look for it, which is not a thing a control may require. Deep gold on the pale band, and a border that is actually a border. */ html[data-pc-theme="light"] .edition-toggle{ color:rgb(var(--lv-gt2,138,106,47)); border-color:rgba(var(--lv-gt2s,138,106,47),.42);} html[data-pc-theme="light"] .edition-toggle:hover, html[data-pc-theme="light"] .edition-toggle:focus-visible{ color:var(--pearl-ink);border-color:rgba(var(--lv-gt2s,138,106,47),.9); background:rgba(var(--lv-gt2s,138,106,47),.1);} html[data-pc-theme="light"] .topbar{ background:linear-gradient(180deg,rgb(var(--lv-w104,246,239,226)),rgb(var(--lv-w184,239,229,211)));border-bottom:1px solid var(--pearl-line);} html[data-pc-theme="light"] .topbar a, html[data-pc-theme="light"] .topbar .contacts a, html[data-pc-theme="light"] .pc-trigger, html[data-pc-theme="light"] .social-icon{color:var(--pearl-ink-2);} html[data-pc-theme="light"] .social-icon.ico-whatsapp{color:#25D366;} html[data-pc-theme="light"] .social-icon.ico-facebook{color:#1877F2;} html[data-pc-theme="light"] .social-icon.ico-instagram{color:#C13584;} html[data-pc-theme="light"] .social-icon.ico-youtube{color:#FF0000;} html[data-pc-theme="light"] .ann-ribbon{ background:linear-gradient(180deg,rgb(var(--lv-w185,249,243,232)),rgb(var(--lv-w186,242,233,217)));border-bottom:1px solid var(--pearl-line);} html[data-pc-theme="light"] .ann-ribbon *{color:var(--pearl-ink-2);} html[data-pc-theme="light"] .breadcrumbs{ background:linear-gradient(180deg,rgb(var(--lv-w104,246,239,226)),rgb(var(--lv-w26,241,231,213)));border-bottom:1px solid var(--pearl-line);} html[data-pc-theme="light"] .breadcrumbs a{color:var(--pearl-ink-2);} html[data-pc-theme="light"] .breadcrumbs [aria-current="page"], html[data-pc-theme="light"] .breadcrumbs a:hover{color:rgb(var(--lv-gt2,138,106,47));} html[data-pc-theme="light"] .bc-sep{color:rgba(var(--lv-gt2,138,106,47),.6);} /* ---- The royal bands, in pearl ---- */ html[data-pc-theme="light"] .pr-section.is-royal, html[data-pc-theme="light"] .chapter-band, html[data-pc-theme="light"] .chapter-band-alt, html[data-pc-theme="light"] .academics > .wrap:has(> .page-hero-icon), html[data-pc-theme="light"] .policies > .wrap:has(> .page-hero-icon), html[data-pc-theme="light"] section.contact, html[data-pc-theme="light"] .digital-campus-teaser, html[data-pc-theme="light"] .governance, html[data-pc-theme="light"] .adhkar-teaser{ background:radial-gradient(900px 420px at 82% -10%, rgba(var(--lv-gbs,233,206,138),.28), transparent 62%), radial-gradient(700px 380px at 8% 106%, rgba(var(--lv-gs,198,161,91),.18), transparent 60%), linear-gradient(168deg,var(--pearl) 0%,var(--pearl-2) 52%,var(--pearl-3) 100%)!important; color:var(--pearl-ink)!important; border-top:1px solid var(--pearl-line);border-bottom:1px solid var(--pearl-line);} html[data-pc-theme="light"] .pr-section.is-royal h1, html[data-pc-theme="light"] .pr-section.is-royal h2, html[data-pc-theme="light"] .pr-section.is-royal h3, html[data-pc-theme="light"] .pr-section.is-royal h4, html[data-pc-theme="light"] .chapter-band-alt h2, html[data-pc-theme="light"] .chapter-band-alt h3, html[data-pc-theme="light"] .academics > .wrap h2, html[data-pc-theme="light"] .policies > .wrap h2, html[data-pc-theme="light"] section.contact h2, html[data-pc-theme="light"] .digital-campus-teaser h2, html[data-pc-theme="light"] .governance h2, html[data-pc-theme="light"] .adhkar-teaser h2{color:var(--pearl-ink)!important;} html[data-pc-theme="light"] .pr-section.is-royal p, html[data-pc-theme="light"] .pr-section.is-royal li, html[data-pc-theme="light"] .chapter-band-alt p, html[data-pc-theme="light"] .academics > .wrap p, html[data-pc-theme="light"] .policies > .wrap p, html[data-pc-theme="light"] section.contact p, html[data-pc-theme="light"] .digital-campus-teaser p, html[data-pc-theme="light"] .governance p, html[data-pc-theme="light"] .adhkar-teaser p{color:var(--pearl-ink-2)!important;} html[data-pc-theme="light"] .pr-section.is-royal .pr-eyebrow, html[data-pc-theme="light"] .academics > .wrap .eyebrow, html[data-pc-theme="light"] .policies > .wrap .eyebrow, html[data-pc-theme="light"] section.contact .eyebrow, html[data-pc-theme="light"] .digital-campus-teaser .eyebrow, html[data-pc-theme="light"] .governance .eyebrow, html[data-pc-theme="light"] .adhkar-teaser .eyebrow{color:rgb(var(--lv-gt4,116,85,31))!important;} /* Cards inside a pearl band become white plates rather than glass. */ html[data-pc-theme="light"] .pr-section.is-royal .pr-card, html[data-pc-theme="light"] .pr-section.is-royal .pr-doc, html[data-pc-theme="light"] .pr-section.is-royal .pr-person, html[data-pc-theme="light"] .pr-section.is-royal .pr-committee, html[data-pc-theme="light"] .pr-section.is-royal .pr-org-node, html[data-pc-theme="light"] .chapter-band-alt .school-block, html[data-pc-theme="light"] .academics > .wrap .school-block, html[data-pc-theme="light"] .dc-sys, html[data-pc-theme="light"] .dc-tile{ background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),rgb(var(--lv-w187,247,240,227)))!important; border-color:rgba(var(--lv-gs,198,161,91),.3)!important; color:var(--pearl-ink)!important;} html[data-pc-theme="light"] .dc-tile :is(h3,h4), html[data-pc-theme="light"] .dc-sys h3{color:var(--pearl-ink)!important;} html[data-pc-theme="light"] .dc-tile p, html[data-pc-theme="light"] .dc-sys p{color:var(--pearl-ink-2)!important;} /* ---- The Digital Campus gateway and portal, in pearl ---- */ html[data-pc-theme="light"] body.portal-body{ background:radial-gradient(1100px 560px at 78% -12%, rgba(var(--lv-gbs,233,206,138),.3), transparent 62%), radial-gradient(900px 480px at 8% 106%, rgba(var(--lv-gs,198,161,91),.18), transparent 60%), linear-gradient(168deg,rgb(var(--lv-w188,252,248,240)) 0%,rgb(var(--lv-w189,244,236,222)) 52%,rgb(var(--lv-w190,238,228,210)) 100%); color:var(--pearl-ink);} html[data-pc-theme="light"] .portal-body::before{opacity:.28;} html[data-pc-theme="light"] .gateway-card{ background:radial-gradient(520px 220px at 12% -20%, rgba(var(--lv-gbs,233,206,138),.26), transparent 62%), linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)) 0%,rgb(var(--lv-w51,248,241,227)) 52%,rgb(var(--lv-w191,242,233,216)) 100%); border-color:rgba(var(--lv-gs,198,161,91),.34); color:var(--pearl-ink); box-shadow:0 2px 4px rgba(var(--lv-cfd2s,42,28,16),.06),0 22px 46px -28px rgba(var(--lv-cfd2s,42,28,16),.4), inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.9);} html[data-pc-theme="light"] .gateway-card h2, html[data-pc-theme="light"] .gateway-card h3{color:var(--pearl-ink);} html[data-pc-theme="light"] .gateway-card > p{color:var(--pearl-ink-2);} html[data-pc-theme="light"] .gw-points li{color:rgb(var(--lv-w105,91,74,50));border-bottom-color:rgba(var(--lv-gs,198,161,91),.16);} html[data-pc-theme="light"] .gw-points{border-top-color:rgba(var(--lv-gs,198,161,91),.28);} html[data-pc-theme="light"] .gw-need{color:rgb(var(--lv-w106,122,105,73));} html[data-pc-theme="light"] .gw-group-head{color:var(--pearl-ink)!important;} html[data-pc-theme="light"] .gateway-card-eyebrow, html[data-pc-theme="light"] .gateway-card-cta{color:rgb(var(--lv-gt2,138,106,47));} html[data-pc-theme="light"] .portal-topbar{ background:linear-gradient(180deg,rgb(var(--lv-w51,248,241,227)),rgb(var(--lv-w26,241,231,213))); border-bottom:1px solid var(--pearl-line);} html[data-pc-theme="light"] .portal-brand{color:var(--pearl-ink);} html[data-pc-theme="light"] .portal-card{color:var(--pearl-ink);} /* THE EDITION-BLIND PATTERN, AGAIN — the fourth time this fault has been found on this site, and the reason it keeps returning is always the same: a "light edition means dark text" rule written without checking what the element is actually standing on. .portal-aside paints its OWN gradient, and that gradient is fixed. It was sampled from the painted pixels in every theme and every livery and came back rgb(49,34,21) each time — light/royal, light/emerald, royal/*, dark/*, all identical. The panel is a dark plate in all editions by design. Darkening its text for the Clear edition therefore put brown ink on brown ground across all nine auth pages: the three value points measured 1.71, 1.73 and 1.76:1 against a 4.5 requirement, and the body copy 1.54:1. The only reason it was not obvious is that it is legible-ish on a bright monitor at full brightness. There is nothing to replace these rules with. The base colours in §.portal-aside-* are already stated against this dark ground and are correct in every edition, so the override is simply deleted. The eyebrow's own light-edition override went with it for the same reason; css/portal-chrome.css:174 already pins it to #E4C87F for all editions, which is the value that belongs on a dark plate. RULE: before writing html[data-pc-theme="light"] ... {color:dark}, sample the element's ground with text made transparent. If the ground does not change with the edition, neither may the text. */ /* ---- The closing band and the footer, in true platinum, not cream ---- */ html[data-pc-theme="light"] .pr-arrival{ background:linear-gradient(168deg,#FFFFFF,#F2F3F5)!important;color:var(--pearl-ink)!important;} html[data-pc-theme="light"] .pr-arrival h2{color:var(--pearl-ink)!important;} html[data-pc-theme="light"] .pr-arrival .lead{color:var(--pearl-ink-2)!important;} html[data-pc-theme="light"] .foot-arrival{ background:radial-gradient(760px 260px at 50% 0%, rgba(var(--lv-gbs,233,206,138),.3), transparent 66%), linear-gradient(180deg,#FFFFFF 0%,#F5F6F7 58%,#EFF0F2 100%); border-top:1px solid var(--pearl-line);} html[data-pc-theme="light"] .foot-statement p{color:rgb(var(--lv-gt2,138,106,47));} /* NOT THE DIGITAL CAMPUS'S FOOT. `footer` is a tag, and it caught two of them: the marketing footer, which really does turn pearl in this edition, and .pch-foot — the colophon js/portal-chrome.js builds on all sixty-eight portal pages, which is espresso in every edition because the masthead above it is espresso in every edition. Unexcluded, this rule painted the bottom of every dashboard cream while the top of it stayed coffee, and re-inked the colophon dark to match: the page changed materials halfway down. Nothing there looked broken, which is why it stood — it looked cheap, and that is harder to see in a stylesheet than a contrast failure is. css/portal-chrome.css owns that foot; this edition does not reach into it. */ html[data-pc-theme="light"] footer:not(.pch-foot){ background:linear-gradient(180deg,#FFFFFF,#F2F3F5);color:var(--pearl-ink-2); border-top:1px solid var(--pearl-line);} html[data-pc-theme="light"] footer:not(.pch-foot) h2, html[data-pc-theme="light"] footer:not(.pch-foot) .fs-sig, html[data-pc-theme="light"] footer:not(.pch-foot) .fd-item span, html[data-pc-theme="light"] footer:not(.pch-foot) a{color:var(--pearl-ink);} html[data-pc-theme="light"] footer .fd-item{ background:linear-gradient(168deg,#FFFFFF,#F5F6F7);border-color:rgba(var(--lv-gs,198,161,91),.26);} html[data-pc-theme="light"] footer .fd-item svg{color:rgb(var(--lv-gt2,138,106,47));} /* The footer's map block is a photograph with a near-black overlay, and it stays a photograph in the Clear edition — a pearl page does not make a satellite image pale. Everything laid over it therefore keeps the pale ink it has in the Royal edition; the earlier Clear pass swept these in with the rest of the footer and left the campus name, the lede and the visit button at 1.2:1 to 2.0:1 on the map. Only the parts of the footer that really do turn pearl take the dark ink. */ html[data-pc-theme="light"] .fs-copy, html[data-pc-theme="light"] .foot-seal-badge, html[data-pc-theme="light"] .foot-contact-item{color:var(--pearl-ink-2)!important;} html[data-pc-theme="light"] .fm-overlay-title, html[data-pc-theme="light"] .fm-overlay-sub, html[data-pc-theme="light"] .fm-campus-name{color:rgb(var(--lv-gl3,255,246,228))!important;} html[data-pc-theme="light"] .fm-campus-tag, html[data-pc-theme="light"] .fm-lede{color:rgba(var(--lv-w03,243,232,212),.82)!important;} html[data-pc-theme="light"] .fm-btn{color:rgb(var(--lv-gl3,255,246,228))!important;border-color:rgba(var(--lv-gbs,233,206,138),.6)!important;} /* …except the primary, which brings its own gold ground with it. */ html[data-pc-theme="light"] .fm-btn.is-primary{color:rgb(var(--lv-cfd3,36,24,9))!important;} html[data-pc-theme="light"] .fm-eyebrow{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)))!important;} html[data-pc-theme="light"] .foot-dash-eyebrow{color:rgb(var(--lv-gt,124,94,40));} /* ---- The nav dropdowns, in pearl ---- */ html[data-pc-theme="light"] .nav-drop-panel{ background:linear-gradient(165deg,rgb(var(--lv-w17,255,253,248)),rgb(var(--lv-w193,244,235,219))); border-color:var(--pearl-line);border-top-color:var(--pr-gold); box-shadow:0 28px 56px -26px rgba(var(--lv-cfd2s,42,28,16),.32);} html[data-pc-theme="light"] .nav-drop-panel a, html[data-pc-theme="light"] .nav-mega-item .t, html[data-pc-theme="light"] .pgx-cat-t, html[data-pc-theme="light"] .pgx-pane-t, html[data-pc-theme="light"] .nav-mega-intro h4{color:var(--pearl-ink);} html[data-pc-theme="light"] .nav-mega-item .d, html[data-pc-theme="light"] .nav-mega-intro p, html[data-pc-theme="light"] .pgx-head p, html[data-pc-theme="light"] .pgx-pane-d, html[data-pc-theme="light"] .pgc-desc{color:var(--pearl-ink-2);} html[data-pc-theme="light"] .pgx-pane-points li{color:rgb(var(--lv-w105,91,74,50));} html[data-pc-theme="light"] .pgx-head h4{color:var(--pearl-ink);} html[data-pc-theme="light"] .pgx-cat-ico, html[data-pc-theme="light"] .pgc-icon{color:rgb(var(--lv-gt2,138,106,47));} html[data-pc-theme="light"] .pgx-pane-eyebrow{color:rgb(var(--lv-gt2,138,106,47));} html[data-pc-theme="light"] .pgx-pane-need{color:rgb(var(--lv-w106,122,105,73));} /* ---- The search overlay, the assistant, the drawer ---- */ html[data-pc-theme="light"] .search-overlay{background:rgba(var(--lv-w217,250,244,232),.9);} html[data-pc-theme="light"] .pc-overlay{background:rgba(var(--lv-w218,60,44,24),.42);} /* ---- Ornament stays gold; only the ground changes ---- */ html[data-pc-theme="light"] .pr-lightborder::after, html[data-pc-theme="light"] .pr-card::before, html[data-pc-theme="light"] .gateway-card::after{opacity:.6;} html[data-pc-theme="light"] .imperial-motion{opacity:.5;} html[data-pc-theme="light"] .mo-spot::before{ background:radial-gradient(600px circle at var(--sx,50%) var(--sy,30%),rgba(var(--lv-gs,198,161,91),.20),transparent 62%);} /* The engraved plates keep their dark ground — they are plates, and a plate is printed. They simply sit in a pearl mount instead of a cream one. */ html[data-pc-theme="light"] .gi-frame{background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),rgb(var(--lv-w194,245,237,224)));} /* ---- The gateway's quick rail --------------------------------------- A pupil signing in for the fifth time this week should reach their own door in one movement. Eight doors in one row, above the fold, before any of the explanation — the explanation is still there, underneath, for the visitor meeting the Digital Campus for the first time. */ .gw-quick{max-width:1300px;margin:26px auto 0;padding:0 22px;} .gw-quick-lab{ font-family:var(--font-label);font-size:.66rem;letter-spacing:.24em; text-transform:uppercase;color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));margin:0 0 12px; display:flex;align-items:center;gap:14px;} .gw-quick-lab::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,rgba(var(--lv-gbs,233,206,138),.42),transparent);} [dir="rtl"] .gw-quick-lab::after{background:linear-gradient(270deg,rgba(var(--lv-gbs,233,206,138),.42),transparent);} .gw-quick-row{ display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));} .gw-q{ display:flex;flex-direction:column;align-items:center;gap:9px; padding:16px 10px 14px;border-radius:var(--pr-r-md);text-decoration:none; font-family:var(--font-label);font-size:.74rem;letter-spacing:.06em; color:rgb(var(--lv-gl3,255,246,228)); background:linear-gradient(168deg,rgba(var(--lv-wh,255,255,255),.09),rgba(var(--lv-wh,255,255,255),.035)); border:1px solid rgba(var(--lv-gbs,233,206,138),.28); box-shadow:inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.18),0 12px 26px -22px rgba(0,0,0,.9); transition:transform .38s var(--pr-ease),box-shadow .38s var(--pr-ease), border-color .38s,background .38s;} .gw-q:hover,.gw-q:focus-visible{ transform:translateY(-4px);border-color:rgba(var(--lv-gbs,233,206,138),.6); background:linear-gradient(168deg,rgba(var(--lv-gbs,233,206,138),.2),rgba(var(--lv-gbs,233,206,138),.06)); box-shadow:inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.34),0 18px 34px -20px rgba(0,0,0,.95), 0 0 26px -10px rgba(var(--lv-gbs,233,206,138),.6);} .gw-q-i{display:grid;place-items:center;width:26px;height:26px;color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} .gw-q-i svg{width:100%;height:100%;} .gw-quick-note{margin:14px 0 0;font-size:.8rem;color:rgba(var(--lv-w03,243,232,212),.6);} @media (max-width:520px){ .gw-quick-row{grid-template-columns:repeat(4,1fr);gap:8px;} .gw-q{font-size:.66rem;padding:13px 6px 11px;} .gw-q-i{width:22px;height:22px;} } /* In the Clear edition the rail is a row of pearl plates. */ html[data-pc-theme="light"] .gw-q{ color:rgb(var(--lv-cf2,51,40,28)); background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),rgb(var(--lv-w38,246,238,223))); border-color:rgba(var(--lv-gs,198,161,91),.32); box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.9),0 12px 26px -22px rgba(var(--lv-cfd2s,42,28,16),.5);} html[data-pc-theme="light"] .gw-q-i{color:rgb(var(--lv-gt2,138,106,47));} html[data-pc-theme="light"] .gw-quick-lab{color:rgb(var(--lv-gt2,138,106,47));} html[data-pc-theme="light"] .gw-quick-note{color:rgb(var(--lv-w100,107,90,64));} /* =================================================================== THE HOME ADDITIONS (v4.8) ------------------------------------------------------------------- Three bands added to the homepage, none of them replacing anything already standing there: the six distinguishing marks, the pathway ladder against a single age axis, and the questions the admissions office is actually asked. All three are drawn from material already published elsewhere on the site and carry the link back to it, so the homepage asserts nothing it cannot show. =================================================================== */ /* ---- 1. The six marks ------------------------------------------- */ .hx-marks{background:var(--surface-tertiary-bg,rgb(var(--lv-p2,252,250,246)));position:relative;} .hx-marks::before{content:"";position:absolute;inset-inline:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(var(--lv-gs,198,161,91),.45),transparent);} .hx-marks-lede{max-width:660px;color:var(--on-surface-soft,rgb(var(--lv-w07,74,73,68))); margin:14px 0 0;font-size:.98rem;text-align:justify;text-justify:inter-word;hyphens:auto;} .hx-mark-grid{display:grid;gap:20px;margin-top:34px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));} .hx-mark{position:relative;isolation:isolate;padding:30px 28px 26px; border:1px solid var(--line,rgba(var(--lv-gs,198,161,91),.38));border-radius:var(--pr-r-md,14px); background:linear-gradient(168deg,rgb(var(--lv-w17,255,253,248)),var(--surface-bg,rgb(var(--lv-w46,251,246,236)))); box-shadow:0 20px 44px -38px rgba(var(--lv-w29,60,42,22),.6); transition:transform .5s var(--pr-ease,cubic-bezier(.16,.8,.24,1)), box-shadow .5s var(--pr-ease,cubic-bezier(.16,.8,.24,1)), border-color .5s;} .hx-mark:hover{transform:translateY(-5px);border-color:rgba(var(--lv-gs,198,161,91),.72); box-shadow:0 30px 58px -34px rgba(var(--lv-w29,60,42,22),.62);} /* A hairline of gold that draws itself along the top edge on hover. */ .hx-mark::after{content:"";position:absolute;inset-inline:0;top:-1px;height:2px; border-radius:2px;transform:scaleX(0);transform-origin:left; background:linear-gradient(90deg,var(--pr-gold-deep,rgb(var(--lv-gds,156,122,60))),var(--pr-gold-bright,rgb(var(--lv-gbs,233,206,138))),var(--pr-gold-deep,rgb(var(--lv-gds,156,122,60)))); transition:transform .6s var(--pr-ease,cubic-bezier(.16,.8,.24,1));} [dir="rtl"] .hx-mark::after{transform-origin:right;} .hx-mark:hover::after{transform:scaleX(1);} .hx-mark-n{position:absolute;top:20px;inset-inline-end:24px; font-family:var(--font-label);font-size:1.5rem;line-height:1; color:rgba(var(--lv-gt,124,84,48),.86);letter-spacing:.02em;pointer-events:none;} .hx-mark-i{display:grid;place-items:center;width:52px;height:52px; border-radius:14px;color:var(--pr-gold-deep,rgb(var(--lv-gd,156,122,60))); background:linear-gradient(160deg,rgba(var(--lv-gbs,233,206,138),.3),rgba(var(--lv-gs,198,161,91),.1)); border:1px solid rgba(var(--lv-gs,198,161,91),.36);margin-bottom:16px;} .hx-mark-i svg{width:26px;height:26px;} .hx-mark h3{font-family:var(--font-label);font-size:1.09rem;line-height:1.34; margin:0 0 10px;color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));} .hx-mark p{margin:0;font-size:.93rem;line-height:1.72;color:var(--on-surface-soft,rgb(var(--lv-w07,74,73,68))); text-align:justify;text-justify:inter-word;hyphens:auto;} .hx-mark-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px; font-family:var(--font-label);font-size:.74rem;letter-spacing:.12em; text-transform:uppercase;text-decoration:none;color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40))); border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.4);padding-bottom:3px; transition:color .3s,border-color .3s,gap .3s;} .hx-mark-link:hover{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));border-color:var(--pr-gold-text,rgb(var(--lv-gts,124,94,40)));gap:11px;} @media (max-width:520px){ .hx-mark{padding:26px 20px 22px;} .hx-mark-n{font-size:1.2rem;top:16px;inset-inline-end:18px;} } /* ---- 2. The pathway ladder --------------------------------------- */ /* Seventeen columns, one per year from two to eighteen. Each bar is placed with --s and --e, so a row's span is written in the markup where it can be read, not computed in a stylesheet where it cannot. The bar is ornament: every row also states its range in words. */ .hx-path{background:var(--surface-alt-bg,rgb(var(--lv-w195,241,232,216)));position:relative;overflow:hidden;} .hx-path-lede{max-width:700px;color:var(--on-surface-soft,rgb(var(--lv-w07,74,73,68))); margin:14px 0 0;font-size:.98rem;text-align:justify;text-justify:inter-word;hyphens:auto;} .hx-ladder{margin-top:34px;padding:30px 30px 26px; border:1px solid var(--line,rgba(var(--lv-gs,198,161,91),.38));border-radius:var(--pr-r-lg,18px); background:linear-gradient(168deg,rgb(var(--lv-w17,255,253,248)),var(--surface-bg,rgb(var(--lv-w46,251,246,236)))); box-shadow:0 24px 52px -40px rgba(var(--lv-w29,60,42,22),.55);} .hx-axis{display:grid;grid-template-columns:repeat(17,1fr); padding-bottom:9px;border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.3);} .hx-axis-t{grid-column:var(--c);position:relative; font-family:var(--font-label);font-size:.74rem;letter-spacing:.06em; color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} .hx-axis-t::after{content:"";position:absolute;inset-block-end:-10px;inset-inline-start:0; width:1px;height:6px;background:rgba(var(--lv-gs,198,161,91),.5);} .hx-axis-lab{margin:8px 0 20px;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} .hx-track + .hx-track{margin-top:16px;padding-top:16px; border-top:1px dotted rgba(var(--lv-gs,198,161,91),.3);} .hx-track-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:9px;} .hx-track-k{font-family:var(--font-label);font-size:.98rem;color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));} .hx-track-v{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} .hx-bar-rail{display:grid;grid-template-columns:repeat(17,1fr); background:repeating-linear-gradient(90deg,rgba(var(--lv-gs,198,161,91),.14) 0 1px,transparent 1px calc(100% / 17)); border-radius:9px;} .hx-bar{grid-column:var(--s) / var(--e);display:flex;align-items:center; min-height:44px;padding:9px 16px;border-radius:9px;text-decoration:none; font-size:.84rem;line-height:1.4;color:rgb(var(--lv-gl3,255,246,228)); background:linear-gradient(120deg,var(--pr-coffee-bg,rgb(var(--lv-cfs,59,42,29))),rgb(var(--lv-w196,90,66,44))); border:1px solid rgba(var(--lv-gs,198,161,91),.42); box-shadow:inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.2),0 12px 26px -22px rgba(var(--lv-w29,60,42,22),.9); transition:transform .42s var(--pr-ease,cubic-bezier(.16,.8,.24,1)),box-shadow .42s,filter .42s;} .hx-bar span{display:block;} .hx-bar:hover,.hx-bar:focus-visible{transform:translateY(-3px);filter:brightness(1.12); box-shadow:inset 0 1px 0 rgba(var(--lv-gbs,233,206,138),.34),0 18px 34px -20px rgba(var(--lv-w29,60,42,22),.95);} .hx-bar.is-rc{background:linear-gradient(120deg,rgb(var(--lv-w24s,74,53,32)),rgb(var(--lv-w197,107,80,48)));} .hx-bar.is-ais{background:linear-gradient(120deg,rgb(var(--lv-w198,63,51,36)),rgb(var(--lv-w199,94,74,46)));} .hx-bar.is-qc{background:linear-gradient(120deg,rgb(var(--lv-w200,56,43,30)),rgb(var(--lv-w201,87,67,43)));} /* The fifth school is constituted but not yet published, and the bar says so by being an outline rather than a solid — an empty frame waiting to be filled, not a claim already made. */ .hx-bar.is-odl{background:linear-gradient(120deg,rgba(var(--lv-gbs,233,206,138),.16),rgba(var(--lv-gs,198,161,91),.06)); border:1px dashed rgba(var(--lv-gds,156,122,60),.62);color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29))); box-shadow:none;} .hx-bar.is-odl:hover{filter:none; background:linear-gradient(120deg,rgba(var(--lv-gbs,233,206,138),.3),rgba(var(--lv-gs,198,161,91),.12));} .hx-path-foot{margin:22px 0 0;font-size:.92rem;color:var(--on-surface-soft,rgb(var(--lv-w07,74,73,68)));} /* Below the fold of a phone the axis is meaningless: the bars become a plain stack and each row's words carry the whole meaning. */ @media (max-width:760px){ .hx-ladder{padding:24px 18px 20px;} .hx-axis,.hx-axis-lab{display:none;} .hx-bar-rail{grid-template-columns:1fr;background:none;} .hx-bar{grid-column:1 / -1 !important;} } /* ---- 3. The questions -------------------------------------------- */ .hx-faq{background:var(--surface-bg,rgb(var(--lv-w46,251,246,236)));position:relative;} .hx-faq-lede{max-width:660px;color:var(--on-surface-soft,rgb(var(--lv-w07,74,73,68))); margin:14px 0 0;font-size:.98rem;text-align:justify;text-justify:inter-word;hyphens:auto;} /* Multi-column rather than grid. In a grid, opening one question stretches its whole row and leaves a hole beside it; in columns the rest simply reflow around the answer, which is what a reader expects of an accordion. */ .hx-faq-grid{margin-top:32px;column-gap:12px;} @media (min-width:900px){.hx-faq-grid{column-count:2;}} @media (min-width:1240px){.hx-faq-grid{column-count:3;}} .hx-faq-grid > .hx-q{break-inside:avoid;-webkit-column-break-inside:avoid; page-break-inside:avoid;margin-bottom:12px;} .hx-q{border:1px solid var(--line,rgba(var(--lv-gs,198,161,91),.38));border-radius:var(--pr-r-md,14px); background:linear-gradient(168deg,rgb(var(--lv-w17,255,253,248)),var(--surface-alt-bg,rgb(var(--lv-w68,244,237,224)))); overflow:hidden;transition:border-color .4s,box-shadow .4s;} .hx-q[open]{border-color:rgba(var(--lv-gs,198,161,91),.7); box-shadow:0 22px 46px -38px rgba(var(--lv-w29,60,42,22),.6);} .hx-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px; padding:18px 22px;} .hx-q summary::-webkit-details-marker{display:none;} .hx-q-t{flex:1;font-family:var(--font-label);font-size:.96rem;line-height:1.42; color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));} /* A plus that becomes a minus. Drawn in CSS so there is no icon to load and no script to run — the accordion works with JavaScript off. */ .hx-q summary::after{content:"";flex-shrink:0;width:15px;height:15px;position:relative; background:linear-gradient(var(--pr-gold-deep,rgb(var(--lv-gds,156,122,60))),var(--pr-gold-deep,rgb(var(--lv-gds,156,122,60)))) center/15px 1.6px no-repeat, linear-gradient(var(--pr-gold-deep,rgb(var(--lv-gds,156,122,60))),var(--pr-gold-deep,rgb(var(--lv-gds,156,122,60)))) center/1.6px 15px no-repeat; transition:transform .42s var(--pr-ease,cubic-bezier(.16,.8,.24,1)),background-size .42s;} .hx-q[open] summary::after{transform:rotate(180deg); background:linear-gradient(var(--pr-gold-deep,rgb(var(--lv-gds,156,122,60))),var(--pr-gold-deep,rgb(var(--lv-gds,156,122,60)))) center/15px 1.6px no-repeat;} .hx-q summary:hover .hx-q-t{color:var(--pr-gold-deep,rgb(var(--lv-gd,156,122,60)));} .hx-q summary:focus-visible{outline:2px solid var(--pr-gold-deep,rgb(var(--lv-gds,156,122,60)));outline-offset:-3px;} .hx-q-a{padding:0 22px 20px;border-top:1px dotted rgba(var(--lv-gs,198,161,91),.34);margin-top:-2px;} .hx-q-a p{margin:16px 0 0;font-size:.93rem;line-height:1.76; color:var(--on-surface-soft,rgb(var(--lv-w07,74,73,68)));text-align:justify;text-justify:inter-word;hyphens:auto;} .hx-faq-foot{margin:24px 0 0;font-size:.92rem;color:var(--on-surface-soft,rgb(var(--lv-w07,74,73,68)));} @media (max-width:520px){.hx-q summary{padding:16px 17px;}.hx-q-a{padding:0 17px 17px;}} /* ---- The Clear edition ------------------------------------------- */ html[data-pc-theme="light"] .hx-marks, html[data-pc-theme="light"] .hx-path, html[data-pc-theme="light"] .hx-faq{background:var(--pearl,rgb(var(--lv-w101,251,247,239)));} html[data-pc-theme="light"] .hx-mark, html[data-pc-theme="light"] .hx-ladder, html[data-pc-theme="light"] .hx-q{background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),rgb(var(--lv-w38,246,238,223))); border-color:var(--pearl-line,rgba(var(--lv-gs,198,161,91),.34));} html[data-pc-theme="light"] .hx-bar{color:rgb(var(--lv-gl2,255,248,234));} html[data-pc-theme="light"] .hx-bar.is-odl{color:rgb(var(--lv-w202,74,58,38));} html[data-pc-theme="light"] .hx-marks::before{opacity:.6;} /* ---- Reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .hx-mark,.hx-mark::after,.hx-bar,.hx-mark-link,.hx-q summary::after{transition:none!important;} .hx-mark:hover,.hx-bar:hover{transform:none!important;} } /* =================================================================== THE CHARCOAL BAND — TEXT LAID DIRECTLY ON IT (v4.10) ------------------------------------------------------------------- .chapter-band-alt is a charcoal ground, and its eyebrow was already given the bright gold that belongs on a dark ground. Its headings and its lede paragraphs never were: they kept the coffee ink meant for cream, and measured 1.06:1 and 1.10:1 against the band — invisible, not merely faint. The cards that sit inside the band carry their own pale grounds and are correct as they stand, so this reaches only the text laid straight onto the charcoal. =================================================================== */ .chapter-band-alt > .wrap > h1.page-title, .chapter-band-alt > .wrap > h2, .chapter-band-alt > .wrap > h3, .chapter-band-alt > .wrap > h4{color:var(--pr-milk,rgb(var(--lv-p3,247,238,223)))!important;} .chapter-band-alt > .wrap > p{color:rgba(var(--lv-w00,248,244,233),.82)!important;} .chapter-band-alt > .wrap > p .text-link, .chapter-band-alt > .wrap > p a{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* The letterhead rule under the heading takes the brighter gold too, for the same reason the eyebrow does. */ .chapter-band-alt > .wrap > h2::after, .chapter-band-alt > .wrap > h1.page-title::after{ background-image:linear-gradient(90deg,var(--pr-gold-bright,rgb(var(--lv-gbs,233,206,138))) 0 100%), linear-gradient(90deg,var(--pr-gold-bright,rgb(var(--lv-gbs,233,206,138))) 0 100%);} /* ---- The reading gold ---------------------------------------------- --pr-gold-deep is an ornament colour: it is correct in a rule, a frame or a hairline, and it measures 3.2:1 to 3.8:1 as small text on the cream and ivory grounds — under the 4.5:1 a body reader needs. Small gold *type* on a light ground takes this darker cut instead. Same hue, same family, four steps down in value. */ :root{--pr-gold-text:rgb(var(--lv-gt,124,94,40));} /* =================================================================== THE PAGE TITLE (v4.9) ------------------------------------------------------------------- Fifty-four of the seventy-one published pages carried no

at all: every one of them opened with an

, so a search engine and a screen reader alike met a page with no title heading on it. The heading is now an

in the markup, which is what it always was in meaning. Nothing may change on screen. Rather than rewrite every h2 selector in the design system by hand and miss one, every rule anywhere in it that styles an h2 is mirrored below onto h1.page-title — same declarations, and each one kept inside whatever @media or @supports context it was written in, so a mobile size stays a mobile size. =================================================================== */ h1.page-title{font-family:var(--font-display);font-weight:600;color:var(--navy);line-height:1.15;} section h1.page-title{font-size:var(--h2-size);position:relative;padding-bottom:16px;} section h1.page-title::after{content:"";position:absolute;left:1px;bottom:0;width:84px;height:9px;pointer-events:none; background-image:linear-gradient(90deg,var(--gold) 0%,var(--gold) 100%),linear-gradient(90deg,var(--gold) 0%,var(--gold) 100%); background-size:100% 2px,42% 1px;background-position:0 0,0 7px;background-repeat:no-repeat;opacity:0.85;} [dir="rtl"] section h1.page-title::after{left:auto;right:1px;} #todays-wird h1.page-title::after{left:50%;transform:translateX(-50%);} [dir="rtl"] #todays-wird h1.page-title::after{right:50%;transform:translateX(50%);left:auto;} .governance h1.page-title::after,.facilities h1.page-title::after,.contact h1.page-title::after,.digital-campus-teaser h1.page-title::after,.seal-inner h1.page-title::after{background-image:linear-gradient(90deg,var(--gold-bright) 0%,var(--gold-bright) 100%),linear-gradient(90deg,var(--gold-bright) 0%,var(--gold-bright) 100%);} .intro h1.page-title{font-size:2.2rem;margin:14px 0 22px;} .adk-section-head h1.page-title{font-size:1.35rem;margin:0;flex:1;} .governance h1.page-title{color:#fff;} .digital-campus-teaser h1.page-title{color:#fff;} .facilities h1.page-title{color:#fff;} .contact h1.page-title{color:#fff;} .seal-inner h1.page-title{color:#fff;font-family:var(--font-label);font-size:1.7rem;margin-bottom:44px;} .pr-cta h1.page-title{font-family:var(--font-label);font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 12px;color:#fff;position:relative;z-index:2;} .pr-cta h1.page-title{opacity:0;transform:translateY(14px); transition:opacity .8s var(--pr-ease),transform .8s var(--pr-ease);} .pr-cta.pr-in h1.page-title{opacity:1;transform:none;transition-delay:.10s;} .pr-arrival h1.page-title{font-family:var(--font-label);font-weight:600;letter-spacing:.012em; font-size:clamp(1.8rem,4.6vw,3.1rem);line-height:1.12;margin:.55rem 0 0;color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.45);position:relative;z-index:2;} .pr-arrival h1.page-title{background-image:linear-gradient( calc(100deg + (var(--gx,50) - 50) * 0.6deg), var(--pr-gold-deep) 0%, var(--pr-gold-deep) 34%, rgb(var(--lv-gls,255,246,223)) calc(42% + (var(--gx,50) - 50) * 0.22%), var(--pr-gold) 58%, var(--pr-gold-deep) 100%);} .pr-arrival h1.page-title{background-image:none;} .gateway-card h1.page-title{font-family:var(--font-label);color:#fff; font-size:1.12rem;margin:7px 0 8px;} .gateway-card h1.page-title{color:rgb(var(--lv-w93,255,253,247));} .adk-static-section h1.page-title{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)))!important;} .adhkar-page > .wrap > h1.page-title,.adk-static-section > h1.page-title{color:rgb(var(--lv-gl2,255,248,234))!important;} .adk-section-head h1.page-title,.adk-priority-head h1.page-title,.adk-progress-head h1.page-title,.adk-wird-head h1.page-title{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)))!important;margin:0;} .adhkar-page > .wrap > h1.page-title{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)))!important;} html[data-pc-theme="light"] .pr-section.is-royal h1.page-title,html[data-pc-theme="light"] .chapter-band-alt h1.page-title,html[data-pc-theme="light"] .academics > .wrap h1.page-title,html[data-pc-theme="light"] .policies > .wrap h1.page-title,html[data-pc-theme="light"] section.contact h1.page-title,html[data-pc-theme="light"] .digital-campus-teaser h1.page-title,html[data-pc-theme="light"] .governance h1.page-title,html[data-pc-theme="light"] .adhkar-teaser h1.page-title{color:var(--pearl-ink)!important;} html[data-pc-theme="light"] .gateway-card h1.page-title{color:var(--pearl-ink);} html[data-pc-theme="light"] .pr-arrival h1.page-title{color:var(--pearl-ink)!important;} .chapter-band-alt > .wrap > h1.page-title{color:var(--pr-milk,rgb(var(--lv-p3,247,238,223)))!important;} .chapter-band-alt > .wrap > h1.page-title::after{background-image:linear-gradient(90deg,var(--pr-gold-bright,rgb(var(--lv-gbs,233,206,138))) 0 100%), linear-gradient(90deg,var(--pr-gold-bright,rgb(var(--lv-gbs,233,206,138))) 0 100%);} #at-a-glance h1.page-title::after{left:50% !important; right:auto !important; transform:translateX(-50%) !important;} .spread h1.page-title{font-family:var(--font-label); font-size:24pt; line-height:1.15; color:var(--navy); margin:0 0 6px;} .spread h1.page-title::after{content:''; display:block; width:60px; height:2px; margin:18px 0 16px; background:linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%);} .spread.dark h1.page-title::after,.spread.charcoal h1.page-title::after{background:linear-gradient(90deg, var(--gold-bright) 0%, var(--gold) 100%);} .feature-hero .feature-title-bar h1.page-title.feature-title{font-family:var(--font-label); color:#fff; font-size:26pt; margin:0;} .spread.charcoal h1.page-title{color:#fff;} .bio-content h1.page-title{font-size:27pt;} .ap-done h1.page-title{font-family:var(--font-display); font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem); color:var(--navy); margin:0 0 14px;} .portal-child-head h1.page-title{font-family:var(--font-label);font-size:var(--h4-size,1.3rem);font-weight:600;margin:0 0 4px;color:var(--portal-heading);} .portal-adhkar-head h1.page-title{font-family:var(--font-label);font-size:var(--h4-size,1.3rem);margin:0;color:var(--portal-heading);} .portal-hifz-head h1.page-title{font-family:var(--font-label);font-size:var(--h4-size,1.3rem);margin:0;color:var(--portal-heading);} .pfd-section h1.page-title{font-family:var(--font-label);font-size:var(--h4-size,1.3rem);margin:0 0 14px;color:var(--portal-heading);} .wizard-celebration-card h1.page-title{font-family:var(--font-label);font-size:1.3rem;color:var(--portal-heading);margin:0 0 8px;} .exec-card-head h1.page-title{font-family:var(--font-label);font-size:var(--h4-size,1.3rem);margin:0;color:var(--portal-heading);} body.type-executive .portal-child-head h1.page-title{font-size:1.55rem;letter-spacing:0.008em;} body.type-governance .portal-child-head h1.page-title{font-family:var(--font-label);font-size:1.3rem;letter-spacing:0.012em;} body.type-academic .portal-child-head h1.page-title{font-family:var(--font-display);font-size:1.42rem;font-weight:700;} body.type-administrative .portal-child-head h1.page-title{font-family:var(--font-body);font-size:1.18rem;font-weight:700;letter-spacing:0.002em;} .portal-select-card.is-featured h1.page-title{color:rgb(var(--lv-mk,247,244,233));} .portal-select-card h1.page-title{font-family:var(--font-display);font-size:1.5rem;color:var(--portal-heading);margin:0;} .gateway-card h1.page-title{position:relative;z-index:1;font-family:var(--font-display);font-size:1.4rem;color:var(--portal-heading);margin:0;} @media (max-width:640px){ .portal-child-head h1.page-title{font-size:1.1rem;} .exec-card-head h1.page-title{font-size:1.1rem;} } @media (prefers-reduced-motion:reduce){ .pr-cta h1.page-title{opacity:1!important;transform:none!important;transition:none!important;} } /* =================================================================== THE ENGRAVED PLATE, ON THE CREAM (v4.11) ------------------------------------------------------------------- .stat-tile was written for a dark band and took pale ivory for its label and bright gold for its figure. The tile itself is now a milk plate on most of the pages that carry it, and that pairing measured 1.03:1 for the label — a caption that is not there at all. The tile keeps its pale text only where the plate is genuinely dark, which is the two places the design system already marks as royal grounds. =================================================================== */ .stat-tile .num{color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} .stat-tile .label{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));opacity:.86;} .governance .stat-tile .num,.is-royal .stat-tile .num, .chapter-band-alt .stat-tile .num,.portal-body .stat-tile .num{ color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} .governance .stat-tile .label,.is-royal .stat-tile .label, .chapter-band-alt .stat-tile .label,.portal-body .stat-tile .label{ color:rgba(var(--lv-w00,248,244,233),.78);opacity:1;} html[data-pc-theme="light"] .stat-tile .num{color:rgb(var(--lv-gt2,138,106,47));} html[data-pc-theme="light"] .stat-tile .label{color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} /* =================================================================== THE EYEBROW AND THE LINK, MEASURED (v4.12) ------------------------------------------------------------------- Two selectors in the dark-ground list name bands that are not dark. Measured on every page that carries them, section.academics renders milk (rgb(var(--lv-p2,252,250,246))) and section.policies renders ivory (rgb(var(--lv-p3,247,238,223))) — there is no page anywhere on the site where either is a dark band. Both were nonetheless painting their eyebrow in the bright gold reserved for near-black grounds: 1.18:1 on the twenty academic pages and 2.14:1 on the Governance Library. An eyebrow is small capitals at .66rem; at that size it was simply not there. An earlier pass tried to tell the two cases apart by whether the band opened with a crest icon. The icon turns out to have nothing to do with the ground, so the guess is withdrawn and the ink is set from what the band actually is. =================================================================== */ .academics > .wrap .eyebrow, .academics > .wrap:has(> .page-hero-icon) .eyebrow, .policies > .wrap .eyebrow, .policies > .wrap:has(> .page-hero-icon) .eyebrow{color:rgb(var(--lv-gt3,99,72,27));} html[data-pc-theme="light"] .academics > .wrap .eyebrow, html[data-pc-theme="light"] .policies > .wrap .eyebrow{color:rgb(var(--lv-gt2,138,106,47));} /* Cards keep their own pale ground wherever they are set down, so a link inside one takes the ink for a pale ground even when the card is sitting on the charcoal band. Measured 1.28:1 before this. */ .chapter-band .school-block .text-link,.chapter-band-alt .school-block .text-link, .chapter-band .fac-profile .text-link,.chapter-band-alt .fac-profile .text-link, .chapter-band .pr-card .text-link,.chapter-band-alt .pr-card .text-link, .chapter-band .gal-item .text-link,.chapter-band-alt .gal-item .text-link{color:rgb(var(--lv-gt3,99,72,27));} /* =================================================================== SMALL GOLD TYPE, ON PAPER (v4.13) ------------------------------------------------------------------- The remaining sub-4.5:1 readings across the site were all the same thing: --pr-gold-deep used as small type on a pale ground, where it measures 3.2:1 to 3.9:1. It stays exactly as it is in rules, frames, borders and hairlines — as an ornament it is right. Where it is a word a reader must read, it takes --pr-gold-text. =================================================================== */ .pr-quote .who, .pr-org-node .who, .pr-photo-cap, .pr-compare tbody th{color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} .pr-section.is-royal .pr-quote .who,.chapter-band .pr-quote .who, .chapter-band-alt .pr-quote .who,.pr-section.is-royal .pr-org-node .who, .portal-body .pr-quote .who{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} .pr-org-node.is-apex .who{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* ---- The same correction, in the last three places it hides ------- The organisation chart's nodes are pale plates that happen to stand on a royal band, so a rule keyed to the band was giving them the bright gold meant for the band itself: 1.44:1 on the node. A card takes the ink for its own ground, never for the ground beneath it. */ .pr-section.is-royal .pr-org-node .who, .chapter-band .pr-org-node .who,.chapter-band-alt .pr-org-node .who{ color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} .pr-section.is-royal .pr-org-node.is-apex .who, .pr-org-node.is-apex .who{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* A reserved committee and an unfilled chip are set apart by the dashed rule around them; they do not also need to be faded out of reading. */ .pr-committee.is-reserved h4{color:rgb(var(--lv-ink3,114,100,73));} .pr-chip.is-reserved{color:rgb(var(--lv-ink3,114,100,73));} /* A person's role line is type, not ornament. */ .pr-person .rl{color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} .pr-section.is-royal .pr-person .rl,.portal-body .pr-person .rl{ color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} .pr-section.is-royal .pr-person.has-photo .rl{color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} /* ---- The quiet tone, raised --------------------------------------- rgb(var(--lv-w82,138,122,96)) was the design system's muted secondary — used for a credential line, an axis tick, a caption, a reserved seat. On the pale grounds it lives on it measured 3.5:1 to 4.0:1, just under the 4.5:1 a reader needs at those sizes, and every one of those is text somebody has to read rather than ornament. rgb(var(--lv-ink3,114,100,73)) is the same colour four steps darker: still recessive beside the coffee ink, now legible. Applied at source above; this note records why. ------------------------------------------------------------------- */ /* ---- The chip rail, on the charcoal band --------------------------- .mkt-cat-nav is a rail of outline chips; on the Media Centre and the Marketplace it stands on the charcoal band, where its deep navy ink measured 1.17:1. The chip has no ground of its own, so it takes the ink of the band it stands on. */ .chapter-band-alt .mkt-cat-nav a,.chapter-band .mkt-cat-nav a{ color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));border-color:rgba(var(--lv-gbs,233,206,138),.4);} .chapter-band-alt .mkt-cat-nav a:hover,.chapter-band .mkt-cat-nav a:hover{ border-color:var(--pr-gold-bright,rgb(var(--lv-gbs,233,206,138)));background:rgba(var(--lv-gbs,233,206,138),.14);} html[data-pc-theme="light"] .chapter-band-alt .mkt-cat-nav a{ color:rgb(var(--lv-gt5,95,69,24));border-color:rgba(var(--lv-gs,198,161,91),.42);} /* ---- The gateway card, out of the drop-down ------------------------- .portal-gateway-card was drawn for the navigation drop-down, which is a near-black panel, and its name, description and enter link were inked for that. The /verify/ page lays the same card out on the milk band, where the three measured 1.10:1, 1.03:1 and 1.47:1 — the whole card blank. Inside the drop-down it keeps its dark treatment; out on the page it takes the page's ink. */ .wrap > .portal-gateway-grid .pgc-name, section .portal-gateway-grid .pgc-name{color:var(--pr-coffee,rgb(var(--lv-cf,59,42,29)));} .wrap > .portal-gateway-grid .pgc-desc, section .portal-gateway-grid .pgc-desc{color:rgb(var(--lv-w16,90,74,56));} .wrap > .portal-gateway-grid .pgc-enter, section .portal-gateway-grid .pgc-enter{color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));font-weight:600;} .nav-drop-panel .portal-gateway-grid .pgc-name{color:var(--ivory,rgb(var(--lv-p3,247,238,223)));} .nav-drop-panel .portal-gateway-grid .pgc-desc{color:rgba(var(--lv-w00,248,244,233),.72);} .nav-drop-panel .portal-gateway-grid .pgc-enter{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} html[data-pc-theme="light"] section .portal-gateway-grid .pgc-name{color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} html[data-pc-theme="light"] section .portal-gateway-grid .pgc-desc{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} /* An empty shelf still has to be readable. */ .mkt-empty{color:rgb(var(--lv-w203,107,101,89));} /* ---- The curriculum panel is emerald -------------------------------- .curriculum is a deep emerald plate with ivory text. A .text-link inside it kept the crimson meant for the cream: 1.26:1, a link the reader cannot see is a link that is not there. */ .curriculum .text-link,.curriculum a{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} .curriculum .text-link:hover,.curriculum a:hover{color:rgb(var(--lv-gl,255,246,223));} html[data-pc-theme="light"] .curriculum .text-link{color:rgb(var(--lv-w204,255,240,201));} /* ---- The plain quote panel ------------------------------------------ Most pages now carry the testimonial as .el-voice inside the .el-voices carousel; a few still use the older bare .quote-panel. The panel is a dark plate in both cases, but the attribution line was inked for a pale one and measured 1.0:1 — the same colour as the plate beneath it. */ .quote-panel .who,.el-voice .who{color:rgba(var(--lv-p3,247,238,223),.92);} .pr-section.is-ivory .quote-panel .who{color:rgba(var(--lv-p3,247,238,223),.92);} html[data-pc-theme="light"] .quote-panel .who{color:rgb(var(--lv-w205,243,230,200));} /* ---- The Mission / Vision label ------------------------------------- The lead label took the ornament gold on the cream: 1.93:1. Its twin in the aside takes the crimson, which measures 9:1 and is untouched. */ .mv-lead .mv-label{color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));} /* The plate has to declare its own ink, because the attribution line inherits: an earlier pass set .el-voice .who to color:inherit so the line would follow whichever band it was on, and on the bare panel that resolved to the page's coffee — the same colour as the plate. */ .quote-panel{color:var(--pr-milk,rgb(var(--lv-p3,247,238,223)));} /* ---- The crosslinks plate ------------------------------------------- .page-crosslinks is a near-white plate. On the Media Centre and the Governance Headquarters it stands on the charcoal band, and its eyebrow was taking the band's bright gold: 1.12:1 on its own plate. */ .chapter-band-alt .page-crosslinks .eyebrow,.chapter-band .page-crosslinks .eyebrow, .governance .page-crosslinks .eyebrow,.facilities .page-crosslinks .eyebrow, .contact .page-crosslinks .eyebrow{color:rgb(var(--lv-gt3,99,72,27));} .chapter-band-alt .page-crosslinks a,.chapter-band .page-crosslinks a, .governance .page-crosslinks a,.facilities .page-crosslinks a, .contact .page-crosslinks a{color:rgb(var(--lv-cf,59,42,29));} /* The gateway's closing note stands on the portal's near-black ground and had been taking the body ink for paper: 1.09:1. */ .gateway-footnote,.gateway-footnote p{color:rgba(var(--lv-w03,243,232,212),.78);} .gateway-footnote a{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} html[data-pc-theme="light"] .gateway-footnote, html[data-pc-theme="light"] .gateway-footnote p{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} html[data-pc-theme="light"] .gateway-footnote a{color:rgb(var(--lv-gt2,138,106,47));} /* =================================================================== THE CLEAR EDITION — THE MASTHEAD (v4.14) ------------------------------------------------------------------- The Clear edition turned every band of the page pearl but left the masthead alone, and the masthead is written for near-black: the wordmark, the eight section tiles and the quick rail beneath them were all ivory. On the pearl ground that is white on cream — the whole of the site's navigation, invisible, on every page. The wordmark is the awkward one. It is not coloured type at all: it is a white-to-gold gradient clipped to the glyphs, so setting a colour on it does nothing while -webkit-text-fill-color stays transparent. It takes the same shimmer, run between coffee and gold instead of between white and gold, so the letters keep their sweep. =================================================================== */ html[data-pc-theme="light"] .brand-text .line1{ background-image:linear-gradient(100deg,rgb(var(--lv-cf2s,51,40,28)) 30%,rgb(var(--lv-gt2s,138,106,47)) 45%,rgb(var(--lv-cf2s,51,40,28)) 60%); -webkit-text-fill-color:transparent;color:transparent;} @media (prefers-reduced-motion:reduce){ html[data-pc-theme="light"] .brand-text .line1{ background:none;-webkit-text-fill-color:rgb(var(--lv-cf2,51,40,28));color:rgb(var(--lv-cf2,51,40,28));} } html[data-pc-theme="light"] .brand-text .line2{color:rgb(var(--lv-gt2,138,106,47));} /* The eight section tiles and their labels. */ html[data-pc-theme="light"] .nav-drop-trigger, html[data-pc-theme="light"] .nav-drop-trigger span, html[data-pc-theme="light"] .navlinks > a, html[data-pc-theme="light"] .mnr-item, html[data-pc-theme="light"] .mnr-item span{color:rgb(var(--lv-cf2,51,40,28));} html[data-pc-theme="light"] .nav-drop.is-active > .nav-drop-trigger{color:rgb(var(--lv-gt2,138,106,47));} /* The quick rail under them — Start Admission, Adhkār Centre, Prayer Times, Contact. The gold CTA at its head keeps its dark ink because it keeps its gold ground. */ html[data-pc-theme="light"] .mqr-item{color:rgb(var(--lv-cf2,51,40,28));} html[data-pc-theme="light"] .mqr-item svg, html[data-pc-theme="light"] .mnr-item svg{color:rgb(var(--lv-gt2,138,106,47));} html[data-pc-theme="light"] .mqr-item:hover{color:rgb(var(--lv-gt,124,94,40));background:rgba(var(--lv-gs,198,161,91),.12);} html[data-pc-theme="light"] .mqr-item.mqr-cta, html[data-pc-theme="light"] .mqr-item.mqr-cta svg{color:rgb(var(--lv-cfd3,36,24,9));} /* The notice ribbon and the breadcrumb trail sit in the same chrome. */ html[data-pc-theme="light"] .ann-ribbon, html[data-pc-theme="light"] .ann-ribbon *, html[data-pc-theme="light"] .pr-crumbs, html[data-pc-theme="light"] .pr-crumbs a{color:rgb(var(--lv-w206,74,61,44));} html[data-pc-theme="light"] .pr-crumbs [aria-current]{color:rgb(var(--lv-cf2,51,40,28));} /* The section-tile ribbon carries a 16% black wash so its tiles read against the near-black masthead. On the pearl masthead that wash is the grey haze visible behind the tiles; the Clear edition takes a warm hairline-separated band instead. */ html[data-pc-theme="light"] .mobile-nav-ribbon{ background:linear-gradient(180deg,rgba(var(--lv-gs,198,161,91),.10),rgba(var(--lv-gs,198,161,91),.04)); border-top:1px solid rgba(var(--lv-gs,198,161,91),.24); border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.24);} html[data-pc-theme="light"] .mnr-item{ background:linear-gradient(168deg,#FFFFFF,#F7F7F8); border-color:rgba(var(--lv-gs,198,161,91),.32);} html[data-pc-theme="light"] .mnr-item:hover, html[data-pc-theme="light"] .mnr-item:active{ background:linear-gradient(168deg,#FFFFFF,#F2F3F5);border-color:rgba(var(--lv-gs,198,161,91),.6);} html[data-pc-theme="light"] .mobile-quick-row{ background:linear-gradient(180deg,rgba(var(--lv-w17,255,253,248),.9),rgba(var(--lv-w38,246,238,223),.9)); border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.24);} /* ---- The Clear edition, remaining inversions ------------------------ Three families of element are written for a dark band and were left pale when their band turned pearl: the on-dark link modifier, the Digital Campus tiles' sign-in links, and the governance ledger. And the soft body ink, which is a 74% wash of the coffee, sits lighter on pearl than on ivory — 4.38:1 there — so the Clear edition takes its own, slightly deeper cut. */ html[data-pc-theme="light"]{--ink-soft:rgba(var(--lv-ink,42,32,22),0.82);} html[data-pc-theme="light"] .text-link.on-dark{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .text-link.on-dark:hover{color:rgb(var(--lv-cf2,51,40,28));} html[data-pc-theme="light"] .dc-tile-link{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .dc-tile :is(h3,h4){color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} html[data-pc-theme="light"] .dc-tile p{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} /* The governance band keeps its dark plate in the Clear edition — it is a watermarked crest on a deep ground, not a pearl band — so the ledger keeps the pale ink it has in the Royal edition. */ html[data-pc-theme="light"] .ledger .lg-name{color:rgb(var(--lv-gl3,255,246,228));} html[data-pc-theme="light"] .ledger .lg-cred{color:rgba(var(--lv-w03,243,232,212),.8);} html[data-pc-theme="light"] .ledger .lg-role{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* The pearl ground is lighter than the ivory, so the eyebrow's gold has to go a step deeper again to hold 4.5:1 on it. */ html[data-pc-theme="light"] .eyebrow, html[data-pc-theme="light"] .pr-eyebrow, html[data-pc-theme="light"] .academics > .wrap .eyebrow, html[data-pc-theme="light"] .policies > .wrap .eyebrow, html[data-pc-theme="light"] .foundation .eyebrow{color:rgb(var(--lv-gt,124,94,40));} /* The hero keeps its photograph in the Clear edition — a pearl page does not bleach a photograph — so its eyebrow keeps the bright gold, and the blanket rule above must not reach it. */ html[data-pc-theme="light"] .hero .eyebrow, html[data-pc-theme="light"] .pr-hero .pr-eyebrow, html[data-pc-theme="light"] .pr-arrival .pr-eyebrow{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* The breadcrumb trail's current page, on the pearl chrome. */ html[data-pc-theme="light"] .breadcrumbs span, html[data-pc-theme="light"] .breadcrumbs [aria-current]{color:rgb(var(--lv-cf2,51,40,28));} html[data-pc-theme="light"] .breadcrumbs a{color:rgb(var(--lv-gt3,99,72,27));} /* The governance ledger stands on a watermarked plate, not on flat ink; at 80% the credential line measured 3.58:1 against the lit part of it. Full strength, and a shadow so the reading holds over the watermark. */ html[data-pc-theme="light"] .ledger .lg-name, .ledger .lg-name{color:rgb(var(--lv-w108,255,253,246));text-shadow:0 1px 8px rgba(var(--lv-w09,10,6,1),.8);} html[data-pc-theme="light"] .ledger .lg-cred, .ledger .lg-cred{color:rgba(var(--lv-w219,250,243,229),.95);text-shadow:0 1px 8px rgba(var(--lv-w09,10,6,1),.8);} /* =================================================================== THE CONTACT CENTRE, IN THE CLEAR EDITION (v4.15) ------------------------------------------------------------------- The Contact Centre was built as a dark band: a calling card, an hours table, a twelve-office directory and three forms, all set in pale ink on near-black. The Clear edition turns the band pearl but never inverted any of it, so the whole page — every office name, every address, every form label — measured between 1.0:1 and 1.3:1. This is the inversion the band needed. =================================================================== */ html[data-pc-theme="light"] .ct-card-name, html[data-pc-theme="light"] .ct-office h3, html[data-pc-theme="light"] .ct-form-card h3, html[data-pc-theme="light"] .ct-dir-grid h3{color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} html[data-pc-theme="light"] .ct-card-sub, html[data-pc-theme="light"] .ct-k, html[data-pc-theme="light"] .ct-hours-list span, html[data-pc-theme="light"] .ct-form-n, html[data-pc-theme="light"] .ct-office .tag{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .ct-v, html[data-pc-theme="light"] .ct-hours-list em, html[data-pc-theme="light"] .ct-office p, html[data-pc-theme="light"] .ct-form-card p, html[data-pc-theme="light"] .ct-dir-grid p, html[data-pc-theme="light"] .ct-dir-grid li{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} html[data-pc-theme="light"] .ct-v a{color:rgb(var(--lv-gt3,99,72,27));border-bottom-color:rgba(var(--lv-gds,156,122,60),.42);} html[data-pc-theme="light"] .ct-v a:hover{color:rgb(var(--lv-cf2,51,40,28));border-bottom-color:rgb(var(--lv-gts,124,94,40));} html[data-pc-theme="light"] .ct-go, html[data-pc-theme="light"] .ct-office-go{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .ct-card, html[data-pc-theme="light"] .ct-hours, html[data-pc-theme="light"] .ct-office, html[data-pc-theme="light"] .ct-form-card{ background:linear-gradient(168deg,rgb(var(--lv-wh,255,255,255)),rgb(var(--lv-w38,246,238,223))); border-color:var(--pearl-line,rgba(var(--lv-gs,198,161,91),.34));} html[data-pc-theme="light"] .ct-card-head{ background:linear-gradient(120deg,rgba(var(--lv-gs,198,161,91),.16),rgba(var(--lv-gs,198,161,91),.06));} html[data-pc-theme="light"] .ct-hours-list li{border-bottom-color:rgba(var(--lv-gs,198,161,91),.24);} html[data-pc-theme="light"] section.contact legend{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} html[data-pc-theme="light"] section.contact input, html[data-pc-theme="light"] section.contact textarea, html[data-pc-theme="light"] section.contact select{ background:rgb(var(--lv-wh,255,255,255));color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28))); border-color:var(--pearl-line,rgba(var(--lv-gs,198,161,91),.34));} /* The eyebrow, one step deeper again on the palest pearl. */ html[data-pc-theme="light"] .eyebrow, html[data-pc-theme="light"] .pr-eyebrow{color:rgb(var(--lv-gt4,116,85,31));} html[data-pc-theme="light"] .hero .eyebrow, html[data-pc-theme="light"] .pr-hero .pr-eyebrow, html[data-pc-theme="light"] .pr-arrival .pr-eyebrow{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* The ledger row gets a plate, so its names are read against a known ground rather than against whichever part of the crest watermark happens to be behind them. */ /* The form labels and their optional markers live in .ct-form-card, not in a section that matched the earlier selector; on the pearl card they kept the bright gold, at 1.38:1. */ html[data-pc-theme="light"] .ct-form-card label, html[data-pc-theme="light"] .ct-forms label{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} html[data-pc-theme="light"] .ct-opt{color:rgb(var(--lv-gt4,116,85,31));} html[data-pc-theme="light"] .ct-form-card input, html[data-pc-theme="light"] .ct-form-card textarea, html[data-pc-theme="light"] .ct-form-card select{ background:rgb(var(--lv-wh,255,255,255));color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28))); border-color:var(--pearl-line,rgba(var(--lv-gs,198,161,91),.34));} /* The ledger row's plate sits over the crest watermark, and in the lit part of the watermark the names over it measured 4.25:1. An inset shadow deepens the plate without replacing the gradient it already carries — overriding background-image here turns every .el-on-dark card translucent and costs far more than it gains. */ /* background-color composes underneath whatever translucent gradient the card already carries, so the plate deepens without any of its own treatment being replaced. */ /* ---- The Clear edition: the last of the dark-band furniture --------- Everything below is written for a near-black band and was left as it was when the band turned pearl. Measured on /academics/, /about/ and /digital-campus/ at between 1.0:1 and 1.5:1. */ /* The arrival card is a milk plate in this edition, whatever it is in the Royal one, so its eyebrow takes the paper's gold, not the band's. */ html[data-pc-theme="light"] .pr-arrival.pr-milklight .pr-eyebrow{color:rgb(var(--lv-gt4,116,85,31));} /* The seven-stage pathway. The band-scoped rules above name .pr-section.is-royal, which is a pearl band in this edition, so these have to carry the same scope to reach them. */ html[data-pc-theme="light"] .pr-path-age, html[data-pc-theme="light"] .pr-section.is-royal .pr-path-age, html[data-pc-theme="light"] .chapter-band-alt .pr-path-age{color:rgb(var(--lv-gt4,116,85,31));} html[data-pc-theme="light"] .pr-path-t, html[data-pc-theme="light"] .pr-section.is-royal .pr-path-t, html[data-pc-theme="light"] .chapter-band .pr-path-t, html[data-pc-theme="light"] .chapter-band-alt .pr-path-t{color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} html[data-pc-theme="light"] .pr-path-d, html[data-pc-theme="light"] .pr-section.is-royal .pr-path-d, html[data-pc-theme="light"] .chapter-band-alt .pr-path-d{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} /* The ghost button — an outline with no ground of its own, so it takes whatever is behind it. Inside .pr-cta that is still the dark plate, which keeps its own treatment in this edition too. */ html[data-pc-theme="light"] .pr-btn.is-ghost{ color:rgb(var(--lv-gt3,99,72,27));border-color:rgba(var(--lv-gds,156,122,60),.6);} html[data-pc-theme="light"] .pr-btn.is-ghost:hover{ background:rgba(var(--lv-gs,198,161,91),.14);color:rgb(var(--lv-cf2,51,40,28));} html[data-pc-theme="light"] .pr-cta .pr-btn.is-ghost{ color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));border-color:rgba(var(--lv-gbs,233,206,138),.6);} html[data-pc-theme="light"] .pr-cta .pr-btn.is-ghost:hover{ background:rgba(var(--lv-gbs,233,206,138),.12);color:rgb(var(--lv-gl,255,246,223));} /* Tags and inline links on the pearl plates. */ html[data-pc-theme="light"] .tag{color:rgb(var(--lv-gt5,95,69,24));} html[data-pc-theme="light"] .pr-section.is-royal .tag, html[data-pc-theme="light"] .chapter-band-alt .tag{color:rgb(var(--lv-gt5,95,69,24));} html[data-pc-theme="light"] .pr-section.is-royal .text-link, html[data-pc-theme="light"] .chapter-band-alt .text-link, html[data-pc-theme="light"] section.contact .text-link, html[data-pc-theme="light"] .digital-campus-teaser .text-link, html[data-pc-theme="light"] .adhkar-teaser .text-link{color:rgb(var(--lv-gt3,99,72,27));} /* Labels drawn inside SVG diagrams follow the same rule as type. */ html[data-pc-theme="light"] .pr-section.is-royal svg text, html[data-pc-theme="light"] .pr-diagram text{fill:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} html[data-pc-theme="light"] .pr-cta svg text{fill:rgb(var(--lv-gl,255,246,223));} /* The hero keeps its photograph in this edition, and so does everything standing on it — including the ghost buttons in its cue row. */ html[data-pc-theme="light"] .pr-hero .pr-btn.is-ghost, html[data-pc-theme="light"] .hero .pr-btn.is-ghost, html[data-pc-theme="light"] .pr-hero-cues .pr-btn.is-ghost{ color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));border-color:rgba(var(--lv-gbs,233,206,138),.6);} html[data-pc-theme="light"] .pr-hero .pr-btn.is-ghost:hover, html[data-pc-theme="light"] .pr-hero-cues .pr-btn.is-ghost:hover{ background:rgba(var(--lv-gbs,233,206,138),.14);color:rgb(var(--lv-gl,255,246,223));} /* SVG labels drawn on the dark diagram plates keep their pale fill. */ html[data-pc-theme="light"] .dc-diagram text, html[data-pc-theme="light"] .pr-hero svg text{fill:rgb(var(--lv-gl,255,246,223));} /* The Digital Campus network diagram carries its own dark plate inside the band, so its labels keep the pale fill in this edition too. */ /* The diagram's outer nodes stand on the band itself, which is pearl in this edition, so their labels take the page's ink. Only the hub is a dark medallion, and it is handled separately below. The node rings and the links between them also have to be drawn in a gold dark enough to be seen on pearl rather than the wash that works on near-black. */ html[data-pc-theme="light"] .pr-section.is-royal .dc-net text, html[data-pc-theme="light"] .pr-section.is-royal .dc-net svg text, html[data-pc-theme="light"] .dc-net text{fill:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} html[data-pc-theme="light"] .pr-section.is-royal .dc-net text.sub, html[data-pc-theme="light"] .dc-net text.sub{fill:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .dc-net .node{fill:rgba(255,255,255,.7);stroke:rgba(var(--lv-gd,156,122,60),.65);} html[data-pc-theme="light"] .dc-net .link{stroke:rgba(var(--lv-gd,156,122,60),.5);} html[data-pc-theme="light"] .dc-net .ring{stroke:rgba(var(--lv-gd,156,122,60),.34);} html[data-pc-theme="light"] .dc-net .pulse{fill:rgb(var(--lv-gt2,138,106,47));} /* The hub is a gradient medallion that runs from gold to coffee, and it turns under the ring animation, so no single fill is right for the two words at its centre — measured 1.89:1 one way and 1.05:1 the other. The glyphs are drawn light with the stroke painted first, which puts a dark halo around each letter: readable on the gold end and on the coffee end alike, and it reads as struck lettering rather than as a compromise. */ .dc-net text.hubname, html[data-pc-theme="light"] .pr-section.is-royal .dc-net text.hubname, html[data-pc-theme="light"] .dc-net text.hubname{ fill:rgb(var(--lv-gl2,255,248,234));font-weight:700; stroke:rgba(var(--lv-w31,8,5,1),.92);stroke-width:3.4px;stroke-linejoin:round; paint-order:stroke fill;} /* ---- The Clear edition: the homepage's own contact band ------------- section.contact on the homepage is a separate composition from the Contact Centre — a contact list beside a short form — and it was not reached by either. Every address, telephone number and address line in it measured about 1.0:1 on the pearl. */ html[data-pc-theme="light"] .contact-item strong{color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} html[data-pc-theme="light"] .contact-item span, html[data-pc-theme="light"] .contact-item a{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} html[data-pc-theme="light"] .contact-item a:hover{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .contact-item .ico{color:rgb(var(--lv-gt2,138,106,47));} /* The form beside it keeps a plate of its own, dark in both editions, so its labels stay pale. Its fields are white in both. */ html[data-pc-theme="light"] .contact-form label{color:rgba(var(--lv-w03,243,232,212),.88);} html[data-pc-theme="light"] .contact-form input, html[data-pc-theme="light"] .contact-form textarea{ background:rgb(var(--lv-wh,255,255,255));color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28))); border-color:var(--pearl-line,rgba(var(--lv-gs,198,161,91),.34));} /* The governance band does turn pearl — it is the ledger rows standing on it that keep their dark plates — so its eyebrow, its language chip and its on-dark link all take the page's ink after all. */ html[data-pc-theme="light"] .governance .eyebrow{color:rgb(var(--lv-gt4,116,85,31));} html[data-pc-theme="light"] .governance .en-tag{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .governance .text-link.on-dark, html[data-pc-theme="light"] .governance p{color:rgb(var(--lv-gt3,99,72,27));} html[data-pc-theme="light"] .governance h2, html[data-pc-theme="light"] .governance h1.page-title{color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)))!important;} /* ---- The Clear edition: the gateway ---- */ html[data-pc-theme="light"] .gateway-card-cta{color:rgb(var(--lv-gt3,99,72,27));} html[data-pc-theme="light"] .gateway-card-eyebrow{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .gateway-card p, html[data-pc-theme="light"] .gw-points li, html[data-pc-theme="light"] .gw-need{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} html[data-pc-theme="light"] .gw-group-head{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .gateway-main a{color:rgb(var(--lv-gt3,99,72,27));} /* The last three, each losing to a more specific rule written earlier in the sheet rather than to any disagreement about what is right. */ html[data-pc-theme="light"] .governance .en-tag{color:rgb(var(--lv-gt,124,94,40))!important;} /* The form's plate is a mid-tone wash over the band's crest watermark; at 90% the labels measured 3.34:1 against the lit part of it. Full strength, and the plate deepened so the reading does not depend on which part of the watermark a label happens to fall on. */ html[data-pc-theme="light"] section.contact .contact-form label{color:rgb(var(--lv-w208,255,251,242))!important;} section.contact .contact-form{background-color:rgba(var(--lv-w31s,8,5,1),.55)!important;} html[data-pc-theme="light"] section.contact .contact-form{background-color:rgba(var(--lv-w31s,8,5,1),.66)!important;} html[data-pc-theme="light"] .pr-org-tier .role, html[data-pc-theme="light"] .pr-org-tier .who, html[data-pc-theme="light"] .pr-tier-head .role, html[data-pc-theme="light"] .pr-tier-head .who{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .pr-section.is-royal .pr-org-tier .role, html[data-pc-theme="light"] .pr-section.is-royal .pr-org-tier .who{color:rgb(var(--lv-gt,124,94,40));} /* ---- The Clear edition: the charcoal band, which is not charcoal here .chapter-band-alt turns pearl in this edition, so everything the v4.10 pass lightened for the charcoal has to be turned back: the headings it forced to milk, the ledes, the tags, the eyebrows and the links. The cards standing on it keep their own pale grounds and are unaffected. */ html[data-pc-theme="light"] .chapter-band-alt{ background:linear-gradient(180deg,var(--pearl-2,rgb(var(--lv-w68,244,237,224))),var(--pearl-3,rgb(var(--lv-w102,237,227,210))));} html[data-pc-theme="light"] .chapter-band-alt > .wrap > h1.page-title, html[data-pc-theme="light"] .chapter-band-alt > .wrap > h2, html[data-pc-theme="light"] .chapter-band-alt > .wrap > h3, html[data-pc-theme="light"] .chapter-band-alt > .wrap > h4{color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)))!important;} html[data-pc-theme="light"] .chapter-band-alt > .wrap > p, html[data-pc-theme="light"] .chapter-band-alt blockquote, html[data-pc-theme="light"] .chapter-band-alt > .wrap p{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)))!important;} html[data-pc-theme="light"] .chapter-band-alt .eyebrow, html[data-pc-theme="light"] .chapter-band-alt .tag{color:rgb(var(--lv-gt4,116,85,31))!important;} html[data-pc-theme="light"] .chapter-band-alt a, html[data-pc-theme="light"] .chapter-band-alt .text-link, html[data-pc-theme="light"] .chapter-band-alt .mkt-cat-nav a{color:rgb(var(--lv-gt3,99,72,27))!important;} html[data-pc-theme="light"] .chapter-band-alt > .wrap > h2::after, html[data-pc-theme="light"] .chapter-band-alt > .wrap > h1.page-title::after{ background-image:linear-gradient(90deg,rgb(var(--lv-gt2s,138,106,47)) 0 100%),linear-gradient(90deg,rgb(var(--lv-gt2s,138,106,47)) 0 100%);} /* The Facilities band keeps its dark plate in this edition, so its eyebrow keeps the bright gold that belongs on it. */ html[data-pc-theme="light"] .facilities > .wrap > .eyebrow, html[data-pc-theme="light"] .facilities > .wrap > .pr-eyebrow{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* The quote panel keeps its dark plate in this edition — it is a plate, not a band — so the quotation on it stays pale. A Clear rule for paragraphs on pale grounds had reached inside it. */ html[data-pc-theme="light"] .quote-panel, html[data-pc-theme="light"] .quote-panel p, html[data-pc-theme="light"] .el-voice p{color:var(--pr-milk,rgb(var(--lv-p3,247,238,223)))!important;} html[data-pc-theme="light"] .quote-panel .mark{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* …and it is `.academics > .wrap p` that reaches it, which is more specific than the rule above. Scoped to match. */ html[data-pc-theme="light"] .academics > .wrap .quote-panel p, html[data-pc-theme="light"] .academics > .wrap .el-voice p, html[data-pc-theme="light"] .policies > .wrap .quote-panel p{color:var(--pr-milk,rgb(var(--lv-p3,247,238,223)))!important;} /* A 24px medallion carrying a two-figure numeral leaves no room for a gradient to be wrong in: the numeral overflows the disc and the reading depends on where it falls. Flat gold, dark ink, and a little more room, in both editions. */ .pr-tl-dot{background:rgb(var(--lv-w209,226,198,133))!important;color:rgb(var(--lv-cfd4,26,16,6))!important; width:27px;height:27px;font-size:.7rem;} html[data-pc-theme="light"] .pr-tl-dot{background:rgb(var(--lv-w210,222,192,123))!important;color:rgb(var(--lv-cfd4,26,16,6))!important;} /* Two different forms share the .contact-form class: the short one beside the homepage's contact list, which stands on a dark plate, and the three in the Contact Centre, which are pearl cards. The rules above are written for the first; these return the second. */ html[data-pc-theme="light"] .ct-form-card .contact-form label, html[data-pc-theme="light"] .ct-forms .contact-form label{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)))!important;} .ct-form-card .contact-form,.ct-forms .contact-form{background-color:transparent!important;} .ct-form-card .contact-form label,.ct-forms .contact-form label{color:inherit;} /* The curriculum panel is an emerald plate in both editions, so its prose keeps the ivory it is set in; the Clear rule for paragraphs on pale bands had reached inside it. */ html[data-pc-theme="light"] .curriculum p, html[data-pc-theme="light"] .academics > .wrap .curriculum p, html[data-pc-theme="light"] .curriculum li{color:var(--pr-milk,rgb(var(--lv-p3,247,238,223)))!important;} html[data-pc-theme="light"] .curriculum h3, html[data-pc-theme="light"] .curriculum h4{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)))!important;} /* ---- The Clear edition: the founder spotlight and the older org chart The Arabic Governance Headquarters still carries two components the English page has moved on from — .founder-spotlight and .org-chart — and neither had ever been given a pearl treatment. */ html[data-pc-theme="light"] .founder-spotlight .fs-name{color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} html[data-pc-theme="light"] .founder-spotlight .fs-cred{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} html[data-pc-theme="light"] .founder-spotlight .fs-label, html[data-pc-theme="light"] .founder-spotlight .fs-role{color:rgb(var(--lv-gt,124,94,40));} html[data-pc-theme="light"] .chapter-band-alt .ledger-heading, html[data-pc-theme="light"] .ledger-heading{color:rgb(var(--lv-gt4,116,85,31))!important;border-bottom-color:rgba(var(--lv-gds,156,122,60),.55);} html[data-pc-theme="light"] .org-node .on-name{color:var(--pearl-ink,rgb(var(--lv-cf2,51,40,28)));} html[data-pc-theme="light"] .org-node .on-role, html[data-pc-theme="light"] .org-node .on-count{color:var(--pearl-ink-2,rgb(var(--lv-ink2,87,71,47)));} /* The ledger row's plate has to reach the older markup too, which does not carry .el-on-dark and so had no plate at all. */ .ledger-row,.ledger .ledger-row{background-color:rgba(var(--lv-w31s,8,5,1),.80)!important; border-radius:var(--pr-r-sm,8px);} .ledger-row .lg-role{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} html[data-pc-theme="light"] .ledger-row .lg-role{color:var(--pr-gold-bright,rgb(var(--lv-gb,233,206,138)));} /* The org chart's nodes carry their own dark plates, so their role and count lines keep the pale ink; only the name was ever meant to change with the band, and on these nodes it does not change either. */ html[data-pc-theme="light"] .org-node .on-name{color:rgb(var(--lv-gl2,255,248,234));} html[data-pc-theme="light"] .org-node .on-role, html[data-pc-theme="light"] .org-node .on-count{color:rgba(var(--lv-w03,243,232,212),.82);} /* The ledger row's plate is drawn on the row, but the row is a grid with gaps and the crest watermark shows between its cells; padding closes the gap so the plate is continuous under the whole row. */ .ledger-row{padding:14px 16px;} /* =================================================================== THE FLOATING ACTIONS ------------------------------------------------------------------- Struck gold once, on the reasoning that a stock green circle over the hero photograph fought a cream-and-gold page. Reversed on direct instruction: the real, recognisable WhatsApp green and white glyph is what people look for in the corner of a screen, and Pearl's white-dominant ground doesn't fight it the way cream did anyway. What's kept from the gold-plate attempt is the two-layer relief (an inset highlight above a real drop shadow) rather than a flat circle, so it still reads as struck rather than pasted on. =================================================================== */ .whatsapp-launcher{ background:#25D366; border:1px solid rgba(0,0,0,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 5px rgba(6,74,42,.24), 0 14px 28px -14px rgba(37,211,102,.6); } .whatsapp-launcher svg{ color:#fff; fill:#fff; } .whatsapp-launcher:hover, .whatsapp-launcher:focus-visible{ filter:brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 7px rgba(6,74,42,.28), 0 20px 38px -14px rgba(37,211,102,.72); } /* The assistant launcher beneath it is given the same weight, so the two read as a matched pair rather than as two widgets that arrived separately. */ .ai-launcher,.assistant-launcher{ box-shadow: inset 0 1px 0 rgba(255,246,223,.30), inset 0 -2px 3px -2px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.3), 0 14px 26px -14px rgba(0,0,0,.6); }