/* Theme Name: Frontflow Theme URI: https://www.frontflow.no/ Author: Bøhn Gruppen AS Author URI: https://www.frontflow.no/ Description: Frontflow child theme for Twenty Twenty-Five. Brand palette, PT Serif/PT Sans (bundled, SIL OFL), Frontflow header/footer and page templates. Template: twentytwentyfive Version: 1.0.0 Requires at least: 6.7 Tested up to: 7.1 Requires PHP: 7.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: frontflow */ /* ========================================================= Frontflow – Additional CSS for Twenty Twenty-Five Paste into: Site Editor → Styles → (⋮) Additional CSS All custom classes are prefixed ff-. ========================================================= */ /* 0. Safety net: palette + fonts even if a Styles step was missed */ :root{ --wp--preset--color--base:#FFFFFF; --wp--preset--color--contrast:#30292F; --wp--preset--color--accent-1:#05668D; --wp--preset--color--accent-2:#98D2EB; --wp--preset--color--accent-3:#F0F3BD; --wp--preset--color--accent-4:#5B545A; --wp--preset--color--accent-5:#E6F4FA; --wp--preset--color--accent-6:#DCE7EC; --ff-blue:#05668D; --ff-blue-dark:#044F6E; --ff-sky:#98D2EB; --ff-sky-soft:#E6F4FA; --ff-ink:#30292F; --ff-muted:#5B545A; --ff-yellow:#F0F3BD; --ff-green:#107C41; --ff-line:#DCE7EC; } body{font-family:"PT Sans",system-ui,sans-serif;color:var(--ff-ink);-webkit-font-smoothing:antialiased} h1,h2,.wp-block-heading.ff-serif{font-family:"PT Serif",Georgia,serif;font-weight:700} h3,h4{font-family:"PT Sans",system-ui,sans-serif} /* 1. Header (template part) */ header.wp-block-template-part,.wp-block-template-part:has(> .ff-header){position:sticky;top:0;z-index:50} .admin-bar header.wp-block-template-part{top:32px} @media (max-width:782px){.admin-bar header.wp-block-template-part{top:46px}} .ff-header{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--ff-line)} .ff-header .wp-block-site-logo img,.ff-header .ff-logo img{height:auto;max-height:52px;width:auto} .ff-header .wp-block-navigation a{text-decoration:none;color:var(--ff-ink)} .ff-header .wp-block-navigation a:hover,.ff-header .wp-block-navigation .current-menu-item>a{color:var(--ff-blue)} .ff-header .wp-block-navigation-item.current-menu-item>a{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px} .ff-header .ff-header-cta .wp-block-button__link{padding:10px 18px;font-size:15px} .ff-header .wp-block-navigation__responsive-container.is-menu-open{background:#fff;padding:24px} .ff-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a{font-size:20px} @media (max-width:600px){.ff-header .ff-header-cta{display:none}} /* 2. Buttons */ .wp-block-button__link{border-radius:999px;transition:background-color .15s,color .15s,border-color .15s} .wp-block-button.is-style-outline>.wp-block-button__link{background:transparent;color:var(--ff-blue);border:2px solid var(--ff-blue)} .wp-block-button.is-style-outline>.wp-block-button__link:hover{background:var(--ff-sky-soft);color:var(--ff-blue)} .ff-btn-white .wp-block-button__link{background:#fff;color:var(--ff-blue);border-color:#fff} .ff-btn-white .wp-block-button__link:hover{background:var(--ff-sky-soft);color:var(--ff-blue);border-color:var(--ff-sky-soft)} @media (max-width:600px){.ff-hero .wp-block-buttons,.ff-hero .wp-block-button{width:100%}.ff-hero .wp-block-button__link{width:100%}} /* 3. Generic helpers */ main .entry-content>*:first-child, .wp-site-blocks main{margin-top:0} .ff-section{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)} .ff-section.ff-tight-top{padding-top:0} .ff-center{text-align:center} .ff-center .ff-lead{margin-left:auto;margin-right:auto} .ff-eyebrow{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ff-blue);margin-bottom:8px} .ff-lead{font-size:20px;color:var(--ff-muted);max-width:640px} .ff-small{font-size:15px;color:var(--ff-muted)} .ff-link-arrow a{font-weight:700;text-decoration:none} .ff-link-arrow a:after{content:" →"} .ff-card{border-radius:24px;padding:28px;height:100%} .wp-block-column>.ff-card:only-child{height:100%} .ff-card--soft{background:var(--ff-sky-soft)} .ff-card--white{background:#fff;color:var(--ff-ink)} .ff-card--line{background:#fff;border:1px solid var(--ff-line)} .ff-card--featured{border:2px solid var(--ff-blue)} .ff-card h3{margin-top:16px;margin-bottom:8px} .ff-card p{color:var(--ff-muted)} .ff-card.ff-card--yellow{background:var(--ff-yellow)} .ff-card.ff-card--yellow p{color:var(--ff-ink)} /* 4. Hero */ .ff-hero{background:linear-gradient(180deg,#fff 0%,var(--ff-sky-soft) 100%);padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(56px,7vw,96px)} .ff-hero h1{margin-top:0;font-size:clamp(30px,3vw,44px)} .ff-offer{background:var(--ff-yellow);border-radius:16px;padding:12px 16px;font-size:16px;max-width:580px} .ff-offer p{margin:0} .ff-trust{list-style:none;padding-left:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px;color:var(--ff-muted)} .ff-trust li:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ff-blue);margin-right:8px;vertical-align:middle} .ff-page-hero{background:linear-gradient(180deg,#fff 0%,var(--ff-sky-soft) 100%);padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(32px,4vw,48px)} /* 5. Forecast visual (Custom HTML block) */ .ff-visual{background:var(--ff-sky);border-radius:32px;padding:clamp(18px,2.5vw,34px)} .ff-fc-card{background:#fff;border-radius:16px;box-shadow:0 18px 40px rgba(5,102,141,.18);padding:22px 22px 14px} .ff-fc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 12px;margin-bottom:6px} .ff-fc-title{font-weight:700;font-size:17px;line-height:1.3} .ff-fc-sub{font-size:13px;color:var(--ff-muted)} .ff-tag{font-size:12px;font-weight:700;background:var(--ff-yellow);color:var(--ff-ink);padding:5px 10px;border-radius:999px;white-space:nowrap} .ff-fc-card svg{width:100%;height:auto;display:block} .ff-fc-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;border-top:1px solid var(--ff-line);padding-top:12px} .ff-fc-stats div{font-size:13px;color:var(--ff-muted)} .ff-fc-stats strong{display:block;font-size:19px;color:var(--ff-ink)} .ff-fc-stats .ff-pos{color:var(--ff-green)} .ff-note{background:#fff;border-radius:16px;box-shadow:0 12px 28px rgba(48,41,47,.14);padding:14px 16px;max-width:360px;margin:16px 0 0 auto;font-size:14px;line-height:1.4} .ff-note b{display:block;font-size:13px;color:var(--ff-blue);margin-bottom:2px} /* 6. Icons on h3 (no HTML needed: add class ff-ic + ff-ic-NAME to the heading) */ .ff-ic{position:relative} .ff-ic:before{content:"";display:block;width:52px;height:52px;border-radius:14px;margin-bottom:16px;background:var(--ff-sky-soft)} .ff-ic:after{content:"";position:absolute;left:12px;top:12px;width:28px;height:28px;background:var(--ff-blue);-webkit-mask:var(--ff-icon) center/contain no-repeat;mask:var(--ff-icon) center/contain no-repeat} .ff-card--soft .ff-ic:before{background:#fff} .ff-card--white .ff-ic:before,.ff-card--line .ff-ic:before{background:var(--ff-sky-soft)} .ff-card--yellow .ff-ic:before{background:#fff} .ff-ic-project{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V4h8v3'/%3E%3C/svg%3E")} .ff-ic-season{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")} .ff-ic-growth{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E")} .ff-ic-chart{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-4 3 3 5-6'/%3E%3C/svg%3E")} .ff-ic-note{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 11h7M9 15h7M9 7h3'/%3E%3C/svg%3E")} .ff-ic-chat{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")} .ff-ic-file{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M4 9h16M4 15h16M10 3v18'/%3E%3C/svg%3E")} .ff-ic-shield{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E")} .ff-ic-lock{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")} .ff-ic-eye{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")} .ff-ic-handshake{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18.5 14.8c1.6.8 2.6 2.5 3 5.2'/%3E%3C/svg%3E")} .ff-ic-sparkle{--ff-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2 5.5L19.5 10.5 14 12.5 12 18l-2-5.5L4.5 10.5 10 8.5z'/%3E%3C/svg%3E")} /* 7. Blue band (Hva du får) and CTA band */ .ff-band-blue{width:auto!important;max-width:none;background:var(--ff-blue);color:#fff;border-radius:36px;margin-left:16px!important;margin-right:16px!important;padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)} .ff-band-blue>h2,.ff-band-blue .ff-band-head h2,.ff-band-blue .ff-band-head p{color:#fff} .ff-band-blue .ff-lead{color:var(--ff-sky-soft)} .ff-cta{background:var(--ff-blue);color:#fff;border-radius:36px;padding:clamp(28px,5vw,64px)!important} .ff-cta h2,.ff-cta p{color:#fff} .ff-cta .ff-cta-text p{color:var(--ff-sky-soft)} /* 8. Steps */ .ff-steps{position:relative} .ff-step-num{width:52px;height:52px;border-radius:50%;background:var(--ff-sky);color:var(--ff-ink);font:700 22px/52px "PT Serif",Georgia,serif;text-align:center;margin-bottom:16px!important;position:relative;z-index:1} .ff-step h3{margin-top:0;margin-bottom:8px} .ff-step p:not(.ff-step-num){color:var(--ff-muted)} @media (min-width:782px){.ff-steps.ff-steps-3:before{content:"";position:absolute;left:52px;right:calc(33.33% - 26px);top:26px;border-top:2px dashed var(--ff-sky)}} .ff-quality{background:var(--ff-yellow);border-radius:24px;padding:22px 28px} .ff-quality p{margin:0} /* 9. Prices */ .ff-amount{font:700 clamp(32px,3vw,40px)/1.1 "PT Serif",Georgia,serif;margin:8px 0 2px!important;color:var(--ff-ink)} .ff-card .ff-label{font-weight:700;font-size:15px;color:var(--ff-muted);margin:0} .ff-card .ff-per{font-size:15px;color:var(--ff-muted);margin-top:2px} .ff-card h3.ff-tier{font:700 26px "PT Serif",Georgia,serif;margin-top:0} .ff-badge{display:inline-block;background:var(--ff-yellow);color:var(--ff-ink)!important;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;margin:0 0 8px!important} .ff-price-row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ff-line);padding-top:10px;margin-top:10px!important;color:var(--ff-ink)!important} .ff-price-row strong{white-space:nowrap} .ff-checks{list-style:none;padding-left:0} .ff-checks li{position:relative;padding-left:30px;margin:8px 0;color:var(--ff-ink)} .ff-checks li:before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--ff-sky-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%2305668D' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat} .ff-table table{border-collapse:separate;border-spacing:0;width:100%} .ff-table th,.ff-table td{border:0;border-bottom:1px solid var(--ff-line);padding:14px 12px;text-align:left} .ff-table thead{border:0} .ff-table thead th{background:var(--ff-sky-soft);font-weight:700} .ff-table thead th:first-child{border-radius:10px 0 0 10px} .ff-table thead th:last-child{border-radius:0 10px 10px 0} .ff-table figcaption{font-size:15px;color:var(--ff-muted);text-align:left} @media (max-width:600px){.ff-table th,.ff-table td{padding:10px 6px;font-size:15px}} /* 10. Founder */ .ff-founder{background:var(--ff-sky-soft);border-radius:36px;padding:clamp(24px,5vw,56px)!important} .ff-founder .wp-block-image img,.ff-portrait img{border-radius:24px;aspect-ratio:1/1;object-fit:cover;width:100%;height:auto} .ff-chips{list-style:none;padding-left:0;display:flex;flex-wrap:wrap;gap:10px} .ff-chips li{background:#fff;border-radius:999px;padding:7px 14px;font-size:15px} /* 11. FAQ (Details blocks) */ .ff-faq .wp-block-details{background:#fff;border:1px solid var(--ff-line);border-radius:16px;padding:0 24px;margin-bottom:12px} .ff-faq .wp-block-details summary{list-style:none;cursor:pointer;font-weight:700;font-size:19px;padding:20px 32px 20px 0;position:relative} .ff-faq .wp-block-details summary::-webkit-details-marker{display:none} .ff-faq .wp-block-details summary:after{content:"+";position:absolute;right:0;top:16px;color:var(--ff-blue);font-size:26px;line-height:1} .ff-faq .wp-block-details[open] summary:after{content:"–"} .ff-faq .wp-block-details>p{padding-bottom:20px;margin-top:0;color:var(--ff-muted)} /* 12. Footer (template part) */ .ff-footer{background:var(--ff-blue);color:#fff;margin-top:0;padding-bottom:40px!important} .ff-footer p,.ff-footer li,.ff-footer h4{color:#fff} .ff-footer h4{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--ff-sky)!important} .ff-footer a{color:#fff;text-decoration:none} .ff-footer a:hover{text-decoration:underline} .ff-footer .ff-foot-list{list-style:none;padding-left:0} .ff-footer .ff-foot-list li{margin:8px 0} .ff-footer .ff-foot-bottom{border-top:1px solid rgba(255,255,255,.3);padding-top:24px;font-size:14px;color:#E6F4FA} .ff-footer .ff-foot-bottom p{color:#E6F4FA} /* 13. HubSpot form inside .ff-form-slot Works for the classic (non-iframe) HubSpot embed. If the embed renders in an