/* ========================================================================== Design tokens ========================================================================== */ /* * Centralized theme variables. * Do not redefine these values in component CSS files. */ :root { /* Fonts */ --happy-font-main: var(--wp--preset--font-family--main); --happy-font-display: var(--happy-font-main); --happy-font-weight-light: 300; --happy-font-weight-bold: 700; --happy-letter-spacing-wide: 0.03em; /* Layout */ --happy-layout-page-max-width: 1280px; --happy-layout-content-max-width: 944px; --happy-layout-wide-max-width: 1240px; --happy-layout-wide-gutter: 20px; --happy-width-wide: min( calc(100% - (var(--happy-layout-wide-gutter) * 2)), var(--happy-layout-wide-max-width) ); --happy-width-full: 1220px; --happy-container-width: 1220px; --happy-container-padding: 32px; /* default font settings */ --happy-default-font-family: var(--happy-font-main); --happy-default-font-weight: var(--happy-font-weight-light); --happy-default-letter-spacing: var(--happy-letter-spacing-wide); --happy-default-line-height: 1.2; --happy-default-font-size: 28px; --happy-font-size-h1: clamp(64px, 8vw, 100px); --happy-line-height-h1: 70px; --happy-letter-spacing-h1: 0.01em; --happy-font-size-h2: 40px; --happy-line-height-h2: 48px; --happy-h2-margin: 0.8em 0 1.2em; /* Core colors from the InDesign mockups */ --happy-color-black: var(--wp--preset--color--black); --happy-color-white: var(--wp--preset--color--white); --happy-color-red: var(--wp--preset--color--red); --happy-color-blue: var(--wp--preset--color--blue); --happy-color-light-blue: var(--wp--preset--color--light-blue); --happy-color-green: var(--wp--preset--color--green); --happy-color-light-green: var(--wp--preset--color--light-green); --happy-color-yellow: var(--wp--preset--color--yellow); --happy-color-orange: var(--wp--preset--color--orange); --happy-color-pink: var(--wp--preset--color--pink); /* default colors */ --happy-default-color: var(--happy-color-black); --happy-default-background: var(--happy-color-white); --happy-color-muted: #666666; --happy-color-border: #E4DED5; --happy-color-red-border-soft: rgba(234, 42, 38, 0.35); --happy-color-black-border-soft: rgba(0, 0, 0, 0.09); /* Content sections */ --happy-content-section-padding-block-start: var(--happy-container-padding); --happy-content-section-padding-block-end: var(--happy-container-padding); /* default article content font */ --happy-content-font-size: var(--happy-default-font-size); --happy-content-line-height: 34px; --happy-content-letter-spacing: normal; --happy-content-paragraph-margin-block-end: 0px; /* header-specific variables */ --happy-color-logo: var(--happy-color-green); --happy-color-menu: var(--happy-color-black); --happy-color-menu-hover: #666666; --happy-color-menu-selected: var(--happy-color-red); --happy-font-size-logo: 26px; --happy-font-size-header-menu: 16px; /* footer-specific variables */ --happy-color-footer-separator: var(--happy-color-black); --happy-color-footer-background: var(--happy-color-yellow); --happy-color-footer-copyright-background: var(--happy-color-blue); --happy-footer-main-min-height: 354px; --happy-footer-main-padding-block: 48px; --happy-footer-content-min-height: 257px; --happy-footer-columns-whatsapp: 297fr; --happy-footer-columns-newsletter: 350fr; --happy-footer-columns-sitemap: 297fr; --happy-footer-promos-width: 647fr; --happy-footer-promo-title-row-min-height: 78px; --happy-footer-promo-text-row-min-height: 90px; --happy-footer-column-padding-inline: 54px; --happy-footer-separator-width: 2px; --happy-footer-promo-max-width: 240px; --happy-footer-promo-title-font-size: 35px; --happy-footer-promo-title-line-height: 34px; --happy-footer-sitemap-font-size: 20px; --happy-footer-sitemap-line-height: 30px; --happy-footer-text-font-size: 16px; --happy-footer-text-line-height: 18px; --happy-footer-text-margin-block-end: 0px; --happy-footer-form-width: 240px; --happy-footer-form-input-padding-inline: 14px; --happy-footer-form-input-font-size: 14px; --happy-footer-form-submit-min-width: 68px; --happy-footer-form-submit-padding-inline: 8px; --happy-footer-copyright-min-height: 75px; --happy-footer-copyright-font-size: 15px; --happy-footer-copyright-line-height: 18px; --happy-footer-letter-spacing: normal; /* Shared hero */ --happy-hero-min-height: 475px; --happy-hero-padding-block-start: 43px; --happy-hero-padding-block-end: 0px; --happy-hero-content-max-width: 710px; --happy-hero-margin-block-end: 20px; --happy-hero-title-margin-block-end: 20px; --happy-hero-text-max-width: 700px; --happy-hero-text-font-size: 30px; --happy-hero-text-line-height: 34px; --happy-hero-text-letter-spacing: 0.02em; --happy-hero-text-margin-block-end: 28px; --happy-hero-search-max-width: 350px; --happy-hero-search-min-height: 36px; --happy-hero-search-padding-inline: 26px; --happy-hero-search-font-size: 20px; --happy-hero-search-button-size: 36px; --happy-hero-search-icon-size: 20px; --happy-hero-search-icon-margin: 6px; /* Radius */ --happy-radius-small: 8px; --happy-radius-medium: 14px; --happy-radius-large: 28px; --happy-radius-hero: 12px; --happy-radius-button-small: 6px; --happy-radius-pill: 999px; --happy-default-form-radius: var(--happy-radius-pill); /* Shadows */ --happy-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.08); --happy-shadow-card: 0 10px 22px rgba(0, 0, 0, 0.07); --happy-shadow-card-light: 0 8px 18px rgba(0, 0, 0, 0.04); --happy-card-background: var(--happy-color-white); --happy-card-grid-gap: 50px; --happy-card-radius: var(--happy-radius-medium); --happy-card-shadow: 0 8px 18px rgba(0, 0, 0, 0.04); --happy-topic-card-image-aspect-ratio: 3 / 2; --happy-topic-card-image-padding: 10px; --happy-topic-card-title-min-height: 64px; --happy-topic-card-title-padding: 12px; --happy-topic-card-title-font-size: 35px; --happy-topic-card-title-line-height: 1.05; --happy-topic-card-subtitle-gap: 4px; --happy-topic-card-subtitle-font-size: 26px; --happy-topic-card-subtitle-line-height: 1.1; --happy-topic-page-card-grid-gap: 44px; --happy-topic-page-card-radius: var(--happy-radius-hero); --happy-topic-page-card-shadow: 4.24px 4.24px 4px rgba(0, 0, 0, 0.3); --happy-topic-page-card-title-font-size: 40px; --happy-topic-page-card-description-font-size: 30px; --happy-topic-page-card-line-height: var(--happy-default-line-height); --happy-topic-page-card-text-padding-inline: 13px; --happy-exercise-card-min-height: 260px; --happy-exercise-card-text-padding-block-start: 41px; --happy-exercise-card-image-inline-size: 68px; --happy-exercise-card-image-block-size: 47px; --happy-exercise-card-image-margin-block-end: 25px; --happy-related-topic-card-min-height: 106px; --happy-related-topic-card-padding-block: 13px 9px; --happy-related-topic-card-color: #4997FF; --happy-file-card-icon-area-height: 140px; --happy-file-card-icon-max-inline-size: 96px; --happy-file-card-icon-max-block-size: 110px; --happy-file-card-title-padding: 8px 12px 0; --happy-file-card-title-font-size: 28px; --happy-file-card-title-line-height: 1.1; --happy-file-card-subtitle-padding: 4px 12px 14px; --happy-file-card-subtitle-font-size: 20px; --happy-file-card-subtitle-line-height: 1.1; --happy-audio-player-gap: 12px; --happy-audio-player-close-size: 44px; --happy-audio-player-z-index: 100; --happy-audio-player-direction: ltr; /* Ellipse portrait */ --happy-ellipse-portrait-shape: ellipse(50% 50%); --happy-ellipse-portrait-radius: 50%; --happy-ellipse-portrait-text-gap: 0.64em; /* Compact controls */ --happy-compact-control-height: 23px; --happy-compact-control-gap: 6px; --happy-compact-control-padding-inline: 10px; --happy-compact-control-icon-size: 15px; --happy-compact-control-font-size: 16px; }