/* ============================================================== PCR Educator — 04212026 stylesheet Master page + full homepage/internal page design system. Companion widget source: Pages/base-master-widgets.html ============================================================== */ @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,300;1,8..60,400;1,8..60,500&family=Inter:wght@300;400;500;600;700&display=swap"); /* ─── TELERIK PAGELAYOUT FULL-WIDTH OVERRIDE ─────── PageLayout.css caps .t-container at 1280px. The 2026 design uses full-bleed section backgrounds with inner .wrap (max-width:1440px) for content, so we release the outer cap. Widgets bring their own .wrap. */ .t-container, .t-container.t-container-fluid, .RadPageLayout .t-container, .RadPageLayout .t-container.t-container-fluid{ max-width:none !important; padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; width:100% !important; } .t-row{ margin-left:0 !important; margin-right:0 !important; } .t-col,.t-col-xs-12,.t-col-sm-12,.t-col-md-12,.t-col-lg-12{ padding-left:0 !important; padding-right:0 !important; } /* ─── TOKENS ──────────────────────────────────────── */ :root{ --ink: #0a0a0a; --ink-2: #1c1c1c; --ink-3: #4b4b4b; --ink-4: #767676; --ink-5: #a4a4a4; --paper: #ffffff; --off: #f5f5f3; --off-2: #e9e9e6; --rule: #e2e2de; --navy: #1746A2; --sky: #2BA8D0; --arts: #7B3FA0; --med: #0a7b7b; --med-lt: #5dd6cf; --warm: #C44A1A; --green: #1f7a46; --hero-bg:#080e1a; } /* ─── BASE RESET ──────────────────────────────────── */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink); } body{ font-family:"Inter", system-ui, -apple-system, sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } button{ font:inherit; border:none; background:none; color:inherit; cursor:pointer; } input,select,textarea{ font:inherit; color:inherit; } img{ max-width:100%; height:auto; display:block; } .serif{ font-family:"Source Serif 4",Georgia,serif; } /* ─── LAYOUT ──────────────────────────────────────── */ .wrap{ max-width:1440px; margin:0 auto; padding:0 56px; } @media(max-width:900px){ .wrap{ padding:0 24px; } } /* ─── LABELS ──────────────────────────────────────── */ .label{ font-family:"Inter"; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); } .label.on-dark{ color:rgba(255,255,255,0.55); } .label.accent{ color:var(--navy); } .label.arts-accent{ color:#c893ed; } .label.med-accent{ color:var(--med-lt); } /* ─── BUTTONS (pill) ──────────────────────────────── */ .btn{ display:inline-flex; align-items:center; gap:12px; padding:14px 28px; border-radius:999px; font-family:"Inter"; font-size:14px; font-weight:600; letter-spacing:0.01em; transition:background .2s, color .2s, border-color .2s, box-shadow .2s; } .btn .arr{ width:14px; height:10px; display:inline-block; position:relative; flex-shrink:0; } .btn .arr::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:1.5px; background:currentColor; transform:translateY(-50%); } .btn .arr::before{ content:""; position:absolute; right:0; top:50%; width:6px; height:6px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:translateY(-50%) rotate(45deg); } .btn:hover .arr{ width:20px; } .btn--primary{ background:var(--navy); color:#fff; box-shadow:0 1px 4px rgba(23,70,162,0.18); } .btn--primary:hover{ background:#0f3a8a; color:#fff; box-shadow:0 4px 16px rgba(23,70,162,0.28); } .btn--ink{ background:var(--ink); color:#fff; } .btn--ink:hover{ background:var(--ink-2); color:#fff; } .btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); } .btn--ghost:hover{ background:var(--ink); color:#fff; } .btn--ghost-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.5); } .btn--ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; } .btn--text{ padding:0; background:transparent; color:var(--navy); font-weight:600; font-size:14px; border-radius:0; gap:8px; } .btn--text:hover{ color:var(--ink); } /* ─── TOP GRADIENT BAR ────────────────────────────── */ .gradient-bar{ height:3px; background:linear-gradient(90deg, var(--navy) 0%, var(--sky) 60%, var(--med-lt) 100%); } /* ─── UTILITY BAR ─────────────────────────────────── */ .util{ background:var(--ink); color:rgba(255,255,255,0.7); font-size:12px; padding:9px 0; } .util-inner{ display:flex; justify-content:space-between; align-items:center; gap:24px; } .util-inner > div{ display:flex; gap:24px; align-items:center; } @media(max-width:700px){ .util-inner{ gap:0; justify-content:space-between; } .util-inner > div:first-child{ gap:0; } .util-inner > div:first-child > span:not(.status-dot){ display:none; } .util-sep{ display:none; } .util a:first-child{ display:none; } } .util a{ color:rgba(255,255,255,0.7); } .util a:hover{ color:#fff; } .util .status-dot{ display:inline-flex; gap:7px; align-items:center; font-size:12px; } .util .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(31,122,70,0.3); flex-shrink:0; } .util-sep{ color:rgba(255,255,255,0.2); font-size:12px; margin:0 4px; } .util-val{ color:#fff; font-weight:600; } /* ─── NAV ─────────────────────────────────────────── */ .nav{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--rule); } .nav-inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:0; height:88px; } .brand{ display:inline-flex; align-items:center; text-decoration:none; margin-right:24px; } .brand-logo{ height:64px; width:auto; flex-shrink:0; display:block; } .brand-text{ font-family:"Source Serif 4",Georgia,serif; font-size:26px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); line-height:1; } .brand-text .brand-accent{ color:var(--navy); font-weight:600; } /* Hide CMS admin artifact for unauthenticated visitors rendering */ #ctl00_ctl00_baseContent_LogoutControl1_LoginStatus1{ display:none !important; } .nav-links{ display:flex; gap:4px; justify-content:center; } .nav-category{ font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-5); text-align:center; padding:0 24px; } .nav-item{ position:relative; } .nav-item > a{ display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border-radius:6px; font-size:14px; font-weight:500; color:var(--ink-3); text-decoration:none; cursor:pointer; transition:color .15s, background .15s; white-space:nowrap; } .nav-item > a:hover, .nav-item:hover > a{ color:var(--ink); background:var(--off); } .nav-chev{ width:12px; height:12px; flex-shrink:0; opacity:0.45; transition:transform .2s; } .nav-item:hover .nav-chev{ transform:rotate(180deg); } /* dropdowns */ .nav-dd{ position:absolute; top:calc(100% + 6px); left:0; transform:translateY(-4px); background:#fff; border:1px solid var(--rule); border-radius:14px; box-shadow:0 20px 56px -8px rgba(0,0,0,0.13); opacity:0; pointer-events:none; transition:opacity .16s, transform .16s; z-index:200; } .nav-item:hover .nav-dd, .nav-item:focus-within .nav-dd{ opacity:1; pointer-events:auto; transform:translateY(0); } .nav-item:nth-last-child(-n+2) .nav-dd{ left:auto; right:0; } .nav-dd.dd-plat{ width:620px; padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:4px; } .nav-dd.dd-sol{ width:500px; padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:4px; } .nav-dd.dd-sm{ width:210px; padding:8px; } .nav-dd.dd-med{ width:340px; padding:16px; display:flex; flex-direction:column; gap:2px; } .dd-head{ grid-column:1/-1; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-4); padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--rule); } .dd-med .dd-head{ grid-column:unset; } .dd-row{ display:flex; align-items:flex-start; gap:10px; padding:10px; border-radius:8px; text-decoration:none; transition:background .15s; } .dd-row:hover{ background:var(--off); } .dd-ico{ width:32px; height:32px; border-radius:7px; flex-shrink:0; background:var(--off); border:1px solid var(--rule); display:grid; place-items:center; color:var(--navy); } .dd-txt .dtt{ font-size:13px; font-weight:600; color:var(--ink); line-height:1; margin-bottom:3px; } .dd-txt .dts{ font-size:11.5px; color:var(--ink-4); line-height:1.4; } .dd-tag{ font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); background:rgba(23,70,162,0.07); padding:2px 5px; border-radius:4px; margin-left:5px; vertical-align:middle; } .dd-sm a{ display:block; padding:9px 12px; border-radius:7px; font-size:13.5px; font-weight:500; color:var(--ink-3); text-decoration:none; transition:background .15s, color .15s; } .dd-sm a:hover{ background:var(--off); color:var(--ink); } .dd-div{ border-top:1px solid var(--rule); margin:6px 0; } /* nav cta */ .nav-cta{ display:flex; align-items:center; gap:16px; justify-content:flex-end; } .nav-cta .signin{ font-size:13px; color:var(--ink-4); font-weight:500; text-decoration:none; } .nav-cta .signin:hover{ color:var(--ink); } @media(max-width:1180px){ .nav-item>a{ padding:8px 10px; font-size:13px; } } @media(max-width:1000px){ .nav-links{ display:none; } .nav-inner{ display:flex; justify-content:space-between; align-items:center; height:72px; padding:0; } .brand{ margin-right:0; } .brand-logo{ height:52px; } /* Mobile drawer: open state shows .nav-links as vertical list */ #pcr-nav.open .nav-links, .nav.open .nav-links{ display:flex; flex-direction:column; align-items:stretch; position:fixed; top:72px; left:0; right:0; bottom:0; background:#fff; z-index:200; padding:16px 24px; gap:4px; overflow-y:auto; border-top:1px solid var(--rule); } #pcr-nav.open .nav-links .nav-item, .nav.open .nav-links .nav-item{ width:100%; } #pcr-nav.open .nav-links .nav-item > a, .nav.open .nav-links .nav-item > a{ display:block; width:100%; padding:14px 8px; font-size:15px; font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--rule); } /* Hide any dropdown panels within the mobile drawer */ #pcr-nav.open .nav-dd, .nav.open .nav-dd{ display:none !important; } } /* hamburger */ .nav-burger{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; background:transparent; border:none; cursor:pointer; color:var(--ink); padding:0; margin-left:8px; transition:background .15s; } .nav-burger:hover{ background:var(--off); } .nav-burger svg{ display:block; } @media(max-width:1000px){ .nav-burger{ display:flex; } } .nav-cta-mobile{ display:none; } @media(max-width:1000px){ .nav-cta-desktop{ display:none; } .nav-cta-mobile{ display:inline-flex; font-size:13px; padding:10px 16px; } } /* ─── MOBILE DRAWER ───────────────────────────────── */ .mobile-menu{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:200; width:100%; max-width:100%; background:#fff; overflow-y:auto; overflow-x:hidden; padding:0; transform:translateX(100%); transition:transform .25s cubic-bezier(0.4,0,0.2,1); } .mobile-menu.open{ transform:translateX(0); } @media(min-width:1001px){ .mobile-menu{ display:none !important; } } @media(max-width:1000px){ .mobile-menu{ display:block; } } .mob-header{ display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 24px; border-bottom:1px solid var(--rule); position:sticky; top:0; background:#fff; z-index:2; width:100%; } .mob-close{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; background:transparent; border:none; cursor:pointer; color:var(--ink); padding:0; } .mob-close:hover{ background:var(--off); } .mob-section{ border-bottom:1px solid var(--rule); padding:8px 0; } .mob-section-title{ font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-4); padding:12px 24px 6px; } .mob-link{ display:flex; align-items:center; justify-content:space-between; padding:13px 24px; font-size:15px; font-weight:500; color:var(--ink-3); text-decoration:none; transition:background .12s, color .12s; } .mob-link:hover{ background:var(--off); color:var(--ink); } .mob-link .mob-tag{ font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); background:rgba(23,70,162,0.07); padding:2px 6px; border-radius:4px; } .mob-ctas{ padding:24px; display:flex; flex-direction:column; gap:12px; } .mob-ctas .btn{ width:100%; justify-content:center; } .mob-signin{ text-align:center; font-size:14px; color:var(--ink-4); text-decoration:none; padding-top:4px; } /* ─── HERO ────────────────────────────────────────── */ .hero{ position:relative; background:var(--hero-bg); color:#fff; min-height:86vh; overflow:hidden; } .hero-bg{ position:absolute; inset:0; background: radial-gradient(1100px circle at 80% 50%, rgba(43,168,208,0.18), transparent 55%), radial-gradient(900px circle at 15% 100%, rgba(23,70,162,0.20), transparent 55%), var(--hero-bg); } .hero-bg::after{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size:72px 72px; pointer-events:none; mask-image:linear-gradient(180deg, transparent 10%, black 35%, black 65%, transparent); } .hero-inner{ position:relative; z-index:2; padding:100px 56px 80px; min-height:86vh; display:flex; flex-direction:column; justify-content:space-between; } @media(max-width:900px){ .hero-inner{ padding:72px 24px 56px; } } .hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:"Inter"; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:32px; } .hero-eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--sky); flex-shrink:0; } .hero-body{ display:grid; grid-template-columns:1.15fr 1fr; gap:80px; align-items:center; flex:1; padding:20px 0 60px; } @media(max-width:980px){ .hero-body{ grid-template-columns:1fr; gap:48px; } } .hero h1{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(48px, 7.8vw, 112px); line-height:0.93; letter-spacing:-0.03em; margin:0; color:#fff; text-wrap:balance; } .hero h1 .it{ font-style:italic; font-weight:400; color:var(--sky); } .hero-sub{ font-size:18px; color:rgba(255,255,255,0.7); max-width:46ch; margin:32px 0 0; line-height:1.55; text-wrap:pretty; } .hero-outcomes{ display:flex; flex-direction:column; gap:0; border-left:1px solid rgba(255,255,255,0.14); padding-left:40px; } .hero-outcome{ padding:24px 0; border-bottom:1px solid rgba(255,255,255,0.1); } .hero-outcome:last-child{ border-bottom:none; } .hero-outcome .v{ font-family:"Source Serif 4",serif; font-weight:300; font-size:54px; line-height:1; letter-spacing:-0.03em; color:#fff; display:block; margin-bottom:6px; } .hero-outcome .l{ display:block; font-size:13px; color:rgba(255,255,255,0.65); line-height:1.4; margin-bottom:4px; } .hero-outcome .s{ display:block; font-family:"Source Serif 4",serif; font-style:italic; font-size:12px; color:rgba(255,255,255,0.4); } .hero-bottom{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding-top:32px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,0.12); } .hero-cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; } /* Light hero variant — internal pages */ .hero.hero--light{ background:#fff; color:var(--ink); min-height:auto; padding:120px 0; border-bottom:1px solid var(--rule); } .hero.hero--light .hero-inner{ padding:0 56px; min-height:auto; display:block; } .hero.hero--light h1{ color:var(--ink); font-size:clamp(48px, 7.8vw, 96px); line-height:0.95; } .hero.hero--light .hero-sub{ color:var(--ink-3); max-width:56ch; margin-top:28px; } @media(max-width:900px){ .hero.hero--light .hero-inner{ padding:0 24px; } } /* ─── TRUST STRIP ─────────────────────────────────── */ .trust-strip{ background:#fff; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .trust-inner{ display:flex; align-items:stretch; } .trust-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px 16px; gap:3px; border-right:1px solid var(--rule); } .trust-item:last-child{ border-right:none; } .trust-item .ti-val{ font-family:"Inter"; font-size:20px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; line-height:1; } .trust-item .ti-lbl{ font-family:"Inter"; font-size:11px; font-weight:500; color:var(--ink-4); text-align:center; line-height:1.3; } @media(max-width:700px){ .trust-inner{ flex-wrap:wrap; } .trust-item{ flex:1 1 45%; border-right:none; border-bottom:1px solid var(--rule); } } /* ─── SECTION WRAPPER ─────────────────────────────── */ section.block{ padding:112px 0; } section.block.on-dark{ background:var(--ink); color:#fff; } section.block.on-off{ background:var(--off); } .section-label{ font-family:"Inter"; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); display:block; margin-bottom:16px; } .section-label.on-dark{ color:var(--sky); } .section-label.arts{ color:#c893ed; } .section-label.med{ color:var(--med-lt); } .big-h{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(38px, 5vw, 68px); line-height:1.0; letter-spacing:-0.025em; margin:0; text-wrap:balance; } .big-h .it{ font-style:italic; font-weight:400; } .big-h .sky{ color:var(--sky); } .on-dark .big-h{ color:#fff; } .section-intro{ display:grid; grid-template-columns:1fr 1.5fr; gap:64px; align-items:end; margin-bottom:72px; } @media(max-width:900px){ .section-intro{ grid-template-columns:1fr; gap:24px; } } .section-intro .lead{ font-size:17px; color:var(--ink-3); line-height:1.6; max-width:52ch; text-wrap:pretty; } .on-dark .section-intro .lead{ color:rgba(255,255,255,0.65); } /* ─── HOW WE'RE DIFFERENT ─────────────────────────── */ .diff{ background:var(--off); padding:112px 0; } .diff-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:16px; overflow:hidden; margin-top:56px; } @media(max-width:900px){ .diff-grid{ grid-template-columns:1fr; } } .diff-card{ background:#fff; padding:48px 44px 52px; display:flex; flex-direction:column; gap:0; } .diff-card .dc-kicker{ font-family:"Inter"; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); margin-bottom:20px; } .diff-card .dc-num{ font-family:"Inter"; font-size:52px; font-weight:800; letter-spacing:-0.04em; line-height:1; color:var(--ink); margin-bottom:20px; } .diff-card .dc-num sup{ font-size:24px; vertical-align:super; letter-spacing:0; } .diff-card h3{ font-family:"Source Serif 4",serif; font-weight:400; font-style:italic; font-size:22px; line-height:1.25; letter-spacing:-0.01em; color:var(--ink); margin:0 0 16px; } .diff-card p{ font-size:14px; color:var(--ink-3); margin:0; line-height:1.7; } .diff-card .dc-proof{ margin-top:32px; padding-top:24px; border-top:1px solid var(--rule); font-size:12px; color:var(--ink-4); font-weight:500; } /* ─── PATHS (4 cards) ─────────────────────────────── */ .paths{ background:var(--paper); padding:112px 0; } .paths-rail{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; margin-top:56px; } @media(max-width:1100px){ .paths-rail{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .paths-rail{ grid-template-columns:1fr; } } .path-card{ background:var(--off); border-radius:16px; padding:36px 30px 32px; display:flex; flex-direction:column; gap:18px; min-height:480px; border:1px solid var(--off-2); transition:background .3s, color .3s, border-color .3s, box-shadow .3s; } .path-card:hover{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 20px 48px -12px rgba(0,0,0,0.25); } .path-card:hover .p-tag{ color:rgba(255,255,255,0.5); } .path-card:hover p{ color:rgba(255,255,255,0.7); } .path-card:hover .p-foot{ border-top-color:rgba(255,255,255,0.15); } .path-card:hover .p-foot .m{ color:rgba(255,255,255,0.5); } .path-card:hover .p-list li{ border-top-color:rgba(255,255,255,0.1); color:rgba(255,255,255,0.85); } .path-card:hover .p-list li::before{ background:rgba(255,255,255,0.4); } .p-tag{ font-family:"Inter"; font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); } .path-card h3{ font-family:"Source Serif 4",serif; font-weight:300; font-size:30px; line-height:1.05; letter-spacing:-0.02em; margin:0; text-wrap:balance; } .path-card h3 .it, .path-card h3 .ac{ font-style:italic; font-weight:400; } .path-card.k12 h3 .ac{ color:var(--navy); } .path-card.he h3 .ac{ color:var(--warm); } .path-card.pa h3 .ac{ color:var(--arts); } .path-card.ms h3 .ac{ color:var(--med); } .path-card:hover h3 .ac{ color:inherit; opacity:.85; } .path-card > p{ font-size:13.5px; color:var(--ink-3); margin:0; line-height:1.6; max-width:28ch; } .p-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; } .p-list li{ border-top:1px solid var(--off-2); padding:7px 0 7px 13px; position:relative; font-size:12px; color:var(--ink-2); font-weight:500; line-height:1.4; } .p-list li::before{ content:""; position:absolute; left:0; top:14px; width:7px; height:1px; background:var(--ink-4); } .p-foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding-top:20px; border-top:1px solid var(--off-2); } .p-foot .m{ font-size:10.5px; letter-spacing:0.08em; font-family:"Inter"; font-weight:600; text-transform:uppercase; color:var(--ink-4); } /* ─── PLATFORM SURFACES ───────────────────────────── */ .surf{ background:var(--off); padding:112px 0; } .surf-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:48px; } .surf-grid .surf-card:nth-child(1){ grid-column:1/3; } .surf-grid .surf-card:nth-child(2){ grid-column:3/5; } .surf-grid .surf-card:nth-child(3){ grid-column:5/7; } .surf-grid .surf-card:nth-child(4){ grid-column:2/4; } .surf-grid .surf-card:nth-child(5){ grid-column:4/6; } .surf-card{ border-radius:14px; background:#fff; border:1px solid var(--off-2); padding:28px 24px; display:flex; flex-direction:column; gap:14px; transition:box-shadow .2s; } .surf-card:hover{ box-shadow:0 8px 32px -8px rgba(0,0,0,0.12); } @media(max-width:900px){ .surf-grid{ grid-template-columns:1fr 1fr; } .surf-grid .surf-card:nth-child(n){ grid-column:auto; } } @media(max-width:600px){ .surf-grid{ grid-template-columns:1fr; } } .surf-card .s-tag{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--navy); display:flex; justify-content:space-between; } .surf-card .s-tag .mod{ font-size:11px; color:var(--ink-5); font-weight:600; letter-spacing:0.08em; } .surf-card h3{ font-family:"Source Serif 4",serif; font-weight:300; font-size:28px; line-height:1.1; letter-spacing:-0.02em; margin:0; text-wrap:balance; } .surf-card h3 .it{ font-style:italic; color:var(--sky); } .surf-card > p{ font-size:13.5px; color:var(--ink-3); margin:0; line-height:1.6; } .surf-card .screen-frame{ border-radius:8px; border:1px solid var(--off-2); background:var(--off); overflow:hidden; height:140px; display:flex; flex-direction:column; flex-shrink:0; } .surf-card .screen-frame .sf-bar{ background:#fff; border-bottom:1px solid var(--off-2); padding:8px 12px; display:flex; align-items:center; gap:6px; } .surf-card .screen-frame .sf-bar .dot{ width:7px; height:7px; border-radius:50%; } .surf-card .screen-frame .sf-content{ flex:1; display:grid; grid-template-columns:1.4fr 1fr; gap:8px; padding:10px 12px; } .surf-card .screen-frame .sf-col{ display:flex; flex-direction:column; gap:6px; } .surf-card .screen-frame .sf-row{ background:#fff; border-radius:4px; border:1px solid var(--off-2); height:18px; } .surf-card .screen-frame .sf-row.wide{ height:28px; } .surf-card .screen-frame .sf-row.short{ width:60%; } .surf-card ul{ list-style:none; padding:0; margin:0; } .surf-card ul li{ padding:9px 0; font-size:13px; color:var(--ink-2); font-weight:500; border-top:1px solid var(--off-2); display:flex; justify-content:space-between; align-items:center; } .surf-card ul li:last-child{ border-bottom:1px solid var(--off-2); } .surf-card ul li .tag{ font-size:10px; letter-spacing:0.1em; color:var(--ink-5); font-weight:600; text-transform:uppercase; } .surf-hint{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-family:"Inter"; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-4); } .ctrl-btn{ width:40px; height:40px; border-radius:999px; border:1px solid var(--off-2); background:#fff; display:grid; place-items:center; cursor:pointer; transition:background .15s, border-color .15s; } .ctrl-btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; } /* ─── PERFORMING ARTS FEATURE ─────────────────────── */ .pa-feat{ background:#0a0a0a; color:#fff; padding:128px 0; position:relative; overflow:hidden; } .pa-feat::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(1100px circle at 80% 30%, rgba(123,63,160,0.21), transparent 55%), linear-gradient(180deg, #0a0a0a 0%, #110a17 100%); opacity:.6; } .pa-feat .wrap{ position:relative; z-index:1; } .pa-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:start; margin-top:48px; } @media(max-width:980px){ .pa-grid{ grid-template-columns:1fr; gap:40px; } } .pa-rank{ display:inline-flex; align-items:center; gap:12px; padding:7px 14px; background:rgba(123,63,160,0.18); border:1px solid rgba(123,63,160,0.45); border-radius:4px; margin-bottom:24px; } .pa-rank .n{ font-family:"Source Serif 4",serif; font-style:italic; font-size:19px; color:#c893ed; font-weight:500; } .pa-rank .t{ font-family:"Inter"; font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#fff; } .pa-feat h2{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(40px, 5.5vw, 80px); line-height:0.97; letter-spacing:-0.028em; margin:0 0 24px; color:#fff; text-wrap:balance; } .pa-feat h2 .it{ font-style:italic; color:#c893ed; } .pa-feat .lede{ font-size:17px; color:rgba(255,255,255,0.72); max-width:44ch; margin:0 0 32px; line-height:1.6; } .feat-list{ list-style:none; padding:0; margin:0 0 28px; display:grid; gap:0; border-top:1px solid rgba(255,255,255,0.12); } .feat-list li{ padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.1); font-size:13.5px; color:rgba(255,255,255,0.82); display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:baseline; } .feat-list li .n{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; } .feat-ctas{ display:flex; gap:10px; flex-wrap:wrap; } .pa-subs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .pa-sub{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:24px 20px; display:flex; flex-direction:column; gap:8px; } .pa-sub .num{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; color:#c893ed; } .pa-sub h4{ font-family:"Source Serif 4",serif; font-weight:400; font-size:21px; letter-spacing:-0.01em; margin:0; color:#fff; } .pa-sub p{ font-size:12.5px; line-height:1.55; color:rgba(255,255,255,0.58); margin:0; } .pa-sub .stat{ margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,0.12); font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#c893ed; } /* ─── MEDICAL SCHOOLS FEATURE ─────────────────────── */ .med-feat{ background:#040f10; color:#fff; padding:128px 0; position:relative; overflow:hidden; } .med-feat::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(1100px circle at 20% 40%, rgba(10,123,123,0.28), transparent 55%), radial-gradient(700px circle at 90% 80%, rgba(10,123,123,0.14), transparent 50%), linear-gradient(180deg, #040f10 0%, #071414 100%); opacity:.7; } .med-feat .wrap{ position:relative; z-index:1; } .med-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:start; margin-top:48px; } @media(max-width:980px){ .med-grid{ grid-template-columns:1fr; gap:40px; } } .med-badge{ display:inline-flex; align-items:center; gap:12px; padding:7px 14px; background:rgba(10,123,123,0.18); border:1px solid rgba(93,214,207,0.35); border-radius:4px; margin-bottom:24px; } .med-badge .n{ font-family:"Source Serif 4",serif; font-style:italic; font-size:19px; color:var(--med-lt); font-weight:500; } .med-badge .t{ font-family:"Inter"; font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#fff; } .med-feat h2{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(40px, 5.5vw, 80px); line-height:0.97; letter-spacing:-0.028em; margin:0 0 24px; color:#fff; text-wrap:balance; } .med-feat h2 .it{ font-style:italic; color:var(--med-lt); } .med-feat .lede{ font-size:17px; color:rgba(255,255,255,0.72); max-width:44ch; margin:0 0 32px; line-height:1.6; } .med-subs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .med-sub{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:24px 20px; display:flex; flex-direction:column; gap:8px; } .med-sub .num{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; color:var(--med-lt); } .med-sub h4{ font-family:"Source Serif 4",serif; font-weight:400; font-size:21px; letter-spacing:-0.01em; margin:0; color:#fff; } .med-sub p{ font-size:12.5px; line-height:1.55; color:rgba(255,255,255,0.58); margin:0; } .med-sub .stat{ margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,0.12); font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--med-lt); } /* ─── SPECIALTY RAIL ──────────────────────────────── */ .spec-rail{ background:#fff; padding:52px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .spec-row{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; } .spec-row .lead{ font-family:"Inter"; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); } .spec-chip{ display:inline-flex; gap:8px; align-items:center; font-size:14px; font-weight:500; color:var(--ink-3); padding:6px 0; border-bottom:1.5px solid transparent; transition:color .15s, border-color .15s; } .spec-chip:hover{ color:var(--ink); border-color:var(--ink); } .spec-chip .n{ font-size:10px; color:var(--ink-5); font-weight:600; letter-spacing:0.08em; } /* ─── PROOF (2x2 quotes) ──────────────────────────── */ .proof{ background:#fff; padding:120px 0; } .proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; } @media(max-width:860px){ .proof-grid{ grid-template-columns:1fr; } } .proof-q{ padding:40px; border-radius:16px; background:var(--off); border:1px solid var(--off-2); display:flex; flex-direction:column; gap:24px; min-height:380px; transition:box-shadow .2s; } .proof-q:hover{ box-shadow:0 8px 32px -8px rgba(0,0,0,0.1); } .proof-q .q-cat{ font-family:"Inter"; font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); display:flex; justify-content:space-between; } .proof-q .q-cat strong{ color:var(--ink); } .proof-q blockquote{ margin:0; font-family:"Source Serif 4",serif; font-size:22px; line-height:1.4; letter-spacing:-0.01em; font-weight:400; color:var(--ink); text-wrap:balance; } .proof-q blockquote .it{ font-style:italic; color:var(--navy); } .proof-q.pa blockquote .it{ color:var(--arts); } .proof-q.he blockquote .it{ color:var(--warm); } .proof-q.ms blockquote .it{ color:var(--med); } .proof-q .metric{ display:flex; justify-content:space-between; align-items:flex-end; padding:20px 0; border-top:1px solid var(--off-2); border-bottom:1px solid var(--off-2); } .proof-q .metric .v{ font-family:"Source Serif 4",serif; font-weight:300; font-size:52px; letter-spacing:-0.03em; line-height:1; color:var(--ink); } .proof-q .metric .l{ font-size:12px; color:var(--ink-4); max-width:20ch; text-align:right; line-height:1.5; font-weight:500; } .proof-q .atrib{ margin-top:auto; display:flex; flex-direction:column; gap:3px; } .proof-q .atrib .n{ font-size:14px; font-weight:600; color:var(--ink); } .proof-q .atrib .r{ font-size:12.5px; color:var(--ink-4); } /* ─── LIFECYCLE ───────────────────────────────────── */ .life{ background:var(--off); padding:112px 0; } .life-rail{ display:grid; grid-template-columns:repeat(7,1fr); border-top:2px solid var(--ink); margin-top:56px; } @media(max-width:980px){ .life-rail{ grid-template-columns:1fr 1fr; } } .life-step{ padding:24px 16px 28px 0; border-right:1px solid var(--rule); display:flex; flex-direction:column; gap:8px; min-height:180px; } .life-step:last-child{ border-right:none; } .life-step .no{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); } .life-step .nm{ font-family:"Source Serif 4",serif; font-weight:400; font-size:22px; letter-spacing:-0.01em; color:var(--ink); line-height:1.15; } .life-step .sub{ font-size:12px; color:var(--ink-4); line-height:1.5; margin-top:auto; } /* ─── PRESS BAR ───────────────────────────────────── */ .press{ background:var(--ink); color:#fff; padding:52px 0; } .press-row{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; } .press-item{ display:flex; flex-direction:column; gap:4px; padding:0 40px; border-right:1px solid rgba(255,255,255,0.1); } .press-item:first-child{ padding-left:0; } .press-item:last-child{ border-right:none; padding-right:0; } .press-item .pk{ font-family:"Inter"; font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); } .press-item .pv{ font-family:"Source Serif 4",serif; font-style:italic; font-size:19px; color:rgba(255,255,255,0.88); letter-spacing:-0.01em; } /* ─── DEMO CTA ────────────────────────────────────── */ .democta{ background:#fff; padding:128px 0; border-top:1px solid var(--rule); } .democta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; } @media(max-width:980px){ .democta-grid{ grid-template-columns:1fr; gap:40px; } } .democta h2{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(40px, 4.8vw, 64px); line-height:1.0; letter-spacing:-0.025em; margin:20px 0 0; color:var(--ink); text-wrap:balance; } .democta h2 .it{ font-style:italic; color:var(--sky); } .democta .lede{ font-size:17px; color:var(--ink-3); max-width:44ch; margin:24px 0 0; line-height:1.6; } .democta-bullets{ list-style:none; padding:0; margin:36px 0 0; border-top:1px solid var(--rule); } .democta-bullets li{ padding:14px 0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:baseline; font-size:15px; color:var(--ink); } .democta-bullets li .n{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--sky); } /* ─── FORM CARD ───────────────────────────────────── */ .form-card{ background:#fff; border:1.5px solid var(--rule); padding:40px; border-radius:16px; box-shadow:0 4px 24px -8px rgba(0,0,0,0.08); } .form-card h4{ font-family:"Source Serif 4",serif; font-weight:400; font-size:26px; letter-spacing:-0.015em; margin:0 0 6px; } .form-card .sub{ color:var(--ink-3); font-size:13.5px; margin:0 0 28px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media(max-width:600px){ .form-row{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:5px; margin-bottom:18px; } .field label{ font-family:"Inter"; font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); } .field input, .field select, .field textarea{ padding:13px 0; background:transparent; border:0; border-bottom:1.5px solid var(--off-2); border-radius:0; font-size:15px; font-family:"Inter"; transition:border-color .2s; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ink); } .field.invalid input, .field.invalid select{ border-color:#d43a1a; } .field .err{ font-size:11px; color:#d43a1a; font-family:"Inter"; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; } .role-pick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .role-chip{ padding:7px 14px; background:transparent; border:1.5px solid var(--off-2); border-radius:999px; font-size:12px; font-family:"Inter"; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-3); cursor:pointer; transition:all .15s; } .role-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); } .role-chip:hover:not(.on){ border-color:var(--ink-4); color:var(--ink); } .form-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:16px; padding-top:20px; border-top:1px solid var(--rule); flex-wrap:wrap; } .form-foot .note{ font-size:11px; color:var(--ink-5); max-width:26ch; line-height:1.5; font-family:"Inter"; font-weight:500; } .success-card{ padding:48px 40px; text-align:left; } .success-card .chk{ width:44px; height:44px; border-radius:999px; border:1.5px solid var(--ink); display:grid; place-items:center; margin-bottom:20px; } /* ─── GRID UTILITIES ──────────────────────────────── */ .grid-3col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; margin-top:56px; } @media(max-width:900px){ .grid-3col{ grid-template-columns:1fr; } } /* ─── FOOTER ──────────────────────────────────────── */ footer.pcr-footer{ background:var(--ink); color:rgba(255,255,255,0.7); padding:88px 0 44px; } .foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.12); } @media(max-width:900px){ .foot-top{ grid-template-columns:1fr 1fr; } } .foot-col h5{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin:0 0 20px; } .foot-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:13.5px; color:rgba(255,255,255,0.8); } .foot-col ul li a{ color:rgba(255,255,255,0.8); transition:color .15s; } .foot-col a:hover{ color:#fff; } .foot-brand-name{ font-family:"Source Serif 4",serif; font-size:28px; letter-spacing:-0.02em; color:#fff; font-weight:400; margin:0 0 4px; } .foot-brand-tag{ font-family:"Inter"; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.45); font-weight:700; } .foot-brand-p{ max-width:36ch; font-size:13.5px; color:rgba(255,255,255,0.6); line-height:1.6; margin:20px 0 0; } .foot-badges{ display:flex; gap:8px; margin-top:22px; flex-wrap:wrap; } .foot-badge{ padding:5px 10px; border:1px solid rgba(255,255,255,0.2); border-radius:4px; font-size:10.5px; font-weight:700; color:rgba(255,255,255,0.75); letter-spacing:0.1em; text-transform:uppercase; font-family:"Inter"; } .foot-seo{ padding:20px 0; font-size:11px; color:rgba(255,255,255,0.4); line-height:1.8; border-bottom:1px solid rgba(255,255,255,0.1); margin-top:0; background:var(--ink); } .foot-seo strong{ color:rgba(255,255,255,0.65); } .foot-bottom{ padding:18px 0 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:"Inter"; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.4); } /* ─── FOOTER MENU (Telerik RadMenu overrides) ────── */ /* Renders a multi-level RadMenu as a static multi-column list */ .foot-menu, .foot-menu .RadMenu, .foot-menu.RadMenu{ background:transparent !important; border:0 !important; width:100%; font-family:"Inter",sans-serif; } .foot-menu .rmRootGroup{ background:transparent !important; border:0 !important; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:36px; list-style:none; margin:0; padding:0; } @media(max-width:1100px){ .foot-menu .rmRootGroup{ grid-template-columns:repeat(3, minmax(0,1fr)); } } @media(max-width:720px){ .foot-menu .rmRootGroup{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media(max-width:480px){ .foot-menu .rmRootGroup{ grid-template-columns:1fr; } } .foot-menu .rmRootGroup > .rmItem{ background:transparent !important; border:0 !important; float:none !important; display:block !important; width:100% !important; margin:0 !important; padding:0 !important; } /* Root item label: the column heading */ .foot-menu .rmRootGroup > .rmItem > .rmLink, .foot-menu .rmRootGroup > .rmItem > a.rmLink{ background:transparent !important; border:0 !important; padding:0 0 20px !important; margin:0 !important; display:block !important; cursor:default; text-decoration:none !important; color:rgba(255,255,255,0.45) !important; font-size:10px !important; font-weight:700 !important; letter-spacing:0.12em !important; text-transform:uppercase !important; line-height:1 !important; } .foot-menu .rmRootGroup > .rmItem > .rmLink:hover, .foot-menu .rmRootGroup > .rmItem.rmFocused > .rmLink, .foot-menu .rmRootGroup > .rmItem.rmExpanded > .rmLink{ background:transparent !important; color:rgba(255,255,255,0.45) !important; } /* Hide expand arrows on all items */ .foot-menu .rmExpandRight, .foot-menu .rmExpandDown, .foot-menu .rmExpandBottom, .foot-menu .rmExpandTop{ display:none !important; } /* Always show sub-group inline, never as popout */ .foot-menu .rmSlide{ display:block !important; position:static !important; width:auto !important; height:auto !important; overflow:visible !important; visibility:visible !important; opacity:1 !important; clip:auto !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .foot-menu .rmGroup, .foot-menu ul.rmGroup{ display:block !important; position:static !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; list-style:none; } .foot-menu .rmGroup .rmItem{ background:transparent !important; border:0 !important; float:none !important; display:block !important; width:auto !important; margin:0 !important; padding:0 0 10px !important; } .foot-menu .rmGroup .rmLink{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; display:inline-block !important; color:rgba(255,255,255,0.8) !important; font-size:13.5px !important; font-weight:400 !important; letter-spacing:0 !important; text-transform:none !important; line-height:1.5 !important; text-decoration:none !important; transition:color .15s; } .foot-menu .rmGroup .rmLink:hover, .foot-menu .rmGroup .rmItem.rmFocused > .rmLink{ background:transparent !important; color:#fff !important; } .foot-menu .rmText{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; } /* ─── SCROLL REVEAL ───────────────────────────────── */ .reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; } .reveal.in{ opacity:1; transform:none; } /* ══════════════════════════════════════════════════════════════════ HEADER — Menu widget-driven (sitemap 2424) Layout: #TopNav row with 3 cols (#Logo, #NavLinks, #NavCTA). The Menu widget in #NavLinks renders: div.nav.nav-primary > ul.noprint > li.MenuDefaultCss > a.MenuDefaultNodeCss > ul > li.MenuDefaultCss > a.MenuDefaultNodeCss (children) ══════════════════════════════════════════════════════════════════ */ /* Brand widget (Menu widget pointing to Logo sitemap). DOM: #Logo > panel > .brand > #nav-close-btn + #menuul > li > a (logo link). Hide mobile toggles in desktop. Style only the menu anchor as the logo mark. */ #TopNav #Logo, #TopNav #Logo > div, #TopNav #Logo .brand, #TopNav #Logo ul, #TopNav #Logo li{ display:block; list-style:none !important; margin:0 !important; padding:0 !important; background:none !important; border:0 !important; height:auto; width:auto; position:static; } #TopNav #Logo .navigationSubmenu, #TopNav #Logo #nav-close-btn, #TopNav #Logo #nav-open-btn{ display:none !important; } #TopNav #Logo #menuul > li > a{ display:block; height:64px; width:220px; background:url("/ApplicationFiles/PCR/Style/css/pcr-logo.svg") no-repeat left center/contain; font-size:0 !important; color:transparent !important; text-indent:-9999px; white-space:nowrap; overflow:hidden; text-decoration:none; } #TopNav #Logo #menuul > li > ul{ display:none !important; } @media(max-width:1000px){ #TopNav #Logo #nav-open-btn{ display:inline-flex !important; } } /* Header row: brand | nav | cta on one line */ #TopNav.t-row{ display:flex !important; align-items:center; flex-wrap:nowrap; gap:24px; max-width:1440px; margin:0 auto !important; padding:0 32px; height:88px; position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--rule); } #TopNav > #Logo, #TopNav > #NavLinks, #TopNav > #NavCTA{ width:auto !important; max-width:none !important; flex:0 0 auto; } #TopNav > #Logo{ flex:0 0 auto; } #TopNav > #NavLinks{ flex:1 1 auto; display:flex; justify-content:center; } #TopNav > #NavCTA{ flex:0 0 auto; margin-left:auto; } /* Primary nav — top level horizontal list */ .nav-primary{ position:relative; } .nav-primary > ul.noprint, .nav-primary > ul{ list-style:none; margin:0; padding:0; display:flex; gap:4px; align-items:center; } .nav-primary > ul > li.MenuDefaultCss{ list-style:none; position:relative; padding:0; margin:0; } .nav-primary > ul > li > a.MenuDefaultNodeCss{ display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border-radius:6px; font-size:14px; font-weight:500; color:var(--ink-3); text-decoration:none; cursor:pointer; transition:color .15s, background .15s; white-space:nowrap; } .nav-primary > ul > li > a::after{ content:""; display:inline-block; width:10px; height:10px; background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; opacity:0.45; transition:transform .2s; } /* No chevron on items without children (Customers — empty sub-ul) */ .nav-primary > ul > li:has(> ul:empty) > a::after, .nav-primary > ul > li:not(:has(> ul)) > a::after{ display:none; } /* Hide empty sub-uls entirely so they can't intercept hover */ .nav-primary > ul > li > ul:empty{ display:none !important; } .nav-primary > ul > li:hover > a::after{ transform:rotate(180deg); } .nav-primary > ul > li > a:hover, .nav-primary > ul > li:hover > a{ color:var(--ink); background:var(--off); } /* Mega dropdown panel (child ul) */ .nav-primary > ul > li > ul{ list-style:none; margin:0; position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid var(--rule); border-radius:14px; box-shadow:0 20px 56px -8px rgba(0,0,0,0.13); opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .16s, transform .16s; z-index:200; } /* Invisible hover bridge: covers the 6px gap between nav item and mega panel so cursor movement from nav down into the panel doesn't drop :hover. */ .nav-primary > ul > li > ul::after{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } .nav-primary > ul > li:hover > ul, .nav-primary > ul > li:focus-within > ul{ opacity:1; pointer-events:auto; transform:translateY(0); } /* Platform & Solutions: 2-column grid with section header */ .nav-primary > ul > li:nth-child(1) > ul, .nav-primary > ul > li:nth-child(2) > ul{ display:grid; grid-template-columns:1fr 1fr; gap:4px; width:620px; padding:24px; } .nav-primary > ul > li:nth-child(2) > ul{ width:500px; } /* Resources & Company: single column, right-aligned */ .nav-primary > ul > li:nth-child(4) > ul, .nav-primary > ul > li:nth-child(5) > ul{ display:flex; flex-direction:column; gap:2px; width:340px; padding:16px; } .nav-primary > ul > li:nth-last-child(-n+2) > ul{ left:auto; right:0; } /* Section header injected via ::before on the child ul */ .nav-primary > ul > li > ul::before{ content:""; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-4, #777); padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--rule, #e5e7eb); display:block; } .nav-primary > ul > li:nth-child(1) > ul::before, .nav-primary > ul > li:nth-child(2) > ul::before{ grid-column:1 / -1; } .nav-primary > ul > li:nth-child(1) > ul::before{ content:"Five surfaces — one data model"; } .nav-primary > ul > li:nth-child(2) > ul::before{ content:"By institution type"; } .nav-primary > ul > li:nth-child(4) > ul::before{ content:"Learn & compare"; } .nav-primary > ul > li:nth-child(5) > ul::before{ content:"About PCR Educator"; } /* Dropdown rows — icon + title + description (mockup-matching) */ .nav-primary > ul > li > ul > li{ list-style:none; padding:0; margin:0; } .nav-primary > ul > li > ul > li > a{ display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; column-gap:10px; row-gap:3px; align-items:start; padding:10px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink, #111); text-decoration:none; line-height:1; transition:background .15s; } .nav-primary > ul > li > ul > li > a:hover{ background:var(--off, #f5f6f8); color:var(--ink, #111); } /* Icon box rendered via ::before — spans both rows */ .nav-primary > ul > li > ul > li > a::before{ content:""; grid-row:1 / span 2; grid-column:1; width:32px; height:32px; border-radius:7px; background-color:var(--off, #f5f6f8); border:1px solid var(--rule, #e5e7eb); background-repeat:no-repeat; background-position:center; background-size:18px 18px; align-self:start; } /* Description line rendered via ::after */ .nav-primary > ul > li > ul > li > a::after{ grid-column:2; grid-row:2; font-size:11.5px; font-weight:400; color:var(--ink-4, #6b7280); line-height:1.4; content:""; } /* Platform descriptions */ .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(1) > a::after{ content:"Enrollment, scheduling, gradebook, transcripts"; } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(2) > a::after{ content:"Tuition billing, GL, AP/AR, financial aid"; } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(3) > a::after{ content:"Inquiry funnel, AI follow-up, alumni, donors"; } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(4) > a::after{ content:"Dashboards, NL queries, cohort analysis"; } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(5) > a::after{ content:"AI-assisted workflows with oversight"; } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(6) > a::after{ content:"Student, family, faculty, staff access"; } /* Solutions descriptions */ .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(1) > a::after{ content:"Independent, parochial, charter, international"; } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(2) > a::after{ content:"Colleges, universities, graduate programs"; } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(3) > a::after{ content:"Conservatories, music and arts programs"; } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(4) > a::after{ content:"Medical, osteopathic, dental schools"; } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(5) > a::after{ content:"Pre-licensure and advanced practice"; } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(6) > a::after{ content:"Allied health and professional programs"; } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(7) > a::after{ content:"Global institutions and curricula"; } /* Resources descriptions */ .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(1) > a::after{ content:"Platform overview and capabilities"; } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(2) > a::after{ content:"Side-by-side platform comparison"; } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(3) > a::after{ content:"Side-by-side platform comparison"; } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(4) > a::after{ content:"Side-by-side platform comparison"; } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(5) > a::after{ content:"Understand the differences"; } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(6) > a::after{ content:"2026 benchmark and insights"; } /* Company descriptions */ .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(1) > a::after{ content:"35 years in education, U.S.-based team"; } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(2) > a::after{ content:"Meet the team behind the platform"; } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(3) > a::after{ content:"Open roles across the company"; } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(4) > a::after{ content:"Data protection and compliance"; } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(5) > a::after{ content:"News and announcements"; } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(6) > a::after{ content:"Talk to our team or request a demo"; } /* Category-specific icon glyphs (inline SVG masks, colored with var(--navy)) */ .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(1) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(2) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(3) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(4) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(5) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(1) > ul > li:nth-child(6) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } /* Solutions icons */ .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(1) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(2) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(3) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(4) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(2) > ul > li:nth-child(5) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } /* Resources icons (nth-child 4) */ .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(1) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(2) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(3) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(4) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(5) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(4) > ul > li:nth-child(6) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } /* Company icons (nth-child 5) */ .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(1) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(2) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(3) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(4) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(5) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } .nav-primary > ul > li:nth-child(5) > ul > li:nth-child(6) > a::before{ background-image:url("data:image/svg+xml;utf8,"); } /* Book a demo CTA button */ #NavCTA a.btn-book-demo{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:8px; background:var(--navy, #1746a2); color:#fff !important; font-size:13.5px; font-weight:600; letter-spacing:0.01em; text-decoration:none !important; border:1px solid var(--navy, #1746a2); transition:background .15s, transform .1s, box-shadow .15s; box-shadow:0 1px 2px rgba(0,0,0,0.06); white-space:nowrap; } #NavCTA a.btn-book-demo:hover{ background:#123a8a; border-color:#123a8a; box-shadow:0 4px 12px -2px rgba(23,70,162,0.3); } #NavCTA a.btn-book-demo:active{ transform:translateY(1px); } #NavCTA a.btn-book-demo svg{ width:14px; height:14px; flex-shrink:0; transition:transform .15s; } #NavCTA a.btn-book-demo:hover svg{ transform:translateX(2px); } /* ── MOBILE DRAWER ──────────────────────────────── */ /* Hamburger — styled as 3-bar icon. Hidden on desktop, shown below 1000px. */ #TopNav #Logo #nav-open-btn{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:8px; align-items:center; justify-content:center; background:transparent; color:var(--ink, #111) !important; text-decoration:none; cursor:pointer; z-index:110; } #TopNav #Logo #nav-open-btn:hover{ background:var(--off, #f5f6f8); } #TopNav #Logo #nav-open-btn > span{ display:block; width:22px; height:16px; position:relative; } #TopNav #Logo #nav-open-btn > span::before, #TopNav #Logo #nav-open-btn > span::after, #TopNav #Logo #nav-open-btn > span{ background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size:22px 2px; background-repeat:no-repeat; background-position:0 0, 0 7px, 0 14px; } /* Close button (inside drawer) — X icon */ #TopNav #Logo #nav-close-btn{ display:none; position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:8px; align-items:center; justify-content:center; background:transparent; color:var(--ink, #111) !important; text-decoration:none; cursor:pointer; z-index:210; } #TopNav #Logo #nav-close-btn:hover{ background:var(--off, #f5f6f8); } #TopNav #Logo #nav-close-btn > span{ display:block; width:22px; height:22px; position:relative; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size:28px 2px; background-repeat:no-repeat; background-position:center center; transform:rotate(0deg); } #TopNav #Logo #nav-close-btn > span::before{ content:""; position:absolute; inset:0; background:currentColor; width:28px; height:2px; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); } #TopNav #Logo #nav-close-btn > span::after{ content:""; position:absolute; inset:0; background:currentColor; width:28px; height:2px; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-45deg); } #TopNav #Logo #nav-close-btn > span{ background:none; } @media(max-width:1024px){ #TopNav.t-row{ height:72px; padding:0 16px; gap:0; position:relative; } /* Lift TopNav above backdrop so child #NavLinks (z:200) renders on top */ body.nav-drawer-open #TopNav{ z-index:210; } #TopNav > #Logo{ flex:1 1 auto; position:relative; } #TopNav #Logo #menuul > li > a.MenuDefaultNodeCss{ height:52px; width:180px; } #TopNav #Logo #nav-open-btn{ display:inline-flex !important; } /* When drawer is open, hide the hamburger (close button takes its place) */ body.nav-drawer-open #TopNav #Logo #nav-open-btn{ display:none !important; } /* Also hide the logo-area link while drawer is open so it doesn't peek behind close btn */ body.nav-drawer-open #TopNav > #Logo #menuul{ visibility:hidden; } /* Book a demo CTA hidden in collapsed header, appears in drawer */ #TopNav > #NavCTA{ display:none; } /* NavLinks becomes full-screen drawer sliding in from right */ #TopNav > #NavLinks{ display:block; position:fixed; top:0; right:0; bottom:0; width:min(360px, 85vw); background:#fff; z-index:200; transform:translateX(100%); transition:transform .28s ease-out; box-shadow:-20px 0 56px -8px rgba(0,0,0,0.18); overflow-y:auto; padding:72px 16px 24px; justify-content:flex-start; } body.nav-drawer-open #TopNav > #NavLinks{ transform:translateX(0); } /* Backdrop behind drawer */ body.nav-drawer-open::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:190; } body.nav-drawer-open{ overflow:hidden; } /* Close button visible when drawer is open */ body.nav-drawer-open #TopNav #Logo #nav-close-btn{ display:inline-flex !important; position:fixed; top:16px; right:16px; z-index:220; } /* Vertical stacked nav inside drawer */ .nav-primary > ul.noprint, .nav-primary > ul{ flex-direction:column; align-items:stretch; gap:2px; } .nav-primary > ul > li.MenuDefaultCss{ width:100%; } .nav-primary > ul > li > a.MenuDefaultNodeCss{ display:flex; justify-content:space-between; padding:14px 16px; border-radius:10px; font-size:15px; font-weight:600; } .nav-primary > ul > li > a::after{ margin-left:auto; opacity:0.5; transform:rotate(-90deg); transition:transform .2s ease; } .nav-primary > ul > li.open > a::after{ transform:rotate(0deg); } /* Sub-menu — inline expanded on tap (no hover on touch) */ .nav-primary > ul > li > ul{ position:static; opacity:1; pointer-events:auto; transform:none; background:transparent; border:0; box-shadow:none; width:auto !important; padding:0 !important; display:flex !important; flex-direction:column !important; grid-template-columns:none !important; max-height:0; overflow:hidden; transition:max-height .25s ease; } .nav-primary > ul > li.open > ul{ max-height:800px; padding:4px 0 8px 12px !important; } .nav-primary > ul > li > ul::before{ display:none; } .nav-primary > ul > li > ul > li > a{ grid-template-columns:24px 1fr; gap:10px; padding:9px 12px; font-size:13.5px; font-weight:500; } .nav-primary > ul > li > ul > li > a::before{ width:24px; height:24px; border-radius:5px; background-size:14px 14px; } /* CTA inside drawer at bottom */ .nav-primary::after{ content:""; display:block; height:24px; } #NavCTA a.btn-book-demo{ padding:8px 14px; font-size:13px; } } /* ─── CONTACT PAGE ──────────────────────────────── */ .contact-hero{ background:#fff; padding:100px 56px 80px; } @media(max-width:900px){ .contact-hero{ padding:72px 24px 56px; } } .contact-h1{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(48px,7.8vw,80px); line-height:0.93; letter-spacing:-0.03em; margin:0 0 32px; color:var(--ink); text-wrap:balance; } .contact-h1 .it{ font-style:italic; font-weight:400; color:var(--sky); } .contact-sub{ font-size:18px; color:rgba(10,10,10,0.7); max-width:56ch; margin:0; line-height:1.55; text-wrap:pretty; } .contact-main{ padding:112px 0; background:#fff; } .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; } @media(max-width:980px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } } .contact-left h2{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(32px,4.5vw,56px); line-height:1.05; letter-spacing:-0.025em; margin:0 0 32px; color:var(--ink); text-wrap:balance; } .contact-bullets{ list-style:none; padding:0; margin:36px 0 0; border-top:1px solid var(--rule); } .contact-bullets li{ padding:14px 0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:baseline; font-size:15px; color:var(--ink); } .contact-bullets li .n{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--sky); } .contact-info{ margin-top:56px; padding-top:32px; border-top:1px solid var(--rule); } .contact-info-head{ font-family:"Inter"; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:16px; } .contact-info p{ font-size:15px; margin:0 0 12px; color:var(--ink-3); line-height:1.5; } .contact-info a{ color:var(--navy); font-weight:500; } .contact-info a:hover{ color:var(--ink); } .form-card{ background:#fff; border:1.5px solid var(--rule); padding:40px; border-radius:16px; box-shadow:0 4px 24px -8px rgba(0,0,0,0.08); } .form-card h4{ font-family:"Source Serif 4",serif; font-weight:400; font-size:26px; letter-spacing:-0.015em; margin:0 0 6px; } .form-card .sub{ color:var(--ink-3); font-size:13.5px; margin:0 0 28px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media(max-width:600px){ .form-row{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:5px; margin-bottom:18px; } .field label{ font-family:"Inter"; font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); } .field input, .field select, .field textarea{ padding:13px 0; background:transparent; border:0; border-bottom:1.5px solid var(--off-2); border-radius:0; font-size:15px; font-family:"Inter"; transition:border-color .2s; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ink); } .role-pick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .role-chip{ padding:7px 14px; background:transparent; border:1.5px solid var(--off-2); border-radius:999px; font-size:12px; font-family:"Inter"; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-3); cursor:pointer; transition:all .15s; } .role-chip:hover{ border-color:var(--ink-4); color:var(--ink); } .form-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:16px; padding-top:20px; border-top:1px solid var(--rule); flex-wrap:wrap; } .form-foot .note{ font-size:11px; color:var(--ink-5); max-width:26ch; line-height:1.5; font-family:"Inter"; font-weight:500; } .next-section{ background:var(--off); padding:112px 0; } .next-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:56px; } @media(max-width:900px){ .next-grid{ grid-template-columns:1fr; } } .step-card{ background:#fff; border-radius:16px; padding:40px 32px; display:flex; flex-direction:column; gap:20px; border:1px solid var(--off-2); transition:box-shadow .2s; } .step-card:hover{ box-shadow:0 8px 32px -8px rgba(0,0,0,0.1); } .step-card .s-num{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); } .step-card h3{ font-family:"Source Serif 4",serif; font-weight:400; font-size:24px; letter-spacing:-0.015em; margin:0; color:var(--ink); line-height:1.2; } .step-card p{ font-size:14px; color:var(--ink-3); margin:0; line-height:1.6; } .other-section{ background:#fff; padding:112px 0; border-top:1px solid var(--rule); } .reach-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:56px; } @media(max-width:900px){ .reach-grid{ grid-template-columns:1fr; } } .reach-card{ background:var(--off); border-radius:16px; padding:40px; display:flex; flex-direction:column; gap:16px; border:1px solid var(--off-2); } .reach-card-label{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); } .reach-card h3{ font-family:"Source Serif 4",serif; font-weight:400; font-size:22px; letter-spacing:-0.01em; margin:0; color:var(--ink); line-height:1.2; } .reach-card p{ font-size:14px; color:var(--ink-3); margin:0; line-height:1.55; } .reach-card a{ color:var(--navy); font-weight:500; text-decoration:underline; } .reach-card a:hover{ color:var(--ink); text-decoration:none; } .section-intro{ display:grid; grid-template-columns:1fr 1.5fr; gap:64px; align-items:end; margin-bottom:72px; } @media(max-width:900px){ .section-intro{ grid-template-columns:1fr; gap:24px; } } .section-intro .lead{ font-size:17px; color:var(--ink-3); line-height:1.6; max-width:52ch; text-wrap:pretty; } /* ─── HIGHER ED FEATURE ──────────────────────────── */ .he-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:start; margin-top:48px; } @media(max-width:980px){ .he-grid{ grid-template-columns:1fr; gap:40px; } } .he-badge{ display:inline-flex; align-items:center; gap:12px; padding:7px 14px; background:rgba(196,74,26,0.18); border:1px solid rgba(196,74,26,0.45); border-radius:4px; margin-bottom:24px; } .he-badge .n{ font-family:"Source Serif 4",serif; font-style:italic; font-size:19px; color:var(--warm); font-weight:500; } .he-badge .t{ font-family:"Inter"; font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#fff; } .he-subs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .he-sub{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:24px 20px; display:flex; flex-direction:column; gap:8px; } .he-sub .num{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; color:var(--warm); } .he-sub h4{ font-family:"Source Serif 4",serif; font-weight:400; font-size:21px; letter-spacing:-0.01em; margin:0; color:#fff; } .he-sub p{ font-size:12.5px; line-height:1.55; color:rgba(255,255,255,0.58); margin:0; } .he-sub .stat{ margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,0.12); font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--warm); } /* ─── K-12 ROLES GRID ──────────────────────────── */ .roles-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; } @media(max-width:900px){ .roles-grid{ grid-template-columns:1fr; } } .path-card.k12 .p-tag{ color:var(--k12, var(--navy)); } .path-card.k12 h3 .ac{ color:var(--k12, var(--navy)); } /* ─── PLATFORM PAGE ──────────────────────────── */ .page-hero{ background:var(--paper); border-bottom:1px solid var(--rule); padding:72px 0 64px; } .page-breadcrumb{ display:inline-flex; align-items:center; gap:8px; font-family:"Inter"; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-5); margin-bottom:28px; } .page-breadcrumb .sep{ color:var(--off-2); } .page-breadcrumb .cur{ color:var(--navy); } .page-hero h1{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(40px,5.5vw,72px); line-height:1.0; letter-spacing:-0.028em; margin:0 0 20px; color:var(--ink); text-wrap:balance; max-width:18ch; } .page-hero h1 .it{ font-style:italic; font-weight:400; color:var(--sky); } .page-hero .hero-sub{ font-size:17px; color:var(--ink-3); max-width:52ch; margin:0 0 36px; line-height:1.6; text-wrap:pretty; } .page-hero-inner{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; } @media(max-width:900px){ .page-hero-inner{ grid-template-columns:1fr; gap:32px; } } .hero-right-facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:14px; overflow:hidden; margin-top:8px; } .hrf{ background:var(--off); padding:24px 20px; display:flex; flex-direction:column; gap:4px; } .hrf .v{ font-family:"Source Serif 4",serif; font-weight:300; font-size:40px; letter-spacing:-0.03em; line-height:1; color:var(--ink); } .hrf .l{ font-size:12px; color:var(--ink-4); line-height:1.4; font-weight:500; } .mod-section{ padding:96px 0; border-bottom:1px solid var(--rule); } .mod-section:last-child{ border-bottom:none; } .mod-section.on-off{ background:var(--off); } .mod-header{ margin-bottom:48px; } .mod-kicker{ display:inline-flex; align-items:center; gap:10px; font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:16px; } .mod-kicker .mk-tag{ padding:3px 8px; border-radius:3px; font-size:9px; font-weight:800; letter-spacing:0.12em; } .mod-h{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(32px,3.8vw,52px); line-height:1.0; letter-spacing:-0.025em; margin:0 0 16px; color:var(--ink); text-wrap:balance; } .mod-h .it{ font-style:italic; font-weight:400; } .mod-lede{ font-size:16px; color:var(--ink-3); line-height:1.65; max-width:60ch; } .feat-catalog{ display:flex; flex-direction:column; gap:0; } .feat-catalog--wide{ display:grid; grid-template-columns:1fr 1fr; gap:0 56px; margin-top:32px; } @media(max-width:900px){ .feat-catalog--wide{ grid-template-columns:1fr; gap:0; } } .fc-group{ margin-bottom:0; } .fc-group-title{ font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-5); padding:16px 0 8px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; } .fc-items{ display:flex; flex-direction:column; gap:0; } .fc-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--off-2); font-size:13.5px; color:var(--ink-2); font-weight:500; gap:12px; } .fc-item:last-child{ border-bottom:none; } .fc-badge{ font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:2px 6px; border-radius:3px; flex-shrink:0; } .fc-badge.live{ background:rgba(31,122,70,0.1); color:var(--green); } .fc-badge.new{ background:rgba(23,70,162,0.1); color:var(--navy); } .fc-badge.beta{ background:rgba(196,74,26,0.1); color:var(--warm); } .fc-badge.soon{ background:var(--off); color:var(--ink-5); } /* ── Data model section ── */ .dm-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:center; margin-top:56px; } @media(max-width:900px){ .dm-grid{ grid-template-columns:1fr; gap:40px; } } .dm-h{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(36px,4.5vw,60px); line-height:1.0; letter-spacing:-0.028em; margin:0 0 24px; } .dm-h .it{ font-style:italic; } .dm-p{ font-size:16px; line-height:1.65; max-width:44ch; } .dm-points{ list-style:none; padding:0; margin:32px 0 0; display:flex; flex-direction:column; gap:0; border-top:1px solid rgba(255,255,255,0.12); } .dm-points li{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:14px; color:rgba(255,255,255,0.8); display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:baseline; } .dm-points li .n{ font-family:"Inter"; font-size:13px; color:var(--sky); } /* ── Comparison table ── */ .comp-intro{ max-width:56ch; margin-bottom:56px; } .comp-label{ font-family:"Inter"; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); margin-bottom:16px; display:block; } .comp-h{ font-family:"Source Serif 4",serif; font-weight:300; font-size:clamp(36px,4vw,56px); line-height:1.0; letter-spacing:-0.025em; margin:0 0 16px; color:var(--ink); } .comp-h .it{ font-style:italic; } .comp-sub{ font-size:15px; color:var(--ink-3); line-height:1.6; } .comp-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--rule); } .comp-table thead tr{ background:var(--ink); } .comp-table thead th{ padding:18px 20px; text-align:left; font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.6); } .comp-table thead th:first-child{ color:rgba(255,255,255,0.4); width:30%; } .comp-table thead th.pcr-col{ color:#fff; } .comp-table tbody tr{ border-bottom:1px solid var(--rule); } .comp-table tbody tr:last-child{ border-bottom:none; } .comp-table tbody tr:hover{ background:var(--off); } .comp-table td{ padding:14px 20px; font-size:13.5px; color:var(--ink-3); vertical-align:middle; } .comp-table td:first-child{ color:var(--ink); font-weight:500; } .comp-table td.pcr-val{ color:var(--ink); font-weight:600; } .comp-table tbody tr.cat-row td{ background:var(--off); font-family:"Inter"; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-4); padding:10px 20px; } .check{ color:var(--green); font-size:15px; font-weight:700; } .cross{ color:var(--ink-5); font-size:15px; } .partial{ color:var(--warm); font-size:13px; } /* ─── V11 HOMEPAGE ADDITIONS ─────────────────────────────────────── */ /* Logo strip — scrolling marquee of school badges */ .logo-strip{ background:#fff; padding:64px 0 68px; border-bottom:1px solid var(--rule); overflow:hidden; } .logo-strip-head{ text-align:center; margin-bottom:44px; } .logo-strip-head .ls-label{ font-family:"Inter"; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-4); display:block; } .logo-strip-head .ls-sub{ font-family:"Source Serif 4",Georgia,serif; font-style:italic; font-size:15px; color:var(--ink-4); margin-top:6px; display:block; } .logo-marquee-outer{ position:relative; } .logo-marquee-outer::before,.logo-marquee-outer::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; } .logo-marquee-outer::before{ left:0; background:linear-gradient(90deg,#fff 0%,transparent 100%); } .logo-marquee-outer::after { right:0; background:linear-gradient(90deg,transparent 0%,#fff 100%); } .logo-track{ display:flex; gap:16px; width:max-content; animation:logo-scroll 50s linear infinite; } .logo-track:hover{ animation-play-state:paused; } @keyframes logo-scroll{ from{ transform:translateX(0); } to { transform:translateX(-50%); } } .logo-badge{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:8px; width:100px; padding:18px 8px 14px; border-radius:12px; border:1px solid var(--rule); background:#fff; transition:border-color .2s, box-shadow .2s; } .logo-badge:hover{ border-color:var(--off-2); box-shadow:0 4px 18px -6px rgba(0,0,0,0.1); } .lb-crest{ width:46px; height:46px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .lb-init{ font-family:"Source Serif 4",Georgia,serif; font-size:17px; font-weight:500; color:#fff; letter-spacing:-0.01em; line-height:1; } .lb-name{ font-family:"Inter"; font-size:9px; font-weight:600; letter-spacing:0.03em; text-align:center; color:var(--ink-3); line-height:1.35; } .lb-type{ font-family:"Inter"; font-size:8px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-5); } /* Fallback classes if RadEditor strips inline background styles on .lb-crest */ .lbc-navy { background:#1746A2; } .lbc-arts { background:#7B3FA0; } .lbc-warm { background:#C44A1A; } .lbc-med { background:#0a7b7b; } /* Proof logo badge — replaces plain .atrib text in proof cards */ .proof-logo{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:20px; border-top:1px solid var(--off-2); } .proof-logo .pl-crest{ width:36px; height:36px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .proof-logo .pl-init{ font-family:"Source Serif 4",Georgia,serif; font-size:13px; font-weight:500; color:#fff; letter-spacing:-0.01em; } .proof-logo .pl-text{ display:flex; flex-direction:column; gap:1px; } .proof-logo .pl-n{ font-size:13px; font-weight:600; color:var(--ink); } .proof-logo .pl-r{ font-size:11px; color:var(--ink-4); line-height:1.4; } /* Hero institution dot — colored bullet before school name on hero outcome stats */ .hero-outcome .s::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; opacity:0.7; margin-right:5px; } /* Ensure .s spans flex correctly for the dot */ .hero-outcome .s{ display:inline-flex; align-items:center; gap:0; }