/* ========================================================================== Finnet theme — tokens.css Design tokens. Every value here is taken from the CSS the previous build generated from this site's own theme options (_capture/server/static.css), so they are site data, not guesses. Two naming families live side by side: - --fn-* our own tokens (colours, type scale, grid). - --mfn-* property names the captured per-page CSS already reads (--mfn-button-*, --mfn-column-gap-*, --mfn-header-* …). They are kept verbatim so that imported per-item CSS such as `.mcb-item-xxxx .button{--mfn-button-bg:#f15f22}` keeps working. Breakpoints (cannot be variables inside @media; listed for reference and exposed as --fn-bp-* so JS can read them with getComputedStyle): desktop ≥ 1240 grid 1345px laptop 960–1239 grid 940px (laptop-* column classes and .hide-laptop actually run 960–1440, as in the reference) tablet 768–959 grid 708px mobile ≤ 767 grid 550px + 33px gutters (700px for .container/footer) ========================================================================== */ :root { /* ---- Colours ---------------------------------------------------------- */ --fn-color-theme: #283c92; /* headings, links, selection */ --fn-color-accent: #2a27e9; /* buttons, icons, link hover family */ --fn-color-accent-hover: #120fbf; --fn-color-navy: #0b1a48; /* header text, footer headings */ --fn-color-orange: #f15f22; --fn-color-text: #0a0a0a; /* body copy */ --fn-color-text-muted: #282828; /* post meta, captions, dates */ --fn-color-text-quote: #444444; /* blockquote */ --fn-color-text-footer: #4c4d52; /* .mfn-footer, GDPR copy */ --fn-color-bg: #f7f7f7; /* html, body, #Wrapper, #Content */ --fn-color-white: #ffffff; --fn-color-footer-bg: #283c92; --fn-color-border: rgba(0, 0, 0, 0.08); /* hr, table, dl borders */ --fn-color-input-border: #e7e7e7; --fn-color-input-text: #686868; --fn-color-input-focus: #2a27e9; --fn-color-input-focus-bg:#f7f7f7; --fn-color-image-border: #f8f8f8; --fn-color-caption-bg: #f8f8f8; --fn-color-caption-text: #a6a6a6; --fn-color-code: #2991d6; /* ---- Font families ---------------------------------------------------- */ --fn-font-heading: "ITC Charter "; /* trailing space is intentional */ --fn-font-body: "Fin Helvetica Medium"; --fn-font-ui: "Plus Jakarta Sans"; /* buttons */ --fn-font-mono: Consolas, monospace; /* ---- Type scale (desktop) --------------------------------------------- */ --fn-body-size: 16px; --fn-body-line: 24px; --fn-body-weight: 500; --fn-body-spacing: 0px; --fn-h1-size: 58px; --fn-h1-line: 65px; --fn-h1-weight: 700; --fn-h1-spacing: 0px; --fn-h2-size: 42px; --fn-h2-line: 50px; --fn-h2-weight: 700; --fn-h2-spacing: -1px; --fn-h3-size: 28px; --fn-h3-line: 32px; --fn-h3-weight: 700; --fn-h3-spacing: 0px; --fn-h4-size: 24px; --fn-h4-line: 32px; --fn-h4-weight: 500; --fn-h4-spacing: 0px; --fn-h5-size: 20px; --fn-h5-line: 28px; --fn-h5-weight: 500; --fn-h5-spacing: 0px; --fn-h6-size: 14px; --fn-h6-line: 20px; --fn-h6-weight: 500; --fn-h6-spacing: 0px; --fn-blockquote-size: 17px; --fn-blockquote-line: 31px; /* "Menu" option from the theme settings (used by the classic #menu header, which this site does not use; the header-template menu inherits the body font and sets its own sizes per item). Recorded for completeness. */ --fn-menu-size: 16px; --fn-menu-weight: 700; --fn-heading-margin: 15px; --fn-paragraph-margin: 15px; /* ---- Grid ------------------------------------------------------------- */ --fn-grid-width: 1345px; /* .section_wrapper max-width ≥1240 */ --fn-wrapper-width: 1365px; /* boxed #Wrapper width (site is full-width) */ --fn-grid-width-laptop: 940px; --fn-grid-width-tablet: 708px; --fn-grid-width-mobile: 550px; --fn-grid-width-mobile-container: 700px; --fn-mobile-gutter: 33px; --fn-content-padding-top: 30px; /* #Content default top padding */ --fn-bp-desktop: 1240px; --fn-bp-laptop: 960px; --fn-bp-tablet: 768px; --fn-bp-laptop-max: 1440px; /* upper bound of laptop-* classes */ /* ---- Column gaps (read by .mcb-column-inner; per-item CSS overrides) --- */ --mfn-column-gap-top: 0; --mfn-column-gap-bottom: 40px; --mfn-column-gap-left: 12px; --mfn-column-gap-right: 12px; /* ---- Generic element colours the builder CSS reads --------------------- */ --mfn-icon-box-icon: #2a27e9; --mfn-sliding-box-bg: #2a27e9; --mfn-clients-tiles: rgba(0, 0, 0, 0.08); --mfn-clients-tiles-hover: #283c92; --mfn-shape-divider: #000; --mfn-blog-date-bg: #f8f8f8; --mfn-blog-slider-date-bg: #f8f8f8; --mfn-faq-line: rgba(0, 0, 0, 0.1); --mfn-tabs-border-width: 1px; --mfn-tabs-border-color: rgba(0, 0, 0, 0.08); /* ---- Buttons (theme option "Buttons") --------------------------------- */ --mfn-button-font-family: "Plus Jakarta Sans"; --mfn-button-font-size: 16px; --mfn-button-font-weight: 600; --mfn-button-font-style: inherit; --mfn-button-letter-spacing:0px; --mfn-button-padding: 16px 40px 16px 40px; --mfn-button-border-width: 0; --mfn-button-border-style: solid; --mfn-button-border-radius: 8px 8px 8px 8px; --mfn-button-gap: 10px; --mfn-button-transition: 0.2s; --mfn-button-color: #2a27e9; --mfn-button-color-hover: #2a27e9; --mfn-button-bg: #ededff; --mfn-button-bg-hover: #dbdbff; --mfn-button-border-color: transparent; --mfn-button-border-color-hover: transparent; --mfn-button-icon-color: #2a27e9; --mfn-button-icon-color-hover: #2a27e9; --mfn-button-box-shadow: unset; --mfn-button-theme-color: #ffffff; --mfn-button-theme-color-hover: #ffffff; --mfn-button-theme-bg: #2a27e9; --mfn-button-theme-bg-hover: #120fbf; --mfn-button-theme-border-color: transparent; --mfn-button-theme-border-color-hover: transparent; --mfn-button-theme-icon-color: #ffffff; --mfn-button-theme-icon-color-hover: #ffffff; --mfn-button-theme-box-shadow: unset; --mfn-button-action-color: #626262; --mfn-button-action-color-hover: #626262; --mfn-button-action-bg: #dbdddf; --mfn-button-action-bg-hover: #d3d3d3; --mfn-button-action-border-color: transparent; --mfn-button-action-border-color-hover: transparent; --mfn-button-action-icon-color: #626262; --mfn-button-action-icon-color-hover: #626262; --mfn-button-action-box-shadow: unset; /* ---- GDPR bar (theme option "Cookie notice") -------------------------- */ --fn-gdpr-bg: #ffffff; --fn-gdpr-radius: 16px; --fn-gdpr-shadow: 0px 15px 30px 0 rgba(1, 7, 39, 0.13); --fn-gdpr-text: #4c4d52; --fn-gdpr-link-hover: #2a27e9; --fn-gdpr-button-bg: #2a27e9; --fn-gdpr-button-bg-hover: #120fbf; --fn-gdpr-button-text: #ffffff; /* ---- Motion ------------------------------------------------------------ */ --fn-reveal-duration: 0.5s; --fn-reveal-ease: ease; --fn-reveal-offset: 30px; /* translate distance for fadeInLeft/Right/Up/Down */ } /* ---- Responsive type scale (values from the theme options) --------------- */ @media only screen and (min-width: 768px) and (max-width: 959px) { :root { --fn-body-size: 14px; --fn-body-line: 20px; --fn-h1-size: 49px; --fn-h1-line: 55px; --fn-h2-size: 36px; --fn-h2-line: 43px; --fn-h3-size: 24px; --fn-h3-line: 27px; --fn-h4-size: 20px; --fn-h4-line: 27px; --fn-h5-size: 17px; --fn-h5-line: 24px; --fn-h6-size: 13px; --fn-h6-line: 19px; --fn-menu-size: 14px; --fn-blockquote-size: 15px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { :root { --fn-body-size: 13px; --fn-body-line: 19px; --fn-h1-size: 44px; --fn-h1-line: 49px; --fn-h2-size: 32px; --fn-h2-line: 38px; --fn-h3-size: 21px; --fn-h3-line: 24px; --fn-h4-size: 18px; --fn-h4-line: 24px; --fn-h5-size: 15px; --fn-h5-line: 21px; --fn-h6-size: 13px; --fn-h6-line: 19px; --fn-menu-size: 13px; --fn-blockquote-size: 14px; } } @media only screen and (max-width: 479px) { :root { --fn-body-size: 13px; --fn-body-line: 19px; --fn-h1-size: 35px; --fn-h1-line: 39px; --fn-h2-size: 25px; --fn-h2-line: 30px; --fn-h3-size: 17px; --fn-h3-line: 19px; --fn-h4-size: 14px; --fn-h4-line: 19px; --fn-h5-size: 13px; --fn-h5-line: 19px; --fn-h6-size: 13px; --fn-h6-line: 19px; --fn-menu-size: 13px; --fn-blockquote-size: 13px; } }