/* BIM Takeoff Web Styles * * Typography: Inter for all web text. The font is loaded with a tag from * include-in-header in _quarto.yml, never with a CSS import rule here - such a * rule blocks rendering of the stylesheet that contains it. * - Headings: Inter Bold (700) / Semi-bold (600) * - Body Text: Inter Regular (400) * - Note: Lora serif font reserved for print/PDF documents only * * Colors: Official BIM Takeoff brand palette * - Primary: Orange #FF9900, Charcoal #2C2C2C, White #FFFFFF * - Secondary: Light Gray #F0F0F0, Medium Gray #757575, Dark Gray #404040 * * Orange is used for fills, rules and icons only - never as text on white, * and never as a background behind white text (both fail WCAG AA). */ /* ============================================ DESIGN TOKENS ============================================ */ :root { /* Brand colour */ --bim-orange: #FF9900; --bim-orange-hover: #E68A00; --bim-orange-visited: #D97500; --bim-charcoal: #2C2C2C; --bim-white: #FFFFFF; --bim-light-gray: #F0F0F0; --bim-medium-gray: #757575; --bim-dark-gray: #404040; /* Type */ --font-heading: 'Inter', 'Segoe UI', Arial, sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; /* Spacing */ --spacing-xl: 32px; --spacing-xxl: 48px; /* Elevation - three steps, used everywhere a shadow is needed */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, .10); --shadow-md: 0 6px 20px rgba(0, 0, 0, .12); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .18); /* Radius - cards are square, controls take a small radius */ --radius-card: 0; --radius-control: 4px; } /* ============================================ BASE ============================================ */ html { scroll-behavior: smooth; } /* `clip` contains the full-bleed hero without creating a scroll container, so position: sticky keeps working. Replaces the old overflow-x: hidden plus max-width: 100vw pair, which broke against the scrollbar width. */ html, body { overflow-x: clip; } body { font-family: var(--font-body); color: var(--bim-charcoal); line-height: 1.6; font-size: 16px; font-weight: 400; margin: 0; padding: 0; } /* Media never overflows its column. No !important needed - element selectors lose to every component rule that sets an explicit size. */ img, video { max-width: 100%; height: auto; } /* Remove any top margin/padding from main content */ #quarto-content, main, .quarto-container { margin-top: 0 !important; padding-top: 0 !important; } /* Ensure first element has no top margin */ #quarto-content > :first-child, main > :first-child, .quarto-container > :first-child { margin-top: 0 !important; } /* Hide the page title (keeps it for SEO/browser tab) */ .quarto-title, #title-block-header, .title { display: none !important; } /* ============================================ ACCESSIBILITY ============================================ */ /* Skip link - injected into by js/scroll-effects.js. Visually hidden until it takes focus. */ .skip-link { position: absolute; top: 8px; left: -9999px; z-index: 10000; background: var(--bim-charcoal); color: var(--bim-white); padding: 12px 20px; font-family: var(--font-heading); font-weight: 700; text-decoration: none; border-radius: var(--radius-control); } .skip-link:focus { left: 8px; outline: 3px solid var(--bim-orange); outline-offset: 2px; } /* Visible keyboard focus. Orange on light ground... */ a:focus-visible, button:focus-visible, .cta-primary:focus-visible, .cta-secondary:focus-visible, .nav-link:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--bim-orange); outline-offset: 2px; } /* ...white on the charcoal navbar and footer, where orange is too dim. */ .navbar a:focus-visible, .navbar .nav-link:focus-visible, .navbar .dropdown-item:focus-visible, .navbar button:focus-visible, .nav-footer a:focus-visible, footer a:focus-visible { outline: 3px solid var(--bim-white); outline-offset: 2px; } /* ============================================ SCROLL REVEAL ============================================ Content is visible by default. The hidden state applies only when the script has added .js-reveal, so no-JS readers, jump-to-end readers and anyone the IntersectionObserver misses still see the page. */ .js-reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s ease-out, transform .5s ease-out; } .js-reveal.fade-in-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js-reveal, .js-reveal.fade-in-visible { opacity: 1; transform: none; transition: none; } } /* ============================================ SCROLL TO TOP BUTTON (currently disabled in JS) ============================================ */ .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--bim-orange); color: var(--bim-charcoal); border: none; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease, background-color .3s ease; box-shadow: var(--shadow-md); z-index: 1000; display: flex; align-items: center; justify-content: center; font-size: 20px; } .scroll-to-top:hover { background: var(--bim-orange-hover); } .scroll-to-top.visible { opacity: 1; visibility: visible; } /* ============================================ NAVBAR ============================================ */ .navbar { background-color: var(--bim-charcoal) !important; transition: box-shadow .3s ease; } .navbar-brand img { max-height: 50px; width: auto; } /* Hide the site title text next to logo - show only logo */ .navbar-brand .navbar-title, .navbar-title { display: none !important; } .navbar-nav .nav-link, .navbar-nav .nav-item .nav-link, .navbar .navbar-nav .nav-link { font-family: var(--font-heading) !important; font-weight: 600 !important; font-size: 16px !important; color: var(--bim-white) !important; transition: color .3s ease; } .navbar-nav .nav-link:hover, .navbar-nav .nav-item .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-item .nav-link.active { color: var(--bim-orange) !important; } /* Dropdown menu styling */ .navbar .dropdown-menu { background-color: var(--bim-charcoal); border: 1px solid var(--bim-orange); border-radius: var(--radius-control); } .navbar .dropdown-menu .dropdown-item { font-family: var(--font-heading) !important; font-weight: 500 !important; color: var(--bim-white) !important; transition: background-color .2s ease, color .2s ease; } /* Charcoal on orange, not white on orange (2.14:1 fails AA) */ .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus { background-color: var(--bim-orange); color: var(--bim-charcoal) !important; } /* Language switcher styling */ .navbar-nav .nav-link[href*="/pl/"], .navbar-nav .nav-link[href="index.qmd"] { font-family: var(--font-heading) !important; font-weight: 700 !important; color: var(--bim-white) !important; } /* Praevius Logo in Navbar */ .praevius-navbar-logo { display: inline-flex; align-items: center; padding: 8px 12px; margin-left: 8px; } .praevius-navbar-logo img { height: 28px !important; width: auto !important; max-height: 28px; transition: opacity .3s ease; } .praevius-navbar-logo:hover img { opacity: .75; } /* ============================================ TYPOGRAPHY ============================================ */ h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; } h2 { border-bottom: 3px solid var(--bim-orange); padding-bottom: 8px; color: var(--bim-charcoal); } h3 { color: var(--bim-charcoal); } /* In-content links: charcoal text (12.6:1) with an orange underline. Orange text on white is 2.14:1 and fails AA, so the colour moves to the rule and the text stays readable. */ #quarto-content a:not(.cta-primary):not(.cta-secondary):not(.nav-link):not(.dropdown-item):not(.praevius-navbar-logo):not(.skip-link):not(.navbar-brand) { color: var(--bim-charcoal); text-decoration: underline; text-decoration-color: var(--bim-orange); text-underline-offset: 3px; } #quarto-content a:not(.cta-primary):not(.cta-secondary):not(.nav-link):not(.dropdown-item):not(.praevius-navbar-logo):not(.skip-link):not(.navbar-brand):hover { text-decoration-color: var(--bim-orange-hover); text-decoration-thickness: 2px; } #quarto-content a:not(.cta-primary):not(.cta-secondary):not(.nav-link):not(.dropdown-item):not(.praevius-navbar-logo):not(.skip-link):not(.navbar-brand):visited { text-decoration-color: var(--bim-orange-visited); } /* ============================================ HERO SECTION ============================================ */ /* Full-bleed without 100vw: 100vw includes the scrollbar and overflows. margin-inline against the parent's own width does not. */ .hero-section { background-image: linear-gradient(rgba(44, 44, 44, .3), rgba(64, 64, 64, .3)), url('../images/header-background.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; color: var(--bim-white); padding: 80px 0; text-align: center; margin-block: 0 var(--spacing-xxl); margin-inline: calc(50% - 50vw); width: auto; position: relative; min-height: 600px; overflow: hidden; } /* Video background container */ .hero-video-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero-video-bg video { position: absolute; top: 0; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; max-width: none; transform: translateX(-50%); object-fit: cover; object-position: center top; } /* Dark overlay over video */ .hero-video-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(44, 44, 44, .3), rgba(64, 64, 64, .3)); z-index: 1; } /* Keep white text readable even over the brightest video/poster frame. */ .hero-section.hero-readable { background-image: linear-gradient(rgba(44, 44, 44, .82), rgba(44, 44, 44, .82)), url('../images/header-background.jpg'); } .hero-readable .hero-video-bg::after { background: rgba(44, 44, 44, .82); } .hero-readable .hero-subtitle { max-width: 850px; margin-inline: auto; } /* Video disabled state (mobile / reduced data / no-JS) - poster stays */ .hero-video-bg.video-disabled video { display: none; } .hero-video-bg.video-disabled::before { content: ''; position: absolute; inset: 0; background-image: url('../images/header-background.jpg'); background-size: cover; background-position: center; z-index: 0; } /* Ensure hero content is above video and overlay */ .hero-section > .container, .hero-section .container { position: relative; z-index: 10; padding: 0 32px; max-width: 1200px; margin: 0 auto; transition: opacity .3s ease-out; } .hero-logo { margin-bottom: 32px; text-align: center; } .hero-logo img { max-width: 300px; height: auto; } .hero-title, .hero-title h1 { font-family: var(--font-heading); font-size: 48px; font-weight: 700; color: var(--bim-white); line-height: 1.2; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); } .hero-title { margin-bottom: 24px; position: relative; z-index: 10; } .hero-title h1 { margin: 0; } .hero-title h3 { color: var(--bim-orange); text-shadow: 0 2px 8px rgba(0, 0, 0, .5); } .hero-subtitle, .hero-subtitle p { font-family: var(--font-body); font-size: 24px; color: var(--bim-white); line-height: 1.4; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); } .hero-subtitle { margin-bottom: 32px; position: relative; z-index: 10; } .hero-subtitle p { margin: 0; } /* Hero eyebrow (replaces the former H3 kicker above the H1) */ .hero-eyebrow { font-size: 18px; font-weight: 600; letter-spacing: .02em; color: var(--bim-light-gray); text-shadow: 0 2px 8px rgba(0, 0, 0, .5); margin-bottom: 8px; } /* Hero button row (was an inline flex style on the .qmd) */ .hero-actions { margin-top: 32px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ============================================ CTA BUTTONS ============================================ */ /* Charcoal on orange is 6.5:1 and passes AA. White on orange is 2.14:1 and does not. */ .cta-primary { display: inline-block; background-color: var(--bim-orange); color: var(--bim-charcoal); padding: 16px 32px; font-size: 18px; font-weight: 700; text-decoration: none; border-radius: var(--radius-control); transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .cta-primary:hover, .cta-primary:focus { background-color: var(--bim-orange-hover); color: var(--bim-charcoal); transform: translateY(-2px); box-shadow: var(--shadow-md); } .cta-primary:visited { color: var(--bim-charcoal); } .cta-secondary { display: inline-block; background-color: transparent; color: var(--bim-white); padding: 16px 32px; font-size: 18px; font-weight: 700; text-decoration: none; border-radius: var(--radius-control); border: 2px solid var(--bim-white); transition: background-color .2s ease, color .2s ease; } .cta-secondary:hover, .cta-secondary:focus { background-color: var(--bim-white); color: var(--bim-charcoal); border-color: var(--bim-white); } /* ============================================ CARD PRIMITIVE ============================================ One skin for every card: white ground, orange left rule, small shadow, square corners. Individual classes override only their own padding and background, so existing layout dimensions are unchanged. */ .card-base, .feature-card, .faq-item, .callout-box, .trust-badge, .portfolio-item, .process-step { background: var(--bim-white); padding: 32px; border-left: 4px solid var(--bim-orange); box-shadow: var(--shadow-sm); border-radius: var(--radius-card); transition: transform .2s ease, box-shadow .2s ease; } .faq-item, .trust-badge { padding: 24px; } .callout-box { padding: 24px; background: var(--bim-light-gray); margin: 32px 0; } .portfolio-item { padding: 0; overflow: hidden; } .process-step { padding: 24px 32px 32px 32px; background: var(--bim-light-gray); } .faq-item { margin-bottom: 16px; } /* Hover lift, in CSS rather than inline styles set from JS. Declared AFTER .js-reveal.fade-in-visible so that the hover transform wins the specificity tie against the reveal's resting transform. */ .feature-card:hover, .faq-item:hover, .callout-box:hover, .trust-badge:hover, .portfolio-item:hover, .process-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ============================================ FEATURE GRID ============================================ */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; margin: 48px 0; } .feature-card h3 { margin-top: 0; color: var(--bim-charcoal); font-family: var(--font-heading); font-weight: 700; font-size: 20px; display: flex; align-items: center; } .feature-card h3 i { font-size: 32px; margin-right: 12px; color: var(--bim-orange); } .feature-card p { font-family: var(--font-body); color: var(--bim-charcoal); font-size: 14px; line-height: 1.6; margin-bottom: 12px; } .feature-card a { font-weight: 600; } /* CTA buttons inside feature cards keep the button treatment */ .feature-card a.cta-primary, .feature-card a.cta-primary:hover, .feature-card a.cta-primary:visited { color: var(--bim-charcoal) !important; text-decoration: none; } /* Button row inside a card (was an inline flex style on the .qmd) */ .card-actions { margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap; } /* ============================================ STATS SECTION ============================================ The one place a gradient survives: charcoal to dark grey. */ .stats-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 24px; margin: 48px 0; padding: 32px; background: linear-gradient(135deg, var(--bim-charcoal) 0%, var(--bim-dark-gray) 100%); color: var(--bim-white); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); } .stat { text-align: center; padding: 16px; border-radius: var(--radius-card); } /* Orange on charcoal is 4.6:1 and passes AA */ .stat-number, .stat-number p { font-size: 48px; font-weight: 700; color: var(--bim-orange); display: block; font-family: var(--font-heading); margin: 0; } .stat-label, .stat-label p { font-size: 16px; color: var(--bim-light-gray); font-family: var(--font-body); margin: 0; } /* ============================================ TRUST SECTION ============================================ */ .trust-section { background: var(--bim-light-gray); padding: 48px 32px; text-align: center; margin: 48px 0; } .trust-badges { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 32px; } .trust-badge { min-width: 200px; } .trust-badge h4 { font-family: var(--font-heading); font-weight: 700; color: var(--bim-charcoal); margin-top: 0; margin-bottom: 12px; font-size: 18px; display: flex; align-items: center; } .trust-badge h4 i { color: var(--bim-orange); } .trust-badge p { font-family: var(--font-body); color: var(--bim-charcoal); margin: 0; font-size: 14px; } /* ============================================ COMPARISON TABLE ============================================ */ .comparison-table { width: 100%; margin: 32px 0; border-collapse: collapse; } .comparison-table thead { background: var(--bim-charcoal); color: var(--bim-white); } .comparison-table th, .comparison-table td { padding: 16px; text-align: left; font-family: var(--font-body); } .comparison-table th { font-family: var(--font-heading); font-weight: 700; } .comparison-table tr:nth-child(even) { background-color: var(--bim-light-gray); } .comparison-table tr:hover { background-color: rgba(255, 153, 0, .1); } /* Orange as a rule, not as text - orange text on white fails AA */ .comparison-table .highlight { color: var(--bim-charcoal); font-weight: 700; box-shadow: inset 0 -3px 0 var(--bim-orange); } .comparison-table td strong { font-family: var(--font-heading); font-weight: 600; } /* ============================================ PROCESS STEPS ============================================ */ .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 32px; counter-reset: step-counter; } .process-step { position: relative; counter-increment: step-counter; } /* Charcoal on orange, not white on orange */ .process-step::before { content: counter(step-counter); position: absolute; top: 24px; left: 24px; background: var(--bim-orange); color: var(--bim-charcoal); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; font-family: var(--font-heading); } .process-step h4 { font-family: var(--font-heading); font-weight: 700; color: var(--bim-charcoal); margin-top: 60px; margin-bottom: 12px; font-size: 18px; } .process-step p { font-family: var(--font-body); color: var(--bim-charcoal); margin: 0; font-size: 14px; line-height: 1.6; } /* ============================================ PORTFOLIO ============================================ */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); gap: 32px; margin: 48px 0; } .portfolio-item img { width: 100%; height: 250px; object-fit: cover; } .portfolio-content { padding: 24px; } .portfolio-content h3 { font-family: var(--font-heading); font-weight: 700; color: var(--bim-charcoal); margin-top: 0; margin-bottom: 12px; font-size: 20px; } .portfolio-content p { font-family: var(--font-body); color: var(--bim-charcoal); margin-bottom: 8px; font-size: 14px; line-height: 1.6; } .portfolio-meta { margin: 12px 0; } /* Charcoal on orange, not white on orange */ .portfolio-tag, .portfolio-tag p { color: var(--bim-charcoal); font-family: var(--font-heading); font-weight: 600; } .portfolio-tag { background: var(--bim-orange); padding: 4px 12px; border-radius: var(--radius-control); font-size: 14px; display: inline-block; margin: 8px 4px; } .portfolio-tag p { margin: 0; } /* ============================================ FAQ SECTION ============================================ */ .faq-section { margin: 48px 0; } .faq-question, .faq-question p, .faq-question strong { font-family: var(--font-heading); font-weight: 700; margin-bottom: 8px; font-size: 18px; color: var(--bim-charcoal); margin-top: 0; } .faq-answer, .faq-answer p { font-family: var(--font-body); color: var(--bim-charcoal); font-size: 14px; line-height: 1.6; margin: 0; } /* ============================================ CALLOUT BOX ============================================ */ .callout-box h4 { font-family: var(--font-heading); font-weight: 700; color: var(--bim-charcoal); margin-top: 0; margin-bottom: 12px; font-size: 20px; } .callout-box p { font-family: var(--font-body); color: var(--bim-charcoal); margin-bottom: 12px; line-height: 1.6; } .callout-box a.cta-primary { margin-top: 16px; } /* Secondary button needs a dark outline on the light callout ground */ .callout-box .cta-secondary { color: var(--bim-charcoal); border-color: var(--bim-charcoal); } .callout-box .cta-secondary:hover, .callout-box .cta-secondary:focus { background-color: var(--bim-charcoal); color: var(--bim-white); border-color: var(--bim-charcoal); } /* ============================================ HOME PAGE BLOCKS ============================================ Named classes replacing inline grid/flex styles in index.qmd and pl/index.qmd, so the mobile rules can be plain class selectors instead of brittle attribute-substring matches on the style attribute. */ /* "About us" three-up */ .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; margin: 32px 0; } .about-card { display: flex; align-items: center; background: var(--bim-white); padding: 20px; border-left: 4px solid var(--bim-orange); box-shadow: var(--shadow-sm); border-radius: var(--radius-card); } .about-card i { font-size: 48px; color: var(--bim-orange); margin-right: 20px; flex-shrink: 0; } .about-card-body { flex: 1; } /* Dark "Transform your estimation process" band */ .cta-band { margin: 64px 0; padding: 48px 32px; background: linear-gradient(135deg, var(--bim-charcoal) 0%, var(--bim-dark-gray) 100%); border-radius: var(--radius-card); text-align: center; } .cta-band-inner { max-width: 800px; margin: 0 auto; } .cta-band h2 { color: var(--bim-white); border-bottom: 3px solid var(--bim-orange); } .cta-band p { color: var(--bim-white); font-size: 16px; } .cta-band-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 24px; margin-top: 32px; } .cta-band-stat { padding: 16px; } .cta-band-stat h3 { color: var(--bim-orange); font-size: 36px; margin-bottom: 8px; } .cta-band-stat p { color: var(--bim-white); font-weight: 600; } /* Two-up "Ready to see the difference?" split panel */ .split-panel { margin: 64px 0; padding: 0; background: var(--bim-light-gray); border-radius: var(--radius-card); overflow: hidden; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .split-panel-text, .split-panel-aside { padding: 48px; display: flex; flex-direction: column; justify-content: center; } .split-panel-text h3 { color: var(--bim-charcoal); margin-top: 0; margin-bottom: 16px; } .split-panel-text p, .split-panel-text ul { color: var(--bim-charcoal); } .split-panel-aside { background: var(--bim-charcoal); } .split-panel-aside p { color: var(--bim-white); } /* Intro label above a list, in either panel */ .label-strong { font-weight: 600; margin-bottom: 8px; } .split-panel-markets { margin-top: 24px; line-height: 2; } .split-panel-markets p { margin: 0; } .split-panel-facts { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--bim-medium-gray); } .split-panel-facts p { margin: 4px 0; font-weight: 600; } /* ============================================ CONTACT FORM ============================================ */ .contact-form { max-width: 600px; margin: 32px auto; padding: 32px; background: var(--bim-light-gray); border-radius: var(--radius-card); } .form-group { margin-bottom: 24px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 16px; border: 2px solid var(--bim-medium-gray); border-radius: var(--radius-control); font-size: 16px; transition: border-color .2s ease; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--bim-orange); } /* ============================================ UTILITY ============================================ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } /* Image sections for visual breaks */ .image-section { margin: 48px 0; text-align: center; } .image-section img { max-width: min(1000px, 100%); height: auto; display: block; margin-left: auto; margin-right: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-md); } .image-section img.figure-narrow { max-width: min(900px, 100%); } .text-center { text-align: center; } .mt-xl { margin-top: 32px; } /* ============================================ MOBILE RESPONSIVE ============================================ */ /* --- TABLETS (max-width: 1024px) --- */ @media (max-width: 1024px) { :root { --spacing-xl: 24px; --spacing-xxl: 36px; } .hero-section { min-height: 500px; padding: 60px 0; } .hero-title, .hero-title h1 { font-size: 40px; } .hero-subtitle, .hero-subtitle p { font-size: 22px; } .container { padding: 0 24px; } .feature-grid, .portfolio-grid, .process-steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } .stats-section { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 24px; } .stat-number, .stat-number p { font-size: 40px; } /* Navbar adjustments for tablet */ .navbar-nav .nav-link, .navbar-nav .nav-item .nav-link, .navbar .navbar-nav .nav-link { font-size: 14px !important; padding: 8px 12px !important; } .two-col { grid-template-columns: 1fr; } } /* --- LARGE PHONES (max-width: 768px) --- */ @media (max-width: 768px) { :root { --spacing-xl: 20px; --spacing-xxl: 32px; } body { font-size: 15px; } .hero-section { min-height: 400px; padding: 48px 0; } .hero-section .container { padding: 0 16px; } .hero-title, .hero-title h1 { font-size: 32px; line-height: 1.2; } .hero-subtitle, .hero-subtitle p { font-size: 18px; line-height: 1.4; } .hero-logo img { max-width: 200px; } /* Single column grids */ .feature-grid, .portfolio-grid, .process-steps, .about-grid { grid-template-columns: 1fr; gap: 20px; } .stats-section { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px; margin: 32px 0; } .stat { padding: 12px; } .stat-number, .stat-number p { font-size: 36px; } .stat-label, .stat-label p { font-size: 14px; } /* Feature cards mobile */ .feature-card { padding: 24px; } .feature-card h3 { font-size: 18px; } .feature-card h3 i { font-size: 28px; } /* Process steps mobile */ .process-step { padding: 20px 24px 24px 24px; } .process-step::before { width: 40px; height: 40px; font-size: 20px; top: 20px; left: 20px; } .process-step h4 { margin-top: 50px; font-size: 16px; } /* Trust section mobile */ .trust-section { padding: 32px 16px; } .trust-badges { flex-direction: column; gap: 16px; } .trust-badge { min-width: auto; width: 100%; } /* CTA buttons touch-friendly */ .cta-primary, .cta-secondary { padding: 14px 28px; font-size: 16px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } /* Stack the hero and in-card button rows */ .hero-actions, .card-actions { flex-direction: column; align-items: center; gap: 12px; } /* FAQ items mobile */ .faq-item { padding: 20px; } .faq-question, .faq-question p, .faq-question strong { font-size: 16px; } /* Callout box mobile */ .callout-box { padding: 20px; margin: 24px 0; } .callout-box h4 { font-size: 18px; } /* Contact form mobile */ .contact-form { padding: 24px; margin: 24px auto; } .form-group input, .form-group textarea, .form-group select { padding: 14px; font-size: 16px; /* Prevents iOS zoom */ min-height: 48px; } /* Typography mobile */ h2 { font-size: 24px; padding-bottom: 6px; } h3 { font-size: 20px; } /* Portfolio items mobile */ .portfolio-item img { height: 200px; } .portfolio-content { padding: 20px; } .portfolio-content h3 { font-size: 18px; } /* Image sections mobile */ .image-section { margin: 32px 0; padding: 0 16px; box-sizing: border-box; } /* Home page blocks mobile */ .about-card { padding: 16px; } .about-card i { font-size: 36px; margin-right: 14px; } .cta-band { padding: 32px 20px; margin: 32px 0; } .split-panel { margin: 32px 0; } .split-panel-text, .split-panel-aside { padding: 28px 20px; } /* Scroll to top button */ .scroll-to-top { bottom: 20px; right: 20px; width: 45px; height: 45px; } /* Table responsive */ .comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .comparison-table th, .comparison-table td { padding: 12px; font-size: 14px; white-space: nowrap; } /* Dropdown menu mobile improvements */ .navbar .dropdown-menu { position: static; width: 100%; border: none; box-shadow: none; padding-left: 20px; } .navbar .dropdown-menu .dropdown-item { padding: 12px 16px; min-height: 44px; } } /* --- SMALL PHONES (max-width: 480px) --- */ @media (max-width: 480px) { :root { --spacing-xl: 16px; --spacing-xxl: 24px; } body { font-size: 14px; } .hero-section { min-height: 350px; padding: 40px 0; } .hero-section .container { padding: 0 12px; } .hero-title, .hero-title h1 { font-size: 26px; line-height: 1.2; } .hero-subtitle, .hero-subtitle p { font-size: 16px; line-height: 1.4; } .hero-logo img { max-width: 160px; } .container { padding: 0 12px; } /* Stats section small phones */ .stats-section { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; } .stat { padding: 10px 8px; } .stat-number, .stat-number p { font-size: 28px; } .stat-label, .stat-label p { font-size: 12px; } /* Feature cards small phones */ .feature-card { padding: 20px; } .feature-card h3 { font-size: 16px; flex-wrap: wrap; } .feature-card h3 i { font-size: 24px; margin-right: 10px; } .feature-card p { font-size: 13px; } /* CTA buttons small phones */ .cta-primary, .cta-secondary { padding: 12px 24px; font-size: 15px; width: 100%; text-align: center; } /* Typography small phones */ h2 { font-size: 22px; } h3 { font-size: 18px; } /* Process steps small phones */ .process-step { padding: 16px 20px 20px 20px; } .process-step::before { width: 36px; height: 36px; font-size: 18px; top: 16px; left: 16px; } .process-step h4 { margin-top: 45px; font-size: 15px; } .process-step p { font-size: 13px; } /* FAQ small phones */ .faq-item { padding: 16px; } .faq-question, .faq-question p, .faq-question strong { font-size: 15px; } .faq-answer, .faq-answer p { font-size: 13px; } /* Callout box small phones */ .callout-box { padding: 16px; } .callout-box h4 { font-size: 16px; } .callout-box p { font-size: 13px; } /* Portfolio small phones */ .portfolio-item img { height: 180px; } .portfolio-content { padding: 16px; } .portfolio-content h3 { font-size: 16px; } .portfolio-content p { font-size: 13px; } .portfolio-tag { padding: 3px 10px; font-size: 12px; } /* Trust badges small phones */ .trust-badge { padding: 20px; } .trust-badge h4 { font-size: 16px; } .trust-badge p { font-size: 13px; } /* Contact form small phones */ .contact-form { padding: 20px; } .form-group label { font-size: 14px; } /* Home page blocks small phones */ .cta-band-stat h3 { font-size: 30px; } /* Navbar small phones */ .navbar-brand img { max-height: 40px; } .praevius-navbar-logo { padding: 6px 8px; margin-left: 4px; } .praevius-navbar-logo img { max-height: 24px; } } /* ============================================ TOUCH DEVICE OPTIMIZATIONS ============================================ */ @media (hover: none) and (pointer: coarse) { /* Hover lift is meaningless on touch */ .feature-card:hover, .faq-item:hover, .callout-box:hover, .trust-badge:hover, .portfolio-item:hover, .process-step:hover, .cta-primary:hover { transform: none; } /* Ensure touch targets are large enough (min 44x44px) */ .cta-primary, .cta-secondary, .navbar-nav .nav-link, .dropdown-item, button, [role="button"], input[type="submit"], input[type="button"] { min-height: 44px; min-width: 44px; } /* Better tap feedback */ .cta-primary:active, .cta-secondary:active { opacity: .9; } .touch-active { opacity: .85; } } /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .hero-video-bg video { display: none; } .hero-section { background-image: linear-gradient(rgba(44, 44, 44, .5), rgba(64, 64, 64, .5)), url('../images/header-background.jpg'); } } /* ============================================ PRINT STYLES ============================================ */ @media print { .hero-video-bg, .scroll-to-top, .skip-link, .navbar { display: none !important; } .hero-section { min-height: auto; padding: 20px; background: none; color: black; } .hero-title, .hero-title h1, .hero-subtitle, .hero-subtitle p { color: black; text-shadow: none; } .js-reveal { opacity: 1; transform: none; } } /* ============================================ PAGE BANNER ============================================ Charcoal band carrying the H1 and lead line on interior pages that do not use the full hero (contact.qmd). Full-bleed background, contained text, so it reads as a header rather than a card. */ .page-banner { background: var(--bim-charcoal); color: var(--bim-white); padding: 56px 0; margin-bottom: 48px; } .page-banner h1 { color: var(--bim-white); margin: 0 0 12px 0; font-family: var(--font-heading); font-weight: 700; font-size: 40px; line-height: 1.2; } .page-banner-lead { color: var(--bim-light-gray); font-size: 18px; max-width: 760px; } /* ============================================ PROOF BAND ============================================ Replaces the old four-number stats band. Four anonymised work descriptions on charcoal, each on the dark-grey card with the orange left rule used everywhere else. */ .proof-band { background: var(--bim-charcoal); color: var(--bim-white); padding: 56px 0; margin: 0 0 48px 0; } .proof-band-head { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; } .proof-band-headline { font-family: var(--font-heading); font-size: 28px; font-weight: 700; line-height: 1.3; max-width: 720px; } .proof-band-sub { font-size: 15px; color: var(--bim-light-gray); } .proof-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .proof-card { background: var(--bim-dark-gray); padding: 24px; border-left: 4px solid var(--bim-orange); display: flex; flex-direction: column; gap: 8px; } .proof-card-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bim-orange); } .proof-card-title { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--bim-white); } .proof-card-text { font-size: 14px; line-height: 1.6; color: var(--bim-light-gray); } .proof-card-foot { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--bim-light-gray); } .proof-note { margin-top: 28px; font-size: 14px; color: var(--bim-light-gray); } /* ============================================ DELIVERABLE FIGURES ============================================ Screenshots of real output. Capped by height rather than width so a tall bill and a wide schedule sit at a comparable visual weight. */ .deliverable-figure { margin: 32px 0; padding: 24px; background: var(--bim-light-gray); border-left: 4px solid var(--bim-orange); } .deliverable-figure img { display: block; margin: 0 auto; max-width: 100%; max-height: 620px; width: auto; height: auto; background: var(--bim-white); box-shadow: var(--shadow-sm); } .deliverable-figure p { margin: 0; } .deliverable-caption { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--bim-charcoal); text-align: center; } /* ============================================ CONTACT LAYOUT ============================================ */ .contact-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; margin: 0 0 48px 0; align-items: start; } .contact-form-col h3 { margin-top: 0; } .contact-aside h2 { font-size: 24px; margin-top: 32px; } .contact-aside h2:first-child { margin-top: 0; } .contact-note { background: var(--bim-light-gray); border-left: 4px solid var(--bim-orange); padding: 14px 16px; font-size: 14px; margin: 24px 0; } /* Pipedrive web form embed. Same treatment as the ROI calculator modal, here at page level so the form does not collapse before it loads. */ #pipedrive-form-container { min-height: 400px; } #pipedrive-form-container iframe { border: none !important; width: 100% !important; min-height: 640px; } .pipedriveWebForms { font-family: var(--font-body) !important; } #pipedrive-form-container:empty::before { content: "Loading form..."; display: block; text-align: center; padding: 40px; color: var(--bim-medium-gray); } /* --- Positioning blocks: tablet --- */ @media (max-width: 1024px) { .proof-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-layout { gap: 40px; } } /* --- Positioning blocks: mobile --- */ @media (max-width: 768px) { .page-banner { padding: 40px 0; margin-bottom: 32px; } .page-banner h1 { font-size: 28px; } .page-banner-lead { font-size: 16px; } .proof-band { padding: 40px 0; } .proof-band-headline { font-size: 22px; } .proof-cards { grid-template-columns: 1fr; } .contact-layout { grid-template-columns: 1fr; gap: 40px; } .deliverable-figure { padding: 16px; } .deliverable-figure img { max-height: 420px; } #pipedrive-form-container iframe { min-height: 760px; } }