/* * Frencheezy theme: components and the details theme.json cannot express. * Tokens come from theme.json presets (--wp--preset--*) and custom values * (--wp--custom--*), so the same rules adapt to the Frencheezy, Kids and Exams looks. */ :root { --fz-radius-sm: var(--wp--custom--radius--sm, 10px); --fz-radius: var(--wp--custom--radius--md, 18px); --fz-radius-lg: var(--wp--custom--radius--lg, 28px); --fz-ease: var(--wp--custom--motion--ease, cubic-bezier(.2, .7, .2, 1)); --fz-ink: var(--wp--preset--color--ink); --fz-base: var(--wp--preset--color--base); --fz-surface: var(--wp--preset--color--surface); --fz-soft: var(--wp--preset--color--soft); --fz-muted: var(--wp--preset--color--muted); --fz-primary: var(--wp--preset--color--primary); --fz-primary-dark: var(--wp--preset--color--primary-dark); --fz-accent: var(--wp--preset--color--accent); --fz-accent-2: var(--wp--preset--color--accent-2); --fz-accent-3: var(--wp--preset--color--accent-3); --fz-accent-4: var(--wp--preset--color--accent-4); --fz-line: var(--wp--preset--color--line); --fz-night: var(--wp--preset--color--night); --fz-on-night: var(--wp--preset--color--on-night); --fz-wide: var(--wp--style--global--wide-size, 1240px); --fz-gutter: var(--wp--style--root--padding-left, clamp(1rem, calc(4vw / var(--fz-z, 1)), 2.5rem)); --fz-edge: max(var(--fz-gutter), calc((calc(100vw / var(--fz-z, 1)) - var(--fz-wide)) / 2)); --fz-shadow: var(--wp--preset--shadow--soft); --fz-shadow-lift: var(--wp--preset--shadow--lift); --fz-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0 0.23 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --fz-smile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M4 5 Q60 26 116 5' fill='none' stroke='%23FFC93C' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ large screens Above about 2100px the whole site (theme, Tutor and Pro Pack screens alike) zooms in steps, so a 2560 or 4K screen shows the same composition as a 1920 one, just larger and sharper, instead of a narrow strip. Viewport units are divided by --fz-z everywhere, which keeps full-bleed bands and hero art exact. */ :root { --fz-z: 1; } @media (min-width: 2112px) { :root { --fz-z: 1.1; } } @media (min-width: 2400px) { :root { --fz-z: 1.25; } } @media (min-width: 2880px) { :root { --fz-z: 1.5; } } @media (min-width: 3360px) { :root { --fz-z: 1.75; } } @media (min-width: 3840px) { :root { --fz-z: 2; } } html { zoom: var(--fz-z); } /* ------------------------------------------------------------ base */ html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; } body { background-image: var(--fz-grain); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } ::selection { background: var(--fz-accent); color: var(--fz-ink); } img { max-width: 100%; height: auto; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--fz-primary); outline-offset: 3px; border-radius: 4px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wp-site-blocks { padding-top: 0; } .wp-site-blocks > * + * { margin-block-start: 0; } .fz-main { margin-block-start: 0 !important; } :where(.wp-block-group.is-layout-default) > * { margin-block: 0; } :where(.wp-block-group.is-layout-default) > * + * { margin-block-start: var(--wp--style--block-gap, 1.25rem); } .is-center, .is-center > * { text-align: center; justify-content: center; margin-inline: auto; } .has-text-align-center { text-align: center; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } /* Emphasis inside headings: the brand "smile" */ :where(h1, h2, .fz-hero__title) em { font-style: italic; color: var(--fz-primary); background: var(--fz-smile) no-repeat 50% 100% / 100% .32em; padding-bottom: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ------------------------------------------------------- block styles */ .is-style-fz-eyebrow { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small) !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fz-primary); display: flex; align-items: center; gap: .6em; } .is-style-fz-eyebrow::before { content: ""; width: 1.9em; height: .6em; background: var(--fz-smile) no-repeat center / contain; flex: none; } .is-style-fz-lede { font-size: var(--wp--preset--font-size--large); color: var(--fz-muted); max-width: 46ch; line-height: 1.55; } .is-center .is-style-fz-lede { margin-inline: auto; } .is-style-fz-badge { display: inline-block; width: fit-content; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .04em; padding: .45em 1em; border-radius: 999px; background: var(--fz-accent); color: var(--fz-ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); } .is-style-fz-check { list-style: none; padding-left: 0; } .is-style-fz-check li { position: relative; padding-left: 1.9em; margin-block: .45em; } .is-style-fz-check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--fz-accent-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%231E1B3A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; } .wp-block-button.is-style-fz-ghost .wp-block-button__link { background: transparent; color: var(--fz-ink); box-shadow: inset 0 0 0 2px currentColor; } .wp-block-button.is-style-fz-ghost .wp-block-button__link:hover { background: var(--fz-ink); color: var(--fz-base); box-shadow: inset 0 0 0 2px var(--fz-ink); } .wp-block-button.is-style-fz-sun .wp-block-button__link { background: var(--fz-accent); color: var(--fz-ink); } .wp-block-button.is-style-fz-sun .wp-block-button__link:hover { background: #ffd765; color: var(--fz-ink); } .wp-block-button.is-style-fz-arrow .wp-block-button__link { background: none; color: var(--fz-primary); padding-inline: .2em; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; } .wp-block-button.is-style-fz-arrow .wp-block-button__link::after { content: " \2192"; transition: margin .2s var(--fz-ease); } .wp-block-button.is-style-fz-arrow .wp-block-button__link:hover::after { margin-left: .3em; } .wp-element-button, .wp-block-button__link { transition: background-color .2s, color .2s, transform .2s var(--fz-ease), box-shadow .2s; } .wp-block-button__link:hover { transform: translateY(-2px); } .wp-block-button__link:active { transform: translateY(0); } .wp-block-group.is-style-fz-card { background: var(--fz-surface); border-radius: var(--fz-radius-lg); padding: clamp(1.25rem, calc(3vw / var(--fz-z, 1)), 2rem); box-shadow: var(--fz-shadow); } .wp-block-group.is-style-fz-sticker { background: var(--fz-surface); border-radius: var(--fz-radius-lg); padding: clamp(1.25rem, calc(3vw / var(--fz-z, 1)), 2rem); border: 3px solid var(--fz-ink); box-shadow: 0 6px 0 var(--fz-ink); } .wp-block-group.is-style-fz-panel { background-color: var(--fz-night); color: var(--fz-on-night); } .is-style-fz-panel :where(h1, h2, h3, h4, p, li) { color: inherit; } .is-style-fz-panel .is-style-fz-lede { color: color-mix(in srgb, var(--fz-on-night) 80%, transparent); } .is-style-fz-panel .is-style-fz-eyebrow { color: var(--fz-accent); } .is-style-fz-panel :where(h1, h2) em { color: var(--fz-accent); } .is-style-fz-panel a:where(:not(.wp-element-button)) { color: var(--fz-accent); } .wp-block-group.is-style-fz-zellige { background-color: var(--fz-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23FFF8EC' stroke-opacity='.16' stroke-width='1.5'%3E%3Cpath d='M32 6l7.6 18.4L58 32l-18.4 7.6L32 58l-7.6-18.4L6 32l18.4-7.6z'/%3E%3Ccircle cx='32' cy='32' r='7'/%3E%3Cpath d='M0 0l12 12M64 0L52 12M0 64l12-12M64 64L52 52'/%3E%3C/g%3E%3C/svg%3E"); color: #fff; } .wp-block-group.is-style-fz-grid { background-color: var(--fz-surface); background-image: linear-gradient(var(--fz-line) 1px, transparent 1px), linear-gradient(90deg, var(--fz-line) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; } .wp-block-image.is-style-fz-arch img { border-radius: 999px 999px var(--fz-radius-lg) var(--fz-radius-lg); } .wp-block-image.is-style-fz-blob img { border-radius: 42% 58% 52% 48% / 48% 42% 58% 52%; } .wp-block-image.is-style-fz-frame img { border: 6px solid #fff; box-shadow: var(--fz-shadow-lift); transform: rotate(-2deg); } /* ------------------------------------------------------------ header */ .fz-site-header { position: sticky; top: 0; z-index: 50; } .admin-bar .fz-site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .fz-site-header { top: 0; position: relative; } } .fz-topbar { background: var(--fz-night); color: var(--fz-on-night); padding-block: .4rem; font-size: var(--wp--preset--font-size--x-small); } .fz-topbar__inner { gap: 1rem; min-height: 32px; } .fz-topbar__note { margin: 0; opacity: .85; white-space: nowrap; } @media (max-width: 860px) { .fz-topbar__note { display: none; } } .fz-switch__list { list-style: none; display: flex; gap: .3rem; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .fz-switch__list::-webkit-scrollbar { display: none; } .fz-switch__link { display: inline-flex; align-items: center; gap: .45em; padding: .38em .85em; border-radius: 999px; color: var(--fz-on-night); text-decoration: none; font-weight: 600; white-space: nowrap; transition: background .2s; } .fz-switch__link:hover { background: rgba(255, 255, 255, .12); color: var(--fz-on-night); } .fz-switch__link[aria-current="page"] { background: var(--fz-accent); color: #1E1B3A; } .fz-switch__dot { width: .55em; height: .55em; border-radius: 50%; background: var(--fz-primary); box-shadow: 0 0 0 2px rgba(255,255,255,.35); } .fz-switch__link--kids .fz-switch__dot { background: #FF6B5B; } .fz-switch__link--exams .fz-switch__dot { background: #1F9D6B; } .fz-switch__link--main .fz-switch__dot { background: #9796F0; } .fz-switch__link:focus-visible { outline-color: var(--fz-accent); } /* Each site lights its own pill in its own colour: Majorelle for main (kids keeps yellow, exams keeps gold). */ .fz-look-main .fz-switch__link[aria-current="page"] { background: #4B4ACF; color: #fff; } .fz-look-main .fz-switch__link[aria-current="page"] .fz-switch__dot { background: #FFC93C; } .fz-header { background: color-mix(in srgb, var(--fz-base) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; } .is-scrolled .fz-header { border-bottom-color: var(--fz-line); box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .4); } /* The frosted header (backdrop-filter) becomes the containing block of fixed children, which clipped the open phone menu to the header's 64px. Drop the effect, and anything else that traps fixed elements, while the menu is open. */ .fz-header:has(.wp-block-navigation__responsive-container.is-menu-open), .fz-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; filter: none; } /* Phone menu: sub-menu links centred under their parent, a step smaller. */ /* Desktop dropdowns: a card in the site's style, wide enough for one-line labels. */ .fz-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container { min-width: 15rem !important; padding: .4rem !important; border: 1px solid var(--fz-line) !important; border-radius: var(--fz-radius) !important; background: var(--fz-surface) !important; box-shadow: var(--fz-shadow-lift); top: calc(100% + .35rem) !important; } .fz-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: nowrap; padding: .55rem .8rem !important; border-radius: var(--fz-radius-sm); } .fz-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .fz-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { background: var(--fz-soft); } .fz-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; } /* the gap between the parent and the card must not close the menu on the way down */ .fz-nav .wp-block-navigation-item.has-child:not(.open-on-click)::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .5rem; } .fz-look-kids .fz-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container { border: 3px solid #23214A !important; box-shadow: 0 5px 0 #23214A; } .fz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: center !important; text-align: center; padding: 0 !important; gap: .35rem; } .fz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding-inline: 0 !important; font-size: .92em; opacity: .85; } .fz-header__inner { min-height: 76px; gap: clamp(.75rem, calc(2vw / var(--fz-z, 1)), 2rem); } .fz-logo { line-height: 0; flex: none; } .fz-logo a { display: inline-block; border-radius: 6px; } .fz-logo img { height: auto; max-width: min(calc(46vw / var(--fz-z, 1)), 100%); } .fz-nav { flex: 1 1 auto; } .fz-nav .wp-block-navigation__container { gap: clamp(.6rem, calc(1.6vw / var(--fz-z, 1)), 1.8rem); } .fz-nav .wp-block-navigation-item__content { text-decoration: none; color: var(--fz-ink); padding-block: .4em; position: relative; } .fz-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: .35em; background: var(--fz-smile) no-repeat center / 100% 100%; transform: scaleX(0); transition: transform .25s var(--fz-ease); } .fz-nav .wp-block-navigation-item__content:hover::after, .fz-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); } .fz-nav .wp-block-navigation__responsive-container-open { color: var(--fz-ink); padding: .5rem; border-radius: 12px; background: var(--fz-soft); } .fz-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--fz-base); color: var(--fz-ink); padding: 1.5rem; } .fz-nav .is-menu-open .wp-block-navigation__container { gap: 1rem; font-size: var(--wp--preset--font-size--x-large); font-family: var(--wp--preset--font-family--heading); } .fz-account { display: flex; align-items: center; gap: clamp(.5rem, calc(1.2vw / var(--fz-z, 1)), 1rem); flex: none; font-size: var(--wp--preset--font-size--small); font-weight: 600; } .fz-account a { color: var(--fz-ink); text-decoration: none; } .fz-account__cart { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; } .fz-account__cart:hover { background: var(--fz-soft); } .fz-account__count { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--fz-accent-2); color: #1E1B3A; font-size: 11px; display: grid; place-items: center; padding: 0 4px; } .fz-account__login:hover { color: var(--fz-primary); text-decoration: underline; } .fz-account__cta.wp-element-button { color: #fff; padding: .7em 1.25em; font-size: var(--wp--preset--font-size--small); border-radius: var(--wp--custom--radius--pill, 999px); } .fz-look-exams .fz-account__cta.wp-element-button { border-radius: var(--fz-radius-sm); } .fz-account__cta.wp-element-button:hover { color: #fff; } .fz-account__me { display: inline-flex; align-items: center; gap: .5em; padding: .25em .9em .25em .25em; border-radius: 999px; background: var(--fz-soft); } .fz-account__avatar { width: 32px; height: 32px; border-radius: 50%; } @media (max-width: 600px) { .fz-account__cta { display: none !important; } .fz-account__me span { display: none; } .fz-account__me { padding: .2em; } .fz-header__inner { min-height: 64px; } } /* -------------------------------------------------------------- hero */ .fz-hero { position: relative; isolation: isolate; min-height: clamp(560px, calc(86vh / var(--fz-z, 1)), 880px); display: flex; align-items: center; overflow: hidden; padding-block: clamp(3rem, calc(8vw / var(--fz-z, 1)), 6rem); padding-inline: var(--fz-edge) !important; } .fz-hero > .fz-hero__art { position: absolute; inset: 0; z-index: -2; margin: 0 !important; } .fz-hero > .fz-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; border-radius: 0; } .fz-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--fz-base) 0%, color-mix(in srgb, var(--fz-base) 82%, transparent) 30%, transparent 58%); } .fz-hero__copy { position: relative; max-width: 580px; margin: 0 !important; } .fz-hero__copy > * + * { margin-block-start: 1.4rem !important; } .fz-hero__title { font-size: var(--wp--preset--font-size--colossal); line-height: 1; margin: 0; } .fz-hero__lede { font-size: var(--wp--preset--font-size--large); max-width: min(520px, 100%); color: var(--fz-ink); } .fz-hero__proof { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: var(--wp--preset--font-size--small); font-weight: 600; } .fz-hero__proof li { margin: 0; } .fz-hero .wp-block-buttons { gap: .75rem; } @media (max-width: 1279px) { .fz-hero { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 2.25rem; padding-bottom: 0; } .fz-hero::before { display: none; } .fz-hero > .fz-hero__art { position: relative; inset: auto; order: 2; margin: 2rem calc(-1 * var(--fz-gutter)) 0 !important; aspect-ratio: 4 / 3; } .fz-hero > .fz-hero__art img { object-position: 78% 50%; } .fz-hero__copy { max-width: 640px; } } @media (min-width: 782px) and (max-width: 1279px) { .fz-hero > .fz-hero__art { aspect-ratio: 16 / 8; } .fz-hero { padding-top: 3.5rem; } } @media (max-width: 781px) { .fz-hero__title { font-size: clamp(2.6rem, calc(11.5vw / var(--fz-z, 1)), 3.4rem); } } /* Entrance: one orchestrated reveal on load */ @media (prefers-reduced-motion: no-preference) { .fz-hero__copy > * { animation: fz-rise .8s var(--fz-ease) both; } .fz-hero__copy > *:nth-child(2) { animation-delay: .08s; } .fz-hero__copy > *:nth-child(3) { animation-delay: .16s; } .fz-hero__copy > *:nth-child(4) { animation-delay: .24s; } .fz-hero__copy > *:nth-child(5) { animation-delay: .32s; } .fz-hero > .fz-hero__art img { animation: fz-settle 1.6s var(--fz-ease) both; } .js .fz-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--fz-ease), transform .7s var(--fz-ease); } .js .fz-reveal.is-in { opacity: 1; transform: none; } } @keyframes fz-rise { from { opacity: 0; transform: translateY(18px); } } @keyframes fz-settle { from { transform: scale(1.06); } } @keyframes fz-bob { 50% { transform: translateY(-8px) rotate(-3deg); } } /* ---------------------------------------------------------- sections */ .fz-section { padding-block: var(--wp--preset--spacing--70); padding-inline: var(--fz-gutter); position: relative; } .fz-section-head { max-width: 760px; margin-bottom: clamp(2rem, calc(4vw / var(--fz-z, 1)), 3.25rem) !important; } .fz-section-head.is-center { margin-inline: auto; } .fz-section-head h2 { margin-block: .6rem 0; } .fz-section-head .is-style-fz-lede { margin-top: 1rem; } .fz-note { font-size: var(--wp--preset--font-size--x-small); color: var(--fz-muted); } /* Who is learning */ .fz-who { background: var(--fz-surface); border-radius: var(--fz-radius-lg) var(--fz-radius-lg) 0 0; margin-top: calc(-1 * var(--fz-radius-lg)) !important; z-index: 1; } .fz-who__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, calc(2.5vw / var(--fz-z, 1)), 2rem); } .fz-who__card { position: relative; display: flex; flex-direction: column; background: var(--fz-base); border-radius: var(--fz-radius-lg); padding: 0 0 1.75rem; overflow: hidden; border: 1px solid var(--fz-line); transition: transform .35s var(--fz-ease), box-shadow .35s var(--fz-ease); } .fz-who__card:hover, .fz-who__card:focus-within { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--fz-shadow-lift); } .fz-who__card > * { margin-inline: 1.75rem !important; } .fz-who__card > .fz-who__img { margin: 0 !important; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fz-soft); } .fz-who__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transition: transform .6s var(--fz-ease); } .fz-who__card:hover .fz-who__img img { transform: scale(1.05); } .fz-who__card--kids .fz-who__img { background: radial-gradient(circle at 50% 70%, #FFE9A8, #FFC93C); } .fz-who__card--kids .fz-who__img img { object-fit: contain; padding: 1rem 0 0; } .fz-who__num { font-family: var(--wp--preset--font-family--heading); font-size: 3.25rem; line-height: 1; font-weight: 600; font-style: italic; color: transparent; -webkit-text-stroke: 1.5px var(--fz-primary); margin-top: -1.9rem !important; position: relative; width: fit-content; background: var(--fz-base); padding: .1em .25em 0; border-radius: 12px 12px 0 0; } .fz-who__title { font-size: var(--wp--preset--font-size--xx-large); margin-top: .25rem !important; } .fz-who__text { color: var(--fz-muted); flex: 1; } .fz-who__link { font-weight: 700; margin-top: 1rem !important; } .fz-who__link a { text-decoration: none; color: var(--fz-primary); } .fz-who__link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .fz-who__link a::before { content: "\2192"; float: right; margin-left: .5em; transition: transform .25s var(--fz-ease); } .fz-who__card:hover .fz-who__link a::before { transform: translateX(4px); } .fz-who__card--me { box-shadow: inset 0 -6px 0 var(--fz-primary); } .fz-who__card--kids { box-shadow: inset 0 -6px 0 #FFC93C; } .fz-who__card--exams { box-shadow: inset 0 -6px 0 #1F9D6B; } @media (max-width: 860px) { .fz-who__grid { grid-template-columns: 1fr; } } /* Level path */ .fz-levels { background: var(--fz-surface); } .fz-levels__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, calc(6vw / var(--fz-z, 1)), 5rem); align-items: center; } .fz-levels__art { margin: 0 !important; } .fz-levels__art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; } .fz-levels__list { list-style: none; padding: 0; margin: 0 0 2rem !important; counter-reset: lv; position: relative; } .fz-levels__list::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; border-left: 3px dashed var(--fz-line); } .fz-levels__list li { display: grid; grid-template-columns: 56px 1fr; column-gap: 1.1rem; padding-block: .7rem; position: relative; } .fz-level__code { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; color: #1E1B3A; background: var(--fz-accent-3); box-shadow: 0 0 0 5px var(--fz-surface); } .fz-levels__list li:nth-child(2) .fz-level__code { background: #6FB7FF; } .fz-levels__list li:nth-child(3) .fz-level__code { background: var(--fz-accent); } .fz-levels__list li:nth-child(4) .fz-level__code { background: var(--fz-accent-2); } .fz-levels__list li:nth-child(5) .fz-level__code { background: var(--fz-primary); color: #fff; } .fz-level__name { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); align-self: end; } .fz-level__text { color: var(--fz-muted); font-size: var(--wp--preset--font-size--small); } @media (max-width: 860px) { .fz-levels__grid { grid-template-columns: 1fr; } .fz-levels__art { order: -1; max-width: 420px; } .fz-levels__art img { aspect-ratio: 4 / 3; } } /* Live classes */ .fz-live-section { overflow: hidden; } .fz-live-section::after { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--fz-primary) 60%, transparent), transparent 70%); pointer-events: none; } .fz-live__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, calc(6vw / var(--fz-z, 1)), 5rem); align-items: center; position: relative; z-index: 1; } .fz-live__art { margin: 0 !important; } .fz-live__art img { border-radius: var(--fz-radius-lg); transform: rotate(-2.5deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); border: 6px solid #fff; } .fz-live__list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .6rem; } .fz-live__item { display: flex; gap: 1rem; align-items: center; padding: .8rem 1rem; border-radius: var(--fz-radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); } .fz-live__date { display: grid; place-items: center; width: 52px; height: 56px; border-radius: 12px; background: var(--fz-accent); color: #1E1B3A; line-height: 1; flex: none; } .fz-live__day { font-family: var(--wp--preset--font-family--heading); font-size: 1.4rem; font-weight: 700; } .fz-live__mon { font-size: .72rem; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; } .fz-live__title { font-weight: 700; color: inherit !important; text-decoration: none; } .fz-live__meta { display: block; font-size: var(--wp--preset--font-size--x-small); opacity: .8; } .fz-live__empty { padding: 1rem 1.25rem; border-radius: var(--fz-radius); border: 1px dashed rgba(255, 255, 255, .35); font-size: var(--wp--preset--font-size--small); margin-block: 1.5rem !important; } @media (max-width: 860px) { .fz-live__grid { grid-template-columns: 1fr; } } /* Teacher */ .fz-teacher__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, calc(6vw / var(--fz-z, 1)), 5rem); align-items: center; } .fz-teacher__card { border-radius: var(--fz-radius-lg); padding: clamp(1.75rem, calc(4vw / var(--fz-z, 1)), 3rem); position: relative; overflow: hidden; box-shadow: var(--fz-shadow-lift); transform: rotate(-1.5deg); } .fz-teacher__mono { font-family: var(--wp--preset--font-family--heading); font-style: italic; font-weight: 700; font-size: clamp(7rem, calc(16vw / var(--fz-z, 1)), 11rem); line-height: .9; color: var(--fz-accent); margin: 0 !important; } .fz-teacher__sign { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); line-height: 1.1; } .fz-teacher__sign span { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); opacity: .8; } .fz-teacher__stats { list-style: none; padding: 1.25rem 0 0; margin-top: 1.5rem !important; border-top: 1px solid rgba(255, 255, 255, .25); display: grid; gap: .5rem; font-size: var(--wp--preset--font-size--small); } .fz-teacher__stats strong { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; color: var(--fz-accent); margin-right: .35em; font-variant-numeric: tabular-nums; } .fz-teacher__copy p:not(.is-style-fz-eyebrow):not(.is-style-fz-lede) { max-width: 62ch; } @media (max-width: 860px) { .fz-teacher__grid { grid-template-columns: 1fr; } .fz-teacher__card { transform: none; } } /* Reviews */ .fz-reviews { background: var(--fz-soft); } .fz-reviews__wall { columns: 3 280px; column-gap: 1.25rem; } .fz-reviews__wall.is-three { columns: 3 260px; } .fz-review { break-inside: avoid; margin: 0 0 1.25rem !important; padding: 1.5rem 1.6rem; border-radius: var(--fz-radius-lg); background: var(--fz-surface); box-shadow: var(--fz-shadow); position: relative; } .fz-review > * + * { margin-top: .75rem !important; } .fz-stars { color: #E0A526; letter-spacing: .15em; font-size: .9rem; margin: 0 !important; } .fz-review__text { font-size: var(--wp--preset--font-size--medium); line-height: 1.55; } .fz-review__text::before { content: "\201C"; font-family: var(--wp--preset--font-family--heading); font-size: 3rem; line-height: 0; vertical-align: -.45em; margin-right: .1em; color: var(--fz-primary); } .fz-review__who { font-size: var(--wp--preset--font-size--small); color: var(--fz-muted); } .fz-review.is-feature .fz-review__text { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); line-height: 1.4; } .fz-review.is-butter { background: var(--fz-accent); } .fz-review.is-majorelle { background: var(--fz-primary); color: #fff; } .fz-review.is-majorelle .fz-review__who, .fz-review.is-majorelle .fz-stars { color: #fff; } .fz-review.is-majorelle .fz-review__text::before { color: var(--fz-accent); } .fz-review.is-coral { background: var(--fz-accent-2); } .fz-review.is-mint { background: var(--fz-accent-3); } .fz-review.is-sky { background: var(--fz-accent-4); } .fz-review:is(.is-butter, .is-coral, .is-mint, .is-sky) :is(.fz-review__who, .fz-stars) { color: #1E1B3A; } .fz-review:is(.is-butter, .is-coral, .is-mint, .is-sky) .fz-review__text::before { color: #1E1B3A; } /* Plans */ .fz-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } .fz-plan { background: var(--fz-surface); border-radius: var(--fz-radius-lg); padding: clamp(1.5rem, calc(3vw / var(--fz-z, 1)), 2.25rem); border: 1px solid var(--fz-line); display: flex; flex-direction: column; } .fz-plan > .wp-block-buttons { margin-top: auto !important; padding-top: 1.25rem; } .fz-plan__tag { font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--fz-primary); } .fz-plan__title { font-size: var(--wp--preset--font-size--xx-large); margin-top: .35rem !important; } .fz-plan__text { color: var(--fz-muted); } .fz-plan--live { background: var(--fz-night); color: var(--fz-on-night); border-color: var(--fz-night); transform: translateY(-14px); box-shadow: var(--fz-shadow-lift); } .fz-plan--live :is(h3, p, li) { color: inherit; } .fz-plan--live .fz-plan__tag { color: var(--fz-accent); } .fz-plan--live .fz-plan__text { color: color-mix(in srgb, var(--fz-on-night) 78%, transparent); } .fz-plan--live .is-style-fz-ghost .wp-block-button__link { color: var(--fz-on-night); } .fz-plan--live .is-style-fz-ghost .wp-block-button__link:hover { background: var(--fz-accent); color: #1E1B3A; box-shadow: inset 0 0 0 2px var(--fz-accent); } .fz-price-from { margin: 1rem 0 0 !important; padding: .7rem 1rem; border-radius: var(--fz-radius-sm); background: var(--fz-soft); font-size: var(--wp--preset--font-size--small); } .fz-price-from__val { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; font-variant-numeric: tabular-nums; } .fz-price-from.is-fallback { font-weight: 600; } @media (max-width: 960px) { .fz-plans { grid-template-columns: 1fr; } .fz-plan--live { transform: none; } } /* Free resources */ .fz-res__wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, calc(5vw / var(--fz-z, 1)), 4rem); align-items: start; } .fz-res__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .fz-res { position: relative; padding: 1.4rem 1.5rem; border-radius: var(--fz-radius); border: 2px dashed var(--fz-line); background: var(--fz-surface); transition: border-color .2s, transform .3s var(--fz-ease); } .fz-res:hover, .fz-res:focus-within { border-color: var(--fz-primary); transform: translateY(-3px); } .fz-res > * + * { margin-top: .5rem !important; } .fz-res__kind { display: inline-block; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; padding: .2em .7em; border-radius: 999px; background: var(--fz-soft); } .fz-res__title { font-size: var(--wp--preset--font-size--large); } .fz-res__text { font-size: var(--wp--preset--font-size--small); color: var(--fz-muted); } .fz-res__link { font-weight: 700; font-size: var(--wp--preset--font-size--small); } .fz-res__link a { text-decoration: none; } .fz-res__link a::after { content: ""; position: absolute; inset: 0; } @media (max-width: 860px) { .fz-res__wrap { grid-template-columns: 1fr; } } @media (max-width: 520px) { .fz-res__grid { grid-template-columns: 1fr; } } /* FAQ */ .fz-faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, calc(5vw / var(--fz-z, 1)), 4rem); align-items: start; } .fz-faq__grid > .fz-section-head { position: sticky; top: 140px; } .wp-block-details.is-style-fz-faq { border-bottom: 1px solid var(--fz-line); padding-block: .25rem; margin: 0 !important; } .wp-block-details.is-style-fz-faq summary { list-style: none; cursor: pointer; padding: 1.15rem 3rem 1.15rem 0; position: relative; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.3; } .wp-block-details.is-style-fz-faq summary::-webkit-details-marker { display: none; } .wp-block-details.is-style-fz-faq summary::after { content: ""; position: absolute; right: .25rem; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--fz-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%231E1B3A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--fz-ease), background-color .2s; } .wp-block-details.is-style-fz-faq[open] summary::after { transform: rotate(45deg); background-color: var(--fz-accent); } .wp-block-details.is-style-fz-faq > p { color: var(--fz-muted); max-width: 62ch; padding-bottom: 1.25rem; margin-top: 0 !important; } @media (max-width: 860px) { .fz-faq__grid { grid-template-columns: 1fr; } .fz-faq__grid > .fz-section-head { position: static; } } /* Stats and counts */ .fz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, calc(4vw / var(--fz-z, 1)), 3rem) !important; } .fz-stat { margin: 0 !important; padding: 1.25rem; border-radius: var(--fz-radius); background: var(--fz-surface); text-align: center; font-weight: 600; } .fz-stat strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xx-large); color: var(--fz-primary); line-height: 1.1; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .fz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fz-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; margin-block: 2rem !important; } .fz-counts.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fz-count { margin: 0 !important; padding: 1.25rem 1rem 1.25rem 0; display: flex; flex-direction: column; gap: .2rem; } .fz-count + .fz-count { padding-left: 1.25rem; border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); } .fz-count strong { font-family: var(--wp--preset--font-family--heading); font-size: clamp(2rem, calc(4.5vw / var(--fz-z, 1)), 3.25rem); line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; } .fz-count span { font-size: var(--wp--preset--font-size--small); opacity: .85; } @media (max-width: 760px) { .fz-counts, .fz-counts.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fz-count:nth-child(odd) { padding-left: 0; border-left: 0; } .fz-count:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); } } /* ----------------------------------------------------- course cards */ .fz-courses__grid { display: grid; grid-template-columns: repeat(var(--fz-cols, 3), minmax(0, 1fr)); gap: clamp(1rem, calc(2.5vw / var(--fz-z, 1)), 1.75rem); } @media (max-width: 1020px) { .fz-courses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .fz-courses__grid { grid-template-columns: 1fr; } } .fz-course { position: relative; display: flex; flex-direction: column; background: var(--fz-surface); border-radius: var(--fz-radius-lg); overflow: hidden; border: 1px solid var(--fz-line); transition: transform .35s var(--fz-ease), box-shadow .35s var(--fz-ease); } .fz-course:hover, .fz-course:focus-within { transform: translateY(-5px); box-shadow: var(--fz-shadow-lift); } .fz-course__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fz-soft); } .fz-course__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--fz-ease); } .fz-course:hover .fz-course__img { transform: scale(1.05); } .fz-course__flag { position: absolute; top: 12px; left: 12px; background: var(--fz-accent-3); color: #1E1B3A; font-weight: 800; font-size: .75rem; padding: .3em .8em; border-radius: 999px; } .fz-course__body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; } .fz-course__chips { display: flex; flex-wrap: wrap; gap: .35rem; } .fz-chip { font-size: .72rem; font-weight: 700; padding: .25em .7em; border-radius: 999px; background: var(--fz-soft); color: var(--fz-ink); } .fz-chip--level { background: color-mix(in srgb, var(--fz-primary) 14%, var(--fz-surface)); color: var(--fz-primary-dark); } .fz-course__title { font-size: var(--wp--preset--font-size--large); line-height: 1.25; margin: 0; } .fz-course__title a { color: var(--fz-ink); text-decoration: none; } .fz-course__title a::after { content: ""; position: absolute; inset: 0; } .fz-course__excerpt { font-size: var(--wp--preset--font-size--small); color: var(--fz-muted); margin: 0; flex: 1; } .fz-course__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--fz-line); font-size: var(--wp--preset--font-size--small); } .fz-course__meta { display: flex; gap: .8rem; color: var(--fz-muted); flex-wrap: wrap; } .fz-course__rating { color: var(--fz-ink); font-weight: 700; } .fz-course__rating span[aria-hidden] { color: #C98A00; } .fz-course__price { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .fz-course__price.is-free { color: var(--wp--preset--color--success); } .fz-empty { text-align: center; padding: clamp(2rem, calc(6vw / var(--fz-z, 1)), 4rem) 1.5rem; border: 2px dashed var(--fz-line); border-radius: var(--fz-radius-lg); background: var(--fz-surface); color: var(--fz-muted); } .fz-empty__art { display: block; width: 140px; height: 140px; margin: 0 auto 1rem; background: url(../img/cover-french-path-640.webp) center / cover; border-radius: 50%; } .fz-look-kids .fz-empty__art { background: url(../img/zazou-read-cut-640.webp) center / contain no-repeat; border-radius: 0; } .fz-look-exams .fz-empty__art { background-image: url(../img/cover-tcf-640.webp); } /* Filters */ .fz-filters { display: grid; gap: 1.25rem; padding: clamp(1.25rem, calc(3vw / var(--fz-z, 1)), 1.75rem); background: var(--fz-surface); border-radius: var(--fz-radius-lg); border: 1px solid var(--fz-line); margin-bottom: 1.5rem; } .fz-filters__group { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: start; } .fz-filters__group legend { float: left; font-weight: 700; font-size: var(--wp--preset--font-size--small); padding-top: .45rem; } .fz-filters__chips { display: flex; flex-wrap: wrap; gap: .5rem; } .fz-filter { position: relative; } .fz-filter input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; } .fz-filter span { display: inline-block; padding: .45em 1em; border-radius: 999px; border: 1.5px solid var(--fz-line); font-size: var(--wp--preset--font-size--small); font-weight: 600; background: var(--fz-base); transition: all .15s; } .fz-filter input:hover + span { border-color: var(--fz-primary); } .fz-filter input:checked + span { background: var(--fz-primary); border-color: var(--fz-primary); color: #fff; } .fz-filter input:focus-visible + span { outline: 3px solid var(--fz-primary); outline-offset: 2px; } .fz-filters__search input { width: 100%; padding: .85rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--fz-line); font: inherit; background: var(--fz-base); } .fz-filters__actions { display: flex; gap: 1rem; align-items: center; } .fz-filters__reset { font-weight: 600; font-size: var(--wp--preset--font-size--small); } .js .fz-filters__apply { display: none; } .fz-result-count { font-weight: 700; color: var(--fz-muted); font-size: var(--wp--preset--font-size--small); margin: 0 0 1rem !important; } .fz-pager { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; } .fz-pager a { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; text-decoration: none; border: 1px solid var(--fz-line); font-weight: 700; } .fz-pager a[aria-current] { background: var(--fz-primary); color: #fff; border-color: var(--fz-primary); } @media (max-width: 640px) { .fz-filters__group { grid-template-columns: 1fr; gap: .5rem; } .fz-filters__group legend { padding: 0; } } /* ---------------------------------------------------------- gauge */ .fz-gauge { margin: 0; position: relative; max-width: 360px; } .fz-gauge__svg { display: block; width: 100%; height: auto; overflow: visible; } .fz-gauge__track, .fz-gauge__fill { fill: none; stroke-width: 16; stroke-linecap: round; } .fz-gauge__track { stroke: color-mix(in srgb, currentColor 14%, transparent); } .fz-gauge__fill { stroke: #1F9D6B; stroke-dasharray: var(--fz-gauge-len); stroke-dashoffset: var(--fz-gauge-to); } @media (prefers-reduced-motion: no-preference) { .js .fz-gauge:not(.is-in) .fz-gauge__fill { stroke-dashoffset: var(--fz-gauge-len); } .fz-gauge__fill { transition: stroke-dashoffset 1.6s var(--fz-ease) .2s; } } .fz-gauge__ticks line { stroke: currentColor; stroke-opacity: .35; stroke-width: 2; stroke-linecap: round; } .fz-gauge__target { stroke: #E0A526; stroke-width: 5; stroke-linecap: round; } .fz-gauge__readout { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1; } .fz-gauge__prefix { font-size: .8rem; font-weight: 700; letter-spacing: .14em; opacity: .75; } .fz-gauge__value { font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.6rem, calc(6vw / var(--fz-z, 1)), 3.6rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; } .fz-gauge__label { font-size: .78rem; font-weight: 600; opacity: .85; margin-top: .3rem; } .fz-gauge figcaption { font-size: var(--wp--preset--font-size--x-small); color: var(--fz-muted); margin-top: 1rem; text-align: center; } .fz-gauge--dark { color: #fff; } /* -------------------------------------------------------- mini quiz */ .fz-quiz { background: var(--fz-surface); border-radius: var(--fz-radius-lg); padding: 1.5rem; box-shadow: var(--fz-shadow); } .fz-quiz__prompt { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; margin: 0 0 1rem; } .fz-quiz__opts { display: flex; flex-wrap: wrap; gap: .75rem; } .fz-quiz__opt { font: inherit; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.15rem; cursor: pointer; padding: .8rem 1.5rem; border-radius: 999px; border: 3px solid var(--fz-ink); background: var(--fz-base); color: var(--fz-ink); box-shadow: 0 5px 0 var(--fz-ink); transition: transform .15s, box-shadow .15s, background .2s; min-height: 48px; } .fz-quiz__opt:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--fz-ink); } .fz-quiz__opt:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--fz-ink); } .fz-quiz__opt.is-right { background: var(--fz-accent-3); } .fz-quiz__opt.is-wrong { background: #FFD3CD; } @media (prefers-reduced-motion: no-preference) { .fz-quiz__opt.is-wrong { animation: fz-shake .4s; } .fz-quiz__opt.is-right { animation: fz-pop .45s var(--fz-ease); } } @keyframes fz-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } @keyframes fz-pop { 50% { transform: scale(1.12); } } .fz-quiz__feedback { min-height: 1.6em; font-weight: 700; margin: 1rem 0 0; } .fz-quiz.is-done .fz-quiz__feedback { color: var(--wp--preset--color--success); } /* ------------------------------------------------------------ footer */ .fz-footer { background: var(--fz-night); color: var(--fz-on-night); padding: clamp(3.5rem, calc(8vw / var(--fz-z, 1)), 6rem) var(--fz-gutter) 2rem; position: relative; overflow: hidden; } .fz-footer a { color: inherit; text-decoration: none; } .fz-footer a:hover { color: var(--fz-accent); text-decoration: underline; } .fz-footer a:focus-visible { outline-color: var(--fz-accent); } .fz-footer__hello { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: end; padding-bottom: clamp(2rem, calc(5vw / var(--fz-z, 1)), 3rem); border-bottom: 1px solid rgba(255, 255, 255, .14); } .fz-footer__bye { font-family: var(--wp--preset--font-family--heading); font-style: italic; font-weight: 600; font-size: clamp(3.5rem, calc(10vw / var(--fz-z, 1)), 8rem); line-height: .9; color: var(--fz-accent); margin: 0 !important; letter-spacing: 0; } .fz-footer__about { max-width: 48ch; opacity: .85; justify-self: end; margin: 0 !important; } .fz-footer__brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-block: 2rem; } .fz-footer__brand { margin: 0 !important; padding: 1.25rem; border-radius: var(--fz-radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); } .fz-footer__brand.is-current { border-color: var(--fz-accent); } .fz-footer__brandline { font-size: var(--wp--preset--font-size--small); opacity: .8; margin-top: .75rem !important; } .fz-footer__cols { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 2rem; padding-block: 1.5rem 2.5rem; } .fz-footer__col { margin: 0 !important; } .fz-footer__title { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small) !important; text-transform: uppercase; letter-spacing: .14em; color: var(--fz-accent) !important; margin-bottom: 1rem !important; } .fz-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: var(--wp--preset--font-size--small); } .fz-footer__links li { margin: 0; } .fz-footer__mail, .fz-footer__place { font-size: var(--wp--preset--font-size--small); margin-top: .5rem !important; } .fz-footer__mail a { text-decoration: underline; text-underline-offset: .25em; } .fz-footer__social { margin-top: 1rem !important; gap: .6rem; } .fz-footer__social .wp-social-link { background: rgba(255, 255, 255, .1); border-radius: 50%; } .fz-footer__social .wp-social-link a { padding: .55rem; color: var(--fz-on-night); } .fz-footer__social .wp-social-link:hover { background: var(--fz-accent); } .fz-footer__social .wp-social-link:hover a { color: #1E1B3A; } .fz-footer__base { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1.5rem; font-size: var(--wp--preset--font-size--x-small); opacity: .8; gap: .5rem 2rem; } .fz-footer__base p { margin: 0; } @media (max-width: 960px) { .fz-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fz-footer__brands { grid-template-columns: 1fr; } } @media (max-width: 640px) { .fz-footer__hello { grid-template-columns: 1fr; } .fz-footer__about { justify-self: start; } } @media (max-width: 420px) { .fz-footer__cols { grid-template-columns: 1fr; } } /* ============================================================ MAIN look */ .fz-look-main .fz-hero--main { background: #FBEEDB; } .fz-look-main .fz-hero--main::before { background: linear-gradient(90deg, #FFF8EC 0%, rgba(255, 248, 236, .94) calc(var(--fz-edge) + 420px), rgba(255, 248, 236, .6) calc(var(--fz-edge) + 560px), rgba(255, 248, 236, 0) calc(var(--fz-edge) + 760px)); } .fz-look-main .fz-hero--main .fz-hero__art img { object-position: 80% 40%; } .fz-look-main .fz-hero__title { font-weight: 600; letter-spacing: 0; font-variation-settings: "SOFT" 100; } .fz-look-main .fz-hero__badge { background: var(--fz-primary); color: #fff; } .fz-look-main .fz-teacher { background: var(--fz-base); } /* ---------- MAIN look: grown-up, editorial. Teens, students and adults; the playful details stay on Kids. Cool neutral paper instead of butter, one brand colour (Majorelle) with ink, no squiggles, no tilts, calmer corners. Brand colours stay the same; only their weight changes. */ .fz-look-main :where(h1, h2, .fz-hero__title) em { background: none; padding-bottom: 0; font-weight: 500; } .fz-look-main .fz-hero__title { font-variation-settings: "SOFT" 0, "WONK" 0; } .fz-look-main :where(h1, h2, h3, .fz-who__title, .fz-level__name) { font-variation-settings: "SOFT" 0, "WONK" 0; } .fz-look-main .is-style-fz-eyebrow::before { background: var(--fz-primary); height: 2px; width: 1.75em; border-radius: 0; } .fz-look-main .is-style-fz-panel .is-style-fz-eyebrow::before, .fz-look-main .fz-live .is-style-fz-eyebrow::before { background: var(--fz-accent); } .fz-look-main .wp-element-button, .fz-look-main .wp-block-button__link { border-radius: 10px; } .fz-look-main .fz-hero__badge { border-radius: 6px; letter-spacing: .02em; } /* hero: paper tone that blends into the illustration's own warm edge */ .fz-look-main .fz-hero--main { background: #F6F1EA; } .fz-look-main .fz-hero--main::before { background: linear-gradient(90deg, #FAF9F7 0%, rgba(250, 249, 247, .94) calc(var(--fz-edge) + 420px), rgba(250, 249, 247, .6) calc(var(--fz-edge) + 560px), rgba(250, 249, 247, 0) calc(var(--fz-edge) + 760px)); } /* who is learning: plain numbers, quiet card tops */ .fz-look-main .fz-who__num { font-style: normal; color: var(--fz-primary); -webkit-text-stroke: 0; font-family: var(--wp--preset--font-family--body); font-size: .8rem; font-weight: 700; letter-spacing: .14em; margin-top: -1.2rem !important; padding: .55em .8em .3em; border-radius: 6px 6px 0 0; background: var(--fz-surface); } .fz-look-main .fz-who__card { background: var(--fz-surface); border: 1px solid var(--fz-line); } .fz-look-main .fz-who__card:hover, .fz-look-main .fz-who__card:focus-within { transform: translateY(-4px); } .fz-look-main .fz-who__card--kids .fz-who__img { background: #F1F0FA; } .fz-look-main :is(.fz-who__card--me, .fz-who__card--kids, .fz-who__card--exams) { box-shadow: inset 0 -3px 0 var(--fz-primary); } .fz-look-main .fz-who__card--kids { box-shadow: inset 0 -3px 0 #FF6B5B; } .fz-look-main .fz-who__card--exams { box-shadow: inset 0 -3px 0 #1F9D6B; } /* levels: one colour, a ladder that fills up */ .fz-look-main .fz-levels__list::before { border-left: 2px solid var(--fz-line); } .fz-look-main .fz-level__code { border-radius: 10px; font-size: 1rem; font-weight: 600; background: var(--fz-soft) !important; color: var(--fz-primary) !important; box-shadow: 0 0 0 5px var(--fz-surface), inset 0 0 0 1px #D9D7F2; } .fz-look-main .fz-levels__list li:nth-child(4) .fz-level__code { background: #C9C8F3 !important; } .fz-look-main .fz-levels__list li:nth-child(5) .fz-level__code { background: var(--fz-primary) !important; color: #fff !important; box-shadow: 0 0 0 5px var(--fz-surface); } .fz-look-main .fz-levels__art img { border-radius: var(--fz-radius-lg) !important; } /* live classes and teacher: straight, not tilted */ .fz-look-main .fz-live__art img { transform: none; border-width: 0; } .fz-look-main .fz-teacher__card { transform: none; } .fz-look-main .wp-block-image.is-style-fz-frame img { transform: none; } /* reviews: white cards on paper, one ink card for rhythm */ .fz-look-main .fz-reviews { background: var(--fz-base); border-block: 1px solid var(--fz-line); } .fz-look-main .fz-review { box-shadow: none; border: 1px solid var(--fz-line); } .fz-look-main .fz-review:is(.is-butter, .is-coral, .is-mint, .is-sky) { background: var(--fz-surface); } .fz-look-main .fz-review.is-majorelle { background: var(--fz-night); border-color: var(--fz-night); } .fz-look-main .fz-review .fz-stars { color: #E0A526; } .fz-look-main .fz-review .fz-review__text::before { color: var(--fz-primary); } .fz-look-main .fz-review.is-majorelle .fz-review__text::before { color: var(--fz-accent); } /* plans and free resources */ .fz-look-main .fz-plan--live { transform: none; } .fz-look-main .fz-res { border: 1px solid var(--fz-line); } .fz-look-main .wp-block-details.is-style-fz-faq[open] summary::after { background-color: var(--fz-soft); } /* page heads: a quiet Majorelle band instead of the yellow sun */ .fz-look-main .fz-page-head { background: var(--fz-soft); border-bottom: 1px solid var(--fz-line); } .fz-look-main .fz-page-head::after { background: var(--fz-primary); opacity: .07; border-radius: 40px; transform: rotate(14deg); } .fz-look-main .fz-footer__bye { font-style: normal; } .fz-look-main .fz-hero--about { background: #F6F1EA; } .fz-look-main .fz-nav .wp-block-navigation-item__content::after { background: var(--fz-primary); height: 2px; bottom: 0; border-radius: 0; } /* ---------- Pricing page ([frencheezy_pricing]): live prices as cards, on all three sites */ .wp-block-post-content:has(> .fz-pricing), .wp-block-post-content:has(> * > .fz-pricing) { max-width: var(--fz-wide, 1240px) !important; } .fz-pricing { display: grid; gap: clamp(3rem, calc(6vw / var(--fz-z, 1)), 4.5rem); max-width: var(--fz-wide, 1240px) !important; width: 100%; margin-inline: auto !important; } .fz-pricing__group > h2 { font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 .35rem; } .fz-pricing__lede { color: var(--fz-muted); margin: 0 0 1.75rem !important; max-width: 60ch; } .fz-pricing__note { color: var(--fz-muted); font-size: var(--wp--preset--font-size--small); padding-top: 1.5rem; border-top: 1px solid var(--fz-line); margin: 0 !important; } .fz-pricing .sora-bcard { border-color: var(--fz-line); border-radius: var(--fz-radius-lg); } .fz-plan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; } .fz-plan-card { display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.5rem, calc(3vw / var(--fz-z, 1)), 2rem); background: var(--fz-surface); border: 1px solid var(--fz-line); border-radius: var(--fz-radius-lg); } .fz-plan-card.is-featured { border-color: var(--fz-primary); box-shadow: 0 0 0 1px var(--fz-primary); } .fz-plan-card > * { margin: 0 !important; } .fz-plan-card__name { font-size: var(--wp--preset--font-size--x-large); } .fz-plan-card__price strong { font-family: var(--wp--preset--font-family--heading); font-size: 2rem; font-variant-numeric: tabular-nums; } .fz-plan-card__price del { color: var(--fz-muted); margin-left: .35em; } .fz-plan-card__price span { color: var(--fz-muted); margin-left: .35em; } .fz-plan-card__text { color: var(--fz-muted); font-size: var(--wp--preset--font-size--small); flex: 1; } .fz-plan-card__access { font-size: var(--wp--preset--font-size--small); font-weight: 700; } .fz-plan-card__cta { align-self: flex-start; margin-top: .75rem !important; text-decoration: none; } .fz-look-kids .fz-plan-card, .fz-look-kids .fz-pricing .sora-bcard { border: 3px solid #23214A; box-shadow: 0 5px 0 #23214A; } .fz-look-exams .fz-plan-card.is-featured { border-color: #1F9D6B; box-shadow: 0 0 0 1px #1F9D6B; } /* ============================================================ KIDS look */ .fz-look-kids { --fz-squircle: 40px; } .fz-look-kids h1, .fz-look-kids h2, .fz-look-kids h3 { letter-spacing: 0; } .fz-look-kids :where(h1, h2, .fz-hero__title) em { font-style: normal; color: var(--fz-accent-2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q5 1 10 6 T20 6 T30 6 T40 6' fill='none' stroke='%23FFC93C' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 1.1em .32em; } .fz-look-kids .is-style-fz-eyebrow { color: var(--fz-primary); font-family: var(--wp--preset--font-family--heading); letter-spacing: .06em; font-size: .95rem !important; } .fz-look-kids .is-style-fz-badge { background: var(--fz-accent-2); color: #23214A; transform: rotate(-3deg); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(35, 33, 74, .18); font-family: var(--wp--preset--font-family--heading); font-size: 1rem; padding: .35em 1.1em; } .fz-look-kids .wp-element-button, .fz-look-kids .wp-block-button__link { box-shadow: 0 5px 0 var(--fz-primary-dark); } .fz-look-kids .wp-block-button__link:hover { box-shadow: 0 7px 0 var(--fz-primary-dark); } .fz-look-kids .is-style-fz-ghost .wp-block-button__link { box-shadow: inset 0 0 0 3px var(--fz-ink), 0 5px 0 var(--fz-ink); background: #fff; } .fz-look-kids .is-style-fz-sun .wp-block-button__link { box-shadow: 0 5px 0 #C99400; } .fz-look-kids .is-style-fz-arrow .wp-block-button__link { box-shadow: none; } .fz-look-kids .fz-switch__link[aria-current="page"] { background: #FFC93C; } .fz-look-kids .fz-topbar { background: var(--fz-primary); } .fz-look-kids .fz-hero--kids { background: #FEF6E4; min-height: clamp(600px, calc(88vh / var(--fz-z, 1)), 900px); } .fz-look-kids .fz-hero--kids::before { background: linear-gradient(90deg, #FEF8E9 0%, rgba(254, 248, 233, .9) 30%, rgba(254, 248, 233, 0) 52%); } .fz-look-kids .fz-hero--kids .fz-hero__art img { object-position: 85% 50%; } .fz-look-kids .fz-hero__title { font-weight: 600; line-height: 1.02; } .fz-zazou { position: absolute !important; margin: 0 !important; z-index: 2; } .fz-zazou--hero { left: calc(var(--fz-edge) + min(560px, calc(40vw / var(--fz-z, 1)))); bottom: 7%; width: clamp(120px, calc(12vw / var(--fz-z, 1)), 180px); } .fz-zazou__img { margin: 0 !important; } @media (prefers-reduced-motion: no-preference) { .fz-zazou__img { animation: fz-bob 4s ease-in-out infinite; } } .fz-zazou__bubble { position: absolute; top: -12%; right: -30%; margin: 0 !important; background: #fff; color: #23214A; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.15rem; padding: .4em .9em; border-radius: 1.2em 1.2em 1.2em .2em; box-shadow: 0 4px 0 rgba(35, 33, 74, .15); border: 3px solid #23214A; transform: rotate(6deg); } @media (max-width: 1279px) { .fz-zazou--hero { display: none; } } .fz-promise { background: var(--fz-soft); } .fz-look-kids .fz-promise::before, .fz-look-kids .fz-safe::before, .fz-look-kids .fz-reviews::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 28px; background: radial-gradient(circle at 20px -6px, var(--fz-base) 22px, transparent 23px) 0 0 / 40px 28px repeat-x; } .fz-promise__wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, calc(5vw / var(--fz-z, 1)), 4.5rem); align-items: center; } .fz-clock { width: 168px; height: 168px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1; background: #fff; border: 6px solid #23214A; box-shadow: 0 8px 0 #23214A; transform: rotate(-6deg); margin-bottom: 1.5rem !important; background-image: conic-gradient(from -90deg, #FFC93C 0 60deg, transparent 60deg); } .fz-clock strong { font-family: var(--wp--preset--font-family--heading); font-size: 4.2rem; color: #23214A; } .fz-clock span { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #23214A; } .fz-promise__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .fz-promise__card { margin: 0 !important; position: relative; padding-top: 4.5rem !important; } .fz-promise__card:nth-child(odd) { transform: rotate(-1.2deg); } .fz-promise__card:nth-child(even) { transform: rotate(1.2deg) translateY(1.25rem); } .fz-promise__card h3 { font-size: var(--wp--preset--font-size--large); } .fz-promise__card p { font-size: var(--wp--preset--font-size--small); color: var(--fz-muted); margin-top: .5rem !important; } .fz-promise__card::before { content: ""; position: absolute; top: 1.25rem; left: 1.5rem; width: 48px; height: 48px; border-radius: 16px; background: var(--fz-accent); -webkit-mask: none; } .fz-promise__card::after { content: ""; position: absolute; top: 1.25rem; left: 1.5rem; width: 48px; height: 48px; background: #23214A; -webkit-mask: var(--fz-ico) center / 26px no-repeat; mask: var(--fz-ico) center / 26px no-repeat; } .fz-promise__card--sun { --fz-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v10H9l-5 4z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .fz-promise__card--mint::before { background: var(--fz-accent-3); } .fz-promise__card--mint { --fz-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2M4 14h3v6H4zM17 14h3v6h-3z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .fz-promise__card--sky::before { background: var(--fz-accent-4); } .fz-promise__card--sky { --fz-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4h6v3a2 2 0 1 0 0 4v3h-3a2 2 0 1 0-4 0H4v-4a2 2 0 1 0 0-4V4z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .fz-promise__card--coral::before { background: var(--fz-accent-2); } .fz-promise__card--coral { --fz-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3zM3 7l9 6 9-6' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (max-width: 900px) { .fz-promise__wrap { grid-template-columns: 1fr; } } @media (max-width: 560px) { .fz-promise__grid { grid-template-columns: 1fr; } .fz-promise__card:nth-child(n) { transform: none; } } .fz-look-kids .fz-course { border: 3px solid #23214A; box-shadow: 0 6px 0 #23214A; } .fz-look-kids .fz-course:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 10px 0 #23214A; } .fz-look-kids .fz-course__title { font-size: 1.35rem; } .fz-look-kids .fz-stat { border: 3px solid #23214A; box-shadow: 0 5px 0 #23214A; } .fz-look-kids .fz-stat:nth-child(1) strong { color: var(--fz-primary); } .fz-look-kids .fz-stat:nth-child(2) strong { color: #E04A39; } .fz-look-kids .fz-stat:nth-child(3) strong { color: #178357; } .fz-look-kids .fz-stat:nth-child(4) strong { color: #B97F00; } .fz-activity__card { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(1.5rem, calc(4vw / var(--fz-z, 1)), 3.5rem); align-items: center; background: var(--fz-accent-4); border-radius: 48px; padding: clamp(1.5rem, calc(5vw / var(--fz-z, 1)), 3.5rem); border: 4px solid #23214A; box-shadow: 0 10px 0 #23214A; } .fz-activity__card h2 em { color: #23214A; } .fz-activity__card .is-style-fz-eyebrow { color: #23214A; } .fz-activity__zazou { margin: 0 !important; } .fz-activity__zazou img { filter: drop-shadow(0 12px 0 rgba(35, 33, 74, .18)); } .fz-activity .fz-quiz { border: 3px solid #23214A; } @media (max-width: 760px) { .fz-activity__card { grid-template-columns: 1fr; border-radius: 32px; } .fz-activity__art { max-width: 200px; margin-inline: auto !important; } } .fz-safe { background: color-mix(in srgb, var(--fz-accent-3) 30%, var(--fz-base)); } .fz-safe__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, calc(5vw / var(--fz-z, 1)), 4rem); align-items: center; } .fz-safe__list li { padding-block: .35rem; } .fz-safe__art { position: relative; text-align: center; } .fz-safe__zazou { margin: 0 auto !important; max-width: 320px; } .fz-safe__sticker { position: absolute; top: 4%; right: 6%; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--fz-accent-2); color: #23214A; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.2rem; line-height: 1.05; border: 4px solid #fff; box-shadow: 0 6px 0 rgba(35, 33, 74, .2); transform: rotate(12deg); padding: .8rem; margin: 0 !important; } @media (max-width: 760px) { .fz-safe__grid { grid-template-columns: 1fr; } } .fz-look-kids .fz-review { border: 3px solid #23214A; box-shadow: 0 6px 0 #23214A; } .fz-look-kids .fz-reviews__wall.is-three .fz-review:nth-child(2) { transform: rotate(1.5deg); } .fz-look-kids .fz-reviews__wall.is-three .fz-review:nth-child(1) { transform: rotate(-1.2deg); } .fz-workbook__card { display: grid; grid-template-columns: 1.4fr .6fr; gap: 2rem; align-items: center; position: relative; background: var(--fz-accent-2); border-radius: 48px; padding: clamp(1.75rem, calc(5vw / var(--fz-z, 1)), 3.5rem); border: 4px solid #23214A; box-shadow: 0 10px 0 #23214A; } .fz-workbook__card :where(h2, p) { color: #23214A; } .fz-workbook__card h2 em { color: #fff; background: none; } .fz-workbook__card .is-style-fz-badge { background: #fff; } .fz-workbook__card .is-style-fz-arrow .wp-block-button__link { color: #23214A; } .fz-workbook__zazou { margin: -4rem 0 -2rem !important; } @media (max-width: 760px) { .fz-workbook__card { grid-template-columns: 1fr; border-radius: 32px; } .fz-workbook__zazou { margin: 0 auto !important; max-width: 220px; } } .fz-look-kids .fz-faq summary { font-family: var(--wp--preset--font-family--heading); } .fz-look-kids .fz-footer { border-radius: 48px 48px 0 0; } .fz-look-kids .fz-footer__bye { font-style: normal; } .fz-look-kids .fz-footer__bye::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .15em; background: url(../img/zazou-wave-cut-640.webp) center / contain no-repeat; vertical-align: -.05em; } /* ============================================================ EXAMS look */ .fz-look-exams body, body.fz-look-exams { font-feature-settings: "tnum" 1, "cv11" 1; font-variant-numeric: tabular-nums; } .fz-look-exams :where(h1, h2, .fz-hero__title) em { /* Marker band behind the lower half of the x-height, ending just under the baseline. Each wrapped line gets its own band (clone) sized exactly to its words: no padding or negative margin, so lines keep the heading's left edge and nothing sticks out on either side. */ --fz-mark: color-mix(in srgb, #E0A526 55%, transparent); font-style: normal; color: inherit; letter-spacing: 0; background: linear-gradient(var(--fz-mark), var(--fz-mark)) no-repeat 0 80% / 100% 30%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0; margin: 0; } .fz-look-exams .is-style-fz-eyebrow { color: var(--fz-primary); } .fz-look-exams .is-style-fz-eyebrow::before { background: #1F9D6B; height: 3px; width: 1.6em; border-radius: 2px; } .fz-look-exams .is-style-fz-badge { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; letter-spacing: .08em; box-shadow: none; } .fz-look-exams .fz-topbar { background: #0E1830; } .fz-look-exams .fz-switch__link[aria-current="page"] { background: #E0A526; color: #14213D; } .fz-look-exams .is-style-fz-check li::before { background-color: #1F9D6B; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border-radius: 6px; } .fz-look-exams .fz-hero--exams { background: #14213D; color: #fff; } .fz-look-exams .fz-hero--exams::before { background: linear-gradient(90deg, #14213D 0%, rgba(20, 33, 61, .9) 30%, rgba(20, 33, 61, 0) 58%); } .fz-look-exams .fz-hero--exams :where(h1, p, li) { color: #fff; } .fz-look-exams .fz-hero--exams .fz-hero__art img { object-position: 75% 50%; } .fz-look-exams .fz-hero--exams .fz-hero__lede { color: #D5DAE6; } .fz-look-exams .fz-hero--exams .is-style-fz-ghost .wp-block-button__link { color: #fff; } .fz-look-exams .fz-hero--exams .is-style-fz-ghost .wp-block-button__link:hover { background: #fff; color: #14213D; box-shadow: inset 0 0 0 2px #fff; } .fz-look-exams .fz-hero--exams .wp-block-button__link:focus-visible { outline-color: #E0A526; } .fz-look-exams .fz-hero__title { letter-spacing: 0; font-weight: 800; } .fz-look-exams .fz-hero__title em { color: #fff; } .fz-hero__gauge { position: absolute !important; right: var(--fz-edge); bottom: clamp(1.5rem, calc(5vw / var(--fz-z, 1)), 3.5rem); width: 260px; margin: 0 !important; padding: 1.25rem 1.25rem 1rem; border-radius: 16px; background: rgba(14, 24, 48, .72); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; } @media (max-width: 1279px) { .fz-hero__gauge { position: relative !important; right: auto; bottom: auto; order: 1; margin-top: 2rem !important; width: auto; max-width: 320px; } } .fz-picker { background: var(--fz-base); } .fz-exams__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .fz-exam { position: relative; background: var(--fz-surface); border: 1px solid var(--fz-line); border-radius: 14px; overflow: hidden; padding-bottom: 1.4rem; transition: transform .3s var(--fz-ease), box-shadow .3s var(--fz-ease), border-color .2s; } .fz-exam:hover, .fz-exam:focus-within { transform: translateY(-4px); box-shadow: var(--fz-shadow-lift); border-color: var(--fz-primary); } .fz-exam > * { margin-inline: 1.25rem !important; } .fz-exam > .fz-exam__img { margin: 0 !important; aspect-ratio: 16 / 10; overflow: hidden; } .fz-exam__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; } .fz-exam__code { position: absolute; top: .75rem; left: .75rem; margin: 0 !important; font-size: .7rem; font-weight: 800; letter-spacing: .12em; padding: .3em .6em; border-radius: 6px; background: #14213D; color: #fff; } .fz-exam__name { font-size: var(--wp--preset--font-size--x-large); margin-top: 1.1rem !important; } .fz-exam__name a { color: var(--fz-ink); text-decoration: none; } .fz-exam__name a::after { content: ""; position: absolute; inset: 0; } .fz-exam__name a::before { content: "\2192"; float: right; color: var(--fz-primary); transition: transform .2s; } .fz-exam:hover .fz-exam__name a::before { transform: translateX(4px); } .fz-exam__for { font-size: var(--wp--preset--font-size--x-small); font-weight: 700; color: var(--wp--preset--color--success); text-transform: uppercase; letter-spacing: .08em; margin-top: .35rem !important; } .fz-exam__text { font-size: var(--wp--preset--font-size--small); color: var(--fz-muted); margin-top: .5rem !important; } @media (max-width: 1020px) { .fz-exams__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .fz-exams__grid { grid-template-columns: 1fr; } } .fz-score { background: var(--fz-surface); } .fz-score__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, calc(6vw / var(--fz-z, 1)), 5rem); align-items: center; } .fz-score__panel { border-radius: 16px; padding: clamp(1.5rem, calc(4vw / var(--fz-z, 1)), 2.5rem); border: 1px solid var(--fz-line); } .fz-score__panel .fz-gauge { margin-inline: auto; color: #14213D; } .fz-skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: 1.5rem !important; } .fz-skill { margin: 0 !important; padding: .7rem; background: var(--fz-surface); border: 1px solid var(--fz-line); border-radius: 10px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--fz-muted); } .fz-skill strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.35rem; color: #14213D; } .fz-skill.is-good { box-shadow: inset 0 -4px 0 #1F9D6B; } .fz-skill.is-work { box-shadow: inset 0 -4px 0 #E0A526; } .fz-score__panel .fz-note { text-align: center; margin-top: .75rem !important; } @media (max-width: 860px) { .fz-score__grid { grid-template-columns: 1fr; } } @media (max-width: 420px) { .fz-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fz-mocks { background-color: #14213D; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; } .fz-mocks .fz-count strong { color: #E0A526; } .fz-mocks__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin-bottom: 2rem !important; } .fz-mocks .is-style-fz-check { margin: 0; } .fz-mocks .wp-block-button__link { background: #E0A526; color: #14213D; } .fz-mocks .wp-block-button__link:hover { background: #F0BD4A; color: #14213D; } .fz-mocks .is-style-fz-lede { max-width: 60ch; } @media (max-width: 760px) { .fz-mocks__lists { grid-template-columns: 1fr; } } .fz-cta__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; background-color: var(--fz-primary); color: #fff; border-radius: 20px; padding: clamp(1.75rem, calc(5vw / var(--fz-z, 1)), 3.5rem); background-image: radial-gradient(circle at 90% 20%, rgba(224, 165, 38, .45), transparent 40%), linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; } .fz-cta__card :where(h2, p) { color: #fff; } .fz-cta__card h2 em { --fz-mark: rgba(224, 165, 38, .7); } .fz-cta__copy { max-width: 560px; } .fz-results__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, calc(6vw / var(--fz-z, 1)), 5rem); align-items: start; } .fz-results .fz-counts { color: #14213D; } .fz-results__wall { display: grid; gap: 1rem; } .fz-results__wall > * { margin: 0 !important; } .fz-placeholder { padding: 1.25rem 1.4rem; border: 2px dashed #9AA3BA; border-radius: 14px; color: var(--fz-muted); font-size: var(--wp--preset--font-size--small); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(20, 33, 61, .03) 10px 20px); } .fz-placeholder__tag { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .2em .6em; border-radius: 6px; background: #E0A526; color: #14213D; margin-bottom: .5rem !important; } @media (max-width: 860px) { .fz-results__grid { grid-template-columns: 1fr; } } .fz-look-exams .fz-review { border-radius: 14px; border: 1px solid var(--fz-line); box-shadow: none; } .fz-look-exams .fz-who__num, .fz-look-exams .fz-footer__bye { font-style: normal; } /* ------------------------------------------------- generic templates */ .fz-page-head { padding: clamp(3rem, calc(8vw / var(--fz-z, 1)), 6rem) var(--fz-gutter) clamp(2rem, calc(5vw / var(--fz-z, 1)), 3.5rem); background: var(--fz-soft); position: relative; overflow: hidden; } .fz-page-head::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--fz-accent); opacity: .55; } .fz-look-exams .fz-page-head { background: #14213D; color: #fff; } .fz-look-exams .fz-page-head :where(h1, p) { color: #fff; } .fz-look-exams .fz-page-head::after { background: var(--fz-primary); opacity: .35; border-radius: 30px; transform: rotate(18deg); } .fz-page-head h1 { font-size: var(--wp--preset--font-size--huge); position: relative; z-index: 1; } .fz-page-head > * { position: relative; z-index: 1; } .fz-content { padding-block: clamp(2.5rem, calc(6vw / var(--fz-z, 1)), 4.5rem); padding-inline: var(--fz-gutter); } .fz-post-grid .wp-block-post-template { gap: clamp(1rem, calc(2.5vw / var(--fz-z, 1)), 1.75rem); } .fz-post-card { background: var(--fz-surface); border-radius: var(--fz-radius-lg); overflow: hidden; border: 1px solid var(--fz-line); height: 100%; display: flex; flex-direction: column; position: relative; transition: transform .3s var(--fz-ease), box-shadow .3s; } .fz-post-card:hover { transform: translateY(-4px); box-shadow: var(--fz-shadow-lift); } .fz-post-card .wp-block-post-featured-image { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; } .fz-post-card .wp-block-post-featured-image img { border-radius: 0; height: 100%; object-fit: cover; } .fz-post-card__body { padding: 1.25rem 1.4rem 1.5rem; } .fz-post-card .wp-block-post-title a { text-decoration: none; color: var(--fz-ink); } .fz-post-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } .fz-post-card .wp-block-post-date, .fz-post-card .wp-block-post-terms { font-size: var(--wp--preset--font-size--x-small); color: var(--fz-muted); } .wp-block-query-pagination { margin-top: 2.5rem; gap: .5rem; font-weight: 700; } .wp-block-query-pagination-numbers .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--fz-line); text-decoration: none; } .wp-block-query-pagination-numbers .current { background: var(--fz-primary); color: #fff; border-color: var(--fz-primary); } .fz-single .wp-block-post-content > * { max-width: var(--wp--style--global--content-size); } .fz-single .wp-block-post-content :where(h2) { font-size: var(--wp--preset--font-size--xx-large); margin-top: 2.5rem; } .fz-single .wp-block-post-content :where(p, li) { font-size: 1.125rem; } .fz-single .wp-block-post-content a { text-decoration-thickness: 2px; text-underline-offset: .2em; } .fz-author { display: flex; gap: 1rem; align-items: center; padding: 1.25rem; border-radius: var(--fz-radius); background: var(--fz-soft); } .fz-404 { text-align: center; padding-block: clamp(3rem, calc(10vw / var(--fz-z, 1)), 7rem); } .fz-404 .wp-block-image { max-width: 380px; margin-inline: auto; } .fz-404 .fz-404__code { font-family: var(--wp--preset--font-family--heading); font-size: clamp(5rem, calc(18vw / var(--fz-z, 1)), 10rem); line-height: 1; color: var(--fz-primary); font-weight: 700; margin: 0; } .wp-block-search__input { border-radius: 999px !important; border: 1.5px solid var(--fz-line) !important; padding: .8rem 1.1rem !important; background: var(--fz-surface); font: inherit; } .wp-block-search__button { margin-left: .5rem !important; } .fz-look-exams .wp-block-search__input { border-radius: 10px !important; } /* Phones: the block's own width (75%) left the field about 150px wide next to its button. */ @media (max-width: 600px) { .wp-block-search__inside-wrapper { width: 100% !important; } .wp-block-search__input { min-width: 0; } } /* --------------------------------------------- reduced motion safety */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media (forced-colors: active) { .fz-switch__link[aria-current="page"], .fz-filter input:checked + span { outline: 2px solid CanvasText; } } /* Grid and flex containers: children are laid out by the grid, not stacked with block gap. */ .fz-main > *, :is(.fz-who__grid, .fz-levels__grid, .fz-live__grid, .fz-teacher__grid, .fz-plans, .fz-res__wrap, .fz-res__grid, .fz-faq__grid, .fz-stats, .fz-counts, .fz-promise__wrap, .fz-promise__grid, .fz-activity__card, .fz-safe__grid, .fz-workbook__card, .fz-exams__grid, .fz-score__grid, .fz-skills, .fz-mocks__lists, .fz-results__grid, .fz-results__wall, .fz-footer__hello, .fz-footer__brands, .fz-footer__cols, .fz-hero, .fz-cta__card) > * { margin-block-start: 0 !important; } .fz-footer__social.is-style-logos-only .wp-social-link a, .fz-footer__social.is-style-logos-only .wp-social-link svg { color: var(--fz-on-night) !important; fill: currentColor; } .fz-footer__social.is-style-logos-only .wp-social-link:hover a, .fz-footer__social.is-style-logos-only .wp-social-link:hover svg { color: #1E1B3A !important; } /* Left-aligned section heads line up with the wide grid below them. */ .fz-section > .fz-section-head:not(.is-center) { max-width: var(--fz-wide) !important; margin-inline: auto !important; } .fz-section > .fz-section-head:not(.is-center) > * { max-width: 760px; } /* Gauge: svg and readout share one cell, the caption sits below. */ .fz-gauge { display: grid; } .fz-gauge__svg, .fz-gauge__readout { grid-area: 1 / 1; } .fz-gauge__readout { position: static; align-self: end; padding-bottom: 2%; } .fz-gauge figcaption { grid-area: 2 / 1; } .fz-safe__sticker { top: -6%; right: -2%; } .fz-safe, .fz-promise, .fz-activity, .fz-workbook { overflow-x: clip; } @media (max-width: 760px) { .fz-safe__sticker { right: 0; top: 0; width: 100px; height: 100px; font-size: 1rem; } } /* Page heads align with the wide grid; the lede keeps a readable measure. */ /* Every child spans the same centred column, so eyebrow, title and lede share one left edge at any width. The readable measure is padding sized against that column, never against the full-bleed row (percentages resolve against the row, which collapsed the text above ~1500px). */ .fz-page-head > * { width: 100%; max-width: var(--fz-wide) !important; margin-inline: auto !important; box-sizing: border-box; } .fz-page-head > .is-style-fz-lede { padding-right: max(0px, calc(min(100%, var(--fz-wide)) - 46ch)); } .fz-page-head > h1 { padding-right: max(0px, calc(min(100%, var(--fz-wide)) - 18ch)); } /* Jouana, illustrated */ .fz-teacher__portrait { margin: 0 0 1.25rem !important; width: min(240px, 70%); } .fz-teacher__portrait img { border-radius: 50%; border: 6px solid var(--fz-base); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); aspect-ratio: 1; object-fit: cover; } .fz-results__portrait { width: 96px; margin: 0 0 1rem !important; } .fz-results__portrait img { border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px #E0A526; aspect-ratio: 1; object-fit: cover; } .fz-promise__card--mint::before, .fz-promise__card--mint::after { display: none; } .fz-promise__portrait { position: absolute !important; top: 1rem; left: 1.25rem; width: 64px; margin: 0 !important; } .fz-promise__portrait img { border-radius: 50%; border: 3px solid #23214A; aspect-ratio: 1; object-fit: cover; } .fz-promise__card--mint { padding-top: 5.25rem !important; } /* About hero: the illustration keeps its empty right third for the text */ .fz-hero--about { justify-content: flex-end; background: #FBEEDB; } .fz-hero--about::before { background: linear-gradient(270deg, var(--fz-base) 0%, color-mix(in srgb, var(--fz-base) 88%, transparent) 30%, transparent 55%); } .fz-hero--about > .fz-hero__art img { object-position: 20% 50%; } .fz-look-exams .fz-hero--about { color: var(--fz-ink); } /* The About hero is light on Exams too: the white title mark and glass badge from the dark heroes would vanish here. */ .fz-look-exams .fz-hero--about .fz-hero__title em { color: inherit; } .fz-look-exams .fz-hero--about .is-style-fz-badge { background: #14213D; color: #fff; border-color: #14213D; } .fz-real { gap: 1rem; align-items: center; padding: .75rem 1.25rem .75rem .75rem; background: var(--fz-surface); border-radius: 999px; width: fit-content; box-shadow: var(--fz-shadow); } .fz-real__photo { width: 72px; margin: 0 !important; flex: none; } .fz-real__photo img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--fz-accent); } .fz-real__text { margin: 0 !important; font-size: var(--wp--preset--font-size--small); line-height: 1.35; } @media (max-width: 781px) { .fz-real { border-radius: 24px; } } .fz-footer__nav .wp-block-navigation__container { gap: .55rem; font-size: var(--wp--preset--font-size--small); font-weight: 400; } .fz-footer__nav .wp-block-navigation-item__content { color: var(--fz-on-night); } .fz-footer__nav .wp-block-navigation-item__content:hover { color: var(--fz-accent); } /* Tablets and narrow desktops: the primary menu collapses into the overlay before it can wrap. */ @media (min-width: 600px) and (max-width: 1099px) { .fz-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .fz-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .fz-nav { flex: 0 0 auto; margin-left: auto; } } /* Free resource cards (network plugin shortcode) */ .fz-resource { display: grid; grid-template-columns: 180px 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem; margin-block: 1.25rem !important; background: var(--fz-surface); border-radius: var(--fz-radius-lg); border: 1px solid var(--fz-line); box-shadow: var(--fz-shadow); } .fz-look-kids .fz-resource { border: 3px solid #23214A; box-shadow: 0 6px 0 #23214A; } .fz-resource__img { margin: 0; border-radius: var(--fz-radius); background: radial-gradient(circle at 50% 65%, #FFE9A8, #FFC93C); overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; } .fz-look-exams .fz-resource__img { background: #E9ECF5; } .fz-resource__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } /* Exams resources use full scenes, not cut-outs: fill the frame instead of floating a thumbnail in it. */ .fz-look-exams .fz-resource__img img { object-fit: cover; mix-blend-mode: normal; } @media (max-width: 600px) { .fz-resource { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.1rem; } .fz-look-exams .fz-resource__img { aspect-ratio: 16 / 9; width: 100%; max-width: none !important; } } .fz-resource__body > * { margin: 0; } .fz-resource__body > * + * { margin-top: .6rem; } .fz-resource__title { font-size: var(--wp--preset--font-size--x-large); } .fz-resource__ages { display: inline-block; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; padding: .2em .8em; border-radius: 999px; background: var(--fz-soft); } .fz-resource__desc { color: var(--fz-muted); font-size: var(--wp--preset--font-size--small); } .fz-resource__label { display: block; font-weight: 700; font-size: var(--wp--preset--font-size--small); } .fz-resource__row { display: flex; gap: .5rem; flex-wrap: wrap; } .fz-resource__row input[type="email"] { flex: 1 1 220px; min-height: 48px; padding: .6rem 1rem; border-radius: 999px; border: 1.5px solid var(--fz-line); font: inherit; background: var(--fz-base); } .fz-look-exams .fz-resource__row input[type="email"] { border-radius: 10px; } .fz-resource__row input[type="email"]:focus { outline: 3px solid var(--fz-primary); outline-offset: 1px; border-color: var(--fz-primary); } .fz-resource__consent { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--wp--preset--font-size--x-small); color: var(--fz-muted); } .fz-resource__consent input { margin-top: .2em; width: 18px; height: 18px; accent-color: var(--fz-primary); flex: none; } .fz-resource__thanks { font-weight: 700; color: var(--wp--preset--color--success); } .fz-resource__error { font-weight: 700; color: #B42318; } .fz-resource__btn { display: inline-block; text-decoration: none; } @media (max-width: 600px) { .fz-resource { grid-template-columns: 1fr; } .fz-resource__img { max-width: 180px; } } /* "Your courses on other Frencheezy sites" (network plugin, Tutor dashboard) */ .fz-net-courses { margin-top: 2.5rem !important; } .fz-net-courses h3 { font-family: var(--wp--preset--font-family--heading) !important; font-size: 1.35rem !important; color: var(--fz-ink); } .fz-net-courses__list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem !important; } .fz-net-courses__item { border-radius: var(--fz-radius) !important; border-color: var(--fz-line) !important; background: var(--fz-surface) !important; padding: 1rem !important; transition: transform .25s, box-shadow .25s; position: relative; } .fz-net-courses__item:hover { transform: translateY(-3px); box-shadow: var(--fz-shadow-lift); } .fz-net-courses__item img { width: 88px !important; height: 66px !important; border-radius: 12px !important; } .fz-net-courses__item a:not(.tutor-btn) { font-family: var(--wp--preset--font-family--heading); font-size: 1.05rem; } .fz-net-courses__item--main { box-shadow: inset 4px 0 0 #4B4ACF; } .fz-net-courses__item--kids { box-shadow: inset 4px 0 0 #FFC93C; } .fz-net-courses__item--exams { box-shadow: inset 4px 0 0 #1F9D6B; } .fz-look-kids .fz-net-courses__item { border: 3px solid #23214A !important; box-shadow: 0 5px 0 #23214A; } .fz-net-courses h3 { margin: 0 0 1rem !important; } .fz-net-courses__list { margin-top: 0 !important; } /* ------------------------------------------------ hero, desktop (>= 1280px) The copy owns a fixed column inside the centred container; the art fills the rest of the row out to the viewport edge (full-bleed) and fades in on its inner edge. The art box starts after the copy column plus a gap, so text can never sit on the illustration, at any width. */ @media (min-width: 1280px) { .fz-hero { --fz-hero-copy: 540px; --fz-hero-gap: clamp(1.5rem, calc(2.5vw / var(--fz-z, 1)), 3rem); --fz-hero-fade: clamp(90px, calc(9vw / var(--fz-z, 1)), 200px); } .fz-hero::before { display: none; } .fz-hero > .fz-hero__copy { width: var(--fz-hero-copy); max-width: var(--fz-hero-copy); flex: none; } .fz-hero > .fz-hero__art { inset: 0 0 0 calc(var(--fz-edge) + var(--fz-hero-copy) + var(--fz-hero-gap)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fz-hero-fade)); mask-image: linear-gradient(90deg, transparent, #000 var(--fz-hero-fade)); } .fz-look-main .fz-hero--main .fz-hero__lede { max-width: 470px; } .fz-look-main .fz-hero--main > .fz-hero__art img { object-position: 72% 40%; } .fz-look-kids .fz-hero--kids > .fz-hero__art img { object-position: 78% 50%; } .fz-look-exams .fz-hero--exams > .fz-hero__art img { object-position: 70% 50%; } /* Zazou perches on the seam between copy and art. */ .fz-zazou--hero { left: calc(var(--fz-edge) + var(--fz-hero-copy) + var(--fz-hero-gap) * .5); } /* About: mirrored, copy on the right. */ .fz-hero--about { --fz-hero-copy: 460px; } .fz-hero--about > .fz-hero__art { inset: 0 calc(var(--fz-edge) + var(--fz-hero-copy) + var(--fz-hero-gap)) 0 0; -webkit-mask-image: linear-gradient(270deg, transparent, #000 var(--fz-hero-fade)); mask-image: linear-gradient(270deg, transparent, #000 var(--fz-hero-fade)); } .fz-hero--about > .fz-hero__art img { object-position: 30% 50%; } } /* Network course cards: thumbnail beside a full-width text column, "Open" under the text, so the title never gets squeezed between the image and the button. */ .fz-net-courses__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important; } .fz-net-courses__item { display: grid !important; grid-template-columns: 88px minmax(0, 1fr); column-gap: 1rem !important; row-gap: .75rem; align-items: start !important; } .fz-net-courses__item > img { grid-column: 1; grid-row: 1 / span 2; } .fz-net-courses__item > span { grid-column: 2; display: block; } .fz-net-courses__item > .tutor-btn { grid-column: 2; justify-self: start; } .fz-net-courses__item.fz-net-courses__item:not(:has(> img)) { grid-template-columns: minmax(0, 1fr); } .fz-net-courses__item.fz-net-courses__item:not(:has(> img)) > :is(span, .tutor-btn) { grid-column: 1; } .fz-net-courses__item > .tutor-btn { border: 2px solid var(--fz-primary) !important; color: var(--fz-primary) !important; background: transparent !important; border-radius: var(--tutor-button-radius, 999px); padding: .35rem 1.1rem !important; font-weight: 700; } .fz-net-courses__item > .tutor-btn:hover { background: var(--fz-primary) !important; color: #fff !important; } /* ========================================================================== Live hotfixes folded in (Oct 28). These were added in each site's Additional CSS on Hostinger (same set on all 3 sites; Kids also hid an empty legal table of contents). They stay in Additional CSS too, so this copy only makes them part of the source. vw values are zoom-safe here. ========================================================================== */ /* fz-submenu-fix */ header .wp-block-navigation__submenu-container { gap: 4px; } .fz-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .menu-item-type-custom.current-menu-item > .wp-block-navigation-item__content:not(:hover):not(:focus-visible) { background: transparent; } /* fz-footer-fix */ .wp-site-blocks > .fz-site-footer { margin-top: clamp(56px, calc(7vw / var(--fz-z, 1)), 112px); } .fz-footer__brand { position: relative; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background-color .15s ease; } .fz-footer__brand a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; } .fz-footer__brand:hover { transform: translateY(-3px); border-color: rgba(255, 201, 60, .8); } .fz-footer__brand:has(a:focus-visible) { outline: 3px solid #FFC93C; outline-offset: 3px; } .fz-footer__brand a:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { .fz-footer__brand { transition: none; } .fz-footer__brand:hover { transform: none; } } /* fz-mobile-header */ @media (max-width: 1099px) { .fz-header__inner .fz-logo { order: 1; } .fz-header__inner .fz-account { order: 2; margin-left: auto; } .fz-header__inner .fz-nav { order: 3; flex: 0 0 auto; margin-left: 0; } } @media (max-width: 600px) { .fz-header__inner { gap: 10px; } .fz-header__inner .fz-account { gap: 6px; } } /* fz-mobile-footer */ @media (max-width: 600px) { .fz-footer__brands { gap: 10px !important; } .fz-footer__brand { padding: 14px 16px !important; } .fz-footer__brand p { font-size: 13px !important; line-height: 1.45 !important; margin-top: 6px !important; } } /* fz-catalog-compact */ .fz-catalog-head { padding-top: clamp(2rem, calc(4.5vw / var(--fz-z, 1)), 3.5rem) !important; padding-bottom: clamp(1.5rem, calc(3vw / var(--fz-z, 1)), 2.25rem) !important; } .fz-catalog-head h1 { font-size: clamp(2.1rem, calc(3.6vw / var(--fz-z, 1)), 3.25rem) !important; } .fz-catalog-head::after { width: 180px; height: 180px; bottom: -70px; } .fz-catalog .fz-content, .fz-catalog-head + .fz-content { padding-top: clamp(1.25rem, calc(2.5vw / var(--fz-z, 1)), 2rem) !important; } .fz-filters { gap: .75rem !important; padding: .85rem 1rem !important; margin-bottom: 1.25rem !important; } .fz-filters__search input { padding: .6rem 1rem !important; } @media (min-width: 960px) { .fz-filters { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 1.5rem !important; } .fz-filters__search { flex: 1 1 300px; } .fz-filters__group { display: block !important; flex: 0 0 auto; } .fz-filters__group legend { float: left; padding: .5rem .6rem 0 0 !important; margin: 0; } .fz-filters__chips { display: inline-flex !important; } .fz-filters__actions { flex: 0 0 auto; } } /* fz-catalog-compact-mobile */ @media (max-width: 959px) { .fz-filters { padding: .75rem !important; gap: .6rem !important; } .fz-filters__group { display: flex !important; align-items: center; gap: .5rem !important; grid-template-columns: none !important; } .fz-filters__group legend { float: none; padding: 0 !important; flex: 0 0 auto; min-width: 4.5rem; } .fz-filters__chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .fz-filters__chips::-webkit-scrollbar { display: none; } .fz-filters__chips > * { flex: 0 0 auto; } } /* fz-catalog-compact-fit */ .fz-filters, .fz-filters * { box-sizing: border-box; } .fz-filters__group { min-width: 0 !important; min-inline-size: 0 !important; } .fz-filters__search, .fz-filters__search input { min-width: 0; max-width: 100%; } .fz-filters__chips { min-width: 0; } /* fz-text-room (with fz-text-room-2 applied: ledes measure up to 1100px) */ .is-style-fz-lede { max-width: min(1100px, 100%) !important; } .fz-page-head > .is-style-fz-lede { padding-right: max(0px, calc(min(100%, var(--fz-wide)) - 1100px)) !important; } .fz-page-head > h1 { padding-right: max(0px, calc(min(100%, var(--fz-wide)) - 34ch)) !important; } .fz-section-head { max-width: 1100px !important; } .fz-section > .fz-section-head:not(.is-center) > * { max-width: 1100px !important; } .sora-ka__hero-text { max-width: min(980px, 100%) !important; flex: 1 1 auto; } /* fz-legal-pages */ .fz-page-head .fz-lp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .fz-lp-meta span { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--fz-surface); border: 1px solid var(--fz-line); font-size: var(--wp--preset--font-size--x-small); color: var(--fz-muted); font-weight: 600; line-height: 1.2; } .fz-lp-meta span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fz-accent-3); margin-right: 8px; } .fz-lp .fz-lp__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, calc(6vw / var(--fz-z, 1)), 96px); align-items: start; max-width: var(--fz-wide); width: 100%; margin-inline: auto; } .fz-lp__toc { position: sticky; top: 140px; padding: 22px 22px 14px; border-radius: 20px; background: var(--fz-soft); border: 1px solid var(--fz-line); } .fz-lp__toc .fz-lp__toc-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fz-primary); } .fz-lp__toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; } .fz-lp__toc li { counter-increment: toc; margin: 0; padding: 0; } .fz-lp__toc li::before { content: none; } .fz-lp__toc a { display: flex; gap: 12px; padding: 9px 0; text-decoration: none; color: var(--fz-ink); font-weight: 600; font-size: 15px; line-height: 1.35; border-top: 1px solid var(--fz-line); transition: color .15s; } .fz-lp__toc li:first-child a { border-top: 0; } .fz-lp__toc a::before { content: counter(toc, decimal-leading-zero); color: var(--fz-primary); font-size: 12px; font-weight: 700; padding-top: 2px; font-variant-numeric: tabular-nums; } .fz-lp__toc a:hover { color: var(--fz-primary); } .fz-lp__body { counter-reset: sec; max-width: 780px; min-width: 0; } .fz-lp__body > * { margin-block: 0 1em; } .fz-lp__body > h2 { counter-increment: sec; display: flex; gap: 16px; align-items: baseline; margin: 44px 0 16px; padding-top: 36px; border-top: 1px solid var(--fz-line); font-size: clamp(1.5rem, calc(2.4vw / var(--fz-z, 1)), 2rem); line-height: 1.2; scroll-margin-top: 140px; } .fz-lp__body > h2::before { content: counter(sec, decimal-leading-zero); flex: 0 0 auto; font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--fz-primary); transform: translateY(-4px); } .fz-lp__body > h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .fz-lp__body > h3 { font-size: 1.2rem; margin: 28px 0 10px; } .fz-lp__body p, .fz-lp__body li { line-height: 1.75; } .fz-lp__body ul:not(.is-style-fz-check), .fz-lp__body ol { padding-left: 1.25em; } .fz-lp__body li { margin-block: .4em; } .fz-lp__body li::marker { color: var(--fz-primary); } .fz-lp__body a, .fz-ct a { color: var(--fz-primary); text-underline-offset: 3px; } .fz-lp__body .fz-lp__draft { position: relative; padding: 16px 18px 16px 52px; margin-bottom: 40px; border-radius: 16px; background: #FFF7E0; border: 1px solid #F5DC8E; font-size: var(--wp--preset--font-size--x-small); line-height: 1.6; color: var(--fz-ink); } .fz-lp__draft::before { content: "!"; position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; border-radius: 50%; background: var(--fz-accent); color: var(--fz-ink); font-weight: 800; display: grid; place-items: center; font-size: 14px; } .fz-lp__cta { max-width: var(--fz-wide); width: 100%; margin: clamp(64px, calc(8vw / var(--fz-z, 1)), 112px) auto 0; padding: clamp(28px, calc(4vw / var(--fz-z, 1)), 52px); border-radius: 28px; background: var(--fz-ink); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; position: relative; overflow: hidden; } .fz-lp__cta::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 56px; background: var(--fz-primary); opacity: .45; transform: rotate(18deg); pointer-events: none; } .fz-lp__cta > * { position: relative; z-index: 1; margin: 0; } .fz-lp__cta h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.6rem, calc(3vw / var(--fz-z, 1)), 2.4rem); } .fz-lp__cta h2 em { color: var(--fz-accent); } .fz-lp__cta p { color: rgba(255, 255, 255, .78); margin: 0; } .fz-lp__btn .wp-block-button__link { background: var(--fz-accent); color: var(--fz-ink); border-radius: 999px; padding: 14px 26px; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s; } .fz-lp__btn .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); } /* contact */ .fz-ct .fz-ct__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: var(--fz-wide); width: 100%; margin-inline: auto; } .fz-ct__card { padding: clamp(24px, calc(3vw / var(--fz-z, 1)), 36px); border-radius: 24px; background: var(--fz-surface); border: 1px solid var(--fz-line); box-shadow: var(--fz-shadow); min-width: 0; } .fz-ct__card > * { margin-block: 0 12px; } .fz-ct__card > :last-child { margin-bottom: 0; } .fz-ct__card .fz-ct__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fz-primary); margin-bottom: 16px; } .fz-ct__card--mail { background: var(--fz-ink); color: #fff; border-color: transparent; position: relative; overflow: hidden; } .fz-ct__card--mail::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 200px; height: 200px; border-radius: 48px; background: var(--fz-primary); opacity: .45; transform: rotate(18deg); pointer-events: none; } .fz-ct__card--mail > * { position: relative; z-index: 1; } .fz-ct__card--mail .fz-ct__label { color: var(--fz-accent); } .fz-ct__card--mail h2 { font-size: clamp(1.4rem, calc(2.6vw / var(--fz-z, 1)), 2.1rem); overflow-wrap: anywhere; } .fz-ct__card--mail h2 a { color: #fff; text-decoration: none; } .fz-ct__card--mail h2 a:hover { text-decoration: underline; } .fz-ct__card--mail p { color: rgba(255, 255, 255, .78); } .fz-ct__card--mail .wp-block-buttons { margin-top: 24px; } .fz-ct__links { list-style: none; padding: 0; margin: 0; } .fz-ct__links li { margin: 0; padding: 12px 0; border-top: 1px solid var(--fz-line); font-weight: 600; } .fz-ct__links li:first-child { border-top: 0; padding-top: 0; } .fz-ct__links a { text-decoration: none; } .fz-ct__links a::after { content: " \2192"; } /* faq page */ .fz-lp-faq .fz-faq__list { max-width: 860px; width: 100%; margin-inline: auto; } @media (max-width: 900px) { .fz-lp .fz-lp__grid, .fz-ct .fz-ct__grid { grid-template-columns: 1fr; } .fz-lp__toc { position: static; } .fz-lp__cta { border-radius: 22px; } } /* Kids: a legal page without sections drops the empty table of contents. */ .fz-lp__toc:not(:has(li)) { display: none; } .fz-lp .fz-lp__grid:not(:has(.fz-lp__toc li)) { grid-template-columns: minmax(0, 1fr); } .fz-lp .fz-lp__grid:not(:has(.fz-lp__toc li)) .fz-lp__body { width: 100%; margin-inline: auto; } /* fz-pricing-paypal: when the page carries the PayPal note, it replaces the theme's bank-transfer note. */ body:has(.fz-pricing__note--pp) .fz-pricing__note:not(.fz-pricing__note--pp) { display: none; } .wp-block-post-content > .fz-pricing__note--pp { max-width: var(--fz-wide, 1240px) !important; width: 100%; margin-inline: auto !important; } /* fz-card-icons: Visa and Mastercard marks beside the PayPal option at checkout. */ .tutor-checkout-payment-item .tutor-payment-item-content { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tutor-checkout-payment-item .tutor-payment-item-content::after { content: ""; display: inline-block; width: 100px; height: 30px; margin-left: auto; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2746%27%20height%3D%2730%27%20viewBox%3D%270%200%2046%2030%27%3E%3Crect%20x%3D%27.5%27%20y%3D%27.5%27%20width%3D%2745%27%20height%3D%2729%27%20rx%3D%275%27%20fill%3D%27%23fff%27%20stroke%3D%27%23d9d9e3%27%2F%3E%3Ctext%20x%3D%2723%27%20y%3D%2720%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-size%3D%2713%27%20font-weight%3D%27900%27%20font-style%3D%27italic%27%20fill%3D%27%231a1f71%27%3EVISA%3C%2Ftext%3E%3C%2Fsvg%3E") left center / 46px 30px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2746%27%20height%3D%2730%27%20viewBox%3D%270%200%2046%2030%27%3E%3Crect%20x%3D%27.5%27%20y%3D%27.5%27%20width%3D%2745%27%20height%3D%2729%27%20rx%3D%275%27%20fill%3D%27%23fff%27%20stroke%3D%27%23d9d9e3%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%2715%27%20r%3D%278%27%20fill%3D%27%23eb001b%27%2F%3E%3Ccircle%20cx%3D%2727%27%20cy%3D%2715%27%20r%3D%278%27%20fill%3D%27%23f79e1b%27%20fill-opacity%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M23%208.07a8%208%200%200%201%200%2013.86%208%208%200%200%201%200-13.86z%27%20fill%3D%27%23ff5f00%27%2F%3E%3C%2Fsvg%3E") right center / 46px 30px no-repeat; } .tutor-checkout-payment-options::after { content: "PayPal or debit/credit card: no PayPal account needed. Choose \201CPay with Debit or Credit Card\201D on the next screen."; display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: #5b5f7a; }