/* ============================================================ CARE Design System — shared stylesheet Institutional core: navy / blue / light-blue + Rany Per-program accents via ============================================================ */ /* ---- self-hosted Jost (was a render-blocking @import from fonts.googleapis.com) ---- */ @font-face { font-family:"Jost"; src:url("fonts/jost-latin-ext-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Jost"; src:url("fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Jost"; src:url("fonts/jost-latin-ext-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Jost"; src:url("fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Jost"; src:url("fonts/jost-latin-ext-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Jost"; src:url("fonts/jost-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Jost"; src:url("fonts/jost-latin-ext-700-normal.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Jost"; src:url("fonts/jost-latin-700-normal.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---- Heebo covers the Hebrew range: Rany and Jost have no Hebrew glyphs ---- */ @font-face { font-family:"Heebo"; src:url("fonts/heebo-hebrew-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face { font-family:"Heebo"; src:url("fonts/heebo-hebrew-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face { font-family:"Heebo"; src:url("fonts/heebo-hebrew-700-normal.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } /* Rany has no accented glyphs (á/ê/ç map to the bare letter), so it is limited to the codepoints it really covers; Jost — a near-identical geometric — supplies accents, dashes and ellipses. */ @font-face { font-family:"Rany"; src:url("fonts/RanyMedium.otf") format("opentype"); font-weight:500; font-display:swap; unicode-range:U+0-7F,U+A0,U+A2-A5,U+A9,U+AD,U+AE,U+D7,U+D8,U+F7,U+F8,U+2018-2019,U+201C-201D,U+20AC,U+2122; } @font-face { font-family:"Rany"; src:url("fonts/RanyBold.otf") format("opentype"); font-weight:700; font-display:swap; unicode-range:U+0-7F,U+A0,U+A2-A5,U+A9,U+AD,U+AE,U+D7,U+D8,U+F7,U+F8,U+2018-2019,U+201C-201D,U+20AC,U+2122; } html.care-jost { --care-sans:"Jost","Heebo","Helvetica Neue",Arial,sans-serif; } :root { /* Latin type stack. Rany carries the brand voice but has no accented glyphs, so PT/ES switch wholesale to Jost (same geometric skeleton, full accents). */ --care-sans:"Rany","Jost","Heebo","Helvetica Neue",Arial,sans-serif; /* institutional core */ --deep: #0C3057; --blue: #004784; --light: #9CCDEC; --tint: #EEF4F9; --paper: #FFFFFF; --ink: #11253B; --muted: #5C7088; --line: #DCE6EF; --maxw: 1200px; /* status */ --green:#1E7A4D; --green-bg:#E6F4EA; --amber:#B7570A; --amber-bg:#FEF3E2; --red: #9B1C1C; --red-bg:#FDE8E8; /* program palette (dots / theming) */ --p-bodymind:#FF5500; /* #FF5500 is 3.21:1 on white — fails AA for small text. Use -ink for type. */ --p-bodymind-ink:#C43F00; --p-educare:#1E7A4D; --p-community:#004784; --p-cyber:#0067FF; --p-leadership:#6B2C91; --p-campaigns:#C7420B; --p-instructor:#0C3057; /* accent (defaults to institutional blue) */ --accent: var(--blue); --accent-deep: var(--deep); --accent-soft: var(--light); --accent-tint: var(--tint); --on-accent: #FFFFFF; } /* ---- program accent themes ------------------------------- */ body[data-accent="orange"] { --accent:#FF5500; --accent-deep:#C7420B; --accent-soft:#FFB489; --accent-tint:#FFF1EA; } body[data-accent="green"] { --accent:#1E7A4D; --accent-deep:#155C39; --accent-soft:#8FD3AE; --accent-tint:#E9F5EE; } body[data-accent="cyber"] { --accent:#0067FF; --accent-deep:#0048B4; --accent-soft:#9CC4FF; --accent-tint:#EAF1FF; } body[data-accent="leadership"] { --accent:#6B2C91; --accent-deep:#4E1E6C; --accent-soft:#C6A0DE; --accent-tint:#F3ECF8; } body[data-accent="campaigns"] { --accent:#C7420B; --accent-deep:#993108; --accent-soft:#F3B183; --accent-tint:#FCEFE6; } /* ============================================================ BASE ============================================================ */ * { box-sizing:border-box; } @media (prefers-reduced-motion:no-preference){ html { scroll-behavior:smooth; } } body { margin:0; font-family:var(--care-sans); font-weight:500; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.5; } h1,h2,h3,h4 { font-weight:700; line-height:1.06; margin:0; letter-spacing:-0.02em; } p { margin:0; } a { color:inherit; text-decoration:none; } img { max-width:100%; } .wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 44px; } @media (max-width:600px){ .wrap { padding:0 22px; } } .u { box-shadow:inset 0 -0.12em 0 var(--accent-soft); } .ac { color:var(--accent); } .kicker { display:inline-flex; align-items:center; gap:12px; font-size:13px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; color:var(--accent); } .kicker::before { content:""; width:30px; height:2px; background:var(--accent); display:inline-block; } .kicker.solo::before { display:none; } .kicker.on-dark { color:var(--accent-soft); } .kicker.on-dark::before { background:var(--accent-soft); } /* ---- buttons -------------------------------------------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--care-sans); font-weight:700; font-size:16px; padding:14px 27px; border-radius:2px; cursor:pointer; background:var(--accent); color:var(--on-accent); border:1.5px solid var(--accent); transition:background .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { background:var(--accent-deep); border-color:var(--accent-deep); } .btn--outline { background:transparent; color:var(--accent); } .btn--outline:hover { background:var(--accent-tint); } .btn--light { background:#fff; color:var(--accent-deep); border-color:#fff; } .btn--light:hover { background:var(--accent-soft); color:var(--accent-deep); border-color:var(--accent-soft); } .btn--ghost { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.32); color:#fff; } .btn--ghost:hover { background:rgba(255,255,255,0.18); } .btn svg { width:17px; height:17px; } /* ============================================================ HEADER / NAV (always institutional) ============================================================ */ .site-header { position:sticky; top:0; z-index:80; background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav { display:flex; align-items:center; justify-content:space-between; height:80px; gap:28px; } .nav__logo img { height:30px; display:block; } .nav__links { display:flex; align-items:center; gap:32px; } .nav__links > a, .nav__drop > button { font-family:var(--care-sans); font-weight:500; font-size:16px; color:var(--deep); background:none; border:none; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:6px; transition:color .15s ease; } .nav__links > a:hover, .nav__drop > button:hover, .nav__links > a.is-current { color:var(--blue); } .nav__links > a.is-current { font-weight:700; } .nav__drop { position:relative; } .nav__drop > button svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2; transition:transform .18s ease; } .nav__drop:hover > button svg { transform:rotate(180deg); } .nav__menu { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px; width:290px; box-shadow:0 24px 50px -24px rgba(12,48,87,0.4); opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease; z-index:90; } .nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .nav__menu::before { content:""; position:absolute; top:-16px; left:0; right:0; height:16px; } .nav__menu a { display:flex; gap:12px; align-items:flex-start; padding:11px 13px; border-radius:6px; transition:background .13s ease; } .nav__menu a:hover { background:var(--tint); } .nav__menu .dot { flex:none; width:10px; height:10px; border-radius:50%; margin-top:6px; } .nav__menu b { display:block; font-size:15.5px; color:var(--deep); font-weight:700; letter-spacing:-0.01em; } .nav__menu span { display:block; font-size:13px; color:var(--muted); line-height:1.35; margin-top:2px; } .nav__cta { display:flex; align-items:center; gap:14px; } .nav__burger { display:none; background:none; border:none; cursor:pointer; padding:8px; } .nav__burger svg { width:26px; height:26px; stroke:var(--deep); stroke-width:2; fill:none; } @media (max-width:1080px){ .nav__links, .nav__cta .btn { display:none; } .nav__burger { display:block; } } /* mobile drawer */ .mnav { display:none; position:fixed; inset:0; z-index:100; } .mnav.open { display:block; } .mnav__scrim { position:absolute; inset:0; background:rgba(7,32,61,0.5); backdrop-filter:blur(2px); } .mnav__panel { position:absolute; top:0; right:0; bottom:0; width:min(360px,86vw); background:#fff; padding:26px 26px 40px; overflow-y:auto; box-shadow:-20px 0 60px -20px rgba(7,32,61,0.5); } .mnav__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; } .mnav__top img { height:28px; } .mnav__close { background:none; border:none; cursor:pointer; padding:6px; } .mnav__close svg { width:26px; height:26px; stroke:var(--deep); stroke-width:2; fill:none; } .mnav a { display:block; font-size:19px; font-weight:700; color:var(--deep); padding:14px 0; border-bottom:1px solid var(--line); } .mnav .sub a { font-size:16px; font-weight:500; color:var(--muted); padding:10px 0 10px 18px; border-bottom:none; } .mnav .lbl { font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-top:22px; } .mnav .btn { margin-top:26px; width:100%; } /* ============================================================ SECTION SCAFFOLD ============================================================ */ section.block { padding:106px 0; } @media (max-width:600px){ section.block { padding:72px 0; } } .head { max-width:800px; margin-bottom:56px; } .head.center { margin-left:auto; margin-right:auto; text-align:center; } .head h2 { font-size:clamp(32px,4.2vw,52px); margin-top:20px; } .head p { margin-top:22px; font-size:19px; color:var(--muted); max-width:64ch; line-height:1.55; } .head.center p { margin-left:auto; margin-right:auto; } .tint { background:var(--tint); } .dark { background:var(--deep); color:#fff; } .dark .head h2 { color:#fff; } .dark .head p { color:#C6D7E6; } .lede { font-size:clamp(22px,2.6vw,30px); font-weight:700; line-height:1.22; letter-spacing:-0.02em; color:var(--deep); } /* ---- HERO (shared institutional pattern) ---------------- */ .hero { position:relative; overflow:hidden; background:var(--deep); color:#fff; } .hero__photo { position:absolute; inset:0; background-size:cover; background-position:center 32%; background-repeat:no-repeat; filter:grayscale(1) contrast(1.05) brightness(0.9); } .hero__photo::after { content:""; position:absolute; inset:0; background:var(--accent); mix-blend-mode:multiply; opacity:0.5; } .hero__tint { position:absolute; inset:0; background:linear-gradient(96deg, rgba(8,26,48,0.95) 0%, rgba(9,34,62,0.82) 44%, rgba(12,48,87,0.42) 100%); pointer-events:none; } .hero__mark { position:absolute; right:-90px; bottom:-120px; width:520px; opacity:0.09; pointer-events:none; } .hero .wrap { position:relative; z-index:2; padding-top:112px; padding-bottom:112px; } .hero__eyebrow { display:inline-flex; align-items:center; gap:12px; font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-soft); font-weight:700; margin-bottom:26px; } .hero__eyebrow b { color:#fff; } .hero h1 { font-size:clamp(40px,5.6vw,76px); max-width:16ch; color:#fff; letter-spacing:-0.03em; } .hero h1 em { font-style:normal; color:var(--accent-soft); } .hero__lead { margin-top:26px; max-width:52ch; font-size:clamp(18px,2vw,22px); color:#D3E0EC; line-height:1.45; } .hero__cta { margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; } .hero--tall .wrap { padding-top:130px; padding-bottom:130px; } /* ---- generic card grid --------------------------------- */ .grid { display:grid; gap:24px; } /* ---- responsive two-column split ----------------------- */ .split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .split--start { align-items:start; } .split--a { grid-template-columns:0.85fr 1.15fr; } .split--b { grid-template-columns:0.9fr 1.1fr; } .split--c { grid-template-columns:1.05fr 0.95fr; } @media (max-width:860px){ .split, .split--a, .split--b, .split--c { grid-template-columns:1fr; gap:34px; } } .g-2 { grid-template-columns:repeat(2,1fr); } .g-3 { grid-template-columns:repeat(3,1fr); } .g-4 { grid-template-columns:repeat(4,1fr); } @media (max-width:980px){ .g-3,.g-4 { grid-template-columns:repeat(2,1fr); } } @media (max-width:680px){ .g-2,.g-3,.g-4 { grid-template-columns:1fr; } } .card { background:#fff; border:1px solid var(--line); border-radius:6px; padding:34px 30px; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .card--hover:hover { border-color:var(--accent-soft); transform:translateY(-4px); box-shadow:0 20px 44px -26px rgba(12,48,87,0.45); } .card__no { font-size:14px; font-weight:700; color:var(--accent-soft); letter-spacing:0.1em; } .card__icon { width:52px; height:52px; border-radius:50%; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; margin:0 0 22px; } .card__icon svg { width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:1.9; } .card h3, .card h4 { color:var(--deep); } .card h3 { font-size:23px; margin-bottom:12px; } .card h4 { font-size:20px; margin-bottom:10px; } .card p { color:var(--muted); font-size:16.5px; line-height:1.5; } .card__foot { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:15px; color:var(--accent); font-weight:700; } /* ---- chips --------------------------------------------- */ .chips { display:flex; flex-wrap:wrap; gap:13px; } .chip { background:#fff; border:1px solid var(--line); color:var(--deep); border-radius:100px; padding:12px 22px; font-size:16px; font-weight:700; } .tint .chip { background:#fff; } .chip--ac { background:var(--accent-tint); border-color:transparent; color:var(--accent-deep); } /* ---- numbered steps ------------------------------------ */ .flow { display:grid; gap:16px; } .flow__item { display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:start; padding:22px 0; border-top:1px solid var(--line); } .flow__item:first-child { border-top:none; } .flow__n { width:48px; height:48px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:19px; display:flex; align-items:center; justify-content:center; } .flow__item h4 { font-size:20px; color:var(--deep); margin-bottom:5px; } .flow__item p { font-size:16.5px; color:var(--muted); line-height:1.5; } /* horizontal timeline (few steps) */ .track-row { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; } .track-step { position:relative; padding:0 20px; text-align:center; } .track-step + .track-step::before { content:""; position:absolute; left:0; top:26px; width:100%; height:2px; background:var(--accent-soft); transform:translateX(-50%); z-index:0; } .track-step__dot { position:relative; z-index:1; width:54px; height:54px; margin:0 auto 18px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; } .track-step h4 { font-size:18px; color:var(--deep); margin-bottom:7px; } .track-step p { font-size:15px; color:var(--muted); line-height:1.45; } @media (max-width:760px){ .track-row { grid-auto-flow:row; gap:26px; } .track-step { display:grid; grid-template-columns:54px 1fr; gap:18px; text-align:left; } .track-step + .track-step::before { display:none; } .track-step__dot { margin:0; } } /* ---- program card (color-coded) ------------------------ */ .progcard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .progcard:hover { transform:translateY(-4px); box-shadow:0 22px 46px -26px rgba(12,48,87,0.45); } .progcard__bar { height:6px; } .progcard__body { padding:30px 30px 28px; display:flex; flex-direction:column; flex:1; } .progcard__tag { display:inline-flex; align-items:center; gap:9px; font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; } .progcard__tag .dot { width:10px; height:10px; border-radius:50%; } .progcard h3 { font-size:23px; color:var(--deep); margin:14px 0 10px; } .progcard p { font-size:16px; color:var(--muted); line-height:1.5; flex:1; } .progcard__link { margin-top:22px; font-size:15px; font-weight:700; display:inline-flex; align-items:center; gap:8px; } .progcard__link svg { width:15px; height:15px; transition:transform .15s ease; } .progcard:hover .progcard__link svg { transform:translateX(4px); } /* ---- CTA band ------------------------------------------ */ .cta { position:relative; overflow:hidden; background:var(--accent); color:#fff; text-align:center; } .cta__mark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:620px; opacity:0.1; pointer-events:none; } .cta .wrap { position:relative; z-index:2; padding:100px 44px; } .cta h2 { font-size:clamp(30px,4vw,54px); color:#fff; max-width:20ch; margin:0 auto; letter-spacing:-0.025em; } .cta p { margin:22px auto 0; max-width:54ch; font-size:19px; color:rgba(255,255,255,0.9); } .cta__btns { margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .cta .btn--light { background:#fff; color:var(--accent-deep); border-color:#fff; } .cta .btn--light:hover { background:var(--ink); color:#fff; border-color:var(--ink); } /* ============================================================ FOOTER (institutional) ============================================================ */ .site-footer { background:#07203D; color:#A9C0D6; } .site-footer .wrap { padding:66px 44px 40px; } .foot-top { display:flex; justify-content:space-between; gap:52px; flex-wrap:wrap; } .foot-brand img { height:30px; display:block; } .foot-brand p { margin-top:18px; max-width:34ch; font-size:15px; color:#88A2BB; line-height:1.5; } .foot-cols { display:flex; gap:60px; flex-wrap:wrap; } .foot-col h4 { font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--light); margin:0 0 16px; font-weight:700; } .foot-col a { display:block; font-size:15px; color:#A9C0D6; padding:5px 0; transition:color .15s; } .foot-col a:hover { color:#fff; } .foot-bottom { margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14px; color:#7892AC; } /* ---- reveal on scroll ---------------------------------- */ @media (prefers-reduced-motion:no-preference){ .reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; } .reveal.in { opacity:1; transform:none; } } /* ============================================================ MOBILE REFINEMENTS ============================================================ */ @media (max-width:600px){ .hero .wrap { padding-top:80px; padding-bottom:80px; } .hero--tall .wrap { padding-top:88px; padding-bottom:88px; } .hero__mark { width:340px; right:-70px; bottom:-90px; } .cta .wrap { padding:72px 22px; } .head { margin-bottom:40px; } .card { padding:28px 24px; } .btn { padding:14px 22px; } .hero__cta .btn, .cta__btns .btn { flex:1 1 auto; } } @media (max-width:400px){ .hero__cta { flex-direction:column; align-items:stretch; } .hero__cta .btn { width:100%; } } /* ============================================================ LANGUAGE SWITCHER ============================================================ */ /* switcher visuals live in assets/i18n.js (injected) */ .nav__cta { gap:10px; } .nav__cta .btn, .nav__right .btn { flex:0 0 auto; white-space:nowrap; } @media (max-width:1080px){ .site-header .nav__cta .care-langsw { display:none; } } /* ============================================================ RTL (Hebrew) ============================================================ */ [dir=rtl] .kicker::before { margin-left:0; } [dir=rtl] .hero__eyebrow, [dir=rtl] .kicker { flex-direction:row-reverse; } [dir=rtl] .head p, [dir=rtl] .hero__lead { margin-left:0; } [dir=rtl] .foot-top, [dir=rtl] .foot-bottom { direction:rtl; } [dir=rtl] .progcard__link svg, [dir=rtl] .btn svg { transform:scaleX(-1); } [dir=rtl] .card a.card__foot, [dir=rtl] .card__foot { direction:rtl; } [dir=rtl] .nav__menu a { text-align:right; } .centry__video--soon { opacity:.42; cursor:default; pointer-events:none; } /* ============================================================ PARTNERS & SUPPORT (discreet band) ============================================================ */ .partners { padding-block:clamp(46px,6vw,74px); border-top:1px solid var(--line); } .partners__row { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center; } .partners__txt p { margin:10px 0 0; font-size:16px; line-height:1.62; color:var(--muted); max-width:60ch; } .partners__logos { display:flex; align-items:center; justify-content:flex-end; } .partners__logos img { width:100%; max-width:330px; height:auto; opacity:.9; } @media (max-width:860px){ .partners__row { grid-template-columns:1fr; } .partners__logos { justify-content:flex-start; } } /* ---- accessibility -------------------------------------- */ .skip-link { position:absolute; left:-9999px; top:0; z-index:900; background:var(--deep); color:#fff; padding:12px 20px; border-radius:0 0 8px 0; font-weight:700; font-size:15px; } .skip-link:focus { left:0; } :focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:3px; } .site-header :focus-visible, .site-footer :focus-visible { outline-color:#9CCDEC; } [aria-current="page"] { font-weight:700; }