/* ============================================================================ SahiDegree — Global Stylesheet (site.css) Shared foundation for all pages: home, about, contact, university & course listings, and Google/Facebook ad landing pages. Design system: "Scholarly Trust" ============================================================================ */ /* ----------------------------- Design tokens ----------------------------- */ :root{ /* brand palette */ --ink:#0F1C3F; /* deep indigo ink — headings, dark surfaces */ --ink-2:#1E2E58; --brand:#2547D0; /* confident knowledge-blue — primary */ --brand-2:#4B6EF5; /* lighter blue for gradients */ --brand-700:#1B36A8; --gold:#E8A33D; /* guidance / CTA warmth (human, optimistic) */ --gold-d:#CE8A24; --mint:#10B497; /* positive / match signals */ --mint-50:#E6F7F2; /* neutrals */ --paper:#F7F8FC; /* page background */ --surface:#FFFFFF; /* cards */ --surface-2:#EFF2FA; /* subtle fills */ --line:#E1E6F0; /* hairlines */ --line-2:#EDF0F7; --slate:#5A6685; /* body text */ --slate-l:#8A94AE; /* muted / captions */ /* effects */ --grad-brand:linear-gradient(125deg, var(--brand-2), var(--brand) 55%, var(--brand-700)); --grad-ink:linear-gradient(160deg, #14224A, var(--ink)); --shadow-sm:0 2px 8px rgba(15,28,63,.06); --shadow:0 12px 32px rgba(15,28,63,.10); --shadow-lg:0 28px 70px rgba(15,28,63,.20); --shadow-gold:0 14px 34px rgba(232,163,61,.34); /* geometry */ --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:100px; --wrap:1180px; --ease:cubic-bezier(.22,.7,.3,1); /* type Headings use Source Serif 4 and everything else uses Inter. Both are chosen for being ordinary in the best sense — they are two of the most widely deployed open typefaces on the web, so they read as considered rather than fashionable, and they will still look right in three years. Inter earns the body/UI role on this site specifically because so much of the interface is small: 11.5px card labels, 12.5px trust chips, 13px pills, 14.5px nav. Inter was designed for exactly those sizes on screens. It also carries tabular figures and a properly drawn ₹, which matters on a site full of fee comparisons. Source Serif 4 keeps the academic, trustworthy note the old Fraunces was reaching for, without Fraunces' very high contrast and wobbly optical personality — which reads as a design-magazine flourish rather than as an education advisor you would hand your money to. Its optical-size axis means the 58px hero and the 16px tips heading are each drawn correctly. Both are variable fonts, so the whole weight range costs two requests. */ --serif:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ------------------------------- Reset ---------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px} body{ font-family:var(--sans); background:var(--paper); color:var(--ink); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; /* let each variable font pick the drawing made for the size it is used at */ font-optical-sizing:auto; } img,svg,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font:inherit;color:inherit} ul{list-style:none} :focus-visible{outline:3px solid var(--brand-2);outline-offset:3px;border-radius:6px} /* ------------------------------ Headings -------------------------------- */ h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.015em;color:var(--ink)} h1{font-size:clamp(32px,5.2vw,58px)} h2{font-size:clamp(26px,4vw,42px)} h3{font-size:clamp(20px,2.4vw,26px)} h4{font-size:18px} p{color:var(--slate)} /* ------------------------------ Layout ---------------------------------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px} @media(min-width:768px){.wrap{padding:0 32px}} .section{padding:64px 0} @media(min-width:768px){.section{padding:92px 0}} .center{text-align:center} .narrow{max-width:720px;margin-inline:auto} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.04em; color:var(--brand);text-transform:none; } .eyebrow::before{content:"";width:20px;height:2px;background:var(--gold);border-radius:2px} .eyebrow.on-dark{color:#AFC0FF} .lede{font-size:clamp(16px,1.7vw,19px);color:var(--slate);line-height:1.6} .on-dark, .on-dark p{color:#C7D0EA} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff} /* ------------------------------ Buttons --------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--sans);font-weight:700;font-size:15px; padding:14px 26px;border-radius:var(--r-pill); transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s; white-space:nowrap;border:1.6px solid transparent; } .btn-lg{padding:16px 32px;font-size:16px} .btn-sm{padding:10px 18px;font-size:14px} .btn-block{display:flex;width:100%} .btn-primary{background:var(--gold);color:#3A2606} .btn-primary:hover{background:var(--gold-d);transform:translateY(-2px);box-shadow:var(--shadow-gold)} .btn-brand{background:var(--brand);color:#fff} .btn-brand:hover{background:var(--brand-700);transform:translateY(-2px);box-shadow:var(--shadow)} .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand)} .btn-ghost-light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff} .btn-ghost-light:hover{background:rgba(255,255,255,.16);border-color:#fff} /* ------------------------------- Header --------------------------------- */ .site-hdr{position:sticky;top:0;z-index:100;background:rgba(247,248,252,.85);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s} .site-hdr.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)} .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);letter-spacing:-.01em} .brand .mk{width:34px;height:34px;border-radius:9px;background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:600;font-size:18px;box-shadow:var(--shadow-sm)} .brand em{font-style:normal;color:var(--gold-d)} .nav{display:none;align-items:center;gap:4px} .nav a{padding:9px 14px;border-radius:var(--r-pill);font-weight:600;font-size:14.5px;color:var(--slate);transition:.18s} .nav a:hover,.nav a.active{color:var(--brand);background:var(--surface-2)} .hdr-actions{display:flex;align-items:center;gap:10px} .hdr-actions .btn{display:none} .burger{display:inline-flex;flex-direction:column;gap:5px;padding:10px} .burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(min-width:940px){ .nav{display:flex} .hdr-actions .btn{display:inline-flex} .burger{display:none} } /* mobile drawer */ .drawer{position:fixed;inset:0 0 0 28%;background:var(--surface);z-index:110;transform:translateX(100%); transition:transform .35s var(--ease);padding:84px 24px 28px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-lg)} .drawer.open{transform:none} .drawer a{padding:14px 10px;font-family:var(--serif);font-weight:500;font-size:19px;color:var(--ink);border-bottom:1px solid var(--line-2)} .drawer .btn{margin-top:18px} .scrim{position:fixed;inset:0;background:rgba(15,28,63,.5);z-index:105;opacity:0;visibility:hidden;transition:.3s} .scrim.open{opacity:1;visibility:visible} @media(min-width:940px){.drawer,.scrim{display:none}} /* ------------------------------- Footer --------------------------------- */ .site-ft{background:var(--grad-ink);color:#C7D0EA;padding:64px 0 28px} .ft-grid{display:grid;gap:36px;grid-template-columns:1fr} @media(min-width:720px){.ft-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}} .site-ft .brand{color:#fff;margin-bottom:14px} .site-ft .brand em{color:var(--gold)} .ft-about{font-size:14px;color:#96A2C4;max-width:34ch;line-height:1.6} .ft-col h5{font-family:var(--sans);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;margin-bottom:15px} .ft-col a{display:block;color:#96A2C4;font-size:14px;padding:5px 0;transition:.18s} .ft-col a:hover{color:#fff} .ft-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:#8390B4} /* ------------------------------- Cards ---------------------------------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)} .card-pad{padding:24px} /* feature / value grid */ .grid{display:grid;gap:18px} .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr 1fr} @media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}} @media(min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}} .feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s} .feature:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent} .feature .ic{width:50px;height:50px;border-radius:13px;background:var(--surface-2);display:grid;place-items:center;color:var(--brand);margin-bottom:15px;font-size:22px} .feature h3{font-size:19px;margin-bottom:8px} .feature p{font-size:14.5px;line-height:1.6} /* stat row */ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} @media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}} .stats .s{background:var(--surface);padding:24px 18px;text-align:center} .stats .s .n{font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(26px,4vw,36px);color:var(--ink);line-height:1} .stats .s .n em{font-style:normal;color:var(--brand)} .stats .s .l{font-size:12.5px;color:var(--slate-l);margin-top:8px} /* pill tags */ .pills{display:flex;flex-wrap:wrap;gap:9px} .pill{font-size:13px;font-weight:600;color:var(--slate);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;transition:.18s} .pill:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)} /* ------------------------------- FAQ ------------------------------------ */ .faq{max-width:820px;margin-inline:auto} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:20px 2px;font-family:var(--serif);font-weight:500;font-size:19px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary .pm{flex:none;width:28px;height:28px;border-radius:8px;background:var(--surface-2);color:var(--brand);display:grid;place-items:center;font-size:20px;transition:.25s var(--ease)} .faq details[open] summary .pm{transform:rotate(45deg);background:var(--brand);color:#fff} .faq details p{color:var(--slate);font-size:15px;line-height:1.7;padding:0 0 20px} /* ------------------------- SEO / long-form content ---------------------- */ .prose{max-width:760px;margin-inline:auto} .prose h2{margin:0 0 16px} .prose h3{font-size:20px;margin:30px 0 10px} .prose p{font-size:15.5px;line-height:1.8;margin-bottom:14px;color:var(--slate)} .prose a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px} .prose ul.ticks{margin:6px 0 16px;display:flex;flex-direction:column;gap:9px} .prose ul.ticks li{position:relative;padding-left:30px;font-size:15px;color:var(--slate);line-height:1.6} .prose ul.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--mint);font-weight:800} /* ------------------------------ Utilities ------------------------------- */ .tint{background:var(--surface-2)} .on-ink{background:var(--grad-ink);color:#fff} .mt-0{margin-top:0}.mb-0{margin-bottom:0} .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1 !important;transform:none !important} html{scroll-behavior:auto} } /* ------------------------- CTA band (reusable) -------------------------- */ .cta-band{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--grad-brand);color:#fff;padding:52px 26px;text-align:center} @media(min-width:768px){.cta-band{padding:72px 40px}} .cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 82% 0%, rgba(232,163,61,.4), transparent 60%);pointer-events:none} .cta-band>*{position:relative;z-index:2} .cta-band h2{color:#fff;max-width:20ch;margin:0 auto 12px} .cta-band p{color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto 24px;font-size:17px} /* ============================================================================ SahiDegree — additions to site.css ============================================================================ Paste the whole of this at the END of css/site.css. It adds nothing that overrides an existing rule, so it is safe to append and safe to re-append. Built on the tokens already in site.css — no new colours, no new radii, no new shadows. Everything here is a layout component the inner pages need and the home page never did: About, Privacy, Terms, Contact, and the catalogue. Sections: 1 Accessibility — the skip link (A BUG FIX, see note) 2 Page hero .page-hero 3 Numbered process .steps 4 Callouts .callout 5 Legal documents .toc / .legal 6 Contact methods .contact-grid 7 Catalogue pages — SKIP IF ALREADY ADDED ============================================================================ */ /* --------------------------------------------------------------------------- 1 · Accessibility --------------------------------------------------------------------------- THIS IS A LIVE BUG FIX. header.php emits a "Skip to content" link so keyboard users can jump past the navigation. Without this rule it has no styling at all and renders as plain visible text above your logo on every page — which is what it is doing on the site right now. --------------------------------------------------------------------------- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200; padding:10px 16px;background:var(--ink);color:#fff; border-radius:0 0 var(--r-sm) 0;font-weight:700;font-size:14px} .skip-link:focus{left:0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* --------------------------------------------------------------------------- 2 · Page hero — the header band on every inner page --------------------------------------------------------------------------- Left-aligned by default. A centred hero reads as marketing; an inner page that wants to be believed reads better set like the opening of a document. Add .center where a page genuinely wants the other tone. --------------------------------------------------------------------------- */ .page-hero{position:relative;overflow:hidden;background:var(--surface-2); border-bottom:1px solid var(--line);padding:56px 0 52px} @media(min-width:768px){.page-hero{padding:80px 0 72px}} .page-hero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 140% at 85% 0%, rgba(75,110,245,.10), transparent 62%)} .page-hero>*{position:relative} .page-hero h1{margin:16px 0 0;max-width:17ch} .page-hero .lede{margin-top:18px;max-width:62ch} .page-hero.center{text-align:center} .page-hero.center h1,.page-hero.center .lede{margin-inline:auto} .page-hero.center .eyebrow{justify-content:center} /* a small meta line under a legal page's title */ .updated{margin-top:14px;font-size:13.5px;color:var(--slate-l)} /* --------------------------------------------------------------------------- 3 · Numbered process --------------------------------------------------------------------------- The number is drawn large and hollow rather than as a filled chip: at four steps a row of solid badges competes with the headings for attention, and the reader is meant to be reading the step, not counting. --------------------------------------------------------------------------- */ .steps{display:grid;gap:18px;grid-template-columns:1fr;counter-reset:step;margin-top:28px} @media(min-width:720px){.steps{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.steps.cols-4{grid-template-columns:repeat(4,1fr)}} .step{position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:26px 24px 24px;counter-increment:step; transition:transform .22s var(--ease),box-shadow .22s var(--ease)} .step:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .step::before{content:counter(step,decimal-leading-zero);display:block; font-weight:800;font-size:28px;line-height:1;letter-spacing:-.02em; color:transparent;-webkit-text-stroke:1.4px var(--brand-2);margin-bottom:14px; font-variant-numeric:tabular-nums} .step h3{font-size:18px;margin-bottom:8px} .step p{font-size:14.5px;line-height:1.65;margin:0} /* --------------------------------------------------------------------------- 4 · Callouts --------------------------------------------------------------------------- One shape, three meanings. The accent is a left border rather than a full tint so a callout inside prose reads as emphasis, not as an interruption. --------------------------------------------------------------------------- */ .callout{margin:26px 0;padding:18px 22px;border-radius:0 var(--r) var(--r) 0; border-left:3px solid var(--brand);background:var(--surface-2)} .callout h3{font-size:17px;margin:0 0 6px} .callout p{font-size:14.5px;line-height:1.7;margin:0} .callout p+p{margin-top:10px} .callout.warn{border-left-color:var(--gold);background:#FFF9EE} .callout.note{border-left-color:var(--mint);background:var(--mint-50)} .callout.quiet{border-left-color:var(--line);background:var(--surface)} /* --------------------------------------------------------------------------- 5 · Legal documents — privacy, terms --------------------------------------------------------------------------- Numbered headings come from a CSS counter, so inserting a clause in the middle never leaves you renumbering twelve headings by hand and missing one. The counter is on `.legal > h3` — DIRECT children only. That matters: a callout dropped inside the document has an h3 of its own, and without the `>` it would quietly take a section number and push every clause after it out of step with the contents list. --------------------------------------------------------------------------- */ .legal{counter-reset:sec} .legal>h3{counter-increment:sec;font-size:clamp(20px,2.3vw,25px);line-height:1.3; margin:44px 0 14px;scroll-margin-top:90px;display:flex;gap:12px;align-items:baseline} .legal>h3::before{content:counter(sec);flex:none;font-size:14px;font-weight:800; color:var(--brand);font-variant-numeric:tabular-nums; min-width:1.6em;padding-top:.25em} .legal>h3:first-child{margin-top:0} /* sub-headings within a clause — no number, no counter */ .legal h4{font-size:16.5px;font-weight:700;margin:26px 0 8px;color:var(--ink)} .legal p,.legal li{font-size:15.5px;line-height:1.8;color:var(--slate)} .legal address{font-style:normal;color:var(--slate);line-height:1.8;margin:10px 0 14px} .legal .callout{margin:26px 0} .legal .callout h3{font-size:16.5px;margin:0 0 8px;display:block} .toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:22px 24px;margin-bottom:38px} .toc h2{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--slate-l); text-transform:uppercase;margin:0 0 12px} /* Two columns via `columns`, not grid: a contents list has to read DOWN the left column and then down the right. A two-column grid flows across rows instead, which numbers them 1,2 / 3,4 and makes the reader zig-zag. */ .toc ol{list-style:none;counter-reset:toc;display:block} @media(min-width:680px){.toc ol{columns:2;column-gap:32px}} .toc li{counter-increment:toc;break-inside:avoid;margin-bottom:7px} .toc a{display:flex;gap:10px;font-size:14.5px;color:var(--slate); text-decoration:none;font-weight:500;padding:2px 0} .toc a::before{content:counter(toc);color:var(--slate-l);font-variant-numeric:tabular-nums; min-width:1.4em;font-size:13px} .toc a:hover{color:var(--brand)} /* The tick list, unscoped. css/site.css defines it as `.prose ul.ticks li::before`, so the ticks vanish the moment the list is used outside a .prose block — in a card, an aside, a callout. Same rule, without the .prose ancestor. */ ul.ticks{margin:6px 0 16px;display:flex;flex-direction:column;gap:9px;list-style:none} ul.ticks li{position:relative;padding-left:30px;font-size:15px;color:var(--slate);line-height:1.6} ul.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--mint);font-weight:800} /* --------------------------------------------------------------------------- 6 · Contact methods --------------------------------------------------------------------------- */ .contact-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:26px} @media(min-width:680px){.contact-grid{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.contact-grid.cols-3{grid-template-columns:repeat(3,1fr)}} .contact-card{background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:24px} .contact-card h3{font-size:17px;margin-bottom:6px} .contact-card p{font-size:14.5px;line-height:1.65;margin-bottom:12px} .contact-card .val{font-weight:700;font-size:15.5px;color:var(--brand); text-decoration:underline;text-underline-offset:3px;word-break:break-word} .contact-card .meta{display:block;margin-top:8px;font-size:13px;color:var(--slate-l)} /* --------------------------------------------------------------------------- 7 · Catalogue pages — /universities/, /universities//, /courses/ --------------------------------------------------------------------------- SKIP THIS SECTION if you already pasted the catalogue CSS from the earlier package. Appending it twice is harmless — the rules are identical — but there is no reason to carry it twice. --------------------------------------------------------------------------- */ .crumbs{font-size:13.5px;color:var(--slate);margin-bottom:18px} .crumbs a{color:var(--slate)} .crumbs a:hover{color:var(--brand)} .uni-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center; margin:28px 0 8px;padding:14px;background:var(--surface-2);border-radius:var(--r-lg)} .uni-filters input[type=search],.uni-filters select{flex:1 1 180px;min-width:0; padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm); background:#fff;font:inherit;font-size:14.5px;color:var(--ink)} .uni-filters .chk{display:inline-flex;align-items:center;gap:7px;font-size:14px; color:var(--slate);white-space:nowrap} .list-count{margin:18px 0 0;font-size:14px;color:var(--slate)} .uni-badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0} .ubadge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill); background:var(--surface-2);color:var(--slate);border:1px solid var(--line)} /* Only UGC-DEB online approval gets colour. It is the one approval that decides whether a degree is valid, and if every badge is highlighted then none of them is. */ .ubadge.ok{background:var(--mint-50);color:#0E7A64;border-color:#BCE6DC} .uni-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:18px} @media(min-width:700px){.uni-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1040px){.uni-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .uni-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-sm);transition:.2s var(--ease)} .uni-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)} .uni-card-link{display:block;padding:20px;color:inherit} .uni-card-top{display:flex;gap:12px;align-items:flex-start} .uni-card-top img{border-radius:var(--r-sm);object-fit:contain;flex:0 0 auto;background:var(--surface-2)} .uni-card h2{font-size:18px;margin:0;line-height:1.3} .uni-place{margin:3px 0 0;font-size:13.5px;color:var(--slate)} /* A 3-column grid, not a flex row. Flex sizes each fact to its own content, so "Universities / Fees / Duration" landed in different places in every card and the row read as ragged. Equal columns line the three labels up across every card in the grid, which is what makes a row of cards look deliberate. */ .uni-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px;margin:4px 0 0} .uni-facts div{min-width:0} /* The label, not the value, is the widest thing in these columns — "UNIVERSITIES" is 12 characters. Tight tracking and a slightly smaller size keep it inside its third; widening that column instead starves the others and the labels collide. */ .uni-facts dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em; color:var(--slate-l);white-space:nowrap} .uni-facts dd{margin:2px 0 0;font-weight:700;font-size:14.5px;line-height:1.35; font-variant-numeric:tabular-nums;overflow-wrap:break-word} .uni-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .uni-logo{border-radius:var(--r-sm);object-fit:contain;background:var(--surface-2);flex:0 0 auto} .uni-sub{margin:4px 0 0;color:var(--slate)} .notice{padding:14px 16px;border-radius:var(--r-sm);font-size:14.5px;line-height:1.6;margin-top:20px} .notice.warn{background:#FFF9EE;border:1px solid #F0DCAE;color:#6B5316} .prog-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:16px} @media(min-width:760px){.prog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .prog{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px} .prog h3{margin:0;font-size:17px} .prog-tag{margin:4px 0 0;font-size:13.5px;color:var(--slate)} .prog-facts{display:flex;gap:20px;flex-wrap:wrap;margin:14px 0 0} .prog-facts dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--slate-l)} .prog-facts dd{margin:2px 0 0;font-weight:700;font-variant-numeric:tabular-nums} .prog-note{margin:10px 0 0;font-size:13px;color:var(--slate)} /* auto-fit, not a fixed 3 columns. Hard-coded columns assume the catalogue is full. With one course live, the lone card was pinned to column 1 and sat 377px left of the centred heading above it, with three-quarters of the row empty beside it — which reads as a broken page rather than a short catalogue. auto-fit collapses the unused tracks and justify-content centres what is left, so one card centres, two centre as a pair, and six fill the row exactly as before. The 380px ceiling stops a single card stretching the full width of the page, and min(100%,290px) keeps it from overflowing a narrow phone. */ .course-grid{display:grid;gap:16px;margin-top:26px;justify-content:center; justify-items:center; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))} /* The CARD is capped, not the track. Capping the track at a fixed width makes grid compute the column count from that maximum, which quietly dropped the full catalogue from three cards per row to two. With a 1fr maximum the count comes from the 290px minimum — three across as before — and max-width keeps a lone card from stretching the full width of the page. */ .course-grid>.course-card{width:100%;max-width:420px} /* The card is a flex box and the link fills it, so two things follow that `display:block` could not give: 1. The call to action sits on the BOTTOM EDGE of every card, via margin-top:auto. Grid already stretches the cards to equal height, so without this the arrow floated wherever its card's content happened to end — level in a card with five specialisations, a hundred pixels high in a card with two. One card reaching the bottom while its neighbours stopped short is what read as "not aligned". 2. The whole card is clickable. Before, the empty space below the content belonged to the card but not to the link, so clicking the lower third of a short card did nothing. */ .course-card{display:flex;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow-sm);transition:.2s var(--ease)} .course-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)} .course-link{display:flex;flex-direction:column;flex:1;padding:22px;color:inherit} .course-card h2{margin:0 0 12px;font-size:19px} .course-go{margin-top:auto;padding-top:16px;font-weight:700;font-size:14px;color:var(--brand)} /* The catalogue must not borrow .rc / .rprofile from advisor.css — the catalogue pages do not load it, and the pills rendered as one unbroken run of text when they did. */ .tagrow{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0} .tag{font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:var(--r-pill); background:var(--surface-2);color:var(--slate);border:1px solid var(--line)} .blk-hero{padding:22px;background:var(--surface-2);border-radius:var(--r);margin:22px 0} .blk-quote{margin:22px 0;padding:16px 20px;border-left:3px solid var(--gold); background:var(--surface-2);border-radius:0 var(--r-sm) var(--r-sm) 0;font-style:italic} .blk-quote cite{display:block;margin-top:8px;font-style:normal;font-size:13.5px;color:var(--slate-l)} .blk-img{margin:22px 0} .blk-img img{width:100%;height:auto;border-radius:var(--r)} .blk-img figcaption{margin-top:8px;font-size:13.5px;color:var(--slate-l)} /* auto-fit, so a three-item stats block does not leave a fourth cell empty */ .blk-stats{display:grid;gap:12px;margin:20px 0; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .blk-stats .s{background:var(--surface-2);border-radius:var(--r);padding:18px;text-align:center} .blk-stats .n{font-weight:700;font-size:28px;color:var(--ink);line-height:1.1; font-variant-numeric:tabular-nums} .blk-stats .l{margin-top:6px;font-size:13px;color:var(--slate-l)} .tbl-wrap{overflow-x:auto;margin:18px 0} .tbl{width:100%;border-collapse:collapse;font-size:14.5px} .tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left} .tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-l)} .tbl td{font-variant-numeric:tabular-nums} /* --------------------------------------------------------------------------- 8 · Forms — /contact/ --------------------------------------------------------------------------- Two columns on a wide screen, the form first in the source so it is also first on a phone. A visitor who came here to write something should not have to scroll past three cards of reassurance to find the box. The field states are deliberately loud. A silently-rejected form is the single most common reason a real enquiry is abandoned, so an invalid field gets a red border, a red label and a sentence underneath saying what to do. --------------------------------------------------------------------------- */ .contact-layout{display:grid;gap:26px;grid-template-columns:1fr;align-items:start} @media(min-width:960px){ .contact-layout{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:34px} } .form-card{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:28px 24px;box-shadow:var(--shadow-sm)} @media(min-width:768px){.form-card{padding:38px 36px}} .form-card h2{font-size:clamp(22px,2.6vw,28px)} .form-intro{margin:10px 0 0;font-size:14.5px;line-height:1.7;color:var(--slate)} /* ---- the alert above the form ---- */ .alert{margin:22px 0 0;padding:14px 16px;border-radius:var(--r-sm); border:1px solid var(--line);background:var(--surface-2);font-size:14.5px} .alert strong{display:block;color:var(--ink);font-size:15px} .alert p{margin:5px 0 0;color:var(--slate);line-height:1.65} .alert-warn{border-color:#F1D3A3;background:#FFF9EE} .alert-ok{border-color:#B6E4D8;background:var(--mint-50)} /* ---- fields ---- */ .form{margin-top:26px} .field{margin-bottom:20px} .field-row{display:grid;gap:0 18px;grid-template-columns:1fr} @media(min-width:620px){.field-row{grid-template-columns:1fr 1fr}} .field label{display:block;font-size:14px;font-weight:600;color:var(--ink); margin-bottom:7px} .field .req{color:var(--brand);font-weight:700} .field .opt{font-weight:500;color:var(--slate-l);font-size:13px} .field input,.field select,.field textarea{ width:100%;padding:12px 14px;font:inherit;font-size:15.5px;color:var(--ink); background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm); transition:border-color .16s var(--ease),box-shadow .16s var(--ease)} .field textarea{resize:vertical;min-height:150px;line-height:1.65} .field select{appearance:none;cursor:pointer;padding-right:40px; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%235A6685' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center} .field input::placeholder,.field textarea::placeholder{color:var(--slate-l)} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(75,110,245,.16)} .field .hint{display:block;margin-top:7px;font-size:13px;color:var(--slate-l)} .field .err{display:block;margin-top:7px;font-size:13.5px;font-weight:600;color:#C0392B} .field.invalid label{color:#C0392B} .field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#E8A79E;background:#FFF7F6} .field.invalid input:focus,.field.invalid select:focus,.field.invalid textarea:focus{ border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.14)} /* ---- the honeypot ---- Positioned off-screen rather than display:none, because some form-filling bots skip anything that is display:none and this one is meant to be filled. Kept out of the tab order and hidden from screen readers by the aria-hidden on the wrapper. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---- submit ---- */ .form-foot{margin-top:4px} .form-foot .btn{width:100%} @media(min-width:620px){.form-foot .btn{width:auto;min-width:220px}} .legalese{margin:16px 0 0;font-size:13px;line-height:1.65;color:var(--slate-l)} .legalese a{color:var(--slate);text-decoration:underline;text-underline-offset:2px} /* ---- the aside ---- */ .contact-aside{display:grid;gap:18px} .aside-card{background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:22px 24px} .aside-card h3{font-size:16.5px;margin:0 0 8px} .aside-card p{font-size:14.5px;line-height:1.7;color:var(--slate);margin:0 0 14px} .aside-card p:last-child{margin-bottom:0} .aside-card .btn{width:100%} .aside-card ul.plain{list-style:none;display:grid;gap:14px} .aside-card ul.plain li{font-size:15px;color:var(--ink);word-break:break-word} .aside-card ul.plain .k{display:block;font-size:11.5px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:var(--slate-l);margin-bottom:3px} .aside-card ul.plain address{font-style:normal;color:var(--slate); font-size:14.5px;line-height:1.6} .ticks.small li{font-size:14px;line-height:1.6} .callout.small h3{font-size:15.5px} .callout.small p{font-size:14px;line-height:1.7} .aside-note{font-size:12.5px;line-height:1.7;color:var(--slate-l);padding:0 2px} /* ---- the thank-you panel ---- Given the full width of the column and a lot of air, because it is the one screen that has to read as "yes, that worked" at a glance. */ .thanks{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:40px 26px;text-align:center; box-shadow:var(--shadow-sm)} @media(min-width:768px){.thanks{padding:56px 48px}} .thanks .ic{width:60px;height:60px;margin:0 auto 22px;border-radius:50%; display:grid;place-items:center;font-size:27px;font-weight:700;color:#fff; background:var(--mint);box-shadow:0 10px 26px rgba(16,180,151,.32)} .thanks h2{font-size:clamp(23px,3vw,31px);margin:0 0 14px} .thanks p{font-size:15.5px;line-height:1.75;color:var(--slate); max-width:52ch;margin:0 auto 12px} .thanks p.sub{font-size:14px;color:var(--slate-l)} .thanks .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center; margin-top:26px}