/* ========================================================= Stop ICE Overreach — main theme styles Extracted 1:1 from the original .dc.html inline styles. ========================================================= */ /* ---------- Base ---------- */ body{ margin:0; background:var(--white); color:var(--indigo); font-family:var(--font-body); } a{ color:var(--indigo); text-decoration-thickness:var(--underline-thickness); text-underline-offset:var(--underline-offset); } a:hover{color:var(--indigo-400)} u{ text-decoration-thickness:var(--underline-thickness); text-underline-offset:var(--underline-offset); } /* ---------- Entrance animations ---------- Elements are only hidden when JS is running (html.js) and the user hasn't asked for reduced motion; otherwise everything renders as-is. */ @media (prefers-reduced-motion: no-preference){ html.js [data-animate]{ opacity:0; transform:translateY(18px); transition:opacity 600ms var(--ease),transform 600ms var(--ease); transition-delay:var(--anim-delay,0ms); } html.js [data-animate].is-visible{ opacity:1; transform:none; } } /* ---------- Language toggle visibility ---------- No JS / default: English shows. JS sets data-lang on . */ html:not([data-lang="es"]) [data-lang-section="es"]{display:none} html[data-lang="es"] [data-lang-section="en"]{display:none} /* ---------- Layout ---------- */ .wrap{ max-width:1240px; margin:0 auto; padding-left:48px; padding-right:48px; box-sizing:border-box; } /* Home sections use a wider container. */ .wrap--wide{max-width:1400px} @media (max-width:720px){ .wrap{padding-left:24px;padding-right:24px} .site-logo{width:72px;height:60px} .signup__inner{grid-template-columns:1fr} .signup-form__field{flex-basis:100%;min-width:0} .signup-form .btn{flex:1} } /* ---------- Buttons (ported from DS Button component) ---------- */ .btn{ display:inline-block; box-sizing:border-box; cursor:pointer; font-family:var(--font-display); font-weight:700; letter-spacing:0.01em; line-height:1; text-decoration:none; text-align:center; border-radius:var(--radius); box-shadow:none; padding:11px 22px 9px; font-size:15px; transition:background var(--duration) var(--ease),border-color var(--duration) var(--ease); } .btn--lg{padding:15px 30px 13px;font-size:17px} .btn--primary{background:var(--indigo);color:var(--ice);border:2px solid var(--indigo)} .btn--primary:hover{background:var(--indigo-400);border-color:var(--indigo-400);color:var(--ice)} .btn--primary:active{background:var(--indigo-600);border-color:var(--indigo-400)} .btn--ice{background:var(--ice);color:var(--indigo);border:2px solid var(--ice)} .btn--ice:hover{background:var(--ice-600);border-color:var(--ice-600);color:var(--indigo)} .btn--ice:active{background:var(--ice-600)} .btn--outline{background:transparent;color:var(--indigo);border:2px solid var(--indigo)} .btn--outline:hover{background:var(--ice-100);color:var(--indigo)} .btn--outline:active{background:var(--ice-200)} .btn-row{display:flex;gap:14px;flex-wrap:wrap} /* ---------- Input (ported from DS Input component) ---------- */ .input{ display:block; width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:16px; color:var(--indigo); background:var(--white); border:2px solid var(--indigo); border-radius:var(--radius); padding:11px 14px; outline:none; } .input:focus{outline:3px solid var(--focus-ring);outline-offset:0} /* ---------- Site header / nav ---------- */ .site-header{ padding-top:22px; padding-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .site-logo{display:block} .site-nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-left:auto} .site-nav a.nav-link{ font-family:var(--font-display); font-weight:700; font-size:15px; text-decoration:none; } .site-nav a.nav-link:hover{text-decoration:underline} .site-header__controls{display:flex;align-items:center;gap:14px} /* Hamburger toggle — hidden on desktop, shown at phone widths */ .nav-toggle{ display:none; appearance:none; background:var(--white); border:2px solid var(--indigo); margin:0; cursor:pointer; padding:9px 10px; flex-direction:column; gap:4px; } .nav-toggle:hover{background:var(--ice-100)} .nav-toggle__bar{display:block;width:20px;height:2px;background:var(--indigo)} @media (max-width:720px){ .site-header{position:relative} .nav-toggle{display:flex} .site-header__controls{margin-left:auto} .site-nav--collapsible{display:none} /* Open menu overlays the content below instead of pushing it down. */ .site-nav--collapsible.is-open{ display:flex; position:absolute; top:100%; left:0; right:0; z-index:30; flex-direction:column; align-items:flex-start; gap:18px; margin-left:0; padding:18px 24px 22px; background:var(--white); border-bottom:2px solid var(--indigo); box-shadow:0 14px 28px rgba(51,40,81,0.14); } } /* Language switcher */ .lang-switch{display:flex;border:2px solid var(--indigo)} .lang-switch__current{ background:var(--indigo); color:var(--ice); font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1; padding:8px 11px 6px; } .lang-switch__btn{ appearance:none; background:var(--white); color:var(--indigo); border:none; margin:0; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1; padding:8px 11px 6px; } .lang-switch__btn:hover{background:var(--ice-100)} /* ---------- Home: hero ---------- */ .hero{ position:relative; padding-top:28px; padding-bottom:0; min-height:680px; display:flex; align-items:center; } .hero__copy{ position:relative; z-index:1; display:flex; flex-direction:column; gap:26px; align-items:flex-start; justify-content:center; max-width:640px; padding:24px 0 64px; } .eyebrow{ margin:0; background:var(--ice); color:var(--indigo); font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1; padding:9px 12px 7px; } .hero__title{ margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(42px,4.2vw,60px); line-height:1.08; letter-spacing:var(--tracking-display); text-wrap:balance; } .hero__title--es{ font-size:clamp(38px,4vw,56px); } .hero__lede{margin:0;font-size:21px;line-height:1.5;max-width:44ch} .hero__lede--es{max-width:46ch} .hero__glow{ position:absolute; inset:0; background:radial-gradient(56% 92% at 76% 82%,rgba(154,225,226,0.55) 0%,rgba(154,225,226,0.25) 46%,rgba(154,225,226,0) 72%); pointer-events:none; } .hero__art{ position:absolute; right:0; bottom:0; height:100%; max-width:58%; object-fit:contain; object-position:right bottom; pointer-events:none; } .hero__fade{ position:absolute; inset:0; background:linear-gradient(90deg,#FFFFFF 0%,#FFFFFF 36%,rgba(255,255,255,0.85) 52%,rgba(255,255,255,0) 74%); pointer-events:none; } @media (max-width:980px){ .hero{min-height:0;flex-direction:column;align-items:stretch;gap:0} .hero__copy{padding-bottom:16px;max-width:none} .hero__art{ position:static; height:auto; width:100%; max-width:560px; max-height:56vh; margin:0 auto; object-fit:contain; object-position:center bottom; } .hero__fade{display:none} .hero__glow{background:radial-gradient(72% 58% at 50% 80%,rgba(154,225,226,0.5) 0%,rgba(154,225,226,0) 72%)} } /* ---------- Bands (ice / indigo sections) ---------- */ .band--ice{background:var(--ice)} .band--indigo{background:var(--indigo)} .factband__inner{ padding-top:64px; padding-bottom:64px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; } .factband__copy{display:flex;flex-direction:column;gap:8px;max-width:56ch} .factband__copy h2{ margin:0; font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1.15; } .factband__copy p{margin:0;font-size:16px;line-height:var(--leading-body)} .factband__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .factband__actions .pdf-link{font-weight:700;font-size:15px} /* ---------- Home: signup section ---------- */ .signup__inner{ padding-top:80px; padding-bottom:80px; display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:32px; align-items:center; } .signup__copy{display:flex;flex-direction:column;gap:8px} .signup__copy h2{ margin:0; font-family:var(--font-display); font-weight:700; font-size:28px; line-height:1.15; color:var(--ice); } .signup__copy p{margin:0;font-size:16px;line-height:var(--leading-body);color:var(--white)} .signup-form{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap} .signup-form__field{flex:1;min-width:240px} .signup-success{ margin:0; font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1.3; color:var(--ice); } .signup-error{ margin:0 0 4px; flex-basis:100%; font-family:var(--font-body); font-weight:700; font-size:15px; line-height:1.4; color:var(--ice); } [hidden]{display:none !important} /* Honeypot — visually removed, still in the DOM for bots */ .nof-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } /* ---------- Site footer ---------- */ .site-footer{ padding-top:56px; padding-bottom:64px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; } .site-footer p{margin:0;font-size:14px;line-height:var(--leading-body)} .site-footer__links{display:flex;gap:22px} .site-footer__links a{font-size:14px;font-weight:700} /* ---------- Fact sheet page ---------- */ body.nof-factsheet{background:var(--ice-100)} .factsheet{ display:flex; flex-direction:column; align-items:center; gap:28px; padding:28px 0 48px; } .factsheet__topbar{ width:850px; max-width:calc(100% - 32px); box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--font-body); font-size:15px; font-weight:700; } .factsheet__page{ background:var(--white); width:850px; max-width:calc(100% - 32px); box-sizing:border-box; padding:44px 85px 52px; display:flex; flex-direction:column; gap:22px; font-family:var(--font-body); color:var(--indigo); } @media (max-width:700px){ .factsheet__page{padding:36px 28px 44px} } .factsheet__logo{display:block;margin:0 auto} .factsheet__page p{margin:0;font-size:16px;line-height:var(--leading-body)} .factsheet__key{ margin:0; font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1.2; letter-spacing:var(--tracking-display); } .factsheet__page ol{ margin:10px 0 0; padding-left:24px; font-size:16px; line-height:var(--leading-body); } .factsheet__page ol li{margin-bottom:5px} .factsheet__page ol li:last-child{margin-bottom:0} .factsheet__reasons-head{ margin:8px 0 0; font-family:var(--font-display); font-weight:700; font-size:26px; line-height:var(--leading-display); } .reason-bands{display:flex;flex-direction:column} .reason-band{ font-weight:700; font-size:var(--text-band); line-height:var(--leading-band); padding:var(--band-pad-y) var(--band-pad-x); } .reason-band--ice{background:var(--ice);color:var(--indigo)} .reason-band--indigo{background:var(--indigo);color:var(--ice)} .factsheet__rally{margin-top:10px;display:flex;flex-direction:column;gap:12px} .factsheet__rally h2{ margin:0; font-family:var(--font-display); font-weight:700; font-size:30px; line-height:var(--leading-display); } .factsheet__rally ul{ margin:0; padding-left:22px; font-size:16px; line-height:var(--leading-body); } .factsheet__rally ul li{margin-bottom:5px} .factsheet__rally ul li:last-child{margin-bottom:0} /* ---------- Endorsers page ---------- */ .endorsers{ padding-top:22px; padding-bottom:96px; display:flex; flex-direction:column; gap:56px; } .endorsers__back{font-family:var(--font-display);font-weight:700;font-size:15px} .endorsers__intro{display:flex;flex-direction:column;gap:12px;max-width:70ch} .endorsers__intro h1{ margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(38px,4vw,56px); line-height:1.08; letter-spacing:var(--tracking-display); } .endorsers__intro .subtitle{ margin:0; font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1.2; color:var(--indigo-400); } .endorsers__intro p{margin:0;font-size:17px;line-height:var(--leading-body)} .endorsers__intro p.es{font-size:15px;color:var(--indigo-400)} .endorsers__group{display:flex;flex-direction:column;gap:20px} .endorsers__group h2{ margin:0; font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.15; } .endorsers__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; } .endorser-tile{ background:var(--ice-100); color:var(--indigo-400); font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.25; padding:26px 20px; text-align:center; } .endorsers__cta{ background:var(--indigo); padding:48px 48px; display:flex; flex-direction:column; gap:8px; } .endorsers__cta .cta-head{ margin:0; font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.2; color:var(--ice); } .endorsers__cta p{margin:0;font-size:16px;line-height:var(--leading-body);color:var(--white)} .endorsers__cta a{color:var(--ice)} .endorsers__paidfor{margin:0;font-size:14px;line-height:var(--leading-body)} /* ---------- Date/category chips ---------- */ .chip{ align-self:flex-start; font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1; padding:8px 11px 6px; } .chip--ice{background:var(--ice);color:var(--indigo)} .chip--indigo{background:var(--indigo);color:var(--ice)} /* ---------- News page ---------- */ .news{display:flex;flex-direction:column} /* Flex-column children with auto side margins won't stretch; force full width so .wrap containers span normally inside the flex column. */ .news > .wrap{width:100%} .news__back{font-family:var(--font-display);font-weight:700;font-size:15px} .news__head{ padding-top:56px; padding-bottom:40px; display:flex; flex-direction:column; gap:12px; } .news__head h1{ margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(38px,4vw,56px); line-height:1.08; letter-spacing:var(--tracking-display); } .news__head .subtitle{ margin:0; font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1.2; color:var(--indigo-400); } .news-featured__inner{ padding-top:64px; padding-bottom:64px; display:flex; flex-direction:column; gap:14px; } .news-featured__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .news-featured__label{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ice); } .news-featured__title{ margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3vw,40px); line-height:1.1; color:var(--white); max-width:26ch; text-wrap:balance; } .news-featured__title a{color:var(--white);text-decoration:none} .news-featured__title a:hover{color:var(--white);text-decoration:underline} .news-featured__excerpt{ margin:0; font-size:18px; line-height:var(--leading-body); color:var(--white); max-width:60ch; } .news-featured__more{margin:0;font-size:16px} .news-featured__more a{color:var(--ice);font-weight:700} .news__body{ padding-top:56px; padding-bottom:96px; display:flex; flex-direction:column; gap:56px; } .news-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; } @media (max-width:960px){ .news-cards{grid-template-columns:1fr} } .news-card{ background:var(--ice-100); padding:36px 32px; display:flex; flex-direction:column; gap:14px; } .news-card__title{ margin:0; font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.2; text-wrap:balance; } .news-card__title a{text-decoration:none} .news-card__title a:hover{text-decoration:underline} .news-card__excerpt{margin:0;font-size:16px;line-height:1.5} .news-card__more{margin:auto 0 0;font-size:15px;padding-top:12px} .news-card__more a{font-weight:700} .news-emailblock{ background:var(--indigo); padding:44px 48px; display:flex; flex-direction:column; gap:8px; box-sizing:border-box; } .news-emailblock__head{ margin:0; font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.2; color:var(--ice); } .news-emailblock p{margin:0;font-size:16px;line-height:var(--leading-body);color:var(--white)} .news-emailblock a{color:var(--ice);font-weight:700} .news__paidfor{margin:0;font-size:14px;line-height:var(--leading-body)} /* ---------- Single article ---------- */ .article{ padding-top:56px; padding-bottom:96px; display:flex; flex-direction:column; gap:40px; } .article__back{font-family:var(--font-display);font-weight:700;font-size:15px} .article__head{display:flex;flex-direction:column;gap:16px;max-width:800px} .article__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .article__cat{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--indigo-400); } .article__title{ margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(34px,3.6vw,48px); line-height:1.1; letter-spacing:var(--tracking-display); text-wrap:balance; } .article__standfirst{ margin:0; font-size:19px; line-height:var(--leading-body); color:var(--indigo-400); } .article__body{ display:flex; flex-direction:column; gap:18px; max-width:70ch; font-size:17px; line-height:1.65; } .article__body p, .article__body ul, .article__body ol{margin:0} .article__body ul, .article__body ol{padding-left:24px} .article__body h2, .article__body h3{ margin:10px 0 0; font-family:var(--font-display); font-weight:700; line-height:1.2; } .article__body img{max-width:100%;height:auto} .article__links{display:flex;gap:22px;align-items:center;flex-wrap:wrap} .article__links a{font-family:var(--font-display);font-weight:700;font-size:15px} .article__paidfor{margin:0;font-size:14px;line-height:var(--leading-body)}