diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml new file mode 100644 index 00000000..14115cc4 --- /dev/null +++ b/.github/workflows/preview.yml @@ -0,0 +1,64 @@ +name: Preview + +on: + pull_request: + branches: [ main ] + types: [opened, reopened, synchronize, closed] + +permissions: + contents: read + pull-requests: write + +# Serialize: all previews share one deploy branch on site-preview. +concurrency: + group: site-preview-deploy + cancel-in-progress: false + +jobs: + deploy-preview: + # Fork PRs (e.g. Weblate) can't access PREVIEW_TOKEN. + if: github.event.pull_request.head.repo.full_name == github.repository + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 20 + + - name: Set up PHP 8.4 + uses: shivammathur/setup-php@v2 + with: + php-version: 8.4 + tools: composer + + - name: Install dependencies + run: composer i + + - name: Disable Matomo on previews + run: sed -i "/'matomo_container'/d" config.production.php + + - name: Build site + run: composer prod + + # mix() and locale_path() emit root-relative URLs ("/assets/...", "/posts"), + # but previews live under a sub-path — prefix them so assets/links resolve. + # Only the first URL per attribute is prefixed and CSS url(/...) is untouched; + # revisit if responsive `srcset` or root-relative `url()` gets added. + - name: Rewrite root-relative URLs to the PR sub-path + run: | + BASE="/site-preview/pr-preview/pr-${{ github.event.pull_request.number }}" + find build_production -name '*.html' -print0 \ + | xargs -0 perl -i -pe "s{(href|src|srcset|content)=\"/(?!/)}{\$1=\"${BASE}/}g" + + - name: Deploy preview + uses: rossjrw/pr-preview-action@v1 + with: + source-dir: ./build_production/ + pages-base-url: librecodecoop.github.io/site-preview + deploy-repository: LibreCodeCoop/site-preview + preview-branch: main + wait-for-pages-deployment: false + token: ${{ secrets.PREVIEW_TOKEN }} + comment: ${{ github.event.pull_request.user.type != 'Bot' }} diff --git a/config.php b/config.php index 6eb422c8..aa15dfe4 100644 --- a/config.php +++ b/config.php @@ -5,6 +5,9 @@ return [ 'production' => false, 'matomo_container' => 'Ux1Y5m98_dev_08f02616a270a3d80b35beb7', + // Public client-side widget identifier (not a secret): it is always visible in the rendered HTML. + // Kept in config so it is configurable per environment, like matomo_container. + 'chatwoot_token' => '1FWLmSUAXnZd8qhUB5rsPCdq', 'baseUrl' => '/', 'title' => 'LibreCode', 'description' => 'Cooperativa de tecnologia da informação especializada em desenvolvimento de soluções com licença livre.', diff --git a/package-lock.json b/package-lock.json index 57cdf19b..10d9622b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "animate.css": "^4.1.0", "bootstrap": "^5.0.0", "glightbox": "^3.1.0", + "gsap": "^3.12.5", "ionicons": "^5.0.1", "isotope-layout": "^3.0.6", "jquery": "^3.5.1", @@ -2750,6 +2751,16 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/ansis": { + "version": "3.17.0", + "resolved": "https://registry.npmjs.org/ansis/-/ansis-3.17.0.tgz", + "integrity": "sha512-0qWUglt9JEqLFr3w1I1pbrChn1grhaiAR2ocX1PP/flRmxgtwTzPFFFnfIlD6aMOLQZgSuCRlidD70lvx8yhzg==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + } + }, "node_modules/any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", @@ -4007,10 +4018,14 @@ } }, "node_modules/consola": { - "version": "2.15.3", - "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz", - "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==", - "dev": true + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz", + "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^14.18.0 || >=16.10.0" + } }, "node_modules/console-browserify": { "version": "1.2.0", @@ -5921,6 +5936,11 @@ "integrity": "sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==", "dev": true }, + "node_modules/gsap": { + "version": "3.12.5", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz", + "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==" + }, "node_modules/handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", @@ -11339,21 +11359,31 @@ } }, "node_modules/webpackbar": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-5.0.2.tgz", - "integrity": "sha512-BmFJo7veBDgQzfWXl/wwYXr/VFus0614qZ8i9znqcl9fnEdiVkdbi0TedLQ6xAK92HZHDJ0QmyQ0fmuZPAgCYQ==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-7.0.0.tgz", + "integrity": "sha512-aS9soqSO2iCHgqHoCrj4LbfGQUboDCYJPSFOAchEK+9psIjNrfSWW4Y0YEz67MKURNvMmfo0ycOg9d/+OOf9/Q==", "dev": true, + "license": "MIT", "dependencies": { - "chalk": "^4.1.0", - "consola": "^2.15.3", + "ansis": "^3.2.0", + "consola": "^3.2.3", "pretty-time": "^1.1.0", - "std-env": "^3.0.1" + "std-env": "^3.7.0" }, "engines": { - "node": ">=12" + "node": ">=14.21.3" }, "peerDependencies": { + "@rspack/core": "*", "webpack": "3 || 4 || 5" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } } }, "node_modules/websocket-driver": { diff --git a/package.json b/package.json index 83a587bd..d88c374a 100644 --- a/package.json +++ b/package.json @@ -17,10 +17,14 @@ "sass-loader": "^12.6.0", "tailwindcss": "^3.1.6" }, + "overrides": { + "webpackbar": "^7.0.0" + }, "dependencies": { "animate.css": "^4.1.0", "bootstrap": "^5.0.0", "glightbox": "^3.1.0", + "gsap": "^3.12.5", "ionicons": "^5.0.1", "isotope-layout": "^3.0.6", "jquery": "^3.5.1", diff --git a/source/_assets/js/main.js b/source/_assets/js/main.js index adc8e469..0f3517c9 100644 --- a/source/_assets/js/main.js +++ b/source/_assets/js/main.js @@ -15,9 +15,52 @@ import '../../../source/assets/lib/mobile-nav/mobile-nav.js'; import '../../../source/assets/lib/easing/easing.min.js'; import '../../../source/assets/lib/waypoints/waypoints.min.js'; +// Exposed as globals so librecode-motion.js (a plain, non-module script) can use them. +import { gsap } from 'gsap'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; +import { ScrollToPlugin } from 'gsap/ScrollToPlugin'; +gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); +window.gsap = gsap; +window.ScrollTrigger = ScrollTrigger; +window.ScrollToPlugin = ScrollToPlugin; + (function ($) { "use strict"; + function normalizePath(path) { + return path.replace(/\/+$/, '') || '/'; + } + + function headerHeight() { + return $('#header').outerHeight() || 0; + } + + // Smooth scroll via GSAP ScrollToPlugin, falling back to jQuery. + function smoothScrollTo(scrollTop) { + var targetScroll = Math.max(0, scrollTop); + + $('html, body').stop(true); + if (window.gsap) { + window.gsap.killTweensOf(window); + } + + if (window.gsap && window.ScrollToPlugin) { + window.gsap.to(window, { + duration: 0.9, + ease: 'power3.inOut', + overwrite: 'auto', + scrollTo: { y: targetScroll, autoKill: false }, + onUpdate: function () { + if (window.ScrollTrigger) { + window.ScrollTrigger.update(); + } + } + }); + } else { + $('html, body').animate({ scrollTop: targetScroll }, 900, 'easeInOutExpo'); + } + } + // Preloader (if the #preloader div exists) $(window).on('load', function () { if ($('#preloader').length) { @@ -36,7 +79,7 @@ import '../../../source/assets/lib/waypoints/waypoints.min.js'; } }); $('.back-to-top').click(function(){ - $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo'); + smoothScrollTo(0); return false; }); @@ -58,47 +101,53 @@ import '../../../source/assets/lib/waypoints/waypoints.min.js'; $('#header').addClass('header-scrolled'); } - // Smooth scroll for the navigation and links with .scrollto classes - $('.main-nav a, .mobile-nav a, .scrollto').on('click', function() { - if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { - var target = $(this.hash); - if (target.length) { - var top_space = 0; + // Smooth scroll for the navigation and same-page section links. + $('.main-nav a, .mobile-nav a, .scrollto, .lc-btn[href*="#"], .lc-footer a[href*="#"]').on('click', function(event) { + var href = this.getAttribute('href'); + if (!href || href === '#') return; + + try { + var url = new URL(href, window.location.href); + + if (normalizePath(url.pathname) == normalizePath(location.pathname) && url.hostname == location.hostname) { + var target = $(url.hash); + if (target.length) { + event.preventDefault(); + var top_space = 0; - if ($('#header').length) { - top_space = $('#header').outerHeight(); + if ($('#header').length) { + top_space = headerHeight(); - if (! $('#header').hasClass('header-scrolled')) { - top_space = top_space - 20; + if (! $('#header').hasClass('header-scrolled')) { + top_space = top_space - 20; + } } - } - $('html, body').animate({ - scrollTop: target.offset().top - top_space - }, 1500, 'easeInOutExpo'); + smoothScrollTo(target.offset().top - top_space); - if ($(this).parents('.main-nav, .mobile-nav').length) { - $('.main-nav .active, .mobile-nav .active').removeClass('active'); - $(this).closest('li').addClass('active'); - } + if ($(this).parents('.main-nav, .mobile-nav').length) { + $('.main-nav .active, .mobile-nav .active').removeClass('active'); + $(this).closest('li').addClass('active'); + } - if ($('body').hasClass('mobile-nav-active')) { - $('body').removeClass('mobile-nav-active'); - $('.mobile-nav-toggle i').toggleClass('fa-times fa-bars'); - $('.mobile-nav-overly').fadeOut(); + if ($('body').hasClass('mobile-nav-active')) { + $('body').removeClass('mobile-nav-active'); + $('.mobile-nav-toggle i').toggleClass('fa-times fa-bars'); + $('.mobile-nav-overly').fadeOut(); + } + return false; } - return false; } - } + } catch (e) { return; } }); // Navigation active state on scroll var nav_sections = $('section[id], main[id]'); var main_nav = $('.main-nav, .mobile-nav'); - var main_nav_height = $('#header').outerHeight(); function updateActiveNavOnScroll(current_scroll_position) { var matched = false; + var main_nav_height = headerHeight(); nav_sections.each(function() { var $section = $(this); var top = $section.offset().top - main_nav_height; @@ -106,13 +155,13 @@ import '../../../source/assets/lib/waypoints/waypoints.min.js'; if (current_scroll_position >= top && current_scroll_position <= bottom) { var id = $section.attr('id'); - var current_path = window.location.pathname.replace(/\/+$/, ''); + var current_path = normalizePath(window.location.pathname); var $link = main_nav .find('a[href$="#' + id + '"]') .filter(function() { try { var url = new URL(this.getAttribute('href'), window.location.origin); - var link_path = url.pathname.replace(/\/+$/, ''); + var link_path = normalizePath(url.pathname); return link_path === current_path; } catch (e) { return false; } }); @@ -135,20 +184,19 @@ import '../../../source/assets/lib/waypoints/waypoints.min.js'; var hadMatch = updateActiveNavOnScroll($(window).scrollTop()); if (!hadMatch && main_nav.find('li.active').length === 0) { - var current_path = window.location.pathname.replace(/\/+$/, ''); - main_nav.find('a').each(function() { + var current_path = normalizePath(window.location.pathname); + var $matches = main_nav.find('a').filter(function() { var href = this.getAttribute('href'); - if (!href || href.indexOf('#') !== -1) return; + if (!href || href.indexOf('#') !== -1) return false; try { var url = new URL(href, window.location.origin); - var link_path = url.pathname.replace(/\/+$/, ''); - if (link_path === current_path) { - main_nav.find('li').removeClass('active'); - $(this).parent('li').addClass('active'); - return false; - } - } catch (e) { console.log(e); } + return normalizePath(url.pathname) === current_path; + } catch (e) { return false; } }); + if ($matches.length) { + main_nav.find('li').removeClass('active'); + $matches.parent('li').addClass('active'); + } } }); @@ -175,4 +223,3 @@ import '../../../source/assets/lib/waypoints/waypoints.min.js'; }); })(jQuery); - diff --git a/source/_assets/sass/main.scss b/source/_assets/sass/main.scss index cdbf6851..ffa0e3cb 100644 --- a/source/_assets/sass/main.scss +++ b/source/_assets/sass/main.scss @@ -1,5 +1,12 @@ @import "~bootstrap/scss/bootstrap"; @import "../../../node_modules/lineicons/web-font/lineicons.css"; + +/*-------------------------------------------------------------- +# Base overrides (win over Bootstrap's reboot) +--------------------------------------------------------------*/ +a { text-decoration: none; } // BS5 reboot underlines links; ours don't +:root { scroll-behavior: auto; } // GSAP owns smooth scroll, not the CSS + /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ @@ -115,52 +122,6 @@ h6 { } } -/*-------------------------------------------------------------- -# Header ---------------------------------------------------------------*/ - -#header { - height: 80px; - transition: all 0.5s; - z-index: 997; - transition: all 0.5s; - padding: 20px 0; - background: #fff; - box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3); -} - -#header.header-scrolled, -#header.header-pages { - height: 60px; - padding: 10px 0; -} - -#header .logo h1 { - font-size: 36px; - margin: 0; - padding: 0; - line-height: 1; - font-weight: 400; - letter-spacing: 3px; - text-transform: uppercase; -} - -#header .logo h1 a, -#header .logo h1 a:hover { - color: #00366f; - text-decoration: none; -} - -#header .logo img { - padding: 0; - //margin: 7px 0; - max-height: 46px; -} - -.main-pages { - margin-top: 60px; -} - /*-------------------------------------------------------------- # Blog Posts Section --------------------------------------------------------------*/ @@ -225,330 +186,6 @@ h6 { padding: auto; } -/*-------------------------------------------------------------- -# Intro Section ---------------------------------------------------------------*/ - -#intro { - width: 100%; - position: relative; - background: url("../../images/icone2.png") repeat; - background-color: #d8d7d7ff; - padding: 180px 0 90px 0; -} - -#intro .intro-img { - width: 50%; - float: right; -} - -#intro .intro-info { - /* width: 50%; */ - /* float: left; */ - text-align: center; -} - -#intro .intro-info p { - color: #e5332a;; - text-align: left; - font-size: 25px; -} - -#intro .intro-info h2 { - padding: 20px; - font-size: 70px; - text-align: left; -} - -#intro .intro-info h3 { - text-align: left; - font-size: 60px; -} - -#intro .intro-info h2 span { - text-decoration: underline; -} - -#intro .intro-info h3 span { - text-decoration: underline; -} - -#intro .intro-info .btn-get-started, -#intro .intro-info .btn-services { - font-family: "Montserrat", sans-serif; - font-size: 14px; - font-weight: 600; - letter-spacing: 1px; - display: inline-block; - padding: 10px 32px; - border-radius: 50px; - transition: 0.5s; - margin: 0 20px 20px 0; - color: #fff; -} - -#intro .intro-info .btn-get-started { - background: #e5332aff; - border: 2px solid #e5332aff; - color: #fff; -} - -#intro .intro-info .btn-get-started:hover { - background: none; - border-color: #fff; - color: #fff; -} - -#intro .intro-info .btn-services { - border: 2px solid #fff; -} - -#intro .intro-info .btn-services:hover { - background: #e5332aff; - border-color: #e5332aff; - color: #fff; -} - -/*-------------------------------------------------------------- -# Navigation Menu ---------------------------------------------------------------*/ - -/* Desktop Navigation */ - -.main-nav { - /* Drop Down */ - /* Deep Drop Down */ -} - -.main-nav, -.main-nav * { - margin: 0; - padding: 0; - list-style: none; -} - -.main-nav > ul > li { - position: relative; - white-space: nowrap; - float: left; -} - -.main-nav a { - display: block; - position: relative; - color: #e5332aff; - padding: 10px 15px; - transition: 0.3s; - font-size: 14px; - font-family: "Montserrat", sans-serif; - font-weight: 500; -} - -.main-nav a:hover, -.main-nav .active > a, -.main-nav li:hover > a { - color: #e5332aff; - text-decoration: none; -} - -.main-nav > ul > li > a::after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: -20px; - height: 3px; - background: transparent; - transform: scaleX(0); - transform-origin: left center; - transition: transform 0.25s ease, background-color 0.25s ease, bottom 0.5s ease; - border-radius: 2px; - will-change: bottom; -} - -.main-nav > ul > li.active > a::after { - background: #e5332aff; - transform: scaleX(1); -} - -#header.header-scrolled .main-nav > ul > li > a::after, -#header.header-pages .main-nav > ul > li > a::after { - bottom: -10px; -} - -.main-nav > ul > li.active > a { - font-weight: 600; -} - -.main-nav .drop-down ul { - display: block; - position: absolute; - left: 0; - top: calc(100% + 30px); - z-index: 99; - opacity: 0; - visibility: hidden; - padding: 10px 0; - background: #fff; - box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); - transition: ease all 0.3s; -} - -.main-nav .drop-down:hover > ul { - opacity: 1; - top: 100%; - visibility: visible; -} - -.main-nav .drop-down li { - min-width: 180px; - position: relative; -} - -.main-nav .drop-down ul a { - padding: 10px 20px; - font-size: 13px; - color: #004289; -} - -.main-nav .drop-down ul a:hover, -.main-nav .drop-down ul .active > a, -.main-nav .drop-down ul li:hover > a { - color: #e5332aff; -} - -.main-nav .drop-down > a:after { - content: "\f107"; - font-family: FontAwesome; - padding-left: 10px; -} - -.main-nav .drop-down .drop-down ul { - top: 0; - left: calc(100% - 30px); -} - -.main-nav .drop-down .drop-down:hover > ul { - opacity: 1; - top: 0; - left: 100%; -} - -.main-nav .drop-down .drop-down > a { - padding-right: 35px; -} - -.main-nav .drop-down .drop-down > a:after { - content: "\f105"; - position: absolute; - right: 15px; -} - -/* Mobile Navigation */ - -.mobile-nav { - position: fixed; - top: 0; - bottom: 0; - z-index: 9999; - overflow-y: auto; - left: -260px; - width: 260px; - padding-top: 18px; - background: rgba(19, 39, 57, 0.8); - transition: 0.4s; -} - -.mobile-nav * { - margin: 0; - padding: 0; - list-style: none; -} - -.mobile-nav a { - display: block; - position: relative; - color: #fff; - padding: 10px 20px; - font-weight: 500; -} - -.mobile-nav a:hover, -.mobile-nav .active > a, -.mobile-nav li:hover > a { - color: #74b5fc; - text-decoration: none; -} - -.mobile-nav .drop-down > a:after { - content: "\f078"; - font-family: FontAwesome; - padding-left: 10px; - position: absolute; - right: 15px; -} - -.mobile-nav .active.drop-down > a:after { - content: "\f077"; -} - -.mobile-nav .drop-down > a { - padding-right: 35px; -} - -.mobile-nav .drop-down ul { - display: none; - overflow: hidden; -} - -.mobile-nav .drop-down li { - padding-left: 20px; -} - -.mobile-nav-toggle { - position: fixed; - right: 0; - top: 0; - z-index: 9998; - border: 0; - background: none; - font-size: 24px; - transition: all 0.4s; - outline: none !important; - line-height: 1; - cursor: pointer; - text-align: right; -} - -.mobile-nav-toggle i { - margin: 18px 18px 0 0; - color: #004289; -} - -.mobile-nav-overly { - width: 100%; - height: 100%; - z-index: 9997; - top: 0; - left: 0; - position: fixed; - background: rgba(19, 39, 57, 0.8); - overflow: hidden; - display: none; -} - -.mobile-nav-active { - overflow: hidden; -} - -.mobile-nav-active .mobile-nav { - left: 0; -} - -.mobile-nav-active .mobile-nav-toggle i { - color: #fff; -} - /*-------------------------------------------------------------- # Sections --------------------------------------------------------------*/ @@ -1405,211 +1042,16 @@ h6 { max-width: 400px; } /*-------------------------------------------------------------- -# Footer +# Responsive Media Queries --------------------------------------------------------------*/ -#footer { - background: #e5332aff; - padding: 30px; - color: #eee; -} - -#footer .container{ - padding-top: 30px; - padding-bottom: 30px; -} - -#footer .footer-top { - background: #e5332aff; -} - -#footer .footer-top .footer-info { - margin-bottom: 30px; -} - -#footer .footer-top .footer-info h3 { - font-size: 34px; - margin: 0 0 20px 0; - padding: 2px 0 2px 0; - line-height: 1; - font-family: "Montserrat", sans-serif; - color: #fff; - font-weight: 400; - letter-spacing: 3px; -} - -#footer .footer-top .footer-info p { - font-size: 13px; - line-height: 24px; - margin-bottom: 0; - font-family: "Montserrat", sans-serif; - color: #ecf5ff; -} - -#footer .footer-top .social-links a { - font-size: 18px; - display: inline-block; - color: #fff; - line-height: 1; - padding: 8px 0; - margin-right: 4px; - border-radius: 50%; - text-align: center; - width: 36px; - height: 36px; - transition: 0.3s; -} - -#footer .footer-top .social-links a:hover { - background: #7c7b7bff; - color: #fff; -} - -#footer .footer-top h4 { - font-size: 14px; - font-weight: bold; - color: #fff; - text-transform: uppercase; - position: relative; - padding-bottom: 10px; -} - -#footer .footer-top .footer-links { - margin-bottom: 30px; -} - -#footer .footer-top .footer-links ul { - list-style: none; - padding: 0; - margin: 0; -} - -#footer .footer-top .footer-links ul li { - padding: 8px 0; -} - -#footer .footer-top .footer-links ul li:first-child { - padding-top: 0; -} - -#footer .footer-top .footer-links ul a { - color: #ecf5ff; -} - -#footer .footer-top .footer-links ul a:hover { - color: #74b5fc; -} - -.footer-top .container { - display: flex; - flex-direction: column; - - .row { - justify-content: space-between; - - img { - height: auto; - } - } - - .item { - display: flex; - justify-content: center; - margin-top: 25px; - } -} - -#footer .footer-top .footer-contact { - margin-bottom: 30px; -} - -#footer .footer-top .footer-contact p { - line-height: 26px; -} - -#footer .footer-top .footer-newsletter { - margin-bottom: 30px; -} - -#footer .footer-top .footer-newsletter input[type="email"] { - border: 0; - padding: 6px 8px; - width: 65%; -} - - -#footer .footer-top .footer-newsletter input[type="submit"] { - background: #e5332aff; - border: 0; - width: 35%; - padding: 6px 0; - text-align: center; - color: #fff; - transition: 0.3s; - cursor: pointer; -} - -#footer .footer-top .footer-newsletter input[type="submit"]:hover { - background: #0062cc; -} - -#footer .copyright { - text-align: center; - /* padding-top: 30px; */ -} - -#footer .credits { - text-align: center; - font-size: 13px; - color: #f1f7ff; -} - -#footer .credits a { - color: #bfddfe; -} - -#footer .credits a:hover { - color: #f1f7ff; -} - -/*-------------------------------------------------------------- -# Responsive Media Queries ---------------------------------------------------------------*/ - -@media (min-width: 992px) { - #testimonials .testimonial-item p { - width: 80%; - } +@media (min-width: 992px) { + #testimonials .testimonial-item p { + width: 80%; + } } @media (max-width: 991px) { - #header { - height: 60px; - padding: 10px 0; - } - - #header .logo h1 { - font-size: 28px; - padding: 8px 0; - } - - #intro { - padding: 140px 0 60px 0; - } - - #intro .intro-img { - width: 80%; - float: none; - margin: 0 auto 25px auto; - } - - #intro .intro-info { - width: 80%; - float: none; - margin: auto; - text-align: center; - } - #why-us .card { margin: 0; } @@ -1622,18 +1064,6 @@ h6 { } @media (max-width: 767px) { - #intro .intro-info { - width: 100%; - } - - #intro .intro-info h2 { - font-size: 34px; - } - - #intro .intro-info p { - font-size: 20px; - } - .section-header p { width: 100%; } @@ -1655,18 +1085,12 @@ h6 { } @media (max-width: 574px) { - #intro { - padding: 100px 0 20px 0; - } .products img{ max-width: 350px; } } @media (max-width: 280px) { - #intro { - padding: 100px 0 20px 0; - } .products img{ max-width: 250px; } @@ -1798,3 +1222,2295 @@ End blog page style /*----------------------------------------------------- End contact page */ + + + +/*-------------------------------------------------------------- +# Design tokens +--------------------------------------------------------------*/ +:root { + --ink: #0b0d12; + --ink-1: #0f121a; + --ink-2: #161a26; + --ink-3: #1e2333; + --ink-line: rgba(255, 255, 255, 0.09); + --ink-line-2: rgba(255, 255, 255, 0.14); + + --paper: #eef0f4; + --paper-1: #f6f7f9; + --paper-line: rgba(11, 13, 18, 0.10); + + --red: #e5332a; + --red-2: #ff4b3e; + --red-glow: rgba(229, 51, 42, 0.45); + + --dpg: #7ad3de; /* teal do selo DPG */ + --dpg-deep: #3333ab; /* índigo do selo DPG */ + + --on-ink: #e9ebf2; + --on-ink-soft: #c3c9d6; + --on-ink-faint: #8b93a6; + --on-paper: #12141b; + --on-paper-soft: #4c5261; + + --font-display: "Space Grotesk", "Montserrat", sans-serif; + --font-body: "Instrument Sans", "Open Sans", system-ui, sans-serif; + --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace; + + --shell: min(1240px, 92vw); + --ease: cubic-bezier(0.22, 1, 0.36, 1); +} + +/*-------------------------------------------------------------- + Base +--------------------------------------------------------------*/ +/* Keep native smooth-scroll off — JS (GSAP ScrollToPlugin) owns it; + `smooth` here would hijack the JS scroll and stall it. */ +html { scroll-behavior: auto; } + +body { + font-family: var(--font-body); + color: var(--on-paper); + background: var(--paper); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + overflow-x: hidden; +} + +body, +h1, h2, h3, h4, h5, h6, p { + font-family: var(--font-body); +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 600; + letter-spacing: -0.02em; + line-height: 1.04; +} + +a { color: var(--red); } +a:hover, a:focus { color: var(--red-2); } + +::selection { background: var(--red); color: #fff; } + +a:focus-visible, +button:focus-visible, +.lc-btn:focus-visible, +[tabindex]:focus-visible { + outline: 2px solid var(--red-2); + outline-offset: 3px; + border-radius: 4px; +} + +.lc-skip { + position: absolute; + left: 12px; top: -60px; + z-index: 2000; + background: var(--red); + color: #fff; + padding: 10px 18px; + border-radius: 8px; + font: 600 14px/1 var(--font-mono); + transition: top 0.25s var(--ease); +} +.lc-skip:focus { top: 12px; color: #fff; } + +.lc-progress { + position: fixed; + inset: 0 auto auto 0; + height: 2px; + width: 100%; + transform: scaleX(0); + transform-origin: 0 50%; + background: linear-gradient(90deg, var(--red), var(--red-2)); + z-index: 1200; +} + +/*-------------------------------------------------------------- + Shared building blocks +--------------------------------------------------------------*/ +.lc-shell { width: var(--shell); margin-inline: auto; } + +.lc-eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + font: 500 12.5px/1 var(--font-mono); + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--red); + margin: 0 0 22px; +} +.lc-eyebrow::before { + content: ""; + width: 26px; height: 1px; + background: currentColor; + opacity: 0.7; +} +.lc-eyebrow--index { color: var(--on-ink-faint); } +.lc-eyebrow--index b { color: var(--red); font-weight: 600; } + +.lc-section { + position: relative; + padding: clamp(80px, 12vw, 150px) 0; +} +.lc-section--ink { background: var(--ink); color: var(--on-ink); } +.lc-section--paper { background: var(--paper); color: var(--on-paper); } + +/* Scoped per-id so inner pages that reuse these ids with legacy markup keep their own look. */ +#about.lc-section, #why-us.lc-section, #apoie.lc-section { + background: var(--ink); color: var(--on-ink); + padding: clamp(80px, 12vw, 150px) 0; +} +#clients.lc-section, #contact.lc-section { + background: var(--paper); color: var(--on-paper); + padding: clamp(80px, 12vw, 150px) 0; +} +#about.lc-section h1, #about.lc-section h2, #about.lc-section h3, +#why-us.lc-section h1, #why-us.lc-section h2, #why-us.lc-section h3, +#apoie.lc-section h1, #apoie.lc-section h2, #apoie.lc-section h3 { color: #fff; } + +#why-us.lc-section .lc-head p, +#why-us.lc-section .lc-solution p, +#why-us.lc-section .lc-tools-head p, +#why-us.lc-section .lc-tool p, +#why-us.lc-section .lc-tools-cta p { color: var(--on-ink-soft); } + +.lc-section--ink h1, .lc-section--ink h2, .lc-section--ink h3, +.lc-section--ink h4 { color: #fff; } + +.lc-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); } +.lc-head h2 { + font-size: clamp(2.1rem, 5.2vw, 3.6rem); + margin: 0 0 18px; +} +.lc-head p { + font-size: clamp(1rem, 1.4vw, 1.18rem); + line-height: 1.6; + color: var(--on-ink-soft); + margin: 0; +} +.lc-section--paper .lc-head p { color: var(--on-paper-soft); } + +.lc-accent { color: var(--red); } + +/*-------------------------------------------------------------- + Buttons +--------------------------------------------------------------*/ +.lc-btn { + --bg: var(--red); + --fg: #fff; + display: inline-flex; + align-items: center; + gap: 12px; + padding: 15px 26px; + border-radius: 100px; + font: 600 15px/1 var(--font-body); + letter-spacing: 0.005em; + color: var(--fg); + background: var(--bg); + border: 1px solid transparent; + cursor: pointer; + text-decoration: none; + transition: transform 0.35s var(--ease), background 0.3s var(--ease), + box-shadow 0.35s var(--ease), color 0.3s var(--ease); + will-change: transform; +} +.lc-btn:link, +.lc-btn:visited, +.lc-btn:hover, +.lc-btn:focus, +.lc-btn:active { + color: var(--fg); + text-decoration: none; +} +.lc-btn:hover { + color: #fff; + box-shadow: 0 14px 40px -12px var(--red-glow); + transform: translateY(-2px); +} +.lc-btn .lc-btn__arrow { transition: transform 0.35s var(--ease); } +.lc-btn:hover .lc-btn__arrow { transform: translateX(4px); } + +.lc-btn--ghost { + --bg: transparent; + --fg: var(--on-ink); + border-color: var(--ink-line-2); +} +.lc-btn--ghost:hover { + background: rgba(255, 255, 255, 0.06); + border-color: var(--on-ink-soft); + box-shadow: none; +} +.lc-section--paper .lc-btn--ghost { + --fg: var(--on-paper); + border-color: var(--paper-line); +} +.lc-section--paper .lc-btn--ghost:hover { + background: rgba(11, 13, 18, 0.04); +} + +/*-------------------------------------------------------------- + Header / Navigation (glass, adaptive) +--------------------------------------------------------------*/ +#header { + height: 74px; + padding: 0; + background: rgba(11, 13, 18, 0.78); + backdrop-filter: saturate(160%) blur(16px); + -webkit-backdrop-filter: saturate(160%) blur(16px); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: none; + transition: height 0.4s var(--ease), background 0.4s var(--ease), + border-color 0.4s var(--ease); +} +#header .container { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} +#header.header-scrolled, +#header.header-pages { + height: 62px; + padding: 0; + background: rgba(11, 13, 18, 0.92); + backdrop-filter: saturate(160%) blur(20px); + -webkit-backdrop-filter: saturate(160%) blur(20px); + border-bottom-color: rgba(255, 255, 255, 0.09); +} +#header .logo { float: none; margin: 0; } +#header .logo img { + max-height: 34px; + width: auto; + transition: max-height 0.4s var(--ease); +} +#header.header-scrolled .logo img { max-height: 30px; } + +.main-nav { float: none; } +.main-nav > ul { + display: flex; + align-items: center; + gap: 4px; + margin: 0; padding: 0; + list-style: none; +} +.main-nav a { + position: relative; + display: block; + padding: 9px 14px; + font: 500 14.5px/1 var(--font-body); + color: var(--on-ink-soft); + letter-spacing: 0.01em; + border-radius: 8px; + text-decoration: none; + transition: color 0.25s var(--ease), background 0.25s var(--ease); +} +.main-nav a::after { display: none; } +.main-nav a:hover, +.main-nav a:focus, +.main-nav a:active, +.main-nav .active > a { + color: #fff; + background: rgba(255, 255, 255, 0.06); + text-decoration: none; +} +.main-nav .active > a { color: var(--red-2); } +.main-nav > ul > li:last-child > a { + color: #fff; + background: var(--red); + margin-left: 8px; + padding-inline: 18px; +} +.main-nav > ul > li:last-child > a:hover { + background: var(--red-2); + color: #fff; +} + +/* Mobile nav (generated by mobile-nav.js from .main-nav) */ +.mobile-nav-toggle { + position: fixed; + top: 16px; right: 16px; + z-index: 1100; + width: 44px; height: 44px; + display: none; + align-items: center; + justify-content: center; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 12px; + background: rgba(11, 13, 18, 0.7); + backdrop-filter: blur(10px); + color: #fff; + cursor: pointer; +} +.mobile-nav-toggle i { color: #fff; font-size: 20px; } + +.mobile-nav { + position: fixed; + top: 0; right: 0; bottom: 0; + z-index: 1099; + width: min(320px, 82vw); + padding: 84px 22px 30px; + background: var(--ink-1); + border-left: 1px solid var(--ink-line); + overflow-y: auto; + transform: translateX(105%); + transition: transform 0.5s var(--ease); +} +.mobile-nav ul { list-style: none; margin: 0; padding: 0; } +.mobile-nav a { + display: block; + padding: 14px 12px; + font: 500 17px/1 var(--font-display); + color: var(--on-ink); + border-bottom: 1px solid var(--ink-line); + text-decoration: none; + transition: color 0.2s, padding-left 0.25s var(--ease); +} +.mobile-nav a:hover, +.mobile-nav a:focus, +.mobile-nav a:active { + color: var(--red-2); + padding-left: 20px; + text-decoration: none; +} +.mobile-nav .active > a { + color: var(--red-2); + padding-left: 20px; + background: rgba(255, 255, 255, 0.06); + border-left: 3px solid var(--red); +} +.mobile-nav-active .mobile-nav { transform: translateX(0); } +.mobile-nav-overly { + position: fixed; + inset: 0; + z-index: 1098; + background: rgba(5, 6, 9, 0.6); + backdrop-filter: blur(3px); + display: none; +} + +@media (max-width: 991px) { + .mobile-nav-toggle { display: flex; } +} + +/* Clear the fixed header on pages that open straight into content + (blog list, article detail, job detail) */ +#intro-blog { padding-top: 120px; padding-bottom: 16px; } +main.size-jobs-page { padding-top: 100px; } + +/*-------------------------------------------------------------- + HERO +--------------------------------------------------------------*/ +#intro, +.lc-hero { + position: relative; + min-height: 100svh; + padding: 120px 0 clamp(96px, 12vh, 132px); + display: flex; + align-items: center; + background: var(--ink); + color: var(--on-ink); + overflow: hidden; + isolation: isolate; +} +#intro::before, +.lc-hero::before { + content: ""; + position: absolute; + inset: 0; + z-index: -2; + background-image: + linear-gradient(var(--ink-line) 1px, transparent 1px), + linear-gradient(90deg, var(--ink-line) 1px, transparent 1px); + background-size: 64px 64px; + mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 100%); + -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 100%); + opacity: 0.7; +} +#intro::after, +.lc-hero::after { + content: ""; + position: absolute; + z-index: -2; + top: -20%; left: 50%; + width: 900px; height: 900px; + transform: translateX(-50%); + background: radial-gradient(circle, var(--red-glow) 0%, transparent 62%); + opacity: 0.28; + filter: blur(20px); + pointer-events: none; +} + +.lc-hero__inner { width: var(--shell); margin-inline: auto; position: relative; } + +.lc-hero__eyebrow { margin-bottom: 30px; } + +.lc-hero h1, +#intro .intro-info h2 { + font-family: var(--font-display); + font-weight: 600; + font-size: clamp(2.6rem, 8.2vw, 6.2rem); + line-height: 0.98; + letter-spacing: -0.03em; + margin: 0 0 28px; + color: #fff; + text-align: left; + padding: 0; + max-width: 15ch; +} +.lc-hero h1 .lc-accent, +#intro .intro-info h2 span { color: var(--red); font-style: normal; } + +/* padding-bottom keeps the overflow mask from clipping descenders (g, p, ç); + the negative margin preserves the line rhythm. */ +.lc-line { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; } +.lc-line > span { display: inline-block; will-change: transform; } + +.lc-hero__lead, +#intro .intro-info p { + font-size: clamp(1.05rem, 1.7vw, 1.4rem); + line-height: 1.55; + color: var(--on-ink-soft); + max-width: 44ch; + margin: 0 0 40px; + text-align: left; +} + +.lc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } + +.lc-terminal { + margin-top: 46px; + width: min(520px, 100%); + border: 1px solid var(--ink-line-2); + border-radius: 14px; + background: rgba(255, 255, 255, 0.02); + overflow: hidden; + box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8); +} +.lc-terminal__bar { + display: flex; + align-items: center; + gap: 7px; + padding: 12px 16px; + border-bottom: 1px solid var(--ink-line); +} +.lc-terminal__bar i { + width: 11px; height: 11px; border-radius: 50%; + background: #3a3f4d; display: inline-block; +} +.lc-terminal__bar i:first-child { background: var(--red); } +.lc-terminal__bar span { + margin-left: auto; + font: 500 11px/1 var(--font-mono); + color: var(--on-ink-faint); + letter-spacing: 0.1em; +} +.lc-terminal__body { + padding: 18px 18px 22px; + font: 400 14px/1.7 var(--font-mono); + color: var(--on-ink); + min-height: 96px; +} +.lc-terminal__body .p { color: var(--red-2); } +.lc-terminal__body .o { color: var(--on-ink-soft); } +.lc-caret { + display: inline-block; + width: 8px; height: 1.05em; + vertical-align: text-bottom; + background: var(--red-2); + margin-left: 2px; + animation: lc-blink 1s steps(1) infinite; +} +@keyframes lc-blink { 50% { opacity: 0; } } + +.lc-scrollcue { + position: absolute; + left: 50%; bottom: 26px; + transform: translateX(-50%); + display: flex; flex-direction: column; align-items: center; gap: 8px; + font: 500 11px/1 var(--font-mono); + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--on-ink-faint); + text-align: center; +} +.lc-scrollcue span { + width: 1px; height: 42px; + background: linear-gradient(var(--red), transparent); +} + +/*-------------------------------------------------------------- + Marquee (principles / clients) +--------------------------------------------------------------*/ +.lc-marquee { + overflow: hidden; + white-space: nowrap; + -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); + mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); +} +.lc-marquee__track { + display: inline-flex; + align-items: center; + will-change: transform; +} + +.lc-principles { + background: var(--red); + color: #fff; + padding: 26px 0; +} +.lc-principles .lc-marquee__track > span { + font: 600 clamp(0.95rem, 2vw, 1.4rem)/1 var(--font-display); + letter-spacing: -0.01em; + padding: 0 30px; + display: inline-flex; + align-items: center; + gap: 30px; +} +.lc-principles .lc-marquee__track > span::after { + content: ""; + width: 9px; height: 9px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.55); +} + +.lc-clients-row { margin-top: 12px; } +.lc-clients-row .lc-marquee__track > .lc-client { + flex: 0 0 auto; + height: 66px; + margin: 0 34px; + display: inline-flex; + align-items: center; +} +.lc-client img { + max-height: 54px; + max-width: 150px; + width: auto; + object-fit: contain; + filter: grayscale(1) contrast(0.9); + opacity: 0.62; + transition: filter 0.4s var(--ease), opacity 0.4s var(--ease); +} +.lc-client img:hover { filter: none; opacity: 1; } + +/*-------------------------------------------------------------- + About (two "why" panels) +--------------------------------------------------------------*/ +.lc-why { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } +.lc-why__card { + position: relative; + padding: 40px; + border: 1px solid var(--ink-line); + border-radius: 20px; + background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); + overflow: hidden; +} +.lc-why__card::before { + content: ""; + position: absolute; + inset: 0 auto auto 0; + width: 100%; height: 3px; + background: linear-gradient(90deg, var(--red), transparent 70%); + transform: scaleX(0); + transform-origin: 0 50%; + transition: transform 0.6s var(--ease); +} +.lc-why__card:hover::before { transform: scaleX(1); } +.lc-why__idx { + font: 500 12px/1 var(--font-mono); + color: var(--on-ink-faint); + letter-spacing: 0.1em; + margin-bottom: 22px; +} +.lc-why__icon { + width: 62px; height: 62px; + margin-bottom: 22px; + display: flex; align-items: center; justify-content: center; + border-radius: 14px; + background: #e9ebf2; + border: 1px solid var(--ink-line); +} +.lc-why__icon img { max-width: 38px; max-height: 38px; } +.lc-why__card h3 { + font-size: clamp(1.3rem, 2.2vw, 1.7rem); + color: #fff; + margin: 0 0 16px; +} +.lc-why__card p { + color: var(--on-ink-soft); + font-size: 1rem; + line-height: 1.7; + margin: 0 0 14px; +} +.lc-why__card p:last-child { margin-bottom: 0; } +.lc-why__link { + display: inline-flex; + align-items: center; + gap: 8px; + margin-top: 20px; + font: 600 14.5px/1 var(--font-body); + color: var(--red); +} +.lc-why__link:hover { color: var(--red-2); } +.lc-why__link span { display: inline-block; transition: transform 0.35s var(--ease); } +.lc-why__link:hover span { transform: translateX(4px); } + +/*-------------------------------------------------------------- + Solutions (Apple-style stacked cards) +--------------------------------------------------------------*/ +.lc-solutions { display: flex; flex-direction: column; gap: 22px; } +.lc-solution { + position: relative; + display: grid; + grid-template-columns: 1.1fr 1fr; + align-items: center; + gap: 40px; + padding: 48px; + border-radius: 24px; + border: 1px solid var(--ink-line); + background: + radial-gradient(120% 140% at 100% 0%, rgba(229,51,42,0.10), transparent 55%), + linear-gradient(180deg, var(--ink-2), var(--ink-1)); + overflow: hidden; + transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); +} +.lc-solution:hover { border-color: var(--ink-line-2); } +.lc-solution__idx { + position: absolute; + top: 22px; right: 30px; + font: 500 12px/1 var(--font-mono); + color: var(--on-ink-faint); + letter-spacing: 0.12em; +} +.lc-solution h3 { + font-size: clamp(1.6rem, 3vw, 2.3rem); + color: #fff; + margin: 0 0 16px; +} +.lc-solution p { + color: var(--on-ink-soft); + font-size: 1.08rem; + line-height: 1.65; + margin: 0 0 30px; + max-width: 46ch; +} +.lc-solution__media { + position: relative; + aspect-ratio: 4 / 3; + border-radius: 16px; + border: 1px solid var(--ink-line); + background: + radial-gradient(circle at 50% 40%, rgba(229,51,42,0.18), transparent 62%), + var(--ink); + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} +.lc-solution__media img { + max-width: 60%; + max-height: 60%; + object-fit: contain; + filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5)); + will-change: transform; +} + +/* Selo Digital Public Good (destaque do LibreSign) */ +.lc-dpg { + display: flex; + align-items: center; + gap: 15px; + margin: -4px 0 28px; + padding: 13px 16px; + border-radius: 14px; + border: 1px solid var(--ink-line); + background: + radial-gradient(130% 200% at 0% 0%, rgba(229, 51, 42, 0.14), transparent 58%), + linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); + text-decoration: none; + color: var(--on-ink); + transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); +} +.lc-dpg:hover { + border-color: var(--ink-line-2); + transform: translateY(-2px); + color: var(--on-ink); +} +.lc-dpg__seal { + height: 30px; + width: auto; + flex: none; + opacity: 0.96; +} +.lc-dpg__text { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; +} +.lc-dpg__text b { + font: 600 0.94rem/1.2 var(--font-display); + letter-spacing: -0.01em; + color: #fff; +} +.lc-dpg__meta { + font: 500 0.68rem/1.35 var(--font-mono); + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--on-ink-faint); +} +.lc-dpg__go { + margin-left: auto; + align-self: flex-start; + font-size: 1.05rem; + color: var(--red); + transition: transform 0.3s var(--ease); +} +.lc-dpg:hover .lc-dpg__go { transform: translate(3px, -3px); } + +/*-------------------------------------------------------------- + Diferenciais (Por que a LibreCode) +--------------------------------------------------------------*/ +.lc-diff { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 22px; +} +.lc-diff__card { + position: relative; + padding: 34px; + border: 1px solid var(--ink-line); + border-radius: 18px; + background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); + overflow: hidden; + transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); +} +.lc-diff__card::before { + content: ""; + position: absolute; + inset: 0 auto auto 0; + width: 100%; height: 3px; + background: linear-gradient(90deg, var(--red), transparent 70%); + transform: scaleX(0); + transform-origin: 0 50%; + transition: transform 0.6s var(--ease); +} +.lc-diff__card:hover { border-color: var(--ink-line-2); transform: translateY(-4px); } +.lc-diff__card:hover::before { transform: scaleX(1); } +.lc-diff__icon { + width: 52px; height: 52px; + margin-bottom: 20px; + display: flex; align-items: center; justify-content: center; + border-radius: 14px; + background: #e9ebf2; + border: 1px solid var(--ink-line); + color: #0f1220; + font-size: 22px; +} +.lc-diff__card h3 { + font-size: 1.2rem; + color: #fff; + margin: 0 0 12px; +} +.lc-diff__card p { + color: var(--on-ink-soft); + font-size: 0.98rem; + line-height: 1.6; + margin: 0; +} + +/*-------------------------------------------------------------- + Tools grid (soluções complementares) +--------------------------------------------------------------*/ +.lc-tools-head { + max-width: 640px; + margin: clamp(48px, 7vw, 80px) 0 34px; +} +.lc-tools-head h3 { + font-size: clamp(1.4rem, 2.6vw, 2rem); + color: #fff; + margin: 0 0 12px; +} +.lc-tools-head p { color: var(--on-ink-soft); font-size: 1.02rem; line-height: 1.6; margin: 0; } + +.lc-tools { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 18px; +} +.lc-tool { + padding: 26px 22px; + border: 1px solid var(--ink-line); + border-radius: 16px; + background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); + transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); +} +.lc-tool:hover { border-color: var(--ink-line-2); transform: translateY(-4px); } +.lc-tool__logo { + display: inline-flex; + align-items: center; + justify-content: center; + height: 52px; + padding: 0 14px; + margin-bottom: 18px; + border-radius: 12px; + background: #fff; + border: 1px solid var(--ink-line); +} +.lc-tool__logo img { max-height: 32px; max-width: 116px; width: auto; } +.lc-tool h4 { font-size: 1.05rem; color: #fff; margin: 0 0 8px; } +.lc-tool p { color: var(--on-ink-soft); font-size: 0.9rem; line-height: 1.55; margin: 0; } + +.lc-tools-cta { + margin-top: clamp(40px, 6vw, 64px); + padding: 34px; + border: 1px solid var(--ink-line); + border-radius: 20px; + background: + radial-gradient(120% 140% at 100% 0%, rgba(229,51,42,0.10), transparent 55%), + linear-gradient(180deg, var(--ink-2), var(--ink-1)); + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + flex-wrap: wrap; +} +.lc-tools-cta p { color: var(--on-ink-soft); font-size: 1.1rem; margin: 0; max-width: 52ch; } + +/*-------------------------------------------------------------- + Apoie +--------------------------------------------------------------*/ +.lc-support { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 40px; + align-items: center; + padding: 52px; + border-radius: 24px; + border: 1px solid var(--ink-line); + background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); +} +.lc-support__badge { + width: 96px; height: 96px; + border-radius: 22px; + display: flex; align-items: center; justify-content: center; + background: rgba(255,255,255,0.04); + border: 1px solid var(--ink-line); + margin-bottom: 26px; +} +.lc-support__badge i { font-size: 46px; color: #fff; } +.lc-support h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: #fff; margin: 0 0 16px; } +.lc-support p { color: var(--on-ink-soft); line-height: 1.7; margin: 0 0 28px; } +.lc-support__aside { + border-left: 1px solid var(--ink-line); + padding-left: 34px; +} +.lc-support__aside p { + font: 500 13px/1.6 var(--font-mono); + color: var(--on-ink-faint); + letter-spacing: 0.02em; +} + +/*-------------------------------------------------------------- + Contact +--------------------------------------------------------------*/ +#contact.lc-section--paper h1, +#contact.lc-section--paper h2, +#contact.lc-section--paper h4 { color: var(--on-paper); } + +.lc-contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: 46px; align-items: start; } + +.lc-window { + border: 1px solid var(--paper-line); + border-radius: 16px; + background: var(--paper-1); + overflow: hidden; + box-shadow: 0 24px 60px -34px rgba(11, 13, 18, 0.35); + transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); +} +.lc-window:focus-within { + border-color: var(--red); + box-shadow: 0 26px 70px -30px var(--red-glow); +} +.lc-window__bar { + display: flex; + align-items: center; + gap: 7px; + padding: 12px 16px; + border-bottom: 1px solid var(--paper-line); + background: var(--paper); +} +.lc-window__bar i { + width: 11px; height: 11px; border-radius: 50%; + background: rgba(11, 13, 18, 0.16); display: inline-block; +} +.lc-window__bar i:first-child { background: var(--red); } +.lc-window__bar span { + margin-left: auto; + font: 500 11px/1 var(--font-mono); + color: var(--on-paper-soft); + letter-spacing: 0.08em; +} +.lc-window__body { position: relative; background: #fff; } +.lc-window__body iframe { + display: block; + width: 100%; + height: 470px; + border: 0; + background: #fff; +} +.lc-window__loader { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; + background: #fff; + font: 500 12px/1 var(--font-mono); + letter-spacing: 0.08em; + color: var(--on-paper-soft); + transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease); +} +.lc-window.is-loaded .lc-window__loader { + opacity: 0; + visibility: hidden; +} +.lc-window__spinner { + width: 30px; height: 30px; + border-radius: 50%; + border: 2.5px solid var(--paper-line); + border-top-color: var(--red); + animation: lc-spin 0.8s linear infinite; +} +@keyframes lc-spin { to { transform: rotate(360deg); } } + +.lc-contact__aside { display: flex; flex-direction: column; gap: 22px; } +.lc-contact__note { + font: 500 13px/1.7 var(--font-mono); + color: var(--on-paper-soft); + margin: 6px 0 0; +} +.lc-contact__item { + display: flex; + align-items: center; + gap: 16px; + padding: 22px; + border: 1px solid var(--paper-line); + border-radius: 16px; + background: var(--paper-1); + transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); +} +.lc-contact__item:hover { border-color: var(--red); transform: translateY(-2px); } +.lc-contact__item i { + font-size: 26px; + color: var(--red); + flex: 0 0 auto; +} +.lc-contact__item .k { + display: block; + font: 500 11px/1 var(--font-mono); + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--on-paper-soft); + margin-bottom: 8px; +} +.lc-contact__item a, .lc-contact__item .v { + font-size: 1.02rem; + font-weight: 600; + color: var(--on-paper); +} +.lc-contact__item a:hover { color: var(--red); } + +/*-------------------------------------------------------------- + Footer +--------------------------------------------------------------*/ +#footer { + background: var(--ink); + color: var(--on-ink-soft); + padding: 0; + border-top: 1px solid var(--ink-line); +} +#footer .footer-top { background: transparent; padding: 0; box-shadow: none; } +.lc-footer { + width: var(--shell); + margin-inline: auto; + padding: 72px 0 34px; +} +.lc-footer__grid { + display: grid; + grid-template-columns: 1.4fr 1fr 1fr; + gap: 40px; + padding-bottom: 46px; + border-bottom: 1px solid var(--ink-line); +} +.lc-footer__brand img { max-height: 42px; margin-bottom: 20px; } +.lc-footer__brand p { + max-width: 34ch; + line-height: 1.7; + color: var(--on-ink-soft); + margin: 0 0 22px; +} +.lc-footer__coop img { max-height: 46px; opacity: 0.9; } +.lc-footer__col h4 { + font: 500 12px/1 var(--font-mono); + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--on-ink-faint); + margin: 0 0 20px; +} +.lc-footer__col ul { list-style: none; margin: 0; padding: 0; } +.lc-footer__col li { margin-bottom: 12px; } +.lc-footer__col a { + color: var(--on-ink-soft); + font-size: 0.98rem; + transition: color 0.2s, padding-left 0.25s var(--ease); +} +.lc-footer__col a:hover { color: #fff; padding-left: 5px; } + +.social-links { display: flex; gap: 12px; } +.social-links a { + width: 42px; height: 42px; + display: inline-flex; align-items: center; justify-content: center; + border: 1px solid var(--ink-line); + border-radius: 12px; + color: var(--on-ink-soft); + font-size: 18px; + transition: all 0.3s var(--ease); +} +.social-links a:hover { + color: #fff; + border-color: var(--red); + background: var(--red); + transform: translateY(-3px); +} + +.lc-footer__bottom { + display: flex; + flex-wrap: wrap; + gap: 10px 24px; + justify-content: space-between; + align-items: center; + padding-top: 26px; +} +.lc-footer__bottom, .lc-footer__bottom * { + font: 500 12.5px/1.6 var(--font-mono); + color: var(--on-ink-faint); + letter-spacing: 0.02em; +} +.lc-footer__bottom strong { color: var(--on-ink-soft); font-weight: 600; } +.lc-footer__bottom a { color: var(--on-ink-soft); } +.lc-footer__bottom a:hover { color: var(--red-2); } + +/*-------------------------------------------------------------- + Reveal states (JS-gated so content is visible without JS) +--------------------------------------------------------------*/ +html.gsap-ready [data-reveal="up"] { opacity: 0; transform: translateY(34px); } +html.gsap-ready [data-reveal="stagger"] > * { opacity: 0; transform: translateY(28px); } +/* hide title lines with opacity only — a CSS % transform would fight GSAP's yPercent */ +html.gsap-ready [data-hero-title] .lc-line > span { opacity: 0; } + +/*-------------------------------------------------------------- + Responsive +--------------------------------------------------------------*/ +@media (max-width: 991px) { + .lc-diff { grid-template-columns: repeat(2, 1fr); } + .lc-tools { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 900px) { + .lc-why { grid-template-columns: 1fr; } + .lc-solution { grid-template-columns: 1fr; padding: 34px; } + .lc-solution__media { order: -1; } + .lc-solution__idx { + position: static; + display: block; + margin: 0 0 18px; + color: var(--on-ink-soft); + } + .lc-support { grid-template-columns: 1fr; padding: 34px; } + .lc-support__aside { border-left: 0; border-top: 1px solid var(--ink-line); padding: 26px 0 0; } + .lc-contact { grid-template-columns: 1fr; } + .lc-footer__grid { grid-template-columns: 1fr 1fr; } + .lc-footer__brand { grid-column: 1 / -1; } + .lc-tools { grid-template-columns: repeat(2, 1fr); } + .lc-tools-cta { flex-direction: column; align-items: flex-start; } +} +@media (max-width: 560px) { + .lc-why__card, .lc-solution, .lc-support { padding: 26px; } + .lc-footer__grid { grid-template-columns: 1fr; } + .lc-hero__actions { width: 100%; } + .lc-hero__actions .lc-btn { flex: 1 1 auto; justify-content: center; } + .lc-diff { grid-template-columns: 1fr; } +} + +/*-------------------------------------------------------------- + Tools ecosystem — mobile carousel +--------------------------------------------------------------*/ +@media (max-width: 640px) { + .lc-tools { + display: flex; + gap: 14px; + overflow-x: auto; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + /* full-bleed track so cards peek past the shell edges */ + margin-inline: calc((100vw - var(--shell)) / -2); + padding-inline: calc((100vw - var(--shell)) / 2); + scroll-padding-inline: calc((100vw - var(--shell)) / 2); + padding-block: 4px 6px; + } + .lc-tools::-webkit-scrollbar { display: none; } + .lc-tool { + flex: 0 0 76%; + scroll-snap-align: start; + } +} + +/*-------------------------------------------------------------- + Reduced motion — quality floor +--------------------------------------------------------------*/ +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + html.gsap-ready [data-reveal="up"], + html.gsap-ready [data-reveal="stagger"] > *, + html.gsap-ready [data-hero-title] .lc-line > span { + opacity: 1 !important; + transform: none !important; + } + .lc-marquee__track { transform: none !important; } + .lc-caret { animation: none; } + *, *::before, *::after { + animation-duration: 0.001ms !important; + transition-duration: 0.001ms !important; + } +} + +/*-------------------------------------------------------------- + Nextcloud — horizontal showcase + Default is a scroll-snap carousel; JS adds `.is-pinned` on + desktop to switch to a GSAP pinned horizontal filmstrip. +--------------------------------------------------------------*/ +.nc-hero .lc-hero__lead b { color: #fff; font-weight: 600; } + +.nc-scrollcue { + font: 500 11px/1 var(--font-mono); + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.nc-showcase { + position: relative; + height: 100vh; + background: var(--ink); + color: var(--on-ink); + overflow: hidden; + isolation: isolate; +} +.nc-showcase::before { + content: ""; + position: absolute; + inset: 0; + z-index: -2; + background-image: + linear-gradient(var(--ink-line) 1px, transparent 1px), + linear-gradient(90deg, var(--ink-line) 1px, transparent 1px); + background-size: 64px 64px; + mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 35%, transparent 100%); + -webkit-mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 35%, transparent 100%); + opacity: 0.45; +} + +.nc-track { + display: flex; + height: 100vh; + overflow-x: auto; + overflow-y: hidden; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + will-change: transform; +} +.nc-track::-webkit-scrollbar { display: none; } + +/* Pinned mode: GSAP owns the x transform, so drop the native scroll. */ +.nc-showcase.is-pinned .nc-track { + overflow: visible; + scroll-snap-type: none; +} + +.nc-panel { + flex: 0 0 100%; + height: 100vh; + scroll-snap-align: start; + display: flex; + align-items: center; + padding: 108px 0 92px; /* clears the fixed header and the progress rail */ +} +.nc-panel__inner { + width: var(--shell); + margin-inline: auto; + display: grid; + grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr); + align-items: center; + gap: clamp(32px, 5vw, 72px); +} + +.nc-panel__idx { + display: inline-block; + font: 500 12.5px/1 var(--font-mono); + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--red-2); + margin-bottom: 20px; +} +.nc-panel__text h2 { + font-size: clamp(2rem, 4.2vw, 3.4rem); + color: #fff; + margin: 0 0 20px; +} +.nc-panel__text p { + font-size: clamp(1rem, 1.3vw, 1.16rem); + line-height: 1.62; + color: var(--on-ink-soft); + max-width: 42ch; + margin: 0; +} + +.nc-window { + margin: 0; + border: 1px solid var(--ink-line-2); + border-radius: 14px; + background: var(--ink-1); + overflow: hidden; + box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9), + 0 0 0 1px rgba(255, 255, 255, 0.02); +} +.nc-window__bar { + display: flex; + align-items: center; + gap: 7px; + padding: 12px 16px; + border-bottom: 1px solid var(--ink-line); + background: rgba(255, 255, 255, 0.015); +} +.nc-window__bar i { + width: 11px; height: 11px; border-radius: 50%; + background: #3a3f4d; +} +.nc-window__bar i:first-child { background: var(--red); } +.nc-window__bar em { + margin-left: 10px; + font: 500 11.5px/1 var(--font-mono); + font-style: normal; + letter-spacing: 0.06em; + color: var(--on-ink-faint); +} +.nc-window__frame { + display: block; + position: relative; + cursor: zoom-in; + overflow: hidden; + -webkit-user-drag: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; +} +.nc-window img { + display: block; + width: 100%; + height: auto; + -webkit-user-drag: none; + user-select: none; + transition: transform 0.5s var(--ease); +} +.nc-window__frame:hover img, +.nc-window__frame:focus-visible img { + transform: scale(1.03); +} +.nc-window__zoom { + position: absolute; + right: 12px; + bottom: 12px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; height: 40px; + border-radius: 10px; + background: rgba(15, 17, 23, 0.62); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border: 1px solid rgba(255, 255, 255, 0.14); + color: #fff; + font-size: 20px; + opacity: 0; + transform: translateY(6px); + transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); + pointer-events: none; +} +.nc-window__frame:hover .nc-window__zoom, +.nc-window__frame:focus-visible .nc-window__zoom { + opacity: 1; + transform: none; +} +.nc-window__zoom ion-icon { --ionicon-stroke-width: 40px; } + +@media (hover: none) { + .nc-window__zoom { opacity: 1; transform: none; } +} + +.nc-panel--intro .nc-panel__inner, +.nc-panel--outro .nc-panel__inner { + grid-template-columns: 1fr; + max-width: 820px; +} +.nc-intro__title { font-size: clamp(2.4rem, 6vw, 4.6rem); color: #fff; margin: 0 0 22px; } +.nc-intro__lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--on-ink-soft); max-width: 46ch; margin: 0 0 30px; } +.nc-intro__hint { + font: 500 12px/1 var(--font-mono); + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--red-2); +} +.nc-panel--outro h2 { font-size: clamp(2.2rem, 5vw, 4rem); color: #fff; margin: 0 0 18px; } +.nc-panel--outro p { font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--on-ink-soft); margin: 0 0 32px; max-width: 40ch; } +.nc-outro .lc-btn { justify-self: start; } + +.nc-rail { + position: absolute; + left: 50%; + bottom: clamp(22px, 4vh, 40px); + transform: translateX(-50%); + z-index: 4; + display: flex; + align-items: center; + gap: 16px; + width: var(--shell); + justify-content: center; +} +.nc-rail__label { + font: 500 11px/1 var(--font-mono); + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--on-ink-faint); + min-width: 12ch; + text-align: right; +} +.nc-rail__dots { display: flex; gap: 9px; } +.nc-rail__dots b { + position: relative; + width: 9px; height: 9px; + border-radius: 50%; + background: var(--ink-line-2); + cursor: pointer; + transition: background 0.35s var(--ease), transform 0.35s var(--ease); +} +.nc-rail__dots b::before { + content: ""; + position: absolute; + inset: -9px; + border-radius: 50%; +} +.nc-rail__dots b:hover { background: var(--red-2); } +.nc-rail__dots b.is-active { background: var(--red); transform: scale(1.35); } + +/* Reveal only in pinned mode; the JS toggles `.is-current` per panel. */ +.nc-showcase.is-pinned [data-nc-text] { + opacity: 0; + transform: translateY(26px); + transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); +} +.nc-showcase.is-pinned .nc-panel.is-current [data-nc-text] { + opacity: 1; + transform: none; +} +.nc-showcase.is-pinned .nc-panel.is-current [data-nc-text]:nth-child(2) { transition-delay: 0.08s; } +.nc-showcase.is-pinned .nc-panel.is-current [data-nc-text]:nth-child(3) { transition-delay: 0.16s; } +.nc-showcase.is-pinned .nc-panel.is-current [data-nc-text]:nth-child(4) { transition-delay: 0.24s; } + +.nc-showcase.is-pinned .nc-window { + clip-path: inset(0 100% 0 0 round 14px); + transition: clip-path 0.9s var(--ease); +} +.nc-showcase.is-pinned .nc-panel.is-current .nc-window { + clip-path: inset(0 0 0 0 round 14px); +} + +.nc-more { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; +} +.nc-more__card { + position: relative; + padding: 30px 26px; + border: 1px solid var(--ink-line); + border-radius: 16px; + background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); + overflow: hidden; + transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); +} +.nc-more__card::before { + content: ""; + position: absolute; + inset: 0 auto auto 0; + width: 100%; height: 3px; + background: linear-gradient(90deg, var(--red), transparent 70%); + transform: scaleX(0); + transform-origin: 0 50%; + transition: transform 0.6s var(--ease); +} +.nc-more__card:hover { border-color: var(--ink-line-2); transform: translateY(-4px); } +.nc-more__card:hover::before { transform: scaleX(1); } +.nc-more__icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; height: 48px; + margin-bottom: 18px; + border-radius: 12px; + background: #e9ebf2; + border: 1px solid var(--ink-line); + color: #0f1220; + font-size: 24px; +} +.nc-more__icon ion-icon { --ionicon-stroke-width: 34px; } +.nc-more__card h3 { font-size: 1.12rem; color: #fff; margin: 0 0 8px; } +.nc-more__card p { font-size: 0.95rem; line-height: 1.55; color: var(--on-ink-soft); margin: 0; } + +.nc-cta__box { + text-align: center; + max-width: 720px; + margin: 0 auto; + padding: clamp(40px, 6vw, 72px); + border: 1px solid var(--paper-line); + border-radius: 22px; + background: var(--paper-1); +} +.nc-cta__box h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); color: var(--on-paper); margin: 0 0 16px; } +.nc-cta__box p { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; color: var(--on-paper-soft); margin: 0 0 30px; } +.nc-cta__box .lc-btn { margin: 0 auto; } +.nc-trademark { + margin: 34px 0 0; + text-align: center; + font: 400 13px/1.5 var(--font-body); + color: var(--on-paper-soft); +} + +@media (max-width: 980px) { + .nc-panel__inner { grid-template-columns: 1fr; gap: 28px; } + .nc-panel { padding: 104px 0 84px; align-items: center; } + .nc-panel__text { order: 1; } + .nc-window { order: 2; max-width: 560px; } + .nc-more { grid-template-columns: repeat(2, 1fr); } +} +@media (max-width: 560px) { + .nc-showcase, .nc-track, .nc-panel { height: 100svh; } + .nc-panel { padding: 96px 0 80px; } + .nc-panel__inner { width: 88vw; } + .nc-more { grid-template-columns: 1fr; } + .nc-rail { width: 88vw; } + .nc-rail__label { display: none; } +} + +@media (prefers-reduced-motion: reduce) { + .nc-showcase.is-pinned [data-nc-text] { opacity: 1 !important; transform: none !important; } + .nc-showcase.is-pinned .nc-window { clip-path: none !important; } +} + +/*============================================================== + BLOG / JOURNAL — list + article, aligned with the redesign +==============================================================*/ + +/* ---- Compact page hero (blog list + article) ---- */ +.lc-pagehero { + position: relative; + background: var(--ink); + color: var(--on-ink); + padding: clamp(150px, 20vh, 210px) 0 clamp(60px, 9vw, 96px); + overflow: hidden; + isolation: isolate; +} +.lc-pagehero::before { + content: ""; + position: absolute; + inset: 0; + z-index: -2; + background-image: + linear-gradient(var(--ink-line) 1px, transparent 1px), + linear-gradient(90deg, var(--ink-line) 1px, transparent 1px); + background-size: 64px 64px; + mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 45%, transparent 100%); +} +.lc-pagehero::after { + content: ""; + position: absolute; + z-index: -1; + top: -40%; right: -10%; + width: 60vw; height: 60vw; + background: radial-gradient(circle, var(--red-glow), transparent 62%); + opacity: 0.5; + pointer-events: none; +} +.lc-pagehero__inner { width: var(--shell); margin-inline: auto; position: relative; } + +.lc-pagehero h1 { + font-family: var(--font-display); + font-weight: 600; + font-size: clamp(2.6rem, 6.5vw, 5rem); + line-height: 0.98; + letter-spacing: -0.03em; + color: #fff; + margin: 0 0 26px; + max-width: 18ch; +} +.lc-pagehero h1 .lc-accent { color: var(--red); } + +.lc-pagehero__lead { + font-size: clamp(1.05rem, 1.6vw, 1.32rem); + line-height: 1.6; + color: var(--on-ink-soft); + max-width: 52ch; + margin: 0; +} +.lc-pagehero__count { + margin: 30px 0 0; + font: 500 12.5px/1 var(--font-mono); + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--on-ink-faint); +} +.lc-pagehero__count span { color: var(--red); } + +/* Blog list section */ +.lc-journal { padding: clamp(64px, 9vw, 120px) 0 clamp(80px, 12vw, 150px); } + +/* ---- Featured post ---- */ +.lc-feature { + display: grid; + grid-template-columns: 1.05fr 0.95fr; + align-items: stretch; + gap: 0; + border-radius: 20px; + overflow: hidden; + background: var(--paper-1); + border: 1px solid var(--paper-line); + box-shadow: 0 30px 70px -46px rgba(11, 13, 18, 0.5); + text-decoration: none; + color: inherit; + transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); + margin-bottom: clamp(56px, 8vw, 96px); +} +.lc-feature:hover { + transform: translateY(-4px); + box-shadow: 0 44px 90px -46px rgba(11, 13, 18, 0.55); + color: inherit; +} +.lc-feature__media { + position: relative; + overflow: hidden; + min-height: 320px; + background: var(--ink-2); +} +.lc-feature__media img { + position: absolute; + inset: 0; + width: 100%; height: 100%; + object-fit: cover; + transition: transform 0.7s var(--ease); +} +.lc-feature:hover .lc-feature__media img { transform: scale(1.05); } +.lc-feature__body { + padding: clamp(30px, 4vw, 52px); + display: flex; + flex-direction: column; + justify-content: center; +} +.lc-feature__tag { + align-self: flex-start; + font: 500 11.5px/1 var(--font-mono); + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--red); + background: color-mix(in srgb, var(--red), transparent 90%); + border: 1px solid color-mix(in srgb, var(--red), transparent 74%); + padding: 7px 12px; + border-radius: 100px; + margin: 0 0 22px; +} +.lc-feature__title { + font-size: clamp(1.7rem, 3.1vw, 2.5rem); + line-height: 1.06; + color: var(--on-paper); + margin: 0 0 18px; +} +.lc-feature__excerpt { + font-size: clamp(1rem, 1.3vw, 1.12rem); + line-height: 1.6; + color: var(--on-paper-soft); + margin: 0 0 28px; + max-width: 52ch; +} +.lc-feature__meta { + display: flex; + align-items: center; + gap: 18px; + flex-wrap: wrap; + font: 500 13.5px/1 var(--font-mono); + color: var(--on-paper-soft); +} +.lc-feature__read { + color: var(--red); + font-family: var(--font-body); + font-weight: 600; +} +.lc-feature__read span { transition: transform 0.35s var(--ease); display: inline-block; } +.lc-feature:hover .lc-feature__read span { transform: translateX(5px); } + +/* ---- Grid + cards ---- */ +.lc-journal__head { margin-bottom: clamp(28px, 4vw, 44px); } + +.lc-journal__grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: clamp(24px, 3vw, 38px); +} + +.lc-post-card { + display: flex; + flex-direction: column; + border-radius: 16px; + overflow: hidden; + background: var(--paper-1); + border: 1px solid var(--paper-line); + transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease); +} +.lc-post-card:hover { + transform: translateY(-6px); + box-shadow: 0 30px 60px -40px rgba(11, 13, 18, 0.5); + border-color: color-mix(in srgb, var(--on-paper), transparent 82%); +} +.lc-post-card__media { + display: block; + aspect-ratio: 16 / 10; + overflow: hidden; + background: var(--ink-2); +} +.lc-post-card__media img { + width: 100%; height: 100%; + object-fit: cover; + transition: transform 0.6s var(--ease); +} +.lc-post-card:hover .lc-post-card__media img { transform: scale(1.06); } +.lc-post-card__body { + padding: clamp(22px, 2.4vw, 30px); + display: flex; + flex-direction: column; + flex: 1; +} +.lc-post-card__date { + font: 500 11.5px/1 var(--font-mono); + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--red); + margin-bottom: 14px; +} +.lc-post-card__title { + font-size: clamp(1.15rem, 1.6vw, 1.35rem); + line-height: 1.2; + margin: 0 0 12px; +} +.lc-post-card__title a { + color: var(--on-paper); + text-decoration: none; + transition: color 0.3s var(--ease); +} +.lc-post-card__title a:hover { color: var(--red); } +.lc-post-card__excerpt { + font-size: 0.98rem; + line-height: 1.6; + color: var(--on-paper-soft); + margin: 0 0 22px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} +.lc-post-card__read { + margin-top: auto; + font: 600 14px/1 var(--font-body); + color: var(--red); +} +.lc-post-card__read span { transition: transform 0.35s var(--ease); display: inline-block; } +.lc-post-card:hover .lc-post-card__read span { transform: translateX(5px); } + +/* Ink variant (used in "Continue lendo") */ +.lc-post-card--ink { + background: var(--ink-1); + border-color: var(--ink-line-2); +} +.lc-post-card--ink:hover { + border-color: color-mix(in srgb, #fff, transparent 78%); + box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7); +} +.lc-post-card--ink .lc-post-card__title a { color: #fff; } +.lc-post-card--ink .lc-post-card__title a:hover { color: var(--red-2); } + +/*============================================================== + ARTICLE DETAIL +==============================================================*/ +.lc-pagehero--article h1 { + font-size: clamp(2.1rem, 4.6vw, 3.7rem); + max-width: 24ch; +} +.lc-pagehero--article .lc-hero__eyebrow a { + color: var(--on-ink-faint); + text-decoration: none; + transition: color 0.3s var(--ease); +} +.lc-pagehero--article .lc-hero__eyebrow a:hover { color: var(--red); } + +.lc-article__meta { + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; + margin-top: 30px; + font: 500 14px/1 var(--font-mono); + color: var(--on-ink-soft); +} +.lc-article__avatar { + width: 40px; height: 40px; + border-radius: 50%; + object-fit: cover; + border: 1px solid var(--ink-line-2); +} +.lc-article__author { color: #fff; font-weight: 600; } +.lc-article__sep { color: var(--on-ink-faint); } + +.lc-article { + background: var(--paper); + color: var(--on-paper); + padding-bottom: clamp(70px, 10vw, 120px); +} +.lc-article__banner { + width: min(1000px, 92vw); + /* Overlap the ink→paper seam, but stay clear of the hero's bottom padding + (which also scales with vw) so meta ↔ banner keeps a positive gap. */ + margin: clamp(-56px, -5vw, -32px) auto 0; + border-radius: 18px; + overflow: hidden; + border: 1px solid var(--paper-line); + box-shadow: 0 40px 90px -50px rgba(11, 13, 18, 0.6); + position: relative; + z-index: 2; +} +.lc-article__banner img { display: block; width: 100%; height: auto; } + +/* Prose */ +.lc-article__body { + width: min(720px, 92vw); + margin: clamp(44px, 6vw, 72px) auto 0; + font-size: clamp(1.06rem, 1.25vw, 1.18rem); + line-height: 1.78; + color: color-mix(in srgb, var(--on-paper), transparent 8%); +} +.lc-article__body > *:first-child { margin-top: 0; } +.lc-article__body p { margin: 0 0 1.5em; } +.lc-article__body a { + color: var(--red); + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-thickness: 1px; +} +.lc-article__body a:hover { color: var(--red-2); } +.lc-article__body strong { color: var(--on-paper); font-weight: 600; } +.lc-article__body em { font-style: italic; } + +.lc-article__body h2, +.lc-article__body h3, +.lc-article__body h4, +.lc-article__body h5, +.lc-article__body h6 { + font-family: var(--font-display); + color: var(--on-paper); + line-height: 1.18; + letter-spacing: -0.02em; + scroll-margin-top: 90px; +} +.lc-article__body h2 { font-size: clamp(1.7rem, 2.6vw, 2.15rem); margin: 2em 0 0.7em; } +.lc-article__body h3 { + font-size: clamp(1.4rem, 2.1vw, 1.75rem); + margin: 1.9em 0 0.6em; + padding-left: 18px; + position: relative; +} +.lc-article__body h3::before { + content: ""; + position: absolute; + left: 0; top: 0.16em; + width: 4px; height: 0.82em; + border-radius: 2px; + background: var(--red); +} +.lc-article__body h4 { font-size: clamp(1.18rem, 1.6vw, 1.34rem); margin: 1.7em 0 0.5em; } +.lc-article__body h5 { + font-size: 1rem; + margin: 1.5em 0 0.4em; + font-family: var(--font-mono); + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--on-paper-soft); +} + +.lc-article__body ul, +.lc-article__body ol { margin: 0 0 1.5em; padding-left: 0; list-style: none; } +.lc-article__body li { position: relative; padding-left: 30px; margin: 0 0 0.7em; } +.lc-article__body ul > li::before { + content: ""; + position: absolute; + left: 6px; top: 0.62em; + width: 7px; height: 7px; + border-radius: 50%; + background: var(--red); +} +.lc-article__body ol { counter-reset: lc-ol; } +.lc-article__body ol > li { counter-increment: lc-ol; } +.lc-article__body ol > li::before { + content: counter(lc-ol); + position: absolute; + left: 0; top: 0.05em; + font: 600 13px/1.5 var(--font-mono); + color: var(--red); +} +.lc-article__body li ul, +.lc-article__body li ol { margin: 0.6em 0 0; } + +.lc-article__body blockquote { + margin: 1.8em 0; + padding: 6px 0 6px 26px; + border-left: 3px solid var(--red); + font-size: 1.15em; + line-height: 1.6; + color: var(--on-paper); + font-style: italic; +} +.lc-article__body img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.6em 0; } +.lc-article__body hr { border: 0; border-top: 1px solid var(--paper-line); margin: 2.4em 0; } +.lc-article__body code { + font: 500 0.9em/1 var(--font-mono); + background: color-mix(in srgb, var(--on-paper), transparent 92%); + padding: 0.2em 0.45em; + border-radius: 5px; +} + +/* ---- Author card ---- */ +.lc-author { + width: min(720px, 92vw); + margin: clamp(48px, 7vw, 80px) auto 0; + display: flex; + gap: clamp(20px, 3vw, 32px); + align-items: flex-start; + padding: clamp(28px, 3.4vw, 40px); + border-radius: 18px; + background: var(--paper-1); + border: 1px solid var(--paper-line); +} +.lc-author__avatar { + flex-shrink: 0; + width: 84px; height: 84px; + border-radius: 50%; + object-fit: cover; + border: 1px solid var(--paper-line); +} +.lc-author__kicker { + font: 500 11.5px/1 var(--font-mono); + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--red); + margin: 0 0 8px; +} +.lc-author__name { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0 0 12px; color: var(--on-paper); } +.lc-author__bio { font-size: 1rem; line-height: 1.65; color: var(--on-paper-soft); margin: 0 0 16px; } +.lc-author__social { display: flex; gap: 10px; } +.lc-author__social a { + display: inline-flex; + align-items: center; justify-content: center; + width: 38px; height: 38px; + border-radius: 50%; + border: 1px solid var(--paper-line); + color: var(--on-paper-soft); + font-size: 17px; + transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); +} +.lc-author__social a:hover { + color: #fff; + background: var(--red); + border-color: var(--red); +} + +/* ---- "Continue lendo" ---- */ +.lc-more { padding: clamp(70px, 10vw, 120px) 0; } +.lc-more .lc-head { margin-bottom: clamp(36px, 5vw, 56px); } +.lc-more .lc-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #fff; } +.lc-journal__grid--ink { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } + +/* ---- Responsive ---- */ +@media (max-width: 860px) { + .lc-feature { grid-template-columns: 1fr; } + .lc-feature__media { min-height: 240px; aspect-ratio: 16 / 9; } +} +@media (max-width: 560px) { + .lc-journal__grid { grid-template-columns: 1fr; } + .lc-author { flex-direction: column; } + .lc-article__meta { font-size: 12.5px; gap: 9px; } +} + +/*============================================================== + JOBS / CAREERS — "Coopere Conosco", aligned with the redesign +==============================================================*/ + +/* ---- Framed team photo ---- */ +.lc-jobs-figure { + width: min(880px, 100%); + margin: 0 auto clamp(40px, 6vw, 64px); + border-radius: 22px; + overflow: hidden; + border: 1px solid var(--ink-line-2); + background: var(--ink-2); + box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.8); +} +.lc-jobs-figure img { + display: block; + width: 100%; + height: auto; +} + +.lc-pagehero .lc-hero__actions { margin-top: clamp(30px, 4vw, 40px); } + +/* ---- Benefits grid ---- */ +.lc-perks { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: clamp(18px, 2.4vw, 26px); +} +.lc-perk { + position: relative; + padding: clamp(26px, 3vw, 34px); + border: 1px solid var(--paper-line); + border-radius: 18px; + background: var(--paper-1); + overflow: hidden; + transition: border-color 0.4s var(--ease), transform 0.5s var(--ease), + box-shadow 0.5s var(--ease); +} +.lc-perk::before { + content: ""; + position: absolute; + inset: 0 auto auto 0; + width: 100%; height: 3px; + background: linear-gradient(90deg, var(--red), transparent 70%); + transform: scaleX(0); + transform-origin: 0 50%; + transition: transform 0.6s var(--ease); +} +.lc-perk:hover { + transform: translateY(-5px); + border-color: color-mix(in srgb, var(--on-paper), transparent 80%); + box-shadow: 0 30px 60px -44px rgba(11, 13, 18, 0.5); +} +.lc-perk:hover::before { transform: scaleX(1); } +.lc-perk__icon { + width: 54px; height: 54px; + margin-bottom: 20px; + display: flex; align-items: center; justify-content: center; + border-radius: 14px; + background: color-mix(in srgb, var(--red), transparent 90%); + border: 1px solid color-mix(in srgb, var(--red), transparent 78%); + color: var(--red); + font-size: 24px; +} +.lc-perk h3 { + font-size: clamp(1.15rem, 1.7vw, 1.3rem); + color: var(--on-paper); + margin: 0 0 10px; +} +.lc-perk p { + color: var(--on-paper-soft); + font-size: 0.98rem; + line-height: 1.6; + margin: 0; +} + +/* ---- Info callout ---- */ +.lc-jobs-callout { + margin-top: clamp(30px, 4vw, 44px); + padding: 22px clamp(22px, 3vw, 30px); + display: flex; + align-items: center; + gap: 18px; + flex-wrap: wrap; + border: 1px solid var(--paper-line); + border-radius: 16px; + background: var(--paper-1); +} +.lc-jobs-callout > i { + font-size: 26px; + color: var(--red); + flex-shrink: 0; +} +.lc-jobs-callout p { + margin: 0; + color: var(--on-paper-soft); + font-size: 1rem; + line-height: 1.5; + flex: 1 1 300px; +} +.lc-jobs-callout code { + font: 500 0.88em/1 var(--font-mono); + color: var(--on-paper); + background: color-mix(in srgb, var(--on-paper), transparent 92%); + padding: 0.2em 0.45em; + border-radius: 5px; +} +.lc-jobs-callout__link { + margin-left: auto; + font: 600 14.5px/1 var(--font-body); + color: var(--red); + white-space: nowrap; +} +.lc-jobs-callout__link:hover { color: var(--red-2); } +.lc-jobs-callout__link span { display: inline-block; transition: transform 0.35s var(--ease); } +.lc-jobs-callout__link:hover span { transform: translateX(4px); } + +/* ---- Áreas de atuação ---- */ +.lc-tracks { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: clamp(18px, 2.4vw, 24px); +} +.lc-track { + position: relative; + display: flex; + flex-direction: column; + padding: clamp(28px, 3vw, 36px); + border: 1px solid var(--ink-line); + border-radius: 20px; + background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); + overflow: hidden; + text-decoration: none; + color: inherit; + transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); +} +.lc-track::before { + content: ""; + position: absolute; + inset: 0 auto auto 0; + width: 100%; height: 3px; + background: linear-gradient(90deg, var(--red), transparent 70%); + transform: scaleX(0); + transform-origin: 0 50%; + transition: transform 0.6s var(--ease); +} +.lc-track:hover { + transform: translateY(-5px); + border-color: var(--ink-line-2); + color: inherit; +} +.lc-track:hover::before { transform: scaleX(1); } +.lc-track__idx { + font: 500 12px/1 var(--font-mono); + color: var(--on-ink-faint); + letter-spacing: 0.12em; + margin-bottom: 20px; +} +.lc-track h3 { + font-size: clamp(1.3rem, 2vw, 1.6rem); + color: #fff; + margin: 0 0 14px; +} +.lc-track p { + color: var(--on-ink-soft); + font-size: 0.98rem; + line-height: 1.6; + margin: 0 0 22px; +} +.lc-track__tags { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 26px; +} +.lc-track__tags span { + font: 500 12px/1 var(--font-mono); + color: var(--on-ink-soft); + padding: 6px 11px; + border-radius: 100px; + border: 1px solid var(--ink-line-2); + background: rgba(255, 255, 255, 0.02); +} +.lc-track__cta { + margin-top: auto; + font: 600 14.5px/1 var(--font-body); + color: var(--red-2); +} +.lc-track__cta span { display: inline-block; transition: transform 0.35s var(--ease); } +.lc-track:hover .lc-track__cta span { transform: translateX(5px); } + +/* ---- A jornada ---- */ +.lc-journey { + list-style: none; + margin: 0; + padding: 0; + position: relative; + max-width: 820px; +} +.lc-journey::before { + content: ""; + position: absolute; + left: 26px; top: 12px; bottom: 12px; + width: 2px; + background: linear-gradient(180deg, + color-mix(in srgb, var(--red), transparent 30%), + var(--paper-line)); +} +.lc-journey__step { + position: relative; + display: grid; + grid-template-columns: 54px 1fr; + gap: clamp(18px, 3vw, 30px); + padding-bottom: clamp(34px, 5vw, 52px); +} +.lc-journey__step:last-child { padding-bottom: 0; } +.lc-journey__num { + position: relative; + z-index: 1; + width: 54px; height: 54px; + display: flex; align-items: center; justify-content: center; + border-radius: 50%; + font: 600 20px/1 var(--font-display); + color: #fff; + background: var(--red); + box-shadow: 0 12px 30px -12px var(--red-glow); +} +.lc-journey__body { padding-top: 4px; } +.lc-journey__body h3 { + font-size: clamp(1.25rem, 2vw, 1.55rem); + color: var(--on-paper); + margin: 0 0 10px; +} +.lc-journey__body p { + color: var(--on-paper-soft); + font-size: 1.02rem; + line-height: 1.65; + margin: 0 0 16px; + max-width: 56ch; +} +.lc-journey__links { + display: flex; + flex-wrap: wrap; + gap: 10px 20px; +} +.lc-journey__links a { + font: 600 14px/1 var(--font-body); + color: var(--red); + display: inline-flex; + align-items: center; + gap: 6px; +} +.lc-journey__links a::before { + content: "→"; + color: var(--red); + transition: transform 0.3s var(--ease); +} +.lc-journey__links a:hover { color: var(--red-2); } +.lc-journey__links a:hover::before { transform: translateX(3px); } + +/* ---- CTA final ---- */ +.lc-cta { + position: relative; + background: var(--ink); + color: var(--on-ink); + padding: clamp(80px, 12vw, 140px) 0; + overflow: hidden; + isolation: isolate; + text-align: center; +} +.lc-cta::before { + content: ""; + position: absolute; + inset: 0; + z-index: -2; + background-image: + linear-gradient(var(--ink-line) 1px, transparent 1px), + linear-gradient(90deg, var(--ink-line) 1px, transparent 1px); + background-size: 64px 64px; + mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 40%, transparent 100%); + -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 40%, transparent 100%); + opacity: 0.6; +} +.lc-cta::after { + content: ""; + position: absolute; + z-index: -1; + bottom: -40%; left: 50%; + width: 70vw; height: 70vw; + transform: translateX(-50%); + background: radial-gradient(circle, var(--red-glow), transparent 60%); + opacity: 0.4; + pointer-events: none; +} +.lc-cta__inner { + width: var(--shell); + margin-inline: auto; + display: flex; + flex-direction: column; + align-items: center; +} +.lc-cta .lc-eyebrow { color: var(--on-ink-faint); justify-content: center; } +.lc-cta h2 { + font-size: clamp(2.2rem, 5.5vw, 3.8rem); + color: #fff; + margin: 0 0 20px; +} +.lc-cta__lead { + font-size: clamp(1.05rem, 1.5vw, 1.25rem); + line-height: 1.6; + color: var(--on-ink-soft); + max-width: 54ch; + margin: 0 0 36px; +} +.lc-cta .lc-hero__actions { justify-content: center; } + +/* ---- Job sub-page back link ---- */ +.lc-article__back { + width: min(720px, 92vw); + margin: clamp(44px, 6vw, 68px) auto 0; +} + +/* ---- Article body: leading h1 ---- */ +.lc-article__body > h1:first-child { + font-family: var(--font-display); + font-size: clamp(1.9rem, 3.2vw, 2.5rem); + color: var(--on-paper); + letter-spacing: -0.02em; + line-height: 1.1; + margin: 0 0 0.7em; +} + +/* ---- Responsive ---- */ +@media (max-width: 900px) { + .lc-perks { grid-template-columns: repeat(2, 1fr); } + .lc-tracks { grid-template-columns: 1fr; } +} +@media (max-width: 560px) { + .lc-perks { grid-template-columns: 1fr; } + .lc-journey__step { grid-template-columns: 44px 1fr; gap: 16px; } + .lc-journey::before { left: 21px; } + .lc-journey__num { width: 44px; height: 44px; font-size: 17px; } + .lc-jobs-callout__link { margin-left: 0; } +} diff --git a/source/_layouts/footer.blade.php b/source/_layouts/footer.blade.php index ee8e31db..9cd7f7b2 100644 --- a/source/_layouts/footer.blade.php +++ b/source/_layouts/footer.blade.php @@ -1,62 +1,70 @@ - - - - - - - @yield('footer_scripts') + + + + + + + - @if ($page->production) - - @endif diff --git a/source/_layouts/header.blade.php b/source/_layouts/header.blade.php index 15db01b7..f49d5f23 100644 --- a/source/_layouts/header.blade.php +++ b/source/_layouts/header.blade.php @@ -1,9 +1,11 @@