/* =================================================================== 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:#C6A15B; --pr-gold-bright:#E9CE8A; --pr-gold-deep:#9C7A3C; --pr-gold-pale:#F3E2BC; --pr-coffee:#2A1C10; --pr-coffee-2:#3B2A1D; --pr-ink:#2A2016; --pr-ivory:#F7EEDF; --pr-cream:#F1E4C8; --pr-milk:#FCFAF6; --pr-line:rgba(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(42,28,16,.06), 0 8px 20px -12px rgba(42,28,16,.22), 0 24px 48px -32px rgba(42,28,16,.30); --pr-shadow: 0 1px 2px rgba(42,28,16,.08), 0 12px 28px -14px rgba(42,28,16,.32), 0 40px 80px -40px rgba(42,28,16,.46); --pr-shadow-lift: 0 2px 4px rgba(42,28,16,.10), 0 18px 40px -16px rgba(42,28,16,.38), 0 56px 100px -48px rgba(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(233,206,138,.16); --pr-glow:0 0 0 1px rgba(198,161,91,.30), 0 0 28px -6px rgba(198,161,91,.42); --pr-glow-strong:0 0 0 1px rgba(233,206,138,.5), 0 0 46px -8px rgba(233,206,138,.6); --pr-ease:cubic-bezier(.16,.8,.24,1); } /* ---------- 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,#fff,var(--pr-milk) 46%,#F8F1E4); 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(233,206,138,.85),rgba(198,161,91,.28) 38%,rgba(198,161,91,.10) 62%,rgba(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(198,161,91,.16) 0deg, rgba(198,161,91,.16) 300deg, rgba(233,206,138,.95) 336deg, #FFF3D6 348deg, rgba(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(233,206,138,.9),rgba(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(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(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(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:'Inter',sans-serif;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:'Cinzel',serif;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:'Cormorant Garamond',serif;font-size:clamp(1.12rem,2.3vw,1.4rem); line-height:1.6;color:#5a4a38;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(198,161,91,.34),0 0 44px -10px rgba(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(198,161,91,.20) 0deg, rgba(198,161,91,.20) 232deg, rgba(198,161,91,.62) 276deg, #E9CE8A 308deg, #FFF6DF 320deg, #E9CE8A 332deg, rgba(198,161,91,.62) 352deg, rgba(198,161,91,.20) 360deg); animation:pr-orbit 5.6s linear infinite;z-index:1; filter:drop-shadow(0 0 5px rgba(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, #FFFFFF 353deg, rgba(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(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,#E9CE8A,rgba(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);} .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(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(233,206,138,.5),inset 0 0 34px -14px rgba(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:#8a7a60;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(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(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(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:'Cormorant Garamond',serif;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:'Inter',sans-serif;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;} .pr-hero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(20,12,4,.34) 0%,rgba(20,12,4,.12) 34%,rgba(24,15,6,.7) 78%,rgba(20,12,4,.92) 100%);} .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:'Cinzel',serif;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:'Cormorant Garamond',serif;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(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:'Inter',sans-serif; 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:#2a1c10;box-shadow:0 10px 26px -12px rgba(198,161,91,.7);} .pr-btn.is-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(198,161,91,.85);} .pr-btn.is-ghost{border:1px solid rgba(233,206,138,.6);color:var(--pr-gold-bright);} .pr-btn.is-ghost:hover{background:rgba(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);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(198,161,91,.10),transparent 60%),var(--pr-ivory);} .pr-section.is-royal{position:relative;color:#f4ead4;overflow:hidden; background:radial-gradient(1000px 600px at 15% 0%,#3a2814,#241708 62%,#1c1208);} .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(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(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);padding:30px 20px;text-align:center;} .pr-section.is-royal .pr-stat{background:rgba(255,255,255,.03);} .pr-stat-n{font-family:'Cinzel',serif;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:'Inter',sans-serif;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:#e8dcc2;} .pr-stat-s{font-size:.76rem;color:#8a7a60;margin-top:5px;} .pr-section.is-royal .pr-stat-s{color:rgba(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,#fff,var(--pr-milk) 52%,#F8F1E4); 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(198,161,91,.16),rgba(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:'Cinzel',serif;font-size:1.16rem;color:var(--pr-coffee);margin:0 0 8px;} .pr-card p{color:#5a4a38;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(198,161,91,.14);} .pr-path-age{font-family:'Cinzel',serif;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:#7a6a52;font-size:.8rem;margin-top:4px;line-height:1.45;} /* ---------- Charts (animated SVG) -------------------------------- */ .pr-chart-card{background:linear-gradient(168deg,#fff,var(--pr-milk) 52%,#F8F1E4); 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:'Cinzel',serif;font-size:1.1rem;color:var(--pr-coffee);margin:0 0 4px;} .pr-chart-card .cap{font-size:.82rem;color:#8a7a60;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:'Cinzel',serif;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:#7a6a52;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:#5a4a38;} .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(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:'Cinzel',serif;font-weight:700;font-size:1.6rem;fill:var(--pr-coffee);} .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:#8a7a60;font-family:'Inter',sans-serif;} /* ---------- 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:#8a7a60;font-size:.74rem;} .pr-age-track{position:relative;height:36px;background:rgba(198,161,91,.10);border-radius:var(--pr-r-pill); overflow:hidden;box-shadow:inset 0 1px 3px rgba(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(156,122,60,.55),inset 0 1px 0 rgba(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:#2a1c10;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:#8a7a60; 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);} .pr-compare{border-collapse:collapse;width:100%;min-width:720px;background:var(--pr-milk);font-size:.9rem;} .pr-compare th,.pr-compare td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(198,161,91,.16);vertical-align:top;} .pr-compare thead th{background:linear-gradient(120deg,#3b2a1d,#241708);color:var(--pr-gold-bright); font-family:'Cinzel',serif;font-weight:600;font-size:.86rem;position:sticky;top:0;} .pr-compare tbody th{font-weight:600;color:var(--pr-coffee-2);background:rgba(198,161,91,.06);white-space:nowrap;} .pr-compare tbody tr:hover td{background:rgba(198,161,91,.05);} .pr-compare td b{color:var(--pr-gold-deep);} /* ---------- 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);} .pr-feature::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(20,12,4,.05),rgba(20,12,4,.55) 55%,rgba(18,11,4,.9));} .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:'Cinzel',serif;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,#3b2a1d,#241708);color:#f4ead4;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:'Cinzel',serif;font-size:1.3rem;margin:8px 0 12px;color:#fff;} .pr-creds{font-size:.78rem;line-height:1.6;color:rgba(244,234,212,.72);border-top:1px solid rgba(233,206,138,.24);padding-top:12px;} .pr-founder-body p{color:#5a4a38;font-size:1.04rem;line-height:1.8;margin:0 0 16px;} .pr-founder-body p:first-child::first-letter{float:left;font-family:'Cinzel',serif;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);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:'Cinzel',serif;font-size:3rem;line-height:0;color:var(--pr-gold);opacity:.5;} .pr-quote p{font-family:'Cormorant Garamond',serif;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:'Inter',sans-serif;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:#4a3f30;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:'Cinzel',serif;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(233,206,138,.22),rgba(198,161,91,.07) 58%,transparent 78%); border:1px solid rgba(233,206,138,.32); box-shadow:inset 0 1px 0 rgba(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:'Cinzel',serif;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,#fff,var(--pr-milk));box-shadow:var(--pr-shadow-soft),var(--pr-bevel);} .pr-impact-item .pr-ico{margin-bottom:12px;} .pr-impact-item h4{font-family:'Cinzel',serif;font-size:1rem;color:var(--pr-coffee);margin:0 0 6px;} .pr-impact-item p{font-size:.9rem;color:#6a5a45;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(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:'Cinzel',serif;font-size:.72rem;font-weight:700;color:#2a1c10; background:linear-gradient(140deg,var(--pr-gold-bright),var(--pr-gold-deep)); box-shadow:0 0 0 5px var(--pr-ivory);z-index:1;} .pr-section.is-royal .pr-tl-dot{box-shadow:0 0 0 5px #241708;} .pr-tl-item h4{font-family:'Cinzel',serif;font-size:1.02rem;color:var(--pr-coffee);margin:0 0 3px;} .pr-section.is-royal .pr-tl-item h4{color:#fff;} .pr-tl-item p{color:#6a5a45;font-size:.92rem;line-height:1.55;margin:0;} .pr-section.is-royal .pr-tl-item p{color:rgba(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,#fff,var(--pr-milk));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:#c08a2e;} .pr-outcome.is-no{border-top-color:#9a4b4b;} .pr-outcome h4{font-family:'Cinzel',serif;font-size:1.05rem;color:var(--pr-coffee);margin:0 0 6px;} .pr-outcome p{font-size:.9rem;color:#6a5a45;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);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:#8a7a60;} /* ---------- 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:#f4ead4;box-shadow:var(--pr-shadow),var(--pr-bevel-dark); background: radial-gradient(circle at 1px 1px,rgba(233,206,138,.14) 1px,transparent 0) 0 0/24px 24px, radial-gradient(900px 400px at 50% -30%,#4a3418,#2a1c10 70%);} .pr-cta h2{font-family:'Cinzel',serif;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(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(233,206,138,.9),rgba(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,#E9CE8A,rgba(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:#F7EEDF` (prestige.css:18) is byte-identical to brand.css `--ivory`/`- --- */ :root{ --pr-ground:#F2E7D5; /* plain band — the settled tone */ --pr-band:#FBF6EC; /* lifted band — near-white parchment */ --pr-band-2:#EDE0CA; /* 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(233,206,138,.20), transparent 62%), radial-gradient(900px 420px at 6% 108%, rgba(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(198,161,91,.30) 18%,rgba(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 h4,.pr-impact-item h4,.pr-tl-item 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:#5A4A38;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:#8A8880;margin-top:16px;} .pr-section.is-royal .pr-body{color:rgba(244,234,212,.82);} /* promotes the inline

at about.html:88 */ .pr-h3{font-family:'Cinzel',serif;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(198,161,91,.20); background:linear-gradient(168deg,#FFFDF9 0%,var(--pr-milk) 52%,#F7F0E2 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(255,255,255,.9), inset 0 0 0 1px rgba(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(34,23,9,.30) 78%,rgba(34,23,9,.62)); } .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(198,161,91,.16),rgba(198,161,91,.07)); border:1px solid rgba(198,161,91,.32); box-shadow:inset 0 1px 0 rgba(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(255,255,255,.92),rgba(240,231,214,.72)); border:1px solid rgba(198,161,91,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px -18px rgba(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(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,#FFFDF9,#F6EFE1); border:1px solid rgba(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,#A8564A,transparent);} .flow-arrow{opacity:.5;} .adm-enquiry-cta{ border-radius:var(--pr-r-lg);border-top:0; background:linear-gradient(165deg,#3E2C1E 0%,#2C1E12 48%,#211508 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(255,255,255,.5);border:1px solid rgba(198,161,91,.16); transition:background .35s ease,box-shadow .35s ease; } .faq-item.is-open{background:#FFFDF9;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(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,#FFF3D6,var(--pr-gold-bright) 22%,var(--pr-gold) 62%,rgba(198,161,91,0)); box-shadow:0 0 18px -4px rgba(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:'Cinzel',serif;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,#C08A2E,transparent);} .pr-outcome.is-no::before{background:linear-gradient(90deg,transparent,#9A4B4B,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(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(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(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;} /* 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: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(12,7,2,.50) 100%), linear-gradient(180deg,transparent 74%, rgba(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;} @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:#f4ead4;overflow:hidden;isolation:isolate; background: radial-gradient(120% 92% at 50% -28%, rgba(233,206,138,.16), transparent 58%), radial-gradient(70% 55% at 6% 104%, rgba(124,31,46,.12), transparent 62%), linear-gradient(168deg,#3E2C1C 0%, #2A1C10 46%, #1B1107 100%); box-shadow:inset 0 -1px 0 rgba(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(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(233,206,138,.22) 14%,rgba(255,248,228,.70) 50%,rgba(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:#F0DCAE;} .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(255,255,255,.04);border-color:rgba(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(78,56,38,.60) 0%,rgba(45,31,19,.70) 55%,rgba(34,23,9,.78) 100%); border-color:rgba(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(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,#FFFDF9 0%,#FAF3E7 58%,#F4EBDA 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,#FFFFFF 0%,#FDF8EF 58%,#F8F1E2 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(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,#FFF3D2 0%,var(--pr-gold-bright) 32%,var(--pr-gold) 70%,#9A7638 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(233,206,138,.34)); } .pr-stat-l{ font-family:'Cinzel',serif;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:#8A7A60;margin-top:7px;max-width:24ch;margin-inline:auto;} .pr-section.is-royal .pr-stats{ background:rgba(198,161,91,.22);border-color:rgba(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(70,50,32,.55),rgba(30,19,8,.72));} .pr-section.is-royal .pr-stat:hover{background:linear-gradient(168deg,rgba(90,66,42,.62),rgba(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(198,161,91,.12), 0 0 20px -2px rgba(233,206,138,.50), inset 0 1px 0 rgba(255,247,225,.6); } .pr-tl-dot{box-shadow:0 0 0 5px var(--pr-ivory), 0 0 18px -6px rgba(233,206,138,.45);} .pr-section.is-royal .pr-tl-dot{box-shadow:0 0 0 5px #241708, 0 0 18px -6px rgba(233,206,138,.45);} .pr-bar-fill{box-shadow:0 -2px 22px -6px rgba(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(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:'Cinzel','Amiri',serif;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,#E4C88A 0%,var(--pr-gold) 58%,#A9833F 100%); color:#241809; box-shadow:0 16px 30px -14px rgba(140,100,40,.62), inset 0 1px 0 rgba(255,247,225,.62), 0 0 18px -6px rgba(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(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(140,100,40,.70), inset 0 1px 0 rgba(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(233,206,138,.5);color:var(--pr-gold-bright); background:rgba(233,206,138,.05); box-shadow:inset 0 1px 0 rgba(255,247,225,.16); } .pr-btn.is-ghost:hover{ background:rgba(233,206,138,.14);border-color:var(--pr-gold-bright); transform:translateY(-3px);box-shadow:var(--pr-glow),inset 0 1px 0 rgba(255,247,225,.28); } /* .is-ink gets an actual surface instead of floating on the band */ .pr-btn.is-ink{ border:1px solid rgba(198,161,91,.34);color:var(--pr-coffee-2); background:linear-gradient(168deg,#FFFDF9,var(--pr-milk) 52%,#F8F1E4); box-shadow:var(--pr-shadow-soft),var(--pr-bevel); } .pr-btn.is-ink:hover{ transform:translateY(-3px);border-color:rgba(198,161,91,.6); background:#FFFDF9;box-shadow:var(--pr-shadow),inset 0 1px 0 #fff; } @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(233,206,138,.9),rgba(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 */ .pr-cta h2,.pr-cta p,.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;} .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(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,#FFFDF9,var(--pr-milk) 55%,#F7F0E2); border:1px solid rgba(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:'Cinzel',serif;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,#3b2a1d,#241708);border-color:rgba(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,#FFFDF9,var(--pr-milk)); border:1px solid rgba(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:'Cinzel',serif;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:#8a7a60;line-height:1.5;} .pr-person.is-vacant{border-left-color:rgba(198,161,91,.3);opacity:.82;} .pr-person.is-vacant .nm{color:#8a7a60;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(255,255,255,.9),rgba(240,231,214,.7)); border:1px solid rgba(198,161,91,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px -12px rgba(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(255,255,255,.05);border-color:rgba(233,206,138,.28);color:#f0e6d2;} .pr-chip.is-reserved{border-style:dashed;color:#8a7a60;} /* ---------- 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,#3b2a1d,#241708);color:#f4ead4;} .pr-plaque img{width:118px;height:118px;border-radius:50%;object-fit:cover;flex-shrink:0; border:2px solid rgba(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:'Cinzel',serif;font-size:1.5rem;color:#fff;margin:6px 0;} .pr-plaque .cr{display:block;font-size:.8rem;color:rgba(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:#F6EEDC; background: radial-gradient(1100px 520px at 50% -18%, #5A4020 0%, #34220F 44%, #241708 76%, #1B1006 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(233,206,138,.20), transparent 66%), linear-gradient(180deg, rgba(20,12,4,.30), rgba(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(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(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(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(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:'Cinzel',serif;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:'Cormorant Garamond',serif; font-size:clamp(1.1rem,2.3vw,1.42rem);line-height:1.62;color:rgba(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(255,252,244,.10) 0deg, rgba(255,252,244,.10) 268deg, rgba(255,250,238,.55) 306deg, #FFFFFF 330deg, rgba(233,240,255,.85) 342deg, rgba(255,252,244,.45) 356deg, rgba(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(255,255,255,.7),rgba(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(198,161,91,.55); box-shadow:0 10px 24px -12px rgba(42,28,16,.7),0 0 0 4px rgba(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(42,28,16,.8),0 0 0 6px rgba(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:'Cinzel',serif;font-size:1.4rem;color:var(--pr-gold-deep); background:radial-gradient(circle at 34% 28%,rgba(233,206,138,.30),rgba(198,161,91,.10) 62%,transparent); border:1px solid rgba(198,161,91,.4);box-shadow:inset 0 1px 0 rgba(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,#FFFDF9,var(--pr-milk) 55%,#F7F0E2); border:1px solid rgba(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(198,161,91,.18),rgba(233,206,138,.06)); border:1px solid rgba(198,161,91,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);} .pr-committee .ic svg{width:27px;height:27px;} .pr-committee h4{font-family:'Cinzel',serif;font-size:.99rem;color:var(--pr-coffee);margin:0 0 6px;line-height:1.3;} .pr-committee p{font-size:.82rem;color:#7a6a52;line-height:1.5;margin:0;} .pr-committee.is-reserved{border-style:dashed;background:rgba(255,255,255,.5);} .pr-committee.is-reserved h4{color:#8a7a60;} .pr-section.is-royal .pr-committee{background:rgba(255,255,255,.05);border-color:rgba(233,206,138,.26);} .pr-section.is-royal .pr-committee h4{color:#fff;} .pr-section.is-royal .pr-committee p{color:rgba(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;} .pr-mosaic figcaption{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:14px 16px; font-size:.8rem;color:#fff;letter-spacing:.02em; background:linear-gradient(180deg,transparent,rgba(20,12,4,.82));} @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(198,161,91,.20),rgba(233,206,138,.05)); border:1px solid rgba(198,161,91,.36); box-shadow:var(--pr-shadow-soft),inset 0 1px 0 rgba(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(233,206,138,.18),rgba(233,206,138,.04)); border-color:rgba(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,#FFFDF9,var(--pr-milk) 54%,#F7F0E2); border:1px solid rgba(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(198,161,91,0));} .school-block:hover{transform:translateY(-4px);box-shadow:var(--pr-shadow),var(--pr-glow);} .school-block h3{font-family:'Cinzel',serif;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(198,161,91,.16),rgba(198,161,91,.06)); border:1px solid rgba(198,161,91,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pr-gold-deep);} /* ---- .stat-band / .stat-tile: engraved plates ---- */ .stat-band{ border-radius:var(--pr-r-lg);overflow:hidden;gap:1px; border:1px solid rgba(198,161,91,.3);background:rgba(198,161,91,.3); box-shadow:var(--pr-shadow-soft),var(--pr-bevel);} .stat-tile{background:var(--pr-milk);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(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:'Cinzel',serif;font-weight:700;} .stat-tile .label{font-weight:600;letter-spacing:.03em;} .governance .stat-tile,.is-royal .stat-tile{background:rgba(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(255,255,255,.9),rgba(240,231,214,.72)); border:1px solid rgba(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(198,161,91,.28);background:rgba(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:#fff; box-shadow:0 8px 18px -10px rgba(42,28,16,.45),0 0 14px -6px rgba(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(255,255,255,.86),rgba(243,234,218,.7)); border:1px dashed rgba(198,161,91,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.7);} .placeholder-block .tag{background:transparent;border-color:rgba(198,161,91,.4);} /* ---- .ledger: a register, ruled like one ---- */ .ledger{border-radius:var(--pr-r-lg);overflow:hidden; border:1px solid rgba(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(198,161,91,.09);transform:translateX(3px);} .ledger-heading{font-family:'Cinzel',serif;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(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,#FFFDF9,var(--pr-milk)); border:1px solid rgba(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,#FFFDF9,var(--pr-milk)); border:1px solid rgba(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(198,161,91,.4);background:#FFFDF9; font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;letter-spacing:.06em; box-shadow:inset 0 2px 5px rgba(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(42,28,16,.05),0 0 0 4px rgba(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:'Cinzel',serif;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase; background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright));color:#2a1c10; box-shadow:0 10px 24px -12px rgba(198,161,91,.8),inset 0 1px 0 rgba(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(198,161,91,.9),inset 0 1px 0 rgba(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(255,255,255,.6);border:1px solid rgba(198,161,91,.18); transition:background .35s,box-shadow .35s;} .faq-item:hover{background:#FFFDF9;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(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:#FFF3D6;opacity:0; filter:drop-shadow(0 0 6px rgba(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(233,206,138,.5);stroke-width:1.2;} .dc-net .hub{fill:url(#dc-hub);stroke:rgba(233,206,138,.75);stroke-width:1.6; filter:drop-shadow(0 0 22px rgba(233,206,138,.4));} .dc-net .ring{fill:none;stroke:rgba(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:'Inter',sans-serif;fill:#EFE3CB;font-size:13px;text-anchor:middle;} .dc-net text.sub{fill:rgba(233,206,138,.72);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;} .dc-net text.hubname{font-family:'Cinzel',serif;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,#4A3520,#241708 55%,#160D04); box-shadow:var(--pr-shadow-lift),inset 0 1px 0 rgba(233,206,138,.3),0 0 0 1px rgba(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:#160D04;z-index:3;} .dc-screen{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden; background:linear-gradient(180deg,#FFFDF9,#F3EADA);display:flex;flex-direction:column;} .dc-screen-top{padding:30px 16px 12px;background:linear-gradient(160deg,#3B2A1D,#241708);color:#F7EEDF;} .dc-screen-top .t{font-family:'Cinzel',serif;font-size:.82rem;} .dc-screen-top .s{font-size:.6rem;color:rgba(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:#fff;border:1px solid rgba(198,161,91,.24);border-radius:10px;padding:9px 11px; box-shadow:0 4px 10px -8px rgba(42,28,16,.5);} .dc-row .k{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:#8a7a60;} .dc-row .v{font-family:'Cinzel',serif;font-size:.82rem;color:var(--pr-coffee);margin-top:2px;} .dc-row .bar{height:5px;border-radius:99px;background:rgba(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(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,#FFFDF9,var(--pr-milk) 55%,#F7F0E2); border:1px solid rgba(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(198,161,91,.18),rgba(233,206,138,.05)); border:1px solid rgba(198,161,91,.34);color:var(--pr-gold-deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.7);} .dc-sys-ico svg{width:24px;height:24px;} .dc-sys h3{font-family:'Cinzel',serif;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:#5a4a38;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(198,161,91,.16),rgba(198,161,91,.06)); border:1px solid rgba(198,161,91,.32);color:var(--pr-gold-deep);} @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(198,161,91,0) 0deg, rgba(198,161,91,0) 286deg, rgba(233,206,138,.85) 322deg, #FFF6DF 338deg, rgba(233,206,138,.85) 352deg, rgba(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(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(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(233,206,138,.8),rgba(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(20,12,4,.74);} .pc-drawer{ width:min(470px,100vw); background: radial-gradient(600px 300px at 100% 0%, rgba(233,206,138,.10), transparent 60%), linear-gradient(168deg,#FFFDF9 0%,#F8F1E4 58%,#F1E7D5 100%); box-shadow:-30px 0 90px -30px rgba(20,12,4,.7),-1px 0 0 0 rgba(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%,#FFF6DF 50%,var(--pr-gold-bright) 82%,transparent); opacity:.85; } .pc-head{ background:linear-gradient(160deg,#3B2A1D,#241708);color:#F7EEDF; padding:26px 24px 22px;position:relative;overflow:hidden; box-shadow:0 10px 30px -22px rgba(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(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:'Cinzel',serif;color:#fff;letter-spacing:.02em;position:relative;z-index:1;} .pc-sub{color:rgba(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(255,255,255,.07);border:1px solid rgba(233,206,138,.3);color:#F7EEDF; transition:transform .35s var(--pr-ease),background .3s,box-shadow .3s;position:relative;z-index:2;} .pc-close:hover{transform:rotate(90deg);background:rgba(233,206,138,.2); box-shadow:0 0 18px -4px rgba(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:#7a6a52;background:transparent; transition:transform .3s var(--pr-ease),background .3s,box-shadow .3s,color .3s;} .pc-tab:hover{color:var(--pr-coffee);background:rgba(198,161,91,.12);transform:translateY(-1px);} .pc-tab.is-active{ color:#2a1c10;border-color:rgba(198,161,91,.45); background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright)); box-shadow:0 8px 18px -10px rgba(198,161,91,.9),inset 0 1px 0 rgba(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,#FFFDF9,var(--pr-milk)); border:1px solid rgba(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:'Cinzel',serif;color:var(--pr-coffee);} /* switches: a struck toggle rather than a grey pill */ .pc-switch{ border-radius:999px;border:1px solid rgba(198,161,91,.4); background:linear-gradient(180deg,rgba(198,161,91,.14),rgba(198,161,91,.06)); box-shadow:inset 0 2px 4px rgba(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(198,161,91,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px -4px rgba(198,161,91,.9);} .pc-switch-knob{ background:linear-gradient(160deg,#fff,#F0E6D4); box-shadow:0 2px 6px rgba(42,28,16,.4),inset 0 1px 0 #fff; transition:transform .35s var(--pr-ease);} /* segmented controls */ .pc-segmented-wrap{border-radius:var(--pr-r-pill);padding:4px; background:rgba(198,161,91,.10);border:1px solid rgba(198,161,91,.26); box-shadow:inset 0 2px 4px rgba(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:#2a1c10; box-shadow:0 6px 14px -8px rgba(198,161,91,.9),inset 0 1px 0 rgba(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(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:#2a1c10;border:0;} .pc-adhkar-progress{border-radius:999px;overflow:hidden;background:rgba(198,161,91,.16); box-shadow:inset 0 1px 3px rgba(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(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(198,161,91,.14);} .pc-hcal-cell.is-today{ background:linear-gradient(140deg,var(--pr-gold),var(--pr-gold-bright));color:#2a1c10; box-shadow:0 4px 12px -6px rgba(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(42,28,16,.5),0 0 18px -6px rgba(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(198,161,91,0) 0deg, rgba(198,161,91,0) 288deg, rgba(233,206,138,.9) 324deg, #FFF6DF 340deg, rgba(233,206,138,.9) 353deg, rgba(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(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. =================================================================== */ .pr-h2,.pr-hero-title,.pr-stat-n,.pr-letter,.idc-inst,.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%, #FFF6DF 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(233,206,138,.8),rgba(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(233,206,138,.13), transparent 62%), radial-gradient(900px 500px at 8% 108%, rgba(198,161,91,.09), transparent 60%), linear-gradient(168deg,#2C1E12 0%,#241708 46%,#1A1006 100%); color:#F3E8D4;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(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,#1E1408 0%,#180F06 100%); border-bottom:1px solid rgba(233,206,138,.24); box-shadow:0 1px 0 0 rgba(233,206,138,.08),0 14px 30px -26px rgba(0,0,0,.9);} .portal-brand{font-family:'Cinzel',serif;color:#FFF3D8;letter-spacing:.03em;} /* the gateway cards — the thing a visitor actually chooses from */ .gateway-title{font-family:'Cinzel',serif;color:#fff; font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.12;} .gateway-sub{color:rgba(243,232,212,.8);} /* 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(233,206,138,.13), transparent 62%), linear-gradient(168deg,#332312 0%,#2A1B0D 52%,#20140A 100%); border:1px solid rgba(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(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(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(233,206,138,.45),inset 0 1px 0 rgba(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(233,206,138,.22),rgba(198,161,91,.06)); border:1px solid rgba(233,206,138,.34);color:var(--pr-gold-bright); box-shadow:inset 0 1px 0 rgba(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(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(233,206,138,.8);} .gateway-card h2,.gateway-card h3{font-family:'Cinzel',serif;color:#fff; font-size:1.12rem;margin:7px 0 8px;} .gateway-card p{color:rgba(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,#FFFDF9,#F6EFE1); border:1px solid rgba(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(255,255,255,.9);} .portal-card h1{font-family:'Cinzel',serif;color:var(--pr-coffee);letter-spacing:.01em;} .portal-field label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#8a7a60;} .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(198,161,91,.36);background:#fff; box-shadow:inset 0 2px 5px rgba(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(42,28,16,.05),0 0 0 4px rgba(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:'Cinzel',serif;font-size:.84rem;letter-spacing:.13em;text-transform:uppercase; background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright));color:#2a1c10; box-shadow:0 12px 26px -14px rgba(198,161,91,.9),inset 0 1px 0 rgba(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(198,161,91,1),inset 0 1px 0 rgba(255,255,255,.7);} /* the panel beside the form */ .portal-aside-eyebrow{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,206,138,.85);} .portal-aside-title{font-family:'Cinzel',serif;color:#fff;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.15;} .portal-aside-copy{color:rgba(243,232,212,.78);line-height:1.7;} .portal-aside-points li{color:rgba(243,232,212,.8);} .portal-aside-points li::marker{color:var(--pr-gold-bright);} .portal-back-link{color:rgba(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:'Cormorant Garamond',serif;font-size:clamp(1.06rem,2.2vw,1.28rem); line-height:1.7;color:#5a4a38;} /* category rail */ .adk-cat-nav{gap:9px;} .adk-cat-btn{ border-radius:var(--pr-r-pill);padding:10px 18px; border:1px solid rgba(198,161,91,.3); background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(240,231,214,.72)); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 14px -12px rgba(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(42,28,16,.55),0 0 16px -6px rgba(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:#2a1c10; border-color:rgba(198,161,91,.6); box-shadow:0 10px 22px -12px rgba(198,161,91,.95),inset 0 1px 0 rgba(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(198,161,91,.36);background:#FFFDF9; box-shadow:inset 0 2px 5px rgba(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(42,28,16,.05),0 0 0 4px rgba(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,#FFFDF9,var(--pr-milk) 56%,#F7F0E2); border:1px solid rgba(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(198,161,91,0) 0deg,rgba(198,161,91,0) 290deg, rgba(233,206,138,.85) 326deg,#FFF6DF 341deg, rgba(233,206,138,.85) 354deg,rgba(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(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:#2a1c10;border-radius:var(--pr-r-pill);font-family:'Cinzel',serif;font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 10px -6px rgba(156,122,60,.9);} .adk-repeat{border-radius:var(--pr-r-pill); background:linear-gradient(168deg,rgba(198,161,91,.18),rgba(198,161,91,.07)); border:1px solid rgba(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,#FFFDF9,var(--pr-milk) 55%,#F7F0E2); border:1px solid rgba(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:'Cinzel',serif;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,#fff,var(--pr-milk)); border:1px solid rgba(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,#3B2A1D,#241708);color:#F7EEDF; border-color:rgba(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(20,12,4,.78);} .adk-ctr-dial-wrap{filter:drop-shadow(0 18px 40px rgba(42,28,16,.35));} .adk-ctr-dial{ border-radius:50%; background:radial-gradient(circle at 34% 28%,#FFFDF9,#F1E4C8 62%,#E2D2B2); border:1px solid rgba(198,161,91,.5); box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -8px 20px rgba(156,122,60,.18), 0 20px 44px -20px rgba(42,28,16,.6),0 0 34px -12px rgba(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(156,122,60,.35),0 10px 24px -16px rgba(42,28,16,.6);} .adk-ctr-dial-inner{font-family:'Cinzel',serif; 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(198,161,91,.34); background:linear-gradient(168deg,#FFFDF9,#F1E7D7); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 14px -10px rgba(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(42,28,16,.55),0 0 16px -6px rgba(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(233,206,138,.8),rgba(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(233,206,138,.16);} .gw-points li{ position:relative;padding:9px 0 9px 20px;font-size:.85rem;line-height:1.5; color:rgba(243,232,212,.7);border-bottom:1px solid rgba(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(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(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:'Cinzel',serif;font-size:.74rem;letter-spacing:.24em; text-transform:uppercase;color:rgba(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(233,206,138,.42),transparent);} [dir="rtl"] .gw-group-head::after{ background:linear-gradient(270deg,rgba(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. */ .gateway-hero-rule{ width:min(260px,50%);height:1px;margin:26px auto 0; background:linear-gradient(90deg,transparent,var(--pr-gold-bright),transparent);} @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(233,206,138,.13), transparent 62%), radial-gradient(900px 500px at 8% 108%, rgba(198,161,91,.09), transparent 60%), linear-gradient(168deg,#2C1E12 0%,#241708 46%,#1A1006 100%); color:#F3E8D4; } /* 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:#F3E8D4;} .gateway-card h2,.gateway-card h3{color:#FFFDF7;} .gateway-card > p{color:rgba(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. */ .gateway-typewriter{ animation:gateway-typewriter-type 1.7s steps(29,end) .25s forwards, pr-caret-blink .9s steps(1) infinite 1.95s;} @keyframes pr-caret-blink{50%{border-inline-end-color:transparent;}} @media (prefers-reduced-motion:reduce){ .gateway-typewriter{width:100%;animation:none;border-inline-end:none;} } /* 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. */ .gateway-crest{display:block;margin-inline:auto;} /* ------------------------------------------------------------------- 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:'Cinzel','Amiri',serif; 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,#9C7A3C); 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,#E9CE8A); 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, .gateway-sub.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:#8a6b32;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,#FFFDF9 0%,#F8F1E4 62%,#F2E8D6 100%); border:1px solid rgba(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(198,161,91,.22);} .plib-h{font-family:'Cinzel','Amiri',serif;font-size:1.24rem;color:var(--pr-coffee,#3B2A1D);margin:6px 0 0;} .plib-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:18px 28px; border-bottom:1px solid rgba(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:#fff;border:1px solid rgba(198,161,91,.36); box-shadow:inset 0 2px 5px rgba(42,28,16,.06); color:var(--pr-gold-deep,#9C7A3C);transition:border-color .3s,box-shadow .3s;} .plib-search:focus-within{border-color:var(--pr-gold); box-shadow:inset 0 2px 5px rgba(42,28,16,.05),0 0 0 4px rgba(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:#3B2A1D;} .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,#54432c); background:linear-gradient(168deg,#fff,#F4EBDA); border:1px solid rgba(198,161,91,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 14px -12px rgba(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(198,161,91,.55); box-shadow:0 10px 20px -12px rgba(42,28,16,.55),0 0 16px -6px rgba(198,161,91,.8);} .plib-chip.is-on{ color:#2a1c10;border-color:transparent; background:linear-gradient(120deg,var(--pr-gold),var(--pr-gold-bright)); box-shadow:0 10px 22px -14px rgba(198,161,91,.95),inset 0 1px 0 rgba(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(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(198,161,91,.08);padding-inline-start:34px;} .plib-row[hidden]{display:none;} .plib-code{font-family:'Cinzel','Amiri',serif;font-size:.76rem;letter-spacing:.08em; color:var(--pr-gold-deep,#9C7A3C);font-variant-numeric:tabular-nums;} .plib-title{font-size:.94rem;color:#33281c;} .plib-cat{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#8a7a60;white-space:nowrap;} .plib-go{color:var(--pr-gold-deep,#9C7A3C);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:#7a6c56;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:#cbbfa6;} } /* ------------------------------------------------------------------- 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%, #FFF6DF 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,#241708 0%,#1C1207 100%); border-bottom:1px solid rgba(198,161,91,.2); box-shadow:inset 0 -1px 0 rgba(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(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(233,206,138,.5);} .breadcrumbs [aria-current="page"]{ color:var(--pr-gold-bright);font-weight:600;letter-spacing:.01em;} .bc-sep{color:rgba(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(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:38px;height:38px;} 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,#9C7A3C); background:linear-gradient(168deg,#FFFDF9,#F2E8D6); border:1px solid rgba(198,161,91,.45); box-shadow:0 10px 26px -14px rgba(42,28,16,.65),inset 0 1px 0 rgba(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(42,28,16,.72),0 0 22px -6px rgba(198,161,91,.85), inset 0 1px 0 rgba(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,#FFFDF9,#F4EBDA); border:1px solid rgba(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(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(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,#2A1B0D,#1C1207); border-color:rgba(233,206,138,.28);} .gi-frame.is-plate::after{border-color:rgba(233,206,138,.14); box-shadow:inset 0 0 0 1px rgba(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:'Cinzel','Amiri',serif;font-size:.6rem;letter-spacing:.2em; text-transform:uppercase;color:rgba(233,206,138,.72); background:linear-gradient(90deg,rgba(20,12,4,.86),rgba(20,12,4,0)); border-start-end-radius:10px;pointer-events:none;} [dir="rtl"] .gi-plate-note{ background:linear-gradient(270deg,rgba(20,12,4,.86),rgba(20,12,4,0));} /* ---------- 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(20,12,4,0),rgba(20,12,4,.62) 42%,rgba(20,12,4,.9)); color:rgba(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:'Cinzel','Amiri',serif; 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(255,255,255,.07),rgba(255,255,255,.025)); border:1px solid rgba(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(233,206,138,.2);} .ct-card-head{ display:flex;align-items:center;gap:18px;padding:24px 28px; border-bottom:1px solid rgba(233,206,138,.18); background:linear-gradient(180deg,rgba(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(233,206,138,.4));} .ct-card-name{font-family:'Cinzel','Amiri',serif;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(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(233,206,138,.13); border-bottom:1px solid rgba(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:'Cinzel','Amiri',serif;font-size:.6rem;letter-spacing:.2em; text-transform:uppercase;color:rgba(233,206,138,.8);} .ct-v{font-size:.88rem;line-height:1.62;color:rgba(243,232,212,.86);} .ct-v a{color:rgba(243,232,212,.92);text-decoration:none;border-bottom:1px solid rgba(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(233,206,138,.08),rgba(233,206,138,.02)); border:1px solid rgba(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(233,206,138,.14);} .ct-hours-list li:last-child{border-bottom:none;} .ct-hours-list span{font-family:'Cinzel','Amiri',serif;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(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,#FFFDF9,#F6EFE1); border:1px solid rgba(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(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(233,206,138,.28),rgba(198,161,91,.08)); border:1px solid rgba(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:'Cinzel','Amiri',serif;font-size:1.02rem;color:var(--pr-coffee);margin:0 0 8px;} .ct-office p{font-size:.87rem;line-height:1.62;color:#54432c;margin:0;flex:1;text-align:start;} .ct-office-go{margin-top:14px;font-size:.76rem;font-weight:600;color:var(--pr-gold-deep); 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:#6b5c44;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(255,255,255,.07),rgba(255,255,255,.028)); border:1px solid rgba(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(233,206,138,.18);} .ct-form-n{ font-family:'Cinzel','Amiri',serif;font-size:.68rem;letter-spacing:.24em; color:rgba(233,206,138,.72);} .ct-form-card h3{font-family:'Cinzel','Amiri',serif;font-size:1.1rem;color:#fff;margin:8px 0 8px;} .ct-form-d{font-size:.84rem;line-height:1.62;color:rgba(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(233,206,138,.3); background:rgba(255,255,255,.05);color:#F3E8D4; font-family:'Inter','Cairo',sans-serif;font-size:.88rem;} .ct-select option{background:#241708;color:#F3E8D4;} .ct-select:focus{outline:none;border-color:var(--pr-gold-bright); box-shadow:0 0 0 4px rgba(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,#FFFDF9,#F5ECDC); border:1px solid rgba(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(233,206,138,.3),rgba(198,161,91,.08)); border:1px solid rgba(198,161,91,.3);} .adk-std-ico svg{width:20px;height:20px;} .adk-std h3{font-family:'Cinzel','Amiri',serif;font-size:.98rem;color:var(--pr-coffee);margin:0 0 7px;} .adk-std p{font-size:.85rem;line-height:1.62;color:#54432c;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,#3B2A1D)!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:#54432c!important;} .adk-priority-card .apc-arabic{color:var(--pr-coffee,#3B2A1D)!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,#9C7A3C)!important;} .adk-progress-stat--streak .value{color:var(--pr-gold-bright,#E9CE8A)!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,#3B2A1D),#241708)!important; color:var(--pr-gold-bright,#E9CE8A)!important; border-radius:var(--pr-r-pill);padding:6px 16px!important; box-shadow:0 8px 18px -12px rgba(42,28,16,.6);} .adk-sd-close{color:var(--pr-coffee,#3B2A1D)!important;} .adhkar-note{color:#4a3a24!important;} .adhkar-note strong{color:var(--pr-coffee,#3B2A1D)!important;} /* ---- The eyebrow, on cream ------------------------------------------ --gold (#C6A15B) 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,#9C7A3C);} .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. */ .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, .hero .eyebrow,.foundation .eyebrow,.ct-hours .pr-eyebrow{ color:var(--pr-gold-bright,#E9CE8A);} /* ---- 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. */ .pr-section.is-ivory .btn-outline, .wrap > .cl-foot .btn-outline, .plib .btn-outline, section:not(.is-royal):not(.hero):not(.contact):not(.academics):not(.policies) .btn-outline{ color:var(--pr-gold-deep,#9C7A3C); border-color:rgba(198,161,91,.55); background:linear-gradient(168deg,#FFFDF9,#F5ECDC);} .pr-section.is-ivory .btn-outline:hover,.wrap > .cl-foot .btn-outline:hover, .plib .btn-outline:hover{ color:var(--pr-coffee,#3B2A1D);border-color:var(--pr-gold); background:linear-gradient(168deg,#FFF8E8,#F2E5CC);} /* ---- Photographic heroes: a deeper scrim ------------------------------ The eyebrow and the standfirst sit over a sunlit photograph and were measuring 1.23 and 2.59. The fall of shadow behind them is deepened until the type carries, without darkening the photograph as a whole. */ .pr-hero::after{ background:linear-gradient(180deg,rgba(20,12,4,.42) 0%,rgba(20,12,4,.24) 28%, rgba(24,15,6,.78) 68%,rgba(20,12,4,.95) 100%);} .pr-hero-inner{position:relative;} .pr-hero-inner::before{ content:"";position:absolute;inset:-40px -40px -30px -40px;z-index:-1;pointer-events:none; background:radial-gradient(120% 90% at 22% 78%, rgba(16,10,3,.72), transparent 72%);} [dir="rtl"] .pr-hero-inner::before{ background:radial-gradient(120% 90% at 78% 78%, rgba(16,10,3,.72), transparent 72%);} .pr-hero .pr-eyebrow{color:#F5E4B8;text-shadow:0 1px 10px rgba(0,0,0,.75);} .pr-hero-sub{color:rgba(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:#5c4c34!important;} .pr-body.src{color:#5d4c34;} .pr-photo-cap{color:#5d4c34;} .pr-path-age{color:var(--pr-gold-deep,#9C7A3C);} .pr-path-d{color:#4f4030;} .pr-stat-s{color:#5d4c34;} .el-voice .who,.quote-panel .who{color:#5d4c34;} .at-ref{color:var(--pr-gold-deep,#9C7A3C);} .ic-mt-day{color:#5d4c34;} .pr-quote cite,.pr-founder-card cite,cite{color:#5d4c34;} .plib .stat-num,.policy-head .stat-num{color:var(--pr-gold-deep,#9C7A3C);} .sign-row .lab{color:#6b5a40;} /* the mosaic caption eyebrow, over a photograph */ .cl-cap-k{color:#F5E4B8;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,#E9CE8A)!important;} .adk-static-item h4{color:#FFF8EA!important;} .adk-static-translit,.adk-static-translation{color:rgba(247,238,223,.86)!important;} .adk-static-ref{color:rgba(233,206,138,.85)!important;} .ic-mt-day,.ic-mt-date{color:#FFF3DC!important;} .el-voices .who,.el-voice .who,.quote-panel .who{color:rgba(247,238,223,.9);} .pr-section.is-ivory .quote-panel .who, .pr-section.is-ivory .el-voice .who{color:#4a3a24;} /* 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:#6E5220!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:#7A5A24!important;} /* Cream plates — a shade further down so small type carries */ .pr-path-age{color:#7A5A24;} cite,.pr-quote cite,.pr-founder-card cite{color:#4a3a24;} .pr-stat-s,.pr-photo-cap,.pr-body.src{color:#4f4030;} .pr-section.is-ivory .btn-outline,.wrap > .cl-foot .btn-outline,.plib .btn-outline{ color:#7A5A24;} /* The photographic hero. The standfirst and its eyebrow sit over a sunlit wall, and no text colour survives that on its own — the scrim has to do the work. A single soft fall of shadow is laid under the whole text column, top to bottom, so the type carries at full strength while the photograph above it stays bright. */ .pr-hero-inner::before{ inset:-120px -60px -40px -60px; background: linear-gradient(180deg,rgba(14,9,3,.62) 0%,rgba(14,9,3,.72) 60%,rgba(14,9,3,.8) 100%), radial-gradient(130% 100% at 20% 70%, rgba(12,7,2,.55), transparent 78%); -webkit-mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);} [dir="rtl"] .pr-hero-inner::before{ background: linear-gradient(180deg,rgba(14,9,3,.62) 0%,rgba(14,9,3,.72) 60%,rgba(14,9,3,.8) 100%), radial-gradient(130% 100% at 80% 70%, rgba(12,7,2,.55), transparent 78%);} @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(16,10,3,0),rgba(16,10,3,.74) 38%,rgba(16,10,3,.95));} /* ---- 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:#6E5220;} .pr-section.is-ivory .btn-outline,.wrap > .cl-foot .btn-outline,.plib .btn-outline{color:#6E5220;} /* 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:#FFF8EA!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:#2A1B0D!important;} /* Attribution lines, on cream */ cite,.pr-quote cite,.pr-founder-card cite{color:#3B2A1D;} .pr-section.is-ivory .quote-panel .who,.pr-section.is-ivory .el-voice .who, .el-figures .who,.wrap .quote-panel .who{color:#3B2A1D;} /* ---- 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:#6E5220;} .academics > .wrap:has(> .page-hero-icon) .eyebrow, .policies > .wrap:has(> .page-hero-icon) .eyebrow{color:var(--pr-gold-bright,#E9CE8A);} /* The testimonial attribution follows its band, dark or light. */ .el-voices .who,.el-voices-track .who{color:rgba(247,238,223,.92)!important;} .pr-section.is-ivory .el-voices .who, .is-ivory .el-voices .who{color:#3B2A1D!important;} /* Attribution and outline buttons on cream, taken a shade further down. */ cite,.pr-quote cite,.pr-founder-card cite,figure cite{color:#3B2A1D!important;} .pr-section.is-ivory .btn-outline,.wrap > .cl-foot .btn-outline,.plib .btn-outline{ color:#5F4518!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:#FFF8EA;} .pr-section.is-royal .pr-path-d,.chapter-band-alt .pr-path-d{color:rgba(244,234,212,.84);} .pr-section.is-royal .pr-path-age,.chapter-band-alt .pr-path-age{color:var(--pr-gold-bright,#E9CE8A);} /* 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:#5F4518;border-color:rgba(198,161,91,.55); background:linear-gradient(168deg,#FFFDF9,#F5ECDC);} .pr-section.is-ivory .pr-btn.is-ghost:hover,.is-ivory .pr-btn.is-ghost:hover{ color:var(--pr-coffee,#3B2A1D);border-color:var(--pr-gold);} .pr-section.is-ivory .tag,.is-ivory .tag, .school-block .tag,.fac-profile .tag,.ct-office .tag{color:#5F4518;} .pr-section.is-royal .tag,.chapter-band .tag,.chapter-band-alt .tag, .portal-body .tag,.gateway-card .tag{color:var(--pr-gold-bright,#E9CE8A);} /* A bare inline link on a pale band. */ .pr-section.is-ivory .text-link,.is-ivory .text-link{color:#6E5220;} .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,#E9CE8A);} /* ---- 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,.at-ref{ color:inherit!important;opacity:.78;} .pr-section.is-royal .at-ref,.chapter-band .at-ref,.chapter-band-alt .at-ref{opacity:.86;} /* 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:#5F4518;border-color:rgba(198,161,91,.5); background:linear-gradient(168deg,#FFFDF9,#F5ECDC);} .pr-btn.is-ghost:hover{color:var(--pr-coffee,#3B2A1D);border-color:var(--pr-gold); background:linear-gradient(168deg,#FFF8E8,#F2E5CC);} .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,#E9CE8A);border-color:rgba(233,206,138,.45); background:rgba(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(233,206,138,.14);} /* The Foundation band on the homepage is cream, not royal. */ .foundation .eyebrow{color:#6E5220;} /* 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:#3B2A1D;} .pr-section.is-royal .cap,.pr-section.is-royal small, .chapter-band .cap,.chapter-band-alt .cap{color:rgba(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,#E9CE8A)!important;margin:0;} /* The feature card was drawn dark and is now a cream plate. */ .pr-feature .pr-feature-body h3{color:var(--pr-coffee,#3B2A1D);} .pr-feature .pr-feature-body p{color:#54432c;} .pr-feature .pr-feature-body > span:last-child{color:#6E5220;font-weight:600;} .pr-feature .pr-feature-body .tag{color:#5F4518;} .pr-section.is-royal .pr-feature .pr-feature-body h3{color:#FFF8EA;} .pr-section.is-royal .pr-feature .pr-feature-body p{color:rgba(244,234,212,.84);} .pr-section.is-royal .pr-feature .pr-feature-body > span:last-child{color:var(--pr-gold-bright,#E9CE8A);} /* 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:#3B2A1D;} /* 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,#3B2A1D)!important;} .adhkar-page > .wrap > h3{color:var(--pr-coffee,#3B2A1D)!important;} .pr-age-fill.is-open{background:linear-gradient(120deg,#22383F,#3A5D68);} b,strong{color:#3B2A1D;} .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{color:inherit;} .el-voice .who,.el-voices .who,.quote-panel .who,.el-figures .who{opacity:1;color:#3B2A1D!important;} .pr-section.is-royal .el-voice .who,.pr-section.is-royal .quote-panel .who, .el-voices-track .el-voice .who{color:inherit!important;opacity:.9;} /* =================================================================== 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:#FBF7EF; --pearl-2:#F4EDE0; --pearl-3:#EDE3D2; --pearl-ink:#33281C; --pearl-ink-2:#57472F; --pearl-line:rgba(198,161,91,.34); } /* ---- The masthead, in porcelain ---- */ html[data-pc-theme="light"] header.nav{ background: radial-gradient(700px 140px at 12% 0%, rgba(233,206,138,.24), transparent 65%), linear-gradient(155deg,#FFFDF8 0%,#F3EADB 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:#8A6A2F;} 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);} html[data-pc-theme="light"] .topbar{ background:linear-gradient(180deg,#F6EFE2,#EFE5D3);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"] .ann-ribbon{ background:linear-gradient(180deg,#F9F3E8,#F2E9D9);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,#F6EFE2,#F1E7D5);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:#8A6A2F;} html[data-pc-theme="light"] .bc-sep{color:rgba(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(233,206,138,.28), transparent 62%), radial-gradient(700px 380px at 8% 106%, rgba(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:#8A6A2F!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,#FFFFFF,#F7F0E3)!important; border-color:rgba(198,161,91,.3)!important; color:var(--pearl-ink)!important;} html[data-pc-theme="light"] .dc-tile 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(233,206,138,.3), transparent 62%), radial-gradient(900px 480px at 8% 106%, rgba(198,161,91,.18), transparent 60%), linear-gradient(168deg,#FCF8F0 0%,#F4ECDE 52%,#EEE4D2 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(233,206,138,.26), transparent 62%), linear-gradient(168deg,#FFFFFF 0%,#F8F1E3 52%,#F2E9D8 100%); border-color:rgba(198,161,91,.34); color:var(--pearl-ink); box-shadow:0 2px 4px rgba(42,28,16,.06),0 22px 46px -28px rgba(42,28,16,.4), inset 0 1px 0 rgba(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:#5b4a32;border-bottom-color:rgba(198,161,91,.16);} html[data-pc-theme="light"] .gw-points{border-top-color:rgba(198,161,91,.28);} html[data-pc-theme="light"] .gw-need{color:#7a6949;} html[data-pc-theme="light"] .gateway-title, html[data-pc-theme="light"] .gw-group-head{color:var(--pearl-ink)!important;} html[data-pc-theme="light"] .gateway-sub{color:var(--pearl-ink-2);} html[data-pc-theme="light"] .gateway-hero{ background:linear-gradient(160deg,#F8F1E3 0%,#F1E7D5 65%,#EADFC9 100%); border-bottom:1px solid var(--pearl-line);} html[data-pc-theme="light"] .gateway-eyebrow, html[data-pc-theme="light"] .gateway-card-eyebrow, html[data-pc-theme="light"] .gateway-card-cta{color:#8A6A2F;} html[data-pc-theme="light"] .portal-topbar{ background:linear-gradient(180deg,#F8F1E3,#F1E7D5); 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);} html[data-pc-theme="light"] .portal-aside-title, html[data-pc-theme="light"] .portal-aside-copy, html[data-pc-theme="light"] .portal-aside-points li{color:var(--pearl-ink-2)!important;} html[data-pc-theme="light"] .portal-aside-eyebrow{color:#8A6A2F!important;} /* ---- The closing band and the footer, in pearl ---- */ html[data-pc-theme="light"] .pr-arrival{ background:linear-gradient(168deg,#FFFDF8,#F3EADB)!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(233,206,138,.3), transparent 66%), linear-gradient(180deg,#F8F1E3 0%,#F1E7D5 58%,#EADFC9 100%); border-top:1px solid var(--pearl-line);} html[data-pc-theme="light"] .foot-statement p{color:#8A6A2F;} html[data-pc-theme="light"] footer{ background:linear-gradient(180deg,#F1E7D5,#E9DCC4);color:var(--pearl-ink-2); border-top:1px solid var(--pearl-line);} html[data-pc-theme="light"] footer h5, html[data-pc-theme="light"] footer .fs-sig, html[data-pc-theme="light"] footer .fd-item span, html[data-pc-theme="light"] footer a{color:var(--pearl-ink);} html[data-pc-theme="light"] footer .fd-item{ background:linear-gradient(168deg,#FFFDF8,#F6EEDF);border-color:rgba(198,161,91,.26);} html[data-pc-theme="light"] footer .fd-item svg{color:#8A6A2F;} html[data-pc-theme="light"] .fm-overlay-title, html[data-pc-theme="light"] .fm-overlay-sub, html[data-pc-theme="light"] .fm-campus-name, html[data-pc-theme="light"] .fm-campus-tag, html[data-pc-theme="light"] .fm-lede, 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-eyebrow{color:#8A6A2F!important;} /* ---- The nav dropdowns, in pearl ---- */ html[data-pc-theme="light"] .nav-drop-panel{ background:linear-gradient(165deg,#FFFDF8,#F4EBDB); border-color:var(--pearl-line);border-top-color:var(--pr-gold); box-shadow:0 28px 56px -26px rgba(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:#5b4a32;} 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:#8A6A2F;} html[data-pc-theme="light"] .pgx-pane-eyebrow{color:#8A6A2F;} html[data-pc-theme="light"] .pgx-pane-need{color:#7a6949;} /* ---- The search overlay, the assistant, the drawer ---- */ html[data-pc-theme="light"] .search-overlay{background:rgba(250,244,232,.9);} html[data-pc-theme="light"] .pc-overlay{background:rgba(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(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,#FFFFFF,#F5EDE0);} /* ---- 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:'Cinzel','Amiri',serif;font-size:.66rem;letter-spacing:.24em; text-transform:uppercase;color:var(--pr-gold-bright,#E9CE8A);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(233,206,138,.42),transparent);} [dir="rtl"] .gw-quick-lab::after{background:linear-gradient(270deg,rgba(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:'Cinzel','Amiri',serif;font-size:.74rem;letter-spacing:.06em; color:#FFF6E4; background:linear-gradient(168deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); border:1px solid rgba(233,206,138,.28); box-shadow:inset 0 1px 0 rgba(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(233,206,138,.6); background:linear-gradient(168deg,rgba(233,206,138,.2),rgba(233,206,138,.06)); box-shadow:inset 0 1px 0 rgba(233,206,138,.34),0 18px 34px -20px rgba(0,0,0,.95), 0 0 26px -10px rgba(233,206,138,.6);} .gw-q-i{display:grid;place-items:center;width:26px;height:26px;color:var(--pr-gold-bright,#E9CE8A);} .gw-q-i svg{width:100%;height:100%;} .gw-quick-note{margin:14px 0 0;font-size:.8rem;color:rgba(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:#33281C; background:linear-gradient(168deg,#FFFFFF,#F6EEDF); border-color:rgba(198,161,91,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 26px -22px rgba(42,28,16,.5);} html[data-pc-theme="light"] .gw-q-i{color:#8A6A2F;} html[data-pc-theme="light"] .gw-quick-lab{color:#8A6A2F;} html[data-pc-theme="light"] .gw-quick-note{color:#6b5a40;} /* =================================================================== 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,#FCFAF6);position:relative;} .hx-marks::before{content:"";position:absolute;inset-inline:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(198,161,91,.45),transparent);} .hx-marks-lede{max-width:660px;color:var(--on-surface-soft,#4a4944); 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(198,161,91,.38));border-radius:var(--pr-r-md,14px); background:linear-gradient(168deg,#FFFDF8,var(--surface,#FBF6EC)); box-shadow:0 20px 44px -38px rgba(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(198,161,91,.72); box-shadow:0 30px 58px -34px rgba(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,#9C7A3C),var(--pr-gold-bright,#E9CE8A),var(--pr-gold-deep,#9C7A3C)); 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:'Cinzel','Amiri',serif;font-size:1.5rem;line-height:1; color:rgba(198,161,91,.34);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,#9C7A3C); background:linear-gradient(160deg,rgba(233,206,138,.3),rgba(198,161,91,.1)); border:1px solid rgba(198,161,91,.36);margin-bottom:16px;} .hx-mark-i svg{width:26px;height:26px;} .hx-mark h3{font-family:'Cinzel','Amiri',serif;font-size:1.09rem;line-height:1.34; margin:0 0 10px;color:var(--pr-coffee,#3B2A1D);} .hx-mark p{margin:0;font-size:.93rem;line-height:1.72;color:var(--on-surface-soft,#4a4944); 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:'Cinzel','Amiri',serif;font-size:.74rem;letter-spacing:.12em; text-transform:uppercase;text-decoration:none;color:var(--pr-gold-deep,#9C7A3C); border-bottom:1px solid rgba(198,161,91,.4);padding-bottom:3px; transition:color .3s,border-color .3s,gap .3s;} .hx-mark-link:hover{color:var(--pr-coffee,#3B2A1D);border-color:var(--pr-gold-deep,#9C7A3C);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,#F1E8D8);position:relative;overflow:hidden;} .hx-path-lede{max-width:700px;color:var(--on-surface-soft,#4a4944); 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(198,161,91,.38));border-radius:var(--pr-r-lg,18px); background:linear-gradient(168deg,#FFFDF8,var(--surface,#FBF6EC)); box-shadow:0 24px 52px -40px rgba(60,42,22,.55);} .hx-axis{display:grid;grid-template-columns:repeat(17,1fr); padding-bottom:9px;border-bottom:1px solid rgba(198,161,91,.3);} .hx-axis-t{grid-column:var(--c);position:relative; font-family:'Cinzel','Amiri',serif;font-size:.74rem;letter-spacing:.06em; color:var(--pr-gold-deep,#9C7A3C);} .hx-axis-t::after{content:"";position:absolute;inset-block-end:-10px;inset-inline-start:0; width:1px;height:6px;background:rgba(198,161,91,.5);} .hx-axis-lab{margin:8px 0 20px;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:rgba(122,98,62,.62);} .hx-track + .hx-track{margin-top:16px;padding-top:16px; border-top:1px dotted rgba(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:'Cinzel','Amiri',serif;font-size:.98rem;color:var(--pr-coffee,#3B2A1D);} .hx-track-v{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; color:var(--pr-gold-deep,#9C7A3C);} .hx-bar-rail{display:grid;grid-template-columns:repeat(17,1fr); background:repeating-linear-gradient(90deg,rgba(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:#FFF6E4; background:linear-gradient(120deg,var(--pr-coffee,#3B2A1D),#5A422C); border:1px solid rgba(198,161,91,.42); box-shadow:inset 0 1px 0 rgba(233,206,138,.2),0 12px 26px -22px rgba(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(233,206,138,.34),0 18px 34px -20px rgba(60,42,22,.95);} .hx-bar.is-rc{background:linear-gradient(120deg,#4A3520,#6B5030);} .hx-bar.is-ais{background:linear-gradient(120deg,#3F3324,#5E4A2E);} .hx-bar.is-qc{background:linear-gradient(120deg,#382B1E,#57432B);} /* 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(233,206,138,.16),rgba(198,161,91,.06)); border:1px dashed rgba(156,122,60,.62);color:var(--pr-coffee,#3B2A1D); box-shadow:none;} .hx-bar.is-odl:hover{filter:none; background:linear-gradient(120deg,rgba(233,206,138,.3),rgba(198,161,91,.12));} .hx-path-foot{margin:22px 0 0;font-size:.92rem;color:var(--on-surface-soft,#4a4944);} /* 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,#FBF6EC);position:relative;} .hx-faq-lede{max-width:660px;color:var(--on-surface-soft,#4a4944); 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(198,161,91,.38));border-radius:var(--pr-r-md,14px); background:linear-gradient(168deg,#FFFDF8,var(--surface-alt,#F4EDE0)); overflow:hidden;transition:border-color .4s,box-shadow .4s;} .hx-q[open]{border-color:rgba(198,161,91,.7); box-shadow:0 22px 46px -38px rgba(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:'Cinzel','Amiri',serif;font-size:.96rem;line-height:1.42; color:var(--pr-coffee,#3B2A1D);} /* 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,#9C7A3C),var(--pr-gold-deep,#9C7A3C)) center/15px 1.6px no-repeat, linear-gradient(var(--pr-gold-deep,#9C7A3C),var(--pr-gold-deep,#9C7A3C)) 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,#9C7A3C),var(--pr-gold-deep,#9C7A3C)) center/15px 1.6px no-repeat;} .hx-q summary:hover .hx-q-t{color:var(--pr-gold-deep,#9C7A3C);} .hx-q summary:focus-visible{outline:2px solid var(--pr-gold-deep,#9C7A3C);outline-offset:-3px;} .hx-q-a{padding:0 22px 20px;border-top:1px dotted rgba(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,#4a4944);text-align:justify;text-justify:inter-word;hyphens:auto;} .hx-faq-foot{margin:24px 0 0;font-size:.92rem;color:var(--on-surface-soft,#4a4944);} @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,#FBF7EF);} 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,#FFFFFF,#F6EEDF); border-color:var(--pearl-line,rgba(198,161,91,.34));} html[data-pc-theme="light"] .hx-bar{color:#FFF8EA;} html[data-pc-theme="light"] .hx-bar.is-odl{color:#4A3A26;} 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;} }