/* ─── Varför Bordeaux — page-why-bordeaux.css ──────────────────────────────── Loaded only for the "Varför Bordeaux" page template. Copy is editor-managed; set per-paragraph color in the block editor. ────────────────────────────────────────────────────────────────────────── */ /* The gradient lives on so it runs continuously behind the (transparent) header/nav — this stylesheet only loads on the "Varför Bordeaux" template, so these page-level overrides are safely scoped. Figma lists the solid #FF8400 layer first (top); the intended look is the alpha gradient over that solid base, so the solid layer goes underneath. */ body { background: linear-gradient(360deg, rgba(255, 217, 0, 0.25) 0%, rgba(233, 108, 2, 0.533654) 81.25%, #D55803 100%), linear-gradient(0deg, #FF8400, #FF8400) !important; } /* Header/sub-nav blend into the page gradient. */ .bc-header, .bc-subnav { background: transparent !important; } .why { margin: 0 !important; background: transparent; } .why__inner { max-width: 640px; margin: 0 auto; padding: 48px 24px 64px; text-align: center; } .why__logo { display: block; width: 178px; height: auto; margin: 0 auto 40px; } /* ─── Editor content ────────────────────────────────────────────────────── */ .why__content { font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: black; } .why__content > * { margin: 0 0 24px; } .why__content > *:last-child { margin-bottom: 0; } /* Headings default to white + bold; override per-block in the editor as needed. */ .why__content h1, .why__content h2, .why__content h3, .why__content h4 { font-weight: 700; font-size: 20px; line-height: 24px; color: white; } /* Separator block: white line (overrides the default short/dark WP separator). */ .why__content hr { width: auto !important; max-width: none !important; height: 0; border: 0 !important; border-top: 1px solid #FFFFFF !important; background: none !important; margin: 74px auto; } /* ─── Desktop ───────────────────────────────────────────────────────────────── Wider column, larger type; the header already carries the logo so the inline one is hidden. ────────────────────────────────────────────────────────────────────────── */ @media (min-width: 768px) { .why__logo { display: none; } .why__inner { max-width: 805px; /* 138px gap from the nav to the first content; 153px down to the footer. */ padding: 138px 0px 153px; } .why__content { color: black; font-family: "DM Sans", var(--font-body); font-size: 24px; font-weight: 400; line-height: normal; letter-spacing: 0.24px; } /* First heading. */ .why__content h1 { color: white; text-align: center; font-family: "DM Sans", var(--font-body); font-size: 38px; font-weight: 500; line-height: normal; letter-spacing: 0.38px; } /* All subsequent headings. */ .why__content h2, .why__content h3, .why__content h4 { color: white; font-family: "DM Sans", var(--font-body); font-size: 26px; font-weight: 600; line-height: normal; letter-spacing: 0.26px; } /* Editor opt-in: add the "heading-lg" class to a heading block (Advanced → Additional CSS class[es]) to bump it to the large 38px size. */ .why__content .heading-lg { font-size: 38px; letter-spacing: 0.38px; } /* Divider line (e.g. above "Om dig") — 815px white line, centered (slightly wider than the 805px column), 74px gap to the following content. */ .why__content hr { width: 815px !important; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); } }