@layer tokens,base,components,utilities;@layer tokens;@layer base;@layer components;@layer utilities;@layer tokens{:root{--white: hsl(0, 100%, 100%);--grey: hsl(0, 0%, 58%);--blue-800: hsl(234, 29%, 20%);--blue-700: hsl(235, 18%, 26%);--red: hsl(4, 100%, 67%);--gradient-4: hsl(15, 100%, 61%)}}@layer tokens{:root{--base: 16;--spacing-0: 0;--spacing-100: calc(8 / var(--base) * 1rem);--spacing-200: calc(16 / var(--base) * 1rem);--spacing-300: calc(24 / var(--base) * 1rem);--spacing-400: calc(32 / var(--base) * 1rem);--spacing-500: calc(40 / var(--base) * 1rem);--spacing-600: calc(48 / var(--base) * 1rem);--spacing-800: calc(64 / var(--base) * 1rem);--spacing-900: calc(72 / var(--base) * 1rem);--spacing-1300: calc(104 / var(--base) * 1rem)}}@layer tokens{:root{--font-roboto: "Roboto", sans-serif;--base-font: 16;--font-size-90: calc(12 / var(--base-font) * 1rem);--font-size-100: calc(16 / var(--base-font) * 1rem);--font-size-500: calc(40 / var(--base-font) * 1rem);--font-size-900: calc(56 / var(--base-font) * 1rem);--font-weight-regular: 400;--font-weight-bold: 700;--line-height-tight: 1;--line-height-regular: 1.5}}@layer tokens{:root{--bg-primary: var(--blue-700);--bg-newsletter: var(--white);--fc-text: var(--blue-800);--fc-error-text: var(--red);--bg-border: var(--grey);--bg-error-border: var(--red);--bg-button: var(--blue-800);--bg-focus-email-input: var(--blue-800);--bg-email-input-border: var(--grey);--bg-button-hover: linear-gradient(to right, var(--gradient-4), var(--red))}}@layer tokens{:root{--padding-inline-newsletter-content: var(--spacing-300);--padding-block-newsletter-content: var(--spacing-200);--padding-inline-newsletter: 0;--padding-block-newsletter: 0;--padding-inline-success: var(--spacing-300);--padding-success: var(--spacing-800);--list-padding-inline-start: var(--spacing-200);--email-padding-block-end: var(--spacing-100);--gap-newsletter: var(--spacing-500);--stack-newsletter-content: var(--spacing-300);--stack-newsletter-information: var(--spacing-500);--stack-newsletter-list: var(--spacing-100);--stack-newsletter-form-fields: var(--spacing-300);--stack-success-content: var(--spacing-400);--stack-success-button: calc(263 / var(--base) * 1rem);--space-block-input: var(--spacing-200);--space-inline-input: var(--spacing-300);--space-block-button: var(--spacing-200);--space-inline-button: var(--spacing-400);--border-radius-button: var(--spacing-100)}@media(min-width:48em){:root{--padding-inline-newsletter-content: 0;--padding-inline-newsletter: var(--spacing-500);--padding-block-newsletter: var(--spacing-500);--stack-success-button: var(--spacing-400);--stack-newsletter-information:var(--spacing-300);--stack-newsletter-form-fields: var(--spacing-200)}}@media(min-width:64em){:root{--padding-inline-newsletter: var(--spacing-400);--padding-block-newsletter: var(--spacing-400);--gap-newsletter: var(--spacing-800);--stack-newsletter-content: var(--spacing-400);--stack-newsletter-information:var(--spacing-400);--stack-newsletter-form-fields: var(--spacing-300)}}}@layer tokens{:root{--font-family-base: var(--font-roboto);--fs-text-title: var(--font-size-500);--fs-text-body: var(--font-size-100);--fs-email-label: var(--font-size-90);--fw-body: var(--font-weight-regular);--fw-title: var(--font-weight-bold);--lh-body: var(--line-height-regular);--lh-title: var(--line-height-tight)}@media(min-width:48em){:root{--fs-text-title: var(--font-size-900)}}}@layer base{@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(/newsletter-sign-up-with-success-message/assets/fonts/Roboto-Regular.ttf) format("truetype")}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(/newsletter-sign-up-with-success-message/assets/fonts/Roboto-Bold.ttf) format("truetype")}}@layer base{*,*:before,*:after{box-sizing:border-box}ul,ol{margin:0;padding:0;list-style:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}img{max-width:100%;display:block}input,button,textarea,select{font:inherit}}@layer base{html{background-color:var(--bg-primary);font-family:var(--font-family-base);color:var(--fc-text);-webkit-text-size-adjust:100%}html,body{min-block-size:100vh}body{display:flex;flex-direction:column}ul{list-style-position:inside}input,button{display:block}@supports (min-block-size: 100dvh){html,body{min-block-size:100dvh}}}@layer components{.newsletter{background-color:var(--bg-newsletter);max-inline-size:100%}.newsletter-content,.newsletter-image{flex:1}.newsletter-image picture,.newsletter-image img{block-size:auto;inline-size:100%}.newsletter-title{font-size:var(--fs-text-title);font-weight:var(--fw-title);line-height:var(--lh-title)}.newsletter-information{font-size:var(--fs-text-body);font-weight:var(--fw-body);line-height:var(--lh-body)}.feature-list li{display:flex;align-items:start;gap:1rem}.feature-list li:before{content:"";inline-size:calc(21 / var(--base) * 1rem);block-size:calc(21 / var(--base) * 1rem);flex-shrink:0;background:url(/newsletter-sign-up-with-success-message/assets/images/icon-list.svg) no-repeat center;background-size:contain}@media(min-width:48em){.newsletter{max-inline-size:calc(608 / var(--base) * 1rem);min-block-size:auto}}@media(min-width:64em){.newsletter{max-inline-size:calc(904 / var(--base) * 1rem);min-block-size:auto}}}@layer components{.email-form{display:block;font-size:var(--fs-email-label);line-height:var(--lh-body);font-weight:var(--fw-title)}.information-fields{display:grid;grid-template-columns:1fr auto;align-items:center;position:relative;width:100%;padding-block-end:var(--email-padding-block-end)}.information-fields>*{min-width:0}.information-fields .action-button{margin-inline-start:.5rem}.label--error{color:var(--fc-error-text);font-size:var(--fs-email-label);line-height:var(--lh-body);font-weight:var(--fw-title)}.input-email{border:.0625em solid var(--bg-email-input-border);inline-size:100%;padding-block:var(--space-block-input);padding-inline:var(--space-inline-input);border-radius:var(--border-radius-button)}.input-email:focus-visible{outline:.125em solid var(--bg-focus-email-input)}.input--error{border:.125em solid var(--bg-error-border);background-color:#ffe7e6;color:var(--fc-error-text);animation:input-shake .35s ease}.input--error:focus-visible{outline:.125em solid var(--bg-error-border);border-color:var(--bg-error-border)}.input-email:-webkit-autofill,.input-email:-webkit-autofill:hover,.input-email:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 62.5rem white inset;-webkit-text-fill-color:var(--fc-text)}:where(.input--error):-webkit-autofill,:where(.input--error):-webkit-autofill:hover,:where(.input--error):-webkit-autofill:focus{-webkit-box-shadow:0 0 0 62.5rem #ffe7e6 inset;-webkit-text-fill-color:var(--fc-error-text)}@keyframes input-shake{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.input--error{animation:none;outline:2px solid #c0392b}}}@layer components{.button{inline-size:100%;padding-block:var(--space-block-button);padding-inline:var(--space-inline-button);border:none;border-radius:var(--border-radius-button);background:var(--bg-button);color:var(--white);font-weight:var(--fw-title);line-height:var(--lh-title);text-align:center;outline:none}.button:focus-visible{box-shadow:0 0 0 4px #007bff40,0 0 0 1px #007bff;border-radius:var(--border-radius-button)}.button:focus{outline:3px solid rgba(0,123,255,.9);outline-offset:2px}.button:hover{background:var(--bg-button-hover)}}@layer components{.success-message{display:flex;flex-direction:column;background-color:var(--bg-newsletter);max-inline-size:100%}.success-title{font-size:var(--fs-text-title);line-height:var(--lh-title);max-inline-size:12ch}.success-email{font-weight:var(--fw-title)}@media(min-width:48em){.success-message{max-inline-size:calc(504 / var(--base) * 1rem);min-block-size:auto}}}@layer components{.attribution{font-size:clamp(.6875rem,1vw,.8125rem);text-align:center;font-weight:var(--fw-body);color:var(--white)}}@layer utilities{.box{padding-inline:var(--padding-inline-newsletter-content);padding-block:0 var(--padding-block-newsletter-content);border-radius:0}.box-sm{padding-inline:var(--padding-inline-success);padding-block:calc(149 / var(--base) * 1rem) calc(70 / var(--base) * 1rem)}.box-lg{padding-inline:var(--padding-inline-newsletter);padding-block:var(--padding-block-newsletter)}@media(min-width:48em){.box{padding-block:0}.box-sm{padding:var(--padding-success);border-radius:calc(36 / var(--base) * 1rem)}.box-lg{padding-inline:var(--padding-inline-newsletter);padding-block:var(--padding-block-newsletter);border-radius:calc(36 / var(--base) * 1rem)}}}@layer utilities{.cover{flex:1;display:flex;justify-content:center}@media(min-width:48em){.cover{align-items:center}}}@layer utilities{.cluster{display:inline-flex;flex-direction:column;justify-content:flex-start;gap:var(--gap-newsletter)}@media(min-width:48em){.cluster{align-items:stretch}}@media(min-width:64em){.cluster{flex-direction:row-reverse;align-items:center}}}@layer utilities{.stack>*+*{margin-block-start:var(--stack-newsletter-content)}.stack-lg>*+*{margin-block-start:var(--stack-newsletter-information)}.stack-xs>*+*{margin-block-start:var(--stack-newsletter-list)}.stack-md>*+*{margin-block-start:var(--stack-newsletter-form-fields)}.stack-sm>*+*{margin-block-start:var(--stack-success-content)}.stack-xl>*+*{margin-block-start:var(--stack-success-button)}}@layer utilities{.link{color:#53d9fa;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.15em}.link:hover,.link:focus-visible{text-decoration-thickness:.08em}.link:focus-visible{outline:.125em solid rgb(83,217,250);outline-offset:.125em}}@layer utilities{.hidden{display:none}}@layer utilities{@keyframes enter-up{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}.animate-enter-up{animation:enter-up .45s ease}@media(prefers-reduced-motion:reduce){.animate-enter-up{animation:none}}}