/* =================================================================== PLUS MANAGEMENT ENGINEERS — design tokens Two modes: "trace" (warm trace-paper, default) and "blueprint" (cyanotype — the literal historical blueprint: white linework on Prussian blue) toggled via [data-mode] on . =================================================================== */ :root{ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Source Serif 4', Georgia, serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --gap-edge: clamp(20px, 5vw, 64px); --ruler-w: 34px; --speed: 0.5s; } body[data-mode="trace"]{ --paper: #EDEAE0; --paper-2: #E2DECF; --paper-3: #D9D4C1; --ink: #1E1C17; --ink-soft: #5B5648; --ink-faint: #948D78; --hair: #BDB6A1; --blue: #2E5266; --blue-soft: #3F6E86; --red: #B6492E; --paper-rgb: 237,234,224; } body[data-mode="blueprint"]{ --paper: #16334B; --paper-2: #123049; --paper-3: #0E2A41; --ink: #F1F4EC; --ink-soft: #C7D6DE; --ink-faint: #7FA0B4; --hair: #3C6685; --blue: #9FD3EA; --blue-soft: #C9E7F4; --red: #FF9466; --paper-rgb: 22,51,75; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.5; transition: background var(--speed) ease, color var(--speed) ease; padding-left: var(--ruler-w); overflow-x: hidden; } a{ color: inherit; } .mono{ font-family: var(--font-mono); } h1,h2,h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; } p{ margin: 0; } ::selection{ background: var(--blue); color: var(--paper); } /* focus visibility */ a:focus-visible, button:focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===================== RULER MARGIN ===================== */ .ruler{ position: fixed; top: 0; left: 0; bottom: 0; width: var(--ruler-w); border-right: 1px solid var(--hair); background-image: repeating-linear-gradient( to bottom, var(--ink-faint) 0px, var(--ink-faint) 1px, transparent 1px, transparent 40px ); background-position: 0 0; z-index: 5; pointer-events: none; } .ruler::before{ content: ""; position: absolute; top:0; left: 0; right:0; bottom:0; background-image: repeating-linear-gradient( to bottom, var(--hair) 0px, var(--hair) 1px, transparent 1px, transparent 8px ); opacity: .5; } /* ===================== HEADER ===================== */ .site-header{ position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--gap-edge); background: rgba(var(--paper-rgb), 0.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair); } .logo{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .logo-mark{ font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--red); display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 50%; } .logo-text{ font-family: var(--font-display); font-size: 15px; letter-spacing: 0.01em; } .logo-text strong{ font-weight: 700; } .site-nav{ display: flex; gap: 28px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; } .site-nav a{ text-decoration: none; color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s, color .2s; } .site-nav a:hover{ color: var(--ink); border-color: var(--red); } .header-actions{ display: flex; align-items: center; gap: 16px; } .mode-toggle{ display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--hair); border-radius: 999px; padding: 6px 12px 6px 6px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); } .mode-toggle-dot{ width: 14px; height: 14px; border-radius: 50%; background: var(--blue); transition: background var(--speed); } body[data-mode="blueprint"] .mode-toggle-dot{ background: var(--ink); } .btn{ font-family: var(--font-mono); font-size: 13px; text-decoration: none; padding: 10px 18px; border-radius: 2px; display: inline-block; white-space: nowrap; transition: transform .15s ease, background .2s, color .2s, border-color .2s; } .btn:hover{ transform: translateY(-1px); } .btn-solid{ background: var(--ink); color: var(--paper); border: 1px solid var(--ink); } .btn-solid:hover{ background: var(--red); border-color: var(--red); color: #fff; } .btn-line{ border: 1px solid var(--ink); color: var(--ink); } .btn-line:hover{ border-color: var(--red); color: var(--red); } .btn-ghost{ color: var(--ink-soft); border: 1px solid transparent; padding-left: 0; padding-right: 0;} .btn-ghost:hover{ color: var(--red); } /* ===================== SHEET / SECTION LAYOUT ===================== */ .sheet{ border-bottom: 1px solid var(--hair); position: relative; } .sheet-dark{ background: var(--paper-2); } .sheet-tight .sheet-frame{ padding-bottom: 56px; } .sheet-frame{ max-width: 1180px; margin: 0 auto; padding: 96px var(--gap-edge); } .eyebrow{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 18px; display: inline-block; border-bottom: 1px solid var(--hair); padding-bottom: 6px; } .section-title{ font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin-bottom: 22px; } .section-lede{ max-width: 640px; font-size: 18px; color: var(--ink-soft); margin-bottom: 16px; } /* ===================== HERO ===================== */ .hero{ padding-top: 8px; } .hero .sheet-frame{ padding-top: 64px; padding-bottom: 80px; } .hero-title{ font-size: clamp(44px, 8vw, 92px); line-height: 0.98; margin: 18px 0 28px; max-width: 14ch; } .hero-sub{ max-width: 540px; font-size: 19px; color: var(--ink-soft); margin-bottom: 36px; } .hero-actions{ display: flex; align-items: center; gap: 28px; margin-bottom: 72px; flex-wrap: wrap; } .title-block{ margin: 0; margin-left: auto; max-width: 420px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; } .title-block > div{ border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); padding: 10px 14px; min-width: 0; } .title-block > div:nth-child(2n){ border-right: none; } .title-block dt{ font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 4px; } .title-block dd{ margin: 0; font-family: var(--font-mono); font-size: 13px; overflow-wrap: break-word; word-break: break-word; } /* ===================== LEGEND STRIP (marquee) ===================== */ .legend-strip{ border-bottom: 1px solid var(--hair); overflow: hidden; background: var(--ink); color: var(--paper); padding: 12px 0; } .legend-track{ display: inline-flex; white-space: nowrap; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; gap: 14px; animation: scroll-left 32s linear infinite; } .legend-track span{ opacity: .85; } @keyframes scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } /* ===================== SERVICES GRID-PLAN ===================== */ .grid-plan{ margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); } .room{ border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 34px 28px; position: relative; transition: background var(--speed); } .room:hover{ background: rgba(var(--paper-rgb), 0.4); } .room:nth-child(1){ transform: translateY(-6px); } .room:nth-child(4){ transform: translateY(8px); } .room:nth-child(5){ transform: translateY(-4px); } .room-ref{ font-size: 13px; color: var(--red); margin-bottom: 14px; } .room h3{ font-size: 19px; margin-bottom: 10px; line-height: 1.2; } .room p:not(.room-tags){ color: var(--ink-soft); font-size: 15px; margin-bottom: 16px; } .room-tags{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); } /* ===================== EXPLODED ISOMETRIC DIAGRAM ===================== */ .exploded-wrap{ margin-top: 40px; display: flex; flex-direction: column; align-items: center; } .exploded{ width: 100%; max-width: 760px; height: auto; overflow: visible; } .exploded .layer polygon{ fill: rgba(var(--paper-rgb), 0.0); stroke-width: 1.6; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .8s ease; } .exploded .layer path{ fill: none; stroke-width: 1; opacity: .55; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); } .layer-arq polygon{ stroke: var(--ink-soft); fill: rgba(var(--paper-rgb), 0.55); } .layer-arq path{ stroke: var(--ink-soft); } .layer-mep polygon{ stroke: var(--red); fill: rgba(182,73,46,0.06); } .layer-mep path{ stroke: var(--red); } .layer-est polygon{ stroke: var(--blue); fill: rgba(46,82,102,0.08); } .layer-est path{ stroke: var(--blue); } .layer-label{ font-size: 11px; letter-spacing: 0.03em; fill: var(--ink-faint); transition: opacity .6s ease; } .leader{ stroke: var(--ink-faint); stroke-width: 1; opacity: .6; } .node{ r: 3.2; fill: var(--red); opacity: 0; transition: opacity .6s ease, r .6s ease; } /* default = exploded state */ .layer-arq{ transform: translateY(0) rotate(1.1deg); transform-origin: 300px 220px; } .layer-mep{ transform: translateY(0) rotate(-0.7deg); transform-origin: 300px 300px; } .layer-est{ transform: translateY(0); } .exploded .layer{ transition: transform 1.1s cubic-bezier(.2,.7,.2,1); } /* coordinated state, triggered by JS via .is-coordinated on svg */ #explodedSvg.is-coordinated .layer-arq{ transform: translateY(100px) rotate(0deg); } #explodedSvg.is-coordinated .layer-mep{ transform: translateY(50px) rotate(0deg); } #explodedSvg.is-coordinated .layer-est{ transform: translateY(0); } #explodedSvg.is-coordinated .node{ opacity: 1; } #explodedSvg.is-coordinated .layer-label{ opacity: .45; } .exploded-caption{ margin-top: 18px; font-size: 12px; color: var(--ink-faint); text-align: center; } /* ===================== LOD PROCESS LIST ===================== */ .lod-list{ list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid var(--hair); } .lod-list li{ display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--hair); align-items: baseline; } .lod-num{ font-size: 13px; color: var(--blue-soft); } .lod-list h3{ font-size: 20px; margin-bottom: 8px; } .lod-list p{ color: var(--ink-soft); max-width: 60ch; } /* ===================== STACK GRID ===================== */ .stack-grid{ margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; } .stack-cat{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--red); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); } .stack-col ul{ list-style: none; margin: 0; padding: 0; } .stack-col li{ font-size: 14.5px; color: var(--ink-soft); padding: 6px 0; } /* ===================== PROJECTS TABLE ===================== */ .index-table{ width: 100%; border-collapse: collapse; margin-top: 48px; font-size: 15px; } .index-table th{ text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); padding: 10px 14px; border-bottom: 1px solid var(--ink); } .index-table td{ padding: 16px 14px; border-bottom: 1px solid var(--hair); color: var(--ink-soft); } .index-table tr td:nth-child(2){ color: var(--ink); font-weight: 500; } .row-placeholder td{ color: var(--ink-faint) !important; font-style: italic; font-weight: 400 !important; letter-spacing: 0.02em; } .table-note{ margin-top: 18px; font-size: 12px; color: var(--ink-faint); } /* ===================== SOBRE / SPLIT ===================== */ .sheet-frame-split{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; } .sheet-frame-split .section-lede{ max-width: 100%; margin-bottom: 18px; } .credentials{ margin: 0; border-top: 1px solid var(--hair); } .credentials > div{ padding: 16px 0; border-bottom: 1px solid var(--hair); } .credentials dt{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue-soft); margin-bottom: 5px; } .credentials dd{ margin: 0; font-size: 15px; } /* ===================== CONTACT ===================== */ .contact-actions{ display: flex; gap: 18px; flex-wrap: wrap; margin: 40px 0 56px; } .title-block-contact{ margin-left: 0; max-width: 460px; grid-template-columns: 1fr; } .title-block-contact > div{ border-right: none; } /* ===================== FOOTER ===================== */ .site-footer{ background: var(--ink); color: var(--paper); } .footer-frame{ padding-top: 48px; padding-bottom: 36px; } .footer-legal{ border-bottom: 1px solid rgba(237,234,224,0.2); padding-bottom: 28px; margin-bottom: 24px; max-width: 720px; } .footer-legal-title{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue-soft); margin-bottom: 10px; } .footer-legal p{ font-size: 13px; line-height: 1.6; opacity: .82; } .todo{ background: rgba(255,148,102,0.22); color: var(--red); padding: 1px 5px; border-radius: 2px; font-family: var(--font-mono); font-size: 12px; } .footer-legal-links{ display: flex; gap: 12px; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; } .footer-legal-links a{ text-decoration: underline; text-underline-offset: 3px; opacity: .85; } .footer-legal-links a:hover{ opacity: 1; color: var(--blue-soft); } .footer-legal-links span{ opacity: .4; } .footer-bottom{ display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; } .footer-stamp-row{ display: flex; align-items: center; gap: 14px; } .footer-stamp{ width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(237,234,224,0.4); transform: rotate(-6deg); filter: saturate(0.6) contrast(1.05); flex-shrink: 0; } .footer-bottom p{ font-size: 13px; opacity: .8; } .rev-table{ border-collapse: collapse; font-size: 11px; } .rev-table th, .rev-table td{ border: 1px solid rgba(237,234,224,0.25); padding: 6px 12px; text-align: left; opacity: .85; } /* ===================== LEGAL DOC PAGES ===================== */ .legal-doc{ margin-top: 48px; max-width: 760px; } .legal-doc section{ padding: 26px 0; border-bottom: 1px solid var(--hair); } .legal-doc section:first-child{ padding-top: 0; } .legal-doc h3{ font-size: 19px; margin-bottom: 10px; } .legal-doc p{ color: var(--ink-soft); font-size: 16px; max-width: 68ch; } .legal-doc a{ color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .legal-disclaimer{ margin-top: 44px; max-width: 760px; border: 1px dashed var(--hair); padding: 18px 20px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; } @media (max-width: 880px){ .site-header{ flex-wrap: wrap; } .site-nav{ order: 3; flex-basis: 100%; overflow-x: auto; gap: 20px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--hair); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .site-nav::-webkit-scrollbar{ display: none; } .site-nav a{ flex-shrink: 0; } .sheet-frame{ padding: 64px var(--gap-edge); } .grid-plan{ grid-template-columns: 1fr; } .room:nth-child(n){ transform: none; } .stack-grid{ grid-template-columns: 1fr 1fr; } .sheet-frame-split{ grid-template-columns: 1fr; gap: 40px; } .lod-list li{ grid-template-columns: 1fr; gap: 6px; } .title-block{ margin-left: 0; } .index-table{ font-size: 13px; } .index-table th:nth-child(3), .index-table td:nth-child(3){ display: none; } } @media (max-width: 560px){ :root{ --ruler-w: 18px; } .header-actions .mode-toggle-label{ display: none; } .stack-grid{ grid-template-columns: 1fr; } .hero-actions{ gap: 16px; } .index-table th:nth-child(4), .index-table td:nth-child(4){ display: none; } .site-header{ padding: 14px 16px; gap: 10px; } .logo{ gap: 8px; min-width: 0; } .logo-mark{ width: 24px; height: 24px; font-size: 17px; flex-shrink: 0; } .logo-text{ white-space: nowrap; font-size: 14px; } .logo-sub{ display: none; } .header-actions{ gap: 8px; } .mode-toggle{ padding: 6px; } .btn{ padding: 9px 13px; font-size: 12px; } }