/*
* The two rounded DIN faces production self-hosts for the footer wordmark,
* mirrored from the live theme's font directory. Production declares the light
* face at weight 300 and the bold one with no weight descriptor at all, so it
* lands on 400 and every heavier use is synthesised — both are restated here
* exactly as production has them so the lockup renders the same.
*/
@font-face {
font-family: "DIN Next Rounded LT Pro";
src: url("../fonts/DINNextRoundedLTPro-Light_1.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Rounded";
src: url("../fonts/din-next-rounded-lt-pro-bold.otf") format("opentype");
font-display: swap;
}
:root {
--youwe-dark: #141414;
--youwe-green: #c8f902;
--youwe-teal: #4fd79d;
--youwe-purple: #9c88ff;
/* Production's page tint is #EFF4F8, Elementor's "muted" section colour. */
--youwe-muted: #eff4f8;
/* Elementor's kit pins every boxed section to 1440px. */
--site-width: 90rem;
/*
* Type scale.
*
* Production renders a per-element scale, not one blanket clamp(). Each
* token below records the size production uses for that heading role, so
* sections opt into a role rather than inheriting a single global size.
* The sizes come straight off the live Elementor CSS: display headings are
* 80px/500 stepping down to 48px at 1024px and 36px at 767px, section
* headings 56px, sub-headings 24px, body copy 18–20px.
*/
--h1-hero: 1.875rem; /* 30px → 60px ≥768px → 80px ≥1025px */
--h1-page: 3rem; /* 48px → 80px ≥768px */
--h2-display: 2.25rem; /* 36px → 48px ≥768px → 80px ≥1025px */
--h2-intro: 1.125rem; /* "Hvem er vi" 18px → 24px ≥768px */
--h2-section: 2.25rem; /* 36px → 56px ≥768px */
--h2-sub: 1.5rem; /* 24px */
--h2-podcast: 2.25rem; /* 36px → 50px ≥768px → 80px ≥1025px */
--h3-card: 2rem; /* 32px card headings */
--h3-card-sm: 1.5rem;
--h3-card-xs: 1.25rem;
--text-body: 1rem; /* 16px → 18px ≥768px */
--text-lead: 1rem; /* 16px → 20px ≥768px */
--text-sm: 0.875rem;
--text-xs: 0.75rem;
}
@media (min-width: 768px) {
:root {
--h1-hero: 3.75rem;
--h1-page: 5rem;
--h2-display: 3rem;
--h2-intro: 1.5rem;
--h2-section: 3.5rem;
--h2-podcast: 3.125rem;
--text-body: 1.125rem;
--text-lead: 1.25rem;
}
}
@media (min-width: 1025px) {
:root {
--h1-hero: 5rem;
--h2-display: 5rem;
--h2-podcast: 5rem;
}
}
* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
max-width: 100%;
margin: 0;
overflow-x: hidden;
}
/*
* The layout puts Tailwind's `antialiased` utility on , but there is no
* Tailwind on this site, so it never applied and text rendered heavier than
* production. Declare the smoothing explicitly.
*/
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
* Images carry width and height attributes so the browser can reserve their
* box before the file arrives. Those attributes are presentational hints, so
* without this rule the height hint would freeze an image at its intrinsic
* pixel height instead of scaling with its width. height: auto restores the
* scaling while leaving the attributes to supply the aspect ratio — and any
* rule below that sets a height wins on specificity.
*/
img {
max-width: 100%;
height: auto;
}
body {
background: #fff;
color: var(--youwe-dark);
font-family: "Fira Sans", sans-serif;
line-height: 1.5;
}
/*
* Production's baseline comes from the hello-elementor reset, not from the
* browser: headings are 500 at 1.2 with asymmetric margins, and paragraphs lose
* their top margin and end on 0.9rem rather than 1em. Without these the copy
* on every page sits a few pixels looser than production's.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-family: inherit;
font-weight: 500;
line-height: 1.2;
margin-block: 0.5rem 1rem;
}
p {
margin-block: 0 0.9rem;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
/*
* The browser's own `[hidden] { display: none }` loses to any class that sets
* a display, so a `hidden` toggled from JavaScript is only as reliable as the
* element it lands on. It lands on .case-listing-card, which is `display:
* block` — which is why the /cases filters used to leave every card on screen.
*/
[hidden] {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.site-body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.site-main {
flex: 1;
}
/*
* Header.
*
* Production floats three separate translucent pills over the page — logo,
* nav, CTA — rather than painting a bar across the viewport. It is fixed from
* the first paint and its appearance never changes on scroll: the scroll
* handler swaps `clearHeader` for `stickyHeader`, and `stickyHeader` only
* re-declares the `position: fixed` the header already had. So there is no
* scrolled state and no transparent-over-dark-hero state here.
*/
.site-header {
position: fixed;
inset: 0 0 auto;
z-index: 9999;
padding-top: 30px;
color: var(--youwe-dark);
}
/* 82px is the height of production's header row, and it is what the open menu's
white sheet is drawn over — the three pills are centred inside it. */
.site-header__inner {
max-width: var(--site-width);
min-height: 82px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
/*
* Open state.
*
* Production does not float the pills over the open mega menu: the header row
* itself turns white with a 16px top radius, so the logo tile and the nav pill
* — both translucent white — disappear into the sheet and read as one panel
* running from the top of the header to the bottom of the menu.
*/
.site-header.is-menu-open .site-header__inner {
background: #fff;
border-radius: 16px 16px 0 0;
}
/* Separate rule on purpose: a browser without :has() would drop the whole
declaration block if the two selectors shared one. */
.site-header:has(.nav-item--services:hover) .site-header__inner {
background: #fff;
border-radius: 16px 16px 0 0;
}
/* Elementor splits the header row 20 / 60 / 20 from 768px up. The brand column
is a flex container so the logo tile inside it sizes to its own content
rather than stretching across that 20%. */
.site-header__brand {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.site-header__nav {
flex: 1 1 auto;
display: flex;
justify-content: flex-end;
}
.site-header__cta {
flex: 0 0 auto;
display: none;
}
/*
* The logo tile: 64x62, with the 40x31 mark centred in it.
*
* Production pads 16/12/8 around the mark, but the mark is inline there — it
* sits in a line box, on the baseline, so the strut under it contributes its
* descent *and* the half-leading of the inherited 1.5 line-height, about 7.3px
* and not the 3.7px of descent alone. That is what makes production's tile
* 64x62 rather than the 64x55 its padding would suggest.
*
* The mark is a flex item here, with no line box to inherit that from, so the
* tile's box is declared outright instead of reconstructed out of padding: an
* earlier pass counted the descent but not the half-leading and landed on
* 64x58.7, three pixels short, with the mark sitting off-centre inside it.
*
* The tile shrinks to fit because `.site-header__brand` is a flex container —
* see there. As a block-level flex container in a block parent it filled the
* 20% brand column instead, 278px at the 1440px site width, which is why the
* logo read as roughly four times production's 64px.
*/
.site-logo {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 64px;
height: 62px;
border-radius: 8.336px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
color: var(--youwe-dark);
}
/*
* The pill's translucent fill and blur sit on a pseudo-element rather than on
* the nav itself. A backdrop-filter makes its element the containing block for
* fixed-position descendants, which would anchor the Services sheet below to
* the pill instead of to the viewport and push it off-centre.
*/
.desktop-nav {
position: relative;
display: none;
border-radius: 32px;
}
.desktop-nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
}
.nav-list {
display: flex;
align-items: center;
gap: 20px;
list-style: none;
margin: 0;
padding: 0 8px;
}
.nav-item {
position: relative;
}
.nav-link,
.nav-dropdown__button {
display: inline-flex;
align-items: center;
gap: 0.25rem;
height: 46px;
border: 0;
border-radius: 40px;
background: transparent;
color: var(--youwe-dark);
padding: 0 24px;
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 46px;
white-space: nowrap;
cursor: pointer;
}
/* The open page keeps a solid green pill, as production does. */
.nav-item.is-current > .nav-link,
.nav-item.is-current > .nav-dropdown__button {
background: var(--youwe-green);
}
/*
* Hover slides the arrow out to the right and a second copy in from the left.
* The same two-arrow trick drives the CTA and the case-card buttons.
*/
.nav-indicator,
.btn-arrow {
position: relative;
display: inline-block;
overflow: hidden;
width: 15px;
height: 13px;
}
/* Inside a pill button the glyph sits two pixels low, as production has it. */
.btn-arrow {
top: 2px;
}
.nav-indicator svg,
.nav-indicator::after,
.btn-arrow svg,
.btn-arrow::after {
position: absolute;
top: 1px;
left: 0;
width: 12px;
height: 11px;
}
.nav-indicator svg,
.btn-arrow svg {
transition: transform 0.15s ease-in, opacity 0.1s ease-in;
}
.nav-indicator::after,
.btn-arrow::after {
content: "";
left: -14px;
opacity: 0;
background: url("data:image/svg+xml;utf8,") no-repeat left/contain;
transition: left 0.35s ease-out, opacity 0.3s ease-out;
}
.nav-link:hover .nav-indicator svg,
.nav-dropdown__button:hover .nav-indicator svg,
.footer-dropdown__button:hover .nav-indicator svg,
.header-cta:hover .nav-indicator svg,
.btn-green:hover .btn-arrow svg,
.btn-dark:hover .btn-arrow svg,
.btn-on-green:hover .btn-arrow svg,
.service-card:hover .btn-arrow svg,
.case-card:hover .btn-arrow svg,
.case-slide:hover .btn-arrow svg {
transform: translateX(14px);
opacity: 0;
}
.nav-link:hover .nav-indicator::after,
.nav-dropdown__button:hover .nav-indicator::after,
.footer-dropdown__button:hover .nav-indicator::after,
.header-cta:hover .nav-indicator::after,
.btn-green:hover .btn-arrow::after,
.btn-dark:hover .btn-arrow::after,
.btn-on-green:hover .btn-arrow::after,
.service-card:hover .btn-arrow::after,
.case-card:hover .btn-arrow::after,
.case-slide:hover .btn-arrow::after {
left: 0;
opacity: 1;
}
/*
* The arrow that slides in is a background image, so its colour is baked into
* the file and has to be restated per colourway. The outgoing arrow is markup
* — btn_arrow() takes the same colour — and the two have to agree or the glyph
* changes colour mid-slide.
*/
.btn-dark .btn-arrow::after {
background-image: url("data:image/svg+xml;utf8,");
}
.btn-on-green .btn-arrow::after {
background-image: url("data:image/svg+xml;utf8,");
}
/* The two menu arrows point down; production rotates the whole indicator. */
.nav-dropdown__button .nav-indicator,
.footer-dropdown__button .nav-indicator {
transform: rotate(90deg);
}
/* Same arrow in white for the footer's dark strip. */
.footer-dropdown__button .nav-indicator::after {
background-image: url("data:image/svg+xml;utf8,");
}
.nav-chevron {
flex: none;
margin-top: 0.125rem;
transition: transform 0.2s ease;
}
[aria-expanded="true"] > .nav-chevron {
transform: rotate(180deg);
}
.footer-dropdown {
position: relative;
}
/*
* The Services panel is a 1440px-wide sheet pinned under the whole header, not
* a menu anchored to the nav item.
*/
.nav-dropdown__panel {
position: fixed;
left: 50%;
transform: translateX(-50%);
width: min(var(--site-width), 100vw);
display: none;
padding: 40px 32px 80px;
color: var(--youwe-dark);
background: #fff;
border-radius: 0 0 16px 16px;
z-index: 990;
}
.nav-dropdown__grid {
max-width: var(--site-width);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.nav-item--services.is-open .nav-dropdown__panel,
.nav-item--services:hover .nav-dropdown__panel {
display: block;
}
.nav-dropdown__column {
padding: 0 15px;
}
.nav-dropdown__title,
.footer-dropdown__title {
display: inline-block;
margin-bottom: 10px;
font-size: 1.25rem;
font-weight: 400;
}
.nav-dropdown__column ul,
.footer-dropdown__column ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-dropdown__column li,
.footer-dropdown__column li {
padding: 6px 0;
}
.nav-dropdown__column li a,
.footer-dropdown__column li a {
font-size: 1rem;
}
/*
* Every link inside the mega menu and the footer wipes a green underline in
* from the left on hover — production animates a background-size, so the bar
* grows rather than fades.
*/
.nav-dropdown__panel a,
.link-footer a,
.footer-dropdown__panel a {
display: inline-block;
width: auto;
background: linear-gradient(var(--youwe-green) 0 0) bottom left / var(--underline-width, 0%) 0.15em no-repeat;
text-decoration: none;
transition: background-size 0.5s;
}
.nav-dropdown__panel a:hover,
.link-footer a:hover,
.footer-dropdown__panel a:hover {
--underline-width: 100%;
}
.header-cta {
display: inline-flex;
align-items: center;
gap: 3px;
border-radius: 40px;
background: var(--youwe-green);
color: var(--youwe-dark);
padding: 8px 16px;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
/* Mobile: a "Menu" pill in place of the nav, matching production's toggle. */
.mobile-toggle {
display: inline-flex;
align-items: center;
gap: 0.75rem;
height: 40px;
padding: 0 15px;
border: 0;
border-radius: 32px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
color: var(--youwe-dark);
font-family: inherit;
font-size: 1rem;
font-weight: 400;
letter-spacing: -0.32px;
line-height: 40px;
cursor: pointer;
}
.mobile-toggle__icon {
position: relative;
width: 16px;
height: 16px;
}
.mobile-toggle__bar {
position: absolute;
left: 0;
top: 50%;
width: 16px;
height: 2px;
background: currentColor;
border-radius: 99px;
transition: transform 0.25s ease;
}
.mobile-toggle__bar--top {
transform: translateY(-50%);
}
.mobile-toggle__bar--bottom {
transform: translateY(-50%) rotate(90deg);
}
/* Open state: the plus rotates into a cross. */
.mobile-toggle.is-open .mobile-toggle__bar--top {
transform: translateY(-50%) rotate(45deg);
}
.mobile-toggle.is-open .mobile-toggle__bar--bottom {
transform: translateY(-50%) rotate(135deg);
}
.mobile-menu {
max-width: var(--site-width);
margin: 1rem auto 0;
padding: 1rem 1.5rem 1.5rem;
color: var(--youwe-dark);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border-radius: 16px;
}
.mobile-menu__service-toggle,
.mobile-menu__link {
width: 100%;
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border: 0;
background: transparent;
color: var(--youwe-dark);
font-family: inherit;
font-size: 1.125rem;
font-weight: 400;
text-align: left;
}
.mobile-menu__services {
display: grid;
gap: 1rem;
padding: 0.5rem 0 1rem 1rem;
}
.mobile-menu__service-title,
.mobile-menu__sub-link {
display: block;
}
.mobile-menu__service-title {
margin-bottom: 0.25rem;
font-weight: 500;
}
.mobile-menu__sub-link {
position: relative;
padding: 0.2rem 0 0.2rem 1.25rem;
font-size: 1rem;
}
.mobile-menu__sub-link::before {
content: "\2022";
position: absolute;
left: 0.5rem;
top: 0.2rem;
line-height: 1.5;
}
/*
* Footer.
*
* Production renders the footer as a rounded dark card inside the same 1440px
* container the rest of the page uses, not as a full-bleed band. The three
* bands are: the link row (rounded top corners, 1px #5B5A5A rule under it),
* the brand + address band, and a detached strip carrying only the socials.
*/
.site-footer {
color: #fff;
}
/*
* Elementor's boxed container has no gutter of its own — the inset comes from
* the 10px its columns carry — so the dark card runs the full 1440px and the
* bands below add that 10px back where production's columns sit.
*/
.site-footer__shell {
max-width: var(--site-width);
margin: 0 auto;
}
.site-footer__top {
background: var(--youwe-dark);
border-bottom: 1px solid #5b5a5a;
border-radius: 15px 15px 0 0;
padding: 15px 32px;
}
.site-footer__nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
}
.site-footer__nav-link,
.footer-dropdown__button {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 0;
background: transparent;
color: #fff;
padding: 10px 0;
font-family: inherit;
font-size: 1rem;
font-weight: 400;
cursor: pointer;
}
/* The open page keeps a green pill here too. */
.site-footer__nav-link.is-current,
.footer-dropdown.is-current .footer-dropdown__button {
background: var(--youwe-green);
color: var(--youwe-dark);
border-radius: 80px;
padding-inline: 12px;
}
.footer-dropdown__panel {
position: absolute;
top: 100%;
left: 0;
z-index: 20;
min-width: 400px;
display: none;
padding: 10px 15px 15px;
color: var(--youwe-dark);
background: #fff;
border-radius: 0 0 16px 16px;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);
}
.footer-dropdown.is-open .footer-dropdown__panel {
display: block;
}
.footer-dropdown__column {
padding: 6px 15px;
}
/* Production bullets the sub-items in the footer menu but not in the header. */
.footer-dropdown__column li a {
position: relative;
padding-left: 18px;
}
.footer-dropdown__column li a::before {
content: "\2022";
position: absolute;
left: 0;
top: 0;
line-height: 1.5;
}
.site-footer__main {
display: grid;
background: var(--youwe-dark);
}
.site-footer__brand {
padding: 50px 0 0 32px;
}
/* No gap: each word already carries 10px of letter-spacing, and production runs
"YOU" straight into "GROW" so the trailing letter-space is the only join. */
.footer-brand-line {
display: flex;
align-items: baseline;
}
/*
* Two rounded DIN faces here — "Rounded" for YOU and \WE, "DIN Next Rounded LT
* Pro" for GROW and the statements. Both are declared at the top of this file
* against the files mirrored from production's theme, so the wordmark is set in
* the same faces production uses rather than a fallback.
*/
.footer-brand-word {
font-family: "Rounded";
font-size: 42px;
font-weight: 800;
letter-spacing: 10px;
line-height: 1;
color: #fff;
}
.footer-brand-word--light {
font-family: "DIN Next Rounded LT Pro";
font-weight: 200;
}
.footer-brand-line--statements {
align-items: flex-start;
/* Production leaves 20px between the two lines of the lockup. */
margin-top: 20px;
}
/*
* The three statements occupy the same box; one is visible at a time and the
* next slides up from below. app.js adds `is-active` to the incoming span and
* `is-previous` to the outgoing one, which leaves immediately rather than
* animating out.
*/
.footer-statements {
position: relative;
flex: 1 1 auto;
height: 120px;
overflow: hidden;
}
.footer-statements span {
position: absolute;
top: 1px;
width: 100%;
text-align: left;
opacity: 0;
transform: translateY(100%);
transition: transform 0.8s ease, opacity 0.3s ease;
font-family: "DIN Next Rounded LT Pro";
font-size: 42px;
font-weight: 400;
line-height: 1;
letter-spacing: 10px;
text-transform: uppercase;
color: #fff;
}
.footer-statements span.is-active {
opacity: 1;
transform: translateY(0);
}
.footer-statements span.is-previous {
opacity: 0;
transform: translateY(0);
transition: none;
}
.footer-statements span:nth-child(1) {
color: var(--youwe-green);
}
.footer-statements span:nth-child(2) {
color: var(--youwe-teal);
}
.footer-statements span:nth-child(3) {
color: var(--youwe-purple);
}
.site-footer__columns {
display: grid;
padding: 64px 0 40px;
}
/* The 10px a side is Elementor's default column padding, which is all that
separates these three columns on production. */
.site-footer__columns > section {
padding: 0 10px;
}
/*
* "Soehne Bush" is the family production asks for in the footer and never
* loads; as with the wordmark above, naming it keeps both sites on the same
* fallback instead of putting staging on Fira Sans where production is not.
*/
.site-footer__columns h2 {
margin: 0 0 30px;
font-family: "Soehne Bush", sans-serif;
font-size: 0.75rem;
font-weight: 400;
text-transform: uppercase;
color: #fff;
}
.site-footer__columns ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 16px;
}
.site-footer__columns li,
.site-footer__columns a,
.site-footer__nav-link,
.footer-dropdown__button,
.footer-dropdown__panel a,
.footer-dropdown__title {
font-family: "Soehne Bush", sans-serif;
}
.site-footer__columns li,
.site-footer__columns a {
color: #fff;
font-size: 1rem;
}
/*
* Production keeps a Privatlivspolitik / Cookiepolitik pair in the left half of
* this strip but hides it (`.footer-hidden div { display: none }`), so the
* strip renders as socials alone, right aligned. Both links are still reachable
* from the Genveje column above.
*/
.site-footer__bottom {
display: flex;
justify-content: flex-end;
background: var(--youwe-dark);
border-radius: 0 0 15px 15px;
padding: 16px 32px 24px;
margin-bottom: 24px;
}
.site-footer__socials {
display: flex;
align-items: center;
gap: 1rem;
}
/* Production switches the underline wipe off for the social icons. */
.site-footer__socials a {
display: inline-flex;
color: #fff;
background: none;
}
.site-footer__socials svg {
width: 24px;
height: 24px;
}
.page-shell {
max-width: var(--site-width);
margin: 0 auto;
padding: 9rem 1.5rem 5rem;
}
.page-shell h1 {
margin: 0 0 1rem;
font-size: var(--h1-page);
line-height: 1.1;
}
.page-shell p {
max-width: 42rem;
color: #4b5563;
font-size: 1.1rem;
line-height: 1.7;
}
.page-shell--dark {
max-width: none;
min-height: 34rem;
padding: 10rem 1.5rem 7rem;
background: var(--youwe-dark);
color: #fff;
}
.page-shell--dark > div {
max-width: var(--site-width);
margin: 0 auto;
}
.page-shell--dark p {
color: rgba(255, 255, 255, 0.72);
}
.page-shell__accent {
color: var(--youwe-green);
}
.container {
max-width: var(--site-width);
margin: 0 auto;
padding-inline: 1.5rem;
}
.two-column {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
/*
* The homepage's split rows are Elementor columns at their default gap on
* production, which is 10px of padding a side — a much tighter gutter than the
* rest of the site's two-column rows.
*/
.home-intro > .two-column,
.two-column.ai-readiness-section__body,
.two-column.podcast-section__body {
gap: 20px;
}
.eyebrow {
margin: 0 0 1.5rem;
color: #9ca3af;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/*
* The large left-aligned statements production uses to open a section:
* Fira Sans 80px, weight 500 for page/section titles and 600 for the two
* statements on the homepage, in the body colour.
*/
.display-heading {
max-width: 80%;
margin: 0;
font-size: var(--h2-display);
font-weight: 600;
/* Production sets every display line solid — 80px type on an 80px line. */
line-height: 1;
color: var(--youwe-dark);
text-align: start;
}
/*
* The same 80px line at production's other weight. "Vores ekspertiseområder"
* is the only display heading set in 600 and clamped to 80% of its column;
* the AI, podcast and client-logo headings are 500 and run the full width,
* and they step down to 50px rather than 48px on tablets.
*/
.display-heading--regular {
max-width: 100%;
font-size: var(--h2-podcast);
font-weight: 500;
}
/*
* Buttons.
*
* Production's is a flat pill: Fira Sans 15px/400 on a 40px radius with no
* hover colour change — only the arrow animates, which is the treatment set up
* under .btn-arrow above and shared with the nav links and the cards.
*
* Three colourways, one shape. Green is the default and carries the site; dark
* is the one that sits beside it on a black band; and on-green is the inverse
* the closing band of /ai-hos-youwe needs, where the page itself is green. They
* are declared together so a button added later cannot drift: the only thing a
* colourway sets is colour.
*/
.btn-green,
.btn-dark,
.btn-on-green {
display: inline-flex;
align-items: center;
gap: 3px;
border: 0;
border-radius: 40px;
padding: 10px 20px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
cursor: pointer;
}
.btn-green {
background: var(--youwe-green);
color: var(--youwe-dark);
}
/* An inset ring rather than a border: it is the one colourway production
outlines, and a real border would make it a pixel taller and wider than the
green pill standing next to it. */
.btn-dark {
background: var(--youwe-dark);
box-shadow: inset 0 0 0 1px #454545;
color: #e2e2e2;
}
.btn-on-green {
background: var(--youwe-dark);
color: var(--youwe-green);
font-weight: 700;
}
/*
* The ring-particle field.
*
* Carried by the two black heroes — the homepage's and /ai-hos-youwe's — which
* is why the tuning lives on a class of its own rather than on either of them:
* both put the same canvas inside the same kind of band, and the field has to
* be the same field.
*
* Every custom property below is read every frame by RingParticlesCanvas in
* public/assets/js/app.js, and every value is the default baked into
* production's ringparticles_v2.js. Production drives them from Elementor,
* which does not survive into the delivered HTML, so this is the one place to
* tune the animation. --ring-x / --ring-y are written back by the script as
* the field follows the pointer.
*/
.hero-particles {
position: relative;
overflow: hidden;
--ring-radius-min: 150;
--ring-radius-max: 250;
--ring-thickness: 900;
--particle-count: 100;
--particle-rows: 25;
--particle-size: 2;
--particle-min-alpha: 1;
--particle-max-alpha: 1;
--fade-easing: ease-in;
--seed: 200;
--gradient-duration: 8000;
--gradient-saturation: 100;
--gradient-lightness: 75;
--ring-x: 50;
--ring-y: 50;
}
.home-hero {
min-height: 685px;
display: grid;
place-items: center;
background: #000;
color: #fff;
padding: 7rem 0 5rem;
}
.hero-dots {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* The canvas is painted into the band behind everything else in it, so the
content needs a stacking context of its own to sit on top of. */
.hero-particles > .container {
position: relative;
z-index: 1;
}
.home-hero__inner {
position: relative;
z-index: 1;
text-align: center;
}
/*
* The hero lockup is Fira Sans 80px weight 500, all four lines the same white —
* production does not tint the last line green. The "Kontakt os i dag" button
* below it is present in the markup but clipped to zero width on production
* (`max-width: 0` plus `overflow: hidden` on the widget), so it renders as a
* headline-only hero. See `.home-hero .btn-green` below.
*/
.home-hero h1 {
margin: 0;
font-size: var(--h1-hero);
line-height: 1.1;
font-weight: 500;
}
.home-hero .btn-green {
display: none;
}
.home-intro {
position: relative;
overflow: hidden;
background: var(--youwe-muted);
padding: 80px 0 0;
}
/*
* The pale wedge that grows down the left of the section as it scrolls into
* view. app.js adds `is-visible` once the section intersects.
*
* The transition list is production's verbatim — `transform` and `height`, not
* `left` and `height` — and the distinction is the whole movement. Production
* animates a property the `animate` state never changes, so the wedge's `left`
* snaps from -60% to -4% on the first frame and only its height eases open over
* the seven seconds. Transitioning `left` instead had it sliding in sideways,
* which is a motion production does not have.
*/
.home-intro::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 60%;
height: 0;
background: #e5ebf0;
transform: skewX(20deg);
transform-origin: top left;
transition: transform 7s ease, height 7s ease;
}
.home-intro.is-visible::before {
left: -4%;
height: 100%;
}
.home-intro .container {
position: relative;
z-index: 1;
}
/*
* Production's heading roles on the homepage: "Hvem er vi" is a 24px/400
* sub-heading, not a display size, and the podcast heading is a full 80px
* display line.
*/
.home-intro h2 {
margin: 0;
color: var(--youwe-dark);
font-size: var(--h2-intro);
line-height: 1.25;
font-weight: 400;
}
.home-intro p {
margin: 0 0 30px;
color: var(--youwe-dark);
font-size: var(--text-lead);
font-weight: 400;
line-height: 1.5;
}
.home-intro__cases-cta,
.home-intro__mosaic {
padding-top: 40px;
}
/* A display lockup rather than a section heading — production sizes it apart. */
.home-intro__cases-cta h2 {
max-width: 55.674%;
margin: 0;
font-size: var(--h2-display);
font-weight: 500;
line-height: 1.05;
}
.home-intro__cases-cta .btn-green {
margin-top: 40px;
}
/*
* Production opens this block 80px below the case mosaic, then puts another
* 50px above and below the heading itself; the 100px at the foot is the white
* spacer it sets between the service cards and the AI block.
*/
.services-section {
padding: 80px 0 100px;
background: #fff;
}
.services-section .display-heading {
margin: 50px 0;
}
/*
* The AI block and the podcast block both open with a full-width display line
* and then split 50/50. Production's columns are Elementor's default gap, so
* the space between them is 20px rather than the wider gutter the rest of the
* site's two-column rows use.
*
* Production builds the AI band out of four stacked Elementor sections: a 70px
* spacer, the heading (padded 10px inside its own section), the split row, and
* a second 70px spacer. Collapsed here into one section that is 80px above the
* heading and 110px below the last row.
*/
.ai-readiness-section {
padding: 80px 0 110px;
background: var(--youwe-muted);
}
/* Production leaves 30px between the heading's section and the row under it. */
.ai-readiness-section__body {
margin-top: 30px;
}
.ai-readiness-section__media img {
display: block;
width: 100%;
border-radius: 16px;
}
/* The copy column carries production's 20px lead-in and 30px of space under
it; the media column beside it is not offset by either. */
.ai-readiness-section__body > div:last-child,
.podcast-section__body > div:first-child {
margin-top: 20px;
padding-bottom: 30px;
}
.ai-readiness-section p,
.podcast-section p,
.podcast-section li {
margin: 0 0 0.9rem;
color: var(--youwe-dark);
font-size: var(--text-lead);
font-weight: 400;
line-height: 1.5;
}
/* White on production, not the page tint — the muted band ends above it. */
.podcast-section {
padding: 160px 0;
background: #fff;
}
/*
* Service cards.
*
* Production stacks the copy over a dimmed 380px image rather than beside it:
* the title and description sit absolutely at the top-left, the image is
* rounded and darkened to 60%, and a round green arrow floats bottom-right.
*/
.service-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.service-card {
position: relative;
display: block;
overflow: hidden;
border-radius: 16px;
}
.service-card__body {
position: absolute;
inset: 0 0 auto;
z-index: 5;
padding: 20px;
color: #fff;
}
.service-card h2 {
margin: 0;
color: #fff;
font-size: 1.875rem;
line-height: 1.2;
font-weight: 500;
}
.service-card p {
margin: 20px 0 0;
color: #fff;
font-size: var(--text-body);
font-weight: 400;
line-height: 1.5;
}
/* `display: block` matters: as an inline box the image leaves a 7px descender
gap under it, which the rounded card then shows as a dark band along the
bottom edge — and, while the image scales on hover, as a border around it. */
.service-card img {
display: block;
width: 100%;
height: 380px;
object-fit: cover;
object-position: center;
filter: brightness(60%);
transition: transform 0.3s ease;
}
.service-card:hover img,
.case-card:hover img {
transform: scale(1.1);
}
/* The round green arrow shared by the service cards and the case mosaic. */
.service-card__arrow,
.case-card__arrow {
position: absolute;
right: 33px;
bottom: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 100px;
background: var(--youwe-green);
}
.case-card__arrow {
right: 23px;
bottom: 25px;
}
/*
* Case mosaic.
*
* Production gives each slot a fixed image height and lifts the right-hand
* column 220px so the two columns interlock; the offsets collapse under 768px,
* where every card becomes 343px tall and the columns stack.
*/
.case-collage,
.case-collage__column,
.case-collage__pair {
display: grid;
row-gap: 20px;
column-gap: 40px;
}
/* Slots keep their own image height on production — a short card beside a tall
one is not stretched to match it. */
.case-collage__pair {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
/*
* No fill behind the image. The card is only ever as large as the image it
* clips, so a colour here has nothing to cover — it only surfaces as a dark
* hairline along the rounded clip while the image scales on hover.
*/
.case-card {
position: relative;
display: block;
overflow: hidden;
border-radius: 16px;
}
.case-card img {
display: block;
width: 100%;
height: 343px;
object-fit: cover;
object-position: center;
filter: brightness(80%);
transition: transform 1s ease;
}
/*
* The title block sits at the top of the card, over the image — production
* does not use a bottom gradient here.
*/
.case-card__overlay {
position: absolute;
inset: 0 0 auto;
z-index: 5;
padding: 20px;
color: #fff;
}
.case-card__overlay h2,
.case-card__overlay h3,
.case-card__overlay p {
margin: 0;
}
.case-card__overlay h2,
.case-card__overlay h3 {
font-size: 2.25rem;
line-height: 1.1;
font-weight: 500;
}
.case-card__overlay p {
max-width: 90%;
margin-top: 0.5rem;
color: #fff;
font-size: var(--text-sm);
font-weight: 400;
line-height: 1.4;
}
.podcast-section__credits li {
margin-bottom: 0.5rem;
}
/* The media column starts 15px below the copy beside it on production. */
.podcast-section__body > div:last-child {
margin-top: 15px;
}
.podcast-section__image {
width: 100%;
margin-bottom: 20px;
border-radius: 16px;
object-fit: cover;
}
/*
* Client logos.
*
* Production stands them still in a four-across wall — three rows of four,
* every logo dimmed to 60% and fully desaturated, with no hover state and no
* marquee. The heading sits directly on top of the wall; the breathing room
* under it is the cells' own padding, not a margin.
*/
.logo-section {
padding: 120px 0;
background: var(--youwe-muted);
}
.logo-section .display-heading {
margin-bottom: 5px;
}
.logo-wall {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.logo-wall__item {
display: grid;
place-items: center;
padding: 10px;
}
/* Production pads the first cell wider than the rest, which sets the height
of the top row. */
.logo-wall__item:first-child {
padding: 30px;
}
.logo-wall__item img {
width: auto;
opacity: 0.6;
filter: grayscale(100%);
}
/*
* The collage above the footer.
*
* Two unequal columns, 42% then 58%, that interlock: the left one starts 350px
* lower than the right and runs past its foot, so the two halves never line up.
* The left column hangs its images off its right edge, the right column off its
* left, and each image keeps the size it was uploaded at rather than filling
* the column — which is what leaves the gaps the block is built around.
*/
.footer-gallery {
overflow: hidden;
}
/* `auto` on the sides, not 0: this element is also a .container, and a margin
shorthand here replaces the `0 auto` that centres every other band on the
page — which left the whole collage hugging the left edge above 1440px. */
.footer-gallery__inner {
display: flex;
margin: 120px auto 40px;
padding-inline: 0;
}
.footer-gallery__column {
display: flex;
flex-direction: column;
flex: 0 0 50%;
padding: 0 1px 0 0;
}
.footer-gallery__column--right {
padding: 0 0 0 1px;
}
.footer-gallery__item {
width: 100%;
}
.footer-gallery img {
display: block;
width: 100%;
border-radius: 4px;
}
/* ==========================================================================
404
========================================================================== */
.error-page {
padding: 150px 0 100px;
background: var(--youwe-muted);
}
.error-page h1 {
margin: 0 0 30px;
font-size: var(--h1-page);
line-height: 1.1;
font-weight: 500;
}
.error-page__face {
margin-block: 19px;
text-align: center;
}
/*
* The "404" face.
*
* The 4s and the 0 are drawn in place and then animated into eyes and a nose;
* the mouth is stroked on afterwards. Once that intro has run, the eye lids and
* pupils keep looping so the face looks from side to side and blinks. Lifted
* from production, with its Sass nesting written out and the animation
* suppressed for a reduced-motion preference — which production does not do.
*/
.face {
display: inline-block;
width: 12em;
height: auto;
}
.face__eyes,
.face__eye-lid,
.face__mouth-left,
.face__mouth-right,
.face__nose,
.face__pupil {
animation: face-eyes 1s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.face__eye-lid,
.face__pupil {
animation-duration: 4s;
animation-delay: 1.3s;
animation-iteration-count: infinite;
}
.face__eye-lid {
animation-name: face-eye-lid;
}
.face__mouth-left,
.face__mouth-right {
animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
.face__mouth-left {
animation-name: face-mouth-left;
}
.face__mouth-right {
animation-name: face-mouth-right;
}
.face__nose {
animation-name: face-nose;
}
.face__pupil {
animation-name: face-pupil;
}
@keyframes face-eyes {
from {
transform: translateY(112.5px);
}
to {
transform: translateY(15px);
}
}
@keyframes face-eye-lid {
from,
40%,
45%,
to {
transform: translateY(0);
}
42.5% {
transform: translateY(17.5px);
}
}
@keyframes face-pupil {
from,
37.5%,
40%,
45%,
87.5%,
to {
stroke-dashoffset: 0;
transform: translate(0, 0);
}
12.5%,
25%,
62.5%,
75% {
stroke-dashoffset: 0;
transform: translate(-35px, 0);
}
42.5% {
stroke-dashoffset: 35;
transform: translate(0, 17.5px);
}
}
@keyframes face-mouth-left {
from,
50% {
stroke-dashoffset: -102;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes face-mouth-right {
from,
50% {
stroke-dashoffset: 102;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes face-nose {
from {
transform: translate(0, 0);
}
to {
transform: translate(0, 22.5px);
}
}
/* The intro still has to run, or the face never assembles — only the endless
blinking and the side-to-side look are dropped. */
@media (prefers-reduced-motion: reduce) {
.face__eye-lid,
.face__pupil {
animation-iteration-count: 1;
}
}
.page-title {
padding: 8rem 0 3rem;
background: #fff;
}
/* Every page title on production is Fira Sans 80px weight 500. */
.page-title h1 {
margin: 0;
font-size: var(--h1-page);
line-height: 1.1;
font-weight: 500;
}
.cases-listing {
padding: 0 0 6rem;
background: #fff;
}
/*
* The tag filters.
*
* Production's pills are outlines, not fills: 16px Fira Sans in the body
* colour on a transparent ground with a 1px #141414 hairline and a 56px
* radius, 12px apart. Hovering swaps the hairline to green and the selected
* one fills green — neither ever inverts to black.
*/
.case-filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 2.5rem;
}
.case-filter {
border: 1px solid var(--youwe-dark);
border-radius: 56px;
background: transparent;
color: var(--youwe-dark);
padding: 6px 16px;
font-family: inherit;
font-size: 1rem;
font-weight: 400;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.case-filter:hover {
border-color: var(--youwe-green);
}
.case-filter.is-active {
background: var(--youwe-green);
border-color: var(--youwe-green);
}
/*
* The /cases mosaic.
*
* Production's loop grid is four columns wide, not three, and its cards are not
* all one column: an "alternate template" repeater makes the first card of each
* page two columns, the fourth four and the sixth two. 2 + 1 + 1 / 4 / 1 + 2 + 1
* is what fills its three rows, and it is why the listing does not read as a
* square grid. `data-span` carries each card's width; the spans are declared per
* breakpoint rather than clamped with min(), so a four-column card folds to the
* full width of the two-column tablet grid instead of overflowing it.
*/
.case-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
/*
* The /cases listing card: image on top, info panel underneath.
*
* The panel is white on the one-column card, which on this white page means the
* title, excerpt and tags read as bare text below the image. Only the wider
* cards put it on the page tint — see the modifiers below.
*/
.case-listing-card {
display: block;
color: var(--youwe-dark);
}
.case-listing-card__media {
height: 372px;
overflow: hidden;
border-radius: 16px;
}
/* Same zoom the mosaic and the service cards use, over production's slower
0.8s curve for this grid. */
.case-listing-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 12px;
transition: transform 0.8s ease, opacity 0.3s ease;
}
.case-listing-card:hover .case-listing-card__media img {
transform: scale(1.1);
}
/* Production fixes the panel at 212px and spaces its contents apart inside it,
which is what pins the tag row to the bottom edge whatever the title wraps
to. min-height rather than height so a longer Danish title cannot clip. */
.case-listing-card__body {
position: relative;
display: flex;
flex-direction: column;
min-height: 212px;
margin-top: 10px;
padding: 25px 16px 24px 24px;
background: #fff;
border-radius: 12px;
}
.case-listing-card__body h2 {
display: -webkit-box;
overflow: hidden;
margin: 2px 0 5px;
padding-right: 45px;
font-size: 1.5rem;
font-weight: 400;
color: var(--youwe-dark);
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.case-listing-card__arrow {
position: absolute;
top: 23px;
right: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 100px;
background: var(--youwe-green);
}
/* The shared arrow mark is drawn at 20x16; production scales it down to 15x12
inside these circles, on the wide card as well as the narrow one. */
.case-listing-card__arrow svg {
width: 15px;
height: 12px;
}
.case-listing-card__excerpt {
display: -webkit-box;
overflow: hidden;
height: 70px;
margin: 20px 0 10px;
font-size: 1rem;
font-weight: 400;
color: #141414a6;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.case-listing-card__tags {
display: flex;
gap: 4px;
overflow-x: auto;
list-style: none;
margin: auto 0 0;
padding: 0;
}
.case-listing-card__tags li {
padding: 6px 8px;
border: 1px solid var(--youwe-dark);
border-radius: 80px;
font-size: 0.75rem;
font-weight: 400;
white-space: nowrap;
}
/*
* The two-column card.
*
* Structurally the one-column card with a wider image; the only thing that
* changes is the panel, which production puts on the page tint here so the
* wider cards read as blocks rather than as loose text.
*/
.case-listing-card--medium .case-listing-card__body {
background: #f9f9f8;
}
/*
* The four-column card.
*
* Production turns this one on its side: a 477px image filling the left half
* and the panel — same tint as the two-column card — filling the right, with
* the title a size up and the tag row held at the bottom of the panel. The
* split only exists from 768px up; below that it stacks like every other card.
*/
.case-listing-card--large .case-listing-card__body {
background: #f9f9f8;
}
@media (min-width: 768px) {
.case-listing-card--large {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
align-items: stretch;
}
.case-listing-card--large .case-listing-card__media {
height: 477px;
border-radius: 15px;
}
.case-listing-card--large .case-listing-card__body {
min-height: 477px;
margin-top: 0;
padding: 4px 24px 24px;
}
.case-listing-card--large .case-listing-card__body h2 {
margin: 10px 0 5px;
font-size: 2rem;
line-height: 2.5rem;
}
.case-listing-card--large .case-listing-card__arrow {
top: 8px;
width: 40px;
height: 40px;
}
.case-listing-card--large .case-listing-card__excerpt {
margin: 6px 0 5px;
}
}
.cases-empty {
margin-top: 2rem;
color: var(--youwe-dark);
}
/*
* Pagination.
*
* Production's control is a round outlined arrow at each end and the page
* numbers between them, the inactive ones at 40% opacity and the current one
* green over a green underline. An end with nowhere to go keeps the circle and
* stays at 40%, which is why the disabled state is a colour change and not a
* missing element.
*/
.case-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 50px;
font-size: 1rem;
}
.case-pagination__page {
color: var(--youwe-dark);
opacity: 0.4;
text-decoration: none;
padding-bottom: 3px;
border-bottom: 2px solid transparent;
}
.case-pagination__page:hover {
opacity: 1;
}
.case-pagination__page.is-current {
color: var(--youwe-green);
border-bottom-color: var(--youwe-green);
opacity: 1;
}
.case-pagination__arrow {
width: 36px;
height: 36px;
border: 1px solid var(--youwe-dark);
border-radius: 50px;
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
transition: background-color 0.5s ease, border-color 0.5s ease;
}
.case-pagination__arrow--prev {
margin-right: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='11' viewBox='0 0 12 11' fill='none'%3E%3Cpath d='M0.147706 5.85354L4.64771 10.3535C4.74153 10.4474 4.86878 10.5001 5.00146 10.5001C5.13415 10.5001 5.26139 10.4474 5.35521 10.3535C5.44903 10.2597 5.50173 10.1325 5.50173 9.99979C5.50173 9.86711 5.44903 9.73986 5.35521 9.64604L1.70836 5.99979H11.5015C11.6341 5.99979 11.7613 5.94711 11.855 5.85334C11.9488 5.75958 12.0015 5.6324 12.0015 5.49979C12.0015 5.36718 11.9488 5.24 11.855 5.14624C11.7613 5.05247 11.6341 4.99979 11.5015 4.99979H1.70836L5.35521 1.35354C5.44903 1.25972 5.50173 1.13247 5.50173 0.99979C5.50173 0.867108 5.44903 0.73986 5.35521 0.64604C5.26139 0.552219 5.13415 0.499512 5.00146 0.499512C4.86878 0.499512 4.74153 0.552219 4.64771 0.64604L0.147706 5.14604C0.101239 5.19248 0.0643196 5.24762 0.0391877 5.30832C0.0140557 5.36902 0.00109863 5.43408 0.00109863 5.49979C0.00109863 5.5655 0.0140557 5.63056 0.0391877 5.69126C0.0643196 5.75196 0.101239 5.8071 0.147706 5.85354Z' fill='%23141414'/%3E%3C/svg%3E");
}
.case-pagination__arrow--next {
margin-left: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='11' viewBox='0 0 12 11' fill='none'%3E%3Cpath d='M11.8545 5.85354L7.35454 10.3535C7.26072 10.4474 7.13348 10.5001 7.00079 10.5001C6.86811 10.5001 6.74086 10.4474 6.64704 10.3535C6.55322 10.2597 6.50052 10.1325 6.50052 9.99979C6.50052 9.86711 6.55322 9.73986 6.64704 9.64604L10.2939 5.99979H0.500794C0.368185 5.99979 0.241008 5.94711 0.14724 5.85334C0.053472 5.75958 0.000793457 5.6324 0.000793457 5.49979C0.000793457 5.36718 0.053472 5.24 0.14724 5.14624C0.241008 5.05247 0.368185 4.99979 0.500794 4.99979H10.2939L6.64704 1.35354C6.55322 1.25972 6.50052 1.13247 6.50052 0.99979C6.50052 0.867108 6.55322 0.73986 6.64704 0.64604C6.74086 0.552219 6.86811 0.499512 7.00079 0.499512C7.13348 0.499512 7.26072 0.552219 7.35454 0.64604L11.8545 5.14604C11.901 5.19248 11.9379 5.24762 11.9631 5.30832C11.9882 5.36902 12.0012 5.43408 12.0012 5.49979C12.0012 5.5655 11.9882 5.63056 11.9631 5.69126C11.9379 5.75196 11.901 5.8071 11.8545 5.85354Z' fill='%23141414'/%3E%3C/svg%3E");
}
.case-pagination__arrow.is-disabled {
opacity: 0.4;
}
a.case-pagination__arrow:hover {
background-color: var(--youwe-green);
border-color: var(--youwe-green);
}
.contact-page {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
}
.contact-page__info,
.contact-page__form {
padding: 8rem 1.5rem 3rem;
}
.contact-page__info {
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--youwe-dark);
color: #fff;
}
.contact-page__info h1 {
margin: 0 0 1.5rem;
font-size: var(--h1-page);
line-height: 1.25;
font-weight: 800;
}
.contact-page__info h1 span {
color: var(--youwe-green);
}
.contact-page__intro,
.contact-page__direct,
.feature-list p {
color: rgba(255, 255, 255, 0.72);
}
.contact-page__intro {
max-width: 36rem;
font-size: 1rem;
line-height: 1.7;
}
.feature-list {
list-style: none;
padding: 0;
margin: 3rem 0 0;
display: grid;
gap: 1.5rem;
}
.feature-list li {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.feature-list__check {
width: 1.35rem;
height: 1.35rem;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 999px;
background: var(--youwe-green);
color: var(--youwe-dark);
font-size: 0.8rem;
font-weight: 800;
}
.feature-list strong {
display: block;
color: #fff;
}
.feature-list p {
margin: 0.25rem 0 0;
font-size: 0.9rem;
line-height: 1.6;
}
.contact-page__direct {
margin: 3rem 0 0;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.contact-page__direct a {
color: #fff;
text-decoration: underline;
}
.contact-page__direct a:hover {
color: var(--youwe-green);
}
.contact-page__form {
display: flex;
align-items: flex-start;
justify-content: center;
background: #fff;
}
.hubspot-form {
width: 100%;
max-width: 34rem;
}
/*
* The hero band above a page banner.
*
* Production paints the band in the page tint and sets the title at 80/500 on
* a single line — not the 800 weight this carried, which read as a different
* typeface next to production's.
*/
.image-hero {
background: var(--youwe-muted);
padding-top: 160px;
}
.image-hero h1 {
margin: 0 0 1.375rem;
font-size: var(--h1-page);
line-height: 1;
font-weight: 500;
}
.image-hero > img {
display: block;
width: 100%;
max-height: 38rem;
object-fit: cover;
}
/*
* Karriere, Om YouWe and the job page share one banner treatment: the image
* keeps its own width rather than being stretched edge to edge, takes a 16px
* radius, and is pulled down out of the tinted band so it straddles the
* boundary with the white section below. `.image-hero--banner + .content-section`
* puts that section back below the overhang.
*
* flow-root, because that pull is a negative bottom margin on the section's
* last child: left to collapse through, it would move the section's own bottom
* margin instead of ending the tinted band above the image.
*/
.image-hero--banner {
display: flow-root;
}
.image-hero--banner > img {
width: auto;
max-width: calc(100% - 3rem);
max-height: none;
margin: 0 auto -100px;
border-radius: 16px;
}
.image-hero--banner + .content-section {
margin-top: 120px;
}
.content-section {
padding: 5rem 0;
background: #fff;
}
.content-section--muted {
background: var(--youwe-muted);
}
.content-section h2 {
margin: 0 0 1.5rem;
color: var(--youwe-dark);
font-size: var(--h2-section);
line-height: 1.15;
font-weight: 500;
}
/*
* A step below a section heading — the Klaus contact block and lead-ins such
* as "Vi skalerer forretninger gennem IT." Production sizes these smaller than
* the section headings they sit beside.
*/
.content-section h2.heading-sub,
.content-section h3.heading-sub {
font-size: var(--h2-sub);
line-height: 1.25;
}
/*
* The lead-in that sits opposite the body column under a banner hero — "Bliv
* en del af holdet", "Hvem vi er". Production keeps these at 24/400 at every
* width; they are labels for the paragraph beside them, not section headings,
* and rendering them at the 56px section size was the loudest type difference
* on those pages.
*/
.content-section h2.heading-intro {
margin: 0;
font-size: 1.5rem;
font-weight: 400;
line-height: 1;
}
/* Production sets the copy beside that lead-in a step tighter than the rest of
the body text, and a size smaller than it below 768px. */
.content-section h2.heading-intro + p {
line-height: 1.5;
}
.content-section h3 {
margin: 0 0 0.5rem;
color: var(--youwe-dark);
font-size: var(--h3-card);
font-weight: 400;
}
.content-section p,
.content-section a {
color: var(--youwe-dark);
font-size: var(--text-body);
line-height: 1.6;
}
.content-section a {
font-weight: 500;
}
.content-section a:hover {
text-decoration: underline;
}
.content-section__media-row {
align-items: center;
}
.content-section__media-row > img {
width: 100%;
object-fit: cover;
}
.content-section__media-row--reverse > img {
order: 2;
}
/* The AI cases' contact block adds a call to action below the details. */
.contact-block__cta {
margin-top: 1.5rem;
}
/*
* The four service pages.
*
* Production runs one Elementor template over /strategisk-radgivning,
* /styring-af-it-projekter, /implementering-af-it-systemer and
* /skraeddersyede-it-losninger; see src/pages/_service-detail.php. The hero is
* the same shape as a case page's — tinted band, oversized title, lead image
* hanging over the band below — so `flow-root` and the stacking context are
* load-bearing here for the same two reasons they are on .case-hero.
*/
.service-hero {
position: relative;
z-index: 1;
display: flow-root;
margin-bottom: 3.75rem;
padding: 6.25rem 0 3.75rem;
background: var(--youwe-muted);
}
.service-hero__title {
margin: 0 0 1.875rem;
font-size: var(--h1-page);
line-height: 1;
font-weight: 500;
}
/* The intro is the right-hand half of a row whose left half production leaves
empty, not a paragraph under the title. */
.service-hero__intro {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.service-hero__intro p {
margin: 0 0 1.875rem;
font-size: var(--text-body);
line-height: 1.6;
}
.service-hero__media img {
display: block;
width: 100%;
border-radius: 16px;
}
/*
* A content band between the hero and the contact block.
*
* Production sets each section's padding individually and alternates three
* backgrounds down the page rather than tinting every other band, so the
* spacing modifiers below carry its pixel values by name. Their base values are
* production's scaled to 40% for phones, where a 150px band edge is most of a
* screen; the ≥768px block restates them at full size.
*/
.service-band {
padding: 3.75rem 0;
background: #fff;
}
.service-band--tint {
background: var(--youwe-muted);
}
.service-band--soft {
background: #f9f9f8;
}
.service-band--top-0 {
padding-top: 0;
}
.service-band--top-60 {
padding-top: 1.5rem;
}
.service-band--top-120 {
padding-top: 3rem;
}
.service-band--top-150 {
padding-top: 3.75rem;
}
.service-band--bottom-0 {
padding-bottom: 0;
}
.service-band--bottom-50 {
padding-bottom: 1.25rem;
}
.service-band--bottom-80 {
padding-bottom: 2rem;
}
.service-band--bottom-120 {
padding-bottom: 3rem;
}
.service-band--bottom-150 {
padding-bottom: 3.75rem;
}
.service-band--after-60 {
margin-bottom: 1.5rem;
}
.service-band--after-120 {
margin-bottom: 3rem;
}
/* An image beside its copy. The "Vil du vide mere?" cards put the image first;
the rows that close a topic put it second. */
.service-split {
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: 20px;
}
.service-split__media img {
display: block;
width: 100%;
border-radius: 12px;
}
.service-split__body h2 {
margin: 0 0 1.875rem;
font-size: var(--h2-section);
line-height: 1.1;
font-weight: 500;
}
.service-split__body p {
margin: 0 0 1.875rem;
font-size: var(--text-body);
line-height: 1.6;
}
.service-split__body > :last-child {
margin-bottom: 0;
}
.service-split__body .btn-green {
margin-top: 0.9375rem;
}
.narrow-content {
max-width: 48rem;
}
/*
* The soft card production wraps its "Det her står vi på" sections in: a
* #F9F9F8 panel inset in the page grid at a 16px radius, lifted 100px off the
* section above it. Below 768px production drops the lift and nearly all the
* padding, so the panel runs to the viewport edges.
*/
.content-section--panel {
padding: 0;
background: #fff;
}
.panel {
max-width: var(--site-width);
margin: 0 auto;
padding: 0.625rem 1.5rem;
background: #f9f9f8;
border-radius: 16px;
}
.panel > h2 {
margin: 0;
font-size: var(--h2-section);
font-weight: 500;
line-height: 1;
}
/* Production steps this heading through 36 / 40 / 56 rather than 36 / 56. */
@media (min-width: 768px) and (max-width: 1024px) {
.panel > h2 {
font-size: 2.5rem;
}
}
.value-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 1.25rem;
}
/*
* Production's value card is a near-opaque white tile that goes fully opaque
* on hover, with the icon in a lime rounded square above a 32/400 title and
* 16/300 body. The 200px floor under the body is what holds the three tiles to
* one height when their copy differs in length.
*/
.value-card {
display: flex;
flex-direction: column;
padding: 24px;
background: rgba(255, 255, 255, 0.973);
border-radius: 12px;
transition: background 0.7s;
}
.value-card:hover {
background: #fff;
}
.value-card img {
width: 3.5rem;
height: 3.5rem;
padding: 5px;
background: var(--youwe-green);
border-radius: 7px;
object-fit: contain;
}
.value-card h3 {
margin: 1.5rem 0 1rem;
font-size: var(--h3-card);
font-weight: 400;
line-height: 1.2;
}
.value-card p {
margin: 0;
min-height: 200px;
font-size: 1rem;
font-weight: 300;
line-height: 22px;
white-space: normal;
}
/* /om-youwe's copy runs longer than /karriere's and production sets its floor
twenty pixels higher to match. */
.value-grid--tall .value-card p {
min-height: 220px;
}
/*
* /karriere's vacancy list.
*
* Production gives the section a 200px lead-in and a 120px tail, sets the
* heading at the 80/600 display size, and renders every opening as a soft grey
* row with the arrow in a lime disc pinned to its right edge. On hover that
* arrow slides out to the right while a second one slides in behind it, which
* is why the disc clips its overflow and carries the replacement as ::after.
*/
.content-section--jobs {
padding: 50px 0;
}
.content-section--jobs h2 {
max-width: 80%;
margin: 0 0 30px;
font-size: var(--h2-display);
font-weight: 600;
line-height: 1;
}
.job-list {
display: grid;
gap: 15px;
margin: 0;
padding: 0;
list-style: none;
}
.job-list__item {
position: relative;
padding: 40px 24px;
background: #f9f9f8;
border-radius: 12px;
}
.job-list__item > a {
display: flex;
align-items: center;
padding: 15px;
color: var(--youwe-dark);
font-size: 2.5rem;
font-weight: 400;
line-height: 1.5;
}
.job-list__item > a:hover {
text-decoration: none;
}
.job-list__icon {
position: absolute;
top: -8px;
right: 15px;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
background: var(--youwe-green);
}
.job-list__icon svg {
position: absolute;
top: 13px;
left: 10px;
width: 18px;
height: 14px;
transition: transform 0.15s ease-in, opacity 0.1s ease-in;
}
.job-list__icon::after {
content: "";
position: absolute;
top: 13px;
left: -14px;
width: 25px;
height: 15px;
opacity: 0;
background: url('data:image/svg+xml;utf8,') no-repeat left / contain;
transition: left 0.35s ease-out, opacity 0.3s ease-out;
}
.job-list__item:hover .job-list__icon svg {
transform: translateX(14px);
opacity: 0;
}
.job-list__item:hover .job-list__icon::after {
left: 10px;
opacity: 1;
}
/*
* The closing quote row on /karriere. Production sits it on white with 120px
* of air above and below, rounds the photograph to 10px and sets the caption
* at 40/500 over 16/300 body.
*/
.content-section--media {
padding: 20px 0;
}
/* Production leaves this photograph at its own 644px rather than stretching it
across the column, so it is never upscaled past its source. */
.content-section--media .content-section__media-row > img {
width: auto;
max-width: 100%;
border-radius: 10px;
}
/*
* /om-youwe's "Vi skalerer forretninger gennem IT." row is this same block with
* two settings of its own: production leaves the team photograph square and
* sets the caption a weight lighter than /karriere's.
*/
.content-section--media-plain .content-section__media-row > img {
border-radius: 0;
}
.content-section--media-plain .media-note h2 {
font-weight: 400;
}
.media-note {
padding: 0 15px;
}
.media-note h2 {
margin: 0 0 15px;
font-size: 1.75rem;
font-weight: 500;
line-height: 1.2;
}
.media-note p {
margin: 0;
font-size: 1rem;
font-weight: 300;
line-height: 22px;
}
/*
* The centred claim on /om-youwe.
*
* Production declares this one heading in "Soehne Bush" and serves no
* @font-face for that family anywhere on the site, so what renders on youwe.dk
* is the browser's generic sans — visibly unlike the Fira Sans around it. The
* generic keyword is repeated here so both sites land on the same face rather
* than this one heading being the odd one out in the opposite direction.
*/
.content-section--statement {
padding: 48px 0;
}
.statement {
text-align: center;
}
.content-section .statement__title {
margin: 0;
font-family: sans-serif;
font-size: 1.5rem;
font-weight: 600;
line-height: 1;
}
.content-section .statement__body {
max-width: 40.25rem;
margin: 30px auto 0;
padding-bottom: 30px;
font-size: 1rem;
line-height: 1.5;
}
.thanks-page {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
}
.thanks-page__image,
.thanks-page__content {
padding-top: 8rem;
}
.thanks-page__image {
display: flex;
flex-direction: column;
background: var(--youwe-muted);
}
.thanks-page__image img {
width: 100%;
flex: 1;
min-height: 24rem;
object-fit: cover;
}
.thanks-page__image p {
margin: 0;
padding: 1.5rem;
border-top: 1px solid #d1d5db;
color: #4b5563;
font-size: 0.9rem;
}
.thanks-page__image a {
color: var(--youwe-dark);
text-decoration: underline;
}
.thanks-page__image a:hover {
color: var(--youwe-green);
}
.thanks-page__content {
display: flex;
align-items: center;
justify-content: center;
padding-inline: 1.5rem;
padding-bottom: 4rem;
background: #fff;
}
.thanks-page__content > div {
max-width: 34rem;
}
.thanks-page__content h1 {
margin: 0 0 1.5rem;
font-size: var(--h1-page);
line-height: 1.25;
font-weight: 800;
}
.thanks-page__content p {
color: var(--youwe-dark);
font-size: 1rem;
line-height: 1.75;
}
.thanks-page__content span {
color: #6b7280;
}
.eyebrow--green {
color: var(--youwe-green);
}
/* --- /ai-hos-youwe -------------------------------------------------------- */
/*
* This page is scoped.
*
* Production runs /ai-hos-youwe on a scale of its own — 11px eyebrows, 52px
* section headings, 13–17px body copy, cards padded to 18px with a 1px #DDE3E8
* hairline and a 16px radius — where the rest of the site runs 56px headings
* and 18px copy. Everything below therefore lives under .ai-page rather than
* borrowing .content-section, so matching this page against production cannot
* move /om-youwe or the service pages.
*
* The measurements come from production's post-18493.css and the three loop
* templates it pulls in, read rather than rendered.
*/
/*
* Bands.
*
* Production alternates white, tint and near-black down the page, and that
* alternation is the separator — the same way every band on the homepage is
* told apart from the one above it by its background and nothing else.
*
* There was a `--hairline` modifier here that drew a 1px #DDE3E8 rule across
* the top of a band. It sat on six of the ten bands and not on the other four,
* with no rule behind which got one, so the page read as if some sections had
* been boxed off by hand. Since no two adjacent bands share a background there
* is nothing for a rule to separate, and it is gone.
*
* The closing band is the only green one on the site, and the only one that
* needs a gap under it: its background runs to its own edge, so without one the
* green would meet the footer card with no page showing between them. Every
* other page ends on white, where the footer's own inset does that work.
*/
.ai-band {
padding: 50px 0;
background: #fff;
color: var(--youwe-dark);
}
.ai-band--tint {
background: var(--youwe-muted);
}
.ai-band--dark {
background: var(--youwe-dark);
}
.ai-band--green {
margin-bottom: 40px;
background: var(--youwe-green);
}
.ai-page .ai-eyebrow {
margin: 0 0 14px;
color: #60615e;
font-size: 11px;
font-weight: 400;
letter-spacing: 3px;
line-height: 1.4;
text-transform: uppercase;
}
.ai-band--dark .ai-eyebrow {
color: #bbb;
}
.ai-cta-card .ai-eyebrow {
color: #fff;
}
.ai-page .ai-heading {
margin: 0 0 8px;
color: var(--youwe-dark);
font-size: 32px;
line-height: 1.1;
font-weight: 500;
}
.ai-band--dark .ai-heading {
margin-bottom: 16px;
color: #fff;
line-height: 1.05;
}
.ai-page .ai-intro {
max-width: 94%;
margin: 0 0 48px;
color: #666;
font-size: 17px;
font-weight: 400;
line-height: 1.7rem;
}
.ai-band--dark .ai-intro {
color: #bbb;
font-size: 16px;
}
/*
* The card.
*
* One shape carries the six use cases, the four approaches and the four
* reasons: an 18px box with a hairline and a 16px radius. What changes between
* them is the fill — tint on white, white on tint, and a 5% white wash with a
* green hairline on the near-black band.
*/
.ai-card {
padding: 18px;
border: 1px solid #dde3e8;
border-radius: 16px;
background: var(--youwe-muted);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ai-band--tint .ai-card {
background: #fff;
}
.ai-page .ai-card h3 {
margin: 15px 0 5px;
color: var(--youwe-dark);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
}
.ai-page .ai-card p {
max-width: 90%;
margin: 0 0 15px;
color: #60615e;
font-size: 14px;
font-weight: 400;
line-height: 1.36rem;
}
.ai-card__pill {
display: inline-block;
padding: 5px 12px;
border-radius: 40px;
background: var(--youwe-green);
color: var(--youwe-dark);
font-size: 12px;
font-weight: 500;
}
.ai-page .ai-card--approach h3 {
margin-bottom: 17px;
font-size: 19px;
font-weight: 500;
}
.ai-page .ai-card--approach p {
color: #666;
line-height: 1.7rem;
}
.ai-card--dark {
background: rgba(239, 244, 248, 0.05);
border-color: rgba(200, 249, 2, 0.4);
}
.ai-card--dark:hover {
background: rgba(255, 255, 255, 0.11);
}
.ai-page .ai-card--dark h3 {
margin-bottom: 8px;
color: #fff;
font-weight: 500;
}
.ai-page .ai-card--dark p {
max-width: 100%;
margin: 0;
color: #cecece;
font-size: 13px;
line-height: 1.5rem;
}
.ai-card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px 16px;
}
/*
* The numbered disc.
*
* Two variants, and production uses each in exactly one place: filled green for
* the four approaches, and a white circle with a grey ring for the milestones,
* where it has to sit on the timeline rule and hide it.
*/
.ai-number {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 36px;
height: 36px;
border: 2px solid #dde3e8;
border-radius: 40px;
background: #fff;
color: var(--youwe-dark);
font-size: 11px;
font-weight: 900;
line-height: 1;
}
.ai-number--filled {
border: 0;
background: var(--youwe-green);
font-size: 14px;
font-weight: 600;
}
/*
* The year the timeline has reached — the same disc as the milestones above it,
* at the same size and weight, filled and ringed in green. It keeps the
* milestone metrics rather than borrowing --filled's, which is sized for the
* approaches and would leave one badge in the column a size out from the rest.
*/
.ai-number--current {
border-color: var(--youwe-green);
background: var(--youwe-green);
}
.ai-tag-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.ai-tag-list li {
padding: 8px 14px;
border: 1px solid #dde3e8;
border-radius: 40px;
background: #fff;
color: #60615e;
font-size: 12px;
font-weight: 500;
}
/* The two 50/50 bands: the lockup and its photo on one side, the problems or
the milestones on the other. */
.ai-split {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
.ai-page .ai-quote-heading {
margin: 0;
color: var(--youwe-dark);
font-size: 28px;
font-weight: 500;
line-height: 1.25;
}
.ai-quote-heading span,
.ai-pullquote span {
text-decoration: underline;
text-decoration-color: var(--youwe-green);
text-underline-offset: 4px;
}
.ai-page .ai-split__body {
max-width: 97%;
margin: 24px 0 0;
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 1.7rem;
}
/* The photo keeps its own width rather than filling the column, as every other
Elementor image on the site does. */
.ai-split__image {
display: block;
width: auto;
max-width: 100%;
margin-top: 30px;
border-radius: 14px;
}
/*
* The four problems.
*
* A stack, not a two-by-two grid: each is a tinted box with a green square
* marker beside its title, and the description runs the full width of the box
* underneath both.
*/
.ai-problem-list {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.ai-problem {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 14px;
padding: 20px;
border: 1px solid #dde3e8;
border-radius: 12px;
background: var(--youwe-muted);
}
.ai-problem__marker {
width: 14px;
height: 14px;
margin-top: 4px;
border-radius: 2px;
background: var(--youwe-green);
}
.ai-page .ai-problem h3 {
margin: 0 0 9px;
color: var(--youwe-dark);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
.ai-page .ai-problem p {
grid-column: 1 / -1;
margin: 0;
color: #60615e;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
}
/*
* The milestones.
*
* They hang off a grey rule with the year disc straddling it, so the disc has
* to be half its own width to the left of the line and opaque enough to cover
* it — hence the white fill on .ai-number.
*/
.ai-journey {
margin: 0;
padding: 0;
list-style: none;
border-left: 2px solid #dde3e8;
}
.ai-journey__item {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 18px;
align-items: start;
margin-left: -18px;
padding: 17px 18px 18px 0;
}
.ai-journey__item .ai-number {
margin-top: 8px;
}
.ai-page .ai-journey__body h3 {
margin: 0 0 5px;
color: var(--youwe-dark);
font-size: 16px;
font-weight: 700;
line-height: 1.4;
}
.ai-page .ai-journey__body p {
max-width: 90%;
margin: 0;
color: #60615e;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
}
/*
* The pull quote.
*
* Its own white band between the near-black section above it and the tinted
* case rail below — not the closing line of the dark section.
*/
.ai-band--quote {
padding: 56px 0 40px;
}
.ai-pullquote {
max-width: 54rem;
margin: 0 auto;
color: var(--youwe-dark);
font-size: 28px;
font-weight: 500;
line-height: 1.35;
text-align: center;
}
.ai-page .ai-pullquote__attribution {
margin: 34px 0 14px;
color: #555;
font-size: 13px;
font-weight: 400;
text-align: center;
}
/*
* The team.
*
* Production hides each person's points behind their photo and fades them in on
* hover. The card is made focusable so that list is reachable from a keyboard
* as well — there is nothing focusable inside it to hang :focus-within on.
*/
.ai-team-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.ai-team-card {
overflow: hidden;
border: 1px solid #dde3e8;
border-radius: 16px;
background: var(--youwe-muted);
transition: box-shadow 0.2s ease;
}
.ai-team-card:hover,
.ai-team-card:focus,
.ai-team-card:focus-within {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.ai-team-card__media {
position: relative;
}
.ai-team-card__media img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: top;
}
.ai-team-card__points {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 8px;
margin: 0;
padding: 70px 20px 40px;
list-style: none;
background: rgba(17, 17, 17, 0.85);
color: #fff;
opacity: 0;
transition: opacity 0.25s ease;
}
.ai-team-card:hover .ai-team-card__points,
.ai-team-card:focus .ai-team-card__points,
.ai-team-card:focus-within .ai-team-card__points {
opacity: 1;
}
.ai-team-card__points li {
position: relative;
padding-left: 18px;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
}
.ai-team-card__points li::before {
content: "";
position: absolute;
top: 4px;
left: 0;
width: 10px;
height: 10px;
background: var(--youwe-green);
}
.ai-team-card__body {
padding: 20px 20px 15px;
}
.ai-page .ai-team-card__body h3 {
margin: 0 0 4px;
color: var(--youwe-dark);
font-size: 15px;
font-weight: 500;
line-height: 1.3;
}
.ai-page .ai-team-card__body p {
margin: 0;
color: #60615e;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
}
/* Scoped through the body so it outweighs the element selector above it. */
.ai-page .ai-team-card__body .ai-team-card__role {
margin: 5px 0;
font-weight: 500;
}
/* The FAQ and the "Klar til at komme i gang?" card share one tinted band, with
the band's heading above both of them. */
.ai-faq-split {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
margin-top: 56px;
}
.ai-faq__item {
border-bottom: 1px solid #dde3e8;
}
.ai-faq__toggle {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 25px 0;
border: 0;
background: transparent;
color: var(--youwe-dark);
font-size: 16px;
font-weight: 500;
line-height: 1.4;
text-align: left;
cursor: pointer;
}
/* min-width so a long question wraps inside the flex row instead of pushing the
marker off the right edge. */
.ai-faq__question {
min-width: 0;
}
/* The marker is its own element rather than a pseudo-element: production draws
it as a 28px ringed circle, and the toggle script swaps its glyph. */
.ai-faq__marker {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid #dde3e8;
border-radius: 50%;
background: #fff;
color: #666;
font-size: 18px;
line-height: 1;
transition: background-color 0.2s ease, color 0.2s ease;
}
.ai-faq__toggle:hover .ai-faq__marker {
background: var(--youwe-green);
border-color: var(--youwe-green);
color: var(--youwe-dark);
}
.ai-faq__panel {
padding-bottom: 25px;
}
.ai-page .ai-faq__panel p {
margin: 0;
color: #666;
font-size: 13px;
font-weight: 400;
line-height: 24px;
}
.ai-cta-card {
padding: 48px 20px;
border-radius: 20px;
background: var(--youwe-dark);
color: #fff;
}
.ai-page .ai-cta-card h3 {
max-width: 94%;
margin: 0;
color: #fff;
font-size: 28px;
font-weight: 500;
line-height: 1.2;
}
.ai-page .ai-cta-card p {
margin: 16px 0 28px;
color: #cecece;
font-size: 14px;
font-weight: 400;
line-height: 1.7rem;
}
/* Scoped through the card so it outweighs the `p` selector above it. */
.ai-page .ai-cta-card .ai-cta-card__contact {
margin: 10px 0 0;
font-size: 12px;
}
.ai-cta-card__contact a {
color: inherit;
text-decoration: underline;
}
/*
* Buttons.
*
* This page runs the site's pills at production's larger size — 16/24 rather
* than 10/20 — and that is the whole of the difference, so .ai-btn sets the
* padding and nothing else. Colour comes from .btn-green / .btn-dark /
* .btn-on-green like everywhere else, and with it the trailing arrow and the
* hover that slides it out and a second copy in.
*
* It used to be a button system of its own, with the arrow written into the
* label as a "→" on the left of one of them and a hover that faded and lifted
* the whole pill. Neither is anything the rest of the site does.
*/
.ai-btn {
gap: 8px;
padding: 16px 24px;
line-height: 1;
}
.ai-btn--lg {
padding: 20px 30px;
}
.ai-cta-card .btn-green {
font-weight: 700;
}
.ai-closing {
display: grid;
gap: 24px;
}
.ai-page .ai-closing h2 {
margin: 0;
color: var(--youwe-dark);
font-size: 28px;
font-weight: 500;
line-height: 1.1;
}
/*
* /ai-hos-youwe's hero.
*
* A single centred column on a black band — not the site's usual near-black —
* with the lockup sitting on the floor of a 685px box rather than centred in
* it. It carries no image: the photo belongs to the "Vores AI-rejse" band.
*
* The band behind it is the homepage hero's: same black, same ring-particle
* field, tuned in one place under .hero-particles above.
*/
.ai-hero {
padding: 150px 0 40px;
background: #000;
color: #fff;
text-align: center;
}
/* 685px is the height production gives the band's container, and the lockup
sits on its floor rather than in its middle. */
.ai-hero .container {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 685px;
}
/*
* Production sets the three lockup lines at 80px/500 with no tracking, and
* Elementor's own `.elementor-heading-title{line-height:1;margin:0;padding:0}`
* reset is what gives them their leading. At the 38px this was built at the
* lockup came up ~120px short of filling the 685px container above, and since
* the container hangs its content off the floor that shortfall all showed up as
* dead black between the header and "Mennesker.".
*
* Production declares no breakpoint for it — 80px is what a phone gets too,
* where "Mennesker." is wider than the viewport. The clamp is the one deviation
* here: it reaches production's 80px by 727px wide, so every width at or above
* the 768px the parity harness checks is production's own size.
*/
.ai-hero__lockup {
margin: 0;
font-size: clamp(2.75rem, 11vw, 5rem);
line-height: 1;
font-weight: 500;
}
.ai-hero__lockup > span {
display: block;
}
/* "IT." and "AI." share their line rather than stacking: the point of the
lockup is the swap, and production strikes the word it is swapping out. */
.ai-hero__lockup > .ai-hero__swap {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 20px;
}
.ai-hero__accent {
color: var(--youwe-green);
}
.ai-hero__struck {
position: relative;
color: rgba(255, 255, 255, 0.35);
white-space: nowrap;
}
/* The bar is sized in em rather than px so it keeps the weight it was drawn at
relative to the word it strikes through, at any of the lockup's sizes. */
.ai-hero__struck::after {
content: "";
position: absolute;
top: 50%;
right: -0.05em;
left: -0.05em;
height: 0.09em;
border-radius: 0.045em;
background: #e53935;
transform: translateY(-50%) rotate(-4deg);
}
/* "I dén rækkefølge." is production's 56px/1, on the same clamp as the lockup
above so the two scale together below 727px. */
.ai-hero h2 {
margin: 0;
color: rgba(255, 255, 255, 0.4);
font-size: clamp(2rem, 7.5vw, 3.5rem);
line-height: 1;
font-weight: 900;
}
/* Production rules a hairline across a 1000px column under the lockup and hangs
the paragraph and the buttons off it. */
.ai-hero__footer {
max-width: 1000px;
width: 100%;
margin: 30px auto 0;
border-top: 1px solid #bbb;
}
.ai-hero p {
max-width: 87%;
margin: 0 auto;
padding-top: 30px;
color: #bbb;
font-size: 18px;
font-weight: 400;
line-height: 31px;
}
.ai-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
margin: 24px 0 20px;
}
@media (min-width: 768px) {
.ai-band {
padding: 80px 0;
}
.ai-band--quote {
padding: 72px 0 50px;
}
.ai-page .ai-heading {
font-size: 38px;
}
.ai-page .ai-intro {
max-width: 82%;
}
.ai-card-grid--2,
.ai-card-grid--3,
.ai-card-grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-split {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
}
/* Production pushes the problems to the floor of their band and keeps the
milestones level with the lockup beside them. */
.ai-problem-list {
align-self: end;
}
.ai-split--journey {
align-items: start;
}
.ai-split--journey .ai-split__lead {
padding-right: 80px;
}
.ai-journey {
margin-left: 30px;
}
.ai-team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-faq-split {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.ai-cta-card {
padding: 48px 40px;
}
.ai-closing {
grid-template-columns: 70% 30%;
align-items: center;
}
.ai-closing .ai-btn {
justify-self: end;
}
}
@media (min-width: 1025px) {
.ai-page .ai-heading {
font-size: 52px;
}
/* Production holds the section headings and their intros well short of the
full column — 60% and 44% of it. */
.ai-page .ai-heading--narrow {
max-width: 60%;
}
.ai-page .ai-intro {
max-width: 44%;
}
.ai-band--dark .ai-heading {
max-width: 80.57%;
}
.ai-band--dark .ai-intro {
max-width: 43.57%;
}
.ai-band--cases {
padding-bottom: 120px;
}
.ai-card-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ai-card-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ai-page .ai-quote-heading {
max-width: 86.471%;
font-size: 36px;
}
.ai-page .ai-split__body {
max-width: 76.324%;
}
.ai-pullquote {
font-size: 36px;
}
.ai-team-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ai-page .ai-closing h2 {
font-size: 48px;
}
.ai-hero p {
max-width: 56%;
}
}
/* Production drops the hard breaks in the closing lockup on mobile. */
@media (max-width: 767px) {
.ai-closing h2 br {
display: none;
}
}
.result-list {
display: grid;
gap: 0.75rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
}
.result-list li {
position: relative;
padding-left: 1.6rem;
color: var(--youwe-dark);
line-height: 1.6;
}
.result-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.65rem;
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: var(--youwe-green);
}
.legal-page {
padding: 9rem 0 5rem;
background: #fff;
}
.legal-page .container {
max-width: 58rem;
}
.legal-page h1 {
margin: 0 0 3rem;
font-size: var(--h1-page);
line-height: 1.1;
font-weight: 800;
}
.legal-section {
padding: 2rem 0;
border-top: 1px solid #e5e7eb;
}
.legal-section h2 {
margin: 0 0 1rem;
font-size: var(--h3-card);
line-height: 1.375;
font-weight: 700;
}
.legal-section p,
.legal-section li {
color: var(--youwe-dark);
font-size: 1rem;
line-height: 1.75;
}
.legal-section ul {
margin: 1rem 0 0;
padding-left: 1.25rem;
}
/* Numbered sub-clauses, e.g. 2.1-2.9 under Handelsbetingelser section 2. */
.legal-clauses {
display: grid;
gap: 1rem;
margin-top: 1rem;
}
.legal-clause {
display: grid;
grid-template-columns: 3rem 1fr;
gap: 0.5rem;
margin: 0;
}
.legal-clause__number {
color: #6b7280;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
/* Unnumbered continuation paragraphs line up with the clause text above. */
.legal-clause__text {
grid-column: 2;
}
@media (min-width: 768px) {
/* Production steps the lockup 38 / 56 / 80px. */
.ai-hero__lockup {
font-size: 3.5rem;
}
.desktop-nav {
display: block;
}
/* The three columns are 20 / 60 / 20 of the row with nothing between them,
which is what puts the nav pill on the viewport's centre line and keeps
the CTA inside the row instead of 32px of gap pushing it past the edge. */
.site-header__inner {
gap: 0;
}
.site-header__brand {
flex: 0 0 20%;
}
.site-header__nav {
flex: 0 0 60%;
justify-content: center;
}
.site-header__cta {
display: block;
flex: 0 0 20%;
text-align: right;
}
.mobile-toggle,
.mobile-menu {
display: none;
}
/* Production splits the footer 55 / 45, not down the middle. */
.site-footer__main {
grid-template-columns: 55% 45%;
}
.site-footer__columns {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.two-column {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4rem;
}
.home-intro__cases-cta,
.home-intro__mosaic {
padding-top: 120px;
}
.service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/*
* The mosaic's per-slot heights and the 220px lift on the right-hand
* column, straight off production's Elementor settings.
*/
.case-collage {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.case-collage__column--right {
margin-top: -220px;
}
.case-card--large img {
height: 350px;
}
.case-card--small img {
height: 300px;
}
.case-card--portrait img {
height: 500px;
}
.case-card--tall img,
.case-card--short img {
height: 400px;
}
/* Production insets the top-right card 80px from its column edge. */
.case-card--tall {
margin-right: 80px;
}
.case-card__overlay h2,
.case-card__overlay h3 {
font-size: 2.875rem;
}
.case-card__overlay p {
max-width: 80%;
font-size: var(--text-body);
}
.case-card--large .case-card__overlay p {
max-width: 51.423%;
}
/* Production's loop grid drops to two columns at 1024px and one at 767px.
Both wide cards collapse to the full two-column width here. */
.case-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-grid > [data-span="2"],
.case-grid > [data-span="4"] {
grid-column: span 2;
}
/*
* The collage's desktop shape: unequal columns, the left one dropped 350px
* and bottom-aligned, and its middle image narrowed to 70% of its column.
* Images keep their intrinsic width here rather than filling the column,
* which is what leaves the gaps between them.
*/
.footer-gallery__column {
flex: 0 0 58%;
/* Elementor nests an inner section inside each column here, so the
images sit 20px in from the column edge, not 10px. */
padding: 0 20px;
}
.footer-gallery__column--left {
flex: 0 0 42%;
text-align: right;
}
.footer-gallery__column--left > .footer-gallery__item:first-child {
margin-top: 350px;
}
.footer-gallery__item:not(:last-child) {
margin-bottom: 40px;
}
.footer-gallery__item--narrow {
width: 70%;
margin-left: auto;
}
.footer-gallery img {
width: auto;
max-width: 100%;
border-radius: 12px;
}
.footer-gallery__column--left img {
margin-left: auto;
}
.footer-gallery__item--narrow img {
width: 100%;
}
.contact-page {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-page__info,
.contact-page__form {
padding-inline: 3rem;
}
/* 70px, which is what production leaves between the page title and the
banner — the gap is an empty Elementor row, not a margin, so it does not
read off the heading's own styles. */
.image-hero h1 {
max-width: 70%;
margin-bottom: 4.375rem;
}
.image-hero--banner > img {
margin-bottom: -190px;
}
.image-hero--banner + .content-section {
margin-top: 200px;
}
.panel {
margin-top: 100px;
padding: 120px 32px;
}
.value-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 5rem;
}
.content-section--jobs {
margin-top: 200px;
padding: 0 0 120px;
}
.job-list__icon {
top: 55px;
}
.content-section--media {
padding: 120px 0;
}
/* No tail: the contact block below it carries on over the same tint. */
.content-section--statement {
padding: 120px 0 0;
}
.content-section .statement__title {
font-size: 2.5rem;
}
.content-section .statement__body {
font-size: 1.25rem;
}
.media-note {
max-width: 73%;
padding: 24px;
}
.media-note h2 {
margin-bottom: 48px;
font-size: 2.5rem;
}
.thanks-page {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.thanks-page__image p,
.thanks-page__content {
padding-inline: 4rem;
}
}
@media (min-width: 1024px) {
.service-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1025px) {
/* Production's loop grid is four columns wide above its tablet breakpoint,
which is what gives the mosaic its 2 + 1 + 1 / 4 / 1 + 2 + 1 rows. */
.case-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.case-grid > [data-span="2"] {
grid-column: span 2;
}
.case-grid > [data-span="4"] {
grid-column: span 4;
}
/* The "AI i praksis" rail on /ai-hos-youwe runs the same card three across
rather than four; below 1025px it shares the listing's breakpoints. */
.case-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.case-card__overlay h2,
.case-card__overlay h3 {
font-size: 3.5rem;
}
}
/* Production drops the footer wordmark a size from the tablet breakpoint down,
and leaves its letter-spacing and the statements beside it untouched. */
@media (max-width: 1024px) {
.footer-brand-word {
font-size: 25px;
}
}
@media (max-width: 767px) {
.site-header {
padding-top: 20px;
}
.home-intro__cases-cta h2,
.content-section--jobs h2,
.display-heading {
max-width: 100%;
}
/*
* Production tightens the row under the banner right down at its 767px
* breakpoint: 20px of padding around it and 20px between the lead-in and
* the copy, where the desktop layout runs 80px and a 3rem column gap.
*/
.image-hero--banner + .content-section {
padding: 1.25rem 0;
}
.image-hero--banner + .content-section .two-column {
gap: 1.25rem;
}
.content-section h2.heading-intro + p {
font-size: 0.875rem;
}
.value-card h3 {
font-size: 1.125rem;
}
.value-card p {
font-size: 0.875rem;
}
.services-section {
padding: 40px 0;
}
.services-section .display-heading {
margin: 0 0 16px;
}
.logo-section {
padding: 40px 0;
}
.logo-wall {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.logo-wall__item,
.logo-wall__item:first-child {
padding: 10px 0;
}
.logo-wall__item img {
width: 65%;
}
/* Production hides the footer link row below 990px. */
.site-footer__top {
display: none;
}
.site-footer__brand {
padding: 20px 0 0 15px;
}
.site-footer__columns {
padding: 0 0 20px 15px;
}
.site-footer__columns > section {
margin-bottom: 16px;
padding: 0;
}
.site-footer__columns h2 {
margin-bottom: 15px;
}
.site-footer__columns li,
.site-footer__columns a {
font-size: 0.875rem;
}
}
/* --- Content-phase additions -------------------------------------------- */
/*
* /contact-us.
*
* Production opens this page on a tinted band rather than a hero image: intro
* copy on the left, and on the right a photo stacked over a white card holding
* the address and contact details. It closes on a staggered six-image gallery,
* not a flat photo strip. The sizes, colours, radii and offsets below are the
* values Elementor renders for that page, with its mobile overrides folded into
* the mobile-first base here and the desktop values in the 768px block.
*/
.contact-intro {
padding: 150px 0 30px;
background: var(--youwe-muted);
}
/* 20px is Elementor's default column gap — 10px of padding a side. */
.contact-intro__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: center;
}
/*
* Production draws this as an Elementor heading, so it carries that widget's
* reset — line-height 1 and no margins of its own — rather than the heading
* defaults the rest of the site inherits from the theme reset.
*/
.contact-intro__title {
margin: 0 0 30px;
font-size: 48px;
font-weight: 500;
line-height: 1;
color: var(--youwe-dark);
}
.contact-intro__lead p {
/* 0.9rem from the theme reset, 30px from the widget container below it. */
margin: 0 0 0.9rem;
padding-bottom: 30px;
font-size: 14px;
line-height: 1.5;
color: var(--youwe-dark);
}
/* `.box-kontact` caps the photo and the card under it at 644px on production. */
.contact-intro__aside {
width: 100%;
max-width: 644px;
margin-inline-start: auto;
}
.contact-intro__photo {
display: block;
width: 100%;
border-radius: 13px;
}
.contact-card {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 10px;
background: #fff;
border-radius: 13px;
}
.contact-card__label {
margin: 24px 0 15px 25px;
/*
* The family production asks for here and never loads, named for the same
* reason as in the footer: it keeps both sites on the same fallback.
*/
font-family: "Soehne Bush", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
color: var(--youwe-dark);
}
.contact-card__block + .contact-card__block .contact-card__label {
margin-left: 24px;
}
.contact-card__line {
margin: 0 0 8px;
padding-left: 24px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: var(--youwe-dark);
}
.contact-card__line--last {
padding-bottom: 15px;
}
/* The email is underlined on production and the phone number deliberately is
not — a `.no-underline` override on that one widget. */
.contact-card__line a {
text-decoration: underline;
}
.contact-card__line a.contact-card__link--plain {
text-decoration: none;
}
.contact-ambitions {
background: #fff;
}
.contact-ambitions__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding-top: 30px;
}
.contact-ambitions h2 {
margin: 0;
font-size: 18px;
font-weight: 400;
line-height: 1;
color: var(--youwe-dark);
}
.contact-ambitions p {
margin: 0 0 0.9rem;
padding-bottom: 30px;
font-size: 16px;
line-height: 1.5;
color: var(--youwe-dark);
}
.contact-gallery {
margin-bottom: 40px;
}
/*
* Two columns of three. The left column is the narrower one and hangs its
* images off the right edge; the right column is wider and left-aligned. On
* desktop the left column also starts 350px down, which is what staggers the
* two against each other.
*/
.contact-gallery__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
}
.contact-gallery__column {
display: flex;
flex-direction: column;
}
.contact-gallery__column--left {
align-items: flex-end;
}
.contact-gallery__column--right {
align-items: flex-start;
}
.contact-gallery__image {
display: block;
width: auto;
max-width: 100%;
border-radius: 4px;
}
@media (min-width: 768px) {
.contact-intro {
padding: 150px 0 120px;
}
.contact-intro__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-intro__title {
margin-bottom: 48px;
font-size: 80px;
}
.contact-intro__lead p {
font-size: 16px;
}
.contact-card__label {
margin-bottom: 32px;
}
.contact-card__block + .contact-card__block .contact-card__label {
margin-left: 15px;
}
.contact-card__block + .contact-card__block .contact-card__line {
padding-left: 15px;
}
.contact-card__line {
font-size: 16px;
}
.contact-ambitions__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-top: 80px;
}
.contact-ambitions h2 {
font-size: 24px;
}
.contact-ambitions p {
font-size: 18px;
}
/* Production splits the gallery 42 / 58, not down the middle. `fr` rather
than percentages so the 20px gutter comes out of the split. */
.contact-gallery__grid {
grid-template-columns: 42fr 58fr;
gap: 20px;
}
.contact-gallery__column--left {
padding-top: 350px;
}
.contact-gallery__image {
margin-bottom: 20px;
border-radius: 12px;
}
.contact-gallery__image:last-child {
margin-bottom: 0;
}
/* Production insets this one image to 70% of its column. */
.contact-gallery__image--inset {
max-width: 70%;
}
}
/*
* Between the two breakpoints production caps three of the gallery images so
* they do not fill their column edge to edge.
*/
@media (min-width: 768px) and (max-width: 1024px) {
.contact-gallery__column--left > .contact-gallery__image:first-child {
max-width: 464px;
}
.contact-gallery__image--inset {
max-width: 350px;
}
.contact-gallery__column--right > .contact-gallery__image:nth-child(2) {
max-width: 402px;
}
}
/* The intro's two widths only bite once the columns are wide enough to show
them; below 1025px production replaces both with caps that never apply. */
@media (min-width: 1025px) {
.contact-intro__title {
max-width: 70%;
}
.contact-intro__lead p {
max-width: 67%;
}
}
/*
* The post tag list at the foot of a case page. Production emits it and then
* hides it with `main.post .post-tags { display: none }`; this is the same
* rule under our own class name.
*/
.case-tags {
display: none;
}
.legal-page__intro {
margin-bottom: 2.5rem;
line-height: 1.7;
}
.podcast-section__credits-label {
margin-bottom: 0.5rem;
font-weight: 700;
}
/* --- Forms phase --------------------------------------------------------- */
/*
* /start-ai-samtalen.
*
* Production's own page is a bare 50/50 image/form split with no section
* language around it. This uses the site's dark hero, section spacing and
* button styles instead, and keeps the image beside the form.
*/
.booking-hero {
background: var(--youwe-dark);
color: #fff;
padding: 9rem 0 4rem;
}
.booking-hero h1 {
margin: 0 0 1.5rem;
font-size: var(--h1-page);
line-height: 1.1;
font-weight: 800;
}
.booking-hero p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 1rem;
line-height: 1.75;
}
.booking-section {
background: var(--youwe-muted);
}
.booking-grid {
align-items: start;
}
.booking-panel img {
display: block;
width: 100%;
margin-bottom: 2rem;
object-fit: cover;
}
.booking-panel h2 {
margin-bottom: 1rem;
}
.booking-panel .result-list {
margin-top: 1.5rem;
}
.booking-panel__contact {
margin-top: 2rem;
}
.booking-form {
background: #fff;
padding: 2rem;
}
/*
* Multi-step state.
*
* The handler in public/assets/js/app.js swaps step-1 … step-5 on this
* wrapper as HubSpot advances the form, then adds show-step-confirmation on
* submit so the confirmation renders inline here rather than on another page.
*/
.form-steps__meter {
height: 3px;
border-radius: 999px;
background: rgba(20, 20, 20, 0.1);
overflow: hidden;
}
.form-steps__meter-bar {
display: block;
height: 100%;
width: 20%;
border-radius: 999px;
background: var(--youwe-green);
transition: width 0.35s ease;
}
.form-steps.step-1 .form-steps__meter-bar {
width: 20%;
}
.form-steps.step-2 .form-steps__meter-bar {
width: 40%;
}
.form-steps.step-3 .form-steps__meter-bar {
width: 60%;
}
.form-steps.step-4 .form-steps__meter-bar {
width: 80%;
}
.form-steps.step-5 .form-steps__meter-bar {
width: 100%;
}
/*
* A typed selector: `.content-section p` already sets font-size and colour at
* the same specificity, so this has to match it to win on source order.
*/
p.form-steps__label {
margin: 0.75rem 0 1.5rem;
color: #6b7280;
font-size: var(--text-xs);
line-height: 1.5;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.form-steps__confirmation {
display: none;
}
.form-steps.show-step-confirmation .form-steps__meter,
.form-steps.show-step-confirmation .form-steps__label,
.form-steps.show-step-confirmation .form-steps__form {
display: none;
}
.form-steps.show-step-confirmation .form-steps__confirmation {
display: block;
}
.form-steps__confirmation .eyebrow {
font-size: var(--text-xs);
line-height: 1.5;
}
.form-steps__confirmation h2 {
margin: 0 0 1rem;
}
.form-steps__confirmation p {
margin: 0 0 1rem;
line-height: 1.75;
}
.form-steps__confirmation p:last-child {
margin-bottom: 0;
}
/*
* HubSpot renders its own markup into the mount, so field styling has to
* reach into its classes. Kept to this site's type scale and green.
*/
.hs-form fieldset {
max-width: none;
margin: 0;
padding: 0;
border: 0;
}
.hs-form .hs-form-field {
margin-bottom: 1.25rem;
}
.hs-form label {
display: block;
margin-bottom: 0.4rem;
color: var(--youwe-dark);
font-size: var(--text-sm);
font-weight: 600;
}
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="file"],
.hs-form select,
.hs-form textarea {
width: 100%;
padding: 0.7rem 0.9rem;
border: 1px solid #d5d9e0;
border-radius: 0;
background: #fff;
color: var(--youwe-dark);
font: inherit;
font-size: 1rem;
}
.hs-form input[type="text"]:focus,
.hs-form input[type="email"]:focus,
.hs-form input[type="tel"]:focus,
.hs-form input[type="number"]:focus,
.hs-form input[type="file"]:focus,
.hs-form select:focus,
.hs-form textarea:focus {
outline: 2px solid var(--youwe-green);
outline-offset: 1px;
border-color: var(--youwe-dark);
}
.hs-form textarea {
min-height: 8rem;
resize: vertical;
}
.hs-form .hs-form-booleancheckbox label,
.hs-form .inputs-list label {
display: flex;
gap: 0.6rem;
font-size: var(--text-sm);
font-weight: 400;
line-height: 1.5;
}
.hs-form .inputs-list {
margin: 0;
padding: 0;
list-style: none;
}
.hs-form .hs-button {
display: inline-flex;
align-items: center;
gap: 0.6rem;
border: 1.5px solid var(--youwe-green);
border-radius: 999px;
background: var(--youwe-green);
color: var(--youwe-dark);
padding: 0.7rem 1.5rem;
font: inherit;
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hs-form .hs-button:hover {
background: var(--youwe-dark);
border-color: var(--youwe-dark);
color: #fff;
}
.hs-form .hs-error-msg,
.hs-form .hs-error-msgs label {
color: #b91c1c;
font-size: var(--text-sm);
font-weight: 400;
}
/* ==========================================================================
/jobs/uopfordret-ansogning — the application form
==========================================================================
The one first-party form on the site. It is a white card standing on the
page tint, cornered at 20px like the AI page's CTA card and lifted off the
band with the same soft shadow, so it reads as the thing the page is for
rather than as a block of fields at the bottom of it.
Nothing here invents a colour or a size: the green is the button green, the
focus ring is the one every control on the site gets, and the type comes off
the same scale as the rest of the page. */
.job-form {
margin-top: 2rem;
padding: 2rem;
border-radius: 20px;
background: #fff;
box-shadow: 0 24px 60px -32px rgba(20, 20, 20, 0.35);
}
/* The heading block sits over a green rule, which is the only decoration the
card carries and the only place the brand colour appears before the submit. */
.job-form__intro {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--youwe-green);
}
.content-section .job-form__intro h2 {
margin: 0.25rem 0 0.75rem;
font-size: var(--h2-sub);
line-height: 1.2;
}
.content-section .job-form__intro p {
margin: 0;
max-width: 46rem;
color: #60615e;
font-size: var(--text-sm);
line-height: 1.7;
}
/*
* The site's eyebrow, with the 1.5rem it leaves under it removed — the card's
* heading sets its own gap. Its colour and size have to be restated: this is a
*
inside a .content-section, and `.content-section p` sets both at a
* specificity the bare .eyebrow class cannot reach past. The values are that
* rule's own.
*/
.content-section .job-form .eyebrow {
margin: 0;
color: #9ca3af;
font-size: var(--text-xs);
}
/* Whatever stopped the whole submission — a token that no longer verifies, a
send that failed. Field-level reasons are rendered at the field instead. */
.content-section p.job-form__alert {
margin: 0 0 1.5rem;
padding: 0.9rem 1.1rem;
border-left: 3px solid #b91c1c;
background: #fdf2f2;
color: #8f1d1d;
font-size: var(--text-sm);
line-height: 1.6;
}
.job-form__form {
display: grid;
gap: 1.5rem;
}
.field-row {
display: grid;
gap: 1.5rem;
}
.field {
display: grid;
gap: 0.5rem;
}
.field__label {
color: var(--youwe-dark);
font-size: var(--text-sm);
font-weight: 600;
}
.field__required {
color: #8f1d1d;
}
.field__optional {
color: #6b7280;
font-weight: 400;
}
/*
* One rule for every control so a text field, a phone field and the textarea
* cannot drift apart. The 1px border is drawn inset rather than as a border so
* the focus ring can thicken it without the field growing and nudging the
* fields under it down the page.
*/
.field__input {
width: 100%;
padding: 0.85rem 1rem;
border: 0;
border-radius: 10px;
background: #f6f8fa;
box-shadow: inset 0 0 0 1px #d5d9e0;
color: var(--youwe-dark);
font: inherit;
font-size: 1rem;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.field__input::placeholder {
color: #9aa1ab;
}
.field__input:hover {
box-shadow: inset 0 0 0 1px #b9c0ca;
}
.field__input:focus {
outline: none;
background: #fff;
box-shadow: inset 0 0 0 2px var(--youwe-dark);
}
.field__input--textarea {
min-height: 8rem;
line-height: 1.6;
resize: vertical;
}
.field--invalid .field__input {
box-shadow: inset 0 0 0 1px #d98b8b;
}
.content-section p.field__error {
margin: 0;
color: #8f1d1d;
font-size: var(--text-xs);
font-weight: 500;
line-height: 1.5;
}
/*
* The upload control.
*
* A file input renders as an unstyleable button plus a filename the browser
* chooses the wording of, so the input is stretched over the whole panel at
* zero opacity and the panel is what a visitor sees and clicks. The input is
* still a real focusable input underneath, which is why the panel highlights on
* :focus-within rather than on a class.
*/
.file-drop {
position: relative;
display: grid;
gap: 0.35rem;
justify-items: center;
padding: 1.75rem 1.25rem;
border: 1px dashed #c2c9d2;
border-radius: 12px;
background: #f6f8fa;
text-align: center;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.file-drop:hover {
border-color: var(--youwe-dark);
background: #eef1f5;
}
.file-drop:focus-within {
border-style: solid;
border-color: var(--youwe-dark);
background: #fff;
outline: 2px solid var(--youwe-green);
outline-offset: 2px;
}
.field--invalid .file-drop {
border-color: #d98b8b;
}
.file-drop__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.file-drop__lead {
color: var(--youwe-dark);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.file-drop__hint {
color: #6b7280;
font-size: var(--text-xs);
line-height: 1.5;
}
/* Filled in by app.js, so it is hidden until there is something in it. */
.file-drop__list {
display: grid;
gap: 0.4rem;
margin: 0.75rem 0 0;
padding: 0;
list-style: none;
}
.file-drop__list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0.85rem;
border-radius: 8px;
background: var(--youwe-muted);
font-size: var(--text-xs);
}
.file-drop__name {
overflow: hidden;
color: var(--youwe-dark);
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-drop__size {
flex: none;
color: #6b7280;
}
/* Aligned on the box rather than on the first line of the text, which is what
keeps the tick level with the sentence it belongs to at any wrap. */
.field-consent {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
color: #60615e;
font-size: var(--text-xs);
line-height: 1.6;
cursor: pointer;
}
.field-consent input {
width: 20px;
height: 20px;
margin: 0;
accent-color: var(--youwe-dark);
cursor: pointer;
}
.content-section .field-consent a {
color: var(--youwe-dark);
text-decoration: underline;
}
.job-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
margin-top: 0.5rem;
}
.content-section p.job-form__note {
margin: 0;
color: #6b7280;
font-size: var(--text-xs);
line-height: 1.5;
}
/*
* The honeypot. Taken out of the flow entirely rather than hidden with
* `display: none`, which some form-fillers read as "skip this" — the point is
* that a bot should find it and fill it in.
*/
.form-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* The confirmation after a successful send. Same card, no form. */
.job-form--confirmation {
text-align: center;
}
.job-form__badge {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin: 0 auto 1.25rem;
border-radius: 50%;
background: var(--youwe-green);
color: var(--youwe-dark);
font-size: 1.5rem;
line-height: 1;
}
.content-section .job-form--confirmation h2 {
margin: 0 0 1rem;
font-size: var(--h2-sub);
}
.content-section .job-form--confirmation p {
margin: 0 auto 1rem;
max-width: 38rem;
line-height: 1.75;
}
.content-section .job-form--confirmation p:last-child {
margin-bottom: 0;
padding-top: 0.5rem;
}
@media (min-width: 768px) {
.booking-hero {
padding-bottom: 5rem;
}
.booking-form {
padding: 2.5rem;
}
.job-form {
padding: 3rem;
}
.field-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================================
Case pages
==========================================================================
One template, six bands, two colour runs. Every value below is production's,
read off the Elementor CSS for the nine case posts:
band AI cases (4) older cases (5)
hero #EFF4F8 #EFF4F8
body #FFFFFF #FFFFFF
value #EFF4F8 #FFFFFF
story #F9F9F8 #F9F9F8
contact green card on #FFF #EFF4F8, and after the rail rather than
before it
rail #EFF4F8 #FFFFFF
Production sets the AI cases' body copy in Catamaran and the older cases' in
Fira Sans; this build runs Fira Sans throughout, as the rest of the site
already does.
========================================================================== */
/*
* `display: flow-root` and the stacking context are both load-bearing for the
* overhanging lead image below. Without the flow root the image's negative
* bottom margin would collapse out through the section and drag the whole band
* below it upwards instead of shrinking the tint; without the z-index the next
* band's white background would paint over the part that overhangs.
*/
.case-hero {
position: relative;
z-index: 1;
display: flow-root;
padding: 9.375rem 0 0;
background: var(--youwe-muted);
}
.case-hero__title {
margin: 0;
font-size: 3.5rem;
line-height: 1.1;
font-weight: 500;
}
/* Production sets this at 18px, not at the 16px body size. */
.case-hero__subtitle {
margin: 0.625rem 0 0;
color: #6e6e6e;
font-size: 1.125rem;
line-height: 1.5;
}
/* Production draws the post's terms as outlined pills, not as an eyebrow. */
.case-hero__tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 1.875rem 0 0;
padding: 0;
list-style: none;
}
.case-hero__tags li {
padding: 6px 16px;
border: 1px solid var(--youwe-dark);
border-radius: 80px;
font-size: 1rem;
line-height: 1.5;
}
/*
* The lead image hangs over the band below it: production pulls it up with a
* -200px bottom margin and pushes the white band down by the same amount. The
* overhang is scaled back below 1025px, where the image is not tall enough to
* give 200px away — production keeps the full value there and the image ends
* up covering its own hero.
*/
.case-hero__media {
margin-top: 0.9375rem;
text-align: center;
}
/*
* The lead image is one of production's own 1090px crops and it is laid out at
* that width, centred in the 1440px band — not stretched across it. Stretching
* it was scaling the file up by a quarter and, because the overhang below is a
* fixed -200px, leaving far more of the image inside the tint than production
* does.
*/
.case-hero__media img {
display: inline-block;
width: auto;
max-width: 100%;
border-radius: 16px;
}
/*
* From 768px the top padding first has to make room for the lead image's
* overhang, then leave this gap under it — matching it only put the first row
* flush against the image.
*/
.case-body {
--case-body-gap: 5rem;
padding: var(--case-body-gap) 0 0;
background: #fff;
}
/* The AI cases tint the value band below, so the copy needs white under it
too; on the older cases the white value band supplies it. */
.case-body--ai {
padding-bottom: var(--case-body-gap);
}
/* The service pages set their topics in the same row — production uses one
heading-left / copy-right pattern across both templates. */
.case-row,
.service-row {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.case-row + .case-row {
margin-top: 5rem;
}
.case-row__heading h2,
.service-row__heading h2 {
margin: 0;
font-size: 1.5rem;
line-height: 1.3;
font-weight: 400;
}
.case-row__body > :first-child,
.service-row__body > :first-child {
margin-top: 0;
}
.case-row__body p,
.service-row__body p {
margin: 0 0 1.875rem;
font-size: 1.125rem;
line-height: 1.6;
}
.case-row__body ul {
margin: 0 0 1.875rem;
padding-left: 1.25rem;
font-size: 1.125rem;
line-height: 1.6;
}
.case-row__body li {
margin-bottom: 0.5rem;
}
.case-row__body > :last-child,
.service-row__body > :last-child {
margin-bottom: 0;
}
.case-value {
padding: 1.875rem 0;
}
.case-value--ai {
background: var(--youwe-muted);
}
.case-value--classic {
background: #fff;
}
.case-value__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
.case-value__media img {
display: block;
width: 100%;
border-radius: 12px;
}
.case-value__body h2 {
margin: 0 0 1.875rem;
font-size: 2rem;
line-height: 1.2;
font-weight: 500;
}
.case-value__body ul {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.case-value__body li {
position: relative;
padding-left: 1.5rem;
font-size: 1.125rem;
line-height: 1.65;
}
/*
* The AI cases mark each item with a small green square; the older cases use
* the browser's own disc.
*/
.case-value--ai .case-value__body li::before {
content: "";
position: absolute;
top: 0.5em;
left: 0;
width: 14px;
height: 14px;
background: var(--youwe-green);
}
.case-value--classic .case-value__body ul {
display: block;
padding-left: 1.25rem;
list-style: disc;
}
.case-value--classic .case-value__body li {
margin-bottom: 14px;
padding-left: 0;
}
.case-value__body p {
margin: 1.875rem 0 0;
font-size: 1.125rem;
line-height: 1.65;
}
.case-story {
padding: 5rem 0;
background: #f9f9f8;
}
.case-story__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
.case-story__quote {
margin: 0;
text-align: center;
}
.case-story__mark {
display: block;
width: 100px;
height: auto;
margin: 0 auto 0.625rem;
}
.case-story__quote blockquote {
margin: 0;
font-size: 1.5625rem;
line-height: 1.4;
font-weight: 300;
}
.case-story__quote figcaption {
margin-top: 0.9375rem;
}
.case-story__person,
.case-story__role {
margin: 0;
font-size: 1rem;
font-weight: 500;
}
.case-story__person {
color: #000;
}
.case-story__role {
color: #080909;
}
/* The "Om " facts card. Production fixes it at 421px wide. */
.case-facts {
max-width: 421px;
margin: 1.875rem auto 0;
padding: 20px 15px;
border-radius: 12px;
background: #1c272a;
color: #fff;
}
.case-facts h2 {
margin: 0 0 1.25rem;
color: var(--youwe-green);
font-size: 1.5rem;
line-height: 1.3;
font-weight: 400;
text-align: center;
}
.case-facts p {
margin: 0 0 0.9rem;
font-size: 1rem;
line-height: 1.6;
}
.case-facts p:last-child {
margin-bottom: 0;
}
/*
* The contact block. Production's green-card variant — the one the four AI
* cases carry — is gone along with its markup; every page now closes with the
* /cases/ooono block below.
*/
.case-contact--classic {
padding: 7.5rem 0;
border-top: 0;
background: var(--youwe-muted);
}
/* On /om-youwe the block follows a statement already on the same tint, so
production opens it at 50px rather than the full 120. */
.case-contact--tight {
padding-top: 50px;
}
/* The case pages — and only those — end the tint 120px short of the footer
rather than running it all the way down to it. */
.case-contact--gap {
margin-bottom: 7.5rem;
}
.case-contact__split {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
/* Production drops this portrait in at its own 562px with 12px corners on every
page that closes with the block — the case pages, the service pages and
/om-youwe alike — rather than stretching it to the column. */
.case-contact__split > img {
/* justify-self, or the grid would stretch the auto width back out to the
full column and upscale the file past its source. */
justify-self: center;
width: auto;
max-width: 100%;
border-radius: 12px;
}
.case-contact--classic h2 {
margin: 0 0 1.5625rem;
font-size: 1.875rem;
line-height: 1.17;
font-weight: 300;
}
.case-contact--classic h3 {
margin: 0 0 5px;
font-size: 1.5rem;
line-height: 1.3;
font-weight: 500;
}
.case-contact__role {
margin: 0 0 1.3125rem;
font-size: 1.25rem;
}
.case-contact__link {
margin: 0 0 5px;
font-size: 1rem;
}
.case-rail {
padding: 5rem 0;
}
.case-rail--ai {
background: var(--youwe-muted);
}
.case-rail--classic {
background: #fff;
}
.case-rail__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1.875rem;
}
.case-rail__kicker {
margin: 0 0 14px;
font-size: 11px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
.case-rail__title {
margin: 0;
font-size: 1.75rem;
line-height: 1.2;
font-weight: 500;
}
/* The older cases set this heading a good deal larger than the AI cases do. */
.case-rail--classic .case-rail__title {
font-size: 2.25rem;
}
.case-rail__nav {
display: flex;
flex-shrink: 0;
gap: 10px;
}
.case-rail__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--youwe-dark);
border-radius: 100px;
background: transparent;
color: var(--youwe-dark);
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.case-rail__btn--prev svg {
transform: rotate(180deg);
}
.case-rail__btn:hover {
background: var(--youwe-dark);
color: #fff;
}
.case-rail__btn:disabled {
opacity: 0.35;
cursor: default;
}
.case-rail__btn:disabled:hover {
background: transparent;
color: var(--youwe-dark);
}
/*
* Production drives this row with a JavaScript slider. Here it is a
* scroll-snapping track, so it works with no script at all and the prev/next
* buttons only page it along.
*/
.case-rail__track {
display: flex;
gap: 20px;
overflow-x: auto;
margin: 0;
padding: 0 0 1rem;
list-style: none;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.case-rail__track::-webkit-scrollbar {
display: none;
}
.case-rail__slide {
flex: 0 0 85%;
scroll-snap-align: start;
}
.case-slide {
display: block;
height: 100%;
color: var(--youwe-dark);
}
.case-slide__media {
display: block;
height: 272px;
overflow: hidden;
border-radius: 15px;
}
.case-slide__media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
transition: transform 0.8s ease;
}
.case-slide:hover .case-slide__media img {
transform: scale(1.1);
}
.case-slide__body {
position: relative;
display: block;
margin-top: 10px;
padding: 6px 16px 24px;
border-radius: 12px;
background: #fff;
}
.case-slide__title {
display: -webkit-box;
overflow: hidden;
margin: 10px 0 5px;
padding-right: 45px;
font-size: 1.25rem;
line-height: 1.3;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.case-slide__arrow {
position: absolute;
top: 10px;
right: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 64px;
background: var(--youwe-green);
}
/* The glyph is centred in the disc, so it does not want the two-pixel drop
.btn-arrow carries for sitting on a pill button's text baseline. */
.case-slide__arrow .btn-arrow {
top: 0;
}
.case-slide__excerpt {
display: -webkit-box;
overflow: hidden;
margin: 6px 0 5px;
color: #141414a6;
font-size: 1rem;
line-height: 1.5;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
/* The rail closes on a green call to action in the last slot. */
.case-slide--cta {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 416px;
padding: 24px;
border-radius: 12px;
background: var(--youwe-green);
}
.case-slide--cta h3 {
max-width: 74%;
margin: 0 0 1.25rem;
font-size: 1.875rem;
line-height: 1.15;
font-weight: 400;
}
.btn-outline {
display: inline-flex;
align-self: flex-start;
align-items: center;
border: 1px solid var(--youwe-dark);
border-radius: 40px;
background: transparent;
color: var(--youwe-dark);
padding: 10px 20px;
font-size: 15px;
font-weight: 400;
}
@media (min-width: 768px) {
.case-hero__title {
font-size: 5rem;
}
.case-hero__media {
margin-bottom: -7.5rem;
}
.case-body {
padding-top: calc(7.5rem + var(--case-body-gap));
}
/* Elementor's default column gutter is 10px a side. */
.case-row,
.service-row,
.service-split,
.service-hero__intro {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.service-hero {
margin-bottom: 6.25rem;
padding: 9.375rem 0 7.5rem;
}
.service-hero__title {
margin-bottom: 3rem;
}
/*
* Production pulls the lead image 200px up out of the band, which leaves it
* overhanging the tint by 80px and the band below it starting 20px under
* the image. Only from 768px: below that the image is not 200px tall.
*/
.service-hero__media {
margin-bottom: -12.5rem;
}
.service-split--media-end .service-split__media {
order: 2;
}
.service-band--top-60 {
padding-top: 3.75rem;
}
.service-band--top-120 {
padding-top: 7.5rem;
}
.service-band--top-150 {
padding-top: 9.375rem;
}
.service-band--bottom-50 {
padding-bottom: 3.125rem;
}
.service-band--bottom-80 {
padding-bottom: 5rem;
}
.service-band--bottom-120 {
padding-bottom: 7.5rem;
}
.service-band--bottom-150 {
padding-bottom: 9.375rem;
}
.service-band--after-60 {
margin-bottom: 3.75rem;
}
.service-band--after-120 {
margin-bottom: 7.5rem;
}
.case-value {
padding: 7.5rem 0;
}
.case-value__grid,
.case-contact__split {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-value__grid {
gap: 5rem;
}
.case-value__body h2 {
font-size: 2.5rem;
}
.case-story__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
/* SMC has no quote, and production gives its facts card the full width. */
.case-story__grid--facts-only {
grid-template-columns: 1fr;
}
.case-story__quote {
padding-inline: 50px;
}
.case-story__quote blockquote {
font-size: 2rem;
}
/*
* Production separates the quote from the facts with a hairline rule down
* the right-hand column. It belongs to the column, not to the card inside
* it — putting it on the card cost the card its bottom-left corner.
*/
.case-story__grid:not(.case-story__grid--facts-only) .case-story__facts {
/* Stretched so the rule runs the height of the row, as production's
column does, with the card still centred inside it. */
align-self: stretch;
display: grid;
align-content: center;
border-left: 1px solid rgba(20, 20, 20, 0.25);
}
.case-rail--classic .case-rail__title {
font-size: 3.5rem;
}
.case-rail__slide {
flex-basis: calc((100% - 20px) / 2);
}
.case-slide__title {
font-size: 1.5rem;
}
.case-slide--cta h3 {
font-size: 2.5rem;
}
}
@media (min-width: 1025px) {
.case-hero__media {
margin-bottom: -12.5rem;
}
.case-body {
padding-top: calc(12.5rem + var(--case-body-gap));
}
.case-rail__slide {
flex-basis: calc((100% - 60px) / 4);
}
}
/* ==========================================================================
AI maturity test — /ai-modenhedstest
==========================================================================
One question on screen at a time on the page tint, with the meter above the
card and the result taking the card's place once the tenth is answered.
Nothing here invents a colour or a size: the tint is the page's #EFF4F8, the
accent and the meter are the button green, the card is the same white panel
and shadow the application form uses, and the type comes off the same scale
as the rest of the site. The lead form at the end of the result reuses
.field / .field__input outright, so it cannot drift from the one on
/jobs/uopfordret-ansogning.
========================================================================== */
.maturity-page {
padding: 9rem 0 5rem;
background: var(--youwe-muted);
}
.maturity-intro {
margin-bottom: 3rem;
}
.maturity-intro h1 {
margin: 0 0 1rem;
font-size: var(--h1-page);
font-weight: 500;
line-height: 1.05;
}
.maturity-intro p {
margin: 0;
color: #4b4d4a;
font-size: var(--text-lead);
line-height: 1.6;
}
.maturity-noscript {
margin: 0 0 2rem;
padding: 1rem 1.25rem;
border-left: 3px solid var(--youwe-dark);
background: #fff;
font-size: var(--text-sm);
line-height: 1.6;
}
/* The meter. The label above it is the accessible version, which is why the
track is hidden from the accessibility tree rather than given a role. */
.maturity-progress {
margin-bottom: 1.5rem;
}
.maturity-progress__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.maturity-progress__label,
.maturity-progress__percent {
margin: 0 0 0.6rem;
color: var(--youwe-dark);
font-size: var(--text-sm);
font-weight: 600;
}
.maturity-progress__track {
height: 4px;
border-radius: 2px;
background: #dde3ea;
}
.maturity-progress__bar {
display: block;
height: 100%;
border-radius: 2px;
background: var(--youwe-green);
transition: width 0.25s ease;
}
.maturity-card {
padding: 2rem 1.5rem;
border-radius: 20px;
background: #fff;
box-shadow: 0 24px 60px -32px rgba(20, 20, 20, 0.35);
}
/*
* A fieldset's own border, padding and margin are all non-zero by default, and
* its legend is an inline box the border runs through. Both are reset so the
* step lays out as the plain block the design draws.
*/
.maturity-step {
margin: 0;
padding: 0;
border: 0;
}
.maturity-step__legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 1.75rem;
}
.maturity-step__count {
display: block;
margin-bottom: 0.75rem;
}
.maturity-step__question {
display: block;
color: var(--youwe-dark);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
}
.maturity-options {
display: grid;
gap: 0.75rem;
}
/*
* The answer panel is the label, so the radio inside it is hidden from sight
* but not from the keyboard or the accessibility tree — the marker beside the
* text is drawn instead, which is the only way to colour it. :has() carries the
* chosen state onto the panel; the site already relies on it for the mega menu.
*/
.maturity-option {
position: relative;
display: flex;
align-items: center;
gap: 0.85rem;
padding: 1rem 1.25rem;
border-radius: 12px;
background: #fff;
box-shadow: inset 0 0 0 1px #dde3ea;
color: var(--youwe-dark);
font-size: var(--text-sm);
line-height: 1.4;
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.maturity-option:hover {
box-shadow: inset 0 0 0 1px #b9c0ca;
}
.maturity-option:focus-within {
outline: 2px solid var(--youwe-dark);
outline-offset: 2px;
}
.maturity-option:has(.maturity-option__input:checked) {
background: var(--youwe-dark);
box-shadow: inset 0 0 0 1px var(--youwe-dark);
color: #fff;
}
/* Stretched over the panel at zero opacity rather than display: none, so it
stays focusable and a click anywhere on the panel lands on the input. */
.maturity-option__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.maturity-option__marker {
flex: none;
width: 18px;
height: 18px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px #c2c9d2;
transition: box-shadow 0.15s ease;
}
.maturity-option:has(.maturity-option__input:checked) .maturity-option__marker {
box-shadow: inset 0 0 0 5px var(--youwe-green);
}
.maturity-step__error {
margin: 1rem 0 0;
color: #8f1d1d;
font-size: var(--text-xs);
font-weight: 500;
}
.maturity-step__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 2rem;
}
/* Back is the quiet control of the pair: a plain underlined label, so the green
pill stays the only thing that reads as the way forward. */
.maturity-back {
padding: 0;
border: 0;
background: none;
color: #60615e;
font: inherit;
font-size: var(--text-sm);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.maturity-back:hover {
color: var(--youwe-dark);
}
/* Pushes the green pill to the right on the first step, where there is no back
button to sit opposite it. */
.maturity-back[hidden] + .btn-green {
margin-left: auto;
}
/* ---- The result ---- */
.maturity-result {
padding: 2rem 1.5rem;
border-radius: 20px;
background: #fff;
box-shadow: 0 24px 60px -32px rgba(20, 20, 20, 0.35);
}
/* Focused only so the result can be moved to when it replaces the questions;
it is not a control and must not draw a ring. */
.maturity-result:focus {
outline: none;
}
.maturity-result__title {
margin: 0 0 1rem;
font-size: var(--h2-section);
font-weight: 700;
line-height: 1.05;
}
/*
* The green rule under the last word. A background rather than an underline so
* it sits behind the descenders at the weight the design draws, which is the
* same treatment the nav links wipe in on hover.
*/
.maturity-accent {
background: linear-gradient(var(--youwe-green) 0 0) bottom left / 100% 0.12em no-repeat;
}
.maturity-result__lead {
margin: 0 0 3rem;
max-width: 34rem;
color: #6b7280;
font-size: var(--text-body);
line-height: 1.6;
}
.maturity-start {
padding: 2rem 1.5rem;
background: #dfe5ec;
}
.maturity-start .eyebrow {
margin-bottom: 1rem;
}
.maturity-start__title {
margin: 0 0 1.25rem;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.35;
}
.maturity-start__body {
margin: 0;
color: #6b7280;
font-size: var(--text-sm);
line-height: 1.7;
}
.maturity-focus {
margin-top: 3rem;
}
.maturity-focus .eyebrow {
margin-bottom: 1rem;
}
.maturity-focus__list {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
/* A green dot and a hairline under each row; the last row in a column keeps its
rule, which is what the design shows where the two columns end unevenly. */
.maturity-focus__list li {
display: flex;
align-items: baseline;
gap: 0.75rem;
padding: 0.85rem 0;
border-bottom: 1px solid #dde3ea;
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.4;
}
.maturity-focus__list li::before {
content: "";
flex: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--youwe-green);
}
.maturity-result__closing {
margin: 3rem 0 0;
font-size: var(--text-body);
line-height: 1.7;
}
/* The green lead card. The one place on the page where the brand colour is the
ground rather than an accent, which is why the submit is the dark pill. */
.maturity-lead {
margin-top: 3rem;
padding: 2rem 1.5rem;
border-radius: 20px;
background: var(--youwe-green);
}
.maturity-lead h3 {
margin: 0 0 1rem;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
}
.maturity-lead > p {
margin: 0 0 1.5rem;
color: #46512a;
font-size: var(--text-sm);
line-height: 1.7;
}
.maturity-lead__list {
display: grid;
gap: 0.75rem;
margin: 0 0 2rem;
padding: 0;
list-style: none;
}
.maturity-lead__list li {
display: flex;
align-items: start;
gap: 0.75rem;
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.4;
}
.maturity-lead__tick {
display: grid;
flex: none;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--youwe-dark);
color: var(--youwe-green);
font-size: 0.75rem;
line-height: 1;
}
.maturity-lead__form {
display: grid;
gap: 1rem;
}
/* The fields are the site's, on a ground they were not drawn for: the inset
ring and the tinted fill would both disappear into the green, so they are
flat white here. Nothing else about the control changes. */
.maturity-lead__form .field__input {
background: #fff;
box-shadow: none;
}
.maturity-lead__form .field__input:focus {
box-shadow: inset 0 0 0 2px var(--youwe-dark);
}
.maturity-lead__form .field__required {
color: var(--youwe-dark);
}
.maturity-lead__actions {
display: flex;
justify-content: flex-end;
}
/* The application form's error treatment, which is scoped to .content-section
and so does not reach this page on its own. */
.maturity-lead__form .field__error {
margin: 0;
color: #8f1d1d;
font-size: var(--text-xs);
font-weight: 500;
line-height: 1.5;
}
.maturity-lead__alert {
margin: 0;
padding: 0.9rem 1.1rem;
border-left: 3px solid #b91c1c;
background: #fdf2f2;
color: #8f1d1d;
font-size: var(--text-sm);
line-height: 1.6;
}
/* While the send is in flight. Dimmed rather than swapped for a spinner, and
disabled so a second press cannot send the lead twice. */
.maturity-lead__actions .btn-dark:disabled {
opacity: 0.6;
cursor: progress;
}
/* Replaces the result once the lead is sent — the same card, holding only the
thank-you. */
.maturity-thanks {
padding: 2rem 1.5rem;
border-radius: 20px;
background: #fff;
box-shadow: 0 24px 60px -32px rgba(20, 20, 20, 0.35);
text-align: center;
}
.maturity-thanks:focus {
outline: none;
}
.maturity-thanks__title {
margin: 0 0 1rem;
font-size: var(--h2-section);
font-weight: 700;
line-height: 1.05;
}
.maturity-thanks__body {
margin: 0;
color: #4b4d4a;
font-size: var(--text-lead);
line-height: 1.6;
}
.maturity-thanks__body a {
color: var(--youwe-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
.maturity-result__footer {
display: flex;
justify-content: flex-end;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid #dde3ea;
}
.maturity-restart {
padding: 0;
border: 0;
background: none;
color: var(--youwe-dark);
font: inherit;
font-size: var(--text-sm);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.maturity-result__disclaimer {
margin: 1.5rem 0 0;
color: #6b7280;
font-size: var(--text-xs);
font-style: italic;
line-height: 1.7;
}
@media (min-width: 768px) {
.maturity-card,
.maturity-result,
.maturity-thanks {
padding: 3rem;
}
.maturity-step__question {
font-size: 1.75rem;
}
.maturity-start,
.maturity-lead {
padding: 2.5rem;
}
/*
* Two columns, filled down the first and then the second — the rows are
* independent of each other, so a long label wraps without dragging the row
* beside it with it.
*/
.maturity-focus__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 3rem;
}
}